CSE 154

Lecture 1: Intro to CSE 154, the Internet, and Basic HTML

Today's Agenda

Introductions

Course Overview

The Internet

Introduction to HTML!

What This Class is About:

An overview of how the Internet works

What is a website and how to create one from scratch

... with semantic markup and design/layout

... with interactivity through client- and server-side programs

... with up to four different languages

... by searching through online documentation

... and by following detailed specifications

... and overall, building design/development strategies across the "full-stack"

The end result? A better understanding of the web, important technologies, and a portfolio for you to show!

CSE 154 Modules

1. Webpage structure and appearance with HTML5 and CSS.
2. Client-side interactivity with JS DOM and events.
3. Using web services (APIs) as a client with JS.
4. Writing JSON-based APIs with Node.js.
5. Storing and retreiving information in a database with MySQL and server-side programs.

Instructor: Melissa Hovik

Masters student in the Paul G. Allen School of Computer Science And Engineering

Has been a TA for various classes since Spring 2015 (CSE 143, 154, 190, 311, 332, and 341).

Head TA/co-instructor for CSE 154 for the last two years, and is very excited to be teaching a new summer offering!

Office Hours (CSE 210): Mondays 2:30-3:30PM and Wednesday 11-12PM

TAs

Don't forget to check out the Advice for CSE 154 Students on each TA's About Me Page!

Course Resources

Course Website - it has everything!

• Review the Syllabus
• Materials including Readings, Pre-Checks, and materials will be posted regularly on the course calendar
• Use the Piazza Message Board to ask questions, share interesting web-related finds, etc.
• GitGrade to submit assignments (first assignment will be posted tonight)
• Canvas to submit most Lecture Pre-Checks (and review grades over the quarter)
• No course textbook, but readings are chosen to support each lecture (MDN is the reference we will use most often)

Course Structure

Lectures 3x per week

• Lecture "Pre-Checks" due 12:30PM day of lecture unless otherwise noted (usually as Canvas quizzes, will also be posted on calendar)

Sections 2x per week (Tuesday and Thursday)

• More hands-on practice of concepts introduced in lecture, new material is occassionally introduced.
• You'll have the same TA both days, but the rooms will be different and Thursday sections will combine two classes in a "lab-like" structure

• The University has a short term loan program if you do not have a computer of your own to bring.

Getting Help

• Instructor Office Hours
• Web Programming Lab (WPL)
• Piazza Message Board
• Mentor Circles - Commit to 1 extra hour a week to focus on section material and CPs!

Ask questions, take advantage of CP's to explore the material, and study a little each day.

Course Deliverables

1 Creative Project (CP) + 1 HW for each Module 1-4

• CPs (10%) are smaller assignments designed to give students freedom to explore the material and get feedback before applying to formal HW assignments. And you can create something you can show to others!
• HW (30%) are the formal assessments for each Module.

Section Participation (10%)

Short Lecture Pre-Checks (5%)

Two Exams (30%)

Final "Full-Stack" Project! (15%)

Web Development Tools

Throughout the quarter, we will be using the following web development tools:

• Chrome: a browser to view and debug webpages
• Atom: a text editor to write HTML/CSS/JS/SQL (with various helpful packages available)
• Command Line with Git: to clone/push CP/HW repositories (available packages with Atom)

Make sure to follow the CSE 154 Setup Guide before section tomorrow (and ask on Piazza if you have any questions!).

So, what is a web page, really?

Content

Words and images

Structure

HTML

Style

CSS

Behavior

JavaScript

Web Languages / Technologies

Hypertext Markup Language (HTML): semantic markup for web page content

Cascading Style Sheets (CSS): styling web pages

Client-side JavaScript: adding programmable interacitvity to web pages

Asynchronous JavaScript and XML: fetching data from web services using JavaScript fetch API

JavaScript Object Notation (JSON): file format for organizing human-readable data

REST APIs: web services handling and responding to client requests on the server

SQL: interaction with databases

The Internet: A Brief History

Began as a US Department of Defense network called ARPANET (1960s-70s)

Initial services: electronic mail, file transfer

Opened to commercial interests in late 80s

WWW created in 1989-91 by Tim Berners-Lee

Popular web browsers released: Netscape 1994, IE 1995

Then... all this: http://www.evolutionoftheweb.com

Other notable web events:

• Amazon.com opens in 1995; Google in January 1996
• Hamster Dance web page created in 1999
• Facebook founded in February 2004
• Chrome released in September 2008
• Snapchat created in September 2011

Question

Who "runs" the Internet? Who is responsible for overseeing it?

People and Organizations (and Companies)

Internet Engineering Task Force (IETF): Internet protocol standards

Internet Corporation for Assigned Names and Numbers (ICANN): decides top-level domain names

World Wide Web Consortium (W3C): web standards

These protocols are carried out in large part by Internet service providers and other companies and organizations who build Internet-related products and applications

Internet Protocol (IPv4 or IPv6)

