1. Page Layout Styles Exploring Computer Science – Lesson 3-8 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

2. Objectives The student will be able to:  Use table, row, and column tagging in an html page.  Add css styling to an html table.  Use grid elements in css div placement.  Add a menu to an html page.  Create a web page that includes layout styles.

3. HMTL Tags for Tables HTML tables begin and end with table elements:. Each row in a table begins and ends with table row (tr) elements: Each cell in the table begins and ends with either table header (th) elements or table data (td) elements, depending on what type of information the cell contains.  If a cell contains headers, it begins and ends with th elements:  If a cell contains data (not headers), it begins and ends with td elements:

4. HTML Table Example Let’s look at the HMTL to create this table

5. HTML Table Example

6. HTML Table Example Monday Tuesday Wednesday Thursday Friday

7. HTML Table Example Carnivores Sausage pizza Corn dogs Sloppy Joe Beef taco Chicken and dumplings

8. HTML Table Example Herbivores Veggie pizza Veggie dogs BBQ tempeh Bean burrito Tofu teriyaki

9. Sections and Positioning tag allows you to divide your HTML in sections.  This tag alone does nothing to change the look of you HTML page.  You can position sections in your document.

10. The Box Model in CSS These are the layers in the Box Model: The size of each of the layers in the box model can be specified using the usual CSS units of measure (em, %, and px).

11. Borders Borders can be specified using shorthand, like this: border: 1px solid black;  These three values represent the border-width, border-style, and border-color. Border styles are:

12. Absolute Positioning Look at this CSS code:.box1 { position: absolute; top: 100px; left: 100px; width: 80px; padding: 10px; background: #E2DFFF; } In your Journal write down what you think this code does.

13. Look at this HTML code:

14. And this CSS code:

15. The result:

16. Advertisement Project You will create an advertisement for a product of your choice (school appropriate). The page must: 1. Make use of at least one of the page layout methods discussed (Table or Positioning) 2. Include a link to the company that makes the product. Due on Friday!