3 Layers of a Web Page 1. Content/Structure - HTML 2. Presentation - CSS 3. Action/Behavioral - JavaScript

3 Layers of a Web Page

1. Content/Structure - HTML2. Presentation - CSS 3. Action/Behavioral -

JavaScript

Technically, there are 4 layersContent Layer

◦Text and foreground imagesStructural Layer

◦HTMLPresentational Layer

◦CSSAction/Behavioral Layer

◦JavaScript

But these two…Content Layer

◦Text and foreground imagesStructural Layer

◦HTML

…are hard to separate

Most books present only 3HTML to structure the contentCSS used to decorate HTML

structuresJavaScript to manipulate HTML

structures

Hypertext Markup LanguageA set of markup tags with

syntax rulesUnlike a programming language,

you cannot describe actions or logic

You can only describe information structure and context

HTML tagsAlso 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 ElementsCan 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 iThis is a paragraph. This is

This is

bold

italic

CSS: Cascading Style SheetsCSS 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 SheetsUsed to define appearance of

HTML elements◦height, width◦font-size◦text-align◦color ◦border,◦margins, padding, ◦background-images, etc.

CSS: Cascading Style SheetsWeb 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 SheetsCascading 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 friendsHTML 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 StyleSemantic Meaning

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 Appearance

<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”> Sub-title 1</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 XHTMLXHTML is a reformulation of HTML

according to XML standards.

Only four differences1. Inclusion of an XML header2. 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 tagsHTML 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 tagsTo 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 whitespaceHTML 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>

HyperlinksCalled the anchor tag<a

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

href stands for hypertext referenceWhat is the element name?What is the attribute?What is the attribute’s valueWhat is the content?

Elements we’ll learn about laterTables

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

</table>

Forms<form action=“program.php”>

<input type=“text”><input type=“submit”>

</form>

DeprecationRemoved from the standardMost 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 SpansDivisions <div> used to break your

webpage into logical blocks or boxesSpans <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 ElementsFor 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.

JavaScriptIn 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 BasicsInterpreted 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 FundamentalsAllows 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 JavaScriptHTML5 includes a canvas element

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

Documents

3 Layers of a Web Page 1. Content/Structure - HTML 2. Presentation - CSS 3. Action/Behavioral - JavaScript