HTML Tags

HTML Tags Chart
Here some HTML tags are defined take a look on them and practice it in your web pages as there is no such way except practicing it,which tells you how they work and look like in Browser. Tag <!-<a <b> <big> <body> Name comment anchor bold Code Example Browser View
 <a href="http://www.yahoo.com/"> Yahoo!</a> <b>Example</b> Yahoo! Example
big (text) <big>Example</big> body of HTML <body>HiDIT Students.</body> documen t line break
Example
HiDIT Students.
<br>
The contents of your web The contents of your page<br>The contents of page your page The contents of your web page <center>This will center your contents</center> <dl> <dt>Chemistry:</dt> <dd> Chemistry is a branch of science.. </dd> <dt>Physics:</dt> <dd> Physics is a branch of science.. </dd> </dl> This will center your contents Chemistry: Chemistry is a branch of science.. Physics: Physics is a branch of science.. Definition Term Definition of the term Definition Term Definition of the term Definition Term Definition of the term
<center> center
<dd>
definition descripti on
<dl>
<dl> <dt>Definition Term</dt> definition <dd>Definition of the term</dd> <dt>Definition Term</dt> list <dd>Definition of the term</dd> </dl> <dl> definition <dt>Definition Term</dt> term <dd>Definition of the term</dd>
<dt>
Youth Computer Collage (YCC)
Prepared by: Abdul Haseeb
<dt>Definition Term</dt> <dd>Definition of the term</dd> </dl> <em> <embed> emphasis embed object This is an <em>Example</em> of using the emphasis tag <embed src="yourfile.flv" width="100%" height="60" align="center">
Definition Term Definition of the term This is an Example of using the emphasis tag
<embed>
embed object
<embed src="yourfile.mid" autostart="true" hidden="false" loop="false"> <noembed><bgsound src="yourfile.mid" loop="1"></noembed>
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>
font 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> <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> <h1>Heading 1 Example</h1> <h2>Heading 2 Example</h2> <h3>Heading 3 Example</h3> <h4>Heading 4 Example</h4> <h5>Heading 5 Example</h5> <h6>Heading 6 Example</h6>
Example
Example
Name: Email:
Submit Query
<form>
form
<h1> <h2> <h3> <h4> <h5> <h6>
heading 1 heading 2 heading 3 heading 4 heading 5 heading 6
<head>
heading of HTML <head>Contains elements describing the documen document</head> t
Nothing will show
<hr>
horizonta <hr /> l rule horizonta <hr width="50%" size="3" /> l rule horizonta <hr width="50%" size="3" noshade /> l rule
<hr>
<hr>
<hr> horizonta (Internet <hr width="75%" color="#ff0000" size="4" /> l rule Explorer) <hr> horizonta (Internet <hr width="25%" color="#6699ff" size="6" /> l rule Explorer) <html> <head> <meta> hypertext <title>Title of your web page</title> markup </head> language <body>HTML web page contents </body> </html> italic image <i>Example</i> <img src="Earth.gif" width="41" height="41" border="0" alt="text describing the image" /> <form method=post action="/cgibin/example.cgi"> <input type="text" size="10" maxlength="30"> <input type="Submit" value="Submit"> </form> <form method=post action="/cgibin/example.cgi"> <input type="text" style="color: #ffffff; fontfamily: Verdana; font-weight: bold; font-size: 12px; background-color: #72a4d2;" size="10" maxlength="30"> <input type="Submit" value="Submit"> </form>
<html>
HTML web page contents
<i> <img>
Example
<input>
input field
Submit
<input> input (Internet field Explorer)
Submit
<input>
input field
<form method=post action="/cgibin/example.cgi"> <table border="0" cellspacing="0" cellpadding="2"><tr><td 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> <form method=post action="/cgibin/example.cgi"> Enter Your Comments:<br> <textarea wrap="virtual" 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> <input type="Submit" value="Submit"></center> </form>
<input>
input field
Submit
Clear
Select an option:
option 2
<input>
input field
Submit
<input>
input field
<form method=post action="/cgibin/example.cgi"> Select an option:<br> Select an option: <input type="radio" name="male"> Male Male <input type="radio" name="female" checked> Female Female <br> <br> Select an option: Select an option:<br> Cricket <input type="checkbox" name="Cricket">
Cricket <input type="checkbox" name="Football " checked> Football <input type="checkbox" name="Baseball"> Baseball <input type="Submit" value="Submit"> </form> Example 1:
Football Baseball
Submit
Example 1: <menu> <li type="disc">Ali</li> <li type="circle">Abdul</li> <li type="square">Abdullah</li> </MENU> <li> list item Example 2: <ol type="i"> <li> Ali </li> <li> Abdul </li> <li> Abdullah </li> <li>Moneeb</li> </ol> <link>
o
Ali Abdul Adullah
Example 2: i. ii. iii. iv. Ali Abdul Abdullah Moneeb
link
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
<marque <marquee bgcolor="#cccccc" loop="1" e> scrolling scrollamount="2" width="100%">Example (Internet text Marquee</marquee> Explorer) <menu> <li type="disc">Cricket </li> <li type="circle">Football</li> <li type="square">Baseball</li> </menu> <meta name="Description" content="Description of your site"> <meta name="Science Benefits" content=" Benefit of science">
o
<menu>
menu
Cricket Football Baseball
<meta>
meta
Meta tag used to tell the different search engines to scroll on your web page.
<meta>
meta
<meta HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain. Nothing will show com/">
<meta> <meta> <meta> <meta>
meta meta meta meta
<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 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>
Nothing will show Nothing will show Nothing will show Nothing will show 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
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
Capital Letters A. B. C. D. List item 1 List item 2 List item 3 List item 4
Capital Letters Special Start C. D. E. F. List item 1 List item 2 List item 3 List item 4
Lowercase Roman
<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> <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>
Numerals i. ii. iii. iv. List item 1 List item 2 List item 3 List item 4
Capital Roman Numerals 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
listbox <option> option
Select an option:
option 2
</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. Attributes: Example 1:<br> <br> <p align="left"> This is an example<br> displaying the use<br> of the paragraph tag.<br> paragrap <br> Example 2:<br> h <br> <p align="right"> This is an example<br> displaying the use<br> of the paragraph tag.<br> <br> Example 3:<br> <br> <p align="center"> This is an example<br> displaying the use<br> of the paragraph tag. small (text) deleted text <small>Example</small> <strike>Example</strike> This is an example displaying the use of the paragraph tag. This will create a line break and a space between lines. Attributes: Example 1: This is an example displaying the use of the paragraph tag. Example 2: This is an example displaying the use of the paragraph tag. Example 3: This is an example displaying the use of the paragraph tag.
Example
<p>
<small> <strike> <strong>
Example Example
strong <strong>Example</strong> emphasis <table border="4" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> <table border="2" bordercolor="#336699"
Column 1
Column 2
<table>
table
Column 1
Column 2
cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> <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> <td>Row 3</td> </tr> <tr> <td>Row 4</td>
Column 1 Row 2
Column 2 Row 2
<td>
table data
Column 1
Column 2
<th>
table header
Colum n1 Row 2 Row 3 Row 4
<td>Row 4</td> <td>Row 4</td> </tr> </table> </div> <title> documen <title>Title of your HTML page</title> t title <table border="2" cellpadding="2" cellspacing="2" width="100%"> <tr> table row <td>Column 1</td> <td>Column 2</td> </tr> </table> teletype <tt>Example</tt> underline <u>Example</u> Example 1:<br> <br> <ul> <li>List item 1</li> <li>List item 2</li> </ul> <br> unordere Example 2:<br> d 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> Title of your web page will be viewable in the title bar.
<tr>
Column 1
Column 2
<tt> <u>
Example
Example Example 1:

