Scribd
Upload
19 views

HTML Tags - Codes - Web Page Examples Included

__HTML Tags _ Codes _ Web Page Examples Included

Uploaded by

balavr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

HTML Tags - Codes - Web Page Examples Included

__HTML Tags _ Codes _ Web Page Examples Included

Uploaded by

balavr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

Your Guide to Professional

Web Site Design and Development

HTML Tips
HTML Codes
Web Development

Web Design Tips


JavaScript Codes
216 Web Safe Colors

CSS Tutorial
JavaScript Tutorial
ASCII Character Codes

Monday, April 13, 2009

| Web Site Development | HTML Codes | HTML Tips | Web Design Tips | Javascript Snippets | 216 Safe Colors | Symbols | CSS Tutorial | JavaScript Tutorial |

HTML Tags / Codes / Web Page Design


If you're doing business on the Internet, taking the time to learn how to design your own web
site and write your own HTML code (hypertext markup language) will play a major role in your
success. Not only will learning HTML coding provide you with the freedom to update your own
HTML documents, but it will also save you a great deal of money, as you will be able to avoid
hiring a professional web designer.
If you're looking for some HTML tags to spice up your web site, you've come to the right place.
You will find a variety of HTML codes and tips to assist you below.
However, before reviewing the HTML tags, if you're new to HTML and web site design, the
following section will assist you in creating an HTML web page. For additional web site design
information, make sure you don't miss the web design articles and tutorials at the bottom of this
page.

Creating an HTML Page


A web page is created using a language called, Hypertext Markup Language, better known as
HTML Code. You can write your own coding within a plain text editor, such as Note Pad, or use an
HTML editor, which will write the code for you.

Click here to download


a fully functional demo

eTips Member Login


Enter your email address and
password to enter the private
membership area:
Email:

HTML codes, also referred to as HTML tags, are enclosed by the lesser than (<) and greater than
(>) brackets and may be written in capital or lower case letters.

Password:

The opening bracket is followed by an element, which is a browser command, and ends with the
closing bracket.

Lost Password?
Email:

<font size=2>
An element may also be followed by attributes, which are words describing the properties of
the element, and further instruct the browser.
<font size=2>
Attributes are only contained in the opening HTML tags to the right of the element and are
separated by a space and followed by an equal (=) sign.
The value follows the equal sign and is enclosed in quotes.
<font size=2>

Not yet a member?


Click here to see what you're
missing! Club members receive
access to dozens of free video
tutorials, utilities and ebooks.

Our Products
Web Design Mastery
Mastering Web Hosting
eBook Starter

Basic HTML Document Code Structure


Begin writing your HTML tags by creating your document's basic layout. Copy and paste this code
into your text or HTML editor.
<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.

Our Other Sites


ShelleyLowery.com
Web Design Mastery
Mastering Web Hosting
eBook Starter
Board Your Ship
Residual Income Opportunity
Secrets
Work From Home Business
Guide
Raging Hearts

Partner Sites

Flash Templates
Building Website
Web Hosting
UK Web Hosting

<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.

Plug-in Profits
Web Design Service
Site Build It!
Insider Secrets
Web Site Templates

> Your Link Here <

</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.

How to Copy and Paste HTML Tags / Codes


To copy and paste the HTML tags / codes from the HTML chart below into the HTML of your web
page, place your mouse pointer over the beginning of the HTML code you would like to copy.
Next, click and hold your left mouse button and drag your mouse over all the HTML code you
would like to copy (Example of highlighted text). Your HTML code should now be highlighted. Go
to "Edit" - "Copy" on your web browser's toolbar and then place your cursor within your HTML
code where you would like to place the code. Right click on your mouse and go to "Paste." Your
HTML code should now be displaying within your HTML document.

Web Site Design

HTML Tips
PC Security
CSS Tutorial
HTML Codes
Video Tutorials
Web Design Tips
JavaScript Codes
JavaScript Tutorial
Java Applet Tutorial
216 Web Safe Colors
Web Site Development
ASCII Character Codes

