I would like to have a header.html which defines how the header for all my web pages will look like. How can I insert this header.html into the other web pages at the top?
There may be better methods around to achieve a common header to be shared around. As I still consider myself a newbie to html (but not to programming), I am open to better suggestions.
Thank you.
EDIT: Helpful replies have mentioned using PHP. However, I am using AngularJS as front-end and my PHP backend is simply a pure REST server. My preference is to do it the AngularJS way and not the PHP way.
An AngularJS solution would look like this:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<script src='angular.js'></script>
<script src='main.js'></script>
</head>
<body>
<div ng-controller="HeaderCtrl">
<div ng-include src="header.url"></div>
<script type="text/ng-template" id="header.html"></script>
</div>
</body>
</html>
main.js:
var myApp = angular.module('myApp', []);
function HeaderCtrl($scope) {
$scope.header = {name: "header.html", url: "header.html"};
}
header.html:
<p> Header content goes here </p>
The reason I did not simply advise a solution such as: <div ng-include="'header.html'"> is to avoid any delay in loading the header. For more information have a look at angularjs - Point ng-include to a partial that contains a script directive.
Alternatively a jQuery would like this.
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#headerContent").load("header.html");
});
</script>
</head>
<body>
<div id="headerContent"></div>
</body>
</html>
Finally a PHP solution would look like this:
<html>
<head>
</head>
<body>
<?php include('header.html'); ?>
</body>
</html>
Best of luck learning!
The way I typically handle this, and it allows for more than a header, is to have a shell.html
It might look like this:
<div ng-controller="ShellController">
<div ng-include="'app/shell/header/header.html'"></div>
<div ng-view></div>
<div ng-include="'app/shell/footer/footer.html'"></div?>
</div>
Where you're ng-including the static bits, and you're using Angulars ngRoute (or ui-router)
The other answers provided miss the point here of the client using Angular.js. Angular is actually designed for this concept. There are a couple different ways to achieve client templates with Angular.js.
Using Angular as a Single Page Application (SPA) where you dynamically change the content on a single HTML document rather than redirecting to different pages.
Using Angular Directives to encapsulate common page features.
You can use a combination of the 2 to achieve almost any combination of page layout.
using the angular route provider or a plugin like Angular UI-Router you can define a common HTML page, and within the HTML page use the ng-view directive to denote a section of your page to be dynamically replaced at runtime. you can then define html templates which populate the dynamic section.
Using Directives, you can create new HTML elements to design a more expressive page layout. For example, you could define a my-menubar directive containing HTML templates, javascript elements, even business logic, and then include the menubar on any page simply by using a syntax like <div my-menubar /> Directives are very powerful, and I highly recommend reading about them in the Angular Developer Guide.
An example of a simple page that might use these features:
<div ng-controller=MainController>
<div main-menu />
<div ng-view> </div>
<div page-footer />
</div>
Bottom line, you do not need a server to perform logic for reproducible code, as Angular.js is designed for exactly this purpose.
Related
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 am a cave man in terms of web ui - I like it all without npm/nodejs and other nice infrastructure. I want it all in text files like in old days: include/link stuff from/to a HTML page and it's done. Is such cave approach possible for semantic-ui+ReactJS combination, meaning to have no npm/nodes/other server code for my front end to work?
You can always skip over using npm/nodejs/bundling by putting the 'packages' you want as script tags in the header of your html page. This still allows you to grab the extra libraries you want but means you don't need bundling and transpiling if you want to keep it simple. Like you mentioned, this is the way that used to be the standard and it still works just fine.
As an example, here is how to use react without a npm: JSBIN
Your HTML would look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://unpkg.com/react#15.1.0/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.1.0/dist/react-dom.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</script>
</html>
Then the JS code for using react could look like:
const Child = () => <div>Child</div>
const Parent = () => {
return (
<div>
Parent
<Child />
</div>
)
}
ReactDOM.render(
<Parent />,
document.getElementById('root')
);
This answer is specifically for if you want to skip npm and bundling all together. I would definitely recommend checking out create-react-app if you are ok with having it do your config/bundling/transpiling for you.
I think the answer is yes, that is if I am understanding your question. One of the ways you can use react (and any css lib, like Semantic UI), is to generate a static build that can be hosted very simply on any static hosting service (all text files, like in old days). however, it is common to use npm and node during development.
this is a useful tool to get started: https://github.com/facebookincubator/create-react-app
MY SERVER IS TOO BASIC TO SUPPORT PHP/JAVASCRIPT, ANY SUGGESTIONS?
I have a HTML website with multiple pages. I am using an identical menu on all pages and when I add a page I have to each page and edit the code.
I am wondering is there a way of adding a menu page that can be called?
I am using CSS/HTML is it possible to do anything to help? I have researched a bit and I think it involves PHP, but can PHP be used in conjuncion with CSS/HTML?
You can have the code for your menu in a separate html and call it in all your other html files
<html>
<head>
<title>test page</title>
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id="header">
<div id="menu">
</div>
Rest of the Header Content
</div>
<br />
<div id="content">
Main Content
</div>
<br />
<div id="footer">
Footer Content
</div>
<script>
$("#menu").load("menu.html");
</script>
</body>
</html>
You have to use php to be able to do that.
Do 2 separate files, one will be your index.php and the other menu.php
To include menu.php you have to add :
<?php include '../elements/menu.php'; ?>
in your index.php.
All your other elements still can be coded in HTML even if your new extension is .php
You include this menu on all your website pages and if you want to add a page, you just have to add the link in menu.php and it will appear everywhere.
just use #Html.Render("pagename.html");
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.
I'm currently trying to develop a site using node.js. I'm having some trouble due to my unfamiliarity with html and node.js. Is there any mechanism in either node.js or html where I don't have to recreate a header & footer for every single web page (eg: copy paste the html code each time)?
Not sure this will answer you question but it's one way to add header and footer in HTML pages without repeating the code.
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
and in your main index.html file will be
<div id="header"></div>
<div id="content">
Main Content
</div>
<div id="footer"></div>
So the complete index.html will be look like this
<html>
<head>
<title></title>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<div id="content">
Main Content
</div>
<div id="footer"></div>
</body>
</html>
Since you said you are unfamiliar with html and nodejs i assume u are a beginner.
To achieve what you are looking for can be done in multiple ways and one of the ways is given by shehary which renders the page on client side(user's browser) and uses jquery to manipulate DOM to insert the header and footer. other ways include inserting the header and footer on server side using templates. some of the popular templates used in nodejs are ejs jade swig etc. you can also do it client side using jQuery , angularJS ,backboneJS etc. each of them have a their own positive and negative points.