HTML

What is HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language markup language is a set of markup tags HTML uses markup tags to describe web pages
HTML Tags
HTML markup tags are usually called HTML tags
HTML tags are keywords surrounded by angle brackets like !html" HTML tags normally come in pairs like !b" and !#b" The first tag in a pair is the start tag, the second tag is the end tag $tart and end tags are also called opening tags and closing tags
HTML Basic
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
HTML Introduction
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
HTML % Getting Started
What &ou 'eed

&ou don(t need an HTML editor &ou don(t need a web ser)er &ou don(t need a web site
*diting HTML
HTML can be written and edited using many different editors like +reamwea)er and ,isual $tudio. Howe)er, in this tutorial we use a plain text editor -like 'otepad. to edit HTML. We belie)e using a plain text editor is the best way to learn HTML.
/reate &our 0wn Test Web

If you just want to learn HTML, skip t e rest of t is c apter! 1f you want to create a test page on your own computer, 2ust copy the 3 files below to your desktop. -4ight click on each link, and select 5sa)e target as5 or 5sa)e link as5. mainpage.htm page6.htm page7.htm fter you ha)e copied the files, you can double%click on the file called 5mainpage.htm5 and see your first web site in action.
8se &our Test Web 9or Learning

We suggest you experiment with e)erything you learn at W3$chools by editing your web files with a text editor -like 'otepad.. "ote# 1f your test web contains HTML markup tags you ha)e not learned, don(t panic. &ou will learn all about it in the next chapters.
.HTM or .HTML 9ile *xtension?

When you sa)e an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.
HTML :asic
HTML Headings
HTML headings are defined with the !h6" to !h;" tags.
*xample
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
HTML <aragraphs
HTML paragraphs are defined with the !p" tag.
*xample
<p>This is a paragraph.</p> <p>This is another paragraph.</p>
HTML Links
HTML links are defined with the !a" tag.
*xample
<a href="http //!!!.!3s"hools."om">This is a lin#</a>
HTML 1mages
HTML images are defined with the !img" tag.
*xample
<img sr"="!3s"hools.$pg" !idth="1%&" height="1&2" />
HTML $lements
HTML documents are defined by HTML elements.
HTML *lements
n HTML element is e)erything from the start tag to the end tag=
Start tag % !p" !a href>5default.htm5 " !br #"
$lement content This is a paragraph This is a link !#p" !#a"
$nd tag %
% The start tag is often called the opening tag. The end tag is often called the closing tag.
HTML *lement $yntax

n HTML element starts with a start tag & opening tag n HTML element ends with an end tag & closing tag The element content is e)erything between the start and the end tag $ome HTML elements ha)e empty content *mpty elements are closed in t e start tag Most HTML elements can ha)e attributes
Tip# &ou will learn about attributes in the next chapter of this tutorial.
'ested HTML *lements

Most HTML elements can be nested -can contain other HTML elements.. HTML documents consist of nested HTML elements.
HTML +ocument *xample

<html> <body> <p>This is my first paragraph.</p> </body> </html>
The example abo)e contains 3 HTML elements.
HTML *xample *xplained

T e 'p( element#
<p>This is my first paragraph.</p>
The !p" element defines a paragraph in the HTML document. The element has a start tag !p" and an end tag !#p". The element content is= This is my first paragraph. T e 'body( element#
<body> <p>This is my first paragraph.</p> </body>

The !body" element defines the body of the HTML document. The element has a start tag !body" and an end tag !#body". The element content is another HTML element -a p element.. T e ' tml( element#
<html> <body> <p>This is my first paragraph.</p> </body> </html>

The !html" element defines the whole HTML document. The element has a start tag !html" and an end tag !#html". The element content is another HTML element -the body element..
+on(t 9orget the *nd Tag

$ome HTML elements might display correctly e)en if you forget the end tag=
<p>This is a paragraph <p>This is a paragraph

The example abo)e works in most browsers, because the closing tag is considered optional. 'e)er rely on this. Many HTML elements will produce unexpected results and#or errors if you forget the end tag .
*mpty HTML *lements

HTML elements with no content are called empty elements. !br" is an empty element without a closing tag -the !br" tag defines a line break.. Tip# 1n ?HTML, all elements must be closed. dding a slash inside the start tag, like !br #", is the proper way of closing empty elements in ?HTML -and ?ML..
HTML Tip= 8se Lowercase Tags

HTML tags are not case sensiti)e= !<" means the same as !p". Many web sites use uppercase HTML tags. W3$chools use lowercase tags because the World Wide Web /onsortium -W3/. recommendslowercase in HTML @, and demands lowercase tags in ?HTML.
HTML )ttributes
ttributes pro)ide additional information about HTML elements.
HTML

ttributes
HTML elements can ha)e attributes ttributes pro)ide additional information about an element ttributes are always specified in t e start tag ttributes come in name#)alue pairs like= name*+,alue+
ttribute *xample
HTML links are defined with the !a" tag. The link address is specified in the href attribute=
*xample
<a href="http //!!!.!3s"hools."om">This is a lin#</a>
HTML Headings
Headings are important in HTML documents.
HTML Headings
Headings are defined with the !h6" to !h;" tags. !h6" defines the most important heading. !h;" defines the least important heading.
*xample
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
Headings
re 1mportant
8se HTML headings for headings only. +on(t use headings to make text BIG or bold. $earch engines use your headings to index the structure and content of your web pages. $ince users may skim your pages by its headings, it is important to use headings to show the document structure. H6 headings should be used as main headings, followed by H7 headings, then the less important H3 headings, and so on.
HTML Lines
The !hr #" tag creates a horiAontal line in an HTML page. The hr element can be used to separate content=
*xample
<p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p>
HTML /omments
/omments can be inserted into the HTML code to make it more readable and understandable. /omments are ignored by the browser and are not displayed. /omments are written like this=
*xample
<'(( This is a "omment ((>
HTML -aragrap s
HTML documents are di)ided into paragraphs.
HTML <aragraphs
<aragraphs are defined with the !p" tag.
*xample
<p>This is a paragraph</p> <p>This is another paragraph</p>
+on(t 9orget the *nd Tag

Most browsers will display HTML correctly e)en if you forget the end tag=
*xample
<p>This is a paragraph <p>This is another paragraph
HTML Line :reaks

