HTML, CSS and JavaScript

Victor Costan

Contents

  • Introduction
  • HTML: the HyperText Markup Language
  • HTML Demo
  • HTML Exercise
  • CSS: Cascading Style Sheets
  • CSS Layout
  • CSS Demo
  • CSS Exercise
  • JavaScript: the Web’s Programming Language
  • JavaScript Demo / Exercise
  • Wrap-Up

Introduction

Your Instructors

Why are you here today?

  1. Build a great Web application
  2. Impress the judges
  3. Profit

Great Web User Interfaces

  1. Content
  2. Presentation
  3. Behavior

Great Web UI: Techniques

  1. Content: HTML
  2. Presentation: CSS
  3. Behavior: JavaScript

Keep It Simple Separated

The Evolution of Web Documents

1997: html 2000: css 2005: js
css css js
js css js
html html css
css js css
js html css
html js html
css html html
js js html

The Browser Wars

Development Strategy

  1. Develop with Firefox + Firebug
  2. Test in Chrome
  3. Test in Internet Explorer, perhaps via VirtualBox
  4. Test in Safari

HTML: the HyperText Markup Language

HTML is a Markup Language

This is HTML

<!DOCTYPE html>
<html>
	<head>
		<title>An HTML document.</title>
	</head>
	<body>
		<p>This is a paragraph.</p>
		<p>This is another paragraph with a link 
		  <a href="http://www.google.com">to Google</a>
		</p>
	</body>
</html>
code/html/sample.html

HTML Anatomy: Tags

<p>
</p>
<img />

HTML Anatomy: Elements

<p>This element is a paragraph of text</p>

HTML Elements Must be Nested Correctly

GoodBad

<p>This is a paragraph <em>with emphasized text</em></p>

<p>This is a paragraph <em>with emphasized text</p></em>

HTML Anatomy: Attributes

<a href="http://www.google.com">Google</a>
<video src="funny.ogg" autoplay="autoplay" />

HTML Anatomy: Entities

<p>This is a paragraph about &lt;p;&gt;</p>
& &amp; © &quot;
< &lt; ASCII 127 &#7F;
> &gt; ™ &trade;

HTML Anatomy: the Document

<!DOCTYPE html>
<!-- The top-level element is always html -->
<html>
  <head>
  	<!-- The document's invisible contents (metadata) goes in the head. -->
    <title>This title is shown in the browser's title bar.</title>
  </head>
  <body>
    <!-- Everything that the user can see goes in the body. -->
  </body>
</html>
code/html/document.html

HTML Anatomy: the Document Type Declaration

<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML Anatomy: Wrap-Up

  1. An HTML page holds a HTML document.
  2. A HTML document is a hierarchy of HTML elements.
  3. HTML elements are delimited by HTML tags.
  4. HTML elements can have attributes.
  5. Special characters are encoded using HTML entities.
  6. The HTML 5 doctype shows the document obeys standards.

HTML: Paragraphs

<p>This is a paragraph of text. It covers an idea.</p>

<p>This is another paragraph of text. It's a bit longer,
so I had to break it up on three lines. That's OK, because
HTML doesn't care about line breaks. </p>

Always wrap text in some element. <p> is a good default if you don’t know where your text belongs.

HTML: Headings

<h1>New York Times</h1>

<h2>Technology</h2>

<h3>HTML 5 Standard Slated for 2012</h3>

<h3>Firefox 3.6 Released Today</h3>

<h2>Sports</h2>

Choose heading numbers to reflect semantics, not presentation.

Example: <h3> should never follow <h1>.

HTML: Emphasis

<p><em>Mary</em> had a little lamb.</p>

<p>Mary <em>had</em> a little lamb.</p>

<p>Mary had a <em>little</em> lamb.</p>
Semantic (Good) Presentation (Bad)
<em> <i>
<strong> <b>

HTML: Links

<a href="http://www.twitter.com/victor_costan">Follow me on Twitter</a>

<a href="/logout.php">Log out</a>

