Vous êtes sur la page 1sur 55

HTML Introduction

Previous Next Chapter

Example
<html> <body> <h1>My First Heading< h1> <p>My !irst paragraph"< p> < body> < html> #ry it yoursel!

What is HTML?
H#M$ is a language !or des%ribing &eb pages"

H#M$ stands !or Hyper Text Mar'up Language H#M$ is not a programming language( it is a markup language ) mar'up language is a set o! markup tags H#M$ uses markup tags to des%ribe &eb pages

HTML Tags
H#M$ mar'up tags are usually %alled H#M$ tags

H#M$ tags are 'ey&ords surrounded by angle brackets li'e <html> H#M$ tags normally come in pairs li'e <b> and < b> #he !irst tag in a pair is the start tag, the se%ond tag is the end tag *tart and end tags are also %alled opening tags and closing tags

HTML Documents = Web ages


H#M$ do%uments describe !eb pages H#M$ do%uments contain HTML tags and plain text H#M$ do%uments are also called !eb pages

#he purpose o! a &eb bro&ser +li'e ,nternet -xplorer or Fire!ox. is to read H#M$ do%uments and display them as &eb pages" #he bro&ser does not display the H#M$ tags( but uses the tags to interpret the %ontent o! the page/ <html> <body> <h1>My First Heading< h1> <p>My !irst paragraph"< p> < body> < html>

Example Explained

#he text bet&een <html> and < html> des%ribes the &eb page #he text bet&een <body> and < body> is the visible page %ontent #he text bet&een <h1> and < h1> is displayed as a heading #he text bet&een <p> and < p> is displayed as a paragraph

HTML " #etting $tarted


Previous Next Chapter

What %ou &eed


0ou don1t need any tools to learn H#M$ at 23*%hools"

0ou don1t need an H#M$ editor 0ou don1t need a &eb server 0ou don1t need a &eb site

Editing HTML
H#M$ %an be &ritten and edited using many di!!erent editors li'e 4ream&eaver and 5isual *tudio" Ho&ever( in this tutorial &e use a plain text editor +li'e Notepad. to edit H#M$" 2e believe using a plain text editor is the best &ay to learn H#M$"

'reate %our (!n Test Web


I) *ou +ust !ant to learn HTML, skip the rest o) this chapter, ,! you &ant to %reate a test page on your o&n %omputer( 6ust %opy the 3 !iles belo& to your des'top" +7ight %li%' on ea%h lin'( and sele%t 8save target as8 or 8save lin' as8. mainpage"htm page1"htm page9"htm )!ter you have %opied the !iles( you %an double:%li%' on the !ile %alled 8mainpage"htm8 and see your !irst &eb site in a%tion"

-se %our Test Web .or Learning


2e suggest you experiment &ith everything you learn at 23*%hools by editing your &eb !iles &ith a text editor +li'e Notepad." &ote/ ,! your test &eb %ontains H#M$ mar'up tags you have not learned( don1t pani%" 0ou &ill learn all about it in the next %hapters"

,HTM or ,HTML .ile Extension?


2hen you save an H#M$ !ile( you %an use either the "htm or the "html !ile extension" #here is no di!!eren%e( it is entirely up to you"

HTML 0asic " 1 Examples


Previous Next Chapter 4on1t &orry i! the examples use tags you have not learned" 0ou &ill learn about them in the next %hapters"

HTML Headings

H#M$ headings are de!ined &ith the <h1> to <h;> tags"

Example
<h1>#his is a heading< h1> <h9>#his is a heading< h9> <h3>#his is a heading< h3> #ry it yoursel!

HTML aragraphs
H#M$ paragraphs are de!ined &ith the <p> tag"

Example
<p>#his is a paragraph"< p> <p>#his is another paragraph"< p> #ry it yoursel!

HTML Links
H#M$ lin's are de!ined &ith the <a> tag"

Example
<a hre!<8http/ &&&"&3s%hools"%om8>#his is a lin'< a> #ry it yoursel! &ote/ #he lin' address is spe%i!ied in the hre! attribute" +0ou &ill learn about attributes in a later %hapter o! this tutorial."

HTML Images
H#M$ images are de!ined &ith the <img> tag"

Example
<img sr%<8&3s%hools"6pg8 &idth<81=>8 height<81>98 > #ry it yoursel! &ote/ #he name and the si?e o! the image are provided as attributes"

HTML Elements
Previous Next Chapter H#M$ do%uments are de!ined by H#M$ elements"

HTML Elements
)n H#M$ element is everything !rom the start tag to the end tag/

$tart tag 2 <p> <a hre!<8de!ault"htm8 > <br >

Element content #his is a paragraph #his is a lin'

End tag 2 < p> < a>

2 #he start tag is o!ten %alled the opening tag" #he end tag is o!ten %alled the closing tag"

HTML Element $*ntax


)n H#M$ element starts &ith a start tag 3 opening tag )n H#M$ element ends &ith an end tag 3 closing tag #he element content is everything bet&een the start and the end tag *ome H#M$ elements have empt* content -mpty elements are closed in the start tag Most H#M$ elements %an have attributes

Tip/ 0ou &ill learn about attributes in the next %hapter o! this tutorial"

&ested HTML Elements

Most H#M$ elements %an be nested +%an %ontain other H#M$ elements." H#M$ do%uments %onsist o! nested H#M$ elements"

HTML Document Example


<html> <body> <p>#his is my !irst paragraph"< p> < body> < html> #he example above %ontains 3 H#M$ elements"

HTML Example Explained


The 4p5 element/ <p>#his is my !irst paragraph"< p> #he <p> element de!ines a paragraph in the H#M$ do%ument" #he element has a start tag <p> and an end tag < p>" #he element %ontent is/ #his is my !irst paragraph" The 4bod*5 element/ <body> <p>#his is my !irst paragraph"< p> < body> #he <body> element de!ines the body o! the H#M$ do%ument" #he element has a start tag <body> and an end tag < body>" #he element %ontent is another H#M$ element +a p element." The 4html5 element/ <html> <body> <p>#his is my !irst paragraph"< p> < body>

< html> #he <html> element de!ines the &hole H#M$ do%ument" #he element has a start tag <html> and an end tag < html>" #he element %ontent is another H#M$ element +the body element."

Don6t .orget the End Tag


*ome H#M$ elements might display %orre%tly even i! you !orget the end tag/ <p>#his is a paragraph <p>#his is a paragraph #he example above &or's in most bro&sers( be%ause the %losing tag is %onsidered optional" Never rely on this" Many H#M$ elements &ill produ%e unexpe%ted results and or errors i! you !orget the end tag "

Empt* HTML Elements


H#M$ elements &ith no %ontent are %alled empty elements" <br> is an empty element &ithout a %losing tag +the <br> tag de!ines a line brea'." Tip/ ,n @H#M$( all elements must be %losed" )dding a slash inside the start tag( li'e <br >( is the proper &ay o! %losing empty elements in @H#M$ +and @M$."

HTML Tip/ -se Lo!ercase Tags


H#M$ tags are not %ase sensitive/ <P> means the same as <p>" Many &eb sites use upper%ase H#M$ tags" 23*%hools use lo&er%ase tags be%ause the 2orld 2ide 2eb Consortium +23C. recommends lo&er%ase in H#M$ >( and demands lo&er%ase tags in @H#M$"

HTML 7ttributes
Previous Next Chapter

)ttributes provide additional in!ormation about H#M$ elements"

HTML 7ttributes

H#M$ elements %an have attributes )ttributes provide additional in)ormation about an element )ttributes are al&ays spe%i!ied in the start tag )ttributes %ome in name value pairs li'e/ name=89alue8

7ttribute Example
H#M$ lin's are de!ined &ith the <a> tag" #he lin' address is spe%i!ied in the hre! attribute/

Example
<a hre!<8http/ &&&"&3s%hools"%om8>#his is a lin'< a> #ry it yoursel!

