Lesson 6

This lesson, the first in a while with two chapters is all about inserting links to other sites, other files, other pages on your site and much more in your document. Then the viewer of your site will click on an anchor (you will learn) and the browser will load whatever is specified in the URL reference (you will learn about that too). Well it looks like you have some stuff to learn so let's get started.

Links are what allow people to move from page to page on the World Wide Web. An anchor is the part of the link that we see on the page, it can take the form of text or multimedia. By clicking on the anchor the browser loads up the page which is referred to in the URL reference, that is the other part of a link. A text anchor is called hypertext and an anchor in multimedia is called hypermedia. Hypertext is usually underlined and in a different colour font so as to distinguish it from other text on the page. You learned earlier how to set the colour of links in the <body> tag. Hypermedia e.g. images, embedded videos is presented with a border around it. This is usually really ugly and makes the images look terrible. To ensure that an image which is hypermedia is not presented with a border around it you should include the attribute "border=0" in the image tag.

<img src= "image.gif" border=0>

This is the tag to insert hypertext in a HTML document:

<a href= "http://www.mysite.com">click on this text to go to my site</a>

The <a> and </a> tags are the start and end anchor tags. The href attribute is the part where you enter the URL reference. Make sure to include the quotation marks.

This is the tag to insert an image as a link in your HTML document:

<a href= "http://www.yoursite.com"><img src= "anchor.gif"></a>

You will learn in a later chapter how to embed videos in your pages. To make these videos an anchor, simply include them within the start and end anchor tag.

You can have hypertext and hypermedia pointing to the same URL reference without creating two anchors:

<a href= "http://www.thesite.com">click here or on the image to go to the site<img src= "anchor.gif"></a>

In fact anything which is included within the start and end anchor tags will become an anchor to the URL reference specified in the start tag.

anchors

I will now show you a Notepad Viewer and resulting Explorer View concerning anchors.

Notepad Viewer 8.1

<html>
<head>
<title>Anchors</title>
</head>
<body text=black link=red>
This is just normal text on a webpage but if I insert an
<a href="http://www.yahoo.com">anchor</a>
the text changes colour and becomes underlined. If I click on the anchor then the browser will load up the page specified in the URL reference, in this case http://www.yahoo.com.<p>
this is a normal inline image<img src="image.gif"><br>
but this image is an anchor<a href="http://www.yahoo.com"><img src="image.gif"></a><p>
You can tell that this image is an anchor in two ways
<ul>
<li>it has a coloured border around it
<li>when you move the mouse arrow over it the arrow changes to a pointing hand
</ul>
It is possible to remove the border by including the attribute "border=0" in the image tag<br>
This image is still an anchor but the only way you can tell is that if you move the mouse arrow over it the arrow changes to a pointing hand.
<a href="http://www.yahoo.com"><img src="image.bmp" border=0 align=top></a>
</body>
</html>

The resulting Explorer View shows the ways in which hypertext and hypermedia are presented in Internet Explorer 4.

Explorer View 8.1 - click on the image to see a bigger and clearer version

e-mail

It is also possible to provide a link to an e-mail address on your page. This can come in useful if you want to make it easier for people to send comments to you about your page etc. Instead of having to memorise your e-mail address they can just click on the link to your e-mail and their browser will
a) start up whatever program is used on their computer to send e-mail

b) prepare the program so as all the user has to do is

type up the e-mail
send it without even worrying about the address.

This is how to add a link to e-mail on your page:

Send me an <a href= "mailto:youraddress@server.com">e-mail</a>

It is very important to remember that "mailto" is one word and that the colon must appear between "mailto" and the e-mail address. If one of the above is left out then the anchor will point to a file on the server (that probably does not exist) and not to your e-mail address.

Notepad Viewer 8.2

<html>
<head>
<title>link to e-mail</title>
</head>
<body>
Please send your comments and ideas by clicking
<a href="mailto:youraddress@server.com"> here</a>
</body>
</html>

