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

Harvard Extension School
Fall 2022

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

### Topics

1. Welcome!
2. How does the web work?
3. The Internet and the World Wide Web
4. How do we make the web work?
5. CSCI E-12 Course
6. A Web Address - URLs
7. Components of the Web
8. Client-side Web Parts: Markup, Style, Function
9. HTML Introduction
10. Essential HTML5 Document Structure
11. HTML5
12. Common HTML5 Elements - a element - anchor
13. Relative URLs
14. "Hello World" First Assigment
15. File Management
16. Course Web Hosting Server: URLs and File locations
17. Workflow

Session 01 - The Internet, World Wide Web, Web Browsers, Web Sites, and HTML, slide1
Welcome!, slide2
How does the web work?, slide3
How does the web work?, slide4
The Internet and the World Wide Web, slide5
The Internet: Schematic, slide6
Tim Berners-Lee on The World Wide Web, slide7
The World Wide Web — key aspects, slide8
How has the web changed? A brief look at Southwest Airlines website evolution, slide9
How do we make the web work?, slide10
How do we make the web work — some tools for our toolbox, slide11
Approaching a Web Project, slide12
CSCI E-12 Course, slide13
A Web Address - URLs, slide14
Aside: URLs, URIs, and URNs, slide15
Components of the Web, slide16
Client-side Web Parts: Markup, Style, Function, slide17
Our Solar System: Markup, slide18
Our Solar System: Markup + Style, slide19
Our Solar System: Markup + Style + Function, slide20
HTML Introduction, slide21
Markup - HTML, slide22
Essential HTML5 Document Structure, slide23
HTML Elements - the basic building blocks structure, slide24
HTML Elements - Content can be other HTML elements, slide25
HTML Elements - Sometimes you will have more than one attribute, slide26
HTML Elements that are "empty", slide27
HTML Elements - Sometimes HTML allows you to leave off end tags, slide28
HTML5, slide29
Most commonly used or seen elements, slide30
Learning about HTML elements, slide31
HTML Purpose, slide32
Web Page Structure - header, main, footer, slide33
HTML5 Document Template, slide34
Benefits of Web Standards, slide35
HTML Best Practices to start out with, slide36
Common HTML5 Elements - a element - anchor, slide37
Creating Links, slide38
Relative URLs, slide39
Absolute and Relative Locations, slide40
Relative Paths to Parent Locations, slide41
"Hello World" First Assigment, slide42
File Management, slide43
File Management, slide44
Course Web Hosting Server: URLs and File locations, slide45
Workflow, slide46

Presentation contains 46 slides

- img
- img
- img
- img
- img

## Welcome!

CSCI E-12, Fundamentals of Website Development
Fall Term 2022
Harvard Extension School

### Essential Questions to Consider

- How does the web work?
- How do we make the web work?

### Four phases for Tonight

- The Web
- A bit about the course.
- Getting started with the web and HTML
- Orientation to the first assignment

## How does the web work?

What happens when you enter `https://extension.harvard.edu/` into your browser?

## How does the web work?

- Web Browser
- Web Server
- Web Address (URL) and Communication
- Web Content (HTML, CSS, JS, images)

### 1. Web Browser (HTTP Client)

### 2. Web Server (HTTP Server)

### 3. Communication

Communication between the web browser and web server, including how they communicate (HTTP) and the network.

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

The Internet came before the Web, and Web "traffic" is not the only type of traffic on the Internet

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

## The World Wide Web — key aspects

- HyperText Information System
- Cross-Platform and Cross-Device ...then and now
- Distributed
  - 271 million unique domains, 198 million active sites, and 12 million "web-facing" computers
    (Netcraft Web Server Survey, August 2022)
- Open Standards
  - HTML, CSS, JavaScript, HTTP, networking
- Open Source
  - Browsers and engines (Chromium, Webkit, Mozilla),
    languages (PHP, Python),
    server software (Apache, nginx, WordPress)
- Web Browser: provides a single interface to many services
  - Information, Shopping, Banking and Finance, Communication, Business workflows, etc.
- Dynamic, Interactive, Evolving

## How has the web changed?
A brief look at Southwest Airlines website evolution

1999 - September

- Physical Desk

1999 - October

- Main categories and functions
- What's New

1999
2002

- Culture
- Quick Links

2002
2006

- Travel Tools as icons
- Hot Deals

2006
2007

- Travel tools as panels
- Main imagery chages

2007
2009

- Travel Products

2009
2010

- Travel Products expanded, multiple locations
- Travel tool panels
- Mega footer beginning

2010
2015

- Less is more
- "Action" or "Do" panel clearer
- Social media links

2015
2022

Screenshots from my collection and from Internet Archive Wayback Machine

## How do we make the web work?

Understand the parts, and how they work individually and how they work together.

- Technology
  - Front-end (Browser-side)
    - HTML, CSS, JavaScript
  - Back-end (Server-side)
    - Hosting, Web server software, programming languages (JavaScript, Python, etc.)
- User Experience and Design
- Content

This works at multiple layers too —

- we need to understand HTML, CSS, and JavaScript individually as well as how they interact or relate to one another
- we also need to understand how we use HTML, CSS, and JavaScript together to accomplish a specific design or interface that will be useful to our users

## How do we make the web work — some tools for our toolbox

- A code editor. Recommendation: Visual Studio Code
  with a few extensions: Live Server, HTMLHint, Prettier - Code Formatter
