Images and Links


Images
Links



Start out by creating a basic webpage:

<html>
<head>

</head>
<body>

</body>
</html>

Images

To add an image to your webpage, use the tag <img src=" . . . ">. Place the name of the image file between the quotation marks. Make sure that it is the exact filename, with the same capitalization and file type (ex. pic1.gif or myPic.jpg).

<html>
<head>
<title>Images and Links</title>
</head>
<body>

<img src="tyler.jpg">

</body>
</html>
Click here to see an example

It is usually a good idea to store all your images in the same folder as your webpage. If you do this, you can specify the location of your image with just the image name (ex."tyler.jpg").
If you store the image in a subfolder, you must remember to specify the name of the subfolder as well as the name of the image (ex."images/tyler.jpg").

Image Borders

You can use the border attribute of image to add a border to your picture. Set the value of border equal to the width (in pixels) that you want your image border to be.

<html>
<head>
<title>Images and Links</title>
</head>
<body>

<img src="tyler.jpg" border=5>

</body>
</html>
Click here to see an example


Alternate Text

You can use the alt attribute of the image tag to display text if an image on your web page does not appear. This alternate text will also appear in a small box if you leave your cursor on an image.

<html>
<head>
<title>Images and Links</title>
</head>
<body>

<img src="tyler.jpg" alt="Tyler Hall">

</body>
</html>
Click here to see an example of an image with an alt tag
Click here to see an example of an image with an alt tag that did not display

Validation Warning: Alt tags
You must include an alt tag with every one of your images or your webpage will not validate. If you do not wish to include alternate text for your picture, you can use a blank alt tag (alt = " ").

Resizing Images

You can change the size of your image using the height and width attributes. Height and width both specify the size of the image in pixels. Keep in mind that these attributes will not change the actual size of your image, just the size of the image that appears on your website. A very large image will still take a long time to load, even if you use the height and width attributes to resize it.

<html>
<head>
<title>Images and Links</title>
</head>
<body>

<img src="tyler.jpg" width ="50">

</body>
</html>
Click here to see an example

You can also use percentages to resize your images based on the size of the web page. For example, <img src="tyler.jpg" width="15%"> would resize the image to 15% of the page width.

Notice that when you resized your image using width the original proportions were preserved (the image wasn't stretched out). If you use both the height and the width attribute you force your image to that exact size, which may stretch it out.

<html>
<head>
<title>Images and Links</title>
</head>
<body>

<img src="tyler.jpg" width ="100" height="250">

</body>
</html>
Click here to see an example

Image Alignment

You can use the align attribute of image to align your images with other items on your webpage, such as text. Using the values of left or right will wrap text around your image. Using the values top, middle, or bottom will determine where your text begins (at the top, middle, or bottom of the picture.

<html>
<head>
<title>Images and Links</title>
</head>
<body>

<img src="tyler.jpg" align="right">

</body>
</html>
<html>
<head>
<title>Images and Links</title>
</head>
<body>

<img src="tyler.jpg" align="center">

</body>
</html>
<html>
<head>
<title>Images and Links</title>
</head>
<body>

<img src="tyler.jpg" align="bottom">

</body>
</html>
Click here to see an example Click here to see an example Click here to see an example

You can use the hspace and vspace attributes to add blank space around your image. The hspace attribute controls the horizontal space around the image and vspace controls the vertical space around the image. Both attributes should be set equal to the amount of space in pixels.

Background Images

You can use an image as a background for your webpage instead of changing the color. To add a background image you will need to use the background attribute of body instead of bgcolor. Set background equal to the location of the image that you want to use as your background. The image will be tiled on your webpage. Remember to choose an image for your background that will not overwhelm any other images and text that you have on your webpage.

<html>
<head>

</head>
<body background="pic1.jpg">

</body>
</html>
Click here to see an example

Links

Links are used to connect other documents, such as other Webpages or files, to your webpage. To create a link you will use the anchor tag and the href attribute (you must always use the href attribute with the anchor tag). If you want to create a link to another webpage, you will set href equal to the location of the webpage. If you are creating a link to a webpage on the Internet, you must use the entire address (ex. "http://www.uri.edu/"). After the address, close the tag. Anything that follows the anchor tag (text, images, etc.) will be part of the link. To end the link use the </a> tag.

<html>
<head>

</head>
<body>
<a href= "http://www.cs.uri.edu/"> CS Department</a>
</body>
</html>
Click here to see an example

If you want to link to a file (such as another HTML file) you will use the name of the file as the location instead of a web address. The same file location rules discussed for images apply to linked files. For example, if the file page2.html is located in the same folder as the HTML file that you are working on, you can link to it using <a href = "page2.html">My Second Page</a>.

When you click on a link, the linked page will replace the webpage that you are currently looking at. To force the linked page to open in a new window, you can specify a blank target. (Notice that all of the example Webpages open in a new window. This is because each of the links specifies a blank target). To specify the target, use the target attribute of the link and set it equal to _blank. Here is an example:
<a href="http://www.cs.uri.edu" target="_blank">CS Department</a>

Link Colors

The color of links in your webpage will default to blue for a webpage that you haven't visited, purple for a webpage that you have visited, and purple for an active link (a link is active when it is selected). You can change the default colors of the links by using the link, alink (active link), and vlink (visited link) attributes of body. You will specify the color of the links using a hexadecimal code.

<html>
<head>

</head>
<body link="#00CCFF" vlink="#66FF66" alink="FF0066">
<a href= "http://www.cs.uri.edu/"> CS Department</a>
</body>
</html>
Click here to see an example

Using Images as Links

If you want to use an image as a link, add an image tag after the anchor tag instead of (or with) text.

<html>
<head>

</head>
<body>
<a href= "http://www.cs.uri.edu/"> <img src="tyler.jpg"> <br> CS Department </a>
</body>
</html>
Click here to see an example

To remove the border from around the image, set the border attribute of the image equal to 0. Here is an example:
<a href="http://www.cs.uri.edu><img src="tyler.jpg" border=0></a>