I'm making a header using HTML and Bootstrap and I want the header to appear on all pages of my site. Is there a way to do something similar to a CSS style sheet but instead of CSS, reusing HTML?
The simplest way I believe is to use jQuery.
See jQuery docs here
one.html:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#header").load("two.html");
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
two.html:
<p> Put your header in here </p>
If you don't want to store jquery, you can use a CDN
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>$(document).ready(function () { $("header").load("assets/header.html"); });</script>
</head>
<body>
<header></header>
</body>
</html>
Javascript as on: {% extends "xxx.html" %}
You can use an <iframe> to change the content that is displayed, and only code the surrounding header/footer/etc. only once. There seems to be some uneasy feelings about using them floating around, so I would do some research on that before I committed to it.
HTML include is a recent feature you could try as well. Otherwise, it's gonna be good ol' fashioned ctrl-c ctrl-v.
Related
Im looking to figure out how to compile a couple of html pages into one page. like if i made a triangle in one html page, how would i link it with another html page that has a rectangle for example so that they both show up in one page. of course im not trying to figure out how to do this specifically but i want to generally know how to do it.
With jquery you can do it like so:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$("#includeContent").load("fileName.html");
});
</script>
</head>
<body>
<div id="includeContent"></div>
</body>
</html>
source: https://www.codegrepper.com/profile/abutahir
I know that it is best practice to have separate files for CSS and JS so that this:
<head>
<style>
<!--CSS code -->
<!--CSS code -->
</style>
</head>
<body>
<!--HTML code -->
<!--HTML code -->
<script>
<!--JS code -->
<!--JS code -->
</script>
</body>
becomes this:
<head>
<link rel="stylesheet" type="text/css" href="my-blackjack-file.css">
</head>
<body>
<!--HTML code -->
<!--HTML code -->
<script src="my-javascript-file.js"></script>
</body>
But is there an equally simple way to do this for the html portion of the code for the sake of better organization? I have seen some suggestions online for including html pages, but they seem to be talking about iframes and use some fairly complex (for me) javascript. Is there something more akin to
<body>
<link rel="stylesheet" type="html" href="my-html-file.html">
</body>
in order to separate a long document into several files that run as if they were on the same page?
This is work in progress and may (or may not) be supported in the next version.
Until then, unless you output the HTML through some server-side technology such as JSPs or Velocity, which support templating, you can only use iframes or AJAX as a workaround for including HTML.
Depending on the development environment you can use partial views.
<body>
#Html.RenderPartial("descriptiveNameHere.html");
<script src="my-javascript-file.js"></script>
</body>
Or something to that effect. There is additional syntax of course, but maybe this will put you on the track you're looking for.
Ultimately you will still have an html file with your "HTML Code". But if you're looking to reduce the complexity of a large file by moving chunks into external files, partial views are a way to do so.
I switched from Jade to basic HTML and ran into the following problem:
How can I have one navigation menu for my whole website (in one file)?
In Jade I did the following:
I had my menu in default.jade:
body
.header-site
h1.page-title Christopher Kadé
ul.nav-site
li: a(href='/') About me
li: a(href='/projects') Projects
li: a(href='/contact') Contact
.main-content
block content
And would include default.jade in every other .jade file, and write its content in a block content. This way, I have my header and menu available throughout my website.
But I can't seem to figure out the equivalent method in good old plain HTML.
In order to have the same navigation menu throughout your website, you could either use php or javascript. Using php-
<?php
include_once 'navigation.php';
?>
Using javascript
<div id="navigation">
</div>
<script>
$("#navigation").load("navigation.html");
</script>
You need a server side include (with a server side language) - HTML doesn't support this natively. Or if using jQuery:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#nycontent").load("header.html");
});
</script>
</head>
<body>
<div id="mycontent"></div>
</body>
</html>
header.html
<h1>test</h1>
alternatively, with plain old JS:
<html>
<body>
<script src="myscript.js" />
</body>
</html>
document.write('\
\
<h1>This is my include file</h1>\
\
');
I need to create an html file that contains only content within a form tag of another html file, and nothing else. Is there any way to do this?
You can dynamically load html snippets after your main page loads using javascript. Something like this:
main.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Form</h1>
<div id="container"></div>
</body>
</html>
form.html
<form>
<input value="testing" />
</form>
script.js
var formUrl = 'form.html';
$(window).on('load', function(){
$.get(formUrl, function(res){
$('#container').append($(res));
})
})
Here is a working plunk
Using webcomponents, it possible to import HTML from other files.
But this isn't widespread nor supported by all major browsers and maybe not what you're looking for.
You should really start by using a programming language like PHP, Ruby, Python or similar.
I am developing a website , I have an html page which has some contents, have also made a signUp modal in the same page, but the code is getting longer, I just want to know if I keep the code of sign up modal in another file with .html/.htm extension, and on button click that modal is displayed on the same page, not to be redirected to another page, like it is displaying on the home.
I don't want the home contents to be shattered , just the modal to be displayed on above.
You can use jquery to accomplish this task:
Just create a new file "modal.html" and write code for popup there.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("modal.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!-- other code -->
</body>
Use w3data and include your file where ever you want. In blow i included signup.html file.
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="signup.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Simple Method to load Html File to main
$(function(){
$('#which').load('test.html');
});
you can write inside document.ready also
Simply use an iframe (inline frame) to load the external webpage. You can style the size of the iframe like you normally would with any HTML element.
<DOCTYPE html>
<html>
<head>
...
</head>
<body>
<iframe src="/your-signup-page.html"></iframe>
</body>
</html>
More information on the iframe element.