Website Design 3
A Sample Page Build

    On this page I will Create a SAMPLE Page For You...

     First I will Gather The Content Information

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

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

     Next I Draw A Sketch Of The Page

I get a piece of PAPER and sketch out how I want the page to look... including a Top Section, a Navigation Method (to allow readers to go to more of the pages), a Main Content Section (where I will show you pictures of the furniture as well as explain a little about the pieces... and perhaps a Bottom Section (where I will give you more info on my 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 I refer to as Sections in the HTML Source Code, are actually HTML Divisions (<div>)...

     Next I Choose An HTML Layout
for beginners I am using HTML RWD for layout

I use the HTML RWD Design Technique which lays out the WHOLE PAGE in a HTML Divisions... and I have chosen a TEMPLATE DESIGN (I will use TEMPLATE #3) that employs a Top Section (for a Heading), a Left Side Section (for More Links to other pages in the total collection of pages) and a Right Side Section (for the Content that shows the 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 (I use Word Pad) I typed this HTML RWD Code:

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)... I will simply put <h1>Hello, Welcome To My Furniture Page</h1>

Next I 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 I placed this into the Right Side Section: Here are a few pictures of the 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 I 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 the web page (NOTE: You of course will replace the "http://davmagic.com" with the actual URL for your site!):

NOTICE How I 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 I Saved It as an HTML Document [samplepage.html], and FTP'ed it to my 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 I have no images in the directory for that URL...

NOTE: You can see how I 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 the Sample Page discussion, and I hope that you have learned a little bit more from it, about how to Build A Webpage...