Harvard Extension School, Fall 2018
CSCI E-12 Fundamentals of Web Site Development

# Session 01 - The Internet, World Wide Web, Web Browsers

Harvard Extension School
Fall 2018

Course Web Site: http://cscie12.dce.harvard.edu/

Instructor email: david_heitmeyer@harvard.edu
Course staff email: cscie12@dce.harvard.edu

### Topics

1. The Internet and the World Wide Web
2. A Web Site over Time
3. Components of the Web
4. Client-side Web Parts: Markup, Style, Function
5. HTML Introduction
6. Markup Evolution and Standards
7. HTML/SGML/XML -- What's the Difference?
8. HTML5

slide1 slide2 slide3 slide4 slide5 slide6 slide7 slide8 slide9 slide10 slide11 slide12 slide13 slide14 slide15 slide16 slide17 slide18 slide19 slide20 slide21 slide22 slide23 slide24 slide25 slide26 slide27 slide28

- img
- img
- img
- img
- img

## The Internet and the World Wide Web

Image from Opte Project and is used under the Creative Commons Attribution-NonCommercial 4.0 International License.

## The Internet: Schematic

## Types of Traffic on the Internet

- Web
  - HTTP, HTTPS
- Video
  - HTTP, RTMP, RTSP
- Email
  - SMTP, IMAP, POP
- File Transfer
  - FTP, SFTP
- Login
  - SSH, Telnet
- Gopher (?!)

## The World Wide Web

Web 25th Anniversary (2014)

## Tim Berners-Lee on The World Wide Web

> Today, and throughout this year, we should celebrate the Web’s first 25 years. But though the mood is upbeat, we also know we are not done. We have much to do for the Web to reach its full potential. We must continue to defend its core principles and tackle some key challenges.

> Tim Berners-Lee in Welcome to the Web's 25 Anniversary

> The Web evolved into a powerful, ubiquitous tool because it was built on egalitarian principles and because thousands of individuals, universities and companies have worked, both independently and together as part of the World Wide Web Consortium, to expand its capabilities based on those principles.

> Tim Berners-Lee in Long Live the Web (Scientific American, Nov/Dec 2010)

> The irony is that in all its various guises -- commerce, research, and surfing -- the Web is already so much a part of our lives that familiarity has clouded our perception of the Web itself.

> Tim Berners-Lee in Weaving the Web (1999)

## Features of the World Wide Web

- HyperText Information System

- Cross-Platform and Cross-Device

- Distributed
  - 177.6 million active sites and around 7.6 million "web-facing" computers
    (Netcraft June 2018 Web Server Survey)
- Open Standards
  - TCP/IP, HTTP, HTML, CSS, JavaScript
- Open Source
  - Mozilla, WebKit, Apache HTTP Server, JavaScript, PHP, Python, etc.
- Web Browser: provides a single interface to many services
  - Information, Shopping, Finance, Communication, Business, etc.
- Dynamic, Interactive, Evolving

## Approaching the Web

### Understand Reality

- Variety of
  users, devices, platforms, connection speeds, displays, web browsers, browser settings, and languages
- Open Standards (and Open Source)
- Common expectations for user experience

### Approach Based on Reality

- We cannot command nature except by obeying her.
  Francis Bacon
- Rule By Obeying Nature's Laws
  Motto of Kansas State University

## A Web Site over Time

The White House Site (www.whitehouse.gov)

1996 Internet Archive Way Back Machine - whitehouse.gov 1996 | 1997 Internet Archive Way Back Machine - whitehouse.gov 1997

1997 Internet Archive Way Back Machine - whitehouse.gov 1997 | 1998 Internet Archive Way Back Machine - whitehouse.gov 1998

1998 Internet Archive Way Back Machine - whitehouse.gov 1998 | 1999 Internet Archive Way Back Machine - whitehouse.gov 1999

1999 Internet Archive Way Back Machine - whitehouse.gov 1999 | 2001 Internet Archive Way Back Machine - whitehouse.gov 2001

2001 Internet Archive Way Back Machine - whitehouse.gov 2001 | 2002 Internet Archive Way Back Machine - whitehouse.gov 2002

2002 Internet Archive Way Back Machine - whitehouse.gov 2002 | 2007 Internet Archive Way Back Machine - whitehouse.gov 2007

2007 Internet Archive Way Back Machine - whitehouse.gov 1996 | 2009 Internet Archive Way Back Machine - whitehouse.gov 2009

2009 Internet Archive Way Back Machine - whitehouse.gov 2009 | 2011 Internet Archive Way Back Machine - whitehouse.gov 2011

