One of the greatest strengths of Hypertext Markup Language is hypertext the ability to link documents together. The World Wide Web itself consists of millions of html documents all linked together via hypertext. A good web site designer should be able to use hyperlinks to make it easy for visitors to not only move around their site easily, but to also get to related sites. The key is to enable people to get to what they want as quickly and easily as possible. Hyperlinks are defined in html using the <A> (anchor tag) and must always have a start and end tag as described in the next section. 1 The Anchor Tag 1.1 Hyperlinks The most common use for the anchor tag is to provide a link to another document. This is done using an anchor tag with a hyperlink reference attribute, as shown below. <A HREF= filename.html >text for the link</a> E.g. If you wanted the text see our product list to be used as a link to a document called product.html you would do this with the following line of html: <A HREF= product.html >see our product list</a> Most browsers display hyperlink text (the text between the closing and ending A tag) as underlined text displayed in the colour specified in the document s BODY tag. Moving the mouse pointer over a hyperlink will change the shape of the pointer to a pointing hand. Clicking the text will make the browser load the document the link points to. Steve O Neil 2005 Page 1 of 17 http://www.oneil.com.au/pc/
1.2 Relative vs absolute links There are two types of hyperlinks you can use in your html - relative and absolute. An absolute hyperlink will give the complete address of a document. A relative hyperlink will give the address of the destination document in relation to the current location. In most cases, a relative link will only give the name of a file that s in the same location as the file currently being edited. E.g. If two documents were in the same location you may use a relative reference such as <A HREF= index.html >main page</a> If they were in different locations (such as a link to another site) you would need to use an absolute reference such as <A HREF= http://www.otherpage.com/index.html >someone else s page</a> Tip Always save your main page as index.html. If an address that goes to a directory without specifying a filename is entered into a browser, the browser will look for a file in that directory called index.html and load it. So if someone tries to go to http://www.otherpage.com/ their web browser will load the document http://www.otherpage.com/index.html 1.3 Email links It is often useful in an html document to create a link to an email address. Doing this means that when someone clicks the link, their email program will open, ready to send an email to that address. To create an email link, you use a regular hyperlink tag. For the link location, put MAILTO: followed by the email address. E.g. <A HREF= MAILTO:my@address.com.au >send me an email</a>. It is a common practice to make the email address itself into an email link. E.g. If you wanted the text my@address.com.au to appear on your page as a link to the email address it describes, you could use the following HTML. <A HREF= MAILTO:my@address.com.au >my@address.com.au</a> Steve O Neil 2005 Page 2 of 17 http://www.oneil.com.au/pc/
Exercise 7 Create links to other pages and email links 1 Open the file index.html. We will create a navigation section with links that can be used to get to other pages in the site. The navigation links will go along the top of the page similar to the links shown below. Note the vertical lines ( ) that are used to separate each link so it is easy for users to tell them apart. If you can t find it on your keyboard you can get it by holding down [Shift] and pressing \. (Note that on most keyboards looks like ) Home About Us Upcoming Events Who's Who Contacts Links 2 Between the body and the main heading, insert the following html. This should be after the <BODY> tag and before the <H1> tag so that it will appear at the top of the page above the heading. Remember the at the end of each line. Put a blank space before and after each one. <P ALIGN="center"> <A HREF="index.html">Home</A> <A HREF="about.html">About Us</A> <A HREF="events.html">Upcoming Events</A> <A HREF="who.html">Who's Who</A> <A HREF="contacts.html">Contacts</A> <A HREF="links.html">Links</A> </P> 3 Find the text that says If you have any questions about us, call on (08) 9274 3748 4 We will replace the phone number with an email link. Change it to If you have any questions about us, <A HREF="MAILTO:cougar@footy.net.au">Send us an email</a> 5 Find the text that says Take a look around and find out about our club. 6 We will turn the text about our club into a link to about.html by replacing it with the HTML below. <A HREF="about.html">about our club</a> 7 Save and preview the document. It should look similar to the one below. 8 Open the file contacts.html and make the email address on that page into a MAILTO link. Steve O Neil 2005 Page 3 of 17 http://www.oneil.com.au/pc/
1.4 Bookmark links It is often useful to link to a different part of the same document or to link to a specific location on a different document. It is especially useful to do this when you want an index at the top of a long document so people can skip to different parts in the document. Eg. Take a look at the news items page on the left. There are headings for each month on this long page and a user might want to go to a certain month such as April without having to scroll through the whole page. This can be done using the NAME attribute of the anchor tag. Firstly you need to specify the destination for the link. You would do this by going to the April heading and putting in the following HTML. E.g. <A NAME= april ></A> It is not essential to have any text inside the A tag although in this instance you could put the tag around the text in the April heading. E.g. <H2><A NAME= april >April</A></H2> You can then link to it by using a regular anchor tag, with the link name, following a #, as the link location. E.g. <A HREF= #april >See the news for April</A> Note that the names you give each location are case sensitive. I.e. uppercase and lowercase letters do make a difference. To link to a specific location in another document, you first need to make sure that the point you want to link to has an <A NAME= ></A> tag. Then you can link to it as normal, with the name of the bookmark at the end of the name of the document. E.g. <A HREF= news.html#april >Link to the external destination</a> Tip If you use bookmark links to allow visitors to your site to go to different parts of a long document, it is a good idea to provide back to top links at regular intervals. You can do this by naming a location at the top of the document, and then placing links to that document at regular intervals down the page. Steve O Neil 2005 Page 4 of 17 http://www.oneil.com.au/pc/
Exercise 8 Create internal links within a document In this exercise we will work with a file called links.html. This contains a list of links to other sites in several categories. Since the entire list is quite long, we will put a small contents section up the top. This will allow users to use a link to go straight down to the section they re after. 1 Open the document called links.html 2 Have a look at the html and preview it in your browser The first thing we need to do is name the destinations for the links. We will use the category headings as the destinations. 3 In your HTML editor find the following text in the HTML <H3 ALIGN="center">AFL Clubs</H3> This is the first category heading. We will mark this as the destination for a link by giving it a name (afl) that we will link to later on. Add an anchor name (<A NAME= >) so it is similar to the HTML below. <H3 ALIGN="center"><A NAME="afl">AFL Clubs</A></H3> 4 We will now do the same thing for the WAFLs Clubs and SANFL Clubs headings. Further down the page. Give them the following names. WAFL Clubs (wafl) and SANFL Clubs (sanfl) 5 We will now put a contents section below the Links To Other Sites heading and above the AFL Clubs heading. I.e. On the line after <H1 and before <H3. The links in the contents section will point at the names we just set up. 6 In that position, insert the following html <P><A HREF="#afl">AFL Clubs</A> <BR><A HREF="#wafl">WAFL Clubs</A> <BR><A HREF="#sanfl">SANFL Clubs</A></P> 7 Save and preview the document test the links in the contents section. We will finish our site navigation by taking the links we put on our main page and copying them to the top of every other page. We will also take the information from the bottom of the main page and copy it to the bottom of every other page. 8 Use copy and paste to copy the navigation section from the top of the index.html page to the same position in all the other pages. (about, contacts, events, links, who) 9 Use copy and paste to copy the information at the bottom of the index.html page to the same position in all the other pages (everything from the horizontal line downwards). 10 Once all documents are saved, preview one of them and use the navigation area at the top of the page to look at each one. 11 On your links.html page, put the following line below the <BODY> tag. <A NAME="top"></A> At the end of each section of links (after each </DL> tag), add a back to top link with the following line of HTML <P><A HREF="#top">Back to top</a> Steve O Neil 2005 Page 5 of 17 http://www.oneil.com.au/pc/
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 http://www.oneil.com.au/pc/
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. 2.2.1 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 2.2.2 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 2.2.3 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 http://www.oneil.com.au/pc/
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 http://www.oneil.com.au/pc/
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 http://www.oneil.com.au/pc/
2.5 Finished Site Steve O Neil 2005 Page 10 of 17 http://www.oneil.com.au/pc/
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 http://www.oneil.com.au/pc/
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 http://www.oneil.com.au/pc/
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 http://www.oneil.com.au/pc/
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 http://www.oneil.com.au/pc/
4.2 Tips for using image maps 4.2.1 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. 4.2.2 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 http://www.oneil.com.au/pc/
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 http://www.oneil.com.au/pc/
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 http://www.oneil.com.au/pc/