Tutorial 3 Designing a Web Page

1
Tutorial 3 Designing a Web Page

• By Marge HohlyCIS Professor

2
Overview

• How HTML handles color
• Color Scheme for a web page
• Background images
• Spot Color
• Image Formats
• Placement and Appearance of Images in web page
• Client-side image maps

3
Color in HTML by Name

• By Name basic
• 16 basic colors supported by ALL browsers
• Blue, Red, Yellow, Green, Fuchsia, etc.
• By Name extended
• Netscape and IE support extended colors
• Refer to Appendix A, for list of extended colors

4
Color by Value

• Color is mixture of three primary colors
• Red, Green, Blue RGB triplet
• Better control of color than by name
• Presence of ALL colors White (255, 255, 255)
• Absence of ALL colors Black (0, 0, 0)
• Aqua (0, 255, 255) (blue/green cyan)
• Magenta (255, 0, 255) (red/blue)
• Yellow (255, 255, 0)

5
Color by Value - continued

• RGB triplet
• Values vary from 0 to 255
• 255 highest value absence of color
• 0 lowest value maximum intensity of color
• 2563 16.7 million colors possible

6
Color Hexadecimal (HEX) code

• Hexidecimal 0-15, really 0 F
• 10 A, 11 B, 12 C, 13 D, 14 E, 15 F
• RGB triplet in HEX uses 2 digits for each of the
  three colors
• RRGGBB where RRRed, GGGreen, BBBlue
• 000000 is Black
• FF0000 is Bright Red
• 0000FF is Bright Blue
• FFFFFF is White

7
Convert to Hexadecimal Code

• To convert divide the number by 16 to get the
  first number of pair
• Second number is the remainder
• Example 168/16 10.5
• First number is A (10) (16 X 10 160)
• Second number is 8 (168 160 8)
• Result 168 is A8
• Example 192/16 12
• Thus First number C and remainder is 0
• Result 192 is C0

8
Easier Way to Color

• Review PowerPoint Color Pallet (Format, Font,
  Color, More Colors, Custom Tab, Color Slide Bar
  RGB numbers)
• Color Resources on the Web
• See links on link page
• Color References

9
Color Scheme for Web Page

• Default values
• Black Text
• White or Gray background
• Hypertext link is Blue, Visited link is Purple
• Modify tag
• document here

10
Color Schemes for Web Page

• tag
• BGCOLORcolor Textcolor
• Linkcolor Vlinkcolor (visited link)
• User color name or hexadecimal value
• For Hex value, use and
• Example BGCOLORFFC088
• VLINK"rrggbb" ALINK"rrggbb"Document
  here
• Example link

11
Background Attribute

• An Image file can be used as a background
• Document here

12
Background Images

• Remember
• Image should not detract from page
• Dont use large images (20K), load time is long
• Image should be seamless (dont show boundaries
  and grids when tiled)

13
Modifying Text with Tag

• SPOT Color affects only a few sections of a
  page
• Syntax for Tag
• text
  goes here

14
Tag - continue

• SIZE attribute
• SIZE 2 is absolute, specifies exact size
• SIZE 2 is relative, specifies size 2 larger
  than surrounding text
• Browsers determine actual size, therefore may be
  different in different browsers

15
Image Formats

• Two major file formats supported by browsers
• GIF Graphics Interchange Format
• Most common on web
• Displays 256 colors
• JPEG Joint Photographic Experts Group
• Extension JPG or JPEG
• Full 16.7 million colors
• Usually smaller files than GIF
• Can control amount of file compression affects
  image quality

16
Images

• Basic Tag
• Attributes
• HEIGHT
• WIDTH
• These attributes may not work in all browsers,
  best to use correct size images

17
Size of image

• Increase or decrease the size of image
• HEIGHTvalue, WIDTHvalue in pixels
• Better use graphic Software to alter size
• HEIGHT WIDTH does not change file size
• Browser calculates the image size before
  displaying it
• Better to specify size so browser does not need
  to calculate it

18
Alternate Text for Image

• Some WWW browsers are primarily text-only like
  Lynx
• Can turn off image loading if slow connections
• Use an alternate tag displays specified text
  instead of image
• A Necessity for visually impaired users
• Example

19
Images as Hyperlinks

• Inline images can be used as hyperlinks
• Format
• filename ALTalternate text
• AltHot List

20
Aligning Images

• Can separate text from image
• Align Left, Right, Center
• Can align text with text
• Ex. Top, Bottom, Middle .
• View examples on Lecture link page

21
Image Borders

• BORDER attribute can be set to non-zero, whether
  or not used as hyperlink
• Helps image stand out
• Format
• Cup
• See examples on Lecture link page

22
Space Around Image

• Increase the vertical and horizontal space around
  the image
• VSPACE space above and below the image
• HSPACE space left and right of image
• Measured in Pixels
• Syntax

23
Tips for Color and Images

• Rule of thumb total graphics 40-50 KB
• Use graphic software to reduce image size
• Reduce number of colors (256 GIF)
• Experiment with GIF JPEG formats
• Use thumbnails
• Reuse your images browser already has a copy of
  file
• Provide alternate text for all images
• Use the ALT, HEIGHT, WIDTH properties

24
More Tips on Color Images

• Have enough contrast between text and background
• Avoid clashing colors
• View page in multiple browsers
• Text different color depth to determine if
  dithering appears
• Dithering is where increased color depth is
  approximated, may appear grainy
• Use 256 colors to control dithering
• Eliminate dithering by using the Safety Palette
  (211 colors that works on all browsers)

25
Image Maps

• Makes image interact by adding hot spots that
  act as hypertext links
• Create hot spots by specifying coordinates
• Type of maps server and client-side
• Server-side Image map is stored and controlled
  on a server slow, not supported, cant test not
  displayed in the status bar
• Client-side Image maps is in the HTML file and
  is controlled by the users browser on the
  status bar, can test it, faster, older browsers
  dont support

26
Image Maps

• Use a single graphic to access multiple targets
• Set up hot spot on image
• A hot spot defines the area of image that acts
  like a hypertext link
• Define hot spots through use of image maps
• Image maps list coordinates that define the
  boundaries of the hot spot in image
• When user clicks within the boundary, hypertext
  link is activated

27
Map Steps

• Determine coordinates with graphics software or
  special programs
• See Figure 3-45 for Programs for Creating Image
  Maps
• Give it a map name and define the area with the
  shape coordinates properties, and the HREF URL

28
Map Steps - continue

• General syntax
• HREFURL
• You can have many AREA tags
• Coordinates vary based upon the shapes
• Rectangle
• Circle
• Polygon

29
Coordinates for Hot Spots

• Coordinates are expressed in points as a
  distance from the left and top edges of the
  images
• Rectangular syntax
• x_right, y_lower HREFURL
• Circular syntax
• radius HREFURL
• Polygonal syntax
• y3. HREFURL
• X (left/horizontal) and Y (top/vertical) of the
  vertices

30
Steps continue

• Figure 3-46 Floor Plan Image Coordinates
• Rectangle coordinates
• 5,45,108,157
• Circle coordinates
• 161,130,49
• Polygonal coordinates
• 29,4,29,41,111,41,111,78,213,78,213,4

31
Steps continue

• Add the USEMAP property to the IMG tag
• USEMAP property tells the browser the name of the
  image map to associate with the inline image
• Use the name you defined previously with a in
  front of the name
• Syntax
• View example FloorPlan on Lecture links

32
Special thanks

• Thanks to Susan Fuschetto for some of the
  materials in this presentation