How to separate the layers of the web and create content layer.

1. 3 Layers of a Web Page
Intro
&
Semantic HTML (Layer 1: Content)

2. 3 Layers Intro

3. 3 Layers Intro
CONTENT

4. 3 Layers Intro
CONTENT (HTML)

5. 3 Layers Intro
CONTENT (HTML)
PRESENTATION

6. 3 Layers Intro
CONTENT (HTML)
PRESENTATION (CSS)

7. 3 Layers Intro
CONTENT (HTML)
PRESENTATION (CSS)
BEHAVIOR

8. 3 Layers Intro
CONTENT (HTML)
PRESENTATION (CSS)
BEHAVIOR (Javascript
and server-side
scripting)

9. 3 Layers Intro
Separation of
Parts
CONTENT (HTML)
PRESENTATION (CSS)
BEHAVIOR (Javascript
and server-side
scripting)

10. Separation of Parts

11. Separation of Parts

12. Separation of Parts

13. Separation of Parts

14. Building a House

15. Building a House

16. Building a House
<ul id=”navigation”>
<li id=”home> </li>
<li id=”course”> </li>
<li id=”reports”> </li>
</ul>
<div id=”content>
</div>

17. Building a House

18. Building a House

19. Building a House

20. Building a House

21. 3 Little Pigs

22. Pig #1
The first pig used hay to build
his home.

23. Pig #1
It was blown away by the wolf.

24. Pig #2
The second pig used sticks to
build his home.

25. Pig #2
It was blown away by the wolf.

26. Pig #3
The third pig thought about
how a home should be built and
used bricks and mortar to build
his home.

27. Pig #3
The wolf couldn’t blow the
house down.
(but if he did, the pig would rebuild it one brick higher.)

28. Materials used
to build
webpage: HTM
L Ed
> li>
li < itors
<
HTML tags
l>
like <p>, <div>, and <ul>
u
<

29. Using Tags Correctly
<h1> For headers, especially if it’s a logo.
<h2> For topic headings
<p> for paragraphs
<caption> for captions
<ul> for lists
etc...

30. Using Tags Correctly
DO NOT use <br>
DO NOT use <hr>
DO NOT use <font>
DO NOT use <i>
DO NOT use <b>
etc...

31. Using Tags Correctly
Tables are used for tabular data only!
Tables are NOT used for layout!

32. Using Tags Correctly

33. Using Tags Correctly
h1 /h1
/h2
h2

34. Using Tags Correctly
ullia lia lia
li
a
/a/li /a/li /a/li /a/li
/ul
ulli
/h3
h3
/p /li
p
/h3
l 3
i
h
/p li
p
/
/h3
lih3
p /p/li
/ul

35. Using Tags Correctly
acronym title=”Wire Welded Reinforcement”
/acronym

36. What’s the big deal?

37. What’s the big deal?
ss
.c
.js

38. What’s the big deal?

39. What’s the big deal?

40. What’s the big deal?

41. FIN
Layer 2: Advanced CSS
coming soon!