Exercise 3:
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. You are not required to know an imaging program such as Photoshop (very handy though). Free images, available on the web, are perfectly acceptable.
HTML Image Elements
The img tag is an empty element so it does not have a closing tag. It is self closing.
- <img src="image.jpg" />
- alt="alternate text name"
- width="x" height="x" pixels
- title="caption or name" (displays on rollover)
- - Depricated image attributes:
- align="x"
- left, right
- top, texttop, center, middle, bottom
- absmiddle, absbottom, baseline
- hspace="x" vspace="x"
- <br clear="x" />
CSS STYLES: Background images
For tiling or single images in the background of your webpage
- <style> </style>
- selector {property: value;}
- background-image: url(image.jpg);
- background-repeat: repeat-x, repeat-y, or no-repeat
- background-attachment: scroll or fixed
- background-position:
- left, center, right (horizontal)
- top, center, bottom (vertical)
- or pixel values
CSS STYLES: Class Selectors
We will use the class selectors to align our images and put space around them. Define them in the CSS and then use them as an attribute in the img tag.
- <style> </style>
- .class selector {property: value;}
In your CSS define a class style
- float: left, right;
- margin: top, right, bottom, left in pixels
Use the class attribute in your html tags
|
Exercise Requirements
- Experiment with ALL the tags and attributes in creative ways
- You will be primarily evaluated on your depth of exploration
- This is a multiple page exercise! You must show:
- HTML image placement in text
- CSS image placement on page
- Overall tiling background
- Horizontal or vertical tiling page
- Fixed image page
Images
- Scan and manipulate your own
- Use images from Download folder on the class server
- Download free images from the web
- Or use the images from the lecture
Design Process & Final Presentation
- Create a project folder named "YourLastNameE3"
- Create as many HTML documents as you need. Save your document(s) as "YourLastName3a.html", "YourLastName3b.html", "YourLastName3c.html"
- Insert images and format by using the tags.
- Save all HTML docs and images in your project folder
- Review your work in a browser before uploading to the server
- Upload your HTML documents to the school server and view them in a browser. Make sure the images are there.
Evaluation
This exercise is worth 30 points.
- Coding (6)
- Functionality (6)
- Meeting project requirements (6)
- Your effort (9)
- Meeting deadlines (3)
Due Date
Text Reference
- Chapter 7: pg 115 - 123
- Chapter 13: pg 246 - 254
- Review Lecture in Course Content on Blackboard
Online Demos
Useful Links
List of HTML Color Names
Alphabets
Freefotos
Free Background Images
|