Creating an HTML Page
A web page is created using a language called, Hypertext
Markup Language, better known as HTML. You can write your own HTML
tags within a plain text editor, such as Note Pad, or use an HTML
editor, which will write the code for you.
HTML codes, also referred to as tags, are enclosed by the lesser
than (<) and greater than (>) brackets and may be written in
capital or lower case letters.
The opening bracket is followed by an element, which is a browser command, and ends
with the closing bracket.
<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 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>
Basic HTML Document 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 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 <TITLE> tag.
</HEAD> - Closes the <HEAD> tag.
<BODY> - This is where you will begin writing your
document and placing your HTML codes.
</BODY> - Closes the <BODY> tag.
</HTML> - Closes the <HTML>
tag.
How to Copy and Paste HTML Tags and Codes
To
copy and paste the HTML tags and 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 code you would like to copy (Example of
highlighted text). Your 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
document.
HTML Tags Chart
|
|
Tag
|
Name
|
Code Example
|
Browser View
|
| <!-- |
comment |
<!--This can
be viewed in the HTML part of a document--> |
Nothing will
show |
| <A - |
anchor |
<A
HREF="http://www.yourdomain.com/">Visit Our
Site</A> |
Visit Our Site |
| <B> |
bold |
<B>Example</B> |
Example |
| <BIG> |
big (text) |
<BIG>Example</BIG> |
Example |
| <BODY> |
body of
document |
<BODY>The
content of your page</BODY> |
Contents of your
webpage |
| <BR> |
line break |
The contents of your
page<BR>The contents of your page |
The contents of your
page
The contents of your
page |
| <CENTER> |
center |
<CENTER>This will center your
contents</CENTER> |
This will
center your contents
|
| <DD> |
definition
description |
<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
|
| <DL> |
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 |
| <FONT> |
font |
<FONT
FACE="Times New Roman">Example</FONT> |
Example |
| <FONT> |
font |
<FONT
FACE="Times New Roman"
SIZE="4">Example</FONT> |
Example |
| <FONT> |
font |
<FONT
FACE="Times New Roman" SIZE="+3"
COLOR="#FF0000">Example</FONT> |
Example |
| <FORM> |
form |
<FORM
action="mailto:someone@somewhere.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 |
<H1>Heading
1 Example</H1> |
Heading 1 Example
|
| <H2> |
heading 2 |
<H2>Heading
2 Example</H2> |
Heading 2 Example
|
| <H3> |
heading 3 |
<H3>Heading
3 Example</H3> |
Heading 3 Example
|
| <H4> |
heading 4 |
<H4>Heading
4 Example</H4> |
Heading 4 Example
|
| <H5> |
heading 5 |
<H5>Heading
5 Example</H5> |
Heading 5 Example
|
| <H6> |
heading 6 |
<H6>Heading
6 Example</H6> |
Heading 6 Example
|
| <HEAD> |
heading of
document |
<HEAD>Contains elements describing
the document</HEAD> |
Nothing will
show |
| <HR> |
horizontal
rule |
<HR> |
Contents of your
webpage
Contents of your
webpage |
| <HR> |
horizontal
rule |
<HR
WIDTH="50%" SIZE="3"> |
Contents of your
webpage
Contents of your
webpage |
| <HR> |
horizontal
rule |
<HR
WIDTH="50%" SIZE="3" NOSHADE> |
Contents of your
webpage
Contents of your
webpage |
<HR>
(Internet
Explorer) |
horizontal
rule |
<HR
WIDTH="75%" COLOR="#FF0000" SIZE="4"> |
Contents of your
webpage
Contents of your
webpage |
<HR>
(Internet
Explorer) |
horizontal
rule |
<HR
WIDTH="25%" COLOR="#6699FF" SIZE="6"> |
Contents of your
webpage
Contents of your
webpage |
| <HTML> |
hypertext markup
language |
<HTML><HEAD><META><TITLE>Title
of your webpage</TITLE></HEAD><BODY>Webpage
contents</BODY></HTML> |
Contents of your
webpage |
| <I> |
italic |
<I>Example</I> |
Example |
| <IMG> |
GIF image
|
<IMG
SRC="http://minornotes.com/BALL9.GIF" BORDER="0" ALT="a comment
about this image"> |
 |
