WRA 210: 10/30/2013WIREFRAMES

TO HTML/CSS

TODAY’S AGENDA

• Review: the <div> object

• Review: the CSS Box Model

• Review: box model, <div> and layout

• Intro: HTML5 structural objects

• Activity: turn your structural sketches into

functional HTML documents

EXAMPLE <DIV> OBJECT

<div id="header">

<h1>This is My Cool Website</h1>

<ul id="navigation">

<li><a

href="index.html">Home</a></li>

<li><a href="about.html">About

Me</a></li>

<li><a

href="resume.htm">Resume</a></li>

</ul>

</div><!-- #header -->

THE CSS BOX MODEL

• All objects are part of the box

model (not just <div>)

• margin: space outside the

border, between objects

• border: perimeter, boundaries

• padding: space inside border,

between content

• height, width: space between

padding

• control single sides of a box or

all sides at once

REVIEW: CREATING CSS LAYOUTS

• Discuss the players

o HTML structural objects

o The CSS Box Model

• How do they work together to enable layout?

• Advantages of this method over older methods of

creating layouts?

REMINDER: HTML5

• Evolutionary, not revolutionary

• Almost all HTML4 objects supported

• Usable now; browser support varies

• Adds native support for audio, video, drawing

• Simplifies a lot of HTML4 markup

• Adds new forms of semantic markup

NEW STRUCTURAL MARKUP IN HTML5

• Header

• Section

• Article

• Aside

• Footer

COMPARE: <DIV> TO HTML5 OBJECTS

<div id="header">

<h1>This is My Cool Website</h1>

</div><!-- #header -->

<header>

<h1>This is My Cool Website</h1>

</header>

• Advantages? Semantic? Discuss.

HTML5 SEMANTIC MARKUP

Structural Markupin HTML4

Structural Markupin HTML5

SKETCH YOUR WIREFRAME WITH DIVS

I brought paperFigure out your widths, padding, margins, etc. Try and get your wireframes to look like the

following:

BUILD FROM WIREFRAMES

ACTIVITY: PORTFOLIO BEGINS TONIGHT

• Use your sketches to make structural markup

o Use HTML5 semantic objects as much as possible

o Write clean markup

use ID attribute to name objects when needed

indentations

comments

• Populate structure with real content

• Run markup through validator

IMPORTANT!!!!

• Be certain to save your work

• This is the beginning of your actual portfolio

• We'll build on this next week

FOR NEXT TIME

• Complete landing page structural markup

• Overview of HTML5

• About CSS Floats

• CSS Floats and the Box Model

• CSS Float Tutorial

• Recommended: experiment with float and the box

model, try to figure out how it works