Recall from Chapter 17, "Understanding Web Authoring," that an HTML source file consists of four basic elements:
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.
Figure 26.2. The HTML source code for the Web page shown in Figure 26.1.
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:
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:
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:
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).
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:
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.