Session 01 - The Internet, World Wide Web, Web Browsers, Web Sites, and HTML

Topics

1. The Internet and the World Wide Web
2. A Web Site over Time
3. CSCI E-12 Course
4. A Web Address - URLs (and URIs) URL = Uniform Resource Locator
5. Components of the Web
6. Client-side Web Parts: Markup, Style, Function
7. HTML Introduction
8. Essential HTML5 Document Structure
9. Markup Evolution and Standards
10. HTML and XML Syntax for HTML5 — What's the Difference?
11. HTML5
12. Common HTML5 Elements - Grouping Content
13. Lists - ul and li
14. Common HTML5 Elements - a element - anchor
15. Relative URLs
16. File Management
17. Course Web Hosting Server: URLs and File locations

Session 01 - The Internet, World Wide Web, Web Browsers, Web Sites, and HTML, slide1
The Internet and the World Wide Web, slide2
The Internet: Schematic, slide3
Types of Traffic on the Internet, slide4
Tim Berners-Lee on The World Wide Web, slide5
Features of the World Wide Web, slide6
Approaching the Web, slide7
A Web Site over Time, slide8
CSCI E-12 Course, slide9
A Web Address - URLs (and URIs) URL = Uniform Resource Locator, slide10
Components of the Web, slide11
Client-side Web Parts: Markup, Style, Function, slide12
Our Solar System: Markup, slide13
Our Solar System: Markup + Style, slide14
Our Solar System: Markup + Style + Function, slide15
HTML Introduction, slide16
Markup - HTML, slide17
Essential HTML5 Document Structure, slide18
Components of HTML Elements, slide19
Elements, Start Tags, Attributes and values, End Tags, Content, slide20
Markup Evolution and Standards, slide21
Benefits of Web Standards, slide22
HTML and XML Syntax for HTML5 — What's the Difference?, slide23
A Tale of Two Documents, slide24
HTML5, slide25
Most commonly used or seen elements, slide26
Page Structure - header, main, footer, slide27
HTML5 Document Template, slide28
HTML5 Elements - Page Structure, slide29
Common HTML5 Elements - Grouping Content, slide30
article and section and div, slide31
p and div elements, slide32
Harvard Extension School Homepage and div elements, slide33
Lists - ul and li, slide34
Nested Lists - li is a child of ul!, slide35
Lists in Action, slide36
Sections - Headings, slide37
Headings and Lists In Action, slide38
Common HTML5 Elements - a element - anchor, slide39
Creating Links, slide40
Relative URLs, slide41
Absolute and Relative Locations, slide42
Relative Paths to Parent Locations, slide43
File Management, slide44
File Management, slide45
Course Web Hosting Server: URLs and File locations, slide46

Presentation contains 46 slides

The Internet and the World Wide Web

Image credit: Barrett Lyon / The Opte Project
"Visualization of the routing paths of the Internet.""
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
  • SFTP, FTP
• Login
  • SSH

Tim Berners-Lee on The World Wide Web

What is Tim Berners-Lee up to today? He's concerned about personal data sovereignty -- and has software and a company to help address it.

Features of the World Wide Web

Approaching the Web

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

A Web Site over Time

The White House website over time (www.whitehouse.gov).

1996

• Search
• News, Informational

1997

• Page background image
• "Virtual" Library
• You can...
• Image icons as links

1997

1998

• Animated GIF flag waving:
  
• Good Morning / Good Evening
• Header image larger and is a photo
• Image icons for different areas

1998

1999

• Two columns
• Descriptioins with categories
• Promotion of items to home page under "What's New" and "Site News"

1999

2001

• Major redesign
• Horizontal site navigation
• Footer navigation
• Left-side policies, news
• Main content is news stores
• Photos

2001

2002

• Information density increase
• Additional left-side categories
• Visual news items

2002

2007

• Removal of fancy script font in images
• Simplified imagery in header
• left-side items built out and more spaced

2007

2009

• New administration
• Header
• Visual top stories (rotating 4)
• Mega footer

2009

2011

• Increased density
• Presence of social media links - Facebook, YouTube, Twitter, Vimeo, Flickr, iTunes, MySpace, LinkedIn

