Intro to the Internet, and

Basic HTML
Lecture 1
Agenda

1. Introductions
2. Course Overview & Logistics
3. The "Web" and The "Internet"
4. HTML
"Waterfall Chat"
QUESTION:

What are you looking forward to in this course?

Course Resources
● No course textbook, but readings are chosen to support each lecture (MDN is the
reference we will use most often)
Course Structure
Lectures per week
● 2 x Theory
● 2x Application
Course Deliverables
● 1 Creative Project (CP) + 1 HW for each Module
● CPs are smaller assignments designed to give you freedom to explore the
material and get feedback before applying it to formal HW assignments. And
you can create something you can show to others!
● HWs are the formal assessments for each Module.
● Short form Quizzes will be done every two weeks on the preceding two
weeks' content.
● Final culminating project covering everything we've talked about.
On the Syllabus
Grades will be structured as:

20% Assignment – Homeworks - Participation

30% Creative Projects

20% Midterm

30% Final Project

Participation and Assignments
These participation activities are designed with three goals in mind:

1. To give you guided, low-stakes practice with the course material

2. To encourage reflection on the day's lecture
3. In some cases, to provide feedback back to me/us

To keep them low-stakes, they will be graded largely on completion (% questions answered), with
approximately 1 question (clearly marked) to be graded on correctness.
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!
What this class is *not* about:
While this course is very practical and hands on (you will write lots of code and be able to show it off),
it is a foundational survey course.

This means:

… you will learn the foundations of what powers the Web, but not the latest framework everyone
might be talking about.
… you will learn a lot of concepts and a lot of terminology, but there will always be more; we don't (and
can't) cover it all.
… as such, while people have gotten Web programming/development jobs after this course, our goal is
to give you the basis with which to learn more -- it's an intro course, after all.
Modules

1. Web page structure and appearance with HTML5 and CSS.

2. Client-side interactivity with JavaScript.
3. Using web services (APIs) as a client with JavaScript.
4. Writing JSON-based web services (APIs) with Node.js.
5. Storing and retrieving information in a database with SQLite and
server-side programs.
Web Development Tools
Throughout the quarter, we will be using the following web development tools:

● Chrome: a browser to view and debug web pages

● VSCode: a text editor to write HTML/CSS/JS/SQL (with various helpful
packages available)
● Command Line with Git: to clone/push CP/HW repositories (built into
VSCode)

Make sure to follow the Setup Guide and create an account on repl.it account.
So What is a Web Page Really?

CONTENT STRUCTURE STYLE BEHAVIOR

Ok, but what is it really?
What's everything involved here?
It's just this, right?

1. Decide on URL...
2. Type it in...
3. Hit enter...
4. Website loads!

But what happens between 3 and 4?

What happens in the second half?

You don't have Google.com on your computer. So, where does it come from?
1. Figure out where it is
2. Ask for it to be sent to us
3. Check and verify what we get
4. Show it
 The thing in the address bar. Where is the
website?
Uniform Resource Locator (URL): An identifier for the location of a document
A couple of basic URLs:

https://https://www.minecraft.net/tr-tr/about-minecraft

https://https://www.ageofempires.com/games/aoe/

path
protocol host
 Wikipedia:
http://en.wikipedia.org/wiki/internet
The Internet
A connection of computer networks
built on the Internet Protocol (IP)

Every computer has an "IP" address:

● E.g.,: 34.215.139.216
● Find yours with WhatsMyIP.org

So what's the difference between the

Internet and the World Wide Web
(WWW)?
Internet VS. 'The Web'
INTERNET THE WEB
Computers (servers) connected to each ● Collection of pages of information
other via a series of networks ● Text... but with some "Hyper" around
Powered by layers upon layers: it
● Physical: The cables between them ● Pages can link to each other
● Data & Network: The [small] packets ● Pages have style and interactivity
of information
● Transport (TCP/IP): Providing
connections and reliability
● Application: Tying everything
together to be useful
Remember that URL? (https://google.com/)
Need to go out to the internet to get the webpage.
Internet is low-level: based on numbers (IP addresses), not names.

Domain Name System (DNS)

A Domain Name System translates human-readable names to IP addresses
● Example: cs.washington.edu → 34.215.139.216
○ Hostname of cs.washington.edu (which we might put into the browser's
address bar)
○ ... has IP address of 34.215.139.216 (which will be used to contact the server
via the internet)
More of the URL than the host
https://www.minecraft.net/tr-tr/about-minecraft

We've handled the host to IP address (so we know who to ask for the web page)
The "protocol" tells us how:
● HTTP: HyperText Transfer Protocol
● Gives us the instructions (protocols) for how to share (transfer) web content
("hypertext")

And the rest tells us what:

● From the www.minecraft.net server (aka host)...
● I'd like the thing called /tr-tr/about-minecraft/… (aka path or resource)
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:
Number Meaning
200 ok
301-303 Page has moved (permanently or temporarily)
403 You are forbidden to access this page
404 Page not found
418 I’m a teapot (fun fact, example)
500 Internal server error
Complete list (as dogs, 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
● GitHub
They are everywhere
Then… we have the web page right?

WORDS + IMAGES HTML CSS JAVASCRIPT

What’s in a web page
Hypertext Markup Language (HTML): semantic markup for web page content

Cascading Style Sheets (CSS): styling web pages

Client-side Javascript: adding programmable interactivity 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
Content
Words and images
HTML
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
● Most whitespace is insignificant in HTML (ignored or collapsed to a single
space)
● We will use a newer version called HTML5

SYNTAX: <element>content</element>
EXAMPLE: <p>This is a paragraph</p>
Structure of an HTML page
An HTML page is saved into a file ending
with extension .html <!DOCTYPE html>
<html>
The <head> tag describes the page and <head>
the <body> tag contains the page's
information about the page
content
</head>
The DOCTYPE tag tells the browser to <body>
interpret our page's code as HTML5, the page contents
latest/greatest version of the language </body>
</html>
Let's start with a template!
HTML Tag Attributes

Some tags can contain additional information called attributes

SYNTAX: <element 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">
EXAMPLES: <br>, <hr>,
<img src=”puppy.jpg” alt=”cutest puppy”>
Comments <!-- .. -->

<!-- my fancy web page! CSE 154 -->

<p>School is<!-- a lot of --> fun!</p>

● 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
● Setting up your computer with VSCode/Git: Set up Guide