How to create a basic HTML page

Posted by On 9/10/2013

Let us see how to create a basic html page here.

In html everything is organized in tags/elements.  A tag is a character or a set of characters enclosed with in a combination of <> (less than and greater than) characters.  For example say, <html> is a tag.  In a proper html page every opening tag should be closed.

Confusing? Just look into the below tags for html.

<html>
</html>

Say the first one, <html> is a opening tag.  The next one </html> is a closing tag.  Any closing tags will be the same as the opening with / symbol placed next to < (less than character).

Note: However this is not the case with all the tags.  There are some tags those doesn’t require this closing procedure. Don’t worry.  You can learn those things in later posts.  For the time being just keep this format in mind.

Structure of an html page

This is a basic example of an html page.

<!DOCTYPE html>
<html>
<body>
Hello World!
</body>
</html>

Just type the above code in simple notepad file and save it as "helloworld.html" and open that file in your browser.  Just know that all of your html pages should be saved with ".html" extension.

Hurray!  You have created your first html page.

Now let us take a close insight of the tags we have written in our html page.

  1. First one you see is <DOCTYPE html> and it should be the first line in your html page.  This is not an html tag but it tells the browser what version of html it is.  In the earlier versions of html you have too many declarations to write into this doctype , but thanks to HTML5 it is just <DOCTYPE html>.  And it don’t have any end tag and also not case sensitive.  So you can take the flexibility to write DOCTYPE or doctype.
  2. Second we can see <html> tag which comes with a closing tag </html> and all your page content should be kept within these tags.
  3. Third you see <body> tag which tells the content included within them is the actual page content.

Here goes another version of the above html page with page title.  This page title is what will be displayed at the top of your browser screen when you open up this page in browser.

<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
</head>
<body>
Hello World!
</body>
</html>
  1. You see <head> tag above the starting of <body> tag and the <title></title> tag placed within the <head> tag. Any content placed between <title></title> will be your page title.
  2. Just note down all the html tags should be properly nested.  Like the inner most opening tag should be closed first.  See the </body> tag is placed above the </html>.  Also the </head> is placed above the <body> tag.

No comments:

Post a Comment

Contact Form

Name

Email *

Message *