How to create links and insert images
In this section we cover the creation of links (hyperlinks) and how to insert images into your HTML webpage. Links are a vital part of an HTML document to enable navigation throughout the website's pages. Images have numerous uses, they can be used for an instructional purpose, to display products, or simply for aesthetical purposes.
How to create a link in HTML
To create a link in a HTML document you use the <A HREF> tag, see below.
<A HREF="URL">link text/image</A>
This provides a link (hyperlink) to the URL specified in the <A HREF> tag. The </A> denotes the end of the link tag.
<A HREF="#???">link text/image</A>
The use of the hash symbol (#) denotes a hyperlink to an <A NAME="???"> tag (see below) in the same document.
<A HREF="URL#???">link text/image</A>
Provides a link to an <A NAME="???"> tag (see below) which resides in the URL.
<A HREF="mailto:email@example.com">link text/image</a>
When the mailto attribute is used as above, it provides a link to send an email to the recipient's address, in our example firstname.lastname@example.org. When the link is clicked the visitor's browser will open their default mail software, such as Microsoft Outlook Express, which is then used to send the email.
If you want to set the subject for the email you can use:
<A HREF="mailto:email@example.com?subject=****">link text/image</A>
where **** is the text of the subject.
The final attribute we will look at is the NAME attribute:
<A NAME="???">target text/image</A>
This is a useful tag if you have a page with a lot of content that is split into sections. It allows you to specify which section of the webpage will be displayed after the user follows a <A HREF="#???"> or <A HREF="URL#???"> tag.
How to insert an image into a webpage (HTML document)
Inserting an image into a webpage is very straightforward, it is achieved through the use of the IMG
tag, see below for an example.
Where URL specifies the location where the image is stored, for instance:
There are certain attributes that can be assigned to an IMG tag, below are a selection:
- <IMG SRC="URL" ALIGN="LEFT|CENTER|RIGHT">
- where LEFT, CENTER, or RIGHT are the alignment parameters. For example, to display an image that is right-aligned use <IMG SRC="URL" ALIGN="RIGHT">.
- <IMG SRC="URL" VALIGN="TOP|MIDDLE|BOTTOM">
- where TOP, MIDDLE, or BOTTOM are the alignment parameters. For example, to display an image that is bottom-aligned use <IMG SRC="URL" VALIGN="BOTTOM">.
- <IMG SRC="URL" ALT="???">
- allows a text alternative, where ??? is the text to be displayed if the image is unobtainable, for example, if the visitor has images blocked.
- <IMG SRC="URL" WIDTH="xx" HEIGHT="yy">
- denotes how big the image should be displayed, where xx is the width and yy is the height in pixels. This tag, although it is not required, can help the loading time of your webpage, as the browser knows how big the image is without first having to retrieve it.
- <IMG SRC="URL" WIDTH="xx%" HEIGHT="yy%">
- the same as above but the dimensions given in percent, instead of pixels.
- <IMG SRC="URL" BORDER="??">
- defines the size of the border around the image in pixels. If you use an image in conjunction with the HREF tag to create a link, the image will sometimes be displayed with a border around it, to avoid this use BORDER="0".