![[LOGO]](guide_logo.png){kind=logo}
| Welcome | |
| Overview | |
| Structure | |
| Text | |
|
Images & Links | |
| Lists | |
| Tables | |
| Frames | |
| Style Sheets | |
| More Help | |
| Credits |
Adding images and
hypertext links to
activate your pages
Now that you can produce some smart effects using just text, you'll want to know how to spice up your documents by adding pictures and background graphics. This is when things will really start to look interesting, and indeed professional. You can also now be introduced to the most important thing of all, which is the inclusion of hypertext links to other documents. Here's how to do it all:
<img src="filename" align="position" border="x" alt="xxxx">
This tag specifies the inclusion of an image in the document. Image files should be in GIF or JPEG format. The word filename represents the complete path to the image, from the directory in which the current HTML document resides, and its filename. If the image file was in the same directory as the HTML file, you would thus only need the filename itself. Any text which appears after the closing bracket will be displayed next to the image, at a position defined by the align attribute. This attribute can take the values top, middle, or bottom, representing the vertical position of the text next to it. You can also specify left or right, to position the image horizontally within the browser window. Text will then be displayed level with the top of the image, but will flow to the left or right of it, as appropriate. The border attribute will simply add a solid border around the image, whose width in pixels is the number you specify. This can make images look better when they're displayed against patterned backgrounds. If you're using an image as a link anchor, set the border attribute to zero, as this will remove the unsightly blue box around it. The alt attribute allows you to include a small chunk of text which will be rendered by text browsers (such as Lynx) in place of the image.
<body bgcolor="#RRGGBB" background="filename"> . . . </body>
This is an extended form of the body element, which was introduced at the beginning, and encloses the entire HTML document. The attributes shown allow for visual enhancements to the entire background of your page. The same tricks can now also be achieved using style sheets, which is preferable. Anyway, the first one allows you to alter the default background colour. As explained previously, #RRGGBB represents three two-digit hexadecimal values which you should insert, to determine the red, green and blue colour components. For example, #999999 would be grey, #FFFF00 would be bright yellow, and so on. The second attribute makes the browser tile the entire background of the page with the image you specify: substitute the full path and filename as usual. Use small images, otherwise your page will be very slow to download! Do be careful of colours also, because electric backgrounds will make the page's content unreadable; this page uses a background with very subtle colours, as you can hopefully see. Note that a background image file always takes precedence over a background colour, so whatever you specify in bgcolor will be ignored if you have a proper background pattern. Browsers that don't support backgrounds will simply ignore them. Do test backgrounds carefully, and ensure that they don't render your pages unreadable.
<a href="filename or URL"> . . . </a>
This pair of tags enables the highly important hypertext links to be created. The <a> element is known as an anchor, a legacy piece of terminology from the origins of hypertext, but this needn't concern you. Using hypertext anchors is simple: any words you place between the start and end tags will be shown in (typically) blue underlined text by the browser, and can be clicked on to follow the link.
You can also make images function as hypertext links: simply include the <img...> tag (in its complete form as shown above) between the tags of this link command. If you do this, you may want to add a border="0" attribute to the <img> tag, so that it won't be surrounded by a bright blue link border, which looks odd.
Words placed after the end tag will continue on the same line as the link text, but will not be highlighted. The words filename or URL represent the path to another HTML document which the link points to. This can either be another local web page, in which case you just need to specify the path and filename; or it can be a complete URL pointing to any existing web page in the world. Thus these links are the esssence of how the entire World Wide Web functions.
<a href="#partname"> . . . </a> <a name="partname"> . </a>
You can use this pair of command strings to create internal links within a particular document. The buttons which enable you to jump up and down within this guide operate using these internal link commands. As with a normal link, you insert the text or image which you want to be displayed as a link between the tags of the first command; you then insert the second command in the document, at the place where you want the link to jump to. In general, you needn't include any text between its tags, and indeed the end tag is not strictly necessary. You can have as many jump links as you want, but ensure that the parameter you use for partname matches exactly, for each pair of commands relating to a given jump link, otherwise they won't work.
<img src="/images/filename.gif" width="xx" height="yy"
alt="abc def ghj" usemap="#COOLMAP" border="0">
<map name="COOLMAP">
<area shape="rect" coords="0,68,110,84" href="/welcome.shtml"
alt="Our main welcome page">
<area shape="rect" coords="0,92,110,106" href="/foobar.shtml"
alt="Foobar analysis page">
<area shape="rect" coords="10,116,120,130" href="/snafu.shtml"
alt="Snafu interaction page">
<area shape="rect" coords="20,138,130,156" href="/wibble.shtml"
alt="Totally wibblescrumptious page">
</map>
The above segment of code is an example of an active image map, which is a technique for splitting any image into a whole series of separate links, each link being defined as an area, by pixel coordinates. The syntax shown above should be mostly self-explanatory, but the numbers used in the coords attributes need a quick explanation. Given that each link area is a rectangular part of the image, the first pair of numbers are the X and Y coordinates of the top left corner of the rectangle (in pixels), and the second pair are the X and Y coordinates of the bottom right corner. This is all you need to define a rectangle. You just have to determine the appropriate coordinates - to position each rectangular link - using the cursor in your graphics package.
The above example would produce four rectangular link areas over the image specified, pointing to four different other web pages. One of the most widespread uses for image maps is indeed for geographical maps themselves: you could have a map of the UK, with a link area over each major city, taking you to a page of information on that city.
<a href="mailto:your email address"> . . . </a>
All modern browsers support mail links, which enable readers of web pages to send email to the page's creator directly. The above command string is what you need. Its syntax is much like that of a standard link: text between the start and end tags is what will be displayed. But when the reader clicks on it, a mail window will be brought up automatically for them, with your address already in place. It's an excellent way to get feedback on your web page creations. Of course, you can include mail links to anyone else you want!
| Welcome | |
| Overview | |
| Structure | |
| Text | |
|
Images & Links | |
| Lists | |
| Tables | |
| Frames | |
| Style Sheets | |
| More Help | |
| Credits |