This article explains web development by studying its beginning and evolution. It is not a chronicle on the evolution of the web but rather the history of the needs that led to the evolution of the web, in order to better understand this technology.
It all started with information. Human beings have always needed to find ways to share information. As you know, before the Internet, information was exchanged via letters, newspapers, radio and television.
These means of communication have many drawbacks: this is what has allowed the Internet to impose itself.
The article will be published in two parts :
- Client side: page architecture and styles
- Server side: forms and databases
Let's start with what happens on the client side.
Part I
Client side: page architecture and styles
1. What is the web?
Imagine being able to publish information that is accessible to everyone and readable by anyone interested in this information? This is exactly what the web allows. The information is stored on a web server, and people can read this information using clients (web browsers). This is called a “client-server architecture”.
Why HTTP?
You've probably seen these four letters in your browser's URL bar. They mean Hyper-Text Transfer Protocol. Literally: “hypertext transfer protocol”. HTTP is therefore a client-server communication protocol used specifically for the web.
Initially, the information was recorded only in text format — this is why the name Hyper-Text Transfer Protocol remained even though, now, different formats of information (text, media, file, etc.) are exchanged through this protocol.
https, Hyper-Text Transfer Protocol Secured, is the secure version of HTTP.
2. How is information stored, retrieved and backed up?
HTML
The HTML file is the simplest and most durable way to store information on the web. To better understand, let's take the example of a company publishing its prices in the form of a list of products (with a price and a validity date), so that its suppliers can download and/or see them. This list is stored in an HTML file, placed on a server, and it can be viewed using a web browser. The browser requests this file from the server (request), the server provides it and closes the connection.
HTML is the standard markup language used to create web pages. Concretely, it is a simple text file, with beacons (tags) which help the browser to understand how to display the information.
CSS
CSS (Cascading Style Sheets) is a style language used to describe the presentation of a document written in a markup language. HTML allows you to do a basic layout, but it is better to use CSS to apply more complex and sophisticated styles.
A web application contains many pages, dynamic or static. If we use HTML tags to style information, we'll have to repeat it on all pages. Imagine that we want to change the background color: we will then have to edit the HTML of each of the pages of the site.
Instead, we can use CSS to store our style definitions in one place, and refer to them in every HTML page. By editing the CSS file, we will change the background color on all pages that point to this stylesheet.
Of course, CSS allows you to do much more than give a background color: it allows you to change the color of all kinds of elements, fonts, layouts... And more!
We put CSS styles on our previous example. Let's say we use tables on different pages, but they all use the same CSS styles. We can therefore move all these style definitions into a separate file.
CSS styles are always called at the top of the HTML document, between tags <head>.
Below is an example of a list of products on the site fnac.com.
CSS makes it possible to completely transform the basic HTML and to make complex layouts: here, the table of products contains a centered image; the title and other information of the comic have different styles allowing them to be hierarchized; prices are colored red, etc.
JavaScript
JavaScript is the third pillar of the web alongside HTML and CSS. It is used to make web pages interactive. To understand JavaScript (JS), you have to start by knowing what the DOM is.
Le Document Object Model (DOM) is a standardized programming interface that transforms the HTML document into a tree structure. The nodes of each document are organized in this tree — called the “DOM tree” (DOM-tree) — whose highest node is called DocumentObject.
Excerpt from the DOM tree (Source: Wikimedia Commons)
When an HTML page is rendered in the browser, the browser downloads the HTML code to local memory and creates a DOM tree to display the page on the screen.
Using JS, we can manipulate the DOM tree in several ways:
- modify the DOM tree by adding, modifying and deleting all the HTML elements and attributes of the page;
- change all CSS styles on a page;
- react to all existing events on the page;
- create new events in the page (and react to all these new events).
Let's continue with our price list example, adding another column — Special Price — whose content is hidden by default. We'll show it after the user clicks a button. Technically, we'll use a click event (click-event) attached to an anchor element (anchor tag) and change the existing text of the web element. In other words, we are going to manipulate the DOM. To do this, we need to use the browser's accepted scripting language, which is… always JavaScript.
For information: the JavaScript is generally placed at the end of the HTML file, just before the closing of the tag </body>.
On the site fnac.com, the “Add to cart” button appears when hovering over the product.
That's done with CSS.
When the button is clicked, a pop-in appears (without reloading the page):
And that's done thanks to JavaScript: a “click” event has been placed on the button and, when this event is executed, a function responsible for opening the pop-in is called.
The add-to-cart mechanism is managed on the server side.
# Translation of the article Understand Web Development in Less than 1 HourBy Shaik Ismail
Audrey Guénée, DEV-FRONT @UX-Republic