Explorer View 8.2

My browser is Internet Explorer 4 and my e-mail program is Outlook Express. When I click on the word "here" in the above window this is what Outlook Express opens. Click on the image to see a bigger and clearer version

Remember, images can also be used as links to e-mail:

<a href= "mailto:youraddress@server.com"><img src= "image.gif"></a>

internal links

Quite often you might want to have a link to another part of your page which is further down or further up the same document. For example a menu at the top of the page and a button at the bottom to return to the top.

An internal link requires two tags in the document.

<a name=gothere>This is the place to be</a>
<a href= "#gothere">Go to the place</a>

Part a) appears where you want the link to lead and part b) appears where you want the anchor.

Notepad Viewer 8.3

<html>
<head>
<title>Internal Links</title>
</head>
<body>
<a name=contents><h2>Contents</h2></a>
<a href="#chapter1">Chapter 1</a><br>
<a href="#chapter2">Chapter 2</a><br>
<a href="#chapter3">Chapter 3</a><br>
<h2>Introduction</h2>
blah...blah...
<a name=chapter1><h2>Chapter 1</h2></a>
blah...blah...
<a name=chapter2&g<h2>Chapter 2</h2></a>
blah...blah...
<a name=chapter3><h2>Chapter 3</h2></a>
blah…blah…
<p><a href="#contents">Back to top</a>
</body>
</html>

When the page is opened it will look like Explorer View 8.3a. Then by clicking on chapter 2 Explorer View 8.3b will open.

Explore View 8.3a and Explorer View 8.3b - click on the images to see bigger and clearer versions

I hope that you now completely understand internal links.

linking to other files

It is also possible to link to other types of files besides other web pages. For example:

<a href= "money.gif">money picture</a>

Two different things can happen when a link to another file type is clicked,

The browser will be able to open the file itself and will do so
The browser will not be able to open the file and will call on another program to open it. If this is the case the browser may first propmpt the user to decide whether to open the file in a program or download it and save it to disk.

An example of a) would be a ".gif" file and an example of b) would be a ".wav" file or a zip file.. A ".gif" file will open in the browser like in Explorer View 8.4 but a ".wav" file will open like in Explorer View 8.5.

Explorer View 8.4

Explorer View 8.5

If the file being linked to was a zip file the user might decide to save the file to disk. Placing files in zip archives is a common way of compressing files for transfer over the internet.

absolute reference

Absolute reference is when the full address of a link or embedded object is given. For example, if I was inserting an image as the title for my web-page and I wanted to use absolute reference then this is an example code I could use.

<img src= "http://www.mysite.com/images/title.gif">

This can also be used to insert images from another page onto yours without copying them on to your server.

relative reference

Relative reference is when the address of the link or embedded object is only specified in relation to that page. I will use the example above except this time using relative reference.

important in this example I am acting as if the page I am writing is situated in the "homepage" folder.

<img src= "/images/title.gif">

This is the easier way and therefore the most common. Neither way however is more effective, they are just suitable for different situations. It is up to you which one you choose to use.

Note that in the notepad viewers of this book I am using relative reference and assuming that the file I am specifying is in the same directory as the html document. When this is the case there is no need to specify any folder at all just simply the name of the file.

base href

To use relative reference in a document with its base in another folder simply use this tag:

<base href= "http://www.mysite.com/homepage/index.html">

Place this tag in the head of your document and all relative references in the document will use this as the primary folder. For example, if you wanted to use an image that was in this folder you would simply specify the name of that image, nothing else, just as if the document itself was in that folder.

linking outside the WWW

You may have heard of other services available on the Internet besides the World Wide Web. We have already discussed e-mail but other services such as ftp, gopher and telnet can also have anchors in pages on the World Wide Web.

To insert an anchor to any of these resources (besides e-mail to which you already know how to link) simply name the address as the HREF in the anchor tag. For example:

