html5-page

Erich Meyer

unread,

Aug 16, 2022, 3:11:18 AM8/16/22

to py4web

Hello

I have a small HTML5-file 'html5-page.html', a css-file 'style.css' and an image-file 'rose.png' in a folder. The HTML5-file can be shown in a browser (firefox).

-------------------------------------------------------------------------------------------------------------------------------------------------
html5-page.html

-------------------------------------------------------------------------------------------------------------------------------------------------

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="https://html5-templates.com/" />
<title>Responsive HTML5 Page Layout Template</title>
<meta name="description" content="Simple HTML5 Page layout template with header, footer, sidebar etc.">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>

<body>
<header>
<div id="logo"><img src="rose.png">HTML5 Layout</div>
<nav>
<ul>
<li><a href="/">Home</a>
</ul>
</nav>
</header>
<section>
<strong>Demonstration of a simple page layout using HTML5 tags: header, nav, section, main, article, aside, footer, address.</strong>
</section>
<section id="pageContent">
<main role="main">
<article>
<h2>Stet facilis ius te</h2>
<p>Lorem ipsum dolor sit amet, nonumes voluptatum mel ea, cu case ceteros cum. Novum commodo malorum vix ut. Dolores consequuntur in ius, sale electram dissentiunt quo te. Cu duo omnes invidunt, eos eu mucius fabellas.</p>
</article>
</main>
<aside>
<div>Sidebar 1</div>
<div>Sidebar 2</div>
<div>Sidebar 3</div>
</aside>
</section>
<footer>
<p>© You can copy, edit and publish this template but please leave a link to our website | <a href="https://html5-templates.com/" target="_blank" rel="nofollow">HTML5 Templates</a></p>
<address>
Contact: <a href="mailto:m...@example.com">Mail me</a>
</address>
</footer>
</body>

</html>

----------------------------------------------------------------------------------------------------------------------------------------

style.css

-----------------------------------------------------------------------------------------------------------------------------------------

html,body,div,span,h2,p,address,img,strong,ul,li,a,article,aside,footer,header,nav,section,
body{line-height:1; font-family: arial;}
h2{font-size: 21px;}
article,aside,footer,header,nav,section{display:block}
nav ul{list-style:none}

body,html {
background-color: #FFF;
}
header {
background: #AEC6CF;
padding: 20px 30px;
max-width: 940px;
margin: auto;
}
nav {
display: inline-block;
}
nav ul li a {
background: #EEE;
padding: 2px 10px;
font-size: 20px;
text-decoration: none;
font-weight: bold;
color: #444;
border-radius: 10px;
}
nav ul li a:hover {
background: #FFF;
}
nav ul li {
display: inline-block;
margin: 10px;
}
nav ul {
list-style: none;
}
#pageContent {
max-width: 1000px;
margin: auto;
border: none;
}
main {
float: left;
width: 60%;
}
aside {
float: right;
width: 30%;
}
article {
border-bottom: 2px dotted #999;
padding-bottom: 20px;
margin-bottom: 20px;
}
article h2 {
font-weight: normal;
margin-bottom: 12px;
}
article p {

}
main section {

}
footer {
background: #AEC6CF;
max-width: 1000px;
margin: auto;
clear: both;
text-align: right;
}
footer p {
padding: 20px;
}
address {
padding: 10px 20px 30px 10px;
}
aside > div {
margin: 10px auto;
background: #AEC6CF;
min-height: 100px;
}
#logo {
display: inline-block;
vertical-align: middle;
font-size: 30px;
margin-right: 75px;
color: #FFF;
}
#logo img {
width: 50px;
vertical-align: middle;
margin-right: 10px;
}
body > section {
max-width: 1000px;
margin: auto;
padding: 30px 0px;
border-bottom: 1px solid #999;
color: #333;
}

@media screen and (max-width: 1000px) {
body > section {
padding: 30px 20px;
}
}
@media screen and (max-width: 600px) {
main {
float: none;
width: 100%;
}
aside {
float: none;
width: 100%;
}

}
-------------------------------------------------------------------------------------------------------

I would like to use this as an application of py4web; how to do it?

Erich

Alexander Beskopilny

unread,

Aug 16, 2022, 7:58:00 AM8/16/22

to py4web

1 make a new app

cp -a _scaffold myapp && cd myapp

make a directory for static application files

mkdir static/tte

write your files (style.css , rose.png ) to the directory static/tte

write your html5-page.html to templates directory

2 write to controllers.py

@action("index")
@action.uses("html5-page.html", )
def index():
return dict()

3 set path to your image and style files in html5-page.html

-

replace with

-

replace

<image src="[[=URL('static/tte/rose.png') ]]">

-

replace

should work

Erich Meyer

unread,

Aug 16, 2022, 11:16:01 AM8/16/22

to py4web

Thank you very much, it works!

I had to comment out the old 'index-function' and delete a '>' in the expression '<li><a href="[[=URL('index') ]]">>Home</a>'.

Erich

Reply all

Reply to author

Forward