HTML / PHP: which parts of an HTML chapter can be saved in a separate file
I am new to HTML and hope someone can help me with this.
I am trying to create a website where the code for each page will be saved as a separate php file. Since all of these pages use the same document titleand include , I would like to remove as much of these pages as possible and keep it in a separate file ( header.php
) which I can include in PHP.
My current chapter looks like this, and since I have EVERYTHING on all pages, this is saved in a separate header.php file and then just use <?php include "header.php"; ?>
on separate pages.
Can anyone tell me which parts of this should remain on separate pages for proper setup, and if anything needs to be changed or added here?
Note. jQuery and JS are included separately in the footer.
My PHP (header file):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="John Doe" />
<meta name="description" content="Created: 2015-06" />
<base href="http://www.MyURL.com" target="_self" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="includes/styles.css" />
<!-- CSS - Font Awesome -->
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<title>My Page</title>
</head>
<body>
<div class="wrapper">
<!-- ... -->
source to share
Your main header file (top_head.php):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<?php if(isset($page_author)){ ?>
<meta name="author" content="<?php echo $page_author; ?>" />
<?php } ?>
<?php if(isset($page_description)){ ?>
<meta name="description" content="Created: 2015-06" />
<?php } ?>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="includes/styles.css" />
<!-- CSS - Font Awesome -->
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<title><?php echo $page_title; ?></title>
Your current header file:
<?php
$page_title = 'Hello';
$page_description = 'This is a beautiful description';
?>
<?php include("top_head.php"); ?>
</head>
<body>
<div class="wrapper">
<!-- ... -->
source to share
This should give you a general idea ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="John Doe" />
<meta name="description" content="Created: 2015-06" />
<base href="http://www.MyURL.com" target="_self" />
<!--
Your paths need to relative to the websites root directory or the full
URL else they may not work depending on where the file is located.
-->
<link rel="stylesheet" type="text/css" href="/includes/styles.css" />
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<!--
This line just echos the title if one has been set or a default string
if the title hasn't been set. You will need to ensure every page that
includes this file sets the title before including this file. You may
also want to take this approach with other values.
-->
<title><?php echo isset($title) ? $title : 'Default Title'; ?></title>
</head>
<body>
<div class="wrapper">
source to share
The section of code you mentioned in the question can be named header.php
and further included on every page where it is required.
Besides
- Header - header.php
- The main content - main-content.php - will be specific to every page from your site.
- Footer - footer.php - this can also be made normal - and then included on every page.
- Besides, you can also have some more php files which can have navigation or any common content blocks.
An example page could be:
<?php
include 'header.php'
/*either add here the content or include further php files*/
include 'about-us.php'
include 'footer.php'
?>
source to share
You are right, the parts that are shared between all pages should be placed in a separate php file, this will greatly improve your life when you need to maintain a site (immagine add a stylesheet or library to every page of your site after a while ...).
To help SEO, you should include a title and possibly some meta tag that depends on the page.
Also look carefully if you have other parts that are repeated on every page, for example, in the left or right panel or in a specific widget (for example, a banner image or something like that)
source to share