Site Development Foundations © 2004 ProsoftTraining All rights reserved

Lesson 4: Horizontal Rules and Graphical Elements

Objectives Add horizontal rules to your pages Add horizontal rules to your pages Incorporate image files as stand-alone graphics Incorporate image files as stand-alone graphics Use the Web-safe color palette Use the Web-safe color palette Use colors and tiled images for page backgrounds Use colors and tiled images for page backgrounds Add special characters to XHTML pages Add special characters to XHTML pages Structure your XHTML document using the tag and CSS Structure your XHTML document using the tag and CSS

Horizontal Rules in XHTML Create a horizontal rule using the tag: Create a horizontal rule using the tag: Horizontal Rules Horizontal rules: Lines used to make visual divisions in your document. Horizontal Rules Horizontal rules: Lines used to make visual divisions in your document. Horizontal rule attributes

Images in Web Pages Use the tag to insert an image file using either of two formats to close the tag: Use the tag to insert an image file using either of two formats to close the tag: Image file formats Image file formats Graphics Interchange Format (GIF)Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG)Joint Photographic Experts Group (JPEG) Portable Network Graphics (PNG)Portable Network Graphics (PNG)

Comparing Image File Formats FormatTransparencyInterlacingCompressionAnimation GIF 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 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 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 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: The bgcolor attribute: Specifies background colorsSpecifies background colors The background attribute: The background attribute: Inserts an image as a backgroundInserts 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 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 The align attribute positions images relative to text Values include: Values include: “bottom”“bottom” “middle”“middle” “top”“top” “left”“left” “right”“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 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: Specify image size using the following attributes: heightheight widthwidth The syntax for these attributes is: 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 Specifying both height and width can distort an image; be sure to use proper proportions

Special Characters Uses code with ampersand (&) and semicolon (;) Uses code with ampersand (&) and semicolon (;) Special characters include: Special characters include: The “less than” symbol <The “less than” symbol < Code: < Code: < The “greater than” symbol >The “greater than” symbol > Code: > Code: > The copyright sign ©The copyright sign © Code: © or © Code: © or © The registered trademark sign ®The registered trademark sign ® Code: ® or ® Code: ® or ® The United Kingdom pound sterling sign: £The United Kingdom pound sterling sign: £ Code: £ Code: £ Non-breaking space: Non-breaking space:

Specifying Colors Colors can be specified by name or by Hexadecimal “Red Green Blue (RGB)” value Colors can be specified by name or by Hexadecimal “Red Green Blue (RGB)” value

Web-Safe Color Palette A set of 216 colors guaranteed to render properly A set of 216 colors guaranteed to render properly Ensures that colors in pages render as expected 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 ditheringIf 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 ditheringUnexpected results may occur as the result of dithering

Page Colors and Backgrounds Specifying page colors: Specifying page colors: Specifying text color on the page: Specifying text color on the page: Specifying color of unvisited links: Specifying color of unvisited links: Specifying color of visited links: Specifying color of visited links: Providing a background image: Providing a background image:

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

Web Design Issues Color combinations Color combinations Popular color combinationsPopular color combinations Consider existing sites Consider existing sites Habitat for Humanity ( for Humanity ( Microsoft ( ( Red Hat ( Hat ( Cultural and audience concerns Cultural and audience concerns Page layoutPage layout Layout guidelines Layout guidelines Document structure, the tag and style sheets Document structure, the tag and style sheets Relative path names Relative path names White space, the tag and XHTML White space, the tag and XHTML