HTML

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

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
)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

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"

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
Example &or!egian Mountain Trip
#ry it yoursel!

,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."

&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

#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'

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"
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$"
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."

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

'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))
$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----
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
0ello& 0ello&Creen
LFFFF== LR)C439
*hades Mix *hades Mix
HTML 'olor ;alues

$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====
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;
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=
$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

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

HTML Introduction

Previous Next Chapter

HTML Documents = Web ages

HTML " #etting $tarted

What %ou &eed

'reate %our (!n Test Web

-se %our Test Web .or Learning

,HTM or ,HTML .ile Extension?

HTML 0asic " 1 Examples

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

$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>

HTML Element $*ntax

&ested HTML Elements

HTML Document Example

HTML Example Explained

Don6t .orget the End Tag

Empt* HTML Elements

HTML Tip/ -se Lo!ercase Tags

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

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

HTML Tip/ -se Lo!ercase 7ttributes

HTML 7ttributes <e)erence

For more in!ormation about standard attributes/

Headings 7re Important

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

Examples .rom This age

HTML Tag <e)erence

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

Don6t .orget the End Tag

HTML Line 0reaks

HTML (utput " -se)ul Tips

Examples .rom This age

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

HTML Tag <e)erence

HTML Text .ormatting

HTML Text .ormatting

This text is big

This is subscript and

HTML .ormatting Tags

Tr* it %oursel) " Examples

HTML Text .ormatting Tags

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

HTML 8'omputer (utput8 Tags

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

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

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

HTML $t*les " '$$

Look= $t*les and colors

#his text is 3= pixels high

$t*ling HTML !ith '$$

-sing the HTML $t*le 7ttribute

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

HTML $t*le Example " 0ackground 'olor

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

HTML $t*le Example " Text 7lignment

Deprecated Tags and 7ttributes

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

Tr* it %oursel) " Examples

HTML H*perlinks ?Links@

HTML Link $*ntax

HTML Links " The target 7ttribute

HTML Links " The name 7ttribute

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

hades Mix hades Mix