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

Harvard University Extension School
Fall 2017

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

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

Topics

The Internet and the World Wide Web

The Internet

key

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

The Internet: Schematic

Internet

Types of Traffic on the Internet

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
- 171.8 million active sites and over 6.5 million "web-facing" computers
  (Netcraft July 2017 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

1998

Internet Archive Way Back Machine - whitehouse.gov 1998

1999

Internet Archive Way Back Machine - whitehouse.gov 1999

2001

Internet Archive Way Back Machine - whitehouse.gov 2001

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

2011

Internet Archive Way Back Machine - whitehouse.gov 2011

2015 - Early
whitehouse.gov

2015 - Early	2015 - Late
2017 - January. A new administration.	2017 - August

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

URI, URN, URL

Components of the Web

web parts

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
markup

Our Solar System: Markup + Style

solarsystem-style.html
markup + style

Our Solar System: Markup + Style + Function

solarsystem.html
markup + style + function

HTML Introduction

HTML5

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

web page

How Your Browser Thinks About It

dom tree

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:
Harvard Link in a web browser

element anatomy

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 evolution

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

	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" />`

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>

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>

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" />

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 HTML5 Logo

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

HTML5 Logo 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...

TOC	View as Slides