I'm trying to import libraries to my .html file.
It's not working when I try to use npm, bower, tags, #import.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="3" />
<title>yummyTea</title>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/bootstrap.css">
<link rel="stylesheet" style="css/text" href="css/bootstrap.css">
</head>
<body>
<h1 class='container'>Bootstrap</h1>
<style>
#import url('css/bootstrap.css');
</style>
<script src="js/bootstrap.js"></script>
</body>
</html>
^The libraries are not rendering on my server.
I've tried multiple solutions, and it's come to the point where I just want to get this working asap.
Yes, npm and bower were both installed/init correctly into the app.
I'm going to be using CDN since they work as of right now.
You seem to be missing a <script src="js/bootstrap.js"></script> tag.
Also, your CSS #import directive is inside a <script> tag, not a <style> tag.
Related
So till now I always used stylesheets which are in the same folder as my website, but I want to be more flexible and work on my layout via github. So i uploaded the css file and used the raw link. I noticed that I can't use it. Is it even possible to use stylesheets from websites? I tried to find an answer on the internet but I couldn't find an article about this issue.
Here's my code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/Goetterescu/Website/main/styles.css">
</head>
<body>
<h1>Hello there</h1>
</body>
</html>
<head>
<link rel="stylesheet" type="text/css" href="https://gitcdn.link/repo/Goetterescu/Website/main/styles.css">
</head>
I used https://gitcdn.link/ to serve the stylesheet since Github was serving it with the wrong stylesheet
You should use this type of file path to your css file. GitHub file directories should point to the relative path of the linked file within the repository.
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Hello there</h1>
</body>
</html>
I want to use bootstrap on my website. First, I put CDN in the head, and everything is fine. Then I don't want to apply bootstrap by CDN, so I download the bootstrap file, and put the CSS part in the <style>, and put the js part in the <script>. But it didn't work, why?
This is the CDN code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
Follow this step:
Go to https://getbootstrap.com/ and then click a big "Download" button.
Scroll down to "Compiled CSS and JS" section, click "Download" button.
You'll have a file named like bootstrap-4.0.0-beta-dist.zip downloaded (according to current version).
Extract it. It'll have 2 folders inside: css & js.
Include them on your web project directory e.g. in assets/bootstrap.
Include them inside your html <head> script:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src='assets/bootstrap/js/bootstrap.min.js'></script>
Good luck & keep learning!
In your <head> section you can Link your CSS stylesheet
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
And Link Js files on
<body>
<!-- html code -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js">
</body>
I'm starting a new project with Angular and facing an issue.
When I am trying to load an external CSS file with <link> it doesn't work but when I am using internal style with #import it does work!
Doesn't work with :<link rel="stylesheet" type="text/css" src="transmission.min.css">
Works with :<style>#import url('transmission.min.css');</style>
My files are located in the same directory (root of the app) :
/
/index.html
/transmission.min.css
/transmission.min.js
My CSS and JS files are concatenated and minified with grunt but I tried without it and same result.
Here is my index.html file :
<!doctype html>
<html>
<head>
<title>Transmission</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" src="transmission.min.css">
<style>
#import url('transmission.min.css');
</style>
<base href="/">
</head>
<body ng-app="transmission">
<div ng-view=""></div>
<script src="transmission.min.js"></script>
</body>
My CSS file just contain body{background-color: red;}
I checked my nginx configuration twice, and everything seems to be just fine.
I also checked with Safari inspector, I can access the CSS file at http://transmission.dev/transmission.min.css.
But it doesn't appears in the resources tab.
Moreover my Angular application loads perfectly.
If you have any idea ? :-D
Thank you
link tag uses href attribute as opposed the the src as you have specified. Please change and check.
It should be
<link rel="stylesheet" type="text/css" href="transmission.min.css">
link tag uses href and not src
Hope it helps!
As I continue to add on to my website, for each HTML file i add i need to include
<!-- Source for .css style rules -->
<link rel="stylesheet" type="text/css" href="/Hexdra/assets/css/style.css" />
<link type="text/css" href="/Hexdra/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<!-- JavaScript for using a custom file for resources. -->
<script src="/Hexdra/assets/scripts/angular.js"></script>
<script src="/Hexdra/assets/scripts/modernizr.custom.05819.js"></script>
<script src="/Hexdra/assets/scripts/siteScript.js"></script>
<!-- Angular Apps-->
<script type="text/javascript" src="/Hexdra/app/tank.js"></script>
<script type="text/javascript" src="/Hexdra/app/form.js"></script>
Its not an awful method, and it works every time. I just know there has to be an easier method.
I know theres the but that doesn't seem like the easiest method.
I know of the js library require.js and that's wonderful but if I dont think i can use that for my CSS files.
What I would like is a method of referencing one file, loading one file, and it then has some sort of structure or code that then imports all other required CSS and JS files.
What made me see that i needed this sort of system was to select all the files for bootstrap without loading each one like I have loaded my CSS and JS above.
Im sure im missing some key terminology so please help me along with new terms or ideas that Im on the cusp of but haven't found the verbiage to be able to describe yet.
For CSS, there are always #import statements. See here on MDN: #import
Define a single CSS file and use #import url("some-other.css") to load all of your CSS files through the singular, "main" CSS file.
For CSS, you could use a CSS preprocessor like LESS or SASS to bundle all your files into a single file through a build step. The same principle applies to JavaScript as well through some sort of bundler whether it is r.js for require.js AMD style application or Browserify for more CommonJS style source files.
There is nothing wrong with referencing a bunch of files in your index, but it is best practice to build your app with something like Gulp before deploying to production. Your gulp process should combine all css and js into respective minified css and js files. There are a lot a performance benefits to doing this. Sorry to be so brief
You haven't said what your back-end language is, but if you are using PHP you can do something like this:
INDEX.PHP
<?php
include 'inc/head.inc.php';
?>
<body>
<div>All your stuff follows here</div>
<?php include 'inc/nav.inc.php'; ?>
inc/head.inc.php:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>MyDomain</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="some stuff I do" />
<meta name="keywords" content="stuff, things, quality" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="/Hexdra/assets/css/style.css" />
<link type="text/css" href="/Hexdra/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<!-- JavaScript for using a custom file for resources. -->
<script src="/Hexdra/assets/scripts/angular.js"></script>
<script src="/Hexdra/assets/scripts/modernizr.custom.05819.js"></script>
<script src="/Hexdra/assets/scripts/siteScript.js"></script>
<!-- Angular Apps-->
<script type="text/javascript" src="/Hexdra/app/tank.js"></script>
<script type="text/javascript" src="/Hexdra/app/form.js"></script>
</head>
I am learning polymer. Want to link paper-button, but doesn't work. where is the mistake?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Polymer</title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
</head>
<body>
<paper-button>flat button</paper-button>
</body>
</html>
You code is working with a proper bower configuration. Here is the single module I installed, I guess this is your problem:
bower install Polymer/paper-elements
This is documented in the guide Using elements of the Polymer project.
Check here. it is working.
I make it using following way. I think your imported links are not loading.
<script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.min.js?20150316"></script>
<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-button/paper-button.html">
<body>
<paper-button>flat button</paper-button>
</body>