Aligns the top of the picture with the top of the current line of text MIDDLE

Transcription

1 2 The Image Tag It is rare these days to find a website without pictures being used in some form. Images are inserted in html with the IMG tag. Since the tag is specifying the point where the image will appear, there is no close tag to indicate the end of the image. The most basic image tag will specify the name (source SRC) of the image file to be inserted. Like hyperlinks, this file reference may be relative or absolute. E.g. <IMG SRC= picture.gif > Images are commonly used as hyperlinks instead of text. A picture is worth a thousand words so a picture can often indicate the purpose of a link better than a word. Using images can also make it possible to use an image showing special text effects (such as shadows) that are impossible with html text. To make a picture into a link, you insert your image tag inside your anchor tag. E.g. <A HREF= link.html ><IMG SRC= picture.gif ></A> There are quite a few attributes that an image tag can have. These are outlined below. 2.1 Image tag attributes HEIGHT WIDTH HSPACE VSPACE ALT BORDER ALIGN E.g. These two attributes specify the size of the image in pixels. If they are not included, the image will display at its normal size. It is usually a good idea to include these attributes for two reasons. 1 The browser can load the picture quicker when it already knows its exact size. 2 The browser will make room for the loading picture rather than shifting everything down the page as each image loads. These attributes specify the amount of horizontal and vertical space around the picture in pixel measurements. Specifies the text that will display while the picture is loading or if it doesn t load. If the picture s important, make sure you include this. Some people don t have browsers that show images and some turn image loading off to speed up their browsing. Recent browsers use the alternate text as a pop-up when the mouse is moved over the image. Specifies the width (in pixels) of the picture s border. Set this to 0 if the picture is a hyper-link; otherwise a border the colour of your links will appear around the image. TOP Aligns the top of the picture with the top of the current line of text MIDDLE Aligns the middle of the picture with the middle of the current line of text BOTTOM LEFT RIGHT Aligns the bottom of the picture with the bottom of the current line of text Aligns the picture to the left of text and will make text wrap around the picture Aligns the picture to the right of text and will make text wrap around the picture <IMG SRC= picture.gif ALT= Photo HEIGHT= 50 WIDTH= 50 BORDER= 0 ALIGN= left > Steve O Neil 2005 Page 6 of 17

2 2.2 Image types There are two image formats commonly used throughout the Internet. These are GIF (Graphical Interchange Format) and JPEG (Joint Photographic Experts Group). The reason they are both so widely used is because they are both formats that can compress an image s file size without too much loss in image quality. These smaller file sizes make them ideal for use on the Internet GIF Images Graphic Interchange Format Developed by CompuServe. Standard gifs are usually GIF89a format. Animated gifs are GIF89b format. GIF87a standard is still sometimes used but doesn t support transparent areas. File extension -.gif JPEG Images Joint Photographic Expert Group Developed by the group the format was named after. File extension -.jpg.jpeg or.jpe GIF vs JPEG Differences GIF JPEG Best for drawings, logos, graphs, text Best for scanned photos, artwork No more than 256 colours Approximately 16.7 million colours Lossless format (no loss in quality) Lossy format (loss in quality when saved) Interlaced Progressive rendering Transparent areas Animation PNG Images Portable Network Graphic Combines the features of GIF and JPEG in to one format. But isn t very commonly used. File extension.png 2.3 Tips for Using Graphics in Websites Remember that graphics may look different on different screen sizes. Don t make the picture any bigger than you absolutely have to. Re-size graphics in a graphics program instead of doing it in the web page. Provide alternate text for the image (Use the ALT attribute in the image tag). Save pictures in the right place. Usually best to save them in the same folder as your website files. Make filenames descriptive. Avoid spaces in filenames. Use an underscore _ instead. Keep filenames lowercase. Avoid capital letters. Steve O Neil 2005 Page 7 of 17

