|
|
All right, now that you've designed the Mona Lisa, you get to paint her—with both hands tied behind your back. HTML is a horribly limiting media, and full of bugs. However, those bugs can usually be avoided through the use of clear HTML
programming, which is what this chapter discusses.
A comparative list of HTML tags is included in Appendix H, "Comparative HTML Reference Guide."
The first thing you should take into consideration when designing HTML documents is that HTML describes the content and structure of the page, and not the appearance. If you are used to working with WYSIWYG (What You See Is What You Get) text editors
like PageMaker or even Microsoft Word, you may be sadly disappointed with the lack of control over the final output that HTML provides.
Rather than describing exact page placement (as in exact X,Y coordinates), HTML describes the structure of the page by using HTML tags—it's almost as if it's giving the browser hints instead of solid commands. For instance, instead of enlarging
the title text, you enter the text with the tag <H1> before the text, and </H1> after the text. This tells the browser to display this text as a large heading (which may look different on different browsers, but will always be larger and bolder
than text without these tags). This is one of the main reasons it is so important to test your pages on different browsers and make sure they look good on all platforms (more on this in Chapter 19, "Getting It Up and
Running").
Many programmers see this lack of control as a major hurdle when designing the layout of their pages; we have found that there are ways around most of these layout limitations, which we will describe to you as this book progresses.
It is one of your jobs to use as little HTML code as possible. This is not to say that you should be creating simple, sparse pages and sites, but that you should try to remove all unnecessary tags—they are a constant problem with many "simple to use" Web page creation software applications. The only way you'll be able to do this is if you understand what each tag means.
HTML files are just ASCII text files with special commands (tags); they look like this:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <HTML> <HEAD> <TITLE>Your title here</TITLE> </HEAD> <BODY> <H1>Welcome to a basic HTML document</H1> This is a basic HTML document. </BODY> </HTML>
The text within the brackets describes the structure of the regular text (as in Figure 10.1).
Figure 10.1. A basic HTML document.
For example, if the title of your page is My Home Page, and you want that displayed as large, italicized text, your code for that would be: <H1><I>My Home Page</I></H1>. You'll notice that you not only must define the text at
the beginning, but in many cases you must also turn that definition off with an ending tag. Ending tags are defined with a slash (/) before the description; this tells the browser to discontinue that format; otherwise, the rest of your entire page will be
in that style. An HTML element will include a tag name, may include some attributes and some text or hypertext, and will appear in an HTML document in one of three ways:
<tag_name> your text </tag_name> <tag_name> <tag_name attribute_name=argument> your text </tag_name>
So, the best way to start an HTML file is to write out all of your content in a text editor and then go back adding HTML tags.
This tag is the first to appear and is used to declare which HTML version your page is using:
All of your text and HTML tags go within the HTML tags. This tag indicates that the file is an HTML document—it's telling your browser what to expect.
These tags contain within them your document head elements, such as the following:
<!--Author: you -->
A common head element looks something like this:
<HEAD> <TITLE>A common head element</TITLE> <!-- Author: Kim and Brad Hampton --> <!-- Revision: 2.0 08/08/96 --> <META Name="description" Content="A common head element, including the META tag! Associate keywords to your Web documents!"> <META Name="keywords" Content="A common head element, HTML, HEAD, META, TITLE, keywords, taking advantage of HTML, Website, Kim Hampton, Brad Hampton, commercial web sites"> </HEAD>
These tags contain within them the contents of the document (tags and the text) and can be used to describe optional attributes of the document, such as the following:
A common <BODY> tag looks like this:
<BODY BACKGROUND="backrd.gif" LINK="#0000FF" VLINK="#0000A0" ALINK="#FF00FF">
Block elements define the placement and treatment of text blocks. These can include paragraph structure, list structure, and other text formatting.
All of these elements cause paragraph breaks.
Headings are always closed with a closing tag (for example, </H1>). H1 stands out the most (is the largest heading in most browsers), and H6 stands out the least (the smallest heading). In HTML 3, you can set an alignment for your heading like
this:
<H1 ALIGN=CENTER>This heading is centered</H1>
This one is tricky. Different versions of HTML use paragraph tags differently. Originally, this tag was used as a one-sided tag and was placed at the end of a paragraph as a paragraph break (a double-return). HTML 2 and 3 indicate its use as a
two-sided tag, with the <P> tag going at the beginning of the paragraph and the </P> tag being optional at the end. We never use this </P> tag; it doesn't seem to make a difference in how the paragraph is displayed and seems unnecessary
work to us. We therefore use the <P> tag as a paragraph break at the end of a paragraph (as we always have) and leave it at that. Some people recommend getting into the habit of placing your <P> tags at the beginning of the paragraph because it
may become a standard; we have just gotten used to using the tag at the end and we have seen no reason (yet) to change. With this information in mind, use your own judgment in regard to where to place your <P> tag.
List options create the automatic numbering, bulleting, and/or indentation of list items. Different list options treat the enclosed text differently and can be useful when presenting long lists or important items.
An unordered bulleted list contains one or more <LI> elements, which represent individual list items. Netscape adds a type attribute to this, which can describe whether the bullet used is a circle, disk, or square, and is used like this: <UL
TYPE=circle>. Here's an example:
<UL> <LI> First item in the list <LI> Last item in the list </UL>
An ordered list (1,2,3,) contains one or more <LI> elements, which represent individual list items. Netscape adds a type attribute to this to specify whether the list items are marked with: capital letters (TYPE=A), small letters (TYPE=a), large
roman numerals (TYPE=I), small roman numerals (TYPE=i), or numbers (TYPE=1—the default—is usually numbers). Here's an example of code that will make a lettered list:
<OL TYPE=A> <LI> First item in the list <LI> Last item in the list </OL>
A definition or glossary list contains <DT> elements that give terms, and <DD> elements that give the corresponding definitions. It is commonly used like this:
<DL> <DT> Term to be defined #1 <DD> Definition of term #1 <DT> Term to be defined #2 <DD> Definition of term #2 </DL>
These tags define a menu list. A menu list contains one or more <LI> elements, which represent individual menu items. It is used just like <OL> and <UL>, and can also be used without <LI> to indent text.
These elements are rendered with a monospaced font and preserve the layout defined by spaces (like this) and line break characters.
These are used in HTML 3 to group related items together and can be used with the ALIGN attribute, as in: <DIV ALIGN=LEFT>
This is used in HTML 3 to center text contained within the tags.
This is used for long quotes or citations and is usually rendered with indented margins.
This is used to define a fill-out form for processing by the HTTP server. Attributes include ACTION, METHOD, and ENCTYPE. More on forms is presented in Chapter 11, "Integrating HTML with CGI.";
These place a line across your page and do not have an end tag. Attributes include ALIGN (HTML 3), NOSHADE (HTML 3), SIZE (HTML 3) and WIDTH (HTML 3).
This is an HTML 3 tag. Every table can begin with an optional CAPTION followed by one or more <TR> elements, which define the table's rows. Every row has one or more cells that are defined by <TH> or <TD> elements. Common attributes
include WIDTH, ALIGN, BORDER, CELLPADDDING, and CELLSPACING. (More on tables later in this chapter.)
Text-level elements enable you to change the characteristics of the text contained within them. These can be very useful for distinguishing blocks of text or for emphasis.
These elements do not cause paragraph breaks.
These elements all require starting and ending tags and include
| <B> | Bold |
| <U> | (HTML 3) Underlined |
| <TT> | Monospaced text or teletype |
| <I> | Italics |
| <BIG> | (HTML 3) Large font |
| <SMALL> | (HTML 3) Small font |
| <SUB> | (HTML 3) Subscript |
| <SUP> | (HTML 3) Superscript |
| <S> | (HTML 3) Strike-through text |
| <BLINK> | (Netscape 1.0) Blinking text |
This HTML 3 element enables you to change the font color, size, and face of the enclosed text. Colors are defined in hexadecimals, or one of the understood color names. Attributes are COLOR (Netscape 2.0), SIZE and FACE (MS IExplorer). Some examples of
this tag's uses are
<FONT SIZE=+1>This font is bigger than the previous</FONT> <FONT COLOR="#FF0000">This text is red</FONT> <FONT FACE="Lucida Sans,Arial,Times Roman"> This text will be in either Lucida Sans, Arial, or Times Roman, depending on which fonts are installed on the viewers system, trying each in order.</FONT>
These all require starting and ending tags and include
| <STRONG> | Strong emphasis, generally rendered in a bold font |
| <DFN> | Defining instance of the enclosed term |
| <EM> | The basic emphasis, normally rendered in an italic font |
| <CODE> | Used for extracts from program code |
| <KBD> | Keyboard, used for text to be typed by the viewer |
| <SAMP> | Used for sample output from scripts, programs, and so on |
| <VAR> | Used for variables or arguments to commands |
| <CITE> | Normally used for citations or references to other sources |
Last but not least, these special elements can also be included in an HTML document.
This element defines hypertext links. Attributes include NAME, HREF, REL, REV, METHODS, URN, and TITLE.
NAME is used to associate a name with a part of a document that can be linked to, like this:
<A NAME="chapter1">Chapter 1</A>
You can create a link from within the page to this part of the document by using this code:
<A HREF="#chapter1">Jump to Chapter 1</A>
HREF is also used to define the URL of your linked image or document. A common usage looks like this:
<A HREF="http://www.hampton.org/index.html">Jump to hampton.org</A>
Note
If you are linking to documents stored on the same machine, you can simply link to the directory rather than naming the entire URL:
<A HREF="/products/widget.htm">This links to a page named widgets, which exists in the products directory</A>.
An anchor must include a NAME or HREF attribute, and may include both. REL, REV, TITLE, METHODS, and URN are attributes that are not commonly used.
This tag is one-sided and is used to force a line break. Unlike the <P> tag, the <BR> tag can be used over and over, resulting in a carriage return with each use. (The <P> tag is usually ignored if there is no code between successive
uses.)
This tag inserts images into the document and requires no ending tag. Common attributes include SRC, ALT, ALIGN (HTML 3), HEIGHT (HTML 3), WIDTH (HTML 3), BORDER (Netscape 1.0), VSPACE (HTML 3), HSPACE (HTML 3), USEMAP (HTML 3), ISMAP (HTML 3), and
LOWSRC (Netscape 1.0). A common usage looks like this:
<IMG SRC="flower.gif" ALT="[A Flower]">.
More on the image tag in Chapter 12, "Working with Graphics.";
This tag is an HTML 3 specification and is supported by all JAVA-enabled browsers. It enables you to embed a JAVA applet into an HTML document. The contents of the element are used as a backup if the applet can't be loaded; it also uses associated
PARAM elements to pass parameters to the applet. Attributes include CODE, CODEBASE, NAME, ALT, ALIGN, WIDTH, HEIGHT, VSPACE, and HSPACE. We discuss the applet tag more in Chapter 18, "Bells and Whistles.";
This HTML 3 tag enables the definition of client-side image maps and contains one or more AREA elements used to define the hot zones (linked areas) on the associated image and to bind the hot zones to specified URLs. We will discuss image mapping much
more in Chapter 12.
The best way we have found to learn and absorb how HTML works is to study others' code. Get on the Web, find cool pages, look at their source code (view source in Netscape), and see how it works. Compare the page on your browser to the source code. See
how each tag affects the page.
Appendix H, "Comparative HTML Reference Guide," will be useful when you are designing your page from scratch or finding out what a particular tag does when investigating others' code. Another great tool for learning HTML is the shareware HTML
Library included on your CD-ROM. It enables you to look up code in many different ways and can be invaluable to the beginner.
If you need more help with basic HTML coding, there are several good books on the market (our favorite being by fellow Sams.net author Laura Lemay, Teach Yourself HTML in 14 Days, Premier Edition).
If you are trying to avoid a lot of HTML coding, you have a couple of options. The first is to use an HTML editor (such as HTML Notepad or WebMania, included on your CD-ROM); these are described in more detail in the preceding chapter, "Keeping
Organized."
Another option is to begin with the templates included on your CD-ROM. There are three separate templates provided. The first is the home page template—a very simple page designed with the bare minimum of tags, just to get you started
(D:\templat\home1.html).
The second is a tables template (D:\templat\tables.html). This template (see Figure 10.2) is designed for you to choose the table you need and then cut and paste it into your HTML document. (We have included this because many novice programmers have
the hardest time with HTML tables.)
The last template is a frames/noframes template (as described in Chapter 7, "Laying the Foundation"). If you are interested in designing a frames Web site, you will find this template particularly useful. This
template is actually a collection of several HTML files. The easiest way to work with it will be to copy the entire directory (D:\templat\frames) into a directory on your hard drive and alter each page individually. To make it easier on yourself, keep all
the filenames intact (we have already linked the pages). We have put graphics on the pages to help explain what should be replaced and what to name the files.
Figure 10.2. The tables template.
When working with any of the frames layout templates, go over all the code in a text editor, changing all of the content text and appropriate links (and don't forget the mailto: links). These templates are designed not only to get you started, but as a
learning aid, so don't just replace the tags. Investigate the HTML code, play with it, see how small changes in the code can dramatically change the document.
You can use frames to show text and graphics in separate, partitioned, and scrollable regions simultaneously (see Figure 10.3). Now, there is a lot of controversy over the use of the frames tag, namely only Netscape and the newest Microsoft browsers
can view frames properly (though this will change in the near future). The advantages of using frames are
The first thing you should understand when designing a frames site is that the home page of your site (usually index.html) does not actually contain your text (besides that which is within the noframes tag). All the frames page does is tell the browser
how to lay out your frames and which HTML files to place within each. Think of the frames HTML file as your layout file, and your HTML files contained within your frames as your content files.
The best way to learn how to use the frames tag is, of course, by example. For this example we are trying to create a frames site with layout, as shown in Figure 10.4.
Figure 10.4. The layout goal of our example frames site.
To accomplish this layout, we must first divide the browser window into left and right frames, and then further divide the right frame into upper and lower frames.
Listing 10.1 shows how this can be done.
Listing 10.1. An HTML frames example.
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN" "html.dtd">
<HTML>
<HEAD>
<TITLE>A Frames Web Site</TITLE>
<!-- Author: Kim and Brad Hampton -->
<!-- Revision: 3.0 8/08/96 -->
</HEAD>
<FRAMESET COLS="140,*">
<FRAME SRC="buttons.htm"
NAME="1buttons"
MARGINHEIGHT=0
MARGINWIDTH=0
SCROLLING="AUTO"
FRAMEBORDER="YES"
FRAMESPACING="1"
NORESIZE>
<FRAMESET ROWS="65,*">
<FRAME SRC="header.htm"
NAME="2header"
SCROLLING = "no"
MARGINHEIGHT=0
MARGINWIDTH=0
NORESIZE>
<FRAME SRC="info.htm"
NAME="3info"
NORESIZE>
</FRAMESET>
</FRAMESET>
<NOFRAME>
<H2>Welcome to our Home Page.</H2>
This is the NOFRAMES page, which is viewed by non-frames compatible browsers.
</NOFRAME>
</HTML>
Now we will explain what each of these tags and associated attributes do, and how it all comes together.
The first thing to notice is that the opening and closing <BODY> tags, which normally appear in HTML documents, have been replaced by <FRAMESET> tags. This is the tag that sets the layout for your frames page. This is also the container
that hosts the FRAME, FRAMESET, NOFRAMES tags. The opening <FRAMESET> tag must include either a column list or a row list, taking the form "COLS=column_list" or "ROWS=row_list". Row or column lists are always separated by commas.
COLS= is the attribute of our first FRAMESET tag and is used to separate the frame document into two vertical columns. You can specify the column dimensions by pixels, percentage (%), or a relative size (*). In our example we used this description:
<FRAMESET COLS="140,*">
This means make the first column 140 pixels wide, and the other column as wide as the remaining browser screen.
The next section of code in our example is the <FRAME> tag. This tag is used to describe the individual frame, which in this case is the frame on the left. Unlike many tags, the <FRAME> tag does not occur with a closing
</FRAME> counterpart:
<FRAME SRC="buttons.htm"
NAME="1buttons"
MARGINHEIGHT=0
MARGINWIDTH=0
SCROLLING="AUTO"
FRAMEBORDER="YES"
FRAMESPACING="1"
BORDERCOLOR="0000FF"
NORESIZE>
The attributes we used for the <FRAME> tag are
Describes the source file of the document contained within that frame (in this case buttons.htm). It is advisable to make your source files containing information (in our example, 3info.htm) HTML 2-compliant (containing no HTML 3, Netscape, or
Microsoft extensions). This will enable you to make your frames site compatible with non-frames capable browsers.
Provides a target name for the frame (in this case 1buttons). Your name should always start with an alphanumeric character.
Controls the margin height (in this case 0) of the frame in pixels.
Controls the margin width (in this case 0) of the frame in pixels.
Enables you to choose the scrolling option for the frame (in this case AUTO). Choices are: YES, NO, or AUTO (which automatically allows scrolling only if necessary).
Gives you the option to display or not display a border for a frame. This tag would create a frame with borders (which is the default). For now, this tag is only recognized by Microsoft Internet Explorer 3.
Used to create additional space between frames (specified in pixels). For now, it is only recognized by Microsoft Internet Explorer 3.
Used to prevent the user from resizing the frame (as is usually allowable).
This is not used in this example, but when used, it defines the color of the frames border in hexadecimal or by name. It is only recognized by Netscape Navigator 3 (for now).
The next tag in our example is yet another <FRAMESET> tag, using a different attribute, ROWS. This creates a frame document with horizontal rows. You can specify the row dimensions by pixels, percentage (%), or a relative size (*).
In our example we use this code:
<FRAMESET ROWS="65,*">
which separates the remaining frames column into two different, horizontal frames.
This is followed by two <FRAME> tags describing those horizontal frames:
Now that we have the frames HTML file set up, we add the three separate HTML content files to the same directory and end up with a page that looks like Figure 10.5.
Figure 10.5. Our example frames site.
Now that you know the basics of setting up a frames page, you are ready to get down to the task of linking within your frames.
When a viewer browsing a nonframes document selects a hyperlink to another document, the current page disappears from the browser window and is replaced by the requested page. When selected, each link instructs the browser to update the entire window
with a new document. In frames, however, when hyperlinks are selected, the browser can update either the frame containing the hyperlink only, a separate frame, multiple frames, or even the entire screen. Which occurs all depends on the parameters specified
in the hyperlink, specifically by using the TARGET attribute.
In frames, every hyperlink should specify where the new document should be displayed using the TARGET attribute. The format used for specifying a target is:
<A HREF="the_url" TARGET="target_name">The Hyperlinked Text</A>
The ta
