| |
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 Sybase South
Africa!
Visit <a
href="http://www.sybase.co.za/">Sybase South
Africa</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@sybase.co.za">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 index
| 123 Hosting & Design ©2004-2009 All
Rights Reserved S. J. & Associates
|
|
|
