Though this may appear to be a normal picture, clicking on it will take you back
to the LearnItBuildIt homepage. Use the regular code for hyperlinks but
place it around the code for an image rather than text.
Lesson 5: Links and Navigation
You've probably noticed that most web sites contain several web pages. Very few just throw everything into one big block of text and images. In order to better organize sites, it is often necessary to link from one to another, as the table of contents links to all the different chapters on this site. To do this, you must use hyperlinks; here is an example: Go Here!. This is a piece of text that is assigned to a certain address on the web. The words are probably blue before clicked on, and a different color afterwards; these properties are set by the individual browser.
To make a hyperlink, type in the format <a href = "http://kilroyband.tripod.com/utopia.htm">Go Here!</a>. These may be placed anywhere inside the body tags, and the selectable text shall be whatever is typed between the "a href" string and </a> ending. You may also refer to pages in the same directory by just typing in the basic name, such as chapter3.htm. In addition to pages on the web, these can also be used to link to files on a computer and e-mail addresses. If you want to access a file named "boot.txt" on the C drive, just type f ile:///C:/boot.txt within the quotation marks. If you want to allow users to send you e-mail, type in m ailto:Address@Service.Com, to complement me on this incredible web page, click here mailto:MYST375@hotmail.com.
To transfer the user to different spots on the same page, you can create labels and then make references to those identifiers. Place an <a name = "nameoftag"></a> wherever you wish to send the browser. Then, create a hyperlink in the format <a href = "#nameoftag">Go here</a>. For an example, click on this link; it should take you to the very bottom of the page.Look Out Below!
Images may be used as links just like text.
Though this may appear to be a normal picture, clicking on it will take you back
to the LearnItBuildIt homepage. Use the regular code for hyperlinks but
place it around the code for an image rather than text.
The odd plant-like thing above may first appear to be just another bar, but by moving your mouse over it, you can see that there are several spots where clicking is allowed. This is due to an image map, by clicking in certain areas, you can be taken to any number of interesting sites. The map is defined by shapes, to see these, right-click on the regions where the mouse responds. To add these "hotspots," follow these long and complicated instructions:
Name your map and place the code <usemap="#map1"> in the src tag.
Define the regions before the image tag with the starter code <mapname="map1"> and the ending </map>.
Assign different regions inside of map tags with the code <area href = "h ttp://www.aol.com" shape "rect" coords = "19, 12, 56, 30">
The shape can be "rect," "circle" or "polygon."
The coords decide the position and size of the region, in the case of a rectangle, the first two numbers decide the distance from the top of the bottom and top, and the second two describe the distance from the left of the left and right sides. The circle uses the distance of the center from the left and top, and the radius. The polygon uses a distance from left and distance from top for each vertex.
Confused? Image maps are among the more difficult of HTML objects.
Well, that's all you need to know , and more that you'll probably never want to know about links, so put these skills to good use and try out the Practice Web Site #2
Going Up?