8se the !br #" tag if you want a line break -a new line. without starting a new paragraph=
*xample
<p>This is<br />a para<br />graph !ith line brea#s</p>
The !br #" element is an empty HTML element. 1t has no end tag.
!br" or !br #"

1n ?HTML, ?ML, and future )ersions of HTML, HTML elements with no end tag -closing tag. are not allowed. *)en if !br" works in all browsers, writing !br #" instead is more future proof.
HTML Te.t /ormatting

HTML Text 9ormatting
T is te.t is bold
This text is big

This text is italic
This is "omp)ter o)tp)t
This is subscript and
superscript
HTML 9ormatting Tags

HTML uses tags like !b" and !i" for formatting output, like bold or italic text. These HTML tags are called formatting tags -look at the bottom of this page for a complete reference.. 0ften 'strong( renders as 'b(, and 'em( renders as 'i(! Howe)er, there is a difference in the meaning of these tags= !b" or !i" defines bold or italic text only. !strong" or !em" means that you want the text to be rendered in a way that the user understands as 5important5. Today, all ma2or browsers render strong as bold and em as italics. Howe)er, if a browser one day wants to make a text highlighted with the strong feature, it might be cursi)e for example and not boldB
HTML Text 9ormatting Tags

Tag !b" !big" !em" !i" !small" !strong" !sub" !sup" !ins" !del" 1escription +efines bold text +efines big text +efines emphasiAed text +efines italic text +efines small text +efines strong text +efines subscripted text +efines superscripted text +efines inserted text +efines deleted text
HTML 5/omputer 0utput5 Tags

Tag !code" !kbd" !samp" !tt" !)ar" !pre" 1escription +efines computer code text +efines keyboard text +efines sample computer code +efines teletype text +efines a )ariable +efines preformatted text
HTML /itations, Cuotations, and +efinition Tags
Tag !abbr" !acronym" !address" !bdo" !blockDuote" !D" !cite" !dfn"
1escription +efines an abbre)iation +efines an acronym +efines contact information for the author#owner of a document +efines the text direction +efines a long Duotation +efines a short Duotation +efines a citation +efines a definition term
HTML /onts
The HTML !font" Tag $hould '0T be 8sed
The !font" tag is deprecated in HTML @, and remo)ed from HTMLE. The World Wide Web /onsortium -W3/. has remo)ed the !font" tag from its recommendations. 1n HTML @, style sheets -/$$. should be used to define the layout and display properties for many HTML elements. The example below shows how the HTML could look by using the !font" tag=
*xample
<p> <font si*e="+" fa"e="arial" "olor="red"> This paragraph is in ,rial- si*e +- and in red te.t "olor. </font> </p> <p> <font si*e="3" fa"e="/erdana" "olor="bl)e"> This paragraph is in ,rial- si*e +- and in red te.t "olor. </font> </p>
HTML Styles 2 3SS

/$$ is used to style HTML elements.
LookB $tyles and colors

This text is in ,erdana and red This text is in Times and blue
This text is 3F pixels high

$tyling HTML with /$$
/$$ was introduced together with HTML @, to pro)ide a better way to style HTML elements. /$$ can be added to HTML in the following ways=
in separate style s eet files -/$$ files. in the style element in the HTML head section in the style attribute in single HTML elements
8sing the HTML $tyle
ttribute
1t is time consuming and not )ery practical to style HTML elements using the style attribute. T e preferred way to add 3SS to HTML, is to put 3SS synta. in separate 3SS files! Howe)er, in this HTML tutorial we will introduce you to /$$ using the style attribute. This is done to simplify the examples. 1t also makes it easier for you to edit the code and try it yourself. &ou can learn e)erything about /$$ in our /$$ Tutorial.
HTML $tyle *xample % :ackground /olor

The background%color property defines the background color for an element=
*xample
<html> <body style="ba"#gro)nd("olor yello!0"> <h2 style="ba"#gro)nd("olor red0">This is a heading</h2> <p style="ba"#gro)nd("olor green0">This is a paragraph.</p> </body>
</html>
The background%color property makes the 5old5 bgcolor attribute obsolete.
HTML $tyle *xample % 9ont, /olor and $iAe

The font%family, color, and font%siAe properties defines the font, color, and siAe of the text in an element=
*xample
<html> <body> <h1 style="font(family /erdana0">, heading</h1> <p style="font(family arial0"olor red0font(si*e 2%p.0">, paragraph.</p> </body> </html>
The font%family, color, and font%siAe properties make the old !font" tag obsolete.
HTML $tyle *xample % Text
lignment
The text%align property specifies the horiAontal alignment of text in an element=
*xample
<html> <body> <h1 style="te.t(align "enter0">1enter(aligned heading</h1> <p>This is a paragraph.</p> </body> </html>
The text%align property makes the old !center" tag obsolete.
+eprecated Tags and
ttributes
1n HTML @, se)eral tags and attributes were deprecated. +eprecated means that they will not be supported in future )ersions of HTML. T e message is clear# )oid using deprecated tags and attributesB
These tags and attributes should be a)oided= Tags !center" !font" and !basefont" !s" and !strike" !u" )ttributes align bgcolor color 1escription +eprecated. +efines centered content +eprecated. +efines HTML fonts +eprecated. +efines strikethrough text +eprecated. +efines underlined text 1escription +eprecated. +efines the alignment of text +eprecated. +efines the background color +eprecated. +efines the text color
HTML Links
Links are found in nearly all Web pages. Links allow users to click their way from page to page.
HTML Hyperlinks -Links.

