Creating a Simple Page

You should usually start a new file with an HTML template. The most basic HTML template contains only the required tags. You fill in the content as needed. Type the following listing into your HTML editor, then save it as template.html.

You'll use that file a great deal. If you're using a dedicated HTML editor, it probably loaded a similar file as soon as you selected New from the File menu.

Add a title between the title tags. Replace the comment < ! — Title —> with the title "HTML Is Easy." Move past the first <body> tag and add your content in place of the comment <! — Your content here —>. The completed file should look similar to Listing 2.1.

Listing 2.1: HTML Is Easy (ch2-1.htm)

<title>HTML Is Easy</title>

<h1 align="center">HTML Is Easy</h1>

<p>Although HTML has about 100 different tags, you'll quickly find that you use only a few of them. The most useful tags are the paragraph tag--the tag that encloses this paragraph; the <b>bold</b> tag; the <i>italics</i> tag (most commonly seen in Microsoft products as the <strong> strong</strong> tag and the <em>emphasis</em> tag; the heading tags; and the most useful of all--the table tags, used to produce formatted tables, both with and without borders.</p>

<table align="center" border="1" width="50%"> <thead> <tr>

<th align="center">Product</th> <th align="center">Price</th> </tr> <tr>

<td align="left">Cap</td> <td align="right">$14.50</td> </tr> <tr>

<td align="left">Boots</td> <td align="right">$49.99</td> </tr> </table> </body> </html>

After you have entered the listing, save it as a file, and then view it in your browser. To do that, type file://<drive><path><filename> where drive is the drive letter where you saved the file, path is the directory or hierarchy of directories, and filename is the actual name of the file. In your browser, the page should look similar to Figure 2.2.

Figure 2.2: HTML is easy. (ch2-1.htm)

When you view Listing 2.1 in a browser, you should notice several features. The title appears in the title bar of the browser window, not in the body of the document. That's because the title isn't properly part of the document at all—it's part of the header, which is why the <title> tag is inside the <head> tag.

If you entered the text exactly as it's written, you should notice that the line breaks in the listing and the line breaks in the browser are different. Each line you entered (although you can't see it) ends with two characters called a return and a line feed (ASCII characters 13 and 10). The browser treats these as white space and ignores them. If you aren't willing to let the browser break lines for you, you'll need to break the lines explicitly yourself, using a <br> or break tag.

Note The <br> tag is one of several exceptions to the rule that you must always enter an end tag. The end break tag </br> is not required (although you can enter it if you like). However, even though your pages work fine without the end tags, get in the habit of writing them so that your pages will be XHTML and XML compatible.

Another interesting feature is that the line breaks are relative to the area of the screen into which the browser renders content, called the client area of the window. Resize your browser window and watch what happens to the text. As you change the width of the browser window, the browser rerenders the text, changing the line breaks so that the text still fits inside the window—the text listing just gets longer.

Note What font did your browser render the paragraph text in? A serif font, such as Times New Roman, or a non-serif font such as Arial? What's the point size? As an HTML page designer, you should bear in mind that the default font face and the default point size are determined by the user through browser preference settings, not by your document. Both the default font face and the default size are user selectable in both Netscape and Internet Explorer (IE). If you want the text to appear in a specific face or size, you must include the appropriate font tags or (better) CSS styles. Even then, the results depend on exactly what the end-users have on their computers.

Next, look at the <h1> tag. It has an attribute called align="center", which forces the browser to display the content in the center of the page. There's another way to align content on the page. You could just as easily have written the following:


In the browser, that construction would look identical. You would still see that type of syntax, although most HTML editors align each element separately. The <center></center> syntax is most useful when you want to force the alignment of many consecutive elements. In HTML 4.0, the <center> tag is deprecated but has been marked as shorthand for <div align="center">. Again, you should use the newer syntax except when required for older browsers.

The paragraph tag <p> encloses the entire paragraph. Try changing the paragraph alignment by adding an alignment tag. Add an align="right" attribute to the paragraph tag, then refresh the browser page.

