programacion web parte-5
TRANSCRIPT
-
7/24/2019 Programacion Web Parte-5
1/14
Color Names and ValuesThe first thing you need to learn about color is how to specify exactly the color you want; after
all, there are a lot of different hues, tones, and shades and you must choose the right ones.
In HTML you can specify a color in four key ways:
Hex codes:These are six-digit codes representing the amount of red, green, and blue
that make up the color, preceded by a pound or hash sign # (for example, #333333).
Color names:A set of names that represent more than 200 colors, such as red,
lightslategray, and fuchsia.
RGB color values:Here, numbers between 0 and 255 represent the amount of red,
green, and blue that makes up each color.
HSLcolor values:HSL is an alternative to RGB and closely mirrors the way that people
actually think about color. Instead of mixing three RGB values together to create thetarget color, HSL enables you to set the hue with one number between 0 and 360, where,
for example, 0 is red, 120 is green, and 240 is blue. Then, you adjust the saturation of
the color using 0 percent as gray and 100 percent as full saturation. Finally you adjust
lightness/darkness of the color where 0-percent lightness is black, 100-percent lightness is
white, and 50-percent lightness is normal.
USING HEX CODES TO SPECIFY COLORS
When you start using hexadecimal codes(or hex codesfor short), they can be daunting
because they use a mix of numbers and letters to represent colors. Although you are used tonumbers represented with 10 digits (09), hexadecimal codes are represented with 16 digits
(09 and AF). Table D-1 provides some examples of colors and their hex values; you will
understand hex codes shortly (in the Understanding Hex Codes section), after you see
what they represent.
D
-
7/24/2019 Programacion Web Parte-5
2/14
552 APPENDIX D COLOR NAMES AND VALUES
TABLE D1: Common Hex Codes
COLOR HEXADECIMAL CODE
Black #000000
White #FFFFFF
Red #FF0000
Green #00FF00
Blue #0000FF
Purple #800080
The idea that colors are represented by a mix of numbers and letters might seem a little strange, but
what follows the #sign is actually the amount of red, green, and blue that makes up the color. The
format for hex codes is as follows:#rrggbb
As you might already know, the screens on computer monitors consist of thousands of tiny squares
calledpixels. (If you look closely at your monitor, you can see them.) When it is not turned on, thescreen is black because it does not emit any light. When it is turned on, a picture is created because
each pixel can be a different color. Every one of these colors is expressed in terms of a mix of red,
green, and blue (just like a television screen).
Its hardly surprising, therefore, that you specify colors in the amounts of red, green, and blue required
to make a given color. The values of red, green, and blue required to make a color are specified using
numbers between 0 and 255, so when red, green, and blue all have a value of 0, you get black, whereas
if each has a value of 255, you get white. If red is given a value of 255 and green and blue have a value
of 0, you get red. You can make other colors by mixing the amounts of red, green, and blue as well
for example, if red and blue are given values of 255 and blue a value of 0, you get pink.
You may have seen that some software represents colors using three sets of numbers between 0 and
255. Figure D-1 shows the color window in Adobe Photoshop.
FIGURE D1
-
7/24/2019 Programacion Web Parte-5
3/14
Understanding Hex Codes
The hexadecimal codes used on the web for color are a direct translation of these values between
0 and 255, except they use two characters, not three, to represent the numbers between 0 and 255
For example, FF represents 255 and 00 represents 0.
When designing a site, you can use a tool such as Photoshop or a number of free resources on the
web to find hex codes for colors: www.colorschemer.com
www.colourlovers.com/colors/add
However, if you want to understand how hex codes work, you need to understand how computers
store information, so read the following section.
UNDERSTANDING HEX CODES
You may have heard people say that computers store all their information in 0s and 1s, and
although it may sound hard to believe, its true! The smallest unit of information a computer
stores in is known as a bit, and a bit can have only one of two values:
0, which means off (or false)
1, which means on (or true)
These two values on their own do not store much information, but if you combine 4 bits together,
you can get 16 different values. For example, using combinations of four 0s and 1s, you can represe
the digits 0 through 9 (and still have values to spare):
0000 0001 0010 0011 0100 0101 0110 0111 1000 1001 1010 1011 1100 1101 1110 1111
0 1 2 3 4 5 6 7 8 9 - - - - - -
Four bits can be replaced by a single hexadecimal digit. There are 16 digits in hexadecimal numbe
to represent the 16 possible values of four 0s and 1s:
0000 0001 0010 0011 0100 0101 0110 0111 1000 1001 1010 1011 1100 1101 1110 1111
0 1 2 3 4 5 6 7 8 9 A B C D E F
0 is the smallest; F is the largest.
Still, computers need to work with more than 16 possible values, so they tend to store information
in even larger segments. A group of 8 bits is known as a byte. A byte can therefore be represented
using just two hexadecimal digits, for example:
Binary 0100 1111
Hexadecimal 4 F
This gives 256 possible combinations of 0s and 1s (16 n16), plenty for the characters of the Englis
language, which is why colors are represented in numbers between 0 and 255.
-
7/24/2019 Programacion Web Parte-5
4/14
554 APPENDIX D COLOR NAMES AND VALUES
So, although hexadecimal codes for web colors may appear a little complicated, #4F4F4Fis a lot
easier to read than 010011110100111101001111. Table D-2 shows some more hexadecimal codes
and their corresponding decimal numbers.
TABLE D2:
Select Hex Codes and Their Corresponding Decimal Values
HEXADECIMAL DECIMAL
00 0
33 51
66 102
99 153
AA 170
BB 187
CC 204
DD 221
EE 238
FF 255
USING COLOR NAMES TO SPECIFY COLORS
Rather than using hex values to specify colors, you can also use the names of many colors such as
red, green, and white to specify the color you want. There are more than 200 different color names
supported by IE , Firefox, and Safari, all of which are listed at the end of this appendix.
Although names might sound a lot easier to understand than hex codes, some of the colors are easier
to remember than others, and remembering which color corresponds to each of the 200 names is
very difficult. Here is a sample of some of the color names:
aqua black blue fuchsia gray green lime maroon navy olive purple red silver
teal white yellow
Furthermore, if you do jobs for larger companies, such companies often want to specify exact colors
that represent their brand, and their color might not have an HTML name. Indeed, when clients
specify the color they want, they usually specify a hex code.
Because hex codes give you many more choices of shades, tints, and hues of colors than color names,
and because a lot of companies ask for specific colors to represent their company, hex codes tend to
be the choice of web professionals.
-
7/24/2019 Programacion Web Parte-5
5/14
Color Name and Number Reference
COLOR NAME AND NUMBER REFERENCE
Table D-3 shows the color names supported by the main browsers and their corresponding hex
values. It is worth noting, however, that these are browser extensions, not part of the HTML
recommendation.
TABLE D3: Color Names
COLOR NAME HEX VALUE
Aliceblue #f0f8ff
Antiquewhite #faebd7
Aqua #00ffff
Aquamarine #7fffd4
Azure #f0ffff
Beige #f5f5dc
Bisque #ffe4c4
Black #000000
Blanchedalmond #ffebcd
Blue #0000ff
Blueviolet #8a2be2
Brown #a52a2a
Burlywood #deb887
Cadetblue #5f9ea0
Chartreuse #7fff00
Chocolate #d2691e
Coral #ff7f50
Cornflowerblue #6495ed
Cornsilk #fff8dc
Crimson #dc143c
Cyan #00ffff
Darkblue #00008b
continues
-
7/24/2019 Programacion Web Parte-5
6/14
556 APPENDIX D COLOR NAMES AND VALUES
COLOR NAME HEX VALUE
Darkcyan #008b8b
Darkgoldenrod #b8860b
Darkgray #a9a9a9
Darkgreen #006400
Darkkhaki #bdb76b
Darkmagenta #8b008b
Darkolivegreen #556b2f
Darkorange #ff8b04
Darkorchid #9932cc
Darkred #8b0000
Darksalmon #e9967a
Darkseagreen #8fbc8f
Darkslateblue #483d8b
Darkslategray #2f4f4f
Darkturquoise #00ced1
Darkviolet #9400d3
Deeppink #ff1493
Deepskyblue #00bfff
Dimgray #696969
Dodgerblue #1e90ff
Firebrick #b22222
Floralwhite #fffaf0
Forestgreen #228b22
Fuchsia #ff00ff
Gainsboro #dcdcdc
Ghostwhite #f8f8ff
TABLE D3 (continued)
-
7/24/2019 Programacion Web Parte-5
7/14
Color Name and Number Reference
Gold #ffd700
Goldenrod #daa520
Gray #808080
Green #008000
Greenyellow #adff2f
Honeydew #f0fff0
Hotpink #ff69b4
Indianred #cd5c5c
Indigo #4b0082
Ivory #fffff0
Khaki #f0e68c
Lavender #e6e6fa
Lavenderblush #fff0f5
Lawngreen #7cfb04
Lemonchiffon #fffacd
Lightblue #add8e6
Lightcoral #f08080
Lightcyan #e0ffff
Lightgoldenrodyellow #fafad2
Lightgreen #90ee90
Lightgrey #d3d3d3
Lightpink #ffb6c1
Lightsalmon #ffa07a
Lightseagreen #20b2aa
Lightskyblue #87cefa
Lightslategray #778899
Lightsteelblue #b0c4de
continues
-
7/24/2019 Programacion Web Parte-5
8/14
558 APPENDIX D COLOR NAMES AND VALUES
COLOR NAME HEX VALUE
Lightyellow #ffffe0
Lime #00ff00
Limegreen #32cd32
Linen #faf0e6
Magenta #ff00ff
Maroon #800000
Mediumaquamarine #66cdaa
Mediumblue #0000cd
Mediumorchid #ba55d3
Mediumpurple #9370db
Mediumseagreen #3cb371
Mediumslateblue #7b68ee
Mediumspringgreen #00fa9a
Mediumturquoise #48d1cc
Mediumvioletred #c71585
Midnightblue #191970
Mintcream #f5fffa
Mistyrose #ffe4e1
Moccasin #ffe4b5
Navajowhite #ffdead
Navy #000080
Oldlace #fdf5e6
Olive #808000
Olivedrab #6b8e23
Orange #ffa500
Orangered #ff4500
TABLE D3 (continued)
-
7/24/2019 Programacion Web Parte-5
9/14
Color Name and Number Reference
Orchid #da70d6
Palegoldenrod #eee8aa
Palegreen #98fb98
Paleturquoise #afeeee
Palevioletred #db7093
Papayawhip #ffefd5
Peachpuff #ffdab9
Peru #cd853f
Pink #ffc0cb
Plum #dda0dd
Powderblue #b0e0e6
Purple #800080
Red #ff0000
Rosybrown #bc8f8f
Royalblue #4169e1
Saddlebrown #8b4513
Salmon #fa8072
Sandybrown #f4a460
Seagreen #2e8b57
Seashell #fff5ee
Sienna #a0522d
Silver #c0c0c0
Skyblue #87ceeb
Slateblue #6a5acd
Slategray #708090
Snow #fffafa
Springgreen #00ff7f
continues
-
7/24/2019 Programacion Web Parte-5
10/14
560 APPENDIX D COLOR NAMES AND VALUES
COLOR NAME HEX VALUE
Steelblue #4682b4
Tan #d2b48c
Teal #008080
Thistle #d8bfd8
Tomato #ff6347
Turquoise #40e0d0
Violet #ee82ee
Wheat #f5deb3
White #ffffff
Whitesmoke #f5f5f5
Yellow #ffff00
Yellowgreen #9acd32
TABLE D3 (continued)
-
7/24/2019 Programacion Web Parte-5
11/14
Character EncodingsAppendix D, Color Names and Values, discusses how computers store information, how
a character-encoding scheme is a table that translates between characters, and how they are
stored in the computer.
The most common character set (or character encoding) in use on computers is The American
Standard Code for Information Interchange (ASCII), which is probably the most widely used
character set for encoding text electronically. You can expect all computers browsing the web
to understand ASCII.
The problem with ASCII is that it supports only the uppercase and lowercase Latin alpha-
bet, the numbers 09, and some extra characters: a total of 128 characters. Table E-1 lists
the printable characters of ASCII. (The other characters are things such as line feeds and
carriage-return characters.)
TABLE E1: Printable Characters of ASCII
! # $ % & ` ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
However, many languages use either accented Latin characters or completely different alpha-
bets. ASCII does not address these characters, so you need to learn about character encodings
if you want to use any non-ASCII characters.
E
-
7/24/2019 Programacion Web Parte-5
12/14
562 APPENDIX E CHARACTER ENCODINGS
Character encodings are also important if you want to use symbols because these cannot be guar-
anteed to transfer properly between different encodings (from some dashes to some quotation mark
characters). If you do not indicate the character encoding the document is written in, some of the
special characters might not display.
The International Standards Organization created a range of character sets to deal with differentnational characters. ISO-8859-1 is commonly used in Western versions of authoring tools such as
Adobe Dreamweaver, as well as applications such as Windows Notepad, as shown in Table E-2.
TABLE E2: ISO Character Sets
CHARACTER SET DESCRIPTION
ISO-8859-1 Latin alphabet part 1
Covering North America, Western Europe, Latin America, the Caribbean,
Canada, and Africa
ISO-8859-2 Latin alphabet part 2
Covering Eastern Europe including Bosnian, Croatian, Czech, Hungarian,
Polish, Romanian, Serbian (in Latin transcription), Serbo-Croatian, Slovak,
Slovenian, Upper Sorbian, and Lower Sorbian
ISO-8859-3 Latin alphabet part 3
Covering SE Europe, Esperanto, Maltese, Turkish, and miscellaneous others
ISO-8859-4 Latin alphabet part 4
Covering Scandinavia/Baltics (and others not in ISO-8859-1)
ISO-8859-5 Latin/Cyrillic alphabet part 5
ISO-8859-6 Latin/Arabic alphabet part 6
ISO-8859-7 Latin/Greek alphabet part 7
ISO-8859-8 Latin/Hebrew alphabet part 8
ISO-8859-9 Latin 5 alphabet part 9 (same as ISO-8859-1 except Turkish characters
replace Icelandic ones)
ISO-8859-10 Latin 6 Lappish, Nordic, and Eskimo
ISO-8859-15 The same as ISO-8859-1 but with more characters added
ISO-8859-16 Latin 10
Covering SE Europe, Albanian, Croatian, Hungarian, Polish, Romanian and
Slovenian, plus can be used in French, German, Italian, and Irish Gaelic
ISO-2022-JP Latin/Japanese alphabet part 1
ISO-2022-JP-2 Latin/Japanese alphabet part 2
ISO-2022-KR Latin/Korean alphabet part 1
-
7/24/2019 Programacion Web Parte-5
13/14
Character Encodings
It is helpful to note that the first 128 characters of ISO-8859-1 match those of ASCII, so you can
safely use those characters as you would in ASCII.
The Unicode Consortiumwas then set up to devise a way to show allcharacters of different language
rather than have these different, incompatible character codes for different languages.
Therefore, if you want to create documents that use characters from multiple character sets, you cado so using the single Unicode character encodings. Furthermore, users can view documents writte
in different character sets, providing their processor (and fonts) supports the Unicode standards, no
matter what platform they are on or which country they are in. By having the single-character enco
ing, you can reduce software development costs because the programs do not need to be designed t
support multiple character encodings.
One problem with Unicode is that a lot of older programs were written to support only 8-bit charact
sets (limiting them to 256 characters), which is nowhere near the number required for all languages.
Unicode therefore specifies encodings that can deal with a string in special ways to make enough
space for the huge character set it encompasses. These are known as UTF-8, UTF-16, and UTF-32
as shown in Table E-3.
TABLE E3: Unicode Character Sets
CHARACTER SET DESCRIPTION
UTF-8 A Unicode Translation Format that comes in 8-bit units. That is, it comes
in bytes. A character in UTF-8 can be from 1 to 4 bytes, making UTF-8 a
variable width.
UTF-16 A Unicode Translation Format that comes in 16-bit units. That is, it comes in
shorts. It can be 1 or 2 shorts, making UTF-16 a variable width.
UTF-32 A Unicode Translation Format that comes in 32-bit units. That is, it comes i
longs. It is a fixed-width format and is always 1 long in length.
The first 256 characters of Unicode character sets correspond to the 256 characters of ISO-8859-1
By default, HTML 4 processors should support UTF-8, and XML processors are supposed to suppor
UTF-8 and UTF-16; therefore, all XHTML-compliant processors should also support UTF-16 (becau
XHTML is an application of XML). The HTML5 specification is strongly biased toward UTF-8.
In practice you almost always want to use UTF-8.
For more information on internationalization and different character sets and encodings, seewww.i18nguy.comand the article The Absolute Minimum Every Software Developer Absolutely,
Positively Must Know about Unicode and Character Sets (No Excuses!) atwww.joelonsoftware
.com/articles/Unicode.html.
-
7/24/2019 Programacion Web Parte-5
14/14