7l!a*s :uote 7ttribute ;alues


)ttribute values should al&ays be en%losed in Auotes" 4ouble style Auotes are the most %ommon( but single style Auotes are also allo&ed" Tip/ ,n some rare situations( &hen the attribute value itsel! %ontains Auotes( it is ne%essary to use single Auotes/ name<1Bohn 8*hotCun8 Nelson1

HTML Tip/ -se Lo!ercase 7ttributes


)ttribute names and attribute values are %ase:insensitive" Ho&ever( the 2orld 2ide 2eb Consortium +23C. re%ommends lo&er%ase attributes attribute values in their H#M$ > re%ommendation" Ne&er versions o! +@.H#M$ &ill demand lo&er%ase attributes"

HTML 7ttributes <e)erence


) %omplete list o! legal attributes !or ea%h H#M$ element is listed in our/ Complete H#M$ 7e!eren%e Delo& is a list o! some attributes that are standard !or most H#M$ elements/ 7ttribute %lass id style title ;alue classname id style_definition tooltip_text Description *pe%i!ies a %lassname !or an element *pe%i!ies a uniAue id !or an element *pe%i!ies an inline style !or an element *pe%i!ies extra in!ormation about an element +displayed as a tool tip.

For more in!ormation about standard attributes/

HTML Headings
Previous Next Chapter Headings are important in H#M$ do%uments"

HTML Headings
Headings are de!ined &ith the <h1> to <h;> tags" <h1> de!ines the most important heading" <h;> de!ines the least important heading"

Example
<h1>#his is a heading< h1> <h9>#his is a heading< h9> <h3>#his is a heading< h3> #ry it yoursel! &ote/ Dro&sers automati%ally add some empty spa%e +a margin. be!ore and a!ter ea%h heading"

Headings 7re Important


Ese H#M$ headings !or headings only" 4on1t use headings to ma'e text 0I# or bold" *ear%h engines use your headings to index the stru%ture and %ontent o! your &eb pages" *in%e users may s'im your pages by its headings( it is important to use headings to sho& the do%ument stru%ture" H1 headings should be used as main headings( !ollo&ed by H9 headings( then the less important H3 headings( and so on"

HTML Lines
#he <hr > tag %reates a hori?ontal line in an H#M$ page" #he hr element %an be used to separate %ontent/

Example
<p>#his is a paragraph< p> <hr > <p>#his is a paragraph< p> <hr > <p>#his is a paragraph< p> #ry it yoursel!

HTML 'omments
Comments %an be inserted into the H#M$ %ode to ma'e it more readable and understandable" Comments are ignored by the bro&ser and are not displayed" Comments are &ritten li'e this/

Example
<F:: #his is a %omment ::> #ry it yoursel!

&ote/ #here is an ex%lamation point a!ter the opening bra%'et( but not be!ore the %losing bra%'et"

HTML Tip " Ho! to ;ie! HTML $ource


Have you ever seen a 2eb page and &ondered 8HeyF Ho& did they do thatG8 #o !ind out( right:%li%' in the page and sele%t 85ie& *our%e8 +,-. or 85ie& Page *our%e8 +Fire!ox.( or similar !or other bro&sers" #his &ill open a &indo& %ontaining the H#M$ %ode o! the page"

Examples .rom This age


Headings Ho& to display headings in an H#M$ do%ument" Hidden %omments Ho& to insert %omments in the H#M$ sour%e %ode" Hori?ontal lines Ho& to insert a hori?ontal line"

HTML Tag <e)erence


23*%hools1 tag re!eren%e %ontains additional in!ormation about these tags and their attributes" 0ou &ill learn more about H#M$ tags and attributes in the next %hapters o! this tutorial" Tag <html> <body> <h1> to <h;> <hr > <F::> Description 4e!ines an H#M$ do%ument 4e!ines the do%ument1s body 4e!ines H#M$ headings 4e!ines a hori?ontal line 4e!ines a %omment

HTML aragraphs

Previous

Next Chapter

H#M$ do%uments are divided into paragraphs"

HTML aragraphs
Paragraphs are de!ined &ith the <p> tag"

Example
<p>#his is a paragraph< p> <p>#his is another paragraph< p> #ry it yoursel! &ote/ Dro&sers automati%ally add an empty line be!ore and a!ter a paragraph"

Don6t .orget the End Tag


Most bro&sers &ill display H#M$ %orre%tly even i! you !orget the end tag/

Example
<p>#his is a paragraph <p>#his is another paragraph #ry it yoursel! #he example above &ill &or' in most bro&sers( but don1t rely on it" Forgetting the end tag %an produ%e unexpe%ted results or errors" &ote/ Future version o! H#M$ &ill not allo& you to s'ip end tags"

HTML Line 0reaks


Ese the <br > tag i! you &ant a line brea' +a ne& line. &ithout starting a ne& paragraph/

Example
<p>#his is<br >a para<br >graph &ith line brea's< p>

#ry it yoursel! #he <br > element is an empty H#M$ element" ,t has no end tag"

4br5 or 4br 35
,n @H#M$( @M$( and !uture versions o! H#M$( H#M$ elements &ith no end tag +%losing tag. are not allo&ed" -ven i! <br> &or's in all bro&sers( &riting <br > instead is more )uture proo)"

HTML (utput " -se)ul Tips


0ou %annot be sure ho& H#M$ &ill be displayed" $arge or small s%reens( and resi?ed &indo&s &ill %reate di!!erent results" 2ith H#M$( you %annot %hange the output by adding extra spa%es or extra lines in your H#M$ %ode" #he bro&ser &ill remove extra spa%es and extra lines &hen the page is displayed" )ny number o! lines %ount as one line( and any number o! spa%es %ount as one spa%e" #ry it yoursel! +#he example demonstrates some H#M$ !ormatting problems.

Examples .rom This age


H#M$ paragraphs Ho& H#M$ paragraphs are displayed in a bro&ser" $ine brea's #he use o! line brea's in an H#M$ do%ument" Poem problems *ome problems &ith H#M$ !ormatting"

More Examples

More paragraphs #he de!ault behaviors o! paragraphs"

HTML Tag <e)erence


23*%hools1 tag re!eren%e %ontains additional in!ormation about H#M$ elements and their attributes" Tag <p> <br > Description 4e!ines a paragraph ,nserts a single line brea'

HTML Text .ormatting


Previous Next Chapter

HTML Text .ormatting


This text is bold

This text is big


This text is italic
This is computer output

This is subscript and


#ry it yoursel!

superscript

HTML .ormatting Tags


H#M$ uses tags li'e <b> and <i> !or !ormatting output( li'e bold or italic text" #hese H#M$ tags are %alled !ormatting tags +loo' at the bottom o! this page !or a %omplete re!eren%e."

()ten 4strong5 renders as 4b5, and 4em5 renders as 4i5, Ho&ever( there is a di!!eren%e in the meaning o! these tags/ <b> or <i> de!ines bold or itali% text only" <strong> or <em> means that you &ant the text to be rendered in a &ay that the user understands as 8important8" #oday( all ma6or bro&sers render strong as bold and em as itali%s" Ho&ever( i! a bro&ser one day &ants to ma'e a text highlighted &ith the strong !eature( it might be %ursive !or example and not boldF

Tr* it %oursel) " Examples


#ext !ormatting Ho& to !ormat text in an H#M$ do%ument" Pre!ormatted text Ho& to %ontrol the line brea's and spa%es &ith the pre tag" 8Computer output8 tags Ho& di!!erent 8%omputer output8 tags &ill be displayed" )ddress Ho& to de!ine %onta%t in!ormation !or the author o&ner o! an H#M$ do%ument" )bbreviations and a%ronyms Ho& to handle abbreviations and a%ronyms" #ext dire%tion Ho& to %hange the text dire%tion" Huotations Ho& to handle long and short Auotations" 4eleted and inserted text Ho& to mar' deleted and inserted text"

HTML Text .ormatting Tags


Tag <b> <big> Description 4e!ines bold text 4e!ines big text

<em> <i> <small> <strong> <sub> <sup> <ins> <del>

4e!ines emphasi?ed text 4e!ines itali% text 4e!ines small text 4e!ines strong text 4e!ines subs%ripted text 4e!ines supers%ripted text 4e!ines inserted text 4e!ines deleted text

HTML 8'omputer (utput8 Tags


Tag <%ode> <'bd> <samp> <tt> <var> <pre> Description 4e!ines %omputer %ode text 4e!ines 'eyboard text 4e!ines sample %omputer %ode 4e!ines teletype text 4e!ines a variable 4e!ines pre!ormatted text