<a href= "gopher://gopher.mysite.com">

<a href= "ftp://ftp.mysite.com/downloads">

<a href= "telnet://wais.mysite.com">

If you do not understand what any of the above are then it is unlikely that you will want any of them in your page so it does not matter.

naming your link

You can use the title attribute of the anchor tag to give your links a name. This name can be as long as you want but be careful because I found that if I did not wrap the text in notepad then it did not wrap in Explorer. The name appears in a pop up box when the mouse arrow is held over it for a second or so, the same as the alt attribute of the image tag. Here is an example of the title attribute in action.

<a href= "http://www.yahoo.com" title= "why not search for the page you want at yahoo!">

An imagemap is an image that has anchors in different sections of the image. It could also just have one anchor, but the main point of the imagemap is that its’ anchor(s) are only in a specific area, defined in pixels.

uses of imagemaps

Imagemaps are mainly used as navigational aids, such as menu bars or attractive homepages but can be used for whatever purpose you can think of. The following three images display three different uses of imagemaps.

a) an attractive homepage

that is the homepage of the official site for the film "Titanic". As you can see the imagemap which is used as content list for the page is quite attractive but because the picture is so big it takes a long time to download meaning that for about two minutes I was staring at a blank screen. It is advisable that when using imagemaps (especially big ones) that you also provide a text alternative. This makes the links available for those on text only browsers and those with images turned off.

b)as a menu bar

The part of the page that is the menu bar is the part with the dotted square line around it.

c) another use

When I first learned how to use imagemaps I wanted to practice so I designed this:

In this image map clicking on the head of a character from "friends" will open a ".wav" file of that person telling a joke.

how to insert an imagemap

The first thing you have to do is program the map. The second thing you have to do is assign this map to an image.

<map></map>

The map starts with the <map> tag and ends with the </map> tag. There is only one attribute of the <map> tag and it is required. It is "name=". This name will be used later when you are assigning the map to an image.

<area>

Each part of the image that is an anchor is specified with an <area> tag. I will firstly show you a completed <area> tag and then explain each of the attributes.

<area shape=rect href= "URL" coords= "0,0,90,75">

shape specifies the shape of the area and can be set to:

poly (polygon)

circle

rect (rectangle)

default

href specifies the URL that the anchor points to (nohref can be typed instead to signal that this is a dead area in the map)

coords contents differ depending on shape

coords and shape

Each pixel on an image has its own co-ordinates. For example the co-ordinates of the pixel which is 50^th from the left edge and 70^th from the top are "50,70". This is how imagemaps read co-ordinates. The different shapes however require for a different set of co-ordinates.

Rectangle/default top left and bottom right e.g. "10,10,80,70"

Polygon each corner e.g. "30,20,40,20,80,50,70,100"

Circle centre point and

radius e.g. "60,60,30"

results

The rectangle/default "coords=" make a shape like the outlined part of this image.

The polygon "coords=" settings make a shape like the outlined part of this image:

The circle "coords=" settings make a shape like the outlined part of this image.

overlapping

If two areas with different URL references overlap then the one which is listed first is the one which the overlapped area refers to.

assigning a map to your image

To assign a map to an image simply use the attribute "usemap=" in the image tag. Instead of using quotation marks you use the # sign at the start.

<img src= "imagemap.jpg" usemap=#mymap>

This feature of HTML 3.2 means that you can specify one map at the top of your document and use it in multiple images throughout the document. It removes the need to specify the areas each time you want to insert an imagemap.

complete listing

Notepad Viewer 9.1

<html>
<head>
<title>Imagemaps</title>
</head>
<body>
<map name="guide">
<area shape=default coords="117,6,165,71" href="information.html">
<area shape=rect coords="191,78,285,147" href="pictures.html">
<area shape=poly coords="159,214,212,214,212,251,193, 251,193,285,179,285,179,243,
160,243" href="quiz.html">
<area shape=circle coords="269,242,30" href="mailto:me@myaddress.com">
</map>
<img src="imagemap.bmp" usemap=#guide>
</body>
</html>

