Images Working with Images What is the difference between the GIF and JPEG formats? GIF Graphic Interchange Format Limit to 256 colors Often used for computer generated work JPEG Joint Photographic Experts Group Millions of color Often used for photographs and very large images I. Adding an image Type replacing ? With the name of the image saved on your computer. Example: Images must be saved as a.jpg or.gif The image must be saved in the same folder as your notepad. You can also copy the url from the web and paste it in the IMG tag. Method 1 Save Image from internet to YOUR folder as a jpeg. For example: Dogears.jpg In Notepad: The notepad and image must be saved in the same folder for it to recognize the title you have given the image. Method 2: Right Click on the image you want to use. Choose: Copy image URL Go back to your notepad. Paste the URL between the quotation marks in the IMG SRC tag II. Centering an Image To center an image Type in front of the image you want to center Type after the image you want centered EXAMPLE: III. Adding a border around image In the for the image you want to display a boarder, type BORDER=? Replacing ? With the border thickness you want to use in pixels Change the Border Color: In the IMG SRC tag include the attribute EXAMPLE: IV. Alternative Text In the tag for the image you want to offer alternative text, type ALT=? replacing ? With the text you want to display if the image does not appear. EXAMPLE: V. Aligning Text with Images In the tag. Include attribute ALIGN = top, bottom, or middle Text will appear next to picture either at top, bottom, or middle EXAMPLE: Align an Image with Text This text appears at the top of an image. Example of how it should show up This text appears at the top of an image. This text appears at the middle of an image. This text appears at the bottom of an image. VI. Wrapping Text Around an Image Within the tag Use the left or right value to specify how you want the text to wrap around an image. The left value places the image to the left with the text to the right and the right value places the image to the right with text on the left EXAMPLE VW SHOW The Torriginton Fair Grounds holds its 21 st annual Volkswagen show: The World of VWs Volkswagens gather from all over New England for the 21 st annual car show. The car show benefits local charity groups that count on the Lions Club to throw the show. Many spectators enjoy reliving the past while they walk around the show field. Some freshly restored while other still sport the original paint from 40 years ago. EXAMPLE VW SHOW The Torriginton Fair Grounds holds its 21 st annual Volkswagen Show The World of VWs Volkswagens gather from all over New England for the 21 st annual car show. The car show benefits local charity groups that count on the Lions Club to throw the show. Many spectators enjoy reliving the past while they walk around the show field. Some freshly restored while other still sport the original paint from 40 years ago. VII. Background Images In the tag type BACKGROUND=? Replacing ? With the location of an image in your computer. EXAMPLE Free Backgrounds at VIII. Adjusting Images Height & Width In the tag, type WIDTH=? replacing ? With the width you want in pixels. Press spacebar Type HEIGHT=? Replacing ? With the height in pixels you want EX: NOTE: to prevent distorting, keep the width and height values proportional XI. Horizontal Rule Horizontal Line that separates a webpage into sections. Type an tag wherever you would like to see a line. Here is an example Horizontal Rule Continued To Change the Color: In the tag, type COLOR = To change the Thickness: In the tag, type size=?, replacing ? With the thickness. EX. Horizontal Rule Continued Change width: In the tag, type WIDTH=?% replacing ? With the percentage of the web page you want a horizontal rule Ex: Horizontal Rule Continued Change alignment In the tag, type ALIGN=? Replacing ? With the way you want to align the horizontal rule. (left, center, or right) Ex