3 2.4 Preparing images The golden rule when it comes to preparing images for use in web pages is; don t make the images any bigger than you need to. It s also best to avoid using too many images. Images can do a lot to enhance a page s appearance but too many can make it painfully slow to download. Images take a lot longer to download than text and it can be surprising how much difference there can be in download times for different sized images. You can change the size of an image using the HEIGHT & WIDTH attributes in the image tag but avoid doing that. Get the image to the size you want before you save it and use it in your web page. Most browsers don t do a very good job of re-sizing images and they will end up looking very poor. Good graphic design skills are extremely valuable for a web designer. Try to become familiar with a good quality image-editing program such as Photoshop or Paint Shop Pro. If you are using several images with a bit of text after each one then you may need to take steps to avoid stepping your images. E.g. Text Text Text More text This happens when the text you want to place next to the picture is not enough to carry past the bottom of the picture. When you add the next picture, instead of placing it under the first one, it will be placed beside the existing one. To prevent this problem, you can use the CLEAR attribute of the BR tag. This will force everything after that point to begin on a completely new line. The tag should be <BR CLEAR= all > This should make the new picture begin on a new line like the example below. Text Text Text More text Steve O Neil 2005 Page 8 of 17

4 Exercise 9 Inserting images We are now going to insert some pictures in our documents and replace our text navigation bar with a graphical navigation bar. HTML that has been modified or added is highlighted with bold text. 1 Make sure index.html is open for editing 2 Find and delete the following line near the top of the document <H1 ALIGN="center">Cannington Cougars Football Club Website</H1> 3 In its place, insert and centre the picture called heading.gif with Cannington Cougars Football Club as the alternate text. The resulting html should look like this: <P ALIGN= center > <IMG SRC="heading.gif" ALT="Cannington Cougars Football Club" WIDTH= 300 HEIGHT= 100 BORDER= 0 ></P> 4 Now for the navigation bar. In each of the hyperlinks, we ll replace the text with a picture. We ll also remove the vertical lines ( ) between each link. The html should end up looking like this: <P ALIGN= center > <A HREF="index.html"> <IMG SRC="icon_home.gif" ALT="Home" WIDTH="95" HEIGHT="70" BORDER="0"></A> <A HREF="about.html"> <IMG SRC="icon_about.gif" ALT="About Us" WIDTH="95" HEIGHT="70" BORDER="0"></A> <A HREF="events.html"> <IMG SRC="icon_events.gif" ALT="Upcoming Events" WIDTH="95" HEIGHT="70" BORDER="0"></A> <A HREF="who.html"> <IMG SRC="icon_who.gif" ALT="Who's Who" WIDTH="95" HEIGHT="70" BORDER="0"></A> <A HREF="contacts.html"> <IMG SRC="icon_contact.gif" ALT="Contacts" WIDTH="95" HEIGHT="70" BORDER="0"></A> <A HREF="links.html"> <IMG SRC="icon_links.gif" ALT="Links" WIDTH="95" HEIGHT="70" BORDER="0"></A> </P> 5 Now copy that html and paste it in all the other pages, just below the <BODY> tag. This should give us a consistent navigation bar on each page and make it easy to get from one page to another. (The other pages are about, contacts, events, links, who) 6 When all your documents are saved, preview index.html and see the changes you ve made. Your site should look similar to the picture on the next page. Steve O Neil 2005 Page 9 of 17

5 2.5 Finished Site Steve O Neil 2005 Page 10 of 17

