WebFund 2015W Lecture 2

Audio & Video

The audio from the lecture given on January 5, 2015 is now available.

Video is also available, however the audio track is silent.

If anyone manages to merge the audio and video, please contact Prof. Somayaji!

Topics & Readings

In order to do this course, you must be comfortable with HTML and CSS. The Code Academy courses should be used help if you are unfamiliar or serve as a refresher. You will need to familiarize yourself with this on your own time.

Notes

HTML

In a web browser, by using the developer tools (usually found in a tools menu) you can:

see client side code
inspect specific elements of web page

HTML (HyperText Markup Language) is a standard markup language used to create web pages. It uses HTML tags to let the browser interpret the content of the page. HTML is derived from the Standard Generalized Markup Language (SGML) to simplify it and specialize it for web content.

The HTML code for a web page should begin with something like <!DOCTYPE HTML…> to indicate to the the browser what type of document it is parsing. The main portion of the code is then nested between opening and closing <HTML> tags. Comments can be included in the code as .

Note that a markup language uses a mix of data and metadata. The metadata says something about the data (ie <p>, <h1>, …). In order to work with html, you will need to become familiar with the various commonly used tags.

XML is another markup language: HTML is too specialized, SGML too verbose, so XML was created to be in the middle of the two. It is used as a general data definition language.

CSS

Cascading Style Sheets (CSS): marks up the HTML file, mix them together to make the web page look pretty. CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts. This separation can enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file (source Wikipedia: CSS)

Web pages and servers

A simple web page consists of an HTML file (which may be but is not necessarily stylized with a CSS file). The purpose of a simple web server is to serve the HTML file, and any associated files (CSS, images, etc) needed for that page, to the client’s browser. Generally, an index.html page is the default start/home page on a server.

Nowadays, we create programs to create/change the representation of HTML in the DOM (Document Object Model), which is a structured representation of the document. It is through the DOM that a program can change the structure and content of a web page. It represents the document as a structured group of nodes and objects that have properties and methods.

With content management systems, you don't have to think about code behind web pages and can instead focus on the content. Today, you pick your content and a theme and you’re done. Some examples of these are WordPress and MediaWiki. We're going to learn the tech behind how to do that.

HTTP

HTTP is a network protocol for sending and receiving data. Most content is requested via the “GET” method. “POST” is normally used in forms for passwords, billing information, etc

We can view information about HTTP requests and responses using the network tab of the developer tools in a web browser. These requests and responses have information such as status codes, headers and content stored in them. Some common status codes are:

“200” OK
“304” not modified (it was cached)
“404” page not found

The headers contain metadata. Inside the headers, we can see an IP address and a port. This is "who" you're talking to. If port is <1024, it’s a well-known port (ie. DNS port 53, SSH port 22, HTTPS port 443. Other fields include the user-agent (which browser is connecting), privacy policies, etc...

JavaScript

We will also be working with JavaScript in this course. JavaScript is not actually compiled, it is simply run in a parser using "just in time" compilation. We can input JavaScript directly into a console using the developer tools on a web browser. This console provides a read evaluate print loop. This means that you type in JavaScript code for it to read and evaluate and then it will immediately print the result of the evaluation.