Things you want to know about websites

 

Images

Images are an important part of any presentation, whether online of offline. You will hardly find a webpage that doesn't have images in it.

Inserting images

Inserting images in an html document is easy. Just use the <img> tag.

Img element is an empty element, which means that it doesn't have an opening and closing tag but it has only a single tag.

Example

You can insert an image like that,

<img src="url" alt="alternate text" />

Src attribute gives the url (location) of the image. If the image is in the same directory, then just type the name of the file as source.

Alt attribute

Alt attribute is for alternate text. If you supply this attribute a value (some text), then that text is shown if you move your pointer over the image. This text is also shown if for some reason the image is not loaded.

Example

I am inserting an image by Microsoft, named sunset.gif present on my server in the images directory.

<img src="../images/Sunset.gif" alt="Sunset" border="1"/>

The image is inserted as,

Sunset

Image scaling

If the image you are inserting is large and you want to reduce its dimensions to fit it in the available area, you can sacle it down with height and width attributes.

Example

<img src="url" alt="alternate text" height="200" width="100"/>

will reduce the height to 200 pixels and width to 100 pixels.

Note: This is not an efficient way to scale down your images because it doesn't reduce the file size and it takes the same amount of time to load the small image as it would take to load the bigger image. The better way is to reduce the image size in an image editing software, there by reducing its file size as well.

Align attribute

You can use the align attribute to align (or move) you images to any side of the screen.

Example

<img src="url" alt="alternate text" align="right" />

moves the image to the right side and

<img src="url" alt="alternate text" align="left" />

moves the image to the left side of the screen.


Bookmark or Add to Favourites

Next:

Html-Forms

Related:

Html-Image Maps
Html-Colors

Link to this page :

Copy and paste the following code in an html document to link to this page,