<a href="chapter1.html">Chapter 1 of the story</a>

HTML: Lists I

Unordered Ordered 

<p>This is my shopping list:</p>
<ul>
  <li>eggs</li>
  <li>bread</li>
  <li>milk</li>
</ul>


<p>Top 3 programming languages:</p>
<ol>
  <li>Java</li>
  <li>C</li>
  <li>PHP</li>
</ol>

HTML: Lists II

<dl>
  <dt>HTML</dt>
  <dd>the Web's markup language</dd>
  <dt>JavaScript</dt>
  <dd>the Web's programming language</dd>
</dl>

HTML: Images

<img src="images/big_doll.png"
     alt="Short description for visitors who can't see images" />

HTML: Audio and Video

<video src="ads/annoying.ogg" autoplay="autoplay"
       controls="controls" loop="loop">
Display this text if the browser doesn't support video.
</video>

<audio src="boom_headshot.ogg" loop="loop" />

HTML: Tables I

<table>
  <tr>
    <td>Expenses</td><td>2008</td><td>2009</td>
  </tr>
  <tr>
    <td>T-shirts</td><td>$1,000</td><td>$2,000</td>
  </tr>
  <tr>
    <td>Pizza</td><td>$350</td><td>$450</td>
  </tr>
  <tr>
    <td>Total</td><td>$1,350</td><td>$2,450</td>
  </tr>
</table>
code/html/tables1.html

HTML: Tables I Rendering

Expenses20082009
T-shirts$1,000$2,000
Pizza$350$450
Total$1,350$2,450

HTML: Tables II

<table>
  <thead>
    <tr>
      <th>Expenses</th><th>2008</th><th>2009</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>T-shirts</td><td>$1,000</td><td>$2,000</td></tr>
    <tr><td>Pizza</td><td>$350</td><td>$450</td></tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th><td>$1,350</td><td>$2,450</td>
    </tr>
  </tfoot>
</table>
code/html/tables2.html

HTML: Tables II Rendering

Expenses20082009
T-shirts$1,000$2,000
Pizza$350$450
Total$1,350$2,450

HTML: Bad Use of Tables

<table>
  <tr>
    <td colspan="2">Header</td>
  </tr>
  <tr>
    <td>
      Navigation
    </td>
    <td>
      Main
    </td>
  </tr>
  <tr>
    <td colspan="2">Footer</td>  
  </tr>
</table>

Don’t use tables for layout. HTML is for markup, CSS is for presentation.

HTML: Forms I

<form action="http://www.google.com/search" method="POST">
<dl>
  <dt>Query</dt>
  <dd><input type="text" name="q" /></dd>
  <dt>Language</dt>
  <dd>
    <select name="lang">
      <option value="en">English</option>
      <option value="fr">French</option>
    </select>
  </dd>
</dl>
<p><input type="submit" value="Search" /></p>
</form>
code/html/forms1.html

HTML: Forms I Rendering

Query
Language

HTML: Forms I Submission

POST /search HTTP/1.1
Content-Encoding: application/x-www-form-urlencoded
Host: www.google.com

q=unicorns&lang=en
code/html/forms1.http
Action /search
q unicorns
lang en

HTML: Forms II

<form action="http://www.google.com/search" method="GET">
<dl>
  <dt><label for="goog_query">Query</label></dt>
  <dd><input type="text" name="q" id="goog_query" /></dd>
</dl>
<fieldset>
	<legend>Query Details</legend>
	<dl>
	  <dt><label for="goog_language">Language</label></dt>
	  <dd><input type="text" name="lang" value="en" id="goog_language" /></dd>
    <dt><label for="goog_encoding">Query encoding</label></dt>
    <dd><input type="text" name="ie" value="utf-8" id="goog_encoding" /></dd>
  </dl>  
</fieldset>
	
<p><input type="submit" value="Search" /></p>
</form>
code/html/forms2.html

HTML: Forms II Rendering

Query Details

HTML: More Tags

