|
|
PHP
Tutorial
This tutorial
is for PHP/HTML. How to make a basic PHP Website layout. You need to have
a good knowledge of HTML to understand this tutorial.
The first thing
you need to know about PHP, is that in order for it to work, your webhost
has to support PHP. You can find out by checking with your host - alot of
free hosts (Geocities, Angelfire, Fateback, etc), dont allow PHP. I currently
use 100webspace.com, which do support PHP. Generally, you have to use
a paid webspace provider in order to gain access to special services like
PHP.
A basic layout
in HTML looks like this:
<html>
<head>
<title>Syndarys: Just Your Average Slytherin Student</title>
</head>
<body>
<p>Your content goes here</p>
</body>
</html>
In PHP, it's
basically the same. However, it is seperated into three different files: header.inc,
content.php, and footer.inc - all text based, like HTML documents.
header.inc contains
the following HTML:
<html>
<head>
<title>Syndarys: Just Your Average Slytherin Student</title>
</head>
<body>
footer.inc contains
the following HTML:
</body>
</html>
And content.php,
contains this:
<?php
include('header.inc');
if(!$_SERVER['QUERY_STRING']) { ?>
<p>Your content goes here</p>
<? }
include('footer.inc'); ?>
You can put absolutely
anything in the content section. Images, links, information - you name it.
Now, if you're
learning PHP, you probably want to make a layout slightly more complicated
than the one above. That's fine - and encouraged! - but the information contained
within the header.inc and footer.inc changed slightly. The following HTML
is that of a website I'm currently developing (ssshh). The HTML in blue
goes in the header.inc file, red
is for the footer.inc file, and green
is for the content.php.
<html>
<head>
<title>Purely Palin</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body
bgcolor="#FFFFFF" text="#000000" leftmargin="0"
topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellpadding="0"
height="100" cellspacing="0">
<tr>
<td background="top.jpg" height="100"><img
src="topspacer.jpg" width="5" height="100"></td>
</tr>
</table>
<table width="800" border="0" cellpadding="5"
height="100%" cellspacing="0">
<tr align="left" valign="top">
<td width="105" height="100%"><a href="main.php">Home</a><br>
<br>
<b>Menu</b><br>
<a href="bio.php">Biography</a><br>
<a href="film.php">Filmography</a><br>
<a href="quotes.php">Quotes</a><br>
<a href="photos.php">Photos</a><br>
<a href="wallpaper.php">Wallpaper</a><br>
<a href="icons.html">Icons</a><br>
<a href="contact.php">Contact</a><br>
<a href="siteinfo.php">Info</a><br>
<a href="links.php">Links</a><br>
<a href="credits.php">Credits</a><br>
</td>
<td width="575" height="100%">
<p><b>Content</b></p>
<p><b>Icons</b></p>
<p>These are 100x100 icons, made for journal sites such as <a href="http://www.livejournal.com"
target="_blank">Livejournal.com</a>,
aswell as bulletin boards, and whatever other uses you can devise for
them! Please give credit to 'Purely Palin' if using them.</p>
<p align="center"><img src="icons/mikecar.png"
width="100" height="100">
<img src="icons/mikecar2.png" width="100" height="100">
<img src="icons/mikecat.png" width="100" height="100">
<img src="icons/mikeconfused.png" width="100" height="100">
<img src="icons/mikeconfused2.png" width="100" height="100"></p>
<p align="center"><img src="icons/mikefire.png"
width="100" height="100">
<img src="icons/mikefire2.png" width="100" height="100">
<img src="icons/mikehammock.png" width="100" height="100">
<img src="icons/mikehammock2.png" width="100" height="100">
<img src="icons/mikekip.png" width="100" height="100"></p>
<p align="center"><img src="icons/mikekip2.png"
width="100" height="100">
<img src="icons/mikeleaning.png" width="100" height="100">
<img src="icons/mikeleaning2.png" width="100" height="100">
<img src="icons/mikemountains.png" width="100" height="100">
<img src="icons/mikemountains2.png" width="100" height="100"></p>
<p align="center"><img src="icons/mikepose.png"
width="100" height="100">
<img src="icons/mikepose2.png" width="100" height="100">
<img src="icons/mikereading.png" width="100" height="100">
<img src="icons/mikereading2.png" width="100" height="100">
<img src="icons/mikeview.png" width="100" height="100"></p>
<p align="center"><img src="icons/mikewindow.png"
width="100" height="100">
<img src="icons/mikewindow2.png" width="100" height="100">
<img src="icons/mikewindow3.png" width="100" height="100">
<img src="icons/palinfire.png" width="100" height="100">
<img src="icons/palinsitting.png" width="100" height="100"></p>
</td>
<td width="110" height="100%" align="right">
<p><b>Affiliates</b></p>
<p align="right"><a href="http://syndarys.sinfree.net"
target="_blank"><img src="links/syndarysaffili.gif"
width="100" height="35" border="0" alt="[Syndarys]"></a></p>
</td>
</tr>
<tr align="left" valign="top">
<td height="22" width="101">
<div align="center"> </div>
</td>
<td height="22" width="568">
<div align="center"><b>Disclaimer</b>: this
site is not affiliated with
Michael Palin, nor endorsed in any way by him, <br>
or anyone involved with him, or his TV/Film career.<br>
All content, unless otherwise stated, is © 2004, Syndarys.</div>
</td>
<td height="22" width="91"> </td>
</tr>
</table>
</body>
</html>
Another key thing
to remember when designing PHP layouts is to make them as font tag free as
possible - no <font size="1" color="#000000" face ="verdana">
tags. Use your CSS file to set your font tags as much as you possibly can.
This will help with changing your layouts. Using PHP layouts enables you to
change the entire layout of a site by only editing three files - header.inc,
footer.inc, and your CSS file.
Good luck!
|
|
