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
Related
I know that this question might sound stupid, but I'm a beginner so just hear me out. I have a nav bar with text but no links( About, Project, etc with no pages for the user to go to). How do I add the pages for the user to click on the nav bar and go to them( for example, when the user clicks on "About", he is transferred to the about page that I made). I'm using HTML5 and CSS3. Any help is appreciated!
Code for the list:
<ul class = "list">
<li>Welcome |</li>
<li>About |</li>
<li>Projects</li>
</ul>
Create a folder. Open a text editor and paste the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome</title>
</head>
<body>
<ul>
<li>Welcome</li>
<li>About</li>
</ul>
<h1>Welcome</h1>
</body>
</html>
Save the file as "welcome.html" in the folder you just created.
Create another text document and past the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>About</title>
</head>
<body>
<ul>
<li>Welcome</li>
<li>About</li>
</ul>
<h1>About</h1>
</body>
</html>
Save that file as "about.html" in the same folder.
Open "welcome.html" in your browser and see if it works.
The attribute href is the path to the file where it is located on your computer.
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.
I am quite new to using HTML coding. Basically, when i try to link my pages together via . If you can look at my coding, and please try and help me somehow, that would be great.
<html>
<head>
<title> Information about Birmingham </title>
<link rel="stylesheet" type ="text/css" href="style.css" />
<link rel="style" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="container">
<div id="Header">
<h1> Information|Birmingham </h1>
</div>
<div id="Nav">
<h2>
<ul style="list-style-type:none">
<li>Home</li>
<li>Shopping</li>
<li>Art</li>
<li>Food</li>
<li>Nightlife</li>
</h2>
The href tag to point to the html file you'd like to link to. If you home file is index.html it should be Home
The others would be something like this:
<li>Shopping</li>
<li>Art</li>
<li>Food</li>
<li>Nightlife</li>
Just keep in mind that these need to point to html files that are in your root directory.
Your links must include the full file name "i.e home.html rather than home" and you should also make sure that the files of the other pages are in the same directory as the current page for that to work.
Another problem in your code is that you forgot to close the <ul> tag. You must add </ul> just before </h2>.
Also, it is not recommended that you place your list inside a heading tag <h2> in your case. If you are doing this for styling reasons you should better use csss to style your list.
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
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/