1. Cos 125 DAY 14

2. Agenda Assignment #3 Graded 7 A’s, 2 B’s, 1 C Problems are mostly caused by not following the instructions Assignment 4 Posted Due March 25 Left to do 6 Assignments (9 total) One per week 2 Quizzes Capstone projects Second Capstone Progress Report Due April 4 Exam #3 will be on March 25 Castro Chaps 1-7 There will no class on March 28 Lecture/discuss Using Images http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_examples/loca lindex.html#c5 http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_examples/loca lindex.html#c5

3. More PSP tricks http://www.mardiweb.com/web/psp5/ http://psptips.com/6/ http://www.pinoy7.com/ http://www.pixel2life.com/tutorials/paint_shop _pro/animation/ http://www.pixel2life.com/tutorials/paint_shop _pro/animation/ http://arizonakate.com/

4. 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 Hint To place image on a new line use before

5. 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

6. 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

7. 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%”

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

9. 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

10. 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

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

12. Aligning images NOTE: Not all directions work in all browsers Used to align images with text Where direction is TEXTTOP Top of image to top of text TOP Top of image to top of tallest element MIDDLE Middle of image with base of text ABSMIDDLE Middle of image to middle of tallest element BOTTOM Bottom of image to baseline of text ABSBOTTOM Bottom of image to bottom of tallest element

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

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

15. Assignment #4 Assignment posted to WebCT Examples are on http://perleybrook.umfk.maine.edu/samples/ http://perleybrook.umfk.maine.edu/classes/cos125 /HTML6ed_examples/localindex.html#c5 http://perleybrook.umfk.maine.edu/classes/cos125 /HTML6ed_examples/localindex.html#c5 Due Monday, March 25 You may begin assignment in class In fact I suggest you do