Lesson 4:
Horizontal Rules and
Graphical Elements
Copyright © 2004 ProsoftTraining, All Rights Reserved.
Lesson 4 Objectives
•
•
•
•
•
•
•
Add horizontal rules to your pages
Incorporate image files as stand-alone graphics
Add special characters to XHTML pages
Use the browser-safe color palette
Use colors and tiled images for page backgrounds
Use the <font> tag to specify font information
Consider Web design issues, including color
combinations and page layout
Horizontal Rules in XHTML
• Create a horizontal rule using the <hr> tag:
– <h1> Horizontal Rules </h1>
<hr/>
Horizontal rules: Lines used to make visual divisions in your document.
• Horizontal rule attributes: align, size, width and noshade
Images in Web Pages
• Use the <img> tag to insert an image file
using either of two formats to close the
tag:
– <img src="imagefile.gif"> </img>
– <img src="imagefile.gif"/>
• Image file formats
– Graphics Interchange Format (GIF)
– Joint Photographic Experts Group (JPEG)
– Portable Network Graphics (PNG)
Comparing Image File Formats
Format
Transparency
Interlacing
Compression
Animation
GIF 89a
Yes
Yes
Yes
Yes
JPEG
(standard)
No
No
Yes
No
PNG
Yes
Yes
Yes
Yes
Images and the alt Attribute
• In XHTML, every image must follow good
coding practice by including the alt
attribute with a corresponding value
• Code will not validate as XHTML without
this attribute
• Browsers and screen-reader technology can
read alt description and render it in audio
for disabled users
– <img src="image.gif" alt="Alternative text"/>
Combining Background
Images and Colors
• The bgcolor attribute:
– Specifies background colors
• The background attribute:
– Inserts an image as a background
• If you use both the bgcolor and
background attributes in a <body> tag,
then only the attribute specified last in
the tag will render
Aligning Images
Relative to Text
• The align attribute positions images relative to
text
<img src="imagefile.gif" align="alignment value">
• Values include:
–
–
–
–
–
"bottom"
"middle"
"top"
"left"
"right"
• The align attribute has been deprecated in
favor of style sheets, but can still be used; code
will still validate as XHTML 1.0 Transitional
Resizing Images
• Specify image size using the following
attributes:
– height
– width
• The syntax for these attributes is:
<img src="imagename.gif"
height="NumberOfPixels"
width="NumberOfPixels"/>
• Specifying both height and width can distort an
image; be sure to use proper proportions
Special Characters
• Uses code with ampersand (&) and semicolon
(;)
• Special characters include:
– The "less than" symbol <
• Code:
&lt;
– The "greater than" symbol >
• Code:
&gt;
– The copyright sign ©
• Code:
&copy; or &#169;
– The registered trademark sign ®
• Code:
&reg; or &#174;
– The United Kingdom pound sterling sign: £
• Code: &#163;
• Non-breaking space: &nbsp;
Specifying Colors
• Colors can be specified by name or by
Hexadecimal "Red Green Blue (RGB)"
value
Browser-Safe Color Palette
• A set of 216 colors guaranteed to render
properly
• Ensures that colors in pages render as
expected
– If you specify a color not supported by the
monitor or operating system, the system will
approximate the color, a process called dithering
– Unexpected results may occur as the result of
dithering
Page Colors and Backgrounds
• Specifying page colors:
<body bgcolor="colorNameOrCode">
• Specifying text color on the page:
– <body text="colorNameOrCode">
• Specifying color of unvisited links:
– <body link="colorNameOrCode">
• Specifying color of visited links:
– <body vlink="colorNameOrCode">
• Providing a background image:
– <body background="image.png">
Specifying Font Information
• You can use the <font> tag
– The size attribute: specify value "1" through
"7"
– The face attribute: specify font type (e.g.,
Arial, Times New Roman)
<font size="7" color="#993399" face="arial">
• The <font> tag is deprecated
• The W3C recommends to use style sheets
instead
Web Design Issues
• Color combinations
– Popular color combinations
• Consider existing sites
– W3Schools (www.w3schools.com)
– Habitat for Humanity (www.habitat.org)
– Linux (www.linux.org)
• Cultural and audience concerns
– Page layout
•
•
•
•
Layout guidelines
Document structure, the <div> tag and style sheets
Relative path names
White space, the <img> tag and XHTML
Lesson 4 Summary
Add horizontal rules to your pages
Incorporate image files as stand-alone graphics
Add special characters to XHTML pages
Use the browser-safe color palette
Use colors and tiled images for page backgrounds
Use the <font> tag to specify font information
Consider Web design issues, including color
combinations and page layout
