Lesson 20 - Page Layout
LEARN
Office Hours
- If you need help please attend office hours
- Connect in person or via zoom 1:30-2:30 MWF
- Check the Canvas page for details
- Wednesday Lab Session 2:30-3:20 in Kepner 0090
Reading for Today
- Read 3.4 Common properties
- Follow Reading Schedule
Today
- CSS Page Layout
CSS Rule Set
- Example Rule Set
css
h1 {
font-family: serif;
font-size: 120%;
}
Hooking up CSS
- Link the Stylesheet to each HTML page
html
<link rel="stylesheet" href="styles.css">
CSS Property Groups
- Text
- Color
- Spacing
- Borders
HTML Semantic Elements
Why Semantic Elements?
- Semantic HTML Elements let you organize the content of your page.
Semantic HTML Elements
- Start with Basic Page Template
- Add in Semantic Elements
- Header
- Main
- Footer
Basic HTML Template
Add this content to index.html
```html
Page Layout Guide
- Header
- Main
- Footer
```html
```
Header Element
- The header element defines a block at the top of the page
<body>
<header>
<img src="Bear.png"
alt="Bear Logo" style="float:right" width="200">
<h2>Your Name Title</h2>
</header>
</body>
Main Element
- The main element defines bulk of the page content
```
My Home Page
Paragraph
```
Footer Element
- The footer element defines bottom area of the page
- Note the HTML entity for the copyright symbol "©"
```html
```
Never Write From Scratch
- Don't waste your time
- Someone is paying for the end result
- Give them good value for their money
- Create a page template "template.html"
Creating Pages
- Every page start with your master template
- Customize to taste
- Set page and site titles
- Add new stylesheets
- Add desire structural components
- Create custom content
- Write content as raw text
- Add HTML structure
- Add CSS style
BUILD
CSS Demo
- Demo Code
- Study code so that you can reproduce these results
- See Demo on Server
W3Schools
Validator
Project 7 - Wanted Poster
- Project Instructions
- Use float property to get divs side by side
- Google: float w3schools