1. Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris

2. IMAGE LINKS To create an image hyperlink 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-style: none; } 2 Home

3. Copyright © Terry Felke-Morris THUMBNAIL IMAGE A small image configured to link to a larger version of that image. 3

4. Copyright © Terry Felke-Morris IMAGE OPTIMIZATION  The process of creating an image with the lowest file size that still renders a good quality image— balancing image quality and file size.  Photographs taken with digital cameras are not usually optimized for the Web 4

5. Copyright © Terry Felke-Morris OPTIMIZE AN IMAGE FOR THE WEB  Image Optimization  Reduce the file size of the image  Reduce the dimensions of the image to the actual width and height of the image on the web page.  Image Editing Tools:  GIMP (free!)  Adobe Fireworks  Adobe Photoshop  http://pixlr.com/editor (free!) 5

6. Copyright © Terry Felke-Morris CHOOSING NAMES FOR IMAGE FILES  Use all lowercase letters  Do not use punctuation symbols and spaces  Do 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

7. Copyright © Terry Felke-Morris ORGANIZING YOUR SITE 7 Place images in their own folder Code the path to the file in the src atttribute

8. Copyright © Terry Felke-Morris HANDS-ON PRACTICE 4.4 (PAGE 147)  chapter2/template.html  chapter4/caption/index.html 8

9. Copyright © Terry Felke-Morris HTML5 FIGURE AND FIGCAPTION ELEMENTS Figure Element: contains a unit of content that is self-contained, such as an image, along with one optional figcaption element. <img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island"> Island Lighthouse, Built in 1870 9

10. Copyright © Terry Felke-Morris HANDS-ON PRACTICE 4.5  chapter2/template.html  chapter4/caption2/index.html 10

11. Copyright © Terry Felke-Morris HTML5 METER ELEMENT Displays a visual gauge of a numeric value within a known range 14417 14,417 Total Visits 7000 7,000 Firefox 3800 3,800 Internet Explorer 2062 2,062 Chrome 1043 1,043 Safari 312 312 Opera 200 200 other 11

12. Copyright © Terry Felke-Morris HTML5 METER ELEMENT  chapter4/meter.html 12

13. Copyright © Terry Felke-Morris HTML5 PROGRESS ELEMENT Displays a bar that depicts a numeric value within a specified range 5000 Progress Towards Our Goal 13

14. Copyright © Terry Felke-Morris HTML5 PROGRESS ELEMENT  Chapter4/progress.html 14

15. Copyright © Terry Felke-Morris CSS BACKGROUND-IMAGE PROPERTY  Configures a background-image  By default, background images tile (repeat) body { background-image: url(background1.gif); }

16. Copyright © Terry Felke-Morris CSS BACKGROUND-REPEAT PROPERTY

17. Copyright © Terry Felke-Morris USING 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:

18. Copyright © Terry Felke-Morris CSS3 MULTIPLE BACKGROUND IMAGES body { background-color: #f4ffe4; color: #333333; background-image: url(trilliumgradient.png); background: url(trilliumfoot.gif) no-repeat bottom right, url(trilliumgradient.png); } 18

19. Copyright © Terry Felke-Morris HANDS-ON PRACTICE 4.6 (PAGE 154)  chapter4/4.3/index.html  chapter4/4.6/index.html 19