6 3 Browser Specific Tags The two main web browsers, Netscape s Navigator and Microsoft s Internet Explorer have both introduced new html tags as features of their new browsers. These extra tags that are outside the HTML specification are often referred to as browser extensions. Many of the current standards have resulted from their additions to html. E.g. The latest standard, HTML 4 includes frames an html technique introduced by Netscape when they released Navigator version 2. Although Netscape and Microsoft are usually quick to make their browser s compatible with the other browser s innovative features, some of these additions are still only used by the browser they originated with. A few of these are mentioned below. Because these html tags only work in a particular browser, many web site designers are hesitant to use them. 3.1 Netscape Navigator One of the Netscape s first additions to html was the BLINK tag. Any text that was formatted using the BLINK tag would blink on and off while the page was being displayed. When it was first introduced you could hardly visit a web site without seeing blinking text somewhere but the novelty has since worn off. 3.2 Internet Explorer One of Microsoft s early additions to html was the MARQUEE tag. This could be used to make text scroll sideways across the screen marquee style. It can be used effectively but lack of support in other browsers has meant that this tag is seldom used. Exercise 10 A look at browser extensions 1 In your editor, open the file index2.html. This file is similar to the index.html file you have been working on except that it has some browser-specific tags added. 2 Look for the line that contains the text Top of the table whenever we're able. Notice the <BLINK> tag and the <MARQUEE> tag (the marquee tag has several additional attributes). The <BLINK> tag will be used by Navigator and ignored by Internet Explorer, while the <MARQUEE> tag will be used by Internet Explorer and ignored by Navigator. 3 Preview the file in Internet Explorer. Notice the Marquee effect on the text. 4 Preview the file in Navigator. Now instead of the scrolling marquee text you ll see blinking text. Steve O Neil 2005 Page 11 of 17

7 Links and Images Revision Questions 1. If you had a line <A HREF= news.html >See our latest news</a> which text would show in the browser for the link? 2. What image type would usually be best for a scanned photo? 3. How would you make text wrap around an image? Steve O Neil 2005 Page 12 of 17

8 4 Using Image Maps for Navigation An image map is a technique in HTML that allows a single image to be associated with more than one hyperlink. Eg if you had a picture that was a map of Australia, a visitor to your site could click on a state in the map to be taken to a page for that state. This is because each part of the image (each state) is associated with a different hyperlink. Another benefit of using an image map is that it can speed up the loading of the page. The more files a browser has to load, the more times the browser will have to send requests for files. This takes time. Even if separate graphics may add up to a smaller file size than a single large graphic, the single graphic will usually load quicker. There are two types of image maps used in HTML. Server side image maps refer to another file on the server, so that if a person clicks on the image, the browser refers to that file for the location the link needs to go to. Client side image maps have the information about the image s hyperlinks contained in the HTML of the same page. Since server side image maps are becoming less common, in these exercises we will be covering client side image maps. 4.1 Image Map HTML The information for an image map is contained within the <MAP> </MAP> tags. The <MAP> tag itself has only one attribute. The NAME= attribute, which identifies the map so that it can be associated with the appropriate image. Unlike most tag attributes in HTML, the name of an image map is case sensitive. Within the map tags itself, you would put the information about each of the hyperlinks within the image. These clickable areas are commonly known as hotspots and are defined with an <AREA> tag. The attributes of an <AREA> tag are listed below. ALT= COORDS= HREF= NOHREF SHAPE= Similar to the ALT= attribute in the <IMAGE> tag. This determines the text that will be used if the image isn t displayed. Provides the coordinates for a hotspot within an image. These coordinates are set in pixels and specify the distance from the top of the picture and the left of the picture. In circle hotspots it is also necessary to specify the radius of the hotspot. The precise coordinates can normally be obtained from your graphics program. E.g. in Photoshop, move your mouse to a point on the image and your info palette will show you the x/y coordinates of that point. Similar to the HREF= attribute of the <A> tag. This specifies the destination of the hotspot s hyperlink. When this attribute is used, it means that this hotspot will have no hyperlink associated with it. It is useful for deliberately creating gaps in other hotspots. Any part of a hotspot being covered by a NOHREF hotspot will be non-clickable. There are three types of hotspots, which can be chosen with this attribute. They are rectangle, circle and polygon. For a rectangle hotspot, you need to specify the x/y coordinates for the top left corner and the bottom right corner. For a circle hotspot, you need to specify the x/y coordinates for the centre of the circle and the radius of the circle. For a polygon hotspot you need to specify the x/y coordinates for each point in the polygon shape. Steve O Neil 2005 Page 13 of 17

