How to apply elements in common in several HTML pages - html

I have a page which has a top and a bottom is common for all pages.
I'd had copied the top and bottom and paste them to all new pages created on the site and an idea came to me that this is not a good practice.
Then I thought of the following problem: if I add edit, add, or remove something in the top or bottom, I will have to make this change for all pages on the site.
Is there any way to create a template with these elements in common, in this case top and bottom, and then all pages that are created will be based on this template?
Hence, if I need to edit something, I just edit it in the template that reflects on all pages.
example:

If you are not using any framework, the easiest way that I can think of to achieve this would be to use PHP, but you will need a server application like XAMPP, LAMPP to run your application locally.
Simply, create 2 files, header.php and footer.php, these files will have the top and bottom parts of your HTML codes. And the other files will will have names like, index.php, about.php etc.
In the index.php put this code whereever you want the top part of your code to be rendered (in your case, the first line of index.php),
<?php include header.php; ?>
and for the bottom part (which will be at the very end of the index.php),
<?php include footer.php; ?>

Related

HTML headers and footers: edit multiple files from one place

I am currently coding up my own website (basically a personal blog) w/ HTML5 and CSS3. However, the growing number of .html files (blog posts and other stuff) quickly raised a problem: say if I want to change something in my page header / footer (which I want to keep the same across the entire site), I would have to edit every .html file to get this done. Is there anyway that this process can be simplified to a one-time action? Mostly, I write html files in Brackets. Thanks in advance!
Why not save the files as .php, create another file for the header and footer, and include the header and footer ( <?php include 'header.php'; ?> ) files from each of the main files?

No Static Footer or Header

My company just bought out another company and I have to change some links on their site to point to our site. However, this site doesn't have a static footer or header (as in, each link is recreated on each HTML page). So instead of changing the necessary files (30+), is there any other way to do a sweeping change?
Thanks.
While there are several methods, the one that I would recommend would be to use a server side include file.
My recommendation would be to follow these steps, approximately:
Copy the header / nav contents from one of your HTML files into a new PHP include file (called, for example, header.php).
Edit each HTML file, removing the header / nav contents, and including the file - that would look something like this: <?php require_once 'header.php'; ?>
Repeat for the footer, if that has "common" links and markup.
While this may take longer initially, the very first time you have to make any updates it will pay off.
Lastly, there are ways - if necessary - to (utilizing PHP) make the current nav item have an active class, etc. That's a bit of a stretch for this answer, but this answer may get you going in the right direction.
If you have access to these files on a GNU/Linux machine, use sed:
sed -i 's|http://oldcompany.com|https://newcompany.net|g' /dir/of/static/files
The -i flag does infile replacements, so each file under the given path is will be searched for the first URL and replaced accordingly.
Please note that this will just change links like http://oldcompany.com/team to http://newcompany.net/team. It also does not change links for https://oldcompany.com which would require modifications of the sed expression. Please give more information on how the links should be altered so we can provide solutions for your specific problem.

How to add a HTML Home page to a prestashop page

I've developed a custom HTML homepage for my prestashop site, but it seems I do not know how to incorporate it, I've tried looking into the prestashop forums, but all it shows are for .tpl files, is there a way for me to link them to the homepage?
Can I just link it as an html page or do I really need to put it inside a tpl page for it to work?
Create your .html file (say 'test.html).
In test file you need to
add these lines of code before your html code
<?php
include(dirname(__FILE__).'/config/config.inc.php');
Tools::displayFileAsDeprecated();
include(dirname(__FILE__).'/header.php');?>
Also add these lines after your html code
<?php include(dirname(__FILE__).'/footer.php');?>
Place the test.html file in the public_html folder.
Now you need to add the page to link with your site.
If it is home page you need to add it to index.php otherwise you can just add the url (http://mysite/test.html) to menu bar or footer links, where ever you want to put it.
I have placed my php page link in the footer information part using anchor tag as shown in the image
In prestashop you can find "Home Editorial" module, in this module you can put your html obviously the module need to be transplant in displayHome position.

HTML - constant headers/auto updating headers?

Is it possible in HTML to create a constant header? e.g. a header that you only write in one file and goes out to all the sub webpages on the website instead of having to update like 200 webpages if you want to change the header?
Not with purely html no,
However with a little php you could.
Create a Header.php and put your header code in there.
each of your .html files becomes a .php
so you can then do
<?php include('Header.php'); ?>
Now any time you change Header.php every page gets the change.
Note: If your running this locally you will need a local "server" to run php, I personally use WampServer

"Universal" links in HTML? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Include one HTML file in another HTML file
On each of the pages on my website I have a footer that contains about 12 links. Every time I want to change a link, I have to do it on every single page. Is it possible to make it so I can somehow change the link in one place and it changes on every page? Thanks.
This exact problem is the beauty of serverside scripting, where you can define a header file that each page pulls from when it is retrieved, allowing you to change a single file and have the changes propagate your entire website.
This is what it could look like in PHP:
header.php - Link
all_other_pages.php - <?php include header.php; ?> ...
the better approach is use the mvc architecture for that . and you can do it by creating the separate php file and include them
like for header header.php for wrapper wrapper.php and for footer footer.php and to show a pagge just include or require them
like index.php
<?php
require"header.php"; // for the header of the page
require"wrapper.php";
require"footer.php"; // for the footer of the page
you can also make function of header() and footer() so you can also include many more function in a file and it reduce the amount of file also you only need to include the one file with function
index.php
<?php
require"function.php";
header(); // for the header of the page
require"wrapper.php";
footer(); // for the footer of the page
in above approach the code of header and futtor will be universal for all website what you need to change is the chande the code in wrapper.php
You don't need to do server side programming to fix this (though you can do), you can do it perfectly fine in the browser with a little javascript.
For example:
at the bottom of each page:
<div class="page-footer"/>
<script src="footer.js"></script>
in footer.js something along the lines:
$(".page-footer").append("<ul><li><a href='about.html'>About</a></li></ul>");
If you can use a server side include or other server side programming then yes, otherwise it isn't posible with straight HTML. You could include the footer in an IFRAME such that each page loads the same footer page, but this is far from an ideal solution.