Explorer View 9.1 - click on the image to see a bigger and clearer version

This is the imagemap in Internet Explorer 4, you know it is an imagemap because it has a border around it. This border, however, does not stand out because it is the same colour as the lines in the picture. Although you cannot tell by looking at it where the anchors are situated you will find out by analysing it along with its’ notepad viewer.

next lesson home comment more downloads download this

HTML Builder- End of Lesson 6

Notepad Viewer- HTML Builder 6

<html>

<head>

<title>

I have now completed Lesson

</title>

</head>

<a name="top">

<h1 align=center>HTML BUILDER</h1>

</a>

<tr>

</td>

<td>

<lh><big><b>What I learned from....</big><b><br>

<li>

<a href=#lesson1 title="Paragraph about what I learned from Lesson 1">

Lesson 1

</a>

<li>start and end HTML tags

<li>head tag

<li>meta tag

<li>title tag

<li>body tag

<li>margins

<li>hidden text

</ul>

<li>

<a href=#lesson2 title="Paragraph about what I learned from Lesson 2">

Lesson 2

</a>

<li>blockquote

<li>background colour or image

<li>all attributes of the body tag

<li>basefont and font tags

<li>paragraphs and line breaks

<li>physical formatting

<li>preformatted text

</ul>

<li><

<a href=#lesson3 title="Paragraph about what I learned from Lesson 3">

Lesson 3

</a>

<li>inserting images

<li>aligning text with images

<li>all attributes of the img tag

</ul>

<li>

<a href=#lesson4 title="Paragraph about what I learned from Lesson 4">

Lesson 4

</a>

<li>ordered lists

<li>unordered lists

<li>definition lists

<li>all attributes of these lists

<li>lists within lists

<li>personalising your lists using your own bullet

</ul>

<li>

<a href=#lesson5 title="Paragraph about what I learned from Lesson 5">

Lesson 5

</a>

<li>creating tables

<li><i>all</i> attributes of the tags in a table

<li>inserting tables within tables

<li>inserting other HTML items within tables

<li>using the pre tag instead of a table

</ul>

<li><a href=#lesson6 title="Paragraph about what I learned from Lesson 6">Lesson 6</a>

<ul type=circle>

<li>linking to other documents

<li>inserting internal links

<li>linking to e-mail

<li>linking to other net resources

<li>linking to files

<li>absolute and relative reference

<li>imagemaps

</ul>

</ol>

</td>

</tr>

</table>

<a name="lesson1">

<h2>This is what I have learned from lesson 1.</h2>

</a>

<a href=#top><i><font color=red>back to contents</i></a></font><p>

I know the very basics of writing HTML. I know

that the start and end HTML tags are necessary in a HTML document. I know that the

meta tag is used to give information to search engines, i.e. keywords and description<p>

I am able to assign a title to my documents (see taskbar above).<br> I know that all text and images etc. are to be included between the start and end body tags. I know two attributes of the start body tag, topmargin and leftmargin and I know that each of these is measured in pixels. I know how to insert hidden text in a HTML document for example there is hidden

text in between the words hidden and text in this sentence.

<a name="lesson2">

<h2>This is what I have learned from lesson 2.</h2>

</a>

<a href=#top><i><font color=red>back to contents</i></a></font><p>

Most of what I learned in lesson two was about changing the look of my webpage. I have already made some changes to this page and I will tell you what they are in an indented paragraph.

<blockquote>As you can see I have added a background colour to the page and if I want I know how to add a tiled image. I have set all of the attributes in the body tag, most of them concern the colour of different text. I have added paragraphs and line breaks to the text. I have set the basefont tag and <font face="flexure","times new roman" size=+1 color=black>know how to use the font tag </font>.I have added horizontal lines and I have added headings. I have also added paragraphs and line breaks.</blockquote>