HTML 'itations, :uotations, and De)inition Tags


Tag <abbr> <a%ronym> <address> <bdo> <blo%'Auote> <A> <%ite> <d!n> Description 4e!ines an abbreviation 4e!ines an a%ronym 4e!ines %onta%t in!ormation !or the author o&ner o! a do%ument 4e!ines the text dire%tion 4e!ines a long Auotation 4e!ines a short Auotation 4e!ines a %itation 4e!ines a de!inition term

HTML .onts

Previous

Next Chapter

The HTML 4)ont5 Tag $hould &(T be -sed


#he <!ont> tag is depre%ated in H#M$ >( and removed !rom H#M$I" #he 2orld 2ide 2eb Consortium +23C. has removed the <!ont> tag !rom its re%ommendations" ,n H#M$ >( style sheets +C**. should be used to de!ine the layout and display properties !or many H#M$ elements" #he example belo& sho&s ho& the H#M$ %ould loo' by using the <!ont> tag/

Example
<p> <!ont si?e<8I8 !a%e<8arial8 %olor<8red8> #his paragraph is in )rial( si?e I( and in red text %olor" < !ont> < p> <p> <!ont si?e<838 !a%e<8verdana8 %olor<8blue8> #his paragraph is in )rial( si?e I( and in red text %olor" < !ont> < p> #ry it yoursel!

The <ight Wa* to Do It " With $t*les


*et the !ont o! text #his example demonstrates ho& to set the !ont o! a text" *et the !ont si?e o! text #his example demonstrates ho& to set the !ont si?e o! a text" *et the !ont %olor o! text #his example demonstrates ho& to set the %olor o! a text" *et the !ont( !ont si?e( and !ont %olor o! text #his example demonstrates ho& to set the !ont( !ont si?e( and !ont %olor o! a text"

HTML $t*les " '$$


Previous Next Chapter C** is used to style H#M$ elements"

Look= $t*les and colors


This text is in Verdana and red This text is in Times and blue

#his text is 3= pixels high


#ry it yoursel!

$t*ling HTML !ith '$$


C** &as introdu%ed together &ith H#M$ >( to provide a better &ay to style H#M$ elements" C** %an be added to H#M$ in the !ollo&ing &ays/

in separate st*le sheet )iles +C** !iles. in the st*le element in the H#M$ head se%tion in the st*le attribute in single H#M$ elements

-sing the HTML $t*le 7ttribute


,t is time %onsuming and not very pra%ti%al to style H#M$ elements using the style attribute" The pre)erred !a* to add '$$ to HTML, is to put '$$ s*ntax in separate '$$ )iles, Ho&ever( in this H#M$ tutorial &e &ill introdu%e you to C** using the style attribute" #his is done to simpli!y the examples" ,t also ma'es it easier !or you to edit the %ode and try it yoursel!"

0ou %an learn everything about C** in our C** #utorial"

HTML $t*le Example " 0ackground 'olor


#he ba%'ground:%olor property de!ines the ba%'ground %olor !or an element/

Example
<html> <body style<8ba%'ground:%olor/yello&J8> <h9 style<8ba%'ground:%olor/redJ8>#his is a heading< h9> <p style<8ba%'ground:%olor/greenJ8>#his is a paragraph"< p> < body> < html> #ry it yoursel! #he ba%'ground:%olor property ma'es the 8old8 bg%olor attribute obsolete" #ry it yoursel!/ Da%'ground %olor the old &ay

HTML $t*le Example " .ont, 'olor and $i>e


#he !ont:!amily( %olor( and !ont:si?e properties de!ines the !ont( %olor( and si?e o! the text in an element/

Example
<html> <body> <h1 style<8!ont:!amily/verdanaJ8>) heading< h1> <p style<8!ont:!amily/arialJ%olor/redJ!ont:si?e/9=pxJ8>) paragraph"< p> < body> < html> #ry it yoursel! #he !ont:!amily( %olor( and !ont:si?e properties ma'e the old <!ont> tag obsolete"

HTML $t*le Example " Text 7lignment


#he text:align property spe%i!ies the hori?ontal alignment o! text in an element/

Example
<html> <body> <h1 style<8text:align/%enterJ8>Center:aligned heading< h1> <p>#his is a paragraph"< p> < body> < html> #ry it yoursel! #he text:align property ma'es the old <%enter> tag obsolete" #ry it yoursel!/ Centered heading the old &ay

Deprecated Tags and 7ttributes


,n H#M$ >( several tags and attributes &ere depre%ated" 4epre%ated means that they &ill not be supported in !uture versions o! H#M$" The message is clear/ )void using depre%ated tags and attributesF #hese tags and attributes should be avoided/ Tags <%enter> <!ont> and <base!ont> <s> and <stri'e> <u> 7ttributes align bg%olor %olor Description 4epre%ated" 4e!ines %entered %ontent 4epre%ated" 4e!ines H#M$ !onts 4epre%ated" 4e!ines stri'ethrough text 4epre%ated" 4e!ines underlined text Description 4epre%ated" 4e!ines the alignment o! text 4epre%ated" 4e!ines the ba%'ground %olor 4epre%ated" 4e!ines the text %olor

.or all o) the abo9e/ -se st*les instead=

HTML Links
Previous Next Chapter $in's are !ound in nearly all 2eb pages" $in's allo& users to %li%' their &ay !rom page to page"

Tr* it %oursel) " Examples


H#M$ lin's Ho& to %reate lin's in an H#M$ do%ument" +0ou %an !ind more examples at the bottom o! this page.

HTML H*perlinks ?Links@


) hyperlin' +or lin'. is a &ord( group o! &ords( or image that you %an %li%' on to 6ump to a ne& do%ument or a ne& se%tion &ithin the %urrent do%ument" 2hen you move the %ursor over a lin' in a 2eb page( the arro& &ill turn into a little hand" $in's are spe%i!ied in H#M$ using the <a> tag" #he <a> tag %an be used in t&o &ays/ 1" #o %reate a lin' to another do%ument( by using the hre! attribute 9" #o %reate a boo'mar' inside a do%ument( by using the name attribute

HTML Link $*ntax


#he H#M$ %ode !or a lin' is simple" ,t loo's li'e this/ <a hre!<8url8>Link text< a> #he hre! attribute spe%i!ies the destination o! a lin'"

Example

<a hre!<8http/ &&&"&3s%hools"%om 8>5isit 23*%hools< a> &hi%h &ill display li'e this/ 5isit 23*%hools Cli%'ing on this hyperlin' &ill send the user to 23*%hools1 homepage" Tip/ #he 8$in' text8 doesn1t have to be text" 0ou %an lin' !rom an image or any other H#M$ element"

HTML Links " The target 7ttribute


#he target attribute spe%i!ies &here to open the lin'ed do%ument" #he example belo& &ill open the lin'ed do%ument in a ne& bro&ser &indo& or a ne& tab/

Example
<a hre!<8http/ &&&"&3s%hools"%om 8 target<8Kblan'8>5isit 23*%hoolsF< a> #ry it yoursel!

HTML Links " The name 7ttribute


#he name attribute spe%i!ies the name o! an an%hor" #he name attribute is used to %reate a boo'mar' inside an H#M$ do%ument" &ote/ #he up%oming H#M$I standard suggest using the id attribute instead o! the name attribute !or spe%i!ying the name o! an an%hor" Esing the id attribute a%tually &or's also !or H#M$> in all modern bro&sers" Doo'mar's are not displayed in any spe%ial &ay" #hey are invisible to the reader"

Example
) named an%hor inside an H#M$ do%ument/ <a name<8tips8>Ese!ul #ips *e%tion< a> Create a lin' to the 8Ese!ul #ips *e%tion8 inside the same do%ument/

<a hre!<8Ltips8>5isit the Ese!ul #ips *e%tion< a> Mr( %reate a lin' to the 8Ese!ul #ips *e%tion8 !rom another page/ <a hre!<8http/ &&&"&3s%hools"%om htmlKlin's"htmLtips8> 5isit the Ese!ul #ips *e%tion< a>

0asic &otes " -se)ul Tips


&ote/ )l&ays add a trailing slash to sub!older re!eren%es" ,! you lin' li'e this/ hre!<8http/ &&&"&3s%hools"%om html8( you &ill generate t&o reAuests to the server( the server &ill !irst add a slash to the address( and then %reate a ne& reAuest li'e this/ hre!<8http/ &&&"&3s%hools"%om html 8" Tip/ Named an%hors are o!ten used to %reate 8table o! %ontents8 at the beginning o! a large do%ument" -a%h %hapter &ithin the do%ument is given a named an%hor( and lin's to ea%h o! these an%hors are put at the top o! the do%ument" Tip/ ,! a bro&ser does not !ind the named an%hor spe%i!ied( it goes to the top o! the do%ument" No error o%%urs"

More Examples
)n image as a lin' Ho& to use an image as a lin'" $in' to a lo%ation on the same page Ho& to lin' to a boo'mar'" Drea' out o! a !rame Ho& to brea' out o! a !rame +i! your site is lo%'ed in a !rame." Create a mailto lin' Ho& to lin' to a mail message +&ill only &or' i! you have mail installed." Create a mailto lin' 9 )nother mailto lin'"

HTML Link Tags


Tag Description

<a>

4e!ines an an%hor

HTML Images
Previous Next Chapter

Example &or!egian Mountain Trip

#ry it yoursel!

Tr* it %oursel) " Examples


