Web based School

First Web Page

It is now time to create your first Web page and view it in your browser. This page isn't very fancy, but it will familiarize you with the process of coding, editing, saving, and retrieving a page for display in your browser. So, open the Notepad editor and enter the text and code shown in the following listing.

(The XML declaration, Document Type Definition, and HTML namespace specifications have been left out of the examples in order to focus on the XHTML coding. They should be included on this and all subsequent Web pages.)

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


This is my first attempt at creating a Web page. I don't quite understand yet what I'm doing, but its seems easy enough. Perhaps when I learn a few more XHTML tags and attributes, I'll start to get comfortable and can dazzle you with my skills.

</body>
</html>

When entering the text paragraph it is not necessary to type it line for line as in the example. If your editor permits word wrapping you can take advantage of that; otherwise, and perhaps preferably, you can enter line breaks to maintain a consistent editing format. Remember, the browser ignores any spaces, tabs, and blank lines you enter in the editor, so type the information in your preferred readable manner.

XHTML Comments

It is usually a good idea to place comments in your Web document to describe its various sections. Comments are general descriptions or explanations of XHTML code. These serve as useful reminders of the purposes or contents of sections of code when you or someone else returns at a later time to edit the document. In the above example, a general comment has been placed at the beginning of the <body> section.

Comments are coded between a pair of  tags. These tags can enclose a single-line comment as illustrated above, or they can enclose multiple lines of XHTML coding. Any code or text appearing between these symbols is ignored by the browser and does not show up on the page.

Besides their use for including comments in a document, comment tags can be used to temporarily suspend browser display of a section of code. This purpose is often useful in "debugging" your page, that is, in trying to discover errors by selectively removing sections of code from display until the problem is isolated.

A second method of commenting a small section of HTML code is by using the exclamation mark (!) within a tag. This symbol can be used to suspend display of an entire tag -- by adding it to the beginning of the tag -- or one of its attributes -- by adding it in front of the attribute. In the following example this symbol is used to remove formatting from the line of text by commenting its surrounding <span> tag.

<!span style="font-family:arial; color="red">
Format this line in red.
<!/span>

Incidentally, the exclamation mark is not a formal, approved comment symbol. Any other character can be used since it simply corrupts the tag name or attribute name making it meaningless to the browser. An exclamation mark is used here simply for compatibility with the standard comment tag.

Saving and Displaying Your Web Page

After coding the page, save the document so that it can be retrieved by your browser. Where you save the document depends on your development environment. If you are working on a standard destop PC, save the document to a diskette or to a folder on your hard drive. Also, remember to save the document with the special file extension .htm. Save this current document under the name FirstPage.htm or any other name of your choosing.

Now, open your browser and retrieve the page. You should leave your editor open on the desktop so that it is handy for making corrections or changes to your page. If you had coded your document as in the example above, your Web page should appear in the browser window similar in style to that shown below. This page has been retrieved from the local hard drive and displayed in Internet Explorer.

Note that this browser display is not a full-size window, so your line lengths may appear slightly different. This difference illustrates the fact that the browser renders the document to fit within the dimensions of its display window. Any text on the page has its line lengths adjusted and word-wrapped to fit the window, no matter how large or small the window has been sized.

Now that you have a basic feel for the process of coding and viewing Web pages, we can jump ahead and start looking at XHTML tags to make your documents more presentable. In the next section of the tutorial we consider tags that control the structure of Web pages and the ways in which blocks of text are displayed.