I am working on a home page that links to several of my projects. I am trying to link to another html that has a different style than the home page. The images and text I have for the second html works fine, but it takes on the style of the home page, and not its own design which is different. My question is is it possible to link to another html that has a different style? If so, how do I input this? When I try putting the style for the second html in the home page's folder, it won't let me since there's already another style.css I used for the main home page. I tried changing the name of the second style file and it still does not work.
If I understand you correctly, you have two HTML pages and you want a different CSS style for each page.
You can have several CSS files but you cannot have two with the same name.
Create two different CSS files. For example home.css and secondpage.css
Create two different HTML files. For example home.html and secondpage.html
Go to the <head> of home.html and add <link href="home.css" type="text/css" rel="stylesheet" />
Go to the <head> of secondpage.html and add <link href="secondpage.css" type="text/css" rel="stylesheet" />
Make sure the html files and css files are in the same folder.
If you have trouble finding the <head>, see the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="home.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>Hello World</p>
</body>
</html>
Yes, it is possible to use different style for diffrent html pages. There are mainly two easy way
Either you use different css files for each html page (Which is not recommended):
Let say for homepage.html you use mystyle.css
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
</html>
So for other html page you can use secondpage.css
<html>
<head>
<link rel="stylesheet" type="text/css" href="secondpage.css">
</head>
</html>
and make sure you specify path correctly
Other way which is recommended is you give diffrent class name for the html attributes, So that you can specify the all styling in single stylesheet. which will reduce your page loding time too.
Lets say this is home.html :
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="homepage">
// Other content here
</div
</body>
</html>
So in Second html file you can use different class
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="secondpage">
// Other content here
</div
</body>
</html>
so now yourstylesheet will look like :
.homepage{
//your style here
}
.secondpage{
// your style here
}
Hope so this helps.
I'm building a one-page application using Vue.js and Webpack for bundling the client-side (HTML, JS, all in one file).
It seems that search engines, such as Google, are having trouble indexing the content, since it's only rendered through that bundle file, and doesn't exist on the html files (attached example).
My question is - how can I make Google index my app's content?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My App</title>
<link rel="stylesheet" type="text/css" href="dist/main.css">
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
<script src="dist/build.js?1500"></script>
</body>
</html>
There's nothing fancy about the HTML, JS or CSS code. It all works fine if I embed the css inside the HTML file, but when linking to the external file it doesn't work.
Just uploaded it all to Digital Ocean, so I'm not sure if there are any special configurations I need to make to enable these external files to work.
Here's the HTML file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>v1</h2>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
How to create the simplest possible html page which uses Polymer Paper Elements?
I would like to have a single html file which loads all reqired libraries from elsewhere (CDN). Example:
<!DOCTYPE html>
<html>
<head>
<title>Polymer Test</title>
</head>
<body>
<paper-button>hello world paper button</paper-button>
</body>
</html>
This obviously does not work, because <paper-button> is not known to browsers. So what do I have to include to make it work on all current browsers?
Is it possible without downloading any libraries myself and having to place them on my webserver beside my html file?
You can use Polygit a CDN like tools for Polymer
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Simple</title>
<base href="http://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="paper-button/paper-button.html">
</head>
<body>
<paper-button raised> Hello World!</paper-button>
</body>
</html>
Here is codepen with polygit, you can fork kit
Considering this markup:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="css/layouts.css" type="text/css" media="all">
<noscript>
<link rel="stylesheet" href="css/layouts_nojs.css" type="text/css" media="all">
</noscript>
<script src="js/jquery.min.js" charset="utf-8"></script>
</head>
<body>
I'm using Thymeleaf as the engine, but the output code results as this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="css/layouts.css" type="text/css" media="all">
</head>
<body>
<noscript>
<link rel="stylesheet" href="css/layouts_nojs.css" type="text/css" media="all">
</noscript>
<script src="js/jquery.min.js" charset="utf-8"></script>
How can I prevent this behaviour?
Thymeleaf last version, 2.1.3, use nekohtml library, this library for some versions previous to 1.9.14 has a bug that avoid the use of noscript in head, so probably you have using an older version, review your dependencies.
But, this is not all, all superior versions don't allow within head, the use of elements with children, so noscript in head can not support link tag inside it. Using your code the result must be this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="css/layouts.css" type="text/css" media="all">
<noscript>
</noscript><link rel="stylesheet" href="css/layouts_nojs.css" type="text/css" media="all">
<script src="js/jquery.min.js" charset="utf-8"></script>
</head>
<body>
This issue is more complicated to be resolved, it requires deeper changes.
Workarounds:
1 - Use a custom LegacyHtml5TemplateParser where you can set "http://cyberneko.org/html/features/parse-noscript-content" feature to false in the HTMLConfiguration of nekohtml library, this make not to parse the content of noscript elements, so is treated as text, to make use of dynamic code of thymeleaf, set th:inline attribute to text in the noscript start tag and use the markup inside like in
Tutorial: Using Thymeleaf, 12.1 Text inlining
An example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="css/layouts.css" type="text/css" media="all">
<noscript th:inline="text">
<link rel="stylesheet" href="[[#{css/layouts_nojs.css}]]" type="text/css" media="all">
</noscript>
<script src="js/jquery.min.js" charset="utf-8"></script>
</head>
<body>
2 - Another possibility, more complex, needs to use a custom LegacyHtml5TemplateParser for thymeleaf, and a custom HTMLTagBalancer for nekohtml, so you can control if head can contained elements with children. This involves creating a serial of classes to override the nekohtml behaviour, these classes are the following:
HTMLAugmentations, HTMLConfiguration, HTMLScanner, HTMLTagBalancer, LostText, ObjectFactory, SecuritySupport, SecuritySupport12.
You must copy the original sources from nekohtml library in your package an modify them accordingly to this package changes, and in LegacyHtml5TemplateParser use your new HTMLConfiguration class.
For this workaround, in HTMLTagBalancer, change these lines:
if ((fElementStack.top > 1 && fElementStack.peek().element.code == HTMLElements.SCRIPT)
|| (fElementStack.top > 2 && fElementStack.data[fElementStack.top-2].element.code == HTMLElements.HEAD)) {
with these others:
if (fElementStack.top > 1 && fElementStack.peek().element.code == HTMLElements.SCRIPT) {
//|| (fElementStack.top > 2 && fElementStack.data[fElementStack.top-2].element.code == HTMLElements.HEAD)) {
Pros: lets you define th:block tags within head for thymeleaf.
Cons: if you want to change nekohtml library version to a newer one, you must ensure that the changes do not affect your code.
move the script above the noscript stylesheet
Write a noscript into the document while a page parses html and executes javascript.
<script type="text/javascript">
document.write('<noscript><div>example</div></noscript>');
</script>
6 years later I've faced the same problem when trying to implement Facebook Pixel No Script Tag.
Well, here's my workaround:
fragments/general.html
<head th:fragment="headFragment">
<!-- [...] -->
<th:block th:insert="~{fragments/general :: fbpNoScriptFragment}" />
<!-- [...] -->
</head>
<!-- The noscript below will be inserted in the <head> fragment above, just not directly -->
<noscript th:fragment="fbpNoScriptFragment">
<img height="1" width="1" style="display:none"
th:attr="src='https://www.facebook.com/tr?id=' + ${fbp_id} + '&ev=PageView&noscript=1'"/>
</noscript>
And in my "main" template file:
<head>
<!-- [...] -->
<th:block th:include="fragments/general.html :: headFragment" />
<!-- [...] -->
</head>
And now it works, so it seems like whatever causes this error as #Jack Froilson explained, it doesn't "chain" the error, by inserting it indirectly it seems to work properly.