Web Site Tools


Domain Search
Format Your Text
Create Meta Tags
Text to HTML Converter
Color Code Converter
CSS Generator
Bookmark Site Generator
Button Generator
Rollover Button Generator
Rollover Text Button
Generator
Colored Scrollbar Generator
Table Generator
Article Syndication
Free Classified Ads

Web Resources

Web Site Design Course


FREE Intensive 10-Day Web
Site Design Email Course. Learn
how to design a professional
web site.
Plug-in Profit Site
Launch your very own money
making website today that's
100% ready to take orders and
pull in massive profits for you
right now...guaranteed.

Note: For additional tutorials to assist you in HTML and much more, click here to sign up for our free membership club. You will instantly
receive a wealth of quality information, such as dozens of video tutorials, several informative ebooks, utilities to assist you in creating
buttons, tables, meta tags, and more. Best of all, it's completely free.

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

<!--

comment

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

<A -

anchor

<A HREF="http://www.yourdomain.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
document

<BODY>The content of your HTML page</BODY>

Contents of your web page (Tip)

<BR>

line break

The contents of your page<BR>The contents of your page

The contents of your web page


The contents of your web page

<CENTER>

center

<CENTER>This will center your contents</CENTER>

definition
description

<DL>
<DT>Definition Term
<DD>Definition of the term
<DT>Definition Term
<DD>Definition of the term
</DL>

<DD>

Nothing will show (Tip)

This will center your contents


Definition Term
Definition of the term
Definition Term
Definition of the term

definition
list

<DL>
<DT>Definition Term
<DD>Definition of the term
<DT>Definition Term
<DD>Definition of the term
</DL>

Definition Term
Definition of the term
Definition Term
Definition of the term

<DT>

definition
term

<DL>
<DT>Definition Term
<DD>Definition of the term
<DT>Definition Term
<DD>Definition of the term
</DL>

Definition Term
Definition of the term
Definition Term
Definition of the term

<EM>

emphasis

This is an <EM>Example</EM> of using the emphasis tag

This is an Example of using the emphasis tag

<EMBED>

embed
object

<EMBED src="yourfile.mid" width="100%" height="60"


align="center">

<DL>

(Tip)

<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.


<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)
Name:

<FORM>

form

<FORM action="mailto:[email protected]">
Name: <INPUT name="Name" value="" size="10"><BR>
Email: <INPUT name="Email" value="" size="10"><BR>
<CENTER><INPUT type="submit"></CENTER>
</FORM>

<H1>
<H2>
<H3>
<H4>
<H5>
<H6>

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

<H1>Heading
<H2>Heading
<H3>Heading
<H4>Heading
<H5>Heading
<H6>Heading

<HEAD>

heading of
HTML
document

<HEAD>Contains elements describing the


document</HEAD>

<HR>

horizontal
rule

<HR>

(Tip)

Email:

1 Example</H1>
2 Example</H2>
3 Example</H3>
4 Example</H4>
5 Example</H5>
6 Example</H6>

Nothing will show

Contents of your web page (Tip)


Contents of your web page

<HR>

<HR>
<HR>
(Internet
Explorer)

Contents of your web page

horizontal
rule

<HR WIDTH="50%" SIZE="3">

horizontal
rule

<HR WIDTH="50%" SIZE="3" NOSHADE>

horizontal
rule

<HR WIDTH="75%" COLOR="#FF0000" SIZE="4">

Contents of your web page


Contents of your web page
Contents of your web page
Contents of your web page
Contents of your web page

Contents of your web page

<HR>
(Internet
Explorer)

horizontal
rule

<HR WIDTH="25%" COLOR="#6699FF" SIZE="6">

<HTML>

hypertext
markup
language

<HTML><HEAD><META><TITLE>Title of your web


page</TITLE></HEAD><BODY>HTML web page
contents</BODY></HTML>

