Menu from external file [duplicate] - html

This question already has answers here:
What are the new frames? [closed]
(3 answers)
Closed 9 years ago.
I am now making a webpage and need a bit of help. Its been some time since Ive done my last page a few years ago. Back then I remember it was quite popular to use frames, but these days, this is basically no longer used.
What I used to do is have a horizontal menu on the top as a frame, and underneath it the content frame.
Now, currently I have a webpage again, where I would like to place a horizontal menu on the top of the page.
The menu is written in pure CSS and HTML. The CSS is loaded from an external file, but the problem I now have is that the menu is basically a DIV element, which however I have to put into each page separately.
I was just wondering there must be a way of making this simpler and have it somehow inserted from an external file again - sorry maybe it sounds confusing, but basically I am looking for an alternative of the frames used in the past. Many pages have menus and I am sure they do it somehow, because if I make a change in the menu, I dont want to be making these changes on all the hundreds of pages.
I dont ask for any specific coding etc. I can google that myself if I dont know how to do it, but I just need a general recommendation how to solve this. Just to summarize, the menu is in HTML+CSS and the pages are mostly PHP, some of them HTML.

I'd think it would mostly depend on the framework. You could just have one page, and use AJAX to load the content of each page, or you could have several php pages, all of which call some function at the beginning to set up the header, or you could use a ASP.NET master page or whatever your framework uses.

If you're using PHP, then the easiest way would be :
<?php include('my_page.html'); ?>
Be carefull of the path to your html page

Related

Simply transfer HTML code into other HTML files [duplicate]

This question already has answers here:
Multiple webpages with common title and navigation bars
(4 answers)
Closed 2 years ago.
I would like to start a homepage for me. Every time I add a thing to index.html I have to add it to the links (in about.html etc.) as well.
How can I simplify that, that the new things of the index.html are automatically transferred directly into the other links (about.html etc.)?
Thanks for the help
The solution I used was to create a JS script that you would include in your HTML, that would add the HTML you want to the document :
let body = document.getElementsByTagName("body")[0];
body.insertAdjacentHTML("beforeend", "your html");
You could then put this script where you want to include the HTML.
I don't know if it's the best solution, but it works.
Right now, using vanilla HTML, there is no quick, easy, and simple way to do this. Using a backend framework like Django, this is easy, but that is really complicated and takes a while to learn!

Webpage practice [duplicate]

This question already has answers here:
Is there an HTML/CSS/JS editor that immediately shows changes? [closed]
(6 answers)
Closed 6 years ago.
I have been learning HTML + CSS via online courses like codeacademy and W3schools. I have a very simple grasp as to creating webpages and I want to play in a "sandbox" by creating pages and just messing with stuff.
I'm looking for somewhere I can type in my HTML and CSS and have it display on a webpage just like any other page I look at. I haven't been able to find anything quiet like that, other than the courses themselves. Is there even such a thing?
You could try JSFiddle
It accepts JS, HTML, CSS and renders it realtime...
You can download a coding software such as Brackets. Save your html file as index.html and your css as styles.css (per example) in the same folder.
Simply click on them in your computer's documents and it should work, opening in your default browser. You don't need an "online" tool for html/css.
Also check out this blog post for alternatives
I would highly recommend http://codepen.io. I find it the most user friendly of the bunch
I think JsFiddle would work for what you want. It also allows you to incorporate javascript as you begin to branch out. Plunker is also something I would recommend as it has a "live preview" where your page will automatically display as changes are made.
Get a free website from a site like 000webhost. Then, you can upload and edit code in real time on the server and view it on eg. http://example.freehost.com and you can view it real time. Also you could use software like notepad++ and edit your code before uploading it. Make sure your homepage is index.html

Create navigation Bar From Different HTML, Link to Main HTML

i just wanted to find out is it posible to make a navigation bar or image slide from a different html & css and link it to the main index.html?
if it is possible how to do it, or must it be done as a script?
It's possible to do this with both Javascript/jQuery and PHP. It's also possible to do this with an iframe, but iframes are honestly used to load a new web page within your site and they are hardly ever used, plus HTML5 is going to depreciate them once it becomes standard. So to answer your question, yes, it's something that needs to be done with a scripting language

Change Code in multiple HTML files [duplicate]

This question already has answers here:
What are the new frames? [closed]
(3 answers)
Closed 8 years ago.
Is there a way I can change code in multiple static HTML files? I just added two new pages to the site, and the side bar containing links to all the pages need to be updated in all files. Is there a easy way to do it? Thank you very much.
Update: Also the side bar has an active row, which should be different in each file, is there a easy way to change that in each file as well?
notepad ++ allows you to search and replace and also has a reg-ex search and replace function you can use to replace all or replace via file extensions
The question you are asking has two good answers.
The first simple answer for your level of HTML knowledge would be to use a text-editors Find & Replace functionality to simply change identical pieces of code so all pages match. This would be the simplest answer for your question.
The larger answer would be to introduce you to the idea of a layout file. With this layout file(s) you could define your entire page layout, links, headers, etc. Then with each page you load you simply call the content you want to show inside the layout file. This is a high level concept and should ultimately be your goal to reduce issues like those which you stated in your question.
You can accomplish this with a variety of technologies such as PHP, ASP.Net, or Java EE development which are all very advanced stacks. The best starting point I would suggest is Server Side Includes. This will allow you to simply call the required layout text. While this solution is rather legacy; it might help you accomplish your task with grater efficiency.
Microsoft Visual Studio Express can find and replace in files.
But maybe it's time to refactor your pages and put the common information in a distinct file.

Joomla: Fastest way to convert a ready html website to Joomla

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