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


CONTENT
3 Layers Intro


CONTENT (HTML)
3 Layers Intro


CONTENT (HTML)

PRESENTATION
3 Layers Intro


CONTENT (HTML)

PRESENTATION (CSS)
3 Layers Intro


CONTENT (HTML)

PRESENTATION (CSS)

BEHAVIOR
3 Layers Intro


CONTENT (HTML)

PRESENTATION (CSS)

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

PRESENTATION (CSS)

BEHAVIOR (Javascript
and server-side
scripting)
Separation of Parts
Separation of Parts
Separation of Parts
Separation of Parts
Building a House
Building a House
Building a House

          <ul id=”navigation”>
             <li id=”home> </li>
             <li id=”course”> </li>
    ...
Building a House
Building a House
Building a House
Building a House
3 Little Pigs
Pig #1
The first pig used hay to build
          his home.
Pig #1
It was blown away by the wolf.
Pig #2
The second pig used sticks to
       build his home.
Pig #2
It was blown away by the wolf.
Pig #3
  The third pig thought about
how a home should be built and
used bricks and mortar to build
           his home.
Pig #3
    The wolf couldn’t blow the
          house down.

(but if he did, the pig would rebuild it one brick higher.)
Materials used
   to build
  webpage:                            HTM
                                         L Ed
       ...
Using Tags Correctly

<h1> For headers, especially if it’s a logo.

<h2> For topic headings

<p> for paragraphs

<caption>...
Using Tags Correctly

DO NOT use <br>

DO NOT use <hr>

DO NOT use <font>

DO NOT use <i>

DO NOT use <b>

etc...
Using Tags Correctly
Tables are used for tabular data only!


Tables are NOT used for layout!
Using Tags Correctly
3 Layers of the Web - Part 1
3 Layers of the Web - Part 1
3 Layers of the Web - Part 1
3 Layers of the Web - Part 1
3 Layers of the Web - Part 1
3 Layers of the Web - Part 1
3 Layers of the Web - Part 1
3 Layers of the Web - Part 1
3 Layers of the Web - Part 1
Upcoming SlideShare
Loading in …5
×

3 Layers of the Web - Part 1

4,634 views

Published on

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

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,634
On SlideShare
0
From Embeds
0
Number of Embeds
96
Actions
Shares
0
Downloads
98
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

3 Layers of the Web - Part 1

  1. 1. 3 Layers of a Web Page Intro & Semantic HTML (Layer 1: Content)
  2. 2. 3 Layers Intro
  3. 3. 3 Layers Intro CONTENT
  4. 4. 3 Layers Intro CONTENT (HTML)
  5. 5. 3 Layers Intro CONTENT (HTML) PRESENTATION
  6. 6. 3 Layers Intro CONTENT (HTML) PRESENTATION (CSS)
  7. 7. 3 Layers Intro CONTENT (HTML) PRESENTATION (CSS) BEHAVIOR
  8. 8. 3 Layers Intro CONTENT (HTML) PRESENTATION (CSS) BEHAVIOR (Javascript and server-side scripting)
  9. 9. 3 Layers Intro Separation of Parts CONTENT (HTML) PRESENTATION (CSS) BEHAVIOR (Javascript and server-side scripting)
  10. 10. Separation of Parts
  11. 11. Separation of Parts
  12. 12. Separation of Parts
  13. 13. Separation of Parts
  14. 14. Building a House
  15. 15. Building a House
  16. 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. 17. Building a House
  18. 18. Building a House
  19. 19. Building a House
  20. 20. Building a House
  21. 21. 3 Little Pigs
  22. 22. Pig #1 The first pig used hay to build his home.
  23. 23. Pig #1 It was blown away by the wolf.
  24. 24. Pig #2 The second pig used sticks to build his home.
  25. 25. Pig #2 It was blown away by the wolf.
  26. 26. Pig #3 The third pig thought about how a home should be built and used bricks and mortar to build his home.
  27. 27. Pig #3 The wolf couldn’t blow the house down. (but if he did, the pig would rebuild it one brick higher.)
  28. 28. Materials used to build webpage: HTM L Ed > li> li < itors < HTML tags l> like <p>, <div>, and <ul> u <
  29. 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. 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. 31. Using Tags Correctly Tables are used for tabular data only! Tables are NOT used for layout!
  32. 32. Using Tags Correctly

×