Contents of your web page

<I>

italic

<I>Example</I>

Example

<IMG>

image

<IMG SRC="Earth.gif" WIDTH="41" HEIGHT="41"


BORDER="0" ALT="text describing the image">

Contents of your web page

(Tip)

Example 1:
Example 1: (Tip)
<INPUT>

input field

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">


<INPUT type="text" size="10" maxlength="30">
<INPUT type="Submit" VALUE="Submit">
</FORM>
Example 2:

<INPUT>
(Internet
Explorer)

input field

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">


<INPUT type="text" STYLE="color: #FFFFFF; font-family:
Verdana; font-weight: bold; font-size: 12px; backgroundcolor: #72A4D2;" size="10" maxlength="30">
<INPUT type="Submit" VALUE="Submit">
</FORM>

Example 2: (Tip)

Example 3:

<INPUT>

input field

<FORM METHOD=post ACTION="/cgi-bin/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>
Example 4:

<INPUT>

input field

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">


Enter Your Comments:<BR>
<TEXTAREA wrap="virtual" name="Comments" rows=3
cols=20 MAXLENGTH=100></TEXTAREA><BR>
<INPUT type="Submit" VALUE="Submit">

Example 3: (Tip)

Example 4: (Tip)

<INPUT type="Reset" VALUE="Clear">


</FORM>
Example 5:

<INPUT>

input field

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">


<CENTER>
Select an option:
<SELECT>
<OPTION >option 1
<OPTION SELECTED>option 2
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
<INPUT type="Submit" VALUE="Submit"></CENTER>
</FORM>

Example 5: (Tip)
Select an option:

Example 6:
Example 6: (Tip)

<INPUT>

input field

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">


Select an option:<BR>
<INPUT type="radio" name="option"> Option 1
<INPUT type="radio" name="option" CHECKED> Option 2
<INPUT type="radio" name="option"> Option 3
<BR>
<BR>
Select an option:<BR>
<INPUT type="checkbox" name="selection"> Selection 1
<INPUT type="checkbox" name="selection" CHECKED>
Selection 2
<INPUT type="checkbox" name="selection"> Selection 3
<INPUT type="Submit" VALUE="Submit">
</FORM>
Example 1:

<LI>

list item

<MENU>
<LI type="disc">List item 1
<LI type="circle">List item 2
<LI type="square">List item 3
</MENU>
Example 2:

Select an option:
Option 1
Option 2
Option 3

Select an option:
Selection 1
Selection 2
Selection 3

Example 1: (Tip)
List item 1
List item 2
List item 3
Example 2:
i. List item 1

<OL type="i">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>
<LINK>

link

<MARQUEE>
scrolling
(Internet
text
Explorer)

ii. List item 2


iii. List item 3
iv. List item 4

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<MARQUEE bgcolor="#CCCCCC" loop="-1"
scrollamount="2" width="100%">Example
Marquee</MARQUEE>

Example Marquee

(Tip)

menu

<MENU>
<LI type="disc">List item 1
<LI type="circle">List item 2
<LI type="square">List item 3
</MENU>

<META>

meta

<META name="Description" content="Description of your


site">
<META name="keywords" content="keywords describing
your site">

Nothing will show (Tip)

<META>

meta

<META HTTP-EQUIV="Refresh" CONTENT="4;


URL=http://www.yourdomain.com/">

Nothing will show (Tip)

<META>

meta

<META http-equiv="Pragma" content="no-cache">

Nothing will show (Tip)

<META>

meta

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

Nothing will show (Tip)

<META>

meta

<META name="ROBOTS" content="ALL">

Nothing will show (Tip)

<META>

meta

<META NAME="ROBOTS" content="NOINDEX,FOLLOW">

Nothing will show (Tip)

Numbered

Numbered

<MENU>

<OL>

ordered list

<OL>
<LI>List
<LI>List
<LI>List
<LI>List
</OL>

item 1
item 2
item 3
item 4

Numbered Special Start

