Coding Your Web Site

Overview

Time to bring it home now. You know the principles of web development, the importance of organization and separation. You can markup and style your content using HTML and CSS. You are familiar with the template concept, as well as how to get your website to execute tasks using the PHP server-side programming language.

Creating Your Website Template.

web development template file

We will use our newfound HTML + CSS knowledge to create a nice website template or shell that will house all of our content data. Below is the complete code for a sample website shell. The simple structure is created in HTML div tags and it is stylized using an imported css file named: stock.css.

Click to view the Finished Template
Also available for view: CSS File.

The complete code is outlined as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
<head>
  <title>My Vacation Journal</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="stylesheet" type="text/css" href="stock.css" media="screen">
</head>
<body>

<div id="main">

  <div id="top">
	<span>My Vacation Journal</span>	
	<div id="links">
	  <a href="">Home</a>
	  <a href="">Alaska</a>
	  <a href="">California</a>
	  <a href="">France</a>
	  <a href="">Germany</a>	
	</div>
  </div>

  <div id="content">
	...the content will load here...
  </div>
	
  <div id="bottom">
	Bottom stuff like links or copyrights, etc.
  </div>
  
</div>

</body>

Creating Your Content.

HTML Markup language icon

As you can see, the website will outline my recent vacation trips. I have four in mind that I will write about: Alaska, California, France, and Germany. Once I've written my stories and gathered my pictures, it is time to format the content.

In the same way each product on Amazon.com is displayed with the product title, description, image, and reviews, all formatted uniformly, I will do the same for my content. I know I want my content to have:

A title
Start Date and End Date
Space for my trip description and stories
Space for various images.

After some planning I come up with some simple formatting which is shown below:

	<h1> <!-- title container -->
	  <span>4.10.08 - 4.20.08</span> 
	  My Trip to Alaska
	</h1>
		
	<div id="images"> <!-- image container-->
		<a href="test.gif"><img src="test.gif" alt="test image 1"></a>
		<a href="test.gif"><img src="test.gif" alt="test image 2"></a>
		<a href="test.gif"><img src="test.gif" alt="test image 3"></a>
		<a href="test.gif"><img src="test.gif" alt="test image 4"></a>
	</div>
	
	<div id="desc">	<!-- description container -->
	  Alaska was quite beautiful. We were able to connect with nature 
	  and forget about all of our superficial worries.
	  <p>
		Great you are here. You should have learned the principles of web development, 
		organization and separation. You should now be able to markup your 
		content using html. 
	  </p>
	  You should know how to style your content and website template with 
	  CSS, and you should know how to bring your website to life with 
	  server-side programming languages. 
	</div>

You will note that the three div containers correspond to all the elements I initially wanted to include in my content pages. The PRESENTATION for these elements is contained in the stock.css file. I will proceed to format all my content pages the same way, using the same structure and tags, and changing only the content. These files will be saved as .html CONTENT files.

Bringing Your Website to Life.

web development coding language

Now that we have the template file and the content files created, we need to combine them dynamically to create the various web pages.

To do this we will need our programming language to instruct the template file to load the various elements and display the resulting page.

Here is the PHP code that will include any specified page at the location this code exists:

<?php	
	include_once('home.html');	
?>

Note that the contents of home.html will be included wherever we place this PHP code. Since we have multiple content pages we need a way to specify which page we want to include. We use a variable to control which file we include:

<?php	
	$page = $_GET[p];  // define our variable
	include_once("$page".'.html');	
?>

Now whatever we set our variable $page to will return that page. You should be familiar with $_GET variables passed with a url query string after reading the PHP tutorial.

web development template file
Variable passed with url query string.

If you aren't please read this short PHP Query String Article. $_GET variables are an easy way to feed different values to your programming code through the url string.

The Finishing Touches.

So here is my finished template file, complete with the PHP code that will dynmically include the content pages right inside my "content" div container, as shown. You can see also that my navigation links have set the variable "p" to their respective content pages.

Also note that I have changed my PHP a little to include a logical IF statement. The code will check to see if $_GET[p] is set. If it is set then it will change the include file to include the p value. If it is not set, then it will simply load the default home.html file.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
<head>
  <title>My Vacation Journal</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="stylesheet" type="text/css" href="stock.css" media="screen">
</head>
<body>

<div id="main">

  <div id="top">
	<span>My Vacation Journal</span>	
	<div id="links">
	  <a href="/index.php">Home</a>
	  <a href="/index.php?p=alaska">Alaska</a>
	  <a href="/index.php?p=california">California</a>
	  <a href="/index.php?p=france">France</a>
	  <a href="/index.php?p=germany">Germany</a>	
	</div>
  </div>

  <div id="content">	
<?php	
	
	if(isset($_GET[p])){
		// if p variable is set in the url, dynamically include page.
		
		$page = $_GET[p];  // define our variable
		include_once("$page".'.html');
	}
	else{
		// if p is not set, load default page.
		
		include_once('home.html');
	}
?>
  </div>
	
  <div id="bottom">
	Bottom stuff like links or copyrights, etc.
  </div>
  
</div>

</body>

The Completed Website Example.

Click to view
The Finished Website Example

There you have it, an organized and structured website that separates the 3 core elements and makes managing your CONTENT, PRESENATION, and PROGRAMMING tasks, easy, and efficient.

The completed website directory can be downloaded here.

6kb zip file

Contents:

index.php - (master template)
stock.css - (master css file)
test.gif - (sample image)
home.html - (sample home page)
alaska.html - (sample content page)
california.html - (sample content page)
france.html - (sample content page)
germany.html - (sample content page)

This concludes version 1.0 of this web development tutorial.
We also cover How to Get Your Website Online

Please take 10 seconds to post a comment or some feedback, to help make this test a success. Thank you.

CONTINUE TO NEXT PAGE

Domains and Hosting

Discuss This Article

No need to sign up.
Post questions, comments, or feedback.
I will reply to every comment or question during beta.