I'm trying to use an HTML file with CSS throught this code:
<link rel="stylesheet" type="text/css" href="myfile.html" />
I cannot access to the server and make new files so the server provides the option to create HTML files and I wanna use them as CSS hosts. Is this possible?
you can try to include the html containing css in the other html so myCssfile.html is :
<style>
//enter CSS code here
</style>
and then your main html file:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("myCssFile.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
I'm using here the JQuery function .load but it probably can be done with pure JS
If the file contents are valid CSS and the type attribute is set correctly, then the browser will believe you that it's a CSS file and will parse/use it as such.
Related
I'm very beginner to HTML and CSS. I tried to add css with my external file. But It's the error as unexpected token. Please find the error in image file. My code is as like below.
<html>
<head>
<title>Test Game</title>
<script src="C:\Users\Pspl\Desktop\Sreekanth\TestGame.css"></script>
</head>
<body>
<div class='dvborder'>dsfssd</div>
</body>
</html>
css file code :
body {
background-color: lightblue;
}
You must use <link> instead of <script>.
<link> - is for embedding external CSS file while
<script> - is for embedding external JS file
<link rel="stylesheet" type="text/css" href="C:\Users\Pspl\Desktop\Sreekanth\TestGame.css">
Use <script> for .js files and <link> for .css files.
Try link tag instead of script tag.
<link rel="stylesheet" type="text/css" href="theme.css">
That's simply not at all how you link to css. The syntax for style sheets is
<link rel="stylesheet" href="(URL of your .css)" />
The browser is expecting a javascript file, and complaining that CSS doesn't look like javascript.
<link> tag is used to relate stylesheets or linked documents.
<script> is used to embed an executable script within an HTML.
If you are having local files, try to use relative path for stylesheets and script files. This improve portability.
I need to create an html file that contains only content within a form tag of another html file, and nothing else. Is there any way to do this?
You can dynamically load html snippets after your main page loads using javascript. Something like this:
main.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Form</h1>
<div id="container"></div>
</body>
</html>
form.html
<form>
<input value="testing" />
</form>
script.js
var formUrl = 'form.html';
$(window).on('load', function(){
$.get(formUrl, function(res){
$('#container').append($(res));
})
})
Here is a working plunk
Using webcomponents, it possible to import HTML from other files.
But this isn't widespread nor supported by all major browsers and maybe not what you're looking for.
You should really start by using a programming language like PHP, Ruby, Python or similar.
So, I have a server.js file which loads an index.html file.
The question is, is there any way to import another html file in index.html.
To simplify, let's say I have an html file named footer.html and I want to import it in my index.html. How can I do it?
you can inline send your html, or use 'fs' module to read html file and send it.
but it is better to use template engine, like ejs, handlebar, etc.
see this tutorial for more info
https://scotch.io/tutorials/use-ejs-to-template-your-node-application
You can use jquery to accomplish this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$("#includedContent").load("index.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
This is the HTML code, i don't know if i'm making a mistake in those < link/>
<! DOCTYPE html>
<html lang="es">
<head>
<title>Appicua</title>
<link href="C:/Users/DAVID NEGRETE/Desktop/Portal web - Base code/portalWebStyle.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="test"></div>
<script src="C:/Users/DAVID NEGRETE/Desktop/web/js/jquery.js" type="text/javascript"></script>
<script src="C:/Users/DAVID NEGRETE/Desktop/Portal web - Base code/portalWebExt.js" type="text/javascript" </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
And now this is the CSS code:
.test{
width:50px;
height:50px;
background-color:red;
border-color:black;
border-width:5px;
border-style:solid;
margin:5%;
}
As you can see is a simple red square, the problem is that all this code works perfect on Google Chrome and Internet Explorer, but on Firefox it's not even displayed on the screen.
Why is that happening?
Restructure your files into one directory:
- appicua
index.html
- css
main.css
- js
jquery.js
main.js
Then you can get main.css with href="./css/main.css", and main.js with src="./js/main.js". Relative paths are better here, and will probably work.
You also don't need to specify type="text/css" and type="text/javascript"; they're redundant as browsers pick CSS for style tags and JavaScript for script tags anyway, and there's confusion about the proper MIME type for JavaScript.
You can also remove the closing / before the > in the link tag. (Unless you're using XHTML.)
Your directory structure looks a little wonky. If I'm getting your links correct your working in a directory tree that looks like this:
If your HTML file lives in the web directory then you could create a css directory for your css (like the js folder that you already have) and reference the files relatively as suggested in other answers. The relative links would look like this:
<script src="/js/jquery.js" type="text/javascript"></script>
and
<link href="/css/portalWebStyle.css" rel="stylesheet" type="text/css" />
The linking style is called relative because the paths to the css and js files provided are relative to the position of the HTML file in the directory structure.
I'm guessing that firefox doesnt handle client-side files the same way. Try putting the css/js files as just src="portalWebStyle.css" as long as they are in the same directory as the file you have open.
I don't know if this will solve your issue, but you have forgotten a / at the end of your second link tag, and have also forgotten to close your second script tag.
I would like to include a webix table such as this one into a sphinx document.
I've found that directive:
.. raw::
:file: data.html
Unfortunately it does not work because the head should be included into <head>. Also the relative links should be updated according to the sphinx generated html.
<head>
<title>"Find" API</title>
<link rel="stylesheet" href="webix.css" type="text/css" charset="utf-8">
<script src="webix.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="samples.css">
<script src="testdata.js" type="text/javascript" charset="utf-8"></script>
</head>
How to include a webix widget into a static sphinx page?
One possible solution would be to fully include the html using jquery:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
However this requires to add stuff into the <head> of the page
It sounds like what you want to do is create a custom HTML theme for use in Sphinx. This is less work than it sounds like, since you can probably just inherit from an existing theme, and only override a small part of it in your new theme. See the Sphinx docs re: templating and theming
Also, see this answer, which might be helpful:
Adding a javascript script tag some place so that it works for every file in sphinx documentation