Images in html

Images

You can add images to your page by adding a following HTML code:

<img src="image address" />

Address of image from previous code can be defined in a few different ways:

src="rabbit.png"  - if image is found in same directory like HTML page

src="...../rabbit.png" - if image is found in directory that consists HTML page directory also

src="../pictures/rabbit.png" - if image is found in directory "pictures" that consists HTML page directory

Alternative text/attribute

<img src="brokenlink/rabbit.png" alt="rabbit" />

In cases when image could not be loaded in browser, alternative text will be shown inside image. In our case, that is a word rabbit.

Image formatting

- Height and width

<img src="rabbit.png" height="100" width="100">

If you want to define image size instead of browser, you should use code above. This can be useful when your page starts falling apart due to image and text size slow loading.

- Vertical and horizontal alignment

align (horizontal)

-right

-left

-center

valign (vertical)

-top

-bottom

-center

This is a list of possible image alignments. You can see how it looks like in practice on following code:

<p>This is a text</p>

<p>

<img src="rabbit.png" align="right">

this is a text that will go right under the image

</p>

Rabbit

Linked images

<a href="http://www.psd-wordpress.blogspot.com" target="_blank>

<img src="rabbit.png">

</a>

When using this code browser will show up the image that will lead to tasked website when clicked on it.

<a href="http://www.psd-wordpress.blogspot.com" target="_blank>

<img src="rabbit.png" border="0">

</a>

With this code you have set that there will be no borders around image. If you want to use frame for your image just use another number instead of 0.

<a href="flower.gif">

<img src="thmb_flower.gif">

</a>

This code will show smaller version of your image (called thumbnail) that will be linked to a bigger page. You need to create smaller thumbnail image, of course.

Thumbnails could be used so that page is running faster or because it seems nicer with thumbnail instead of regular size image. Thumbnail can be linked to a full quality picture.

Images as links

<a href="http://www.psd-wordpress.blogspot.com">

<img src="flower.png"> </a>

Code example that will convert image to a link to desired page.

<a href="flower.png"> <img src="thmb_flower.png"> </a>

Code example that will show thumbnail image which links to a bigger image.