brugbart.com - Edition/Last Updated: 13. October 2008

// Tutorials / Images and Links in HTML

Posted The: 17/03/2008 - AT: 6:57

Edited The: 27/08/2008 - AT: 13:29

Images are inserted using the img tag, an Absolute or Relative Path for the image is included using the "SRC" attribute.

The SRC attribute tells the browser, where to look for the image, so its important that you write the correct URL. Img elements have no closing tag, and should only be closed using the forward slash in xhtml.

Note: that images are inline-elements, they also need to be inclosed in: One of P, H1-H6, DIV, ADDRESS.

<p><img src="MyImage.jpg" alt="An Image"></p>

When using this, Remember that content goes between the body tags.

Links

When inserting links, it gets a bit more complicated aswell, since they need the "href" attribute to work. And instead of simply beginning with something like <l>, They have the <a> tag assigned.

Also note: Links are inline-elements, and needs to be inclosed in either <p> tags, or other block-level elements. I.E. (One of P, H1-H6, DIV, ADDRESS).

Examples

Taking the example from the "Introduction", and adding the following:

<p><a href="about.html">About this Website</a></p>

Which brings us to something like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

  <head>
  <title>My first Website</title>
  </head>

  <body>
      <p>My first Website.</p>
      <p><a href="about.html">About this Website</a></p>
  </body>

</html>

Our next step would be, to create the "about.html" page (using same approach), and place it in the same directory.

Images as links

You can also use images as links. To do this, insert the img between the Start and End tags of the a element.

<p><a href="about.html"><img src="MyImage.jpg" alt="Image linking to the About Page."></a></p>

This would result in something like:As you may have noticed, theres an Ugly Border around the image. To remove this we would simply add the "style" attribute, with the CSS specification "border:0;" see below:

<p><a href="about.html"><img src="MyImage.jpg" alt="Image linking to the About Page." style="border:o;"></a></p>

Which brings us to something like:The final code is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

  <head>
  <title>My first Website</title>
  </head>

  <body>
      <p>My first Website.</p>
      <p><a href="about.html"><img src="MyImage.jpg" alt="Image linking to the About Page." style="border:0;"></a></p>
  </body>

</html>

From now on, you should know enough to implement my examples, so hopefully it wont be necessary to show the final code every time.

The next Tutorial is: Tables in HTML