Lets say I have a web site with 50 web pages. Each page consists of
- A Header
- Navigation
- Left Side Content
- Right Side Content
- Footer
Without using
- Frames
- Server side programming
- Third part tools and softwares
- Frameworks
I would need to put the code (HTML Markup) for each of these 5 sections in each of those 50 pages? What happened to the term "Code Once, Use Again & Again"? Also If I want to change any thing, I would need to change it at 50 places. This is just reduntant. Can I use as such.
<object type="text/html" height="100%" width="100%" data="header.html"></object>
Excuse my stupid questions. Learning the hardway!
You describe the exact use case for a server-side language.
Let me explain you the problem with your approach. If you do your site this way, having an index.html and those other 5 parts you include through either object or iframe, this will mean 6 requests to your server (which is certainly not a good practice).
Things will happen like this:
- Browser requests your
index.html
- Parses it and finds it also needs to request
header.html and four others
- Requests all those 5 htmls from the server
Instead, you could just request index.php for example (if you use PHP), let PHP construct ONE HTML resource (possibly including other PHP files, like header.php) and send it to the browser, which will happily display it.
You don't have to break your learning order, only use some small parts for this specific purpose (using only one command at all). Be flexible, you will find it very useful in this business :).
To give you an example:
index.php
<!DOCTYPE html>
<html>
...
<body>
<?php include 'header.php'; ?>
<?php include 'navigation.php'; ?>
...
<?php include 'footer.php'; ?>
</body>
</html>
In your PHP files, you can have only simple HTML, only the file extension will be different. To write PHP commands you can use <?php whatever ?>
I would need to put the code (HTML Markup) for each of these 5 sections in each of those 50 pages?
Yes
What happened to the term "Code Once, Use Again & Again"?
You rejected all the techniques that make that possible in HTML (well, unless you count writing your own template engine from scratch (no third party tools) and running it at build time instead of on demand (no server side code), or using JavaScript (which is insane)).
Can I use as such. <object type="text/html" height="100%" width="100%" data="header.html"></object>
That is effectively an <iframe>, just with fewer features and weaker browser support.
You could also achieve the goal by just combining different parts, meaning that you write your header in one file, navigation to another and content to third file and then combine these to actual webpages. (basically making your own template engine). Such as (in UNIX)
cat header.html navigation.html body1.html > page1.html
Not the ideal solution but this way you only need change once. But for anything real, already suggested server-side scripting is best option usually.
If you don't want to use server side programming (which is what it was built for mind you), your only choice is an AJAX call to fill in the common elements at run time.
This however will not provide a very good user experience, as the page slowly loads itself AFTER it seemed to finish loading.
You really should use server side programming for this.
One common solution is Server Side Includes (SSI), which allows you to include one block of html markup in multiple pages (among other things). If you're using PHP, definitely consider PHP includes: http://www.w3schools.com/php/php_includes.asp.
