World Wide Web

From Wikipedia, the free encyclopedia

Jump to: navigation, search "The Web" and "WWW" redirect here. For other uses, see Web and WWW (disambiguation). For the world's first browser, see WorldWideWeb. Internet Portal

WWW's historical logo designed by Robert Cailliau The World Wide Web (or simply the "Web") is a system of interlinked, hypertext documents that runs over the Internet. With a Web browser, a user views Web pa es that may contain text, ima es, and other multimedia and navi ates between them usin hyperlinks. The Web was created around !""# by the $ritish Tim $erners%&ee and the $el ian 'obert (ailliau workin at ()'* in +eneva, ,wit-erland. ,ince then, $erners%&ee has played an active role in uidin the development of Web standards (such as the markup lan ua es in which Web pa es are composed), and in recent years has advocated his vision of a ,emantic Web.

Contents
[hide]

1 Basic terms !o" the Web "or#s $ Caching % !istory & Web standards ' Java and Java(cript ) (ociological implications * +ublishing Web pages , (tatistics 1- (peed issues 11 .in# rot 1 /cademic con0erences 1$ WWW pre0i1 in Web addresses 1% +ronunciation o0 2"""2 1& (tandards 1' (ee also 1) Re0erences 1* 31ternal lin#s
o

1*41 Wi#iboo#s

[edit] Basic terms

The World Wide Web is the combination of four basic ideas.

!yperte1t: a 0ormat o0 in0ormation "hich allo"s, in a computer environment, one to move 0rom one part o0 a document to another or 0rom one document to another through internal connections among these documents 5called 2hyperlin#s267 Resource 8denti0iers: uni9ue identi0iers used to locate a particular resource 5computer 0ile, document or other resource6 on the net"or# : this is commonly #no"n as a ;R. or ;R8, although the t"o have subtle technical di00erences7 <he Client:server model o0 computing: a system in "hich client so0t"are or a client computer ma#es re9uests o0 server so0t"are or a server computer that provides the client "ith resources or services, such as data or 0iles7 and =ar#up language: characters or codes embedded in te1t "hich indicate structure, semantic meaning, or advice on presentation4

/n the World Wide Web, a client pro ram called a user a ent retrieves information resources, such as Web pa es and other computer files, from Web servers usin their 0'&s. If the user a ent is a kind of Web browser, it displays the resources on a user1s computer. The user can then follow hyperlinks in each web pa e to other World Wide Web resources, whose location is embedded in the hyperlinks. It is also possible, for example by fillin in and submittin web forms, to post information back to a Web server for it to save or process in some way. Web pa es are often arran ed in collections of related material called "Web sites." The act of followin hyperlinks from one Web site to another is referred to as "browsing" or sometimes as "surfing" the Web. The phrase "surfin the Internet" was first made popular in print by 2ean 3rmour 4olly, a librarian, in an article called ",urfin the I*T)'*)T", published in the 0niversity of 5innesota Wilson Library Bulletin in 2une !""6. 3lthou h 4olly may have developed the phrase independently, sli htly earlier uses of similar terms appeared on 0senet in !""! and !""6, and some recollections claim it was also used verbally in the hacker community for a couple years before that.
7!8

9or more information on the distinction between the World Wide Web and the Internet itself:as in everyday use the two are sometimes confused:see ;ark internet where this is discussed in more detail. 3lthou h the )n lish word worldwide is normally written as one word (without a space or hyphen), the proper name World Wide Web and abbreviation WWW are now well%established even in formal )n lish. The earliest references to the Web called it the WorldWideWeb (an example of computer pro rammers1 fondness for (amel(ase) or the World-Wide Web (with a hyphen, this version of the name is the closest to normal )n lish usa e).

Ironically, the abbreviation "WWW" is somewhat impractical in )n lish as it contains two or three times as many syllables (dependin on accent) as the full term "World Wide Web", and thus takes lon er to say. 5ost people now say "triple 1w1" instead of "w,w,w", makin the abbreviation shorter and easier to say.

[edit] How the Web works