hyperlink -or link. is a word, group of words, or image that you can click on to 2ump to a new document or a new section within the current document. When you mo)e the cursor o)er a link in a Web page, the arrow will turn into a little hand. Links are specified in HTML using the !a" tag. The !a" tag can be used in two ways= 6. 7. To create a link to another document, by using the href attribute To create a bookmark inside a document, by using the name attribute
HTML Link $yntax

The HTML code for a link is simple. 1t looks like this=
<a href="url">Link text</a>

The href attribute specifies the destination of a link.
*xample
<a href="http //!!!.!3s"hools."om/">2isit 334"hools</a>
Tip# The 5Link text5 doesn(t ha)e to be text. &ou can link from an image or any other HTML element.
HTML Links % The target
ttribute
The target attribute specifies where to open the linked document. The example below will open the linked document in a new browser window or a new tab=
*xample
<a href="http //!!!.!3s"hools."om/" target="5blan#">2isit 334"hools' </a>
HTML Links % The name
ttribute
The name attribute specifies the name of an anchor. The name attribute is used to create a bookmark inside an HTML document. "ote# The upcoming HTMLE standard suggest using the id attribute instead of the name attribute for specifying the name of an anchor. 8sing the id attribute actually works also for HTML@ in all modern browsers. :ookmarks are not displayed in any special way. They are in)isible to the reader.
*xample
named anchor inside an HTML document=
<a name="tips">6sef)l Tips 4e"tion</a>

/reate a link to the 58seful Tips $ection5 inside the same document=
<a href="7tips">2isit the 6sef)l Tips 4e"tion</a>

0r, create a link to the 58seful Tips $ection5 from another page=
<a href="http //!!!.!3s"hools."om/html5lin#s.htm7tips"> 2isit the 6sef)l Tips 4e"tion</a>
:asic 'otes % 8seful Tips

"ote# lways add a trailing slash to subfolder references. 1f you link like this= href>5http=##www.w3schools.com#html5, you will generate two reDuests to the ser)er, the ser)er will first add a slash to the address, and then create a new reDuest like this= href>5http=##www.w3schools.com#html#5.
Tip# 'amed anchors are often used to create 5table of contents5 at the beginning of a large document. *ach chapter within the document is gi)en a named anchor, and links to each of these anchors are put at the top of the document. Tip# 1f a browser does not find the named anchor specified, it goes to the top of the document. 'o error occurs.
HTML Images
HTML 1mages % The !img" Tag and the $rc
1n HTML, images are defined with the !img" tag. The !img" tag is empty, which means that it contains attributes only, and has no closing tag. To display an image on a page, you need to use the src attribute. $rc stands for 5source5. The )alue of the src attribute is the 84L of the image you want to display. Synta. for defining an image#
ttribute
<img sr"="url" alt="some_text"/>

The 84L points to the location where the image is stored. n image named 5boat.gif5, located in the 5images5 directory on 5www.w3schools.com5 has the 84L= http=##www.w3schools.com#images#boat.gif. The browser displays the image where the !img" tag occurs in the document. 1f you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
HTML 1mages % The
lt
ttribute
The reDuired alt attribute specifies an alternate text for an image, if the image cannot be displayed. The )alue of the alt attribute is an author%defined text=
<img sr"="boat.gif" alt="8ig 8oat" />

The alt attribute pro)ides alternati)e information for an image if a user for some reason cannot )iew it -because of slow connection, an error in the src attribute, or if the user uses a screen reader..
HTML 1mages % $et Height and Width of an 1mage

The height and width attributes are used to specify the height and width of an image.
The attribute )alues are specified in pixels by default=
<img sr"="p)lpit.$pg" alt="9)lpit ro"#" !idth="3%&" height="22:" />

Tip# 1t is a good practice to specify both the height and width attributes for an image. 1f these attributes are set, the space reDuired for the image is reser)ed when the page is loaded. Howe)er, without these attributes, the browser does not know the siAe of the image. The effect will be that the page layout will change during loading -while the images load..

"ote# 1f an HTML file contains ten images % ele)en files are reDuired to display the page right. Loading images take time, so my best ad)ice is= 8se images carefully. "ote# When a web page is loaded, it is the browser, at that moment, that actually gets the image from a web ser)er and inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page, otherwise your )isitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.
HTML Tables
HTML Tables
pples :ananas 0ranges 0ther @@G 73G 63G 6FG
HTML Tables
Tables are defined with the !table" tag. table is di)ided into rows -with the !tr" tag., and each row is di)ided into data cells -with the !td" tag.. td stands for 5table data,5 and holds the content of a data cell. !td" tag can contain text, links, images, lists, forms, other tables, etc.
Table *xample
<table border="1"> <tr> <td>ro! 1- "ell 1</td> <td>ro! 1- "ell 2</td> </tr> <tr> <td>ro! 2- "ell 1</td> <td>ro! 2- "ell 2</td>
</tr> </table>
How the HTML code abo)e looks in a browser= row 6, cell 6 row 6, cell 7 row 7, cell 6 row 7, cell 7
HTML Tables and the :order
ttribute
1f you do not specify a border attribute, the table will be displayed without borders. $ometimes this can be useful, but most of the time, we want the borders to show. To display a table with borders, specify the border attribute=
<table border="1"> <tr> <td>;o! 1- "ell 1</td> <td>;o! 1- "ell 2</td> </tr> </table>
HTML Table Headers

Header information in a table are defined with the !th" tag. ll ma2or browsers will display the text in the !th" element as bold and centered.
<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>ro! 1- "ell 1</td> <td>ro! 1- "ell 2</td> </tr> <tr> <td>ro! 2- "ell 1</td> <td>ro! 2- "ell 2</td> </tr> </table>
How the HTML code abo)e looks in your browser= Header 4 Header 5
row 6, cell 6 row 6, cell 7
row 7, cell 6 row 7, cell 7
HTML Table Tags

