Session 01
Internet, c'est tout simplement un réseau informatique géant (à l'échelle de la planète, en fait) auquel tout le monde peut accéder à l'aide de son ordinateur (ou de sa tablette, de son smartphone, etc...).
À l'origine, c'était un réseau militaire américain appelé ARPANET qui servait à transmettre des informations d'un ordinateur A vers un ordinateur B même si le chemin par lequel elles passaient était attaqué! En effet, en envoyant l'information via des dizaines d'ordinateurs différents, même si un ou plusieurs ordinateurs de la chaîne sont attaqués (ou défectueux), elle continue de se transmettre via les autres points du réseau.
Vers les années 1970, plusieurs autres réseaux viennent s'ajouter au réseau militaire pour en former un plus gros. Et ainsi de suite, jusqu'à ce que presque tous les réseaux d'ordinateurs de la planète soient connectés entre eux! C'est pour cette raison que ARPANET a évolué en INTERNET (pour "inter-networks", donc "inter-réseaux" en anglais) vers les années 1990.
Un site web, c'est un ensemble d'une ou de plusieurs pages HTML, mises en forme ou non à l'aide de CSS, présentant des informations et/ou des ressources accessibles à une adresse web bien précise. Les sites web sont hébergés sur des serveurs et sont consultables via des navigateurs web.
C'est pas simple, tout ça! Reprenons en détails...
HTML signifie HyperText Markup Language en anglais. C'est un langage qui sert à structurer le contenu des pages web pour que les navigateurs puissent les interprêter et les présenter aux lecteurs. Par exemple, c'est à l'aide du HTML que nous allons indiquer si un morceau de texte est en fait un titre <h1>, un paragraphe <p>, une liste <ul>, un tableau <table> (une sorte de grille), un lien <a>, etc...
Vous l'avez compris, le langage HTML est composé d'éléments qui ont chacun une signification (comme dans l'exemple ci-dessus). Chaque élément contient une balise d'ouverture <p> et une balise de fermeture </p> entre lesquelles nous allons écrire notre contenu.
Exemple: <p> Ceci est un paragraphe! </p>
CSS signifie Cascading Style Sheets en anglais. C'est un langage qui sert à mettre en forme le contenu qui aura été structuré avec HTML. Pour mieux comprendre l'importance qu'occupe CSS, vous pouvez vous rendre sur votre site préféré, peu importe lequel, et désactiver le CSS*. Vous verrez alors tout ce qui change en terme de présentation... Beurk!
Par exemple, voici à quoi ressemble le site de CoderDojo Liège avec le CSS (comme vous le connaissez):
Et le voilà sans le CSS:
Ça n'a plus rien à voir, on est d'accord ;-)
Un serveur n'est rien d'autre qu'un ordinateur comme un autre, connecté à Internet, et dont le rôle est de fournir des données à celui qui lui en demande. Afin de remplir sa tâche de serveur, cet ordinateur exécute des programmes avec chacun une tache très précise comme par exemple envoyer des pages web à votre navigateur ou encore faire tourner des bases de données.
Un navigateur est un logiciel que vous pouvez installer sur votre ordinateur et qui sert à consulter des sites web sur Internet. C'est le navigateur qui va traduire le HTML et le CSS pour vous afficher les pages bien mises en forme. Souvent, les ordinateurs que vous achetez ont déjà un navigateur installé au départ.
Par exemple, vous connaissez sûrement Mozilla Firefox, Google Chrome, Internet Explorer ou encore Safari!
Dans le cadre des sessions CoderDojo Liège, nous travaillons sur des Chromebooks. Ces ordinateurs ne permettent pas de télécharger un éditeur ni d'enregistrer des fichiers sur le disque dur. C'est pourquoi nous travaillons avec:
- une extension Google Chrome comme éditeur HTML/CSS ;
- le navigateur Google Chrome pour afficher le résultat ;
- Google Drive pour enregistrer les fichiers.
À la maison, vous pouvez:
- télécharger Sublime Text pour écrire votre code ;
- utiliser votre navigateur préféré pour visualiser votre site ;
- enregistrer vos fichiers sur le disque dur de votre ordinateur.
Vous pouvez maintenant passer à l'action!
Premièrement, créez un nouveau dossier, à votre nom par exemple, qui servira pour ranger tous vos fichiers HTML, CSS et autres de votre projet.
Créez maintenant un nouveau fichier à l'aide de l'éditeur de code, et nommez-le index.html. Par convention, on nomme la page principale du site index pour indiquer "Hey! C'est par ici qu'on entre dans mon site!".
Pour que votre fichier index.html fonctionne correctement, il faut lui indiquer quelques petites choses obligatoires avant de commencer.
La toute première ligne que vous devez écrire au début du fichier est <!DOCTYPE html>. Elle sert à indiquer au navigateur qui lira le fichier que c'est du HTML.
Ensuite, on insère la balise principale de notre fichier, dans laquelle tout le reste du site sera codé. C'est la balise <html> </html>.
Pour récapituler, votre fichier devrait ressembler à ceci:
<!DOCTYPE html>
<html>
</html>
À l'intérieur de la balise <html> </html>, la première chose qui doit absolument apparaître est la balise <head> </head>. Cette balise contient des indications importantes pour le navigateur, comme par exemple:
- le type d'encodage de votre fichier ;
- le titre du site (celui qui apparaît dans l'onglet du navigateur) ;
- les liens vers les futurs fichiers CSS!
Voici à quoi ressemble votre fichier après cette étape:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Mon site perso</title>
<link rel="stylesheet" href="style.css" />
</head>
</html>
Beaucoup d'autres informations peuvent être indiquées dans cette partie du fichier. Mais elles sont facultatives et votre site fonctionnera très bien comme ça pour l'instant.
Enfin, on y est! C'est dans la balise <body> </body> que tout notre contenu visible aux visiteurs sera encodé et structuré! Et voilà votre fichier:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Mon site perso</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
Ici apparaîtra tout le contenu visible de mon site web!!!
</body>
</html>
Pour écrire un titre, on utilise la balise <h> avec le numéro du niveau d'importance du titre. Par exemple, le titre principal de mon site sera entouré de la balise <h1> </h1>, pour titre de niveau 1. Si je veux rajouter un sous-titre (ou un titre de niveau 2), j'utilise <h2> </h2>. Et ainsi de suite, jusqu'à <h6> </h6> si besoin ;-)
Votre fichier peut donc ressembler à:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Mon site perso</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Mon site perso</h1>
<h2>Ma vie, mes passions et des infos sur moi</h2>
</body>
</html>
Cette balise est sans doute une des balises les plus utilisées. Elle permet d'écrire un paragraphe à l'aide de <p> </p>. Voici donc votre fichier:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Mon site perso</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Mon site perso</h1>
<h2>Ma vie, mes passions et des infos sur moi</h2>
<p>Bienvenue sur mon site perso, je vous souhaite une très bonne lecture!</p>
</body>
</html>
Regardons le résultat sur un navigateur pour mieux comprendre le rôle de toutes ces balises...