2011

2015 - Early

• Top stories now primary and secondary; no longer rotating
• Increased number of images displayed
• Social media are now icons only and includes Instagram, GooglePlus; others have gone
• Footer links are now blue

2015 - Early

2015 - Late

• Decreased density (?)
• Featured stories are primary, secondary, tertiary. Every item has an image

2015 - Late

2018 - January

• New administration
• Mega footer goes away
• Header menu popout/dropdown (pancake icon)
• Visible header categories issue-oriented
• Twitter Tweets are now content

2018 - January

2021 - January

• New administration
• No top menu items are visible; only pancake menu
• Big first image not associated with a story
• Contrast / Text Size controls

2021 - January

• New administration
• No top menu items are visible; only pancake menu
• Big first image not associated with a story
• Contrast / Text Size controls

2021 - June

Screenshots from my collection and from Internet Archive Wayback Machine

CSCI E-12 Course

• Course site in Canvas - canvas.harvard.edu/courses/95649
  • Syllabus
  • Class & Sections
  • Modules
  • Announcements
  • Slack

A Web Address - URLs (and URIs)
URL = Uniform Resource Locator

"The crucial thing is the URL. The crucial thing is that you can link to anything."
— Tim Berners Lee

URL/URI
https://www.archives.gov/historical-docs/voting-rights-act

• Scheme (also Protoocl)
  https://www.archives.gov/historical-docs/voting-rights-act
• Host (also Authority)
  https://www.archives.gov/historical-docs/voting-rights-act
• Path
  https://www.archives.gov/historical-docs/voting-rights-act

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

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

A book example ("Leadership in Turbulent Times" by Doris Kearns Goodwin).

• urn:isbn:978-1476795928 - Uniquely identifies by "name"
• https://www.barnesandnoble.com/w/leadership-doris-kearns-goodwin/1128008541?ean=9781476795928#/ - URL, "L" is for "Location"; tells you were something is "at"

Both are "URIs" one is a URN and the other is a URL.

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

Our Solar System: Markup

solarsystem-markup.html

Our Solar System: Markup + Style

solarsystem-style.html

Our Solar System: Markup + Style + Function

solarsystem.html

HTML Introduction

Markup - HTML

The Code

• My Schools

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Schools</title>
  </head>
  <body>
    <h1>My Schools</h1>
    <ul>
      <li>
        <a href="https://www.harvard.edu/">Harvard University</a><br/>
        <img src="images/harvard-shield.png" alt="Harvard Shield" />
      </li>
      <li>
        <a href="https://www.ku.edu/">University of Kansas</a><br/>
        <img src="images/kansas-jayhawk.png" alt="University of Kansas Jayhawk" />
      </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:

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>

Elements, Start Tags, Attributes and values, End Tags, Content

Element Names

• Element names are defined by the HTML5 Standard
• HTML5 has 116 elements defined (as of August 2021).
  The elements that are part of HTML5 are fairly stable and are not rapidly evolving.

  In our "skeleton" document, we've already encountered the html, head, title, meta, body elements.

Attributes and Values

• Not all elements will have attributes
• Some start tags will have more than one different attributes defined. For example:

  <link rel="stylesheet" href="styles/site.css" />

Content

• Not all elements will have "content". These are often called "empty". Examples include: br, img, link, meta
• Content can be text
• Content can be other elements

End Tags

• For empty elements, the end tag is part of the start tag! For example:
  

  <img src="images/harvard-shield.png" alt="Harvard Veritas Shield" />

• Some end tags are optional. But more about this later.

Markup Evolution and Standards

Main points:

• HTML5 now and into future
• Two syntax ways of writing HTML5 code —
  • "XML" way
  • "HTML" or "SGML" way

Benefits of Web Standards

HTML and XML Syntax for HTML5 — What's the Difference?

Main differences between HTML and XML syntax:

<ul>
    <li>coffee
    <li>tea
</ul>

<ul>
    <li>coffee</li>
    <li>tea</li>
</ul>

<!DOCTYPE html>
<head>
<title>My Document</title>
<body>
<h1>My Document</h1>

