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

Harvard Extension School
Spring 2022

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

### 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
HTML Elements - the basic building blocks structure, slide19
HTML Elements - the basic building block structure, slide20
HTML Elements - Content can be other HTML elements, slide21
HTML Elements - Sometimes you will have more than one attribute, slide22
HTML Elements - Sometimes elements have no content; they are "empty", slide23
HTML Elements - Sometimes HTML allows you to leave off end tags, slide24
HTML Elements - the basic building blocks structure, slide25
Elements, Start Tags, Attributes and values, End Tags, Content, slide26
Markup Evolution and Standards, slide27
Benefits of Web Standards, slide28
HTML and XML Syntax for HTML5 — What's the Difference?, slide29
A Tale of Two Documents, slide30
HTML5, slide31
Most commonly used or seen elements, slide32
Page Structure - header, main, footer, slide33
HTML5 Document Template, slide34
HTML5 Elements - Page Structure, slide35
Common HTML5 Elements - Grouping Content, slide36
article and section and div, slide37
p and div elements, slide38
Harvard Extension School Homepage and div elements, slide39
Lists - ul and li, slide40
Nested Lists - li is a child of ul!, slide41
Lists in Action, slide42
Sections - Headings, slide43
Headings and Lists In Action, slide44
Common HTML5 Elements - a element - anchor, slide45
Creating Links, slide46
Relative URLs, slide47
Absolute and Relative Locations, slide48
Relative Paths to Parent Locations, slide49
File Management, slide50
File Management, slide51
Course Web Hosting Server: URLs and File locations, slide52

Presentation contains 52 slides

- img
- img
- img
- img
- img

## 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

> Suppose all the information stored on computers everywhere were linked. Suppose I could program my computer to create a space in which everything could be linked to everything.

> Tim Berners-Lee

> 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)

> 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)

> 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 (2014)

> The web is for everyone, and collectively we hold the power to change it. It won’t be easy. But if we dream a little and work a lot, we can get the web we want.

> Tim Berners-Lee
> interview on 30 years of the world wide web in The Guardian (2019)

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

- HyperText Information System
- Cross-Platform and Cross-Device
  ...then and now
- Distributed
  - 269 million unique domains, 199 million active sites, and 11.7 million "web-facing" computers
    (Netcraft Web Server Survey, January 2022)
- Open Standards
  - HTML, CSS, JavaScript, HTTP, TCP/IP
- Open Source
  - Mozilla, WebKit, Apache HTTP Server, JavaScript, PHP, Python, etc.
- Web Browser: provides a single interface to many services
  - Information, Shopping, Banking, Communication, Finance, Business, etc.
- Dynamic, Interactive, Evolving

## 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

2022 - January

Screenshots from my collection and from Internet Archive Wayback Machine

## CSCI E-12 Course

- Course site in Canvas - canvas.harvard.edu/courses/102873
  or canvas.harvard.edu and nagivate from there.
  - Syllabus
  - Class & Sections
  - Modules
  - Announcements
  - Slack

### Key factors for success in the course

- Complete and submit the assignments
- Connect with other students
- Engage with resources available to you: Class meetings, Sections, Office Hours, Slack, Textbook
- Assignments
  - start early (even if it is just reading through it)
  - work outside the context of an assignment to understand a concept (use a 'playground' folder or Codepen or JSFiddle)
  - leave yourself time to review and revise an assignment
- Running into roadblocks? Communicate early with David or your TA through Slack or Canvas Inbox

## 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 Protocol)
  `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

- Structure / Markup (HTML)
  - 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

## 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

## HTML Elements - the basic building blocks structure

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

### A Hypertext Link

Markup for a Hypertext link:

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

How it would render in a web browser:

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

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

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

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

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

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

## HTML Elements - the basic building block structure

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

`<a href="https://extension.harvard.edu/">Harvard Extension School</a>`

## HTML Elements - Content can be other HTML elements

    <ul>
      <li>Tea</li>
      <li>Coffee</li><li>Water</li>
    </ul>

## HTML Elements - Sometimes you will have more than one attribute

    <img src="images/kitten.jpg" alt="Cute kitten playing wih a ball of yarn" />

## HTML Elements - Sometimes elements have no content; they are "empty"

Note the "end tag" is part of the "start tag" -- `<link />`

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

## HTML Elements - Sometimes HTML allows you to leave off end tags

        <ul>
        <li>Tea
        <li>Coffee
          <li>Water
      </ul>

or

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

In these cases the "end tags" are "implied" because of what follows.

Learning tip: Always use end tags!

## HTML Elements - the basic building blocks structure

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

### A Hypertext Link

Markup for a Hypertext link:

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

How it would render in a web browser:

Start Tag
`<a href="https://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 January 2022).
  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

### Markup Standards

