We are looking at two very important HTML elements in this class; that allow us to include images and links in our HTML pages:
- The image element <img>
- The anchor element <a></a>
But first, a quick bit of revision:
How would this HTML page look in a browser?
<html>
<head><title>Not waving but drowning</title></head>
<body></body>
</html>
What would this HTML fragment look like on a web page?
<p>It is a truth <b>universally</b> acknowledged, that a single man in possession of a good fortune must be in want of a wife.</p>
<p><i>Jane Austen<br>Pride and Prejudice</i></p>
What's the difference between how these two HTML fragments will appear on a web page?
<ol><li>Pugh<li>Pugh<li>Barney McGrew<li>Cuthbert<li>Dibble<li>Grubb</ol>
and
<ul><li>Pugh<li>Pugh<li>Barney McGrew<li>Cuthbert<li>Dibble<li>Grubb</ul>
And now, on to today's new elements.
The image element <img>
This element tells the browser that an image should be displayed at this point in the document in the browser window.
Unlike most of the HTML elements we have seen so far, the image element is denoted by a single <img> tag, rather than by a tag pair.
The <img> element has several attributes which you can set, to define the way the image is displayed. The attributes are specified within the <img> tag. These are the most commonly set attributes for the <img> element:
- src: this tells the browser where to find the image file. If the image is stored in the same folder as the HTML page on which it is to be displayed, then src="filename.jpg" or src="filename.gif". If the image is stored in a sub-folder, then the path to the image must also be shown.
- width: this tells the browser the width in pixels at which to display the image in the browser window. This may or may not be the same as the actual width of the image in pixels. For the best quality image however, the width attribute should be set to the actual width of the image.
- height: this tells the browser the height in pixels at which to display the image in the browser window. This may or may not be the same as the actual height of the image in pixels. For the best quality image however, the height attribute should be set to the actual height of the image.
- border: this tells the browser the width in pixels of the border you require around the image. If this attribute is not set, the image will appear without a border, except in the case where the image is also a link, in which case a border will be shown. To avoid this, the border attribute of the image should be set to "0"
- alt: this tells the browser what explanatory text to display while the image is loading, and when the mouse is hovered over the image. It is of particular use when a browser is being used with images turned off, or for browsers that interpret images for users with a visual impairment.
What will this img tag display in the browser window?
<img src="images/mymasterpiece.jpg" width="400" height="300" border="0" alt="a detail of Never Mind, Tiny Clanger">
Exercise 1:
Create a html page which displays the following:
- A title bar with your name in it
- A heading at the top of the page with your name
- An image of your choice, shown at a width of 200 pixels and a height of 200 pixels.
Hint: To make it easy for yourself, make sure that the image you are including on the page is in the same folder on your computer as the HTML page you are creating to display it.
The anchor element <a></a>
This element can do a number of things, but, most commonly,it is used to create a link to another page in the web site, or to another web site, or to send an e-mail. The anchor element is denoted by the <a></a> tag pair.
The <a></a> element has attributes which define the way the link is made. These are the most commonly set attributes for the <a></a> element:
- href: this tells the browser where to find the page to which the text or image between the anchor tag is linking. If you want to link to another page in the same web site, then href="otherpage.html". If you want to link to another web site, then href="http://www.otherwebsite.com". If you want the link to allow the reader to send an e-mail, then href="mailto:nameofrecipient@emailaddress.com">
- target:When target="_new" (note the underscore before the word new), the page being linked to will open in a new browser window.
What will this tag do?
<a href="http://www.iadt.ie" target="_new">This is a link</a>
Exercise 2:
- Add another paragraph to the page you created in Exercise 1, containing the word "hyperlink".
- Make the word "hyperlink" into a link to the IADT web site, which displays in a separate browser window.
|
