Tag Attributes: Inserting Hyperlinks and Images

<a> Anchor Tag
This is the tag that makes the Internet what it is. It allows us to put hyperlinks (or simply, “links”) to other web pages within our text. The links may be to pages within our own website, or to any other website on the Internet.
With this tag, we enclose the text that we want to turn into a hyperlink – i.e. the text that typically a user will click on to activate the link and go to the new page:
<p>
<a>Skiboarding</a> is a winter sport which combines inline skating and skiing.
</p>
The word skiboarding would appear as a red underlined link in the browser:
Skiboarding is a winter sport which combines inline skating and skiing.

But it is not enough to simply enclose the text that we want the user to click on. We also need to say which web page we want to link to. We need to give the tag some extra information, and we do that by giving the tag an attribute. The general way of writing attributes within tags is like this:
<tag attribute=”value”>Content</tag>
In this case, we use the href (hypertext reference) attribute, giving the web address we want to link to in quotes:
<p>
If you want to, you can <a href=”music.htm”>download my music</a> for free.
</p>

<img> Image Tag
This allows us to put images on our page. We need to say which image we want to use. That is, we need to give the source of the image. We do this with a src attribute:
<img src=”mydog.jpg” />

The src attribute gives the location of the image in relation to the web document. It may be an image on your computer’s hard drive, or it may be an image on a website on the Internet. In the previous example, we tell the browser to look in the same folder as the web document and then look for the file called mydog.jpg
If the image had the same filename, but was contained within a sub-folder called images, we would write the code like this:

<img src=”images/mydog.jpg” />

If the image was on another website, we would need to provide the full web address:

<img src=”http://www.example.com/images/mydog.jpg” />

This img tag is self-closing because it does not need to enclose any text. Additionally, we can (and should) provide some descriptive text for those who cannot see images in their browser. This will be useful for those who are blind or have poor eyesight, those using a text-only browser or web-enabled mobile phone, or even a search engine like Google that scans websites to find out what they contain). We do this by using the alt attribute, which stands for “alternative text”.
<img src=”mydog.jpg” alt=”This is a photo of my dog” />