|
|
by William Robert Stanek
You can easily create documents with HTML, but it's your design that helps sell your ideas, products, or services to a global audience. You don't have to be a programmer or a computer wizard to design dazzling HTML documents. What you need are a firm understanding of HTML design concepts and the pointers you'll find in this and other chapters in this book. HTML is based on the Standard Generalized Markup Language (SGML). SGML markup code is complex, but HTML markup code is easy to learn and use. It lets you format information so that it's user-friendly, interactive, and visually appealing.
Formatting HTML documents depends on markup codes called tags. Tags define the structure of the document and include an element name enclosed by brackets, such as <H1>, which indicates the start of a Level One heading. HTML is not case-sensitive, so <h1> and <H1> both mean the same thing.
Most tags are used in pairs. A tag called the begin tag tells the browser a document element is beginning, and another tag called the end tag tells the browser an element is ending. The only difference between the two is that the end tag has a forward slash before the element name. For example, the begin heading tag <H1> is paired with the end heading tag </H1>. The initial <H1> tag tells the browser a Level One heading is starting, and the end tag </H1> tells the browser the heading is ending.
| Tip |
Typically, when you create documents in a word processor or text editor, the documents have text formatting, such as tabs, spacing, paragraph markings, or page breaks. Keep in mind, as you create your first Web page, that ASCII text formatting is normally ignored. When your browser sees any of these text-formatting techniques, no matter how many times you repeat them, it interprets them as a single space. Generally, any of the following are displayed by your browser as a single space: Single tab/multiple tabs |
In HTML, you can also define a special character to display. Special characters are described by an element name preceded by an ampersand and ending with a semicolon, such as & for the ampersand symbol. When a browser sees a special character, it interprets the special character and displays the corresponding symbol, if possible. Special characters are discussed in more detail in the section "Using Special Characters."
Every HTML document should begin with the markup tag <HTML> and end with the markup tag </HTML>. The begin tag <HTML> tells the browser the document is an HTML-formatted document and marks the beginning of the document. The end tag </HTML> marks the end of the document and is always the last item in any HTML document.
Although you might find HTML documents on the Web that don't include the begin and end <HTML> tags, it's poor design style not to use these tags. HTML isn't the only markup language in use on the Web; without identifying your document as HTML, you might confuse the reader's browser.
Every HTML document should also have a header and a body. The header immediately follows the first <HTML> tag and is used to specify key aspects of the document, such as its title. The beginning of the header is specified with the begin header tag <HEAD>, and the end of the header is specified with the end tag </HEAD>.
Following the header is the main section of the document, called the body, which contains the text and objects you want to display in the reader's browser. Like the header, the body has the begin tag <BODY> and end tag </BODY>.
| Note |
The examples in this book usually show markup in uppercase letters. This is good form and helps to clearly differentiate between code and text, but uppercase letters aren't necessary, because HTML isn't case-sensitive. Therefore, <BODY>, <body>, <Body>, and <BoDy> all mean the same thing. |
Most current HTML browsers can figure out the header and body sections of HTML documents, but it's good design practice to include the HEADER and BODY elements in all your HTML documents. With the three tags discussed in this section, you can create the framework for an HTML document as follows:
<HTML> <HEAD> . . . </HEAD> <BODY> . . . </BODY> </HTML>
In this example, the ellipses are used to show where additional information would go in an actual document. Now that you have the framework for an HTML document, take a look at components and concepts for the header and body elements.
The header section is primarily used to supply information about
the document to the Web server. Everything in the header section
is located between the begin and end header tags. Six HTML tags
are reserved specifically for the header:
| <TITLE> | The title of the document |
| <BASE> | Identifies the base URL for the document |
| <ISINDEX> | Provides a way to turn on the browser's textual search mechanism |
| <LINK> | Identifies the document's relationship to other documents |
| <META> | Enables you to identify general or meta-information about the document |
| <NEXTID> | Identifies the next identifier to be generated |
| Note |
The <BASE>, <LINK>, <META>, and <NEXTID> tags do not display when the document is loaded into the reader's browser; they are used primarily by Web publishers with large sites to manage. These tags are used infrequently, probably because of a lack of understanding about their purpose. They supply information about the document to the Web server and to anyone who reads the HTML source code for the document. |
The most commonly used header tag is the <TITLE> tag. The begin title tag <TITLE> identifies the beginning of the document title, and the end title tag </TITLE> identifies the ending of the document title. Each document can have only one title. Because a limited number of characters are displayed, your title should be short but descriptive. A general rule to follow for its length is 65 characters or less. Also, the title can have no extra formatting or markup, so it should contain only plain ASCII characters.
| Note |
Think carefully about the title for your document and the information it gives to readers. The title is referred to more than any other component in any document. It appears on a user's bookmark or hot list, which lists a user's favorite online places, for future reference. The title also shows up on the user's history list, a list of places visited during the current session. Most Web browsers prominently display the document title in a special location. Browsers such as ncSA Mosaic display it in a clear window appropriately called "Document Title." Browsers like Netscape Navigator display the title at the top of the browser's viewing area. Other browsers, such as Lynx, don't display the title unless the user enters a set of keystrokes telling it to do so. |
Because the title might be referred to separately by the user, it should offer insight into the document's contents or topic. A good title for a sports service in Australia could be this:
<TITLE>Extreme Sports Australia</TITLE>
Depending on the focus of the document, a better title might be one of the following:
<TITLE>Extreme Sports in Australia and New Zealand</TITLE> <TITLE>Extreme Sport Experiences in Australia and New Zealand</TITLE>
The could be added to the framework of a Web document as follows:
<HTML> <HEAD> <TITLE>Extreme Sport Experiences in Australia and New Zealand</TITLE> </HEAD> <BODY> . . . </BODY> </HTML>
Normally, you find files on a local Web server by using a relative file path. When you use a relative path to locate a file, you're locating the file in relation to the current file. Although this is the normal way to use relative paths, you can define a base path for all relative links in your document. Using a base path, you can tell the browser to locate files in relation to a specific path that could actually point to a remote server.
The <BASE> tag can appear only within the <HEAD> element. The only valid attribute for the <BASE> tag is HREF.
You could define a base path as follows:
<BASE HREF="http://tvp.com/">
The base path example tells the browser to add http://tvp.com/ to all relative links in the document. Defining a base path is most useful when your document is available at two different locations, and you want to relate them to documents at a specific location. For example, you could publish your home page at a free Web mall without changing relative addresses to absolute addresses. Listing 4.1 shows how you would do it.
Listing 4.1. tvphome.htm.
<HTML> <HEAD> <TITLE>The Virtual Press -- A Hot Spot on the Web</TITLE> <BASE HREF="http://tvp.com/"> </HEAD> <BODY> <P> <A HREF="vpbg.html"><IMG SRC="vpttl11.gif" ALT=""></A></P> <H2><IMG SRC="bboard.gif" ALIGN="BOTTOM" ALT="* ATTN *"> The Original Virtual Press -- Hot contests for writers & artists, job information, electronic publishing information and much more!</H2> <P><STRONG><A HREF="vphp.html">Experience the explosive features we've created especially for you.</A></STRONG></P> . . . </BODY> </HTML>
Whenever a user accesses this sample document, no matter where the document is actually located on the Web, any links the user follows will lead them to pages at the tvp.com Web site. The base path also makes sure that other relative paths on the page are valid at the new site, including the path to the images on your page.
Using the base path defined above, the relative references in the document-vpbg.html, vpttl11.gif, bboard.gif, and vphp.htm-would be interpreted as the following:
http://tvp.com/vpbg.html http://tvp.com/vpttl11.gif http://tvp.com/bboard.gif http://tvp.com/vphp.html
The <ISINDEX> tag is used with interactive searches of your document. To activate an ISINDEX query, a user must first access a gateway script that generates an HTML document containing the <ISINDEX> tag. When the user enters information requested by the query, a special URL with the path to the original script and the information the user typed in is sent back to the gateway script for processing. The specification that describes how gateways pass information to the server is called Common Gateway Interface (CGI).
CGI enables HTML documents to call external programs called gateway scripts. By calling gateway scripts, you can make your Web documents highly interactive and dynamic. CGI provides the basis for creating interactive forms and image maps.
| Note |
Creating forms is discussed in Chapter 27, "Form Creation and Design," and image maps are discussed in Chapter 20, "Backgrounds, Image Maps, and Creative Layouts." |
Although header links are defined in the HTML 2.0 standard, no HTML 2.0-compliant browsers support this powerful and versatile element. Currently, the <LINK> tag is used primarily with style sheets, which are discussed in detail in Chapter 8 "Using Style Sheets."
When a client application requests an HTML document, a Web server normally passes the document with a response header added at the beginning. This header is separate from the HTML HEAD element and includes information the client needs to interpret the document. At times, you might want to modify the standard header or create your own header for special situations; you might also need to supply information to the client that you couldn't pass by using standard HTML elements. With the <META> tag, you could pass this extra or specialized information in the HEAD element of a document. The server retrieving the document would include this information in the response header for the client's use.
Most markup tags have attributes that describe how the tag is used in the document. The <META> tag has three attributes:
CONTENT
HTTP-EQUIV
NAME
Generally, these three attributes are used with each other. You can specify what information should be included in the response header by using the HTTP-EQUIV attribute. To do this, use a valid HTTP header name and supply a value for it with the CONTENT attribute. If you don't know the valid HTTP header name or don't supply a header name with HTTP-EQUIV, you should use the NAME attribute to identify the value you are referring to with the CONTENT attribute.
In general, you use the <META> tag only when there isn't another HTML tag you could use to supply the information. Header names aren't case-sensitive; therefore, you could use meta-information to specify an expiration date for your document as follows:
<META HTTP-EQUIV="expires" CONTENT="Mon, 31 Dec 1998 10:00:00 HST">
A Web server would add this meta-information to the document's response header as the following:
Expires: Mon, 31 Dec 1998 10:00:00 HST
You can also use meta-information to set keywords for the document. Here, the keywords are publishing, books, and magazines:
<META HTTP-EQUIV="keywords" CONTENT="Publishing, Books, Magazines">
A Web server would add this meta-information to the document's response header as the following:
Keywords: Publishing, Books, Magazines
You can use meta-information to specify the amount of time before a client should request a file again. Here, the client will request the file every 30 seconds:
<META HTTP-EQUIV="refresh" CONTENT="30">
If you use the NAME attribute, the server won't generate a response header. Some information you might want to pass in this way includes an e-mail address for the document's author, the date the document was published, and other information not specifically addressed by other HTML tags. You could specify the document's author as follows:
<META NAME="author" CONTENT="william@tvp.com">
You could specify the document's publication date as follows:
<META NAME="published" CONTENT="Mon, 15 Nov 1995">
Your HTML documents can have several <META> tags. The meta-information used as examples in this section could be added to the HEAD element of an HTML document, as shown in Listing 4.2.
Listing 4.2. metasamp.htm.
<HTML> <HEAD> <TITLE>The Web Book</TITLE> <META HTTP-EQUIV="expires" CONTENT="Mon, 31 Dec 1998 10:00:00 HST"> <META HTTP-EQUIV="keywords" CONTENT="Publishing, Books, Magazines"> <META HTTP-EQUIV="refresh" CONTENT="30"> <META NAME="author" CONTENT="william@tvp.com"> <META NAME="published" CONTENT="Mon, 15 Nov 1995"> </HEAD> <BODY> . . . </BODY> </HTML>
The <NEXTID> tag is used only by HTML editors that generate identifiers for elements. Using <NEXTID>, the editor tracks the next ID value to assign to an element. In this way, the editor uses unique identifiers for elements.
The <NEXTID> tag has only one attribute, N. The value of the N attribute is the next identifier for an element. This identifier should be alphanumeric. You must use the N attribute and specify a value as follows:
<NEXTID N="alphanumeric value">
In this example, the ID value of the next element you create would be alpha7:
<NEXTID N="alpha7">
The <NEXTID> tag is used only by HTML editors; browsers don't use the <NEXTID> tag in any way.
The main section of a Web document is the body. Everything in the body is located between the begin and end body tags. Dozens of HTML tags can be used in the body; these tags are defined throughout this chapter and in other chapters that explore HTML. As you design your document, focus on the structure of the elements you plan to include in the body section.
Well-designed documents look as though they were designed effortlessly. They get their impact from simplicity of design and are organized in a coherent, flowing way. However, designs that seem simple and natural to the reader are often the result of painstaking effort. You can use many techniques to structure the document in powerful, yet uncomplicated, ways.
Sometimes it isn't what you have on the page that helps convey your message, but what you don't have on the page. Empty space-also called white space-makes material easier to read and helps focus the reader's attention on your ideas. Interestingly enough, it's the separation of material that creates the emphasis and draws the reader's attention. Two key page components that can help you create white space are paragraphs and headings.
Browsers typically display an empty space between paragraphs, so a page with many paragraphs has more white space. You should use short paragraphs, fewer than six lines, as much as possible; try to keep paragraph length under 10 lines. Varying the length of paragraphs is a good technique to keep the reader's attention. If you use the same paragraph length repeatedly, even the most lively material seems monotonous.
Browsers also display an empty space between headings. Using headings, you can divide the document into sections or topics. A document broken into topics looks more manageable and interesting, and headings help the reader identify the main points of the document at a glance. They also help the reader quickly find topics of interest.
Color is another feature you can add to the document. Most browsers display your document on a gray background. HTML 3.2 includes an extension for the <BODY> tag that lets you add images and color to the background. Other extensions enable you to specify the color of text and links. If you plan to enhance your documents specifically for users with an HTML 3.2-compliant browser, this can be a good extension to take advantage of. HTML 3.2 is explored in Chapter 5 "Designing with HTML 3.2."
Often the best way to add color to the page is with graphic images. A few pictures placed strategically on the page can dramatically increase its impact. Your pictures don't have to be sophisticated or high-resolution. Simple is usually best. You should place the images so that they focus the reader's attention on the page's key aspects, such as placing a small eye-catching graphic at the beginning of a key paragraph.
| Note |
Adding images to your documents is featured in the section "Adding Images to Your Pages." Because images are so important to Web publications, an entire section of this book is devoted to images and graphic design-Part IV, "Enhancing Web Pages with Graphics." |
The key components of a basic HTML document are headings and paragraphs. Most basic documents also use comments, special characters, and text elements like quotes or addresses. The next sections discuss the five basic document components:
Headings
Paragraphs
Comments
Special characters
Additional text elements
With headings, you can better organize your ideas. The chapters of most nonfiction books use many levels of headings-usually chapter headings, section headings for each major topic, and subheadings for subtopics. Headings are generally in a bold type and larger than normal font size, which usually corresponds to the heading's level. headings use the largest font size, section headings use a slightly smaller font size, and so on. The boldfaced text at the top of this section is an example of a subtopic heading level.
HTML enables you to create up to six levels of headings, <H1> through <H6>. Like many other tags, heading tags are used in pairs. For example, the begin Level One heading tag <H1> is used with the end Level One heading tag </H1>. HTML headings are displayed in bold type. In general, a Level One heading uses the largest font size, and a Level Six heading uses the smallest one. Browsers typically insert a space before and after the heading.
| Note |
As the Web publisher, you have no direct control over font size in HTML; it's determined by configurations set up in the browser displaying the document, and heading sizes are consistent in relation to each other and the main text. Most browsers display visible differences only in heading levels one to four. This means a Level Four heading is often displayed in the same font size as Level Five and Six headings. |
You can create headings as follows:
<H1> A Level One Heading </H1> <H2> A Level Two Heading </H2> <H3> A Level Three Heading </H3> <H4> A Level Four Heading </H4> <H5> A Level Five Heading </H5> <H6> A Level Six Heading </H6>
Figure 4.1 shows how the different heading levels are sized in relation to each other. As you can see from the figure, the browser used in the figure-Netscape Navigator 3.0-displays all heading levels in a different font size. However, if you look closely, you can see that the size of Level Four headings and regular text is the same, which means the only difference between the heading and the text is that the heading is in bold type.
Figure 4.1 : Headings are generally sized in relation to each other.
After years of casual or professional writing, some processes of writing seem automatic. You probably don't think about the need to place a period at the end of a sentence, or why apostrophes are used in contractions. Similarly, when you start a new paragraph, you probably add a blank line, indentation, or both to separate the new paragraph from the previous one, without giving much thought about why. You add the blank line or indentation because it makes sense and because it's what your grammar teacher told you to do. Blank lines and indentations serve to visually separate the paragraphs and break up the document.
In HTML, the way to visually break up the document into paragraphs is to use the paragraph tag <P>. When a browser sees the paragraph tag, it ends the current line and inserts a blank space before inserting the text or object following the paragraph tag. If you're using a word processor or text editor to create your Web document, keep in mind that browsers reduce all ASCII text formatting-including multiple spaces, tabs, or blank lines-to a single space.
| Note |
Although an end paragraph tag is defined under the HTML standard, the end paragraph tag </P> is currently optional. I use the end paragraph tag in the examples in this chapter whenever I have a paragraph of text. This lets me see at a glance where the text for a paragraph begins and ends. |
You can create paragraphs as follows:
<P> Insert the paragraph text here. </P>
An excerpt from an earlier section of this chapter's text is shown in Figure 4.2. The paragraphs used in this document follow the spacing techniques discussed earlier.
Figure 4.2 : Well-designed paragraphs vary in length and number of sentences.
If you're a programmer or have looked at the printout of a computer program, odds are you have seen comments inserted into the code. Comments are used in computer code to make notes or explanations to anyone who might see the code. Even the original programmer finds the comments useful when changes or additions to the code are necessary, especially if they come up months or years after writing the program. Programmers use comments because having to work through a code's logic every time it has to be changed is a waste of time and resources.
Web publishers can use comments similarly to save time and resources when making changes and additions to HTML documents. You can use comments to track the document's update history, to make notes about text, links, or objects in the document, or to pass on information to anyone who might be reading the source code. Comments aren't displayed by the browser with the text and objects on the page and can be viewed only if you view the source code for the document.
You can add comments to a document using the open comment tag <!-- and the end comment tag -->. Each line of text that you want to be a comment should be individually tagged as a comment. Here are some comments you might make on your document:
<!-- Links on this document last checked July 1995 --> <!-- Don't look at the code too close this document is just for fun --> <!-- Section Four list needs to be updated -->
| Note |
Comment tags are oddballs; the begin and end comment tags have only a single bracket. Consequently, when you add comments, make sure they follow the proper format. Otherwise, your comments could be displayed when you don't want them to be. |
Special characters are also called entities. In HTML, there are two types of entities: character entities and numeric entities. Character entities use actual text characters to define the special character, such as " for the double quotation mark symbol. Numeric entities use numbers to define the special character and add a pound symbol before the number, such as | for the vertical bar (|) symbol. The numbers used with numeric entities correspond to character positions in the ISO Latin I character set. Lists of the ISO Latin I character set are available on the Web, but Figure 4.3 shows the most commonly used special characters and their values.
Figure 4.3 : Commonly used special characters and their values.
Using special characters in your Web document is easy. Wherever the special character should appear in your document, simply type in the value associated with the character. When a browser sees that special character, it interprets the character and displays the corresponding symbol, if possible. For example, when a browser reads the entity value |, it displays the vertical bar symbol.
The typical characters you must use entity values for include any characters used in HTML markup, which is why you must use the > entity for the greater than symbol and the < entity for the less than symbol when you want them to be displayed with the text in the document. If you use the < or > symbol in text you want displayed, you will confuse the browser and probably get strange results. Watch out for these and other symbols that might confuse your browser. Whenever you find one, check to see whether there's an associated entity value you can use instead of the special character.
The HTML source used to create the document shown in Figure 4.3 is found in Listing 4.3. As you can see from the document, there's a trick to displaying the special character and its value. To display the special character, simply enter the character value, such as >. To display an actual value for a special character, convert the initial ampersand to its character value: &, then enter the rest of the character value.
Listing 4.3. specchar.htm.
<HTML> <HEAD> <TITLE>Special Characters</TITLE> </HEAD> <BODY> <H1>Special Characters</H1> <H1>&amp; &<BR> &gt; ><BR> &lt; <<BR> &#124; |<BR> &#162; ¢<BR> &#163; £<BR> &#165; ¥<BR> &#169; &169;<BR> &#174; &174; </H1> </BODY> </HTML>
In addition to headings, paragraphs, and special characters, many Web documents contain other text elements, such as the following:
Your contact pages should have an address element that specifies your address or signature information. To add an address element, use the <ADDRESS> tag.
Browsers typically display address text in italics, with a paragraph break before the begin address tag <ADDRESS> and a paragraph break after the end address tag </ADDRESS>. No other special formatting is associated with the <ADDRESS> tag. For example, you can enter an address in multiple lines, as follows:
<ADDRESS> Extreme Sports Hawaii 5300 Kalekaua Honolulu, HI </ADDRESS>
This address would be displayed in italics, as shown here:
Extreme Sports Hawaii 5300 Kalekaua Honolulu, HI
If you wanted the address to appear on more than one line, you would have to insert the line break tag <BR>, as follows:
<ADDRESS> Extreme Sports Hawaii<BR> 5300 Kalekaua<BR> Honolulu, HI<BR> </ADDRESS>
Examples of addresses used in a Web page are shown in Figure 4.4.
Figure 4.4 : Using addresses in your pages.
The <BLOCKQUOTE> tag is used to specify a section of the document containing a quotation. Just as browsers display addresses in a unique way, they also display quotations uniquely. Browsers set the quotation off from other text with spacing and indent both the left and right margins. More pages have quotations than you might think, but the element that creates the quotation isn't always used as the developers of HTML intended. The primary reason for this is that you can use quotations to indent any type of text.
As with most HTML tags, you need both a begin <BLOCKQUOTE> tag and an end </BLOCKQUOTE> tag. Quotations used in a sample document are shown in Figure 4.5. Here's how the final example was added to the page:
<BLOCKQUOTE>Sometimes the dragon wins.<BR> Other times the dragon retires from the field;<BR> weary from the battle.</BLOCKQUOTE>
Figure 4.5 : Using quotations in your pages.
Defining a section of text as preformatted is very useful and enables you to use standard ASCII text-formatting techniques for text in your documents. In a section of text declared as preformatted, you can use any of your favorite ASCII spacing tricks, including tabs, multiple tabs, multiple spaces, and multiple blank lines.
The <PRE> tag is used in a pair of tags as follows:
<PRE> Preformatted text </PRE>
Figure 4.6 shows how you could use preformatted text in your documents. The text in the preformatted page is displayed in a monospaced font called Courier New. Listing 4.4 is the code for the page.
Listing 4.4. pretext.htm.
<HTML>
<HEAD>
<TITLE>Markup Languages</TITLE>
</HEAD>
<BODY>
<PRE>
Markup Languages
SGML HTML VRML
---------- ---------- ----------
Standard generalized Hypertext Virtual Reality
markup language markup language modeling language
---------- ---------- ----------
Basis language for Based on SGML Based on SGI's Open
most other markup Inventor Format
languages
Language Level
---------- ---------- ----------
Complex language Basic language Advanced language
Powerful/Versatile Simple/Straight forward Great for rendering
3-d images and models
Browser Support
---------- ---------- ----------
Any SGML browser Any HTML Browser Any VRML browser
</PRE>
</BODY>
</HTML>
Figure 4.6 : Creating a table with preformatted text.
| Caution |
When using the <PRE> tag, keep in mind that monospaced fonts look much wider than proportional fonts. Proportional fonts use the amount of screen space that's proportional to their size, which means that an i uses less screen space than a w. In a monospaced or nonproportional font, each letter uses the same amount of screen space. |
The only attribute for the <PRE> tag in HTML 2.0 is the WIDTH attribute. You can use the WIDTH attribute with the <PRE> tag to specify the maximum number of characters that should appear on a line. If you don't specify a width, the default is 80 characters. However, since current browsers don't support using the WIDTH attribute, there's no real maximum width or default.
Features you should add to your documents are those that increase the document's visual impact and those that make the document interactive. Beyond graphic images, features that add to the visual impact include line breaks to create a column of text and horizontal rules to visually divide the document into sections. To increase the interactive nature of your document, you can create links to other documents on the Web. You can also create internal links in your document to help guide readers to key parts of your publication. You can also add any of several types of lists to your document, which can boost the document's visual impact by clearly organizing material.
The line break tag <BR> enables you to break a line without adding a space between the lines; it's one of the few tags that have only a begin tag. You can use a line break to format text on your document in many creative ways. Sometimes you don't want a space between lines of text, or you want to highlight an example by breaking the line, then starting the example on a new line.
Here's how this could be done:
<P>This section will contain:<BR> An introduction to the document</P>
The <BR> tag can also be used to format your text into a column or simple list. Not only does text formatted in a column add to the document's visual impact, but it also gets the reader's attention. The following example shows how you could create a simple list:
Our on-line publications include:<BR> <BR> Books<BR> Magazines<BR> Newspapers<BR> Newsletters<BR>
You can use the <BR> tag inside other tags without affecting the font or style of the previously declared tag. If you insert <BR> into a heading, the text before and after the break is formatted in the style and font of a heading. All the <BR> tag does is start a new line, just as the carriage return on a typewriter does.
Another way to easily add visual impact is to use horizontal rules, shaded lines drawn across the width of the document. The line's shading makes it appear to be engraved into the document. You can add a horizontal rule to the document by using the <HR> tag.
<HR> tags have the advantage of dividing your document visually into sections; however, you should use them sparingly. Too many horizontal rules in the document can spoil the effect. Use the <HR> tag merely to highlight or to help the reader better identify the document's major sections.
Figure 4.7 shows a combination of the <BR> and <HR> tags. The figure shows only the outline of the document, but you can see how horizontal rules could be used to divide the document into four major sections. The complete HTML code for the outline of the document is shown in Listing 4.5.
Listing 4.5. hrbrsamp.htm.
<HTML> <HEAD> <TITLE>Using Horizontal Rules and Line Breaks</TITLE> </HEAD> <BODY> <P>This section will contain:<BR> An introduction to the document</P> <HR> <P>This section will contain a list of our publications.<BR> Our on-line publications include:<BR> <BR> Books<BR> Magazines<BR> Newspapers<BR> Newsletters<BR> </P> <HR> <P>This section will contain creative works by:<BR> Writers and poets who want to publish their works on the Web.</P> <HR> <P>The final section of the document will contain:<BR> Contact and copyright information.</P> </BODY> </HTML>
Figure 4.7 : You can visually break up the document with horizontal rules and line breaks.
A Web document that has just paragraphs and headings would be boring. Since you want to highlight and emphasize key sections of the text, you can use a special set of HTML tags called character style tags. These tags highlight your text with techniques such as boldface and italics. Unlike heading and paragraph tags, character style tags do not insert white space, which makes it possible to put them in other tags to highlight a single word or a group of words.
In HTML, there are two subsets of character style tags: physical styles and logical styles.
Physical styles tell the browser the precise format to display. In HTML 2.0, four physical styles correspond to bold, italics, underlined, and monospaced type. Additional physical styles are discussed in Chapter 5 "Designing with HTML 3.2." Each physical style has a begin tag and an end tag; the four physical style tags are listed here:
<B> Bold type </B>
<I> Italics type </I>
<U> Underline </U>
<TT> Typewriter or monospaced type </TT>
You could use these tags in an HTML document as follows:
<P>Physical styles tell the browser the precise format to display. <B>If you want to display a word or group of words in bold type, you use the bold tag just as you see it used in this sentence.</B> <I>If you want to display a word or group of words in italics type, you use the italics tag just as you see it used in this sentence.</I> <U>If you want to display a word or group of words underlined, you use the underline tag just as you see it used in this sentence.</U> <TT>If you want to display a word or group of words in a monospaced or typewriter type, you use the typewriter tag just as you see it used in this sentence.</TT></P>
You can combine physical style tags with other tags and even with other physical style tags. When combining tags always keep them in parallel order, especially if you are combining style tags. You could, for example, combine the bold and italics styles as follows:
<I>When combining tags always keep them in parallel order, especially if you are combining style tags like <B>bold</B> with another style tag.</I>
Figure 4.8 shows how the example combining these styles might look in your browser. A browser accessing documents with physical styles tries to display the text using the strict format you have specified. If it can't, it may substitute another style for the one you're using, or worse, it may ignore the tag and display the text in standard style. Consequently, when you want to make sure text is highlighted, use logical styles. Logical styles are the preferred method of adding highlights to Web documents.
Figure 4.8 : Using physical styles.
Unlike physical style tags, logical style tags don't specify a strict format. They tell your browser how the text should be used and let the browser display the text according to a set of specific configurations. The logical assignment of the style to the browser ensures that your text is highlighted in the document in some way.
HTML 2.0 defines seven logical styles; each has a begin tag and an end tag. Two specific logical styles are used more than any of the others. The begin emphasis tag <EM> is used to indicate text that should be emphasized. Browsers usually display emphasized text in italics. The begin strong emphasis tag <STRONG> is used to indicate text that should be strongly emphasized. Browsers usually display strongly emphasized text in bold type. You can use these tags in your document as follows:
<P>Logical styles tell the browser how the text should be used. <EM>If you want to emphasize a word or group of words, you use the emphasis tag just as you see it used in this sentence.</EM> <STRONG>If you want to strongly emphasize a word or group of words, you use the strong tag just as you see it used in this sentence.</STRONG></P>
Figure 4.9 shows how this example might look in your browser.
Figure 4.9 : Using logical styles.
The other five logical styles aren't uniquely supported by browsers,
and because they duplicate styles you can create by other means,
they're rarely used. Here are the five styles:
| Indicates the text is a citation. Most browsers display this style in italics. The tag could be used as follows: <CITE>Citation</CITE> | |
| Indicates text is computer code or a program sample. Most browsers display this style in a monospaced font, such as Courier. The tag could be used as follows:
<CODE>Computer Code</CODE> | |
| Indicates text that a user would type in on the keyboard. Most browsers display this style in a monospaced font, such as Courier. The tag could be used as follows:
<KBD>Keyboard Input</KBD> | |
| Indicates a sample of literal characters. Most browsers display this style in a monospaced font, such as Courier. The tag could be used as follows:
<SAMP>Sample</SAMP> | |
| Indicates text is a variable name, such as those used in computer programs. Most browsers display this style in italics. The tag could be used as follows:
<VAR>Program Variable</VAR> |
Without links, the Web wouldn't be interactive, so now it's time to put the "hyper" into hypertext. Most Web documents have hypertext links that act as pointers to other resources or files on the Web. Using links, you can connect text, graphic images, and multimedia objects to your documents. The great thing about hypertext linking is that linked text, images, or objects can be located anywhere on the Web. This means you can add images to your document that don't even reside on your Web server. For example, if you have created a resource guide to the latest in cutting-edge Web technologies, you might want to refer to Pepsi's Landing Gear page, shown in Figure 4.10. You could (with Pepsi's permission) use the Landing Gear logo as the link to the Landing Gear page at Pepsi. Here's how you would do it:
Figure 4.10: Find cutting-edge Web technology at Pepsi's Landing Gear page.
<P> <A HREF="http://www.pepsi.com/landinggear/"> <IMG SRC="http://www.pepsi.com/landinggear/images/top2.gif"> </A> </P>
| Note |
The <IMG SRC> tag enables you to display an image along with the text of your document. The <IMG> tag has three basic attributes and no closing element. The only attribute of the <IMG> tag you must use is SRC, which specifies the source, or path, to the image, including the name. Tips and techniques for using the <IMG SRC> tag are explored in the section "Adding Images to Your Pages." |
The lines of HTML code in the sample code might look like a tangled mess, but they can be easily untangled. Links tell the browser where to send a request for a particular file. Initially, the browser doesn't care what type of file it's supposed to retrieve; it just tries to retrieve the file. To get to a file, browsers need to know where the resource is. The resource's location is specified as a Uniform Resource Locator, commonly called a URL.
The previous example contained two URLs:
http://www.pepsi.com/landinggear/ http://www.pepsi.com/landinggear/images/top2.gif
The first URL tells the browser to use the hypertext transfer protocol to access a file on the www.pepsi.com Web server. Here, the file is the base document in the /landinggear directory. The second URL tells the browser to use the hypertext transfer protocol to access a file called top2.gif on the www.pepsi.com Web server; the file is a graphic image in the /images/top2.gif directory. URLs with complete address information such as these let you link your documents to files on other Web servers.
| Note |
The base document is typically called index.html and can be accessed by using the forward slash. Using the slash, you can refer to shorter URLs and supply shorter URLs to those who might want to visit your document. Because the file name for the base document in a directory can vary, depending on the Web server software, here are some of the naming conventions used with popular Web server software: MacHTTP default.html. |
With the anchor tag, you can create a link. The basic format of a hypertext link is this:
<A HREF="URL">Text or Object reader sees and can click on</A>
The opening <A> tag contains the address of the files you're linking. The address isn't visible in a document unless the mouse pointer is over the anchor. The anchor is the portion of the link that's visible when a browser displays the document; it's positioned between the begin and end anchor tags. To activate a link, you move your mouse pointer over the anchor and click the left mouse button.
The great thing about the anchor portion of the link is that the anchor can be textual or graphical. If a line of text is the anchor, the reader can click on the text to activate the link. If an image is the anchor, the reader can click on the image to activate the link. You can also create an anchor that uses both text and an image.
Generally, text links are shown in blue letters and images with links have a blue border around them. Using HTML 3.2 enhancements, you can define the color of linked text and eliminate the border around linked images.
Figure 4.11 shows a page with both text and image links. Generally, when you provide both text and image menus like the one shown in the figure, you should interrelate them. Clicking on a text link, such as the one labeled World Wide Offices, takes you to a page with information on the worldwide offices of Extreme Sports Hawaii. Clicking on an image link, such as the picture of the globe, takes you to the same page.
Figure 4.11: A well-linked page that uses both image and text links.
| Note |
The page shown in Figure 4.11 illustrates many HTML 3.2 enhancements, such as centering and background images. You will learn all about the elements used to create this page in Chapter 5 "Designing with HTML 3.2." |
As you can see, hypertext links to text and objects can be the most powerful features in your document. Adding links to your document can be done in three ways:
You can access local files-files on your local Web server-by using a relative file path. URLs with relative file paths generally don't name a protocol or a Web server in the link. This is because when you use a relative path to locate a file, you're finding the file in relation to the current file. Being able to access a file in relation to the current file implies that you have already accessed a file on a particular Web server.
You can use relative file paths in these ways:
| Tip |
Study the links used throughout the chapter as examples of well-designed links. Good links don't say "Click here." A "click here" link disrupts the flow of the text and the user's natural thought processes. The Web's interactive nature is such that you should never have to say "click here." Build hypertext links into the text; by doing so, you'll create documents that flow. When using links, keep in mind that they're highlighted in the document. Typically, links are shown in underlined blue letters, which makes them stand out from surrounding text. Here's an example of poorly designed anchor text: <P>To place an order at our on-line order center This is a better way to create the link: <P><A HREF="info/orders.html">Place an order</A> using our on-line |
Another way to access files is to specify the complete path to the file you want. Although you must specify the protocol to be used for files directly accessed on a nonlocal Web server, you don't have to do this for files directly accessed on a local Web server. This means there are two ways to access files directly:
| Tip |
Designing good links is easy once you know the basics of using relative and direct paths. The key is to keep the anchor text for the link short but descriptive. Usually this text should be three to five words describing the link in a way that's clear to the user. Anchor text can be the key words of a sentence, but sometimes you might want the anchor text to include an entire short-but-descriptive sentence. Later sections of this chapter show how you can better organize links by using lists and menus. |
Internal document links can offer powerful navigation methods for your readers and are especially useful in long documents. Using internal document links, you can provide ways to quickly jump to key sections of any document. Creating links within documents is a two-part process. First, you specify a link with a keyword by using the anchor tag the same way you've used other links. The only exception to the rules about links covered earlier is that the keyword for the internal document link is preceded by the pound sign (#), as in this example:
<A HREF="#keyword">Text or object to use as the anchor</A>
The next step is to label the location in the document you want the reader to jump to. You do this by labeling the <A NAME> tag with the keyword you selected earlier in the form:
<A NAME="keyword">
The keyword used in the link and anchor name must match exactly. When a user activates an internal document link, the section of the document associated with the <A NAME> tag is displayed. If the internal document link is in the current document, the browser quickly searches the document for the <A NAME> tag with the keyword that matches the keyword in the link. When the browser finds the matching <A NAME> tag, it displays the corresponding section of the document. If the internal link is in a different document, the browser loads the document and then searches for the <A NAME> tag with the keyword that matches the keyword in the link. The location of the keyword in relation to the link in the document doesn't matter. As long as the keyword is in the body of the document, the browser can find it.
You can specify links in the current document as follows:
Using internal document links, you could create an index for your document, such as the one shown in Figure 4.12. If you clicked the Overview link, then your browser would search for the keyword "overview." When your browser found the keyword, the section associated with the keyword would be displayed. In the example, the browser would scroll forward and display the overview section of the document. The ellipses show where actual document content would go. Listing 4.6 contains the code for the sample document.
Listing 4.6. intrlink.htm.
<HTML> <HEAD> <TITLE>Web Publishing</TITLE> </HEAD> <BODY> <H1>The HTML Standard</H1> <H2><A HREF="#overview">Overview</A></H2> <H2><A HREF="#html_one">HTML 1.0</A></H2> <H2><A HREF="#html_two">HTML 2.0</A></H2> <H2><A HREF="#html_three">HTML 3.2</A></H2> <HR> <H2><A NAME="overview">Overview</A></H2> . . . <H2><A NAME="html_one">HTML 1.0</A></H2> . . . <H2><A NAME="html_two">HTML 2.0</A></H2> . . . <H2><A NAME="html_three">HTML 3.2</A></H2> . . . </BODY> </HTML>
| Note |
In the preceding sample code, the <A NAME> tag is placed between a begin and an end heading tag. This ensures that the <A NAME> tag is directly before the text or object the browser should jump to, which is the preferred way to place the <A NAME> tag in your code. If you place the <A NAME> tag before another HTML tag, you might confuse your browser, so always place the <A NAME> tag directly before the text or object the browser should jump to. |
You can specify internal links to other documents in many ways. Using relative paths and keywords, you can get to specific locations in documents on the local Web server. With direct paths and keywords, you can reach specific locations in documents located anywhere on the global Web. This is the basic format for internal links to other documents:
<A HREF="URL#keyword">Text or object reader can click on</A>
Relative paths can be used with internal document links in three ways:
Direct paths can be used with internal links as well; here are the two ways you will use internal links with direct paths:
| Caution |
Be careful when specifying internal links to someone else's document. Web documents tend to change often, and a keyword that's specified today might not be there tomorrow. |
Lists are one of the most useful tools in your writing and publishing toolkit. Lists can clearly organize your ideas and increase your document's visual appeal. You can use lists to grab readers' attention, especially those readers who are simply browsing or Web-surfing your site in their quest to find new and interesting places to visit.
The best lists are designed for a specific purpose. For example, the steps discussed in this chapter for creating a Web document make a great list:
This type of list is called a bulleted list, often used to outline goals, objectives, or tasks that have no specific order. Bulleted lists are also called "unordered lists." This list, however, is in a specific order, so a bulleted list isn't the best way to present it.
A better way to present the list of steps for creating a Web document is to number the list:
This type of list is called a numbered list; it's used when tasks must be performed in a specific order. Numbered lists are also called "ordered lists."
Lists are also used in the glossary section many nonfiction books have. A glossary lists keywords and their definitions. You can use glossary lists whenever you want to associate a keyword with a concept or definition. Many glossary lists look something like this:
HTML
HyperText Markup Language
The HyperText Markup Language is a markup language based on the Standard Generalized Markup Language that enables you to format information in visually appealing ways without sacrificing ease of use and the potential for wide distribution.
SGML
Standard Generalized Markup Language
The Standard Generalized Markup Language forms the basis for most markup languages and is an advanced language with few limitations.
VRML
Virtual Reality Modeling Language
Virtual Reality Modeling Language is an advanced markup language, based on SGI's Open Inventor Format, that enables you to create multidimensional documents.
Although the three fundamental types of lists are strongly supported by the HTML standard, the standard defines two more types of lists designed primarily for programmers. Menu lists can be used to list the contents of program menus, and directory lists can be used to list the contents of directories. Menu lists and directory lists have fallen into disuse and are poorly supported by browsers. If you use a menu or directory list, the chances are high that your browser will display the list following the rules for another list type. Therefore, it's generally not a good idea to use menu or directory lists.
The next sections offer a close look at how the three primary types of lists are used in HTML.
Bulleted lists are used to outline goals, objectives, or tasks with no specific order. The associated HTML tag for this type of list is <UL>, which is an abbreviation of "unordered list." Bulleted list tags are used in pairs, and the counterpart of the begin tag <UL> is the end tag </UL>. Items in the list are preceded by the list item tag <LI>. The <LI> tag can be used with a begin and end tag, but the end list tag </LI> is not required. Listing 4.7 shows how a bulleted list can be added to a sample document.
Listing 4.7. b-list.htm.
<HTML> <HEAD> <TITLE>Creating Web Documents</TITLE> </HEAD> <BODY> <H1>How to Create Web Documents</H1> <UL> <LI> Develop a Strategy <LI> Define the document structure <LI> Create the document <LI> Add features to the document <LI> Proof the document <LI> Test the document <LI> Publish the Finished document </UL> </BODY> </HTML>
As the first example in Figure 4.13 shows, bulleted lists are generally single-spaced. When your browser sees the begin list tag <LI>, it does two things:
Figure 4.13: Using a bulleted list.
| Note |
Most browsers display the bullet as a large solid dot, but the actual size and shape of the bullet may be different in your browser. Text browsers, such as Lynx, display the bullet as an asterisk. Other browsers use a different symbol for the bullets at each level of nested lists. Also, the Netscape browser uses extensions that let you select the bullet's shape. These Netscape extensions are featured in Chapter 5. |
Single-spacing your bulleted list can make it difficult to read. This is especially true when your list has many items, and each list item has two or more lines of text. If readability is a problem with your list, you can introduce a simple spacing technique, such as the one shown in Listing 4.8 that uses the paragraph tag to add white space.
Listing 4.8. b-list2.htm.
<HTML> <HEAD> <TITLE>Creating Web Documents</TITLE> </HEAD> <BODY> <H1>How to Create Web Documents</H1> <UL> <LI> Develop a Strategy <P> <LI> Define the document structure <P> <LI> Create the document <P> <LI> Add features to the document <P> <LI> Proof the document <P> <LI> Test the document <P> <LI> Publish the Finished document </UL> </BODY> </HTML>
Glossary lists are also called definition lists. The associated HTML tag for the list is <DL>, which is an abbreviation of "definition list." Definition list tags are used in pairs, and the counterpart of the begin tag <DL> is the end tag </DL>. Each item in a definition list has two elements:
The definition title tag <DT> specifies the glossary term or keyword you're defining. The definition data tag <DD> specifies the definition associated with the glossary term or keyword. You can use more than one definition data tag if the term has multiple definitions. Although a begin and end tag are defined for the <DT> and <DD> tags, only the begin tags are normally used.
| Tip |
A glossary list is generally for words and their definitions, but that doesn't mean you have to use them just for that purpose. You can use glossary lists whenever you want to associate a keyword, phrase, or sentence with a concept. |
Listing 4.9 shows you a sample glossary list.
Listing 4.9. g-list.htm.
<HTML> <HEAD> <TITLE>Web Publishing</TITLE> </HEAD> <BODY> <H1>Markup Languages</H1> <DL> <DT>HTML <DD>Hypertext Markup Language <DD>The hypertext markup language is a markup language based on the standard generalized markup language that enables you to format information in visually appealing ways without sacrificing ease of use and the potential for wide distribution. <DT>SGML <DD>Standard Generalized Markup Language <DD>The standard generalized markup language forms the basis for most markup languages and is an advanced language with few limitations. <DT>VRML <DD>Virtual Reality Modeling Language <DD>Virtual Reality Modeling Language is an advanced markup language based on SGI's Open Inventors Format that allows you to create multidimensional documents. </DL> </BODY> </HTML>
As Figure 4.14 shows, glossary lists are normally formatted with the terms and definitions on separate lines. The terms are aligned with the left margin, the definitions are indented, and generally, just single-spacing is used.
Figure 4.14: Using a glossary list.
Single spacing is good if you want to squeeze the list into a smaller screen space, but it makes it difficult to distinguish multiple definitions of a term. Introducing a simple spacing technique, such as the one shown in Listing 4.10, can improve the readability of your list. This technique is illustrated in Figure 4.15.
Listing 4.10. g-list2.htm.
<HTML> <HEAD> <TITLE>Web Publishing</TITLE> </HEAD> <BODY> <H1>Markup Languages</H1> <DL> <P><DT>HTML</P> <DD>Hypertext Markup Language <P><DD>The Hypertext Markup Language is a markup language based on the Standard Generalized Markup Language that enables you to format information in visually appealing ways without sacrificing ease of use and the potential for wide distribution.</P> <P><DT>SGML</P> <DD>Standard Generalized Markup Language <P><DD>The Standard Generalized Markup Language forms the basis for most markup languages and is an advanced language with few limitations.</P> <P><DT>VRML</P> <DD>Virtual Reality Modeling Language <P><DD>Virtual Reality Modeling Language is an advanced markup language based on SGI's Open Inventors Format that allows you to create multidimensional documents.</P> </DL> </BODY> </HTML>
Figure 4.15: Adding spacing to a glossary list.
Numbered lists are also called ordered lists. The associated HTML tag for the list is <OL>, an abbreviation of "ordered list." Ordered list tags are used in pairs, and the counterpart of the begin tag <OL> is the end tag </OL>. Each item in the ordered list is preceded by the list item tag <LI>.
Each item in an ordered list is consecutively numbered or lettered. Letters are used only when you nest lists, and only if the browser you're displaying the list in treats nested ordered lists uniquely. When a browser sees a begin list tag <LI>, it does three things:
| Note |
A nested list is a list inside another list. In HTML, you nest a list by including the entire structure for a list within your current list. For example, you could put bulleted lists within your numbered list structure. |
As you can see from the first example shown in Figure 4.16, numbered lists are single-spaced, just like other types of lists discussed earlier. You should use numbered lists when tasks must be performed in a particular order or when you want to add specificity to the list. When you number and add a label to a list of resources such as those shown in Figure 4.16, you add specificity to the list. Instead of the list being just another list of resources, the list represents the 12 reference works you wish were on your bookshelf. Listing 4.11 is the HTML markup for the document.
Listing 4.11. n-list.htm.
<HTML> <HEAD> <TITLE>The Reference Desk</TITLE> </HEAD> <BODY> <P>12 reference works you wish were on your bookshelf</P> <OL> <LI>American English Dictionary <LI>Bartlett's Familiar Quotations <LI>Computer Dictionary <LI>Encyclopedia Britannica <LI>Global Encyclopedia <LI>Grammar and Style Guide <LI>Grolier's Encyclopedia <LI>Handbook of Poetry Terms <LI>Hypertext Webster <LI>Roget's Thesaurus <LI>World Factbook <LI>Worldwide Telephone Codes </OL> </BODY> </HTML>
Figure 4.16: Using a numbered list.
To make the list items more distinct on the page, you could break up the page by using a spacing technique. Although you would generally do this with a short numbered list that you wanted to stand out from the surrounding text, Listing 4.12 shows how this could be done by inserting the paragraph tag into the previous example.
Listing 4.12. nlist2.htm.
<HTML> <HEAD> <TITLE>The Reference Desk</TITLE> </HEAD> <BODY> <P>12 reference works you wish were on your bookshelf</P> <OL> <LI> American English Dictionary <P> <LI> Bartlett's Familiar Quotations <P> <LI>Computer Dictionary <P> <LI>Encyclopedia Britannica <P> <LI>Global Encyclopedia <P> <LI>Grammar and Style Guide <P> <LI>Grolier's Encyclopedia <P> <LI>Handbook of Poetry Terms <P> <LI>Hypertext Webster <P> <LI>Roget's Thesaurus <P> <LI>World Factbook <P> <LI>Worldwide Telephone Codes </OL> </BODY> </HTML>
Images are the key to unleashing the power of your Web publications. Everywhere you look on the Web, you see images. Web publishers use images to enhance their pages and get the reader's attention. You can use thumbnail icons to create highlights and navigation mechanisms. You can use computer-designed images as logos, page titles, illustrations, and maps to the hot features at your site. You can use digitized photos to convey your message more powerfully than text alone does. These photos can help sell your products and services and can even show people what your part of the world looks like.
Adding images to your Web pages is easy and can be done by using either external images or inline images. Readers access external images by activating a hypertext link to the image, such as this one:
<P><A HREF="67chevy.gif">67 Chevy</A> fire-engine red.</P>
When readers click on the link, the image is downloaded to their computers. If an image viewer is available and configured for use in the reader's browser, the image is displayed; if it isn't, the image is stored on readers' hard disks for later viewing.
Adding external images to your Web publications is as easy as supplying a link to the image, but it does require forethought and a fundamental understanding of image formats and related concepts. Browsers know which image viewer to launch based on the file type extension (.jpeg, .gif, and so forth) of the external image reference in your document. When a reader uses a link to a gif image, the browser checks a configuration table to see which application should display the image, which is why your Web files should always be named with the appropriate extension. If the file is in gif format, name it with a .gif extension; if it's in JPEG format, name it with a .jpeg or .jpg extension.
Unlike external images that aren't displayed directly, inline images can be viewed directly. When a reader with a graphics-capable browser finds your page, the images can be automatically loaded, along with the text on the page. You can add inline images to your publications with the <IMG> tag. In HTML 2.0, the <IMG> tag has four attributes:
SRC
ALT
ALIGN
ISMAP
The most important attribute for the <IMG> tag is SRC, which specifies the path to the image. This path is in the form of a URL that can be a relative path, such as this one:
<IMG SRC="67chevy.gif">
It can also be a full path, as shown here:
<IMG SRC="http://tvp.com/usr/images/gifs/67chevy.gif">
The ALT attribute for the <IMG> tag specifies other text to display in place of the image. Readers with a text-only browser see the alternate text instead of the image. If you don't specify other text to use, readers with a text-only browser see a note that marks the location of the image on the page, such as [IMAGE].
Figure 4.17 shows a cool car-you'll have to take my word for it that it's fire-engine red. The graduated border was done by inserting the image into an HTML table. You'll learn all about HTML tables in Chapter 6 "Effective Use of Tables." Because a page devoted to cars would be pretty useless without any pictures, alternative text and fancy linking is used to allow users in text-only mode to click on the alternative text to see the image in an external image viewer. The HTML to do this is as follows:
<A HREF="coolcar.jpg"> <IMG SRC="coolcar.jpg" ALT="Cool Car in Fire-engine Red"> </A>
Figure 4.17: Images are powerful additions to any page.
The ALIGN attribute specifies the image's alignment in relation to a line of text. By default, the bottom of the image is aligned with the text, but you can specify this explicitly by using a value of ALIGN=BOTTOM. You can align the top of the image with the text by using a value of ALIGN=TOP, and you can align the middle of the image with the text by using a value of ALIGN=MIDDLE.
The ISMAP attribute specifies that the image is an image map. You can use image maps to create graphical menus with hot areas that the user can click on. (See Chapter 20 for more information.)
Browsers handle inline images in many different ways. Some browsers load all text and associated images before displaying any part of your document. Some browsers display text and graphics as they read in your document. Other browsers load and display the textual portions of the page, leaving placeholders where the images go and then retrieving the images one by one. A few advanced browsers let the reader select options for displaying the components of the page.
Individual browsers handle inline images in many different ways, but all graphics-capable browsers give readers a way to turn off the automatic image-loading feature of the browser. However, this nice feature for readers means more work for Web publishers.
| Note |
This discussion on images is only a preliminary one. Because images are so important to your Web publications, an entire section of this book is devoted to images and graphic design. For more information on using images, see Part IV, "Enhancing Web Pages with Graphics." Part IV has six chapters that explore everything from how to create bigger, better, and faster-loading graphics to how to use animation. |
The Web was designed to be an open-ended multimedia system based on hypertext. However, the hypertext transfer protocol isn't the only protocol you can refer to in your Web publications. You can refer to files with any valid protocol. The format of URLs in hypertext references should follow the URL scheme outlined in Chapter 2 "Developing and Planning a Web Site."
The next sections explain how to use these protocols in your Web documents:
Thousands of files are available on FTP sites around the world, and your Web documents can have links to files retrieved with FTP. The general form for using a hypertext reference to an FTP file is this:
<A HREF="ftp://host/path"> Anchor text </A>
If you specify a directory path instead of the full path to a file, the reader's browser lists the directory's contents. The following hypertext reference retrieves a listing of the MS-DOS directory from an FTP server at the University of Florida:
<A HREF="ftp://ftp.eng.ufl.edu/pub/msdos">MS-DOS Tools</A>
Gopher information is presented to readers as easy-to-navigate menus. Readers can access Gopher files by using a hypertext reference, such as the following:
<A HREF="gopher://host/path"> Anchor text </A>
The following hypertext reference retrieves information on the DILS Project from a Gopher server at the University of Toronto:
<a href="gopher://gopher.epas.utoronto.ca/11/cch/disciplines/ medieval_studies/keefer">DILS Project</A>
You could use a special type of link that starts a Create Mail session in the reader's browser:
<A HREF="mailto:william@tvp.com">
This mailto reference tells the reader's browser to open a Create Mail session that will be sent to william@tvp.com. This type of link enhances the page's interactivity and supplies a way to get feedback from readers. Don't forget to anchor the link to the page with text or graphics that readers can click on. Here's one way to do that:
<A HREF="mailto:william@tvp.com">Send e-mail to the publisher</A>
In your Web documents, you can refer to any of the thousands of newsgroups on the Internet in two main ways: by using the reader's local news server or by using NNTP (network news transfer protocol). Referring to newsgroups on a local news server is easy; you just specify the name of the newsgroup in the form:
news:newsgroup.name
In this example, you could include a link to the alt.books.reviews newsgroup:
<A HREF="news:alt.books.reviews"> alt.books.reviews</A>
NNTP is used to transfer postings to and from a news server; here's how it's used to link to the alt.books.reviews newsgroup:
<A HREF="nntp://news.aloha.com/alt.books.reviews"> alt.books.reviews</A>
| Caution |
Generally, to get to the news server, the reader must be a known client. Although this protocol could be useful to an exclusive group of known users, most are finding your pages from a remote site and can't use the named news server. Consequently, you should use newsgroups available on the reader's local news server whenever you want to reach the widest possible audience. |
With telnet, you can let readers reach an interactive service on a remote host. In the telnet session, readers can input commands at a command prompt as if they were logged on to the remote host. You can refer to telnet in your Web documents in this way:
<A HREF="telnet://tvp.com"> Telnet </A>
You can refer to indexed databases on WAIS (wide area information systems) by using a WAIS URL. To use WAIS, the reader's browser must either be configured to invoke a WAIS client that the reader has installed on his or her system or be able to act as a WAIS client. You can refer to WAIS in your Web documents as follows:
<A HREF="wais://tvp.com/wwwdata"> Search our World Wide Web database </A>
Web publishing with HTML is easy. Using the techniques discussed in this chapter, you can create simple yet effective Web documents. The two key sections of your HTML documents are the header section and the body section. You can use the header to supply information about the document to the Web server, but the body section is where your document comes to life. Dozens of HTML tags can be used in the body, and they all increase your documents' visual impact.
