The Links below will show you some examples of Web Page Layouts along with Notes about each example.
With each example Link you click on you will be able to see the HTML Code used to produce the web page by viewing the Page Source. 
(click View and then click Page Source) 

You could even copy and paste the HTML Code into a Notepad File and name & save it for future use.
You can change any Code or modify it to suit your needs.  You can add more Code, delete Code. 
Remember with HTML you are free to design a web page exactly as you want it to appear.  You don't have to conform to another's vision of what a web page should look like.

Since some of the examples go beyond the basics of HTML you will need to know some new Words/Definitions/Tags.

When you are creating HTML
you can add "Comments" to your Code. Comments are used as little Notes written to yourself to help identify certain sections of your HTML.  Comments will not show up on your web page if the HTML Code is written correctly.  Comments are read if someone views your "Page Source".

<!-- Write your comment here -->


To write this code:
Type your first Angle Bracket, then the Exclamation Point and then type two dashes, <!-- then press the spacebar.
Next you would type your comment and then hit the spacebar.
Next you type two dashes and the last Angle Bracket.
-->




2.  To see a web page layout using One HTML Table, Click Here.

<TABLE> </TABLE> stands for Start a Table and Close a Table.

<TH> stands for Table Heading

<TR> stands for Table Row

<TD> stands for Table Data

<TR BGCOLOR="green"> Example of adding color to a background

<TABLE BORDER="10"> Example of adding a Border to your Table.

<TABLE BACKGROUND="URL ADDRESS Goes Here.jpg"> 
Example of adding a photo to a Background.  Simply have your Background image stored at your Photo Hosting Service and then pull HTML Code for picture into your web page HTML Code.  The Image will repeat itself (Tile) to fill in the Background
of your Web Page.

Example of changing the size of a Table.  Copy Code below and paste into the Online Testbed and play around with the code.

<TABLE BORDER="7" WIDTH="550" HEIGHT="900"> 
<TR>
<TH>Example Text</TH></TR>
Online Testbed
3.  To see a web page layout using One set of HTML Division Tags Click Here.

Using
<DIV> </DIV> tags consists of using CSS ( Cascading Style Sheets )  along with a 2 step process to make Code work. This is more advanced then Basic HTML.
Division Tags cannot be used without
<STYLE> </STYLE> tags.

<STYLE> </STYLE> stands for Start & Close a Style Sheet.

DIV.nameyouchoose   ~ stands for identity of this specific DIV tag.  This tag will go into the <HEAD> section. Can be named anything you want.

