3 layers of the web - part 1

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!