never forget
Web Statistics

Acura Div Layout

author: Uday

10/27/2007 07:28 AM

10/27/2007 02:35 AM

image tutorial

Adding pictures is easy! This tutorial will go through the basic tags of adding pictures and manipulating how they will appear.

To add a picture:

<img src="URL_OF_PIC">

To make a picture link:

<a href="URL_OF_LINK"><img src="URL_OF_PIC"></a>

To Change Dimensions of a Picture:

This will change your height and keep the picture proportional:

<img src="URL_OF_PIC" height="XXX">

This will change your height and keep the picture proportional:

<img src="URL_OF_PIC" width="XXX">

This will change both height and width:

<img src="URL_OF_PIC" width="XXX" height="XXX">

The better way to do this is with CSS:

<img src="URL_OF_PIC" style="width:XXXpx; height:XXXpx;">

Image Borders

<img src="URL_OF_PIC" border="X">

The problem with that method is that the width will vary by browser. The better way to do it is with CSS:

<img src="URL_OF_PIC" style="border:Xpx STYLE COLOR">

Using that method, not only did we give our border a width by defining the X with a number, but we also gave it a style and a color. Here are the styles you can use with some example to help you visualize this:

MySpaceProDesigns Picture Tutorial

style="border:3px solid white;"

MySpaceProDesigns Picture Tutorial

style="border:4px dashed blue;"

MySpaceProDesigns Picture Tutorial

style="border:5px dotted green;"

MySpaceProDesigns Picture Tutorial

style="border:6px double orange;"

MySpaceProDesigns Picture Tutorial

style="border:3px inset white;"

MySpaceProDesigns Picture Tutorial

style="border:4px outset blue;"

MySpaceProDesigns Picture Tutorial

style="border:5px groove green;"

MySpaceProDesigns Picture Tutorial

style="border:6px ridge orange;"

To make a picture marquee:

<marquee><img src="URL_OF_PIC"></marquee>

An important note about this is that marquee slow down load time of your page (which is why I'm not doing one to show you an example). If you want to learn more about marquee properties, check out marquee tutorial.

Text wrapping:

A common question is how to wrap text around your pictures. Please read our section on floating elements to learn more.

Comments

View Comments (8) •  Leave Comment  •  Support Forum