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><FONT FACE="tahoma, arial"><FONT SIZE="3">
<B>School Events.</B></CAPTION>

<TR>
<TH><FONT FACE="tahoma, arial"><FONT SIZE="3">Event</TH>
<TH><FONT FACE="tahoma, arial"><FONT SIZE="3">Date</TH>
<TH><FONT FACE="tahoma, arial"><FONT SIZE="3">Time</TH></TR>

<TR>
<TD ALIGN="center"><FONT FACE="tahoma, arial"><FONT SIZE="3">Prom</TD>
<TD ALIGN="center"><FONT FACE="tahoma, arial"><FONT SIZE="3">02/04/2010</TD>
<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">6:00 p.m.</TD></TR>

<TR>
<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">After Prom Breakfast</TD>
<TD ALIGN="center"><FONT FACE="tahoma, arial"><FONT SIZE="3">02/05/2010</TD>
<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">10:00 a.m.</TD></TR>

<TR>
<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">Graduation Ceramony</TD>
<TD ALIGN="center"><FONT FACE="tahoma, arial"><FONT SIZE="3">02/22/2010</TD>
<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">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.

<NOBR> ~ 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"
Back to Top
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><FONT FACE="tahoma, arial"><FONT SIZE="3">
<B>School Events.</B></CAPTION>

<TR>
<TH><FONT FACE="tahoma, arial"><FONT SIZE="3">Event</TH>
<TH><FONT FACE="tahoma, arial"><FONT SIZE="3">Date</TH>
<TH><FONT FACE="tahoma, arial"><FONT SIZE="3">Time</TH></TR>

<TR>
<TD ALIGN="center"><FONT FACE="tahoma, arial"><FONT SIZE="3">Prom</TD>
<TD ALIGN="center"><FONT FACE="tahoma, arial"><FONT SIZE="3">02/04/2010</TD>
<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">6:00 p.m.</TD></TR>

<TR>
<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">After Prom Breakfast</TD>
<TD ALIGN="center"><FONT FACE="tahoma, arial"><FONT SIZE="3">02/05/2010</TD>
<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">10:00 a.m.</TD></TR>

<TR>
<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">Graduation Ceramony</TD>
<TD ALIGN="center"><FONT FACE="tahoma, arial"><FONT SIZE="3">02/22/2010</TD>
<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">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><FONT FACE="tahoma, arial"><FONT SIZE="3">
<B>School Events.</B></CAPTION>

<TR>
<TH BGCOLOR="gray"><FONT FACE="tahoma, arial"><FONT SIZE="3">Event</TH>
<TH BGCOLOR="yellow"><FONT FACE="tahoma, arial"><FONT SIZE="3">Date</TH>
<TH BGCOLOR="green"><FONT FACE="tahoma, arial"><FONT SIZE="3">Time</TH></TR>

<TR>
<TD ALIGN="center"><FONT FACE="tahoma, arial"><FONT SIZE="3">Prom</TD>
<TD ALIGN="center"><FONT FACE="tahoma, arial"><FONT SIZE="3">02/04/2010</TD>
<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">6:00 p.m.</TD></TR>

<TR>
<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">After Prom Breakfast</TD>
<TD ALIGN="center"><FONT FACE="tahoma, arial"><FONT SIZE="3">02/05/2010</TD>
<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">10:00 a.m.</TD></TR>

<TR>
<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">Graduation Ceramony</TD>
<TD ALIGN="center"><FONT FACE="tahoma, arial"><FONT SIZE="3">02/22/2010</TD>
<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">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" 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><FONT FACE="tahoma, arial"><FONT SIZE="3">
<B>Favorite Websites</B></CAPTION>

<TR>
<TH><FONT FACE="tahoma, arial"><FONT SIZE="3">Resources</TH>
<TH><FONT FACE="tahoma, arial"><FONT SIZE="3">Games</TH>
<TH><FONT FACE="tahoma, arial"><FONT SIZE="3">Videos</TH></TR>

<TR>
<TD ALIGN="center"><FONT FACE="tahoma, arial"><FONT SIZE="3">
<A HREF="http://www.bravenet.com">Bravenet</A></TD>

<TD ALIGN="center"><FONT FACE="tahoma, arial"><FONT SIZE="3">
<A HREF="http://www.pogo.com">Pogo</A></TD>

<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">
<A HREF="http://www.youtube.com">YouTube</A></TD></TR>

<TR>
<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">
<A HREF="http://www.searchbliss.com">Search Bliss</A></TD>
<TD ALIGN="center"><FONT FACE="tahoma, arial"><FONT SIZE="3">
<A HREF="http://www.miniclip.com">Mini Clip</A></TD>
<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">
<A HREF="http://www.yahoo.com">Yahoo</A></TD></TR>

<TR>
<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">
<A HREF="http://www.w3schools.com">W3 Schools</A></TD>
<TD ALIGN="center"><FONT FACE="tahoma, arial"><FONT SIZE="3">
<A HREF="http://www.shockwave.com">Shockwave</A></TD>
<TD ALIGN="center"><NOBR><FONT FACE="tahoma, arial"><FONT SIZE="3">
<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.