1. ACT102 INTRODUCTION TO WEB DESIGN

2. Content Padding Border Margin

3. Left to Right, Top to Bottom

4. Top left of the page = (0,0)

5. This is a paragraph to which I have set the width. If the next paragraph fits next to it on the right, it will line up.

6. This is a paragraph to which I have set the width. However, if the second paragraph is too wide to fit the screen, it will shift down. This is the basic principle of Normal Flow

7.  Absolute  Relative  Float When you want to do fancier layout, you can position “boxes” or “containers.” By doing this, you interrupt the normal (top to bottom, left to right) flow. You can do this in three ways; Float, Absolute, and Relative.

8. This is the normal flow of a document; from top to bottom, left to right. When you position “boxes,” the you interrupt the normal (top to bottom, left to right) flow. You can do this in three ways; Absolute, Relative, and Float. This text is floated right. This is the normal… This text is floated right..float {float:right;} HTML CSS

9. This text is absolutely positioned. This is the normal… This text is absolutely positioned..abs {position: absolute; top: 40px; left: 80;} HTML CSS This is the normal flow of a document; from top to bottom, left to right. When you position “boxes,” the you interrupt the normal (top to bottom, left to right) flow. You can do this in three ways; Absolute, Relative, and Float.

10. This is the normal flow of a document; from top to bottom, left to right. When you position “boxes,” you interrupt the normal (top to bottom, left to right) flow. You can do this in three ways; Absolute, Relative, and Float. This text is relatively positioned. This is the normal… This text is relatively positioned..rel {position: relative; top: 40px; left: 80;} HTML CSS

11. Must be in specific order: LVHA (LoVe, HA!) a:link { color : blue ;} a:visited { color : purple ;} a:hover { color : purple ;} a:active { color : blue ;}

12. a.nav:link { color : pink ;} a.nav:visited { color : red ;} a.nav:hover { color : yellow ;} a.nav:active { color : yellow ;} index page HTML CSS

13. li { list-style-image : url(“pic.jpg”) ; } body { background-image : url(“pic.jpg”) ; }

14. My Resume Content goes here HTML

15. #container #banner #nav#content #footer

16. home contact My Resume Resume text Copyright info here HTML