Unformatted text preview:

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: &diams;♥ ♠ ♣ ♦ 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

PACIFIC COMP 025 - HTML Images

Download HTML Images
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view HTML Images and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view HTML Images 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?