web development & design foundations with xhtml
DESCRIPTION
Web Development & Design Foundations with XHTML. Chapter 4 Key Concepts. Learning Outcomes. In this chapter, you will learn to: Create and format lines and borders on Web pages Decide when to use graphics and what graphics are appropriate Apply the image element to add graphics to Web pages - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/1.jpg)
Web Development & Design Web Development & Design Foundations with XHTMLFoundations with XHTML
Chapter 4Key Concepts
![Page 2: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/2.jpg)
Learning OutcomesLearning OutcomesIn this chapter, you will learn to:
◦ Create and format lines and borders on Web pages
◦ Decide when to use graphics and what graphics are appropriate
◦ Apply the image element to add graphics to Web pages
◦ Configure images as backgrounds on Web page elements
◦ Configure images as hyperlinks◦ Find free and fee-based graphics sources◦ Follow recommended Web design guidelines
when using graphics on Web pages
2
![Page 3: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/3.jpg)
The Horizontal Rule The Horizontal Rule ElementElement
Configures a horizontal line
<hr />
3
![Page 4: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/4.jpg)
The CSS border PropertyThe CSS border PropertyConfigures a border on the top, right,
bottom, and left sides of an element
Consists of ◦ border-width◦ border-style◦ border-color
h2 { border: 2px solid #ff0000 }
![Page 5: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/5.jpg)
CSS Borders: CSS Borders: Block / Inline ElementsBlock / Inline Elements
Block element◦ default width of element content extends
to browser margin (or specified width)Inline element
◦ Border closely outlines the element content
h2 { border: 2px solid #ff0000; } a { border: 2px solid #ff0000; }
![Page 6: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/6.jpg)
Browser Display Can VaryBrowser Display Can Vary
![Page 7: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/7.jpg)
Configuring Specific Configuring Specific Sides of a BorderSides of a Border
Use CSS to configure a line on one or more sides of an element◦ border-bottom◦ border-left◦ border-right◦ border-top
h2 { border-bottom: 2px solid #ff0000 }
![Page 8: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/8.jpg)
The CSS padding PropertyThe CSS padding PropertyConfigures empty space between the
content of the XHTML element and the border
Set to 0px by default
h2 { border: 2px solid #ff0000;
padding: 5px; }
No padding configured:
![Page 9: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/9.jpg)
Configuring Padding on Configuring Padding on Specific Sides of an ElementSpecific Sides of an Element
Use CSS to configure padding on one or more sides of an element◦ padding-bottom◦ padding-left◦ padding-right◦ padding-top
h2 { border: 2px solid #ff0000;
background-color: #cccccc;
padding-left: 5px;
padding-bottom: 10px;
padding-top: 10px;}
![Page 10: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/10.jpg)
CSS padding Property CSS padding Property Shorthand: two valuesShorthand: two values
Two numeric values or percentages◦ first value configures top and bottom padding◦ the second value configures left and right
padding
h2 { border: 2px solid #ff0000;
background-color: #cccccc;
padding: 20px 10px;
}
![Page 11: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/11.jpg)
CSS padding Property CSS padding Property Shorthand: four valuesShorthand: four values
Four numeric values or percentages◦ Configure top, right, bottom, and left
padding
h2 { border: 2px solid #ff0000; width: 250px; background-color: #cccccc; padding: 30px 10px 5px 20px;}
![Page 12: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/12.jpg)
Hands-On Hands-On PracticePractice
h1 { background-color:#191970;
color:#E6E6FA;
padding: 15px;
font-family: Georgia, "Times New Roman", serif; }
h2 { background-color:#AEAED4;
color:#191970;
font-family: Georgia, "Times New Roman", serif;
border-bottom: 2px dashed #191970; }
![Page 13: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/13.jpg)
Checkpoint 4.1Checkpoint 4.11. Is it reasonable to try to code a Web page that
looks exactly the same on every browser and every platform? Explain your answer.
2. When a Web page containing the style rules below is rendered in a browser, the border does not display. Describe what is incorrect with the following code:
h2 { background-color: #ff0000border-top: thin solid #000000}}
3. True or False? CSS can be used to configure visual elements such as rectangular shapes and lines on Web pages.
13
![Page 14: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/14.jpg)
Types of Types of GraphicsGraphics
Graphic types commonly used on Web pages:◦GIF◦JPG◦PNG
14
![Page 15: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/15.jpg)
GIFGIF
Graphics Interchange FormatBest used for line art and logosMaximum of 256 colorsOne color can be configured as transparentCan be animatedUses lossless compressionCan be interlaced
15
Background color – no
transparency
Background color
configured to be
transparent
![Page 16: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/16.jpg)
JPEGJPEGJoint Photographic Experts GroupBest used for photographsUp to 16.7 million colorsUse lossy compressionCannot be animatedCannot be made
transparentProgressive JPEG – similar to
interlaced display
16
![Page 17: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/17.jpg)
PNGPNG
Portable Network GraphicSupport millions of colorsSupport multiple levels of transparency
(but browsers do not -- so limit to one transparent color for Web display)
Support interlacingUse lossless compressionCombines the best of GIF & JPEGBrowser support is growing
17
![Page 18: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/18.jpg)
XHTML Image ElementXHTML Image ElementConfigures graphics on a Web page
src Attribute◦ File name of the graphic
alt Attribute◦ Configures alternate text content (description)
height Attribute◦ Height of the graphic in pixels
width Attribute◦ Width of the graphic in pixels
18
<img src=“cake.gif” alt=“birthday cake” height=“100” width=“100” />
![Page 19: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/19.jpg)
XHTML<img /> AlignmentXHTML<img /> Alignment
Note: In Chapter 6 you’ll learn to use CSS to configure image alignment.
![Page 20: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/20.jpg)
XHTML More<img />XHTML More<img />AttributesAttributes
Adding Vertical Space◦ vspace Attribute
Adding Horizontal Space◦ hspace Attribute
Note: A more modern approach is to use the CSS padding property
![Page 21: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/21.jpg)
Accessibility & ImagesAccessibility & ImagesRequired:
◦ Configure the alt attribute Alternate text content to convey the
meaning/intent of the image NOT the file name of the image Use alt=“” for purely decorative images
Optional:◦ Configure the longdesc attribute
Used when meaning cannot be conveyed in the alt text
Usually a URL to a Web page with text
![Page 22: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/22.jpg)
Image LinksImage LinksTo create an image link use an anchor
element to contain an image element
Browsers automatically add a border to image links.
Configure CSS to eliminate the border img {border:0 }
22
Home
<a href="index.html"><img src="home.gif" height="19" width="85" alt="Home" /></a>
![Page 23: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/23.jpg)
CSS background-image CSS background-image PropertyProperty
Configures a background-image By default, background images tile
(repeat)
body { background-image: url(background1.gif); }
![Page 24: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/24.jpg)
CSS background-repeat PropertyCSS background-repeat Property
![Page 25: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/25.jpg)
Using background-repeatUsing background-repeat
h2 { background-color: #d5edb3;
color: #5c743d;
font-family: Georgia, "Times New Roman", serif;
padding-left: 30px;
background-image: url(trilliumbullet.gif);
background-repeat: no-repeat;
}
trilliumbullet.gif:
![Page 26: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/26.jpg)
Checkpoint 4.2Checkpoint 4.2
1. Describe the CSS to configure a graphic named circle.jpg to display once in the background of all <h1> elements. Code sample CSS to demonstrate this.
2. Describe the CSS that configures a file named bg.gif to repeat vertically down the background of a Web page. Code sample CSS to demonstrate this.
3. True or False? When coding image links, you must configure the image tag with border="0" to avoid the default blue border.
26
![Page 27: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/27.jpg)
Choosing Names for Image Choosing Names for Image FilesFiles
Use all lowercase letters Do not use punctuation symbols and
spacesDo not change the file extensions
(should be .gif, .jpg, .jpeg, or .png)Keep your file names short but
descriptive◦ i1.gif is probably too short◦ myimagewithmydogonmybirthday.gif is too
long◦ dogbday.gif may be just about right
![Page 28: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/28.jpg)
OrganizingOrganizingYour SiteYour Site
<img src=“images/home.gif” alt=“Home” height=“100” width=“200”/>
28
• Place images in their own folder
• Code the path to the file in the src atttribute
![Page 29: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/29.jpg)
Other Image TopicsOther Image TopicsThumbnail ImagesFavorites IconImage MapsSources for GraphicsGuidelines for Using ImagesAccessibility & Visual Elements
![Page 30: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/30.jpg)
Thumbnail ImageThumbnail Image
A small image configured to link to a larger version of that image.
30
![Page 31: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/31.jpg)
Favorites Icon - faviconFavorites Icon - faviconA square image
associated with a Web page
Usually named: favicon.ico
May display in the browser address bar, tab, or favorites/bookmarks list
Configure with a link tag:
<link rel="icon" href="favicon.ico" type="image/x-icon" />
![Page 32: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/32.jpg)
Sample Sample Image MapImage Map
Image maps define 1 or more areas within a picture by defining coordinates.
These areas can then be used as links to other pages or sites. Example: Map images used to link to states, cities, etc…
Google maps uses this all the time.
![Page 33: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/33.jpg)
SourcesSourcesfor Graphicsfor Graphics
Create them yourself using a graphics application: ◦ Adobe Photoshop◦ Adobe Fireworks◦ Google’s Picasa (http://picasa.google.com/)
Download graphics from a free sitePurchase/download professional-quality graphicsPurchase a graphics collection on a CDTake digital photographsScan your photographsScan your drawingsHire a graphic designer to create graphics
33
![Page 34: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/34.jpg)
GuidelinesGuidelinesfor for
Using Using ImagesImages
Consider image load timeReuse imagesConsider image file size with image
qualityScreen ResolutionSpecify dimensionsGamma – brightness & contrast
34
![Page 35: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/35.jpg)
Images and AccessibilityImages and AccessibilityDon't rely on color alone.
◦ Some visitors may have color perception deficiencies. Use high contrast between background and text color.
Provide a text equivalent for non-text elements. ◦ Use the alt attribute on your image elements
If your site navigation uses image links, provide simple text links at the bottom of the page.
35
![Page 36: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/36.jpg)
Checkpoint 4.3Checkpoint 4.31. Search for a site that uses image links to provide
navigation. List the URL of the page.
What colors are used on the image links?
If the image links contain text, is there good contrast between the background color and letters on the image links?
Would the page be accessible to a visitor who is sight-challenged?
How have accessibility issues been addressed?
Is the alt attribute used to describe the image link?
Is there a row of text links in the footer section of the page?
Answer the questions above and discuss your findings.36
![Page 37: Web Development & Design Foundations with XHTML](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812bae550346895d8fe491/html5/thumbnails/37.jpg)
SummarySummary
This chapter introduced the use of visual elements and graphics on Web pages.
As you continue to create web pages, look back at the guidelines and accessibility issues related to graphics.
The number one reason for visitors to leave web pages is too long of a download time. When using images, be careful to minimize this issue.
Provide alternatives to images (such as text links) and use the alt attribute on your pages.
37