| <INPUT> |
input field |
Example 1:
<FORM METHOD=post
ACTION="/cgi-bin/example.cgi">
<INPUT type="text" size="10" maxlength="30">
<INPUT type="Submit" VALUE="Submit">
</FORM> |
|
<INPUT>
(Internet
Explorer) |
input field |
Example 2:
<FORM METHOD=post
ACTION="/cgi-bin/example.cgi">
<INPUT type="text" STYLE="color: #FFFFFF; font-family:
Verdana; font-weight: bold; font-size: 12px; background-color:
#72A4D2;" size="10" maxlength="30">
<INPUT type="Submit" VALUE="Submit">
</FORM> |
|
| <INPUT> |
input field |
Example 3:
<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="http://minornotes.com/BALL3.GIF"></TD></TR>
</TABLE>
</FORM> |
|
| <INPUT> |
input field |
Example 4:
<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">
<INPUT type="Reset" VALUE="Clear">
</FORM> |
|
| <INPUT> |
input field |
Example 5:
<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> |
|
| <INPUT> |
input field |
Example 6:
<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> |
|
| <LI> |
list item |
Example 1:
<MENU>
<LI type="disc">List item 1
<LI type="circle">List item 2
<LI type="square">List item 3
</MENU>
Example 2:
<OL type="i">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL> |
Example 1:
- List item
1
- List
item 2
- List
item 3
Example 2:
- List item
1
- List item
2
- List item
3
- List item
4
|
| <LINK> |
link |
Visit our <A
HREF="http://minornotes.com/">site</A> |
Visit our site |
<MARQUEE>
(Internet
Explorer) |
scrolling
text |
<MARQUEE
bgcolor="#CCCCCC" loop="-1"
scrollamount="2" width="100%">Example
Marquee</MARQUEE> |
|
| <MENU> |
menu |
<MENU>
<LI type="disc">List item 1
<LI type="circle">List item 2
<LI type="square">List item 3
</MENU> |
- List item
1
- List item
2
- List item
3
|
| <META> |
meta |
<META
name="Description" content="Description of your site">
<META name="keywords" content="keywords describing your
site"> |
Nothing will
show |
| <META> |
meta |
<META
HTTP-EQUIV="Refresh"
CONTENT="4;URL=http://minornotes.com/"> |
Nothing will
show |
| <META> |
meta |
<META
http-equiv="Pragma" content="no-cache"> |
Nothing will
show |
| <META> |
meta |
<META
name="rating" content="General"> |
Nothing will
show |
| <META> |
meta |
<META
name="ROBOTS" content="ALL"> |
Nothing will
show |
| <META> |
meta |
<META
NAME="ROBOTS" content="NOINDEX,FOLLOW"> |
Nothing will
show |
| <OL> |
ordered list |
Example 1:
<OL>
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>
Example 2:
<OL
type="a">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>
|
Example 1:
- List item 1
- List item 2
- List item 3
- List item 4
Example 2:
- List item 1
- List item 2
- List item 3
- List item 4
|
| <OPTION> |
listbox
option |
<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> |
|
| <P> |
paragraph |
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>
<BR>
Example 2:<BR>
<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. |
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.
|
| <SMALL> |
small (text) |
<SMALL>Example</SMALL> |
Example |
| <STRONG> |
strong
emphasis |
<STRONG>Example</STRONG> |
Example |
| <TABLE> |
table |
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>
|
Example 1:
Example 2:
Example 3:
| Column
1 |
Column
2 |
| Row 2 |
Row 2 |
|
| <TD> |
table data |
<TABLE BORDER="2"
CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<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> |
| Column 1 |
Column 2 |
Column 3 |
| Row 2 |
Row 2 |
Row 2 |
| Row 3 |
Row 3 |
Row 3 |
| Row 4 |
Row 4 |
Row 4 |
|
| <TITLE> |
document
title |
<TITLE>Title of your
webpage</TITLE> |
Title of your webpage
will be viewable in the title bar. |
| <TR> |
table row |
<TABLE BORDER="2"
CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE> |
|
| <TT> |
teletype |
<TT>Example</TT> |
Example |
| <U> |
underline |
<U>Example</U> |
Example |
| <UL> |
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> |
Example 1:
Example 2:
|
|
A big
thanks to www.web-source.net for
this information.
use your browser's BACK button to return :
|