A simple protocol for attempting to send data between two computers

Each device has a 32- or 128-bit IP address for other machines to find it. For IPv4 this is written as four 8-bit numbers (0-255)

Find your internet IP address: whatismyip.com

Find out your local IP address: in a terminal, type ipconfig (Windows) or ifconfig (Mac/Linux)

Domain Name System (DNS)

Think about some domain names you know (e.g. https://www.google.com). What do they end with?

Used to be only .com, .org, .net, .gov, .edu, .int, .mil

... then there were two letter extensions like .uk, .es

Now .everything!

Transmission Control Protocol (TCP)

Adds multiplexing, guaranteed message delivery on top of IP

Multiplexing: multiple programs using the same IP address

• Port: a number given to each program or service
• port 80: web browser (port 443 for secure browsing)
• port 25: email
• port 22: ssh
• port 5190: AOL Instant Messenger
• More common ports

Some programs (games, streaming media programs) use simpler UDP protocol instead of TCP

The World Wide Web (WWW)

Wait, how is it different than the Internet again?

The Internet describes all the interconnected devices that use the "internet protocol." The World Wide Web is the subset of the Internet that uses the HTTP and HTTPS protocols, mostly to transmit "webpages."

The World Wide Web

Web server: software that listens for web page requests

• Apache
• Microsoft Internet Information Server (IIS) (part of windows)
• NGINX

Web browser: fetches/displays documents from web servers

• Google Chrome
• Mozilla Firefox
• Microsoft Internet Explorer (IE) and Edge
• Apple Safari
• Opera

Uniform Resource Locator (URL)

An identifier for the location of a document on a web site

A basic URL:

https://courses.cs.washington.edu/courses/cse154/19su/
~~~~~  ~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~
protocol           host               path

Upon entering this URL into the browser, it would:

• Ask the "DNS" server for the IP address of courses.cs.washington.edu
• Connect to that IP address at port 80
• Ask the server to GET /courses/cse154/19su/index.html
• Display the resulting page on the screen

Hypertext Transport Protocol (HTTP)

The set of commands understood by a web server and sent from a browser

Some HTTP commands (your browser sends these internally):

We will learn more about GET and POST when we start the server-side programming module of this course

HTTP Error Codes

When something goes wrong, the web server returns a special "error code" number to the browser, possibly followed by an HTML document

Common Error Codes:

Complete list

... as dogs and ... as cats

The Real Innovation

HTTP built resilience into the internet by creating the 404.

A website will always give a response, even if what a user wants isn't found. 

Examples:

• ACM’s 404
• WSDOT
• Imgur
• FT Labs
• Discord
• Android

They Are Everywhere

Except in the Allen Center (CSE building)

Getting Started with HTML

There are many different types of HTML tags used to structure web pages (we can't possibly cover all of them within class). We've consolidated a handy slide deck with examples of common tags you should know, but you can find a comprehensive list on MDN (it's a great bookmark page for reference this quarter!)

You are not expected to memorize these! You'll all get more practice tomorrow in section :)

Hypertext Markup Language (HTML)

Describes the content and structure of information on a web page

• Not the same as the presentation (appearance on screen)

Surrounds text content with opening and closing tags

Each tag's name is called an element

• Syntax: <element> content </element>
• Example: <p>This is a paragraph</p>

Most whitespace is insignificant in HTML (ignored or collapsed to a single space)

We will use a newer version called HTML5

Structure of an HTML Page

<!DOCTYPE html>
<html>
  <head>
    information about the page
  </head>
  <body>
    page contents
  </body>
</html>

HTML

An HTML page is saved into a file ending with extension .html

The <head> tag describes the page and the <body> tag contains the page's content

The DOCTYPE tag tells the browser to interpret our page's code as HTML5, the lastest/greatest version of the language

Let's start with a template!

HTML Tag Attributes

Some tags can contain additional information called attributes

• Syntax:
  <element attribute="value" attribute="value"> content </element>
• Example:
  <a href="page2.html">Next page</a>

Some tags don't contain content and can be opened and closed in one tag

• Syntax:
  <element attribute="value" attribute="value" />
• Example:
  <br />, <hr />, <br>, <hr>
• Example:
  <img src="bunny.jpg" alt="pic from Easter" />

Comments: <!-- ...-->

comments to document your HTML file or "comment out" text

<!-- My web page, by Mowgli Hovik
     CSE 154, Spring 2048     -->
<p>School is<!-- NOT --> a lot of fun!</p>

HTML

Many web pages are not thoroughly commented (or at all)

Still useful at top of page and for disabling code

Comments cannot be nested and cannot contain a --

Do not leave commented-out HTML code in your homework assignments!

Looking Ahead

Remember to bring a computer with Atom/Git installed to section tomorrow.

Beginning of Quarter Survey Due Wednesday 11PM, first Pre-Check will be posted tomorrow.

Fill out the Mentorship Circle survey if you are interested!