Tag !table" !th" !tr" !td" !caption" !colgroup" !col #" !thead" !tbody" !tfoot" 1escription +efines a table +efines a table header +efines a table row +efines a table cell +efines a table caption +efines a group of columns in a table, for formatting +efines attribute )alues for one or more columns in a table Hroups the header content in a table Hroups the body content in a table Hroups the footer content in a table
HTML Lists
The most common HTML lists are ordered and unordered lists=
HTML Lists
n ordered list=
6. The first list item 7. The second list item 3. The third list item
n unordered list=

List item List item List item
HTML 8nordered Lists

n unordered list starts with the !ul" tag. *ach list item starts with the !li" tag. The list items are marked with bullets -typically small black circles..
<)l> <li>1offee</li> <li>Mil#</li> </)l>

How the HTML code abo)e looks in a browser=
/offee Milk
HTML 0rdered Lists

n ordered list starts with the !ol" tag. *ach list item starts with the !li" tag. The list items are marked with numbers.
<ol> <li>1offee</li> <li>Mil#</li> </ol>

How the HTML code abo)e looks in a browser= 6. 7. /offee Milk
HTML +efinition Lists

definition list is a list of items, with a description of each item. The !dl" tag defines a definition list. The !dl" tag is used in con2unction with !dt" -defines the item in the list. and !dd" -describes the item in the list.=
<dl> <dt>1offee</dt> <dd>( bla"# hot drin#</dd> <dt>Mil#</dt> <dd>( !hite "old drin#</dd> </dl>
How the HTML code abo)e looks in a browser= /offee Milk
% black hot drink % white cold drink

Tip# 1nside a list item you can put text, line breaks, images, links, other lists, etc.
HTML List Tags
Tag !ol" !ul" !li" !dl" !dt" !dd"
1escription +efines an ordered list +efines an unordered list +efines a list item +efines a definition list +efines an item in a definition list +efines a description of an item in a definition list
HTML /orms and Input

HTML 9orms are used to select different kinds of user input.
HTML 9orms
HTML forms are used to pass data to a ser)er. form can contain input elements like text fields, checkboxes, radio%buttons, submit buttons and more. form can also contain select lists, textarea, fieldset, legend, and label elements. The !form" tag is used to create an HTML form=
<form> . input elements . </form>
HTML 9orms % The 1nput *lement

The most important form element is the input element. The input element is used to select user information. n input element can )ary in many ways, depending on the type attribute. n input element can be of type text field, checkbox, password, radio button, submit button, and more. The most used input types are described below.
Text 9ields
!input type>5text5 #" defines a one%line input field that a user can enter text into=
<form> First name <inp)t type="te.t" name="firstname" /><br /> <ast name <inp)t type="te.t" name="lastname" />
</form>
9irst name= Last name= "ote# The form itself is not )isible. characters. lso note that the default width of a text field is 7F
<assword 9ield
!input type>5password5 #" defines a password field=
<form> 9ass!ord </form>
<inp)t type="pass!ord" name="p!d" />
<assword= "ote# The characters in a password field are masked -shown as asterisks or circles..
4adio :uttons
!input type>5radio5 #" defines a radio button. 4adio buttons let a user select 0'L& 0'* one of a limited number of choices=
<form> <inp)t type="radio" name="se." /al)e="male" /> Male<br /> <inp)t type="radio" name="se." /al)e="female" /> Female </form>
Male 9emale
/heckboxes
!input type>5checkbox5 #" defines a checkbox. /heckboxes let a user select 0'* or M04* options of a limited number of choices.
<form> <inp)t type=""he"#bo." name="/ehi"le" /al)e="8i#e" /> = ha/e a bi#e<br /> <inp)t type=""he"#bo." name="/ehi"le" /al)e="1ar" /> = ha/e a "ar </form>
1 ha)e a bike 1 ha)e a car
$ubmit :utton
!input type>5submit5 #" defines a submit button. submit button is used to send form data to a ser)er. The data is sent to the page specified in the form(s action attribute. The file defined in the action attribute usually does something with the recei)ed input=
<form name="inp)t" a"tion="html5form5a"tion.asp" method="get"> 6sername <inp)t type="te.t" name=")ser" /> <inp)t type="s)bmit" /al)e="4)bmit" /> </form>
Submit
8sername=
1f you type some characters in the text field abo)e, and click the 5$ubmit5 button, the browser will send your input to a page called 5htmlIformIaction.asp5. The page will show you the recei)ed input.
HTML /rames
With frames, se)eral Web pages can be displayed in the same browser window. TT*'T10'. +o not expect frames to be supported in future )ersions of HTML.
HTML 9rames
With frames, you can display more than one HTML document in the same browser window. *ach HTML document is called a frame, and each frame is independent of the others. The disad)antages of using frames are=
9rames are not expected to be supported in future )ersions of HTML 9rames are difficult to use. -<rinting the entire page is difficult..
The web de)eloper must keep track of more HTML documents
The HTML frameset *lement

The frameset element holds one or more frame elements. *ach frame element can hold a separate document. The frameset element states H0W M '& columns or rows there will be in the frameset, and H0W M8/H percentage#pixels of space will occupy each of them.
The HTML frame *lement

The !frame" tag defines one particular window -frame. within a frameset. 1n the example below we ha)e a frameset with two columns. The first column is set to 7EG of the width of the browser window. The second column is set to JEG of the width of the browser window. The document 5frameIa.htm5 is put into the first column, and the document 5frameIb.htm5 is put into the second column=
<frameset "ols="2+>-?+>"> <frame sr"="frame5a.htm" /> <frame sr"="frame5b.htm" /> </frameset>

"ote# The frameset column siAe can also be set in pixels -cols>57FF,EFF5., and one of the columns can be set to use the remaining space, with an asterisk -cols>57EG,K5..

Tip# 1f a frame has )isible borders, the user can resiAe it by dragging the border. To pre)ent a user from doing this, you can add noresiAe>5noresiAe5 to the !frame" tag. "ote# dd the !noframes" tag for browsers that do not support frames.
Important# &ou cannot use the !body"!#body" tags together with the !frameset"!#frameset" tagsB Howe)er, if you add a !noframes" tag containing some text for browsers that do not support frames, you will ha)e to enclose the text in !body"!#body" tagsB $ee how it is done in the first example below.
HTML 9rame Tags

