Unit 3: Day 4

START DATE:DUE DATE:STATUS:Open

30.1 Theory of the Internet Lesson 4

30.2 HTML Lesson 3

Topics to Cover:
- Review of inline styles
- Introduction to layouts and using DIV tags as containers
Use the content from the last 4 videos
- At this point, you might want to search for some online that is similar in content to the videos. Then have the students copy and paste the text, giving credit with a link of course.
Quick review of using inline styles
- For text: style="text-shadow: 2px 2px #ff0000;"
- For a paragraph (or a pic within a paragraph): text-align: center
- For an image: opacity: 0.5;
Introduce the idea of Layout Tools:
- Table - old way to layout the whole page. Now only used for parts of the page and rarely at that.
- Div - used to set up sections of a page. Can have their own properties (backgrounds, borders, etc). Hard to get your head around how they layout relative to each other.
  - Use a Google Doc as an example - one div at the top covers the entire screen. A MainContent div covers
- HTML Layout elements - show this image: http://www.w3schools.com/html/html_layout.asp
Div Example 1 - Basic Div Styles Introduce Divs with basic styles
- See the IntrotoDivs example folder for a similar example
- Discuss the idea of Divs by comparing to a Google Doc. Talk about using a ‘top’ and a ‘maincontent’ div
- Set up a div_example1.html and a div1styles.css file
Optional: Go to color.adobe.com and pick out a color scheme that matches your school’s theme/colors
Create several divs and introduce the basic styles as below

div{

border: 3px solid black;

background-color: saddlebrown;

border-radius: 10px;

padding-left: 15px;

width: 60%;

box-shadow: 5px 7px;

}

30.3 HTML Assignment 2 - Ugly Website

Instructions for this assignment can be found in the folder: 1.5 - HTML & the Internet
This assignment requires students to practice their in-line styles by creating the ugliest website possible. Using DIV tags will allow them to add even more ugliness.

Continue to Unit 3: Day 5 »