Midterm review cont.

Today we reviewed how to build another webpage using html and css. The following is the result of the review:

html page:


<title>My Layout</title>

<meta charset=”utf-8″ />

<link rel=”stylesheet” href=”style.css”

type=”text/css” />



<section id=”container”>


<h1>This is smy header</h1>

<p>Welcome to my page</p>


<nav>these are my links


<li><a href=”index.heml” alt=””>Home</li>

<li><a href=”school.html” alt=””>School</li>

<li><a href=”work.html” alt=””>Work</li>

<li><a href=”family.html” alt=””>Family</li>


<section id=”main_content”>



<p>This is my <span>content</span></p>  (use span if you want to stylize separate sections)



<section id=”sidebar”>

these are my ads



this is my footer

&copy; 2010 (entity)



CSS Stylesheet:

body {

background-color: tan;

font-size: medium;


#container {

border: 1px dotted blue;

width: 506px;

margin-left: auto;

margin-right: auto;

header {

display: block; (if browser doesn’t support html 5)

border: 1px solid blue;

text-align: center;

width: 504px;

height: 50px;

line-height: .5em;

letter-spacing: .1em;


h1 {

font-size: 120%

margin: 0;

padding: 0;


header h1, h2 {

font-family: “Arial”, sans-serif; }

p {margin: 0;}

nav {

display: block; (if browser ‘  ‘)

border: 1xp solid blue;

width: 100px; or 25%;

height: 300px;

float: left;


nav ul {

list-style-type: none;

border: 1px solid green; (to see where the empty space is)

margin: 0px;

padding: 0px;


nav li {

line-height: 2em;


nav a {

display: block;

width:  50px;

border: green 2px dotted:

font-family: arial, sans-serif;

nav a: link {

text-decoration: none;


nav a: hover {

background-color: blue;

color: white;


section {display: block;}

#main_content {

border: 1px solid blue;

width: 280px;

height: 300;

float: left;

padding-left: 10px;

padding-right: 10px;


span {font-family: “”}

#content h1 {


#sidebar {

border: 1px solid blue;

display: block;

height: 300px;

width: 100px;

float: left;}

footer {

display: block;

border: 1px solid blue;

clear: both;

width: 504px; }


About cruxstew

I'll update this when I get a chance.
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s