Inserting and Adding Images
Adding Images to a Page
Images can be added with the <img/> tag. This tag has NO CLOSING ELEMENT. That is, it is closed with a / at the end of the opening tag.
The <img/> tag MUST include a src attribute like this:
<img src="logo.jpeg"/>
where src stands for "source" and the item in quotations is the name of the image file. The image should be stored in the same folder as the web page on which it is to appear. You may even need to specific the folder that the image is stored in. For example:
"...businessdocs\artwork\logo.jpeg"
Additional Attributes
You can CENTER an image horizontally on the page with the <center></center> tags around it:
<center><img src="logo.jpeg"/></center>
If you put the ALIGN attribute within the image tag, you can wrap text around the image. For example:
<img src="logo.jpeg" align=left/> Our company is based in Dallas, TX, and specializes in making widgets. We always put our customers first and welcome any comments, suggestions or complaints. Please direct any inquiries to our home office, contacting Ms. Shirley Johnson at 555-555-5555.
would result in a page that looked like this:
Images can be added with the <img/> tag. This tag has NO CLOSING ELEMENT. That is, it is closed with a / at the end of the opening tag.
The <img/> tag MUST include a src attribute like this:
<img src="logo.jpeg"/>
where src stands for "source" and the item in quotations is the name of the image file. The image should be stored in the same folder as the web page on which it is to appear. You may even need to specific the folder that the image is stored in. For example:
"...businessdocs\artwork\logo.jpeg"
Additional Attributes
You can CENTER an image horizontally on the page with the <center></center> tags around it:
<center><img src="logo.jpeg"/></center>
If you put the ALIGN attribute within the image tag, you can wrap text around the image. For example:
<img src="logo.jpeg" align=left/> Our company is based in Dallas, TX, and specializes in making widgets. We always put our customers first and welcome any comments, suggestions or complaints. Please direct any inquiries to our home office, contacting Ms. Shirley Johnson at 555-555-5555.
would result in a page that looked like this:
A BORDER can be placed around the image with the border attribute:
<img src="logo.jpeg" border="?"/>
where the ? stands for the size of the border in pixels.
Modern web design anticipates that some users may have difficulty reading accessing the image either because of a computer problem or personal visual impairment. Therefore, it is good practice to include alternate text that will show up should the image fail to do so. In addition, this alternate text can be read by electronic gadgets that can then "speak" the image to individuals without sight. If you hover your mouse over most images on the web, this alternate text will appear.
To add ALTERNATE TEXT, include the following attribute in the image tag:
<img src="logo.jpeg" alt="?"/>
where the ?, placed within the quotations is the alternate text.
Image HEIGHT and WIDTH (in pixels) can be specified for an image. This may be desirable to keep image size appropriate. Pictures that are too large may slow the browser down and frustrate visitors. Applying these attributes looks like this:
<img src="logo.jpeg" width="325" height="218"/>
You can find out the width and height of an image by right-clicking on it and choosing "properties". The data should be listed there.
An image can be set as a BACKGROUND with the background attribute placed within the BODY tag:
<img src="logo.jpeg" border="?"/>
where the ? stands for the size of the border in pixels.
Modern web design anticipates that some users may have difficulty reading accessing the image either because of a computer problem or personal visual impairment. Therefore, it is good practice to include alternate text that will show up should the image fail to do so. In addition, this alternate text can be read by electronic gadgets that can then "speak" the image to individuals without sight. If you hover your mouse over most images on the web, this alternate text will appear.
To add ALTERNATE TEXT, include the following attribute in the image tag:
<img src="logo.jpeg" alt="?"/>
where the ?, placed within the quotations is the alternate text.
Image HEIGHT and WIDTH (in pixels) can be specified for an image. This may be desirable to keep image size appropriate. Pictures that are too large may slow the browser down and frustrate visitors. Applying these attributes looks like this:
<img src="logo.jpeg" width="325" height="218"/>
You can find out the width and height of an image by right-clicking on it and choosing "properties". The data should be listed there.
An image can be set as a BACKGROUND with the background attribute placed within the BODY tag:
NOTES TO CONSIDER:
- Increased image size usually results in slower page loading time.
- Increased picture quality/resolution usually results in slower loading time.
- Multiple pictures on a page will result in a slower loading time.
- Loading time can be shortened by specifying the width and height of the
image in it's tag.