Lets add some images and style

1
Lets add some images and style!

• Week 3 - Presentation 1
• Veronica Noone

2
Objectives

• Review
• Graphics on the Web
• Images
• Must have Image Attributes
• Linking Images
• Using Color on Web Pages
• Quick Intro to Cascading Style Sheets
• CSS Syntax
• Common CSS Properties

3
Review

• Lets Review a bit from last week
• Here are the RULES
• Everybody MUST answer a question but ONLY ONE
• Ready

4
Review Questions

• What does Zeldman call the Web Standard
  Trinity?
• How many levels of Headers are there?
• What are the three lists available in XHTML?
• What is the rule when nesting lists?
• What tree tags are needed to define a definition
  list?
• We discussed 6 XHTML rules name one

5
Graphics on the Web

• GIF
• JPG
• PNG
• Can be created in many programs. The tool of
  choice for most professionals is Photoshop.
• Lets take a look

6
GIF

• Graphics Interchange Format
• Best used for line art and logos
• Maximum of 256 colors
• One color can be configured as transparent
• Can be animated
• Uses lossless compression
• Can be interlaced

7
JPEG

• Joint Photographic Experts Group
• Best used for photographs
• Up to 16.7 million colors
• Use lossy compression
• Cannot be animated
• Cannot be made transparent

8
PNG

• Portable Network Graphic
• Support millions of colors
• Support multiple levels of transparency
• Support interlacing
• Use lossless compression
• Combines the best of GIF JPEG
• Browser support is growing

9
Images

• ltimg /gt
• Empty element
• Which means what?
• By itself does nothing
• Must specify attributes to describe where the
  graphic is, how big it is, etc.

ltimg srcimages/mozilla.gifgt
10
Lets try it

• Create a folder on the desktop called example
• Inside that folder create another folder called
  images.
• This is a good habit to get into
• Go to the class calendar and save the three
  images into the images folder
• Open your template file and save it as index.html
  in the example folder
• Code the image tag to display the mozilla.gif
  graphic in the index file
• Done early? Help your classmates!

11
Must have Image Attributes

• Width and Height
• Helps the browser render the image
• Dont change the size of the image
• Alt Text
• Displays if graphic does not
• Aides accessibility
• Take a minutes and add these attributes to your
  image

12
Linking Images

• You can wrap an a tag around an image tag to make
  the image a link
• All the same rules apply to the a tag as before
• May want to add the border attribute the img tag

lta href"http//www.mozilla.com"gtltimg
srcimages/mozilla.gif" alt"Link to mozilla"
width"380" height"380" border"0" /gtlt/agt
13
Using Color on Web Pages

• Monitors display color as intensities of red,
  green, and blue
• RGB Color
• The values of red, green, and blue vary from 0 to
  255.
• Hexadecimal numbers (base 16) are used to
  represent these colors.

14
Hexadecimal Color Values

• Hex value pairs range from 00 to FF
• Three hex value pairs are used to describe a RGB
  color
• 0 0
• F 16

000000
FFFFFF
0000FF
FF0000
00FF00
15
Quick IntroCascading Style Sheets

• flexible, cross-platform, standards-based
  language
• Can be added to the head of a document using the
  style tag
• We will coverCSS in greatdetail in thenext
  couple ofweeks

ltstyle type"text/css"gt lt!-- body font small
sans-serif color 993300 --gt lt/stylegt
16
CSS Syntax

• Style sheets are composed of "Rules" that
  describe the styling to be applied.
• Each Rule contains a Selector and a Declaration

How else can we write blue?
17
Common CSS Properties

• background-color
• color
• font-family
• font-size
• font-weight
• font-style
• text-decoration
• line-height
• text-align
• background-image

18
Lets try it Together

• Add the style tag to our sample page can change
  the style of text.