Code your first web page

beginner html tutorial

Beginner HTML Tutorial 

If you are new to webdesign and you have never built a Web page before, learning HTML can be a scary thing. With this  easy to follow tutorial , you will learn how to write an HTML page from scratch within minutes.

By following this tutorial you will :

  • 1# Get familiar with HTML.
  • 2# Write your first <!DOCTYPE> Declaration.
  • 3# Learn and write HTML Tags.
  • 4# Create a HTML web page.

We will take things step by step and i will provide live example together with all the code you will need. By the end of  this tutorial you will have created your first HTML web page so, lets get started!

First things first, before we start you will need a text editor and a browser. I suggest that you download notepad ++ and use it (windows users) its free, light and it does the job.
Also, before we even start you should create a new folder on your desktop (or anywhere that you like) and name it “my first website“. 

Lets say a few things about HTML first.

What is HTML?

HTML is a language for describing web pages.

  • HTML stands for Hyper Text Markup Language
  • HTML is a markup language
  • A markup language is a set of markup tags
  • The tags describe document content
  • HTML documents contain HTML tags and plain text
  • HTML documents are also called web pages

HTML Tags

HTML markup tags are usually called HTML tags

  • HTML tags are keywords (tag names) surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, with a forward slash before the tag name
  • Start and end tags are also called opening tags and closing tags

Since the early internet there have been many HTML versions, the newest version is HTML 5 so lets create one of those html5 pages … let the fun begin.

Beginner HTML Tutorial start

step 1# Create a new document and declare it

Open your text editor and create new document file>new than right on start type :

<!DOCTYPE html>

By typing this declaration we let the browsers know what version of HTML we are using.

step 2# Add some tags and content to your web page

Next we are going to use some TAGS to let the browser know what we are about.

Right beneath our declaration we are going to open some HTML tags like this:

<html></html>

Everything that we put in between those tags will be the content of our web page. So every html web page starts  with <html> and ends with </html>tag.

The basic page should also have a head and body tag, where in the head we will define the title and in the body of the document we will add some content.

Inside the above html tags we are going to add <head></head> and <body></body> tags.

so right now we have something that looks like this:

<!DOCTYPE html>
<html>

<head> </head>

<body> </body>

</html>

 

Our next tag is going to tell the browser what our page is called,and we will put this tag between the <head> tags that we already have there, the tag for the title would be:

<title>my first website</title>

between the tags we type “my first website” so again the complete code should look something like this:

<!DOCTYPE html>
<html>

<head>
<title> my first website </title>
</head>

<body> </body>

</html>

So far the browser will understand that this is an HTML5 document and its title is “my first website

Next step should be adding some content to our <body> tag. Lets start with typing a heading for our content so inside heading tag we are going to write :

<h1>my first page</h1>

So right now now we have a heading. lets add one paragraph beneath as well :

<p> html is not hard </p>

the code until now should look something like this:

<!DOCTYPE html>
<html>
<head>
<title> my first website </title>
</head>
<body>
<h1> my first page </h1>
<p> html is not hard </p>
</body> 
</html>

step 3# Save your work and check your page

Once we have done all of the coding we can save it and view it in our browser, but.. in order for a browser to recognize our page it must have an appropriate extension, so:

1# click on save as
2# Choose the folder “my first website
3# Name it index.html  and save it.
4# Double click the file inside the folder
5# Enjoy your first HTML page.

Beginner HTML Tutorial End

This is how it should look in your browser. you can check the HTML code and the Browser look by switching between the HTML/RESULT tabs below:

Check out this Pen!

In this example we declared the document as html5 and we used the following tags in this order.

Html tag <html>
Head tag <head>
Title tag <title>
Body tag <body>
Heading tag <h1>
Paragraph tag <p>

This concludes the Beginner HTML tutorial – Code your first web page

Go to the tutorial part 2 

check more tutorials here Tutorials

Nikola Petrovic
Get in Touch

Nikola Petrovic

Hi there. My name is Nikola,
I speak English, Greek and Serbian.
As a Web Producer i can deal with almost anything web design & development related.
As a freelancer, I charge only a small portion of the money you would pay to agencies to create your website. Affordable web design doesn’t mean that it will lack any of the advanced features of today’s web technology. We just cut out the cost of the middle man.
Feel free to request a free quote using the form on the right or the one bellow.
Nikola Petrovic
Get in Touch