Cos 125

Document Sample
Cos 125 Powered By Docstoc
					Cos 125
  DAY 14
   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
More PSP tricks
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 <img src=“image.url”/>
   “image.url” is location of the file
     ../images/image.gif
     images/image.gif
     image.gif

   Hint
       To place image on a new line use <br/> before <img …/>
Offering Alternative Text

   If the image won’t appear, the “alternative text” will
   <img src=“cat.gif” alt=“Picture of a cat”/>
   alt is REQUIRED for XHTML
   Can also use title attribute
   On some browsers “Alt” text will be a mouse over
   Examples
Specify Size of Image

   Tell the Browser how large the picture is to speed
    up loading
   <img src=“image.gif” alt=“a picture” height=“100”
    width=“100” />
   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
   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%”
   A thumbnail is a “mini” version of a larger
   <a href=“large.jpg”><image src=“mini.jpg”
    alt=“A thumbnail” height = “50” /></a>
Making Images “float”
   You can float images in the text
   You can move image to the left or to the right
    relative to text
   <img src=“image.gif” align=“right”>
   Use <p></p> 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
   <br clear=“left”/> (or right)
       Next element goes to first available margin on left
   <br clear=“all”/>
       Next element goes to first available spot where
        both margins are clear
Adding Space around Image
   Create a buffer around your image
   <img src=“image.gif” alt=“a picture”
    height=“100” width=“100” hspace=“20”
    vspace=“20” />
Aligning images
   NOTE: Not all directions work in all browsers
   Used to align images with text
   <img src=“image.gif” align=“direction”>
   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
           Middle of image to middle of tallest element
       BOTTOM
           Bottom of image to baseline of text
           Bottom of image to bottom of tallest element
Adding Horizontal Rules
   A horizontal rule is a line across the Web page
   <hr/>
       size=“10” (how thick)
       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 Monday, March 25
   You may begin assignment in class
       In fact I suggest you do

Shared By: