Embed Size (px)
Citation preview
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
web111a_chapt03.ppt
LAB I – Named Colors: Step 1
1. Create a new, blank, html3_01.htm file
2. Insert the following code:
<HTML>
<HEAD>
<TITLE>html3_01.htm</TITLE>
</HEAD>
<BODY BGCOLOR=“white" TEXT=“black" LINK=“blue” VLINK=“navy">
<a href="some_file.htm" target=x>new page</a>
This is a link to the new page
</BODY>
</HTML>
3. Save the file
4. Open the file in the browser
This is the default browser colors
HTM: Section 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
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:<BODY BGCOLOR="#FFFFFF" TEXT="#000000"
LINK="#0000FF" VLINK="#800080">
web111a_chapt03.ppt
LAB II – Color Values: Step 1
1. Create a new, blank, html3_02.htm file
2. Insert the following code:
<HTML>
<HEAD>
<TITLE>html3_02.htm</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080"><a href="somehtmlfile.htm" target=x>new page</a> This is a link to the new page
</BODY>
</HTML>
3. Save the file
4. Open the file in the browser
This is the default browser colors
HTM: Section 3
web111a_chapt03.ppt
HTM: Section 3LAB 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
web111a_chapt03.ppt
HTM: Section 3FONTS
1. HTML Tag <FONT> some text </FONT>
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:
arialtimestimes new romancourierbookman old styleabaddonhaettenschweilerimpactmonotype corsivaSteelfish OutlineMinya NouvelleZapfChancery
web111a_chapt03.ppt
LAB III- Fonts: Step 1
1. Create a new, blank, html3_03.htm file
2. Insert the following code:
<HTML>
<HEAD>
<TITLE> html3_03.htm </TITLE>
</HEAD>
<BODY BGCOLOR="white" TEXT=“black"><font size=“7" color="green" face="times"> This is a sample of font attributes</font>
</BODY>
</HTML>
3. Save the file
4. Open the file in the browser
This is the default browser colors
HTM: Section 3
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
web111a_chapt03.ppt
HTM: Section 3
Background Images
<BODY BACKGROUND=“image”>
1. Images: Valid for the Internet
.JPG or .JPEG Joint Photographic Experts Group
.GIF Graphics Interchange Format
Static
Transparent
Animated
Images: NOT Valid for the Internet
.BMP Windows Bit Map
.TIF Tagged Image Format
.PCX Zsoft PC Paintbrush
.WMF Embedded Bitmap Metafile
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:
<HTML>
<HEAD>
<TITLE> html3_04.htm </TITLE>
</HEAD>
<BODY BACKGROUND=“03.jpg"> This is a sample of font attributes
</BODY>
</HTML>
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
web111a_chapt03.ppt
LAB IV- Images: Step 2Static .jpg/.jpeg image
1. Save the file no_pict.jpg to the floppy disk
2. Insert the following code:
3. <img src="no_pict.jpg"> following the text
4. Refresh the browser
HTM: Section 3
LAB IV- Images: Step 3Static .gif
1. Save the file place.gif to the floppy disk
2. Insert the following code:
3. <img src=“place.gif"> following the preceding image
4. Refresh the browser
web111a_chapt03.ppt
LAB IV- Images: Step 4Transparent .gif
1. Save the file place1.gif to the floppy disk
2. Insert the following code:
3. <img src=“place1.gif"> following the preceding image
4. Refresh the browser
HTM: Section 3
LAB IV- Images: Step 5Animated .gif
1. Save the file animatedheart.gif to the floppy disk
2. Insert the following code:
3. <img src=“animatedheart.gif"> following the preceding image
4. Refresh the browser
web111a_chapt03.ppt
LAB IV- Images: Step 6Transparent .gif
1. Save the file place1.gif to the floppy disk
2. Insert the following code:
3. <img src=“place1.gif"> following the preceding image
4. Refresh the browser
HTM: Section 3
LAB IV- Images: Step 7Animated .gif
1. Save the file animatedheart.gif to the floppy disk
2. Insert the following code:
3. <img src=“animatedheart.gif"> following the preceding image
4. Refresh the browser
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
web111a_chapt03.ppt
Image Placement
1. <img scr=“image” align=“alignment”>
2. Alignment Page 3.29
1. Bottom
2. Middle
3. Top
4. Left
5. Right
LAB: Remove all images except place.gifExperiment with the Alignment parameter
Vertical and Horizontal Space
1. <img src=“image” vspace=“value” hspace=“value”>
2. Example:
<img src=“pict.gif” vspace=“50” hspace=“100”>
LAB: Experiment with the vspace and hspace parameters
HTM: Section 3
3.28
3.29
web111a_chapt03.ppt
Image Size
1. <img scr=“image” height=“value” width=“value”>
LAB: Experiment with the height and width parameters
“Alternate” Graphic Parameter
1. <img scr=“image”alt=“to home page”>
LAB: Experiment with the Alternate parameter
WORKING WITH IMAGES
1. Reduce the size of the image 7k/sec on a 56k modem100k 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
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
web111a_chapt03.ppt
Homework Assignment
Create the Arcadium web page
HTML page 3.46
Figure 3-49