<!DOCTYPE html>
<html>
<head>
<title>My Document</title>
</head>
<body>
<h1>My Document</h1>
</body>
</html>

Best Practices for Starting Out

• Use start and end tags, even if optional
• Lower case element and attribute names
• Use quotes around attribute values
• Preference note: David prefers the "XML" syntax, but that's a preference, not a mandate; also it is a preference not shared by everyone.

A Tale of Two Documents

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Document</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>My Document</h1>
    <ul>
        <li>coffee</li>
        <li>tea</li>
    </ul>
    <img src="images/mug.jpg" alt="mug" />
</body>
</html>

<!DOCTYPE html>
<HEAD>
    <TITLE>My Document</TITLE>
    <META CHARSET=utf-8 >
<BODY>
    <H1>My Document</H1>
    <UL>
        <LI>coffee
        <LI>tea
    </UL>
    <IMG SRC=images/mug.jpg ALT=Mug >

Cleaner version of SGML/HTML Syntax

Of course, you can use the SGML/HTML syntax and write HTML that looks better. Just because the syntax allows you shorten things and leave out things, doesn't mean you have to.
Like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Document</title>
    <meta charset="utf-8" >
</head>
<body>
    <h1>My Document</h1>
    <ul>
        <li>coffee
        <li>tea
    </ul>
    <img src="images/mug.jpg" alt="Mug" >
</body>
</html>

• Markup Document (SGML/HTML syntax)
• Validate with Nu Html Checker

HTML5

116 elements defined in HTML5

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

I've highlighted the 23 elements that you will use and/or see most commonly.

Most commonly used or seen elements

Start with these 24 — these are elements you will use in most of your web pages, or that you'll find in a majority of web pages.

How to find out more about them? Two places that I would start are:

• HTML Living Standard (WHATWG). For example:
  • html
  • a
• MDN web docs, and specifically MDN - HTML elements reference. For example:
  • h1 to h6
  • img

Page Structure - header, main, footer

First, recall the basic document structure:

• html
  • head
    • title
    • meta
  • body

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

header, main, footer

MDN HTML elements reference: header, main, footer.

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

HTML5 Document Template

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

HTML5 Elements - Page Structure

header, main, footer, nav

Common HTML5 Elements - Grouping Content

• article and section
• Paragraphs - p
• Lists
  • ul
  • li

article and section and div

• article — implies a "self-contained composition in a document".
• section — a generic section of a document
• div — has no special meaning at all

p and div elements

p element

The p element is used to group paragraphs.

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.
 </p>
 <p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.
 </p>
 <p>Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Ut a risus. Fusce bibendum sagittis magna.
 </p>

div element - division

The div element is to group block-level content, and is typically used to define parts of the page so that CSS rules can be applied specifically to those parts.

 <div class="part1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.
 </div>
 <div class="part2">Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.
 </div>
 <div class="part3">Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Ut a risus. Fusce bibendum sagittis magna.
 </div>

div.part1 {margin: 1.5em; padding: 2em; color: white; background-color: green;}
div.part2 { color: purple; margin: 1em; padding: 2em; border: medium solid purple;}
div.part3 { background-color: orange; margin: 0.5em; padding: 1em; font-size: smaller;}

Harvard Extension School Homepage and div elements

Lists - ul and li

Lists are very useful, both for:

• Content
• Navigation

There are three types of lists:

• Unordered (most common)
  ul and li
• Ordered
  ol and li
• Dictionary (rare)
  dl, dt, and dd

 <ul>
   <li>Tea
   </li>
   <li>Bread
   </li>
   <li>Cheese
   </li>
   <li>Chips
   </li>
   <li>Ice Cream
   </li> </ul>

 <ul>
   <li>Tea
     <ul>
       <li>Kenya
       </li>
       <li>Sikkim
       </li>
       <li>Ceylon
       </li>
       <li>Assam
       </li>
       <li>Oolong
       </li>     </ul>
   </li>
   <li>Potato Chips
     <ul>
       <li>Dirty's
       </li>
       <li>Art's and Mary's
       </li>
       <li>Tim's Cascade
       </li>
       <li>Cape Cod
       </li>     </ul>
   </li> </ul>

 <ol>
   <li>Boil water
   </li>
   <li>Measure tea (approximately 1 tsp. per 6 oz. cup)
   </li>
   <li>Steep tea for 3 to 5 minutes
   </li>
   <li>Enjoy!
   </li>
 </ol>

 <dl>
   <dt>bread   </dt>
   <dd>a usually baked and leavened food made of a mixture whose basic constituent is flour or meal   </dd>
   <dt>butter   </dt>
   <dd>a solid emulsion of fat globules, air, and water made by churning milk or cream and used as food   </dd> </dl>