<iewin a Web pa e or other resource on the World Wide Web normally be ins either by typin the 0'& of the pa e into a Web browser, or by followin a hypertext link to that pa e or resource. The first step, behind the scenes, is for the server%name part of the 0'& to be resolved into an I4 address by the lobal, distributed Internet database known as the ;omain name system or ;*,. The browser then establishes a T(4 connection with the server at that I4 address. The next step is for an =TT4 re>uest to be sent to the Web server, re>uestin the resource. In the case of a typical Web pa e, the =T5& text is first re>uested and parsed by the browser, which then makes additional re>uests for raphics and any other files that form a part of the pa e in >uick succession. When considerin web site popularity statistics, these additional file re>uests ive rise to the difference between one sin le 1pa e view1 and an associated number of server 1hits1. The Web browser then renders the pa e as described by the =T5&, (,, and other files received, incorporatin the ima es and other resources as necessary. This produces the on%screen pa e that the viewer sees. 5ost Web pa es will themselves contain hyperlinks to other related pa es and perhaps to downloads, source documents, definitions and other Web resources. ,uch a collection of useful, related resources, interconnected via hypertext links, is what has been dubbed a 1web1 of information. 5akin it available on the Internet created what Tim $erners%&ee first called the WorldWideWeb (note the name1s use of (amel(ase, subse>uently discarded) in !""#.768

Introduction to HTML
What is an HTML File?
=T5& stands for Hyper Text Markup Lan ua e 3n =T5& file is a text file containin small markup tags The markup ta s tell the Web browser how to displa 3n =T5& file must have an htm or html file extension 3n =T5& file can be created usin a simple te!t editor the pa e

"o #ou Want to Tr $t?

If you are runnin Windows, start *otepad. If you are on a 5ac, start ,impleText. In /,? start Text)dit and chan e the followin preferences. /pen the the "9ormat" menu and select "4lain text" instead of "'ich text". Then open the "4references" window under the "Text )dit" menu and select "I nore rich text commands in =T5& files". @our =T5& code will probably not work if you do not chan e the preferences aboveA Type in the followin text.

<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>
,ave the file as "mypa e.htm". ,tart your Internet browser. ,elect "/pen" (or "/pen 4a e") in the 9ile menu of your browser. 3 dialo box will appear. ,elect "$rowse" (or "(hoose 9ile") and locate the =T5& file you Bust created % "mypa e.htm" % select it and click "/pen". *ow you should see an address in the dialo box, for example "(.C5y;ocumentsCmypa e.htm". (lick /D, and the browser will display the pa e.

%!ample %!plained
The first ta in your =T5& document is EhtmlF. This ta tells your browser that this is the start of an =T5& document. The last ta in your document is EGhtmlF. This ta tells your browser that this is the end of the =T5& document. The text between the EheadF ta and the EGheadF ta is header information. =eader information is not displayed in the browser window. The text between the EtitleF ta s is the title of your document. The title is displayed in your browser1s caption. The text between the EbodyF ta s is the text that will be displayed in your browser.

The text between the EbF and EGbF ta s will be displayed in a bold font.

HTM or HTML %!tension?

When you save an =T5& file, you can use either the .htm or the .html extension. We have used .htm in our examples. It mi ht be a bad habit inherited from the past when some of the commonly used software only allowed three letter extensions. With newer software we think it will be perfectly safe to use .html.

&ote on HTML %ditors'

@ou can easily edit =T5& files usin a W@,IW@+ (what you see is what you et) editor like 9ront4a e or ;reamweaver, instead of writin your markup ta s in a plain text file. =owever, if you want to be a skillful Web developer, we stron ly recommend that you use a plain text editor to learn your primer =T5&.

Fre(uentl )sked *uestions

*' )+ter $ ha,e edited an HTML +ile- $ cannot ,iew the result in m browser. Wh ? )' 5ake sure that you have saved the file with a proper name and extension like "c.Cmypa e.htm". 3lso make sure that you use the same name when you open the file in your browser. *' $ ha,e edited an HTML +ile- but the changes don/t show in the browser. Wh ? )' 3 browser caches pa es so it doesn1t have to read the same pa e twice. When you have modified a pa e, the browser doesn1t know that. 0se the browser1s refreshGreload button to force the browser to reload the pa e. *' What browser should $ use? )' @ou can do all the trainin with all of the well%known browsers, like Internet )xplorer, 9irefox, *etscape, or /pera. =owever, some of the examples in our advanced classes re>uire the latest versions of the browsers. *' "oes m computer ha,e to run Windows? What about a Mac? )' @ou can do all your trainin on a non%Windows computer like a 5ac.

HTML documents are te!t +iles made up o+ HTML elements. HTML elements are de+ined using HTML tags.

HTML Tags
=T5& ta s are used to mark%up =T5& elements =T5& ta s are surrounded by the two characters 0 and 1 The surroundin characters are called angle brackets =T5& ta s normally come in pairs like EbF and EGbF The first ta in a pair is the start tag- the second ta is the end tag The text between the start and end ta s is the element content =T5& ta s are not case sensiti,e- EbF means the same as E$F

HTML %lements
'emember the =T5& example from the previous pa e.

<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>
This is an =T5& element.

<b>This text is bold</b>

The =T5& element starts with a start tag. EbF The content of the =T5& element is. This text is bold The =T5& element ends with an end tag. EGbF The purpose of the EbF ta is to define an =T5& element that should be displayed as bold. This is also an =T5& element.

<body> This is my first homepage. <b>This text is bold</b> </body>

This =T5& element starts with the start ta EbodyF, and ends with the end ta EGbodyF. The purpose of the EbodyF ta is to define the =T5& element that contains the body of the =T5& document.

Wh do We 2se Lowercase Tags?

We have Bust said that =T5& ta s are not case sensitive. E$F means the same as EbF. If you surf the Web, you will notice that plenty of web sites use uppercase =T5& ta s in their source code. We always use lowercase ta s. WhyH

If you want to follow the latest web standards, you should always use lowercase ta s. The World Wide Web (onsortium (WI() recommends lowercase ta s in their =T5& J recommendation, and ?=T5& (the next eneration =T5&) demands lowercase ta s.

Tag )ttributes
Ta s can have attributes. 3ttributes provide additional information to an =T5& element. The followin ta defines an =T5& table. EtableF. With an added border attribute, you can tell the browser that the table should have no borders. Etable borderK"#"F 3ttributes always come in nameGvalue pairs like this. nameK"value". 3ttributes are always specified in the start ta of an =T5& element. 3ttributes and attribute values are also case%insensitive. =owever, the World Wide Web (onsortium (WI() recommends lowercase attributesGattribute values in their =T5& J recommendation, and ?=T5& demands lowercase attributesGattribute values.

)lwa s *uote )ttribute 3alues

3ttribute values should always be enclosed in >uotes. ;ouble style >uotes are the most common, but sin le style >uotes are also allowed. In some rare situations, like when the attribute value itself contains >uotes, it is necessary to use sin le >uotes. nameK12ohn ",hot+un" *elson1

The most important tags in HTML are tags that de+ine headings- paragraphs and line breaks. The best wa to learn HTML is to work with e!amples. We ha,e created a ,er nice HTML editor +or ou. With this editor- ou can edit the HTML source code i+ ou like- and click on a test button to ,iew the result.

Tr it #oursel+ 4 %!amples
3 very simple =T5& document This example is a very simple =T5& document, with only a minimum of =T5& ta s. It demonstrates how the text inside a body element is displayed in the browser.

,imple para raphs This example demonstrates how the text inside para raph elements is displayed in the browser. (@ou can find more examples at the bottom of this pa e)

Headings
=eadin s are defined with the Eh!F to EhLF ta s. Eh!F defines the lar est headin . EhLF defines the smallest headin .

<h1>This <h2>This <h3>This <h4>This <h5>This <h6>This

is is is is is is

a a a a a a

heading</h1> heading</h2> heading</h3> heading</h4> heading</h5> heading</h6>

=T5& automatically adds an extra blank line before and after a headin .

5aragraphs
4ara raphs are defined with the EpF ta .

<p>This is a paragraph</p> <p>This is another paragraph</p>

=T5& automatically adds an extra blank line before and after a para raph.

Line Breaks
The EbrF ta is used when you want to end a line, but don1t want to start a new para raph. The EbrF ta forces a line break wherever you place it.

<p>This <br> is a para<br>graph with line brea s</p>

The EbrF ta is an empty ta . It has no closin ta .

Comments in HTML
The comment ta is used to insert a comment in the =T5& source code. 3 comment will be i nored by the browser. @ou can use comments to explain your code, which can help you when you edit the source code at a later date.

<!"" This is a #omment "">

*ote that you need an exclamation point after the openin bracket, but not before the closin bracket.

Basic &otes 4 2se+ul Tips

When you write =T5& text, you can never be sure how the text is displayed in another browser. ,ome people have lar e computer displays, some have small. The text will be reformatted every time the user resi-es his window. *ever try to format the text in your editor by addin empty lines and spaces to the text.

=T5& will truncate the spaces in your text. 3ny number of spaces count as one. ,ome extra information. In =T5& a new line counts as one space. 0sin empty para raphs EpF to insert blank lines is a bad habit. 0se the EbrF ta instead. ($ut don1t use the EbrF ta to create lists. Wait until you have learned about =T5& lists.) @ou mi ht have noticed that para raphs can be written without the closin ta EGpF. ;on1t rely on it. The next version of =T5& will not allow you to skip 3*@ closin ta s. =T5& automatically adds an extra blank line before and after some elements, like before and after a para raph, and before and after a headin . We use a hori-ontal rule (the EhrF ta ), to separate the sections in our tutorials.

HTML Text Formatting

HTML de+ines a lot o+ elements +or +ormatting output- like bold or italic te!t. Below are a lot o+ e!amples that ou can tr out oursel+'

%!amples
Text formattin This example demonstrates how you can format text in an =T5& document. 4reformatted text This example demonstrates how you can control the line breaks and spaces with the pre ta . "(omputer output" ta s This example demonstrates how different "computer output" ta s will be displayed. 3ddress This example demonstrates how to write an address in an =T5& document. 3bbreviations and acronyms This example demonstrates how to handle an abbreviation or an acronym.

Text direction This example demonstrates how to chan e the text direction. Muotations This example demonstrates how to handle lon and short >uotations. ;eleted and inserted text This example demonstrates how to mark a text that is deleted or inserted to a document.

How to 3iew HTML 6ource

=ave you ever seen a Web pa e and wondered "=eyA =ow did do they do thatH" To find out, click the <I)W option in your browser1s toolbar and select ,/0'() or 43+) ,/0'(). This will open a window that shows you the =T5& code of the pa e.

Te!t Formatting Tags

Tag EbF Ebi F EemF EiF EsmallF Estron F EsubF EsupF EinsF EdelF EsF EstrikeF EuF "escription ;efines bold text ;efines bi text ;efines emphasi-ed text ;efines italic text ;efines small text ;efines stron text ;efines subscripted text ;efines superscripted text ;efines inserted text ;efines deleted text ;eprecated. 0se EdelF instead ;eprecated. 0se EdelF instead ;eprecated. 0se styles instead

7Computer 8utput7 Tags

Tag EcodeF EkbdF EsampF EttF EvarF EpreF Elistin F EplaintextF ExmpF "escription ;efines computer code text ;efines keyboard text ;efines sample computer code ;efines teletype text ;efines a variable ;efines preformatted text ;eprecated. 0se EpreF instead ;eprecated. 0se EpreF instead ;eprecated. 0se EpreF instead

Citations- *uotations- and "e+inition Tags

Tag EabbrF EacronymF EaddressF EbdoF Eblock>uoteF E>F EciteF "escription ;efines an abbreviation ;efines an acronym ;efines an address element ;efines the text direction ;efines a lon >uotation ;efines a short >uotation ;efines a citation

EdfnF

;efines a definition term

HTML Character Entities

6ome characters like the 0 character- ha,e a special meaning in HTML- and there+ore cannot be used in the te!t. To displa a less than sign 90: in HTML- we ha,e to use a character entit .

Character %ntities
,ome characters have a special meanin in =T5&, like the less than si n (E) that defines the start of an =T5& ta . If we want the browser to actually display these characters we must insert character entities in the =T5& source. 3 character entity has three parts. an ampersand (N), an entity name or a O and an entity number, and finally a semicolon (P). To display a less than si n in an =T5& document we must write. ;lt< or ;=>?< The advanta e of usin a name instead of a number is that a name is easier to remember. The disadvanta e is that not all browsers support the newest entity names, while the support for entity numbers is very ood in almost all browsers. &ote that the entities are case sensitive. This example lets you experiment with character entities. (haracter )ntities I) only

&on4breaking 6pace

The most common character entity in =T5& is the non%breakin space. *ormally =T5& will truncate spaces in your text. If you write !# spaces in your text =T5& will remove " of them. To add spaces to your text, use the NnbspP character entity.

The Most Common Character %ntities'

@esult E F N " 1 "escription non%breakin space less than reater than ampersand >uotation mark apostrophe %ntit &ame NnbspP NltP N tP NampP N>uotP NaposP (does not work in I)) %ntit &umber NO!L#P NOL#P NOL6P NOIQP NOIJP NOI"P

6ome 8ther Commonl 2sed Character %ntities'

@esult R S T V X Y Z [ "escription cent pound yen section copyri ht re istered trademark multiplication division %ntit &ame NcentP NpoundP NyenP NsectP NcopyP Nre P NtimesP NdivideP %ntit &umber NO!L6P NO!LIP NO!LUP NO!LWP NO!L"P NO!WJP NO6!UP NO6JWP

HTML Links
HTML uses a h perlink to link to another document on the Web.

%!amples
(reate hyperlinks This example demonstrates how to create links in an =T5& document.

3n ima e as a link This example demonstrates how to use an ima e as a link. (@ou can find more examples at the bottom of this pa e)

The )nchor Tag and the Hre+ )ttribute

HTML uses the 0a1 9anchor: tag to create a link to another document. 3n anchor can point to any resource on the Web. an =T5& pa e, an ima e, a sound file, a movie, etc. The syntax of creatin an anchor.

<a href$%&rl%>Text to be displayed</a>

The EaF ta is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor ta will be displayed as a hyperlink. This anchor defines a link to WI,chools.

<a href$%http'//www.w3s#hools.#om/%>(isit )3*#hools!</a>

The line above will look like this in a browser. <isit WI,choolsA

The Target )ttribute

With the tar et attribute, you can define where the linked document will be opened. The line below will open the document in a new browser window.

<a href$%http'//www.w3s#hools.#om/% target$%+blan %>(isit )3*#hools!</a>

The )nchor Tag and the &ame )ttribute

The name attribute is used to create a named anchor. When usin named anchors we can create links that can Bump directly into a specific section on a pa e, instead of lettin the user scroll around to find what heGshe is lookin for. $elow is the syntax of a named anchor.

<a name$%label%>Text to be displayed</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use. The line below defines a named anchor.

<a name$%tips%>,sef&l Tips *e#tion</a>

@ou should notice that a named anchor is not displayed in a special way.

To link directly to the "tips" section, add a O si n and the name of the anchor to the end of a 0'&, like this.

<a href$%http'//www.w3s#hools.#om/html+lin s.asp-tips%> .&mp to the ,sef&l Tips *e#tion</a>

3 hyperlink to the 0seful Tips ,ection from WIT=I* the file "html\links.asp" will look like this.

<a href$%-tips%>.&mp to the ,sef&l Tips *e#tion</a>

Basic &otes 4 2se+ul Tips

3lways add a trailin slash to subfolder references. If you link like this. hrefK"http.GGwww.wIschools.comGhtml", you will enerate two =TT4 re>uests to the server, because the server will add a slash to the address and create a new re>uest like this. hrefK"http.GGwww.wIschools.comGhtmlG" *amed anchors are often used to create "table of contents" at the be innin of a lar e document. )ach chapter within the document is iven a named anchor, and links to each of these anchors are put at the top of the document. If a browser cannot find a named anchor that has been specified, it oes to the top of the document. *o error occurs.

