I have HTML file with external css file, like to inline the styles in external style sheet into one inline <style> tag at the top of the head . Thanks in advance for any help
Note: Do not want to use style attribute applied to each element, want to have one style tag at the top
Before Converting
p {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Template</title>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<script type="text/javascript" src="js/myscript.js"></script>
</head>
<body>
<p>Welcome to Template!!</p>
</body>
</html>
After Converting
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Template</title>
<!-- START: Replaced inline tag from external css file mystyle.css as above-->
<style>
.p {
color: red
}
</style>
<!-- END: Replaced inline tag from external css file mystyle.css as above-->
<script type="text/javascript" src="js/myscript.js"></script>
</head>
<body>
<p>Welcome to Template!!</p>
</body>
</html>
You can start by make your html file accessible from web browser
if you use php, you can make it accessible by run following command php -S 127.0.0.1:4000 , make sure you can access it by open localhost:4000 on your web browser, there are another way how to accessible from another languages, but it's out of the scope of this question
the second step is install inliner npm package npm install -g inliner
and execute inliner http://localhost:4000 > output.html
open output.html to see the result
execute inliner -i http://localhost:4000 > output.html if you don't want to convert the image to be base64 encoded
Related
I'm playing around with HTML (, JavaScript & CSS) & decided to try to import one HTML from one file into another, the goal is that I can make several modules and just import them into an empty HTML page, so they together create a fully working & content filled HTML page.
I would prefer to use something similar to how scripts or style-sheets are imported:
(ignore the $ signs)
$<script src="file.js"></script>
OR
$<link rel="stylesheet" type="text/css" href="style.css">
The problem is that the $<html>, <head> & <body> tags are inserted again, is there any good way to fix this?
I have tried some methods: $<object> & <embed> &
$<link rel="import" href="file.html">
I don't want to use $<iframe> because I have heard that it's a security problem (yes, it's not relevant right now, but if I'm going to use this method later for real, then it will be important).
I am aware of other similar questions, like this:
Include another HTML file in a HTML file but most of the answers use external frameworks like JQuery or Angular which I don't want to use, I would prefer to use a pure HTML or/and JavaScript solution if possible.
Example code:
File to import:
<p>"The import is working"</p>
Base file to import into:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- Import code here (or in head if it for some reason is required) -->
</body>
</html>
Desired outcome:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>"The import is working"</p>
</body>
</html>
Actual outcome (with $<object> or $<embed>), (at least as the Firefox inspect-element tool shows it):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<embed src="file.html">
#Document <!-- I don't know what this means/function is, can someone explain? -->
<html> <!-- Notice the double: html, head, meta & body -tags -->
<head>
<meta charset="UTF-8">
</head>
<body>
<p>"The import is working"</p>
</body>
</html>
</embed>
</body>
</html>
You can use PHP, by making your file names with a .php extension and use PHP include:
<?php include 'header.php';?>
Read more about it here.
I've been trying to do the same thing for some time and the only solution I've come up with involves some JavaScript. When you import HTML the #document tag means it lives in the shadow DOM which is different than the one rendered (I think, I don't really understand this stuff). In any case, after importing, I ended up having to render the element and append it to the DOM.
<!-- Original HTML file -->
<html>
<head>
<title>Title</title>
</head>
<body>
<p>
Hello from original HTML.
</p>
<link id="importLink" rel="import" href="/path/to/import.html">
</body>
<script src="/path/to/renderImport.js"></script>
</html>
I had the following code in my renderImport.js file:
// renderImport.js
function renderImport() {
let importLink = document.getElementById("importLink");
let importedElement = importLink.import.querySelector('#import');
document.body.appendChild(document.importNode(importedElement, true));
}
renderImport();
And finally, import.html:
<!-- import.html -->
<p id="import">Hello from the imported file</p>
Here it is in Chrome. Though you might have to disable CORS.
Use Angular CDN in Head tag then import html using this code
<body ng-app="">
<ng-include src="'header.html'"></ng-include>
</body>
OR
<body ng-app="">
<header ng-include="'header.html'"></header>
</body>
Use you can change header to footer or content
I'm working on a project, and I didn't understand why a call to external script doesn't work.
Then I just did a extremely simple page html which includes a script alert, as you can see below... Can you tell me what's the problem ? I believe the problem is not the code, but what else can it be?
My browser is a recent Chrome, and my OS is Ubuntu.
My HTML file is index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MyPage</title>
</head>
<body>
<p>Blablabla</p>
<script type="text/javascript" src="/script.js"></script>
</body>
</html>
The Javascript file is script.js in the same folder:
<script type="text/javascript">
alert('Hey');
</script>
Paths starting with / are absolute paths. If the script and the HTML page are in the same directory, the script's path is simply "script.js":
<script type="text/javascript" src="script.js"></script>
<!-- Here --------------------------^ -->
If the file is in the same folder remove the "/" from script.js
<script type="text/javascript" src="script.js"></script>
Also if the js file has the script tags remove them.
If you want the alert when the doc is ready, consider doing something like:
document.addEventListener("DOMContentLoaded", function(event) {
alert('Hey')
});
I think that the script in the file dosen't need this script tag
<script type="text/javascript">
alert('Hey');
</script>
you can make like this
alert('hey');
just that try out and check if the file path in html to the js file is the right one.
Hi you don't need the script tags in the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MyPage</title>
</head>
<body>
<p>Blablabla</p>
<script type="text/javascript" src="/script.js"></script>
</body>
</html>
The Javascript file is script.js in the same folder:
alert('Hey');
I have solve this problem by using Visual Studio. Just open the html file in VS and then run this file from here. It will connect your js file to html.
I am in the process of creating a shell script .sh.
I now need to create a html file and add the html of a whole html5 template and same it.
So...
sh myshfile.sh
touch index.html
...Add the html of a html5 template
For example...create a html file and add this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
...via a shell script.
How do I do this?
You could use one of the following methods.
If the content of the template is stored in a file,
cat template.html > index.html
If the content is to be stored in the script itself then,
echo "<html><h1>This is a test</h1></html>" > index.html
Don't forget to escape the quotes with \"
I am new to Vue.js and I am simply trying to load script tags to the page, like jQuery for example. I tried adding the scripts to the end of the body in the index.html file, but they come back as 404s.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div id="app"></div>
<!-- JQUERY -->
<script src="assets/js/jquery-2.1.4.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/tipr.min.js"></script>
</body>
</html>
Try moving them to the /static/ folder &/or prefixing the paths with ./ or /
I use 'vue-cli'. I ran 'npm run build' command to get build version of the project . Due to this, automatically in 'dist' folder was created 'index.html'. Look at image:
I tried to run index.html file in browser, but it doesn't work. Massage form console in browser:
The content of my Index.html file:
<!DOCTYPE html>
<html lang=ru>
<head>
<meta charset=utf-8>
<title>cv</title>
<style type=text/css>
html, body{
width: 100%;
height: 100%;
}</style>
<link href='/static/css/app.b3ceb6191281c6a4dd333aa0b8aed7cd.css' rel=stylesheet>
</head>
<body>
<div id=app>
</div>
<script type=text/javascript src='/static/js/manifest.488e7f096afe65619705.js'></script>
<script type=text/javascript src='/static/js/vendor.fa2e9b388f427a714cca.js'></script>
<script type=text/javascript src='/static/js/app.d3d1742ab1cad95402a6.js'></script>
</body>
</html>
What I have to do to run it in the browser without server using?
If you don't want use server, you have to change all source links to
='./static/
or
='static/
1st variant is preferred