3 Layers of a Web Page

spongereasonInternet and Web Development

Nov 12, 2013 (3 years and 7 months ago)

71 views

3 Layers of a Web Page

1.
Content/Structure
-

HTML

2.
Presentation
-

CSS

3.
Action/Behavioral
-

JavaScript

Technically, there are 4 layers


Content Layer


Text

and foreground images


Structural Layer


HTML


Presentational Layer


CSS


Action/Behavioral Layer


JavaScript

But these two…


Content Layer


Text and foreground images


Structural Layer


HTML


…are hard to separate

Most books present only 3


HTML to structure the content


CSS

used to decorate HTML structures


JavaScript

to manipulate HTML
structures

Hypertext Markup Language


A set of
markup tags
with syntax rules


Unlike a programming language, you
cannot describe actions or logic


You can only describe
information
structure

and
context



HTML tags


Also called
HTML Elements


<element>
Content goes here
</element>


<tag
attribute
=
“value”
>
Content

</tag>


<p
style
=
“text
-
align: center”

id
=
“abstract”
>
This the abstract of a paper
</p>




HTML Elements


Can be nested and viewed as a tree
(Document Object Model


DOM Tree)

<p>This is a paragraph. This is
<b>bold</b>. This is <
i
>italic</
i
></p>



p

b

i

This is a paragraph. This is

This is

bold

italic

CSS: Cascading Style Sheets


CSS
was part
of Tim Berners
-
Lee’s
original design for HTML.


but its use was almost entirely abandoned
between
1996
and 2003.


CSS: Cascading Style Sheets


Used to define
appearance of HTML
elements


height, width


font
-
size


text
-
align


color


border,


margins, padding,


background
-
images, etc.

CSS: Cascading Style Sheets


Web pages can have multiple style sheets


Main styles


Special purpose styles


Tags can have conflicting styles


One style sheet specifies



p { font
-
weight:
bold
; }


The other specifies



p {font
-
weight: normal; }

CSS: Cascading Style Sheets


Cascading

refers to how conflicting style
rules are resolved.


Priority is given to the
most specific
rules


cascade down to the less specific rules.


Priority is also given to rules that are “closer”
to the content


embedded

and
inline styles
override
global

or
attached

styles.

HTML & CSS together as friends


HTML was supposed to be a structural or

semantic
” language,


But,
The
Browser Wars

of the 90’s lead
to the
introduction of “
style
” or formatting
tags


Example
<font>
tag


“style” tags
are problematic and have been
removed
from the HTML standards (called
deprecation
).

Why are “style” tags bad?


Content and Appearance should be
separate


Otherwise you create redundant code
that is hard to maintain
.


Duplication instead of reuse

Semantic vs Style

Semantic
=

Has Meaning


Style
=

Specifies
Appearance



Semantic
vs

Style

Semantic


䵥慮楮g


figcaption

{


font
-
family:
Arial;


size:
14pt;


color:
blue;

}


<figure>


<
img

src
=
“tiger.jpg“
>


<
figcaption
>


This is a tiger


</
figcaption
>

</figure>


A
figcaption

is meaningful.

Figures typically
have a caption
that describes the
figure.

Style




䅰灥慲慮捥





<
img

src
=
“tiger.jpg"
>


<font
face
=
“Arial”


size
=
“3”

color
=
“blue”
>


This is a tiger


</font>




Here, we specify how to display
the caption’s font


But there is no way to know
that “This is a tiger” is the
caption for a figure.

CSS + HTML allows you to reuse
styles

figcaption

{


font
-
family:
Arial;


size:
14pt;


color:
blue;

}


<
figcaption
>
Caption 1
</
figcaption
>



<
figcaption
>
Caption 2
</
figcaption
>



<
figcaption
>
Caption 3
</
figcaption
>



<
figcaption
>
Caption 99
</
figcaption
>




Duplication instead of reuse

<font
face
=
“Arial”
size
=
“3”

color
=
“blue”
>
Caption 1
</font>

<font
face
=
“Arial”
size
=
“3”

color
=
“blue”
>
Caption 2
</font>

<font
face
=
“Arial”
size
=
“3”

color
=
“blue”
>
Caption 3
</font>

<font
face
=
“Arial”
size
=
“3”

color
=
“blue”
>
Sub
-
title 1
</font>



<font
face
=
“Arial”
size
=
“3”

color
=
“blue”
>
Caption 999
</font>


<font
face
=
“Arial”
size
=
“3”

color
=
“blue”
>
Sub
-
title 99
</font>


Image
if you wanted to change the font size to
2
for all
captions but not the Sub
-
titles?

HTML & CSS syntax

General Structure

Example

<element>
Content
</element>


element

{


property: value;


property: value;




}

<h1>
ESPN
</h1>


h1

{


font
-
size: 10pt;


color: red;

}

Extensible HTML


XHTML


XHTML is a reformulation of HTML according
to XML standards.



Only four differences

1.
Inclusion of an
XML header

2.
Single tags end with
/>
, instead of just
>

3.
Attribute values must have quotes:
“value”

4.
Tags must be in
lowercase

Why use XHTML?


Allows your web page to be parsed by a
general XML parser.


Lots of applications support XML parsing.

XHTML Rules

<
elementname
>

Content
</
elementname
>



In XHTML all element names must be lower
case.


In HTML tag case didn’t matter.



In XHTML all element must have a closing tag


Most web browsers are forgiving about closing tags,
which makes it possible to forget about them



Example
<p>
Here is paragraph with no ending tag

<p>
Here is another paragraph
</p>

