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

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

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

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

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

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

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:

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>

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

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.

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

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

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

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

Relative or Partial URLs

Relative to Server Root

Relative Paths to Parent Locations

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

Relative links are "transportable":

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

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.