CSCI Prelim Handout 5 HTML Color Guide

CSCI Prelim Handout 5
More tags: HTML Colors Colors are displayed combining RED, GREEN, and BLUE light. Color Values HTML colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF). Hex values are written as 3 double digit numbers, starting with a # sign.
Color Values
Color #000000 #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF #C0C0C0 #FFFFFF Color HEX Color RGB rgb(0,0,0) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0) rgb(0,255,255) rgb(255,0,255) rgb(192,192,192) rgb(255,255,255)
16 Million Different Colors

The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256). Most modern monitors are capable of displaying at least 16384 different colors. If you look at the color table below, you will see the result of varying the red light from 0 to 255, while keeping the green and blue light at zero.
Shades of Gray
Gray colors are displayed using an equal amount of power to all of the light sources. To make it easier for you to select the right gray color we have compiled a table of gray shades for you: Gray Shades Color HEX #000000 #080808 #101010 #181818 rgb(0,0,0) rgb(8,8,8) rgb(16,16,16) rgb(24,24,24) Color RGB
#202020 #282828 #303030 #383838 #404040 #484848 #505050 #585858 #606060 #686868 #707070 #787878 #808080 #888888 #909090 #989898 #A0A0A0 #A8A8A8 #B0B0B0 #B8B8B8 #C0C0C0 #C8C8C8 #D0D0D0 #D8D8D8 #E0E0E0 #E8E8E8 #F0F0F0 #F8F8F8 #FFFFFF
rgb(32,32,32) rgb(40,40,40) rgb(48,48,48) rgb(56,56,56) rgb(64,64,64) rgb(72,72,72) rgb(80,80,80) rgb(88,88,88) rgb(96,96,96) rgb(104,104,104) rgb(112,112,112) rgb(120,120,120) rgb(128,128,128) rgb(136,136,136) rgb(144,144,144) rgb(152,152,152) rgb(160,160,160) rgb(168,168,168) rgb(176,176,176) rgb(184,184,184) rgb(192,192,192) rgb(200,200,200) rgb(208,208,208) rgb(216,216,216) rgb(224,224,224) rgb(232,232,232) rgb(240,240,240) rgb(248,248,248) rgb(255,255,255)
Web Standard Color Names

The World Wide Web Consortium (W3C) has listed 16 valid color names for HTML and CSS: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. If you want to use other colors, you should specify their HEX value.
Web Safe Colors?

Some years ago, when computers supported max 256 different colors, a list of 216 "Web Safe Colors" was suggested as a Web standard, reserving 40 fixed system colors. The 216 cross-browser color palette was created to ensure that all computers would display the colors correctly when running a 256 color palette. This is not important now, since most computers can display millions of different colors. Anyway here is the list:
000000 003300 006600 009900 00CC00 00FF00 330000 333300 336600 339900 33CC00 33FF00 660000 663300 666600 669900 66CC00 66FF00 990000 993300 996600 999900 99CC00 99FF00 CC0000 CC3300 CC6600 CC9900 CCCC00 CCFF00 FF0000 FF3300 FF6600 FF9900 FFCC00 FFFF00
0000CC 0033CC 0066CC 0099CC 00CCCC 00FFCC 3300CC 3333CC 3366CC 3399CC 33CCCC 33FFCC 6600CC 6633CC 6666CC 6699CC 66CCCC 66FFCC 9900CC 9933CC 9966CC 9999CC 99CCCC 99FFCC CC00CC CC33CC CC66CC CC99CC CCCCCC CCFFCC FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC
0000FF 0033FF 0066FF 0099FF 00CCFF 00FFFF 3300FF 3333FF 3366FF 3399FF 33CCFF 33FFFF 6600FF 6633FF 6666FF 6699FF 66CCFF 66FFFF 9900FF 9933FF 9966FF 9999FF 99CCFF 99FFFF CC00FF CC33FF CC66FF CC99FF CCCCFF CCFFFF FF00FF FF33FF FF66FF FF99FF FFCCFF FFFFFF
Color Name AliceBlue AntiqueWhite Aqua Aquamarine Azure Beige Bisque Black
Color HEX #F0F8FF #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000
Color
BlanchedAlmond Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGreen DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray DodgerBlue FireBrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Gold GoldenRod Gray Green GreenYellow
#FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC #DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9 #006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #00CED1 #9400D3 #FF1493 #00BFFF #696969 #1E90FF #B22222 #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 #DAA520 #808080 #008000 #ADFF2F
HoneyDew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan LightGoldenRodYellow LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSteelBlue LightYellow Lime LimeGreen Linen Magenta Maroon MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin NavajoWhite Navy OldLace Olive
#F0FFF0 #FF69B4 #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 #D3D3D3 #90EE90 #FFB6C1 #FFA07A #20B2AA #87CEFA #778899 #B0C4DE #FFFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF #800000 #66CDAA #0000CD #BA55D3 #9370D8 #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000
OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum PowderBlue Purple Red RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray Snow SpringGreen SteelBlue Tan Teal Thistle Tomato Turquoise Violet Wheat White WhiteSmoke Yellow YellowGreen
#6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #D87093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080 #FF0000 #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB #6A5ACD #708090 #FFFAFA #00FF7F #4682B4 #D2B48C #008080 #D8BFD8 #FF6347 #40E0D0 #EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32
Note: If you want valid HTML or CSS use the HEX values instead.
Reference: http://www.w3schools.com/html/html_colors.asp
Lists 1. Ordered lists - <ol></ol>
Attributes: 1. TYPE=[ 1 | a | A | i | I ] (numbering style)

