Images and Links in HTML
Posted The: 17/03/2008 At: 5:57
Last Edited: 28/12/2009 At: 7:54
This HTML Tutorial discusses Images and Links in HTML, and how to properly work with both elements.
Images
Images are inserted using the img tag, but for the image to show up we first need to define the location, this can be done using either an Absolute or Relative Path, which is defined using the SRC attribute. The SRC attribute tells the browser where to look for the resource, or in the case of the img tag, its associated image.
The path may also be mentioned as the URL, or URI, but for simplicity i used path in this Tutorial. Futher more, img elements have no closing tag.
Note. Images are inline-elements.
<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 enclosed in One of: P, H1-H6, DIV, td, li, ADDRESS.
Working Example
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
Comments: [0]
