LectureUse for ImagesAdding an ImageImage TroubleshootingImage as LinkImage Attributes & ValuesResizing PhotosSlide 8Resizing Photos in HTMLResizing Photo FilesSlide 11Image File TypesImage Position on PageHTML SymbolsNotes on Transparent gifsImage as BackgroundLectureHTML ImagesUse for Images•Photos and Graphics•Buttons for Navigation•Bullets for Lists•Backgrounds•Symbols and Icons•LogosAdding an ImageLocal File: Best Choice<img src=“filename.gif”>Don’t make external links!•<img src=“http://www.whatever.com/filename.gif”>•Not dependable – remote file and location may change)•Unable to manipulate/crop remote image in photo editorImage Troubleshooting<img=“logo.gif”><img src=“logo”><img src=logo.jpg><img src=‘logo.gif’>Image as LinkSurround the image tag with an anchor:<a href=“index.html”><img src=“house.jpg”></a>(Click on house instead of text)Image Attributes & Values•Height–<img src=“logo.gif” height=“150”>•Width–<img src=“logo.gif” width=“150”>•Alt–<img src=“logo.gif” alt=“Gigi’s”>•Border–<img src=“logo.gif” border=“0”>•Use all together:–<img src=“logo.gif” height=“150” width =“150” alt=“Gigi” border=“0”>Resizing Photos•Some photos (especially from digital cameras) are too big!•They can take a long time to download or distort the layout of your websiteResizing Photos•Two Ways:–HTML–Image Editing ProgramResizing Photos in HTML•IMG Tag Review:<img src=“filename.jpg”height=“150”width=“200”border=“2”>•Risk distorting photoand longer load times“50”“200”“5”Resizing Photo Files•Open photo in Paint•Image | Stretch/Skew (Ctrl-W)•Enter new % size (like 30%), hit OK•File | Save As–Don’t overwrite original file–Give it a meaningful name•Or Resize in Paint.NetResizing Photo FilesResized in Paint231 x 308257 KBNo Change768 x 10241.2 MBResized in HTML231 x 3081.2 MBImage File TypesType Filesize Usage Clear AnimationGIFDecent Anything w/ Straight Lines Yes YesJPGGreat - Variable Photographs No NoPNGGreat - Variable Anything Yes NoTIFNo Compression High-End Photos, Printers Yes NoBMPNo Compression - No NoPCXNo Compression - No NoRAWNo Compression High-End Photos No No* Not on all browsers (IE6).*Image Position on Page•Using the align attribute, you can choose to put your image and the left or right edge and have the text wrap around the image:•<img src=“cake.jpg” align=“left”>•To create additional blankspace around the image add the attributehspace=“pixels” orvpace=“pixels” where pixels is the number of pixels youchoose:<img src=“cake.jpg” align=“left” hspace=“20”>HTML Symbols•Symbols can be represented as HTML code–eg: ♦♥ ♠ ♣ ♦ Entities for Symbols and Greek LettersCheck out the Title tag!Notes on Transparent gifsLink to readingImage as Background•Images can be set as the background for the entire page, or just a single element like a <h1> or <p> tag.•Borders and alignments of images will also be covered! •We’ll learn how to do this in the next lesson about
View Full Document