How to Create a Website using PHP

May 19, 2021 / By / Leave a Comment

Creating a website is really interesting and fun loving task. Whether you have a small website or large website, you need some basic knowledge of PHP, CSS, HTML, Java Script and JQuery.

If you don’t have good command on these languages, you can still create your own website using this complete tutorial. We assume that you have some basic knowledge of PHP & CSS programming languages as previously said.

In this tutorial, we will show you how you can easily create a website using PHP.

Step-1:

Create a folder and name it “my_first_php_website”.

Step-2:

Create following folders in your “my_first_php_website” folder.

“images”, “includes”

Step-3:

Create following folders in “includes” folder.

“css”, “js”

Step-4:

Create following files in “my_first_php_website” folder.

-> “index.php”, “header.php”, “footer.php”, “sidebar.php”, “nav.php”, “404.php”, “about.php”, “functions.php”

Create following file in “css” folder.

-> “style.css”

Put your website logo in “images” folder.

-> “my_website_logo.png”

Step-5:

Now follow step by step tutorial to create your first website using PHP.

Step by Step Guide for Creating a Website using PHP

1) Setup folders and files structures

Just create the same structure as shown in below snapshot and previously described in Step-1, 2, 3 & 4.

How to Create a Website using PHP

Following are the files and folders in my_first_php_website folder that are required to run a website.

Here index.php is the main and first file for our PHP website.

How to Create a Website using PHP

2) Create a sample code for the website

Now, choose your favorite PHP editor and open index.php file. We will use following code for creating index.php file.

Once you become familiar with PHP & CSS, you may create your own code as per requirement.

Create “index.php” file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="includes/css/style.css" media="screen" />
<title>WebDesignerTricks First PHP Website</title>
</head>
  <body>
  <div id="wrapper">
<?php include('header.php'); ?>
<?php include('nav.php'); ?>

<div id="content">

<h1>Heading1 - Type here First Heading</h1>
<h2>Heading2 - Type here Second Heading</h2>
<h3>Heading3 - Type here Third Heading</h3>
<h4>Heading4 - Type here Fourth Heading</h4>
<h5>Heading5 - Type here Fifth Heading</h5>

<h3>First Paragraph</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

<h3>Second Paragraph</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

<h3>Third Paragraph</h3>

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

</div> <!-- end #content -->
<?php include('sidebar.php'); ?>
<?php include('footer.php'); ?>
        </div> <!-- End #wrapper -->
    </body>
</html>

Now we need to create some more files to complete “index.php” file. We have to add some links in nav area and some text in the content area, sidebar and footer.

Create “nav.php” file.

<div id="nav">

<a href="index.php">Home</a>
<a href="about.php">About Us</a>
<a href="contact.php">Contact US</a>

</div> <!-- end #nav -->

Create “header.php” file.

<?php include('functions.php'); ?>

<div id="header">
<a><img src="images/my_website_logo.png" alt="WebDesignerTricks logo" title="WebDesignerTricks First Website"/></a>
<h2><?php echo $heading ?></h2>

</div> <!-- end #header -->

Create “functions.php” file.

<?php

$heading='WebDesignerTricks First PHP Website';

$footer='Copyright &copy; 2014 WebDesignerTricks First PHP Website';

?>

Create “footer.php” file.

<?php include('functions.php'); ?>

<div id="footer">
    <p><?php echo $footer ?></p>
</div> <!-- end #footer -->

Create “sidebar.php” file.

<div id="sidebar">

<h3>Navigation-1</h3>
    <li><a href="index.php">Home</a></li>
    <li><a href="about.php">About Us</a></li>
    <li><a href="#">Contact Us</a></li>

<h3>Navigation-2</h3>
    <li><a href="#">First Link</a></li>
    <li><a href="#">Second Link</a></li>
    <li><a href="#">Third Link</a></li>

</div> <!-- end #sidebar -->

Just like above you can easily create “about.php” and “404.php” file.

We need to create a style.css file for decorating the website.

Create a “style.css” file.

/**
* GENERAL
----------------------------*/

