[custom-header-login]
We start by installing the low footprint but high performance web server, nginx, onto the Raspberry Pi. We will continue with this server to ensure that we have a complement of lessons taking you though HTML, CSS and Geany in this lesson; jquery in the next and PHP to follow. With nginx installed we add the IDE Geany. this can help us create and edit web pages , stylesheets as well as programming languages like Python, PHP and even C. We will use Geany to create the web pages and stylesheets. What we are aiming at in this course is to create a simple CSS web page with a navigation bar.
We can use this basic layout as we progress into other tutorials. The code follows and then the video on how it was made.
The web page that we create is simple
<!DOCTYPE html>
<html>
<head>
<title>TheUrbanPenguin</title>
<link rel=”stylesheet” href=”css/main.css”/>
</head>
<body>
<div id=”page”>
<div id=”header” class=”frame”>
<h1>The Urban Penguin</h1>
</div>
<div id=”menu” class=”frame”>
<ul>
<li><a id=”home” href= ‘#’>Home</a></li>
<li><a id=”away” href= ‘#’>Away</a></li>
</ul>
</div>
<div id=”content” class=”frame”>
The home of the penguin.
</div>
</div>
</body>
</html>
Then the css:
@import url(https://fonts.googleapis.com/css?family=The+Girl+Next+Door);
@import url(https://fonts.googleapis.com/css?family=Courgette);
#page {
width: 700px;
margin: auto;
border: solid 1px #CCC;
border-radius: 5px;
}
.frame {
width: 700px;
margin: 0px;
padding: 0px;
background-color: #FFF;
}
.frame h1 {
text-align: center;
font-size: 300%;
}
#header {
background-color: #1DB21A;
color: #FFF;
height: 55px;
font-family: ‘Courgette’, cursive;
}
#menu {
height: 22px;
font-family: Arial, Helvetica, sans-serifs;
background-color: #000;
color: #FFF;
float: left;
}
#menu ul {
list-style-type: none;
margin: 0px;
padding: 0px 50px;
}
#menu li {
display: inline;
float: left;
}
#menu a {
display: block;
width: 60px;
height: 22;
text-decoration: none;
color: #FFF;
}
#menu a:hover {
background-color: #1DB21A;
color: #FFF;
}
#content {
padding: 25px 50px;
width: 600px;
font-family: ‘The Girl Next Door’, cursive;
font-size: 150%;
}