CSCE 102

1
CSCE 102
2
Links

• Remember everything within an element will have
  that attribute applied.
• Click lta hrefwww.google.comgt Here lt/agt to goto
  Google.

3
Images

• GIF Graphics Interchange Format
• Lossless compression
• 256 colors
• Patented (cannot use free software to create)
• JPEG Joint Photographic Experts Group
• Lossy compression
• 16 million colors
• PNG Portable Network Graphics
• Patent free solution to GIF
• 5 -25 more compressible than GIF

4
Images in XHTML documents

• ltimggt is an empty element
• ltimg srcURL of image altAlternative Text /gt
• Image location can be local or remote
• Alternative Text is to be displayed in lieu of
  image.
• Required in XHTML

5
Images

• Inline image alignment
• Use align attribute (deprecated)
• ltimg srcURL aligncenter altCentered
  image /gt
• align values left, center, right, top, middle,
  bottom
• affects alignment with respect to inline text
• Use ltpgt tag with align attribute
• ltp aligncentergt
• ltimg srcURL altCentered image /gt
• lt/pgt

6
More Image attributes

• Width and Height
• ltimg srcImageURL altText about Image
  width50 height100 /gt
• Can be either pixels or percentage
• 50 and 100 are just example pixel numbers
• Ordering of attributes not critical
• Append to number for percentage

7
Images as Links

• Link an image to a URL
• lta hrefSomeURLgtltimg srcImageURL altText
  about image /gtlt/agt

8
Links Images Code Summary

• Consult page 136

9
Cascading Style Sheets

• Ability to customize styles.
• lth1gt, lth2gt, etc., might not be suitable for all
  webpages.
• CSS allows us to customize the presentation rules.

10
Internal Style Sheet

• Style customization located within HTML document
• ltmeta http-equivContent-Style-Type
  contenttext/css /gt
• Placed within ltheadgt element
• Defines default style sheet for document.
• Required, but will work without because browser
  assumes default style language is css.

11
Internal Style Sheet

• ltstylegt element used to customize presentation
• Placed within ltheadgt element
• Must use type attribute to define

ltheadgt ltstyle typetext/cssgt lt/stylegt lt/headgt
12
Internal Style Sheet Example

• Custom lth2gt to display red text
• Structure element propertyvalue
• Multiple properties element propertyvalue
  propertyvalue
• 16 predefined colors on pg 59 that can be used as
  a value
• Black, gray, silver, white, red, maroon, magenta,
  purple, blue, navy, cyan, teal, green, olive,
  lime, yellow

ltstyle typetext/cssgt h2 colorred lt/stylegt