This is a very trivial question: why won't thymeleaf connect my html code? I looked at various stackoverflow questions, but I seriously don't get what the issue is here.
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org">
<body>
<div th:replace="header::head"></div>
<h1>Hello </h1>
</body>
</html>
header.html
<div th:fragment="head">
<header>
<ol>
<li>Home</li>
<li>About</li>
</ol>
</header>
<h2>Imported</h2>
</div>
File hierarchy
Thanks
You should move your templates (index.html and header.html) from static folder to the templates folder.
Files from templates are processed by Thymeleaf.
Files from static are served "as is".
Related
I created a website for my mom a while back and I finally want to make it cleaner and make a universal header and footer so that I only have to change the one document when I update it instead of every page. I spent a while looking around, but I was unable to make anything work. I have a good understanding of HTML and CSS, but I'm pretty much a novice and haven't really used javascript, if thats what this entails, so detailed help would be really appreciated! How do I go about this? (If it matters, the website is hosted on DreamHost).
Here is the basic HTML code I have for the header and footer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="wrapper">
<header>
<img src="img/logo.png" alt="(logo)">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PRODUCTS</li>
</ul>
</nav>
</header>
<footer>
<p> Email: email#gmail.com </p>
<div id="logo">
</div>
</footer>
</body>
</html>
You can use a library like react or a framework like angular 2 or vue js to extend the HTML
You could use PHP to do this. You would simply include header.php for example. It is possible to use any other server-side code.
It is also possible with JavaScript, but keep in mind that JavaScript is executed on the Client side, so that some users could experience issues due to deaktivated javascript inside the browser.
I'm putting a simple website (HTML 5 and CSS3) for a friend yet I can't understand why the CSS file is not loading and formatting the page.
Here is the synopsis:
I've coded the page using "liveweave" and there are no call out errors and the page is looking as it should.
The .css file exists on the server (in the same dir as the index.html file - I'm referencing it as you would in the header section of my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<title>Styleyes Eyewear</title>
<link rel="stylesheet" href="http://styles.herobo.com/styleyes.css">
</head>
<body>
<!-- header area -->
<div class="header_div">
<img src="http://styleyes.herobo.com/img/logo_small.png" alt="Styleyes Eyewear">
<!-- navigation area -->
<nav class="nav">
<ul>
<li>PRODUCTS</li>
<li>OUR CULTURE</li>
<li>STORES</li>
<li>FOLLOW US</li>
</ul>
</nav>
</div>
<!-- content area -->
<div>
<img width="100%" src="http://styleyes.herobo.com/img/homepage_girl.jpg">
</div>
</body>
</html>
Inside "liveweave" you can combine the files (html and css) into the one file. I've done this and uploaded it as a reference and the site, again looks fine - here is a link to that:
liveweave dev page:
http://liveweave.com/XI5QT7
combined code into "source.html" and loaded onto the webserver
http://styleyes.herobo.com/source.html
So Im not sure why when I have my "index.html" seperate to my ".css" its not picking it up? If the .css file exists and I'm calling it from the index.html file as described above, It should in theory format the page.
but this is what I'm getting...
http://styleyes.herobo.com/
Any ideas as to why this is happening? Is it something in my code? I've tried on different browsers and different computers - giving same results.
Thanks!
If your .html and .css are inside of the same directory, you should use relative URI instead of absolute ones (like this):
<link rel="stylesheet" href="styleyes.css">
Also: In your live version, the CSS is actually simply not accessible (Error 404). Is the filename spelled correctly?
Editing a README.md for a git repository. But I want to embed raw HTML into the the readme. I'm using Markdown, which is an excellent tool. Yet, the code just keeps showing up as rendered HTML.
How do I keep it Raw?
And formatted like code?
Here it is if you're curious:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome</title>
</head>
<body>
<h1>Django Site</h1>
<hr />
<p>Thanks for visiting.</p>
</body>
</html>
The heck? It works here.
I suppose you are on GitHub.
GitHub only allows certain HTML elements and attributes inside their markdown: all others are stripped to prevent XSS and defacing.
And of course, <body> is one of the forbidden tags as it would make the HTML invalid if present (a body inside a body)
This is documented at: https://help.github.com/articles/github-flavored-markdown/#html
Use "`" This Sign To Use Raw Code Snippets
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome</title>
</head>
<body>
<h1>Django Site</h1>
<hr />
<p>Thanks for visiting.</p>
</body>
</html>
It Will Allow A User To Copy Your Code Directly From Your README.md File In Github By Just Pressing A Button !!!
I am working with a very big HTML file, which has a lot of content in the body section.
Are there any "compilers" or merging applications for HTML that can merge multiple HTML files?
Example:
a.htm
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
INCLUDE "b.htm"
<div>
INCLUDE "c.htm"
</div>
</body>
</html>
b.htm
some text
Link
INCLUDE "c.htm"
c.htm
more <span>text</span>
would be merged to:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
some text
Link
more <span>text</span>
<div>
more <span>text</span>
</div>
</body>
</html>
There are indeed – depending on your needs these offer drastically different mechanisms and tools.
One particular quite simple HTML compiler that is fashionable at the moment is Jekyll. Jekyll powers the blogging engine on GitHub Pages and is both easy to use and extensible.
In your case, you’d for instance write
{% include c.htm %}
instead of
INCLUDE "c.htm"
I decided to write htmlcat for exactly this purpose.
I want to introduce tabs into my Django web application. I going to see if I could just doo it all in css + html. Now while practising with tabs from http://www.htmldog.com/articles/tabs/, this is what I have done so far.
page1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN" >
<html>
<head>
<link rel="stylesheet" type="text/css" href="base.css" />
</head>
<base>
<div id="header">
<h1>Tabs</h1>
<ul>
<li id="selected">This</li>
<li>That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
</base>
</html>
page2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN" >
<html>
<head>
<link rel="stylesheet" type="text/css" href="base.css" />
</head>
<base>
<div id="header">
<h1>Tabs</h1>
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
</base>
</html>
Now page1.html, and page2.html are almost the same. The only thing that is different,
id="selected" part just to indicate which tab has been selected. So what I want to do is remove any code that is redundant. For start, I wonder if it even possible I could even cut it to one index.html page as well.
You can't have one page with two different states using CSS + HTML only. Setting of id="selected" needs to result from come code somewhere, either on the server, or on the client.
You can use a URL hash to set the tab state using JavaScript. For example:
mypage.html#tab1
You can have JavaScript look at the value of document.location.hash and set selected on the appropriate tab.
I wouldn't try to reinvent the wheel. Check out jQuery UI. Has tabs built in. http://jqueryui.com/demos/tabs/