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

<html>
<head>
<title>		</title>
</head>
<body>
 
</body>
</html>

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

<html>
<head>
<title>Made-up Website</title>
</head>
<body>
 
</body>
</html>

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:

<html>
<head>
	<title>Made-up Website</title>
	<meta name="description"
	content="Made-up Website" />
	<meta http-equiv="Content-Type" content="text/html&#59;
	charset=ISO-8859-1" />
	<link rel="stylesheet" href="dmc.css" />
</head>
<body>
 
</body>
</html>

Now let’s create the header div.

<html>
<head>
	<title>Made-up Website</title>
	<meta name="description"
	content="Made-up Website" />
	<meta http-equiv="Content-Type" content="text/html&#59;
	charset=ISO-8859-1" />
	<link rel="stylesheet" href="dmc.css" />
</head>
<body>
	<div class="heading"><br />Made-up Website</div>
</body>
</html>

Now the left div which will be our navigation bar.

<html>
<head>
	<title>dumfries music club</title>
	<meta name="description"
	content="dumfries music club" />
	<meta http-equiv="Content-Type" content="text/html&#59;
	charset=ISO-8859-1" />
	<link rel="stylesheet" href="dmc.css" />
</head>
<body>
	<div class="heading"><br />Made-up Website</div>
	<div class="left">
		Home<br />
		<a href="contact us.htm">contact us</a><br />
		<a href="make.htm">make your own site</a><br />
		<a href="join.htm">join us!</a><br />
		<a href="links.htm">links</a><br />
		<a href="news.htm">news</a><br />
	</div>
</body>
</html>

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.

<html>
<head>
	<title>made-up website</title>
	<meta name="description"
	content="made-up website" />
	<meta http-equiv="Content-Type" content="text/html&#59;
	charset=ISO-8859-1" />
	<link rel="stylesheet" href="dmc.css" />
</head>
<body>
	<div class="heading"><br />made-up website</div>
	<div class="left">
		about us<br />
		<a href="pageone.htm">contact us</a><br />
		<a href="pagetwo.htm">programme</a><br />
		<a href="pagethree.htm">join us!</a><br />
		<a href="pagefour.htm">links</a><br />
		<a href="pagesix.htm">news</a><br />
	</div>
	<div class="right">
		welcome,
		<br />
		to the made-up website
		<br />
		<br />
		the website doesn’t say much so
		there is no point in reading on 
		<br />
		bla bla blabla bla blabla bla blabla
		bla blabla bla blabla bla bla
		<br />
		bla bla blabla bla blabla bla blabla
		bla blabla bla blabla bla bla
		<br />
		<br />
		bla bla blabla bla blabla bla blabla bla bla
		<br />	
		<img src="pix/dmclogo2.jpg"
		width="150" height="150">
		<br />
	</div>
</body>
</html>

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