Placing images on your Web page is a sure way to dress it up and make it interesting to others.
Before you can do this, you must have an image ready. It must be in either .gif (Graphics Interchange Format) or .jpg (Joint Photographic Experts Group) format.
The image element (img) is not a block-level element and does not require a closing tag. It does not contain any content.
The / within the tag acts as the closer.
The image element tells the browser where to place an image on the page. It also tells the browser where to get the image; the attribute source.(src="locationand/or image name").
Important note: The image is not in HTML file. The image is a separate file. The HTML merely tells the browser where to get the file and where to put it on the page. The browser will use several different files (like gif, jpeg, css,) to build a page.
Steps to Success
- Position the cursor over the image below.
- Right-click the mouse and a shortcut menu appears.
-
Click Save Picture As to display the Save Picture dialog box.
-
In the File name, the file name image1.gif, will appear.
In the Save as type, the file type will be GIF image.
Most images for the web are JPEGs, GIFs or PNGs.
- In Save in text box at the top of the screen, select the location in which you saved. We will save it in the images folder inside the steps folder.
The image will be stored in this location, ready for you to use. - Open table.html from the steps folder.
Open with Notepad.
Position the cursor just after the </table> tag
Press Enter to move the cursor to the next line. - Type in following HTML (or copy and paste)
<p><img src="images/image1.gif" alt="new image" border="0" /></p>The HTML tells the browser to look in the folder called images and get the file image1.gif src="images/image1.gif" - Save and preview in a browser to see the results.
The image you selected should appear on your Web page under the table.
If you want a border, you can indicate the thickness of the border by changing border attribute to a positive number, "1", "2", "3", and so on. The greater the number the thicker the border.
| The Image Tag and its Attributes | |
| img: | HTML tag for inserting an image <img> |
| src: |
Required attribute. Indicates the location of your image file.
The file name and extension (.gif or .jpg) must be within quotation
marks. <img src="image1.jpg"> |
| alt: |
This is the text that will display if the graphic cannot load
on the visitor's screen. Specifying alternative text for a graphic
helps convey content to those who are visually impaired, those who use
speech synthesizers, and those on computers which cannot display
graphics. <img src="image1.jpg" alt="new image"> |
| border="0": | Indicates
no border around the image. If a border is desired, indicate
the thickness by changing 0 to a number. The greater the number,
the thicker the border. <img src="image1.jpg" alt="new image" border="0"> |
| align: | Set
the alignment of the graphic on the page. Without this attribute,
the graphic will align left. <img src="image1.jpg" alt="new image" border="0" align="center"> |