There is no way of doing that in plain HTML/CSS. You need to use PHP include files. So you need to learn at least the basics of PHP. Note: PHP is a server-side language. That means that it assembles the HTML page dynamically on the server and delivers it whole to the browser. So, to the browser it seems as if you have 100+ pages with identical headers/footers etc. To use separate files for the headers etc... (Note: This is only a brief explanation):
- Put the header code (or whatever) in a separate .HTML file, e.g. header.html.
- Rename the web page to .PHP instead of .HTML, e.g. mypage.php.
- Remove the header text from the web page file and replace it with a call to the include file. E.g.
<?php include 'header.html'; ?>
- Repeat this for every page that uses the header. Note: PHP is generally case sensitive, so if the file is called "Header.html", or some such, the above include will fail..
You then only need to edit the header file to change the header on every page.
The problem with this is you cannot test PHP like HTML by just clicking on the source file to load it in to the browser. You need to set up a local host and use that. Fortunately, this has all been sorted. There are two or more free local host kits that are fully automated to setup. I use WAMP (search for "WAMP SERVER" and download it). Once you have installed WAMP what you have to do to test your web page(s) is:
You will need to move your development area to be visible to WAMP. I.e. put it in C:\wamp\www. If you cannot do that, you will have to copy the files to there dynamically, which is likely to be error prone.
Make sure that the web pages have the file ext .PHP instead of .HTML.
Make sure WAMP is running (you will see its green icon in the task bar). If not click on the WAMP icon to start it).
If they are not already there, put the web page(s) you want to test in the WWW folder (or a sub folder). E.g. C:\wamp\www\mypage.php. Remember to include the include files and graphics. N.b. It really is easier to move the development area.
Set up a shortcut just like a link to a live web site except that you use "localhost" as the address. e.g. http://localhost/mypage.php.
Click on the shortcut, Voila, your browser will display the pages just as they were before (unless you have made an error in editing the files)!
So there is some work in setting up your development area to use PHP, and the changeover will probably need planning, so it is not worth it for just a few web pages. But when you get to 20+ pages per site, you will wonder how you ever got by without it!
P.S. Search for "PHP Manual" an create a shortcut, you will need it!