List item 1
List item 2
List item 3

1.
2.
3.
4.

List
List
List
List

item 1
item 2
item 3
item 4

Numbered Special Start


5. List item 1
6. List item 2
7. List item 3

<OL start="5">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>
Lowercase Letters
<OL type="a">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

8. List item 4

Lowercase Letters
a.
b.
c.
d.

List
List
List
List

item 1
item 2
item 3
item 4

Capital Letters
A.
B.
C.
D.

List
List
List
List

item 1
item 2
item 3
item 4

Capital Letters Special Start


Capital Letters
<OL type="A">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>
Capital Letters Special Start
<OL type="A" start="3">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>
Lowercase Roman Numerals
<OL type="i">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>
Capital Roman Numerals

C.
D.
E.
F.

List
List
List
List

item 1
item 2
item 3
item 4

Lowercase Roman Numerals


i.
ii.
iii.
iv.

List
List
List
List

item 1
item 2
item 3
item 4

Capital Roman Numerals


I.
II.
III.
IV.

List
List
List
List

item 1
item 2
item 3
item 4

Capital Roman Numerals Special Start


VII.
VIII.
IX.
X.

List
List
List
List

item 1
item 2
item 3
item 4

<OL type="I">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>
Capital Roman Numerals Special Start
<OL type="I" start="7">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

<OPTION>

<P>

listbox
option

paragraph

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">


<CENTER>
Select an option:
<SELECT>
<OPTION>option 1
<OPTION SELECTED>option 2
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
</CENTER>
</FORM>

Select an option: (Tip)

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>
<P align="left">
This is an example<BR>
displaying the use<BR>
of the paragraph tag.<BR>
<BR>
Example 2:<BR>
<BR>

Attributes:
Example 1:
This is an example
displaying the use
of the paragraph tag.
Example 2:

<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>Example</SMALL>

This is an example
displaying the use
of the paragraph tag.
Example 3:
This is an example
displaying the use
of the paragraph tag.

<SMALL>

small (text)

<STRIKE>

deleted text <STRIKE>Example</STRIKE>

Example

<STRONG>

strong
emphasis

Example

<STRONG>Example</STRONG>

Example

(Tip)

Example 1:
<TABLE BORDER="4" CELLPADDING="2"
CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>

Example 1: (Tip)
Column 1

Column 2

Example 2: (Internet Explorer)

<TABLE>

table

<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>

Example 2: (Tip)
Column 1

Column 2

Example 3: (Tip)
Column 1

Column 2

Row 2

Row 2

</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>

<TD>

table data

<TH>

<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>
table header <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>

document
title

<TITLE>Title of your HTML page</TITLE>

table row

<TABLE BORDER="2" CELLPADDING="2"


CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>

<TR>

Column 1

Column 2

Column 1 Column 2 Column 3


Row 2
Row 3
Row 4

Row 2
Row 3
Row 4

Row 2
Row 3
Row 4

Title of your web page will be viewable in the title


bar. (Tip)
Column 1

Column 2

<TD>Column 2</TD>
</TR>
</TABLE>
<TT>

teletype

<TT>Example</TT>

Example

<U>

underline

<U>Example</U>

Example

unordered
list

Example 1:<BR>
<BR>
<UL>
<LI>List item 1
<LI>List item 2
</UL>
<BR>
Example 2:<BR>
<UL type="disc">
<LI>List item 1
<LI>List item 2
<UL type="circle">
<LI>List item 3
<LI>List item 4
</UL>
</UL>

<UL>

Example 1:
List item 1
List item 2
Example 2:
List item 1
List item 2
List item 3
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 |
| FeedBack | About | Privacy Policy | Terms and Conditions | Site Map | Affiliate Program |
Web-Source.net http://www.web-source.net
Your Guide to Professional Web Site Design and Development
Hosted with Host4Profit.
Copyright 1997-2009 Brajusta Publishing, Inc., All Rights Reserved

You might also like