Components of a Website
by Aryeh Friedman and Dorothy L. Nixon
Copyright © 2014 by Friedman, Nixon, and Wong Enterprises, LLC. All rights reserved
The Internet vs. the World Wide Web
Although the Web happens to be, by far, the most popular way of using the Internet, the Web is not the same thing as the Internet. The Internet itself is a vast network of networks of computers, The Web is just one of many applications/services that can run on the Internet.
Non-web services that run on the Internet include email and FTP (File Transfer Protocol). WinSCP uses SFTP ("Secure File Transfer Protocol," i.e. FTP with encryption), or a similar protocol called SCP ("Secure Copy"). FileZilla can use either FTP or SFTP. These days most people view their email on websites such as Gmail and Yahoo, but it is also possible to receive email in other ways that don't involve websites. Email and FTP are both older than the Web.
The Internet exists as a set of standards by which machines on the many smaller networks can communicate with machines on the other networks. The World Wide Web exists as a set of standards by which the computer programs known as "web browsers" can communicate, across a network (either the Internet or a smaller network), with other computer programs known as "web servers."
There now several nonprofit organizations involved in setting standards for the Internet. These include:
- Internet Engineering Task Force (IETF)
- Internet Corporation for Assigned Names and Numbers (ICANN), which administers the Internet Assigned Numbers Authority (IANA)
- Internet Society (which has many local chapters around the world, including a New York chapter)
For the World Wide Web, standards are set by the World Wide Web Consortium (W3C) -- although the major web browser makers have often done their own thing, a little bit different from the official standards, and have sometimes invented whole new features in an attempt to gain a competitive edge. (Incompatibilities amongst different browsers have been a longstanding source of frustration for web developers.)
Client-server model vs. other network models
Computer networks can be divided into three broad categories based on how the machines (or programs on those machines) in the network interact.
- Client-server. In a client-server network, all actions originate on the "client" side of the network connection. A "client" makes some "request" of a "server," and then the server sends a "reply" to the client. For example when you opened this page your web browser asked for the HTML and then it asked for any images whose filenames it encountered in the HTML.
- Master-slave. Similar to client-server, with the master being similar to a client and the server being similar to a slave, except that (1) multiple "clients" can make requests of a single "server," whereas a "slave" can have only one "master," and (2) a client's control over a server is typically much more limited than a master's control over a slave. In particular, clients must be limited in how they can modify data on the server, to avoid unpredictable results when more than one client modifies data on the server at the same time. (For more about the differences between client-server and master-slave, see the blog post Industrial Ethernet: Client/Server vs. Master/Slave by Wilfried F. Voss.)
- Peer-to-peer, in which the machines in the network are not assumed to have any special pre-assigned jobs. Actions can begin on any machine in the network. An example of a peer-to-peer network is the Internet.
As noted above, the Internet itself uses a peer-to-peer model. However, Internet applications can use other, more specialized models. Both the World Wide Web and FTP use a client-server model.
Static vs. dynamic content
Very simple, old-fashioned websites have only static content, i.e. content that does not change in response to anything a user does, except for displaying a new page when the user clicks a link.
These days, most websites can display pages whose content can vary depending on what a user does. For example, users can log in and see content specific to themselves as individual people. Such content is said to be dynamic.
A very simple static website can be created using HTML and nothing else, if desired. A static website can also display graphics and can also use CSS (Cascading Style Sheets) to control fonts, colors, etc. This website is static.
Frontend vs. backend
A web programming language may control things that happen either in the web browser or on the server. Actions that happen in the browser are considered to be frontend, whereas actions that happen on the server are considered to be backend.
CSS is not a programming language, but is considered to be frontend also, because it controls how the HTML and graphics are displayed in a web browser.
HTML itself is frontend too. However, on many websites these days, the HTML does not come from static HTML files, but is generated dynamically on the server via one of the backend web programming languages.
If a website has a database, that's considered to be part of the backend.
A website consists of content (the information you're looking for when you go to the site) and how that information is presented (colors, fonts, etc.). In general the frontend is in charge of the presentation, whereas the backend generates the content.
More about frontends
A web brower is the "client" in the Web client-server model and thus also acts as the front end. Most, but not all, web browsers support all 3 of the following languages that almost all web sites are built on.
- HTML (Hypertext Markup Language). HTML tags (and how they are ordered) are used to tell the browser how the page is structured. For example, HTML is used to indicate where paragraphs begin and end. Its original purpose was to enable links from one page to another.
- CSS (Cascading Style Sheets). CSS tells the browser how to lay out each page (e.g. colors, fonts, margins, relative positions of graphics and text). CSS can be used to control almost any aspect of the visual presentation of the site, other than its basic structure (which is controlled by HTML).
Note that HTML and CSS are NOT programming languages.
More about backends
Some things you should know about backends:
- Database-driven sites. One of the most common types of dynamic content are sites that are driven by databases. Examples include almost every well-known site on the Internet (Amazon, Google, Yahoo, Facebook, YouTube, etc.).
- Privacy and security. When making a website secure (making it so people can store personal information on it without concern for it getting out and/or being misused), it is never a good idea to trust the client not to do something that is deliberatly meant to harm the site and/or the user's browser and/or desktop machine. For this reason, all security and keeping security and personal information private is the job of the backend.
- LAMP. The most common configuration for a backend goes by the acronym LAMP. The L stands for Linux which is the operating system it uses. The A stands for Apache Web Server (the program that cordinates the rest of the backend). The M sytands for MySQL (which is the database engine/server used). The P stands for PHP which is programming language used for tying the backend together. Each one of the 4 letters can be replaced by a number of alternatives depending on needs. An example of a LAMP-based site is Wordpress.com.