<pre>

I am able to

----------------

use preformatted text to make

it appear in the order

I want it to

</pre>

<p>I can format my text so as it is<br>

<i>in italics</i><br>

<u>underlined</u><br>

<strike>strike-through</strike><br>

<sup>superscript</sup>,

<sub>subscript</sub><br>

<small>small</small><br>

<b><u><i>or</i></b><sup><big> a</u></sup><tt><strike> combination</big></tt></strike></u>

<a name="lesson3">

<h2>This is what I have learned from lesson 3.</h2>

</a>

<a href=#top><i><font color=red>back to contents</i></a></font><p>

This lesson was based on one chapter and the central topic was inserting images in HTML documents.<p>

I have already inserted .gif files on my page and now I will now show you some other things I know how to

do with images.<p>

This text is beside a left aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom.<p>

This is only one line of text and appears center aligned <img src="picture.gif" align=center height=128 width=128 alt="this is text written in the alt attribute" vspace=10 hspace=10><p>

I know how to resize images using the width and height attributes. e.g.<img src="picture.gif" align=center height=60 width=160 alt="this is text written in the alt attribute" vspace=10 hspace=10>

<p>I understand all the attributes of the img tag and they have all been used for the images above.

<a name="lesson4">

<h2>This is what I have learned from lesson 4.</h2>

</a>

<a href=#top><i><font color=red>back to contents</i></a></font><p>

This lesson was again based solely on one chapter. The Chapter concerned lists. I learned about ordered or numbered lists, unordered or bulleted lists and definition lists. I learned the different attributes of each of these, the main one being type. I learned how to insert lists within lists. I also learned about extra indentation and personalising unordered lists.

<p>I have now added a list of contents at the top of this page and when I learn more advanced things about HTML this list will appear in a different frame and will contain links to the different sections.

<a name="lesson5">

<h2>This is what I have learned from lesson 5.</h2>

</a>

<a href=#top><i><font color=red>back to contents</i></a></font><p>

Lesson 5 was all about inserting tables in my HTML document. I learned that they can be used both for presenting information and as a layout tool.<p>

They can be used as a layout tool because it is now possible to include other HTML elements in them such as lists and images.<p>

I am now familiar with all of the attributes of the tags in a table. They include such things as border thickness and colour, background colour or tiled images and text alignment.<p>

You will see at the top of the page that I have added a tiled image to the side of the menu. To do this I created a table with one row and two cells. In the first I simply specified the image background and width and I placed the menu within the start and end tags of the second cell.

<hr size=3 width=75% color=lime align=left>

<a name="lesson6"><h2>This is what I have learned from lesson 6.</h2></a> <img src="talk.gif" height=80 width=80 alt="talking man" hspace=40>

<hr size=3 width=75% color=lime align=left>

<a href=#top><i><font color=red>back to contents</i></a></font><p>

Lesson 6 was all about inserting anchors in html documents. By clicking on an anchor, whether it is hypertext or hypermedia the browser will load up the page specified in the URL reference. I can now create anchors to anything I want to link to, like e-mail, gopher and files. I can also insert anchors that when clicked on tell the browser to move down or up the current page, these are called internal links.<p>

I have added internal links to this page so that a contents menu is available at the top. By clicking on one of the links in the contents the page will scroll down to the paragraph I have written about that lesson.

</body>

</html>

This is what the top of you HTML Builder should look like now, if displayed in 800x600 pixels.

click on the image to see a bigger and clearer version

next lesson home comment more downloads download this

Information The official home-page where this document can be downloaded is http://www.geocities.com/SiliconValley/Network/4759/
This document (whole or part) is not to be used, plagiarised, or its' content attributed to any other author. Any quotes must be acknowledged to the author and the author must be informed of the quotation before it's publication. This is effective whether the quotation is being transmitted by electronic or any other means. The author of this document is Oisin Prendiville who can be contacted at html3.2@technologist.com