HTML File Structure
Overview of the basic structure of the html code
Hypertext Markup Language (HTML) describes the default way of encoding HTTP message bodies. In other words, HTML consists of a standard set of rules that are to be followed while writing content for a web page. These rules consist of 'markup' or special codes in the text that specify just how the output text should look. The web browser interprets the codes and prints the page out according to the instructions embedded into its content. What we see on the browser is the decoded page. To see the coded page, all you have to do is go to the 'View' menu in Internet Explorer while browsing and click on 'Source'. A notepad window containing the original file with all the HTML markup will pop up. As you can see from the screenshot below this paragraph, HTML markup can get pretty complex.
ScreenShot 3a: A document with html coding
An html document should be saved with the extension '.html' or '.htm'. HTML tags - the actual markup or coded rules within the file - are enclosed between less than symbols (<) and greater than symbols (>). Each time the interpreter of an HTML document (such as a browser) sees these symbols, it takes whatever is in between them as commands rather than plain text. Most tags have attributes. Attributes allow users to choose how the tags behaves. For example, the '<p>' tag is used to denote a paragraph while '<p align=center>' denotes a center aligned paragraph. Align is an attribute for the <p> tag.
We just learnt that html tags are always enclosed between greater than and less than symbols and that the browser assumes that anything in between these symbols is a command. So, what happens if you want to type just a less than symbol? How can you prevent the browser from taking this as the start of a command? The characters "<" should be substituted for actual less than signs in the content while ">" should be substituted for greater than signs. Corresponding symbols and characters are substituted for any set of characters that are preceded by an ampersand and end with a semicolon. If you want to put an actual ampersand in the content, you will have to use the directive "&". Most special characters such as the copyright symbol (© - ©) or the British pound symbol (£ - £)may also be written using this sort of notation. Also, most html tags are used as a pair of starting and ending tags in the following way:
<htmlDirective> A chunk of text </htmlDirective>
The phrase 'A chunk of Text' is enclosed within the same HTML directive; Only, the second directive has a back slash (/) symbol right after the less than symbol and before the name. This is a way of indicating that the entire chunk should be processed a certain way.
Another special feature of HTML pages is that adjacent series of one or more spaces, tabs, and carriage returns without any non-space characters in between them are substituted by a single space. Special markup has to be used to start new lines or insert more than one space at a single spot. The HTML file has the following basic structure:
An optional initial line that indicates the version of HTML coding used.
The entire document is enclosed in a pair of <html> tags.
A header - The header contains the title of the document - this appears as the title of the Internet Browser window when the document is viewed, meta content like keywords that describe the content or subject of the document, programs that check form fields and other entities. The header is enclosed between a pair of <head> tags.
A body - The body of the HTML document is enclosed in a pair of <body> tags. The content enclosed in the body tags is what the user sees on the Internet Browser. All frames, images, tables, forms, and formatted text should be enclosed between the body tags.
Let us construct a very basic HTML from what we have learnt so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Flowers - Your Online Florist</title> <meta name="keywords" content="flowers, roses, dahlia, tulips, birthday, present"> </head> <body> Online Florist - Flowers For All Occasions </body> </html>
The simple html page above simply contains a single line of text. If you want to view it using a browser, simply copy and paste all the code into the notepad editor. Click on File -> Save As. Select "All Files" next to 'Save as Type:' and enter the filename "florist.html" next to "File Name". Now, go to Internet Explorer and open use the File -> Open command to open the file you just saved. The output looks like this:
ScreenShot 3a: The Florist HTML Page
This is too basic to be really useful; we'll have to do more to complete our document. Perhaps add tables, images, and a paragraph or two of text. Let us see how we can add different elements to our HTML page:
