Cheap Web Hosting Services Review 

web hosting

Home  |  Top 5 Ranking  |  Top 5 Comparison Chart  |  Articles 

 

Top 5 >   BlueHost - HostGator - IX Web Hosting - iPage - InterServer






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:

  • A logo image for your header.

  • Button images for your navigation bar that are about 150 px wide and 60 px high if you are using five of them.

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:

Share/Bookmark

A beginner's guide to web hosting

Web hosting features explained

How to choose a right web hosting service?

How to select a web server and web server platform?

How to transfer your web site to a new web hosting service?

Should you choose free web page hosting?

How to create a website?

Multiple domain hosting - should you consider?

 

cheap web hosting services Back to Home Cheap Web Hosting
 

Home  ::  Bookmark Us  ::  Terms of Use  ::  Site Map  ::  About Us  ::  Contact Us 

Disclosure: We are a professional review site that receives compensation from the companies whose products we review. We test each product thoroughly and give high marks to only the very best. We are independently owned and the opinions expressed here are our own.

Copyright © 2004 - 2017 Lowest-Price-Web-Hosting.com. All Rights Reserved.