I have used Wordpress a lot to develop websites but wanted to try and make my own website from scratch for fun and learning. I have so many questions because when I google around and look on YouTube there seems to be thousands of ways of doing things. Anyway, I settled for using Vite in Visual Studio Code to create a project which starts of with an index.html, main.js, style.css and some other helper files. I tried to build with NPM and I get a nice localhost which hosts my content to e.g. http://127.0.0.1:5555.
Now I ran into the "issue" of creating a header template file, e.g. header.html, that I want to import on top of all pages (and same with footer on bottom). In Wordpress I would create a header.php and then include it with get_header() which would include my header.php file on that place. When creating my own website it doesn't seem to be a standard though and there are lots of solutions, the most promising I found so far without any real knowledge was:
https://www.youtube.com/watch?v=j5Sl6vx_l1s, which creates his own html tags and defines them in a JS file. This seems to work fine, however when editing the header I can't use nice helper snippets/auto completes and such since the html code is in a string, which is a big minus for more commplicated headers and footers.
Use .php files instead of .html files and then use <?php include('header.php'); ?> where I want the header to be. This looks more like the Wordpress approach to me, but is there any performance issues with using php instead of html files, or any other issues I need to think about?
Someone here suggests putting in the line <!--#include file="header.html" --> but this (with or without comment signs) doesn't include anything from my header.html.
How can I accomplish the simple task of having some html code that I want to put on top and bottom of each page? :)
Related
I want to separate an html page into head, header, footer sort of stuff like that. And include them as I create a new page so that I won't have to update all pages if I change something in header or other parts of the included ones.
The problem is that I can do that easily with php support but the current server nginx(actually I don't really know what that means as a front-end dev) doesn't have that and won't do in the future. How can I accomplish that with pure html or with a little help of nginx?
You could use javascript includes.
For example if you were using jQuery…
page1.html
<div id="head"></div>
<script src="head.js"></script>
head.js
$('#head').html('<html goes here>');
If you don’t mind compiling before uploading you could use .kit files.
https://incident57.com/codekit/help.html#kit
And it’s not just for mac users…
Compile .kit files outside of Codekit
I need to regularly send html pages to a client as standalone .html files with no external dependencies. The original pages are done with node.js and express and they contains several librairies such as High Charts.
I have done the preparation manually until now, this includes:
Transform all images into blobs
Copy all external .js and .cs inside the page
Minimize where possible (standards librairies such as jQuery or Bootstrap...)
The result is a single .html file that can be opened without an internet connection and looks just like the original.
Is there any tool to do this automatically? If not, maybe I'll code it myself in Python. Do you have any recommendation around that?
Thanks
Monolith is a CLI tool for saving complete web pages as a single HTML file
See https://github.com/Y2Z/monolith
With apologies to OP, as this answer is probably far too late for him, but I'm posting it to help anyone with a similar problem:
HTTrack is an open-source project that does almost exactly what you described, though it doesn't work perfectly on some of the more peculiar JS.
It saves the page with most of the JS, the major images, and everything that the page needs to appear complete. It can be configured to include or exclude the entire or partial JS, images, and CSS.
This does not import all of the JS and other content into the HTML file, but neatly organizes all of the content into one folder and corrects all of the paths to make the folder portable.
It also seems to have trouble grabbing some external sources that are protected, but if it is your local site and simply uses common scripts like JQuery, you should be fine. When I tested it, it correctly downloaded all of my local CSS and any valid external CSS library that I incorporated, the JQuery and derivative scripts that I was using, and the embedded images.
Just to save everyone a question, the program by default saves the downloaded websites to C:\My Web Sites.
I've just stepped into a new field of HTML designing of websites. I'm using HTML, CSS, jQuery, JavaScript for designing purpose. I've designed one website using above technologies. It has almost forty(40) webpages of HTML design. Now the requirement changes in a design I've created are coming from client. For making those changes I've to make the change in almost all the files. This has become a headache for me. This is a very tedious job. Now I want to reuse the some HTML code in every file. Means Left menu should contain in a separate HTML file, Top Menu should contain in a separate HTML file, Footer menu should contain in a separate HTML file, Right menu should contain in a separate HTML file, etc. In short I want this common code in separate files and I should be able to include all of these files in every HTML file. So that I can do only the body of HTML page in different HTML files. Also the CSS and jQuery files should also be reusable. But I don't want to use any server side technology for including these files. SO can anyone help me in how to achieve this reusability and extensibility of a HTML code? Thanks in advance.
Use jquery, or make your pages PHP and just use one of these functions in php tags where you want the common parts, or pages.
include()
include_once()
require()
require_once()
Take a look at this for some more info on how to use, or do some easy quick google searches.
Edit: Here is a JQuery implementation then, which is all executed in the browser:
Inside some Script tags:
$(document).ready(function(){
$.get( "test.html" );
});
It follows the syntax on this page. Also, take a look at W3school's jquery tutorial. Also, you might want to look at this page at W3school to see how to add the contents of the html page where you want to.
The simplest way to share HTML across pages are Server Side Includes. Your user name seems to imply you know your PHP, so this would be the easiest way to handle it (use PHP). If you absolutely can't have it be a server-side solution, you can use JS to handle it instead.
A more complex, but likely preferred way to handle it is to use a template engine. Most Content Management Tools include just that. Wordpress would be one of the more common ones out there.
As for your CSS and JS, those should already be in separate files and you should be linking to them from within each HTML page.
I have a client who has built her entire site using html extensions. As such, renaming files and changing links just isn't an option. I need a way to include a footer file into each .html page. I've read a bit on the subject and initially thought html includes would be fine, but then realized they are only valid if the file extension is .shtml or something else. So are there any other alternatives? Any help is greatly appreciated.
An .htaccess rule would work, if you setup 301 redirects it will notify search engines of your change and there should not be any seo repurcussions. This will redirect that for you. The other benefit for seo is php includes are server side so the html will be passed to the search engine spider for index, where javascript will execute after the document loads, and most spiders are not going to execute your JS, just index the html passed down from the server.
RewriteEngine on
RewriteBase /
RewriteRule (.*).htm$ /$1.php [R=301,NC]
Alternatives are all ugly :
insert header and footer using iFrames
use a HTML editor having template feature like Dreamweaver
use a script of yours that will edit all HTML pages adding the header and footer
insert header and footer using Javascript
...
All of those are very bad because the HTML page has no real header/footer (iframes, javascript), or it is hard to maintain.
Of course the best way is to make easy to maintain real HTML pages. That is turn the "changing links just isn't an option" into "let's change extensions and links". Some tools can help you to do that.
You could accomplish this with javascript by creating a footer template in a separate html file and then dynamically load the footer template markup into each page through some javascript code.
Although, you would still have to modify each html file that you want a footer to appear on by adding the javascript code which adds the footer.
Other than that, there is no equivalent in html to includes or master pages. These are server side concepts.
Use javascript or preferrably jquery. With this function you can just load external files into a div with 1 line. http://api.jquery.com/load/
I would suggest a major rewrite as some pointed out but, given your situation that you can't change the technology used, I am assuming it's a reasonably big site too, my suggestion is to use sed to include the footer code as you mentioned into each HTML file.
Either that or add the footer using Javascript, which is not a bad idea in your situation.
Maybe you can write a script that will append the footer to all the html files. So basically just copy the whole set of html files to a dev location and then run the script to output the new files.
Alternatively, copy and paste may be less time-consuming.
Javascript is probably simpler, but doesn't work when the user doesn't have js enabled.
Two ways to create client-side includes: javascript and iframe. While using javascript, the search engine will not see the included text. And iframe element must have a fixed width and height.
I recently read the discussion https://stackoverflow.com/questions/62617/whats-the-best-way-to-separate-php-code-and-html
I am facing a similar dilemma.
Currently working on a WordPress website which has a LOT of sliders, animated dropdowns, forms and other components. Each of component is used multiple times throughout the website, so I've created a PHP file for each of these components and I use include to insert them wherever they are required.
Now the file I am including contains HTML & JS {for initializing control}
And finally when I looked at the generated html page in browser, it was chaotic! HTML & JS mixed everywhere!
I wanted to know if its better to include everything in one big JS file and include it on top of every page or its more efficient to have small JS blocks in the section?
In my opinion, if the HTML/JS is valid, there's nothing wrong with it being a bit messy - the end user will never see it anyway. As for what's best from a design point of view, it really depends on the situation.
Personally, I think it's alright to have a big JS file that's included in every page, but some people prefer to output the code in small blocks where it's needed. Ultimately, it really depends on what the program is and what works best for you.
If the JS code is targeted to just a particular section or page i think it is better to include it in page itself instead of a separate file but if it is meant to be used in multiple places then use a separate file as it will also be easier to maintain it that way.