Which tags are semantic (good), and which tags are purely for presentation (bad, forbidden, and deprecated).

<b> <big> <blockquote>
<blink> <br> <center>
<cite> <del> <ins>
<i> <marquee> <pre>
<q> <small> <sub>
<sup> <tt> <u>

HTML Demo

Demo code available at:

http://bit.ly/6Gantb

http://github.com/costan/html_css_js_slides/ raw/master/exercises/html_start.html

HTML Exercise

Scaffold code available at:

http://bit.ly/813OjF

http://github.com/costan/html_css_js_slides/ raw/master/exercises/html_partial.html

HTML Exercise: Solution

Solution available at:

http://bit.ly/84UNOb

http://github.com/costan/html_css_js_slides/ raw/master/exercises/html_finish.html

CSS: Cascading Style Sheets

CSS is for Presentation

Change color, size, font, and position

Adding CSS: Very Bad

<p style="color: red;"/>This is a red paragraph.</a>

Adding CSS: Somewhat Bad

<style type="text/css">
  p { color: red; }
</style>
<p>This is a red paragraph.</p>

Adding CSS: Good

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="code/css/red.css" />
  </head>
  <body>
    <p>This paragraph will be red.</p>
  </body>
</html>
code/css/include_good.html
p { color: red; }
code/css/red.css

<link> tags are only allowed in <head>.

Adding CSS: If You Can’t Access <head>

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="code/css/red.css" />
  </head>
  <body>
    <style type="text/css">
      @include url("more_red.css");
    </style>
    <p>This paragraph will be red.</p>
  </body>
</html>
code/css/include_no_head.html

What CSS Looks Like

h1 { color: blue; }

p em {
  font-size: 12pt;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2em;
}
code/css/sample.css

CSS Anatomy: Rules, Selectors, Declarations

h1 { color: blue; }

p em {
  font-size: 12pt;
  line-height: 1.2em;
}
Selector Declarations
Rule 1 h1 color: red;
Rule 2 p em font-size: 12pt; line-height: 1.2em;

The selector comes first, then the declarations are enclosed by brackets.

CSS Anatomy: Properties and Values

h1 { color: blue; }

p em {
  font-size: 12pt;
  font-family: Arial, Helvetica, sans-serif;
}
Property Value
color red
font-size 12pt
line-height Arial, Helvetica, sans-serif

Each declaration in a rule specifies a value for a property.

CSS Anatomy: Directives

@include url("code/css/red.css");

@font-face {
  font-family: Myriad Pro;
  src: url("fonts/Myriad_Pro.otf");
}

CSS Selectors: Primitives

p { color: red; }
#summary { color: blue; }
.highlight { color: red; }

CSS Selectors: Classes

.small { font-size: 10pt; }
.highlight { color: red; }
<p class="highlight">This is highlighted.</p>
<p class="highlight small">This is small and highlighted.</p>
<p class="small">This is small.</p>

The class attribute can contain multiple class names, separated by spaces.

CSS Selectors: Compositions

/* <p> elements whose class contains highlight and small */
p.highlight.small { color: red; }
/* <h1> <h2> and <h3> elements */
h1, h2, h3 { color: red; }
/* <p> elements inside <form> elements */
form p { color: blue; }

CSS Selectors: Advanced Compositions

/* <p> elements who are direct children of <form> elements */
form > p { color: blue; }
/* <p> elements coming right after <ul> elements */
ul + p { color: gray; }
/* <p> elements whose parents have <ul> children, and
   who come after the <ul> children in the document */
ul ~ p { color: gray; }

CSS Selectors: Pseudo-Classes

:hover The user’s mouse is over the element
:focus The control has the input focus
:active The user is about to activate the element (e.g. follow a link)
:link The element is a link that the user has not visited
:visited The element is a link that the user has visited

CSS Selectors: Pseudo-Class Example

a:link { color: blue; }
a:visited { color: gray; }
a:hover { color: red; }
a:active { color: black; }

What does this do?

