Jump to content

how to link other html files in html

prolemur

I want to use a single file to handle my websites navigation.

 

How would I link this file on my other pages, is it something similar to linking a style sheet?

 

Thanks :)

Link to comment
Share on other sites

Link to post
Share on other sites

If you want to have one CSS stylesheet for multiple pages put this in the <head> 

<link rel="stylesheet" type="text/css" href="YourFileName.css">

[CPU: AMD FX-6100 @3.3GHz ] [MoBo: Asrock 970 Extreme4] [GPU: Gigabyte 770 OC ] [RAM: 8GB] [sSD: 64gb for OS] [PSU: 550Watt Be Quiet!] [HDD: 1TB] [CPU cooler: Be Quiet! Shadow Rock Pro Sr1]  -Did i solve your question/problem? Please click 'Marked Solved'-

Link to comment
Share on other sites

Link to post
Share on other sites

 

If you want to have one CSS stylesheet for multiple pages put this in the <head> 

<link rel="stylesheet" type="text/css" href="YourFileName.css">

I want to have one <nav> file instead of having one on each page, I already have a single style sheet

Link to comment
Share on other sites

Link to post
Share on other sites

I want to have one <nav> file instead of having one on each page, I already have a single style sheet

Ugh.. you'll probably want to move to using PHP to do that, HTML is not designed to reduce the codebase.

Arch Linux on Samsung 840 EVO 120GB: Startup finished in 1.334s (kernel) + 224ms (userspace) = 1.559s | U mad windoze..?

Link to comment
Share on other sites

Link to post
Share on other sites

Ugh.. you'll probably want to move to using PHP to do that, HTML is not designed to reduce the codebase.

Ugh.. I guess I'll get the main site ready to go and then add this after I learn some PHP, was hoping there was a way in HTML.

 

Thanks, nice signature. I'm probably going to be using Linux within the month as I barely game anymore.. :(

Anything you can suggest about it, I'm guessing you'd recommend Arch Linux over Windoze :)

Link to comment
Share on other sites

Link to post
Share on other sites

Ugh.. I guess I'll get the main site ready to go and then add this after I learn some PHP, was hoping there was a way in HTML.

as suggested, there is a very simple way to do that in SSI

 

frames are the only alternative that HTML offers without the need of any script, but it's getting deprecated so you might not want to use that

 

also consider that it's not a matter of efficiency: putting the <nav> in every single file will only make the website a few kilobytes bigger, which will have no impact at all on any performance (i'm referring to what you wrote in the first post before editing it)

you should do that because just like css' external stylesheets, you will only need to edit one file and the change will apply to all the pages on your website

Link to comment
Share on other sites

Link to post
Share on other sites

Ugh.. I guess I'll get the main site ready to go and then add this after I learn some PHP, was hoping there was a way in HTML.

 

Thanks, nice signature. I'm probably going to be using Linux within the month as I barely game anymore.. :(

Anything you can suggest about it, I'm guessing you'd recommend Arch Linux over Windoze :)

If its your first time using linux, you'll want a friendly distro like ubuntu. Arch is a lot more complicated to use.

Arch Linux on Samsung 840 EVO 120GB: Startup finished in 1.334s (kernel) + 224ms (userspace) = 1.559s | U mad windoze..?

Link to comment
Share on other sites

Link to post
Share on other sites

as suggested, there is a very simple way to do that in SSI

 

frames are the only alternative that HTML offers without the need of any script, but it's getting deprecated so you might not want to use that

 

also consider that it's not a matter of efficiency: putting the <nav> in every single file will only make the website a few kilobytes bigger, which will have no impact at all on any performance (i'm referring to what you wrote in the first post before editing it)

you should do that because just like css' external stylesheets, you will only need to edit one file and the change will apply to all the pages on your website

 

Ya I was too lazy to write all my reasoning behind it and I even had a had time understanding what I was asking for in the first post, so I made changes :)

If its your first time using linux, you'll want a friendly distro like ubuntu. Arch is a lot more complicated to use.

I'm feeling like a challenge :D I'll download the iso and setup a boot flash drive for when I'm ready.

Link to comment
Share on other sites

Link to post
Share on other sites

Ya I was too lazy to write all my reasoning behind it and I even had a had time understanding what I was asking for in the first post, so I made changes :)

I'm feeling like a challenge :D I'll download the iso and setup a boot flash drive for when I'm ready.

Well.. you don't even get a window manager or anything, everything is from the CLI on the live version of arch.

And after you get arch installed, again you are left with pretty much nothing, just enough to start installing the things you will need. I really really don't advise it.

