Web Page Structure

Web browsers can understand a simple text document written using a tool like notepad.

To see this, please open your notepad or similar simple text editor, and write a sentence like: Hi, I’m learning HTML.  Your screen may look something like the following:

Save the file naming it something like, myTextDoc1.txt

Now open that document with your browser and see the result which simply shows that message.

Now let’s do the following steps for converting this file to HTML:

  • Open the file myTextDoc1.txt with your simple text editor.
  • Rename the file, by selecting file>save as and replace the file name with: “myHTMLPage.html”, make sure to put the double quotes around the name to force the html extension rather than the txt.
  • Click on the saved file to directly open it by the browser.
  • You will see the same result.
  • You now got your html file (or html web page).
  • HTML pages may have either the extension .html or .htm where both are acceptable.

 

Now let’s enhance our file by adding some HTML Tags with these simple steps:

  • Open the html file (myHTMLPage.html) in the text editor and the HTML tags shown in the picture to it:

  • Now save it and open it in the browser.
  • The results should be something like the following capture:

 

What we done is adding some html tags to tell the browser how to display that text.  Namely we added the <h1> tab to tell the browser that the sentence “Hi, I’m learning HTML” is a page header, and we didn’t forget to close that tag by using the backslash like: </h1>, so that the browser knows where to stop considering that header.  We also used the tag <p> to tell the browser that the enclosed text is a paragraph.
The browser understood the tags and responded with the corresponding web page.

Now let’s look at a basic structure for a web page:

<!doctype html>
<html>
<head>
Where header tags like the page title goes here.
</head>
<body>
This is the body of the web page where all the contents are described.
</body>
</html>

Now let’s apply this on our simple web page.  Open that page in your text editor and modify it to look like:
   
<!doctype html>   
<html>
<head>
<title>My Learning Plan</title>
</head>
<body>
<h1>Hi, I'm learning HTML.</h1> <p>I will use it for developing web pages. 
It is very easy and simple.</p> <p>This is part of my learning plan.</p>
</body>
</html>

By this it became more standard and acceptable by all types of browsers and devices.

We will go through more advanced page structure in the next sections of this tutorial.