|
|
Are
you confused about web page design and don't
know where to start? Feel free to learn HTML
and how to design your very own web site by
using our FREE Online HTML Tutorial.
HTML Tutorial Part 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 Hoover
Web Design!
Visit
<a href="http://www.hooverwebdesign.com/">Hoover
Web Design</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@hooverwebdesign.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 The Next Page
|
Learn about Web Design. Check out our 
Download Sample Web Templates - Test Your Skills
Before You Buy!! 
