Académique Documents
Professionnel Documents
Culture Documents
HTML stands for 'hyper text mark-up language' and is a simple language that anyone can learn and is used for making web pages
<html> <head> <title>Your Page Title</title> </head> <body> This area will contain everything that will be visible through a web browser, such as text and graphics. All of the information will be HTML coded. For a complete list of HTML codes, tags and examples, see the HTML chart below. </body> </html>
<html> - Begins your HTML document. <head> - Contains information about the page such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects. <title> - The TITLE of your page. This will be visible in the title bar of the viewers browser. </title> - Closes the HTML <title> tag. </head> - Closes the HTML <head> tag. <body> - This is where you will begin writing your document and placing your HTML codes. </body> - Closes the HTML <body> tag. </html> - Closes the <html> tag.
anchor bold
big (text) <big>Example</big> body of <body>The content of your HTML HTML page</body> document
Example
<body>
<br>
The contents of your web The contents of your page<br>The contents of page line break your page The contents of your web page center <center>This will center your contents</center>
<center>
<dd>
<dl> <dt>Definition Term</dt> definition <dd>Definition of the term</dd> descriptio <dt>Definition Term</dt> n <dd>Definition of the term</dd> </dl>
Definition of the term Definition Term Definition of the term Definition Term Definition of the term Definition Term Definition of the term Definition Term Definition of the term
<dl>
<dl> <dt>Definition Term</dt> definition <dd>Definition of the term</dd> list <dt>Definition Term</dt> <dd>Definition of the term</dd> </dl> definition <dl> term <dt>Definition Term</dt> <dd>Definition of the term</dd> <dt>Definition Term</dt>
<dt>
<dd>Definition of the term</dd> </dl> This is an <em>Example</em> of using the emphasis tag <embed src="yourfile.mid" width="100%" height="60" align="center">
Definition Term Definition of the term This is an Example of using the emphasis tag
<em>
<embed>
<embed>
embed object
Music will begin playing when your page is loaded and will only play one time. A control panel will be displayed to enable your visitors to stop the music. Example
<font>
font
<font face="Times New Roman">Example</font> <font face="Times New Roman" size="4">Example</font> <font face="Times New Roman" size="+3" color="#ff0000">Example</font>
<font>
font
Example
<font>
font
Example
<form>
form
<form action="mailto:you@yourdomain.com"> Name: <input name="Name" value="" Name: size="10"><br> Email: <input name="Email" value="" Email: size="10"><br> <center><input type="submit"></center> Submit Query </form>
1 2 3 4 5 6
1 2 3 4 5 6
<head>
document document</head>
<hr>
Contents of your web page Contents of your web page <hr> horizontal <hr width="50%" size="3" /> rule Contents of your web page Contents of your web page <hr> horizontal <hr width="50%" size="3" noshade /> rule Contents of your web page <hr> (Internet Explorer) Contents of your web page horizontal <hr width="75%" color="#ff0000" rule size="4" /> Contents of your web page Contents of your web page horizontal <hr width="25%" color="#6699ff" rule size="6" /> Contents of your web page <html> <head> <meta> hypertext <title>Title of your web page</title> markup </head> language <body>HTML web page contents </body> </html> italic <i>Example</i> <img src="Earth.gif" width="41" height="41" border="0" alt="text describing the image" /> Example 1:
Submit
<html>
<i>
Example
<img>
image
<input>
input field Example 1: <form method=post action="/cgibin/example.cgi"> <input type="text" size="10" maxlength="30"> <input type="Submit" value="Submit">
</form> Example 2: <form method=post action="/cgibin/example.cgi"> <input type="text" style="color: #ffffff; fontinput field family: Verdana; font-weight: bold; font-size: 12px; background-color: #72a4d2;" size="10" maxlength="30"> <input type="Submit" value="Submit"> </form> Example 3: <form method=post action="/cgibin/example.cgi"> <table border="0" cellspacing="0" cellpadding="2"><tr><td input field bgcolor="#8463ff"><input type="text" size="10" maxlength="30"></td><td bgcolor="#8463ff" valign="Middle"> <input type="image" name="submit" src="yourimage.gif"></td></tr> </table> </form> Example 4: <form method=post action="/cgibin/example.cgi"> Enter Your Comments:<br> input field <textarea wrap="virtual" name="Comments" rows=3 cols=20 maxlength=100></textarea><br> <input type="Submit" value="Submit"> <input type="Reset" value="Clear"> </form> input field Example 5: Example 5: <form method=post action="/cgibin/example.cgi"> <center> Select an option: <select> <option >option 1</option> <option selected>option 2</option> <option>option 3</option> <option>option 4</option> <option>option 5</option> Select an option:
Submit
Example 2: (Tip)
Submit
Example 3:
<input>
Example 4:
<input>
Submit
Clear
<input>
<option>option 6</option> </select><br> <input type="Submit" value="Submit"></center> </form> Example 6: Example 6: <form method=post action="/cgibin/example.cgi"> Select an option: Select an option:<br> <input type="radio" name="option"> Option 1 Option 1 <input type="radio" name="option" checked> Option 2 Option 2 <input type="radio" name="option"> Option 3 Option 3 <br> input field <br> Select an option: Select an option:<br> <input type="checkbox" name="selection"> Selection 1 Selection 1 <input type="checkbox" name="selection" Selection 2 checked> Selection 2 <input type="checkbox" name="selection"> Selection 3 Selection 3 Submit <input type="Submit" value="Submit"> </form> Example 1: <menu> <li type="disc">List item 1</li> <li type="circle">List item 2</li> <li type="square">List item 3</li> </MENU> <li> list item Example 2: <ol type="i"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> Example 2: Example 1:
<input>
<link>
link
<menu>
menu
<menu> <li type="disc">List item 1</li> <li type="circle">List item 2</li> <li type="square">List item 3</li> </menu> <meta name="Description" content="Description of your site"> <meta name="keywords" content="keywords describing your site"> <meta HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain.co m/"> <meta http-equiv="Pragma" content="nocache"> <meta name="rating" content="General"> <meta name="robots" content="all"> <meta name="robots" content="noindex,follow"> Numbered <ol> <li>List <li>List <li>List <li>List </ol>
<meta>
meta
<meta>
meta
Nothing will show Nothing will show Nothing will show Nothing will show Numbered
1. 2. 3. 4.
1 2 3 4
Numbered Special Start Numbered Special Start <ol start="5"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> 5. 6. 7. 8. List List List List item item item item 1 2 3 4
Lowercase Letters <ol type="a"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Letters <ol type="A"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Letters Special Start <ol type="A" start="3"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Lowercase Roman Numerals <ol type="i"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Roman Numerals <ol type="I"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Roman Numerals Special Start <ol type="I" start="7"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> <option> listbox option <form method=post action="/cgibin/example.cgi">
b. c. d.
Capital Letters A. B. C. D. List List List List item item item item 1 2 3 4
Capital Letters Special Start C. D. E. F. List List List List item item item item 1 2 3 4
Lowercase Roman Numerals i. ii. iii. iv. List List List List item item item item 1 2 3 4
Capital Roman Numerals I. II. III. IV. List List List List item item item item 1 2 3 4
Capital Roman Numerals Special Start VII. VIII. IX. X. List item 1 List item 2 List item 3 List item 4
Select an option:
<center> Select an option: <select> <option>option 1</option> <option selected>option 2</option> <option>option 3</option> <option>option 4</option> <option>option 5</option> <option>option 6</option> </select><br> </center> </form> This is an example displaying the use of the paragraph tag. <p> This will create a line break and a space between lines. This is an example displaying the use of the paragraph tag. Attributes: This will create a line break and a space between lines. Example 1:<br> <br> Attributes: <p align="left"> This is an example<br> Example 1: displaying the use<br> of the paragraph tag.<br> This is an example displaying the use <br> paragraph of the paragraph tag. Example 2:<br> <br> Example 2: <p align="right"> This is an example<br> This is an example displaying the use<br> displaying the use of the paragraph tag.<br> of the paragraph tag. <br> Example 3:<br> Example 3: <br> This is an example <p align="center"> displaying the use This is an example<br> of the paragraph tag. displaying the use<br> of the paragraph tag. <small> small (text) deleted text strong emphasis <small>Example</small>
<p>
Example
<strike>
<strike>Example</strike>
<strong>
<strong>Example</strong>
Example
Example 1: <table border="4" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> Example 2: (Internet Explorer) <table border="2" bordercolor="#336699" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> Example 3: <table cellpadding="2" cellspacing="2" width="100%"> <tr> <td bgcolor="#cccccc">Column 1</td> <td bgcolor="#cccccc">Column 2</td> </tr> <tr> <td>Row 2</td> <td>Row 2</td> </tr> </table> <table border="2" cellpadding="2" cellspacing="2" width="100%"> <tr> table data <td>Column 1</td> <td>Column 2</td> </tr> </table> <div align="center"> <table> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr>
<table>
table
<td>
Column 1
Column 2
Column Column Column 1 2 3 Row 2 Row 3 Row 4 Row 2 Row 3 Row 4 Row 2 Row 3 Row 4
<th>
table header
<tr> <td>Row <td>Row <td>Row </tr> <tr> <td>Row <td>Row <td>Row </tr> <tr> <td>Row <td>Row <td>Row </tr> </table> </div> <title>
document <title>Title of your HTML page</title> title <table border="2" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> <tt>Example</tt> <u>Example</u>
Title of your web page will be viewable in the title bar. Column 1 Column 2
<tr>
table row
<tt> <u>
teletype underline
Example
Example
<ul>
Example 1:<br> <br> <ul> <li>List item 1</li> <li>List item 2</li> </ul> <br> unordered Example 2:<br> list <ul type="disc"> <li>List item 1</li> <li>List item 2</li> <ul type="circle"> <li>List item 3</li> <li>List item 4</li> </ul> </ul>
Example 1:
Example 2:
List item 4