Tag !frameset" !frame #" !noframes" 1escription +efines a set of frames +efines a sub window -a frame. +efines a noframe section for browsers that do not handle frames
HTML Iframes
n iframe is used to display a web page within a web page.
Synta. for adding an iframe#
<iframe sr"="URL"></iframe>
The 84L points to the location of the separate page.
1frame % $et Height and Width

The height and width attributes are used to specify the height and width of the iframe. The attribute )alues are specified in pixels by default, but they can also be in percent -like 5LFG5..
*xample
<iframe sr"="demo5iframe.htm" !idth="2%%" height="2%%"></iframe>
1frame % 4emo)e the :order

The frameborder attribute specifies whether or not to display a border around the iframe. $et the attribute )alue to 5F5 to remo)e the border=
*xample
<iframe sr"="demo5iframe.htm" frameborder="%"></iframe>
HTML 3olors
/olor ,alues
HTML colors are defined using a hexadecimal notation -H*?. for the combination of 4ed, Hreen, and :lue color )alues -4H:.. The lowest )alue that can be gi)en to one of the light sources is F -in H*?= FF.. The highest )alue is 7EE -in H*?= 99.. H*? )alues are specified as 3 pairs of two%digit numbers, starting with a M sign.
/olor ,alues
3olor 3olor H$6 MFFFFFF M99FFFF MFF99FF MFFFF99 M9999FF MFF9999 M99FF99 M/F/F/F M999999 3olor 7GB rgb-F,F,F. rgb-7EE,F,F. rgb-F,7EE,F. rgb-F,F,7EE. rgb-7EE,7EE,F. rgb-F,7EE,7EE. rgb-7EE,F,7EE. rgb-6N7,6N7,6N7. rgb-7EE,7EE,7EE.
6; Million +ifferent /olors

The combination of 4ed, Hreen, and :lue )alues from F to 7EE, gi)es more than 6; million different colors -7E; x 7E; x 7E;.. 1f you look at the color table below, you will see the result of )arying the red light from F to 7EE, while keeping the green and blue light at Aero. To see the full list of color mixes when 4*+ )aries from F to 7EE, click on one of the H*? or 4H: )alues below. 7ed Lig t 3olor H$6 MFFFFFF MFLFFFF M6FFFFF M6LFFFF M7FFFFF M7LFFFF M3FFFFF M3LFFFF M@FFFFF M@LFFFF MEFFFFF MELFFFF M;FFFFF M;LFFFF MJFFFFF MJLFFFF 3olor 7GB rgb-F,F,F. rgb-L,F,F. rgb-6;,F,F. rgb-7@,F,F. rgb-37,F,F. rgb-@F,F,F. rgb-@L,F,F. rgb-E;,F,F. rgb-;@,F,F. rgb-J7,F,F. rgb-LF,F,F. rgb-LL,F,F. rgb-N;,F,F. rgb-6F@,F,F. rgb-667,F,F. rgb-67F,F,F.
MLFFFFF MLLFFFF MNFFFFF MNLFFFF M FFFFF M LFFFF M:FFFFF M:LFFFF M/FFFFF M/LFFFF M+FFFFF M+LFFFF M*FFFFF M*LFFFF M9FFFFF M9LFFFF M99FFFF
rgb-67L,F,F. rgb-63;,F,F. rgb-6@@,F,F. rgb-6E7,F,F. rgb-6;F,F,F. rgb-6;L,F,F. rgb-6J;,F,F. rgb-6L@,F,F. rgb-6N7,F,F. rgb-7FF,F,F. rgb-7FL,F,F. rgb-76;,F,F. rgb-77@,F,F. rgb-737,F,F. rgb-7@F,F,F. rgb-7@L,F,F. rgb-7EE,F,F.
$hades of Hray
Hray colors are created by using an eDual amount of power to all of the light sources. To make it easier for you to select the correct shade, we ha)e created a table of gray shades for you= Gray S ades 3olor H$6 MFFFFFF MFLFLFL M6F6F6F M6L6L6L M7F7F7F M7L7L7L M3F3F3F M3L3L3L M@F@F@F M@L@L@L MEFEFEF MELELEL M;F;F;F M;L;L;L 3olor 7GB rgb-F,F,F. rgb-L,L,L. rgb-6;,6;,6;. rgb-7@,7@,7@. rgb-37,37,37. rgb-@F,@F,@F. rgb-@L,@L,@L. rgb-E;,E;,E;. rgb-;@,;@,;@. rgb-J7,J7,J7. rgb-LF,LF,LF. rgb-LL,LL,LL. rgb-N;,N;,N;. rgb-6F@,6F@,6F@.
MJFJFJF MJLJLJL MLFLFLF MLLLLLL MNFNFNF MNLNLNL M F F F M L L L M:F:F:F M:L:L:L M/F/F/F M/L/L/L M+F+F+F M+L+L+L M*F*F*F M*L*L*L M9F9F9F M9L9L9L M999999
rgb-667,667,667. rgb-67F,67F,67F. rgb-67L,67L,67L. rgb-63;,63;,63;. rgb-6@@,6@@,6@@. rgb-6E7,6E7,6E7. rgb-6;F,6;F,6;F. rgb-6;L,6;L,6;L. rgb-6J;,6J;,6J;. rgb-6L@,6L@,6L@. rgb-6N7,6N7,6N7. rgb-7FF,7FF,7FF. rgb-7FL,7FL,7FL. rgb-76;,76;,76;. rgb-77@,77@,77@. rgb-737,737,737. rgb-7@F,7@F,7@F. rgb-7@L,7@L,7@L. rgb-7EE,7EE,7EE.
Web $afe /olors?

