HTML Class

MENU

Welcome Web Design Class!

This page will give you some examples of HTML Codes.
Learn how to make an HTML "Box".
This is only one example of a HTML Box, there are others.
If you find an HTML Code that you would like to keep,
copy and paste the code into a "Notepad" file on your computer.
Remember to save Notepad file with the "File Extension of: --> .HTML

**School Events.**
Event	Date	Time
Prom	02/04/2010	6:00 p.m.
After Prom Breakfast	02/05/2010	10:00 a.m.
Graduation Ceramony	02/22/2010	1:00 p.m.

<TABLE BORDER="2" CELLPADDING="3" CELLSPACING="8"
ALIGN="center">

<CAPTION>
School Events.</CAPTION>

<TR>
<TH>Event</TH>
<TH>Date</TH>
<TH>Time</TH></TR>

<TR>
<TD ALIGN="center">Prom</TD>
<TD ALIGN="center">02/04/2010</TD>
<TD ALIGN="center">6:00 p.m.</TD></TR>

<TR>
<TD ALIGN="center">After Prom Breakfast</TD>
<TD ALIGN="center">02/05/2010</TD>
<TD ALIGN="center">10:00 a.m.</TD></TR>

<TR>
<TD ALIGN="center">Graduation Ceramony</TD>
<TD ALIGN="center">02/22/2010</TD>
<TD ALIGN="center">1:00 p.m.</TD></TR>

</TABLE>

HTML Code used for this "Box" example

What do the HTML Tags in this Code stand for?
The Tags used to create the above "Box" are described below.
See the actual HTML Code to your Right.

<TABLE BORDER="0"> ~ Describes Box table border and what size the border will be.

<CAPTION> ~ This will be the Title given to your Table. Caption Tag has to close too. </CAPTION>

CELLSPACING ~ Amount of space between each <TR> table row.

CELLPADDING ~ Amount of space between each <TD> table data.

<TH> ~ Stand for "Table Heading".

<TR> ~ Stands for "Table Row".

<TD> ~ Stands for "Table Data".

FONT FACE="arial, helvetica"> ~ Font Style. Always choose two different fonts.

TD ALIGN ~ Position of Table Data tag.
Chocies are: Top, Bottom, Right, Left or Center.

 ~ Stands for "NO BREAK".

Copy and Paste the HTML Code for the "Box" into your "TestBed" and play around with the Code.
Change the "Text", "Table Border", "Cellspacing", "Cellpadding" and change the Align Tag.

Click here to use the "Online TestBed".

Example "Box" # 2

Example "Box" # 2
with Color

Study Words

HTML Box

HTML Horizontal Rule

Online TestBed

HTML Code used for this "Box" example

HTML Code used for "Box"

More Tags

Head Section

More Tags pg 2

Example "Box" # 2 ~ Using Different Colors

**School Events.**
Event	Date	Time
Prom	02/04/2010	6:00 p.m.
After Prom Breakfast	02/05/2010	10:00 a.m.
Graduation Ceramony	02/22/2010	1:00 p.m.

<TABLE BORDER="2" BGCOLOR="gray" CELLPADDING="3" CELLSPACING="8"
ALIGN="center">

<CAPTION>
School Events.</CAPTION>

<TR>
<TH>Event</TH>
<TH>Date</TH>
<TH>Time</TH></TR>

<TR>
<TD ALIGN="center">Prom</TD>
<TD ALIGN="center">02/04/2010</TD>
<TD ALIGN="center">6:00 p.m.</TD></TR>

<TR>
<TD ALIGN="center">After Prom Breakfast</TD>
<TD ALIGN="center">02/05/2010</TD>
<TD ALIGN="center">10:00 a.m.</TD></TR>

<TR>
<TD ALIGN="center">Graduation Ceramony</TD>
<TD ALIGN="center">02/22/2010</TD>
<TD ALIGN="center">1:00 p.m.</TD></TR>

</TABLE>

Copy and Paste the HTML Code for the "Box" into your "TestBed" and play around with the Code.
Change the "Text", "Table Border", "Cellspacing", "Cellpadding" and change the Color Tag.

Click here to use the "Online TestBed".

In this example I've added the "BGCOLOR="gray" Tag in the opening line of HTML Code.

This allows my "Box" to have Color!

<TABLE BORDER="2" CELLPADDING="3" CELLSPACING="8"
ALIGN="center">

<CAPTION>
School Events.</CAPTION>

<TR>
<TH BGCOLOR="gray">Event</TH>
<TH BGCOLOR="yellow">Date</TH>
<TH BGCOLOR="green">Time</TH></TR>

<TR>
<TD ALIGN="center">Prom</TD>
<TD ALIGN="center">02/04/2010</TD>
<TD ALIGN="center">6:00 p.m.</TD></TR>

<TR>
<TD ALIGN="center">After Prom Breakfast</TD>
<TD ALIGN="center">02/05/2010</TD>
<TD ALIGN="center">10:00 a.m.</TD></TR>

<TR>
<TD ALIGN="center">Graduation Ceramony</TD>
<TD ALIGN="center">02/22/2010</TD>
<TD ALIGN="center">1:00 p.m.</TD></TR>

</TABLE>

In this example I've added the "BGCOLOR" Tag inside of the <TH> Tags.

This allows my "Box" to have different Colors at the same time!

**School Events.**
Event	Date	Time
Prom	02/04/2010	6:00 p.m.
After Prom Breakfast	02/05/2010	10:00 a.m.
Graduation Ceramony	02/22/2010	1:00 p.m.

Copy and Paste the HTML Code for the "Box" into your "TestBed" and play around with the Code.
Change the "Text", "Table Border", "Cellspacing", "Cellpadding" and change some of the URLs used.

Click here to use the "Online TestBed".

<TABLE BORDER="2" CELLPADDING="8" CELLSPACING="8"
ALIGN="center">

<CAPTION>
Favorite Websites</CAPTION>

<TR>
<TH>Resources</TH>
<TH>Games</TH>
<TH>Videos</TH></TR>

<TR>
<TD ALIGN="center">
<A HREF="http://www.bravenet.com">Bravenet</A></TD>

<TD ALIGN="center">
<A HREF="http://www.pogo.com">Pogo</A></TD>

<TD ALIGN="center">
<A HREF="http://www.youtube.com">YouTube</A></TD></TR>

<TR>
<TD ALIGN="center">
<A HREF="http://www.searchbliss.com">Search Bliss</A></TD>
<TD ALIGN="center">
<A HREF="http://www.miniclip.com">Mini Clip</A></TD>
<TD ALIGN="center">
<A HREF="http://www.yahoo.com">Yahoo</A></TD></TR>

<TR>
<TD ALIGN="center">
<A HREF="http://www.w3schools.com">W3 Schools</A></TD>
<TD ALIGN="center">
<A HREF="http://www.shockwave.com">Shockwave</A></TD>
<TD ALIGN="center">
<A HREF="http://www.mtv.com">MTV</A></TD></TR>

</TABLE>

HTML Code used for this "Box" example

In this example I've added clickable HyperLinks.

This will allow visitors to visit other URL's!

**Website Menu**
Resources	Games	Videos
Bravenet	Pogo	YouTube
Search Bliss	Mini Clip	Yahoo
W3 Schools	Shockwave	MTV

Example "Box" # 2 ~ Adding a Link

HTML Box # 2

Web Page Layouts

Home

If the text on this page is overlapping, adjust the Text Size
on your Browser Window to a smaller size. This will correct the problem.