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:

<head>

<title>My Layout</title>

<meta charset=”utf-8″ />

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

type=”text/css” />

</head>

<body>

<section id=”container”>

<header>

<h1>This is smy header</h1>

<p>Welcome to my page</p>

</header>

<nav>these are my links

<ul>

<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>

</nav>

<section id=”main_content”>

<article>

<h1>Introduction</h1>

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

</article>

</section>

<section id=”sidebar”>

these are my ads

</section>

<footer>

this is my footer

&copy; 2010 (entity)

</footer>

</body>

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; }

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s