1 (decimal numbers: 1, 2, 3, 4, 5, ...) a (lowercase alphabetic: a, b, c, d, e, ...) A (uppercase alphabetic: A, B, C, D, E, ...) i (lowercase Roman numerals: i, ii, iii, iv, v, ...) I (uppercase Roman numerals: I, II, III, IV, V, ...)
2. START=Number (starting number) 3. COMPACT (compact display)

Example: <ol type="A"> <li>Bacolod </li> <li>Cebu</li> <li>Iloilo</li> <li>Manila</li>
2. Unordered lists - <ul></ul>
TYPE=[ disc | square | circle ] (bullet style)

disc (a filled-in circle) square (a square outline) circle (a circle outline)
Example:
COMPACT (compact display)
<ul type="disc"> <li>Apple</li> <li>Grapes</li> <li>Banana</li> <li>Mango</li> </ul>
<body></body> - body tag.

HTML Body Attributes Sets the background color for your HTML document Sets the text color by name or hex value Sets the link color by name or hex value
<body bgcolor=> <body text=> <body link=>
<body alink=> <body vlink=> <body background=> Margins
Sets the active link color by name or hex value Sets the viewed link color by name or hex value For images, example: <body background="images/background.gif"></body> No excess margin space, <body leftmargin="0" topmargin="0"></body>.
<table></table> - table tag. This is used to create tables
Its attributes: name = table name or name of a table border = border is specified according to pixel. o Example: border = 1 for 1px border bordercolor = color of the border. It can be specified by hexadecimal value or by color name. o Example: bordercolor=#00000 or bordercolor=black. width = width of the table. Can be specified by number of pixels or by percentage value. o Example: width=400 or width=90% height = height of the table. Can be specified by number of pixels or by percentage value. o Example: height=500 or height=40% o cellpadding = Can be specified by pixels. It is the space between the cell wall and the cell content. o Example: cellpadding=5 cellspacing = Can be specified by pixels. It is space between cells. o Example: cellspacing=5 align = Alignment of the table. Choices are: left, right or center. o Example: align=center bgcolor = Background color of the table. It can be specified by hexadecimal value or by color name. o Example: bgcolor=red or bgcolor=#333333
Each table has a column and row. It looks in MS word. (output of table1.html) Column 1 Column 2 Column 3 Row 1 Row 2 Row 3 <tr></tr> = table row <td></td>=table column Note: precedence / order: rows come first than columns in html.
table1.html (basic example without using much the attributes) <html> <body> <table width=400 height=400 border=1 bordercolor=blue align=center> <Tr> Row 1 Column 1 <td> </td> <td> </td> Column 2 Column 3 <td> </td> </Tr> <Tr> <td> </td> <td> </td> <td> </td> </Tr> <Tr> <td> </td> <td> </td> <td> </td> </Tr> </table> </body> </html> Row 3 Column 1 Column 2 Column 3 Row 2 Column 1 Column 2 Column 3
Table output of table2.html:
table2.html (Using some of the attributes) <html> <body> <table width=400 height=100 bgcolor=pink border=10 bordercolor=black cellpadding=5 cellspacing=5>
<Tr> <td> </td> <td> </td> <td> </td> </Tr> <Tr> <td> </td> <td> </td> <td> </td> </Tr> <Tr> <td> </td> <td> </td> <td> </td> </Tr> </table> </body> </html>
Row 1
Column 1 Column 2 Column 3
Row 2
Column 1 Column 2 Column 3
Row 3 Column 1 Column 2 Column 3
Table output of table3.html: Name Clark Kent Oliver Queen ID No. 040000 040111 Course/Section IDS4A IDS3A
10
table3.html <html> <body> <table width=400 height=100 bgcolor=pink border=10 bordercolor=black cellpadding=5 cellspacing=5>
<Tr>
Row 1 <td>Name</td> <td>ID No.</td> <td>Course/Section</td>
</Tr> <Tr> Row 2 <td>Clark Kent</td> <td>040000</td> <td> IDS4A</td> Row 3 <td>Oliver Queen</td> <td>040111</td> <td> IDS3A</td>
</Tr> <Tr>
</Tr> </table> </body> </html>
<tr></tr> Attributes: valign = vertical alignment of row. It can be either: top, bottom or center. bgcolor = background color of the row. rowspan= rowspan; merges the rows.
<td></td> Attributes: align = horizontal alignment of row. It can be either: left, right or center. bgcolor = background color of the column. width= width of the column; can be specified by pixels or percentage height = height of the column; can be specified by pixels or percentage colspan=column span; equal to merge cells in MS Word
11
table4.html
<html> <body> <table width="500" height="100" bgcolor="pink" border="10" bordercolor="black" cellpadding="5" cellspacing="5">
<Tr bgcolor="blue" valign="top"> <td height="10" width="100" align="left">Name</td> <td height="10" width="100" align="left">ID No.</td> <td height="10" width="100" align="left">Course/Section</td> </Tr> <Tr bgcolor="black" valign="bottom"> <td height="30" width="150" align="center">Clark Kent</td> <td height="30" width="150" align="center">040000</td> <td height="30" width="150" align="center"> IDS4A</td> </Tr> <Tr bgcolor="red" valign="center"> <td height="60" width="250" align="right">Oliver Queen</td> <td height="60" width="250" align="right">040111</td> <td height="60" width="250" align="right"> IDS3A</td> </Tr> </table> </body> </html>
12
table5.html <html> <body> <table width="500" height="100" bgcolor="pink" border="1" bordercolor="black" cellpadding="0" cellspacing="0">
Row background color is ignored; what is followed is the cell bgcolor <Tr bgcolor="blue" valign="center"> followed. <td height="10" align="center" colspan="2" bgcolor="pink">Name</td> <td height="10" width="150" align="center" bgcolor="gray">ID No.</td> </Tr>
<Tr bgcolor="black" valign="center"> <td height="10" width="150" align="center" bgcolor="orange">Kent</td> <td height="10" width="150" align="center" bgcolor="white">Clark</td> <td height="10" width="150" align="center" bgcolor="green">040000</td> </Tr> <Tr bgcolor="red" valign="center"> <td height="10" width="150" align="center">Queen</td> <td height="10" width="150" align="center" bgcolor="yellow">Oliver</td> <td height="10" width="150" align="center">040111</td> </Tr> </table> </body> </html>
ADDITIONAL ON LINKS TARGET ATTRIBUTE : _self Instructs the browser to display the new document in the same frame and window as the hyperlink that loads it. All frames target themselves by default, so this name is not very useful or necessary. _parent Instructs the browser to display the new document in the parent frame of the frame containing the hyperlink that loads it. If the frame has no parent, then this name has the same effect as _self. _top Instructs the browser to remove all frames and display the new document in the entire window. If there are no frames, then this name has the same effect as _self. This target makes it possible to "exit" a framed document. _blank Instructs the browser to display the new document in a new, unnamed window.
13

CSCI Prelim Handout 5 HTML Color Guide

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

CSCI Prelim Handout 5 HTML Color Guide

Hochgeladen von

Copyright:

Verfügbare Formate

CSCI Prelim Handout 5

16 Million Different Colors

Web Standard Color Names

Web Safe Colors?

Lists 1. Ordered lists - <ol></ol>

Attributes: 1. TYPE=[ 1 | a | A | i | I ] (numbering style)

2. START=Number (starting number) 3. COMPACT (compact display)

2. Unordered lists - <ul></ul>

TYPE=[ disc | square | circle ] (bullet style)

disc (a filled-in circle) square (a square outline) circle (a circle outline)

COMPACT (compact display)

<ul type="disc"> <li>Apple</li> <li>Grapes</li> <li>Banana</li> <li>Mango</li> </ul>

<body></body> - body tag.

<body bgcolor=> <body text=> <body link=>

<body alink=> <body vlink=> <body background=> Margins

<table></table> - table tag. This is used to create tables

Table output of table2.html:

Column 1 Column 2 Column 3

Column 1 Column 2 Column 3

Row 3 Column 1 Column 2 Column 3

</Tr> </table> </body> </html>

Table output of table4.html:

Table output of table5.html:

Das könnte Ihnen auch gefallen