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, minus photo URL's ~ you must provide your own,
copy and paste the code into a "Notepad" file on your computer.  Remember to save Notepad file with the "File Extension of:
--> .HTML
Place Text, Picture, or anything you like here.
Change colors used in box too!
<CENTER>
<TABLE BORDER="10"
CELLSPACING="0"
CELLPADDING="0"
COLS="1"
WIDTH="400">

<TR>
<TD BGCOLOR="#000099">

<CENTER>
<TABLE BORDER="0"
CELLSPACING="8"
CELLPADDING="8"
COLS="1"
WIDTH="95%"
BGCOLOR="#FFFFFF">

<TR VALIGN="top">
<TD VALIGN="top"
BGCOLOR="#FFFFFF">
<FONT FACE="Arial, Helvetica">
<FONT SIZE="+1">

Place Text, Picture, or anything you like here.<BR>
Change colors used in box too!

</FONT></FONT></TD>
</TR>
</TABLE></CENTER>
</TD>
</TR>
</TABLE>
</CENTER>
HTML Code used for "Box" example
What do the HTML Tags in this Code stand for? 
The Tags used to create the above, and below "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.

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

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

COLS ~ Describes the number of columns that you want in your Box.

WIDTH ~ Describes the width of your Box.

<TR> ~ Stands for "Table Row".

<TD> ~ Stands for "Table Data".

BGCOLOR ~ The background color of your Box.

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

VALIGN ~ Position of tag.  Chocies are:  Top, Bottom, Right, Left or Center.

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

Click here to use the "Online TestBed".

Example "Box"
Example "Box"
<CENTER>
<TABLE BORDER="10"
CELLSPACING="0"
CELLPADDING="0"
COLS="1"
WIDTH="600">

<TR>
<TD BGCOLOR="#000099">

<CENTER>
<TABLE BORDER="0"
CELLSPACING="8"
CELLPADDING="8"
COLS="1"
WIDTH="95%"
BGCOLOR="#FFFFFF">

<TR VALIGN="top">
<TD VALIGN="top"
BGCOLOR="#FFFFFF">
<FONT FACE="Arial, Helvetica">
<FONT SIZE="+1">

<IMG SRC="http://img.villagephotos.com./p/2005-4/985966/family.gif" width="500" height="150"><BR>

</FONT></FONT></TD>
</TR>
</TABLE></CENTER>
</TD>
</TR>
</TABLE>
</CENTER>
This "Box" will change size automatically to fit the size of a Picture, Graphic that you place inside of it.
HTML Code for the above "Box" is located below.
In this example, I changed what is inside the "Box". 
Instead of Text, this time I wanted a Graphic. 

In order for me to get the Graphic to show up on my web page,
I had to upload the graphic to my Photo Hosting Service Account. 
I use
VillagePhotos.com.   
You can sign up for a FREE Account and store 400 pictures/ graphics there. 

You must have a photo hosting account in order to have graphics/ pictures inserted onto your web page.

Copy and Paste the HTML Code for the "Box" into your "TestBed" and play around with the Code.  Change the "TD BGCOLOR". 

If you have a photo hosting service try inserting one of your own photos into the HTML Code.  

Click here to use the "Online TestBed".

Your Photo Hosting service will provide you with the HTML Code for every picture you have stored there.  Simply copy & paste your pictures HTML Code into the "Box" HTML Code.


Under each Photo that is stored with my Photo Hosting Service,
I am given 3 options.

1. To pull a Text Link for this picture onto my web page.  (called URL)

2.  To pull the actual picture onto my web page. (called HTML)

3.  To pull a smaller version of my photo ( a Thumb Nail ) onto my web page.  (called Thumb)

In the above "Box" example,
I used option #2.
<CENTER>
<TABLE BORDER="10"
CELLSPACING="0"
CELLPADDING="0"
COLS="1"
WIDTH="300">

<TR>
<TD BGCOLOR="#000099">

<CENTER>
<TABLE BORDER="0"
CELLSPACING="8"
CELLPADDING="8"
COLS="1"
WIDTH="95%"
BGCOLOR="#FFFFFF">

<TR VALIGN="top">
<TD VALIGN="top"
BGCOLOR="#FFFFFF">
<FONT FACE="Arial, Helvetica">
<FONT SIZE="+1">

<A HREF="http://www.treasurelandonline.com/testbed.html">
Click here to view my Vacation Photos!</A>

</FONT></FONT></TD>
</TR>
</TABLE></CENTER>
</TD>
</TR>
</TABLE>
</CENTER>
HTML Code used for "Box"
HTML Code used for "Box"
Copy and Paste the HTML Code for the "Box" into your "TestBed" and play around with the Code. 
Change the "ALIGN" value to another option.  Choices are "bottom", "center" and "top".

In order to create a link that leads from one of your web pages to another, you have to have your HTML Documents already uploaded to your "Web Hosting Service".
We haven't talked about how to upload your "Notepad files, also known as your "HTML Documents" to your "Web Hosting Service" yet.
Step one would be to get yourself a "Web Hosting Service".  You should be able to get a FREE one from your ISP ( your Internet Service Provider). 
If you can't get one with your ISP, search the Internet for "FREE Web Hosting". 

Click here to use the "Online TestBed".



The above link inside the "Box" is just an example, there are no vacation photos.
In this example, I changed what is inside the "Box". 
Instead of a Graphic, this time I wanted a "clickable" Link. 

In order for me to get the Text to be "Clickable", ( a hyperlink)
I had to create a Hyperlink that leads to the web page I want my visitors to go to after they click on the link.



Click here to view my Vacation Photos!
Back to Top
Example "Box"
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.
Menu
Home

Words & Definitions

Head Section

HTML Box #1

HTML Box #2

Horizontal Rule Tag

More Tags

More Tags #2

Online Test Bed


Web Layout HTML Info

Example of above

Web Layout HTML + Tables Info

Example of above

Web Layout HTML + 1 DIV Tag Info

Example of above

Web Layout HTML + 3 DIV Tag Info

Example of above




HTMLBliss Members Only
coming soon



HTMLBliss Online
Chat Room
coming soon


HTMLBliss Tip Archives
coming soon


FREE Webmaster Tools