Cos 125 DAY 14

Agenda Assignment #3 Graded 11 A’s, 5 non-submits Problems include Not uploading assignment sheet in WebCT Not uploading graphics to web server Left to do 6 Assignments (9 total) One per week 3 Quizzes Capstone projects Second Capstone Progress Report Due Mar 24 Assignment #4 assigned Due Thursday, March 24 Exam #3 will be on March 24 Castro Chaps 1-7 Lecture/discuss Using Images

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

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

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

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

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

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

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

Adding Space around Image Create a buffer around your image

Aligning images 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

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”

Gee Whiz Tip of the Day The W3C provides a free validation service for xHTML (and HTML) at

Assignment #4 Assignment posted to WebCT Examples are on Due Thursday, March 24 You may begin assignment in class In fact I suggest you do