Presentation on theme: "Working with Images and HTML"— Presentation transcript:
1Working with Images and HTML Web Page Design & Development
2Inserting 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”>
3Background ImageIn 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 readdo not use a large image file (more than 20 kilobytes)large and complicated backgrounds will increase the time it takes a page to loadbe sure to take into consideration how an image file looks when it is tiled in the background
4Web Page BackgroundsBackground overwhelms the foreground textBackground shows distracting seams between image tilesBackground doesn’t overwhelm the foreground text and seams are not evidentThis figure shows some examples of well-designed and poorly designed Web page backgrounds.
5ImagesThe 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.
6Working with GIF Files GIF GIF Colors Graphics Interchange Format Most commonly used image format on the WWWCompatible with almost any browserGIF ColorsLimited to 256 colorsClipartLogosIcons
7Interlaced and Noninterlaced GIFs InterlacingRefers to the way a GIF file is saved by the graphics softwareGraphic image is retrieved as it was savedBlurry and then comes into focusNoninterlacedThe image is saved one line at a time, starting from the top and moving downward
9Transparent GIFsTransparent color is a color from the image that is NOT displayed when the image appears in the browser
10Animated GIFs Composed of several images Easier and better than video imagesAvailable in JASC Paint Shop Pro
11Let'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.
12<img src=“picture.gif”> Tags for ImagesThe tag to insert an image is the <img> tag<img> is the ELEMENT and does nothing by itselfYou must use attributes with this tagYou add the src attribute to insert the image<img src=“picture.gif”>
13Let's go over a few codes height - the height of the image width - the width of the imagealign - the horizontal alignment of the imagetop aligns the text with the top of the picturebottom aligns text with bottom of picturemiddle aligns the text with the middle of the imageright aligns image at right margin, and text will wrap on the left side of itleft aligns picture at the left margin, and text will wrap on the right of ithspace 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
14Using 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”>
15Using 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”>
16<img src="monkey.gif" align="left"> Alignment<img src="monkey.gif" align="left">Here are some examplesAligned 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.
17Today’s AssignmentUsing the HTML file provided in your “hand out” folder, you must insert images into the code.Use the directions provided.