I have two HTML documents that will be linked to the same site. How do I create a navigation menu that I will only need to edit once, for its changes to be applied to all HTML documents that menu is on?
I'm a beginner to HTML and have learnt the basics, but could you please help?
This is the menu code:
<ul>
<li>Home</li>
<li>About</li>
<li>Videos</li>
<li>Games</li>
<li>Apps</li>
<li>Contact</li>
</ul>
You will not be able to do this with just plain HTML.
Few Options :
Javascript - Using javascript you could append the navigation to each page.
PHP - Using PHP would be easiest and you could process your navigation as an include to your code.
In my opinion you should use php.. JavaScript is way overkill for this particular situation. What I typically do it create a series of php files that form the structure for my websites.
A Simple structure would be
head.php
index.php
create a php file named head.php, you can do this using notepad, notepad++, netbeans etc..
head.php
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- NAVIGATION SECTION HERE -->
<div class="nav">
<ul>
<li>First link</li>
</ul>
</div>
index.php or your other pages
<?php include "head.php"; ?>
<div>
content of html page
</div>
<div class="footer"></div>
</body>
</html>
If you notice at the top of index.php you see an include statement. This will add the head.php contents to any page that you call this include from. Since your navigation section is located in head.php, your navigation will be uniform throughout all of your pages.
For this to work, please make sure that your host allows you to use php.
If I understand correctly you need to include some HTML file to another.
With HTML less 5-th version you can't do this without javascript. The best solution to use jQuery if you don't want use PHP/Java/.NET solutions. But don't forget that you will need use local server (for example, Apache).
index.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" />
<script type="text/javascript" src="script.js"/>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
script.js:
$(document).ready(function(){
$.get("menu.html", function(data) {
$("#menu").html(data);
});
});
menu.html:
<ul>
<li>Home</li>
<li>About</li>
<li>Videos</li>
<li>Games</li>
<li>Apps</li>
<li>Contact</li>
</ul>
JQuery: jquery.com
Docs: api.jquery.com/html
Related
I created a website for my mom a while back and I finally want to make it cleaner and make a universal header and footer so that I only have to change the one document when I update it instead of every page. I spent a while looking around, but I was unable to make anything work. I have a good understanding of HTML and CSS, but I'm pretty much a novice and haven't really used javascript, if thats what this entails, so detailed help would be really appreciated! How do I go about this? (If it matters, the website is hosted on DreamHost).
Here is the basic HTML code I have for the header and footer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="wrapper">
<header>
<img src="img/logo.png" alt="(logo)">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PRODUCTS</li>
</ul>
</nav>
</header>
<footer>
<p> Email: email#gmail.com </p>
<div id="logo">
</div>
</footer>
</body>
</html>
You can use a library like react or a framework like angular 2 or vue js to extend the HTML
You could use PHP to do this. You would simply include header.php for example. It is possible to use any other server-side code.
It is also possible with JavaScript, but keep in mind that JavaScript is executed on the Client side, so that some users could experience issues due to deaktivated javascript inside the browser.
Below is an attempt to link pages together using a menu.
<html>
<head>
<title>Home</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<article id="logo_section">
<img src="webpage_logo.png" alt="logo.png">
</article>
</header>
<nav>
<ul>
<li>Home
</li>
<li>Gallery
</li>
<li>About Us
</li>
<li>Contact us
</li>
</ul>
</nav>
</body>
</html>
My idea was to link pages together in a navigation bar and a logo.
All of the HTML pages are within the same folder and they are spelt correctly in the references. I checked.
First off all, your code for linking has no problems, so everything points at you forgetting to create the files in the same directory, or not creating it at all.
Also, you haven't declared your document (done using at the top of your page), so the browser will just assume that it is html 4.01, and since is new in html 5, your nav tag doesn't do anything, I could mention a couple more errors, but you can locate them yourself here: https://validator.w3.org/#validate_by_input
I have a navigation bar that I want to have in a seperate html file and then use in all my other pages. I feel like it will make the code look neater and more organized. However, I'm having some trouble. I started by trying to fix the home page and this is what I have:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="import" href="navigation.html">
</head>
<body>
<br><br>
<div class="zoom pic">
<center> <img src="images/technology.png" alt="portrait"> <center>
</div>
</body>
</html>
This is the navigation bar in a seperate html file, but in the same exact directory as all my other html files.
This is the navigation.html file if it helps anything:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<center> <b>World Congress CS-IT Conferences 2016</center>
<div id="horizontalmenu">
<ul>
<li>Home<br/></li>
<ul> <li>General Information <ul>
<li>About</li>
<li> Conference Fee</li>
<li>Hotel</li> </ul>
<li>Keynote Speakers<br/></li>
<li>Call for Papers<br/></li>
<li>Important Dates<br/></li>
<li>Major Areas<br/></li>
<li>Paper Submission<br/></li>
<li>Login<br/></li>
<li>Registration<br/></li>
<li>Conference Program<br/></li>
<li>Guidelines<br/></li>
<li>Comments<br/></li>
</ul>
</nav></b>
My current issue is that I'm not seeing the navigation bar now in my home page! Any ideas on how tackle this? Any help is greatly appreciated!!!!
PHP helps you do this.
Keep your navigation bar code in navbar.php file and include this file in a page you want the navigation bar. For example if you want to include the navigation bar in index.php file, you can just include it like this.
include_once("navbar.php");
You need a server to run php code. You cannot directly include a HTML file in an other HTML file.
This can be done using jQuery also. here, u write nagivation bars html in navigationBar.html and in whichever page u want to include it in, create an empty element with id #nav and in script replace the contents of it.
$.get("navigationBar.html", function(data){
$("#nav").replaceWith(data);
});
this can also be done using html5 imports tag http://blog.teamtreehouse.com/introduction-html-imports
check this link if u want.
This question already has answers here:
What are the new frames? [closed]
(3 answers)
Closed 9 years ago.
I'm ultra newbie in html/css/whatever in web and I'm trying to build my own website. Let's say I have two parts of my website - top with logo and menu, and bottom with the content. Which tools do i need to keep this separately? I mean - only one file with 'upper things' (because I don't want to edit it on every subpage) and other files with subpages? Do I need php for this?
Is a good thing to use<iframe> in my case?
A server side language like php is the way to go. A server side language will give you the ability to do what is called a server side include.
So for example you can create one file called header.php and place all your code from the opening <html> tag to whatever else will constantly be at the top of your website. You might want to take this even further and create a footer.php to put all the code that will constantly be at the bottom.
Example header.php
<!doctype html>
<html>
<head>
<title>My Awesome Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Menu Link 1</li>
<li>Menu Link 2</li>
<li>Menu Link 3</li>
</ul>
</nav>
</header>
<div id="main">
Example footer.php
</div><!-- end #main -->
<footer>
My Awesome website's Footer content!
</footer>
</body>
</html>
Now to put them together on our homepage or index.php
Example index.php
<?php include 'header.php'; ?>
<h1>Welcome to my home page!</h1>
<p>This is my super awesome site and I hope you like it!</p>
<?php include 'footer.php'; ?>
The final output sent to the browser would be the following:
<!doctype html>
<html>
<head>
<title>My Awesome Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Menu Link 1</li>
<li>Menu Link 2</li>
<li>Menu Link 3</li>
</ul>
</nav>
</header>
<div id="main">
<h1>Welcome to my home page!</h1>
<p>This is my super awesome site and I hope you like it!</p>
</div><!-- end #main -->
<footer>
My Awesome website's Footer content!
</footer>
</body>
</html>
If you want to do it purely in HTML then the only way of doing it via iframe, but it is not the best way and discourage by many developers because you loose deep link, since whole site has the same address.
The better option would be to use server side programming model such as PHP, ASP.NET, Ruby...
No you don't have to use php for this. You can also use general ssi include files if you'd rather not use php. Using php requires a server that is set up to parse for php (that's another topic :). An example might look like...
<body>
<div id="header">
<!--#include file="includes/header.ssi"-->
</div>
<div id="menu">
<!--#include file="includes/menu.ssi"-->
</div>
<div id="footer">
<!--#include file="includes/footer.ssi"-->
</div>
</body>
As the include file path suggests, there is a dir called 'includes' in your root folder from which your ssi content is called. The ssi files are using regular html markup and any IDs or CLASSes still obey your css.
I want to introduce tabs into my Django web application. I going to see if I could just doo it all in css + html. Now while practising with tabs from http://www.htmldog.com/articles/tabs/, this is what I have done so far.
page1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN" >
<html>
<head>
<link rel="stylesheet" type="text/css" href="base.css" />
</head>
<base>
<div id="header">
<h1>Tabs</h1>
<ul>
<li id="selected">This</li>
<li>That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
</base>
</html>
page2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN" >
<html>
<head>
<link rel="stylesheet" type="text/css" href="base.css" />
</head>
<base>
<div id="header">
<h1>Tabs</h1>
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
</base>
</html>
Now page1.html, and page2.html are almost the same. The only thing that is different,
id="selected" part just to indicate which tab has been selected. So what I want to do is remove any code that is redundant. For start, I wonder if it even possible I could even cut it to one index.html page as well.
You can't have one page with two different states using CSS + HTML only. Setting of id="selected" needs to result from come code somewhere, either on the server, or on the client.
You can use a URL hash to set the tab state using JavaScript. For example:
mypage.html#tab1
You can have JavaScript look at the value of document.location.hash and set selected on the appropriate tab.
I wouldn't try to reinvent the wheel. Check out jQuery UI. Has tabs built in. http://jqueryui.com/demos/tabs/