1. WRA 210: 10/30/2013 WIREFRAMES TO HTML/CSS

2. TODAY’S AGENDA Review: the object Review: the CSS Box Model Review: box model, and layout Intro: HTML5 structural objects Activity: turn your structural sketches into functional HTML documents

3. EXAMPLE OBJECT This is My Cool Website Home About Me Resume

4. THE CSS BOX MODEL All objects are part of the box model (not just ) 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

5. 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?

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

7. NEW STRUCTURAL MARKUP IN HTML5 Header Section Article Aside Footer

8. COMPARE: TO HTML5 OBJECTS This is My Cool Website This is My Cool Website Advantages? Semantic? Discuss.

9. HTML5 SEMANTIC MARKUP Structural Markup in HTML4 Structural Markup in HTML5

10. SKETCH YOUR WIREFRAME WITH DIVS  I brought paper  Figure out your widths, padding, margins, etc.  Try and get your wireframes to look like the following:

11. BUILD FROM WIREFRAMES

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

13. IMPORTANT!!!! Be certain to save your work This is the beginning of your actual portfolio We'll build on this next week

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