The Web

Most of the world wide web is made up of HTML, CSS, and JS:

When you access a website, the server sends your computer the code which your browser renders into a web page that you can view and interact with. Thus, one fascinating aspect of the web is that everyone must share code to participate.

spider web

View Source

Right click on any web page and select “View page source” to see the code that is being rendered by the browser (shortcut: Ctrl + U).

Or put view-source: in front of any URL in your address bar, for example:

view-source:https://evanwill.github.io/web-crash-course/

Right click on any element in the page and select “Inspect” or “Inspect Element” to open your browser’s built in developer tools. This is a great way to learn about HTML and to understand how others created the sites you use.

code

Uniform Resource Locators

Of course to get that code we need an web address. The links in your browser address bar are Uniform Resource Locators, URLs.

Let’s dissect a URL:

protocol :// domain . top-level domain (optional port :80) / path and filename ? query with parameters # fragment or anchor

Protocol there is actually more than 100 defined Internet Protocols, however with URLs the most common is Hypertext Transfer Protocol (HTTP).
Domain the Domain Name System (DNS) is often described as a "phone book" that translates easy to understand web addresses into the appropriate IP addresses of servers with the desired information.
Subdomain (optional) can be added in front of the main domain. For example, in "lib.uidaho.edu" > lib is a subdomain of uidaho, which is a subdomain of the top-level domain edu.
Port (optional) occasionally added at the end of the domain, referring to specific communication endpoints that the server is listening on. For the web the standard ports are :80 (http) and :443 (https).
Path + filename these can be imagined like folders and files on the server (and actually are in static web sites). For example, /about/index.html, is the index file in the "about" folder. If no filename is given, by default the server provides the file named index.
Query string (optional) added to the end of an URL following a ? and is given in key value pairs like key=value. Multiple pairs can be separated by &. The characters must be URL encoded / escaped, since some characters such as space are not allowed in URLs. The queries are processed by the server or javascript, so what exactly they do depends on the page. For example, /index.php?title=example&action=edit might return a wiki article in edit mode from a server running PHP.
Anchor (optional) added to the end of a URL following a #. They traditionally correspond to specific element id on an HTML page, but are often used by javascript to add other functionality. For example, /index.html#Chapter1 might jump to a chapter heading in the web page, or /about.html#help might pop up a modal.

Static vs. Dynamic Web

Traditionally, web servers acted more or less like a read-only shared folder of files. You can think of a website as a folder of files. Thus, a static website is a collection of HTML, CSS, JS, images, and other files that are delivered exactly as they are on the server to users. A URL in a static site generally represents a request for an HTML document in a specific file location.

In contrast a dynamic website uses a server-side programming language to create pages on the fly when a user makes a request. Thus a URL represents a query, rather than an existing document on the server. Think of complex sites such as social media, where users are constantly adding more data and there is no “static” documents, but streams of every changing content. None-the-less, what the server ultimately delivers to your browser is still HTML, CSS, and JS.

In these platforms content, templates, and metadata are usually stored in a database. For example, the popular content management systems WordPress and Drupal use the scripting language PHP and database MySQL. This enables complex interactivity such as comments, customized views, user management, and a web-based admin interface.

Of course, all that complexity requires a lot of technical overhead… so static sites are experiencing a renewed boom, offering simplicity with:

More