- A Web Browser, hopefully you have a favorite. Pick another one more for additional testing, with the aim to have two browsers that come from different groups of the following three: [Chrome, Edge, Opera], [Safari], [Firefox]. See Browse Happy for easy links to all of these.
- An SFTP client (SFTP = secure file transfer protocol), such as Cyberduck. An SFTP client lets you move files you have edited locally to your web server account.
- VPN client (VPN = virtual private network). A VPN client lets you connect securely to a network in order to access restricted resources. You will need to be using Harvard VPN in order to SFTP content to your course web hosting account.

There might be a few more, but for now, let's keep it at this list!

Detailed instructions for SFTP and VPN are part of the "Hello World" assignment for this week!

## Approaching a Web Project

5 Planes from The Elements of User Experience: User-Centered Design for the Web

## CSCI E-12 Course

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

### Goals for the Course

- Think like a web developer (programmer, content, project management)
- Learn syntax of HTML, CSS, JavaScript.
- Break problems down in parts and build parts up to whole in iterations
- Learn tools and workflows to improve results and efficiency
- Understand how things relate to one another.
- Troubleshoot effectively when things are not working as expected.

### Key factors for success in the course

- Complete and submit the assignments
  (and to do this you'll likely need to watch the class recordings, attend or view sections, engage in the readings or other resources)
- Connect with students and course staff
- Engage with resources available to you: class meetings, sections, Slack, textbook, office hours
- 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), then apply that to the assignment.
  - 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

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: 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:9781476795928` - Uniquely identifies by "name"
- `https://www.barnesandnoble.com/w/leadership-doris-kearns-goodwin/1128008541?ean=9781476795928#/` - URL, "L" is for "Locator"; tells you were something is "at"

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

## Components of the Web

### 1. Web Browser (HTTP Client)

### 2. Web Server (HTTP Server)

### 3. Communication

Communication between the web browser and web server, including how they communicate (HTTP) and the network.

## 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 - Content can be other HTML elements

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

`ul` is an unordered list
`li` is a list item

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

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

`img` is to embed an image

## HTML Elements that are "empty"

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

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

`link` is used to reference a CSS stylesheet, a separate document that contains style rules to apply to the HTML document

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

## HTML5

115 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`
  - `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 HTML elements?

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

## HTML Purpose

- Gives structure and meaning to our content

Think about three aspects of structure:

1. HTML document structure
   `html`, `head`, `body`
2. Web page structure
   `header`, `main`, `nav`, `footer`
3. Content structure
   Headings (`h1`, `h2`, `h3`), lists (`ul` and `li`), paragraphs (`p`), images (`img`), text, etc.

Example: solarsystem.html

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

## Benefits of Web Standards

### Standards

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

### Benefits

- Improved Accessibility
  - People
  - Programs
    - Search Engines
    - Devices
- Stability
  - Forward-compatibility and backward-compatibility.
- Separation of Concerns (Structure, Style, Function)
  - simpler, cleaner pages
  - easier maintenance
  - easier redesign
- Validation provides baseline when you go to edit.

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

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

## HTML Best Practices to start out with

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

These best practices essentially follow the "XML" syntax rules for HTML5

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

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

## "Hello World" First Assigment

Hello World - Publishing a web page

### Purpose

- Get the tools (editor, browser, vpn client, sftp client) in place, and begin to use them.
- Practice file management, including:
  - working with ".zip" files with Expand/Compress (Windows) or Unzip/Zip (Mac)
  - keeping everything together in a folder and working with that folder (e.g. "File → Open Folder")
- Edit an existing HTML document
- Practice validating your HTML
- Go through the publishing process on your course web hosting server account
- Understand how to determine the URL to your published content

## 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/extension_school.html | /home/users/cwe871/public_html/big_ideas/extension_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`).

## Workflow

### Setup Once for Course

- Editor. Install Visual Studio Code, with Live Server, W3C Validation, and HTMLHint extensions
- SFTP client. Install Cyberduck
- VPN client. Install Harvard Cisco AnyConnect VPN client software
- On your computer, create a "course work folder" to keep your work for the course. I recommend something like `cscie12-work` on your Desktop.

### For Assignments

- Get things ready
  - Download the assignment ZIP file.
  - Unzip or Extract the ZIP file.
  - Move the folder into your "course work folder" you created above. Move the entire folder.
  - Start Visual Studio Code, and "File → Open Folder" and navigate to the assignment folder to open. In VS Code, I recommend always opening the assignment folder as opposed to opening individual files (treat the assginment folder contents as a unit!)
  - Use VS Code "Live Server" to provide a place to check your work.
- The Main Work of the Assignment!.
  - Edit the HTML, CSS, and/or JavaScript. Save.
  - Periodically check in the browser (a reload may be needed) as well as other checks that may be needed such as validation or accessibility.
  - Repeat the "Edit, Check" cycle until you've satisfied the rubric, yourself, or when the assignment is due.
- Submit your assignment.
  - Publish your assignment folder to your course web hosting account
    - Connect to Harvard VPN (Cisco AnyConnect Client), SFTP (Cyberduck) entire assignment folder to your `public_html/obscure_folder` directory
    - Check in your browser that you can access your work. Copy the URL in your browser, and submit that URL via Canvas
  - ZIP up the assignment folder and submit that via Canvas. Yes, we need to have both a URL and ZIP file for your work.