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
Related
I am a newbie in Front end languages. I am having a difficulty with my CSS web display, whenever I get to write my CSS codes on Bracket editor,then get to link it with any of the html codes. For example using <link rel="stylesheet" href="css/mine.css>..then get to refresh the CSS.mine page, it automatically displays my index.html codes page, which is not related to what I expect, in terms of it loading to other html pages I linked it with or I'm working with.
Please any solution, on how to overcome this challenge?
Thanks
Hopefully I am getting it right, but normally the web browsers render the html files in the project folder, when it comes to css files, they are used for styling the html page, so you have to link the css file to the html file you want to render, for example index.html and index.css. Then in the head of the index.html you put the link tag
<link rel="stylesheet" href="index.css">
as an example. Then you save and reload(or if using any automated terminal just save). CSS files are only displayed in the linked html files, so this means
Trying to organize my first website project, I want to set aside an html template to be used in several of my files.
From what I read about mhtml, this format is supposed to solve this problem, and the way to use it seems to be to simply change the extension to .mhtml. I then included the template in the .mhtml file like so:
<!DOCTYPE html>
<html lang="en">
<!--#include virtual="/templates/my_template.shtml" -->
<body>
I am a unique body!
</body>
</html>
With the included server side my_template.shtml looking like so:
<head>
I appear at the top of multiple sites where I am included.
</head>
When I do this and try loading the main page in firefox nothing is displayed anymore and I get a blank page.
What part of the syntax or procedure did I get wrong?
Can I achieve what I want to do without using mhtml
are there any other differences between mhtml and html?
Thanks in advance.
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 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.
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>