HTML Tags Chart: Tag Name Code Example Browser View

CW88-Group#5 TA : Nasrin Mostafazadeh
HTML Tags Chart

To use any of the following HTML tags, simply select the HTML code you'd like and copy and paste it into your web page. OR copy and paste it into: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro And see the result. Tag Name Code Example <html> <head> <meta> <title>Title of your web page</title> </head> <body>HTML web page contents </body> </html> Browser View
<html>
hypertext markup language
Contents of your web page
<head> <title> <body> 
Nothing will show Title of your web page will be viewable in the title bar. (Tip) Contents of your web page (Tip) Nothing will show (Tip)
This is an example displaying the use of the This is an example displaying the use paragraph tag. of the paragraph tag. <p> This will create a line break and a space between lines. This will create a line break and a space between lines. Attributes: Attributes: <p> paragraph <p align="left"> Example 1:<br> <br> This is an example<br> displaying the use<br> of the paragraph tag.<br> <br> </p> <p align="right"> Example 1: This is an example displaying the use of the paragraph tag. Example 2: This is an example displaying the use
Example 2:<br> <br> This is an example<br> displaying the use<br> of the paragraph tag.<br> <br> </p> <p align="center"> Example 3:<br> <br> This is an example<br> displaying the use<br> of the paragraph tag. </p> <a href="http://www.domain.com/"> Visit Our Site</a> anchor <a name=top>top of this page</a> <a href=#top>Click to goto top of the page</a> The contents of your page<br>The contents of your page <i>Example</i> <strong>Example</strong> <u>Example</u> <b>Example</b> <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> <strike>Example</strike> Example 1: <table border="4" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table>
of the paragraph tag. Example 3: This is an example displaying the use of the paragraph tag.
<a> -Absolute and

relative addressing
Visit Our Site (Tip) Click to goto top of the page
<br> <i> <strong> <u> <b> <font> <font> <font> <strike>
line break italic strong emphasis underline bold font font font deleted text
The contents of your web page The contents of your web page Example Example Example Example Example (Tip)
Example (Tip)
Example (Tip)
Example Example 1: (Tip) Column 1 Column 2
<table>
table
Example 2: (Tip) Column 1 Column 2
Example 2: (Internet Explorer) Example 3: (Tip) <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> <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> <tr> <td>Row 2</td> <td>Row 2</td> <td>Row 2</td> </tr> <tr> <td>Row 3</td> <td>Row 3</td> Column 1 Row 2 Column 2 Row 2
<td>
table data
Column 1
Column 2
<th>
table header
Column 1 Column 2 Column 3 Row 2 Row 2 Row 2 Row 3 Row 3 Row 3 Row 4 Row 4 Row 4
<td>Row 3</td> </tr> <tr> <td>Row 4</td> <td>Row 4</td> <td>Row 4</td> </tr> </table> </div> <table border="2" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> This is an <em>Example</em> of using the emphasis tag <embed src="yourfile.mid" width="100%" height="60" align="center"> <embed src="yourfile.mid" autostart="true" hidden="false" loop="false"> <noembed><bgsound src="yourfile.mid" loop="1"></noembed>
<form action="mailto:you@yourdomain.com"> Name: <input name="Name" value="" size="10"><br> Email: <input name="Email" value="" size="10"><br> <center><input type="submit"></center> </form>
<tr>
table row
Column 1
Column 2
<em> <embed>
emphasis embed object
This is an Example of using the emphasis tag
(Tip) <bgsound src="wonderfu.mid" autostart="false" loop="1" /> 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.
<embed>
embed object
Name: Email:
(Tip)
<form>
form
Example 1: <form method=post action="/cgibin/example.cgi"> input field <input type="text" size="10" maxlength="30"> <input type="Submit" value="Submit"> Example 1: (Tip)
Submit
<input>
</form>
Example 3: <form method=post action="/cgibin/example.cgi"> <table border="0" cellspacing="0" Example 3: (Tip) 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> <textarea wrap="virtual" input field name="Comments" rows=3 cols=20 maxlength=100></textarea><br> <input type="Submit" value="Submit"> <input type="Reset" value="Clear"> </form> <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> <option>option 6</option> </select><br> </center> </form> Example 5: Example 4: (Tip)
<input>
<input>
Submit
Clear
<option>
listbox option
Select an option: (Tip)

