WEBSITE LAYOUTING IN CSS3 WITH HTML5
Creating Divisions using HTML5 Semantics
a.
Create New Folder in Documents with your Name+Site+Project.
b.
Inside your Site Project folder, create two
additional folder and name it img
& css respectively.
c.
Collect at least 1 logo (science, etc), 1 photo
and a background image, place it in img
folder.
d.
Type the following code in Notepad and save it
in your Site Project folder.
<!doctype html>
<head lang="en">
<meta charset="utf-8">
<title>Primer on Theory of Relativity</title>
<link
rel="stylesheet" href="css/style.css">
<head>
<body>
<div id="container">
<header>
header
</header>
<nav>
nav
</nav>
<section id="main" role="main">
<article>
<h1>
Primer on Theory of Relativity </h1>
</article>
</section>
<aside>
sidebar
</aside>
<footer>
footer
</footer>
</div> <!--! end of #container -->
</body>
</html>
e.
Save as
index.html, do not close Notepad.
f.
Open new
instance of Notepad, type the following rules:
/*
=============================================================================
Primary styles
Author:
==========================================================================
*/
header {
background-color:#DC6F65;
}
nav {
background-color:#70996A;
}
section#main {
background-color:#EBEBEB;
}
aside {
background-color:#8CCAF0;
}
footer {
background-color:#993398;
}
g. Save it with a filename style.css in your css folder.
Throughout the rest of this tutorial
you'll often be modifying existing rulesets in your css file, ie. style.css.
Let’s give some of
these elements a starter heights so we can start to visualize the layout.
Modify these sections of the CSS: and it's
time to add a new line to it, and displayed with these mark! /*+*/ ←add these lines to your
style.css rule.
header {
background-color:#DC6F65;
height:150px; /*+*/
}
nav {
background-color:#70996A;
height:40px; /*+*/
}
footer {
background-color:#993398;
height:100px; /*+*/
}
Save
your css rule!
1. Now, go
back to your index.html file,
then add the following below the: <h1>
Primer on Theory of Relativity </h1>
<p>
The theory of relativity,
proposed by the Jewish physicist Albert Einstein (1879-1955) in the early part
of the 20th century is one of the most significant advances of our time.
Although the concept of relativity was not introduced by Einstein, his major
contribution was the recognition that the speed of light in a vacuum is constant
and an absolute physical boundary for motion.
<br> This does not have a
major impact on a person's day-to-day life since we travel at a speeds much
slower than light speed. For object travelling near light speed, however the
theory of relativity states that objects will move slower and shorten in length
from the point of view of an observer on earth.
</p>
2. Type the
following list inside your nav tag.
It looks like this:
<nav>
<ul>
<li><a
href="/">Home</a></li>
<li><a href="/about">About
Us</a>
<li><a
href="/products">Products</a>
<ul>
<li><a href="/labsupplies">Lab Supplies</a></li>
<li><a href="/books">Books</a></li>
</ul>
<li><a
href="/services">Services</a>
<li><a
href="/contact">Contact</a>
</ul>
</nav>
3. Type the
following list inside your aside
tag. It looks like this:
<aside>
<h2>Topics</h2>
<ul>
<li>Climate Change</li>
<li>Sea Level</li>
<li>Exploration</li>
<li>Results</li>
<li>Resources</li>
</ul>
</aside>
4. Type the
following list inside your footer
tag. And so it looks like this:
<footer>
<p id="about">We're a full-observatory and action bureau
with service-people globally.
Call us, let us improve our living with deepest concern to
environment!</p>
<div id="footerlist">
<h3>Contact</h3>
<ul>
<li><a href="/email">Via
Email</a></li>
<li><a href="/contact_form">Web
Form</a></li>
<li><a href="/pigeon">Carrier
Pigeon</a></li>
</ul>
</div>
<p id="footercopy">All content © 2014, Yourname </p>
</footer>
This
completes your document structure in HTML5, now you’re just going to style this
HTML5 document by modifying the style.css rule sets.
Go on, explore and discover the beauty of creating web page with style. Just a
reminder, every time you create modification in your style.css file, refresh the index.html file in your browser to see
the result. To start:
1. Add this
code in your style.css file to create padding, it looks like this:
section#main, aside, footer {
padding:10px;
}
2. Now, since
we don't want our design stretching full-width across the browser, let's give
the content area a width, and center it on the page. Add this below your custom
styles:
div#container {
width:960px;
margin:auto;
margin-top:20px;
border:1px solid grey; /*+*/
border:1px solid #4B4B4B;
border-radius: 20px;
border-top-left-radius: 20px 20px;
overflow:hidden;
box-shadow:0 0 15px #333;
}
aside, footer {
padding:10px;
}
3. Then line
up the section main and aside by assigning width and float rule by adding the
rule set to your style.css.
section#main {
background-color:#EBEBEB;
width:710px;
float:left;
padding-left:25px;
padding-right:25px;
padding-bottom:20px;
}
aside {
background-color:#8CCAF0;
width:180px;
float:right;
}
4. The footer
has been swallowed up by section-main and aside floats; to display footer, add
this code to your style.css. below the line: “height:100px;”
clear:both; /*+*/
(This is your webpage's initial view)
Below is your webpage' expected output after completion of this activity.
Note: This is adapted from kdmc tutorials written by Scot Hacker.
