I am trying manually update all static HTML files [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have right now one project on static HTML with two languages and I have to manage everything by myself.
So if something new appears in header/footer I have to update 20 HTML files.
Also this project is hosted on normal shared hosting.
How can I make less painful, if I have to change something?
Right now i just bulk find/change in folder with sublime.
P.S I can't use any CMS. Must be static.

Since it has to be static, you probably can't use PHP.
An alternative that works on modern browser would be to use Javascript to include the header and footer from another file.
You have several options, one is using jQuery load(). Example to include two files contained in the resources folder :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo load for header and footer</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="header"><!-- HEADER COMES HERE --></div>
<!-- Main content comes here -->
<div id="footer"><!-- FOOTER COMES HERE --></div>
<script>
$(document).ready(function() {
$( "#header" ).load( "/resources/header.html" );
$( "#footer" ).load( "/resources/footer.html" );
}
</script>
</body>
</html>
Please, consider a fallback by filling the #header and #footer divs with a content that would be displayed if javascript is not enabled. Also consider a fallback if load() doesn't work (look at the doc for this, there is an example).

Suggestion One:
P.S I can't use any CMS. Must be static.
You can use the Jquery to load up the files that you have in the respective place based on the needs that you have.
.load( url [, data ] [, complete ] )
Description: Load data from the server and place the returned HTML into the matched element.
Note: The event handling suite also has a method named .load(). jQuery determines which method to fire based on the set of arguments passed to it.
Reference: http://api.jquery.com/load/
$(document).ready(function() {
$('#some-menu').load('some-local-path/menu.html');
});
Provided you can have the ID of the DIV as you given and then it will load up the data over to that place and you can change it dynamically.
<html>
<body>
<div id="some_menu">
<!-- Loads the Menu Part Over Here -->
</div>
<script>
$(document).ready(function() {
$('#some-menu').load('some-local-path/menu.html');
// Like wise you can load up all the data that you need over here and place the necessary div over to the HTML.
});
</script>
</body>
</html>
If it is not a static you can follow up with the below one as i have mentioned using the PHP.
Alternative Reference:
It is better to use PHP since it supports awesome features and you can create your own CMS using the PHP.
More Clear Explanations
Look for the items that are being static on to your site and it has to be shown in all the pages.
Copy them and place in the respective files namely header in the header.php and footer in footer.php and so on and then you need to do one more thing alone.
You need to include all the files that are being given by you and thats the trick.
Entire Page will look like.
<html>
<head>Title of the Page</head>
<?php include 'scripts.php'; ?>
<body>
<?php include 'header_menu.php'; ?>
// Page content
<?php include 'sidebar.php'; ?>
//Page Contents
<?php include 'footer.php'; ?>
</body>
</html>
Like this way you can do it for your header,footer and whatever files you need to do so and if you update the single file alone it will be replicating in all the files even tones of files you have.
Basic include example
The include() statement includes and evaluates the specified file.
The include command simply takes all the text that exists in the specified file and copies it into the file that uses the include command. Include is quite useful when you want to include the same PHP, HTML, or text segment on multiple pages of a website. The include command is used widely by PHP web developers. Like PHP Echo, include is not a function, but a language construct.
vars.php
<?php
$color = 'green';
$fruit = 'apple';
?>
test.php
<?php
echo "A $color $fruit"; // A
include 'vars.php';
echo "A $color $fruit"; // A green apple
?>

Put the HTML content of the header in a PHP file and include it in every page, like this:
<?php include('header.php'); ?>
This way you only have one file (header.php) to edit.
More details on include() can be found at: http://php.net/manual/en/function.include.php

as far as I understood if you want to manage many HTML files in a static web I think you need a HTML template.
I would recommend to use "http://handlebarsjs.com/" you can use it as well in static pages.
I hope it helps.

Related

Code for adding text to every HTML file on website

So I have a website, https://coolkids.gq. I want to be able to add a certain line of code to every single HTML file on the website using another HTML, JavaScript or PHP file, but I am not sure how to do this.
How would I be able to write a script to add a line of custom code to every HTML page on my website?
Edit: As pointed out by charlieftl, I should clarify that all files are saved in either the /htdocs folder or in a folder inside of that.
yes you can, just make some folder named include or whatever and create for example loginForm.html sth like
<div>
<form>
....
</form>
</div>
and in pages where you want to put it use
<?php require('./include/loginForm.html') ?>; in place where you need it
Of course it need to be PHP page.
Good thing is to have also included header and footer in external html and include it on every php page ;D
if you want some js script in every page you need to add it manualy:
<script src="js/main.js"></script>
but it can be included in footer.

Document specified to reference content when creating a website [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I have my adress written in 30 html pages on my website. When I move I am going to want to change the address. Instead of going through the code and changing it for all pages, I am looking for a method to change it in one place.
What would be the best practice for this sort of problem? There will probably not be that many references that would need to be stored. Any help on the matter will be appreciated.
There are literally dozens of ways to do this kind of thing. You could rewrite your website in any of the wide variety of server side languages, whether it's a scripting language like PHP or a compiled language like C# or Java.
You don't have to go that drastic, though. You can simplify it by including references in your pages. This can be a direct usage of another HTML file, or it can be a JavaScript file. The link below shows how to do the HTML file linkage using JQuery, as well as JavaScript. JavaScript doesn't have to be difficult and it can be referenced from all your pages, so it can have all the things in one file that you want to change, allowing you to change one file and it reflect on all your other pages.
HTML include with JQuery: (if you aren't already using JQuery, I'd hesitate to use a whole library to do one function that can be done in vanilla JS just as easily)
a.html:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
b.html:
<p>This is my include file</p>
Or JavaScript:
a.html:
<html>
<body>
<h1>Put your HTML content before insertion of b.js.</h1>
...
<script src="b.js"></script>
...
<p>And whatever content you want afterwards.</p>
</body>
</html>
b.js:
document.write('\
\
<h1>Add your HTML code here</h1>\
\
<p>Notice however, that you have to escape LF's with a '\', just like\
demonstrated in this code listing.\
</p>\
\
');
Include another HTML file in a HTML file
If you are using PHP already, there's a good chance you can do it with the PHP you're already using by reading from a text file and inserting the HTML text into the page you are generating.
<?php
// do php stuff
include('fileOne.html');
// or //
readfile('fileTwo.html');
?>
how to embed html files in php code?

All PHP pages include the entire set of CSS and JS, efficient?

I'll summarise. Please correct me wherever I was not able to phrase my question correctly.
I have a few PHP pages, all of them have the following format:
<?php
include "header.php";
?>
INSERT PAGE SPECIFIC MATERIAL HERE
<?php
include "footer.php" ?>
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Main CSS -->
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<navmenu></navmenu>
footer.php
<footer></footer>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Theme JavaScript -->
<script src="js/main.js"></script>
</body>
</html>
I am new to PHP and not sure if this is the correct way to efficiently structure my PHP files because my concerns are:
Each PHP page now loads the same navigation menu and footer. This is intended and is ok. However, it also loads ALL CSS and JS together, even when there are lots of lines of CSS and JS where it is not actually useful in that specific page BUT used in other pages. Is this a need for concern and if yes what ways should we go about doing this?
Should I separate my main.js, style.css, header.php and footer.php so that each PHP page loads the minimum amount needed for the body functions?
What is the standard practice when dealing with this case?
Would appreciate it if you can give some advice!
Should I separate my main.js, style.css, header.php and footer.php so that each PHP page loads the minimum amount needed for the body functions?
You should create ONE css file and ONE js file for your entire web site. don't use php file act as css because:
If you have high visited web site, It's better to have ONE css and js file. Because It's a direct file. but when you are creating css or js by php file, php need to calculate. Maybe you think it's fast calculation, but if you need a good performance on high visited web site, it matters.
If you create css and js file by php, sometimes you need to import multiple js or css file. Who knows? maybe it makes you to use 10 js and 10 css inside your head tag! and It's bad for SEO.
Don't worry about one css or js file size. It's better with lower size but you can still create 100KB css or js file without SEO problem.
You can have one css file for all media. print included. Doesn't matter you are using multiple or single file, always use #media print{} inside the same file if you need it.
ONE css and js file can be globally cached. even if you don't need the css or js file, the global css and js file are already cached.
I'm not saying ONE css and js file is always great idea but it has the most benefit.
If you want to reduce the ammount of css/js on your page, then you can do something like this... Call your CSS with:
<link rel='stylesheet' type='text/css' href='css/style.php' />
Inside style.php it would look like something like this:
<?php
switch(basename($_SERVER['PHP_SELF'])){
case 'index.php':
echo 'CSS code for index.php gos here';
break;
case 'login.php':
echo 'CSS code for login.php gos here';
break;
}
?>
Unless you've got like lots of styling and javascript which is confirmed to be seriously increasing load time, then it's fine and I wouldn't do the above.
<?php
$filename = basename(__FILE__, '.php');
?>
<link rel="stylesheet" href="css/<?= $filename ?>.css" />
...
<script src="js/<?= $filename ?>.js"></script>
Drawbacks:
1. Naming each CSS and JS file as your PHP file.
2. Each PHP file should have its own CSS and JS files
P.S: Minimizing all your styles and scripts to only one file loads your pages faster.
Yes it is good approach to manage code. To include same header and footer you can easily add/update/remove menus and other functionality without edit every page file.

Ability to use a single html that stands as an 'include' to another html page

I was searching around for an answer to this question but I can't seem to find the exact "words" or "phrases" to find relevant answers.
My question is, is it possible to have an ability to use a single html that stands as an "include" to another html page?
Example: Being able to use one file containing CSS styles so the same file can appear on every page of the site automatically that I include it on.
I made a template that has an extension of .html that contains only my header and footer for the whole theme of the site. Normally, I would copy and paste the contents of these templates to each new html page then add in the unique body content for that page.
What I would like to do is make a template that has an extension of .html containing only my header and footer so I can do something like include template.html which automatically would put the content of the template.html page on each page so I don't have to copy and paste each time. I am finding it harder and harder to update/maintain each page of the site that contains the header and footer script because I have to find and replace each instance of those scripts when changes are made and must be propagated throughout the site.
I know that html does not actually have an include function but I think there should be a way around this through other languages such as PHP or even JavaScript? I just am curious if its possible and if so, how?
I think you have a few different options. With PHP you could do something like this:
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>
</body>
</html>
See this link.
With AngularJS you could use something like this:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<div ng-include="'myFile.htm'"></div>
</body>
</html>
See this link.
With just HTML5 you could try something like this:
<object name="foo" type="text/html" data="foo.inc"></object>
See this link.
Does that help answer your question?
What you are asking is possible in differents ways:
frame and iframe
take a look at this two tags
frame : http://www.w3schools.com/tags/tag_frame.asp
iframe : http://www.w3schools.com/tags/tag_iframe.asp
I do not recommend this solution because "frame" is not supported in HTML5 and "iframe" is made to include other website in a website, not part of a website. You will not be able to add CSS/JS to code in "iframe" tag.
back end solution
Depending on what kind of website you are working on you can include other file. For exemple in php:
include('youcode.html');
HTML5 solution
You can also use the "object" tag :
<object width="100%" height="500px" data="snippet.html"></object>
this is probably your best choice, see : http://www.w3schools.com/html/html_object.asp
Enjoy :)
This can't be done via HTML, you can either do a PHP include or use this W3 schools example:
http://www.w3schools.com/howto/howto_html_include.asp
PHP example
template.html rename to template.php
<html>
<?php include template.php ?>
</html>

add a specific set of javascript code to every single page

I have a fully functioning PHP system with various .php files handling different processes.
i need to add in a specific set of javascript code to every single page that's generated.
can any one tell me How to do this? is its possible thanks
Your "system" should include same header for all of the pages. And put your javascript to that file.
like:
header.php
<html>
<head>
<script>
// some script
</script>
</head>
<body>
index.php (main file)
<?php
include "header.php";
// Content
include "some_content.php";
include "footer.php";
?>
footer.php
<div><p>My footer</p></div>
</body>
</html>
Apart from the above methods, you can do this by another method.
Save the javascript as a separate file(code.js) and then using
<?php include("code.js"); ?>
in each of your files.
create a php footer and include this to every page. Place the markup for the script in the footer. The benefit of placing your javascript in the footer is that the page will render the page before trying to execute the script, making your page seem to load faster.
For each page add include "footer.php"
Create a master page which other pages will be included as child pages. In header of the master page the js files can be included and handled by checking you requested url
Example:
$requested_url = $_GET['requested_page'];
...
<script type="text/javascript" src="js_path/<?php echo "$requested_url.js" ?>" ></script>;
...

Categories