Tag Basics

At its core, an HTML document is simply a plain text file containing special codes, called tags, that are usually placed around blocks of text. These blocks and the tags that surround them are called elements. A Web browser such as Microsoft Internet Explorer interprets, or parses, these elements to determine what to display on the screen. In most cases, each element has an opening tag and a closing tag. An opening tag consists of the tag name surrounded by angle brackets (the "<" and ">" characters). For example, the boldface opening tag is defined as <B>. A closing tag is also enclosed by angle brackets, but in this case a forward slash precedes the tag name: </B>. The affected text appears between the opening tag and the closing tag: when processed by the browser, the text between a <B> tag and its closing </B> tag is displayed in boldface.

To see how tags are used, let's analyze a basic Web page. Code Listing 2-1 presents some simple code that you might use to create such a page, and Figure 2-1 shows how Internet Explorer displays this code. (Remember that all of this book's code listings and sample files can be found on the companion CD.)

Code Listing 2-1.

 <HTML> <HEAD> <TITLE>Listing 2-1</TITLE> </HEAD> <BODY> Yet another "Hello World!" </BODY> </HTML> 

HTML Container Tags

The first tag in Code Listing 2-1, <HTML>, indicates to the browser that the following material should be processed using the syntax and structure rules established for HTML. The corresponding closing tag, </HTML>, appears at the end of the file. You should not place anything outside these two tags, because the results can be unpredictable.

click to view at full size.

Figure 2-1. A basic Web page.

Header Tags

The <HEAD> and </HEAD> tags mark the boundaries of the header region of the file, which contains items that are not directly rendered or displayed on the page. The header is optional, although the HTML specifications state that some elements should be used only inside it. TITLE is one such element. The <TITLE> and </TITLE> tags define what appears in the browser's title bar (the blue area above the menu bar). Because Internet Explorer (like most browsers) automatically adds its own name to the title, the document shown in Code Listing 2-1 will be titled Listing 2-1 - Microsoft Internet Explorer.

Body Tags

The next region indicated in Code Listing 2-1 is enclosed by the <BODY> and </BODY> tags. As you might expect, this area is known as the body of the document, and it contains the document's contents—the material that is visible on the page. Thus, our example displays the text Yet another "Hello World!"

Character Formatting Tags

If the preceding example represented the limits of HTML, the Web would be a pretty boring place. But you can get a little more creative and change the appearance of text with character formatting tags, as shown in Code Listing 2-2 and in Figure 2-2.

Code Listing 2-2 contains a variety of basic character formatting tags. In the first line, the bold tags <B> and </B> surround the words bold text—and these words appear in boldface in Figure 2-2. In the next line, the <I> and </I> tags italicize the words italic text. Several other character formatting tags are shown, including <U> for underlining, <STRIKE> for strikethroughs, <KBD> for fixed-width type, and <SUB> and <SUP> for subscripts and superscripts.

Code Listing 2-2.

 <HTML> <HEAD> <TITLE>Listing 2-2</TITLE> </HEAD> <BODY> This is some <B>bold text</B>. This is some <I>italic text</I>. This is some <U>underlined text</U>. This is some <STRIKE>strikethrough text</STRIKE>. This is some <KBD>fixed-width text</KBD>. This is some <SUB>subscripted text</SUB>. This is some <SUP>superscripted text</SUP>. </BODY> </HTML> 

You can use the <FONT> tag to set up much more complex text formatting. This tag supports a variety of attributes, including COLOR, SIZE, and FACE, which detail exactly how the tag works. Many other tags support attributes, sometimes known as parameters.

