Exercise Three

Exercise 3: Adding 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. There are also some free images on the MAT Server in our Class Folder.

Example of a High Res and Low Res file -- same image - different loading times

Exercise Requirements

Watch: the step by step Videos Lectures for Exercise 3.
Read: Chapter 7 Adding Images in Learning Web Design. You do not have to test yourself.
Folder Name: Ex3

Number of Pages/Documents Required for Exercise: 8
Minimal text content on most pages. Mostly you will be working with how to add images to your pages in several different ways.

Text Content: Write about the images you are using.

Index.html Add small images into text.
Page2.html Use HTML coding to add the align left or right attribute and values to the img tag
Page3.html Use CSS to align with float left or right. Use margin to add space between your images and your text.
Page4.html, Page5.html, Page6.html Use all the variables in background images with tiling - one page for each (overall tiling, vertical tiling, horizontal tiling). Add text to page and work with CSS color styles, margin and alignment to make the text stand out.
Page7.html Position a single image in the background using CSS. Add text to page.
Page8.html Add an image in the background with CSS. Add a wide image into the body content area. Use CSS in the Document styles to make the images responsive to browser window sizes. Test to see if it works by changing your browser window size.

Review the Exercise 3 demo pages and video pages for more information.

Points: 30

Using the img Element, Plus the Attributes and Values for this exercise.

The Image Tag
img

attribute:
src

attribute:
alt

attribute:
title

attribute:
width

attribute:
height

attribute:
align

value:
left
right

NOTE: There is no center alignment. There are other ways to make an image center.

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.

Add the next set of attributes to give the computer reader text to read (alt), to set the width and height of your image (width, height), and to give it a title to display when you rollover the image in the browser (title).

alt="alternate text name"
width="#px" (number of pixels wide)
height="#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)

Keep your images inside an images folder (inside your exercise folder). In the Example below I am looking for the image inside my 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" >

BR Tag
br

attribute:
clear

value:
left
right
all

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 - Add to Your CSS Document Files

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.

property:
float

value:
left
right

property:
margin

value:
add 4 number amounts for
Top
Right
Bottom
Left

Use of the float property

This is the property and value to add to align your images (or other content) to the left or right. There is NO center option for float.

EXAMPLE:
img {float: left;}

EXAMPLE 2:
img {float: left; margin: 10px 10px 10px 0;}

Note: Adjust the amount of margin you use to make the page look best.

Or Create a Class and use it to style only specific tags.

EXAMPLE Using a Class Selector in your CSS Document styles (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

Property
background-image:

Value
url(image.jpg);

EXAMPLE of Overall Tiling. Add in the images folder that your images should be in. This is goiving the browser the directions to find your images to use. There is no space between the url and the opening parenthesis.

<style type="text/css"> body {background-image: url(images/cat.jpg); } </style>

Horizontal or Vertical Background Tiling

You could use this CSS to make a border that adds a design element to your page.

NOTE: You can keep adding more styles into your Document Styles. Just add them between the style tags - curly braces.

Property
background-repeat:

Value Options
repeat-x (horizontal)
repeat-y (vertical)

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. Use the same Property background-repeat

Property
background-repeat:

Value Option
no-repeat;

Property
background-attachment:

Value Options
fixed;
scrolling;

Property
background-position:

Value Options
center
top
bottom
left
right
fixed pixel amounts
(you need two settings)

EXAMPLE of Single Background Use:

<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

Adding a CSS style that makes the background image adjust to cover the entire background.

Property
background-size:

Value
cover;

Property
height:

Value
100%;

Use an image that is big enough to cover the background without getting pixelated. But not too big.

Adding CSS Styles to make Placed Images Responsive

Create an HTML page with a wide image placed on the page in the HTML coding or body area (see the Demos for an example). Do not add a specific width in the html coding for this image. The CSS will tell the image what width to be to fit in the area available.

Add this to your CSS Document styles:

EXAMPLE of Responsive Image :

<style type="text/css"> img { max-width: 100%; height: auto; } </style>

Try adjusting the size of your browser window to see the image adjust to the space available. Use a wider image so you can see the adjustment happen.

Exercise Three Grading Rubric
Item/Points	1-2	3-4	5-6
Coding / Errors	Some	Mostly Correct	All correct
Function	Some	Most	All
Requirements	Some	Most	All
Effort	Minimal	Most Requirements	Above & Beyond
Design & Creativity	Basic	Average Amount	Above & Beyond

MAT 125: Exercises & Projects