List item 1 List item 2
<ul>
Example 2:

List item 1 List item 2 o List item 3 o List item 4
For more information about controls visit: http://w3schools.com

HTML Tags

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML Tags

Enviado por

Direitos autorais:

Formatos disponíveis

HTML Tags Chart

Youth Computer Collage (YCC)

Prepared by: Abdul Haseeb

<embed src="yourfile.mid" autostart="true" hidden="false" loop="false"> <noembed><bgsound src="yourfile.mid" loop="1"></noembed>

<font> <font> <font>

font font font

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

heading 1 heading 2 heading 3 heading 4 heading 5 heading 6

heading of HTML <head>Contains elements describing the documen document</head> t

Nothing will show

Youth Computer Collage (YCC)

Prepared by: Abdul Haseeb

HTML web page contents

<input> input (Internet field Explorer)

Youth Computer Collage (YCC)

Prepared by: Abdul Haseeb

Youth Computer Collage (YCC)

Prepared by: Abdul Haseeb

Ali Abdul Adullah

Example 2: i. ii. iii. iv. Ali Abdul Abdullah Moneeb

<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>

Cricket Football Baseball

<meta HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain. Nothing will show com/">

Youth Computer Collage (YCC)

Prepared by: Abdul Haseeb

<meta> <meta> <meta> <meta>

meta meta meta meta

Youth Computer Collage (YCC)

Prepared by: Abdul Haseeb

listbox <option> option

Youth Computer Collage (YCC)

Prepared by: Abdul Haseeb

<small> <strike> <strong>

Youth Computer Collage (YCC)

Prepared by: Abdul Haseeb

Colum n1 Row 2 Row 3 Row 4

Colum n2 Row 2 Row 3 Row 4

Colum n3 Row 2 Row 3 Row 4

Youth Computer Collage (YCC)

Prepared by: Abdul Haseeb

List item 1 List item 2

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

For more information about controls visit: http://w3schools.com

Youth Computer Collage (YCC)

Prepared by: Abdul Haseeb

Você também pode gostar