Reading an HTML File | Sams Teach Yourself Internet and Web Basics All in One

Recall from Chapter 17, "Understanding Web Authoring," that an HTML source file consists of four basic elements:

The text to be displayed on the page
The filenames of inline images
The URLs or filenames for links (and the text or image filenames for the link source)
HTML tags and attributes, which tell browsers which lines are images, links, headings, or normal paragraphs, for example

The best way to learn about HTML is to study HTML files and compare them with the output in a browser. Figure 26.1 shows a basic Web page displayed in Netscape, and Figure 26.2 shows the HTML source file for the same page.

Figure 26.1. A basic Web page, as interpreted by a browser.

graphics/26fig01.gif

Figure 26.2. The HTML source code for the Web page shown in Figure 26.1.

graphics/26fig02.jpg

In Figure 26.2, notice that HTML tags are always enclosed within angle brackets ( < > ) and that each content element of the page ”a paragraph or image filename ”is surrounded by a pair of tags. Compare Figures 26.1 and 26.2 carefully , and you quickly see how HTML tags tell a browser what to do with the text and files that make up a Web page.

Most Web pages contain more elaborate coding than what you see in the example illustrated by Figures 26.1 and 26.2. However, this example contains all the basics and shows how HTML tags are applied. When you understand this example, you'll know enough to apply virtually any other HTML tag.

While examining Figure 26.2, observe that you typically (but not always) need two HTML tags to identify a page element: one tag that has no slash ( / ) inside the first angle bracket and another that has a slash there. The no-slash version is used to mark the beginning of a page element, and the slash version (sometimes called the close tag ) marks the end. For example, the tag <HTML> at the top of the file marks the beginning of the entire HTML document, and the close tag </HTML> marks the end.

Now take a look at how the tags, text, and filenames work together to build a page. Every HTML document begins with the following command:

 <HTML>

This command tells the browser that it's reading an HTML document and should interpret it as such. Typically (but not always), the next tag is the following:

 <HEAD>

This line informs the browser that what follows <HEAD> is header information. Information entered in the header is not displayed as part of the page but is important because it describes your document to the browser and to Web search engines and directories. The header portion of an HTML file created in Composer contains all the information you entered in the Composer Page Properties dialog box. This includes not only such standard elements as the document title, but also header elements created by Composer automatically. These are indicated with two types of tags:

 <META NAME=...> <HTTP-EQUIV>

The next two tags, <TITLE> and </TITLE> , surround the text of the Web page title. After the title and any other header lines, the tag </HEAD> informs the browser that the header is over. Next comes the body of the page, kicked off by the <BODY> tag. The body contains everything that's displayed on the page itself.

The first element of the body in Figure 26.2 is a heading. The heading tags are easy to remember: <H1> is a level 1 heading, <H2> is a level 2 heading, and so on. The first heading in the example is a level 1 heading:

 <H1>The Alternative Oscars</H1>

Notice that the end of the heading is marked with </H1> .

The inline image (GIF file movies.gif ) is indicated with the <IMG SRC...> tag, like the following:

 <IMG SRC="movies.gif"...>

Note that the image filename must be enclosed in quotes. In Figure 26.2, optional attributes for spacing, image dimensions, and a border around the image appear between the beginning of the <IMG SRC...> tag and the close angle bracket ( > ) that ends it. Attributes are always optional and go inside the tag itself (between the angle brackets).

The <IMG SRC...> tag requires no close tag.

Immediately following the end of the <IMG SRC...> tag comes a normal text paragraph (beginning with Welcome ). Note that no tag is required in order to identify it; any text in an HTML document is assumed to be a normal paragraph unless tags indicate otherwise . However, keep in mind that while entering normal text, you cannot simply type a carriage return to start a new paragraph. To break a paragraph and begin a new one, you must enter the new-paragraph tag ( <P> ). Ending a paragraph with a close-paragraph tag ( </P> ) is proper, but doing so is not required.

Embedded within the normal paragraph are a few more tags:

The set <B> and </B> surrounding Alternative Oscars applies bold character formatting.
The set <I> and </I> surrounding should applies italic character formatting.
The tag beginning with <A HREF... creates a link to another page, using the text Academy Awards as the link source. In the link, the <A HREF= portion indicates that, when activated by a reader, the link should open the file or URL named in quotes. The text between the close angle bracket following the filename and the close tag </A> is the text that is displayed in the page as the link source.

Following the normal paragraph is a new-paragraph tag that inserts a blank line before the horizontal line ( <HR> ) that follows. All by itself, the <HR> tag inserts a line; width=100% is an attribute, one of the optional properties you can apply to a horizontal line's properties extensions (see Chapter 22, "Organizing Text with Tables and Rules").

The <UL> tag starts an unnumbered list. (Look for the </UL> tag that closes the list.) Each list item is surrounded by <LI> and </LI> and contains a link ( <A HREF ) to another page in the document.

At the bottom of the file, the </BODY> tag closes off the body and the </HTML> tag indicates the end of the HTML document.

That's it. To learn more about the HTML source code of pages you've created in Composer or any page you see on the Web, follow the steps in the next section.