• Bookmark
  • Print this page
  • Digg
  • Del.icio.us
  • Reddit
  • Yahoo!
  • Google
  • Furl
  • Ma.gnolia
  • NewsVine

How to Build an Effective Website Using PHP CSS and XHTML

Logo XHMTL, CSS, PHP First, this guide assumes basic knowledge of building websites and isn't for people who are just learning HTML. However, if you've set up any kind of website, or even just messed around with templates on Xanga or MySpace, then you'll learn something from this guide.

PHP, CSS and (X)HTML are critical for making an effective, easy to modify, and standards compliant website. Using PHP, CSS, and XHTML allows you spend more time working on content, rather than having to change each page because you wanted to add another item to the main navigation. It also keeps all of your web pages on the same design, providing identity and consistency to your site.

Why XHTML and What is it?

XHTML is the successor to HTML according to the World Wide Web Consortium which sets HTML, CSS, and XHTML standards, among other things.

XHTML was developed as a cleaner, stricter, and more compliant web language for the future. XHTML will allow your website to be viewed easily from many different browsers and devices and is, for the most part, backward compatible with HTML.

Some changes that most often affect people who are used to coding in HTML, which are required for XHTML:

1. Frames are no longer allowed.

2. CSS, Cascading Style Sheets, are required.

3. All code elements are in lowercase, <A HREF="http://www.donutey.com/">Donutey</ A> becomes <a href="http://www.donutey.com/">Donutey</ a>.

4. Elements that do not have end tags such as the line break, <br>, and image tags, must be self terminating: <br> becomes <br />.

5. All elements must have end tags.

6. Alternative text is required for images: <img src="images/computer.png" alt="Picture of Computer" width="180" height="180" />.

This is by no means all of the changes, but these are most apparent. A good way to see if your pages are XHTML valid is to go to W3C and check to see if your pages are Valid XHTML 1.1.

Here is an example of a valid XHTML page using various common tags taken from the BYOC Guide:


<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN "
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html>
<head>
<title>Donutey | Build Your Own Computer: Why?</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="en" />
<link rel="stylesheet" type="text/css" href="filename.css" />
</head>
<body>
<h1>Build Your Own Computer</h1>
<p>
<img src="images/computer.png" style="float: left;" alt="Picture of a Computer" width="180" height="180" />
Building your own computer...
</p>
</body>
</html>

To learn more about XHTML go to the W3C XHTML Guide.

Why CSS and What is it?

CSS is short for Cascading Style Sheets, and is used to centrally format XHTML or HTML pages on a website. Instead of having font tags, backgrounds, and colors within each individual page, with CSS you can manage all of this from a central file. CSS pages are possibly the most complex and most useful addition to a website. Although CSS can be complex, a CSS file with basic formatting is simple to make. CSS is required for a valid XHTML 1.1 Strict page.

To use CSS you first make the .css file, then on all of the pages you want to be affected by the CSS page insert:
<link rel="stylesheet" type="text/css" href="filename.css" />


Here's an example of a relatively basic CSS file, you can also view this site's CSS page:

body
{
background-color: #DEDEDE;
}

a img
{
border: 0;
}

a:link
{
font: 13.5px Arial, Verdana, sans-serif;
color: #09037b;
text-decoration: none;
}

a:visited {
color: #6c0caf;
text-decoration: none;
font: 13.5px Arial, Verdana, sans-serif;
}

a:hover
{
color: #5598f7;
text-decoration: none;
font: 13.5px Arial, Verdana, sans-serif;
}

h1
{
background-color: white;
font-family: Arial, Verdana, sans-serif;
color: black;
font-size: 19px;
font-weight: bold;
text-indent: 18px;
}

h2
{
background-color: white;
font-family: Arial, Verdana, sans-serif;
color: black;
font-size: 15px;
font-weight: bold;
text-indent: 18px;
}

h3
{
background-color: white;
background: url(bar.jpg) center left;
font-family: Arial, Verdana, sans-serif;
color: black;
font-size: 15px;
font-weight: bold;
text-indent: 18px;
}
p
{
margin: 0px;
background-color: white;
color: black;
font-size: 13.5px;
font-family: Verdana, Arial, sans-serif;
text-indent: 1cm;
}


To learn more about CSS go to the W3C CSS Guide.

Why PHP and What is it?

PHP stands for PHP: Hypertext Preprocessor, and is a server side programming language used extensively on the Internet. PHP can do many things, but for this guide it is relatively basic, the PHP require function. In order to take advantage of PHP, the server your website is hosted on must support it, and your pages must be saved as .php. (Although their are workarounds to have PHP in .html or .htm files.) You can check if your server supports PHP place <? phpinfo(); ?> in a page saved .php, then when you upload and access that file, it will come up detailing all of the information about your specific PHP install.

The PHP require function allows your web pages to reference outside files for things such as menus, advertisements, and footers. By doing so, you can edit your menu, ads, footers, etc. from individual pages. Thus to change your main menu, all you have to do is add another link in the "menu.inc" file, instead of manually editing every single page.

How does this all work? First create a text file with the HTML or XHTML code for the item you want, for these purposes a menu. Then save this file as menu.inc. Then on a content page (such as article.php), add <?php require("menu.inc"); ?>, when the server looks at the article.php page it will insert the menu.inc code into it where the PHP include is located.

If you were to look at the page source of a site made using PHP includes, you would not see any includes. This is because it is a server side language. Here's an example of a page with PHP includes:

<?php require("type.inc"); ?>
Donutey | The Place for Technology Guides and Reviews
<?php require("menu.inc"); ?>
<h1>Welcome | Bienvenido | Het welkom</h1>
<p>Welcome to Donutey, a technology website focused on guides, reviews, and news. We hope you follow us as we continue to update and grow over the next months and, hopefully, years.

<br /><br /> If you want to view the old "A Donut Lives Here" site, it can be acessed <a href="http://www.donutey.com/indexold.htm"?>here</a>. It may not be fully functional, however, and any pages found missing in the old site are available in newer versions on this site.<p>
<?php require("footer.inc"); ?>

The "type.inc" file holds the page "DOCTYPE" and various meta information, it ends with an open <title> tag. The file "menu.inc" closes the tag </ title> and thus the title that shows up for the page is "Donutey | The Place for Technology Guides and Reviews". It also includes the menu files for the main menu and the sidebar menu. The "footer.inc" file includes the footer and copyright/copyleft information.

Below can view the "type.inc", "menu.inc", and "footer.inc" files for my website:

type.inc
menu.inc
footer.inc

To learn more about PHP visit the PHP Group's PHP Tutorial.

Kevin C. May 6th 2006 kcas88@gmail.com

Minor Edits - May 6th 2006
Updated - May 27th 2005
Updated - July 6th 2006

<Back to Guides

『What we need is Progress with an escape hatch.』 - John Updike