I have a site with nearly much pages with the same look. the only difference is the content of them. each page is stored in an HTML file.
The problem of the site is that during maintenance (i.e. for changing the site theme and look) the CSS is done very nice (because all the pages are linked to a single CSS file) but changing a small <div> block can be really annoying to apply individually for all of the pages.
Is there any other way to use to avoid this? like a theme for a blog.
My own idea was to place the new page contents (section part) into a bare HTML page and place it in the site's homepage using <iframe> then I will only have one page that is the main page. and posts are loaded into an <iframe> in the section part of the main page.
But this would reduce the site's SEO. because of having only one page.
What else can I do?
I want to do the same thing a separate CSS file does to the page style, to the htmls content. I want the theme to be unique in all the pages. and if changed, the changes applies on all of the pages.
There are a few ways to do this:
1) PHP: Using PHP, you can simply include an html file into another one
<?php include('fileOne.html'); ?>
2) jQuery: Using jQuery, you can load an HTML page dynamically into another (this is kind of hacky in my opinion):
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
Source: Include HTML Page via jQuery
3) Framework: Using a framework like Python/Django, you can use {% include %} blocks to create standalone html files that can be reused like blocks.
<html>
{% include 'navbar.html' %}
</html>
My honest recommendation is #2 if you have to stay with just raw html, otherwise, if you are using PHP then includes are a no brainer. The last option is the frameworks, and that is really only if you have other heavy-duty functions you would need.
Related
I have multiple html pages in which index.html calls all other html pages.
Index.html contains the Head with Title tag, is there any way I can share the same Head with Title tag across all other html pages?
I am hosting the html pages in github as skpatro.github.io/demo
If you're using GitHub Pages then you can use Jekyll.
You might be able to do this using a layout that contains stuff like the title. Or you could store the title in a site-wide variable.
You can use a templating engine, like Nunjucks. With it, you can make a base HTML which contains the same title or anything that's shared between your web pages. I've used Nunjucks with Grunt before, not hard to set up. It produces static web pages so you can still use Github Pages after.
I emplemented two html pages separately. how can put them in the same page (tabs system). ALl the example found on the net are more about simple content tabs (text or so..)
thanks
Call the files using iframe in tab content just keep your markup in html files and don't put any styles or script in that file.
How about using HTML includes?
https://www.w3schools.com/howto/howto_html_include.asp
<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<body>
<div w3-include-html="<path to html file goes here>"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>
working example here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_include_1
Thank you for your answers! but I'm looking more for showing the content of the page. I'm already using frames in each page so putting it in frame is not the best solution for my case.
I think I found my answer in the load() function of jquery to load dynamically a page! here's an example: http://www.jquery-tutorial.net/ajax/the-load-method/
where you can simply add the link of the page.
http://www.jquery-tutorial.net/ajax/the-load-method/
this library is not bad too but I'm going for a tab system and a jquery load for each tab!
I have built a website (using GitHub pages) which contains a lot of sub-pages. Almost each one of these pages contains the following same content, e.g. footer part like this:
<footer id="content-info" class="container" role="contentinfo">
...
</footer>
My question is: how to extract this shared same part out to a separate file for reusing? Then I can simply somehow include this file wherever I need to contain the footer part. If this is possible, I can easily edit this part once and all pages that contain it will change automatically.
GitHub Pages supports Jekyll, a static site generator. Jekyll uses Liquid templating under the hood. You should be able to leverage the templating even without the static site generation.
Here is more info on Jekyll: http://jekyllrb.com/docs/home/
To get Jekyll to process with GitHub Pages, you probably need to add a _config.yml file. More info on that here: http://jekyllrb.com/docs/configuration/
Then once Jekyll is processing your .html files, you can use a simple templating syntax to include content form other files.
Example:
<!-- html here -->
{% include footer.html %}
<!-- more html here -->
This will include the contents of _includes/footer.html by default. More info on template includes here: http://jekyllrb.com/docs/templates/#includes
I hope that helps!
You could simply copy the content of the div to a php or html file and call it from each page using
<?php include 'footer.php'; ?>
That way when you change footer.php it'll update across the site.
Your pretty much right on the money, take the code snippets you want to reuse and save them as seperate files.
Then use
<?php include_once ("file location/filename.extension"); ?>
to include that file :D
##### html file
<html>
<head>
<title>Title</title>
</head>
<body>
<p>content here</p>
<?php include_once ("file location/filename.extension"); ?>
</body>
</html>
##### include file
<p>copyright by me<p>
I would like to be able to use something similar to a stylesheet but with HTML so that I only have to edit one set of code to edit the toolbar's HTML code across multiple pages. Is there a way to use a tag or something to import HTML code into the body section,
You can try to type out your navigation bar / header in a html page, save it has header.php and then in all of your other pages (for example index page), type in
<?php get_header(); ?>
at the beginning to grab the header. Make sure the header.php is in the same folder as your other files (for example index.php)..
Let me know if it does or doesn't work.
Your best bet is to make sure your server has PHP installed, then use include
<html>
<body>
<?php
include "toolbar.html";
?>
</body>
</html>
I have a really hard time searching for this, because I have no idea how to call it.
I'll try to describe the process I want, and see if any of you know such an editor.
I have a website that has the same html component repeated in them, for example, a menu. I can define how the menu looks with css, but I can't (as far as I know) add the same piece of html to every html page with a simple line.
What I do, is copy the menu over to every place. If I change the menu, I need to do it all again.
I know this can be achieved by using a dynamic server, with something like php or jsp, but I don't need it to be dynamic.
I was wondering if there was a way to do this.
I thought possibly there was an editor, where I can edit html using includes, and then "compile" the htmls after modification to produce the htmls I will replace on my server.
Thanks
Have a look at server side includes ... create a menu.shtml page and then include it like so :
<!--#include virtual="/menu.shtml" -->
Its supported by most web servers out of the box (including IIS, Apache and lighttpd)
Have you heard about MasterPage Concept
The below link will give you a quick start
Master page are pages which will act as a frame for all other pages. You have to write it only one. And each page that is coming under that, will have to include the master page. Thats all!
You can do this with jquery
Assume you have page1.html page2.html etc.
You want in each of these pages your contactinfo. You can create a file with the name "info.txt". On the spot where you want this contact info, you put a div. as shown in this example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<!-- page content -->
<div id="contact"></div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#contact").load("info.txt");
;
});
</script>
Whatever you place in 'info.txt' will be put on the spot of were you put
You could write a simple bit of js in an external file and then call it in each page to dynamically load the menu. You can then simply edit the menu by editting the JS file. all you'd need to do then is include the in the html and use document.getElementById("menu").innerHTML = menuHTML; where menuHTML is a variable containing the pure HTML code of the menu. You can then include the JS file and call it in the body onload