HTML Part 5: Image Attributes

RSS Newsfeed
for your site

DW News
Calendar
DW Forum

Right click on button and copy shortcut

Reminder

Remember to book mark this site!

HTML stands for HyperText Markup Language

Part 5: Image Attributes

There are main attributes we can add to the image tag which describe or alter the appearance of the image.

ALIGN
One we already touched on is the align tag. When used with the image it allows the image to be oriented in some horizontal location on the page in relationship to the text, or with slight vertical adjustments. Typical align values are right, center, left, top, middle.
WIDTH
The width tag will tell the browser how wide to display the image. This will set the placeholder for hte image as it loads, and/or can be used to adjust the size the image is displayed at on your page.
The numbers we use for width are pixels. For comparison, most monitors are 800 pixels across and 600 down. You can also use percentages, where 100% would be full width.
USAGE
In the code below, align and width tags have been added to the image as attributes of the image in the code.

<html> <head> <title> </title> </head> <font color="#ffffff"> <body background="http://www.porshiana.com/water.jpg"> <h1 align="center"> My very first html page</h1> <font size="6">Welcome to my html page <br> </center> where I am showing my html skills</center> <p align="right"> <font size="4"><b> I want to learn <i>everything</i> I can about html</p> <div align="left"> So I can make <u>cool</u> web pages</div> <img src="http://www.porshiana.com/waterimage.jpg" align="right" width="400"> </font> </body> </html>

Let's go over a few codes
- height - the height of the image
- width - the width of the image
- align - the horizontal alignment of the image
- top----------aligns the text with the top of the picture
- bottom-------aligns text with bottom of picture
- middle-------aligns the text with the middle of the image
- right--------aligns image at right margin, and text will wrap on the left side of it
- left---------aligns picture at the left margin, and text will wrap on the right of it
- hspace should be the amount of space you want on the sides your picture in pixels
- vspace should be the amount of space you want on the top and bottom of your picture in pixels
Let's put some more of this into our code

<html> <head> <title> </title> </head> <body background="http://www.porshiana.com/water.jpg"> <font color="#ffffff"> <h1 align="center"> My very first html page</h1> <font size="6"><b>Welcome to my html page <br> <center> where I am showing my html skills</center> <p align="right"><b> <font size="4"> I want to learn eveything I can about html</p> <div align="left"> So I can make cool web pages</div> <img src="http://www.porshiana.com/waterimage.jpg" align="right" height="300"> If I learn how to use a image editor like adobe photoshop or jasc paint shop pro, I will be able to create pictures like these too. Then I could design entire pages. Knowing html and having an image editor are the basic requirements for web developement. I hope you enjoy my very first html page</b> </font> </body> </html>

Save your html and view it
Once again, code does not have to be memorized, you will become more familiar with it as you use it.

There are two more codes regarding images
ALT
The alternate attribute is Alt="" such as

<img src="http://www.porshiana.com/waterimage.jpg" alt="island">

This code is used to display the word "island" should your picture not show up for some reason. This works out well for people who are visually impared or use text only browsers.
BORDER
The other code is border="number". This border code is used when you link the picture to a page, as we will learn to do in the next lesson. It can be used to add the border around an image that is unlinked too.

When you are ready we can move on to lesson 6, links.