HTML

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.
Tag
Name
Code Example
Browser View

Nothing will show (Tip)
<a -
anchor
<a href="http://www.domain.com/">
Visit Our Site</a>
Visit Our Site (Tip)
<b>
bold
<b>Example</b>
Example
<big>
big (text) <big>Example</big>
Example (Tip)
<body>
body of
HTML <body>The content of your HTML
documen page</body>
t
Contents of your web

page (Tip)
<br>
line
break
<center> center
The contents of your page<br>The contents

of your page
<center>This will center your
contents</center>
The contents of your web

page
The contents of your web
page
This will center your
contents
<dd>
<dl>
definitio <dt>Definition Term</dt>
n
<dd>Definition of the term</dd>
descripti <dt>Definition Term</dt>
on
</dl>
Definition Term
Definition of the
term
Definition Term
Definition of the
term
<dl>
<dl>
<dt>Definition Term</dt>
definitio <dd>Definition of the term</dd>
n list
</dl>
Definition Term
Definition of the
term
Definition Term
Definition of the
term
<dt>
<dl>
definitio <dd>Definition of the term</dd>
n term
</dl>
Definition Term
Definition of the
term
Definition Term
Definition of the
term
<em>
emphasis This is an <em>Example</em> of using
This is an Example of
<embed>
embed
object
the emphasis tag
using the emphasis tag
<embed src="yourfile.mid" width="100%"

height="60" align="center">
(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
<embed src="yourfile.mid" autostart="true"

hidden="false" loop="false">
<noembed><bgsound src="yourfile.mid"
loop="1"></noembed>
<font>
font
<font face="Times New

Roman">Example</font>
Example (Tip)
<font>
font
<font face="Times New Roman"

size="4">Example</font>
Example (Tip)
<font>
font
<font face="Times New Roman" size="+3"

color="#ff0000">Example</font>
Example (Tip)
form
<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>
<form>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
heading
1
heading
2
heading
3
heading
4
heading
5
heading
6
<h1>Heading 1 Example</h1>
<head>
heading
of
<head>Contains elements describing the

document</head>
Name:
Email:
Submit
Nothing will show
(Tip)
HTML
documen
t
<hr>
horizont
<hr />
al rule

page (Tip)
page
<hr>
<hr>
horizont
<hr width="50%" size="3" />
al rule
horizont
<hr width="50%" size="3" noshade />
al rule
<hr>
horizont <hr width="75%" color="#ff0000" size="4"
(Internet
/>
al rule
Explorer)
<hr>
horizont <hr width="25%" color="#6699ff" size="6"
(Internet
/>
al rule
Explorer)
<html>
<html>
<head>
<meta>
hypertex
<title>Title of your web page</title>
t markup
</head>
language
<body>HTML web page contents
</body>
</html>
<i>
italic
<i>Example</i>
<img>
image
<img src="Earth.gif" width="41" height="41"

border="0" alt="text describing the image" />
<input>
input
field
Example 1:

page
page
page
page
page
page
page
page

page
Example
(Tip)
Example 1: (Tip)
<form method=post action="/cgibin/example.cgi">

<input type="text" size="10"
maxlength="30">
<input type="Submit" value="Submit">
</form>
Submit
Example 2:
<input>
input
(Internet
field
Explorer)
<form method=post action="/cgiExample 2: (Tip)

bin/example.cgi">
<input type="text" style="color: #ffffff; fontfamily: Verdana; font-weight: bold; font-size:
Submit
12px; background-color: #72a4d2;" size="10"
maxlength="30">
</form>
Example 3:
<input>
input
field

<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>
Example 3: (Tip)
Example 4:
Example 4: (Tip)
<input>
<input>
input
field
input
field

Enter Your Comments:<br>
<textarea wrap="virtual" name="Comments"
rows=3 cols=20
maxlength=100></textarea><br>
<input type="Reset" value="Clear">
</form>
Submit
Clear
Example 5:
Example 5: Tip)

<center>
Select an option:
option 2
Select an option:
<select>
<option >option 1</option>
<option selected>option 2</option>
<option>option 3</option>
</select><br>
<input type="Submit"
value="Submit"></center>
</form>
Submit
Example 6:
<input>
input
field
<form method=post action="/cgiExample 6: (Tip)

