Skip to content

Web 101

Jump to bottom
ochan1 edited this page Feb 14, 2023 · 4 revisions

web server-client diagram (client requests / server responses)

Source: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server

A web server is a program, designed with most input / output over the Internet, rather than through the command-line (terminal) or through a graphical interface. It is named a server because often, we run web server software on very few computers, but handle thousands of people at once (clients).

Languages

How do we write a web server? It can be written in any language with access to network input / output (I/O), but many developers and companies choose scripting languages, like Python and Ruby, for very specific reasons:

  • No compilations: create new features faster without compiling
  • Flexibility: looser typing usually entails faster coding
  • Loose latency requirements: the slowness of Python (vs. C) is dwarfed by the time spent transferring data on the internet
  • Excellent package managers: high-quality libraries are easily installed with new projects, making code reuse easier

In very specific circumstances, a compiled language like Java, C++, Rust, or Go may be preferable:

  • Extreme demand for performance: handling billions of users, like Google
  • Power consumption: faster programs consume less power, and take less money on power
  • Large teams: stronger safety features make working together easier / bugs less frequent
  • Security: compiled languages are very difficult to reverse-engineer; Python and Javascript must execute on text scripts, and are simpler to de-obfuscate

Concepts

A web server, conceptually, is quite simple:

While the exact nature of a network request is CS 168 material, the important acronyms are:

  • HTTP: transfers data, specifically web pages, between computers
  • HTML: describes the syntax of a web page

Our web server gets three kinds of data in an HTTP request, our input:

  • Endpoint: the URL. Our website ignores the hkn.eecs.berkeley.edu (which is used for IP resolution), and focuses on the route after it: /exams/course/CS/162. With text parsing, it can find what resource the request wants (the list of 162 exams) and route the request to the exam handler, which is usually just a function specifically for exam requests.
  • Verb: the action. For most tasks, this is the HTTP verb GET. However, for tasks like form submissions, other verbs like POST and PUT might describe the task better.
  • Data: the data to transfer. For GETs, this is empty, but for form submissions, this contains the actual data (encoded as text).

Once it gets this data, it can return an HTTP response, our output:

  • Status: describes if the request is good, and the operation worked. Is 200 if OK, 404 if Not Found (i.e. your URL is wrong, you dun goofed), 500 if there was an Internal Server Error (we dun goofed).
  • Data: the data to transfer. This usually contains the web page file, encoded as text, but may also be PDFs, images, or any other file squished into a byte stream.

That's the basics of a web server. All of the code we write (Python) revolves around this: what data is requested, and how we should respond. Django exists because so much of this is common to all web servers, and it handles the messy bits: reconstructing the request from a raw text stream, accessing databases, generating HTML pages, flattening a Python request object back into a raw text stream, sending it over the network.

So how do I make a web page?

HTML

Recommended reading: MDN Learn HTML, Django templates.

HTML is short for Hypertext Markup Language, which means it's basically fancy text.

How fancy? A normal (basic) HTML page looks like this:

<html>
<head>
  <meta charset="utf-8">
  <title>Page Title</title>
</head>
<body>
  <h1>Major title</h1>
  <p>Hello fren</p>
  <h2>Minor title</h2>
  <p>But why tho</p>
</body>
</html>

HTML organizes text so web browsers can render pages properly. If not structured correctly, browsers will guess what it should look like, but sometimes they get it wrong:

gru makes a website pic.twitter.com/Q3DG3FT6At

— S'poopy Watercolour (@SWatercolour) March 18, 2018

gru makes a website

I've edited this shamelessly from MDN:

Anatomy of an HTML

Let's explore our paragraph element a bit further:

<p>my cat is very grumpy</p>

The main parts of our element are:

  • The opening tag: the element name (in this case, p), wrapped in angle brackets. This marks the start of an element (where the start of the paragraph is).
  • The closing tag: the same as the opening tag, but with a / forward slash. This marks the end of an element (where the end of the paragraph is). Forgetting a closing tag is a common beginner error and can lead to strange results.
  • The content: the content of the element (in this case, just text).
  • The element: the whole shebang (opening tag + content + closing tag).

There are various tags for different kind of content:

  • Text (<p>)
  • Headers (<h1> ... <h6>)
  • Links (<a href="link">)
  • Images (<img src="link">)
  • Emphasized <em> / strong <strong> text
  • Lists (unordered: <ul>, ordered: <ol>) and their items (<li>)
  • Tables <table>, table rows <tr>, table headers <th>, and data <td>

Even tags that do nothing: <div>, <span>. Why would you want to do nothing?

CSS

CSS stands for Cascading Style Sheets. They are styles used for formatting HTML, and specifically they can cascade: elements pass on their styles to nested elements.

CSS is too complex to discuss here, but understand that it can be applied to an element like so:

<style>
p {
  visibility: hidden;
}
</style>
<p>Testing please ignore</p>

CSS can be included inline in HTML with the <style> tag, or linked in a separate file:

<link rel="stylesheet" href="/styles/main.css">

It can apply to HTML elements three ways:

  • Tags: applies to an entire group of tags, like p or table.
  • Class: applies to all elements with a specific class
  • ID: applies to a single element with a specific ID

Adding an element to a class looks like this:

<style>
.spooky {
  visibility: hidden;
}
</style>
<p class="spooky">Testing please ignore</p>

Specifying an element with an id looks like this:

<style>
#spooky {
  visibility: hidden;
}
</style>
<p id="uniquely_spooky">Testing please ignore</p>

So how do we add a style to a bunch of nearby elements, without giving it an unnecessary tag like <p>?

Use a <div> for a large block:

<div class="spooky">
  <p>Testing please ignore</p>
  <p>But why tho</p>
</div>

or <span> for a single line:

<span class="spooky"><p>Testing please ignore</p></span>

Django specifics

Django templates

Our website uses a very particular flavor of HTML, Django templates. They are essentially HTML, but with extra syntax using {}:

{% if user.is_special %}
  <p>{{user.name}}</p>
{% endif %}

They allow us to manipulate and generate HTML, using Python context (a dictionary, passed into the render function in a view) to run {% fn %} template logic and {{value}} substitutions.

See the full Django template reference for more.

Sass CSS

TBPWeb uses Sass to create the CSS used in the site

The Sass syntax is similar to CSS in some ways, so some experience in CSS can let you identify what elements needs to be fixed in the Sass files

If you plan on having some idea to make the website look better, go ahead and learn more about it. But otherwise, it is recommended to at least SKIM the material and focus on making a good product for now, and leave re-designs in the future.

Learn more about how Sass works here: https://www.w3schools.com/sass/default.php

Homepage

Guide

Rails - unmaintained - leftover to serve as source of inspiration for other wiki pages

Clone this wiki locally