More %!amples
/pen a link in a new browser window This example demonstrates how to link to another pa e by openin a new window, so that the visitor does not have to leave your Web site. &ink to a location on the same pa e This example demonstrates how to use a link to Bump to another part of a document. $reak out of a frame This example demonstrates how to break out of a frame, if your site is locked in a frame. (reate a mailto link This example demonstrates how to link to a mail messa e (will only work if you have mail installed). (reate a mailto link 6 This example demonstrates a more complicated mailto link.

Link Tags
Tag EaF "escription ;efines an anchor

HTML Frames
With +rames- ou can displa more than one Web page in the same browser window.

%!amples

<ertical frameset This example demonstrates how to make a vertical frameset with three different documents. =ori-ontal frameset This example demonstrates how to make a hori-ontal frameset with three different documents. (@ou can find more examples at the bottom of this pa e)

Frames
With frames, you can display more than one =T5& document in the same browser window. )ach =T5& document is called a frame, and each frame is independent of the others. The disadvanta es of usin frames are.

The web developer must keep track of more =T5& documents It is difficult to print the entire pa e

The Frameset Tag

The EframesetF ta defines how to divide the window into frames )ach frameset defines a set of rows or columns The values of the rowsGcolumns indicate the amount of screen area each rowGcolumn will occupy

The Frame Tag

The EframeF ta defines what =T5& document to put into each frame

In the example below we have a frameset with two columns. The first column is set to 6U] of the width of the browser window. The second column is set to WU] of the width of the browser window. The =T5& document "frame\a.htm" is put into the first column, and the =T5& document "frame\b.htm" is put into the second column.

<frameset #ols$%25/015/%> <frame sr#$%frame+a.htm%> <frame sr#$%frame+b.htm%> </frameset>

Basic &otes 4 2se+ul Tips

If a frame has visible borders, the user can resi-e it by dra in the border. To prevent a user from doin this, you can add noresi-eK"noresi-e" to the EframeF ta . 3dd the EnoframesF ta for browsers that do not support frames. $mportant' @ou cannot use the EbodyFEGbodyF ta s to ether with the EframesetFEGframesetF ta sA =owever, if you add a EnoframesF ta containin some text for browsers that do not support frames, you will have to enclose the text in EbodyFEGbodyF ta sA ,ee how it is done in the first example below.

More %!amples
=ow to use the EnoframesF ta This example demonstrates how to use the EnoframesF ta .

5ixed frameset This example demonstrates how to make a frameset with three documents, and how to mix them in rows and columns. 9rameset with noresi-eK"noresi-e" This example demonstrates the noresi-e attribute. The frames are not resi-able. 5ove the mouse over the borders between the frames and notice that you can not move the borders. *avi ation frame This example demonstrates how to make a navi ation frame. The navi ation frame contains a list of links with the second frame as the tar et. The file called "tryhtml\contents.htm" contains three links. The source code of the links. Ea href K"frame\a.htm" tar et K"showframe"F9rame aEGaFEbrF Ea href K"frame\b.htm" tar et K"showframe"F9rame bEGaFEbrF Ea href K"frame\c.htm" tar et K"showframe"F9rame cEGaF The second frame will show the linked document. Inline frame This example demonstrates how to create an inline frame (a frame inside an =T5& pa e). 2ump to a specified section within a frame This example demonstrates two frames. /ne of the frames has a source to a specified section in a file. The specified section is made with Ea nameK"(!#"F in the "link.htm" file. 2ump to a specified section with frame navi ation This example demonstrates two frames. The navi ation frame (content.htm) to the left contains a list of links with the second frame (link.htm) as a tar et. The second frame shows the linked document. /ne of the links in the navi ation frame is linked to a specified section in the tar et file. The =T5& code in the file "content.htm" looks like this. Ea href K"link.htm" tar et K"showframe"F&ink without 3nchorEGaFEbrFEa href K"link.htmO(!#" tar et K"showframe"F&ink with 3nchorEGaF.

Frame Tags
Tag EframesetF EframeF EnoframesF EiframeF "escription ;efines a set of frames ;efines a sub window (a frame) ;efines a noframe section for browsers that do not handle frames ;efines an inline sub window (frame)

HTML Tables
With HTML ou can create tables.

%!amples
Tables This example demonstrates how to create tables in an =T5& document.

Table borders This example demonstrates different table borders. (@ou can find more examples at the bottom of this pa e)

Tables
Tables are defined with the EtableF ta . 3 table is divided into rows (with the EtrF ta ), and each row is divided into data cells (with the EtdF ta ). The letters td stands for "table data," which is the content of a data cell. 3 data cell can contain text, ima es, lists, para raphs, forms, hori-ontal rules, tables, etc.

<table border$%1%> <tr> <td>row 10 #ell 1</td> <td>row 10 #ell 2</td> </tr> <tr> <td>row 20 #ell 1</td> <td>row 20 #ell 2</td> </tr> </table>
=ow it looks in a browser. row !, cell ! row !, cell 6 row 6, cell ! row 6, cell 6

Tables and the Border )ttribute

If you do not specify a border attribute the table will be displayed without any borders. ,ometimes this can be useful, but most of the time, you want the borders to show. To display a table with borders, you will have to use the border attribute.

<table border$%1%> <tr> <td>2ow 10 #ell 1</td> <td>2ow 10 #ell 2</td> </tr> </table>

Headings in a Table
=eadin s in a table are defined with the EthF ta .

<table border$%1%> <tr> <th>3eading</th> <th>4nother 3eading</th> </tr> <tr> <td>row 10 #ell 1</td> <td>row 10 #ell 2</td> </tr> <tr> <td>row 20 #ell 1</td> <td>row 20 #ell 2</td> </tr>

</table>
=ow it looks in a browser. Heading )nother Heading

row !, cell ! row !, cell 6 row 6, cell ! row 6, cell 6

%mpt Cells in a Table

Table cells with no content are not displayed very well in most browsers.

<table border$%1%> <tr> <td>row 10 #ell 1</td> <td>row 10 #ell 2</td> </tr> <tr> <td>row 20 #ell 1</td> <td></td> </tr> </table>
=ow it looks in a browser. row !, cell ! row !, cell 6 row 6, cell ! *ote that the borders around the empty table cell are missin (*$A 5o-illa 9irefox displays the border). To avoid this, add a non%breakin space (NnbspP) to empty data cells, to make the borders visible.

<table border$%1%> <tr> <td>row 10 #ell 1</td> <td>row 10 #ell 2</td> </tr> <tr> <td>row 20 #ell 1</td> <td>5nbsp6</td> </tr> </table>
=ow it looks in a browser. row !, cell ! row !, cell 6 row 6, cell !

Basic &otes 4 2se+ul Tips

The EtheadF,EtbodyF and EtfootF elements are seldom used, because of bad browser support. )xpect this to chan e in future versions of ?=T5&. If you have Internet )xplorer U.# or newer, you can view a workin example in our ?5& tutorial.

More %!amples

Table with no border This example demonstrates a table with no borders. =eadin s in a table This example demonstrates how to display table headers. )mpty cells This example demonstrates how to use "NnbspP" to handle cells that have no content. Table with a caption This example demonstrates a table with a caption. Table cells that span more than one rowGcolumn This example demonstrates how to define table cells that span more than one row or one column. Ta s inside a table This example demonstrates how to display elements inside other elements. (ell paddin This example demonstrates how to use cellpaddin to create more white space between the cell content and its borders. (ell spacin This example demonstrates how to use cellspacin to increase the distance between the cells. 3dd a back round color or a back round ima e to a table This example demonstrates how to add a back round to a table. 3dd a back round color or a back round ima e to a table cell This example demonstrates how to add a back round to one or more table cells. 3li n the content in a table cell This example demonstrates how to use the "ali n" attribute to ali n the content of cells, to create a "nice%lookin " table. The frame attribute This example demonstrates how to use the "frame" attribute to control the borders around the table. The frame and border attributes =ow to use the "frame" and "border" attributes to control the borders around the table.

Table Tags
Tag EtableF EthF EtrF EtdF EcaptionF Ecol roupF EcolF EtheadF EtbodyF EtfootF "escription ;efines a table ;efines a table header ;efines a table row ;efines a table cell ;efines a table caption ;efines roups of table columns ;efines the attribute values for one or more columns in a table ;efines a table head ;efines a table body ;efines a table footer

HTML Lists
HTML supports ordered- unordered and de+inition lists.

%!amples
3n unordered list This example demonstrates an unordered list. 3n ordered list This example demonstrates an ordered list. (@ou can find more examples at the bottom of this pa e)

2nordered Lists
3n unordered list is a list of items. The list items are marked with bullets (typically small black circles). 3n unordered list starts with the EulF ta . )ach list item starts with the EliF ta .

<&l> <li>7offee</li> <li>8il </li> </&l>

=ere is how it looks in a browser.

(offee 5ilk

Inside a list item you can put para raphs, line breaks, ima es, links, other lists, etc.

8rdered Lists
3n ordered list is also a list of items. The list items are marked with numbers. 3n ordered list starts with the EolF ta . )ach list item starts with the EliF ta .

<ol> <li>7offee</li> <li>8il </li> </ol>

=ere is how it looks in a browser. !. 6. (offee 5ilk

Inside a list item you can put para raphs, line breaks, ima es, links, other lists, etc.

"e+inition Lists
3 definition list is not a list of items. This is a list of terms and explanation of the terms. 3 definition list starts with the EdlF ta . )ach definition%list term starts with the EdtF ta . )ach definition%list definition starts with the EddF ta .

