How a website works, explained to your grandmother

Chapter 1: The Internet is a village

Once upon a time, there was the World Wide Web, or the web, a large village that brings together many establishments, these are the equivalent of websites! Some homes host merchants who sell products (called eCommerce), others are service providers such as a bank or delivery service for example (called web applications), or companies or associations that present their products and services (called showcase sites). Internet users are simply villagers who visit a particular establishment according to their needs.

It wasn't complicated, was it? Then let's move on to the next chapter!

Chapter 2: A website is a home

Each house has a facade and several rooms, just as a website has a home page and several pages. These contain information specific to the activity of the house, and have a unique name and address (or URL: Uniform Resource Locator in web language) that allows Internet users to go there.

Careful, that's when grandma might not follow anymore. But thanks to the next chapter, you'll be able to surprise and amaze Julien, your developer cousin.

Chapter 3: How to build a website?

Different programming languages are used for the creation of websites. We have selected the 4 main ones. Just like an architect, a decorator, an electrician, a workman, each language has a precise function and works hand in hand with the others so that the house is solid, practical, aesthetic. All this with the aim of making you want to enter and stay there! 

The site architect: the HTML language

HTML (Hypertext Markup Language) is what is called a markup language. It is expressed by lines of code framed by different html tags (starting with a < and ending with a > ). This allows you to have structured data and to indicate if the content of your site is :

• a title (framed with <h1> tags),
• a paragraph (tag box <p>)
• an image (framed with <img> tags),
• a video (framed by the tags <video> )
• a link to navigate between each page (framed with tags <a>)

Here's what it looks like in developer view and its equivalent in a web browser.

The content of a website is its basis. If it can be enhanced, it's even better! That's where CSS comes in.

The decorator of the site: the CSS language

The CSS (Cascading Style Sheet) language defines the style based on the graphic charter of your site. Indeed, it is what will determine the location, color and size of your door and windows.

This language allows you to choose a background color, change the color of the text, modify fonts or add rounded edges to your buttons for example. In short, to improve the formatting and retranscribe your visual identity. Stylish, isn't it?

Over time, the language has evolved and now makes it possible to create real ergonomic interfaces, to adapt the display of the site to smartphones and tablets (we talk about "responsive" or "mobile friendly" display).

And hop, a visualization of HTML + CSS

Now that we have a stylized page, let's add some movement to it!

The electrician of the site: the JavaScript language

JavaScript is a scripting language that adds effects and interactivity to a site. It brings energy to open doors and windows and animate the elements of your home.

It allows you for example to make an interactive pop-up appear (you know the little advertising boxes that open automatically!). But also, to run a carousel of images, to add animations on elements or even to control the sound and videos that are broadcast on the pages of your site. 

In short, this programming language makes it possible to develop the lively side of a site, to make it intuitive, and thus greatly improves the user experience!

The site provider: the PHP language

The PHP (Hypertext Preprocessor) language is the provider that will allow you to change doors, windows and the contents of your house when necessary. It is the one that will come to "dynamize" the website. 

Thus, this open source language allows you to communicate with a database in order to store information on the long term and retrieve it dynamically. This is how we create advanced functionalities such as an e-commerce part, a member space or other web services.

This language is used by many developer toolkits. For example WordPress, a CMS (Content Management System) which is a popular content management system with an administration interface, and by modern frameworks such as Laravel, Symfony or CakePHP.

Is it all clear now? Connections are made? I can see your "it wasn't that complicated" look! Good, you're past the hard part. So let's get on with it.

Chapter 4: Where are the websites located?

The terrain of your site: the web server

The hosting of your site, i.e. the web server, represents the land on which your house is built. Technically, this host looks more like a large computer that is constantly connected to the Internet. Everything that makes up your site, code, images, etc. is stored on this server.

Be aware that there are several types of web hosting:

• The dedicated server 

A dedicated server is one that is 100% yours, in other words, it is a machine that is entirely at your disposal. All the power of this one allows you to run your website or your application. It allows you to manage a very high demand and to make big calculations without flinching. However it is a rather expensive solution.

• The mutualized server

It's land that you share with other houses. The server is dedicated to you but it is divided between several websites at the same time. Each site shares the resources used by the server. Although it is a much cheaper solution, the sharing is not always fair. If one website consumes more power than the others, everyone suffers.

• The Cloud Server or VPS (Virtual Private Server) 

This is a compromise between the dedicated server and the shared server. It is a dedicated server that creates smaller servers (more commonly called instances). The advantage compared to shared servers is that each instance has its own limits.

The address of your site: The domain name

The domain name is in a way the address of your website. It is the translation of the IP address of the web server, usually a succession of numbers not easy to remember, into something more easily readable. It is thanks to this address that the browser will be able to find the server on which your web pages are hosted. 

A domain name is composed of a string of characters : 

The prefix (the best known is "www") + the name of your business + extension (".com" or ".be" for example if you want to indicate that you are in Belgium)

It is important to choose a domain name that is simple and easy to remember by your prospective visitors. In addition, an explicit name will allow you to improve your search engine optimization (SEO).

How to access your site?

When you want to access a web page, your browser will then browse the Internet until it finds the server that contains it. This server will then send a page as a text file (html, css, javascript, php you already know) to your browser. After loading these files, your web page appears as if by magic!

Chapter 5: How to secure a site? 

The lock on your site: The HTTPS (HyperText Transfer Protocol Secure) protocol The SSL (Secure Sockets Layer) certificate

Your home can be locked for added security. In this case, it will use the HTTPS protocol coupled with the SSL certificate. The SSL certificate is a kind of verification key to attest that your website is secure. This means that the information transmitted between the visitor's browser and the web server is encrypted so that no one can read it between the two. 

A secure website can be recognised by the small padlock in the address bar of your browser.

Nevertheless, even if the SSL certificate remains optional, it tends to be used more and more in order to maintain security on visited sites. However, you should be aware that search engines attach greater importance to sites that have a certificate. These sites therefore appear higher in the results during searches. Thus, this helps to improve referencing.

Rely on experts

You've read everything, bravo! You can now pronounce html, css, php, javascript without blushing! 

But, if you've gone straight to the conclusion, we don't blame you. 

The design of a site, (just like that of a house), requires the technical skills of a web agency, a webdesigner, a developer, a webmaster and a project manager. In short, experts who listen to the client's needs and who master web technologies. But you know what? That's good, we are just one click away from you: