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 browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
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=”baby.png” alt=”Small Baby” />|
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).
HTML Images – Set Height and Width of an Image
The height and width attributes are used to specify the height and width of an image.
The attribute values are specified in pixels by default:
|<img src=”pulpit.jpg” alt=”Pulpit rock” width=”304″ height=”228″ />|
Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).
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.
|IMG stands for “image.”
It announces to the browser that an image will go here on the page. Yes, the image will pop up right where you write in the image tag.
|SRC stands for “source.” This again is an attribute, a command inside a command. The value of the src attribute is the URL of the image you want to display on your page. It’s telling the browser where to go to find the image. Again, it’s best for you to place the images you want to use in the same directory as the page. This way you can call for the image by name alone. If you start to place your images all over the place, you’ll have to start adding directories and sub-directories to the SRC attribute. And at this point, that is way too confusing. Just place the image in the same place as the HTML document that will call for it and then call for the image by name alone. You can get fancy later. Right now, let’s just get it to work.|
|image.gif is the name of the image. Notice it’s following the same type of format as your HTML documents. There is a name (image) then a dot and then there is a suffix (gif).|
|ALT stands for “alternate text”. This tells the browser that if it can’t find the image, then just display this text. It also tells anyone who can’t view your image what the image is about.|
|There are four basic formats you will find on the World Wide Web|
|gif This is pronounced “jif” or “gif” (hard “G”) depending on whom you speak to. I have always said “jif”, like the peanut butter. This is an acronym for Graphics Interchange Format. The format was invented by Compuserve and it’s very popular. The reason is that it’s a simple format. It’s a series of colored picture elements, or dots, known as pixels, that line up to make a picture. Your television’s picture is created much the same way. Browsers can handle this format quite easily.|
|.png .png Pronounced as ‘ping’, this stands for Portable Network Graphic. This is ultimately the replacement for .gif, with partial transparency options, but browser support is sometimes disappointing, so try experimenting but don’t expect miraclesin older browsers! Even some of the newer ones don’t like partial transparency.|
|.jpeg or .jpg|
|.jpeg or .jpg (pronounced “j-peg”) There are two names to denote this format because of the PC and MAC formats allowing 3 and 4 letters after the dot. JPEG is an acronym for Joint Photographic Experts Group, the organization that invented the format. The format is unique in that it uses compression after it’s been created.|
|.bmp (pronounced “bimp”) This is a “bitmap.” You will probably never place a bitmap as an image, although now Internet Explorer browsers allow it. A bitmap is an image that a computer produces and places for you. A counter is an example.
Even though Internet Explorer will allow you to place an image as a BMP, I wouldn’t. No other browsers will be able to display it. Go with .gif or JPEG.