,nsert images Ho& to insert images into an H#M$ do%ument" ,nsert images !rom di!!erent lo%ations Ho& to insert an image !rom another !older or another server" +0ou %an !ind more examples at the bottom o! this page."

HTML Images " The 4img5 Tag and the $rc 7ttribute
,n H#M$( images are de!ined &ith the <img> tag"

#he <img> tag is empty( &hi%h means that it %ontains attributes only( and has no %losing tag" #o display an image on a page( you need to use the sr% attribute" *r% stands !or 8sour%e8" #he value o! the sr% attribute is the E7$ o! the image you &ant to display" $*ntax )or de)ining an image/ <img sr%<8url8 alt<8some_text8 > #he E7$ points to the lo%ation &here the image is stored" )n image named 8boat"gi!8( lo%ated in the 8images8 dire%tory on 8&&&"&3s%hools"%om8 has the E7$/ http/ &&&"&3s%hools"%om images boat"gi!" #he bro&ser displays the image &here the <img> tag o%%urs in the do%ument" ,! you put an image tag bet&een t&o paragraphs( the bro&ser sho&s the !irst paragraph( then the image( and then the se%ond paragraph"

HTML Images " The 7lt 7ttribute


#he reAuired alt attribute spe%i!ies an alternate text !or an image( i! the image %annot be displayed" #he value o! the alt attribute is an author:de!ined text/ <img sr%<8boat"gi!8 alt<8Dig Doat8 > #he alt attribute provides alternative in!ormation !or an image i! a user !or some reason %annot vie& it +be%ause o! slo& %onne%tion( an error in the sr% attribute( or i! the user uses a s%reen reader."

HTML Images " $et Height and Width o) an Image


#he height and &idth attributes are used to spe%i!y the height and &idth o! an image" #he attribute values are spe%i!ied in pixels by de!ault/ <img sr%<8pulpit"6pg8 alt<8Pulpit ro%'8 &idth<83=>8 height<899N8 > Tip/ ,t is a good pra%ti%e to spe%i!y both the height and &idth attributes !or an image" ,! these attributes are set( the spa%e reAuired !or the image is reserved &hen the page is loaded" Ho&ever( &ithout these attributes( the bro&ser does not 'no& the si?e o! the

image" #he e!!e%t &ill be that the page layout &ill %hange during loading +&hile the images load."

0asic &otes " -se)ul Tips


&ote/ ,! an H#M$ !ile %ontains ten images : eleven !iles are reAuired to display the page right" $oading images ta'e time( so my best advi%e is/ Ese images %are!ully" &ote/ 2hen a &eb page is loaded( it is the bro&ser( at that moment( that a%tually gets the image !rom a &eb server and inserts it into the page" #here!ore( ma'e sure that the images a%tually stay in the same spot in relation to the &eb page( other&ise your visitors &ill get a bro'en lin' i%on" #he bro'en lin' i%on is sho&n i! the bro&ser %annot !ind the image"

More Examples
)ligning images Ho& to align an image &ithin the text" $et the image !loat Ho& to let an image !loat to the le!t or right o! a paragraph" Ma'e a hyperlin' o! an image Ho& to use an image as a lin'" Create an image map Ho& to %reate an image map( &ith %li%'able regions" -a%h o! the regions is a hyperlin'"

HTML Image Tags


Tag <img > <map> <area > Description 4e!ines an image 4e!ines an image:map 4e!ines a %li%'able area inside an image:map

HTML Tables

Previous

Next Chapter

HTML Tables
)pples Dananas Mranges Mther >>O 93O 13O 1=O

Tr* it %oursel) " Examples


#ables Ho& to %reate tables in an H#M$ do%ument" #able borders Ho& to spe%i!y di!!erent table borders" +0ou %an !ind more examples at the bottom o! this page."

HTML Tables
#ables are de!ined &ith the <table> tag" ) table is divided into ro&s +&ith the <tr> tag.( and ea%h ro& is divided into data %ells +&ith the <td> tag." td stands !or 8table data(8 and holds the %ontent o! a data %ell" ) <td> tag %an %ontain text( lin's( images( lists( !orms( other tables( et%"

