View
218
Download
2
Category
Preview:
Citation preview
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
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 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”> 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 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 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.
Recommended