1. HTML & CSS – Building Webpages WRA 210 10.28.13

2. Today’sAgenda • Review: external stylesheets • Review: transforming a list • Intro: the <div> object • Intro: the CSS Box Model • Activity: build a layout with CSS

3. Review [yet again]: the DOM • What is it? • What does it do? • What does it make possible? • Who/what uses it?

4. Review: external style sheets • Describe each: • Inline • Embedded • External • Describe how inheritance works • Link to your stylesheet from the <head> • <link rel="stylesheet" href="style.css">

5. Review: transforming a list • How did we make a list into a nav menu? • Discuss the manipulation of the list object

6. New Object Type: <div> • Short for division • Used to contain other objects • can contain any object type • can even contain other <div> objects • Purpose is to group similar/related content • example: header objects • example: footer objects • Can have id and style attributes

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

8. Activity • Download markup test file • Examine content • Discuss: how can we use <div> objects to organize the content into sections? • Create the <div> objects and contain objects • be sure to open and close both tags corrects • be sure to give <div> objects id attributes

9. Discuss • What do the <div> objects accomplish?

10. The CSS Box Model • Every object has 5 properties that control size and positioning • margin • padding • border • height • width • Everything (everything!) is a box

11. Margin :: The CSS Box Model • the space outside the border of an object • creates physical distance between objects • control value of all sides or for individual sides • value managed in pixels • examples: • margin:20px; • margin-bottom:10px

12. Border :: The CSS Box Model • the solid edge around objects • between margin and padding • can control values for every edge or individual edges • examples: • border:thick dashed blue; • border-top: thin solid red;

13. Padding :: The CSS Box Model • the space inside the border of an object and the contents of that object • can control values for every edge or individual edges • examples: • padding:20px; • padding-top: 5px;

14. Width :: The CSS Box Model • The width of an object from padding left to padding right • Does not include values from padding, border, or margin • One value: • width:900px;

15. Height :: The CSS Box Model • The height of an object from padding top to padding bottom • Does not include values from padding, border, or margin • One value: • height:100px;

16. The CSS Box Model • The properties of objects that control positioning and size • Allows us to create layouts, move objects around to match our designs

17. Box Model Experimentation • Add embedded style tags • Add more spacing between list items • Experiment: box model properties on paragraph and header objects? • Experiment: box model properties on the <body> object? • Task: turn list into a navigation menu, consider from box model perspective

18. Activity: Use Box Model for Layout • Task: create a basic "inverted L" layout • Step-by-step, building it together • Build from scratch • Right now, create an HTML file

19. The "Inverted L" • Header, left navigation, content right, footer • Built semantically, in pure CSS • Compare against old-school table method

20. Steps to Building a Layout • Wireframe • Build structure with <div> objects • Populate structures with conent • Use CSS to position <div> objects • Profit

21. Step 1: Wireframe

22. Step 2: Build structure with <div> • Notice: all <div> objects have id • Notice: use of nested <div> objects • Notice: indenting to read of structure easier • Notice: using a comment when closing <div> <div id="header"> objects go here </div><!-- #header -->

23. Step 3: Populate Structure with Stuff • Add the following to your <div> structure • In header, a header and a subheader • In navigation, a list with at least four list items (links) • In content, a subheader and at least three paragraphs • In footer, a paragraph with footer info

24. Step 4: Position <div> with CSS • Plan of attack: • assign width value to container, center it • assign width to navigation, float it (wut) • position content object to sit next to navigation • make sure margins work • WTF is float??? (store this one away for next week)

25. Save Everything • You will probably want this for reference. • You can always reuse code.

26. For Next Time • Research the box model, if you need to • Sketch out div structure for your landing pages (paper is fine) • HTML5 structural objects