Beruflich Dokumente
Kultur Dokumente
HTML Tutorial
In this HTML tutorial you will learn how to use HTML to create your own Web site. HTML is very easy to learn! You will enjoy it! Start learning HTML now!
HTML Examples
Learn by 100 examples! With our editor, you can edit HTML, and click on a test button to view the result. Try-It-Yourself!
HTML References
At W3Schools you will find complete HTML references about tags, attributes, colors, entities, and more. HTML 4.01 References
Introduction to HTML
The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor
<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>
Save the file as "mypage.htm". Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "mypage.htm" - select it and click "Open". Now you should see an address in the dialog box, for example "C:\MyDocuments\mypage.htm". Click OK, and the browser will display the page.
Example Explained
The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document. The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window. The text between the <title> tags is the title of your document. The title is displayed in your browser's caption. The text between the <body> tags is the text that will be displayed in your browser. The text between the <b> and </b> tags will be displayed in a bold font.
When you save an HTML file, you can use either the .htm or the .html extension. We have used .htm in our examples. It might 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.
HTML Elements
HTML documents are text files made up of HTML elements. HTML elements are defined using HTML tags.
HTML Tags
HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets 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 The text between the start and end tags is the element content HTML tags are not case sensitive, <b> means the same as <B>
HTML Elements
Remember the HTML example from the previous page:
<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 HTML element:
Tag Attributes
Tags can have attributes. Attributes provide additional information to an HTML element. The following tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that the table should have no borders: <table border="0">
Attributes always come in name/value pairs like this: name="value". Attributes are always specified in the start tag of an HTML element. Attributes and attribute values are also case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation, and XHTML demands lowercase attributes/attribute values.
The most important tags in HTML are tags that define headings, paragraphs and line breaks. The best way to learn HTML is to work with examples. We have created a very nice HTML editor for you. With this editor, you can edit the HTML source code if you like, and click on a test button to view the result.
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.
is is is is is
a a a a a
<h6>This is a heading</h6>
HTML automatically adds an extra blank line before and after a heading.
Paragraphs
Paragraphs are defined with the <p> tag.
Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.
HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading. We use a horizontal rule (the <hr> tag), to separate the sections in our tutorials.
More Examples
More paragraphs This example demonstrates some of the default behaviors of paragraph elements. Line breaks This example demonstrates the use of line breaks in an HTML document. Poem problems This example demonstrates some problems with HTML formatting. Headings This example demonstrates the tags that display headings in an HTML document. Center aligned heading This example demonstrates a center aligned heading. Horizontal rule This example demonstrates how to insert a horizontal rule. Hidden comments This example demonstrates how to insert a hidden comment in the HTML source code. Background color This example demonstrates adding a background-color to an HTML page.
HTML defines a lot of elements for formatting output, like bold or italic text. Below are a lot of examples that you can try out yourself:
Examples
Text formatting This example demonstrates how you can format text in an HTML document. Preformatted text This example demonstrates how you can control the line breaks and spaces with the pre tag. "Computer output" tags This example demonstrates how different "computer output" tags will be displayed. Address This example demonstrates how to write an address in an HTML document. Abbreviations and acronyms This example demonstrates how to handle an abbreviation or an acronym. Text direction This example demonstrates how to change the text direction. Quotations This example demonstrates how to handle long and short quotations. Deleted and inserted text This example demonstrates how to mark a text that is deleted or inserted to a document.
Tag <code> <kbd> <samp> <tt> <var> <pre> <listing> <plaintext> <xmp>
Description Defines computer code text Defines keyboard text Defines sample computer code Defines teletype text Defines a variable Defines preformatted text Deprecated. Use <pre> instead Deprecated. Use <pre> instead Deprecated. Use <pre> instead
Some characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text. To display a less than sign (<) in HTML, we have to use a character entity.
Character Entities
Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source. A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;). To display a less than sign in an HTML document we must write: < or < The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers. Note that the entities are case sensitive.
This example lets you experiment with character entities: Character Entities
Non-breaking Space
The most common character entity in HTML is the non-breaking space. Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add spaces to your text, use the character entity.
To see a full list of HTML character entities go to our HTML Entities Reference.
HTML Links
Examples
Create hyperlinks This example demonstrates how to create links in an HTML document. An image as a link This example demonstrates how to use an image as a link.
10
11
More Examples
Open a link in a new browser window This example demonstrates how to link to another page by opening a new window, so that the visitor does not have to leave your Web site. Link to a location on the same page This example demonstrates how to use a link to jump to another part of a document. Break out of a frame This example demonstrates how to break out of a frame, if your site is locked in a frame. Create a mailto link This example demonstrates how to link to a mail message (will only work if you have mail installed). Create a mailto link 2 This example demonstrates a more complicated mailto link.
Link Tags
Tag <a> Description Defines an anchor
12
HTML Frames
With frames, you can display more than one Web page in the same browser window.
Examples
Vertical frameset This example demonstrates how to make a vertical frameset with three different documents. Horizontal frameset This example demonstrates how to make a horizontal frameset with three different documents. (You can find more examples at the bottom of this page)
Frames
With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The disadvantages of using frames are:
The web developer must keep track of more HTML documents It is difficult to print the entire page
In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column:
13
More Examples
How to use the <noframes> tag This example demonstrates how to use the <noframes> tag. Mixed frameset This example demonstrates how to make a frameset with three documents, and how to mix them in rows and columns. Frameset with noresize="noresize" This example demonstrates the noresize attribute. The frames are not resizable. Move the mouse over the borders between the frames and notice that you can not move the borders. Navigation frame This example demonstrates how to make a navigation frame. The navigation frame contains a list of links with the second frame as the target. The file called "tryhtml_contents.htm" contains three links. The source code of the links: <a href ="frame_a.htm" target ="showframe">Frame a</a><br> <a href ="frame_b.htm" target ="showframe">Frame b</a><br> <a href ="frame_c.htm" target ="showframe">Frame c</a> The second frame will show the linked document. Inline frame This example demonstrates how to create an inline frame (a frame inside an HTML page). Jump to a specified section within a frame This example demonstrates two frames. One of the frames has a source to a specified section in a file. The specified section is made with <a name="C10"> in the "link.htm" file. Jump to a specified section with frame navigation This example demonstrates two frames. The navigation frame (content.htm) to the left contains a list of links with the second frame (link.htm) as a target. The second frame shows the linked document. One of the links in the navigation frame is linked to a specified section in the target file. The HTML code in the file "content.htm" looks like this: <a href ="link.htm" target ="showframe">Link without Anchor</a><br><a href ="link.htm#C10" target ="showframe">Link with Anchor</a>.
Frame Tags
Tag <frameset> <frame> Description Defines a set of frames Defines a sub window (a frame)
14
<noframes> <iframe>
Defines a noframe section for browsers that do not handle frames Defines an inline sub window (frame)
HTML Tables
Examples
Tables This example demonstrates how to create tables in an HTML document. Table borders This example demonstrates different table borders. (You can find more examples at the bottom of this page)
Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
How it looks in a browser: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
15
<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>
Headings in a Table
Headings in a table are defined with the <th> tag.
<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
How it looks in a browser: Heading Another Heading
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table>
How it looks in a browser: row 1, cell 1 row 1, cell 2 row 2, cell 1
16
Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border). To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible:
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td> </td> </tr> </table>
How it looks in a browser: row 1, cell 1 row 1, cell 2 row 2, cell 1
More Examples
Table with no border This example demonstrates a table with no borders. Headings in a table This example demonstrates how to display table headers. Empty cells This example demonstrates how to use " " 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 row/column This example demonstrates how to define table cells that span more than one row or one column. Tags inside a table This example demonstrates how to display elements inside other elements. Cell padding This example demonstrates how to use cellpadding to create more white space between the cell content and its borders. Cell spacing This example demonstrates how to use cellspacing to increase the distance between the cells.
17
Add a background color or a background image to a table This example demonstrates how to add a background to a table. Add a background color or a background image to a table cell This example demonstrates how to add a background to one or more table cells. Align the content in a table cell This example demonstrates how to use the "align" attribute to align the content of cells, to create a "nice-looking" 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 How to use the "frame" and "border" attributes to control the borders around the table.
Table Tags
Tag <table> <th> <tr> <td> <caption> <colgroup> <col> <thead> <tbody> <tfoot> Description Defines a table Defines a table header Defines a table row Defines a table cell Defines a table caption Defines groups of table columns Defines the attribute values for one or more columns in a table Defines a table head Defines a table body Defines a table footer
HTML Lists
Examples
An unordered list This example demonstrates an unordered list. An ordered list This example demonstrates an ordered list. (You can find more examples at the bottom of this page)
Unordered Lists
18
An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
Coffee Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
Definition Lists
A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
Here is how it looks in a browser:
19
Coffee Milk
Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc.
More Examples
Different types of ordered lists This example demonstrates different types of ordered lists. Different types of unordered Lists This example demonstrates different types of unordered lists. Nested list This example demonstrates how you can nest lists. Nested list 2 This example demonstrates a more complicated nested list. Definition list This example demonstrates a definition list.
List Tags
Tag <ol> <ul> <li> <dl> <dt> <dd> <dir> <menu> Description Defines an ordered list Defines an unordered list Defines a list item Defines a definition list Defines a definition term Defines a definition description Deprecated. Use <ul> instead Deprecated. Use <ul> instead
Examples
Text fields This example demonstrates how to create text fields on an HTML page. A user can write text in a text field.
20
Password fields This example demonstrates how to create a password field on an HTML page. (You can find more examples at the bottom of this page)
Forms
A form is an area that can contain form elements. Form 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. A form is defined with the <form> tag.
Input
The most used form tag is the <input> tag. 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> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form>
How it looks in a browser:
First name: Last name: Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default.
Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.
21
Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited number of choices.
<form> I have a bike: <input type="checkbox" name="vehicle" value="Bike" /> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> </form>
How it looks in a browser:
<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
How it looks in a browser:
Submit
Username:
22
If you type some characters in the text field above, and click the "Submit" button, you will send your input to a page called "html_form_action.asp". That page will show you the received input.
More Examples
Checkboxes This example demonstrates how to create check-boxes on an HTML page. A user can select or unselect a checkbox. Radio buttons This example demonstrates how to create radio-buttons on an HTML page. Simple drop down box This example demonstrates how to create a simple drop-down box on an HTML page. A drop-down box is a selectable list. Another 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). A user can write text in the text-area. In a text-area you can write an unlimited number of characters. Create a button This example demonstrates how to create a button. On the button you can define your own text. Fieldset around data This example demonstrates how to draw a border with a caption around your data.
Form Examples
Form with input fields and a submit button This example demonstrates how to add a form to a page. The form contains two input fields and a submit button. Form with checkboxes This form contains two checkboxes, and a submit button. Form with radio buttons This form contains two radio buttons, and a submit button. Send e-mail from a form This example demonstrates how to send e-mail from a form.
Form Tags
Tag <form> <input> <textarea> <label> <fieldset> <legend> Description Defines a form for user input Defines an input field Defines a text-area (a multi-line text input control) Defines a label to a control Defines a fieldset Defines a caption for a fieldset
23
Defines a selectable list (a drop-down box) Defines an option group Defines an option in the drop-down box Defines a push button Deprecated. Use <input> instead
HTML Images
Examples
Insert images This example demonstrates how to display images in your Web page. Insert images from different locations This example demonstrates how to display images from another folder or another server in your Web page. (You can find more examples at the bottom of this page)
<img src="url">
The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif. The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
24
More Examples
Background image This example demonstrates how to add a background image to an HTML page. Aligning images This example demonstrates how to align an image within the text. Let the image float This example demonstrates how to let an image float to the left or right of a paragraph. Adjust images to different sizes This example demonstrates how to adjust images to different sizes. Display an alternate text for an image This example demonstrates how to display an alternate text for an image. The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. It is a good practice to include the "alt" attribute for each image on a page. Make a hyperlink of an image This example demonstrates how to use an image as a link. Create an image map This example demonstrates how to create an image map, with clickable regions. Each of the regions is a hyperlink. Turn an image into an image map This example demonstrates how to turn an image into an image map. You will see that if you move the mouse over the image, the coordinates will be displayed on the status bar.
Image Tags
Tag <img> <map> <area> Description Defines an image Defines an image map Defines a clickable area inside an image map
HTML Backgrounds
25
Examples
Good background and text color An example of a background color and a text color that makes the text on the page easy to read. Bad background and text color An example of a background color and a text color that makes the text on the page difficult to read. (You can find more examples at the bottom of this page)
Backgrounds
The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image.
Bgcolor
The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name:
Background
The background attribute specifies a background-image for an HTML page. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.
Will the background image increase the loading time too much? Will the background image look good with other images on the page? Will the background image look good with the text colors on the page? Will the background image look good when it is repeated on the page? Will the background image take away the focus from the text?
26
More Examples
Good background image An example of a background image and a text color that makes the text on the page easy to read. Good background image 2 An example of a background image and a text color that makes the text on the page easy to read. Bad background image An example of a background image and a text color that makes the text on the page very difficult to read.
Computer Joke
Support: "Type dir, space, a, colon." Customer: "With a space after 'space'?"
HTML Colors
Colors are displayed combining RED, GREEN, and BLUE light sources.
Color Values
HTML colors can be defined as a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00) and the highest value is 255 (hex #FF). The table below shows the result of combining Red, Green, and Blue light sources:. Color Color HEX #000000 #FF0000 #00FF00 #0000FF #FFFF00 Color RGB rgb(0,0,0) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0)
27
28
66CC00 66FF00 990000 993300 996600 999900 99CC00 99FF00 CC0000 CC3300 CC6600 CC9900 CCCC00 CCFF00 FF0000 FF3300 FF6600 FF9900 FFCC00 FFFF00
66CC33 66FF33 990033 993333 996633 999933 99CC33 99FF33 CC0033 CC3333 CC6633 CC9933 CCCC33 CCFF33 FF0033 FF3333 FF6633 FF9933 FFCC33 FFFF33
66CC66 66FF66 990066 993366 996666 999966 99CC66 99FF66 CC0066 CC3366 CC6666 CC9966 CCCC66 CCFF66 FF0066 FF3366 FF6666 FF9966 FFCC66 FFFF66
66CC99 66FF99 990099 993399 996699 999999 99CC99 99FF99 CC0099 CC3399 CC6699 CC9999 CCCC99 CCFF99 FF0099 FF3399 FF6699 FF9999 FFCC99 FFFF99
66CCCC 66FFCC 9900CC 9933CC 9966CC 9999CC 99CCCC 99FFCC CC00CC CC33CC CC66CC CC99CC CCCCCC CCFFCC FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC
66CCFF 66FFFF 9900FF 9933FF 9966FF 9999FF 99CCFF 99FFFF CC00FF CC33FF CC66FF CC99FF CCCCFF CCFFFF FF00FF FF33FF FF66FF FF99FF FFCCFF FFFFFF
Colors are displayed combining RED, GREEN, and BLUE light sources.
Color Values
HTML colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex #00). The highest value is 255 (hex #FF).
29
30
#FF0000
rgb(255,0,0)
Shades of Gray
Gray colors are displayed using an equal amount of power to all of the light sources. To make it easier for you to select the right gray color we have compiled a table of gray shades for you: RGB(0,0,0) RGB(8,8,8) RGB(16,16,16) RGB(24,24,24) RGB(32,32,32) RGB(40,40,40) RGB(48,48,48) RGB(56,56,56) RGB(64,64,64) RGB(72,72,72) RGB(80,80,80) RGB(88,88,88) RGB(96,96,96) RGB(104,104,104) RGB(112,112,112) RGB(120,120,120) RGB(128,128,128) RGB(136,136,136) RGB(144,144,144) RGB(152,152,152) RGB(160,160,160) RGB(168,168,168) RGB(176,176,176) RGB(184,184,184) RGB(192,192,192) RGB(200,200,200) RGB(208,208,208) RGB(216,216,216) RGB(224,224,224) RGB(232,232,232) RGB(240,240,240) RGB(248,248,248) RGB(255,255,255) #000000 #080808 #101010 #181818 #202020 #282828 #303030 #383838 #404040 #484848 #505050 #585858 #606060 #686868 #707070 #787878 #808080 #888888 #909090 #989898 #A0A0A0 #A8A8A8 #B0B0B0 #B8B8B8 #C0C0C0 #C8C8C8 #D0D0D0 #D8D8D8 #E0E0E0 #E8E8E8 #F0F0F0 #F8F8F8 #FFFFFF
31
The table below provides a list of the color names that are supported by all major browsers. Note: If you want your pages to validate with an HTML or a CSS validator, W3C has listed 16 color names that you can use: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. If you want to use other colors, you must specify their RGB or HEX value. Click on a color name (or a hex value) to view the color as the background-color along with different text colors: Color Name AliceBlue AntiqueWhite Aqua Aquamarine Azure Beige Bisque Black BlanchedAlmond Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGrey DarkGreen DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray Color HEX #F0F8FF #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC #DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9 #A9A9A9 #006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F Color
32
DarkSlateGrey DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray DimGrey DodgerBlue FireBrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Gold GoldenRod Gray Grey Green GreenYellow HoneyDew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan LightGoldenRodYellow LightGray LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSlateGrey LightSteelBlue LightYellow Lime LimeGreen
#2F4F4F #00CED1 #9400D3 #FF1493 #00BFFF #696969 #696969 #1E90FF #B22222 #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 #DAA520 #808080 #808080 #008000 #ADFF2F #F0FFF0 #FF69B4 #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 #D3D3D3 #D3D3D3 #90EE90 #FFB6C1 #FFA07A #20B2AA #87CEFA #778899 #778899 #B0C4DE #FFFFE0 #00FF00 #32CD32
33
Linen Magenta Maroon MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum PowderBlue Purple Red RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue
#FAF0E6 #FF00FF #800000 #66CDAA #0000CD #BA55D3 #9370D8 #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #D87093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080 #FF0000 #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB #6A5ACD
34
SlateGray SlateGrey Snow SpringGreen SteelBlue Tan Teal Thistle Tomato Turquoise Violet Wheat White WhiteSmoke Yellow YellowGreen
#708090 #708090 #FFFAFA #00FF7F #4682B4 #D2B48C #008080 #D8BFD8 #FF6347 #40E0D0 #EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32
HTML Quick List from W3Schools. Print it, fold it, and put it in your pocket.
Heading Elements
<h1>Largest Heading</h1> <h2> <h3> <h4> <h5> . . . . . . . . . . . . </h2> </h3> </h4> </h5>
<h6>Smallest Heading</h6>
Text Elements
35
<p>This is a paragraph</p> <br> (line break) <hr> (horizontal rule) <pre>This text is preformatted</pre>
Logical Styles
<em>This text is emphasized</em> <strong>This text is strong</strong> <code>This is some computer code</code>
Physical Styles
<b>This text is bold</b> <i>This text is italic</i>
Unordered list
<ul> <li>First item</li> <li>Next item</li> </ul>
Ordered list
<ol> <li>First item</li> <li>Next item</li> </ol>
Definition list
<dl> <dt>First term</dt> <dd>Definition</dd> <dt>Next term</dt> <dd>Definition</dd> </dl>
Tables
<table border="1"> <tr> <th>someheader</th> <th>someheader</th> </tr>
36
Frames
<frameset cols="25%,75%"> <frame src="page1.htm"> <frame src="page2.htm"> </frameset>
Forms
<form action="http://www.example.com/test.asp" method="post/get"> <input <input <input <input <input <input <input type="text" name="lastname" value="Nixon" size="30" maxlength="50"> type="password"> type="checkbox" checked="checked"> type="radio" checked="checked"> type="submit"> type="reset"> type="hidden">
<select> <option>Apples <option selected>Bananas <option>Cherries </select> <textarea name="Comment" rows="60" cols="20"></textarea> </form>
Entities
< is the same as < > is the same as > © is the same as
Other Elements
<!-- This is a comment --> <blockquote> Text quoted from some source. </blockquote> <address> Address 1<br> Address 2<br> City<br> </address> Source : http://www.w3schools.com/html/html_quick.asp
37
HTML ADVANCED
HTML Layout
Everywhere on the Web you will find pages that are formatted like newspaper pages using HTML columns.
Examples
Dividing a part of an HTML page into table columns is very easy to do. To let you experiment with it, we have put together this simple example.
HTML Joke
Student: "How do you spell HTML?"
HTML Fonts
38
The <font> tag in HTML is deprecated. It is supposed to be removed in a future version of HTML. Even if a lot of people are using it, you should try to avoid it, and use styles instead.
<p> <font size="2" face="Verdana"> This is a paragraph. </font> </p> <p> <font size="3" face="Times"> This is another paragraph. </font> </p>
Try it yourself
Font Attributes
Attribute size="number" size="+number" size="-number" face="face-name" color="color-value" color="color-name" Example size="2" size="+1" size="-1" face="Times" color="#eeff00" color="red" Purpose Defines the font size Increases the font size Decreases the font size Defines the font-name Defines the font color Defines the font color
39
Set the font, font size, and font color of text This example demonstrates how to set the font, font size, and font color of a text.
40
NOTE: The official HTML 4.01 recommends the use of lower case tags. If you want to read about how this web site was converted to XHTML, please visit our XHTML tutorial.
HTML Styles
With HTML 4.0 all formatting can be moved out of the HTML document and into a separate style sheet.
Examples
Styles in HTML This example demonstrates how to format an HTML document with style information added to the <head> section.
41
Link that is not underlined This example demonstrates how to make a link that is not underlined, using a style attribute. Link to an external style sheet This example demonstrates how to use the <link> tag to link to an external style sheet.
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head> Inline Styles
An inline style should be used when a unique style is to be applied to a single occurrence of an element. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
Style Tags
Tag Description
42
Defines a style definition Defines a resource reference Defines a section in a document Defines a section in a document Deprecated. Use styles instead Deprecated. Use styles instead Deprecated. Use styles instead
Joke
Customer: Hello, it's me! Support: It's me too! Customer: No, Esmie. E, s, m, i, e! Support: Sorry!
HTML Head
Examples
The title of a document The title information inside a head element is not displayed in the browser window. One target for all links This example demonstrates how to use the base tag to let all the links on a page open in a new window.
43
Display the text because it is inside a paragraph element Hide the text because it is inside a head element
If you put an HTML element like <h1> or <p> inside a head element like this, most browsers will display it, even if it is illegal. Should browsers forgive you for errors like this? We don't think so. Others do.
Head Tags
Tag <head> <title> <base> <link> <meta> Tag <!DOCTYPE> Description Defines information about the document Defines the document title Defines a base URL for all the links on a page Defines a resource reference Defines meta information Description Defines the document type. This tag goes before the <html> start tag.
HTML Meta
Examples
Document description Information inside a meta element describes the document. Document keywords Information inside a meta element describes the document's keywords. Redirect a user This example demonstrates how to redirect a user if your site address has changed.
44
should not use this technique to forward users to different pages, as this makes the page inaccessible to some users. Instead, automatic page forwarding should be done using server-side redirects" at http://www.w3.org/TR/html4/struct/global.html#adef-http-equiv.
HTML Links
When you click on a link in an HTML document like this: Last Page, an underlying <a> tag points to a place (an address) on the Web with an href attribute value like this: <a href="lastpage.htm">Last Page</a>. The Last Page link in the example is a link that is relative to the Web site that you are browsing, and your browser will construct a full Web address like http://www.w3schools.com/html/lastpage.htm to access the page.
45
URL Schemes
Some examples of the most common schemes can be found below: Schemes file ftp http gopher news telnet WAIS Access a file on your local PC a file on an FTP server a file on a World Wide Web Server a file on a Gopher server a Usenet newsgroup a Telnet connection a file on a WAIS server
Accessing a Newsgroup
The following HTML code: <a href="news:alt.html">HTML Newsgroup</a> creates a link to a newsgroup like this HTML Newsgroup.
46
creates a link to download a file like this: Download WinZip. (The link doesn't work. Don't try it. It is just an example. W3Schools doesn't really have an ftp directory.)
HTML Scripts
Add scripts to HTML pages to make them more dynamic and interactive.
Examples
Insert a script This example demonstrates how to insert a script into your HTML document. Work with browsers that do not support scripts This example demonstrates how to handle browsers that do not support scripting.
<html> <head> </head> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html>
The script above will produce this output: Hello World! Note: To learn more about scripting in HTML, visit our JavaScript School.
47
Example
JavaScript: <script type="text/javascript"> <!-document.write("Hello World!") //--> </script> VBScript: <script type="text/vbscript"> <!-document.write("Hello World!") '--> </script>
Example
JavaScript: <script type="text/javascript"> <!-document.write("Hello World!") //--> </script> <noscript>Your browser does not support JavaScript!</noscript> VBScript: <script type="text/vbscript"> <!-document.write("Hello World!") '--> </script> <noscript>Your browser does not support VBScript!</noscript>
Script Tags
Tag <script> Description Defines a script
48
Defines an alternate text if the script is not executed Defines an embedded object Defines run-time settings (parameters) for an object Deprecated. Use <object> instead
HTML tags can have attributes. The special attributes for each tag are listed under each tag description. The attributes listed here are the core and language attributes that are standard for all tags (with a few exceptions):
Core Attributes
Not valid in base, head, html, meta, param, script, style, and title elements. Attribute class id style title Value class_rule or style_rule id_name style_definition tooltip_text Description The class of the element A unique id for the element An inline style definition A text to display in a tool tip
Language Attributes
Not valid in base, br, frame, frameset, hr, iframe, param, and script elements. Attribute dir lang Value ltr | rtl language_code Description Sets the text direction Sets the language code
Keyboard Attributes
Attribute accesskey tabindex Value character number Description Sets a keyboard shortcut to access an element Sets the tab order of an element
New to HTML 4.0 is the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of attributes that can be inserted into HTML tags to define event actions.
49
If you want to learn more about programming with these events, you should study our JavaScript tutorial and our DHTML tutorial.
Window Events
Only valid in body and frameset elements. Attribute onload onunload Value script script Description Script to be run when a document loads Script to be run when a document unloads
Keyboard Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements. Attribute onkeydown onkeypress onkeyup Value script script script Description What to do when key is pressed What to do when key is pressed and released What to do when key is released
Mouse Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title elements. Attribute onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup Value script script script script script script script Description What to do on a mouse click What to do on a mouse double-click What to do when mouse button is pressed What to do when mouse pointer moves What to do when mouse pointer moves out of an element What to do when mouse pointer moves over an element What to do when mouse button is released
50
Below is a reference of ASCII characters in URL-encoding form (hexadecimal format). Hexadecimal values can be used to display non-standard letters and characters in browsers and plug-ins.
Try It
Type some text or an ASCII value in the input field below, and click on the "URL Encode" button to see the URL-encoding.
URL Encode
51
%14 %15 %16 %17 %18 %19 %1a %1b %1c %1d %1e %1f space ! " # $ % & ' ( ) * + , . / %20 %21 %22 %23 %24 %25 %26 %27 %28 %29 %2a %2b %2c %2d %2e %2f
D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _
%44 %45 %46 %47 %48 %49 %4a %4b %4c %4d %4e %4f %50 %51 %52 %53 %54 %55 %56 %57 %58 %59 %5a %5b %5c %5d %5e %5f
t u v w x y z { | } ~
%74 %75 %76 %77 %78 %79 %7a %7b %7c %7d %7e %7f %80 %81 %82 %83 %84 %85 %86 %87 %88 %89 %8a %8b %8c %8d %8e %8f
52
%a0 | %a1 %a2 %a3 %a4 %a5 %a6 %a7 %a8 %a9 %aa %ab %ac %ad %ae %af %b0 %b1 %b2 %b3 %b4 %b5 %b6 %b7 %b8 %b9 %ba %bb %bc %bd %be %bf
%d0 %d1 %d2 %d3 %d4 %d5 %d6 %d7 %d8 %d9 %da %db %dc %dd %de %df %e0 %e1 %e2 %e3 %e4 %e5 %e6 %e7 %e8 %e9 %ea %eb %ec %ed %ee %ef
53
PWS turns any Windows computer into a Web server. PWS is easy to install and ideal for developing and testing Web applications. PWS has been optimized for workstation use, but has all the requirements of a full Web server. It also runs Active Server Pages (ASP) just like its larger brother IIS.
Read more about Microsoft's Personal Web Server. Note: Microsoft Windows XP Home Edition does not come with the option to turn your computer into a PWS!
Before you select an ISP, make sure you read W3Schools Web Hosting Tutorial !!
HTML Summary
This tutorial has taught you how to use HTML to create your own web site. HTML is the universal markup language for the Web. HTML lets you format text, add graphics, create links, input forms, frames and tables, etc., and save it all in a text file that any browser can read and display. The key to HTML is the tags, which indicates what content is coming up. For more information on HTML, please take a look at our HTML examples and our HTML reference.
54
HTML Examples
HTML Basic Tags Examples A very simple HTML document How text inside paragraphs is displayed More paragraphs The use of line breaks Poem problems (some problems with HTML formatting) Heading tags Center aligned heading Insert a horizontal rule Comments in the HTML source Add a background color Examples explained
HTML Formatting Text Examples Text formatting Preformatted text (how to control line breaks and spaces) Different computer-output tags Insert an address Abbreviations and acronyms Text direction
55
Long and short quotations How to mark deleted and inserted text Examples explained
HTML Link Examples How to create hyperlinks Set an image as a link Open a link in a new browser window Jump to another part of a document (on the same page) Break out of a frame How to link to a mail message (will only work if you have mail installed) A more complicated mailto link Examples explained
HTML Frame Examples How to create a vertical frameset with 3 different documents How to create a horizontal frameset with 3 different documents How to use the <noframes> tag How to mix a frameset in rows and columns Frameset with noresize="noresize" How to create a navigation frame Inline frame (a frame inside an HTML page) Jump to a specified section within a frame Jump to a specified section with frame navigation Examples explained
HTML Table Examples Simple tables Different table borders Table with no borders Headings in a table Empty cells Table with a caption Table cells that span more than one row/column Tags inside a table Cell padding (control the white space between cell content and the borders Cell spacing (control the distance between cells) Add a background color or a background image to a table Add a background color or a background image to a table cell Align the content in a table cell The frame attribute The frame and border attributes Examples explained
56
An unordered list An ordered list Different types of ordered lists Different types of unordered Lists Nested list Nested list 2 Definition list Examples explained
HTML Form and Input Examples How to create input fields Password fields Checkboxes Radiobuttons Simple drop-down box (a selectable list) Another drop-down box with a pre-selected value Textarea (a multi-line text input field) Create a button Draw a border with a caption around data Form with an input field and a submit button Form with checkboxes and a submit button Form with radiobuttons and a submit button Send e-mail from a form Examples explained
HTML Image Examples Insert images Insert images from another folder or another server Background image Align an image within a text Let the image float to the left/right of a paragraph Adjust images to different sizes Display an alternate text for an image (if the browser can't load images) Make a hyperlink of an image Create an image-map, with clickable regions Turn an image into an image map Examples explained
HTML Background Examples Good background and text color Bad background and text color Good background image Good background image 2 Bad background image Examples explained
57
HTML Style Examples Styles in the head section of an HTML document Link that is not underlined Link to an external style sheet Examples explained
HTML <head> Examples Set a title of a document One target for all links on a page Examples explained
HTML <meta> Examples Document description Document keywords Redirect a user to another URL Examples explained
HTML Script Examples Insert a script Handle browsers that do not support scripts Examples explained
HTML QUIZ
HTML Quiz
The Test
The test contains 20 questions and there is no time limit. The test is not official, it's just a nice way to see how much you know, or don't know, about HTML.
58
Good luck! Start the HTML Quiz 1. What does HTML stand for? Hyperlinks and Text Markup Language Home Tool Markup Language Hyper Text Markup Language 2. Who is making the Web standards? The World Wide Web Consortium Netscape Microsoft 3. Choose the correct HTML tag for the largest heading <head> <heading> <h6> <h1> 4. What is the correct HTML tag for inserting a line break? <break> <lb> <br> 5. What is the correct HTML for adding a background color? <body color="yellow"> <background>yellow</background> <body bgcolor="yellow"> 6. Choose the correct HTML tag to make a text bold <b> <bld> <bb> <bold> 7. Choose the correct HTML tag to make a text italic <italics> <ii> <i>
59
8. What is the correct HTML for making a hyperlink? <a>http://www.w3schools.com</a> <a name="http://www.w3schools.com">W3Schools.com</a> <a url="http://www.w3schools.com">W3Schools.com</a> <a href="http://www.w3schools.com">W3Schools</a> 9. How can you make an e-mail link? <mail href="xxx@yyy"> <a href="mailto:xxx@yyy"> <mail>xxx@yyy</mail> <a href="xxx@yyy"> 10. How can you open a link in a new browser window? <a href="url" new> <a href="url" target="_blank"> <a href="url" target="new"> 11. Which of these tags are all <table> tags? <table><head><tfoot> <thead><body><tr> <table><tr><tt> <table><tr><td> 12. Choose the correct HTML to left-align the content inside a tablecell <td valign="left"> <td align="left"> <tdleft> <td leftalign> 13. How can you make a list that lists the items with numbers? <list> <ol> <dl> <ul> 14. How can you make a list that lists the items with bullets? <dl>
60
<ol> <list> <ul> 15. What is the correct HTML for making a checkbox? <input type="checkbox"> <input type="check"> <checkbox> <check> 16. What is the correct HTML for making a text input field? <input type="textfield"> <textinput type="text"> <textfield> <input type="text"> 17. What is the correct HTML for making a drop-down list? <select> <input type="dropdown"> <input type="list"> <list> 18. What is the correct HTML for making a text area? <input type="textbox"> <input type="textarea"> <textarea> 19. What is the correct HTML for inserting an image? <image src="image.gif"> <img href="image.gif> <img src="image.gif"> <img>image.gif</img> 20. What is the correct HTML for inserting a background image? <body background="background.gif"> <background img="background.gif"> <img src="background.gif" background>
61
HTML REFERENCE
Ordered Alphabetically
NN: indicates the earliest version of Netscape that supports the tag IE: indicates the earliest version of Internet Explorer that supports the tag DTD: indicates in which XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset Description Defines a comment Defines the document type Defines an anchor Defines an abbreviation Defines an acronym Defines an address element Deprecated. Defines an applet Defines an area inside an image map Defines bold text Defines a base URL for all the links in a page Deprecated. Defines a base font Defines the direction of text display Defines big text Defines a long quotation Defines the body element Inserts a single line break Defines a push button Defines a table caption Deprecated. Defines centered text Defines a citation Defines computer code text Defines attributes for table columns Defines groups of table columns Defines a definition description Defines deleted text Deprecated. Defines a directory list Defines a section in a document Defines a definition term Defines a definition list Defines a definition term Defines emphasized text Defines a fieldset Deprecated. Defines text font, size, and color Defines a form 6.2 NN IE DTD STF 3.0 3.0 STF STF 6.2 4.0 STF 4.0 4.0 STF 2.0 3.0 TF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 TF 6.2 5.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 6.2 4.0 STF 3.0 3.0 STF 3.0 3.0 TF 3.0 3.0 STF 3.0 3.0 STF 3.0 STF 3.0 STF 3.0 3.0 STF 6.2 4.0 STF 3.0 3.0 TF 3.0 3.0 STF 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 6.2 4.0 STF 3.0 3.0 TF 3.0 3.0 STF
Tag <!--...--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dir> <div> <dfn> <dl> <dt> <em> <fieldset> <font> <form>
62
<frame> <frameset> <h1> to <h6> <head> <hr> <html> <i> <iframe> <img> <input> <ins> <isindex> <kbd> <label> <legend> <li> <link> <map> <menu> <meta> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <param> <pre> <q> <s> <samp> <script> <select> <small> <span> <strike> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th>
Defines a sub window (a frame) Defines a set of frames Defines header 1 to header 6 Defines information about the document Defines a horizontal rule Defines an html document Defines italic text Defines an inline sub window (frame) Defines an image Defines an input field Defines inserted text Deprecated. Defines a single-line input field Defines keyboard text Defines a label for a form control Defines a title in a fieldset Defines a list item Defines a resource reference Defines an image map Deprecated. Defines a menu list Defines meta information Defines a noframe section Defines a noscript section Defines an embedded object Defines an ordered list Defines an option group Defines an option in a drop-down list Defines a paragraph Defines a parameter for an object Defines preformatted text Defines a short quotation Deprecated. Defines strikethrough text Defines sample computer code Defines a script Defines a selectable list Defines small text Defines a section in a document Deprecated. Defines strikethrough text Defines strong text Defines a style definition Defines subscripted text Defines superscripted text Defines a table Defines a table body Defines a table cell Defines a text area Defines a table footer Defines a table header
3.0 3.0 F 3.0 3.0 F 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 6.0 4.0 TF 3.0 3.0 STF 3.0 3.0 STF 6.2 4.0 STF 3.0 3.0 TF 3.0 3.0 STF 6.2 4.0 STF 6.2 4.0 STF 3.0 3.0 STF 4.0 3.0 STF 3.0 3.0 STF 3.0 3.0 TF 3.0 3.0 STF 3.0 3.0 TF 3.0 3.0 STF 3.0 STF 3.0 3.0 STF 6.0 6.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 6.2 STF 3.0 3.0 TF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 4.0 3.0 STF 3.0 3.0 TF 3.0 3.0 STF 4.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 4.0 STF 3.0 3.0 STF 3.0 3.0 STF 4.0 STF 3.0 3.0 STF
63
Defines a table header Defines the document title Defines a table row Defines teletype text Deprecated. Defines underlined text Defines an unordered list Defines a variable Deprecated. Defines preformatted text
4.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 TF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0
Ordered by Function
NN: indicates the earliest version of Netscape that supports the tag IE: indicates the earliest version of Internet Explorer that supports the tag DTD: indicates in which XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset Purpose NN IE DTD
Start tag Basic Tags <!DOCTYPE> <html> <body> <h1> to <h6> <p> <br> <hr> <!--...--> Char Format <b> <font> <i> <em> <big> <strong> <small> <sup> <sub> <bdo> <u> Output <pre>
Defines the document type Defines an html document Defines the body element Defines header 1 to header 6 Defines a paragraph Inserts a single line break Defines a horizontal rule Defines a comment
STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF
Defines bold text Deprecated. Defines text font, size, and color Defines italic text Defines emphasized text Defines big text Defines strong text Defines small text Defines superscripted text Defines subscripted text Defines the direction of text display Deprecated. Defines underlined text
3.0 3.0 STF 3.0 3.0 TF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 6.2 5.0 STF 3.0 3.0 TF
64
<code> <tt> <kbd> <var> <dfn> <samp> <xmp> Blocks <acronym> <abbr> <address> <blockquote> <center> <q> <cite> <ins> <del> <s> <strike> Links <a> <link> Frames <frame> <frameset> <noframes> <iframe> Input <form> <input> <textarea> <button> <select> <optgroup> <option> <label> <fieldset> <legend> <isindex> Lists <ul> <ol>
Defines computer code text Defines teletype text Defines keyboard text Defines a variable Defines a definition term Defines sample computer code Deprecated. Defines preformatted text
3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 STF 3.0 3.0 STF 3.0 3.0
Defines an acronym Defines an abbreviation Defines an address element Defines a long quotation Deprecated. Defines centered text Defines a short quotation Defines a citation Defines inserted text Defines deleted text Deprecated. Defines strikethrough text Deprecated. Defines strikethrough text
6.2 4.0 STF 6.2 STF 4.0 4.0 STF 3.0 3.0 STF 3.0 3.0 TF 6.2 4.0 STF 3.0 3.0 STF 6.2 4.0 STF 6.2 4.0 STF 3.0 3.0 TF 3.0 3.0 TF
Defines a sub window (a frame) Defines a set of frames Defines a noframe section Defines an inline sub window (frame)
Defines a form Defines an input field Defines a text area Defines a push button Defines a selectable list Defines an option group Defines an item in a list box Defines a label for a form control Defines a fieldset Defines a title in a fieldset Deprecated. Defines a single-line input field
3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 6.2 4.0 STF 3.0 3.0 STF 6.0 6.0 STF 3.0 3.0 STF 6.2 4.0 STF 6.2 4.0 STF 6.2 4.0 STF 3.0 3.0 TF
65
<li> <dir> <dl> <dt> <dd> <menu> Images <img> <map> <area> Tables <table> <caption> <th> <tr> <td> <thead> <tbody> <tfoot> <col> <colgroup> Styles <style> <div> <span> Meta Info <head> <title> <meta> <base> <basefont> Programming <script> <noscript> <applet> <object> <param>
Defines a list item Deprecated. Defines a directory list Defines a definition list Defines a definition term Defines a definition description Deprecated. Defines a menu list
3.0 3.0 STF 3.0 3.0 TF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 TF
Defines an image Defines an image map Defines an area inside an image map
Defines a table Defines a table caption Defines a table header Defines a table row Defines a table cell Defines a table header Defines a table body Defines a table footer Defines attributes for table columns Defines groups of table columns
3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 4.0 STF 4.0 STF 4.0 STF 3.0 STF 3.0 STF
Defines information about the document Defines the document title Defines meta information Defines a base URL for all the links in a page Deprecated. Defines a base font
3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 STF 3.0 3.0 TF
Defines a script Defines a noscript section Deprecated. Defines an applet Defines an embedded object Defines a parameter for an object
3.0 3.0 STF 3.0 3.0 STF 2.0 3.0 TF 3.0 STF 3.0 3.0 STF
66
HTML tags can have attributes. The special attributes for each tag are listed under each tag description. The attributes listed here are the core and language attributes that are standard for all tags (with a few exceptions).
Core Attributes
Not valid in base, head, html, meta, param, script, style, and title elements. Attribute class id style title Value class_rule or style_rule id_name style_definition tooltip_text Description The class of the element A unique id for the element An inline style definition A text to display in a tool tip
Language Attributes
Not valid in base, br, frame, frameset, hr, iframe, param, and script elements. Attribute dir lang Value ltr | rtl language_code Description Sets the text direction Sets the language code
Keyboard Attributes
Attribute accesskey tabindex Value character number Description Sets a keyboard shortcut to access an element Sets the tab order of an element
New to HTML 4.0 was the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of attributes that can be inserted into HTML tags to define event actions. If you want to learn more about programming with these events, you should study our JavaScript tutorial and our DHTML tutorial.
Window Events
Only valid in body and frameset elements Attribute onload Value script Description Script to be run when a document loads
67
onunload
script
Keyboard Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements. Attribute onkeydown onkeypress onkeyup Value script script script Description What to do when key is pressed What to do when key is pressed and released What to do when key is released
Mouse Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements. Attribute onclick ondblclick onmousedown onmousemove onmouseover onmouseout onmouseup Value script script script script script script script Description What to do on a mouse click What to do on a mouse doubleclick What to do when mouse button is pressed What to do when mouse pointer moves What to do when mouse pointer moves over an element What to do when mouse pointer moves out of an element What to do when mouse button is released
HTML Colors
The table below provides a list of the color names that are supported by all major browsers.
68
Note: If you want your pages to validate with an HTML or a CSS validator, W3C has listed 16 color names that you can use: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. If you want to use other colors, you must specify their RGB or HEX value. Click on a color name (or a hex value) to view the color as the background-color along with different text colors: Color Name AliceBlue AntiqueWhite Aqua Aquamarine Azure Beige Bisque Black BlanchedAlmond Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGrey DarkGreen DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkSlateGrey DarkTurquoise Color HEX #F0F8FF #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC #DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9 #A9A9A9 #006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #2F4F4F #00CED1 Color
69
DarkViolet DeepPink DeepSkyBlue DimGray DimGrey DodgerBlue FireBrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Gold GoldenRod Gray Grey Green GreenYellow HoneyDew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan LightGoldenRodYellow LightGray LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSlateGrey LightSteelBlue LightYellow Lime LimeGreen Linen Magenta
#9400D3 #FF1493 #00BFFF #696969 #696969 #1E90FF #B22222 #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 #DAA520 #808080 #808080 #008000 #ADFF2F #F0FFF0 #FF69B4 #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 #D3D3D3 #D3D3D3 #90EE90 #FFB6C1 #FFA07A #20B2AA #87CEFA #778899 #778899 #B0C4DE #FFFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF
70
Maroon MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum PowderBlue Purple Red RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray SlateGrey
#800000 #66CDAA #0000CD #BA55D3 #9370D8 #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #D87093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080 #FF0000 #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB #6A5ACD #708090 #708090
71
Snow SpringGreen SteelBlue Tan Teal Thistle Tomato Turquoise Violet Wheat White WhiteSmoke Yellow YellowGreen
#FFFAFA #00FF7F #4682B4 #D2B48C #008080 #D8BFD8 #FF6347 #40E0D0 #EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32
HTML and XHTML uses standard 7-BIT ASCII when transmitting data over the Web. 7-BIT ASCII represents 128 different character values (0-127).
72
52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98
4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b
digit 4 digit 5 digit 6 digit 7 digit 8 digit 9 colon semicolon less-than equals-to greater-than question mark at sign uppercase A uppercase B uppercase C uppercase D uppercase E uppercase F uppercase G uppercase H uppercase I uppercase J uppercase K uppercase L uppercase M uppercase N uppercase O uppercase P uppercase Q uppercase R uppercase S uppercase T uppercase U uppercase V uppercase W uppercase X uppercase Y uppercase Z left square bracket backslash right square bracket caret underscore grave accent lowercase a lowercase b
73
99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126
c d e f g h i j k l m n o p q r s t u v w x y z { | } ~
lowercase c lowercase d lowercase e lowercase f lowercase g lowercase h lowercase i lowercase j lowercase k lowercase l lowercase m lowercase n lowercase o lowercase p lowercase q lowercase r lowercase s lowercase t lowercase u lowercase v lowercase w lowercase x lowercase y lowercase z left curly brace vertical bar right curly brace tilde
74
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 127
LF VT FF CR SO SI DLE DC1 DC2 DC3 DC4 NAK SYN ETB CAN EM SUB ESC FS GS RS US DEL
line feed vertical tab form feed carriage return shift out shift in data link escape device control 1 device control 2 device control 3 device control 4 negative acknowledge synchronize end transmission block cancel end of medium substitute escape file separator group separator record separator unit separator delete (rubout)
HTML 4.01 supports the ISO 8859-1 (Latin-1) character set. The lower part of ISO-8859-1 (codes from 0-127) is the original 7-BIT ASCII. The higher part of ISO-8859-1 (codes from 160-255) all have character entity names. Most of these characters can be used without an entity reference, but entity names or entity numbers provide a method for expressing characters that cannot easily be entered on a keyboard. Note: Entity names are case sensitive.
75
>
greater-than
>
>
76
capital a, umlaut mark capital a, ring capital ae capital c, cedilla capital e, grave accent capital e, acute accent capital e, circumflex accent capital e, umlaut mark capital i, grave accent capital i, acute accent capital i, circumflex accent capital i, umlaut mark capital eth, Icelandic capital n, tilde capital o, grave accent capital o, acute accent capital o, circumflex accent capital o, tilde capital o, umlaut mark capital o, slash capital u, grave accent capital u, acute accent capital u, circumflex accent capital u, umlaut mark capital y, acute accent capital THORN, Icelandic small sharp s, German small a, grave accent small a, acute accent small a, circumflex accent small a, tilde small a, umlaut mark small a, ring small ae small c, cedilla small e, grave accent small e, acute accent small e, circumflex accent small e, umlaut mark small i, grave accent small i, acute accent small i, circumflex accent small i, umlaut mark small eth, Icelandic small n, tilde small o, grave accent small o, acute accent
Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó
Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó
77
small o, circumflex accent small o, tilde small o, umlaut mark small o, slash small u, grave accent small u, acute accent small u, circumflex accent small u, umlaut mark small y, acute accent small thorn, Icelandic small y, umlaut mark
ô õ ö ø ù ú û ü ý þ ÿ
ô õ ö ø ù ú û ü ý þ ÿ
This character entity reference includes mathematical symbols, Greek characters, various arrows, technical symbols and shapes. Note: Entity names are case sensitive.
78
simular to approximately equal almost equal not equal equivalent less or equal greater or equal subset of superset of not subset of subset or equal superset or equal circled plus cirled times perpendicular dot operator
∼ ≅ ≈ ≠ ≡ ≤ ≥ ⊂ ⊃ ⊄ ⊆ ⊇ ⊕ ⊗ ⊥ ⋅
∼ ≅ ≈ ≠ ≡ ≤ ≥ ⊂ ⊃ ⊄ ⊆ ⊇ ⊕ ⊗ ⊥ ⋅
79
beta gamma delta epsilon zeta eta theta iota kappa lambda mu nu xi omicron pi rho sigmaf sigma tau upsilon phi chi psi omega theta symbol upsilon symbol pi symbol
β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϑ ϒ ϖ
β γ δ ε ζ η θ ι κ Λ μ Ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϑ ϒ ϖ
80
en dash em dash left single quotation mark right single quotation mark single low-9 quotation mark left double quotation mark right double quotation mark double low-9 quotation mark dagger double dagger bullet horizontal ellipsis per mille minutes seconds single left angle quotation single right angle quotation overline euro trademark left arrow up arrow right arrow down arrow left right arrow carriage return arrow left ceiling right ceiling left floor right floor lozenge spade club heart diamond
– — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ′ ″ ‹ › ‾ € ™ ← ↑ → ↓ ↔ ↵ ⌈ ⌉ ⌊ ⌋ ◊ ♠ ♣ ♥ ♦
– — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ′ ″ ‹ › ‾ € ™ ← ↑ → ↓ ↔ ↵ ⌈ ⌉ ⌊ ⌋ ◊ ♠ ♣ ♥ ♦
Below is a reference of ASCII characters in URL-encoding form (hexadecimal format). Hexadecimal values can be used to display non-standard letters and characters in browsers and plug-ins.
Try It
81
Type some text or an ASCII value in the input field below, and click on the "URL Encode" button to see the URL-encoding.
URL Encode
82
%1f space ! " # $ % & ' ( ) * + , . / %20 %21 %22 %23 %24 %25 %26 %27 %28 %29 %2a %2b %2c %2d %2e %2f
O P Q R S T U V W X Y Z [ \ ] ^ _
%4f %50 %51 %52 %53 %54 %55 %56 %57 %58 %59 %5a %5b %5c %5d %5e %5f
%7f %80 %81 %82 %83 %84 %85 %86 %87 %88 %89 %8a %8b %8c %8d %8e %8f
83
%ab %ac %ad %ae %af %b0 %b1 %b2 %b3 %b4 %b5 %b6 %b7 %b8 %b9 %ba %bb %bc %bd %be %bf
%db %dc %dd %de %df %e0 %e1 %e2 %e3 %e4 %e5 %e6 %e7 %e8 %e9 %ea %eb %ec %ed %ee %ef
When a browser requests a service from a web server, an error might occur. This is a list of HTTP status messages that might be returned:
1xx: Information Message: 100 Continue Description: Only a part of the request has been received by the server, but as long as it has not been rejected, the client should continue with the request The server switches protocol
101 Switching Protocols 2xx: Successful Message: 200 OK 201 Created 202 Accepted 203 Non-authoritative Information
Description: The request is OK The request is complete, and a new resource is created The request is accepted for processing, but the processing is not complete
84
204 No Content 205 Reset Content 206 Partial Content 3xx: Redirection Message: 300 Multiple Choices 301 Moved Permanently 302 Found 303 See Other 304 Not Modified 305 Use Proxy 306 Unused 307 Temporary Redirect 4xx: Client Error Message: 400 Bad Request 401 Unauthorized 402 Payment Required 403 Forbidden 404 Not Found 405 Method Not Allowed 406 Not Acceptable 407 Proxy Authentication Required 408 Request Timeout 409 Conflict 410 Gone 411 Length Required 412 Precondition Failed 413 Request Entity Too Large 414 Request-url Too Long Description: The server did not understand the request The requested page needs a username and a password You can not use this code yet Access is forbidden to the requested page The server can not find the requested page The method specified in the request is not allowed The server can only generate a response that is not accepted by the client You must authenticate with a proxy server before this request can be served The request took longer than the server was prepared to wait The request could not be completed because of a conflict The requested page is no longer available The "Content-Length" is not defined. The server will not accept the request without it The precondition given in the request evaluated to false by the server The server will not accept the request, because the request entity is too large The server will not accept the request, because the url is too long. Occurs when you convert a "post" request to a "get" request with a long query information The server will not accept the request, because the media type is not supported This code was used in a previous version. It is no longer used, but the code is reserved The requested page has moved temporarily to a new url Description: A link list. The user can select a link and go to that location. Maximum five addresses The requested page has moved to a new url The requested page has moved temporarily to a new url The requested page can be found under a different url
415 Unsupported Media Type 416 417 Expectation Failed 5xx: Server Error
85
Message: 500 Internal Server Error 501 Not Implemented 502 Bad Gateway 503 Service Unavailable 504 Gateway Timeout 505 HTTP Version Not Supported
Description: The request was not completed. The server met an unexpected condition The request was not completed. The server did not support the functionality required The request was not completed. The server received an invalid response from the upstream server The request was not completed. The server is temporarily overloading or down The gateway has timed out The server does not support the "http protocol" version
86