I am creating a HTML/CSS page which has 4 link,
Home.html
Details.html
ContactMe.html
AboutUs.html
I want to keep this as Header in all the HTML pages associated.
Also the Page has a Footer which contains the a tagline sentence.
How do I avoid Coding the Header and Footer in all the HTML pages.
Thanks!
see : http://www.w3schools.com/php/php_includes.asp
there are examples of simple PHP scripting
if you can use PHP (i recommend) then you can simply include your header file:
eg. index.php:
<html>
<head>
</head>
<body>
<header>
<? include('header.html'); ?>
</header>
</body>
</html>
If you have to strictly use HTML then you can load html content with jQuery
eg. index.html:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("header").load("header.html");
});
</script>
</head>
<body>
<header></header>
</body>
</html>
UPDATE:
In header.html you can have your menu as ul list
<ul>
<li>Home</li>
<li>Details</li>
<li>Contact Me</li>
<li>About Us</li>
</ul>
Related
When we code in html5 we usually write code in this format
<!DOCTYPE html>
<html>
<body>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
</body>
</html>
And like this
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Author: Hege Refsnes</p>
<p>hege#example.com</p>
</footer>
</body>
</html>
My question is why we do not write them separately when all the three tags has different semantic meaning? I mean this way
<!DOCTYPE html>
<html>
<head>
</head>
<header>
<nav>
<!-- Navigation Bar -->
</nav>
</header>
<body>
<p> Middle stuff of the website here. </p>
</body>
<footer>
<p>Author: Hege Refsnes</p>
<p>hege#example.com</p>
</footer>
</html>
My question is why we do not write them separately when all the three tags has different semantic meaning?
Because the semantic meaning they have isn't what you think it is.
The <head> contents data about the document while the <body> contains the parts of the data that get rendered.
A <header> and <footer> contain a header and footer for something which could be the <main> part of the document, or could be a <section> or something else.
I am trying to make an unordered list with clickable links, but none of them appears like that.
<!doctype html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<header>
<nav>
<h1>My Page</h1>
<ul>
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
</ul>
</nav>
</header>
</body>
</html>
I was expecting a list of clickable links, but I get a list containing the set items but without their clickable links.
I am new to web developing so I am assuming I have overlooked something.
edit: I am using a plugin named Emmet whivh I used to make the block/section.
you should write words into link content
like:
sampletest1
The problem is that you are closing the anchor tag before the content.
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
It gives nothing because there is no label for the anchor tag.
You should change like
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
This is because you must write your text inside the a-tag,
like this:
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
<!doctype html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<header>
<nav>
<h1>My Page</h1>
<ul>
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
</ul>
</nav>
</header>
</body>
</html>
I'm having some trouble connecting my CSS file to my HTML file. This is my code for the HTML file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=“styles.css">
<title> BLAH BLAH | Portfolio </title>
</head>
<body>
<div class =“links”>
<ul>
<li><a href=“#”>ABOUT</a></li>
<li><a href=“#”>PROJECTS</a></li>
<li><a href=“#”>CONTACT</a></li>
</ul>
</div>
<h2> BLAH BLAH </h2>
</body>
</html>
and this is my CSS file so far:
.links li{
display:inline;
}
I'm just trying to get the lists (about, projects, contact) to be presented in a straight line on the top of my page. However, even after applying the css code, the format doesn't change on my webpage and is instead presented on three separate lines. I was wondering if someone could help me figure out what I'm doing wrong?
BTW my CSS file is called styles.css
You're not using the quotes for the href.
<link rel="stylesheet" href=“styles.css">
<!-- ^ -->
This is the reason the CSS file is not loaded.
Use normal double quote.
<link rel="stylesheet" href="styles.css">
The same thing is done in complete code. Change this in all the occurrences.
.links li {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="styles.css"> -->
<title>BLAH BLAH | Portfolio</title>
</head>
<body>
<div class="links">
<ul>
<li>ABOUT
</li>
<li>PROJECTS
</li>
<li>CONTACT
</li>
</ul>
</div>
<h2> BLAH BLAH </h2>
</body>
</html>
I'd recommend you to validate your HTML from W3
<link rel="stylesheet" href=“styles.css"> assuming that the file name of your stylesheet is styles.css AND that file is located in the same file as your HTML page you are referencing this correctly.
Additionally you can try adding the type to your link tag (example below)
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
just change the “ with "
because of this syntax error: browser generates the following error:
GET file:///C:/Users/Md.%20Alamin%20Mahamud/Desktop/New%20folder/%C3%A2%E2%82%AC%C5%93styles.css%22 net::ERR_FILE_NOT_FOUND
the following snippet will work fine
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title> BLAH BLAH | Portfolio </title>
</head>
<body>
<div class ="links">
<ul>
<li>ABOUT</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
</div>
<h2> BLAH BLAH </h2>
</body>
</html>
This is an edit of the original question:
When using the ng-include directive to reuse my header HTML on all pages, there is a slight delay in loading/rendering the top navbar. To alleviate the problem, I'm attempting to point ng-include to a header.html file that contains <script type='text/ng-template' id='header.html>...</script> so that it pre-loads the partial.
But I can't seem to get it to work. I've only had success when sticking the contents of header.html directly in index.html, which defeats the purpose of reusing the header code.
The docs for script only give an example of using an inline template, and the docs for ngInclude don't use script in the example templates.
Can ngInclude load a file that uses angular's script directive?
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Testing</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css">
<script src='lib/angular/angular.js'></script>
<script src='js/main.js'></script>
</head>
<body>
<div ng-controller="HeaderCtrl">
<div ng-include src="header.url"></div>
<!-- script works when it is put directly in index.html:
<script type="text/ng-template" id="header.html">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>
<a class="brand" href="#">Test</a>
</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
</div>
</script>
-->
</div>
</body>
</html>
header.html:
<script type="text/ng-template" id="header.html">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>
<a class="brand" href="#">Test</a>
</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
</div>
</script>
main.js:
"use strict";
// I've also tried this with "use strict"; removed
var myApp = angular.module('myApp', []);
function HeaderCtrl($scope) {
$scope.header = {name: "header.html", url: "header.html"};
}
<div ng-include src="header.url"></div>
should be
<div ng-include src="'header.url'"></div>
Not sure if this is what rjm226 meant by 'double quotes were necessary'. Both double and single are necessary for ng-include. I've been tripped up by this recently.
This works perfectly. Tried it on my server. Double quotes were necessary. What is with the "use strict"; That breaks it on my end.
I am a little confused now by html so i've a question about the semantic element:
Should i use like this?
<html>
<head>
<title>Some page</title>
</head>
<body>
<header class="main-header">
<!-- menu and imaganary logo -->
<nav>
<ul>
<li>Demo</li>
</ul>
</nav>
</header>
</body>
</html>
Or this?
<html>
<head>
<title>Some page</title>
</head>
<body>
<div class="main-header">
<!-- menu and imaganary logo -->
<nav>
<ul>
<li>Demo</li>
</ul>
</nav>
</header>
</body>
</html>
I read http://html5doctor.com/the-header-element/ about the header element. It tells that it usefull for the headings of a <article>
It doesn't give me information about this situation.
<header> is also good for the page header or for a <section>'s header not just for articles. You can use both your examples without a problem. I recommend you use <header> for easier readability.
According to the HTML Specification
The <header> element is intended to usually contain the section's heading (an <h1>-<h6> element or an <hgroup> element), but this is not required. The element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
So, you should probably go with the first example, although the second one too can be used without a problem.
Also you can directly use the header element in your CSS like below.
header {
// style the header
}