Your SlideShare is downloading. ×
3 Layers of the Web - Part 1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

3 Layers of the Web - Part 1

3,513
views

Published on

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

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
3,513
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
85
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 <ul>li><a> <li><a> <li><a> <li>< a> < </a></li> </a></li> </a></li> </a></li> </ul> <u<lli> </h3> > <h3> </p> /li> <p> < </h3> <l<> 3> i h </p> li> <p> </ </h3> > <li<h3> <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!