How to make navbar on all pages? - navbar

would i use php include? And in order to do so do my files have to be uploaded to a web host? since it is a server side language?
I have tried php include before but it does not work(below is the navbar.php
file)
enter code here
<nav>
<ul>
<li>
Home
</li>
<li>
About me
</li>
<li>
Contact me
</li>
</ul>
</nav>
ANYTHING will help
thanks
enter code here
<!DOCTYPE html>
<html>
<head>< ?php include 'aboutme.php'; ?></head>
<body>get it now</body>
< ?php include 'aboutme.php';

Related

Nav bar with different pages

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.

Why are the hyper links in the html failing to relocate to other pages?

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

Navigation menu for all pages in HTML

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

local path generated before hyperlink and page not found error the code <a href=“https://delicious.com/jodi.reed/browsers”> link </a>

I’m just trying to insert an html absolute link to my texteditor on Mac and I get this on the browser url:
file:///Users/yasser/Desktop/211Website/Labs/https://delicious.com/jodi.reed/browsers...
and file not found in Firefox or Chrome or Safari. When I delete the path before the http the page opens fine...
The code is below-
<!DOCTYPE html>
<html>
<!-- Lab2 Yasser Abdelhalim -->
<head> <meta charset="UTF-8">
<title> Lab2 Yasser Abdelhalim </title>
</head>
<body>
<h1> Yasser’s Web Development resources </h1> this is description for heading number one
<div>
<h2> Background </h2>
<ul>
<li><a href=“delicious.com/jodi.reed/browsers”>link</a></li>
<li><a href=“delicious.com/jodi.reed/browsers”>link</a></li>
<li><a href=“delicious.com/jodi.reed/browsers”>link</a></li>
</ul>
<h2> Web programing </h2>
<ul>
</div>
</body>
</html>
I think (without seeing anything else) you just need to add the initial part of your URLs, as your ocmputer is thinking they're local, relative files (in the same directory as the file with this code in).
Try using this code:
<!DOCTYPE html>
<html> <!-- Lab2 Yasser Abdelhalim -->
<head>
<meta charset="UTF-8">
<title>Lab2 Yasser Abdelhalim</title>
</head>
<body>
<h1>Yasser’s Web Development resources</h1> this is description for heading number one
<div>
<h2>Background</h2>
<ul>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
</ul>
</div>
</body>
</html>
Try typing the full address in here, including speech marks (double quotes).. sometimes when copying and pasting URLs it copies the formatted speech marks from some fontstyles.
Apache is the webserver that runs on Linux, it pretty much is a foundation or base of every website around (with some exceptions).
Are you using Windows or Mac? You would be better to be working in a proper web server environment (I can explain)

How to keep content separately from top part of webpage [duplicate]

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.