WRA HTML & CSS – BUILDING WEBPAGES

TODAY’S AGENDA Review: external stylesheets Review: transforming a list Intro: the object Intro: the CSS Box Model Activity: build a layout with CSS

REVIEW [YET AGAIN]: THE DOM What is it? What does it do? What does it make possible? Who/what uses it?

REVIEW: EXTERNAL STYLE SHEETS Describe each: o Inline o Embedded o External Describe how inheritance works Link to your stylesheet from the o

REVIEW: TRANSFORMING A LIST How did we make a list into a nav menu? Discuss the manipulation of the list object

NEW OBJECT TYPE: Short for division Used to contain other objects o can contain any object type o can even contain other objects Purpose is to group similar/related content o example: header objects o example: footer objects Can have id and style attributes

EXAMPLE OBJECT This is My Cool Website Home About Me Resume

ACTIVITY Download markup test filemarkup test file Examine content Discuss: how can we use objects to organize the content into sections? Create the objects and contain objects o be sure to open and close both tags corrects o be sure to give objects id attributes

DISCUSS What do the objects accomplish?

THE CSS BOX MODEL Every object has 5 properties that control size and positioning o margin o padding o border o height o width Everything (everything!) is a box

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: o margin:20px; o margin-bottom:10px

BORDER :: THE CSS BOX MODEL the solid edge around objects between margin and padding can control values for every edge or individual edges examples: o border:thick dashed blue; o border-top: thin solid red;

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: o padding:20px; o padding-top: 5px;

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: o width:900px;

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: o height:100px;

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

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 object? Task: turn list into a navigation menu, consider from box model perspective

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

THE "INVERTED L" Header, left navigation, content right, footer Built semantically, in pure CSS Compare against old-school table methodold-school table method

STEPS TO BUILDING A LAYOUT 1.Wireframe 2.Build structure with objects 3.Populate structures with conent 4.Use CSS to position objects 5.Profit

STEP 1: WIREFRAME

STEP 2: BUILD STRUCTURE WITH Notice: all objects have id Notice: use of nested objects Notice: indenting to read of structure easier Notice: using a comment when closing objects go here

STEP 3: POPULATE STRUCTURE WITH STUFF Add the following to your structure o In header, a header and a subheader o In navigation, a list with at least four list items (links) o In content, a subheader and at least three paragraphs o In footer, a paragraph with footer info

STEP 4: POSITION WITH CSS Plan of attack: o assign width value to container, center it o assign width to navigation, float it (wut) o position content object to sit next to navigation o make sure margins work WTF is float??? (store this one away for next week)

SAVE EVERYTHING You will probably want this for reference. You can always reuse code.

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