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