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
CSCI E-12 — Goals for the Course, slide14
CSCI E-12 — Key factors for success in the course, slide15
A Web Address - URLs, slide16
Aside: URLs, URIs, and URNs, slide17
Components of the Web, slide18
Client-side Web Parts: Markup, Style, Function, slide19
Our Solar System: Markup, slide20
Our Solar System: Markup + Style, slide21
Our Solar System: Markup + Style + Function, slide22
HTML Introduction, slide23
Markup - HTML, slide24
Essential HTML5 Document Structure, slide25
HTML Elements - the basic building blocks structure, slide26
HTML Elements - Content can be other HTML elements, slide27
HTML Elements - Sometimes you will have more than one attribute, slide28
HTML Elements that are "empty", slide29
HTML Elements - Sometimes HTML allows you to leave off end tags, slide30
HTML5, slide31
Most commonly used or seen elements, slide32
Learning about HTML elements, slide33
HTML Purpose, slide34
Web Page Structure - header, main, footer, slide35
HTML5 Document Template, slide36
Benefits of Web Standards, slide37
HTML Best Practices to start out with, 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
"Hello World" First Assigment, slide44
File Management, slide45
File Management, slide46
Course Web Hosting Server: URLs and File locations, slide47
Workflow, slide48

Presentation contains 48 slides

Welcome!

CSCI E-12, Fundamentals of Website Development
Fall Term 2024
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

2022

2023

2023

2024

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
• 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, Brave, Vivaldi], [Safari], [Firefox]. See Browse Happy for easy links to all of these. Oh, and Arc is new browser to checkout too.

  I'm not going to ask you to change the browser that you know and use all the time, but I will ask you to have a couple more in the rotation for testing, and to remember that not everyone who views your site will be using your favorite browser.

• Version Control System (VCS), which will allow us to track changes we make to our code. We'll be using Git and GitHub! See About Git and GitHub.
• 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.

There are some more to add to the list eventually, but for now, let's keep it with these!

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/148528
  or canvas.harvard.edu and nagivate from there.
  • Syllabus
  • Class & Sections
  • Modules
  • Announcements
  • Ed Discussion

CSCI E-12 — 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.

CSCI E-12 — 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, Ed discussion, textbook, office hours
• Assignments
  • Start early (even if it is just reading through it)
  • Work to understand a concept outside the context of an assignment — use a 'playground' or 'sandbox' folder on your computer or even something like Codepen or JSFiddle, then apply your understanding to the assignment.
  • leave yourself time to review and revise an assignment
• Seek out help! Running into roadblocks? Read through an MDN doc! Check out the textbook! Attend or watch sections! Ask a question on Ed! Communicate early with David or your TA through the 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

In the context of the web, all URIs are URLs!

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

Huh? A name may be unique, but may not tell you anything about how to locate it.

"Designing Your New Work Life" by Bill Burnett and Dave Evans is a book.
It can be uniquely identified by the URN isbn:9780593467459, and various URLs can be used to locate it (well, if not locate it, at least locate how to purchase or locate it in a library)

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

Example: Our Solar System

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

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 26 elements that you will use and/or see most commonly.

Most commonly used or seen elements

Start with these 27 — 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:

1. MDN Web Docs: HTML elements reference
   For example:
   • h1 to h6
   • img
2. 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="https://www.mayoclinic.com/health/vitamin-d/NS_patient-vitamind">vitamin D</a>
  during young adulthood may reduce the risk of adult-onset
  <a href="https://www.diabetes.org/diabetes-basics/type-1/">type 1 diabetes</a>
  by as much as 50 percent, according to researchers at the
  <a href="https://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
• 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, VCS/SCM, browser, sftp client) in place, and begin to use them.
• Practice file management and version control
• 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 - the GitHub repositories will help provide the structure. And I recommend keeping your assignment work in 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

See: Course Web Hosting Server (Dreamhost) on the course web site.

Directory Requests and "index.html"

URL paths that map to a directory. For example the request: https://cwe871.students.cs12.net/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

• VCS. Get Git and GitHub setup!
• Editor. Install Visual Studio Code, with Live Server, and HTMLHint extensions
• SFTP client. Install Cyberduck or use Dreamhost File Manager (https://files.dreamhost.com
• 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
  • Get the assignment materials:
    • Accept the assignment via the GitHub link that creates a repo for you. Then get that repo code locally to edit.
  • Download the code from your repository and put it in your "course work" 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
    • Check in your browser that you can access your work. Copy the URL in your browser, and submit that URL via Canvas
  • Submit the code by giving us the URL to your GitHub repo (you did commit and sync everything, right?)