October 22, 2011

Inserting an Image

When inserting images in a webpage, they have to be in a particular format. Images in Windows Bitmap file format (BMP) or Macintosh Picture File (PICT) may not be rendered or displayed by the browsers. For that reason, graphics must be in a specific format so that browser can understand and display it in your webpage. The most commonly used image file formats in designing webpages and understood by the browsers are the GIF (Graphics Interchange Format), PNG (Portable Network Graphics) and JPEG (Joint Photographic Experts Group).

The code used to display image in your webpage is <img>, which means image. To keep our files organized, place the image you want to use in a directory named images. Let say your image is called “pix.jpeg”, the code to be used to insert that image into your webpage is:

<html>
<head>
<title>Images</title>
</head>
<body>

<img src="images/pix.jpg" alt=”pix” title="pix
description" />

</body>
</html>

That code that you have keyed in a while ago will be displayed by the browser this way:

About the code:
  • The <img> tag is used to display image in your browser.
  • The src attribute means “source”, you have to put here the location, the filename and extension of the image you want to display in your browser.
  • The alt attribute stands for “alternate text”, it is used to describe the image for visitor who browse with images turned off, or for those who are not able to see your images. It also gives information to the search engines about what the image is all about.  This attribute is a must, so you have to include it for every image you use.

NOTE: XHTML demands to close all empty elements with “/”. Empty elements include img, br, hr, input, link and more.

1 comments:

Mommy Maye said...

Thanks for this. You know I'm also learning how to manipulate the html especially that I have blogs now. :)