CSS Selectors: Advanced Pseudo-Classes

:first The first child (e.g. the first paragraph in the body)
:last The last child
:nth-child(even) All even children (2nd, 4th, …)
:nth-child(2n) All even children (2nd, 4th, …)
:nth-child(odd) All odd children
:nth-child(2n+1) All odd children

Very useful for improving readability by alternating font colors in lists and tables.

CSS Selectors: the Selectoracle

ul#master-index > li:nth-child(even).small p.highlighted.twisted.legal a:hover

A hovered link inside
a paragraph (<p>) with classes highlighted and twisted inside
a list item (<li>) with class small which is an even child of
an unordered list (<ul>) with id="master-index"

The Cascade: The C in CSS

p { color: red; }
p { color: blue; }
<p>What color is this paragraph?</p>
p.highlight { color: red; }
p { color: blue; }
<p class="highlight">What color is this paragraph?</p>

The Cascade: How It Works

Declarations have the following priority:

  1. Declarations in style attributes always win.
  2. Browser declarations marked !important, ordered by specificity.
  3. Page declarations marked !important, ordered by specificity.
  4. Page declarations not marked !important, ordered by specificity.
  5. Browser declarations not marked !important, ordered by specificity.

The Cascade: Specificity Point System

A declaration’s specifity is determined by its selector.

To compute a selector’s specificity:

  1. Write the number of IDs in the selector
  2. Write the number of classes and pseudo-classes in the selector
  3. Write the number of elements in the selector

The Cascade: Specificity Examples

p#header { color: red; }
p li.highlight { color: red; }
#header p.small a:hover { color: red; }

The Cascade: Ordering Specificities

Specificities are ordered lexicographically:

CSS Declarations

Declarations cover these major areas

  1. Color
  2. Size
  3. Font
  4. Position

CSS Colors: Properties

CSS Colors: RGB Color Model

CSS Colors: RGB Color Wheel

CSS Colors: Values

