... you delivered exactly what you promised and in record time.
When I first started writing the PiciScan site out from scratch in Notepad, I would have the header and footer of each page within the body of the individual file I was editing. This was great, I thought, all I had to do was copy the code for the header from the first file, say the photo scanning file, and paste it into the top of each of all the other html files for the site. Well, it was great, until I started wanting to change the navigation, modify the header in some way, or even add a new page to the site. All the html files then needed editing to accomodate these alterations, and, as the site grew, this process took longer and longer. There had to be an easier way.
There was. All I had to do was save all my html files as php files and instead of the code that renders the header, include the following code:
<?php include 'php/header.php'; ?>
Well, that was nearly all I had to do. The code that I had removed had to be placed in a new file, called
header.php and placed in a folder on the server, called
The above code also works if you want to keep the footer consistent across the site. It would look like this:
<?php include 'php/footer.php'; ?>
and be placed in the relevant place in your new php files. Now, in future, all you will need to do if you ever want to modify the header or the footer is modify these two files and upload them to the
php folder on your server.
Firstly, let's take a look at what would go into, for example, a new php file called
new-page.php. There are certain parts of an html file that are essential, to have it render properly, and there are certain parts of the
<head> that you will want to be unique to each page of your site. So,
new-page.php might start out looking like this:
<!DOCTYPE html> <html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <title>Your Unique Web Page Title</title> <meta name="Description" content="Your Unique Web Page Description"> <?php include 'php/header.php'; ?> <h1>Your Unique Web Page Heading</h1> <p>Hello World!</p>
header.php file can include referencing a common css file, as well as anything else that appears in the
<head> and the opening
<link href="/css/styles.css" rel="stylesheet" type="text/css"> <link rel="shortcut icon" href="/images/favicon.ico"> </head> <body> <div class="header"> <div class="nav"> <ul> <li><a href="/">Home</a></li> <li><a href="page-one">Page One</a></li> <li><a href="page-two">Page Two</a></li> <li><a href="page-three">Page Three</a></li> </ul> </div> </div> <div class="main-content">
As a browser reads your
new-page.php it will get to the
<?php include 'php/header.php'; ?> and insert the contents of your
header.php file. It is another round trip for the browser to fetch this other file, but it will save you a lot of work.
Posted: 24 March 2016
I first came across box-sizing: border-box when it cropped up in a temporary colleague's CSS. I found it pretty annoying when I picked up work that he'd started as it seemed to get in the way. This was because, as I said in a previous post on margin ...