· Learn HTML

· Design 1 (Building a Page)

· Design 2 (Fine Tuning)

· Design 3 (A Sample Page)

· Design 4 (A Page Analysis)

· Design 5 (Mobile Web Pages)



Design Links
 ·HTML Tags
 
 ·Image Sites
 
 ·Validators
 
 ·Web Hosts
 
 ·Design Sites
 
 ·CSS Sites
 
 ·Javascript
 
 ·Misc Sites


Help Pages
 ·F A Q
 
 ·Page Layout
 
 ·Custom Tables
 
 ·Page Navigation
 
 ·Templates
 
 ·HTML Tricks 1
 
 ·HTML Tricks 2
 
 ·Image Help
 
 ·Glossary
 
 ·Design Quiz
 
 ·Ask Questions


Tutorials
 ·Tutorial 1
 
 ·Tutorial 2
 
 ·Craigslist Tutorial
 
 ·eCommerce Tutorial
 
 ·Page Videos
 
 ·Form Mail
 
 ·Sound Tutorial
 

Website Design 3
A Sample Page Build

computer     On this page we will Create a SAMPLE Page For You...

     First we will Gather Our Content Information

Let's say that our page is about furniture, and we want to tell you all about some of the items that we have found in our travels, and how we describe them...

So first we get a piece of PAPER and jot down a list of all the pieces of furniture and write a little bit about each...

     Next We Draw A Sketch Of Our Page

We get a piece of PAPER and sketch out how we want the page to look... including a Top Section, a Navigation Method (to allow readers to go to more of our pages), a Main Content Section (where we will show you pictures of our furniture as well as explain a little about the pieces... and perhaps a Bottom Section (where we will give you more info on our travels, personal data etc.) NOTE: You can create any sort of sketch and Sections that you like... BUT keep in mind that you must LAYOUT the page accordingly (using HTML Responsive Web Design)... so it is WISE to "keep it simple"... until you become more familiar with HTML RWD...

NOTE: What we refer to as Sections in the HTML Source Code, are actually HTML Divisions (<div>)...

     Next We Choose An HTML Layout
for beginners we are using HTML RWD for layout

We use our HTML RWD Design Technique which lays out the WHOLE PAGE in a HTML Divisions... and we have chosen a TEMPLATE DESIGN (we will use TEMPLATE #3) that employs a Top Section (for a Heading), a Left Side Section (for More Links to other pages in our total collection of pages) and a Right Side Section (for the Content that shows our furniture and description text)... and A Bottom Section (for more information)...

You can View The Layout Here ... you of course can choose any other HTML RWD Layout to suit your page design needs! The best way to design a page from scratch, is to type all the Layout HTML RWD Code into your text editor... then type into each Section, your content text, links, images etc.

     So in the Text Editor (we use Word Pad) we typed this HTML RWD Code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>My Furniture Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<div class="toprow">
<div class="col-12" style="background-color: #ff9999;text-align:center;">
Put Your Top Page Info Here </div>
</div>

<div class="secondrow">
<div class="col-3" style="background-color: #ffcc99;text-align:center;">
Put Your Left Page Info Here </div>

<div class="col-9" style="background-color: #ffff99;text-align:center;">
Put Your Main Page Info Here </div>
</div>

<div class="bottomrow">
<div class="col-12" style="background-color: white;text-align:center;">
Put Your Bottom Page Info Here </div>
</div>

</body>
</html>

Now within that Code, you of course can put any Code that you want in the Top Section to suit your page design needs! (The same is true for all the Sections)... We will simply put <h1>Hello, Welcome To My Furniture Page</h1>

Next we placed this Code into the Left Side Section: <a href="http://davmagic.com /firstpage.html">Page One</a><hr noshade width="85%">
<a href="http://davmagic.com /secondpage.html">Page Two</a>

Next we placed this into the Right Side Section: Here are a few pictures of our Furniture...
<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td align="center" valign="top"><img src="http://davmagic.com/images /mychair1.jpg" width="150" height="150" alt="chair"><br>A nice Chair</td><td align="center" valign="top"><img src="http://davmagic.com/images /mychair2.jpg" width="150" height="150" alt="chair2"><br>Another nice Chair</td></tr></table>

Finally we placed this code into the Bottom Section: <span style="color:red;">Thank You Very Much!</span>

     So here is the final HTML Source Code for our web page (NOTE: You of course will replace the "http://davmagic.com" with the actual URL for your site!):

<!DOCTYPE html>
<html lang="en">
<head>
<title>My Furniture Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<div class="toprow">
<div class="col-12" style="background-color: #ff9999;text-align:center;margin-bottom:0em;">
Hello, Welcome To My Furniture Page </div>
</div>

<div class="secondrow">
<div class="col-3" style="background-color: #ffcc99;text-align:center;margin-top:0em;margin-bottom:0em;">
<a href="http://davmagic.com /firstpage.html">Page One</a><hr noshade width="85%">
<a href="http://davmagic.com /secondpage.html">Page Two</a>
</div>

<div class="col-9" style="background-color: #ffff99;text-align:center;margin-top:0em;">
Here are a few pictures of our Furniture...
<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td align="center" valign="top"><img src="http://davmagic.com/images /mychair1.jpg" width="150" height="150" alt="chair"><br>A nice Chair</td><td align="center" valign="top"><img src="http://davmagic.com/images /mychair2.jpg" width="150" height="150" alt="chair2"><br>Another nice Chair</td></tr></table>
</div>
</div>

<div class="bottomrow">
<div class="col-12" style="background-color: white;text-align:center;margin-top:0em;">
<span style="color:red;">Thank You Very Much!</span> </div>
</div>

</body>
</html>

NOTICE How we had to add the CSS Margin Codes to insure the divisions lined up correctly!

     So here is what the page looks like in the browser (after we Saved It as an HTML Document [samplepage.html], and FTP'ed it to our own web host here at Davmagic.com): Click Here

NOTE: Of course the Navigation Links will not go to the proper place, since this is Only a Sample Page (without any other pages connected to it) ... AND the Images will NOT show since we have no images in the directory for that URL...

NOTE: You can see how we used HTML Tables to place the two Images "side by side"...

     Take some time to STUDY the CODE and learn how it works to build the page... use your Text Editor and copy the source code into it and play around a bit to see how you can change things or add things, and this will help you to understand how to build a page...

    This concludes our Sample Page discussion, and we hope that you have learned a little bit more from it, about how to Build A Webpage...

Continue with this design series...use the "Design 4" link below...

Design 2---Design 4