Table Example
<table border<818> <tr> <td>ro& 1( %ell 1< td> <td>ro& 1( %ell 9< td> < tr> <tr> <td>ro& 9( %ell 1< td> <td>ro& 9( %ell 9< td> < tr> < table> Ho& the H#M$ %ode above loo's in a bro&ser/

ro& 1( %ell 1 ro& 1( %ell 9 ro& 9( %ell 1 ro& 9( %ell 9

HTML Tables and the 0order 7ttribute


,! you do not spe%i!y a border attribute( the table &ill be displayed &ithout borders" *ometimes this %an be use!ul( but most o! the time( &e &ant the borders to sho&" #o display a table &ith borders( spe%i!y the border attribute/ <table border<818> <tr> <td>7o& 1( %ell 1< td> <td>7o& 1( %ell 9< td> < tr> < table>

HTML Table Headers


Header in!ormation in a table are de!ined &ith the <th> tag" )ll ma6or bro&sers &ill display the text in the <th> element as bold and %entered" <table border<818> <tr> <th>Header 1< th> <th>Header 9< th> < tr> <tr> <td>ro& 1( %ell 1< td> <td>ro& 1( %ell 9< td> < tr> <tr> <td>ro& 9( %ell 1< td> <td>ro& 9( %ell 9< td> < tr> < table> Ho& the H#M$ %ode above loo's in your bro&ser/ Header A Header B

ro& 1( %ell 1 ro& 1( %ell 9 ro& 9( %ell 1 ro& 9( %ell 9

More Examples
#ables &ithout borders Ho& to %reate tables &ithout borders" #able headers Ho& to %reate table headers" #able &ith a %aption Ho& to add a %aption to a table" #able %ells that span more than one ro& %olumn Ho& to de!ine table %ells that span more than one ro& or one %olumn" #ags inside a table Ho& to display elements inside other elements" Cell padding Ho& to use %ellpadding to %reate more &hite spa%e bet&een the %ell %ontent and its borders" Cell spa%ing Ho& to use %ellspa%ing to in%rease the distan%e bet&een the %ells" #he !rame attribute Ho& to use the 8!rame8 attribute to %ontrol the borders around the table"

HTML Table Tags


Tag <table> <th> <tr> <td> <%aption> <%olgroup> <%ol > Description 4e!ines a table 4e!ines a table header 4e!ines a table ro& 4e!ines a table %ell 4e!ines a table %aption 4e!ines a group o! %olumns in a table( !or !ormatting 4e!ines attribute values !or one or more %olumns in a table

<thead> <tbody> <t!oot>

Croups the header %ontent in a table Croups the body %ontent in a table Croups the !ooter %ontent in a table

HTML Lists
Previous Next Chapter #he most %ommon H#M$ lists are ordered and unordered lists/

HTML Lists
An ordered list:
1" #he !irst list item 9" #he se%ond list item 3" #he third list item

An unordered list:

$ist item $ist item $ist item

Tr*"It"%oursel) Examples
Enordered list Ho& to %reate an unordered list in an H#M$ do%ument" Mrdered list Ho& to %reate an ordered list in an H#M$ do%ument" +0ou %an !ind more examples at the bottom o! this page."

HTML -nordered Lists


)n unordered list starts &ith the <ul> tag" -a%h list item starts &ith the <li> tag" #he list items are mar'ed &ith bullets +typi%ally small bla%' %ir%les." <ul> <li>Co!!ee< li> <li>Mil'< li> < ul>

Ho& the H#M$ %ode above loo's in a bro&ser/


Co!!ee Mil'

HTML (rdered Lists


)n ordered list starts &ith the <ol> tag" -a%h list item starts &ith the <li> tag" #he list items are mar'ed &ith numbers" <ol> <li>Co!!ee< li> <li>Mil'< li> < ol> Ho& the H#M$ %ode above loo's in a bro&ser/ 1" Co!!ee 9" Mil'

HTML De)inition Lists


) de!inition list is a list o! items( &ith a des%ription o! ea%h item" #he <dl> tag de!ines a de!inition list" #he <dl> tag is used in %on6un%tion &ith <dt> +de!ines the item in the list. and <dd> +des%ribes the item in the list./ <dl> <dt>Co!!ee< dt> <dd>: bla%' hot drin'< dd> <dt>Mil'< dt> <dd>: &hite %old drin'< dd> < dl> Ho& the H#M$ %ode above loo's in a bro&ser/ Co!!ee : bla%' hot drin' Mil' : &hite %old drin'

0asic &otes " -se)ul Tips


Tip/ ,nside a list item you %an put text( line brea's( images( lin's( other lists( et%"

More Examples
4i!!erent types o! ordered lists 4emonstrates di!!erent types o! ordered lists" 4i!!erent types o! unordered lists 4emonstrates di!!erent types o! unordered lists" Nested list 4emonstrates ho& you %an nest lists" Nested list 9 4emonstrates a more %ompli%ated nested list" 4e!inition list 4emonstrates a de!inition list"

HTML List Tags


Tag <ol> <ul> <li> <dl> <dt> <dd> Description 4e!ines an ordered list 4e!ines an unordered list 4e!ines a list item 4e!ines a de!inition list 4e!ines an item in a de!inition list 4e!ines a des%ription o! an item in a de!inition list

HTML .orms and Input


Previous Next Chapter H#M$ Forms are used to sele%t di!!erent 'inds o! user input"

Tr*"It"%oursel) Examples
Create text !ields Ho& to %reate text !ields" #he user %an &rite text in a text !ield" Create pass&ord !ield Ho& to %reate a pass&ord !ield" +0ou %an !ind more examples at the bottom o! this page.

HTML .orms
H#M$ !orms are used to pass data to a server" ) !orm %an %ontain input elements li'e text !ields( %he%'boxes( radio:buttons( submit buttons and more" ) !orm %an also %ontain sele%t lists( textarea( !ieldset( legend( and label elements" #he <!orm> tag is used to %reate an H#M$ !orm/ <!orm> " input elements " < !orm>

HTML .orms " The Input Element


#he most important !orm element is the input element" #he input element is used to sele%t user in!ormation" )n input element %an vary in many &ays( depending on the type attribute" )n input element %an be o! type text !ield( %he%'box( pass&ord( radio button( submit button( and more" #he most used input types are des%ribed belo&"

Text .ields

<input type<8text8 > de!ines a one:line input !ield that a user %an enter text into/ <!orm> First name/ <input type<8text8 name<8!irstname8 ><br > $ast name/ <input type<8text8 name<8lastname8 > < !orm> Ho& the H#M$ %ode above loo's in a bro&ser/ First name/ $ast name/ &ote/ #he !orm itsel! is not visible" )lso note that the de!ault &idth o! a text !ield is 9= %hara%ters"

ass!ord .ield
<input type<8pass&ord8 > de!ines a pass&ord !ield/ <!orm> Pass&ord/ <input type<8pass&ord8 name<8p&d8 > < !orm> Ho& the H#M$ %ode above loo's in a bro&ser/ Pass&ord/ &ote/ #he %hara%ters in a pass&ord !ield are mas'ed +sho&n as asteris's or %ir%les."

<adio 0uttons
<input type<8radio8 > de!ines a radio button" 7adio buttons let a user sele%t MN$0 MNone o! a limited number o! %hoi%es/ <!orm> <input type<8radio8 name<8sex8 value<8male8 > Male<br > <input type<8radio8 name<8sex8 value<8!emale8 > Female < !orm> Ho& the H#M$ %ode above loo's in a bro&ser/

Male Female

'heckboxes
<input type<8%he%'box8 > de!ines a %he%'box" Che%'boxes let a user sele%t MN- or MM7- options o! a limited number o! %hoi%es" <!orm> <input type<8%he%'box8 name<8vehi%le8 value<8Di'e8 > , have a bi'e<br > <input type<8%he%'box8 name<8vehi%le8 value<8Car8 > , have a %ar < !orm> Ho& the H#M$ %ode above loo's in a bro&ser/ , have a bi'e , have a %ar

$ubmit 0utton
<input type<8submit8 > de!ines a submit button" ) submit button is used to send !orm data to a server" #he data is sent to the page spe%i!ied in the !orm1s a%tion attribute" #he !ile de!ined in the a%tion attribute usually does something &ith the re%eived input/ <!orm name<8input8 a%tion<8htmlK!ormKa%tion"asp8 method<8get8> Esername/ <input type<8text8 name<8user8 > <input type<8submit8 value<8*ubmit8 > < !orm> Ho& the H#M$ %ode above loo's in a bro&ser/ Esername/ ,! you type some %hara%ters in the text !ield above( and %li%' the 8*ubmit8 button( the bro&ser &ill send your input to a page %alled 8htmlK!ormKa%tion"asp8" #he page &ill sho& you the re%eived input"

More Input Examples

7adio buttons Ho& to %reate radio buttons" Che%'boxes Ho& to %reate %he%'boxes" ) user %an sele%t or unsele%t a %he%'box" *imple drop:do&n list Ho& to %reate a simple drop:do&n list" 4rop:do&n list &ith a pre:sele%ted value Ho& to %reate a drop:do&n list &ith a pre:sele%ted value" #extarea Ho& to %reate a multi:line text input %ontrol" ,n a text:area the user %an &rite an unlimited number o! %hara%ters" Create a button Ho& to %reate a button"

.orm Examples
Fieldset around !orm:data Ho& to %reate a border around elements in a !orm" Form &ith text !ields and a submit button Ho& to %reate a !orm &ith t&o text !ields and a submit button" Form &ith %he%'boxes Ho& to %reate a !orm &ith t&o %he%'boxes and a submit button" Form &ith radio buttons Ho& to %reate a !orm &ith t&o radio buttons( and a submit button" *end e:mail !rom a !orm Ho& to send e:mail !rom a !orm"

HTML .orm Tags


Tag <!orm> <input > Description 4e!ines an H#M$ !orm !or user input 4e!ines an input %ontrol

<textarea> <label> <!ieldset> <legend> <sele%t> <optgroup> <option> <button>

4e!ines a multi:line text input %ontrol 4e!ines a label !or an input element 4e!ines a border around elements in a !orm 4e!ines a %aption !or a !ieldset element 4e!ines a sele%t list +drop:do&n list. 4e!ines a group o! related options in a sele%t list 4e!ines an option in a sele%t list 4e!ines a push button

HTML .rames
Previous Next Chapter 2ith !rames( several 2eb pages %an be displayed in the same bro&ser &indo&" )##-N#,MN" 4o not expe%t !rames to be supported in !uture versions o! H#M$"

Tr*"It"%oursel) Examples
5erti%al !rameset Ho& to ma'e a verti%al !rameset &ith three di!!erent do%uments" Hori?ontal !rameset Ho& to ma'e a hori?ontal !rameset &ith three di!!erent do%uments" +0ou %an !ind more examples at the bottom o! this page.

HTML .rames
2ith !rames( you %an display more than one H#M$ do%ument in the same bro&ser &indo&" -a%h H#M$ do%ument is %alled a !rame( and ea%h !rame is independent o! the others" #he disadvantages o! using !rames are/

Frames are not expe%ted to be supported in !uture versions o! H#M$ Frames are di!!i%ult to use" +Printing the entire page is di!!i%ult."

#he &eb developer must 'eep tra%' o! more H#M$ do%uments

The HTML )rameset Element


#he !rameset element holds one or more !rame elements" -a%h !rame element %an hold a separate do%ument" #he !rameset element states HM2 M)N0 %olumns or ro&s there &ill be in the !rameset( and HM2 MECH per%entage pixels o! spa%e &ill o%%upy ea%h o! them"

The HTML )rame Element


#he <!rame> tag de!ines one parti%ular &indo& +!rame. &ithin a !rameset" ,n the example belo& &e have a !rameset &ith t&o %olumns" #he !irst %olumn is set to 9IO o! the &idth o! the bro&ser &indo&" #he se%ond %olumn is set to PIO o! the &idth o! the bro&ser &indo&" #he do%ument 8!rameKa"htm8 is put into the !irst %olumn( and the do%ument 8!rameKb"htm8 is put into the se%ond %olumn/ <!rameset %ols<89IO(PIO8> <!rame sr%<8!rameKa"htm8 > <!rame sr%<8!rameKb"htm8 > < !rameset> &ote/ #he !rameset %olumn si?e %an also be set in pixels +%ols<89==(I==8.( and one o! the %olumns %an be set to use the remaining spa%e( &ith an asteris' +%ols<89IO(Q8."

0asic &otes " -se)ul Tips


Tip/ ,! a !rame has visible borders( the user %an resi?e it by dragging the border" #o prevent a user !rom doing this( you %an add noresi?e<8noresi?e8 to the <!rame> tag" &ote/ )dd the <no!rames> tag !or bro&sers that do not support !rames" Important/ 0ou %annot use the <body>< body> tags together &ith the <!rameset>< !rameset> tagsF Ho&ever( i! you add a <no!rames> tag %ontaining some text !or bro&sers that do not support !rames( you &ill have to en%lose the text in <body>< body> tagsF *ee ho& it is done in the !irst example belo&"

More Examples
Ho& to use the <no!rames> tag Ho& to use the <no!rames> tag +!or bro&sers that do not support !rames." Nested !ramesets Ho& to %reate a !rameset &ith three do%uments( and ho& to mix them in ro&s and %olumns" Frameset &ith noresi?e<8noresi?e8 Ho& to use the noresi?e attribute" Move the mouse over the borders bet&een the !rames and noti%e that you %annot move the borders" Navigation !rame Ho& to ma'e a navigation !rame" #he navigation !rame %ontains a list o! lin's &ith the se%ond !rame as the target" #he !ile %alled 8tryhtmlK%ontents"htm8 %ontains three lin's" #he sour%e %ode o! the lin's/ <a hre! <8!rameKa"htm8 target <8sho&!rame8>Frame a< a><br> <a hre! <8!rameKb"htm8 target <8sho&!rame8>Frame b< a><br> <a hre! <8!rameK%"htm8 target <8sho&!rame8>Frame %< a> #he se%ond !rame &ill sho& the lin'ed do%ument" Bump to a spe%i!ied se%tion &ithin a !rame #&o !rames" Mne o! the !rames has a sour%e to a spe%i!ied se%tion in a !ile" #he spe%i!ied se%tion is made &ith <a name<8C1=8> in the 8lin'"htm8 !ile" Bump to a spe%i!ied se%tion &ith !rame navigation #&o !rames" #he navigation !rame +%ontent"htm. to the le!t %ontains a list o! lin's &ith the se%ond !rame +lin'"htm. as a target" #he se%ond !rame sho&s the lin'ed do%ument" Mne o! the lin's in the navigation !rame is lin'ed to a spe%i!ied se%tion in the target !ile" #he H#M$ %ode in the !ile 8%ontent"htm8 loo's li'e this/ <a hre! <8lin'"htm8 target <8sho&!rame8>$in' &ithout )n%hor< a><br><a hre! <8lin'"htmLC1=8 target <8sho&!rame8>$in' &ith )n%hor< a>"

HTML .rame Tags


Tag <!rameset> <!rame > <no!rames> Description 4e!ines a set o! !rames 4e!ines a sub &indo& +a !rame. 4e!ines a no!rame se%tion !or bro&sers that do not handle !rames

HTML I)rames
Previous Next Chapter )n i!rame is used to display a &eb page &ithin a &eb page"

$*ntax )or adding an i)rame/ <i!rame sr%<8URL8>< i!rame> #he E7$ points to the lo%ation o! the separate page"

I)rame " $et Height and Width


#he height and &idth attributes are used to spe%i!y the height and &idth o! the i!rame" #he attribute values are spe%i!ied in pixels by de!ault( but they %an also be in per%ent +li'e 8N=O8."

Example
<i!rame sr%<8demoKi!rame"htm8 &idth<89==8 height<89==8>< i!rame> #ry it yoursel!

I)rame " <emo9e the 0order


#he !rameborder attribute spe%i!ies &hether or not to display a border around the i!rame" *et the attribute value to 8=8 to remove the border/

Example
<i!rame sr%<8demoKi!rame"htm8 !rameborder<8=8>< i!rame> #ry it yoursel!

-se i)rame as a Target )or a Link

)n i!rame %an be used as the target !rame !or a lin'" #he target attribute o! a lin' must re!er to the name attribute o! the i!rame/

Example
<i!rame sr%<8demoKi!rame"htm8 name<8i!rameKa8>< i!rame> <p><a hre!<8http/ &&&"&3s%hools"%om8 target<8i!rameKa8>23*%hools"%om< a>< p> #ry it yoursel!

HTML i)rame Tag


Tag <i!rame> Description 4e!ines an inline sub &indo& +!rame.

HTML 'olors
Previous Next Chapter Colors are displayed %ombining 7-4( C7--N( and D$E- light"

'olor ;alues
H#M$ %olors are de!ined using a hexade%imal notation +H-@. !or the %ombination o! 7ed( Creen( and Dlue %olor values +7CD." #he lo&est value that %an be given to one o! the light sour%es is = +in H-@/ ==." #he highest value is 9II +in H-@/ FF." H-@ values are spe%i!ied as 3 pairs o! t&o:digit numbers( starting &ith a L sign"

'olor ;alues
'olor 'olor HEC L====== 'olor <#0 rgb+=(=(=.

LFF==== L==FF== L====FF LFFFF== L==FFFF LFF==FF LC=C=C= LFFFFFF #ry it yoursel!

rgb+9II(=(=. rgb+=(9II(=. rgb+=(=(9II. rgb+9II(9II(=. rgb+=(9II(9II. rgb+9II(=(9II. rgb+1R9(1R9(1R9. rgb+9II(9II(9II.

AD Million Di))erent 'olors


#he %ombination o! 7ed( Creen( and Dlue values !rom = to 9II( gives more than 1; million di!!erent %olors +9I; x 9I; x 9I;." ,! you loo' at the %olor table belo&( you &ill see the result o! varying the red light !rom = to 9II( &hile 'eeping the green and blue light at ?ero" #o see the !ull list o! %olor mixes &hen 7-4 varies !rom = to 9II( %li%' on one o! the H-@ or 7CD values belo&" <ed Light 'olor HEC L====== L=N==== L1===== L1N==== L9===== L9N==== L3===== L3N==== L>===== L>N==== LI===== LIN==== L;===== 'olor <#0 rgb+=(=(=. rgb+N(=(=. rgb+1;(=(=. rgb+9>(=(=. rgb+39(=(=. rgb+>=(=(=. rgb+>N(=(=. rgb+I;(=(=. rgb+;>(=(=. rgb+P9(=(=. rgb+N=(=(=. rgb+NN(=(=. rgb+R;(=(=.

L;N==== LP===== LPN==== LN===== LNN==== LR===== LRN==== L)===== L)N==== LD===== LDN==== LC===== LCN==== L4===== L4N==== L-===== L-N==== LF===== LFN==== LFF====

rgb+1=>(=(=. rgb+119(=(=. rgb+19=(=(=. rgb+19N(=(=. rgb+13;(=(=. rgb+1>>(=(=. rgb+1I9(=(=. rgb+1;=(=(=. rgb+1;N(=(=. rgb+1P;(=(=. rgb+1N>(=(=. rgb+1R9(=(=. rgb+9==(=(=. rgb+9=N(=(=. rgb+91;(=(=. rgb+99>(=(=. rgb+939(=(=. rgb+9>=(=(=. rgb+9>N(=(=. rgb+9II(=(=.

$hades o) #ra*
Cray %olors are %reated by using an eAual amount o! po&er to all o! the light sour%es" #o ma'e it easier !or you to sele%t the %orre%t shade( &e have %reated a table o! gray shades !or you/ #ra* $hades 'olor HEC L====== L=N=N=N L1=1=1= L1N1N1N L9=9=9= L9N9N9N 'olor <#0 rgb+=(=(=. rgb+N(N(N. rgb+1;(1;(1;. rgb+9>(9>(9>. rgb+39(39(39. rgb+>=(>=(>=.

L3=3=3= L3N3N3N L>=>=>= L>N>N>N LI=I=I= LINININ L;=;=;= L;N;N;N LP=P=P= LPNPNPN LN=N=N= LNNNNNN LR=R=R= LRNRNRN L)=)=)= L)N)N)N LD=D=D= LDNDNDN LC=C=C= LCNCNCN L4=4=4= L4N4N4N L-=-=-= L-N-N-N LF=F=F= LFNFNFN LFFFFFF

rgb+>N(>N(>N. rgb+I;(I;(I;. rgb+;>(;>(;>. rgb+P9(P9(P9. rgb+N=(N=(N=. rgb+NN(NN(NN. rgb+R;(R;(R;. rgb+1=>(1=>(1=>. rgb+119(119(119. rgb+19=(19=(19=. rgb+19N(19N(19N. rgb+13;(13;(13;. rgb+1>>(1>>(1>>. rgb+1I9(1I9(1I9. rgb+1;=(1;=(1;=. rgb+1;N(1;N(1;N. rgb+1P;(1P;(1P;. rgb+1N>(1N>(1N>. rgb+1R9(1R9(1R9. rgb+9==(9==(9==. rgb+9=N(9=N(9=N. rgb+91;(91;(91;. rgb+99>(99>(99>. rgb+939(939(939. rgb+9>=(9>=(9>=. rgb+9>N(9>N(9>N. rgb+9II(9II(9II.

Web $a)e 'olors?


*ome years ago( &hen %omputers supported max 9I; di!!erent %olors( a list o! 91; 82eb *a!e Colors8 &as suggested as a 2eb standard( reserving >= !ixed system %olors" #he 91; %ross:bro&ser %olor palette &as %reated to ensure that all %omputers &ould display the %olors %orre%tly &hen running a 9I; %olor palette"

#his is not important today( sin%e most %omputers %an display millions o! di!!erent %olors" )ny&ay( here is the list/ ====== ==33== ==;;== ==RR== ==CC== ==FF== 33==== 3333== 33;;== 33RR== 33CC== 33FF== ;;==== ;;33== ;;;;== ;;RR== ;;CC== ;;FF== RR==== RR33== RR;;== RRRR== RRCC== RRFF== CC==== CC33== CC;;== CCRR== CCCC== CCFF== FF==== FF33== ====33 ==3333 ==;;33 ==RR33 ==CC33 ==FF33 33==33 333333 33;;33 33RR33 33CC33 33FF33 ;;==33 ;;3333 ;;;;33 ;;RR33 ;;CC33 ;;FF33 RR==33 RR3333 RR;;33 RRRR33 RRCC33 RRFF33 CC==33 CC3333 CC;;33 CCRR33 CCCC33 CCFF33 FF==33 FF3333 ====;; ==33;; ==;;;; ==RR;; ==CC;; ==FF;; 33==;; 3333;; 33;;;; 33RR;; 33CC;; 33FF;; ;;==;; ;;33;; ;;;;;; ;;RR;; ;;CC;; ;;FF;; RR==;; RR33;; RR;;;; RRRR;; RRCC;; RRFF;; CC==;; CC33;; CC;;;; CCRR;; CCCC;; CCFF;; FF==;; FF33;; ====RR ==33RR ==;;RR ==RRRR ==CCRR ==FFRR 33==RR 3333RR 33;;RR 33RRRR 33CCRR 33FFRR ;;==RR ;;33RR ;;;;RR ;;RRRR ;;CCRR ;;FFRR RR==RR RR33RR RR;;RR RRRRRR RRCCRR RRFFRR CC==RR CC33RR CC;;RR CCRRRR CCCCRR CCFFRR FF==RR FF33RR ====CC ==33CC ==;;CC ==RRCC ==CCCC ==FFCC 33==CC 3333CC 33;;CC 33RRCC 33CCCC 33FFCC ;;==CC ;;33CC ;;;;CC ;;RRCC ;;CCCC ;;FFCC RR==CC RR33CC RR;;CC RRRRCC RRCCCC RRFFCC CC==CC CC33CC CC;;CC CCRRCC CCCCCC CCFFCC FF==CC FF33CC ====FF ==33FF ==;;FF ==RRFF ==CCFF ==FFFF 33==FF 3333FF 33;;FF 33RRFF 33CCFF 33FFFF ;;==FF ;;33FF ;;;;FF ;;RRFF ;;CCFF ;;FFFF RR==FF RR33FF RR;;FF RRRRFF RRCCFF RRFFFF CC==FF CC33FF CC;;FF CCRRFF CCCCFF CCFFFF FF==FF FF33FF

FF;;== FFRR== FFCC== FFFF==

FF;;33 FFRR33 FFCC33 FFFF33

FF;;;; FFRR;; FFCC;; FFFF;;

FF;;RR FFRRRR FFCCRR FFFFRR

FF;;CC FFRRCC FFCCCC FFFFCC

FF;;FF FFRRFF FFCCFF FFFFFF

HTML 'olor &ames


Previous Next Chapter

'olor &ames $upported b* 7ll 0ro!sers


1>P %olor names are de!ined in the H#M$ and C** %olor spe%i!i%ation +1P standard %olors plus 13= more." #he table belo& lists them all( along &ith their hexade%imal values" Tip/ #he 1P standard %olors are/ aAua( bla%'( blue( !u%hsia( gray( grey( green( lime( maroon( navy( olive( purple( red( silver( teal( &hite( and yello&" Cli%' on a %olor name +or a hex value. to vie& the %olor as the ba%'ground:%olor along &ith di!!erent text %olors/

$orted b* 'olor &ame


*ame list sorted by hex values 'olor &ame )li%eDlue )ntiAue2hite )Aua )Auamarine )?ure Deige DisAue Dla%' Dlan%hed)lmond HEC LF=FNFF LF)-D4P L==FFFF LPFFF4> LF=FFFF LFIFI4C LFF->C> L====== LFF-DC4 'olor $hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix

Dlue Dlue5iolet Dro&n Durly2ood CadetDlue Chartreuse Cho%olate Coral Corn!lo&erDlue Cornsil' Crimson Cyan 4ar'Dlue 4ar'Cyan 4ar'Colden7od 4ar'Cray 4ar'Crey 4ar'Creen 4ar'Sha'i 4ar'Magenta 4ar'MliveCreen 4ar'orange 4ar'Mr%hid 4ar'7ed 4ar'*almon 4ar'*eaCreen 4ar'*lateDlue 4ar'*lateCray 4ar'*lateCrey 4ar'#urAuoise 4ar'5iolet 4eepPin' 4eep*'yDlue 4imCray

L====FF LN)9D-9 L)I9)9) L4-DNNP LIFR-)= LPFFF== L49;R1LFFPFI= L;>RI-4 LFFFN4C L4C1>3C L==FFFF L====ND L==NDND LDNN;=D L)R)R)R L)R)R)R L==;>== LD4DP;D LND==ND LII;D9F LFFNC== LRR39CC LND==== L-RR;P) LNFDCNF L>N34ND L9F>F>F L9F>F>F L==C-41 LR>==43 LFF1>R3 L==DFFF L;R;R;R

*hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix

4imCrey 4odgerDlue FireDri%' Floral2hite ForestCreen Fu%hsia Cainsboro Chost2hite Cold Colden7od Cray Crey Creen Creen0ello& Honey4e& HotPin' ,ndian7ed ,ndigo ,vory Sha'i $avender $avenderDlush $a&nCreen $emonChi!!on $ightDlue $ightCoral $ightCyan $ightCray $ightCrey $ightCreen $ightPin' $ight*almon $ight*eaCreen

L;R;R;R L1-R=FF LD99999 LFFF)F= L99ND99 LFF==FF L4C4C4C LFNFNFF LFF4P== L4))I9= LN=N=N= LN=N=N= L==N=== L)4FF9F LF=FFF= LFF;RD> LC4ICIC L>D==N9 LFFFFF= LF=-;NC L-;-;F) LFFF=FI LPCFC== LFFF)C4 L)44N-; LF=N=N= L-=FFFF L434343 L434343 LR=--R= LFFD;C1 LFF)=P) L9=D9))

*hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix

$ightColden7od0ello& LF)F)49

$ight*'yDlue $ight*lateCray $ight*lateCrey $ight*teelDlue $ight0ello& $ime $imeCreen $inen Magenta Maroon Medium)AuaMarine MediumDlue MediumMr%hid MediumPurple Medium*eaCreen Medium*lateDlue Medium*pringCreen Medium#urAuoise Medium5iolet7ed MidnightDlue MintCream Misty7ose Mo%%asin Nava6o2hite Navy Mld$a%e Mlive Mlive4rab Mrange Mrange7ed Mr%hid PaleColden7od PaleCreen Pale#urAuoise

LNPC-F) LPPNNRR LPPNNRR LD=C>4LFFFF-= L==FF== L39C439 LF)F=-; LFF==FF LN===== L;;C4)) L====C4 LD)II43 LR3P=4N L3CD3P1 LPD;N-L==F)R) L>N41CC LCP1INI L1R1RP= LFIFFF) LFF->-1 LFF->DI LFF4-)4 L====N= LF4FI-; LN=N=== L;DN-93 LFF)I== LFF>I== L4)P=4; L---N)) LRNFDRN L)F----

*hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix

Pale5iolet7ed Papaya2hip Pea%hPu!! Peru Pin' Plum Po&derDlue Purple 7ed 7osyDro&n 7oyalDlue *addleDro&n *almon *andyDro&n *eaCreen *ea*hell *ienna *ilver *'yDlue *lateDlue *lateCray *lateCrey *no& *pringCreen *teelDlue #an #eal #histle #omato #urAuoise 5iolet 2heat 2hite 2hite*mo'e

L4NP=R3 LFF-F4I LFF4)DR LC4NI3F LFFC=CD L44)=44 LD=-=-; LN===N= LFF==== LDCNFNF L>1;R-1 LND>I13 LF)N=P9 LF>)>;= L9-NDIP LFFFI-L)=I994 LC=C=C= LNPC--D L;)I)C4 LP=N=R= LP=N=R= LFFF)F) L==FFPF L>;N9D> L49D>NC L==N=N= L4NDF4N LFF;3>P L>=-=4= L--N9-LFI4-D3 LFFFFFF LFIFIFI

*hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix

0ello& 0ello&Creen

LFFFF== LR)C439

*hades Mix *hades Mix

HTML 'olor ;alues


Previous Next Chapter

$orted b* Hex ;alue


*ame list sorted by %olor name 'olor &ame Dla%' Navy 4ar'Dlue MediumDlue Dlue 4ar'Creen Creen #eal 4ar'Cyan 4eep*'yDlue 4ar'#urAuoise Medium*pringCreen $ime *pringCreen )Aua Cyan MidnightDlue 4odgerDlue $ight*eaCreen ForestCreen *eaCreen 4ar'*lateCray HEC L====== L====N= L====ND L====C4 L====FF L==;>== L==N=== L==N=N= L==NDND L==DFFF L==C-41 L==F)R) L==FF== L==FFPF L==FFFF L==FFFF L1R1RP= L1-R=FF L9=D9)) L99ND99 L9-NDIP L9F>F>F 'olor $hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix

4ar'*lateCrey $imeCreen Medium*eaCreen #urAuoise 7oyalDlue *teelDlue 4ar'*lateDlue Medium#urAuoise ,ndigo 4ar'MliveCreen CadetDlue Corn!lo&erDlue Medium)AuaMarine 4imCray 4imCrey *lateDlue Mlive4rab *lateCray *lateCrey $ight*lateCray $ight*lateCrey Medium*lateDlue $a&nCreen Chartreuse )Auamarine Maroon Purple Mlive Cray Crey *'yDlue $ight*'yDlue Dlue5iolet 4ar'7ed

L9F>F>F L39C439 L3CD3P1 L>=-=4= L>1;R-1 L>;N9D> L>N34ND L>N41CC L>D==N9 LII;D9F LIFR-)= L;>RI-4 L;;C4)) L;R;R;R L;R;R;R L;)I)C4 L;DN-93 LP=N=R= LP=N=R= LPPNNRR LPPNNRR LPD;N-LPCFC== LPFFF== LPFFF4> LN===== LN===N= LN=N=== LN=N=N= LN=N=N= LNPC--D LNPC-F) LN)9D-9 LND====

*hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix

4ar'Magenta *addleDro&n 4ar'*eaCreen $ightCreen MediumPurple 4ar'5iolet PaleCreen 4ar'Mr%hid 0ello&Creen *ienna Dro&n 4ar'Cray 4ar'Crey $ightDlue Creen0ello& Pale#urAuoise $ight*teelDlue Po&derDlue FireDri%' 4ar'Colden7od MediumMr%hid 7osyDro&n 4ar'Sha'i *ilver Medium5iolet7ed ,ndian7ed Peru Cho%olate #an $ightCray $ightCrey Pale5iolet7ed #histle Mr%hid

LND==ND LND>I13 LNFDCNF LR=--R= LR3P=4N LR>==43 LRNFDRN LRR39CC LR)C439 L)=I994 L)I9)9) L)R)R)R L)R)R)R L)44N-; L)4FF9F L)F---LD=C>4LD=-=-; LD99999 LDNN;=D LD)II43 LDCNFNF LD4DP;D LC=C=C= LCP1INI LC4ICIC LC4NI3F L49;R1L49D>NC L434343 L434343 L4NP=R3 L4NDF4N L4)P=4;

*hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix

Colden7od Crimson Cainsboro Plum Durly2ood $ightCyan $avender 4ar'*almon 5iolet PaleColden7od $ightCoral Sha'i )li%eDlue Honey4e& )?ure *andyDro&n 2heat Deige 2hite*mo'e MintCream Chost2hite *almon )ntiAue2hite $inen Mld$a%e 7ed Fu%hsia Magenta 4eepPin' Mrange7ed #omato HotPin' Coral

L4))I9= L4C1>3C L4C4C4C L44)=44 L4-DNNP L-=FFFF L-;-;F) L-RR;P) L--N9-L---N)) LF=N=N= LF=-;NC LF=FNFF LF=FFF= LF=FFFF LF>)>;= LFI4-D3 LFIFI4C LFIFIFI LFIFFF) LFNFNFF LF)N=P9 LF)-D4P LF)F=-; LF4FI-; LFF==== LFF==FF LFF==FF LFF1>R3 LFF>I== LFF;3>P LFF;RD> LFFPFI=

*hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix

$ightColden7od0ello& LF)F)49

4ar'orange $ight*almon Mrange $ightPin' Pin' Cold Pea%hPu!! Nava6o2hite Mo%%asin DisAue Misty7ose Dlan%hed)lmond Papaya2hip $avenderDlush *ea*hell Cornsil' $emonChi!!on Floral2hite *no& 0ello& $ight0ello& ,vory 2hite

LFFNC== LFF)=P) LFF)I== LFFD;C1 LFFC=CD LFF4P== LFF4)DR LFF4-)4 LFF->DI LFF->C> LFF->-1 LFF-DC4 LFF-F4I LFFF=FI LFFFI-LFFFN4C LFFF)C4 LFFF)F= LFFF)F) LFFFF== LFFFF-= LFFFFF= LFFFFFF

*hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix *hades Mix