3 layers of the web - part 1
DESCRIPTION
How to separate the layers of the web and create content layer.TRANSCRIPT
3 Layers of a Web PageIntro
&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
CONTENT (HTML)
PRESENTATION (CSS)
BEHAVIOR (Javascript and server-side scripting)
Separation of Parts
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 #1The first pig used hay to build
his home.
Pig #1It was blown away by the wolf.
Pig #2The second pig used sticks to
build his home.
Pig #2It was blown away by the wolf.
Pig #3The third pig thought about
how a home should be built and used bricks and mortar to build
his home.
Pig #3The wolf couldn’t blow the
house down.
(but if he did, the pig would rebuild it one brick higher.)
Materials used to build
webpage:HTML tags
like <p>, <div>, and <ul>
<ul>
<li><li>HTML Editors
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!Graphs, calendars, the periodic table of elements
Tables are NOT used for layout!Makes it hard for screen readers!Makes it hard to read & edit the code!Use CSS for layout!
Using Tags Correctly
Skills
CEMDLSolutions
Super fast!Amazing turn-around times.
Internet savvy!Smart people work here!
Amazing Graphics!Stunning illustrations.
HOME ABOUT CONTACT US WWR stuff
Using Tags Correctly
Skills
CEMDLSolutionsHOME ABOUT CONTACT US WWR stuff
<h1> </h1>
<h2> </h2>Super fast!Amazing turn-around times.
Internet savvy!Smart people work here!
Amazing Graphics!Stunning illustrations.
Using Tags Correctly
Skills
CEMDLSolutionsHOME ABOUT CONTACT US
<ul>
</ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
Super fast!Amazing turn-around times.
Internet savvy!Smart people work here!
Amazing Graphics!Stunning illustrations.
<li></li>
<li>
</li><li>
</li>
<h3> </h3>
<h3> </h3><p> </p>
<p> </p>
<p> </p><h3> </h3>
<ul>
</ul>WWR stuff
Using Tags Correctly
Skills
CEMDLSolutions
Super fast!Amazing turn-around times.
Internet savvy!Smart people work here!
Amazing Graphics!Stunning illustrations.
HOME ABOUT CONTACT US WWR stuff
<acronym title=”Wire Welded Reinforcement”>WWR stuff</acronym>
What’s the big deal?
What’s the big deal?
.css.js
What’s the big deal?
Google uses acronyms!
What’s the big deal?
What’s the big deal?
FIN
Layer 2: Advanced CSS coming soon!