I am building a website with at least 7 pages and am looking for a way to avoid having to repeat all headers & footers etc. on every single html document.
I know there are frames and iframes but some browsers don't support these and I want to do something more efficient and flexible for updates. Any ideas/suggestions?
Thanks for the information guys! I'll be sure to try them out.
One more thing is that I have a login form within my header. Will these methods affect it?
Regards
Yes, server side includes are the way to go, just a few clarifications:
1) You can do it as described by Sotiris if you choose to use PHP - which is very common choice, and btw.virtually all hosts support php.
2) Although the file will have extension .php, you can put your pure html code in it.
3) To be able to test and see this on your computer before uploading it, you have to install server on it. At this point I think it's simplest and fastest for you to go for some ready made solution - these are downloadable free:
http://www.wampserver.com/en/ (for Windows)
http://www.mamp.info/en/index.html (for Mac)
http://tuxtweaks.com/2010/04/installing-lamp-on-ubuntu-10-04-lucid-lynx/ (for Linux)
you can create a php file that will include all required code (for example footer.php). Then you can link it adding in every page in the proper place the following code (if you want to add the footer for example):
<?php include "footer.php"; ?>
If it is static HTML pages that you are builing, you probably want to think about Server Side Includes
http://en.wikipedia.org/wiki/Server_Side_Includes
Related
So, I'm trying to make a website, but the problem is I can't find the most effective way to keep the header on every single page. My header is HTML code, and it is the most important source of navigation on the website. The tabs navigate using links to other HTML files (all located locally on my computer) and so every single new page is another separate HTML file. Here are the many different methods I used that all fell short in one way or another:
The most basic way: Copying the header code to EVERY HTML page on the website. I am currently using this method, and it is probably the most ineffective and stupid method ever. The downside (which is pretty obvious) is that not only is it tedious but every time I make a change to the header (like maybe add different menus, add another tab, change the image, etc.) I have to copy the new header code to everything else. That is ridiculous!!
I tried using the w3schools method of implementing a separate HTML file (with only the HTML code) onto the page HTML files. So, I have this 1 HTML file for the header that every page uses so I make a change in that one file and it automatically applies to everything else. However, it didn't let me organize the numerous HTML files effectively because unlike referencing a stylesheet like some file named 'style.css', it doesn't let me put the HTML sheet in a folder that doesn't share the same parent folder as the referencing HTML page files. Hopefully that made sense, but basically, I couldn't get a folder that separated the HTML menu tab files ("pages") and the HTML content files ("posts") without the w3school code failing. Here's the link: https://www.w3schools.com/howto/howto_html_include.asp
I've seen other options on Stackoverflow, like getting around the "can't implement HTML files" by using js files with html code in a document.write(), but this to me is very hard to use because of all my progress so far. Also, I am very uncomfortable with the idea of using document.write because it is probably still very different from a true html file. Seriously, why is there no HTML implementing system that stylesheets and scripts have??? (script src="b.js" script and link rel="stylesheet" href="css/style.css" type="text/css")
Using jQuery. I understand this the least (being an amateur programmer) but I've heard it isn't consistent either. It doesn't seem to work on a local file, and that sounds like a nightmare. Though, if there are good suggestions, having a jquery file tag along seems not the best solution but still a plausible solution.
So, I'm in great trouble. How do other websites do this? Do they use different files??? Do they use PHP files?? Am I going to have to scrap all my hard header HTML work and styling because PHP is another language?? Do I have to use Angular.js??? This is so complicated!
Hopefully, this question made some sense. Please ask if you have questions. Thanks in advance.
UPDATE
After checking numerous other posts on Stackoverflow suggesting PHP, I got my HTML files and then renamed it from "index.html" to "index.php", and holy macro it actually still behaved like an HTML file even if it wasn't!! Now I need to find a way to put:
include("header.php");
into my page PHP files that are actually in HTML code to reference a separate PHP file that has my header. How do I do that? Does it belong in like script tags or something? How do I add PHP code in a PHP file written in HTML code? Thanks for the answers to my previous question, I'm so sorry I should've read the answers on Stackoverflow more thoroughly first.
So I know it's been awhile since I asked the question and probably nobody cares anymore, but I just want to post an update after finding a solution to my question about using php code and how it all works.
First, I learned that in order for this to work, all my files had to be in php format. So I pulled up my folder of my local HTML files and literally just renamed it from something like "index.html" to "index.php". Then, without changing the HTML code, I opened it up in my browser and it was like nothing happened, except it was better! Now it can not only read HTML and style and script codes, but also php codes as well! I added:
<?php
include("header.php");
?>
to the top of my index.php file, for example, and then converted the rest of the files into php format like I did for this. I copied over my header html and css code and saved it in a separate php file in the same folder, and - there was no header. I was confused. What?? Why is it not doing anything? The header.php itself is working, why is the include function not??
Then, I learned that this php include code can't be executed on my local drive, so it doesn't work on my local drive but works when it is public and on a real website hosting service. I then installed XAMPP, which is a commonly used PHP development environment that is an Apache distribution and is totally free. It runs a sort of local hosting service that will support this php code and cause it to execute the way I intended it to. I'm sorry I'm not good at explaining how this works, as I just find it and use it. Anyways, XAMPP did make the php code included above actually do its job and I finally got the header-system I always wanted. Happily ever after, right?
Nope. Now that fundamental stuff is gone, I have to face other problems like formatting (a real pain in the a** considering how I have to find css problems in tons and tons of overlapping code), creating an entire personal search system (having to figure out how to make a php file actually use my brand new MySQL database, which is also run by XAMPP), and lots of other things. But, that sounds like a great adventure that I am willing and definitely eager to go through. Now, finally I am done blabbing for the day...I wonder how many hours of other people's time I just wasted.
Oh yeah..I forgot to mention, happy Fourth of July! (and happy birthday to the beloved Captain America)
Using JavaScript and jQuery is a very easy way to accomplish this. First, just build a sample JavaScript file. Inside, make functions that are run on page load. For example,
function buildPage() {
var html = ' ';
//Build the html through the function
//In the end...
$('html-id').empty().append(html);
}
This way each time the html is built you can just empty(clear whatever is in the id 'html-id') and then add your specific html. For example,
<html>
<head>Put header here!</head>
<body>
<div>Put tabs with onclick events here</div>
<div id="html-id"></div>
</body>
</html>
Each time a different tab is clicked, the buildPage() function should be called in order to build the page accordingly. No multiple html headers needed!
Write something like that
<html>
<head>
<title>First page</title>
</head>
<body>
<?php include ("header.php"); ?>
<!-- rest of your code -->
?php include ("footer.php"); ?>
</body>
</html>
It's recommended to do with that way. Wordpress is working like that too. Include files to main php file.
**Notice all your files have to be .php
Maybe this can help:
Include another HTML file in a HTML file
You can make one header.html and include it in all other html files of your website.
I have a website that has a lot of data and that is sensitive to the website so I made a code that prevents right clicks but if you are using Safari it is easy to see the data I need to hide the info also so safari cant view it ether.
Client side, you cannot secure your code from view. Firebug will still show the code. You should have sensitive data on the Server.
You can't.
If the data is sufficiently sensitive that people shouldn't be able to view it, don't put it on a web site.
I m not sure if there is a completely safe solution.
if its images, use flash to load them dynamically.
yet people who knows swf-bin specs can decompile your swf files and find out the real image path.
if its data & text.
as much I can do is to
1: use pure js to render all views.
use XMLHttpRequest/ActiveXObject to load data and import these ajax js code # runtime.
compress your js/css code before deploy
here is one of my mockups
2: on the server side
check the request header to drop command line request.
exchange cookie/session key for each time.
BUT, this will make google-bots don't know how to inspect your site.
so DON'T do that on your landing page.
I have two domains pointing to the same wiki sharing the same database.
I would like it so that with domainA.com the main page is MainPageA and with domainB.com it is MainPageB.
The only way to change the the main page of MediaWiki that I know of is to edit MediaWiki:Mainpage, but that is stored in the MySQL database. Since both wikis are sharing the same database, both main pages get changed too.
The reason that the databases are shared is because all articles apply to both wikis, just that the logo of the wiki etc. is different.
Is there some kind of PHP conditional variable I can set to set the Main Page?
You could do this in wikicode, by making your Main Page source look something like this:
{{#switch:{{SERVERNAME}}
|domainA.com={{:Main Page for domainA.com}}
|domainB.com={{:Main Page for domainB.com}}
|#default=<span class=error>Unrecognized domain {{SERVERNAME}}.</span>
}}
or even just:
{{:Main Page for {{SERVERNAME}}}}
For more information, see Help:Magic words at mediawiki.org. (Note that the first version also requires the ParserFunctions extension.)
Ps. There might be some issues with MediaWiki's parser caching that could cause the wrong Main Page to appear. If so, a quick and dirty workaround would be to install the MagicNoCache extension and add __NOCACHE__ to the Main Page.
Pps. A better solution for cache issues might be to make sure that the different sites have separate cache keys, by adding the following line to your LocalSettings.php:
$wgRenderHashAppend .= "!$wgServer";
I have the following problem.
We have a site. I changed some sprites to make it look cooler. The thing is that we already have users and there is a big chance that their browser have the old images cached. Is there anyway to force a new request to images from them?
Note: On firefox (default settings) after some refreshes the new sprites are requested but seems like chrome (default settings) just doesn't request them unless you explicitly clear cache.
Another Note: One way would be to rename the sprites but this also means that we have to find them in css files and rename there also, etc. etc. etc.
Have a great day and ty for help.
One solution would be to add a random number onto the end of the image name e.g.
.mybackground {
background-image:url(../images/background.jpg?16549);
}
If you could make the number random every time the page is loaded via some JS or PHP or whatever that would work for you. YOu could maybe take the images out of your stylesheet and place then in a style tag in your header include or whatever so that you can do the random number bit to them. (Not sure if you could do directly into the stylesheet)
Renaming sounds more feasible. You can most likely automate it with (shell)scripts so it shouldn't be a too bad.
(Most IDE have a feature to find and replace in multiple files, you can use it to change the path to the sprite in the CSS files. Your best bet, is to give a new name for the new image for now.
As for later on, I suggest looking at your caching and expires headers of your web sever. (These are links to the Apache documentation, if your web server isn't apache, it would be same idea, but requires different implementation.)
Just a quick question, I have seen some web page if I click view page source, the html code is compressed, if I want my html code to be compressed like that, is there a function doing the compression or I need to use come compress tool to do it before the webpage is loaded on line? Thanks a lot.
I'm not a PHP/*nix guy, but since we have been chatting about it in comments, check these..
For PHP:
http://davidwalsh.name/compress-xhtml-page-output-php-output-buffers
For Apache:
http://perl.apache.org/docs/1.0/guide/modules.html#Apache_GzipChain__compress_HTML__or_anything__in_the_OutputChain
http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
Check this discussion as well:
http://forums.macnn.com/79/developer-center/276604/compressing-html-output-with-php/
There are tools available for that purpose, basically these tools remove blank lines from the html code. Search for html optimizer or blank space remover tools on google and you'll find many easily.
If you are using j2ee, there are filter available (as jars), which you can download and edit your web.xml file to use them. They will remove the blank spaces when the page is being displayed.
If for "compressed" you mean without whitespaces, without line breaks, without tabs, etc, yes, there exist tools that could do the job for you, although it would be easy to write a personalized script.
By example, see this script. Here you have the live demo.