Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I have my adress written in 30 html pages on my website. When I move I am going to want to change the address. Instead of going through the code and changing it for all pages, I am looking for a method to change it in one place.
What would be the best practice for this sort of problem? There will probably not be that many references that would need to be stored. Any help on the matter will be appreciated.
There are literally dozens of ways to do this kind of thing. You could rewrite your website in any of the wide variety of server side languages, whether it's a scripting language like PHP or a compiled language like C# or Java.
You don't have to go that drastic, though. You can simplify it by including references in your pages. This can be a direct usage of another HTML file, or it can be a JavaScript file. The link below shows how to do the HTML file linkage using JQuery, as well as JavaScript. JavaScript doesn't have to be difficult and it can be referenced from all your pages, so it can have all the things in one file that you want to change, allowing you to change one file and it reflect on all your other pages.
HTML include with JQuery: (if you aren't already using JQuery, I'd hesitate to use a whole library to do one function that can be done in vanilla JS just as easily)
a.html:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
b.html:
<p>This is my include file</p>
Or JavaScript:
a.html:
<html>
<body>
<h1>Put your HTML content before insertion of b.js.</h1>
...
<script src="b.js"></script>
...
<p>And whatever content you want afterwards.</p>
</body>
</html>
b.js:
document.write('\
\
<h1>Add your HTML code here</h1>\
\
<p>Notice however, that you have to escape LF's with a '\', just like\
demonstrated in this code listing.\
</p>\
\
');
Include another HTML file in a HTML file
If you are using PHP already, there's a good chance you can do it with the PHP you're already using by reading from a text file and inserting the HTML text into the page you are generating.
<?php
// do php stuff
include('fileOne.html');
// or //
readfile('fileTwo.html');
?>
how to embed html files in php code?
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
So I have just recently started with web design.
My index.html has a menu (consisting of containing links to different pages).
The menu on the index.html page (in a very simplified way, no css and things like that) looks something like this:
<ul>
<li><a class="active" href="index.html"></li>
<li><a href="contactus.html"></li>
<li><a href="help.html"></li>
<ul>
and then there is the content of the page (text, slideshow, images...) - say
<div>
<h1><img><p><script>
</div>
the contactus.html page looks somethinglike this:
<ul>
<li><a href="index.html"></li>
<li><a class="active" href="contactus.html"></li>
<li><a href="help.html"></li>
<ul>
and then there is the content of the page (text, slideshow, images...) - say
<div>
<h1><img2><p><script>
When you click on the link, it leads you to a different page.
So say we have index.html, we click on a link in the menu and it leads us to contactus.html. It changes the page, the contactus.html has to load.
And the question is: is it possible to make it so that the content of contactus.html appears on index.html (and replaces it) but in such a way that does not require another page loading?
I have done some research and found something about innerHTML, but I cannot really understand how to use it. I started with js not a long time ago.
I hope the question somehow makes sense.
Thanks a lot for your suggestions and advice.
Yeah. document.body.innerHTML = "<p>Some new HTML!</p>". And there are lots of other ways as well. I like React, but it definitely has a learning curve. I don't know if real web developers still use jQuery, but it makes a lot of DOM manipulation stuff pretty easy. Good luck!
What server do you use? Do you use apache or ngnix for the html files?
You can get the content of "Contacts.html" and replace the content's html with it.
For example:
$.get("contacts.html", function(data, status){
document.getElementById("content").innerHTML = data;
});
This code uses jQuery for ajax requests and you can use XMLHttpRequest with only javascript.
Caution: You shouldn't run the html only. This will not work without html server.
Cheers.
This will be an extremely simplistic answer because it is a huge argument... but lets start with some basics.
The objective is, starting from a web page (index.html), to load some content and update only part of the content in the current page.
I will suggest two different approaches for both client and server side of the equation.
jQuery + HTML fragments
The idea of this approach is to use jQuery to manage AJAX requests to retrieve some content from the server and to update the DOM of the current page to display the new content.
Server side
Here you need to expose some content, in the simplest of cases it can be just a fragment of html like this:
fragment.html
<p>My asynchronously loaded content!<p>
The fragment above can be exposed directly as static content through apache or nginx, or can be generated dynamically with PHP, Java, C# or any programming language with good support for web development.
Client side
On the client we want to contact the server from javascript and retrieve the content with an AJAX request, then update the html. jQuery enables us to do both of those things.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</head>
<body>
<h1>Home page</h1>
<div id="content">
<p>Welcome!</p>
</div>
<div>
<button id="update-btn">Update content</button>
</div>
<script>
$(document).ready(function() {
$('#update-btn').click(function(){
$.get('http://myserver/fragment.html').then(function(data) {
$('#content').html(data);
});
});
});
</script>
</body>
</html>
We have a div with id content which we will use as the target for the new content, and a button with id update-btn to launch the request.
In the <script> block we first associate the click event to the button so that when clicked we send an ajax request to the server using jQuery get method and update the html content with jQuery html method.
Javascript framework + REST API
This is definitely a more complex approach and a complete guide/example is out of scope for a SO answer (there are books hundreds of pages long for each client side framework and for each server side language/framework) but let's explore the base concept behind this idea.
In the previous example we had the server generate an html and then the client ask for more html to update itself. Here the basic idea is the same but with a much more clear separation of concerns where the server is in charge of generating and sending raw data to the client (usually in JSON or XML format), and the client has to manage all of the presentation and user interaction aspects.
As an example we can analyze the hacker-news get item api.
The url structure is https://hacker-news.firebaseio.com/v0/item/{item-id}.json?print=pretty
We can make a GET request with a an id as a path variable and an optional query parameter called print and it will return some JSON data.
For example we can curl https://hacker-news.firebaseio.com/v0/item/25213368.json?print=pretty and get the following response:
{
"by" : "harporoeder",
"descendants" : 8,
"id" : 25213368,
"kids" : [ 25224137, 25224226, 25224397 ],
"score" : 31,
"time" : 1606333258,
"title" : "Use `nproc` and not grep /proc/cpuinfo",
"type" : "story",
"url" : "https://www.flamingspork.com/blog/2020/11/25/why-you-should-use-nproc-and-not-grep-proc-cpuinfo/"
}
Once we have all the services we need exposed the client can be built with many different frameworks and libraries. In the first approach we used jQuery which is fine for very simple use cases but can become a hell to write and maintain when we start adding complexity to our application, this is why there are many different frameworks to implement the client such as: VueJS, React, SvelteJS, Angular, Aurelia and many others.
Each one of those javascript frameworks has a big learning curve and you will most probably also need to learn how to work with Nodejs, NPM, transpilers and bundlers to make use of the whole modern javascript infrastructure.
This will not be an easy journey but you will learn a valuable skill if you decide to go this road.
Hope this gives you an idea on how to go on with learning web development.
This is your answer with vanilla javascript.
index.js file is:
onclick = "changeHtml()";
const button = document.getElementById("btn");
button.addEventListener("click", function () {
document.getElementById("app").innerHTML = `
<h1>I'm another HTML</h1>
<div >
<p>Look at me</p>
</div>
`;
});
and index.html file is:
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<h1>Hello Vanilla!</h1>
<div>
<p>This is initial HTML</p>
<button id="btn">Click Me!</button>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
You can change the content of any tag in HTML. like <body>, <a>, etc.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have right now one project on static HTML with two languages and I have to manage everything by myself.
So if something new appears in header/footer I have to update 20 HTML files.
Also this project is hosted on normal shared hosting.
How can I make less painful, if I have to change something?
Right now i just bulk find/change in folder with sublime.
P.S I can't use any CMS. Must be static.
Since it has to be static, you probably can't use PHP.
An alternative that works on modern browser would be to use Javascript to include the header and footer from another file.
You have several options, one is using jQuery load(). Example to include two files contained in the resources folder :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo load for header and footer</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="header"><!-- HEADER COMES HERE --></div>
<!-- Main content comes here -->
<div id="footer"><!-- FOOTER COMES HERE --></div>
<script>
$(document).ready(function() {
$( "#header" ).load( "/resources/header.html" );
$( "#footer" ).load( "/resources/footer.html" );
}
</script>
</body>
</html>
Please, consider a fallback by filling the #header and #footer divs with a content that would be displayed if javascript is not enabled. Also consider a fallback if load() doesn't work (look at the doc for this, there is an example).
Suggestion One:
P.S I can't use any CMS. Must be static.
You can use the Jquery to load up the files that you have in the respective place based on the needs that you have.
.load( url [, data ] [, complete ] )
Description: Load data from the server and place the returned HTML into the matched element.
Note: The event handling suite also has a method named .load(). jQuery determines which method to fire based on the set of arguments passed to it.
Reference: http://api.jquery.com/load/
$(document).ready(function() {
$('#some-menu').load('some-local-path/menu.html');
});
Provided you can have the ID of the DIV as you given and then it will load up the data over to that place and you can change it dynamically.
<html>
<body>
<div id="some_menu">
<!-- Loads the Menu Part Over Here -->
</div>
<script>
$(document).ready(function() {
$('#some-menu').load('some-local-path/menu.html');
// Like wise you can load up all the data that you need over here and place the necessary div over to the HTML.
});
</script>
</body>
</html>
If it is not a static you can follow up with the below one as i have mentioned using the PHP.
Alternative Reference:
It is better to use PHP since it supports awesome features and you can create your own CMS using the PHP.
More Clear Explanations
Look for the items that are being static on to your site and it has to be shown in all the pages.
Copy them and place in the respective files namely header in the header.php and footer in footer.php and so on and then you need to do one more thing alone.
You need to include all the files that are being given by you and thats the trick.
Entire Page will look like.
<html>
<head>Title of the Page</head>
<?php include 'scripts.php'; ?>
<body>
<?php include 'header_menu.php'; ?>
// Page content
<?php include 'sidebar.php'; ?>
//Page Contents
<?php include 'footer.php'; ?>
</body>
</html>
Like this way you can do it for your header,footer and whatever files you need to do so and if you update the single file alone it will be replicating in all the files even tones of files you have.
Basic include example
The include() statement includes and evaluates the specified file.
The include command simply takes all the text that exists in the specified file and copies it into the file that uses the include command. Include is quite useful when you want to include the same PHP, HTML, or text segment on multiple pages of a website. The include command is used widely by PHP web developers. Like PHP Echo, include is not a function, but a language construct.
vars.php
<?php
$color = 'green';
$fruit = 'apple';
?>
test.php
<?php
echo "A $color $fruit"; // A
include 'vars.php';
echo "A $color $fruit"; // A green apple
?>
Put the HTML content of the header in a PHP file and include it in every page, like this:
<?php include('header.php'); ?>
This way you only have one file (header.php) to edit.
More details on include() can be found at: http://php.net/manual/en/function.include.php
as far as I understood if you want to manage many HTML files in a static web I think you need a HTML template.
I would recommend to use "http://handlebarsjs.com/" you can use it as well in static pages.
I hope it helps.
I was searching around for an answer to this question but I can't seem to find the exact "words" or "phrases" to find relevant answers.
My question is, is it possible to have an ability to use a single html that stands as an "include" to another html page?
Example: Being able to use one file containing CSS styles so the same file can appear on every page of the site automatically that I include it on.
I made a template that has an extension of .html that contains only my header and footer for the whole theme of the site. Normally, I would copy and paste the contents of these templates to each new html page then add in the unique body content for that page.
What I would like to do is make a template that has an extension of .html containing only my header and footer so I can do something like include template.html which automatically would put the content of the template.html page on each page so I don't have to copy and paste each time. I am finding it harder and harder to update/maintain each page of the site that contains the header and footer script because I have to find and replace each instance of those scripts when changes are made and must be propagated throughout the site.
I know that html does not actually have an include function but I think there should be a way around this through other languages such as PHP or even JavaScript? I just am curious if its possible and if so, how?
I think you have a few different options. With PHP you could do something like this:
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>
</body>
</html>
See this link.
With AngularJS you could use something like this:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<div ng-include="'myFile.htm'"></div>
</body>
</html>
See this link.
With just HTML5 you could try something like this:
<object name="foo" type="text/html" data="foo.inc"></object>
See this link.
Does that help answer your question?
What you are asking is possible in differents ways:
frame and iframe
take a look at this two tags
frame : http://www.w3schools.com/tags/tag_frame.asp
iframe : http://www.w3schools.com/tags/tag_iframe.asp
I do not recommend this solution because "frame" is not supported in HTML5 and "iframe" is made to include other website in a website, not part of a website. You will not be able to add CSS/JS to code in "iframe" tag.
back end solution
Depending on what kind of website you are working on you can include other file. For exemple in php:
include('youcode.html');
HTML5 solution
You can also use the "object" tag :
<object width="100%" height="500px" data="snippet.html"></object>
this is probably your best choice, see : http://www.w3schools.com/html/html_object.asp
Enjoy :)
This can't be done via HTML, you can either do a PHP include or use this W3 schools example:
http://www.w3schools.com/howto/howto_html_include.asp
PHP example
template.html rename to template.php
<html>
<?php include template.php ?>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm new to JavaScript and I'm trying to link my button to a external function in a JavaScript file on my c: drive. The current code looks like
<button type="button" id="btnPoint" style="width: 90px; height: 30px;" onClick="MapPoint()" >
What I want it to do is to go to the JavaScript file (src="./_JavaScript/Map.js) and run the MapPoint() function. This has to be possible?
Thanks,
<button type="button" id="btnPoint" style="width: 90px; height: 30px;" onClick="JavaScript:MapPoint()" >
Include the JavaScript file with this in the header
<script src="./_JavaScript/Map.js"></script>
You need to include the external file that contains the function.
In your html add the script tag to the javascript file loc:
<script type="text/javascript" src="path/to/jsfile/js"></script>
You have two basic routes:
You can open your static html file that uses relative links everywhere to reference your additional resources. So you can include your javascript file using <script src="./_JavaScript/Map.js"></script> if Map.js is in the _JavaScript folder along with your HTML file.
You can have a Webserver hosted locally on your machine to serve static and dynamic content from your machine. A good place to start with this is by using a WAMP application stack.
The easiest/simplest would be to do the following:
Run your HTML thru a web server (Apache on *nix or IIS on Windows)
Put the HTML file and javascript file in the same folder
Edit the HTML file to include a line at the bottom: <script src="Map.js"></script>
Make sure the MapPoint() is properly defined in your Map.js file
Do as agressen said and then to add event on your button try this
var bt = document.getElementById('btnPoint');
bt.addEventListener('click', function () { MapPoint();}, false);
What you have will actaully work just fine as long as you have a function called "MapPoint" defined on your page.
Your function should be available to this page either included in the page or linked to an external file. It can be hosted online somewhere or just relative to this page's URL... but it shouldn't be linked to off your actual C:\ (for security reasons... and when you do publish this page it won't work).
The purists will suggest a few changes to your code though.
If you use the onclick attribute, most developers these days use all lower case
Typically functions start with a lowercase letter by convention... e.g. mapPoint();
For cleanliness you'll likely want to put those functions in a separate file that can be cached by the end user's browser (using an expires header)
If you end up using jQuery (or something similar) you can make you code a bit cleaner (although a bit abstract) by not using the onclick attribute but rather binding the event to the element through a jQuery selector
To include your function in an external file just add a tag like this to your page.
<script src="./JavaScript/Map.js"></script>
For legacy reasons the closing tag is required. Place the tag inside the <head>...</head> tag if you are unsure where to put it, but if you know it won't be needed until after the page has loaded the best place to put it is just before the closing </body> tag.
If you do end up using jQuery there's several ways to bind this event but the easiest is to use jQuery's click method:
$('#btnPoint').click(function(){
//do what you want here... or even call another method
mapPoint();
});
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
What I mean is that when creating multiple pages currently I always have to copy paste the header, navigation and footer boilerplate. And while it isn't all too hard to do(can basically copy-paste an emmet line and have it handle everything). I was wondering if there is a way where I wouldn't have to do that be it server side or as a plugin/addon for sublime text.
The current idea I have is to perhaps create a server side js which I could then possibly import on every page, though I know almost no js to pull that off.
Any suggestions?
In Html5 you can use the object tag to include a file.
Basically you create a single file containing your header and the common code that goes on each page.
Then on every page of your site you add
<object name="includedfile" type="text/html" data="page.inc"/>
where you need the content to appear.
Edit:
Check also jquery if you prefer to use javascript. There are easy functions to achieve the same result like:
$.get('test.html')
.success(function(data) {
$('div.content').html(data);
});
Where test.html is the page that you want to load and div.content is the place where you want to put the loaded code.
The only answer which works pre HTML5 is to learn PHP and/or install a system which allows you to use page templates. Most web servers have PHP installed.
Your page would then look something like this:
<?php
include "header.php";
?>
<!-- your html page code here -->
<?php
include "footer.php";
?>
At this point I would recommend you move into a more robust web language. Here are some options.
Ruby on Rails (yay!)
PHP
ASP.NET (yech)
You will definitely want more of the powerful features once you begin working on more complex websites.