option 2
<input>
input field
Example 5: Tip)
<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> <option>option 6</option> </select><br> <input type="Submit" value="Submit"></center> </form> Example 6:
Select an option:
Submit
option 2
<input>
<form method=post action="/cgibin/example.cgi"> Example 6: (Tip) Select an option:<br> <input type="radio" name="option"> Select an option: Option 1 Option 1 <input type="radio" name="option" checked> Option 2 Option 2 <input type="radio" name="option"> Option 3 Option 3 input field <br> Select an option: <br> Select an option:<br> Selection 1 <input type="checkbox" Selection 2 name="selection"> Selection 1 <input type="checkbox" Selection 3 name="selection" checked> Selection 2 Submit <input type="checkbox" name="selection"> Selection 3 <input type="Submit" value="Submit"> </form> horizontal <hr width="75%" color="#ff0000" size="4" /> rule horizontal <hr width="25%" color="#6699ff" size="6" /> rule image <img src="Earth.gif" width="41" height="41" border="0" alt="text describing the image" /> Contents of your web page Contents of your web page Contents of your web page Contents of your web page
<hr> (Internet Explorer) <hr> (Internet Explorer) <img>
(Tip)
<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> Numbered <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> 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> 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
List item 1 List item 2 List item 3
Numbered 1. 2. 3. 4. List item 1 List item 2 List item 3 List item 4
Numbered Special Start 5. 6. 7. 8. List item 1 List item 2 List item 3 List item 4
Lowercase Letters a. b. c. d. List item 1 List item 2 List item 3 List item 4
<ol>
ordered list
Capital Letters A. B. C. D. List item 1 List item 2 List item 3 List item 4
Capital Letters Special Start <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> i. ii. iii. iv. List item 1 List item 2 List item 3 List item 4 C. D. E. F. List item 1 List item 2 List item 3 List item 4
Lowercase Roman Numerals
Capital Roman Numerals
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> Example 1:
I. II. III. IV.
List item 1 List item 2 List item 3 List item 4
Capital Roman Numerals Special Start VII. VIII. IX. X. List item 1 List item 2 List item 3 List item 4
Example 1: (Tip) <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> <ul> Example 1:<br> unordered <br> list <ul> <li>List item 1</li>
o
List item 1 List item 2 List item 3
Example 2: i. ii. iii. iv. List item 1 List item 2 List item 3 List item 4
Example 1:
List item 1
<li>List item 2</li> </ul> <br> Example 2:<br> <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> <marquee> (Internet Explorer) scrolling text <marquee bgcolor="#cccccc" loop="1" scrollamount="2" width="100%">Example Marquee</marquee> <meta name="Description" content="Description of your site"> <meta name="keywords" content="keywords describing your site">
List item 2
Example 2:

List item 1 List item 2 o List item 3 o List item 4
<meta>
meta
Nothing will show (Tip)
<meta>
meta
<meta HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.your Nothing will show (Tip) domain.com/"> <meta http-equiv="Pragma" content="no-cache">
The META no-cache tag is used to prevent the users browser from storing a webpage in their cache file. The cache file stores webpages for quicker loading the next time the user visits the website. If you make changes to your webpage and you choose not to use the no-cache tag, the user would not see your changes, but the original page that would be loaded from the cache file.
<meta>
meta
<meta name="rating" content="General"> <meta> meta

The META rating tag is used to enable you to rate your website with the search engines. A general rating means that your webpage contains no adult content and is safe for all ages.
<meta name="robots" content="all"> <meta> meta

The META robots content all tag is used to direct the search engines to index all of your webpage content.
<meta>
meta
<meta name="robots"
content="noindex,follow"> Use:<pre>
Here's how to do an anchor: <PRE>
Here's how to do an anchor:
<A preformatte <A NOT HREF="http://www.idocs.com"> href="http://www.htmlcodetutorial.com" use:<xmp> : d text >Cool Dude</A> Cool Dude</A> is deprecated </PRE>
&nbsp :Extra Space netween words
Hello There! Special Char &copy :copy right symbol This page Copyright © 1999 by me!
Hello
There!
This page Copyright 1999 by me!
Here is a list of some commonly used special characters in HTML. Character Non-Breaking Space " < > & Representation " < > & © ® ¢ °
CW88-Group#5 TA : Nasrin Mostafazadeh ² » « ¼ ½ ¾ ± ü Ø ¡ ñ
To view links inside tables and access self web source: http://www.web-source.net/html_codes_chart.htm

HTML Tags Chart: Tag Name Code Example Browser View

Î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 Tags Chart: Tag Name Code Example Browser View

Încărcat de

Drepturi de autor:

Formate disponibile

CW88-Group#5 TA : Nasrin Mostafazadeh

HTML Tags Chart

hypertext markup language

Contents of your web page

<head> <title> <body> <!--

CW88-Group#5 TA : Nasrin Mostafazadeh

<a> -Absolute and

Visit Our Site (Tip) Click to goto top of the page

<br> <i> <strong> <u> <b> <font> <font> <font> <strike>

Example 2: (Tip) Column 1 Column 2

CW88-Group#5 TA : Nasrin Mostafazadeh

CW88-Group#5 TA : Nasrin Mostafazadeh

emphasis embed object

This is an Example of using the emphasis tag

CW88-Group#5 TA : Nasrin Mostafazadeh

Select an option: (Tip)

CW88-Group#5 TA : Nasrin Mostafazadeh

<hr> (Internet Explorer) <hr> (Internet Explorer) <img>

CW88-Group#5 TA : Nasrin Mostafazadeh

List item 1 List item 2 List item 3

Numbered 1. 2. 3. 4. List item 1 List item 2 List item 3 List item 4

Lowercase Roman Numerals

Capital Roman Numerals

CW88-Group#5 TA : Nasrin Mostafazadeh

I. II. III. IV.

List item 1 List item 2 List item 3 List item 4

List item 1 List item 2 List item 3

CW88-Group#5 TA : Nasrin Mostafazadeh

List item 1 List item 2 o List item 3 o List item 4

Nothing will show (Tip)

Nothing will show (Tip)

<meta name="rating" content="General"> <meta> meta

Nothing will show (Tip)

<meta name="robots" content="all"> <meta> meta

Nothing will show (Tip)

Nothing will show (Tip)

CW88-Group#5 TA : Nasrin Mostafazadeh

Here's how to do an anchor:

&nbsp :Extra Space netween words

This page Copyright 1999 by me!

S-ar putea să vă placă și