How to Create a Dynamic Website with PHP and HTML
While there are several ways to create a dynamic website, this article is
for those of you that only want to use HTML and PHP. A dynamic website
is simply an interactive site or one that uses information from a
database. Here is what you are going to need to make a dynamic website
with PHP and HTML:
To begin with, you will have to make your file a .php file and not an
HTML file. Whenever you use PHP, the file extension has to be .php or
the PHP parser will not recognize the code. The PHP parser will
recognize both PHP and HTML. Now you are ready to start your page. Here
is what the top of your index.php page is going to look like:
<?php
include ("header.php");
?>
What we are doing is putting our page header in a PHP include file so
that every page will have the same header and we will only have to
change the contents of one file to make changes to the header of every
page on the site. Now here is what should be included in the "header.php"
file:
<html>
<head>
<title>Your site's name here
</title>
</head>
<body>
<table width="800" align="center" border="10">
<tr><td>
<center><img src="Movie7blkbg.GIF" border="0"></center><br>
<input type="image" src="home.jpg" name="b1" onMouseOver="this.src='home2.jpg'"
onMouseOut="this.src='home.jpg'" alt="Home" onClick="javascript:
location='index.php'">
The above code places your header logo and the navigation bar for every
page on your site. First you will have to alter the image names and the
alt text. The first “img” tag you come to contains the image for the
header and the next 3 image names will be for your first button. You
will have three image calls for each button. In the above file, the
header image is a GIF and the buttons are all JPG, so that is how you
can identify them in the code if you are confused. To make the code
easier to understand, I have only included the first button of the
navigation menu. You will need to repeat that process for each button.
The onMouseOver and onMouseOut events allow for the image to change when
you hover the cursor over the button. You need two images for each
button, one image of the button plain and one of the button highlighted
for the mouse over effect. If you do not wish to have a mouse over
effect, then simply take out those calls. The alt text causes a small
pop up window with the text that you specify to pop up when you hover
the mouse over the button image. It is suggested that you use the alt
text even though it will work without it because alt text is very
helpful for people that can not see the pictures. Then the final
component of our button is the call to the JavaScript Location action,
which makes the button work as a link and tells the browser where to go
when the button is clicked on. You will need to change the file name in
parenthesis after the location call to the file name of your choice.
Now that you know what is in the included PHP file and you have the top
of your index.php page from above, all we need is to insert the content
for your page and then you will need to close the tags that were opened
in the header file. You need to be aware that you left your html, body,
table, td, and tr tags open in the include, so you can close them at the
bottom of the page after you insert your content. To do this, just enter
the following little bit of code after your content:
</td></tr></table></body></html>
That's it you have the template for the rest of your site. One example
of a truly dynamic website is a site where users will be signing up and
logging in to access the content. This is where you will need a database
and PHP to handle the html form's input. All of the your html forms can
be inserted in the template as it was created above. All you will have
to do is make the separate PHP files that the forms will send the data
to. If you need to learn how to do the registration and log in scripts,
I believe that the best tutorials for learning those scripts are found
on About.com and you can find code explanations at W3schools.com. I made
my first log in script by using those two resources, so you should be
able to as well. Here is the
actual link to the pages that have the log in script tutorial.
For your dynamic PHP and HTML site, you may choose to use CSS to style
it with. CSS can be inserted right in the header.php page without any
trouble. The PHP parser will recognize CSS as well. I recommend using
CSS if you want a lot of different fonts and colors.
<?php include (“header.php”); ?>
</td></tr></table></body></html>
…and your new dynamic page's content will simply go between those two
lines. Nice and neat! To make changes to the way your site looks, you
only have one file to alter, “header.php”.
In conclusion, your new dynamic PHP and HTML site will have have four
main components on the home page. They are: the header.php file at the
top of the page in a php include statement, the logo and navigation bar
after that and then your pages content followed by the five closing tags
that were opened in the include. Of course the content is up to you and
is not covered in this article, but the home page is a landing page or
where users will go to when they click on a link to your site. The
content for the home page should catch the users attention.
Dynamic
sites are great for catching a person's attention. It is often wise to
use an animated logo for the header graphic. I find that animated gifs
are easily created with drawing programs such as Corel Draw, which is
what I use. Another attention grabber is a form. Some dynamic web site
designers will have a simple one field form included in their banner ad
at the top of the page that asks a simple question and when the user
types in the answer, they are transported to your site to be persuaded
to do whatever it is that you want them to do. You can use PHP and html
to accomplish this as well.
What makes this way of creating dynamic websites a good choice for how
to create a dynamic web site is that the template used to create new
pages for your site will be as simple as:
|
