Configuring Images
In the last step, you added images to your web page. In this step, you'll learn different ways to change your images. First, you'll learn how to align your images, then how to add borders, and picture messages, and finally how to make an image into a link.
Aligning Images
Images can be aligned much the way text can be. They can be put only at the left or only at the right. Aligning images can be very useful, especially if you're putting an image with some text. In the last step, you saw this example:
Your Page in HTML looks something like this . For this example the text color is set to purple and icon.gif is a file on your computer:
<html>
<head><title></title></head>
<body text="#FF00FF"> <p>This is my first web page. I'm learning how to place images on my page. Here is an image for you to look at: <img src="icon.gif">. See I just put the picture in the text.</p>
</body>
</html>
This results in the reader seeing this:
This is my first web page. I'm learning how to place images on my page. Here is an image for you to look at:
. See I just put the picture in the text.
Now if the image was aligned (say to the left) then the third line wouldn't move down the way it did above. Instead the image would be on the left side of the text and the text would just go around the image.
Your Page in HTML looks something like this . For this example the text color is set to purple and icon.gif is a file on your computer:
<html>
<head><title></title></head>
<body text="#FF00FF"> <p><img src="icon.gif" align="left">This is my first web page. I'm learning how to place images on my page. Here is an image for you to look at. See I just put the picture in the text.</p>
</body>
</html>
This results in the reader seeing this:
To align an image, just add align="left" (or align="right") after the name of the image to place it on the side of the text. This image can be aligned to the right or the left, but it can not be aligned in the center. The <img src="icon.gif" align="left"> can be placed anywhere on your web page.
Borders
You can also add a border around your image to make it stand out more by adding border="somevalue" in between the img and src.
Your Page in HTML looks something like this . For this example the text color is set to purple and icon.gif is a file on your computer:
<html>
<head><title></title></head>
<body text="#FF00FF"> <p><img border="1" src="icon.gif" align="left">This is my first web page. I'm learning how to place images on my page. Here is an image for you to look at. See I just put the picture in the text.</p>
</body>
</html>
This results in the reader seeing this:
The border can be used with or without the alignment (it could also read <img border="1" src="icon.gif">). The larger the number you put in the place of anyvalue, the thicker the border will be. The border will be the same color as your text.
Picture Messages
Picture messages are a small message that pops up inside a yellow square when a reader places their mouse over an image. Picture messages are created by adding alt="yourmessagehere" inside the picture line.
Your Page in HTML looks something like this . For this example the text color is set to purple and icon.gif is a file on your computer:
<html>
<head><title></title></head>
<body text="#FF00FF"> <p><img border="1" src="icon.gif" alt="This is the EMuseum icon." align="left">This is my first web page. I'm learning how to place images on my page. Here is an image for you to look at. See I just put the picture in the text.</p>
</body>
</html>
This results in the reader seeing this:
Like the border, the alt statement can be used even if you don't align the picture or use a border. This is useful for captioning pictures or giving the reader a message.
Picture as Links
Your Page in HTML looks something like this . For this example the text color is set to purple and icon.gif is a file on your computer:
<html>
<head><title></title></head>
<body text="#FF00FF"> <p><a href=""><img src="icon.gif" alt="Click here to go to the EMuseum." align="right"></a>This is my first web page. I'm learning how to place images on my page. Here is an image for you to look at. See I just put the picture in the text.</p>
</body>
</html>
This results in the reader seeing this:
If you clicked on the image now, it would take you to the EMuseum homepage. The image information goes inside of the <a href="someaddress"></a> like this
<a href="someaddress"><img src="somepicture.gif"> </a>. You can use alignment, picture messages, and borders in your image statement too.
