This post is also available in: Romanian
Pictures may be the element you most wish to insert into your web pages other than text. Whether it is a photo or a graphic image, the HTML tag to do it is the same. Here’s an example of the <img> tag with its often used key attributes:
<img src=”images/my” alt=”MyPicture” width=”160″ height=”120″ hspace=”10″ vspace=”10″ align=”left” border=”0″ />
The SRC Attribute You specify the path of the image to be displayed by the <src> attribute. It can be a full URL such as
or a location relative to the web page that displays the image. If the web page is
then the relative path of the same image at the full URL is
If the web page is
then the path of the same image relative to the page becomes
where “../” instructs the webserver to go up one folder level out of myfolder and then into the images folder to obtain the picture.
The ALT Attribute Some browsers provide users the preference of turning off loading images, and your visitors may have chosen to do that. If you do not want to miss out communicating a key message conveyed by an image on your web page, you use the alt attribute to provide the text to be displayed by the visitor’s browser.
The Size Attributes The visitor’s browser will display your web page more quickly if you specify the image’s dimensions by the width and height attributes. You may specify values other than the actual size to scale the image. Normally you should not do this. Scaling up does not improve a picture, and scaling down does not reduce its size.
The ALIGN Attribute If you want text to wrap around the image instead of appearing just before or after, set this attribute to either left or right. Insert the img tag BEFORE the text that should wrap around the image. If you set the attribute value to left, the image appears on the left with the text on its right. Once the text flows past the bottom of the image, it will continue on as usual across the full width of the text column. If you want to break text wrapping before reaching the bottom level of the image and start new text under it, insert the line break tag
<br clear=”all” />
where you want the break to occur.
The Space Attributes Very likely you don’t want the image almost touching the text that wraps around it. You can easily add comfortable space around an image by setting the hspace and vspace attributes.
The BORDER Attributes If you want to add a black border around an image, include this attribute and set it to a number above zero. The value sets the border thickness. You may leave out this attribute or give it a zero value to remove the border. There is a difference between these two options, however. If you use an image as a hyperlink label, leaving out the border attribute will still put a blue border around the image to indicate that it is a link. Setting the attribute to zero removes the blue border.
Several Tips To ensure your web pages load quickly, the first thing you do is to optimize the images. Use the JPEG format for photos and GIF for graphics. Do not make them bigger than necessary. You may enclose an image by the <p> </p> tags to have it well separated from text above and below it. If you simply want to add a horizontal line between blocks of contents to introduce a more visible break, you don’t need to create an image. Just use this HTML tag:
<hr align=”center” width=”100%” size=”1″ noshade />
This adds a horizontal rule, 1-pixel thick, across the full width of the text column, centered and without shading. If you want the width to be 100 pixels, leave out the “%” symbol. The line will be shaded if you leave out the word noshade.