I'm making a website with multiple pages with About info, Projects, Events etc.
My first question is, how can I include my nav bar, header and footer to be in all of the html files without copying the full code for each of them?
My second question is, how should the html structure look in the separate header/footer files so I can include them in my pages html's?
If you mention PHP as a solution, please point me to some link/tutorial for the process.
If you use php files you could do something like this:
index.php:
<?
include("header.php");
?>
//page content
<?
include("footer.php")
?>
header.php:
<head>
//head
</head>
<body>
footer.php:
<footer>
//footer
</footer>
</body>
In the header.php you could put the tags etc.
In every page you could just include these files than
You can create specific files for header and footer and require them in the pages you need them.
require 'footer.php'
require 'header.php'
First you need to make three files navbar.php, header.php and footer.php which contains their code separately.
Now in your each web pages place the below code.
include('header.php'); //Your website header code will be load from header.php
include('navbar.php'); //Your website navbar code will be load from navbar.php
include('footer.php');//Your website footer code will be load from footer.php
You can do with AngularJS. If you do not want to use server side scripting
http://www.w3schools.com/angular/
<body ng-app="">
<div ng-include="'header.htm'"></div>
Your page goes here
</body>
do not forget to add AngularJS library or you can use cdn.
Related
I am making website and this website will have more than 20pages.
I am using my template to add a webpage. This template has header and footer, so I just add the body of new page.
But, what if I want to change navigation bar in the header, then I have to change all 20 pages that I already made to correct.
I want to know better way.
I read a book, and it says about "php include" function.
Should I use this function in the header and footer of each webpage to call header and footer file?
If I want to change the navigation bar in the header, all I can do is changing only one header file, then rest of website will be changed.
Is this correct way?
In this case, what do you do?
I am a beginner, so please advise me.
Thank you in advance.
You should build your website as following. The header.html would contain the navigation.
header.html
<!doctype html>
<html>
<head>
...
</head>
<body>
<nav>
...
</nav>
footer.html
<footer>
...
</footer>
</body>
</html>
page.php
<?php
require_once 'header.html';
?>
Your content goes here
<?php
require_once 'footer.html';
?>
You should use require_once so the header and footer will be imported only once per script and if the header or footer cant be found, the script will throw an exception and stop the "application".
"require_once" and "require" are language constructs and not functions. Therefore they should be written without "()" brackets!
Yes this is the correct way or you could just copy your header and footer code to every .html file (if you don't like PHP)
Yes, this is the correct way. Try to think of the DRY principle - don't repeat yourself. Elements of your web page that are common across multiple pages can be coded once, then called in. If you need to update these elements, you update them once and it affects all pages.
You then "include" these elements into your page, and the elements are self contained files. As a basic example you would have header.php
<html>
<head><!-- all of your head meta tags in here--></head>
<body>
<div id="header"><!--your header elements and top menu in here --></div>
and footer.php:
<div id="footer"><!-- your footer elements in here--></div>
</body>
</html>
Don't forget in both header and footer files you can then put dynamic code if you wish. Then for each of your pages you would simply call these files in using include, include_once, require or require_once
<?php
include('header.php');
//this is where your actual page content goes
include('footer.php');
?>
A very basic example, but hopefully that makes sense to you.
Correct.
If you include another php file it will calculate/ask for input/do output (whatever you do in the file) as part of your main file.
If you include a php file that has a function you can later call this function without it showing in your main file. (Saves space in your main file)
So your 20 pages may only need a few lines of body text and the rest is header and footer. This will make changes very easy
I've finished designing my website home page and I've now moved on the some of the other pages, I want my header and footer to appear the same on every page. I've tried this basic way of linking the same stylesheet that makes up my header/footer in the second HTML file (already used in the homepage):
<link rel="stylesheet" href="footer.css" type="text/css"/>
<link rel="stylesheet" href="header.css" type="text/css"/>
I now understand that this isn't going to work. Would a server-side scripting language be my best bet here? Something like PHP?
If so, would anyone be able to link me with an article on how I could do this in PHP, I presume with the
include
function?
Thanks.
You are currently only linking the css for the header and footer. If you want to include the html as the same, create two separate files header.php and footer.php, then include them into each webpage.
<?php include('path/to/header.php');?> // in the location you want the header in the page
<?php include('path/to/footer.php');?> // in the location you want the footer
Essentially, you're making partials and placing them wherever you want them
Suppose you have header that you want to include in all pages,
header.php
My header
now you can include it to other pages like this:
<?php
include "header.php";
?>
and do same for the footer!
Good luck!
Put the code for your header in a separate HTML file and then at the point in each page where you want it to appear use the following:
<?php include '../header.html'; ?>
Obviously put your own file path for the header file in there.
You have to create 2 others files : header.php & footer.php. Then you can include them in your others pages :
<?php
include "url/to/your/header.php";
include "url/to/your/footer.php";
?>
Example in a index.php :
<?php
include "views/header.php";
?>
// your content here html/php
<?php
include "views/footer.php";
?>
Create 2 files "header.html" and "footer.html" and include them at the top and the bottom of your php file.
<?php include("YourFile.html"); ?>
This would be the most basic PHP templating engine:
<?php include 'header.html'; ?>
---HTML content
<?php include 'footer.html'; ?>
Create a file called header.php and place the header content within that file. Then create another file called footer.php and place all your footer content in it.
You then include them on all your pages individually like so:
<?php include('header.php'); ?>
//content of that page here
<?php include('footer.php'); ?>
You could also use polymer. Download the polymer code (javascript) and include other files this way:
<link rel="import" href="my-custom-element.html">
https://www.polymer-project.org/platform/html-imports.html
It's the latest way to work with future web applications. No need to mess with server side language when you can just focus on the HTML alone.
so here is a question that I shouldn't be having so much trouble researching, but I am. Basically I want to create a webpage that loads in a header and a side bar. The header is it's own file header.php and the sidebar is leftBar.php. The following code is my index page, yet I am failing to have these pages loaded. I believe it has something to do with a lacking css page. But I have not found anything useful to help me solve this problem. What I would like to do is have the leftBar.php display its text on the left side of the page and the header.php file at the top. Below is the linked pages.
index.php
<html>
<head>
<title>junk</title>
</head>
<body>
junk
<?php
include ('styles/header.php');
include ('styles/leftBar.php');
?>
</body>
</html>
leftBar.php
<html>
left
</html>
header.php
<html>
header
</html>
In your include files, just place the code snippet that you want to appear on the page where it's included. You certainly don't want extra <html> elements (etc.) included at various places on the page.
I have a similar setup myself for the menu bar of a test site.
I think you have unnecessary brackets around your include file paths.
index.php:
<?php
include 'menu.php';
echo "$MENU";
?>
menu.php:
<?php
$MENU = '<table class="mainmenu"><tr><td>Home</td></tr><tr><td>Useful-Sites</td></tr></table>';
?>
You don't need to declare html tag for header.php and leftBar.php. A php file should start with <?php and end with ?>. Try learning php first http://w3schools.com/php/default.asp.
trouble researching?
first page of google:
http://www.w3schools.com/php/php_includes.asp
http://www.tizag.com/phpT/include.php
http://php.about.com/od/tutorials/ht/template_site.htm
http://www.tutorialspoint.com/php/php_file_inclusion.htm
Please look at these pages, and then update your question if you have to.
I'm looking for ways to have my pages search for the page layout from an external template page. Please see the below example.
<head>
<title></title>
</head>
<body>
<search for header, css, layout, etc from external page>
Page contents
<search for footer>
</body>
Is there any way to do this using PHP or HTML? I want to be able to edit the layout for all the pages without having to do it page by page. I welcome any other means to achieve the same effect as long as it works on all the browsers.
Thank you very much!
This is exactly the sort of thing that PHP is for. A PHP script can include the contents of another script using the include statement.
So each page in your application could have an associated PHP script that generates the contents, and includes footer.php for the footer layout. In this way, when you change footer.php all the pages that use it will automatically get the changes.
You can't do this with pure HTML, though you could with some javascript and Ajax.
Like Andrew said, use includes. I'll set up 2 basic examples.
The simplest, have multiple layout files that are called by your main file(s):
header.php:
<div id="header">
Menu can go here.
<?php echo 'I make all my files .php, so they can use PHP functions if needed.'; ?>
</div>
footer.php
<div id="footer">
Footer Link
</div>
index.php
<html>
<head></head>
<body>
<?php include('/path/to/header.php'); ?>
Specific index.php content here.
<?php include('/path/to/footer.php'); ?>
</body>
</html>
The other option is to have one PHP file which includes all your different layout elements in functions. The reason I like this, is because you can include one file and then call specific functions for different parts. This can also be used to pass variables like a title of a page.
layout.php
<?php
function makeHeader($title) {
return 'My title is: '.$title;
}
function makeFooter() {
$html = '
<div id="footer">
Footer Link
</div>
';
return $html;
}
?>
index.php
<?php include('/path/to/include.php'); ?>
<html>
<head></head>
<body>
<?php echo makeHeader('Page Title'); ?>
Specific index.php content here.
<?php echo makeFooter(); ?>
</body>
</html>
Just make sure you use relative paths (no http://www.) when including files. This will allow variables and functions to transfer over smoothly. The easiest way to do this is using the PHP variable $_SERVER['DOCUMENT_ROOT'] so if you have a file http://mysite.com/includes/layout.php, you could include it with include($_SERVER['DOCUMENT_ROOT'].'/includes/layout.php') no matter where your file you are including from is located.
Something basic that i don't understand:
I have header.php with navigation bar for my site. Inside it, there's a <head>...</head> section.
Now, in each other page of my site, I'm using require_once 'header.php' so that each page will show the navigation bar. But, I need also specific <head>...</head> sections to the different page.
For example, in page customers.php, I'm using <script>...</script> to include the jQuery library. I don't need to include it in other pages.
Now, searching the web I see that multiple head tags is wrong syntax.
So, how can anyone:
avoid multiple "head" tags
WHILE
separating his work to different PHP files and including them ?
You have to change your page structure and employ templates.
Instead of loading header at the top of the code, you have to do it at the bottom!
And page code should output not a word, but collect all data in variables.
And only after that output can be started by calling template.
A example layout is going to be like this:
First. page itself.
it outputs nothing but only gather required data and calls a template:
<?
//include our settings, connect to database etc.
include dirname($_SERVER['DOCUMENT_ROOT']).'/cfg/settings.php';
//getting required data
$DATA=dbgetarr("SELECT * FROM links");
$pagetitle = "Links to friend sites";
//etc
//and then call a template:
$tpl = "links.php";
include "template.php";
?>
Next, template.php which is your main site template, consists of your header and footer:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My site. <?=$pagetitle?></title>
</head>
<body>
<div id="page">
<? include $tpl ?>
</div>
</body>
</html>
And, finally, links.php is the actual page template:
<h2><?=$pagetitle?></h2>
<ul>
<? foreach($DATA as $row): ?>
<li><?=$row['name']?></li>
<? endforeach ?>
<ul>
easy, clean and maintainable.
there are many advantages in such approach:
as requested, you can populate header with actual page-relevant data.
HTTP headers can be sent as well, before any output. It includes cookies, sessions, cache-control and many more.
it's 2011 today. AJAX era. You may wish change your code to return JSONed data instead of whole HTML page. It's going to be easy using such layout.
Imagine you're going to create very similar site with just different design. You will have to change only templates and don't touch engine files. That's really great advantage of using templates.
Here are some simple ways you can look at.
You can have jQuery on the pages
that don't need it; once it's
downloaded it will be cached so it
still wont use more bandwidth.
You can move out the closing </head>
tag from header.php and close the
<head> tag in the page that's including
header.php.
You can include javascript anywhere
on a page, not only in the header.
You can also do something like this.
Before you do require_once 'header.php'; you put a variable called $jquery = true;
In your header.php file you check if $jquery is set to true, if it is, you include jQuery.
in header.php
you can type like this
<head>
<?php echo $script; ?>
</head>
then in your customers.php
you can first assign the variable
$script = '<script>...</script>'
then
require_once 'header.php'
One possible solution.
You create a global variable before including header.php.
You test this variable in header.php.
If it is true, You print script or something. Something like this:
<!-- Fragment of header.php -->
<?php if ($i_want_jquery): ?>
<script ...>
...
</script>
<?php endif; ?>
On the other hand, a template may be a better solution.