Lecture 1.2 (Jan. 21)

Today's big item: creating a Flask app, and starting to write HTML.

Logistics

  • A0 out and due next Tuesday
  • I'm working on opening more slots in the class — waiting on Azure codes
  • Currently working on Azure instructions. The template seems to be working!
  • Aside: Ansible is a pretty cool tool

PyCharm

This is the bulk of things. Walk through the PyCharm setup instructions, up to building a Flask app.

See Assignment 0 for notes on what we'll be doing.

HTTP and URLs

When we visit a web site, we identify it by its URL (Uniform Resource Locator). A URL looks like this:

http://example.com/

URLs can contain many components. For example, a web URL with all possible components might look like:

http://example.com:3802/foo?q=bar#frag

These components are:

http
The scheme, identifying the protocol or language to speak to the server. Will generally be http or https (for encrypted HTTP) in our use cases.
example.com
The host, identifying the server that contains the desired page. This can be either a host name, such as example.com, or a host IP address like 8.8.8.8.
3802
The port number. If the port is unspecified (there is no :NNN after the host), the default is 80 for HTTP and 443 for HTTPS. Flask listens on 5000 by default.
/foo
The path, specifying the document on the server that is desired. If no path is specified, it defaults to /.
?q=bar
The query string, containing additional parameters that might affect how the server renders the document.
#frag
The fragment, identifying a particular portion of the document that is desired. This is not sent to the server.

HTTP Requests and Responses

HTTP is based on requests and responses. When we visit http://example.com/, the browser connects to port 80 on host example.com and sends a message that looks like this:

GET / HTTP/1.1
Host: example.com

To which the server might respond:

HTTP/1.1 200 OK
Content-Type: text/plain
Connection: close

This is the example server.

The first line of the response contains the status of the response; in this case it is 200 to indicate that the request was valid and the requested resource is included.

After the response line comes a set of headers that provide additional information, such as the type of data being sent (in this case text/plain, plain text). We will often see text/html.

The headers are terminated by a blank line, after which comes the response content itself.

HTTP status codes

You can find a fairly full list of status codes on Wikipedia. They are divided into the following groups:

1xx
Informational. We will not see this very often.
2xx
Success. The most common is 200 for 'OK'. There are a few other kinds of success.
3xx
Information about finding the requested resource elsewhere.
4xx
The request had a problem, such as specifying a nonexistent resource (404), requesting a resource that exceeds its permissions (401), or having an unspecified problem such as invalid structure (400).
5xx
The server had a problem; the request was OK but the server couldn't provide a response for reasons of its own. A common one is 500 for an internal server error, such as the Python script crashing.

HTML

Note

This is copied from yesterday! That's because we didn't get to it, but we'll be starting in on it today.

OK, let's start looking at HTML.

The Web is built on HTML. Most of what we do involves one of several things:

  • Creating HTML to describe content
  • Shipping HTML across the network
  • Styling HTML to provide an appearance
  • Modifying HTML to get a different set of content

So what does it look like?

<!doctype html>
<html>
<head>
<title>Hello, world</title>
</head>
<body>
<h1>Hello</h1>
<p>The world is greeted.</p>
</body>
</html>

Several things to note:

  • Doctype declaration. There are many different ones; this one means ‘use HTML5’, which is kinda weird, but we'll be doing that all the time.
  • Tags which delimit elements. The element is everything delimited by a start <tag> and end </tag>.
  • Text inside the elements.
  • Most elements have end tags. A few don't, but we'll get to those later.

Start building up more elements.