Welcome to . Please login or sign up.

May 09, 2021, 03:50:05 PM

Login with username, password and session length

Shoutbox

Admin

2021 May 01 21:26:46
Registration for membership is open, once your registered you'll get full access to this site

Admin

2021 Apr 25 02:26:27
Creating a new Windows Application...

Admin

2021 Apr 23 21:14:10
 ;) new files added in downloads

Admin

2021 Apr 21 18:33:28
hCaptcha Installed!

Admin

2021 Apr 20 21:52:29
Matt's Web Browser is available for download.

Jump Menu

Jump Menu
Members
Stats
  • Total Posts: 547
  • Total Topics: 547
  • Online Today: 247
  • Online Ever: 247
  • (Today at 01:09:01 PM)
Users Online
Users: 0
Guests: 4
Total: 4

Recent

Header / Body / Footer and CSS

Started by Admin, April 27, 2021, 09:46:54 PM

Previous topic - Next topic
April 27, 2021, 09:46:54 PM Last Edit: May 07, 2021, 02:47:56 AM by Admin
I found a really nice PHP sample written by: Christian Cawley
Folder structure:

You can download this project from the link below:
https://www.livedezign.com/tmpimages/muobasicphpmaster.zip

This tutorial and download is for /intended to be ran on a web server
basicphp
html folder
html folder
header.html
body.html
footer.html
index.php
style.css
refer to images below for this file structure:
main folder

inside main folder

inside the html folder


Ready to move on to what is going on here?

First let us look at the index.php
Here we are looking at the file get contents that are located in the directory/ html, and also using the p tag to show copyright
Code
<?php echo file_get_contents("html/header.html"); ?>
<?php echo file_get_contents("html/body.html"); ?>
<?php echo file_get_contents("html/footer.html"); ?>
<p>Copyright © CM Cawley <?php echo date("Y"); ?></p>



Now we take a look at the style.css
Whats the style.css do for this example, This is how the php page will be displayed with colors and so on..
Code
body {
 width: 70%;
 margin: auto;
}

a:link {
  color: gray;
}

a:visited {
  color: green;
}

a:hover {
  color: rebeccapurple;
}

a:active {
  color: teal;
}

#navigation {
 
}

p {
  font-size: 120%;
  color: dimgray;
}

#contents {
 float: right;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  font-family: sans-serif;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to white on hover */
li a:hover {
  background-color: #fff;
}



heading on to the header.html file
The header is the upper most portion of this .php file, banners and menus normally reside here.
Code
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="description" contents="About CM Cawley Biography website in PHP">
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <header>
            <nav id="navigation">
                <ul>
                    <li><a href="index.php">Home</a></li>
                    <li><a href="about.php">About</a></li>
                    <li><a href="https://www.makeuseof.com/tag/author/ccawley/">MakeUseOf</a></li>
                </ul>
            </nav>
        </header>
        <div id="contents">


Onto the body.html
Code
<p>all of your content for the middle of your page will reside here</p>

lastly have a look at the footer.html
The footer.html is located at the bottom of this php file
Code
</div>
        <footer>
            Contact me on Twitter: <a href="https://www.twitter.com/TheGadgetMonkey">@TheGadgetMonkey</a>
        </footer>
    </body>
</html>
Webmaster, Administrator, Owner

Social Sharing