Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

3 Layers of the Web - Part 1

•
•

The document discusses the 3 layers of a web page: content (HTML), presentation (CSS), and behavior (JavaScript). It states that the content layer defines the structure and semantics, the presentation layer specifies the visual design, and the behavior layer adds interactivity. It provides examples of using HTML tags like <h1>, <p>, and <ul> to build the content layer and separates the different layers to build a webpage like building a house with different materials.

1 of 41
Download to read offline
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> <li id=”reports”> </li> </ul> <div id=”content> </div>
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 > li> li < itors < HTML tags l> like <p>, <div>, and <ul> u <
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...
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
Using Tags Correctly h1 /h1 /h2 h2
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
Using Tags Correctly acronym title=”Wire Welded Reinforcement” /acronym
What’s the big deal?
What’s the big deal? ss .c .js
What’s the big deal?
What’s the big deal?
What’s the big deal?
FIN Layer 2: Advanced CSS coming soon!

More Related Content

3 Layers of the Web - Part 1