$ome years ago, when computers supported max 7E; different colors, a list of 76; 5Web $afe /olors5 was suggested as a Web standard, reser)ing @F fixed system colors. The 76; cross%browser color palette was created to ensure that all computers would display the colors correctly when running a 7E; color palette. This is not important today, since most computers can display millions of different colors. nyway, here is the list= FFFFFF FF33FF FF;;FF FFNNFF FF//FF FF99FF 33FFFF 3333FF 33;;FF 33NNFF 33//FF FFFF33 FF3333 FF;;33 FFNN33 FF//33 FF9933 33FF33 333333 33;;33 33NN33 33//33 FFFF;; FF33;; FF;;;; FFNN;; FF//;; FF99;; 33FF;; 3333;; 33;;;; 33NN;; 33//;; FFFFNN FF33NN FF;;NN FFNNNN FF//NN FF99NN 33FFNN 3333NN 33;;NN 33NNNN 33//NN FFFF// FF33// FF;;// FFNN// FF//// FF99// 33FF// 3333// 33;;// 33NN// 33//// FFFF99 FF3399 FF;;99 FFNN99 FF//99 FF9999 33FF99 333399 33;;99 33NN99 33//99
3399FF ;;FFFF ;;33FF ;;;;FF ;;NNFF ;;//FF ;;99FF NNFFFF NN33FF NN;;FF NNNNFF NN//FF NN99FF //FFFF //33FF //;;FF //NNFF ////FF //99FF 99FFFF 9933FF 99;;FF 99NNFF 99//FF 9999FF
339933 ;;FF33 ;;3333 ;;;;33 ;;NN33 ;;//33 ;;9933 NNFF33 NN3333 NN;;33 NNNN33 NN//33 NN9933 //FF33 //3333 //;;33 //NN33 ////33 //9933 99FF33 993333 99;;33 99NN33 99//33 999933
3399;; ;;FF;; ;;33;; ;;;;;; ;;NN;; ;;//;; ;;99;; NNFF;; NN33;; NN;;;; NNNN;; NN//;; NN99;; //FF;; //33;; //;;;; //NN;; ////;; //99;; 99FF;; 9933;; 99;;;; 99NN;; 99//;; 9999;;
3399NN ;;FFNN ;;33NN ;;;;NN ;;NNNN ;;//NN ;;99NN NNFFNN NN33NN NN;;NN NNNNNN NN//NN NN99NN //FFNN //33NN //;;NN //NNNN ////NN //99NN 99FFNN 9933NN 99;;NN 99NNNN 99//NN 9999NN
3399// ;;FF// ;;33// ;;;;// ;;NN// ;;//// ;;99// NNFF// NN33// NN;;// NNNN// NN//// NN99// //FF// //33// //;;// //NN// ////// //99// 99FF// 9933// 99;;// 99NN// 99//// 9999//
339999 ;;FF99 ;;3399 ;;;;99 ;;NN99 ;;//99 ;;9999 NNFF99 NN3399 NN;;99 NNNN99 NN//99 NN9999 //FF99 //3399 //;;99 //NN99 ////99 //9999 99FF99 993399 99;;99 99NN99 99//99 999999
$orted by /olor 'ame

