Download Document

3 Layers of a Web Page
Content/Structure - HTML
2. Presentation - CSS
3. Action/Behavioral - JavaScript
1.
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
This is a paragraph. This is
b
bold
This is
i
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  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
<font
<font
<font
…
<font
face=“Arial” size=“3” color=“blue”> Caption 1 </font>
face=“Arial” size=“3” color=“blue”> Caption 2 </font>
face=“Arial” size=“3” color=“blue”> Caption 3 </font>
face=“Arial” size=“3” color=“blue”> Sub-title 1</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?
General Structure
Example
<element>Content</element>
<h1>ESPN</h1>
element {
property: value;
property: value;
…
}
h1 {
font-size: 10pt;
color: red;
}
HTML & CSS syntax
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

1.
2.
3.

To meet XML guidelines HTML single tags
must to closed with a />
Image: <img src=“imagename.jpg” />
Line break: <br />
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>
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>
Lists
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
Terms and Definitions
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 inline 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
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.
CSS Attributes
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.