Basic Website Design Layout and Accessibility

Written By: Grant Mc

- 14 Mar 2006 -

Description: This hypothetical project walks you through planning and designing a website with HTML and CSS.

  1. Website Planning and Design
  2. Writing the Style Sheet
  3. Basic HTML

Basic HTML

First, let’s get the first basic piece of html out the way



</span></span>              <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">


 

Now in between the title tags put the name of you website for example.



</span></span>Made-up Website<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">


 

This will display on the top bar of the browser and on the browser button at the bottom start bar.

Click Here To View A Screenshot

Now we need to call in the style sheet as shown here:



        </span></span>Made-up Website<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">
         name="description"
        content="Made-up Website" />
         http-equiv="Content-Type" content="text/html;
        charset=ISO-8859-1" />
         rel="stylesheet" href="dmc.css" />


 

Now let’s create the header div.



        </span></span>Made-up Website<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">
         name="description"
        content="Made-up Website" />
         http-equiv="Content-Type" content="text/html;
        charset=ISO-8859-1" />
         rel="stylesheet" href="dmc.css" />


         class="heading"> />Made-up Website

Now the left div which will be our navigation bar.



        </span></span>dumfries music club<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">
         name="description"
        content="dumfries music club" />
         http-equiv="Content-Type" content="text/html;
        charset=ISO-8859-1" />
         rel="stylesheet" href="dmc.css" />


         class="heading"> />Made-up Website
class="left"> Home /> href="contact us.htm">contact us /> href="make.htm">make your own site /> href="join.htm">join us! /> href="links.htm">links /> href="news.htm">news />

Now we have got a style sheet to sort out the look and feel the basic home page all we need is info on the home page but let's see how it look's so far.

Click Here To View A Screenshot

Now let's add the final touch to the website. Let’s add the right div to sum up this section of basic web design.



        </span></span>made-up website<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">
         name="description"
        content="made-up website" />
         http-equiv="Content-Type" content="text/html;
        charset=ISO-8859-1" />
         rel="stylesheet" href="dmc.css" />


         class="heading"> />made-up website
class="left"> about us /> href="pageone.htm">contact us /> href="pagetwo.htm">programme /> href="pagethree.htm">join us! /> href="pagefour.htm">links /> href="pagesix.htm">news /> class="right"> welcome, /> to the made-up website /> /> the website doesn’t say much so there is no point in reading on /> bla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla /> bla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla /> /> bla bla blabla bla blabla bla blabla bla bla /> src="pix/dmclogo2.jpg" width="150" height="150"> />

REMEMBER TO SAVE THIS AS "INDEX.HTM"

Click Here To View A Screenshot

So that concludes the first section of basic web design by me, Grant McAllister!!

<< Previous