I have been attempting to have includes as a part of my website for about 2 weeks now. Throughout multiple questions and long research I have figured out that php is the best way to go. I started with trying Server side includes in the html comment way, then I went to php and researched all of the different extensions needed for the include to work and so on. I had downloaded MAMP for the mac knowing that it would work with includes. I tried again and again with similar code with php and for whatever reason it did not work. Whether it was thenewboston on youtube or php's manual I had no success.
Finally, I came upon http://www.w3schools.com/php/php_includes.asp . I had saved their code into a folder and ran it on MAMP, it magically worked. I thought if I implemented this into my website it would work. Again, no success. So I'm asking you for help.
The Code:
Footer: (footer.php)
<?php echo'<div class ="footer">
<p>Contact Us! <br> @allwaterpolo</p>
<a href="#"><img src ="img/Facebook_Png_01.png" class="facebook" id="FaceBook Link" /> </a>
<a href="#"><img src ="img/Uiconstock-Socialmedia-Instagram.ico" class="instagram" id="Instagram Link" /> </a>
<a href="#"><img src ="img/Twitter_Logo_Hd_Png_03.png" class="twitter" id="Twitter Link" /> </a>
<a href="#"><img src ="img/Youtube_icon.png" class="youtube" id="YouTube Link" /> </a>
<div class="aboutus">
<a href ="htmlfiles/aboutUs.php">About <br>Us</a>
</div>
<div class= copyright>
Copyright © 2016<script>new Date().getFullYear()>2016&&document.write("-"+new Date().getFullYear());</script>, <br> All Water Polo. All rights reserved
</div>
</div> ';?>
Header:(header.php)
<?php echo'<div class ="header">
<h1>The Best Sport</h1>
<h1 class="sitetitle">AllWaterPolo</h1>
<img src ="img/51wmckj8p1l__sx300__1.png" class="wpball" alt="Water Polo Ball" />
<h2 class="homeScreenLink"> <a href ="index.html">Water Polo!</a></h2> </div>';?>
Navigation Bar:(navbar.php)
<?php echo'<div class="navBar">
<ul>
<li><a href ="htmlfiles/history.php">History
</a></li>
<li><a href ="htmlfiles/started.php"> Get Started</a></li>
<li><a href ="htmlfiles/positions.php">Positions</a></li>
<li><a href ="htmlfiles/rules.php">Rules</a></li>
<li><a href ="htmlfiles/nationalleague.php">National League</a></li>
<li> <a href ="htmlfiles/extras.php">Extras</a>
<ul>
<li><a href="#">Videos</a> </li>
<li><a href="#">Plays</a> </li>
<li><a href="#">TBA</a> </li>
</ul>
</li>
</ul>
</div>';?>
A Page In My Website: (aboutUs.php)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="main.js"></script>
<title> Water Polo, The Best Sport</title>
<link rel="icon" type="image/png" href="img/favicon.ico" />
</head>
<body>
<div class="wrapper">
<?php
include 'header.php' ;
?>
<?php
include 'navbar.php' ;
?>
<div class= "content">
</div>
<?php
include 'footer.php' ;
?>
</div>
</body>
</html>
(I'm not allowed to post direct images yet) Directory Structure
This time with the edition of the ../includes/header.php my page showed some hope. The only problem was that the includes did not access the css and image files and ended up with something like this: Sorry can't publish two pictures, but the new page had no css impact and looked like plain text.