1. web111a_chapt03.ppt HTM: Section 3 Colors Selecting Colors Methods Color names Color values Color Names 16 Basic Color Names HTML 3.05, Figure 3-2 Extended Color Names HTML 3.05, Figure 3-3 3.05

2. web111a_chapt03.ppt LAB I – Named Colors: Step 1 1.Create a new, blank, html3_01.htm file 2.Insert the following code: html3_01.htm new page This is a link to the new page 3.Save the file 4.Open the file in the browser This is the default browser colors HTM: Section 3

3. web111a_chapt03.ppt LAB I: Step 2 1.Change BGCOLOR in the file to “black” 2.Refresh the page 3.Change the TEXT to “yellow” 4.Refresh the page 5.Change LINK to “green” 6.Refresh the page 7.Change VLINK to “orange” 8.Refresh the page Experiment with the 16 Basic Colors (Page HTML 3.05) and the Extended Colors (Page HTML 3.05) BGCOLOR = color of the background screen TEXT = color for text LINK = color of a link that has not been executed VLINK = color of a link that has been executed HTM: Section 3

4. web111a_chapt03.ppt HTM: Section 3 Color Values Represented as two hexadecimal values 0 through F = one hex character Byte = two hex characters 3 Bytes to identify the color of one pixel XXYYZZ = hex color code XX = Intensity of the color RED YY = Intensity of the color GREEN ZZ = Intensity of the color BLUE Precede number by a # sign #000000 = black #FFFFFF = white Example:

5. web111a_chapt03.ppt LAB II – Color Values: Step 1 1.Create a new, blank, html3_02.htm file 2.Insert the following code: html3_02.htm new page This is a link to the new page 3.Save the file 4.Open the file in the browser This is the default browser colors HTM: Section 3

6. web111a_chapt03.ppt HTM: Section 3 LAB II: Step 2 1.Change BGCOLOR in the file to “#00FF00” 2.Refresh the page 3.Change the TEXT to “#FF0000” 4.Refresh the page 5.Change LINK to “#FF00FF 6.Refresh the page 7.Change VLINK to “888888” 8.Refresh the page Experiment with variations of the three color intensities BGCOLOR = color of the background screen TEXT = color for text LINK = color of a link that has not been executed VLINK = color of a link that has been executed

7. web111a_chapt03.ppt HTM: Section 3 FONTS 1.HTML Tag some text 2.Properties (some) 1.Size=“some number” size=40 2.Color=“color” color=“green” 3.Color=“hex number” color=“#FFBBCC” 4.Face=“name of face” face=“arial” Faces: arial times times new roman courier bookman old style abaddon haettenschweiler impact monotype corsiva Steelfish Outline Minya Nouvelle ZapfChancery

8. web111a_chapt03.ppt LAB III- Fonts: Step 1 1.Create a new, blank, html3_03.htm file 2.Insert the following code: html3_03.htm This is a sample of font attributes 3.Save the file 4.Open the file in the browser This is the default browser colors HTM: Section 3

9. web111a_chapt03.ppt LAB III- Fonts: Step 2 1.Set the size parameter to various sizes and refresh the page 2.Set the face parameter to various styles and refresh the browser 1.Times 2.Times New Roman 3.Courier 4.Arial 5.Monotype corsiva HTM: Section 3

10. web111a_chapt03.ppt HTM: Section 3 Background Images 1.Images: Valid for the Internet.JPG or.JPEGJoint Photographic Experts Group.GIFGraphics Interchange Format Static Transparent Animated Images: NOT Valid for the Internet.BMPWindows Bit Map.TIFTagged Image Format.PCXZsoft PC Paintbrush.WMFEmbedded Bitmap Metafile

11. web111a_chapt03.ppt LAB IV- Images - Background: Step 1 1.Create a new, blank, html3_04.htm file 2.Save the file 03.jpg to the floppy disk 3.Insert the following code: html3_04.htm This is a sample of font attributes 3.Save the file 4.Open the file in the browser This is the default browser colors Download balloon.gif Replace 03.jpg with balloon.gif HTM: Section 3

12. web111a_chapt03.ppt LAB IV- Images: Step 2 Static.jpg/.jpeg image 1.Save the file no_pict.jpg to the floppy disk 2.Insert the following code: 3. following the text 4.Refresh the browser HTM: Section 3 LAB IV- Images: Step 3 Static.gif 1.Save the file place.gif to the floppy disk 2.Insert the following code: 3. following the preceding image 4.Refresh the browser

13. web111a_chapt03.ppt LAB IV- Images: Step 4 Transparent.gif 1.Save the file place1.gif to the floppy disk 2.Insert the following code: 3. following the preceding image 4.Refresh the browser HTM: Section 3 LAB IV- Images: Step 5 Animated.gif 1.Save the file animatedheart.gif to the floppy disk 2.Insert the following code: 3. following the preceding image 4.Refresh the browser

14. web111a_chapt03.ppt LAB IV- Images: Step 6 Transparent.gif 1.Save the file place1.gif to the floppy disk 2.Insert the following code: 3. following the preceding image 4.Refresh the browser HTM: Section 3 LAB IV- Images: Step 7 Animated.gif 1.Save the file animatedheart.gif to the floppy disk 2.Insert the following code: 3. following the preceding image 4.Refresh the browser

15. web111a_chapt03.ppt.gif Graphic Files 1.Can be static or animated 2.One color transparent potential 3.Interlaced: file downloads in pieces 4.Non-interlaced: file downloads in sections ( 5.Formats: 1.GIF87: non-animated, non-transparent 2.GIF89a: animated and/or transparent color 6.Max 256 colors (.jpg = 16 million) HTM: Section 3

16. web111a_chapt03.ppt Image Placement 1. 2.AlignmentPage 3.29 1.Bottom 2.Middle 3.Top 4.Left 5.Right LAB: Remove all images except place.gif Experiment with the Alignment parameter Vertical and Horizontal Space 1. 2.Example: LAB: Experiment with the vspace and hspace parameters HTM: Section 3 3.28 3.29

17. web111a_chapt03.ppt Image Size 1. LAB: Experiment with the height and width parameters “Alternate” Graphic Parameter 1. LAB: Experiment with the Alternate parameter WORKING WITH IMAGES 1.Reduce the size of the image 7k/sec on a 56k modem 100k file = 15 to 20 seconds 2.Experiment with file types (.jpg,.gif) 3.Use thumbnails 4.Reuse images HTM: Section 3 3.31 3.32

18. web111a_chapt03.ppt Image Maps 1.‘Hot spots” (links) on an image 1.Squares 2.Circles 3.Rectangles 2.Identified by the x & y coordinates of points on the map Third party software HTM: Section 3 3.35

19. web111a_chapt03.ppt Homework Assignment Create the Arcadium web page HTML page 3.46 Figure 3-49