DIV.nameyouchoose { background: #CCFFFF; font-style; bold } ~
shows adding a background and font style to above Tag.  Also uses
{ } (Braces)  instead of " " quotation marks.
When you place this code into your
<HEAD> section, you are defining the background color and the font-style for the specific DIV Tag named, nameyouchose

Another change you will notice with the above example is that instead of using < > Angle Brackets around each HTML Command, you can seperate each instruction by using the ; Semi-colon.  As long as instructions are applying to the same
DIV Tag, you can sepearte the instructions with the semi-colon. 
Example:
DIV.nameyouchoose { background: #CCFFF; font-style: bold; font-face: Tahoma, arial; }


Example of Step One:  Must identify DIV Tag with a specific name, any name you choose. 
Remember the name given, you will need to use it again in Step 2.

<HTML>

<HEAD>

<TITLE>Using Division Tags</TITLE>

<STYLE>

DIV.welcomenote { background: #CCFFF; font-style: bold; font-face: Tahoma, arial; }

</STYLE>
</HEAD>


Some rules about CSS and DIV Tags

You will use quotation marks, some of the time, and not at all at other times.  Braces
{ } are used some of the time too.

With Styles the
: (colon) is the same as in HTML using, the = (equals) sign.  But with CSS & DIV Tags in the <HEAD> Section, you use the colon.  With Styles think of the : (colon) meaning equals used in Basic HTML.


STEP TWO

Step two consists of calling on the DIV.nameyouchoose listed in the <HEAD> section. 
You will call on the HTML Code in the <HEAD> to become active in the <BODY> section. 
Specifically where you want the <DIV> tag to show up on your web page.


<BODY>

<DIV CLASS="nameyouchose">

<H1>Welcome to my Website</H1>

<P>Thank You for stopping by our website today!<br>
We are fully committed to offering you a vast inventory of items for sale. <BR>
We pride ourselves in offering you Quality Items along with Quality Customer Care! <BR>
We gladly accept PayPal as Payment.<BR>
PayPal is a FREE service and the safest way to send money over the Internet.<BR>
We will never sell our customers email address or any other personal information to any other party.
</P>

<BR><BR><BR><BR>

</DIV>


Let's put the two steps together now.  Copy and Paste the code below into the Online Testbed and play around with the HTML Code.


<HTML>

<HEAD>

<TITLE>
Web Page using CSS & DIV Tags</TITLE>

<STYLE>

DIV.topofpage { background: #99CCFF; font-style: bold; font-face: Tahoma, Arial; }

</STYLE>

</HEAD>

<BODY>

<DIV CLASS="topofpage"><BR><BR>

<H1><center>Welcome to this Website</center></H1>
<center><P>
T
hank You for stopping by our website today!<BR>
We are fully committed to offering  you a vast inventory of items for sale.
<BR>
We pride ourselves in offering you Quality Items along with Quality Customer Care!
<BR>
We gladly accept PayPal as Payment. 
<BR>PayPal is a FREE service and the safest way to send money over the Internet.</P>
<BR><BR><BR><BR>

</DIV>
Online Testbed
4.  To see another web page layout using several HTML Division Tags Click Here.


In this Example, several Division Tags are used together. 
Again, this is a Two step process for each individual <DIV> Tag used.

Copy and Paste the code below into the Online Testbed and play around with the HTML Code.

<HTML>

<HEAD>

<TITLE>
Web Page using CSS & DIV Tags</TITLE>

<STYLE>

DIV.topofpage { background: #99CCFF; font-style: bold; font-face: Tahoma, Arial;}

DIV.midleft { background: #FFFFCC; font-style: bold; font-face: Tahoma, Arial; width: 200; height: 200;}

DIV.midright { background: Ivory; font-style: normal; font-face: Comic Sans, Arial; width: 400; height: 200; }

</STYLE>

</HEAD>

<BODY>

<DIV CLASS="topofpage"><BR><BR>

<H1><center>Welcome to this Website</center></H1>
<center><P>
T
hank You for stopping by our website today!<BR>
We are fully committed to offering  you a vast inventory of items for sale.
<BR>
We pride ourselves in offering you Quality Items along with Quality Customer Care!
<BR>
We gladly accept PayPal as Payment. 
<BR>PayPal is a FREE service and the safest way to send money over the Internet.</P>
<BR><BR><BR><BR>

</DIV>

<DIV CLASS="midleft"><BR><BR>
<H2>Menu</H2>
<A HREF="http://www.animationfactory.com">Animation Factory </A>
<BR><BR>
<A HREF="http://www.treasurelandonline.com/webdesclass.html"> Class Website </A>
<BR><BR><BR><BR>

</DIV>


<DIV CLASS="midright"><BR><BR>
<H2> Products for sale~ </H2>
<A HREF="http://img.villagephotos.com/p/2005-4/985966/LHTPR-salt.jpg">
<IMG SRC="http://thumbs.villagephotos.com/15135271.jpg"></A>

</DIV>

Online Testbed
Topic ~  Web Page Layouts
Order of Example Layouts
1.  Created with HTML
3.  Created with HTML, CSS & Divisions (1 DIV tag used)
2.  Created with HTML & Tables (1 Table used)
1.  To see a web page layout using HTML,  Click Here.

Copy & Paste the Code below into the Online Testbed and play around with the HTML Code.


<HTML>

<HEAD>

<TITLE>
Web Page created with HTML</TITLE>

</HEAD>

<BODY BGCOLOR="gold" BORDER="4">

<CENTER><H3><FONT FACE="Comic Sans, Arial">Welcome to this website! Place a Banner Here&nbsp;&nbsp;&nbsp
<img src="http://img.villagephotos.com/p/2005-4/985966/120250447796243174.gif" ALT="Graphic that reads Daily Drawing"></H3>

<HR SIZE="10" COLOR="red">

<BR><BR><P ALIGN="center">You can add your main content, photos, gadgets & more here.</P>


<P align="left"><img src="http://img.villagephotos.com/p/2005-4/985966/classmenu.jpg" width="181" height="83" BORDER="7" ALT="Graphic that reads Menu"></P>

<P align="left"><A HREF="http://www.treasurelandonline.com">Treasure Land Online</A></P>

<P align="left"><A HREF="http://www.youtube.com">You Tube Videos</A></P>

<P align
="left"><A HREF="http://www.fatfingers.com">Ebay Search Tool</A></P>

<BR><BR><BR><BR><BR><BR><BR><BR><BR>

<P align="bottom">&#169; &nbsp; &nbsp; 2008 All Rights Reserved</P>





Online Testbed


Next New Tag ~
ALT  (Alternative Text)
This tag is used inside the <img src> photo tags.  Alt is intended for the visually impaired web site visitor. 
This will enable them to "hear" that there is a graphic on the web page and a description of what the photo is when their computer reads the web page to them. 
Another thing it does ~ In the event your Photo/Graphic doesn't appear on your web page,
for one reason or another, Information about the missing graphic will be provided. 
Example of use:

<IMG SRC="URL.jpg" ALT="Image of a Florida Sunset">


Next New Tag ~ BORDER (add a border to Graphics)
This tag is used inside the <IMG SRC> photo tags.  You can adjust the Border number which indicates Size of the Border.  Example of use:

<IMG SRC="URL.jpg" BORDER="7">


Back to Top
4.  Created with HTML, CSS & Divisions (3 DIV tags used)
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


If the text on this page is overlapping, adujust the Text Size
on your Browser Window to a smaller size. This will correct the problem.
Copyright       2008  HTMLBliss.com
©