Part 5 Adding Images Copyright © Texas Education 1
advertisement
Part 5 Adding Images Copyright © Texas Education Agency, 2013. All rights reserved. 1 Image Formats • There are many types of image formats. The two you will most likely use are the gif and jpg formats. – gif (Graphics Interchange Format) limited to 256 colors, one color can be transparent, gif images can be animated. – jpg (Joint Photographic Experts Group) Can display millions of colors. Typically used for photographs. Can not include a transparent color or be animated. Copyright © Texas Education Agency, 2013. All rights reserved. 2 Inserting Images <img src=“pic.gif” /> • The image tag should close itself. • The file extension of the image MUST be included after the image name. Copyright © Texas Education Agency, 2013. All rights reserved. 3 Open index.htm from your Student Files folder and make the changes indicated below. <body bgcolor=“#669955” link=“#ffffff” vlink=“#000099”> <font color=“#333333” face=“tahoma”> <h1 align=“center”><u>World Travel</u></h1> <center> <img src=“world.jpg” /> </center> Copyright © Texas Education Agency, 2013. All rights reserved. 4 Preview index.htm once again in your browser. Copyright © Texas Education Agency, 2013. All rights reserved. 5 Aligning Images <img src=“pic.jpg” align=“right” /> The image is to the right with text wrapping to its left <img src=“pic.jpg” align=“left” /> The image is to the left with text wrapping to its right Copyright © Texas Education Agency, 2013. All rights reserved. 6 This image has not been aligned so it is applied inline with the text. This image has been aligned to the left, therefore text will wrap around the image. Copyright © Texas Education Agency, 2013. All rights reserved. 7 Add the following orange code to index.htm where indicated below the horizontal rule tag. in personal and friendly service.</p> <hr width="75%" size="2" /> <img src=“nyc.jpg” align=“right” /> Copyright © Texas Education Agency, 2013. All rights reserved. 8 Preview index.htm once again in your browser. The second image should be aligned to the right side of the screen with the text wrapping along the left side of the image. Copyright © Texas Education Agency, 2013. All rights reserved. 9 Section Breaks Section Breaks on a web page are line breaks with the clear="all". A section break on a web page is like a continuous section break in a word processor. <br clear=“all” /> Primarily used to STOP text from wrapping around an image. Copyright © Texas Education Agency, 2013. All rights reserved. 10 Image Attributes Now that you know how to work with images, there are other attributes available to help customize their appearance. src – specifies the image file align – defines image alignment hspace – horizontal spacing vspace – vertical spacing width – width of an image height – height of an image alt – text alternative of an image Copyright © Texas Education Agency, 2013. All rights reserved. 11 hspace & vspace Will add a margin spacing to the left and right and/or top and bottom of an image. Helps prevent a webpage from appearing cluttered and crowded. <img src=“pic.gif” hspace=“10” /> <img src=“pic.gif” vspace=“10” /> Copyright © Texas Education Agency, 2013. All rights reserved. 12 width & height •Can be applied to an image to specify a specific image size. •Should be used to make small adjustments only. •Use only one to keep the image in proportion. <img src=“pic.gif” width=“300” /> <img src=“pic.gif” height=“300” /> Copyright © Texas Education Agency, 2013. All rights reserved. 13 Text Alternatives •A line of text that will appear when your mouse is placed over the image. •If the image does not load, the text will appear in place of the image. •Applied to the img tag using by the alt attribute. <img src=“pic.gif” alt=“text or info” > Copyright © Texas Education Agency, 2013. All rights reserved. 14 Complete Lab 5: Home Page Copyright © Texas Education Agency, 2013. All rights reserved. 15 Complete Lab 5: Statue of Liberty Page Copyright © Texas Education Agency, 2013. All rights reserved. 16 Complete Lab 5: Empire State Building Copyright © Texas Education Agency, 2013. All rights reserved. 17 Complete Lab 5: Central Park Copyright © Texas Education Agency, 2013. All rights reserved. 18