In Code Listing 2-3, the first <FONT> tag illustrates the use of the COLOR attribute, which allows you to change the color of text. The COLOR attribute supports a huge range of colors, from AliceBlue to YellowGreen. You can find a full list of these named color values in the Color Table on the SBN Workshop Web site and on the CD that accompanies this book. (On the CD go to Workshop (References); DHTML, HTML & CSS; DHTML Object Model; References, and then choose Color Table in the content frame. To get to the online version, visit the MSDN Online Resource page at msdn.microsoft.com/resources/schurmandhtml.htm , or open the file named MSDN_OL.htm on the companion CD, and choose Color Table.) The COLOR attribute also supports hexadecimal triplet RGB values, which means that you can specify colors using hexadecimal numbers (such as #0000FF). Don't worry if you aren't familiar with this method—the Color Table lists just about any color you might want, as well as its hexadecimal equivalent.

The next <FONT> tag includes the SIZE attribute, which lets you change the relative size of the text. You can set text size on a scale of 1 to 7, with 7 being the largest. These numbers do not correspond to any specific point or pixel size, and the same size setting can vary in appearance on different systems. (You can gain much more precise control by using Cascading Style Sheets (CSS), as you will see in Part 3.)

click to view at full size.

Figure 2-2. A page with sample character formatting.

NOTE
In this book, HTML tags are shown in all uppercase letters for readability: <TITLE>, for instance. You do not need to follow this convention when coding your own pages since HTML is not case sensitive. In other words, <BODY> is equivalent to <Body> and <body>. However, certain other technologies that Internet Explorer supports, such as Microsoft JScript, are case sensitive. JScript is discussed in Part 2 of this book.

Code Listing 2-3.

 <HTML> <HEAD> <TITLE>Listing 2-3</TITLE> </HEAD> <BODY> <FONT COLOR="blue">Color!</FONT> <FONT SIZE="5">Size!</FONT> <FONT FACE="Courier">Typeface!</FONT> <FONT SIZE="6" COLOR="blue" FACE="Arial">Many Changes!</FONT> </BODY> </HTML> 

The third <FONT> tag in Code Listing 2-3 uses the FACE attribute to change the typeface (font) of the text. In general, it is a good idea to use the default font (which means not to specify a font face in this tag at all) because it is often hard to predict what fonts are available on an end user's machine. This is especially true for situations like the Web, in which users' platforms can range from Microsoft Windows NT on a PC to MacOs on a Macintosh or Solaris on a Sun. Some commonly available fonts include Arial, Courier, and Times. (Internet Explorer 4 and 5 support a technology called font embedding, which allows you to include fonts that users can download along with your Web page; see Chapter 12 for more information.)

click to view at full size.

Figure 2-3. Formatting characters with the <FONT> tag.

In HTML, a single tag can have multiple attributes. For instance, the final <FONT> tag in Code Listing 2-3 produces large blue text in the Arial typeface because its SIZE attribute is set to 6, its COLOR attribute to blue, and its FACE attribute to Arial. The attributes could have been listed in any order with the same results.

Line Formatting Tags

You might be surprised to see that Internet Explorer renders the separate lines of HTML in Code Listing 2-3 as one continuous line of text that wraps only when it reaches the edge of the browser window (Figure 2-3). HTML standards state that browsers should ignore line endings (linefeeds and carriage returns) in the source text file. (To be specific, each one is treated as a single whitespace, which refers to any character that appears as a blank space on a computer screen or printer. This includes the tab character, the space character, and other special characters. Sequential whitespaces are also treated as single spaces.) Instead, special tags are used to determine line formatting, as shown in Code Listing 2-4. Figure 2-4 shows the result of Internet Explorer processing this code.

The <P> and </P> tags in the first two lines of the body in Code Listing 2-4 define a block of text as a paragraph. As you can see in Figure 2-4, the tags cause each paragraph to be preceded and followed by a blank line.

The closing </P> tag is optional; if Internet Explorer encounters a new <P> tag, it automatically ends the previous paragraph. Thus, Internet Explorer displays the HTML code

 <P>This is a paragraph.</P> <P>This is another.</P> <P> 

in the same way it displays the following code, which has no closing </P> tags:

 <P>This is a paragraph. <P>This is another. <P> 

Both of these code snippets generate identical results.

The next two lines in Code Listing 2-4 demonstrate level-one and level-two headings. Like a paragraph, a heading has space before and after it. Each heading level is associated with a specific font size. HTML defines six levels of built-in headings; level-one headings are displayed as very large and level-six headings as very small. The different heading tags are not dependent on one another; thus, a level-three heading can be on its own, not preceded by a level-one or level-two tag.

The final lines of Code Listing 2-4 demonstrate the break tag, <BR>. This tag inserts a line break, but unlike the <P> tag it doesn't insert any extra blank lines. You don't need to add a closing </BR> tag because a break does not define a region of text. Rather, the browser breaks the line as soon as it encounters the <BR> tag. You can use multiple <BR> tags to insert multiple line breaks. This is an easy, although crude, method of creating custom spacing between lines.

Code Listing 2-4.

 <HTML> <HEAD> <TITLE>Listing 2-4</TITLE> </HEAD> <BODY> <P>This is an example of a paragraph.</P> <P>This is another paragraph.</P> <H1>This is a level-1 heading.</H1> <H2>This is a level-2 heading.</H2> This is not followed by a break. This <B>is</B> followed by a break. <BR> This is not followed by a break. This is not followed by a break. </BODY> </HTML> 

NOTE
Part 3 of this book explains the use of Cascading Style Sheets (CSS), a relatively new standard that allows precise control over virtually all formatting, from alignment and margin width to the color and size of text. CSS has taken the place of the FONT tag on many Web sites.

click to view at full size.

Figure 2-4. A page containing line formatting tags.

There may be times when you want to force the Web browser to ignore its whitespace rules and break the lines of text where your code has line breaks and put spaces where you have spaces. This is accomplished with the <PRE> tag, shown in Code Listing 2-5, which tells the browser that you have preformatted the upcoming text.

Code Listing 2-5 also demonstrates the horizontal rule tag, <HR>, which creates a horizontal line, or rule, across the page. Two common attributes used with the <HR> tag are SIZE and WIDTH. SIZE determines the thickness of the rule in pixels, which can vary from 1 to 100 pixels. The default SIZE is 2. WIDTH controls the width of the rule, which you can set to a specific number of pixels or to a percentage of the available space on the screen. Thus, <HR WIDTH="50"> creates a horizontal rule that is 50 pixels wide, while <HR WIDTH="50%"> draws a rule that is 50 percent of the width of the browser window. The default width is 100 percent. Finally, in Code Listing 2-5 we see an example of the no-break tag, <NOBR>. Anything inside a <NOBR> element will not break at the end of a line. This can be very helpful if you want to keep words or graphics together on the same line. For example, there might be a legal requirement for a product's name to be displayed entirely on one line.

Code Listing 2-5.

 <HTML> <HEAD> <TITLE>Listing 2-5</TITLE> </HEAD> <BODY> <PRE> This is an example of some      preformatted text. Notice how     the page   is displayed with the same spacing and    line breaks as the code. </PRE> <HR> <HR WIDTH="50%" SIZE="6"> One of these lines uses no-break and one does not. <NOBR>One of these lines uses no-break and one does not.</NOBR> </BODY> </HTML> 

Figure 2-5. Examples of preformatted text, horizontal rules, and the no-break tag.

NOTE
A warning about using the <PRE> tag: browsers normally wrap text automatically when a line is longer than the browser's display window. When using <PRE>, however, this does not occur. Thus, incautious use of preformatted text can result in pages that require the user to scroll horizontally to view all the text, as shown in Figure 2-5.

NOTE
An <HR> tag with a 100 percent width normally will not take up the entire width of the screen. Typically, there is a small margin on each side of the rule. You can correct this (as well as other cases in which you want content to reach to the edge of the screen) by reducing the margins on the <BODY> tag. The horizontal margins can be eliminated by setting the LEFTMARGIN attribute of the <BODY> tag to 0. The vertical margins can be eliminated with the TOPMARGIN attribute. Thus, the following <BODY> tag would completely eliminate margins around the page.

<BODY LEFTMARGIN="0" TOPMARGIN="0">

You can also increase the margins around the page by increasing the values of these attributes.

Alignment Attributes and Tags

HTML also lets you control the horizontal position of elements on the page. Code Listing 2-6 demonstrates two methods. Figure 2-6 shows the results.

Code Listing 2-6.

 <HTML> <HEAD> <TITLE>Listing 2-6</TITLE> </HEAD> <BODY> <P ALIGN="left">This text is left-aligned.</P> <H2 ALIGN="center">This text is centered.</H2> <H5 ALIGN="right">This text is right-aligned.</H5> <CENTER>This text is also centered.</CENTER> </BODY> </HTML> 

By default, Web browsers align all text along the left side of the screen (left-aligned). One way you can change this is by using the ALIGN attribute. Several tags support the ALIGN attribute, including <P> and all the heading tags. In the first three lines in the body of Code Listing 2-6, ALIGN is used to left-align text, center it on the screen, and right-align it. Because centering text is extremely common, this action has its own tag, <CENTER>, as you can see in the last line of the body. The browser will center on the page any text between the <CENTER> and </CENTER> tags.

click to view at full size.

Figure 2-6. A page showing various text alignments.

Image and Hyperlink Tags

Images and hyperlinks provide some of the most powerful benefits of HTML. Internet Explorer allows you to display a variety of graphics types, the most common being GIFs and JPEGs (Graphics Interchange Format and Joint Photographic Experts Group, two widely used graphics file formats). A hyperlink defines a region of the screen that the user can click to go to another Web page or to a specific place on the same page. Code Listing 2-7 contains both images and hyperlinks, which are displayed in Figure 2-7.

Code Listing 2-7.

 <HTML> <HEAD> <TITLE>Listing 2-7</TITLE> </HEAD> <BODY> Here is an image <IMG SRC="sample.gif" WIDTH="20" HEIGHT="36">. <BR> <IMG SRC="sample.gif" WIDTH="20" HEIGHT="36" ALIGN="right"> This image has been given an alignment. This causes the image to  be removed from the flow of the text and displayed at a particular location relative to the surrounding text. <BR> Here is a <A HREF="http://www.microsoft.com">link to Microsoft</A>. <BR> The next link has a picture and text and links to a local file. <BR> <A HREF="other.htm"><IMG SRC="sample.gif"> text</A> <BR> This final link points to a bookmark in the file "other.htm". <BR> <A HREF="other.htm#bookmark1">Link to bookmark</A> </BODY> </HTML> 

click to view at full size.

Figure 2-7. A page containing images and links.

The <IMG> tag is used to place an image on a page. The closing tag </IMG> is optional and is almost never used. An image is an in-line element by default, which means that it moves along with any text, just as a word does. Inclusion of an image affects the way lines wrap, and the image itself is affected by settings that influence text, such as margins.

The <IMG> tag has a variety of attributes that define how an image is displayed. The most important is the SRC attribute, which contains a path to the source graphics file. In Code Listing 2-7, we used the name of a local graphic (one that is stored in the same directory as the HTML file). You can also set the SRC attribute to point to graphics files in other locations, such as another directory on the same computer or a graphics file on another Web site. To do this for another directory, simply include the path before the name of the graphic: for example, graphics/sample.gif. For another Web site, provide the full Web location of the file, preceded by http://: for example, http://www.microsoft.com/library/images/gifs/logos /ieget_animated.gif. The http:// tells the browser to access the file using HTTP (Hypertext Transfer Protocol), which is used to transfer most files over the Web.

Two other attributes commonly used in <IMG> tags are WIDTH and HEIGHT. Both are expressed in pixels. If you do not specify a width and height, the browser will display a default placeholder graphic of a fixed size until it has downloaded the specified image. The image will then be correctly sized, usually causing the text on the screen to reflow. Specifying values for the WIDTH and HEIGHT attributes allows the browser to reserve space on the screen before the actual images are downloaded. This method offers a significant advantage to users who have slow Internet connections because it enables their browsers to display correct page layouts quickly. Setting the WIDTH and HEIGHT attributes to values other than the true width and height of an image causes the browser to scale the image to the dimensions specified.

The second <IMG> tag in Code Listing 2-7 demonstrates the ALIGN attribute. This attribute causes the image to no longer be displayed in line with the text. Instead, the image is displayed at a particular location relative to the text that follows it. Valid values for ALIGN include top, bottom, middle, left, and right, which do exactly what you would expect. Less obvious values are absbottom, absmiddle, baseline, and texttop, which give greater alignment control by incorporating information specific to the font being used when calculating where to position the image. Many other elements support the ALIGN attribute, including TABLE (covered in Chapter 3) and FIELDSET (covered in Chapter 4).

Code Listing 2-7 also illustrates the use of hyperlinks. A hyperlink is enclosed by the anchor tags <A> and </A> and is usually formatted as blue and underlined. When the user moves the mouse over a hyperlink, the mouse pointer changes to a pointing hand. Clicking the link causes Internet Explorer to open up the page specified in the link.

The anchor tag supports an HREF (hypertext reference) attribute, which defines the location the browser should go to. This location can be any valid Web location; for the first hyperlink in Code Listing 2-7, we chose http://www.microsoft.com. If we had not preceded the location with http://, the browser would look on the current server for a folder named www.microsoft.com, which does not exist. You can also set the HREF attribute to a local file, as we did in the second anchor in the sample. Setting the location to other.htm causes the browser to try to open a file named other.htm in the same directory as our sample file. If we had set the location to more/other.htm, the browser would have looked for other.htm in a more subdirectory of the directory that contains our sample file.

NOTE
Notice that the hyperlinked image is displayed with a blue border around it. This is not necessary, and designers frequently do not want such a border to be displayed. You can disable it by setting the BORDER attribute of the IMG element to 0. Conversely, if you would like to show the image with an even larger border, you can set the BORDER attribute to larger values, such as 15 or even more.

It is also possible to reference a named bookmark on a page, a technique often used in large documents. The last anchor in Code Listing 2-7 contains such a reference. When it is clicked, Internet Explorer opens the other.htm file and then scrolls through until it reaches the specified bookmark.



Dynamic HTML in Action
Dynamic HTML in Action
ISBN: 0735605637
EAN: 2147483647
Year: 1999
Pages: 128
Authors: Eric M Schurman, William J Pardi
BUY ON AMAZON

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net