Qu'est-ce que le web ?

Créé par Mathieu HANSART le 09/11/2020

Sommaire

Qu'est-ce que le web ?
Qu'est-ce qu'un site web ?
Les fichiers HTML
Les fichiers CSS
Les fichiers JS
Front-end VS Back-end

Qu'est-ce que le web ?

Le web, World Wide Web (WWW) ou la toile, est un outil permettant la consultation via un navigateur (Chrome, Firefox...) de site web.

Qu'est-ce qu'un site web ?

Un site web c'est un dossier ouvert sur le web par un nom domaine (netflix.fr) contenant divers fichiers comme le HTML, CSS, JavaScript...

Il est possible de créer un site web locale (fermé) avec un simple dossier window.

Les fichiers HTML
(Hyper Text Markup Language)

Les fichiers html sont des fichiers ayant pour extension .html Ils sont composés de balises encadré par des chevrons <>

Les fichiers html représentent la structure de la page web, ils définissent les titres, paragraphes, images...

Les navigateurs interprètent la structure html afin de construire le rendu de la page.

							
								
								<html lang="fr">
								<head>
								  <meta charset="UTF-8" />
								  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
								  <title>Netflix</title>
								  <link rel="stylesheet" href="style.css">
								</head>
								<body>
								  <h1>Bienvenue sur Netflix</h1>

								  <p>
								  Regardez Netflix sur votre Smart TV, PlayStation, Xbox, Chromecast, Apple
								  TV, lecteurs Blu-ray et bien plus.
								  </p>

								  <p>
								  Téléchargez vos séries préférées pour les regarder hors connexion.
								  Enregistrez vos programmes préférés et ayez toujours quelque chose à
								  regarder.
								  </p>

								  <p>
								  Où que vous soyez. Regardez des films et séries TV en accès illimité sur
								  votre TV, smartphone, tablette et ordinateur, tout compris.
								  </p>

								  <input type="text" name="email"><button>Accédez à Netflix.</button>
								  <script src="main.js"></script>
								</body>
								</html>

Les fichiers CSS
(Cascade Style Sheet)

Ces fichiers ont pour objectifs de mettre en forme une page web. Ils portent l'extension .css

À l'aide de définition comme color, font-size, background-color... il est possible de changer les couleurs, les tailles, l'alignement, etc, des différents éléments html.

							
								
								h1{
									text-align: center;
									font-size: 50px;
									color: red;
								}
								
								p{
									font-weight: 600;
									font-size: 20px;
								}
								
								input, button{
									padding: 5px 15px;
									font-size: 20px;
								}

Le JavaScript (JS)

Les fichiers JS apportent du dynamisme à nos pages web.

Avec ce langage il est possible d'interagir avec les boutons, ajouter/supprimer/modifier des éléments html, gérer en coulisse certaines opérations (login, filtres...)

							
								
								const theButton = document.querySelector('button');

								theButton.addEventListener('click', () => {
									theButton.innerText = 'Bienvenue sur Netflix';
								})

Front-end VS Back-end

Le travail sur le code d'un site web est souvent divisé en 2 parties.

Front-end

Le travail du développeur front-end est axé à tout ce qui touche à l'utilisateur final. Et doit au minimum maîtriser le html, le css et le js.

La partie vue précédemment.

Quelques technologies utilisées en front-end

HTML5, CSS3, JavaScript
jQuery, Chart.js
React, Vue.js, Angular
Liquid, Twig, Mustache
Sass, less, Webpack

Back-end

Le travail du développeur back-end est invisible à l'utilisateur final. C'est à lui que revient la tâche de gérer les données, les accés, la sécurité.

Mais aussi la création d'un système de login, de paiement, de panier, création de compte...

Quelques technologies utilisées en back-end

PHP, GO, Python, JavaScript
Express, Django, Symfony
MySQL, PostgreSQL, MongoDB
JWT, crypto
Apache, Nginx

Certains développeurs ont les 2 compétences et sont donc appelés développeur Fullstack.

Qu'est-ce que le web ?

Sommaire