HTML Images
Images make up a large part of the web - most websites contain images. HTML makes it very easy for you to embed images into your web page.
To embed an image into a web page, the image first needs to exist in either .jpg, .gif, or .png format. You can create images in an image editor (such as Adobe Photoshop) and save them in the correct format.
Once you've created an image, you need to embed it into your web page. To embed the image into your web page, use the
Example of Image Usage
HTML Code:
<*img src="http://bethebutterfly.files.wordpress.com/2010/02/tiger-growl.jpg" width="200" height="200" alt="Smile" /*>
Results:
The img above contains a number of attributes. These attributes tell the browser all about the image and how to display it. Here's an explanation of these attributes:
| src | Required attribute. This is the path to the image. It can be either an absolute path, or a relative path (remember these terms from our last lesson?) |
| width | Optional attribute (but recommended). This specifies the width to display the image. If the actual image is wider, it will shrink to the dimensions you specify here. Likewise, if the actual image is smaller it will expand to your dimensions. I don't recommend specifying a different size for the image, as it will lose quality. It's better to make sure the image is the correct size to start with. |
| height | Optional attribute (but recommended). This specifies the height to display the image. This attribute works similar to the width. |
| alt | Alternate text. This specifies text to be used in case the browser/user agent can't render the image. |
Image Alignment
You can determine how your images will be aligned, relative to the other content on the page (such as a paragraph of text). You do this using the align attribute.
HTML Code:
<*img src="http://bethebutterfly.files.wordpress.com/2010/02/tiger-growl.jpg"
width="200" height="200" alt="Smile" align="right"/*>
Here is a paragraph of text to demonstrate HTML images and how
they can be aligned to the right of a paragraph (or paragraphs)
if you so desire.<*/p> <*/p>This can be used to produce
some nice layout effects, especially if you have a lot of text,
and it runs right past the image.<*/p><*p> Otherwise,
the image will just hang below the text and may look funny.
Results:
Here is a paragraph of text to demonstrate HTML images and how
they can be aligned to the right of a paragraph (or paragraphs)
if you so desire.
some nice layout effects, especially if you have a lot of text,
and it runs right past the image.
Otherwise,
the image will just hang below the text and may look funny.
Image Links
You can make your images "clickable" so that when a user clicks the image, it opens another URL. You do this by simply wrapping the image with hyperlink code.
HTML Code:
<*a href="http://dkdashinghtml1.blogspot.com/">
<*img src="http://bethebutterfly.files.wordpress.com/2010/02/tiger-growl.jpg"
width="100" height="100" alt="Smile" />
<*/a>
Results:
Removing the Border
You might notice that this has created a border around the image. This is default behaviour for most browsers. If you don't want the border, specify border="0".
HTML Code:
<*a href="http://dkdashinghtml1.blogspot.com/">
<*img src="http://bethebutterfly.files.wordpress.com/2010/02/tiger-growl.jpg"
width="100" height="100" alt="Smile" border="0" />
<*/a>
Results:
HTML Images - The <*img> Tag and the Src Attribute
In HTML, images are defined with the <*img> tag.
The <*img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
Syntax for defining an image:
<*img src="url" alt="some_text"/>
The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on "http://dkdashinghtml1.blogspot.com/" has the URL: http://bethebutterfly.files.wordpress.com/2010/02/tiger-growl.jpg.
The browser displays the image where the
HTML Images - The Alt Attribute
The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The value of the alt attribute is an author-defined text:
<*img src="boat.gif" alt="Big Boat" />
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
Basic Notes - Useful Tips
Note: If an HTML file contains ten images - eleven files are required to display the page right. Loading images take time, so my best advice is: Use images carefully.
Note: When a web page is loaded, it is the browser, at that moment, that actually gets the image from a web server and inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.