HTML single tags


HTML has a few tags that are standalone,
i.e., no closing tag.



Image:
<
img

src
=“imagename.jpg”>


Line break:
<
br
>


Link:
<link type="text/
css
”>


Used to link/insert a Cascading Style Sheet


XHTML single tags


To meet XML guidelines HTML single tags
must to closed with a
/>


1.
Image:
<
img

src
=“imagename.jpg” />

2.
Line break:
<
br

/>

3.
Link:
<link type="text/
css
" />



Note the space before the />

Attributes

<element attribute=“
value
”>
content
</element>


XHTML requires that all attribute values be
enclosed in quotes.


HTML: <
img

src
=tiger.jpg>

XHTML: <
img

src
=“tiger.jpg” />


Forgiving browsers don’t care about the quotes



Browsers ignore whitespace


HTML documents are text documents.


When web browsers render a web page, they
ignore tabs, spaces and line breaks


Allows web designer to format HTML code without
having an effect on the web page’s rendered
appearance.


Tabs, spaces, and line breaks should be added
with CSS, not HTML.


Basic HTML document

<html>

<head>


<title>
Title Displays in Browser’s Top Bar
</title>


<link type="text/
css
"
href
=“style.css"
rel
="
stylesheet
"/>

</head>


<body>


Page content here

</body>

</html>

Text Structure (blocks)

<h1>Most Important Header</h1>


<p>A paragraph in the literal sense.</p>


<h2>Sub
-
heading</h2>

<h3>Smaller Sub
-
heading</h3>



<h6>Smallest Sub
-
heading</h6>

Lists

Ordered Lists (
ol
)

Unordered Lists (
ul
)

<
ol
>


<
li
>Item 1</
li
>


<
li
>Item 2</
li
>


<
li
>Item 3</
li
>


<
li
>Item 4</
li
>

</
ol
>

<
ul
>


<
li
>Item 1</
li
>


<
li
>Item 2</
li
>


<
li
>Item 3</
li
>


<
li
>Item 4</
li
>

</
ul
>


Terms and Definitions

Example

Meaning

<dl>

<
dt
>Coffee</
dt
>

<
dd
>black hot drink</
dd
>

<
dt
>Milk</
dt
>

<
dd
>white cold drink</
dd
>

</dl>

dl


definition list

dt



definition term

dd



definition description


Used heavily in early HTML
documents which were
most scientific papers with
lost of definitions and
terms

Text Formatting (style)

<
tt
>
Teletype text
</
tt
>

<
i
>
Italic text

</
i
>

<b>
Bold text

</b>

<big>
Big text
</big>

<small>
Small text
</small>

Text identity (semantic)

<
em
> Emphasized text </
em
>

<strong> Strong text </strong>

<
dfn
> Definition term </
dfn
>

<code> Computer code text </code>

<
samp
> Sample computer code </
samp
>

<
var
> Variable </
var
>

<cite> Citation </cite>

Hyperlinks


Called the anchor tag

<a
href
=“
http://www.espn.com
”>
ESPN
</a>



href

stands for hypertext reference


What is the element name?


What is the attribute?


What is the attribute’s value


What is the content?

Elements we’ll learn about later

Tables


<table>


<
tr
><td></td></
tr
>


<
tr
><td></td></
tr
>

</table>

Forms

<form action=“program.php”>


<input type=“text”>


<input type=“submit”>

</form>



Deprecation


Removed from the standard


Most browsers will still render
deprecated tags


However, browsers are not required to


Do not use deprecated tags even though
they may render properly on your
browser.


Divisions and Spans


Divisions
<div>
used to break your
webpage into logical blocks or boxes


Spans

<span>
used to create custom in
-
line tags, i.e., within the flow of a
paragraph of text.


Example:


This is paragraph with a table reference.
<span class=“
tableref
”>
Table 2.4
</span>

is a lovely table.

HTML5 added

many new semantic tags

<article>

Defines an
article


<aside>

Defines content aside from the page
content


<details>

Defines additional details that
can be hidden


<summary>

Defines a visible heading for a <details>
element


<figure>

Specifies self
-
contained content, like illustrations,
diagrams, photos, code listings, etc
.


<figcaption>

Defines a caption for a <figure>
element


<footer>

Defines a footer for a document or
section


<header>

Defines a header for a document or
section


<
nav
>

Defines navigation
links


<section>

Defines a section in a
document


CSS Attributes

For Text Elements

For Block Elements


font
-
family,


size,


text
-
align,


weight,


sytle
,


variant,


line
-
height,


indent,


direction


height,


width,


margins,


padding,


borders,


border
-
color,


border
-
style,


background color,


background image.



JavaScript


In the 90’s Sun Microsystems failed to
copyright “Java.”


Netscape (popular early browser),
developed a browser scripting language
and called it JavaScript to capitalize on
Java’s emerging popularity


JavaScript does NOT resemble Java in any
way!

JAVASCRIPT

EXAMPLE

JavaScript Basics


Interpreted language


Web browsers
are JavaScript interpreters


Only web server (Node.js) can interpret
JavaScript


JavaScript is embedded in a <script> tag


HTML includes action/event attributes
that work nicely with JavaScript


<button
onclick
=“
myFunction
()”>

JavaScript Fundamentals


Allows web pages to be interactive


Web pages can change as the user moves the
mouse, clicks or types.


HTML includes form elements


buttons, text boxes, selection menus, etc. that
work nicely with JavaScript


HTML5 includes a canvas element


JavaScript can draw objects on the canvas that
the user can interact with.