Nested Lists - li is a child of ul!

Keep in mind that the only allowed child of a ul element is an li element. So in a nested list, the nested ul needs to contained within the li:

<ul>
<li>Tea
    <ul>
        <li>Kenyan</li>
        <li>Sikkim</li>
        <li>Ceylon</li>
        <li>Assam</li>
        <li>Oolong</li>
    </ul>
</li>
<li>Potato Chips
    <ul>
        <li>Dirty&apos;s</li>
        <li>Art&apos;s and Mary&apos;s</li>
        <li>Tim&apos;s Cascade</li>
        <li>Cape Cod</li>
    </ul>
</li>
</ul>

<ul>
<li>Tea</li>
    <ul>
        <li>Kenyan</li>
        <li>Sikkim</li>
        <li>Ceylon</li>
        <li>Assam</li>
        <li>Oolong</li>
    </ul>

<li>Potato Chips</li>
    <ul>
        <li>Dirty&apos;s</li>
        <li>Art&apos;s and Mary&apos;s</li>
        <li>Tim&apos;s Cascade</li>
        <li>Cape Cod</li>
    </ul>
</ul>

Sometimes this is confusing, since in the "HTML" form of HTML5, the end tags are options for li, so while it may appear that you can have a ul as a child of ul, you really can't -- there's an implied end-tag there.

<ul>
<li>Tea
    <ul>
        <li>Kenyan
        <li>Sikkim
        <li>Ceylon
        <li>Assam
        <li>Oolong
    </ul>

<li>Potato Chips
    <ul>
        <li>Dirty&apos;s
        <li>Art&apos;s and Mary&apos;s
        <li>Tim&apos;s Cascade
        <li>Cape Cod
    </ul>

</ul>

<ul>
<li>Tea
    <ul>
        <li>Kenyan</li>
        <li>Sikkim</li>
        <li>Ceylon</li>
        <li>Assam</li>
        <li>Oolong</li>
    </ul>
</li>
<li>Potato Chips
    <ul>
        <li>Dirty&apos;s</li>
        <li>Art&apos;s and Mary&apos;s</li>
        <li>Tim&apos;s Cascade</li>
        <li>Cape Cod</li>
    </ul>
</li>
</ul>

Lists in Action

Harvard Homepage - lists are outlined in magenta and list items in green. Note that some lists are "horizontal" and some are "vertical" -- exactly how a list is rendered can be controlled by CSS

Top:

Footer:

Sections - Headings

Any single heading element wasn't technically only our "top" list, but collectively (h1,h2,h3,h4,h5,h6), these are important!

Example in JSFiddle

<h1>Primary Heading (1st)</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<h2>Secondary Heading (2nd)</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<h3>Tertiary Heading (3rd)</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<h4>Quarternary Heading (4th)</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<h5>Quinary Heading (5th level)</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<h6>Senary Heading (6th level)</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>

Headings and Lists In Action

Heading elements (h1,h2,etc.) and lists (ul,li) combined with CSS are very powerful. Headings can remain headings in markup and CSS can style them as desired. Lists can remain lists in markup (navigation, content items, etc.) and CSS can style them as desired.

Common HTML5 Elements - a element - anchor

The anchor — a — element is at the center of the key "hypertext" feature of the web. The a element is how to create hyperlinks from resource to another!

To go along with the a element is the href attribute. The value of the href attribute is the URL that the browser will load when the link is activated (e.g. a mouse click).

The following paragraph was taken from "'Sunshine vitamin' looks a little brighter", Harvard Gazette, February 5, 2013:

Code:

<p>Adequate levels of
<a href="http://www.mayoclinic.com/health/vitamin-d/NS_patient-vitamind">vitamin D</a>
during young adulthood may reduce the risk of adult-onset
<a href="http://www.diabetes.org/diabetes-basics/type-1/">type 1 diabetes</a>
by as much as 50 percent, according to researchers at the
<a href="http://www.hsph.harvard.edu/">Harvard School of Public Health</a>
(HSPH). If confirmed in future studies, the findings could lead to a role for vitamin D
supplementation in preventing this serious autoimmune disease in adults.</p>

Rendered:

Creating Links

Build confidence by making your links predictable and differentiable.

• Predictable
  • Am I getting 'closer' to my goal?
• Differentiable
  • What is the difference between clicking here or clicking there?

• Do
  • Be descriptive
    • Link several words or a phrase, not just one or two words
    • Use "title" attribute to elaborate
• Do Not
  • Lie or Mislead
  • "Click Here"
  • Find out more in this knowledge base article

Relative URLs

URL
https://www.archives.gov/historical-docs/voting-rights-act

• Scheme
  https://www.archives.gov/historical-docs/voting-rights-act
• Host
  https://www.archives.gov/historical-docs/voting-rights-act
• Path
  https://www.archives.gov/historical-docs/voting-rights-act

Absolute and Relative Locations

• Where does https://summer.harvard.edu/ go to?
• How about /images/mug.png ?
• What about ../styles/site.css ?

Absolute and Relative Locations

Relative locations (URLs) are resolved according to the location (URL) of the containing (starting) document!

Absolute or Fully Qualified URLs

Absolute, or fully-qualified, URLs specify the complete information (scheme, host, port, path).

https://news.harvard.edu/gazette/story/2020/07/public-health-experts-unite-to-bring-clarity-to-coronavirus-response/

Relative or Partial URLs

Relative, or partial, URIs specify partial information. The information not provided is resolved from the current location.

<a href="slide2.html">Slide 2</a>

Relative to Server Root

Is this relative or absolute? Scheme, host, and port would be resolved from current location, but path is absolute

<a href="/copyright.html">copyright information</a>

Relative Paths to Parent Locations

• ../
  refers to the parent directory
• ./
  refers to current directory

Relative links are "transportable":

File Management

For Your Class Work

• Create a directory or folder for your class work.
• Create a "playground" or "sandbox" folder where you can play in and experiment in without worrying.
• Assignments - unzip/extract the materials, then move into your class work folder

File Management

For Web Sites

• Use folders or directories to help organize files. Recommendation is to adopt folder names of styles (for CSS files), scripts (for JavaScript files), and images (for images).

  .
  ├── images/
  ├── index.html
  ├── scripts/
  └── styles/
     └── site.css

• Use index.html filename as appropriate
• Prefer filenames that only have lowercase, numeric, underscore or dashes (e.g. avoid spaces, and other things like !@#$%^&*(){}\|?/>

Course Web Hosting Server: URLs and File locations

• Each user has a their own domain name, in the form of NETID.cs12students.dce.harvard.edu, where NETID is the NetID of the user.
  • You can lookup your NetID at https://key.harvard.edu/manage-account -- look for "NetID" under "Account Information"
    • For example, my NetID is "dph445" — they are typically three letters derived from your name along with three numbers.
    • For example, the NetID for Charles William Eliot may look something like "cwe871".
      Fact: Charles William Eliot was Harvard's president whose term began in the 19th century and ended in the 20th century (1869-1909). NetIds were not being issued in that era.
• To connect to the course web hosting server, you must be connected to Harvard VPN.
• Each user will be able to login to the course web hosting server and will have disk space available. Each user will have a directory (folder) on the system where their web documents will go -- this is the public_html directory.
  • So the file location on the server will be something like /home/users/NETID/public_html, where NETID is the username (e.g. dph445, cwe871, look your NetId up here!)

Directory Requests and "index.html"

URL paths that map to a directory. For example the request: http://cwe871.cs12students.dce.harvard.edu/big_ideas/ would return the index.html document in the big_ideas directory (e.g. /users/cwe871/public_html/big_ideas/index.html).