I'm building a small-scale website (a personal one) in which each page would have the same set of header elements (I'm not talking about the <head> element). In other words, I want each page to have essentially the same title at the top of the page and the same navigation bar below that (with possibly minor differences in each page). It's kind of like how StackOverflow has that navigation bar (with the logo, and the Questions, Tags, etc. buttons) on the top of every page.
Is it possible create such a header for every web page without copying and pasting the HTML code to do so? I really don't want to run into a situation where if I want to make a single change, I would have to change all of my pages containing the header.
Real web sites use real web frameworks, which have a concept called a "layout" (at least that's what they're called in Rails; as mentioned in Uwe's answer, they're called master pages in ASP.NET). All the common "templatey" stuff goes into a layout.
How about include files in a server-side language like PHP or master pages in ASP.NET?
You need to use some kind of dynamic page processing, whether it's PHP, a server-side include, or a similar tool.
If you need to stick with straight HTML, you could try to rig something up with AJAX or JavaScript - but then you highly limiting your website's functionality, giving it serious performance issues, AND preventing users who have JavaScript disabled from using your website.
A third answer is to use some sort of pre-deployment tool. This used to be a bigger market, but I think it's mostly dried up now. Here's an example for using DreamWeaver to handle this.
If you have a PHP server that supports PHP,
<?php include 'header_inc.php'; ?>
If that's not available
<!--#include virtual="header_inc.html" -->
But whether this works or not is server dependent
If you have a server with PHP capabilities
include 'header.inc.php';
you must put the header code in a file named that and then put that include code in all pages that you want the header to show up on
Related
We have a web app that we want to integrate in the websites of several clients by a subdomain, since in most cases we cannot modify their webs. Besides, our web is build in a different language and we want to keep it in our servers.
At the moment, they are adding links on their site's menu to our subdomain, however, they want to keep the same header and the footer so that the user feels that they are on the same website.
For now, we are copying the html and inserting it in our template, but this is not a good solution for the future and we are having several problems due to javascript conflicts.
How can we solve this? An iframe does not allow us to modify its content, I think. Thanks in advance.
Don't know any good ways to do this client side.
First thought is to have all the pages link your Javascript to create the header/footer, but it's not good to require Javascript to display content.
HTML imports would really be perfect for this, but it not well supported. You can consider if you're willing to use a polyfill, like Google's webcomponents.
I feel like best approach here would be to do this somehow not on client side. Either use a server that lets you use a template engine, or some static site generator that supports templating.
This is more a "best practice" question than it is a coding question. In regards to coding your header/navigation and footer sections in a website. Is it better to code it on each page or use the includes tag?
Coding it on each page seems very tedious and violates the golden rule of "never repeat yourself", so using the includes tag seems like the most obvious choice but I could be wrong.
I'm average at best when it comes to best standards in web design so I'm looking to get some input from the pro's so to speak.
Just as a side note, as far as I know you need some kind of "desktop server" in your development setup to use the includes tag, me working straight from my desktop then won't be able to test with the includes tag, is this correct?
Thanks in advance!
If your website is in PHP, then definitely use the include function for repeating content - not just the header/footer, but any repeating modules through the pages, too.
This means that any time you need to update your header, you don't need to do it separately on every page!
As for working locally - you can install PHP onto your computer, and have a local server environment to test with. If that seems daunting, then just upload to a test website before you upload to your live website, so you can use the PHP server there.
You shouldn't repeat code. Imagine that you have to change your header one day... you must need to make the change on all your pages! That's an absolute no-no.
If I update the code on my CSS stylesheet, all pages that pull the code from that sheet will be updated with the adjustments made. Is there a way to do this with actual information that can be viewed a web page(s)? I want to make changes on one page and have all desired pages adjusted.
can anyone push me in the right direction or direct me to which tags I would use?
Thank you
There are several ways to do this, although none quite like CSS.
Server Side Code
This includes languages like ASP.NET, PHP, Ruby, and many others. Using server side code, you can create content areas that are usually controlled by a database (MySQL is a free database). When you store your content in a database, you can then pull that content out via server side code and place it on the page.
AJAX
AJAX is a relatively new method that also usually leverages the use of a database. Basically, when you need content, you send a call to your server (or database) via Javascript and it responds with the content you requested. You can then format the content how you wish. There are literally thousands of questions on StackOverflow about how to use AJAX. Most of them will reference jQuery.
Content Management Systems (CMS)
While this is similar to the first two methods I listed (in that they usually leverage one or both methods) CMSs are different because they abstract the need to actually do any of the work yourself. They are usually pre-built systems where you just plug in your content and make some tweaks and you're good to go. Some examples of CMSs are Wordpress, Joomla, and Drupal.
jQuery.load()
If you get into jQuery at all, there is an easy method you could use to kind of replicate what you're trying to accomplish (one file that controls all your content). While it is definitely not the most highly-recommended method, so long as your site is not too big, it could work nicely. Basically you would put all your content into an .html file and separate them into divs with ids. Then to pull content from that file, you would use jQuery.load() plus the page fragments option (scroll down a bit on the jQuery.load() page) to pull in the desired content. Again, this is not really how I would go about doing it, but it is an option for a small bit of content you want to quickly change on the fly without incurring the overhead of setting up and maintaining a database.
If I understand you correctly, you want to apply the ideas of CSS (provide some handy definitions, use them everywhere) to "the rest of the HTML code".
If you are on a web server, you can do that using one of these technologies:
Server Side Includes
PHP
JSP
and probably many more that allow external file inclusion.
Sounds like you need either server-side includes or JavaScript AJAX loading.
If it's just the tag that you only want to know, then there are only two available tags (or markup) to call JavaScript codes. It's either:
Inline: <script> ... code goes here ... </script>
External: <script src="filepath.js"></script>.
But if you are dealing with XHTML, then you have to include a CDATA between the <script> and </script>, e.g. <script><![CDATA[ ... inline code goes here ... ]]></script>.
However, if that doesn't answer your question, then a tag is not what you need, but JavaScript codes.
I still don't feel comfortable repeating HTML for things like menu code, header, footer and most importantly a quick links/news panel on each page. Also it seems a little inefficient to keep sending the same repeated html for each page.
For the moment I have written a small program which reads these sections from my index.htm and replaces the relevant sections within all other pages in that directory. However things have started to get considerably more awkward now that I have extra pages like a Message Forum and Image Gallery, both of which require their own index.htm in their respective sub directories.
So the question is should I be using object, iframe or SSI?
Has anyone successfully used the object tag to embed a separate HTML file within a page? SSI would do the job except that the repeated HTML is still being sent across the web on every page change and different include lines would have to be used on the PHP pages. What about using IFrames, I know they are not strict XHTML1.0 compliant but I seem to recall rumors that they are going to br supported in HTML5 again, does that make them a good bet for the future?
The easiest way to solve this problem is by using a scripting language (PHP, Python, ASP) and templates. You can create the basic structure for your site in a master template, then use the scripts to pull in only the content that changes.
For a particularly good example, see Django's template system.
Each of your pages could call a JavaScript function in an external boilerplate.js file. That function could add boilerplate elements to the page, using the DOM.
That said, you might not want to do this, nor use IFrames, for SEO reasons! (Also, your pages would not fail gracefully if the client disabled JavaScript.)
To me it seems better to have a more search-engine-friendly page and put up with the transmission of duplicate markup. Server Side Includes (or any server-side scripting language) would give these qualities while also making it easy for you to change the boilerplate on all pages at once.
I know that with a large site you would want to separate footers, menus, etc so that updating that file would push the update out to every page that contains the item.
Is the same recommended for a small site made purely in HTML/CSS, or is it simpler/easier/standard to code out the menu in each page and update each page when a change is needed?
I don't necessarily want to bring in PHP or etc onto this website, but the ease of updating menus would be nice. Any other suggestions? I've heard Server Side Includes might be one option... is that considered "pure html" or is more required to be set up on the server?
Thanks!
Unless you've got a site consisting of one page, do yourself a favor and have some separate files with your header/footer/other repeated elements.
That way you only have to make one change and its done. No matter how meticulous you think you are, you will inevitably forget a page somewhere on an update any other way. Its a human thing.
If its "just" HTML, and you're not using a server-side language, then you are correct in that you'll want to use server side includes. Check with your host to see if it will process SSI on regular *.htm/*.html files or if you need to use the *.shtm/*.shtml extension.
Server side includes isn't html, but it's not really coding either. It's probably your best option if you don't want to get PHP or some other coding solution involved.
It's mainly just a function of the webserver that you are using, and whether it's enabled for the site.
Here's a tutorial on them for Apache.
Here's documentation for IIS.
There are tons of different ways to approach this problem, but ultimately if you want to make changes on your side and have them reflected in lots of pages you're going to have to have either some kind of server side processing, which means PHP or JSP or something along those lines, or you're going to have to have some sort of process that generates your site statically updating lots of repeated items wherever they occur, but ultimately that would just be a compile time solution that's equivalent to some other server side approach.
If you're comfortable working in Java / JSP, then simple JSP includes might do everything you need. If they don't, then you could go for a full blown Portlets API application. I'm sure other languages have equally valid approaches, so ultimately its decideding what you're most comfortable with.
Server side includes would be "pure HTML" from the browser's standpoint, but then so would PHP.
If you didn't want to Server Side Includes, you could dynamically build them using JavaScript or a library such as jQuery, and just include a .js file in each of your pages.
If it's really small / mostly text-based content, you could just have one page with hidden DIVs that are switched in. Then it'll also be very snappy and self-contained if someone wants to view it offline.
It is very easy to do this with php. This is some sample index.php page i've built:
http://pastebay.com/51887
And for example in "includes/navigation.php" i have this:
http://pastebay.com/51888
So in everypage you have just put that from first link and when you want to edit navigation, just edit "includes/navigation.php". :)