L'internet consiste du réseau mondial qui relie différents appareils.
Le web est un ensemble de technologies qui sont utilisés pour créer des documents et des applications qui sont accessibles à partir de navigateurs web, tel que Chrome et Firefox.
Le web fut créé par Tim Berners-Lee, un scientifique travaillant au CERN en Suisse, en 1990. Le but initial était de permettre la collaboration scientifique et le partage d'information.
Le web gagne en popularité à partir de 1993, à l'aide de l'introduction d'un navigateur web appelé Mosaic. Plusieurs sites pour utilisation publique commencent également à y apparaître.
En 1995, l'arrivée de Windows 95 et du navigateur Internet Explorer augmente de beaucoup la popularité du web pour les gens normaux. Jusqu'à environ 2004, on peut y voir une explosion de sites commerciaux, l'arrivée de moteurs de recherche tel que Google et des investissements de plusieurs milliards de dollars dans la création de sites web.
À partir de 2005, on voit venir l'apparition du "Web 2.0", qui consiste de sites web dont le contenu est généré par les utilisateurs. Dans cette catégorie se trouvent des sites comme MySpace, Facebook, Twitter, ainsi que des forums. Le web devient partie intégrale de la vie de tous ceux qui ont accès à Internet, et est utilisé de plus en plus dans la vie de tous les jours.
Aujourd'hui, le web est devenue une plateforme à part entière pour le développement d'application. Plus besoin de développer des applications pour Windows ou Mac, la majorité des compagnies priorisent une application web pour les ordinateurs de bureau.
Le web est composé de plusieurs technologies. Les langages principaux, soit le HTML, CSS et JavaScript, sont des langages dits "côté client" puisqu'ils sont interprétés par les navigateurs sur les ordinateurs "clients".
Le HTML, ou HyperText Markup Language, est un langage de balisage utilisé pour définir le contenu de pages web. Il est à la base de tout site web.
Le CSS, ou Cascading Style Sheets, est un langage qui permet d'appliquer des styles visuels et de la forme au contenu HTML. On défini le contenu d'une page à l'aide du HTML, et on défini l'apparence de ce contenu à l'aide de CSS.
Le JavaScript (aucun lien avec le langage Java) est un langage de programmation utilisé afin de créer des interactivités sur des pages web. La grande majorité des sites web aujourd'hui font grande utilisation du JavaScript afin de créer des expériences utilisateurs dynamiques et intéressantes.
Le HTTP est le protocol utilisé sur le web pour communiquer entre les clients et les serveurs. Un client (par exemple, mon navigateur Chrome) fait une requête HTTP à un serveur (par exemple, le serveur qui héberge le site web du CÉGEP). Le serveur retourne une réponse HTTP pour le client, contenant la page web. Le client peut faire des requêtes additionelles par la suite afin d'obtenir des images, des scripts ou autre.
Aujourd'hui, la grande majorité des sites utilisent le protocol HTTPS qui est encrypté et sécurisé de façon à ce que personne ne puisse intercepter la communication client-serveur.
Il existe également plusieurs technologieset langages du côté serveur afin de réaliser des sites web interactifs et dynamiques. ASP.NET, PHP et Node.js en sont quelques exemples. La majorité des langages de programmation de nos jours peuvent également être utilisé du côté serveur d'une application web.
Il est important de différencier le contenu de la présentation d'une page web, puisque chacun est géré par une technologie différente.
Le contenu d'une page web représente le texte, les liens, les images et autres médias, ainsi que la structure sémantique (où se trouve la navigation, le contenu principal, le pied de page, etc). On utilise le HTML pour définir le contenu d'une page.
La présentation tant qu'à elle représente l'agencement de la page, son formattage (couleurs, tailles, etc.), la position des éléments, etc. On utilise le CSS pour définir la présentation d'une page.
Le HTML est composé de balises. Chaque balise HTML représente un élément de la page. Voici ce à quoi ressemble une balise HTML pour le titre d'une page.
<title>Ceci est mon titre</title>
Une balise peut également se trouver seule, si elle n'a pas de contenu.
<hr>
Finalement, il est possible pour une balise d'avoir des attributs. Ces attributs permettent de définir des propriétés additionelles sur la balise.
<abbr title="HyperText Markup Language">HTML</abbr>
Chaque page HTML commence par le même squelette de base. Dans VS Code, ce gabarit peut être créé pour vous en tapant ! et en appuyant sur la touche entrée.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
La première ligne s'agit du doctype. Cela indique au navigateur d'afficher la page avec la version d'HTML la plus récente.
On y trouve ensuite une balise <html>, qui regroupe l'entièreté de la page.
La balise <head> n'est pas affichée aux utilisateurs de notre site web. Elle contient des propriétés additionelles de la page, tel que des meta données et le titre de la page.
La balise <body> sera l'endroit où nous indiquerons tout le contenu de notre page.
<p>Un premier paragraphe.</p>
<p>Un deuxième paragraphe.</p>
<hr>
<p>On peut indiquer des mots <strong>importants</strong> à l'aide de la balise strong.</p>
<p>On peut mettre certains mots en <em>emphase</em> à l'aide de la balise em.</p>
<p>On peut en <mark>surligner</mark> d'autres à l'aide de la balise mark.</p>
Il est important de toujours fermer ses balises dans le bon ordre.
<p>Ceci est un <strong>bon</strong> exemple.</p>
<p>Ceci est un <strong>mauvais exemple.</p></strong>
<h1>En tête de niveau 1</h1>
<h1>En tête de niveau 2</h1>
<h1>En tête de niveau 3</h1>
<h1>En tête de niveau 4</h1>
<h1>En tête de niveau 5</h1>
<h1>En tête de niveau 6</h1>
Afin de laisser des notes dans notre code HTML, il est possible d'utiliser des commentaires. Ceux-ci ne seront pas affichés aux utilisateurs.
<p>Notre école compte plus de 3000 étudiants!</p> <!-- dernière mise à jour septembre 2021 -->
<abbr title="HyperText Markup Language">HTML</abbr>
Il peut être utile de faire valider notre code HTML afin d'en déceler des erreurs. Pour se faire, il suffit de le copier coller dans cet outil du W3C.