basic web understanding

Introduction

The purpose of this post is to provide you with a basic understanding of what makes it possible to see a website by typing its address.
It’s a simplification of what happens in reality, but the main ideas are here 🙂

Terminology

Internet

It’s a way of making devices talking to each other.

an extensive article about internet

Many devices

Even if they are all computers we can differentiate two types of devices:

The client

a computer & a phone

clients: your everyday devices!

It’s your device (laptop or smartphone…).

an extensive article about the client

It has one or many browsers installed on it to easily access the internet.

The server

server: the ones always there to help you! (they never sleep 😶)

It’s a computer specialized in answering request.
It has some special software running on it to behave that way.
Usually you don’t own one.

an extensive article about the server

On a small note, Internet is about making computers talk to each other.
So you can transform your own computer in a server if you want by installing those specific software!

The Browser

a web browser

The browser: making your web easier since 1990

A browser: It’s the software you use to access an internet page.
Some common browsers are:

It will do a lot for you so that you can have a graphical representation of what you’re asking for.
Yep, it seems obvious but that’s the main thing about computers: how with bits you can have an interactive display ✨

How does it works

a web browser asking resources to a server

“Hey server! what do you have there?”

When you type an address in the browser, the browser will ask the server what is at that location for him to get.

Most of the time you want to get a web-page, but it can be anything: an image, sound, video, pdf documents…

getting a web-page

the server giving a HTML file

Here is the html you asked for!

A web-page is just a text file! we call it html file… You can read a lot more about HTML

HTML

So HTML is a text file but a very specific kind of text file.
It’s:

  • all the information you want to have but written in a specific way
  • all the information that the web-page need to be more friendly and helpful

CSS, Javascript and other resources

the server giving a CSS & a JS file

You also need CSS & JS

The latter part is the HTML file telling the browser to ask the server for more files.
Beside images/videos, there are also 2 domains where it needs more specific information:

  • for having a nice presentation: those are the CSS text files
  • for being interactive: those are the Javascript text files

The browser magic

the browser rendering a web-page

It's awesome! A beautiful web-page!

And now, using all those text files, your browser will do the magic and finally show you an interactive display of the information you wanted to see!

So…

the browser surrounded by heart

Love! Love! Love!

Love your browser and keep it up to date 😎

You know now that :

  • a website is mainly text files
  • They are given to you by the server
  • The main text file for a website is the HTML file

I will go into more details for all those files (HTML, CSS & Javascript) with comings posts.

[UPDATE]

Thanks to xpac27 for the corrections!