| Home Web | Top Bottom | Contents Prev Next |
The <html> Tag
The <head> and <body> Tags
The <title> Tag
The Body Section
Example
Comments
All web pages have the same basic structure. We begin with a doctype line. Immediately after the doctype line is an <html> tag that marks the beginning of your HTML/XHTML code. The very last line is the closing tag for the <html> tag.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> The page's content goes here. </html>
The HTML code is divided into two sections: a head section and a body section. The head section contains some tags that provide information about the HTML page, and never contains anything that is actually displayed on the page. The body section contains all of the content that is displayed on the page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> The page's head section goes here. </head> <body> The page's body section goes here. </body> </html>
In the head section, always include a title. The title is not displayed as part of the web page: it appears in the browser's title bar, and it's also the description that's saved if a user saves your page in his favorites (MSIE) or bookmarks it (Netscape).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Put your title right here</title> </head> <body> The page's body section goes here. </body> </html>
In the body section, you'll place the text of the page plus tags for marking up the structure of the page. Here's an example of a complete HTML file with a title and a brief paragraph.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Put your title right here</title> </head> <body> <p> The text for your page goes here. </p> </body> </html>
Within these pages, I'll display HTML code in a textarea box. Click on the Display button to see the page displayed in a popup window. You can make changes to the code and display the page after your changes have been made. If you want to copy-and-paste the code into your editor, click on the Select button to select all of the text in the textarea box and then type Ctrl-C to copy it into the clipbox. You can then paste it into your editor and save it.
When you display this page, be sure to notice where the title is displayed.
The WDG (Web Design Group) validator is a very useful tool that you should learn to use. The validator compares your code to the HTML standard, and points out any errors you may have made. Try validating the HTML (see instructions below). Try introducing some errors (misspell some tags or something of that nature) and see what happens when you validate it.
Comments are lines that you can enter that are not displayed by the browser. You can (and should!) use comments to make notes about your code so that you can understand it more easily later. You can also use comments to help divide your code into recognizable groupings.
An HTML comment begins with <!-- and ends with -->. You can include anything you like in the comments with one exception: the comment is not allowed to contain two hyphens in succession: --. Here's an example of some code that includes comments:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <!-- Begin head section --> <head> <title>Put your title right here</title> </head> <!-- Begin body section --> <body> <!-- This is a paragraph --> <p> The text for your page goes here. </p> </body> </html>
Try entering some comments in the above textarea box. Verify that they are not displayed when you display the page. Try coding two or more hyphens in succession within a comment and see what happens when you try to validate the code.
| Home Web | Top Bottom | Contents Prev Next |