1. Cos 125 DAY 15

2. Agenda Left to do 6 Assignments (9 total) One per week 3 Quizzes Capstone projects First Capstone Progress Report OverDue Feb 24 Next Progress report due March 23 (1 week) Assignment #3 Graded 10 A’s, 4 B and 1 C Assignment #4 assigned today Due Tuesday March 23 Exam #3 will March 26 Castro Chaps 1-7 Lecture/discuss Using Images

3. Inserting a Image Determine after what element in your WebPage you want the Image to appear Place cursor in your code after the element Type “image.url” is location of the file http://www.server.com/images/image.gif../images/image.gif images/image.gif image.gif

4. Offering Alternative Text If the image won’t appear, the “alternative text” will alt is REQUIRED for XHTML Can also use title attribute On some browsers “Alt” text will be a mouse over pop-up Examples http://perleybrook.umfk.maine.edu/samples/UsingImages.htm

5. Specify Size of Image Tell the Browser how large the picture is to speed up loading Quick Way Insert image in webpage without dimensions View page and right mouse on image Select properties and determine dimensions Modify img tag with the dimensions

6. Scaling an Image Use new values for height and width attributes CAREFUL –you must maintain aspect ratios or you will distort image Just set height or width and Browser will automatically set the other Can also set to percentage of Browser viewable space height =“ 50%” width = “50%”

7. Thumbnails A thumbnail is a “mini” version of a larger image

8. Making Images “float” You can float images in the text You can move image to the left or to the right relative to text Use after img tag to get text to “fill” left over space Example http://perleybrook.umfk.maine.edu/samples/textfloat.htm

9. Stopping Elements from Wrapping Image You can control how text & other elements “flows” around your images (or right) Next element goes to first available margin on left Next element goes to first available spot where both margins are clear

10. Adding Space around Image Create a buffer around your image

11. Adding Horizontal Rules A horizontal rule is a line across the Web page size=“10” Width=“70%” Align=“left” or “right” or “center” noshade=“noshade”

12. Gee Whiz Tip of the Day The W3C provides a free validation service for xHTML (and HTML) at http://validator.w3.org/

13. Assignment #4 Assignment posted to WebCT Examples are on http://perleybrook.umfk.maine.edu/samples/ http://perleybrook.umfk.maine.edu/samples/ Due Tuesday March 23 You may begin assignment in class In fact I suggest you do