Arch Linux on Samsung 840 EVO 120GB: Startup finished in 1.334s (kernel) + 224ms (userspace) = 1.559s | U mad windoze..?

Link to comment
Share on other sites

Link to post
Share on other sites

There are different ways of doing this, server side or client side. I'd go for server side what this means is that the server will read the file you told it to include and copy all the code into the place where you have called the file to be included. So you'd have 2 files like this

 

navigation.php

<ul>  <li>PAGE 1</li>  <li>PAGE 2</li>  <li>PAGE 3</li>  <li>PAGE 4</li>  <li>PAGE 5</li></ul>

Page File

<body>  <div class="logo">LOGO</div>  <div class="idk some other div before the navigation"></div>    <!-- THIS WILL BE THE SERVER SIDE CODE WHICH WILL COPY OVER THE navigation.php -->  <?php include("navigation.php");  ?>    everything else after the navigation</body>

When you have this uploaded onto a server, whenever you go to the page file e.g. index.php. The server will read the included file in this case navigation.php and it will copy all that code and replace the include code with it so the final results will be this

<body>  <div class="logo">LOGO</div>  <div class="idk some other div before the navigation"></div>    <!-- Here you can see that the include line has been replaced with the file content --> <ul>   <li>PAGE 1</li>   <li>PAGE 2</li>   <li>PAGE 3</li>   <li>PAGE 4</li>   <li>PAGE 5</li> </ul>    everything else after the navigation</body>

If you'd do this client side then you'd tell the browser (not the server) to show the file (not replace the code) with the file you mentioned (navigation.html)

To do this it would be the same concept so you'd have 2 files like so

 

navigation.html

<ul><li>PAGE 1</li><li>PAGE 2</li><li>PAGE 3</li><li>PAGE 4</li><li>PAGE 5</li></ul>

Page File

<body><div class="logo">LOGO</div><div class="idk some other div before the navigation"></div><!-- THIS WILL TELL THE BROWSER TO SHOW THE FOLLWING FILE --><!--#include virtual="navigation.html" -->everything else after the navigation</body>

and then the navigation.html file will be shown but when you look in the code you can still see the method which would tell the browser to show the navigation (<!--#include virtual="navigation.html" -->)

Link to comment
Share on other sites

Link to post
Share on other sites

Thanks @Nallown

 

Those examples made it much easier to understand and I'll get on that php soon.

Link to comment
Share on other sites

Link to post
Share on other sites

There are different ways of doing this, server side or client side. I'd go for server side what this means is that the server will read the file you told it to include and copy all the code into the place where you have called the file to be included. So you'd have 2 files like this

 

navigation.php

<ul>  <li>PAGE 1</li>  <li>PAGE 2</li>  <li>PAGE 3</li>  <li>PAGE 4</li>  <li>PAGE 5</li></ul>

Page File

<body>  <div class="logo">LOGO</div>  <div class="idk some other div before the navigation"></div>    <!-- THIS WILL BE THE SERVER SIDE CODE WHICH WILL COPY OVER THE navigation.php -->  <?php include("navigation.php");  ?>    everything else after the navigation</body>

When you have this uploaded onto a server, whenever you go to the page file e.g. index.php. The server will read the included file in this case navigation.php and it will copy all that code and replace the include code with it so the final results will be this

<body>  <div class="logo">LOGO</div>  <div class="idk some other div before the navigation"></div>    <!-- Here you can see that the include line has been replaced with the file content --> <ul>   <li>PAGE 1</li>   <li>PAGE 2</li>   <li>PAGE 3</li>   <li>PAGE 4</li>   <li>PAGE 5</li> </ul>    everything else after the navigation</body>

If you'd do this client side then you'd tell the browser (not the server) to show the file (not replace the code) with the file you mentioned (navigation.html)

To do this it would be the same concept so you'd have 2 files like so

 

navigation.html

<ul><li>PAGE 1</li><li>PAGE 2</li><li>PAGE 3</li><li>PAGE 4</li><li>PAGE 5</li></ul>

Page File

<body><div class="logo">LOGO</div><div class="idk some other div before the navigation"></div><!-- THIS WILL TELL THE BROWSER TO SHOW THE FOLLWING FILE --><!--#include virtual="navigation.html" -->everything else after the navigation</body>

and then the navigation.html file will be shown but when you look in the code you can still see the method which would tell the browser to show the navigation (<!--#include virtual="navigation.html" -->)

 

they're both server side

Link to comment
Share on other sites

Link to post
Share on other sites

Probably something server-side, or a JS file that adds in the nav or something.

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×