
		LINKS AND IMAGES	


A link, commonly called hypertext, is the underlined blue text you see on webpages that allow 

you to "jump" from one page to the next.  A link is actually a property of another kind of

HTML tag, an anchor.  The anchor tag is this: <a> this is an anchor </a>.  You can use anchors 

for lots of things but they are most commonly used for links.  The syntax for a link is:

<a href="somepage.html">This is the text that appears underlined and blue</a>

The href stands for Hypertext Reference. This tells the browser what the destination of the 

link is.  

WE can also use an anchor to "mark" a spot that we want to jump to.  Here's how we do that:


Your index.html page probably looks like this now:

<html>

<body  bgcolor=lightsteelblue  text=red>

<p align=right><font color=yellow size=4><i>this is yellow text</i></font></p>

<hr>

<ul>

<li>first item </li>

<li>second item</li>

</ul>


</body>
</html> 


Clean it out a little:


<html>

<body  bgcolor=lightsteelblue  text=red>

</body>
</html> 



Now, add a link that refers to yahoo.com:


<html>

<body  bgcolor=lightsteelblue  text=red>

<a href="http://www.yahoo.com">DO YOU YAHOO?</a>

</body>
</html> 

Notice that I need to specify the full path to yahoo.  This is because browsers are stupid

and will try to find the file or location in the same directory as the page you are on.

Thus, to put in a link to the same page, or any other page in the same directory, we simply

can just name the page:


<html>

<body  bgcolor=lightsteelblue  text=red>

<a href="http://www.yahoo.com">DO YOU YAHOO?</a>


<br>


<a href="index.html">Link to the same page</a>

</body>
</html> 


Here's where anchors come in:  WE can create an anchor and specify a name for it:



<html>

<body  bgcolor=lightsteelblue  text=red>

<a href="http://www.yahoo.com">DO YOU YAHOO?</a>

<br>

<a href="index.html">Link to the same page</a>

<br>

<a name="anchor1"></a>

</body>
</html> 

I'll explain what this will do in a minute.

first, create several line breaks, so the page will have to scroll to get to the last 

hyperlink:


<html>

<body  bgcolor=lightsteelblue  text=red>

<a href="http://www.yahoo.com">DO YOU YAHOO?</a>

<br>

<a href="index.html">Link to the same page</a>

<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>

<a name="anchor1"></a>
<br>
<br>
<a href="http://www.lycos.com">GO GET IT!</a>

</body>
</html> 


Now, we will add a link to the top that will refer to the anchor right above the lycos link:

<html>

<body  bgcolor=lightsteelblue  text=red>

<a href="http://www.yahoo.com">DO YOU YAHOO?</a>

<br>

<a href="index.html">Link to the same page</a>

<br>
<br>

<a href="#anchor1">Link to the anchor</a>

<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>

<a name="anchor1"></a>
<br>
<br>
<a href="http://www.lycos.com">GO GET IT!</a>

</body>
</html> 

Notice that you must put a # symbol first to denote that it is an anchor. To refer to an anchor

in another page, simply add it to the end of the reference: href="page2.html#anchor2"


Did you notice that when you click on the link for the anchor, the page automatically scrolls

down to the spot where you inserted the anchor?  There are also shortcuts, like, creating

an image and using that as an anchor:  <img src="pic.gif" name="anchor1">

Which brings me to the next subject: IMAGES.

To add an image, use the image tag:  <img>  notice there is no end tag.

Next, specify a source (eg - where will this tag find the actual image to be displayed?)

<img src="image1.jpg"> As long as there is an image called image1.jpg in the same folder as this

page, it will display it.  I have included an image for you to use: it is called star.gif


It is a picture of a white star on a blue background:  We will also use this later...so don't

lose it.

Add seven stars to your page--centered:


<html>

<body  bgcolor=lightsteelblue  text=red>

<a href="http://www.yahoo.com">DO YOU YAHOO?</a>

<br>

<center><img src="star.gif">
<img src="star.gif">
<img src="star.gif">
<img src="star.gif">
<img src="star.gif">
<img src="star.gif">
<img src="star.gif">
</center>

<br>

<a href="index.html">Link to the same page</a>

<br>
<br>

<a href="#anchor1">Link to the anchor</a>

<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<a name="anchor1"></a>
<br>
<br>
<a href="http://www.lycos.com">GO GET IT!</a>

</body>
</html> 


ALWAYS remember to spell correctly: if your image doesn't appear, 9 out of 10 times it's 

probably because you spelled src as scr.   SRC stands for SOURCE.

Add a border to the middle star:


<html>

<body  bgcolor=lightsteelblue  text=red>

<a href="http://www.yahoo.com">DO YOU YAHOO?</a>

<br>

<center><img src="star.gif">
<img src="star.gif">
<img src="star.gif">
<img src="star.gif" border=2>
<img src="star.gif">
<img src="star.gif">
<img src="star.gif">
</center>

<br>

<a href="index.html">Link to the same page</a>

<br>
<br>

<a href="#anchor1">Link to the anchor</a>

<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<a name="anchor1"></a>
<br>
<br>
<a href="http://www.lycos.com">GO GET IT!</a>

</body>
</html> 

Now, we will combine what we have already learned:  We will use this image to link to a site

called hotbot.com, a search engine:


<html>

<body  bgcolor=lightsteelblue  text=red>

<a href="http://www.yahoo.com">DO YOU YAHOO?</a>

<br>

<center><img src="star.gif">
<img src="star.gif">
<img src="star.gif">
<a href="http://www.hotbot.com"><img src="star.gif" border=2 ></a>
<img src="star.gif">
<img src="star.gif">
<img src="star.gif">
</center>

<br>

<a href="index.html">Link to the same page</a>

<br>
<br>

<a href="#anchor1">Link to the anchor</a>

<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<a name="anchor1"></a>
<br>
<br>
<a href="http://www.lycos.com">GO GET IT!</a>

</body>
</html> 

Notice that the border stays, but the color changes to blue. This is because links default

to blue.  Let's get rid of the border: border=1 will keep the image the same size, border=0

will eliminate the blue border.

<a href="http://www.hotbot.com"><img src="star.gif" border=1 ></a>

Good. Now, we will learn how to use tables to organize things, and then we will combine tables,

images, and links to create a complex image.

OPEN WEBSTUFF5.txt






















