Horizontal Rules and Graphical Elements

HTML Horizontal Rules and Graphical Elements

Adding Horizontal Ruling Lines

Several simple graphical elements can be added to a Web page to provide structure and visual interest. One such element is the horizontal rule, which is easy to add in HTML. To add a horizontal rule to your page, insert the tag at the position where you want the line to appear.

Horizontal rules do not appear as distinctly on a white background as they do on a colored or textured background. Horizontal rules are lines that can be used to make visual divisions in your document.

Consider the following code:

<H1> Text Header</H1>

< HR >

<P> Body text of page</P>

By default, these lines include a 3-D shading effect, which can be removed. In addition, the lines can be set to various sizes, widths and alignments. But the line is added by a single tag: So how is this other information passed to the browser?

Horizontal rule attributes

In the previous lesson, you learned about the three components of a tag. You also learned about the element's associated attributes and values. The HR element has a width attribute that controls how far across the screen the line extends. The WIDTH attribute controls the length of the line. The value of the attribute, by default, is 100 percent. Thus the line in the preceding figure extends from the left margin across to the right margin in the browser window, or the entire width of the window. If you want the line to extend across only 50 percent of the window, you would write the tag as follows:

<HR width=”50%” >

Note that the attribute name (in this case, WIDTH) precedes an equal sign (=), Following the equal sign is the desired value for this attribute, in this case 50 percent.

The element name must be the first text in the tag. The order in which the attributes appear is not dictated. You cannot, however, reverse the attribute name and value; the attribute name must always precede the equal sign and value.

You are already familiar with the ALIGN attribute from your work with the DIV element.

You can use ALIGN with the HR element as well. For example, to create a line starting at the left margin that extends halfway across the page, you could use either of the following two tags:

<HR width=”50%” align=”left” >
<HR align=”left” width=”50%” >

The element name must be the first text in the tag. The order in which the attributes appear is not dictated. You cannot, however, reverse the attribute name and value; the attribute name must always precede the equal sign and value.

Incorporating Images into Web Pages

You may have heard the saying that a picture is worth a thousand words. Most Web developers believe this because the Web is inundated with graphic images. Images can be big or small; they can function as links; they can be used to launch script actions; and they can be used as image maps. Although scripting is not discussed in this course, you will be introduced to clickable image maps in a later lesson. In this lesson, you will focus on using images purely as graphic enhancements.

The <IMG> tag displays a graphic image on your page. The key attribute that will always be present in this tag is SRC. Use SRC to specify the name and, if necessary, the location of your image file. The <IMG> tag is an empty tag, so it requires no closing tag. Standard image tag syntax is as follows:

< IMG SRC=”imagefile.gif”>

Image file formats

Two widely supported Web image formats are Graphics Interchange Format (GIF) and Joint Photographic Experts Group (JPEG). Microsoft Internet Explorer also supports the display of Windows Bitmap (BMP) images when used in an HTML document. Netscape Navigator does not currently support the BMP format.

GIF

Typically, GIF files support fewer colors than JPEG files, and are best suited for line art, custom drawings, and text used as a graphic. Two GIF versions exist: GIF 87a and GIF89a. GIF 89a is more popular because it supports the following techniques:

• Transparency-the ability to make any part of the image invisible so the page background shows through. The image thus appears to blend into the background.
• Interlacing-the ability for an image to "fade in" as it renders.
• Animation-a series of images appearing in sequence to create the effect of motion.

JPEG

The JPEG format supports many more colors than GIF, and is typically used for photographs and complex images. This format also supports compression, meaning that you can reduce the image's file size. However, the more you compress the image, the more you will likely reduce its quality. Image compression of this type is called "lossy" compression.

PNG

Portable Network Graphics (PNG) is an emerging image format, proposed as a future standard. This proposed format has not yet been widely implemented. However, you should check whether your current graphics software can produce or export an image into this format. PNG is designed to compress image information, allowing shorter download times and quicker image rendering in the browser.

You have successfully placed two images on a Web page. You centered one image by using the <DlV ALIGN="center”> tag . The second image is not centered. What might happen if a user viewed this same page at a much higher screen resolution? Would this possibility affect your choice to center or not center the rainbow line image?

Aligning images relative to text

After you start working with images, you will see that placing an image on your page is only the first step. You will need to know how to position images relative to the text on the page. The syntax for the ALIGN attribute is as follows:

[CONCEPT] <IMG SRC=”imagefile.gif” ALIGN="alignment value” >

Table 4-2 lists the values that you can use in conjunction with the ALIGN attribute in the <IMG> tag.

Table 4-2 Alignment options for images

Using the “ALT” attribute with images

Every image should follow good coding practice by containing the ALT attribute with a corresponding value. ALT designates alternative text to appear while the graphic is loading or in place of the graphic for those using non-graphical browsers, such as Lynx.

This text will also display if the image fails to load or if the user has configured the browser not to display images.

The syntax for using the ALT attribute is as follows:

[CONCEPT]
<IMG SRC=”imagefile.gif” ALIGN="alignment value” ALT=”description of the image” >

[EXAMPLE]
<IMG SRC=”29_ford_hotrod.jpg” ALIGN="left” ALT=”Yellow 1929 Ford Sedan Hot Rod ” >

Resizing images

Sometimes, you will want to use a graphic in a size other than the natural size of the image. If you need to resize an image, you must maintain its relative measurements. For example, if you have an image that is 200 pixels wide by 300 pixels tall, you would not want to change the size to be 100 pixels wide by 300 pixels tall; this would distort the information and make it appear taller and narrower than it was originally. If you were trying to shrink the graphic to one-half of its size, you would instead change the width to 100 and the height to 150. By shrinking both dimensions by an equal percentage (in this case, by 50 percent), you maintain the original ratio of the image.

