I have found many solutions for this question through JavaScript, but I want to be able to have a website that does not require JavaScript so as to be friendly with non-JS web browsers. I am trying to have a navigation bar on multiple websites without needing to change every HTML page whenever I want to make an update. How can I achieve this? Could I load an HTML file without JS?
If you do not want to use javascript, the other option would be to use PHP to include the files on all the pages you would require the navbar. So essentially, you would copy the navbar snippet into a single file, then using PHP methods (require or include), to add the snippets on all other pages. This way, you only need to edit that navbar snippet you copied whenever you need to make a change and it'll take effect on any page you have either required or included. More info on how to use include and require here
Related
I know that this question is not more coding based. But this can cause many problems practically.
I have a website with 10 pages. Each page has the same navigation. Now if I want to change the navigation a little to include a hamburger menu, I will have to make this change in each page one by one. Is there any way in which I can make this common change to all the pages at the same time?
I browsed for this on SO but the answers to a similar question asked to use PHP or WordPress. Is there any method or tool other than them for my requirements?
With HTML, I don't think there's any support for that kind of dynamic feature yet.
However, if you seek to want to make changes on a portion of your website and see it apply to every other page on your website that has the same portion, there are frameworks, libraries and even template engines that support such.
You may need to use HTML alongside these tools or just use them to replace HTML. For instance, when building a website with Node and Express, there are a good number of template engines that you can make use of that can be used alongside HTML to make your website dynamic. I would recommend that you try out one of the following: pug, ejs, handlebars. I believe you can achieve that level of dynamism with one of them.
You can also decide to use front end libraries or frameworks like react, vue and angular. These tech tools enable you to create a portion of a website(called a component) once and reuse it on as many pages as you want. Anytime you make a change to that component, it automatically adjust itself on every other page it has been inserted.
TLDR: What is the standard/best practice to organize the different HTML sites/files, when using a navigation bar, that should be visible on every site?
Background: I'm starting for the first time to create a website. It should run on an ESP and I got some good results with Bootstrap 4. I've defined a Bootstrap navbar, just like in all the examples (for example here on w3schools). Though the examples only use do-nothing links; they don't show how these links are commonly used with the navbar and the different files (this must be a general principle, that I don't know).
The navbar should of course be visible on every site, while the content below it should change according to the clicked link. When I simply use a link in the navbar to a different html file without a navbar included it is of course not visible.
How are the different sites normally organized in relation to the navbar?
I have thought of different possibilities:
Having a navbar in every file (obviously a nightmare to maintain)
Having the navbar in an extra file, including it somehow in every other file
Managing all the content in the main file together with the navbar, including the other content files somehow
At my current knowledge I just don't know enough, so I also don't know what to search for. If there are already good information about this on the web, can you please provide me with search words or links?
If you are planning to use HTML then there is no other choice. You need to add a navigation bar to each page which is a nightmare as you have mentioned. But if you are planning to use server-side programming languages like PHP then they provide a keyword called include. Its syntax is include 'filename' now you can add a file like header.php inside include folder and you can use across multiple pages. You can have a look in this documentation
.But if you are using NodeJS, ExpressJS then they have their own templating-engines like ejs, handlebars, pug. They consist of partials So, that partials can be use across multiple pages. Here is the link for partials
Though the answer of kedar sedai is the correct one, I want to add my chosen way and further information as documentation for future readers.
kedar sedai is right, that I need to use some programming language. One problem is, that I cannot use server side programming languages, because the ESP does not support them. So I needed to move to client site programming, thus javascript.
I used the solution of this SO question to include another HTML file. I now serve only the main HTML file, which contains the navbar and the following part to load the correct HTML file dependent on the page parameter in the URL:
<div class="container-fluid" id="content" style="display:block;overflow:visible"><br>
<script>
$(function(){
var url = new URL(window.location.href);
var c = url.searchParams.get("page");
if(c != null){
$("#content").load(c+".html");
}
});
</script>
</div>
This works like a charm and I now have notion how I can organize my html files to be displayed with the navigation bar.
What is the best practice for having my nav at the the top of all mt web pages. E.g, home and about both have the nav. Do I have to repeat the code or is there a better practice?
This may depend on the languages you're writing your website in, but one way to do this would be to put all of the code for the nav bar in a separate file and then include that file on every page that you'd like the nav bar to appear on.
If you're using PHP, for example, you could put all of the nav bar code (even if it doesn't include PHP code and is just HTML or CSS) into a navbar.php file and then use the PHP include statement to reference the code that's in the navbar.php file, like this:
include 'navbar.php';
By doing this, it would also make it easier to update the nav bar, as you would only need to update the code in one file, with the updates displaying on every page that includes the original navbar.php file.
One thing to note is that you'll need to use PHP on your webpages, and if you're developing locally, you'll need to have a server running PHP installed on your computer in order to actually see this. If you're looking for a PHP development environment, XAMPP or MAMP are some good options.
use a single file for header and include it on any page you want, not possible in html you need something like php to do it.
instead of using css to design a nav bar you can use bootstrap its better language than css. It has 101 predefined templates.
I'm new at HTML and need to do a simple site as an assignment. For the site navigation menu I guess it would be easy to simply copy and paste the navigation menu HTML onto all the pages in a header div. But is there a better way to do this?
for example, is there an easy way (that doesn't require scripting) to only write the code in one place and have it included on every page? I remember that I did something in Dreamweaver that created a template page that included the navigation menu. However I have a feeling that that was just copying html between pages.
Without scripting your HTML files will need to contain the menubar in full.
You are describing what a server side scripting language can do. Without one - your HTML files are served as they are. Therefore they must contain the HTML for the menubar within them.
The comments mention using an iframe - though very creative - I believe it doesn't satisfy as being "a better way to do this"
You have must use HTML code every page without HTML does't work Try to learn some basic PHP it will help
I have made a couple of simple Joomla websites before. Those are using a custom template made by myself. They are easy websites as they have a simple linear menu, all pages have the same layout, just some articles are changing between pages.
But in my new project, I have a ready html website that I have to convert to Joomla. The problem is, there is no one repeating menu and there is no consistent layout. To simplify a bit: there are 10 pages and they all have different layouts. Between pages background changes, menu position changes, menu content changes, content box positions change, everything changes. This means I'm not able to do this site as I've done before, using one template index.php which simply contained my repeating page structure.
I am dreaming of a way to simply change ready_page1.html to ready_page1.php, adding some modules inside the php (which are then available for online editing, which is the reason switching to Joomla). I would do this to each page. The custom menus inside each page I would "manually" point to the according php files instead of the old html files. Is this method possible somehow? I couldn't figure out how to do this.
I don't care loosing lots of Joomla basic functionality due to this crude method, I just want the simplest way to do this.
In the end, I just want the exact same website I already have on html, but I want some chosen rectangular areas in the html pages to be editable Joomla modules. The modules would have the pen icon for editing. That's it, no other functionality is necessary.
Sounds like the site you are converting is a usability nightmare. Consistency is part of giving the user a positive experience. That said, if you have to make it exactly the same, then the easiest way is to do it the right way to begin with.
First, you need to learn about page class suffixes. You can add those to a menu item so that you can control the CSS on a per page basis. This will allow you to change backgrounds and other elements on each page.
Documentation - http://docs.joomla.org/Page_Class_Suffix
Next, you will need to make a template so that each of the module positions is collapsible. If you plan out the positions, you should be able to use a single index.php for the entire site. We have a custom template that we use for every site we do and it rarely needs to be touched because all of the positions we would possibly want to use are already there, they just don't get used until a module is put in the position.
Documentation - http://docs.joomla.org/Collapsing_columns
You will also want to make sure you understand menu assignments. You should be able to assign the modules to the pages as needed to create the layout you want for each page. If you are using 2.5.x, then you can probably get by with the built in menu assignment features. If you are using 1.5.x then (you really should upgrade) you will probably want to use Advanced Module Manager as it makes menu assignments much easier and more flexible.
Documentation - http://docs.joomla.org/Help15:Screen.modules.edit.15#Menu_Assignment
Once you get a good grasp of how Joomla templates work and how they are supposed to be used you will find that you can basically do anything you want within the framework so you don't lose any functionality.
build your website and create those 10 pages (contents, heirarcy, and so on..).
then create your templates based on those html files. this is where you adapt the html into a joomla template. after this step, you should end up with at most 10 templates depending on your styles (crude but quick)
as far as i know and from the documentation, Joomla 1.7 supports "template per page" (see the screenshot). you can pick out which style will be applied to which item. it even applies to subpages. another documentation here