2011 Internet Archive Way Back Machine - whitehouse.gov 2011 | 2015 - Early

2015 - Early | 2015 - Late

2017 - January. A new administration. | 2017 - August

2017 - August | 2018 - January
2018 - January | 2018 - June

## A Web Address - URLs (and URIs)

- URL/URI
  `http://www.whitehouse.gov/our-government/the-constitution`
- Scheme
  `http://www.whitehouse.gov/our-government/the-constitution`
- Host
  `http://www.whitehouse.gov/our-government/the-constitution`
- Path
  `http://www.whitehouse.gov/our-government/the-constitution`

### Names and Locations: URLs, URIs, and URNs

- URI: Uniform Resource Identifier
  - URL: Uniform Resource Locator
  - URN: Uniform Resource Name

## Components of the Web

### 1. HTTP Client

### 2. HTTP Server

### 3. Network

Network connecting HTTP client with server.

## Client-side Web Parts: Markup, Style, Function

- Structure / Markup (HTML, XHTML)
  - Structure
  - Content
- Style / Presentation (CSS)
  - Style
  - Presentation
  - Appearance
- Function (Javascript)
  - Actions
  - Manipulations

## Our Solar System: Markup

solarsystem-markup.html

## Our Solar System: Markup + Style

solarsystem-style.html

## Our Solar System: Markup + Style + Function

solarsystem.html

Files:

- solarsystem.css
- jquery-1.4.2.min.js
- jquery.mousewheel-3.0.2.pack.js
- jquery.fancybox-1.3.1.js
- jquery.fancybox-1.3.1.css
- fancybox.png
- fancybox-x.png
- fancybox-y.png
- blank.gif

## HTML Introduction

## Markup - HTML

### The Code

- My Schools

    <!DOCTYPE html>
    <html>
      <head>
        <title>My Schools</title>
      </head>
      <body>
        <h1>My Schools</h1>
        <ul>
          <li>
            <a href="http://www.harvard.edu/">Harvard University</a><br/>
            <img src="images/veritas.gif" alt="Harvard Shield" />
          </li>
          <li>
            <a href="http://www.ku.edu/">University of Kansas</a><br/>
            <img src="images/KUSeal.gif" alt="University of Kansas Seal" />
          </li>
        </ul>
      </body>
    </html>

### How a Browser Displays It

### How Your Browser Thinks About It

## Essential HTML5 Document Structure

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>Document Title</title>
      </head>
      <body>
        <!-- content goes here -->
      </body>
    </html>

- html
  - head
    - meta
    - title
  - body

## Components of HTML Elements

- Start Tag
  - Element Name
  - Attribute and Value Pairs
- Content
- End Tag

### A Hypertext Link

Markup for a Hypertext link:

`<a href="http://www.harvard.edu/">Harvard</a>`

How it would render in a web browser:

Start Tag
`<a href="http://www.harvard.edu/">Harvard</a>`

Element Name
`<a href="http://www.harvard.edu/">Harvard</a>`

Attribute
`<a href="http://www.harvard.edu/">Harvard</a>`

Attribute Value
`<a href="http://www.harvard.edu/">Harvard</a>`

Content
`<a href="http://www.harvard.edu/">Harvard</a>`

End Tag
`<a href="http://www.harvard.edu/">Harvard</a>`

## Markup Evolution and Standards

### Markup Standards

- HTML5
  - HTML 5 Living Standard (WHATWG)
    (work on-going)
  - HTML5 (W3C) Recommendation
- XHTML 1.0, a reformulation of HTML 4.01 into XML 1.0
  January 2000, revised August 2002
- HTML 4.01, December 1999
- HTML 4.0, December 1997
- HTML 3.2, January 1997
- HTML 2.0, November 1995

## Benefits of Web Standards

Standards for:

- Markup (HTML)
  - Nu Html Checker
    `https://validator.w3.org/nu/`
- Style (CSS)
- Function (JavaScript)

Benefits:

- Improved Accessibility
  - People (Section 508, WAI)
  - Machines
    - Search Engines
    - Devices
- Stability
  - Forward-compatible and backward-compatible.
- Separation of Concerns (Structure, Style, Function)
  - lighter, cleaner pages
  - easier maintenance
  - easier redesign
- Validation

"Be liberal in what you accept, and
conservative in what you send"

"Postel's Law" or the "Robustness Principle"

## HTML/SGML/XML -- What's the Difference?

Main differences between HTML/SGML and XML:

| HTML | XML
--- | --- | ---
1. | End tags can be "implied" Closing elements that have implied end tags `<img src="images/lake.jpg" alt="Lake" >`
    <ul><li>coffee<li>tea</ul>
