Download presentation
Presentation is loading. Please wait.
1
Tutorial 3 – Designing a Web Page
By Marge Hohly CIS Professor Tutorial 3 - Marge Hohly
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 Tutorial 3 - Marge Hohly
3
Color in HTML by Name By Name – basic By Name – extended
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 Tutorial 3 - Marge Hohly
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) Tutorial 3 - Marge Hohly
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 Tutorial 3 - Marge Hohly
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 RR=Red, GG=Green, BB=Blue is Black FF0000 is Bright Red 0000FF is Bright Blue FFFFFF is White Tutorial 3 - Marge Hohly
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 Tutorial 3 - Marge Hohly
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 Tutorial 3 - Marge Hohly
9
Color Scheme for Web Page
Default values Black Text White or Gray background Hypertext link is Blue, Visited link is Purple Modify <Body> tag <BODY BGCOLOR=“#rrggbb”> document here </BODY> Tutorial 3 - Marge Hohly
10
Color Schemes for Web Page
<BODY> tag BGCOLOR=color Text=color Link=color Vlink=color (visited link) User color name or hexadecimal value For Hex value, use “” and # Example: BGCOLOR=“#FFC088” <BODY TEXT=“#rrggbb” LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">Document here</BODY> Example link Tutorial 3 - Marge Hohly
11
Background Attribute An Image file can be used as a background
<BODY BACKGROUND=“images/bg_tiles_multi_lite2.gif">Document here</BODY> Tutorial 3 - Marge Hohly
12
Background Images Remember Image should not detract from page
Don’t use large images (>20K), load time is long Image should be seamless (don’t show boundaries and grids when tiled) Tutorial 3 - Marge Hohly
13
Modifying Text with <FONT> Tag
SPOT Color – affects only a few sections of a page Syntax for <FONT> Tag <Font SIZE=size COLOR=color FACE=fontname>text goes here</FONT> Tutorial 3 - Marge Hohly
14
<FONT> 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 Tutorial 3 - Marge Hohly
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 Tutorial 3 - Marge Hohly
16
Images Basic Tag Attributes <IMG SRC=ImageName> HEIGHT WIDTH
<IMG SRC=CoffeeCup.jpg HEIGHT=100 WIDTH=65> These attributes may not work in all browsers, best to use correct size images Tutorial 3 - Marge Hohly
17
Size of image Increase or decrease the size of image
HEIGHT=value, WIDTH=value 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 Tutorial 3 - Marge Hohly
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: <IMG SRC=“image file” ALT=“alternate text”> <IMG SRC=“coffeecup.jpg” ALT=“coffee cup”> Tutorial 3 - Marge Hohly
19
Images as Hyperlinks Inline images can be used as hyperlinks Format:
<A HREF=“target destination”><IMG SRC=“image filename” ALT=“alternate text”></A> <A HREF=“hotlist.html”><IMG SRC=“BarHotlist.gif” Alt=“Hot List”></A> Tutorial 3 - Marge Hohly
20
Aligning Images Can separate text from image Can align text with text
Align Left, Right, Center Can align text with text Ex. Top, Bottom, Middle …. View examples on Lecture link page Tutorial 3 - Marge Hohly
21
Image Borders BORDER attribute can be set to non-zero, whether or not used as hyperlink Helps image stand out Format: <IMG SRC=“coffeecup.jpg” BORDER=6 ALT=“Coffee Cup”> See examples on Lecture link page Tutorial 3 - Marge Hohly
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: <IMG SRC=“image file” VSPACE=value HSPACE=value> Tutorial 3 - Marge Hohly
23
Tips for Color and Images
Rule of thumb – total graphics 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 Tutorial 3 - Marge Hohly
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) Tutorial 3 - Marge Hohly
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, can’t test; not displayed in the status bar Client-side – Image maps is in the HTML file and is controlled by the user’s browser; on the status bar, can test it, faster, older browsers don’t support Tutorial 3 - Marge Hohly
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 Tutorial 3 - Marge Hohly
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 Tutorial 3 - Marge Hohly
28
Map Steps - continue General syntax: You can have many AREA tags
<MAP NAME=“mapname”> <AREA SHAPE=shape COORDS=“coordinates” HREF=“URL”> </MAP> You can have many AREA tags Coordinates vary based upon the shapes Rectangle Circle Polygon Tutorial 3 - Marge Hohly
29
Coordinates for Hot Spots
Coordinates are expressed in point’s as a distance from the left and top edges of the images Rectangular syntax: <AREA SHAPE=RECT COORDS=“x_left, y_upper, x_right, y_lower” HREF=“URL”> Circular syntax: <AREA SHAPE=CIRCLE COORDS=“x_center, y_center, radius” HREF=“URL”> Polygonal syntax: <AREA SHAPE=POLY COORDS=“x1, y1, x2, y2, x3, y3….” HREF=“URL” X (left/horizontal) and Y (top/vertical) of the vertices Tutorial 3 - Marge Hohly
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” Tutorial 3 - Marge Hohly
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: <IMG SRC=“image file” USEMAP=“#mapname”> View example FloorPlan on Lecture links Tutorial 3 - Marge Hohly
32
Special thanks Thanks to Susan Fuschetto for some of the materials in this presentation Tutorial 3 - Marge Hohly
Similar presentations