The syntax for specifying image height and width information is as follows:

[CONCEPT] <IMG SRC=”imagefile.gif” height=”HeighInPixels” width=”WidthInPixels” >

[EXAMPLE] <IMG SRC=”29_ford_hotrod.jpg” height=”150” width=”175” >

If you are not certain of the original dimensions of your image, you can ensure that the change size will be changed proportionately by specifying only one to the two dimensions, either the height or the width; the other dimension that is not set will then be calculated for you based on the original image size in the browser.

Special Characters

Sooner or later you will need to include a non-keyboard character in your page. You can include non-keyboard characters if you know either the ANSI character value or the special HTML code for the character. In the Resources directory of your supplemental CD-ROM, the file named charcodes.htm contains a list of codes for special characters.

Table 4-3 defines some of the most commonly used characters. As you can see, each special character code begins with the ampersand character (&) and ends with the semicolon character (;).

Sometimes you will see &nbsp; in HTML code. This code denotes a non-breaking space character. Although more than one regular space is ignored in HTML, non-breaking space characters are never ignored. You can use these characters to insert more than one space in a row when needed.

Specifying Colors in HTML

So far, all the files you created have used the same color scheme: black text on a white background. The Web would be very boring if no one ever strayed from this combination. Instead, you can specify alternative page and text color combinations.

You can easily specify colors for text and the page background in HTML documents. To do this, you need to supply a value representing a color. This value can take the form of a recognized color name (such as "yellow" or "blue"), or the value can be a hexadecimal code representing a color.

Colors are often specified in terms of their RGB values. RGB stands for Red Green Blue. If you are mixing paint, you will know that mixing red, green and blue together creates a rather muddy color. But on a monitor, you are mixing light, and the mixture of red, green and blue light produces white, which is the presence of all colors. Black is the absence of all colors. In other words, the higher the numeric value representing a color, the lighter that color will be. The lower the value, the darker the color.

Colors are specified in values ranging from 0 to 255. The value FF is 255 in hexadecimal code. Therefore, #FFFFFF represents the highest possible value for all three colors, producing white. The value #000000 represents the absence of all colors, or black. The number character (#) is not required by current generation browsers, but you should include this symbol for full backward compatibility. I (also called browser-safe) colors. You can also visit the Hexadecimal code page at http://www.htmlhelp.com/cgi-bin/color.cgi

The Web-Safe Color Palette

Colors are formulated on a computer screen through a combination of red, green and blue; thus colors are often referred to as the RGB values. Whenever you use a color in a Web page (whether for a background, font or image), you are enabling a combination of the RGB values. This limited color palette is necessary because computer screens are generally cathode ray tubes (CRTs), which have certain design limitations.

You will want your pages to render consistently no matter which browser or operating system is used to view them. In other words, if you define a blue background color, you will want it to appear the same in a Macintosh system using a version of Netscape Navigator, as it would in a Windows system using a version of Microsoft Internet Explorer. You also want your image colors to appear consistently. If your HTML code asks for a color that the browser or operating system cannot support, the computer will compensate through dithering. The results of dithering are unpredictable and often unsightly.

When Netscape Corporation marketed the first browser that supported inline images, they created a standard of 216 colors that would render consistently, known as the Web-safe color palette. Microsoft Internet Explorer, NCSA Mosaic and other browsers conform to this list of colors.

Page Colors and Backgrounds

You can add color information to the <BODY> tag to control the colors of the background of the page, as well as the colors of the text and links on the page. In addition, you can tile an image across the page for a background. To specify a color for a page background, add the BGCOLOR attribute to the BODY element using the following syntax:

<BODY BGCOLOR=”#FFFFFF”>

To designate the color of text on a page, use the TEXT attribute of the BODY element. If you are using links, you can control the color of links from the <BODY> tag as well.

Table 4-4 outlines the <BODY> tag color attributes.

Table 4-4

As you can see, using images and colors instantly changes a plain-looking page to an attractive, vibrant presentation. The most important element to consider when creating a Web page, however, is not how attractive the page looks, but how readable it is. Although you may prefer an unusual combination of colors, keep your target audience in mind and consider whether your choices will make the page more readable or less.

Specifying Font Information

The <FONT> tag is a container tag that allows you to change the size, color and typeface of the enclosed text. The next lab will demonstrate the use of the <FONT> tag. The <FONT> tag supports three attributes: SIZE, COLOR and FACE. The HTML 4.01 standard has deprecated this tag in favor of using Cascading Style Sheets (CSS). This means that future versions of HTML and Web browsers--may not support <FONT>. However, this tag is still quite popular.

When you use the <FONT> tag, the SIZE attribute takes values 1 through 7, with 7 being largest, 3 being the normal size of default text, and 1 being two sizes smaller than normal. In addition, you can set the value of the <FONT> tag's size attribute to "+1", "-2" and so forth to make changes relative to the font's default size.

When you specify a value for the COLOR attribute, use the same values that you learned for specifying a page background color.

The FACE attribute specifies the typeface (i.e., font name) to be used. Remember to always close your <FONT> tag with </FONT> at the end of the text to be affected.

As you learned in the preceding lab, you can specify certain font information through the use of the <FONT> tag. However, some information, including boldface and other font attributes you learned earlier, cannot be specified using the <FONT> tag.

With practice, you can embellish your HTML pages quickly and easily by using simple graphical elements and by adding attributes to the basic elements of the page.

Activity: hypertext