Document Structure and Basic Tags

There are four tags that that are used to construct a basic HTML document. They are <html>, <head>, <title>, and <body>.

The <html>...</html> tag pair encloses the entire document, that is, the start tag is placed at the beginning of the document and the closing tag at the very end of the document. It identifies the document to be an HTML document.

Structurally, an HTML document is made up of two parts: the HEAD and the BODY. The HEAD part contains elements that are not displayed by the browser while the BODY part contains whatever is viewed by the user.

The HEAD element is formed by <head>...</head> tag and it contains some reference and instructional elements, such as those for styles, scripts and meta tags, that are not important to us at this initial stage. The only content of the HEAD that we will see here is the TITLE.

The <title>...</title> tag defines the TITLE of your document. The content of this tag is displayed in the title bar at the very top of the browser window. Make sure to use a meaningful title. note

Finally, the <body>...</body>tag contains the entire viewable part of the document.

Structure of an HTML Document

<html>

<head>
<title>Place TITLE here</title>
</head>

<body>
Place the contents of the document here
</body>

</html>

note

The structurenan HTML document is as shown in the box on the right. Believe it or not, you are now ready to create your first HTML document.

Creating a Basic HTML Document

The code that creates an HTML document is written in plain text format and it is referred to as the source code, or simply the source.

To create an HTML document first open a simple text editor such as Notepad of Windows and write the basic layout as shown above. Insert the title and the body content at the appropriate places. Finally, save the file. When you save the file, you can give it any name of your choice, but the extension must be either .htm or .html. For example, if you choose a file name ex01, then you have to save it as ex01.htm or ex01.html, and that's it.

As a first exercise, highlight and copy Example 1 below. Then,
- open a new "Text dodument" with notepad.
- Paste the content you have copied, (inside notepad right-click and select paste).
- Click on File then Save As..
- Make sure that "Save as type" option is set to 'All files' (NOT 'Text Documents(.txt)') - In the 'File name' box type ex01.htm - Take note of the folder where it is saved. (Usually 'My documents' or 'Desktop'). - Click on 'Save'

Now, look for your saved file and double-click on it. There you go - you have just created your first HTML web page, though it doesn't look anywhere near what is shown here.

Example 1

  <html>
  <head>
  <title>My First Web Page</title>
  </head>
  <body>

  Welcome To My First HTML Document.

  Up to now I have learned, among other things,
     1. what tags are,
     2. that an HTML document is made up of tags and their contents,
     3. the structure of an HTML document consists of the HEAD and the BODY parts.

  Everything seems to be very clear.  I am even writing my first document.

  But, while I have taken extra effort to format the appearance of my text, 
  why is the browser showing it only in a few lines without paragraphs and 
  line breaks?? I hope I will get the answers soon.

  </body>
  </html>

Alternatively, you may look at it clicking here.

Why is the document not well formatted and does't appear just like it is written? The reason is that the browser ignores any blank spaces or lines that appear in the source text. That is, spaces, line feeds, and carriage returns are automatically compressed into a single space when the HTML document is displayed in a browser. Also, the browser will do a word-wrap at the end of a line; word wrapping can occur at any point in your source file depending on the width of the browser window.

Next we will see some common tags and make our example document look nicer.

A final note - you can view the source code of any web page to see how that page is written. If you are using Internet Explorer as your browser, select 'source' from the 'view' menu of the browser. Alternatively, you may right-click anywhere in the page and select the 'view source' option.

The next page introduces frequently used tags

TOP