Combining Web Design with Original Art
Adjusting the size of HTML Images
Now that you have mastered inserting images to the web page, you can adjust the image size by differing the height and width within the img src= tag. The original Firefox image is approximately 50x50 pixels.
<br /> <img src="firefox.jpg" /> <img src="firefox.jpg" width="40" height="40" /> <img src="firefox.jpg" width="30" height="30" /> <img src="firefox.jpg" width="20" height="20" /> <img src="firefox.jpg" width="10" height="10" /> <br /> |
See the Example.
Alternate text to an image
It is good practice to insert alternate text in case the image does not load correctly. The alt= code is used to do this, as follows:
<br /> <img src="firefox.gif" width="70" height="70" alt="firefox" /> <br /> |
You will see from the Example that, by default the image aligns itself to the bottom of the text where it is placed.
Title for an image
It is also good practice to insert a title of an image. This enhances accessibility of your website. The title= code is used to do this, as follows:
<br /> <img src="firefox.jpg" alt="firefox" title="Firefox Logo"/> <br /> |
In this Example hover your mouse of the image and the title will appear.
Link an image
It is possible to create a link for an image using the anchor element and href= attribute, as follows:
<br /> <a href="http://en-gb.www.mozilla.com/en-GB"/><img src="firefox.jpg" alt="firefox" title="Firefox Logo"/></a> <br /> |
In this Example click on the image and the Firefox download webpage will appear. But a horrible blue border has appeared around the linked image. To remove this, use the border= attribute and set it to zero.
<br /> <a href="http://en-gb.www.mozilla.com/en-GB"/><img src="firefox.jpg" alt="firefox" title="Firefox Logo" border="0"/></a> <br /> |
In this Example the horrible blue border has disappeared and the link still works.
Summary of HTML Tips so far
Use small letters throughout your HTML code
Save your webpages using the .html file extension.
Refresh your browser to see the changes that you have made.
Ensure HTML tags are in the correct order.
Ensure HTML code is written in US English.
The front page of a website should be saved as 'index.html'.
Use percentage or the em method to define font sizes.
Use <br /> tags to create whitespace.
Use <td></td> tags to create a blank table cell.
Use to create a horizontal space within text.
Use target="_blank" on a link for it to open up in a new window.
Use id= to place a 'marker' to a heading.
Use href=mailto: to create a link to an email address.
Use <img src="image" /> to insert an image.
Align an image to the top, middle or bottom.
Float an image to avoid white space.
Use width= and height= to adjust the size of images.
Use alt= to provide text in case the image does not load.
Improve accessibility of your website by using title= for images.
Use border="0" to remove the link border from an image.
Summary of HTML Tags
|
<a> |
Anchor Tag for creating links. |
|
|
<a href= |
Reference to other website or web page |
|
|
align= |
Used to align images top, middle or bottom relative to text. |
|
|
<b> |
Bold tag. |
|
|
<body> |
Designates the body of the web page. Must come after the </html> tag. |
|
|
border= |
Used to define the border width around an image or in a table. |
|
|
<br /> |
Break tag. |
|
|
<caption> |
Adds a caption to a Table. |
|
|
<h1> |
Heading tag number from 1 to 6, with h1 having the largest font. |
|
|
height= |
Used within the <img> tag to adjust the height of images. |
|
|
<html> |
Designates the document as a web page. |
|
|
<i> |
Italics tag. |
|
|
id= |
Refers to section within HTML document |
|
|
<img src> |
Inserts an image. |
|
|
mailto: |
used to create a link to an email address. |
|
|
|
Non-breaking space |
|
|
<p> |
Paragraph tag. |
|
|
style= |
Used within the <p> tag to define font type, colour and size. |
|
|
title= |
Used within the <img> tag to improve accessibility of your website. |
|
|
<table> |
Adds a Table to the web page. |
|
|
<td> |
Table data in the table cell. |
|
|
<th> |
Table heading. |
|
|
<tr> |
Defines a Table row. |
|
|
<u> |
Underline tag. |
|
|
width= |
Used within the <img> tag to adjust the width of images. |