Joomla! How-To's: Templates

How to Create a Basic Template - Step 2: HTML Markup

September 25, 2006 | by Cory

Article Index
How to Create a Basic Template
Step 1: Design
Step 2: HTML Markup
Step 3: CSS
Step 4: Joomlafy
Steps 5-9
Sample Template Files
All Pages

Page 3 of 7

Step 2: HTML Markup

Now that you have designed the look of your template, it is time to write some XHTML markup in your 'index.php' file. Because this is a simple 2-column design with no headers and no footers, I am only using 2 DIV elemenets for my site's layout. Here is the XHTML markup:

 
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<title>RedSpheresRule.com</title>
 
<link href="css/template_css.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body id="bodybg">
 
<div id="sidebar">
 
  <h1 id="sitetitle"><a href="index.php">RedSpheresRule.com</a></h1>
  <h2 id="siteslogan">Your source for red spheres</h2>
 
  <!-- sidebar modules go here -->
 
</div><!-- end sidebar -->
 
<div id="mainbar">
 
  <!-- mainBody goes here -->
 
</div><!-- end mainbar -->
 
</body>
</html>

Notice that I have put comments as placeholders for where I will load the modules and the mainBody for the template. Because we have not written any of the CSS code, this is what the resulting html page would look like:

Red Spheres Template