I want to build a semantic html page with a two column layout. Which is the correct way to structure the page. Please take note of where the aside is placed.
Option 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header></header>
<main>
<section class="col-1"></section>
<aside class="col-2"></aside>
</main>
<footer></footer>
</body>
</html>
Option 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header></header>
<main class="col-1">
<section></section>
<aside></aside>
</main>
<aside class="col-2"></aside>
<footer></footer>
</body>
</html>
Which option is correct?
Related
I want to use a grails layout to define a common layout for all pages in the application. Currently it looks something like this:
<!DOCTYPE html>
<html lang="dk">
<head>
<meta charset="UTF-8">
<title><g:layoutTitle default="Title"/></title>
<asset:stylesheet src="css/default.css"/>
</head>
<body>
<header><h1><g:layoutTitle default="Title"/></h1></header>
<main></main>
<footer></footer>
</body>
<asset:javascript src="jquery-3.4.1.min.js"/>
</html>
Some views may require additional stylesheets or scripts over the defaults provided in the layout, but if I simply add these to the view, they do not appear:
<%# page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang=\"dk\">
<head>
<meta name="layout" content="index" />
<asset:stylesheet src="css/additional.css"/>
</head>
<body>
<main>${content}</main>
</body>
<asset:javascript src="js/extra.js"/>
</html>
Is there no simple clean way to do this?
Check out: http://docs.grails.org/3.1.1/ref/Tags/layoutBody.html
Example decorated page:
<html>
<head>
<meta name="layout" content="myLayout" />
<script src="myscript.js" />
</head>
<body>Page to be decorated</body>
</html>
Example decorator layout:
<html>
<head>
<script src="global.js" />
<g:layoutHead />
</head>
<body><g:layoutBody /></body>
</html>
Results in:
<html>
<head>
<script src="global.js" />
<script src="myscript.js" />
</head>
<body>Page to be decorated</body>
</html>
I have 3 <a> tag link to 3 pages. I set hover state is red and now I want after I click and go to a pages will keep background-color of this <a> like hoverstate.How can i do it?
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultimate Frisbee - Home</title>
<link rel="stylesheet" href="css/hw1.css">
</head>
<body>
<header>
<h1>Ulimate Frisbee</h1>
<nav>
Home
Teams
History
</nav>
</header>
<main>
//some code here
</main>
</body>
</html>
and CSS:
header > nav > a{
background-color:while;
}
header > nav > a:hover{
background-color: rgb(255, 204, 164);
}
I mean after I click to Teams will change background-color of Teams like hover state
It's a bit unclear about what technology you are using, but on the face of what you would do is have three seperate pages (index.html, teams.html, history.html).
Each of these would share the boilerplate you have here, but change which link has the 'active class'.
Eg.
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultimate Frisbee - Home</title>
<link rel="stylesheet" href="css/hw1.css">
</head>
<body>
<header>
<h1>Ulimate Frisbee</h1>
<nav>
Home
Teams
History
</nav>
</header>
<main>
//some code here
</main>
</body>
</html>
teams.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultimate Frisbee - Teams</title>
<link rel="stylesheet" href="css/hw1.css">
</head>
<body>
<header>
<h1>Ulimate Frisbee</h1>
<nav>
<a href="index.html" >Home</a>
Teams
History
</nav>
</header>
<main>
//some code here
</main>
</body>
</html>
history.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultimate Frisbee - History</title>
<link rel="stylesheet" href="css/hw1.css">
</head>
<body>
<header>
<h1>Ulimate Frisbee</h1>
<nav>
Home
Teams
History
</nav>
</header>
<main>
//some code here
</main>
</body>
</html>
You then use the .active class to style that way.
eg
a:hover, a.active {
background-color: red;
}
Now, copy pasting code like this probably isn't sustainable, so that's where you might start using a templating enging like pug, or be doing some kind of backend rendering or whatever.
But this is the gyst of it.
I am trying to divide my page into three parts using thymeleaf fragments/layouts.
Lets say I have following page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Demo Title</title>
</head>
<body>
<div class="container">
<div class="content">Some content goes here</div>
</div>
</body>
</html>
And I am trying to divide it into following three fragments.
top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Demo Title</title>
</head>
<body>
<div class="container">
bottom.html
</div>
</body>
</html>
page-content.html
<div class="content">Some content goes here</div>
I DID TRY AS BELLOW BUT DID NOT WORK:
top.html
<div th:fragment="top">
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Demo Title</title>
</head>
<body>
<div class="container">
</div>
page-content.html
<div th:replace="/top :: top"></div>
<div class="content">Some content goes here</div>
</div>
</body>
</html>
Please suggest me possible direction to look into.
I'm doing my view based on a template, but there are some areas where I want to enter fragments.
Template : base.html
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>HELLO</title>
</head>
<body>
<div layout:fragment="content"></div>
<footer>
Year Template
</footer>
</body>
</html>
view: list.html
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="base">
<head th:replace="fragments/init :: head">
<title>Title</title>
</head>
<div layout:fragment="content">
<h1> <remove>List</remove> <small></small> </h1>
</div>
<footer th:replace="fragments/init :: footer">
Year List
</footer>
</html>
Fragments : fragment/init.html
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body>
<footer th:fragment="footer">
2004
</footer>
</body>
</html>
With the head fragment, it works correctly. But in the footer, But in the footer, the code of the template is displayed.
Output:
<html lang="en"><head>
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body screen_capture_injected="true">
<div>
<h1> <remove>List</remove> <small></small> </h1>
</div>
<footer>
Year Template
</footer>
</body>
</html>
I hope you can help me. Thanks in advance.
UPDATE
base.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>Template title</title>
</head>
<body>
<header>
<h1>Template Title</h1>
</header>
<section layout:fragment="content">
<p>Text Template</p>
</section>
<footer layout:fragment="footer">
<p>Footer template</p>
</footer>
</body>
</html>
list.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="base">
<head th:replace="fragments/init :: head">
<title>Title List</title>
</head>
<body>
<section layout:fragment="content">
<p>Content List page</p>
</section>
<footer layout:fragment="footer">
<div layout:include="fragments/init :: extra" th:remove="tag">
<p>Footer List page</p>
</div>
</footer>
</body>
</html>
init.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head layout:fragment="head">
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body>
<div layout:fragment="extra">
<p>Extra Content Fragment </p>
</div>
</body>
</html>
Output:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body screen_capture_injected="true">
<header>
<h1>Template Title</h1>
</header>
<section>
<p>Content List page</p>
</section>
<footer>
<p>Extra Content Fragment </p>
</footer>
</body></html>
I managed to include the code fragment in the footer, but my goal is to replace it.
Solution:
<footer layout:fragment="footer" layout:include="fragments/init :: extra" th:remove="tag">
<p>Footer List Page</p>
</footer>
The footer in your layout page doens't contain an fragment element, so the footer doesn't change.
The content page was 'decorated' by the elements of Layout.html, the
result being a combination of the decorator page, plus the fragments
of the content page (<head> elements from both pages with the <title>
element from the content page taking place of the decorator's, all
elements from the decorator, but replaced by all content page
fragments where specified).
https://github.com/ultraq/thymeleaf-layout-dialect#decorators-and-fragments
This is some code I working on but now of JQuery Mobiles elements are working. It been a while since I have coded. Also if it important I am using Sumlime Text 2.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.......</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div date-role="page" data-theme="a">
<div date-role="header">
<!--Main Nav Bar-->
Home
<h1>HOME</h1>
</div>
<div data-role="content">
hello
</div>
</div>
</body>
</html>
From the looks of it, everything seems to be written correctly. The only thing that could be is that it does not use the correct HTML 5 doc type but html4. Jquery mobile is heavily reliant on HTML5
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
</head>
<body>
</body>
</html>