p { color: red; }
p { color: rgb(255, 0, 0); }
p { color: #FF0000; }

CSS Dimensions: Properties

CSS Dimensions: Values

p {
  border-width: 2px;
  font-size: 12pt;
  width: 80%;
  min-height: 8em;
  margin: 1cm;
}

CSS Dimensions: Absolute Units

The absolute units don’t need a context to be interpreted.

CSS Dimensions: Relative Units

For %, the size is usually the same size in the parent element.

CSS Typography: Serif vs. Sans Serif Fonts

 

CSS Typography: Monospaced Fonts

CSS Fonts: Font Families

Generic families: serif, sans-serif, monospace, cursive, fantasy

Fonts available on most computers:

serif sans-serif monospace
Garamond Georgia Courier New
Times New Roman Helvetica
Tahoma
Verdana

CSS Typography: Choosing a Font

p {
  font-family: Myriad Pro, Verdana, Tahoma, sans-serif;
}

CSS Typography: Downloadable Fonts

@font-face {
  font-family: Myriad Pro;
  src: url("fonts/Myriad_Pro.otf") format("otf");
}

CSS Typography: Font Styles

font-style font-variant text-decoration
italic small-caps underline
oblique normal overline
normal line-through
none

CSS Typography: Font Weights

100 – lighter
400 – normal
700 – bold
800 – bolder

CSS Typography: The Em Box

CSS Typography: Important Lines

CSS Typography: Line Height

p {
  font-size: 12pt;
  line-height: 2em;
}

CSS Layout

CSS Layout: The Box Model

CSS Layout: The Box Model

CSS Layout: Padding

h1 {
  padding-top: 20px;
  padding-right: 0;
  padding-bottom: 40px;
  padding-left: 10px;
}

/* Same as above, using shorthand. */
h2 { padding: 20px 0 40px 10px; } 

/* 5px top and bottom, 10px left and right. */
h3 { padding: 5px 10px; }

/* 0 padding all around. */
p { padding: 0; }

CSS Layout: Margins

CSS Layout: Borders I

The following properties need to be set:

border-color is optional, defaults to the foreground color.

h1 {
  border-width: 2px;
  border-style: solid;
  border-color: black;
}

/* Same as above, using shorthand. */
p { border: 2px solid black; }

CSS Layout: Borders II

Each of the border’s sides can be set individually using both normal properties and short-hand.

h1 {
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: black;
  border-right: 2px solid black;
}

CSS Layout: Inline Elements

Inline elements can share a line. Examples: <em>, <strong>, <input>, <select>, <img>.

emphasized element strongly emphasized element another emphasized element another strongly emphasized element yet another emphasized element

CSS Layout: Block Elements

Block elements take the entire line for themselves. Examples: <p>, <ul>, <ol>, <li>, <h1> – <h6>.

A paragraph.

  1. A list item
  2. Another list item

Another paragraph.

CSS Layout: Flow Rules

CSS Layout: The Flow

Unless specified otherwise, HTML elements are laid out according to the flow.

Meaningless HTML Elements

Good use of divs.

<body>
  <div id="intro">
    <p>The thesis of this essay is...</p>
  </div>
  <div id="contents">
    <p>The first supporting point is...</p>
    <p>The second supporting point is...</p>
    <p>The third supporting point is...</p>
  </div>
  <div id="conclusion">
    <p>In conclusion, ...</p>
  </div>
</body>

The divs convey semantic information that is not reflected by the collection of paragraphs.

CSS Layout: Positioning

position In flow Positioning
static yes according to the flow
relative ghost relative to the flow position
absolute no document coordinate space
fixed no screen coordinate space

CSS Layout: Floats

p:first { float: right; }

The text in this paragraph is floated to the right. The text in this paragraph is floated to the right.

This is a normal paragraph. It will flow around the float. This is a normal paragraph. It will flow around the float. This is a normal paragraph. It will flow around the float.

This is another normal paragraph. It will flow around the float. This is another normal paragraph. It will flow around the float. This is another normal paragraph. It will flow around the float.

CSS Layout: Floats and Clears

p:first { float: right; }
p:last { clear: both; }

The text in this paragraph is floated to the right. The text in this paragraph is floated to the right.

This is a normal paragraph. It will flow around the float. This is a normal paragraph. It will flow around the float. This is a normal paragraph. It will flow around the float.

This is a cleared paragraph. It will not flow around the float. This is a cleared paragraph. It will not flow around the float. This is a cleared paragraph. It will not flow around the float.

CSS Demo

Demo code available at:

http://bit.ly/4AJXqz

http://github.com/costan/html_css_js_slides/ raw/master/exercises/css_demo.html

CSS Exercise

Scaffold code available at:

http://bit.ly/5ORxcN

http://github.com/costan/html_css_js_slides/ raw/master/exercises/css_start.html

CSS Exercise: Solution

Solution available at:

http://bit.ly/84UNOb

http://github.com/costan/html_css_js_slides/ raw/master/exercises/css_finish.html

JavaScript: the Web’s Programming Language

Adding JavaScript: Horrible

<a href="javascript:alert('Lame script!');"/>Click me</a>

<form action="#">
  <input type="submit" onclick="alert('Lame script!');"
         value="Click me">
</form>

Forget you saw this.

Adding JavaScript: Bad

<script type="text/javascript">
alert("I'm alive!");
</script>

<script> tags can be added in <head> or <body>. There is a subtle difference that we’ll discuss later.

Adding JavaScript: Good

<html>
	<head>
		<title>Annoying page.</title>
		<script type="text/javascript" src="code/js/alert.js"></script>
	</head>
	<body>		
	</body>
</html>
code/js/include_good.html
alert("I'm alive!");
code/js/alert.js

JavaScript is a Programming Language

Let’s Roll

JavaScript Demo / Exercise

Demo code available at:

http://bit.ly/5XoTyi

http://github.com/costan/html_css_js_slides/ raw/master/exercises/js_start.html

Wrap-Up

Contact Information

Victor Costan

This Presentation