how to work with images - docpiperdocpiper.com/bhcc_cmt111/murach/murachchapter08.pdf · how to...

HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 1© 2010, Mike Murach & Associates, Inc. Slide 1

Chapter 8

How to work with images

HTML, XHTML, and CSS, C8 © 2010, Mike Murach & Associates, Inc. Slide 2

Objectives

Applied 1. Use HTML to include images on a web page and CSS to align and

float images. 2. Use HTML to create an image map that can be used to link to

more than one web page.

Knowledge 1. List and describe the three types of images that are used with web

sites. 2. Describe the proper use of the img element and its related CSS. 3. Describe the use of an image editor for sizing an image and

changing its image type. 4. Describe the use of an image editor for animating images. 5. Describe the use of thumbnails, favicons, and image maps.


Image types JPEG

GIF

PNG


Typical JPEG images


Typical GIF images


Attributes of the <img> tag src

alt

longdesc

height

width


Properties for sizing an image height

width


The HTML for two images <p><img src="images/lilies.jpg" alt="lilies" height="150px" width="200px" /> <img id="small" src="images/lilies.jpg" alt="lilies" /></p>


CSS for resizing the second image #small { height: 75px; width: 100px; }


The images in a web browser


The property for aligning images vertically vertical-align

Common keywords for the vertical-align property bottom

middle

top

text-bottom

text-top


The HTML for a web page with three images <h2>To order now:</h2> <p><img src="images/computer.gif" alt="computer" /> <b>Web:</b> www.murach.com</p> <p><img src="images/telephone.gif" alt="phone" /><b>Phone:</b> 1-800-221-5528</p> <p><img src="images/fax.gif" alt="fax" /> <b>Fax:</b> 1-559-440-0963</p>


CSS that aligns the images img { vertical-align: middle; margin-right: 10px; }

The images in a web browser before and after they’re aligned


The properties for floating images float

clear


Some of the HTML for a web page <img src="images/students.jpg" alt="students" width="256px" height="171px" /> <ul> <li>in college and university MIS programs that focus on providing students with practical, real-world experience</li> <li>by technical institutes and community colleges that focus on the skills that employers are looking for</li> <li>in Continuing Ed and Extension programs where the students are professionals who are expanding their skills</li> </ul> <p id="last">So if your program fits one of those profiles, please take a look at our books. I’m confident you’ll discover a new level of structure, clarity, and relevance that will benefit both you and your students.</p>


CSS that floats the image and clears the last paragraph

img { float: left; margin-top: 15px; margin-bottom: 10px; } #last { clear: left; }


The HTML in a web browser


The main Photoshop Elements screen for editing


The controls for working with the size of an image


Changing the image type and quality of JPEG file


The controls for GIF, PNG-8, and PNG-24 files


The controls for working with an animated image


An image with a transparent color and a matte


An image without transparency and with transparency and a matte


Creative Commons license conditions for images and icons

Attribution

Share Alike

Non-Commercial

No Derivative Works


Creative Commons licenses Attribution Attribution Share Alike Attribution No Derivatives Attribution Non-Commercial Attribution Non-Commercial Share Alike Attribution Non-Commercial No Derivatives


Popular web sites for images www.freefoto.com openphoto.net www.sxc.hu

Popular web sites for stock photos www.istockphoto.com us.fotolia.com www.gettyimages.com


Popular search engines for stock photos search.creativecommons.org everystockphoto.com

Popular web site for finding icons www.smashingmagazine.com


Thumbnails in a web page


Photo displayed when fifth thumbnail is clicked


The HTML for the thumbnails <h3>Ram Tap Combined Test</h3> <p> <a href="p1.html"><img src="thumbnails/t1.jpg" alt="Photo 1" /></a> <a href="p2.html"><img src="thumbnails/t2.jpg" alt="Photo 2" /></a> <a href="p3.html"><img src="thumbnails/t3.jpg" alt="Photo 3" /></a> <a href="p4.html"><img src="thumbnails/t4.jpg" alt="Photo 4" /></a> <a href="p5.html"><img src="thumbnails/t5.jpg" alt="Photo 5" /></a> <a href="p6.html"><img src="thumbnails/t6.jpg" alt="Photo 6" /></a> </p>


A web page with a favicon displayed


Popular programs and tools for creating favicons Axialis Icon Workshop

Photoshop plug-in

IrfanView

FavIcon from Pics


The attribute of the map element for creating image maps

name

The attributes of the area element for creating image maps

href

shape

coords

alt

The attribute of the img element for creating image maps

usemap


An image that consists of two overlapping books


HTML for an image map that uses the image <img src="images/new_books_2009.jpg" alt="New books" usemap="#books" /> <map name="books"> <area href="pls8.html" shape="poly" alt="C++ 2008" title="C++ 2008" coords="1, 19, 114, 0, 122, 53, 106, 143, 26, 158, 24, 149" /> <area href="mdom.html" shape="poly" alt="JavaScript" title="JavaScript" coords="128, 21, 241, 42, 218, 178, 103, 159" /> </map>

how to work with images - docpiperdocpiper.com/bhcc_cmt111/murach/murachchapter08.pdf · how to...

Documents