Tip You should refresh the browser after making any change to an HTML file. I've seen numerous instances where people complain that their code changes aren't displaying properly, when the real problem is that they forgot to refresh the browser. The browser caches page content in a special folder. When you revisit a page, the browser first checks the cache to see if the content is already available. The browser can contact the server to see if there's a newer version of the page, but it doesn't do so by default. Refreshing the browser forces it to rerequest, reparse, and redisplay the page, thus incorporating any changes you've made since the last time the browser displayed the page. You can configure most browsers so that they always check for an updated page. That marginally slows down browsing remote files, but it does help ensure that you see the latest version. No matter how you configure the browser cache, when you don't see changes you just made, you should always refresh to force the page to update.

The <b> bold tag and the <strong> tag do exactly the same thing—they both produce bold text. The difference is that the <b> tag explicitly makes text bold, while the actual displayed result of a <strong> tag is not specified by HTML—that's up to the creators of the rendering engine. In practice, all the popular rendering engines make the text bold.

You'll find that a similar situation exists with the <i> tag. An <i> tag explicitly means to italicize the text, but many HTML editors use the emphasis (<em>) tag instead. Again, the displayed result of an <em> tag isn't specified by HTML—the rendering engine is free to emphasize the text in any fitting manner. In practice, all the popular rendering engines make the text italic.

You can use color names such as "red" or "blue," and most modern browsers will display the text in the intended color. Both IE and Netscape understand color names (although they understand different sets of color names). I'll show you a browser-independent way to specify colors in the upcoming section "Fonts and Colors," later in this chapter.

You can change the font using the <font> tag. Note that the command that changes the font is the face attribute. Most people misuse the word "font" when they actually mean font face. Also, the size attribute—specified as 5 in Listing 2.1, doesn't mean the point size, as is typical with word processors; it means the relative size of the text compared to the default size selected by the user. The standard sizes available range from 1 to 7, and the default text size is 3, so text enclosed in the tag <font size="4">Larger text</font> would show up in a larger point size than the surrounding text. Note that the font tag is deprecated, which means that you should avoid using it unless you have to, because the tag may not be supported in future versions. However, the <font> tag is still necessary if you must write HTML for downlevel browsers (obsolete, but still in use), so I've included it here.

At the end of the paragraph is a second, very short paragraph that contains only a single line: &nbsp;.

That stands for non-breaking space. The starting ampersand and the ending semicolon are required. There are several of these commands, one for each non-alphanumeric character. You can use them to insert characters that the browser won't normally print, such as the left angle bracket (&lt;) and right angle bracket (&gt), which stand for less than and greater than, respectively. The non-breaking space forces the browser to render the paragraph. Browsers ignore empty paragraph tags because they contain no content. A normal space won't work because it's white space, which browsers also ignore except where the white space functions as a separator—and then the browser collapses it into a single space character. The non-breaking space is an "invisible" character. You may know it as a "hard space" from working with word processors.

The table tag contains three attributes: an align="center" attribute, which forces the browser to align the table in the center of the screen; a border="1" attribute, which causes the browser to place a visible, one-pixel-wide border around each table cell; and a width=50% attribute, which causes the browser to render the table in half the available horizontal screen space (if possible). Again, resize your browser. Notice that the table width changes as the width of the window changes. Make the browser window so narrow that the table won't fit. You may need to scroll down to view the table as the browser window gets narrower. What happens? At some point, the table will no longer fit in half of the screen space. At that point, the browser gives up and simply renders the table in the center of whatever space is available. When that space becomes too small, the browser begins to clip the right edge of the table.

The table itself contains two separate sections: A <thead> section containing <th> tags makes up the head section of the table. Thead stands for table head. The <th> tags contain the column headers. You don't need a thead section, but if you use one in combination with the <th> tags, the browser automatically makes the column headers bold. The <tbody> section of the table contains the data. The <tr> (table row) tags delimit the rows, while the <td> (table data) tags delimit the individual cells in each column. The closing tags are required for all table-related tags except the column header (<th>) tags, for which closing tags are optional.

Now that you've seen a complete HTML file, I will spend a short amount of time explaining the use of each common HTML element more completely.

Was this article helpful?

0 0

Post a comment