Spring 09 - TYP 6A: Intro To Computers

Home Syllabus Notes Attendance Assignments Resources

Tuesday, January 27

Links and Images

• Chapter 5: Images
  • About Images for the Web
    • Format: GIF, JPEG, PNG
    • Size and Resolution
    • Speed
    • Transparency: GIF, PNG
    • Animation: GIF
  • Getting Images: Creative Commons Licenses, Flickr
  • Inserting Images on a Page: <img src="image.url" />
  • Offering Alternate Text: alt and title
  • Specifying Size for Speedier Viewing
  • Scaling an Image: width and height
  • Making Images Smaller
  • Adding Horizontal Rules: <hr />
  • Adding an Icon for Your Web Site: 16x16 pixel image
    (in the head) <link rel="icon" href="favicon.ico" type="image/x-icon" />
• Chapter 6: Links
  • Creating a Link to Another Web Page:
    <a href="URL"> CLICKABLE </a>
  • Creating Anchors: <a name="ANCHOR NAME"> ANYTHING </a>
    and id attribute can also be used on other tags.
  • Linking to a Specific Anchor:
    <a href="http://www.site.com/path/page.html#anchorname"> CLICKABLE </a>
  • Targeting Links to Specific Windows: _blank or window.name
  • Setting the Default Target: (in the head) <base target="name" /> [deprecated]
  • Using Images to Label Links
  • Linking Thumbnails to Images
  • Creating a Client-Side Image Map:
    • Use both attributes name and id label the map because XHTML strict requires id

    • <area alt="info"
           shape="rect" coords="x1,y1,x2,y2" upper-left,lower-right
           shape="circle" coords="x,y,r" center,radius
           shape="poly" coords="x1,y1,x2,y2,...,xn,yn" each point on the polygon
      >

    • 
• Relative vs Full-path Hyper-References
  • href or src = "../../imgages/page.html"
  • href or src = "http://brandeis.edu/imgages/page.html"
  • Protocol is important! What's wrong with this?
    href = "www.brandeis.edu/imgages/page.html"