body {
background-color:#f1f1f1;
font-family: Constantia, Georgia, "Times New Roman", Times, serif;
font-size: 15px;
color:#333;
margin:0;
padding:0;
}

#wrapper {
width:1020px;
background-color:#f8f8f8;
margin:0 auto;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}

#header {
width:1020px;
height:135px;
margin:0 auto;
margin-bottom:25px;
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
}

#header h2 {
font-family: Constantia, Georgia, "Times New Roman", Times, serif;
font-size: 18px;
padding:10px;
}

#nav {
width:1020px;
height:40px;
border-bottom:1px solid #ccc;
}

#nav a {
display:inline;
padding:10px;
text-decoration:none;
background-color:#f1f1f1;
}

#nav a:hover {
background-color:#C0C0C0;
height:80px;
}

#content {
width:685px;
float:left;
padding:10px;
}

#sidebar {
width:250px;
float:right;
margin-bottom:25px;
}

#sidebar a {
text-decoration:none;
}

#sidebar a:hover {
background-color:#C0C0C0;
height:80px;
}

#sidebar li {
list-style:none;
}

#footer {
clear:both;
width:1020px;
height:80px;
border-top:1px solid #ccc;
}

#footer p {
padding:10px;
}

Now after taking all the elements from different PHP files, the final HTML file should look like below one.

Following is the complete HTML file after adding all the elements from PHP files.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="includes/css/style.css" media="screen" />
<title>WebDesignerTricks First PHP Website</title>
</head>
    <body>
        <div id="wrapper">
   <div id="header">
    <a><img src="images/my_website_logo.png" alt="WebDesignerTricks logo" title="WebDesignerTricks First Website"/></a>
    <h2>WebDesignerTricks First PHP Website</h2>

  </div> <!-- end #header -->
<div id="nav">

    <a href="index.php">Home</a>
    <a href="about.php">About Us</a>
    <a href="contact.php">Contact US</a>
    
</div> <!-- end #nav -->

<div id="content">

<h1>Heading1 - Type here First Heading</h1>
<h2>Heading2 - Type here Second Heading</h2>
<h3>Heading3 - Type here Third Heading</h3>
<h4>Heading4 - Type here Fourth Heading</h4>
<h5>Heading5 - Type here Fifth Heading</h5>

<h3>First Paragraph</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

<h3>Second Paragraph</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

<h3>Third Paragraph</h3>

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

</div> <!-- end #content -->
<div id="sidebar">

<h3>Navigation-1</h3>
    <li><a href="index.php">Home</a></li>
    <li><a href="about.php">About Us</a></li>
    <li><a href="#">Contact Us</a></li>

<h3>Navigation-2</h3>
    <li><a href="#">First Link</a></li>
    <li><a href="#">Second Link</a></li>
    <li><a href="#">Third Link</a></li>

</div> <!-- end #sidebar -->
<div id="footer">
    <p>Copyright &copy; 2014 <a href="http://webdesignertricks.com/">WebDesignerTricks First PHP Website</a></p>
</div> <!-- end #footer -->
        </div> <!-- End #wrapper -->
    </body>
</html>

Following is the complete PHP file after adding all the elements from PHP files.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="includes/css/style.css" media="screen" />
<title>WebDesignerTricks First PHP Website</title>
</head>
  <body>
  <div id="wrapper">
<?php include('header.php'); ?>
<?php include('nav.php'); ?>

<div id="content">

<h1>Heading1 - Type here First Heading</h1>
<h2>Heading2 - Type here Second Heading</h2>
<h3>Heading3 - Type here Third Heading</h3>
<h4>Heading4 - Type here Fourth Heading</h4>
<h5>Heading5 - Type here Fifth Heading</h5>

<h3>First Paragraph</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

<h3>Second Paragraph</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

<h3>Third Paragraph</h3>

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

</div> <!-- end #content -->
<?php include('sidebar.php'); ?>
<?php include('footer.php'); ?>
        </div> <!-- End #wrapper -->
    </body>
</html>

Must Read:

How to Create a Website

I hope you liked this article, please share your thoughts and feedbacks in comment section.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
Scroll to Top