This question already has answers here:
Include another HTML file in a HTML file
(41 answers)
Closed 8 years ago.
I am making a huge website, with on all pages a navbar.
Is it possible to create the navbar in a .html file and import it into all the other pages,
and if so, how?
You can do this with HTML alone using Server Side Includes. Simplest example:
index.html
<html><head><title>Test</title></head>
<body>
<!--#include file="navbar.shtml" -->
</body>
</html>
navbar.shtml
<ul class="nav">
<li>Home</li>
<li>About</li>
</ul>
What you should never do is use framesets or iframes to do this. https://stackoverflow.com/a/15938545/822711
Please note, this will not work using the file:// protocol, it needs to run on a web server as it would in a live environment. This could be on a private or public server, or localhost using a server running on your computer such as wamp.
I prefer try to use Jquery,Like as
<!doctype html>
<html>
<head>
<title>Home page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$('.header').load("header.html");
});
</script>
</head>
<body>
<div class="header"></div>
</body>
</html>
In same folder open a file with name header.html.Same thing you can apply for footer.
1) In html we can load other files into one html file using Iframe
<!DOCTYPE html>
<html>
<body>
<iframe src="header.html">
<p> display</p>
</iframe>
</body>
</html>
2) We can use jquery function to load the file into some specific div.
<script>
$(function(){
$('#header').load("header.html");
});
</script>
3) Use other languages like php , .net for that
we use php include and require for that
**Apart from using iframe there is no other way in html that we can include one html file to another.**
with PHP it's possible, but you have to change the files to .php files.
put this in the main file:
<?php
include("navbar.php");
?>
I don't know a good way with HTML
For this you need to add server side language if you are using PHP you can create a
nav.php file. In this file you can add the complete HTML of your navigation and you can
include this PHP file in your code instead of putting navigation HTML.
Like this
<?php include("nav.php");?>
Related
I was trying this find this out but too no avail. I was just wondering if you could call another separate html file in your main html.
I know you can do it for javascript
<script src = "Classroom_names.js"></script>
So I was wondering if you could do it also for it in html. For example
<script src = "field_names.html"></script>
Or if you could not do it like that would you be able to call a html file in javascript andthen set a condition to it.
Thank you for taking your time to read this guys
The easiest way to do it is using jQuery, which you must include in your project, and then use the load function to place it in some node of your website, in this case I used a div with the class "menuContainer" and the menu I have put in a file called menu.html
Important: You must have a web server running on localhost to be able to use this function since if you open the file using the url "file: /// your_file.html" through the browser it will give you a cross-origin error, if you don't have a server web running you can mount it very easily with python3 using the http.server module or in nodejs using http-server.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="menuContainer"></div>
</body>
<script>
$(document).ready(function () {
$('.menuContainer').load('./menu.html');
});
</script>
</html>
So, what i want is this. I have an HTML File and i want the code to load from a text file. So, the browser should get the code from that text file and read it as a part of the HTML code. Here is an example:
Suppose I have an HTML File whose code is :-
<html>
<head></head>
<body>
<div src="code.txt"></div> [ I made this code. I know this code does not exist.]
</body>
</html>
And i have text file named 'code.text' :
<h2>Welcome</h2>
<img src="sample.jpg">
<p>This is the paragraph.</p>
So, instead of writing code in the actual HTML File, i saved the codes in a text file and want to use them whenever i want. I know the following code does not exist.
<div src="code.text"></div>
I made up this code just to show what i want.
**
Just tell me the way i can achieve this purpose.
**
Thanks,
Waiting for your answer !
You can load the content of this with jQuery ajax. Your div will look like this: <div id="content"></div>
And you call the document using ajax:
$.ajax("code.text").done( html =>{ $('#content').html(html) });
You can view more on http://api.jquery.com/jquery.ajax/
Why not use SHTML?
SHTML is an HTML file that includes server instructions or server side includes and is similar to an ASP file.
It's embedded in a standard XML comment, and looks like this:
<!--#include virtual="../top.shtml" -->
<!--#include virtual="../quote.txt" -->
For example, a .shtml page that includes a resource can be as follows:
<!doctype html>
<html lang="en">
<head>
<title>My SHTML Page</title>
</head>
<body>
<!--#include virtual="content.html" -->
</body>
</html>
You can use to include a common header and footer in your pages, so you don't have to repeat code as much, and changing one included file updates all of your pages at once.
Apache can be configured to parse any file with a particular file extension, such as .shtml, with the following directives in the http.conf file:
AddType text/html .shtml
AddHandler server-parsed .shtml
I got the SOLUTION.
And the solution is to use "php include".
<?php include("code.text"); ?>
OR similarly you can use it for other files.
<?php include("your_html_code.html"); ?>
<?php include("your_html_css.css"); ?>
You can import any code files like this (text,html,css etc.) and the browser will read the codes as a part of the main code.
This way you can use it to create templates so that you don't have to type the same code again and again.
Also, if you intend to make some changes, then the changes will be applied everywhere. This will save you a lot of time if you are creating a blog or if your website has many pages with some same sections.
Get the full guide for using this technique of php 'include' here:
http://www.apaddedcell.com/how-automatically-include-your-header-navigation-and-footer-every-page
Using Wordpress, I have the file search-form.php in my child theme's folder.
How do I insert this during a JavaScript routine from a file 404.php in the same folder?
I've tried using: <script type="text/javascript" src="search-form.php"></script> but this does not output the contents of search-form.php at the place I am calling it from.
Help appreciated.
You could use php includes:
<?php include "searchform.php";?>
This runs on server side, wich is good for loading speed.
Or you could use iframes:
<iframe src="searchform.php">Old browser!!</iframe>
Or you could dynamically load it with js/ajax:
<div id="show">loading...</div>
<script>
body.onload=function(){
//see ajax tutorials
document.getElementById("show").innerHTML=ajaxdata;
}
</script>
so here is my problem :
There is my index.html and I want to write on it with php and javascript in order to check that the text is correct. When I start the index.html from one of my computer the javascript text displays correctly but not the php.
So I create a .htaccess and launch the index.html again using mylocal server then the php text display correctly but the javascript isn't anymore (using write or alert)
So what do I have to do in order to be able to use both ?
here is the code :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Test</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<?php include 'parsing.php';?>
<script>
write("write");
alert("alert");
</script>
</body>
</html>
Thanks for your help.
the parsing.php is as simple as that :
yes, I have a webserver with the php plugin that's why it works in the second case only.
I am testing the page with this page : http://localhost/index.html
Thanks for your answers I think it was caused by my company proxy or something like that (their computer are full of problems anyway...)
I retried afterwards without changing anything and now it works.
Thanks for your time.
I have few issues with calling chessboard.js (http://chessboardjs.com). I downloaded API and made new HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Super chess/title>
<meta charset="UTF-8"/>
<script src=":\path-to-js-file\jschessboard-0.3.0.js"></script>
</head>
<body bgcolor="lightgrey">
<div id="board" style="width: 400px"></div>
<script>
var board = new ChessBoard('board', 'start');
</script>
</body>
</html>
I tried to draw chessboard. What I'm doing wrong?
Thanks.
From what I can tell based on your code and the docs, you're missing two things:
1) Your title tag isn't closed on line 4 of your html file
2) After you've fixed that problem you'll get an error saying "$ isn't defined" in the chessboard.js file. I teased out that JQuery is a dependency for the chessboard.js file. If you include JQuery in your html (either download the file like you've done with chessboard.js or use a CDN).
You should be good after that!!
Update:
Tried almost everything, here is my local directory:
https://www.dropbox.com/sh/3unwsb8esh9100o/AADHEB8sojQy1PnpLyC8fmSLa?dl=0
I also downloaded jQuery to my local directory, but page still dosen't load. Dev tools in Chrome doesn't import anything.
And also tried with xampp (Apache server), because sometimes code doesn't work if you calling it from local directory.