CODEWITHSUNDEEP
phphtmlwebstructure
iHaveAQuestion
iHaveAQuestion

Reputation: 301

Clarification on header and footer with .html and .php

I have been building a website in PHP. I am confused about the method or techniques to get the pages to display properly.

My main point of entry is index.html. From here, the user can click to navigate. I want all 12 pages to have the same header information. I tried using tags in Dreamweaver and then just tags.

?? I am confused about the difference between using tags and using a file called header.php

FOLLOW UP: To suggested responses. I edited the code as suggested
Now when I 'view in browser' I get 'Server Not Found'.

Note. I am using DreamweaverCC:

Document Root /library/WebServer/Documents

header.php:

<!doctype html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
     <h1>General Header Information for Top of Each Page</h1>

index.html

<?php include_once ('header2.php');  ?>
<!doctype html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>index.php</title>
<link href="file:////Library/WebServer/Documents/webDevelopDWsites        /boilerplate.css"   rel="stylesheet" type="text/css">
<link href="file:///Library/WebServer/Documents/webDevelopDWsites/indexFourSquare.css" rel="stylesheet" type="text/css">

<script src="file:///Library/WebServer/Documents/webDevelopDWsites/respond.min.js">  </script>
</head>
<body>

<?php include 'header2.php';  ?>
    <div class="gridContainer clearfix">
    <div id="div1" class="fluid">
    <header id="header" class="fluid">Web Development by myName</header>

    <div id="Square1" class="fluid"><a href="file:///Library/WebServer/Documents /webDevelopDWsitesimages/Square1.jpg"><img src="images/Square1.jpg"  alt=""/></a></div>

    <div id="Square2" class="fluid"><a href="file:///Library/WebServer/Documents/webDevelopDWsites/Square2.html"><img src="images/Square2.jpg"  alt=""/></a></div>

     <div id="Square3" class="fluid"><a href="file:///Library/WebServer/Documents/webDevelopDWsites/Square3.html"><img src="images/Square3.jpg"  alt=""/></a></div>

     <div id="Square4" class="fluid"><a href="file:///Library/WebServer/Documents/webDevelopDWsites/Square4.html"><img src="images/Square4.jpg"  alt=""/></a></div>

     <div id="siteMap" class="fluid">siteMap</div>
    </div>
</div>
</body>
</html>

Do I include header.php in the code of each of these other pages? I did do this but it did not work.

So I have tried this: I created an index.php and copied all of the index.html code into index.php and also added this at the top of the code.

<?php include 'header.php';  ?>

When I use 'view in browser' launching index.html:

When I click on the images to navigate to the other pages, it works:

When I click on index.php:

Upvotes: 3

Views: 747

Answers (1)

AyB
AyB

Reputation: 11665

Usually, a website is broken into 3 parts:

enter image description here

The header and footer follow all the pages, it's ONLY the between that changes. So on your header.php, you will have:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>headerForFourSquares
</title>
</head>
<body>    
        <h1>General Header Information for Top of Each Page.</h1>

That's it, no closing the <body> tags here.

Now in your index.php, you would do:

<?php include_once('header.php'); ?>

//all your index content here

<?php include_once('footer.php'); ?>

And finally footer.php:

</body>
</html>

That's the way it works. For each of your other pages, you should be including the header and footer like above.

Your Index file has to be with .php extension. Header and footer file can be of .html extension if they have no PHP code.

You say index.html is not going to execute any php code but you do not explain why.

When you have PHP code in your .html file, When the browser is opening a .html file which contains PHP code, it's not expecting any PHP code to be present, and thus does not interpret it. Although, you can force it to interpret PHP following here but this in itself is a bad practice as conflict may arise among other languages like <?xml since PHP also begins with <?.

And the reason why you need to run it through localhost and not by opening the file path through browser is because while HTML is a client-side script, it can run freely without any server but PHP is a server-side script and will be interpreted only by a server, that's why we use web server packages such as xampp, wamp etc. to test locally.

Upvotes: 3

Related Questions