<dl> <dt>7offee</dt> <dd>9la# hot drin </dd> <dt>8il </dt> <dd>)hite #old drin </dd> </dl>
=ere is how it looks in a browser. (offee 5ilk $lack hot drink White cold drink Inside a definition%list definition (the EddF ta ) you can put para raphs, line breaks, ima es, links, other lists, etc.

More %!amples
;ifferent types of ordered lists This example demonstrates different types of ordered lists. ;ifferent types of unordered &ists This example demonstrates different types of unordered lists. *ested list This example demonstrates how you can nest lists. *ested list 6 This example demonstrates a more complicated nested list. ;efinition list This example demonstrates a definition list.

List Tags
Tag EolF EulF "escription ;efines an ordered list ;efines an unordered list

EliF EdlF EdtF EddF EdirF EmenuF

;efines a list item ;efines a definition list ;efines a definition term ;efines a definition description ;eprecated. 0se EulF instead ;eprecated. 0se EulF instead

HTML Forms and Input

HTML Forms are used to select di++erent kinds o+ user input.

%!amples
Text fields This example demonstrates how to create text fields on an =T5& pa e. 3 user can write text in a text field. 4assword fields This example demonstrates how to create a password field on an =T5& pa e. (@ou can find more examples at the bottom of this pa e)

Forms
3 form is an area that can contain form elements. 9orm elements are elements that allow the user to enter information (like text fields, textarea fields, drop%down menus, radio buttons, checkboxes, etc.) in a form. 3 form is defined with the EformF ta .

<form> <inp&t> <inp&t> </form>

$nput

The most used form ta is the EinputF ta . The type of input is specified with the type attribute. The most commonly used input types are explained below.

Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form.

<form> :irst name' <inp&t type$%text% name$%firstname%> <br> ;ast name' <inp&t type$%text% name$%lastname%> </form>
=ow it looks in a browser.

9irst name. &ast name. *ote that the form itself is not visible. 3lso note that in most browsers, the width of the text field is 6# characters by default.

Radio Buttons
'adio $uttons are used when you want the user to select one of a limited number of choices.

<form> <inp&t type$%radio% name$%sex% <al&e$%male%> 8ale <br> <inp&t type$%radio% name$%sex% <al&e$%female%> :emale </form>
=ow it looks in a browser.

5ale 9emale *ote that only one option can be chosen.

Checkboxes
(heckboxes are used when you want the user to select one or more options of a limited number of choices.

<form> = ha<e a bi e' <inp&t type$%#he# box% name$%<ehi#le% <al&e$%9i e% /> <br /> = ha<e a #ar' <inp&t type$%#he# box% name$%<ehi#le% <al&e$%7ar% /> <br /> = ha<e an airplane' <inp&t type$%#he# box% name$%<ehi#le% <al&e$%4irplane% /> </form>
=ow it looks in a browser.

I have a bike. I have a car. I have an airplane.

The Form/s )ction )ttribute and the 6ubmit Button

When the user clicks on the ",ubmit" button, the content of the form is sent to another file. The form1s action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does somethin with the received input.

<form name$%inp&t% a#tion$%html+form+a#tion.asp% method$%get%> ,sername' <inp&t type$%text% name$%&ser%> <inp&t type$%s&bmit% <al&e$%*&bmit%> </form>
=ow it looks in a browser.
Submit

0sername.

If you type some characters in the text field above, and click the ",ubmit" button, you will send your input to a pa e called "html\form\action.asp". That pa e will show you the received input.

More %!amples
(heckboxes This example demonstrates how to create check%boxes on an =T5& pa e. 3 user can select or unselect a checkbox. 'adio buttons This example demonstrates how to create radio%buttons on an =T5& pa e. ,imple drop down box This example demonstrates how to create a simple drop%down box on an =T5& pa e. 3 drop%down box is a selectable list. 3nother drop down box This example demonstrates how to create a simple drop%down box with a pre%selected value. Textarea This example demonstrates how to create a text%area (a multi%line text input control). 3 user can write text in the text%area. In a text%area you can write an unlimited number of characters. (reate a button This example demonstrates how to create a button. /n the button you can define your own text. 9ieldset around data This example demonstrates how to draw a border with a caption around your data.

Form %!amples
9orm with input fields and a submit button This example demonstrates how to add a form to a pa e. The form contains two input fields and a submit button. 9orm with checkboxes This form contains two checkboxes, and a submit button.

9orm with radio buttons This form contains two radio buttons, and a submit button. ,end e%mail from a form This example demonstrates how to send e%mail from a form.

Form Tags
Tag EformF EinputF EtextareaF ElabelF EfieldsetF Ele endF EselectF Eopt roupF EoptionF EbuttonF EisindexF "escription ;efines a form for user input ;efines an input field ;efines a text%area (a multi%line text input control) ;efines a label to a control ;efines a fieldset ;efines a caption for a fieldset ;efines a selectable list (a drop%down box) ;efines an option roup ;efines an option in the drop%down box ;efines a push button ;eprecated. 0se EinputF instead

HTML Images
With HTML ou can displa images in a document.

%!amples
Insert ima es This example demonstrates how to display ima es in your Web pa e. Insert ima es from different locations This example demonstrates how to display ima es from another folder or another server in your Web pa e. (@ou can find more examples at the bottom of this pa e)

The $mage Tag and the 6rc )ttribute

In =T5&, ima es are defined with the Eim F ta . The Eim F ta is empty, which means that it contains attributes only and it has no closin ta .

To display an ima e on a pa e, you need to use the src attribute. ,rc stands for "source". The value of the src attribute is the 0'& of the ima e you want to display on your pa e. The syntax of definin an ima e.

<img sr#$%&rl%>
The 0'& points to the location where the ima e is stored. 3n ima e named "boat. if" located in the directory "ima es" on "www.wIschools.com" has the 0'&. http.GGwww.wIschools.comGima esGboat. if. The browser puts the ima e where the ima e ta occurs in the document. If you put an ima e ta between two para raphs, the browser shows the first para raph, then the ima e, and then the second para raph.

The )lt )ttribute

The alt attribute is used to define an "alternate text" for an ima e. The value of the alt attribute is an author%defined text.

<img sr#$%boat.gif% alt$%9ig 9oat%>

The "alt" attribute tells the reader what he or she is missin on a pa e if the browser can1t load ima es. The browser will then display the alternate text instead of the ima e. It is a ood practice to include the "alt" attribute for each ima e on a pa e, to improve the display and usefulness of your document for people who have text%only browsers.

Basic &otes 4 2se+ul Tips

If an =T5& file contains ten ima es % eleven files are re>uired to display the pa e ri ht. &oadin ima es take time, so my best advice is. 0se ima es carefully.

More %!amples
$ack round ima e This example demonstrates how to add a back round ima e to an =T5& pa e. 3li nin ima es This example demonstrates how to ali n an ima e within the text. &et the ima e float This example demonstrates how to let an ima e float to the left or ri ht of a para raph. 3dBust ima es to different si-es This example demonstrates how to adBust ima es to different si-es. ;isplay an alternate text for an ima e This example demonstrates how to display an alternate text for an ima e. The "alt" attribute tells the reader what he or she is missin on a pa e if the browser can1t load ima es. It is a ood practice to include the "alt" attribute for each ima e on a pa e. 5ake a hyperlink of an ima e This example demonstrates how to use an ima e as a link. (reate an ima e map This example demonstrates how to create an ima e map, with clickable re ions. )ach of the re ions is a hyperlink.

Turn an ima e into an ima e map This example demonstrates how to turn an ima e into an ima e map. @ou will see that if you move the mouse over the ima e, the coordinates will be displayed on the status bar.

$mage Tags
Tag Eim F EmapF EareaF "escription ;efines an ima e ;efines an ima e map ;efines a clickable area inside an ima e map

HTML Backgrounds
) good background can make a Web site look reall great.

%!amples
+ood back round and text color 3n example of a back round color and a text color that makes the text on the pa e easy to read. $ad back round and text color 3n example of a back round color and a text color that makes the text on the pa e difficult to read. (@ou can find more examples at the bottom of this pa e)

Backgrounds
The EbodyF ta has two attributes where you can specify back rounds. The back round can be a color or an ima e.

Bgcolor
The b color attribute specifies a back round%color for an =T5& pa e. The value of this attribute can be a hexadecimal number, an '+$ value, or a color name.

<body bg#olor$%->>>>>>%> <body bg#olor$%rgb?>0>0>@%> <body bg#olor$%bla# %>

The lines above all set the back round%color to black.

Background
The back round attribute specifies a back round%ima e for an =T5& pa e. The value of this attribute is the 0'& of the ima e you want to use. If the ima e is smaller than the browser window, the ima e will repeat itself until it fills the entire browser window.

<body ba# gro&nd$%#lo&ds.gif%> <body ba# gro&nd$%http'//www.w3s#hools.#om/#lo&ds.gif%>

The 0'& can be relative (as in the first line above) or absolute (as in the second line above). &ote' If you want to use a back round ima e, you should keep in mind.

Will the back round ima e increase the loadin time too muchH Will the back round ima e look ood with other ima es on the pa eH Will the back round ima e look ood with the text colors on the pa eH Will the back round ima e look ood when it is repeated on the pa eH Will the back round ima e take away the focus from the textH

Basic &otes 4 2se+ul Tips

