Managing Web Layout
×
Home Courses Community Support
Managing Web Layout

Now you have created index page, contact page and folders. Let's start to develop web pages' layout.

Web Page Layout is a combination of Header, Footer and body of that particular page. As you know PHP allow us to use same code many times. So to save time, we will create header and footer in separate file and will call them on all pages. By doing so you will not have to write same code on every page. You will just call those files whereever required.

enlightenedDownload complete code from website's download section. Here I'll explain only important things to do.


Create header.php using below code:

<!DOCTYPE html>
<html>   
<body>
    <div>
        <img src="logo.png" title="MyWeb">
    </div>
    <div>
	<ul>
	<li <a href="#"><span>Home</span></a></li>
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Contact</span></a></li>
	</ul>
    </div>
</body>
</html>

 

The above code is written in HTML only. We need to apply CSS on it, to make the header. After finishing with CSS the header will look like this-
 

 

In same way the footer.php was created. Now to use header and footer on any page page, we need to include that in required page. Use below code to include header and footer.
 

<html>
<body>
<?php include header.php ?>
<div> <!-- Body Part of Web Page --> </div>
<?php include footer.php ?>
</body>
</html>


Now for every page we will have to work on the body part of that page. Header and footer has been set.

 

← Preview

Managing Index File and Web Folders

Next →

Build Web Pages

NOTES

Our mission is to provide highly effective and quality education via innovative solutions. Geeksdemy look forward to bridge the gap between in-demand technology and academics in order to deliver innovative, easy, interesting and affordable learning across the Globe.

Courses

  • Python
  • Game Development with Unity 3D
  • Arduino
  • PCB & Circuit Designing
  • Robotics and Embedded C
  • 8051/8052 Embedded Systems
  • QuadCopter & UAV
  • MATLAB with Robotics
  • Raspberry Pi
Learn On the Go!
Get the Android App
Get the iOS App