Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 4: Horizontal Rules and Graphical Elements

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 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 tag: – Horizontal Rules 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 tag to insert an image file using either of two formats to close the tag: – Image file formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG)

Comparing Image File Formats FormatTransparencyInterlacingCompressionAnimation GIF 89a Yes JPEG (standard) No YesNo PNG 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 –

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 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 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: < – The "greater than" symbol > Code: > – The copyright sign © Code: © or © – The registered trademark sign ® Code: ® or ® – The United Kingdom pound sterling sign: £ Code: £ Non-breaking space:

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: Specifying text color on the page: – Specifying color of unvisited links: – Specifying color of visited links: – Providing a background image: –

Specifying Font Information You can use the tag – The size attribute: specify value "1" through "7" – The face attribute: specify font type (e.g., Arial, Times New Roman) The tag is deprecated The W3C recommends to use style sheets instead

Web Design Issues Color combinations – Popular color combinations Consider existing sites – W3Schools ( – Habitat for Humanity ( – Linux ( Cultural and audience concerns – Page layout Layout guidelines Document structure, the tag and style sheets Relative path names White space, the 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 tag to specify font information Consider Web design issues, including color combinations and page layout