The b color, back round, and the text attributes in the EbodyF ta are deprecated in the latest versions of =T5& (=T5& J and ?=T5&). The World Wide Web (onsortium (WI() has removed these attributes from its recommendations. ,tyle sheets ((,,) should be used instead (to define the layout and display properties of =T5& elements).

More %!amples
+ood back round ima e 3n example of a back round ima e and a text color that makes the text on the pa e easy to read. +ood back round ima e 6 3n example of a back round ima e and a text color that makes the text on the pa e easy to read. $ad back round ima e 3n example of a back round ima e and a text color that makes the text on the pa e very difficult to read.

Computer Aoke
6upport' "Type dir, space, a, colon." Customer' "With a space after 1space1H"

HTML Colors
Colors are displa ed combining @%"- B@%%&- and BL2% light sources.

Color 3alues
=T5& colors can be defined as a hexadecimal notation for the combination of 'ed, +reen, and $lue color values ('+$). The lowest value that can be iven to one li ht source is # (hex O##) and the hi hest value is 6UU (hex O99). The table below shows the result of combinin 'ed, +reen, and $lue li ht sources.. Color Color H%C O###### O99#### O##99## O####99 O9999## O##9999 O99##99 O(#(#(# Color @BB r b(#,#,#) r b(6UU,#,#) r b(#,6UU,#) r b(#,#,6UU) r b(6UU,6UU,#) r b(#,6UU,6UU) r b(6UU,#,6UU) r b(!"6,!"6,!"6)

O999999

r b(6UU,6UU,6UU)

WDC 6tandard Color &ames

WI( has listed !L color names that will validate with an =T5& validator. The color names are. a>ua, black, blue, fuchsia, ray, reen, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Cross4browser Color &ames

3 collection of nearly !U# color names are supported by all maBor browsers. <iew the cross%browser color names

Cross4browser Color 3alues

,ome years a o, when most computers only supported 6UL different colors, a list of 6!L Web ,afe (olors was su ested as a Web standard. The reason for this was that the 5icrosoft and 5ac operatin system used J# different "reserved" fixed system colors (about 6# each). We are not sure how important this is now, since most computers today have the ability to display millions of different colors, but the choice is left to you. The 6!L cross%browser color palette was created to ensure that all computers would display the colors correctly when runnin a 6UL color palette. ###### ##II## ##LL## ##""## ##((## ##99## II#### IIII## IILL## II""## II((## II99## LL#### LLII## LLLL## LL""## LL((## LL99## ""#### ""II## ""LL## """"## ""((## ""99## ####II ##IIII ##LLII ##""II ##((II ##99II II##II IIIIII IILLII II""II II((II II99II LL##II LLIIII LLLLII LL""II LL((II LL99II ""##II ""IIII ""LLII """"II ""((II ""99II ####LL ##IILL ##LLLL ##""LL ##((LL ##99LL II##LL IIIILL IILLLL II""LL II((LL II99LL LL##LL LLIILL LLLLLL LL""LL LL((LL LL99LL ""##LL ""IILL ""LLLL """"LL ""((LL ""99LL ####"" ##II"" ##LL"" ##"""" ##(("" ##99"" II##"" IIII"" IILL"" II"""" II(("" II99"" LL##"" LLII"" LLLL"" LL"""" LL(("" LL99"" ""##"" ""II"" ""LL"" """""" ""(("" ""99"" ####(( ##II(( ##LL(( ##""(( ##(((( ##99(( II##(( IIII(( IILL(( II""(( II(((( II99(( LL##(( LLII(( LLLL(( LL""(( LL(((( LL99(( ""##(( ""II(( ""LL(( """"(( ""(((( ""99(( ####99 ##II99 ##LL99 ##""99 ##((99 ##9999 II##99 IIII99 IILL99 II""99 II((99 II9999 LL##99 LLII99 LLLL99 LL""99 LL((99 LL9999 ""##99 ""II99 ""LL99 """"99 ""((99 ""9999

((#### ((II## ((LL## ((""## ((((## ((99## 99#### 99II## 99LL## 99""## 99((## 9999##

((##II ((IIII ((LLII ((""II ((((II ((99II 99##II 99IIII 99LLII 99""II 99((II 9999II

((##LL ((IILL ((LLLL ((""LL ((((LL ((99LL 99##LL 99IILL 99LLLL 99""LL 99((LL 9999LL

((##"" ((II"" ((LL"" (("""" (((("" ((99"" 99##"" 99II"" 99LL"" 99"""" 99(("" 9999""

((##(( ((II(( ((LL(( ((""(( (((((( ((99(( 99##(( 99II(( 99LL(( 99""(( 99(((( 9999((

((##99 ((II99 ((LL99 ((""99 ((((99 ((9999 99##99 99II99 99LL99 99""99 99((99 999999

HTML Color alues

Colors are displa ed combining @%"- B@%%&- and BL2% light sources.

Color 3alues
=T5& colors are defined usin a hexadecimal notation for the combination of 'ed, +reen, and $lue color values ('+$). The lowest value that can be iven to one of the li ht sources is # (hex O##). The hi hest value is 6UU (hex O99).

Turn 8++ the @ed

If you turn off the 'ed li ht completely, there are LUUIL different combination of +reen and $lue (6UL x 6UL) to experiment with. (lick here to see some of these combinations of +reen and $lue.

Turn 8n the @ed

$y settin the 'ed parameter to its maximum value, there are still LUUIL different combination of +reen and $lue (6UL x 6UL) to experiment with. (lick here to see some of these combinations of +reen and $lue.

E> Million "i++erent Colors

The combination of 'ed, +reen and $lue values from # to 6UU ives a total of more than !L million different colors to play with (6UL x 6UL x 6UL). 5ost modern monitors are capable of displayin at least !LIQJ different colors. If you look at the color table below, you will see the result of varyin the red li ht from # to 6UU, while keepin the reen and blue li ht at -ero. To see a full list of !LIQJ different colors based on red li ht varyin from # to 6UU, click on one of the hexadecimal or r b values below. @ed Light H%C O###### O#Q#### O!##### O!Q#### O6##### O6Q#### OI##### OIQ#### OJ##### OJQ#### OU##### OUQ#### OL##### OLQ#### OW##### OWQ#### OQ##### OQQ#### O"##### O"Q#### O3##### O3Q#### O$##### O$Q#### O(##### O(Q#### O;##### O;Q#### O)##### O)Q#### O9##### O9Q#### O99#### @BB r b(#,#,#) r b(Q,#,#) r b(!L,#,#) r b(6J,#,#) r b(I6,#,#) r b(J#,#,#) r b(JQ,#,#) r b(UL,#,#) r b(LJ,#,#) r b(W6,#,#) r b(Q#,#,#) r b(QQ,#,#) r b("L,#,#) r b(!#J,#,#) r b(!!6,#,#) r b(!6#,#,#) r b(!6Q,#,#) r b(!IL,#,#) r b(!JJ,#,#) r b(!U6,#,#) r b(!L#,#,#) r b(!LQ,#,#) r b(!WL,#,#) r b(!QJ,#,#) r b(!"6,#,#) r b(6##,#,#) r b(6#Q,#,#) r b(6!L,#,#) r b(66J,#,#) r b(6I6,#,#) r b(6J#,#,#) r b(6JQ,#,#) r b(6UU,#,#)

6hades o+ Bra
+ray colors are displayed usin an e>ual amount of power to all of the li ht sources. To make it easier for you to select the ri ht ray color we have compiled a table of ray shades for you. '+$(#,#,#) O######

'+$(Q,Q,Q) '+$(!L,!L,!L) '+$(6J,6J,6J) '+$(I6,I6,I6) '+$(J#,J#,J#) '+$(JQ,JQ,JQ) '+$(UL,UL,UL) '+$(LJ,LJ,LJ) '+$(W6,W6,W6) '+$(Q#,Q#,Q#) '+$(QQ,QQ,QQ) '+$("L,"L,"L) '+$(!#J,!#J,!#J) '+$(!!6,!!6,!!6) '+$(!6#,!6#,!6#) '+$(!6Q,!6Q,!6Q) '+$(!IL,!IL,!IL) '+$(!JJ,!JJ,!JJ) '+$(!U6,!U6,!U6) '+$(!L#,!L#,!L#) '+$(!LQ,!LQ,!LQ) '+$(!WL,!WL,!WL) '+$(!QJ,!QJ,!QJ) '+$(!"6,!"6,!"6) '+$(6##,6##,6##) '+$(6#Q,6#Q,6#Q) '+$(6!L,6!L,6!L) '+$(66J,66J,66J) '+$(6I6,6I6,6I6) '+$(6J#,6J#,6J#) '+$(6JQ,6JQ,6JQ) '+$(6UU,6UU,6UU)

O#Q#Q#Q O!#!#!# O!Q!Q!Q O6#6#6# O6Q6Q6Q OI#I#I# OIQIQIQ OJ#J#J# OJQJQJQ OU#U#U# OUQUQUQ OL#L#L# OLQLQLQ OW#W#W# OWQWQWQ OQ#Q#Q# OQQQQQQ O"#"#"# O"Q"Q"Q O3#3#3# O3Q3Q3Q O$#$#$# O$Q$Q$Q O(#(#(# O(Q(Q(Q O;#;#;# O;Q;Q;Q O)#)#)# O)Q)Q)Q O9#9#9# O9Q9Q9Q O999999

HTML Color !ames

HTML Color &ames
The table below provides a list of the color names that are supported by all maBor browsers. &ote' If you want your pa es to validate with an =T5& or a (,, validator, WI( has listed !L color names that you can use. a>ua, black, blue, fuchsia, ray, reen, lime, maroon, navy, olive, purple,

red, silver, teal, white, and yellow. If you want to use other colors, you must specify their '+$ or =)? value. (lick on a color name (or a hex value) to view the color as the back round%color alon with different text colors. Color &ame 3lice$lue 3nti>ueWhite 3>ua 3>uamarine 3-ure $ei e $is>ue $lack $lanched3lmond $lue $lue<iolet $rown $urlyWood (adet$lue (hartreuse (hocolate (oral (ornflower$lue (ornsilk (rimson (yan ;ark$lue ;ark(yan ;ark+olden'od ;ark+ray ;ark+rey ;ark+reen ;arkDhaki ;ark5a enta ;ark/live+reen ;arkoran e ;ark/rchid ;ark'ed ;ark,almon ;ark,ea+reen ;ark,late$lue ;ark,late+ray ;ark,late+rey ;arkTur>uoise ;ark<iolet ;eep4ink ;eep,ky$lue ;im+ray ;im+rey ;od er$lue 9ire$rick 9loralWhite Color H%C O9#9Q99 O93)$;W O##9999 OW999;J O9#9999 O9U9U;( O99)J(J O###### O99)$(; O####99 OQ36$)6 O3U6363 O;)$QQW OU9")3# OW999## O;6L"!) O99W9U# OLJ"U); O999Q;( O;(!JI( O##9999 O####Q$ O##Q$Q$ O$QQL#$ O3"3"3" O3"3"3" O##LJ## O$;$WL$ OQ$##Q$ OUUL$69 O99Q(## O""I6(( OQ$#### O)""LW3 OQ9$(Q9 OJQI;Q$ O69J9J9 O69J9J9 O##();! O"J##;I O99!J"I O##$999 OL"L"L" OL"L"L" O!)"#99 O$66666 O99939# Color

9orest+reen 9uchsia +ainsboro +hostWhite +old +olden'od +ray +rey +reen +reen@ellow =oney;ew =ot4ink Indian'ed Indi o Ivory Dhaki &avender &avender$lush &awn+reen &emon(hiffon &i ht$lue &i ht(oral &i ht(yan &i ht+olden'od@ellow &i ht+ray &i ht+rey &i ht+reen &i ht4ink &i ht,almon &i ht,ea+reen &i ht,ky$lue &i ht,late+ray &i ht,late+rey &i ht,teel$lue &i ht@ellow &ime &ime+reen &inen 5a enta 5aroon 5edium3>ua5arine 5edium$lue 5edium/rchid 5edium4urple 5edium,ea+reen 5edium,late$lue 5edium,prin +reen 5ediumTur>uoise 5edium<iolet'ed 5idni ht$lue 5int(ream 5isty'ose 5occasin

O66Q$66 O99##99 O;(;(;( O9Q9Q99 O99;W## O;33U6# OQ#Q#Q# OQ#Q#Q# O##Q### O3;9969 O9#999# O99L"$J O(;U(U( OJ$##Q6 O99999# O9#)LQ( O)L)L93 O999#9U OW(9(## O9993(; O3;;Q)L O9#Q#Q# O)#9999 O9393;6 O;I;I;I O;I;I;I O"#))"# O99$L(! O993#W3 O6#$633 OQW()93 OWWQQ"" OWWQQ"" O$#(J;) O9999)# O##99## OI6(;I6 O939#)L O99##99 OQ##### OLL(;33 O####(; O$3UU;I O"IW#;Q OI($IW! OW$LQ)) O##93"3 OJQ;!(( O(W!UQU O!"!"W# O9U9993 O99)J)! O99)J$U

*avaBoWhite *avy /ld&ace /live /live;rab /ran e /ran e'ed /rchid 4ale+olden'od 4ale+reen 4aleTur>uoise 4ale<iolet'ed 4apayaWhip 4each4uff 4eru 4ink 4lum 4owder$lue 4urple 'ed 'osy$rown 'oyal$lue ,addle$rown ,almon ,andy$rown ,ea+reen ,ea,hell ,ienna ,ilver ,ky$lue ,late$lue ,late+ray ,late+rey ,now ,prin +reen ,teel$lue Tan Teal Thistle Tomato Tur>uoise <iolet Wheat White White,moke @ellow @ellow+reen

O99;)3; O####Q# O9;9U)L OQ#Q### OL$Q)6I O993U## O99JU## O;3W#;L O)))Q33 O"Q9$"Q O39)))) O;QW#"I O99)9;U O99;3$" O(;QUI9 O99(#($ O;;3#;; O$#)#)L OQ###Q# O99#### O$(Q9Q9 OJ!L")! OQ$JU!I O93Q#W6 O9J3JL# O6)Q$UW O999U)) O3#U66; O(#(#(# OQW())$ OL3U3(; OW#Q#"# OW#Q#"# O999393 O##99W9 OJLQ6$J O;6$JQ( O##Q#Q# O;Q$9;Q O99LIJW OJ#)#;# O))Q6)) O9U;)$I O999999 O9U9U9U O9999## O"3(;I6

HTML "#$% &uick List

HTML *uick List +rom WD6chools. 5rint it- +old it- and put it in our pocket.

HTML Basic 'ocument

EhtmlF EheadF EtitleF;ocument name oes hereEGtitleF EGheadF EbodyF <isible text oes here EGbodyF EGhtmlF

Heading Elements
Eh!F&ar est =eadin EGh!F Eh6F EhIF EhJF EhUF . . . . . . . . . . . . EGh6F EGhIF EGhJF EGhUF

EhLF,mallest =eadin EGhLF

Text Elements
EpFThis is a para raphEGpF EbrF (line break) EhrF (hori-ontal rule) EpreFThis text is preformattedEGpreF

Logical (t)les
EemFThis text is emphasi-edEGemF Estron FThis text is stron EGstron F EcodeFThis is some computer codeEGcodeF

*h)sical (t)les
EbFThis text is boldEGbF EiFThis text is italicEGiF

Links+ ,nchors+ and Image Elements

Ea hrefK"http.GGwww.example.comG"FThis is a &inkEGaF Ea hrefK"http.GGwww.example.comG"FEim srcK"0'&" altK"3lternate Text"FEGaF Ea hrefK"mailto.webmaster^example.com"F,end e%mailEGaF 3 named anchor. Ea nameK"tips"F0seful Tips ,ectionEGaF Ea hrefK"Otips"F2ump to the 0seful Tips ,ectionEGaF

-nordered list
EulF EliF9irst itemEGliF EliF*ext itemEGliF EGulF

.rdered list
EolF EliF9irst itemEGliF EliF*ext itemEGliF EGolF

'e/inition list
EdlF EdtF9irst termEGdtF EddF;efinitionEGddF EdtF*ext termEGdtF EddF;efinitionEGddF EGdlF

Tables
Etable borderK"!"F EtrF EthFsomeheaderEGthF EthFsomeheaderEGthF EGtrF EtrF EtdFsometextEGtdF EtdFsometextEGtdF EGtrF EGtableF

Frames
Eframeset colsK"6U],WU]"F Eframe srcK"pa e!.htm"F Eframe srcK"pa e6.htm"F EGframesetF

Forms
Eform actionK"http.GGwww.example.comGtest.asp" methodK"postG et"F Einput Einput Einput Einput Einput Einput Einput typeK"text" nameK"lastname" valueK"*ixon" si-eK"I#" maxlen thK"U#"F typeK"password"F typeK"checkbox" checkedK"checked"F typeK"radio" checkedK"checked"F typeK"submit"F typeK"reset"F typeK"hidden"F

EselectF EoptionF3pples Eoption selectedF$ananas EoptionF(herries EGselectF Etextarea nameK"(omment" rowsK"L#" colsK"6#"FEGtextareaF EGformF

Entities
NltP is the same as E N tP is the same as F NO!L"P is the same as X

.ther Elements
EA%% This is a comment %%F Eblock>uoteF Text >uoted from some source. EGblock>uoteF EaddressF 3ddress !EbrF 3ddress 6EbrF (ityEbrF EGaddressF 6ource ' http'FFwww.wDschools.comFhtmlFhtmlG(uick.asp

HTML "#$% 0 1HTML %#$ Re/erence

8rdered )lphabeticall
&&. indicates the earliest version of *etscape that supports the ta $%. indicates the earliest version of Internet )xplorer that supports the ta "T". indicates in which ?=T5& !.# ;T; the ta is allowed. ,K,trict, TKTransitional, and 9K9rameset "escription ;efines a comment ;efines the document type ;efines an anchor ;efines an abbreviation ;efines an acronym ;efines an address element ;eprecated. ;efines an applet L.6 && $% "T" ,T9 I.# I.# ,T9 ,T9 L.6 J.# ,T9 J.# J.# ,T9 6.# I.# T9

Tag EA%%...%%F EA;/(T@4)F EaF EabbrF EacronymF EaddressF EappletF

I.# I.# ,T9

EareaF EbF EbaseF EbasefontF EbdoF Ebi F Eblock>uoteF EbodyF EbrF EbuttonF EcaptionF EcenterF EciteF EcodeF EcolF Ecol roupF EddF EdelF EdirF EdivF EdfnF EdlF EdtF EemF EfieldsetF EfontF EformF EframeF EframesetF Eh!F to EhLF EheadF EhrF EhtmlF EiF EiframeF Eim F EinputF EinsF EisindexF EkbdF ElabelF Ele endF EliF ElinkF EmapF EmenuF EmetaF EnoframesF EnoscriptF EobBectF EolF Eopt roupF EoptionF

;efines an area inside an ima e map ;efines bold text ;efines a base 0'& for all the links in a pa e ;eprecated. ;efines a base font ;efines the direction of text display ;efines bi text ;efines a lon >uotation ;efines the body element Inserts a sin le line break ;efines a push button ;efines a table caption ;eprecated. ;efines centered text ;efines a citation ;efines computer code text ;efines attributes for table columns ;efines roups of table columns ;efines a definition description ;efines deleted text ;eprecated. ;efines a directory list ;efines a section in a document ;efines a definition term ;efines a definition list ;efines a definition term ;efines emphasi-ed text ;efines a fieldset ;eprecated. ;efines text font, si-e, and color ;efines a form ;efines a sub window (a frame) ;efines a set of frames ;efines header ! to header L ;efines information about the document ;efines a hori-ontal rule ;efines an html document ;efines italic text ;efines an inline sub window (frame) ;efines an ima e ;efines an input field ;efines inserted text ;eprecated. ;efines a sin le%line input field ;efines keyboard text ;efines a label for a form control ;efines a title in a fieldset ;efines a list item ;efines a resource reference ;efines an ima e map ;eprecated. ;efines a menu list ;efines meta information ;efines a noframe section ;efines a noscript section ;efines an embedded obBect ;efines an ordered list ;efines an option roup ;efines an option in a drop%down list

I.# I.# ,T9 I.# I.# ,T9 I.# I.# ,T9 I.# I.# T9 L.6 U.# ,T9 I.# I.# ,T9 I.# I.# ,T9 I.# I.# ,T9 I.# I.# ,T9 L.6 J.# ,T9 I.# I.# ,T9 I.# I.# T9 I.# I.# ,T9 I.# I.# ,T9 I.# ,T9 I.# ,T9 I.# I.# ,T9 L.6 J.# ,T9 I.# I.# T9 I.# I.# ,T9 I.# ,T9 I.# I.# ,T9 I.# I.# ,T9 I.# I.# ,T9 L.6 J.# ,T9 I.# I.# T9 I.# I.# ,T9 I.# I.# 9 I.# I.# 9 I.# I.# ,T9 I.# I.# ,T9 I.# I.# ,T9 I.# I.# ,T9 I.# I.# ,T9 L.# J.# T9 I.# I.# ,T9 I.# I.# ,T9 L.6 J.# ,T9 I.# I.# T9 I.# I.# ,T9 L.6 J.# ,T9 L.6 J.# ,T9 I.# I.# ,T9 J.# I.# ,T9 I.# I.# ,T9 I.# I.# T9 I.# I.# ,T9 I.# I.# T9 I.# I.# ,T9 I.# ,T9 I.# I.# ,T9 L.# L.# ,T9 I.# I.# ,T9

EpF EparamF EpreF E>F EsF EsampF EscriptF EselectF EsmallF EspanF EstrikeF Estron F EstyleF EsubF EsupF EtableF EtbodyF EtdF EtextareaF EtfootF EthF EtheadF EtitleF EtrF EttF EuF EulF EvarF ExmpF

;efines a para raph ;efines a parameter for an obBect ;efines preformatted text ;efines a short >uotation ;eprecated. ;efines strikethrou h text ;efines sample computer code ;efines a script ;efines a selectable list ;efines small text ;efines a section in a document ;eprecated. ;efines strikethrou h text ;efines stron text ;efines a style definition ;efines subscripted text ;efines superscripted text ;efines a table ;efines a table body ;efines a table cell ;efines a text area ;efines a table footer ;efines a table header ;efines a table header ;efines the document title ;efines a table row ;efines teletype text ;eprecated. ;efines underlined text ;efines an unordered list ;efines a variable ;eprecated. ;efines preformatted text

I.# I.# ,T9 I.# I.# ,T9 I.# I.# ,T9 L.6 ,T9 I.# I.# T9 I.# I.# ,T9 I.# I.# ,T9 I.# I.# ,T9 I.# I.# ,T9 J.# I.# ,T9 I.# I.# T9 I.# I.# ,T9 J.# I.# ,T9 I.# I.# ,T9 I.# I.# ,T9 I.# I.# ,T9 J.# ,T9 I.# I.# ,T9 I.# I.# ,T9 J.# ,T9 I.# I.# ,T9 J.# ,T9 I.# I.# ,T9 I.# I.# ,T9 I.# I.# ,T9 I.# I.# T9 I.# I.# ,T9 I.# I.# ,T9 I.# I.#

WWW 4 The World Wide Web

The WWW is a network of computers all over the world. The WWW is most often called the Web. The computers on the Web communicate usin standard protocols and lan ua es. The WI( (The World Wide Web (onsortium) are makin the rules and standards for the Web. ,tudy our WWW 4rimer

HTML 4 The Language o+ the Web

=T5& is the lan ua e of the Web, and every Web developer should have a basic understandin of it. With =T5& you use "markup ta s" to define the content and layout of your Web pa es. The =T5& ta Eh!F defines a primary header, and EpF defines a para raph. ,tudy our =T5& 4rimer or ,tudy our (omplete =T5& Tutorial

C66 4 Cascading 6t le 6heets

,tyles define how =T5& elements are displayed, Bust like the EfontF ta in older =T5&. When styles are saved in external files, you can chan e the style and appearance of all the =T5& pa es in your Web, Bust by chan in your (,, document. If you have ever tried to chan e the font or color of all the headin s in all your Web pa es, you will understand how (,, can save a lot of work. ,tudy our (,, 4rimer or ,tudy our (omplete (,, tutorial

Aa,a6cript 4 Client 6ide 6cripting

2ava,cript is used for client%side scriptin . (lient%side scriptin is about "pro rammin " the Web browser. To be able to deliver more dynamic web site content, you should teach yourself 2ava,cript. 3 2ava,cript statement like this. document.write("EpF" _ date _ "EGpF") can write a variable text into an =T5& pa e. ,tudy our 2ava,cript 4rimer or ,tudy our (omplete 2ava,cript tutorial

CML 4 %!tensible Markup Language

?5& is not a replacement for =T5&. ?5& is used to describe and transport data, while =T5& is used to display data. ?5& and a number of different ?5& standards are rapidly becomin the most common tools for data transmission, data storin , and data manipulation. ,tudy our ?5& 4rimer or ,tudy our (omplete ?5& Tutorial

6er,er 6ide 6cripting

,erver%side scriptin is about "pro rammin " the Web server.

To be able to deliver more dynamic web site content, you should teach yourself server%side scriptin . With server%side scriptin , you can (amon st many other thin s) access databases and return the results to a browser. ,tudy our ,criptin 4rimer or ,tudy our (omplete 3,4 tutorial, or our (omplete 4=4 tutorial.

Managing Web "ata with 6*L

The ,tructured Muery &an ua e (,M&) is the common standard for accessin databases such as ,M& ,erver, /racle, ,ybase, and 3ccess. 3ny webmaster should know that ,M& is the true en ine for interactin with databases on the Web. ,tudy our ,M& 4rimer or ,tudy our (omplete ,M& tutorial

HTML (tandard ,ttributes

=T5& ta s can have attributes. The special attributes for each ta are listed under each ta description. The attributes listed here are the core and lan ua e attributes that are standard for all ta s (with a few exceptions).

Core )ttributes
*ot valid in base, head, html, meta, param, script, style, and title elements. )ttribute class id style title 3alue class_rule or style_rule id_name style_definition tooltip_text "escription The class of the element 3 uni>ue id for the element 3n inline style definition 3 text to display in a tool tip

Language )ttributes
*ot valid in base, br, frame, frameset, hr, iframe, param, and script elements. )ttribute dir lan 3alue ltr ` rtl language_code "escription ,ets the text direction ,ets the lan ua e code

He board )ttributes
)ttribute accesskey tabindex 3alue character number "escription ,ets a keyboard shortcut to access an element ,ets the tab order of an element

Introduction to 1ML
CML was designed to describe data and to +ocus on what data is. HTML was designed to displa data and to +ocus on how data looks.

What #ou 6hould )lread Hnow

$efore you continue you should have a basic understandin of the followin .

=T5& G ?=T5& 2ava,cript or <$,cript

If you want to study these subBects first, find the tutorials on our =ome pa e.

What is CML?
?5& stands for )Ctensible Markup Lan ua e ?5& is a markup language much like =T5& ?5& was desi ned to describe data ?5& ta s are not predefined. @ou must de+ine our own tags ?5& uses a "ocument T pe "e+inition (;T;) or an CML 6chema to describe the data ?5& with a ;T; or ?5& ,chema is desi ned to be sel+4descripti,e ?5& is a WI( 'ecommendation

CML is a WDC @ecommendation

The )xtensible 5arkup &an ua e (?5&) became a WI( 'ecommendation !#. 9ebruary !""Q. @ou can read more about ?5& standards in our WI( tutorial.

The Main "i++erence Between CML and HTML

CML was designed to carr data. ?5& is not a replacement for =T5&. ?5& and =T5& were desi ned with different oals. ?5& was desi ned to describe data and to focus on what data is. =T5& was desi ned to display data and to focus on how data looks. =T5& is about displayin information, while ?5& is about describin information.

CML "oes not "8 )n thing

CML was not designed to "8 an thing. 5aybe it is a little hard to understand, but ?5& does not ;/ anythin . ?5& was created to structure, store and to send information. The followin example is a note to Tove from 2ani, stored as ?5&.

<note> <to>To<e</to> <from>.ani</from> <heading>2eminder</heading> <body>AonBt forget me this wee end!</body> </note>
The note has a header and a messa e body. It also has sender and receiver information. $ut still, this ?5& document does not ;/ anythin . It is Bust pure information wrapped in ?5& ta s. ,omeone must write a piece of software to send, receive or display it.

CML is Free and %!tensible

CML tags are not prede+ined. #ou must 7in,ent7 our own tags. The ta s used to mark up =T5& documents and the structure of =T5& documents are predefined. The author of =T5& documents can only use ta s that are defined in the =T5& standard (like EpF, Eh!F, etc.). ?5& allows the author to define his own ta s and his own document structure. The ta s in the example above (like EtoF and EfromF) are not defined in any ?5& standard. These ta s are "invented" by the author of the ?5& document.

CML is a Complement to HTML

CML is not a replacement +or HTML. It is important to understand that ?5& is not a replacement for =T5&. In future Web development it is most likely that ?5& will be used to describe the data, while =T5& will be used to format and display the same data. 5y best description of ?5& is this. CML is a cross4plat+orm- so+tware and hardware independent tool +or transmitting in+ormation.

CML in Future Web "e,elopment

CML is going to be e,er where.

We have been participatin in ?5& development since its creation. It has been ama-in to see how >uickly the ?5& standard has been developed and how >uickly a lar e number of software vendors have adopted the standard. We stron ly believe that ?5& will be as important to the future of the Web as =T5& has been to the foundation of the Web and that ?5& will be the most common tool for all data manipulation and data transmission.

Introduction To 1HTML
CHTML is a stricter and cleaner ,ersion o+ HTML.

What #ou 6hould )lread Hnow

$efore you continue you should have a basic understandin of the followin .

=T5& and the basics of buildin web pa es

If you want to study =T5& first, please read our =T5& tutorial.

What $s CHTML?
?=T5& stands for )Ctensible HyperText Markup Lan ua e ?=T5& is aimed to replace =T5& ?=T5& is almost identical to =T5& J.#! ?=T5& is a stricter and cleaner version of =T5& ?=T5& is =T5& defined as an CML application ?=T5& is a WI( 'ecommendation

CHTML is a WDC @ecommendation

?=T5& !.# became a WI( 'ecommendation 2anuary 6L, 6###. WI( defines ?=T5& as the latest version of =T5&. ?=T5& will radually replace =T5&. ,tay updated with the latest WI( recommendations in our WI( tutorial.

)ll &ew Browsers 6upport CHTML

?=T5& is compatible with =T5& J.#!. 3ll new browsers have support for ?=T5&.

WD6chools Has Con,erted To CHTML

?=T5& is a reformulation of =T5& J.#! in ?5&, and can be put to immediate use with existin browsers by followin a few simple uidelines. WI,chools was completely rewritten to ?=T5& !.# in !""".

3 click on this symbol.

validates the ?=T5& part of this pa e.

3 click on this symbol.

validates the (,, part of this pa e.

)bout This Tutorial

The next chapters of this tutorial will explain.

Why you should use ?=T5& The syntax of ?=T5& =ow WI,chools was converted to ?=T5& ?=T5& validation ?=T5& modulari-ation

W2(chools HTML &ui3

HTML *2$I E. What does HTML stand +or? =ome Tool 5arkup &an ua e =yper Text 5arkup &an ua e =yperlinks and Text 5arkup &an ua e http'FFwww.wDschools.com

J. Who is making the Web standards? The World Wide Web (onsortium 5icrosoft *etscape

D. Choose the correct HTML tag +or the largest heading Eheadin F EheadF Eh!F

EhLF

K. What is the correct HTML tag +or inserting a line break? EbrF ElbF EbreakF

L. What is the correct HTML +or adding a background color? Eback roundFyellowEGback roundF Ebody colorK"yellow"F Ebody b colorK"yellow"F

>. Choose the correct HTML tag to make a te!t bold EbF EbldF EbbF EboldF

M. Choose the correct HTML tag to make a te!t italic EiiF EitalicsF EiF

N. What is the correct HTML +or making a h perlink? Ea nameK"http.GGwww.wIschools.com"FWI,chools.comEGaF EaFhttp.GGwww.wIschools.comEGaF Ea urlK"http.GGwww.wIschools.com"FWI,chools.comEGaF Ea hrefK"http.GGwww.wIschools.com"FWI,choolsEGaF

O. How can

ou make an e4mail link?

EmailFxxx^yyyEGmailF Ea hrefK"xxx^yyy"F Ea hrefK"mailto.xxx^yyy"F

Email hrefK"xxx^yyy"F

E?. How can ou open a link in a new browser window? Ea hrefK"url" newF Ea hrefK"url" tar etK"\blank"F Ea hrefK"url" tar etK"new"F

EE. Which o+ these tags are all 0table1 tags? EtableFEtrFEttF EtableFEheadFEtfootF EtableFEtrFEtdF EtheadFEbodyFEtrF

EJ. Choose the correct HTML to le+t4align the content inside a tablecell Etd ali nK"left"F EtdleftF Etd leftali nF Etd vali nK"left"F

ED. How can ou make a list that lists the items with numbers? EulF EdlF ElistF EolF

EK. How can ou make a list that lists the items with bullets? ElistF EdlF EulF EolF

EL. What is the correct HTML +or making a checkbo!? Einput typeK"check"F EcheckboxF

Einput typeK"checkbox"F EcheckF

E>. What is the correct HTML +or making a te!t input +ield? Etextinput typeK"text"F Einput typeK"text"F Einput typeK"textfield"F EtextfieldF

EM. What is the correct HTML +or making a drop4down list? EselectF Einput typeK"dropdown"F Einput typeK"list"F ElistF

EN. What is the correct HTML +or making a te!t area? Einput typeK"textbox"F EtextareaF Einput typeK"textarea"F

EO. What is the correct HTML +or inserting an image? Eim Fima e. ifEGim F Eim hrefK"ima e. ifF Eim srcK"ima e. if"F Eima e srcK"ima e. if"F

J?. What is the correct HTML +or inserting a background image? Ebody back roundK"back round. if"F Eim srcK"back round. if" back roundF Eback round im K"back round. if"F

Web Building

%,er

Web de,eloper has to know the building blocks o+ the Web'

HTML K.?E

=T5& J.#! The use of (,, (style sheets) ?=T5& ?5& and ?,&T (lient side scriptin ,erver side scriptin 5ana in data with ,M& The future of the Web

=T5& is the lan ua e of the Web, and every Web developer should have a basic understandin of it. =T5& J.#! is an important Web standard. and very different from =T5& I.6. When ta s like EfontF and color attributes were added to =T5& I.6, it started a developer1s ni htmare. ;evelopment of web sites where font information must be added to every sin le Web pa e is a lon and expensive pain. With =T5& J.#! all formattin can be moved out of the =T5& document and into a separate style sheet. =T5& J.#! is also important because ?=T5& !.# (the latest =T5& standard) is =T5& J.#! "reformulated" as an ?5& application. 0sin =T5& J.#! in your pa es makes the future up rade from =T5& to ?=T5& a very simple process. 5ake sure you use the latest =T5& J.#! standard. ,tudy our (omplete =T5& J.#! reference.

Cascading 6t le 6heets 9C66:

,tyles define how =T5& elements are displayed, Bust like the font ta in =T5& I.6. ,tyles are normally saved in files external to =T5& documents. )xternal style sheets enable you to chan e the appearance and layout of all the pa es in your Web, Bust by editin a sin le (,, document. If you have ever tried chan in somethin like the font or color of all the headin s in all your Web pa es, you will understand how (,, can save you a lot of work. 5ake sure you study our (,, tutorial.

CHTML 4 The Future o+ HTML

?=T5& stands for )xtensible =yperText 5arkup &an ua e. ?=T5& !.# is now the latest =T5& standard from WI(. It became an official 'ecommendation 2anuary 6L, 6###. 3 WI( 'ecommendation means that the specification is stable and that the specification is now a Web standard. ?=T5& is a reformulation of =T5& J.#! in ?5& and can be put to immediate use with existin browsers by followin a few simple uidelines. To prepare for the future. 'ead how this site was converted to ?=T5&.

CML 4 ) Tool +or "escribing "ata

The )xtensible 5arkup &an ua e (?5&) is &8T a replacement for =T5&. In future Web development, ?5& will be used to describe and carry the data, while =T5& will be used to display the data. /ur best description of ?5& is as a cross%platform, software% and hardware%independent tool for storin and transmittin information. We believe that ?5& is as important to the Web as =T5& was to the foundation of the Web and that ?5& will be the most common tool for all data manipulation and data transmission. 5ake sure you study our ?5& tutorial.

C6LT 4 ) Tool +or Trans+orming "ata

?,&T ()xtensible ,tylesheet &an ua e Transformations) is a lan ua e for transformin ?5&. 9uture Web sites will have to deliver data in different formats, to different browsers, and to other Web servers. To transform ?5& data into different formats, ?,&T is the new WI( standard. ?,&T can transform an ?5& file into a format that is reco ni-able to a browser. /ne such format is =T5&. 3nother format is W5& % the mark%up lan ua e used in many handheld devices. ?,&T can also add elements, remove, rearran e and sort elements, test and make decisions about which elements to display, and a lot more. 5ake sure you study our ?,&T tutorial.

Client46ide 6cripting
(lient%side scriptin is about "pro rammin " the behavior of an Internet browser. To be able to deliver more dynamic web site content, you should teach yourself 2ava,cript.

Aa,a6cript gi,es HTML designers a programming tool 4 =T5& authors are normally not pro rammers, but 2ava,cript is a scriptin lan ua e with a very simple syntaxA 3lmost anyone can put small "snippets" of code into their =T5& pa es. Aa,a6cript can put d namic te!t into an HTML page 4 3 2ava,cript statement like this. document.write("Eh!F" _ name _ "EGh!F") can write a variable text into an =T5& pa e. Aa,a6cript can react to e,ents 4 3 2ava,cript can be set to execute when somethin happens, like when a pa e has finished loadin or when a user clicks on an =T5& element. Aa,a6cript can read and write HTML elements 4 3 2ava,cript can read and chan e the content of an =T5& element. Aa,a6cript can be used to ,alidate data 4 3 2ava,cript can be used to validate form data before it is submitted to a server, this will save the server from extra processin .

5ake sure you study our 2ava,cript Tutorial.

6er,er46ide 6cripting
,erver%side scriptin is about "pro rammin " an Internet server. To be able to deliver more dynamic web site content, you should teach yourself server%side scriptin . With server%side scriptin , you can.

;ynamically edit, chan e, or add any content of a Web pa e 'espond to user >ueries or data submitted from =T5& forms 3ccess any data or databases and return the results to a browser 3ccess any files or ?5& data and return the results to a browser Transform ?5& data to =T5& data and return the results to a browser (ustomi-e a Web pa e to make it more useful for individual users

4rovide security and access control to different Web pa es Tailor your output to different types of browsers 5inimi-e the network traffic )cti,e 6er,er 5ages 9)65: and

3t WI,chools we demonstrate server%side scriptin by usin 5H5' H perte!t 5reprocessor 95H5:. 5ake sure you study our 3,4 tutorial or our 4=4 tutorial.

Managing "ata with 6*L

The ,tructured Muery &an ua e (,M&) is the common standard for accessin databases such as ,M& ,erver, /racle, ,ybase, and 3ccess. Dnowled e of ,M& is invaluable for anyone wantin to store or retrieve data from a database. 3ny webmaster should know that ,M& is the true en ine for interactin with databases on the Web. 5ake sure you study our ,M& tutorial.

What Will the Future Bring?

/ne important thin to know is that the functionality of Web ,ites will chan e very drastically. We will see a hu e shift from sites displayin "static content" to data driven sites deliverin "dynamic content". We will also see a lot of new browsers, like the browsers found in mobile devices, and we will see a lot more use of ?5& to communicate data between servers, and between servers and browsers.

WWW *rimer
What is the WWW? How does it work? What is a browser? What is a ser,er?

What is the WWW?

WWW stands for the World Wide Web The World Wide Web is most often called the Web The Web is a network of computers all o,er the world 3ll the computers in the Web can communicate with each other 3ll the computers use a communication standard called HTT5

How "oes the WWW Work?

Web information is stored in documents called Web pages Web pa es are files stored on computers called Web ser,ers (omputers readin the Web pa es are called Web clients Web clients view the pa es with a pro ram called a Web browser 4opular browsers are $nternet %!plorer and MoPilla Fire+o!

How "oes the Browser Fetch the 5ages?

3 browser fetches a Web pa e from a server b a re(uest 3 re>uest is a standard =TT4 re>uest containin a page address 3 pa e address looks like. http'FFwww.someone.comFpage.htm

How "oes the Browser "ispla the 5ages?

3ll Web pa es contain instructions on how to be displa ed The browser displays the pa e by reading these instructions The most common display instructions are called HTML tags The =T5& ta for a para raph looks like this. 0Fp1 3 para raph in =T5& is defined like this 0p1This is a 4ara raph0Fp1

Who is Making the Web 6tandards?

The Web standards are not made up by *etscape or 5icrosoft The rule%makin body of the Web is the WDC WI( stands for the World Wide Web Consortium WI( puts to ether specifications for Web standards The most essential Web standards are HTML- C66 and CML The latest =T5& standard is CHTML E.?

To learn more about WI(, study our WI( Tutorial.