|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
HTML 4.0 Sourcebook
Summary
Example 1: A Simple HTML DocumentAt this point, it is easiest to get a feel for the language and for HTML documents by looking at some examples; the details of the language are found in Chapter 6. Figure 1.1 shows a simple but complete HTML document and is designed to illustrate both the basic document structure and some of the simpler markup elements. This document was created using a simple text editor and was saved in a file named ex1.html. The .html filename extension is important, as browsers and Web/HTTP servers understand files with this suffix to be HTML documents as opposed to “plain” text documents. On PCs running Windows 3.1 or DOS (yes—some people still use DOS), the extension is .htm, since four-letter extensions are not possible. More will be said later about extension names and what they mean. The rendering of Figure 1.1 by two different browsers is shown in Figures 1.2 and 1.3. All browsers allow you to load and view files created on your own computer, even if you are not connected to the Internet, simply by giving the browser the name of the local file. To view the example using the lynx browser, you type lynx ex1.html at the command prompt. With graphical browsers like Netscape Navigator and Microsoft Internet Explorer, start the program, select the “Open File...” or other similar menu, usually from the “File” pull-down menu at the top of the window, and then select the desired file. Figure 1.1 Contents of the example HTML document ex1.html. The rendering of this document by different browsers is shown in Figures 1.2 and 1.3.
<HTML>
<HEAD>
<TITLE> This is the Title of the Document </TITLE>
</HEAD>
<BODY>
<H1> This is a Heading</H1>
<P>Hello. This is not a very exciting document.
I
bet you were expecting <EM>poetry</EM>, or
some kind of <STRONG>exciting <BR> fact</STRONG> about the Internet and
the World Wide Web.
<P>Sorry. No such luck. This document
does
contain examples of HTML markup, for example, here is an “unordered
list”:
<UL>
<LI>One item of the list,
<LI>A second list item <LI>A third list item that goes on and on and
on to indicate that the lists can wrap right around the page and still
be nicely formatted by the browsers.
<LI>The final item.
</UL>
<p>Lists are exciting. You can also have ordered lists (the items are numbered)
and description lists.
<HR>
<p>And you can draw horizontal lines, which are useful for dividing
sections.
</BODY>
</HTML>
Figures 1.2 and 1.3 show this document rendered by two different WWW browsers. Figure 1.2 shows the document as displayed by the graphical Netscape Navigator browser, while Figure 1.3 shows what you get from the character-based browser lynx.
Document Structure: The HTML ElementSince HTML is a structural language, the tags and elements are best analyzed by starting from the outside and working in. The outermost element, which encompasses the entire document, is named HTML. This element indicates that the enclosed text is an HTML document. This may seem unnecessary, but it is useful in some contexts where the content of a file cannot be determined from the filename—there are actually several other markup languages that look superficially like HTML. The HTML tag lets software easily distinguish between these different types of documents. The Document HEADThe next element inside the HTML element is named HEAD. The HEAD element is a container for information about the document, such as the TITLE. HEAD information, if it is displayed, is not presented as part of the document. Looking at Figures 1.2 and 1.3, notice that the content of the TITLE element is displayed apart from the text. With Netscape Navigator the title is displayed in the frame of the window, while with lynx, the name is displayed at the top of the screen and to the right. The HEAD must be the first element inside the document, right after the <HTML> tag. Document TITLE—Short and DescriptiveBecause it is displayed separately from the text and usually in a restricted space such as a window title bar, a small fixed-size text box, or as a single line at the top of a text screen, the TITLE should be both descriptive and short. If a TITLE is too long, it will simply not fit. The TITLE should be descriptive because when users store a visited location in a Web browser’s bookmark or favorites list, they are actually recording the location of the document along with the TITLE. The TITLE is then the only stored information that describes the item referenced by the bookmark. Authors should thus create TITLEs to be descriptive of the documents, so that the pages can be easily located and identified in a bookmark list. The Document BODYAfter the HEAD, comes the BODY. This element contains all the text and other material that is to be displayed. Notice how this is true in Figure 1.1, where all the displayed material lies between the <BODY> and </BODY> tags. Why a HEAD and a BODY? Why bother with this HEAD/BODY separation? Recall that HTML is designed to organize documents in a logical way. It then makes sense to separate the document itself (the BODY) from information about the document (the HEAD). In addition to TITLE, there are several other HEAD elements (discussed in Chapter 6) that describe the relationships between a document and other documents (the LINK element) or provide indexing or other meta-information about the document (the META element). These can be extremely useful for indexing and cataloging document collections as well as for other organizational purposes.
|
|
Products | Contact Us | About Us | Privacy | Ad Info | Home
Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc. All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.
|
)
)
){kind=link}
){kind=link}