9 Once you have specified all of the information for the image map, you then need to insert the image itself in the normal way with an <IMG> tag. Within the image tag you will need to add a USEMAP= attribute. The USEMAP attribute will equal the name of your map that you specified with the <MAP> tag. Below is an example of the HTML for an image map, along with the accompanying image. Notice that the Image map has three hotspots a rectangle, a circle and a polygon. <MAP NAME="MainMap"> <AREA SHAPE="polygon" COORDS="201, 106, 224, 141, 268, 133, 275, 93, 247, 54, 209, 66" HREF="poly.html" ALT="Poly Page"> <AREA SHAPE="rect" COORDS="60, 115, 120, 169" HREF="rect.html" ALT="Rectangle Page"> <AREA SHAPE="circle" COORDS="67, 63, 28" HREF="circle.html" ALT="Circle Page"> </MAP> <IMG SRC="pics/imagemap.gif" USEMAP="#MainMap" WIDTH="300" HEIGHT="250" BORDER="0"> This would create an image with hotspots similar to the following diagram. Compare the notes with the HTML above. Circle area with the centre 67 pixels from the left, 63 from the top and a radius of 28 This area has a corner that is 201 pixels from the left and 106 from the top, another corner that is 224 from the left and 141 from the top etc. Square area with the top left corner 60 pixels from the left and 115 from the top. The bottom right corner is 120 from the left and 169 from the top Steve O Neil 2005 Page 14 of 17

10 4.2 Tips for using image maps ALT Attribute It is a good idea to include the ALT attribute for your image map hotspots since this will provide non-graphical browsers with text in place of the hotspots Alternate Navigation Don t rely solely on an image map for your navigation. Many browsers (including text and voice based browsers) are unable to recognise image maps so an alternate form of navigation should be provided. Having a basic text based navigation bar at the bottom of the page is a good idea. This can be placed in a small text size so that it will be inconspicuous in most browsers. People using non-graphical browsers can then use that to get around your site instead of the navigation bar. E.g. Home Upcoming Events Who s Who Contact Us Links You don t have to worry about it not being very visible in the older browsers it s intended for. If a browser s old enough that it doesn t recognise image maps, chances are it also won t recognise the FONT tag you use to make the text navigation small. Steve O Neil 2005 Page 15 of 17

11 Exercise 11 Creating an Image Map We will now create an image map to navigate to different areas of a website 1 Open the file imagemap.html in your HTML editor. Look at the HTML and preview the document. We create an image map using the second image on the page. 2 Place the following HTML above that image. This is the HTML to define the hotspots in our image. Notice that the name of our image map is mainmap. Remember that these names are case sensitive so normally we would keep it lowercase. <MAP NAME="mainmap"> <AREA ALT="About Us" COORDS="1,18,83,96" HREF="mapabout.html"> <AREA ALT="Upcoming Events" COORDS="3,239,85,126" HREF="mapevents.html"> <AREA ALT="Links" SHAPE="CIRCLE" COORDS="250,173,47" HREF="maplinks.html"> <AREA ALT="Contacts" COORDS="219,98,299,21" HREF="mapcontacts.html"> <AREA ALT="Who's Who" SHAPE="poly" COORDS="196,248,116,245,106,177,152,143,185,182" HREF="mapwho.html"> </MAP> 4. Now we need to change the image tag so that it will refer to our image map. We will do this by adding the USEMAP attribute as shown below. The Bold text indicates what has been added. <IMG SRC="imagemap.gif" USEMAP="#mainmap" ALT="Image Map" WIDTH=300 HEIGHT=250 BORDER=0> 5. Save and preview the file. Test the links in your image. Steve O Neil 2005 Page 16 of 17

12 Image Map Revision Questions 1. What are the two types of image maps? 2. What three types of hotspot shapes can be included in an image map? 3. What are some ways you could accommodate browsers that won t show an image map? 4. List of some examples of places where you would use an image map? Steve O Neil 2005 Page 17 of 17