| End tags always required (even for "empty" elements) `<img src="images/lake.jpg" alt="Lake" />`
    <ul><li>coffee</li><li>tea</li></ul>
2. | Start tags can be "implied"
    <!DOCTYPE html>
    <head>
    <title>My Document</title>
    <body>
    <h1>My Document</h1>
| Start tags always required
    <!DOCTYPE html>
    <html>
    <head>
    <title>My Document</title>
    </head>
    <body>
    <h1>My Document</h1>
    </body>
    </html>
3. | Element and attribute names are not case-sensitive `<IMG SrC="images/lake.jpg" aLT="Lake" >` | Element and attribute names are case-sensitive `<img src="images/lake.jpg" alt="Lake" />`
4. | Attribute values do not need to be in quotes if the values contain alpha-numeric characters only `<img src=images/lake.jpg alt=Lake >` | Attribute values must always be in quotes `<img src="images/lake.jpg" alt="Lake" />`

### Best Practices for Starting Out

- Use start and end tags even if optional
- Lower case element and attribute names
- Use quotes around attribute values

## A Tale of Two Documents

### XML Syntax
    <!DOCTYPE html>
    <html>

    <head>
        <title>My Document</title>
    </head>

    <body>
        <h1>My Document</h1>
        <ul>
            <li>coffee</li>
            <li>tea</li>
        </ul>
        <img src="images/lake.jpg" alt="Lake" />
    </body>

    </html>
| ### SGML/HTML Syntax
    <!DOCTYPE html>

    <HEAD>
        <TITLE>My Document</TITLE>
    <BODY>
        <H1>My Document</H1>
        <UL>
            <LI>coffee
            <LI>tea
        </UL>
        <IMG SRC=images/lake.jpg ALT="Lake" >
Markup - XML syntax Validate with Nu Html Checker | Markup - SGML/HTML syntax Validate with Nu Html Checker

## HTML5

117 elements defined in HTML5

More information: HTML5 Living Standard from the WHATWG. Section 4 contains the List of elements in HTML.

- The root element
  - `html`
- Document metadata
  - `head`
  - `title`
  - `base`
  - `link`
  - `meta`
- Style
  - `style`
- Sections
  - `body`
  - `article`
  - `section`
  - `nav`
  - `aside`
  - `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
  - `hgroup`
  - `header`
  - `footer`
  - `address`
- Grouping content
  - `p`
  - `hr`
  - `pre`
  - `blockquote`
  - `ol`
  - `ul`
  - `li`
  - `dl`
  - `dt`
  - `dd`
  - `figure`
  - `figcaption`
  - `main`
  - `div`
- Text-level semantics
  - `a`
  - `em`
  - `strong`
  - `small`
  - `s`
  - `cite`
  - `q`
  - `dfn`
  - `abbr`
  - `ruby`
  - `rt`
  - `rp`
  - `data`
  - `time`
  - `code`
  - `var`
  - `samp`
  - `kbd`
  - `sub`
  - `sup`
  - `i`
  - `b`
  - `u`
  - `mark`
  - `bdi`
  - `bdo`
  - `span`
  - `br`
  - `wbr`
- Edits
  - `ins`
  - `del`
- Embedded content
  - `picture`
  - `source`
  - `img`
  - `iframe`
  - `embed`
  - `object`
  - `param`
  - `video`
  - `audio`
  - `source`
  - `track`
  - `map`
  - `area`
- Tabular data
  - `table`
  - `caption`
  - `colgroup`
  - `col`
  - `tbody`
  - `thead`
  - `tfoot`
  - `tr`
  - `td`
  - `th`
- Forms
  - `form`
  - `label`
  - `input`
  - `button`
  - `select`
  - `datalist`
  - `optgroup`
  - `option`
  - `textarea`
  - `output`
  - `progress`
  - `meter`
  - `fieldset`
  - `legend`
- Interactive elements
  - `details`
  - `summary`
  - `menu`
  - `dialog`
- Scripting
  - `script`
  - `noscript`
  - `template`
  - `canvas`
  - `slot`

## Most commonly used elements

Start with these 17 — these are elements are found in an overwhelming majority of web pages!

- `html`
- `head`
- `body`
- `title`
- `a`
- `div`
- `img`
- `script`
- `link`
- `meta`
- `form`
- `input`
- `p`
- `ul`
- `li`
- `br`
- `span`

## Frequency of Occurence of Elements in Webpage

## Distinct Elements In a Webpage

## Elements that Make up a Page - and How Many Times

Data on Pages goes here...
thumb thumb thumb thumb thumb

Copyright © David Heitmeyer