Midterm Review cont.

In class today, we went created an html 5 document that is linked to an external css. This post was the result of that document.

First the html page:

<head>

<title>My Layout</title>

<meta charset=”utf-8″ />

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

type=”text/css” />

</head>

<body>

<section id=”box”>

<header>

<h1>This is smy header</h1>

<p>Welcome to my page</p>

</header>

<nav>these are my links</nav>

<section id=”content”>

<h1>Introduction</h1>

<p>This is my content</p>

</section>

<section id=”ads”>

these are my ads

</section>

<footer>

this is my footer

</footer>

</body>

Now the css page:

body {

background-color: tan;

font-size: medium;

}

#box {

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;

}

section {display: block;}

#content {

border: 1px solid blue;

width: 300px;

height: 300;

float: left;

}

#content h1 {

}

#ads {

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