bin/example.cgi">
Select an option:<br>
<input type="radio" name="option"> Option Select an option:
1
Option 1
<input type="radio" name="option"
Option 2
checked> Option 2
<input type="radio" name="option"> Option
Option 3
3
<br>
Select an option:
<br>
Selection 1
Select an option:<br>
<input type="checkbox" name="selection">
Selection 2
Selection 1
Selection 3
<input type="checkbox" name="selection"
Submit
checked> Selection 2
<input type="checkbox" name="selection">
Selection 3
</form>
Example 1:
<li>
list item
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>
List item 1
List item 2
List item 3
Example 2:
Example 2:
<ol type="i">
i.
ii.
List item 1
List item 2
<li>List item 1</li>

</ol>
<link>
link
iii.
iv.
List item 3
List item 4
<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)
(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>
<meta>
meta
<meta name="Description"
content="Description of your site">
<meta name="keywords" content="keywords
describing your site">
<meta>
meta
<meta HTTP-EQUIV="Refresh"
CONTENT="4;URL=http://www.yourdomain Nothing will show (Tip)
.com/">
<meta>
meta
<meta http-equiv="Pragma" content="nocache">
<meta>
meta
<meta name="rating" content="General">
<meta>
meta
<meta name="robots" content="all">
<meta>
meta
<meta name="robots"
content="noindex,follow">
Numbered
Numbered
<ol>
ordered
list
<ol>
</ol>
1.
2.
3.
4.
List item 1
List item 2
List item 3
List item 1
List item 2
List item 3
List item 4
Numbered Special Start
5.
6.
7.
8.
Numbered Special Start

<ol start="5">
</ol>
Lowercase Letters
a.
b.
c.
d.
Lowercase Letters
<ol type="a">
</ol>
List item 1
List item 2
List item 3
List item 4
List item 1
List item 2
List item 3
List item 4
Capital Letters
A.
B.
C.
D.
List item 1
List item 2
List item 3
List item 4
Capital Letters
<ol type="A">
</ol>
Capital Letters Special Start
<ol type="A" start="3">
</ol>
Lowercase Roman Numerals
<ol type="i">
</ol>
Capital Letters Special

Start
C.
D.
E.
F.
List item 1
List item 2
List item 3
List item 4
Lowercase Roman
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
Capital Roman Numerals

<ol type="I">
</ol>
Numerals Special Start

VII.
VIII.
IX.
X.
List item 1
List item 2
List item 3
List item 4
Capital Roman Numerals Special Start

<ol type="I" start="7">
</ol>
listbox
<option>
option
<p>

<center>
Select an option:
<select>
<option selected>option 2</option>
</select><br>
</center>
</form>
Select an option: (Tip)

option 2
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.
paragrap Example 1:<br>

<br>
h
<p align="left">
This is an example<br>
displaying the use<br>
of the paragraph tag.<br>
<br>
Example 2:<br>
Attributes:
Example 1:
This is an example
displaying the use
<br>
<p align="right">
of the paragraph tag.<br>
<br>
Example 3:<br>
<br>
<p align="center">
of the paragraph tag.

Example 2:
This is an example
displaying the use
Example 3:
This is an example
displaying the use
<small>
small
(text)
<small>Example</small>
Example
<strike>
deleted
text
<strike>Example</strike>
Example
<strong>
strong
<strong>Example</strong>
emphasis
(Tip)
Example
Example 1:
<table>
table
<table border="4" cellpadding="2"

cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Example 1: (Tip)
Example 2: (Internet Explorer)
Example 2: (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%">
Column 1
Column 1
Column 2
Column 2
Example 3: (Tip)
Column 1
Column 2
Row 2
Row 2
<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
data

<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<th>
table
header
<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>
<td>Row 4</td>
<td>Row 4</td>
</tr>
</table>
</div>
<title>
documen
<title>Title of your HTML page</title>
t title
<td>
Column 1 Column 2
Colum
n1
Row 2
Row 3
Row 4
Colum
n2
Row 2
Row 3
Row 4
Colum
n3
Row 2
Row 3
Row 4
Title of your web page

will be viewable in the
title bar. (Tip)
<tr>

<tr>
table row <td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<tt>
teletype
<u>
underlin
<u>Example</u>
e
<ul>
Example 1:<br>
<br>
<ul>
</ul>
<br>
unordere Example 2:<br>
d list
<ul type="disc">
<ul type="circle">
</ul>
</ul>
<tt>Example</tt>
Column 1 Column 2
Example
Example
Example 1:
List item 1
List item 2
Example 2:
List item 1
List item 2
o List item 3
o List item 4
MouseOver PopUps provided by:
Would you like to learn how to design

your own web site?
Whether you are a complete beginner or have some
web site design experience, this web design course will
teach you how to plan, design, build and market your
own web site
If you like these codes, you'll love Web Design Mastery. Get these codes
and many more.
"I have learned more from this web design course than I did from a
course I took in college!" - Joseph Seeles
More
Web Design Information:

Web Development
HTML Codes
HTML Tips
Web Design Tips
Javascript Snippets
216 Safe Colors
Symbols
Web Design Articles:

Selecting a Quality Domain Name
Selecting the Best Web Design Language for Your Project
Bring Your Web Site to Life With PHP
The Birth of a Professional Web Site (10 part series)
Increase Your Traffic by Recovering Your Lost Visitors
Using HTML Tables to Format Your Web Page
HTML Forms -- Back to the Basics and Beyond Part One - Basic Forms Tutorial
HTML Forms -- Back to the Basics and Beyond Part Two - Advanced Forms
HTML Forms -- Back to the Basics and Beyond Part Three - Form Tips & Tricks
35 Deadly Web Site Sins that will Kill Your Business!
Selecting A Quality Web Host
Mini-Sites -- Highly Targeted Sales Generators
Spice Up Your Web Site with JavaScript
Use CGI to Automate Your Web Site
Give Your Graphics A Professional Look without the Price
Use JavaScript to Dynamically Update Your Website
10 Website Essentials to Increase Your Sales
Is Your Domain Name A Trademark Infringement?
Steps to Optimizing Your HTML Codes
The Secrets to Building a Successful Website
Web Development Tutorials:

Creating an Ebook
Internet Marketing Strategies
Internet Marketing Tools
Developing an Internet Business
Developing a Professional Web Site
Free Content
Webpage Optimization
Hosting Your Site
Promotion
Internet Marketing
Web Site Building
Listing Your Site
Internet Advertising
Developing Traffic
Web Development Strategies
Back
| Web Site Development | HTML Codes | HTML Tips | Javascript Snippets |

| Web Resources | 216 Safe Colors | Symbols | Web Development Strategies | Web Site
Templates |
| Contact Us | About | Privacy Policy | Terms & Conditions | Site Map | Advertise | Affiliate
Program |
Web-Source.net http://www.web-source.net
Your Guide to Professional Web Site Design and Development
Hosted with Host4Profit.
Copyright 1997-2011 Brajusta Publishing, Inc., All Rights Reserved

HTML

Enviado por

Dados do documento

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

Enviado por

Direitos autorais:

Formatos disponíveis

HTML Tags Chart

<!--This can be viewed in the HTML part of

Nothing will show (Tip)

Visit Our Site (Tip)

big (text) <big>Example</big>

Contents of your web

The contents of your page<br>The contents

The contents of your web

emphasis This is an <em>Example</em> of using

the emphasis tag

using the emphasis tag

<embed src="yourfile.mid" width="100%"

<embed src="yourfile.mid" autostart="true"

<font face="Times New

<font face="Times New Roman"

<font face="Times New Roman" size="+3"

<head>Contains elements describing the

Nothing will show

Contents of your web

<img src="Earth.gif" width="41" height="41"

Contents of your web

Contents of your web

<form method=post action="/cgibin/example.cgi">

<form method=post action="/cgiExample 2: (Tip)

<form method=post action="/cgibin/example.cgi">

<form method=post action="/cgibin/example.cgi">

<form method=post action="/cgibin/example.cgi">

<form method=post action="/cgiExample 6: (Tip)

<li>List item 1</li>

<meta http-equiv="Pragma" content="nocache">

Nothing will show (Tip)

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

Nothing will show (Tip)

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

Nothing will show (Tip)

Nothing will show (Tip)

Numbered Special Start

Numbered Special Start

Capital Letters Special

Capital Roman Numerals

Numerals Special Start

Capital Roman Numerals Special Start

<form method=post action="/cgibin/example.cgi">

Select an option: (Tip)

This is an example displaying the use of the

This will create a line

paragrap Example 1:<br>

of the paragraph tag.

<table border="4" cellpadding="2"

Example 2: (Internet Explorer)

<table border="2" bordercolor="#336699"

<table border="2" cellpadding="2"

Title of your web page

<table border="2" cellpadding="2"

MouseOver PopUps provided by:

Would you like to learn how to design

Web Design Information:

Web Design Articles:

Web Development Tutorials:

| Web Site Development | HTML Codes | HTML Tips | Javascript Snippets |

Você também pode gostar