Exercise 4: Images and Graphics
In this Exercise we will learn the basics of how to use images and graphics effectively in your web pages. Some basic information about image manipulation can be found on the Saving Images for Web page. I have also created a pdf file with step-by-step instructions on Resizing Images for Web Use. You are not required to know an imaging program such as Photoshop (very handy though). Free images, available on the web, are perfectly acceptable.
Example of a High Res and Low Res file -- same image - different loading times
HTML Image Elements
The img tag is an empty element so it does not have a closing tag.
Use the src attribute to look for or source your image.
<img src="image.jpg">
Add the next attributes to give the computer reader text to read, to set the width and height of your image, and to give it a title to display when you rollover the image in the browser.
- alt="alternate text name"
- width="#px" (number of pixels wide)
- heigth="#px" (number of pixels tall)
- title="caption or name"
EXAMPLE 1:
<img src="images/cat.jpg"
alt="picture of my kitty cat"
width="180px"
height="240px"
title="this is my cat">
Using HTML Image (img) Alignment Attributes
You can use these HTML attributes to align your image to the left or right (there is no center alignment)
- align="left or right" (choose one)
I keep my images inside an images folder (inside my exercise folder) so in the Example below I am looking for the image inside that images folder (images/cat.jpg)
EXAMPLE 2:
<img src="images/cat.jpg"
alt="picture of my kitty cat"
width="180px"
height="240px"
title="this is my cat"
align="right"
More Uses for the BR tag
When you align your image to the left or right, the text underneath it will flow up next to the image. Use the BR element with the clear attribute to change the flow of text or images. The text or images below this tag and one of the clear attributes will start the content underneath the image. Also works when you use the float property in CSS. See below...
- clear="left", "right" or "all" (choose one)
EXAMPLE:
<br clear="all">
Using CSS to Align Your Images
CSS Document Styles
Add these styles in the HEAD of your HTML Document. Use them to align the images you are using in your page content. If you want ALL your images to do exactly the same thing, add these properties and values to your IMG selector.
If you want to use different alignment and spacing on your images, create some "classes" that you can use multiple times per page. In that case, you make up your own selector name. I will show an example of each.
<style type="text/css"> </style>
This is the property and value to add to align your images (or other content) to the left or right.
- float: left or right; (choose one)
- margin: 10px 15px 0 5px (the first number is for the top, then right, bottom and left)
EXAMPLE Adding Float to the IMG tag:
img {float: right; margin: 10px 15px 0 5px;}
Note: You can use whatever amount of margin works to make the page look best.
Or Create a Class and use it.
EXAMPLE Using a Class Selector (it starts with a period)
.goleft {float: left; margin: 0 0 10px 10px;}
The class is then added to an HTML tag (or several) that is between the body tags.
EXAMPLE using the Class:
<img src="images/cat.jpg"
class="goleft"
alt="picture of my kitty cat">
Using CSS to Add Background Images to your HTML Page
Overall Background Tiling
Use this CSS for the most simple overall tiling of an image in your background (like a repeating pattern). It just references a background-image and looks for the image to display. Add in to your styles
background-image: url(images/cat.jpg);
EXAMPLE of Overall Tiling:
<style type="text/css">
body {background-image: url(images/cat.jpg); }
</style>
NOTE: You can keep adding more styles into your Document Styles. Just add them between the style tags.
Vertical Background Tiling
Use this CSS to make a border that adds a design element to your page.
background-repeat: repeat-x;
EXAMPLE of Horizontal Tiling:
<style type="text/css">
body {background-image: url(images/cat.jpg);
background-repeat: repeat-x; }
</style>
For Vertical Tiling, change the repeat to y and use that in your styles instead
background-repeat: repeat-y;
Using a Single Background Image
Make a few changes, and add a little more CSS to use a single background image on your page.
background-repeat: no-repeat;
background-attachment: scroll or fixed
background-position:
left, center, right (horizontal - choose one and...)
top, center, bottom (vertical - choose one of these as well)
or use pixel values (for one or both)
EXAMPLE of :
<style type="text/css">
body {background-image: url(images/cat.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
/* The center center position puts my image in the middle of the page */
}
</style>
Try different positions for your single image. Figure out what works best position-wise or if the design should scroll with the text, or remain in one place.
One background-image per page at this time.
You can also add a background image to a div and other tags