Programacion Web Parte-5

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


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


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.


4/14


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.


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


6/14



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/14


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


8/14



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



9/14


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


10/14



Steelblue #4682b4

Tan #d2b48c

Teal #008080

Thistle #d8bfd8

Tomato #ff6347

Turquoise #40e0d0

Violet #ee82ee

Wheat #f5deb3

White #ffffff

Whitesmoke #f5f5f5

Yellow #ffff00

Yellowgreen #9acd32



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


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


Covering Eastern Europe including Bosnian, Croatian, Czech, Hungarian,

Polish, Romanian, Serbian (in Latin transcription), Serbo-Croatian, Slovak,

Slovenian, Upper Sorbian, and Lower Sorbian


Covering SE Europe, Esperanto, Maltese, Turkish, and miscellaneous others


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


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.


14/14

Programacion Web Parte-5

Documents

Transcript of Programacion Web Parte-5