3olor "ame lice:lue ntiDueWhite Dua Duamarine Aure :eige :isDue :lack :lanched lmond :lue :lue,iolet H$6 M9F9L99 M9 *:+J MFF9999 MJ999+@ M9F9999 M9E9E+/ M99*@/@ MFFFFFF M99*:/+ MFFFF99 ML 7:*7 3olor S ades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades Mi. Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix
:rown :urlyWood /adet:lue /hartreuse /hocolate /oral /ornflower:lue /ornsilk /rimson /yan +ark:lue +ark/yan +arkHolden4od +arkHray +arkHrey +arkHreen +arkOhaki +arkMagenta +ark0li)eHreen +arkorange +ark0rchid +ark4ed +ark$almon +ark$eaHreen +ark$late:lue +ark$lateHray +ark$lateHrey +arkTurDuoise +ark,iolet +eep<ink +eep$ky:lue +imHray +imHrey +odger:lue 9ire:rick 9loralWhite 9orestHreen 9uchsia Hainsboro
M E7 7 M+*:LLJ ME9N* F MJ999FF M+7;N6* M99J9EF M;@NE*+ M999L+/ M+/6@3/ MFF9999 MFFFFL: MFFL:L: M:LL;F: M N N N M N N N MFF;@FF M:+:J;: ML:FFL: MEE;:79 M99L/FF MNN37// ML:FFFF M*NN;J ML9:/L9 M@L3+L: M79@9@9 M79@9@9 MFF/*+6 MN@FF+3 M996@N3 MFF:999 M;N;N;N M;N;N;N M6*NF99 M:77777 M999 9F M77L:77 M99FF99 M+/+/+/
$hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades
Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix
HhostWhite Hold Holden4od Hray Hrey Hreen Hreen&ellow Honey+ew Hot<ink 1ndian4ed 1ndigo 1)ory Ohaki La)ender La)ender:lush LawnHreen Lemon/hiffon Light:lue Light/oral Light/yan LightHray LightHrey LightHreen Light<ink Light$almon Light$eaHreen Light$ky:lue Light$lateHray Light$lateHrey Light$teel:lue Light&ellow Lime LimeHreen Linen Magenta Maroon Medium DuaMarine Medium:lue
M9L9L99 M99+JFF M+ E7F MLFLFLF MLFLFLF MFFLFFF M +9979 M9F999F M99;N:@ M/+E/E/ M@:FFL7 M99999F M9F*;L/ M*;*;9 M999F9E MJ/9/FF M999 /+ M ++L*; M9FLFLF M*F9999 M+3+3+3 M+3+3+3 MNF**NF M99:;/6 M99 FJ M7F:7 MLJ/*9 MJJLLNN MJJLLNN M:F/@+* M9999*F MFF99FF M37/+37 M9 9F*; M99FF99 MLFFFFF M;;/+ MFFFF/+
LightHolden4od&ellow M9 9 +7
Medium0rchid Medium<urple Medium$eaHreen Medium$late:lue Medium$pringHreen MediumTurDuoise Medium,iolet4ed Midnight:lue Mint/ream Misty4ose Moccasin 'a)a2oWhite 'a)y 0ldLace 0li)e 0li)e+rab 0range 0range4ed 0rchid <aleHolden4od <aleHreen <aleTurDuoise <ale,iolet4ed <apayaWhip <each<uff <eru <ink <lum <owder:lue <urple 4ed 4osy:rown 4oyal:lue $addle:rown $almon $andy:rown $eaHreen $ea$hell $ienna
M: EE+3 MN3JF+L M3/:3J6 MJ:;L** MFF9 N M@L+6// M/J6ELE M6N6NJF M9E999 M99*@*6 M99*@:E M99+* + MFFFFLF M9+9E*; MLFLFFF M;:L*73 M99 EFF M99@EFF M+ JF+; M***L MNL9:NL M 9**** M+LJFN3 M99*9+E M99+ :N M/+LE39 M99/F/: M++ F++ M:F*F*; MLFFFLF M99FFFF M:/L9L9 M@6;N*6 ML:@E63 M9 LFJ7 M9@ @;F M7*L:EJ M999E** M FE77+
$il)er $ky:lue $late:lue $lateHray $lateHrey $now $pringHreen $teel:lue Tan Teal Thistle Tomato TurDuoise ,iolet Wheat White White$moke &ellow &ellowHreen
M/F/F/F MLJ/**: M; E /+ MJFLFNF MJFLFNF M999 9 MFF99J9 M@;L7:@ M+7:@L/ MFFLFLF M+L:9+L M99;3@J M@F*F+F M**L7** M9E+*:3 M999999 M9E9E9E M9999FF MN /+37
$hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades
Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix
HTML 3olor 8alues

$orted by Hex ,alue
$ame list sorted by color name 3olor "ame :lack 'a)y +ark:lue Medium:lue :lue +arkHreen Hreen Teal +ark/yan +eep$ky:lue +arkTurDuoise Medium$pringHreen H$6 MFFFFFF MFFFFLF MFFFFL: MFFFF/+ MFFFF99 MFF;@FF MFFLFFF MFFLFLF MFFL:L: MFF:999 MFF/*+6 MFF9 N 3olor S ades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades Mi. Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix
Lime $pringHreen Dua /yan Midnight:lue +odger:lue Light$eaHreen 9orestHreen $eaHreen +ark$lateHray +ark$lateHrey LimeHreen Medium$eaHreen TurDuoise 4oyal:lue $teel:lue +ark$late:lue MediumTurDuoise 1ndigo +ark0li)eHreen /adet:lue /ornflower:lue Medium DuaMarine +imHray +imHrey $late:lue 0li)e+rab $lateHray $lateHrey Light$lateHray Light$lateHrey Medium$late:lue LawnHreen /hartreuse Duamarine Maroon <urple 0li)e Hray
MFF99FF MFF99J9 MFF9999 MFF9999 M6N6NJF M6*NF99 M7F:7 M77L:77 M7*L:EJ M79@9@9 M79@9@9 M37/+37 M3/:3J6 M@F*F+F M@6;N*6 M@;L7:@ M@L3+L: M@L+6// M@:FFL7 MEE;:79 ME9N* F M;@NE*+ M;;/+ M;N;N;N M;N;N;N M; E /+ M;:L*73 MJFLFNF MJFLFNF MJJLLNN MJJLLNN MJ:;L** MJ/9/FF MJ999FF MJ999+@ MLFFFFF MLFFFLF MLFLFFF MLFLFLF
Hrey $ky:lue Light$ky:lue :lue,iolet +ark4ed +arkMagenta $addle:rown +ark$eaHreen LightHreen Medium<urple +ark,iolet <aleHreen +ark0rchid &ellowHreen $ienna :rown +arkHray +arkHrey Light:lue Hreen&ellow <aleTurDuoise Light$teel:lue <owder:lue 9ire:rick +arkHolden4od Medium0rchid 4osy:rown +arkOhaki $il)er Medium,iolet4ed 1ndian4ed <eru /hocolate Tan LightHray LightHrey <ale,iolet4ed Thistle 0rchid
MLFLFLF MLJ/**: MLJ/*9 ML 7:*7 ML:FFFF ML:FFL: ML:@E63 ML9:/L9 MNF**NF MN3JF+L MN@FF+3 MNL9:NL MNN37// MN /+37 M FE77+ M E7 7 M N N N M N N N M ++L*; M +9979 M 9**** M:F/@+* M:F*F*; M:77777 M:LL;F: M: EE+3 M:/L9L9 M:+:J;: M/F/F/F M/J6ELE M/+E/E/ M/+LE39 M+7;N6* M+7:@L/ M+3+3+3 M+3+3+3 M+LJFN3 M+L:9+L M+ JF+;
Holden4od /rimson Hainsboro <lum :urlyWood Light/yan La)ender +ark$almon ,iolet <aleHolden4od Light/oral Ohaki lice:lue Honey+ew Aure $andy:rown Wheat :eige White$moke Mint/ream HhostWhite $almon ntiDueWhite Linen 0ldLace 4ed 9uchsia Magenta +eep<ink 0range4ed Tomato Hot<ink /oral +arkorange Light$almon 0range Light<ink <ink
M+
E7F
M+/6@3/ M+/+/+/ M++ F++ M+*:LLJ M*F9999 M*;*;9 M*NN;J M**L7** M***L M9FLFLF M9F*;L/ M9F9L99 M9F999F M9F9999 M9@ @;F M9E+*:3 M9E9E+/ M9E9E9E M9E999 M9L9L99 M9 LFJ7 M9 *:+J M9 9F*; M9+9E*; M99FFFF M99FF99 M99FF99 M996@N3 M99@EFF M99;3@J M99;N:@ M99J9EF M99L/FF M99 FJ M99 EFF M99:;/6 M99/F/:
LightHolden4od&ellow M9 9 +7
Hold <each<uff 'a)a2oWhite Moccasin :isDue Misty4ose :lanched lmond <apayaWhip La)ender:lush $ea$hell /ornsilk Lemon/hiffon 9loralWhite $now &ellow Light&ellow 1)ory White
M99+JFF M99+ :N M99+* + M99*@:E M99*@/@ M99*@*6 M99*:/+ M99*9+E M999F9E M999E** M999L+/ M999 /+ M999 9F M999 9 M9999FF M9999*F M99999F M999999
$hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades $hades
Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix
HTML @.F6 9uick List

HTML Cuick List from W3$chools. <rint it, fold it, and put it in your pocket.
HTML :asic +ocument

!html" !head" !title"Title of document goes here!#title" !#head" !body" ,isible text goes here... !#body" !#html"
Heading *lements
!h6"Largest Heading!#h6" !h7" !h3" !h@" !hE" . . . . . . . . . . . . !#h7" !#h3" !#h@" !#hE"
!h;"$mallest Heading!#h;"
Text *lements
!p"This is a paragraph!#p" !br #" -line break. !hr #" -horiAontal rule. !pre"This text is preformatted!#pre"
Logical $tyles
!em"This text is emphasiAed!#em" !strong"This text is strong!#strong" !code"This is some computer code!#code"
<hysical $tyles
!b"This text is bold!#b" !i"This text is italic!#i"
Links
0rdinary link= !a href>5http=##www.example.com#5"Link%text goes here!#a" 1mage%link= !a href>5http=##www.example.com#5"!img src>584L5 alt>5 lternate Text5 #"!#a" Mailto link= !a href>5mailto=webmasterPexample.com5"$end e%mail!#a" named anchor= !a name>5tips5"Tips $ection!#a" !a href>5Mtips5"Qump to the Tips $ection!#a"
8nordered list
!ul" !li"1tem!#li" !li"1tem!#li" !#ul"
0rdered list
!ol" !li"9irst item!#li" !li"$econd item!#li" !#ol"
+efinition list
!dl" !dt"9irst term!#dt" !dd"+efinition!#dd" !dt"'ext term!#dt" !dd"+efinition!#dd" !#dl"
Tables
!table border>565" !tr"
!th"Tableheader!#th" !th"Tableheader!#th" !#tr" !tr" !td"sometext!#td" !td"sometext!#td" !#tr" !#table"
9rames
!frameset cols>57EG,JEG5" !frame src>5page6.htm5 #" !frame src>5page7.htm5 #" !#frameset"
9orms
!form action>5http=##www.example.com#test.asp5 method>5post#get5" !input !input !input !input !input !input !input type>5text5 name>5email5 siAe>5@F5 maxlength>5EF5 #" type>5password5 #" type>5checkbox5 checked>5checked5 #" type>5radio5 checked>5checked5 #" type>5submit5 )alue>5$end5 #" type>5reset5 #" type>5hidden5 #"
!select" !option" pples!#option" !option selected>5selected5":ananas!#option" !option"/herries!#option" !#select" !textarea name>5comment5 rows>5;F5 cols>57F5"!#textarea" !#form"

HTML

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML

Încărcat de

Drepturi de autor:

Formate disponibile

What is HTML?

HTML is a language for describing web pages.

HTML % Getting Started

What &ou 'eed

/reate &our 0wn Test Web

8se &our Test Web 9or Learning

.HTM or .HTML 9ile *xtension?

Start tag % !p" !a href>5default.htm5 " !br #"

$lement content This is a paragraph This is a link !#p" !#a"

HTML *lement $yntax

'ested HTML *lements

HTML +ocument *xample

HTML *xample *xplained

<p>This is my first paragraph.</p>

<body> <p>This is my first paragraph.</p> </body>

<html> <body> <p>This is my first paragraph.</p> </body> </html>

+on(t 9orget the *nd Tag

<p>This is a paragraph <p>This is a paragraph

*mpty HTML *lements

HTML Tip= 8se Lowercase Tags

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

+on(t 9orget the *nd Tag

HTML Line :reaks

!br" or !br #"

HTML Te.t /ormatting

This text is big

This is subscript and

HTML 9ormatting Tags

HTML Text 9ormatting Tags

HTML 5/omputer 0utput5 Tags

HTML /itations, Cuotations, and +efinition Tags

Tag !abbr" !acronym" !address" !bdo" !blockDuote" !D" !cite" !dfn"

HTML Styles 2 3SS

LookB $tyles and colors

This text is 3F pixels high

8sing the HTML $tyle

HTML $tyle *xample % :ackground /olor

HTML $tyle *xample % 9ont, /olor and $iAe

HTML $tyle *xample % Text

The text%align property specifies the horiAontal alignment of text in an element=

+eprecated Tags and

HTML Hyperlinks -Links.

HTML Link $yntax

<a href="url">Link text</a>

HTML Links % The target

HTML Links % The name

<a name="tips">6sef)l Tips 4e"tion</a>

<a href="7tips">2isit the 6sef)l Tips 4e"tion</a>

<a href="http //!!!.!3s"hools."om/html5lin#s.htm7tips"> 2isit the 6sef)l Tips 4e"tion</a>

:asic 'otes % 8seful Tips

<img sr"="url" alt="some_text"/>

HTML 1mages % The

<img sr"="boat.gif" alt="8ig 8oat" />

HTML 1mages % $et Height and Width of an 1mage

The attribute )alues are specified in pixels by default=

<img sr"="p)lpit.$pg" alt="9)lpit ro"#" !idth="3%&" height="22:" />

:asic 'otes % 8seful Tips

HTML Tables and the :order

HTML Table Headers

row 6, cell 6 row 6, cell 7

row 7, cell 6 row 7, cell 7

HTML Table Tags

List item List item List item

HTML xample xplained

mpty HTML lements