This question already has answers here:
How to create a template in HTML?
(3 answers)
Closed 8 years ago.
I have a website which has a navbar and a footer. I want every page of my website to contain this navbar and footer. I have put this HTML code into an HTML file where I have effectively created a website template.
I want this template.html file to be imported so that changes can be made simply and easily if needed. I have tried doing this like so:
<!DOCTYPE html>
<html>
<link rel="import" href="template.html">
<!-- PAGE CONTENT -->
</html>
If implemented correctly, the end result would should look like so:
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<div class="navbar"></div>
<div class="footer"></div>
<!-- PAGE CONTENT -->
</html>
What would be the proper way of doing this? Thanks.
Please note: Content in HTML code has been edited down significantly to make it easier to read
According to the HTML 5 specification, there is not a rel="import" attribute value for link tags.
You have 3 options I know of:
Server Side Includes (SSI)
PHP/ASP/Perl/... name it server-side languages
Ajax to load stuff using Javascript from the server.
Depending on your server, one or more of those will work for you. Bad advice from some online resource won't, of course, so good thing you came here to get that refuted.
Just type in any of the terms above and you'll find a wealth of resources.
Related
This question already has answers here:
How to link a CSS file from HTML file?
(2 answers)
Closed 1 year ago.
I am extreme beginner and I have this dumb problem.
So I wrote a css file and html file.
HTML :
<!DOCTYPE html>
<html>
<body>
<img
src="https://i.pinimg.com/originals/67/b2/a9/67b2a9ba5e85822f237caae92111e938.gif"
width="300" id="para1">
<p>Paragraph</p>
</body>
</html>
I did this for my css file
p {
color: red;
}
When I save and refresh my website, the html shows up.
The css doesnt show up like the paragraph doesnt change red. I also want to change the position of the image.
Please help!
I also want to know about indenting please.
Also should for website developing, should I learn css and html at the same time, or like html for 1 year, and then css for one year, because im learning javascript like in a 2 years, next year.
You must tell your HMTL page where to find your CSS.
To do that you have to add link tag into your head tag using:
<head>
<link href="/path/to/your/style.css" rel="stylesheet">
</head>
<link>: The External Resource Link element
The HTML element specifies relationships between the current
document and an external resource. This element is most commonly used
to link to stylesheets, but is also used to establish site icons (both
"favicon" style icons and icons for the home screen and apps on mobile
devices) among other things.
Take a look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
In your case if your css file named style.css and your index.html file are on the same folder, your html should look like that:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<img src="https://i.pinimg.com/originals/67/b2/a9/67b2a9ba5e85822f237caae92111e938.gif" width="300" id="para1">
<p>Paragraph</p>
</body>
</html>
The HTML element contains machine-readable information
(metadata) about the document, like its title, scripts, and style
sheets.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head
If you want to use inline css you have to put your <style> tag between your <head> tag to make it processed by HTML.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<img src="https://i.pinimg.com/originals/67/b2/a9/67b2a9ba5e85822f237caae92111e938.gif" width="300" id="para1">
<p>Paragraph</p>
</body>
</html>
Also should for website developing, should I learn css and html at the
same time, or like html for 1 year, and then css for one year, because
im learning javascript like in a 2 years, next year.
Well, HTML, CSS & JS are the fabric of the front end so my advice is why not all three at the same time? They each compliment each other and after 3 years studying you will have understood more about them than focusing your time and energy learning each as separate entities.
Think of HTML as your initial sketch (your structure), CSS as painting your sketch (your make-up and beautifier), and JS as making your painting come to life (your functional and interactive parts). Simply put, it's more fun with working with all 3
I have a processing program which I want to display on a browser in an html file. I found an instruction on https://cs.nyu.edu/~kapp/cs101/processing_on_the_web/. It still does not show up in my webpage. I also tried it with the same code from the instruction and it still does not show up. I am using chrome and my html code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Bitmap?</title>
<script type="text/javascript" src="processing.js"></script>
</head>
<body>
<h1>Text</h1>
/* #pjs preload="Karte_schweiz_zentriert.jpg","bitmap_zentriert.jpg"; */
<canvas data-processing-sources="bitmap_map_comparison.pde"></canvas>
</body>
</html>
I have the .html file, processing.js, the two .jpg pictures and the bitmap_map_comparison.pde processing code in one folder called bitmap_map_comparison.
Does anyone know where the problem is?
You are using src incorrectly. Unless you have ProcessingJS in the exact same folder as the program, it will not import as it does not exist. Use this instead:
<script src="https://cdn.jsdelivr.net/processing.js/1.6.6/processing.min.js"></script>
Edit: I'm just now realizing that I'm 3 years late and this probably won't help anyone.
I am doing a project which is building a website for my CS 205 class. I have made it using notepad++ for the html files and notepad for the css files. My site has a home/index.html page as well as 5 other content pages. What I did was created each each page in notepad++, with each page having its own css file.
What I'm having trouble with is it must have 1 css file that maintains a consistent look across your site / or link all pages to the same css external file. I'm not totally sure if those two mean the same thing that's why I list both of them.
I already have a style sheet in each html page that links to its css file. But I must have one css file for the entire site. Could I just copy and past each css file into one without it changing how each page looks? I would really appreciate it if someone could explain how I do this without it messing up the setup I have for each page.
Having all of your styles be consistent across the website is ideal. To achieve this, you have a single stylesheet and link all your pages to it using the <link> tag in the <head>.
It's a good practice to reuse as much CSS as you can, it'll save you time in the future and that's kinda the goal of a stylesheet versus inline styles.
To answer your question, yes you can combine all of our stylesheets together into a single stylesheet provided you do not have any duplicate class names. Notice in my example how I have a .class-for-index that is used in index.html but not in page.html and similarly for .class-for-page.
styles.css (your single stylesheet with all your classes)
body {
background-color: cyan;
}
.class-for-index {
color: red;
}
.class-for-page {
color: blue;
}
index.html (link to the single stylesheet)
<html>
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body class="class-for-index">
Page 1
</body>
</html>
page.html (link to the single stylesheet)
<html>
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body class="class-for-page">
Page 2
</body>
</html>
You've learnt an important lesson of the DRY principle - Don't Repeat Yourself. Maintaining many CSS files creates overhead - how many places do you want to define/change the styling for H1 for example? This is why you've been asked to have a single file.
I'd recommend taking the largest of your css files and making it the master. For each of the other files, add those elements that are missing from the master. It's tedious, but that's the problem you created ;)
You could just copy and paste each file into a single master file and it would work (this is css and the last definition will win), but it's poor practice and you'll just have problems editing it when you have to find the actual definition you are using.
Others have already explained how to link to a single css file from many pages.
I am assuming you aren't using PHP at all.
Maintaining consistent look across all your webpages is quite easy if done correctly.
basically you have two options:
1. Put all CSS blocks into a single file and link it to all pages
For example: add this to all HTML pages, this single style.css file has rules for all the HTML pages as well as the overall layout.
<head>
<link href="style.css" rel="stylesheet">
</head>
This style.css file can get messy and large if you have a lot of HTML pages.
2. Put CSS blocks that are related to overall design in one file; add individual page-specific CSS rules into new files and link these to their respective pages
For example: add this to a login page, the main.css file will give the overall layout like body background-color, font-family, font-size etc. etc. while the login.css is specifically tailored to the login.html page.
<head>
<link href="css/main.css" rel="stylesheet">
<link href="css/login.css" rel="stylesheet">
</head>
I personally prefer the 2nd approach because it's more easy to maintain and I have more control over my CSS without breaking other styles.
However if you decide to follow the 1st technique, it is advisable to separate strictly page specific CSS (styles that are being only used by as single page) by comment lines. This makes the file more readable.
I think a single css file to be created and linked to all pages. You can create multiple css files too but one css file would be easy to maintain and once your index.html loads the css file would get cached in the browser.
Each file within your solution just needs to link to that one unified external stylesheet via a link tag in the head of the document:
<link rel="stylesheet" type="text/css" href="/path-to-mystyle.css">
Google "create external stylesheet" for many resources on this!
You can create a separate CSS file and put all of your "common" CSS into that, call it main.css for example. This is CSS for tags such as p, h1, h2, ul, li etc to set fonts and margins etc across the whole site since these should not really change between different pages.
You can include that file on all of your pages.
Then beneath that file you can include a page specific CSS file with CSS for that page only. That will have CSS which is for the layout of that specific page like background-images etc.
This is creating external css file:
In Index.html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Other pages,
Page-1.html:
Put the same css file,
<link rel="stylesheet" type="text/css" href="mystyle.css">
Same as put css file for page-2.html and likewise..
Note: Latest of html, no need to put type="text/css" for create external css file.
It isn't fantastic practice to have 1 CSS file for all pages in a site, especially if you are styling selectors like h1, a, p etc... very differently per page.
But allejo has a great, simple approach to it.
Since the project calls for 1, just make sure you don't override the styles of elements on pages you want styled differently. If it means adding some additional divs to encompass tags on multiple pages to not lose points then go for that.
IE:
.about_page h1{
...}
.home_page p{
...}
etc...
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.
My html and css won't link the css is suppose to make the Hayes and Ash words red on the header. My code:
<!DOCTYPE html>
<html style="background-color:#FFA100;>
<head>
<link rel="stylesheet" type="text/css" href="C:\Documents and Settings\Test.DOBRUSKY\Desktop\stylesheet.css"/>
<title>Hayes and Ash</title>
</head>
<body>
<h1>Hayes and Ash<h1>
<div id="hayes">
<img src="http://i.imgur.com/xXSDVAm.jpg?1"/>
<p>I am Hayes harharhar</p>
</div>
<div id="ash">
<img src="http://i.imgur.com/zcBLpU6.jpg?1"/>
<p>This is Ash I am very fluffy!</p>
</div>
</body>
</html>
The href link:
href="C:\Documents and Settings\Test.DOBRUSKY\Desktop\stylesheet.css"
should be a URL, not a local file system path. And it can be relative to the location of the HTML document, such as:
href="stylesheet.css"
or
href="http://www.example.com/somewhere/out/there/stylesheet.css"
<link rel="stylesheet" type="text/css" href="stylesheet.css">
Link the css file this way as show above and check it also
Close the h1 tag
<h1> Hayes and Ash </h1>
The color may be applied to all the text in the body.
You are making a direct reference to your local computer in your link statement.
C:\Documents and Settings\Test.DOBRUSKY\Desktop\stylesheet.css
The best practice is to put your style sheets in a folder inside your project, then reference the style sheet there. Your href reference would look like this if you put your style sheet in a folder named "styles".
href="~\styles\stylesheet.css"
You can of course put your stylesheet inside your project's main folder if you want but it's nice to have the folder structure for adding more css files to your project.
Check out Method 3 in the following article.
http://html.net/tutorials/css/lesson2.php
That same problem happened to me two days ago.
I tried many different ways to type in the src. None of them worked. Double checked them and triple checked them, in case of missing character or typo error.
Finally, the problem I found was that I created the directories and files with powershell. CSS file had no issue, but the html file didn't like to be created from the powershell (I don't know the reason for that) (that problem didn't occur using the terminal at Macbookpro). So I opened a notepad, and pasted the exact same code from the previous file (the one created using echo command at powershell), saved it as .html and then, the css file linked with the html and styled it just fine.