2. Unit G - Images

3. The great questions of life?
How does an airplane stay up? Where does the tooth fairy get her money? Why is the sky blue? How does Santa deliver all those toys in one night? And the really big one…

4. If web pages are only text files, then how can a web page show pictures?

5. img tag
Images can be added to a Web page by linking to a separate file using the img element
One-sided element
Must include two attributes:
src: path and filename to the image file
alt: text to display if image is unavailable
Inline element by default
Can be wrapped in block element for alignment purposes
Within text, aligned to text baseline

6. Height and width are in pixels and are optional.
<h2>Dog Information</h2> <p>At T.A.S.K. we care about all the pets that we provide a comfortable kennel experience and take care of through our medical and obedience classes. </p> <img src="CuteDogs.jpg" height="131" width="175" alt="Two dogs face to face touching noses - very cute">
Height and width are in pixels and are optional.

7. Why have quotes around alt text?
If you had alt=Two dogs face to face - very cute> The result would be: Two Quotes are needed because when the browser parses the code it interprets the first space it encounters as the end of the alt text. So lets talk about images (aka graphics, pictures)

8. The world of images is divided into two parts

9. Image file types Bitmap image Vector graphic
Represented as grid of dots of specified colors
e.g., JPG, GIF, and PNG
Vector graphic
Encoded as geometric shapes
e.g., SVG

10. What image file formats should be used with web pages?
JPG
GIF
PNG
SVG

11. What about good old BMP – Bitmap?
Very large files Do not scale well BMP files should NOT be used for web pages!! Browsers will not display BMP files.

12. So what do you really need to know about graphic files when it comes to writing web pages?
The file formats you should use are jpg, gif and png
If your graphics have a lot of colors (such as a photo), choose JPG
If your graphics have few colors, choose GIF
Pay attention to the file type dog.jpg dog.gif
Do NOT use bmp, tiff or psd

13. The draft dilemma Bob Bill Who should your draft – Bob or Bill?
Height: 5’ 7”
Excellent on defense
Outstanding shooter
Great play maker
Bill
Height: 7’ 1”
Good on defense
Outstanding shot blocker
Below average free throw shooter.
You can’t make a short person taller, but you can teach a tall person to be better at shooting free throws.
Don’t make an image that is small in dimensions larger.
Who should your draft – Bob or Bill?

14. Figure Element
Used to mark images that add information to a Web page - semantic element. The <figure> tag provides a container for content that is equivalent to a figure or diagram in a book. It can be used to group a caption with one or more images, a block of code or other content. CSS float attribute enables Web page elements to flow around figure.

15. Since image is listed first, it is displayed before the paragraphs.
<p><figure><img src="CuteDogs.jpg" height="131" width="175" alt="Two dogs - very cute"></figure> <p>At T.A.S.K. we care about all the pets that we provide a comfortable kennel experience and take care of through our medical and obedience classes.</p> <p>We hope that you will consider us when looking for any of these services. Our office are located in many convenient locations throughout the Phoenix valley.</p>
Since image is listed first, it is displayed before the paragraphs.

16. The float property enables Web page elements to flow around figure.
figure { display: block; float: right; margin: 0; padding: 0; }
The float property enables Web page elements to flow around figure.
Left and right values align figure.

17. Controlling Page Flow
CSS float property not always sufficient for desired page layout. CSS clear property: prevents floated elements from being displayed to the side of another element. Allows more precise control of Web page flow.

18. Also, notice the footer structure element.
Clear property causes footer element to be displayed without floating elements to its right.
footer {
display: block;
background: #B8944D;
padding: 0.25em;
margin: 0;
clear: right; }
Also, notice the footer structure element.

19. Adding a Caption figcaption
Marks text as a caption for associated image
Nested within figure element for the image
Provide context, explanation or credit
<figure>
<img src="sunset.jpg" alt="Beautiful sunset">
<figcaption>An Arizona sunset</figcaption>
</figure>

20. If before img tag then caption above image
If before img tag then caption above image. If below img tag then caption below image.
<figure>
<figcaption>"Two very cute dogs"</figcaption>
<img src="CuteDogs-1.jpg" alt="Two dogs face to face touching noses">
</figure>
<img src="kittens-1.jpg" alt="Two kittens">
<figcaption>"Two very cute kittens"</figcaption>

21. Caption with multiple images
<figure>
<img src="bird1.jpg" alt="Parakeet">
<img src="bird2.jpg" alt="Parrot">
<figcaption>"Two of the most common pet birds - they also need vet care."</figcaption>
</figure>

22. Associating Images with Related Text
title attribute
Used to specify additional image information
Browsers display as floating text during mouse-over
When not specified, some browsers display alt text
<img src="phone-99.jpg" alt="Newest phone model 99" title="The model 99 phone has special security features">

23. <img src="CuteDogs.jpg" height="131" width="175" alt="Two dogs - very cute" title="Very cute dogs - face to face touching noses">
The title information displays when mouse goes over the image.

24. Using Images as Links
<a href="gcc.html" ><img src="glendale.jpg"></a>
<a href=" /><img src="gaucho.jpg"></a>
Images can be used as links - the img element is the clickable item
Browsers typically add border around linked image to display link state
Use pseudo-classes to modify link state colors
Use CSS border property to remove the border

25. Inserting a Background Image
Image can be background of Web page or element
Specify path and filename as value for background property
Important to maintain contrast between background and text
Specify background color in case image not available
Tiling - displaying images repeatedly
Used by browser to fill screen space

26. Inserting a Background Image and Color
Syntax of background property:
background: url("url goes here")
Background: color_indicator
When property-value pairs conflict the one that occurs later in the rule takes precedence.

27. body { padding: 0; margin: 0; font-family: tahoma, arial, helvetica, sans-serif; background: white; background: url("images/brick.jpg"); }

28. Create an Image Map
An image map is HTML code associated with an image that specifies one or more shapes using sets of coordinates and provides a link target for each shape
Each linked shape is known as a hotspot
Shape values can be rect, poly, or circle
rect coordinates based on top-left corner and bottom-right corner of shape
poly coordinates based on each vertices in the shape
circle coordinates based on center point and radius of the circle

29. Coordinates are measured from the top-left corner
Use third-party software to generate the coordinates
Code for rect shape in an image map

31. Favicon
Small image (icon) that is associated with Web page in the address bar and on bookmarks
16 x 16 pixels
.ico format
<head> :
<link rel="shortcut icon" href=“sp-wren.ico">
</head>

32. Why does my Favicon not work?
It must be an ico format and in the correct location.
The favicon may not show when you test this feature with your page on the local storage.
Most browsers do not show the favicon unless the page is published and you access it with a web address that starts with (Most versions of Firefox will show the favicon off your local storage.)

33. Now I can make a web page showing pictures of my puppies doing cute things.
I wonder if I can include a picture of Lassie on my web page?