Home  >  Tutorials  >   Web Applications  >
Basic HTML 103
E-mail this tutorial to a friend Email to a Friend

Basic HTML 103
Created by:  ZooAtHome

 
Up till now we have concentrated on the text portion of our page. You know what they say, though ... "a picture is worth a thousand words", so it's time we learned how to add images to our page.
 
Download File Download File

If you don't have the image for this lesson, you can download with the download file on the left. Unzip the file into the same folder where your HTML document is.

 
Image Tag Code

To add an image to your webpage, use the image source code:

<img src="/tutorial/html/tutweb/picture.gif">

Let's add the SLP Participant image to our page. Pick a place in the body of your document and add the following:

<img src="/tutorial/html/tutweb/slplogo1.gif">

 
Alternate Text

While your picture is loading, you can include alternate text to let the visitor know what the picture will be.

If you have a picture of yourself on your page, you may want to use something like this:
<img src="/tutorial/html/tutweb/me.jpg" alt="This is me!">

Alter your image tag to include some alternate text, for example:

<img src="/tutorial/html/tutweb/slplogo1.gif" alt="SLP Participant">

 
Width & Height

If you would like to alter the size of your image, whether height or width, you can do so in the image source code:

<img src="/tutorial/html/tutweb/picture.gif" height="100" width="65">

Note: Your image will stretch or squish to fit the dimensions if you enter values other than the actual height and width of the image.

Wow! That's so neat, isn't it?

 
Alignment

If your image will be included among text, you can align the text with the image in three ways:

  1. By default the text will be aligned with the bottom of the image. No special coding is necessary, so you can use this example:
    <img src="/tutorial/html/tutweb/me.jpg" alt="This is me!">
  2. You can align the text with the top of the image with the following tag:
    <img src="/tutorial/html/tutweb/me.jpg" alt="This is me!" align="top">
  3. You can center the text beside your image with this tag (this is the one I used in the example on the left):
    <img src="/tutorial/html/tutweb/me.jpg" alt="This is me!" align="center">

Use one of the previous examples as a guide and set the alignment for your image.

Example:
<img src="/tutorial/html/tutweb/slplogo1.gif" alt="SLP Participant" align="center">

 
Borders

You can also include a border around your image, making it as thin or heavy as you want. Begin at 1 for the thinnest border, and count up from there for a heavier border. You can use this attribute with a regular image source tag or a hyperlink.

Example:
<img src="/tutorial/html/tutweb/slplogo1.gif" alt="SLP Participant" align="center" border="3">

 

Of course, a web page is more than just text and images ... it also includes hyperlinks.

A link is a shortcut to another document or another section of the same document. Three main types of links are (1) URLs, (2) mailto, and (3) links to specific sections.

In all three, you must have an anchor tag.

There are four general steps in creating a link:

  1. Start the anchor with <a (include a space after the a).
  2. Specify the document you're linking to by entering the parameter href="filename" followed by a closing right angle bracket (>).
  3. Enter the text that will serve as the hypertext link in the current document.
  4. Enter the ending anchor tag: </a> (no space is needed before the end anchor tag).

If the page you want to link to is stored on the same server in the same directory, you can just include the filename like this:
<a href="homework2.html">Homework Week 2</a>

If the page is on the same server but in a different directory, you must also include the directory structure like this:
<a href="homework/homework2.html"></a>

If you are linking to a page on a different server, you must include the complete url. For instance, if your webpage is about Elvis Presley, you may want to include a link to the official Elvis Presley homepage, as it may interest visitors to your site. To make a link from your page to the official page, you would use this tag:
<a href="http://www.elvis-presley.com">Elvis Presley's Graceland</a>
"Elvis Presley's Graceland" is the link that will appear as underlined to indicate to the visitor that they can be redirected to that page simply by clicking on the link you have provided.

 
Anchor Tags

Let's add a link below our image by entering the following code:
<a href="/index.html">Paint Shop Pro Users Group</a>

This tag provides a text link that will take your visitors to the PSPUG main page.

 

You can also use images as hyperlinks. To display your image as a hyperlink, include the image source code where you'd normally type in the text for the visitor to click on. When you link your image, a border will be produced around the outside of the picture. To prevent this, include the border="0" attribute:

<a href="http://www.geocities.com/~elviscentral"><img src="/tutorial/html/tutweb/elvis.gif" alt="Elvis Presley" border="0"></a>

 
Using an image as the link

Let's turn our image into a hyperlink by altering our image tag as follows:

<a href="/edu/slp/slp.shtml"><img src="/tutorial/html/tutweb/slplogo1.gif" alt="SLP Participant" align="center" border="0"></a>

Now your visitors can go directly to the PSPUG SLP page by clicking on the SLP Participant image.

 
Email Links

You can also include email links to make it easier for your visitors to contact you.

The mailto attribute allows visitors to click on an underlined link, much like the URL explained above, and send an email to the address listed in the attribute. You have the option of displaying the link in any way you'd like, whether using your email address or simply "Email me":
<a href="mailto:jdoe@home.com">Email me by clicking here!</a>

"Email me by clicking here" will appear on your webpage for the visitor to click on and send you a message.

Add an email link with your email address to your page just as the previous example demonstrated.

 

Links don't necessarily have to take you to a different page. They can also be used to guide your visitors to a specific place on the current page.

If your document is rather extensive and you'd like to offer your visitors the option of an "index" to jump whereever they'd like to go, you can set up a tag that will transport surfers to a specific place farther down the same page.

There are two steps in this link:

  1. First use the anchor tag to assign a name to a portion of text to identify the area you want to jump to. This will usually be a subheading or the first few words of a section of your page. The anchor tag will look something like this:
    <a name="week2">My Week 2 Assignment</a>
  2. Next you use another anchor tag to create a link to take you to this area. You use a # sign to indicate that the destination is a named anchor:
    <a href="#week2">Week 2 Homework</a>

You can combine hyperlinks and named anchors to go to a specific area of a separate page like this:
<a href="MaineStats.html#ANP">Acadia National Park</a>
This link would take you to the named anchor "ANP" on the "MainStats" page.

 
Anchor to top of Page

Link to top of Page

Let's add a link at the bottom of our page that will take us back to the top. First we need to place a named anchor at the top of the page. We can use existing text for this anchor ... we just have to use an anchor tag to assign it a name.

In the first heading, our welcome, nest an anchor tag inside the heading tag like this:
<h1 align="center"><a name="top">Welcome to my homepage!</a></h1>

Now at the bottom of the document, just above the </body> tag, place your link as follows:
<a href="#top">Top of Page</a>

Clicking on the words "Top of Page" should return you to the beginning of your page.

 

There! You now have the basics for building a complete web page. That's the end of this series on Basic HTML. ;o)