- HTML5
  HTML 5 Living Standard (WHATWG), (work on-going; 2004 → present)
- 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

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

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

### Standards

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

Benefits:

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

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

Main differences between HTML and XML syntax:

| HTML | XML
--- | --- | ---
1. | End tags can be "implied" Closing elements that have implied end tags `<img src="images/drink.jpg" alt="Lake" >`
    <ul>
        <li>coffee
        <li>tea
        <li>water
    </ul>
| End tags always required (even for "empty" elements) `<img src="images/drink.jpg" alt="Lake" />`
    <ul>
        <li>coffee</li>
        <li>tea</li>
        <li>water</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
- 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

### XML Syntax
    <!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>
| ### SGML/HTML Syntax
    <!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 >
Markup Document (XML syntax) Validate with Nu Html Checker | Markup Document (SGML/HTML syntax) Validate with Nu Html Checker

### 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.

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

- The root element
  - `html`
- Document metadata
  - `head`
  - `title`
  - `link`
  - `meta`
- Sections
  - `body`
  - `nav`
  - `h1`, `h2`
  - `header`
  - `footer`
- Grouping content
  - `p`
  - `ul`
  - `li`
  - `main`
  - `div`
- Text-level semantics
  - `a`
  - `span`
  - `br`
- Embedded content
  - `img`
- Forms
  - `form`
  - `label`
  - `input`
- Scripting
  - `script`

### Learning about HTML elements

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

- MDN Web Docs: HTML elements reference
  For example:
  - h1 to h6
  - img
- HTML Living Standard (WHATWG).
  For example:
  - html
  - a

## 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.

Example 1.1 - p element - Example 1.1<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>

- Markup
- Display

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

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.

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.

Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Ut a risus. Fusce bibendum sagittis magna.

### 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.

Example 1.2 - div element - Example 1.2<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;}

- Markup
- Style
- Display

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

In `style` element (`<style>`) within `head` element:

    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;}

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.
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.
Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Ut a risus. Fusce bibendum sagittis magna.

## 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`

Example 1.3 - Unordered List - Example 1.3<ul><li>Tea</li><li>Bread</li><li>Cheese</li><li>Chips</li><li>Ice Cream</li></ul>

- Markup
- Display

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

- Tea
- Bread
- Cheese
- Chips
- Ice Cream

Example 1.4 - Nested Unordered List - Example 1.4<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>

- Markup
- Display

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

- Tea
  - Kenya
  - Sikkim
  - Ceylon
  - Assam
  - Oolong
- Potato Chips
  - Dirty's
  - Art's and Mary's
  - Tim's Cascade
  - Cape Cod

Example 1.5 - Ordered List - Example 1.5<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>

- Markup
- Display

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

1. Boil water
2. Measure tea (approximately 1 tsp. per 6 oz. cup)
3. Steep tea for 3 to 5 minutes
4. Enjoy!

Example 1.6 - Dictionary Lists (terms and definitions) - Example 1.6<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>

- Markup
- Display

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

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

## 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`:

Correct | Incorrect ul must be within li
--- | ---
Example in Gist View Example Validate Example
    <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&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>
| Example in Gist View Example Validate Example
    <ul>
    <li>Tea</li>
        <ul>
            <li>Kenya</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.

Correct HTML serialization | Correct XML serialization
--- | ---
Example in Gist View Example Validate Example
    <ul>
    <li>Tea
        <ul>
            <li>Kenya
            <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>
| Example in Gist View Example Validate Example
    <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&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:

Adequate levels of vitamin D during young adulthood may reduce the risk of adult-onset type 1 diabetes by as much as 50 percent, according to researchers at the Harvard School of Public Health (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.

## 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

Location: `https://www.myschool.edu/museums/index.html`
Relative URL | Resolved URL
--- | ---
`../index.html` | `https://www.myschool.edu/index.html`
`../arts/index.html` | `https://www.myschool.edu/arts/index.html`
`../images/museum_building.jpg` | `https://www.myschool.edu/images/museum_building.jpg`

Relative links are "transportable":

locations: `https://stage.myschool.edu/museums/index.html`
Relative Link | Resolved URL
--- | ---
`../index.html` | `https://stage.myschool.edu/index.html`
`../arts/index.html` | `https://stage.myschool.edu/arts/index.html`
`../images/museum_building.jpg` | `https://stage.myschool.edu/images/museum_building.jpg`

## 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!)

URL | File
--- | ---
https://cwe871.cs12students.dce.harvard.edu/index.html | /home/users/cwe871/public_html/index.html
https://cwe871.cs12students.dce.harvard.edu/big_ideas/summer_school.html | /home/users/cwe871/public_html/big_ideas/summer_school.html
https://cwe871.cs12students.dce.harvard.edu/big_ideas/elective_system.html | /home/users/cwe871/public_html/big_ideas/elective_system.html

### 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`).