Codes for image display
Displaying images on a web page is not as difficult as it would seem. A very basic code will display any image from virtually any web site in the world:
It is simply a matter of placing the image on the page so it displays at the desired coordinates.
Align an image
float property sets the alignment of the image:
<img src="http://tealmermaid.com/includes/css-image.png" style="float: left; margin-left: 5px; margin-bottom: 5px;">
<img src="http://tealmermaid.com/includes/css-image.png" style="float: right; margin-left: 5px; margin-bottom: 5px;">
Important: You will need to "turn off"
float after using it with the following code.
<p style="clear: both;">
Resizing an image
width property can be added to make your image wider or narrower. The
height property can be added to make your image taller or shorter. This can be expressed as a percentage or in pixels. A percentage is a better choice when aligning multiple images at once.
This example is 300px wide x 300px tall. The codes will resize it to be respectively 200px wide x 200px tall (smaller) and 400px wide x 400px tall (larger).
<img src="http://tealmermaid.com/includes/css-image.png" style="width: 200px; height: 200px;">
<img src="http://tealmermaid.com/includes/css-image.png" style="width: 400px; height: 400px;">
Note: As you can see, it is generally recommended to start with a large image to resize smaller instead of trying to resize a small image to be larger. Images get blurry when the pixels are stretched.
Captions under an image
If you are like most coders, you will want to have a caption under your image. This code will create a centered caption underneath the image.
<p style="float: center; width: 300px; margin-left: 5px; margin-bottom: 5px; text-align: center; font-size: 8pt;">
<img src="http://tealmermaid.com/includes/css-image.png">Your caption here</p>
Your caption here
alt="text" property displays a text description of the image. This is most useful for the visually-impaired. You can see the
alt text by hovering your cursor over the image.
<img src="http://tealmermaid.com/includes/css-image.png" alt="Display images neatly">
What is hotlinking?
There is one caveat to displaying images on your web page: it must be your image. You cannot simply link to someone else's image (you don't own other people's images). You may have noticed that in my examples, the URL for all the images begins with
http://tealmermaid.com. That means it is hosted on this domain here (tealmermaid.com).
Why is it bad to hotlink an image? For one, it uses someone else's bandwidth. This will cost them an extra fee each month. Additionally, if you hotlink another image, you don't know what image will appear. It could simply be an image reprimanding you for stealing the image (this example is from one of my other sites).
It also could be something inappropriate for public display. Don't risk it. Only link to your own hosted images.
Note: If your site is in an affiliate program such as Amazon, as part of the affiliate agreement you will have their permission to hotlink their images.