HTML Old School

Images

Inserting Image into HTML Document

<img src="img_file.jpg" width="800" height="600" alt="alternative text">

 

 

Image Tag Attributes

1. SRC

relative URL to image: src="../images/nature.jpg"
absolute URL to image: src="http://www.foo.com/html/basics/images/nature.jpg"

 

Parts of absolute path:

  • http:// -protocol name
  • www.foo.com -server name
  • /html/basics/images/nature.jpg -path in directory structure

 

Example with relative path: 0400img_rel_url.html

Example with absolute path: 0401img_abs_url.html

 

2. WIDTH and HEIGHT

Browser always calculate the width and height of the image. But if we define it with WIDTH and HEIGHT attributes browser will show image in those dimensions. Also if we put these tags browser will load the image faster. Width and height are in pixels but don't write px.

Decreased width and height: 0402img_decreased.html

Width and height can be expressed in percent, too.

<img src="img_file.jpg" width="100%" height="100%" alt="alternative text">

The percent is the width and height of browser window. In the next example try to change browser window and see what haeppens with image.

Percent dimensions: 0404img_percent.html

Trick with red 1px dot: 0405img_reddot.html

 

3. ALT

This attribute define alternative text. If the src URL broken or image don't exists the alternative text will be shown.

In the next example I made an error intentionally.

Example: 0403img_broken.html

 

4. BORDER

<img src="../images/marioicon.png" width="110" height="105" border="5">

 where 5 means 5px (pixels). The border color is black. Browser's default is 0px.

Example with 5px black border and without border: 0406img_border.html

 This attribute is obsolete. Use CSS border: 5px solid red

 

 5. ALIGN

- for text alignment

 <img src="../images/marioicon.png" width="110" height="105" align="middle">

 This attribute is obsolete. Use CSS float: right

 

6. VSAPCE and HSPACE

 To define margin around the image use VSPACE and HSPACE attributes.

 <img src="../images/marioicon.png" width="110" height="105" vspace="10" hspace="30">

 where 10 and 30 are pixels. This attribute is obsolete.

 Text wrapping around image. Use ALIGN, VSPACE and HSPACE attributes. Example: 0407img_vspace_hspace.html

 

Old trick with 1 pixel image gif

To create spaces in your HTML document use 1px, transparent gif or png image.

See example below!

1px transparent gif example: 0408img_1px_gif.html

 

Funny stuffs

Now when you are able to put image into HTMl documet be careful. Not every image is nice :).

Ugly.jpg 0409img_ugly.html

 

Also animated gif's can be inserted.

Snowman :) 0410img_snowman.html