0

sorry if this has been asked before, I feel like I haven't been able to search for this properly even, or didn't find anything.

I just took a web development course, and am trying to build a website using Bootstrap. Since I want my webpage to have multiple pages, the header/navigation bar code ends up being largely the same for all of them, besides selecting which the 'active' tab is.

In general, is there a way to keep that all in a single file, and then import that into each page? I was thinking this would be helpful in case I/someone wanted to change the header, but then wouldn't want to update each page's header/nav code individually.

Thanks!

Artemis Sintimore
  • 1
  • 1
    possible duplicate of [Include another HTML file in a HTML file](http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) and http://stackoverflow.com/questions/3928331/equivalent-of-include-in-html – haxxxton Nov 25 '14 at 01:18
  • It entirely depends on the framework you are building with. – DavidG Nov 25 '14 at 01:21
  • @DavidG, he's not using any framework. – stormrage Nov 25 '14 at 01:23
  • @stormrage And you know this how exactly? – DavidG Nov 25 '14 at 01:31
  • Just a note, if you look at the Bootstrap "tabs" documentation you may find something that fits your needs. The header will be the same for each tab. – Pred Nov 25 '14 at 01:44
  • @DavidG because he just took a course, and seemed to me he's still dealing with HTML and CSS thing. so the solution you should give is either using javascript or HTML itself. – stormrage Nov 25 '14 at 01:47

3 Answers3

0

What are you asking about are dynamically generated pages.

First you download some "local server program", for example https://www.apachefriends.org/index.html which can be used on both linux and windows pretty easily and without trouble. Then you have to learn a programming language used to generate html content. This could be one of the web oriented languages, for example PHP. The you use your own coded functions to generate content through commands of the language (for example including the same part over and over again).

Orcist
  • 1
  • 1
0

I know this isn't much of an answer, but you should look into learning how to use angularjs. There are a ton of intro tutorials! Just in case you're unaware, it creates a SPA (Single Page Application) site. For example, in a rails app it uses an application.html.erb file that uses that code on all your pages throughout the entire app. So things like navbars are usually written in this file. Additionally angular make your page appear seamless! It also combines very nicely with bootstrap!

Beginner's Tutorial: http://www.toptal.com/angular-js/a-step-by-step-guide-to-your-first-angularjs-app

Language Tutorials: http://www.codecademy.com/ Love this site! They just added a rails app tutorial as well! It's in a beta phase, so there are a few bugs

gfofdirtbag
  • 26
  • 6
0

There are 2 approaches:

All of them pulls in an external html file and include that in all webpages:

Server side

That is if you have that installed on your server. I'll use PHP as an example of server-sided code:

PHP:

include_once("/path/to/my/menu")

HTML:

<?php include_once("/path/to/my/menu") ?>

Client side

This will work on all platforms with JS. The trick is AJAX. First, the browser loads the target webpage, then load in the menu.

Since using simple JS would be a fuss, you may use JQuery, a JavaScript library.

JS:

$(function() {
    $(".target").load("/path/to/my/menu");
})

HTML:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
    $(".target").load("/path/to/my/menu");
})
</script>
<div class="target"></div>

Please see: http://api.jquery.com/load/

Daniel Cheung
  • 4,258
  • 1
  • 25
  • 54