Quick Reference

Links
Images
Images & Links
Wallpaper

Activity # 3
HTML Tag Summary
Tutorial # 4
Table of Contents

Webpage Tutorial # 3

Welcome

This is the third page in a series covering the essentials of HTML. Each tutorial has a short lesson and a learning activity to practice what you have just learned.

     
back to top  

Links: Connecting to the World

The heart of the World Wide Web and HTML is the ability to connect documents together. The tag used for linking to other pages is the Anchor tag. The format for a link looks like this:

<A HREF="location"> ... </A>

Everything between the beginning tag and the ending tag will be marked
like this.

There are different places that you can link to:

  • Another web page on the Internet:

    <A HREF="http://infoseek.go.com"> Infoseek Search Engine</A>

  • Another web page from your own site:

    <A HREF="wt-a3.html"> Learning Activity #3</A>

  • Link to another part of the same page:

    <A HREF="#top"> Return to the top of the page</A>

    This tag must link to another anchor on the same page. The other anchor gives a name to the location:

    <A NAME="top">
  • An e-mail address:

    <A HREF="mailto:webmaster@rbv.net"> The Webmaster</A>

     
back to top  

Images

Web pages look good when you add a few pictures. There are somethings to remember about adding images to a web page:

  • The image must be in a format that will display on a web browser. The two most common formats are .gif and .jpg (or .jpeg)
  • The image file must be in the same place as your web page. Some webmasters collect all the images in one folder that is within the folder containing the web page.
The IMG tag tells the browser where to find the image file:

<IMG SRC="clouds.jpg">

Notice that there is no closing tag with IMG. The SRC attribute points to the source for the image. Other attributes for the IMG tag are HEIGHT and WIDTH. If you know the size of the image or if you want it displayed in a certain size, then use these attributes.

<IMG SRC="images/globe05.gif" HEIGHT="29" WIDTH="29">

This tag will produce this image:

You can ALIGN the image on the LEFT or the RIGHT and text can be positioned beside an image at the TOP or the MIDDLE or the BOTTOM. Here is an example:

Oh Canada!

Here is the code that produced this:

< center >:
< img src="Images/mapleleaf(1).gif" width="20" height="20" align="left" >:
Oh Canada!
< img src="Images/mapleleaf(1).gif" width="20" height="20" align="right" >:


 

     
back to top  

Combine Images and Links

It is not much more difficult to have an image linked so that when a visitor to your page clicks on it, the browser will jump to another page. Simply put the IMG tag inside the Anchor for the link. Here is the format:

<A HREF="location"> <IMG SRC="filename.jpg"> </A>

Here is an example with the HTML code listed after:

Send email to...

< a href="mailto:paul.young@hwdsb.on.ca" >
< img src="Images/sndmail.gif" >
< /a >

     
back to top  

Wallpaper

Many sites have tiled images as the background for their web pages.

Here is the tag for setting the wallpaper for your page:

<BODY BACKGROUND="filename.jpg">

 

     
back to top  

Learning Activity # 3

Work through Learning Activity # 3 to expand on your first Webpage. Then follow on with Tutorial # 4.