Okay so quick overview, I'm using a C# console application to transform four XML files into a HTML document. This document will need to be shared around to a select few people (it isn't being hosted/isn't a web app, just a generated html file). Is there a way to bundle this one file with its javascript file and css file? Currently I just have them stored on the work file system and reference them directly in the html, which is fine for now, but ideally they would be packaged in some capacity.
From looking around, it seems webpack might be what I'm after, but this seems like such a simple problem that it feels like I'm overlooking something, and anything I search for seems to trip the algorithm with buzz words leading to bloated searches.
TLDR: I have a HTML doc, I want to share that doc without physically passing that person the CSS and JS file, nor do I want to host it on a web app. How can I package that file, in such a way, that when someone else opens it, they will see and be able to interact with the file as intended with the CSS and JS.
Instead of referencing your CSS and JS files, do the following:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
/*Your CSS code here*/
</style>
<body>
<script>
//Your JS code here
</script>
</body>
</html>
I didn't understand your question, but if you want to merge the CSS and JS into the HTML, yes ofcourse it's possible.
To add CSS into HTML, you need to use , and to add JS you need to use
EXAMPLE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EXAMPLE</title>
</head>
<body>
<p> test </p>
</body>
<style>
p {
color: violet
}
</style>
<script>
console.log('test complete');
</script>
</html>
Related
I am doing a simple web app, where i am using a external lib called (html-to-pdf). The idea is to create a pdf with the html and css generated on the frontend. The lib receives a html document, so i need to have something like this representation:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>cv-maker</title>
</head>
<style>
styles go here
</style>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
at the moment I am using vue to do the job, since it gives me less headeaches with other stuff. What I need is to convert a component based templated, like this:
<template>
<div class="wrapper">
<button #click="sendRequest()"></button>
</div>
</template>
to the above example, so I can extract the component styles and the generated html for the specific component, is there any way to do this?
Currently I am thinking about webpack plugin, but i don't want to build my bundle each time i do a request to the server, is this the good way to do that?
edit: resuming the behaviour i want, basicly i want to extract the html is inside the template witht the class wrapper, and get the styles on the current component and create a single html file with the extracted html from the component and the style embeded on the component with the style tag.
Thanks
I need to inculde my JavaScript file in django. I know how to include CSS files. I'm doing it this way:
<link rel="stylesheet" href="{% static 'demo/style.css' %}"/>
How can I include my JavaScript file?
There are two ways to do this (inline scripts and external scripts):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test page</title>
</head>
<body>
Inline script (option 1):
<script>
// your js code here
</script>
External script (option 2):
<script src="your-code-file.js"></script>
</body>
</html>
You are probably interested in this one:
<script src="your-code-file.js"></script>
I know how to include files of CSS. […] How can I include my javascript file?
One obvious answer is “Manage it the same way as other static files. Then include it with a script element, the same way you'd do any JavaScript file”.
If you've tried that, or other things, please edit your question to say what you tried and what happened instead.
In some occasions, I have pages without any content but a script that does something (ex. sending data through postMessage then closing itself).
In such cases, is the page valid with just <script>doSomeStuff</script> or does it also require a doctype like so:
<!DOCTYPE html>
<html>
<script>doSomeStuff</script>
</html>
Or does the page need full html declaration like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>doSomeStuff</script>
</head>
</html>
One might think it's wiser to include <meta charset="UTF-8"> since otherwise the page could suffer from encoding errors and the script mis – or never – interpreted.
If you want to have a valid HTML document, you have to follow the normal rules. There are no exceptions for documents that rely on JavaScript.
For your case, the minimal HTML5 document would be:
<!DOCTYPE html>
<title>Some title</title>
<script>doSomeStuff</script>
The title element is sometimes optional, but likely not in your case.
The meta-charset element is only required if you don’t specify the character encoding in a different manner.
Angular 2 - how do I make my index.html files title and meta tags for keywords and description dynamic.
I'm using typescript with angular 2.
Example of my tags:
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title needs to be dynamic</title>
<base href="/"></base>
<meta charset="UTF-8">
<meta name="fragment" content="!"/>
<meta name="description" content="description needs to be dynamic"/>
<meta name="keywords" content="keywords needs to be dynamic" />
This is my route:
{ path: '/', component: Home, as: 'Home', data:{title: 'Welcome Home'}},
I've tried this but it didnt work:
<title>{{title}}</title>
There is a Title service. Otherwise you're currently on your own. You can use pure JS functionality querySelector()...
There are plans to support more tags in the <head>.
I'm not too deep into SEO but I think it would be better to use a server side solution for meta tags. I doubt search engines pick up meta tags that are added after the initial page load.
Plunker (doesn't update the window title because the app runs in an iframe but using the browsers inspect tool shows it in the <head><title>....</title></head>)
There's also the #ngx-meta/core plugin, which might help you to make page titles and meta tags dynamically (on the route config and class constructor level).
Please refer the repository for instructions.
I've come into a wall : Basically, Javascript doesn't seem to be working in my play pages.
So I have a view main.scala.html as a template for other views.
This file looks like that :
#(page : String, title: String)(content: Html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/bootstrap.min.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/bootstrap.min.js")" type="text/javascript"></script>
</head>
<body>
<!--some stuff-->
#content
</body>
</html>
So I tried putting a simple thing in the body of the views.
-First in the main.scala.html template
-Then in a view that used this template
-Finally in a thing.html, with no links what so ever with Play! Framework, that I opened in my browser:
<html lang="en">
<head>
<title>title</title>
</head>
<body>
truc
</body>
Only the third option return the wanted result : A popup with thing in it.
My question is : Why is my javascript not handled by play? Do I have to "import" some global javascript feature in order to use it?
Thanks for your help, if you need more info, tell me.
Play produces normal HTML code - browser doesn't care what kind of soft produced it, so I suspect, that you have some mistake in path to some JS file in your head, so it avoids running other scripts, Use some kind of inspector in your browser, to validate, that all resources are downloaded properly. Also check JS console, most probably there are some errors shown.
On the other hand, placing simple JS directly in the views most often works correctly, however, keep in mind that, view's renderer may consider some JS typical syntax as a Play's tag, or something, therefore you need to control still if after rendering your JS is not 'damaged' by this process. For views where you want to use more advanced JS it's absolutely safer (and more comfortable) to include JS from static file(s) the same way as you are using for jquery.js or bootstrap.js
May be you forgot to write
#main(title = "my title") {
<h1>Other html<h1>
<p>My js here</p>
truc
}
P.S:
If it is helpfull don't forget that you shouldn't white head , html and body tags any more, it is included already. Otherwise you will have not valid html, and it will render bad in all browsers