CSE 154

Lecture 1: Introductions, the Internet, and Basic HTML

Today's Agenda

Introductions

Course Overview

Syllabus

The Internet

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 interactivity through client- and server-side programs

...with up to five different languages

...by searching through online documentation

...and by following detailed specifications

The end result? A portfolio for you to show!

Your Instructors and TAs

Instructor: Lauren Bricker

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

Other roles include

• K-12 outreach
• STARS instructor
• Code.org facilitator

Path to this role was not very traditional

... theoretical math... Boeing... UW PhD in CSE... lots of jobs at small companies... ... two kids... Lakeside HS... Code.org... here!

Instructor: Melissa Hovik

Fifth year masters student in the Paul G. Allen School of Computer Science And Engineering

Has been a TA'd over 16 classes since Spring 2015 (CSE 143, 154, 190, 311, and 332)

Is pursuing CS education fulltime after her studies, and is very excited to be co-teaching CSE 154 this quarter!

Is at the Grace Hopper Celebration Conference this week - will introduce herself on Monday

Autumn Classroom TAs

Autumn Infrastructure TAs

Course Resources

Course Website

Syllabus

List of Resources

Pre-lecture Readings

Piazza Message Board

Course Structure

Lectures 3x per week

Sections

Labs

Instructor Office Hours

Web Programming Lab (WPL)

Your "deliverables"

Creative projects every other week^*

Homework assignments every other week^*

Midterm exam

Final

Oh about those lectures...

The course is being recorded using Panopto

And I know that usually means this ------ >

However, this will be an Active Learning course that will use Polling software, Think-Pair-Share questions (group answers), Worksheets, Note cards, etc.

So...

• Sit near to 2-3 other people so you can have conversations with them during discussion opportunities in lecture
• You will get more out of being engaged in class then watching on a video

Classroom conduct

Please read the syllabus section on Technology in the classroom

Audio clutter

The Internet and the World Wide Web

What is a web page, really?

Content

Words and images

Structure

HTML

Style

CSS

Behavior

Javascript & Server programs

Web Languages / Technologies

Content: Hypertext Markup Language (HTML): used for writing web pages

Style: Cascading Style Sheets (CSS): stylistic info for web pages

Behavior: JavaScript: interactive and programmable web pages

Asynchronous JavaScript and XML (AJAX): accessing data for web applications using fetch requests and promises

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

PHP Hypertext Processor (PHP): web services for handling and responding to client requests

Structured Query Language (SQL): interaction with databases

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

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

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

Key Aspects of the Internet

Subnetworks can stand on their own

Computers can dynamically join and leave the network

Built on open standards; anyone can create a new internet device

Lack of centralized control (mostly)

Everyone can use it with simple, commonly-available software

https://en.wikibooks.org/wiki/Intellectual_Property_and_the_Internet/Internet_service_providers

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

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/18au/
~~~~~  ~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~
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/18au/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):

• GET filename: download
• POST filename: send a web form response
• PUT filename: upload

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

Special thanks to Alain Chanais for pointing this out

They Are Everywhere

Except in the Allen Center (CSE building)

Reminder: What is a web page, really?

Content

Words and images

Structure

HTML

Style

CSS

Behavior

Javascript & Server programs

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

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

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

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

Getting Started

Nesting Tags

Tags can "nest" inside of other tags

<body>
  <p>
    This is a <em>really, <strong>REALLY</strong></em> stupid sentence. Here's why:
  </p>
  <ol>
    <li>I had nothing to say</li>
    <li>It is adding little meaning to the discussion</li>
  </ol>
</body>

HTML

output

Block and Inline Elements (explanation)

Block elements contain an entire large region of content

• Examples: paragraphs, lists, table cells
• The browser places a margin of whitespace between block elements for separation

Inline elements affect a small amount of content

• Examples: bold text, code fragments, images
• The browser allows many inline elements to appear on the same line
• Must be nested inside a block element

Rules and exceptions...

Block vs. inline:

• Some block elements can contain only other block elements: <body>, <form>
• <p> tags can contain only inline elements and plain text
• Some block elements can contain either: <div>, <li>

Some elements are only allowed to contain certain other elements:

• <ul> is only allowed to contain <li>

Some elements are only allowed once per document:

• <html>
• <body>
• <head>
• <main>

Incorrectly Nesting Tags

<p>
  HTML is <em>really,
  <strong>REALLY</em> lots of</strong> fun!
</p>

Incorrectly nested HTML

Tags must be correctly nested

• A closing tag must match the most recently opened tag
• The browser may render it correctly anyway, but it is invalid HTML

How would we get the above effect in a valid way?

<p>
  HTML is <em>really,
  <strong>REALLY lots of</strong></em> fun!
</p>

How can we check? W3C HTML Validator

validator.w3.org

• Checks your HTML code to make sure it follows the official HTML syntax
• More picky than the browser, which may render bad HTML correctly

<p>
  <a href="http://validator.w3.org/check/referer">
    <img src="../img/w3c-html.png" alt="Validate" /></a>
</p>

Web Standards

Moreover, it is important to write proper HTML code and follow proper syntax

Why use valid HTML5 and web standards?

• More interoperable across different web browsers
• More likely that our pages will display correctly now and in the future
• To ensure accessibilty

More About HTML Tags

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>CSE courses are <!-- 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!

HTML Character Entities

a way of representing any Unicode character within a web page

• Complete list of HTML entities
• How would you display the text & on a web page?

Example: HTML-encoding text

What if I wanted to put THIS into a rendered web page?

<p>
  <a href="http://google.com/search?q=Mowgli&ie=utf-8">
    Search Google for Mowgli
  </a>
</p>