I would like to know that if there is a way that a certain piece of HTML code change on every page I create. In simple words for example, I make a HTML page called 1.html and add a footer code. For example <div class="footer">, and I need to add this footer to every page I make. But then, I don't wanna add this footer code manually on every page since that would take time.
So making it more simple, I make 1.html, 2.html and 3.html and make footer.html and add footer code to it. So instead of adding the actual footer code on every page, I add footer.html to 1.html, 2.html and 3.html and then later edit footer.html that will update on 1.html, 2.html and 3.html.
Hope you get my point.
Thanks.
There is no way of doing that in plain HTML. You either have to use a scripting language (like Python, Ruby, PHP...), or a static website generator like jekyll or hyde.
If you are just writing static HTML files, I would go with the second approach.
You can use a server side language like PHP to do that
1.php
<html>
<body>
Title 1
<?php include('footer.html') ?>
</body>
</html>
2.php
<html>
<body>
Title 2
<?php include('footer.html') ?>
</body>
</html>
If your webserver supports it (many do), you could use Server Side Includes.
rough summary:
change the extension on your html file to .shtml
add this to your page wherever you want your footer to appear
<!--#include virtual="../path/to/footer.txt" -->
the footer file should only include the HTML fragment that you need to replace the SSI tag, so that when the tag is replaced with the footer you have a well-formed HTML page
In your pastebin example your 'footer.txt' file should contain this:
<div class="footer">
bla bla here....
</div>
And your .shtml file, in which you want the footer to appear, should look something like this
(this assumes that your footer.txt file is in the same folder as the .shtml file)
whether you use php or ssi remember that 'footer.html' must only be the code that would appear between the 'body' tags in a normal html page, or you will duplicate.
Related
My main web page (index.html) follows a common structure (simplified):
<html>
<head>
<title>...</title>
<meta name=description content="...">
<link rel=stylesheet href="main.css"/>
[... including #font-face loads ]
</head>
<body>
<div id=menu>...</div>
<div id=mainContent>
...
</div>
<div id=footer>...</div>
<script src="jquery.min.js"></script>
... more scripts
<body>
</html>
The web server is well configured such that all the static files are cached and don't get reloaded on the client side if refreshing the page.
Upon choosing a link from the site, mainly from the 'menu' or the 'footer', I want to display different content within the div tag 'mainContent'. Page layout, CSS, fonts, scripts, menue, footer - all is the same. I have identified several means to achive this:
Construct a new subPage.html file copying everything from index.html, then rewrite the div 'mainContent'
with the desired other stuff and change page specifics like title, description etc.
Or use php to include the desired content in mainContent and to change the page specific values like 'title'.
Link from index.html goes to href="subpage.html".
Drawbacks:
Maintenance: when changing anything in the outside 'wrapper', I'll have to edit
every subPage.
no idea how to easily transport values from index.html
to subPage.html, beside cookie (not always permitted) or URL
parameters.
use a javascript onClick handler (event listener) to load requested content from server using XHttpsRequests and exchange the innerHtml of div mainContent.
Drawbacks:
no noscript version possible.
my changing content is probably not indexed by Google bot and alike, since it is not loaded with index.html. Would it change the situation if the 'alternativ content' was saved in .html files in the base directory, such that it would be browsable and discoverable?
Pre:
keeps javascript variables
no need to reload outer page, thus best user experience.
use a 2nd div 'mainContent2' with style="display: none". With a javascript onClick handler toggle display style of both mainContent divs to none <-> block.
Pre:
easy to implement.
all content loaded and thus SEO indexed.
Drawback:
Everything has to be loaded at once, so the index.html might get pretty big.
[4. iframe probably not an option (as the src attribut is static)]
I tend to opt to alternative #2.
Any other technics recommended? What is the 'best practice'? How is this generally done by the pros? Suggestions? Please elaborate.
I'll give you a few answers based on each option:
PHP
You can use PHP to import the header and footer instead of the main
content, that way you have just one file with a header and another
with a footer and all the pages that you create with different
contents will import the header and footer, avoiding duplications.
JS
Do you need a no-script version? I have never seen someone who disabled js but I don't know your app, it could be a pre-requirement.
You can use a modern js framework like Next + React / Nuxt + Vue / Remix / Svelte / ... There is a lot of options here that can provide you an SSR (Server Side Render) and make Google Bot happy
SPA
This seems to be a SPA. You can use some of the modern js frameworks that I mentioned in the second item. You need to think about lazing load the images too. I don't know how big is this content, but you can try google lighthouse to see if there is some problem with page size in this approach, also, you could enable the gzip on the server.
OR...
All of the above
You can use all of them together too. A frontend with a framework getting data from an API written with PHP, why not? PHP can validate the request type and delivery an HTML if it's the first request or a JSON if the application is already loaded.
Most common solution probably a variant of your option 1. But different then you think. Create a header.php with the content
<html>
<head>
<title>...</title>
<meta name=description content="...">
<link rel=stylesheet href="main.css"/>
[... including #font-face loads ]
</head>
<body>
<div id=menu>...</div>
and create a footer.php with the content:
<div id=footer>...</div>
<script src="jquery.min.js"></script>
... more scripts
<body>
</html>
Then create an index.php like
<?php include('header.php'); ?>
<div id=mainContent>
...content index page...
</div>
<?php include('footer.php'); ?>
And then create subpages like subpage.php
<?php include('header.php'); ?>
<div id=mainContent>
...content subpage...
</div>
<?php include('footer.php'); ?>
This way if anything in the header or footer needs to change you edit the header.php file and the changes will take effect on all pages because the header.php gets included on every page.
Now i have the footer and header of the main page copied in every page of my site, is there a way to set it somehow to update on every page each time i modify it on index, or to get it from an external source?
For a more advanced approach, you can simply use PHP Includes or Requires.
include ‘filename’;
or
require ‘filename’;
The filename’s will simply be your header and footer pages. I’ll show you an example to get the idea.
Let’s say we have a footer and it looks like this:
<?php
echo “<p>Copyright of Brian. SO
1994-“.date(“Y”).</p>”;
?>
Now be mindful that, like always, you can add attributes to the paragraph in your footer and header and even call style sheets that can style those paragraphs or whatever you’ve got in you footer or header.
Now, to have your page(s) display the footer or header that you’ve made, and in your case, both; simply use the format shown here:
<html>
<body>
<h1>Welcome to my Homepage!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include ‘footer.php’;?>
</body>
</html>
Now, notice that in my example, my footer file is in a .php format rather than an .html, that’s because my footer example contained a PHP specific function to render the current year. If yours is strictly HTML with a CSS style sheet linked to it, simply type ’footer.html’; or whatever your file name is. The header works the same exact way!
You can’t do this with plain HTML. You may use jquery or javascript frameworks though.
Follow this solution here: https://stackoverflow.com/a/18712605/3086531
Let's say all of my html pages will have a top bar and banner with the same content.
Rather than copy the code for these content on all html pages, is it possible to have pages inherit the content from a base html page?
For example : base.html can have the top bar, banner, etc (all repeated content)
Remaining pages (index.html, about.html, etc) can inherit the content from base.html and then add more content.
Is this possible in html or do I have to copy and paste repeating content all the time?
In this situations (as far as I know)
You can use template based editors like Dreamweaver
You can use framesets (don't use them)
You can use iframe (meh.)
You can convert your files to PHP and just use a single include command (Y)
Copy and paste whole thing and when you get 100 pages, try to add a new menu...
I'd like to see other solutions too.
Example:
Lets say I've created a template.html it's something like
<html>
<head>
<title>asd</title>
style tags keywords bla bla bla
</head>
<body>
<div class="menu">
yeah I've my menu here well designed
</div>
<div class="content">
unique content here
</div>
</body>
</html>
Allright this is my one html file. Lets take top section of the page. Menu will be same but content will be changed so this is top of the page:
<html>
<head>
<title>asd</title>
style tags keywords bla bla bla
</head>
<body>
<div class="menu">
yeah I've my menu here well designed
</div>
Save this part as top.php Now let's see what have we left:
<div class="content">
unique content here
</div>
</body>
</html>
This will be our post page. But how can we get codes from top.php? Just like that:
<?php include("top.php"); ?>
<div class="content">
unique content here
</div>
</body>
</html>
Now, save this as page1.php BINGO! You did not wrote anthing about menu but include method will bring it for you.
Include basically writes everything from a file to another. You can check differences for include_once, require, require_once too.
Allright, we've created our first page. What about second one? Exactly the same:
<?php include("top.php"); ?>
<div class="content">
my second page here
</div>
</body>
</html>
Save this as page2.php
Well, you need to change your menu now but there are two pages, two hundred pages, two million pages... Who cares. Just change top.php that's all.
Please note that in this codes; top.php, page1.php and page2.php are in SAME directory. If you want to include from another path, you must use for example:
<?php include("../top.php"); ?>
//OR
<?php include("myFiles/theme/top.php); ?>
depending on your path.
I hope this helps. Read PHP guides for include. It's really easy.
You need a testing server (or you can use a local server like WAMP, XAMP etc.) to execute PHP files.
You can create template page and include it to the all new pages as javascript
<script type="text/javascript" src="includes/template.js"> </script>
Same way with php - using include
With each new page I have to update the navigation panel. Which means I go from page to page copying and pasting my navigation bar. The more pages I add the harder it gets. Now I have in-consistent navigation bars. So what I'm looking for is a way to make an html file that contains only the navigation bar, then embed it into my code, like I'd do with CSS and JavaScript. That way if I edit the one file all other pages get updated. If I use the iframe tag there would be way to many problems, but I know of no other tag that can do what I need. So what should I do? I've done some research but all I can find is the iframe tag.. What should I do?
If your page is strictly HTML+JavaScript, you can use HTML DOM innerHTML Property.
Here is an example:
index.html
<body>
<nav id="navMenu"></nav>
<div> rest of web page body here </div>
<script src="script.js"></script>
</body>
about.html
<body>
<nav id="navMenu"></nav>
<div> rest of web page body here </div>
<script src="script.js"></script>
</body>
script.js
document.getElementById("navMenu").innerHTML =
'<ul>'+
'<li>Home</li>'+
'<li>Services</li>'+
'<li>About</li>'+
'</ul>';
Important line here is nav tag, and all you need to do is to add this line in other pages in this example about.html.
I also recommend PHP or similar to accomplish what you need!
If your page is strictly HTML then you will just have to do copy and paste. It would have been a lot better if you were using may be PHP then you can simply do an include or require but as the situation is now, all you need is to do a clean HTML coding for your navigation. Indent your codes well then it will be easier for you to copy and page across all pages.
If you can use simple PHP codes then read this: http://www.w3schools.com/php/php_includes.asp
I'd strongly recommend using PHP:
<?php include "header.html"; ?>
However, if that is not an option, you can use Server Side Includes:
File in the same dir:
<!--#include file="header.html"-->
File in a different dir:
<!--#include virtual="/header.html"-->
You'll need a Linux/Apache (not Windows) server for this to work. You'll also need to use the .shtml file extension.
Alternatively, given that you want to keep .html extensions, you can make Apache "think" that all .html files are actually .php:
Create a .htaccess file at the root of your website and add this line:
AddType application/x-httpd-php .html .htm
If your are running PHP as CGI (probably not the case), you should write instead:
AddHandler application/x-httpd-php .html .htm
(Taken from this answer)
If you would like to use PHP to achieve, this, you can do something similar to the code below. You'll have 2 "template" files, and then however many "content" files you need.
header.php will include content on the header (logo, nav menu, etc)
footer.php will include content on the footer (bottom navigation, copyright, disclaimers, etc.)
content.php will include the actual content you wish to display. You can have an infinite number of "content" pages.
Note that while these files have .php extensions, HTML code still works perfectly fine. So you can do something like this for every content.php:
content.php
<?php include "header.php"; ?>
<div class="content">
Your page content will go here
</div>
<?php include "footer.php"; ?>
header.php
<html>
<body>
<div class="header">
Header content such as nav bar here
</div>
footer.php
<div class="footer">
Footer content such as copyright here
</div>
</body>
</html>
In this way, you can change the contents of header.php and footer.php just once, and the changes will be reflected in all the pages you've included the files in.
If you have any further questions or would like something explained again, feel free to post a comment.
In fact, if you are doing only front-end stuff like I do, using load() with jQuery is more than enough. Just like what Skitty and fskirschbaum said.
But I would like to add a few points,
1. based on #Skitty's comment, it is important to load your navbar.html on the server side, like simply host it on your github.io website and refer to it by its URL like
$(document).ready(function() {
$('#nav-container').load('https://berlinali.github.io/test%20header%20template/header.html #nav');}
2. if you have css file, just put it inside < style >< /style> in the < header > part of your html file.
I push my code on github if you need some reference. Hope it helps!
https://github.com/BerlinaLI/berlinali.github.io/tree/master/test%20header%20template
You can use server side scripting languages like php or ruby. Or you can create some say menu.json file and create menu from that in javascript.
With serverside you should setup server or you can use XAMPP for fast setup.
Create header.html with all your menu links
Inlude menu file by using <?php include 'header.html'; ?> line (all files where you use it should be with .php extension or you can edit php config file for .html extension)
PHP would probably be the best method in this case, but since it sounds like you already have everything set up in pure HTML and JavaScript, you could consider using jQuery to load an external file into the DOM.
jquery.load('header.html')
This, of course has its own set of concerns, but you can effectively control everything from a simple .js framework without having to use php includes and doesn't require an iFrame.
You'd still potentially want to address a fallback for browsers without JavaScript turned on, so I only suggest this without knowing all the details, and I would still suggest that php would still be a better solution since you're allowing the server to do the heavy lifting.
I figured it out myself, you can use a JavaScript file and use document.write then put this where you want it to go:
<script type="text/javascript" src="/js/sidebar.js"/>
Here's my js file:
document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");
If you want to use both double quotes and single quotes inside the line, be careful with that, and I think that the < and > signs have to be in double quotes. Here's my full code:
----/js/sidebar.js----
document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");
document.write("<div id='sidebar'>");
if (page==1) { var p=" style='text-decoration: underline;'" } else { var p=" style='text-decoration: normal;'" }
if (page==2) { var pp=" style='text-decoration: underline;'" } else { var pp=" style='text-decoration: normal;'" }
if (page==3) { var ppp=" style='text-decoration: underline;'" } else { var ppp=" style='text-decoration: normal;'" }
if (page==4) { var pppp=" style='text-decoration: underline;'" } else { var pppp=" style='text-decoration: normal;'" }
if (page==5) { var ppppp=" style='text-decoration: underline;'" } else { var ppppp=" style='text-decoration: normal;'" }
document.write("<p><"+'a href="http://brandonc.handcraft.com/"'+p+">Home</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/about"'+pp+">About The Author</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/sevenmages"'+ppp+">The Seven Mages</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/comment"'+pppp+">Leave A Comment</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/calender"'+ppppp+">Calender</a></p>");
document.write("</div>");
----In place where you want code to go----
<script>var page=5</script>
<script type="text/javascript" src="/js/sidebar.js"/>
Probably not the most efficient, and I'd defiantly recommend using PHP like in the other answers, but this works for me and doesn't need a .php after every url.
Simply use jQuery .load(). It is very easy to use. Here's an example
navbar.html
<div>This is the navigation bar</div>
index.html
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
<!--HEADER-->
<div id="nav-container"></div>
<!--HEADER-->
<p>This is the homepage.</p>
<script type="text/javascript">
$(document).ready(function() {
$('#nav-container').load('header.html');
});
</script>
</body>
</html>
about.html
<!DOCTYPE html>
<html>
<head>
<title>About Page</title>
</head>
<body>
<!--HEADER-->
<div id="nav-container"></div>
<!--HEADER-->
<p>This is the about page.</p>
<script type="text/javascript">
$(document).ready(function() {
$('#nav-container').load('header.html');
});
</script>
</body>
</html>
Is there any alternative for using a frame. I'm just a beginner and I still don't know what the web designers are doing.
Almost all of the websites I see. Retains the header in the page. How can I apply that so I can stop from using frames.
Use a server-side language like PHP in order to generate a full HTML page.
For example, create three files:
header.php
page.php
footer.php
In the header.php file you have to put the first part of the HTML page.
In the page.php file you have to put the main content of the HTML page.
In the footer.php file, like the header.php, you have to put the end part of the HTML page.
So you can change the page file and the header and the footer remain.
header.php:
<html>
<head>
</head>
<body>
<div id="header">
Place your header here.
</div>
page.php:
<?php include('header.php'); ?>
<div id="main_content">
Place your page content here.
</div>
<?php include('footer.php'); ?>
footer.php:
<div id="footer">
Place your footer here.
</div>
</body>
</html>
For more information, search for a PHP tutorial with Google.
In regards to what you see in most websites, they just reuse the same code.. (usually in an external file and insert it in all their pages)..
Take a look at Server Side Includes for more info
Depending on what you wish to display you could look at using divs or using includes.