Chapter 6: Links and Images
Anchored Links...
Without Links, the World Wide Web wouldn't be a web at all! To
add a link... you will use the <a href="location">
opening tag and </a> closing tag. Whatever appears
between these two tags will become underlined and colored, and if
you click on the underlined text it will send the browser to the
location within the quotes.
Example of a link...
Visit AD-Line's
Free Business Reports & Tips Page
Visit <a
href="http://www.ad-line.com/reports/reports.htm">AD-Line's
Free Business Reports & Tips Page</a>!
Note: Although Links are usually used to send people to other
web pages, you may also use it to send email to a specific
address by using a location of mailto:user@host.
Example of a Mailto: Link...
Send email to the
Webmaster!
Send email to <a
href="mailto:webmaster@ad-line.com">the
Webmaster</a>!
In-line Images...
You may also add images (pictures) to your web page, as long as
the image is in the .gif or .jpg (or .jpeg) file formats. You
will not be able to use .bmp format files! The basic tag for
in-line images in <img src="location">.
It is also recommended to add HEIGHT and WIDTH
attributes to the IMG tag, which will allow the image to
take proper proportions on a browser that is not currently
viewing images. It is also recommended to use the ALT="what
picture is" to tell a person what a picture is in case
it is still loading or they are not viewing images. (The IMG
tag has no closing tag!)
Example of a basic in-line image...
<img
src="ie.gif"ALT="Get Internet Explorer
Now">
Combining Links and
Images...
Many times you may want to have an image that is linked, so that
if someone clicks the image, they will be taken to another page.
This is rather simple- you just need to place the IMG
tag within the A HREF tags. (<a
href="location_of_link"><img
src="location_of_image"></a>)
You may also use the ALIGN tags with images!
When an image is also a link, it has a border around it by
default. You can control the width of the border - or turn it off
completely - by using border=n within the img tag. n
is the width of the border (n = 0 for no border).
Example of a linked image...
<a
href="http://www.microsoft.com/"><img
src="ie.gif" align=right border=0></a>
Your own HTML page...
Right click on the image in the centre of the black-bordered box
below, and select "Save Image As" / "Save Picture
As", or similar. Save it as "bullet.gif" in the
same directory where your home page "Home.htm" is
stored.
Add the following to your HTML page ("Home.htm"): (the
blue text is what to add)
<html>
<head><title>My Home Page</title></head>
<body background="bgnd.gif">
<center><font
color="Blue"><h1>YOURNAME's Home
Page</h1></font></center>
<hr>
This is the home page of <a
href="mailto:YOUR EMAIL ADDRESS"><img
src="bullet.gif" border=0><b>YOURNAME</b>.<img src="bullet.gif"
border=0></a>
<p>Type something about yourself here. Describe briefly who
you are and what you do for a living. Remember to use bold and
italic text, for emphasis.</p>
</body>
</html>
Save the text file as "Home.htm".
Go To Chapter 7
Return to
AD-Line.com Home Page