copyright © 2004 prosofttraining, all rights reserved. lesson 4: horizontal rules and graphical...
TRANSCRIPT
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 <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: <
– 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: <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 graphicsAdd special characters to XHTML pagesUse the browser-safe color paletteUse colors and tiled images for page backgroundsUse the <font> tag to specify font informationConsider Web design issues, including color
combinations and page layout