Working with Images and HTML Web Page Design & Development
Inserting a Background Image The background attribute allows an image file for the background of a Web page. The syntax for inserting a background image is: <body background=“URL”> URL is the location and filename of the graphic file you want to use for the background of the Web page. for example, to use an image named “bricks.gif” as a background image, you would use the tag: <body background=“brick.gif”>
Background Image In choosing a background image, you should remember the following: use an image that will not detract from the text on the Web page, making it hard to read do not use a large image file (more than 20 kilobytes) large and complicated backgrounds will increase the time it takes a page to load be sure to take into consideration how an image file looks when it is tiled in the background
Web Page Backgrounds Background overwhelms the foreground text Background shows distracting seams between image tiles Background doesn’t overwhelm the foreground text and seams are not evident This figure shows some examples of well-designed and poorly designed Web page backgrounds.
Images The two image file formats supported by most Web browsers are GIF and JPEG. Choosing the appropriate image format is an important part of Web page design. Balance the goal of creating an interesting and attractive page against the need to keep the size of your page small and easy to receive. Each file format has its advantages and disadvantages, and you will probably use a combination of both formats in your Web page designs.
Working with GIF Files GIF GIF Colors Graphics Interchange Format Most commonly used image format on the WWW Compatible with almost any browser GIF Colors Limited to 256 colors Clipart Logos Icons
Interlaced and Noninterlaced GIFs Interlacing Refers to the way a GIF file is saved by the graphics software Graphic image is retrieved as it was saved Blurry and then comes into focus Noninterlaced The image is saved one line at a time, starting from the top and moving downward
Example
Transparent GIFs Transparent color is a color from the image that is NOT displayed when the image appears in the browser
Animated GIFs Composed of several images Easier and better than video images Available in JASC Paint Shop Pro
Let's talk about images… When you use an image, basically you are linking to it. It is wise to upload the image to your site. If an image is uploaded to your web site, you do not have to link the entire web address, only the picture name.
<img src=“picture.gif”> Tags for Images The tag to insert an image is the <img> tag <img> is the ELEMENT and does nothing by itself You must use attributes with this tag You add the src attribute to insert the image <img src=“picture.gif”>
Let's go over a few codes height - the height of the image width - the width of the image align - the horizontal alignment of the image top----------aligns the text with the top of the picture bottom-------aligns text with bottom of picture middle-------aligns the text with the middle of the image right--------aligns image at right margin, and text will wrap on the left side of it left---------aligns picture at the left margin, and text will wrap on the right of it hspace should be the amount of space you want on the sides your picture in pixels (image margins) vspace should be the amount of space you want on the top and bottom of your picture in pixels
Using the alt Attribute The alt attribute specifies text to display in place of an inline image. The syntax for specifying alternate text is: <img src=“URL” alt=“alternate text”>
Using the border Attribute The border attribute specifies what type of line, if any, is around your picture. If your picture is a link, you may want to turn off the border by setting it to “0.” The syntax for specifying a border is: <img src=“URL” border=“0”>
<img src="monkey.gif" align="left"> Alignment <img src="monkey.gif" align="left"> Here are some examples Aligned left. Notice how the text hugs the image, instead of starting under it. Aligned right. The image hops over to the side, and if the text reaches it, it just drops down beside it and continues.
Today’s Assignment Using the HTML file provided in your “hand out” folder, you must insert images into the code. Use the directions provided.