What is a website?

Internet 101

How it began

Tim Berners-Lee, a scientist at CERN, developed the World Wide Web to streamline distribution of information among scientists around the world. Berners-Lee devised the system of hypertext (or links). The first users were mainly academics. The first website was dedicated to host information about the World Wide Web project itself.

What is a website

The collection of files for this class website.

A website is a compiled collection of files, interpreted by a browser.

The Cloud

Technically?

Patent documentation still often depicts the internet as an amorphous blob. Image: US7069299B2, 2000, via What shape is the internet?, Noah Veltman.

Actually

Image: Server farm at the CERN Recruitment Center in Ain, Rhône-Alpes, France. Faber, CC BY-SA 2.0, via Wikimedia Commons.

A server

Servers are internet-connected computers running server software, serving web documents as requested. Most websites live in a shelf on a server farm.

Map of underwater internet cables — Image: How the Internet Travels Across Oceans, *New York Times*

Protocols

Protocols are standardized ways in which information can be passed from one computer to another (transfer of data & documents.)

When opening up your web documents on your own computer, only you have access to your files. The hypertext protocol (http) allows computers to access files on other computers (servers) and display them in the browser. This is why all websites begin with http or https.Other common protocols include:

Email (POP, SMTP, IMAP)
FTP (File Transfer Protocol)
IP (Internet Protocol)

Website Files

These files are directly transferred onto a server’s hard drive.

Github

Layers of Webpages

There are 3 essential technologies for front-end web development that determines what we see and interact with in a browser. “Front-end” refers to what happens within the browser.

Layer	Language / File Type
content	HyperText Markup Language (HTML)
form	Cascading Style Sheets (CSS)
behavior	JavaScript (JS)

“Back-end” programming

Popular server-side languages (back-end web development) usually involves a server, an application, and a database, and concerns how the information is collected and stored. These are required for more robust websites, such as ecommerce platforms, or CMS (content management systems) like wordpress. These languages programatically generate the HTML we see on sites dynamically, as we access the page.

Folder Structure

When building a website, it is best to organize your files into appropriate structures by using folders.

The “root” is the top level folder of your website. All website html files, images, stylesheets, etc., should be included and organized within this folder. index.html is usually the default filename of the homepage, because it is the default file served when accessing the folder (http://yourwebsite.com/ will load http://yourwebsite.com/index.html).

You may see multiple index.html pages each within different subfolders of a website; that page will load by default when the folder is accessed. (http://yourwebsite.com/subfolder will load http://yourwebsite.com/subfolder/index.html) However, filenames cannot share the same name within the same folder.

Path Syntax

Because website is a collection of files, the way we specify the location of the file is important. This is called the path to the file. You can construct a path in 3 different ways:

Path Kind	Syntax
Absolute Path	exact location `http://www…`
Relative Path	directions relative to where you currently are `foldername/` “down” or “forward” a folder `../` “up” or “back” a folder
Root relative Path	directions relative to your home `/path` from root folder, starting with `/`. This will only work properly if you have a local server setup, and only if you are uploading to your domain’s root folder.

Local Server

If you simply open an html file on your browser, it will simply render the HTML. This is different from a server “serving up” that file. In order to simulate a web server showing the page, you can run a “local server” from your own computer.

Because it is a “local” server, that address will not be accessible to other users. However, this is helpful in testing your website locally before pushing changes live.

Steps to run a local server

Open your command prompt (Windows) / terminal (macOS/ Linux). To check if Python is installed, enter the following command: python -V. If the above fails, try: python3 -V This should return a version number.
If this is OK, navigate to the directory that your example is inside, using the cd command. The easiest way to do this is to type cd (with a space afterwards) and then drag-and-drop your website root folder onto the Terminal.
If Python version returned above is 3.X, enter python3 -m http.server
If Python version returned above is 2.X, enter python -m SimpleHTTPServer
By default, this will run the contents of the directory on a local web server, on port 8000. You can go to this server by going to the URL localhost:8000 in your web browser. The index.html file there should load up; otherwise you will see a directory listing of files.

Stay Organized!

Use folders and appropriate file names
Double-check your spelling
Avoid using spaces or special characters in file and folder names. Easiest to just use lowercase and use a hyphen (-) for spaces.
Make sure you understand where your files are located within your computer. The View > Path Bar option on your Finder, as well as column-view of your files, is helpful.
Save and close out of files first in your text editor before moving them.