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 (ici on utilise chrome dev editor);
- 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 ;
- et bien d'autres choses...
Voici à quoi ressemble votre fichier après cette étape:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Mon site perso</title>
</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>
</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>
</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>
</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...
Ha oui, on voit clairement la structure, là! C'est un bon début...
Une autre possibilité de structure, ce sont les listes. Tout le monde sait ce qu'est une liste! Une liste de courses, une liste de jouets que l'on demande à Saint-Nicolas, une liste de fournitures scolaires à acheter pour l'école, une liste d'ingrédients pour réaliser une recette de cuisine... Toutes ces listes ont la même apparence: ce sont des énumérations d'une ou plusieurs choses (souvent, on met un petit tiret devant, pour bien montrer).
Pour créer une liste en HTML, c'est un petit peu spécial puisqu'on a besoin non pas d'une, mais de plusieurs balises qui fonctionnent ensemble! Il s'agit des balises <ul> <ul> qui indiquent qu'on se trouve dans une liste et des balises <li> </li> qui entourent chaque chose/objet de la liste.
Démonstration avec les ingrédients de la pâte à crêpes (attention, je n'ai pas ré-écrit tout le code mais juste la nouvelle partie):
<ul>
<li>300 g de farine</li>
<li>3 œufs</li>
<li>3 cuillères à soupe de sucre</li>
<li>2 cuillères à soupe d'huile</li>
<li>50 g de beurre</li>
<li>30 cl de lait</li>
</ul>
Voici le résultat visuel d'une telle liste si on l'ajoutait à la suite de notre code:
Il est évidemment possible d'ajouter des images dans votre page web. Et pour ce faire, on utilise la balise <img />. Comme vous le voyez, c'est une balise un petit peu spéciale elle aussi, car elle n'est pas en deux parties comme les autres (balise ouvrante + balise fermante). En effet, il n'y a pas besoin d'écrire du texte à proprement parler puisque nous voulons afficher une image! Une seule balise (qu'on dira autofermante) suffit.
Par contre, cette balise a besoin de plusieurs renseignements pour pouvoir fonctionner correctement. Ces renseignements sont indiqués dans ce qu'on appelle les attributs de la balise. Dans ce cas-ci, il s'agit de:
-
src: pour indiquer où se trouve l'image que l'on veut afficher, sous forme d'URL ; -
title: pour indiquer un titre à notre image (lorsque vous passez votre souris dessus, ce titre apparaît dans une petite infobulle) ; -
alt: pour afficher un petit texte à la place de l'image si celle-ci ne s'affiche pas correctement.
En résumé, voici à quoi pourrait ressembler une image en code HTML:
<img src="http://static.wamiz.fr/images/news/medium/nourrir-un-chaton-non-sevre.jpg" alt="Image d'un petit chat" title="Un petit chat"/>
Et l'aperçu dans le navigateur (avec le titre de l'image):
Il est aussi possible d'indiquer d'autres informations dans les attributs de la balise image, comme par exemple height et width pour préciser une hauteur et une largeur d'affichage.
Maintenant qu'on a bien avancé dans la partie HTML de notre site, il est temps d'y mettre un petit peu de style pour qu'il soit joli!
Le CSS s'écrit dans un nouveau fichier (que vous pouvez créer), qu'on nommera style.css et qu'on viendra placer à côté de notre fichier index.html.
Pour dire à notre navigateur que la page web qu'il est en train d'afficher doit appliquer notre nouvelle feuille de style (ou fichier CSS), il faut ajouter une ligne dans la partie <head> </head> de notre fichier index.html. La balise (autofermante elle aussi!) fait le lien avec notre nouveau fichier CSS. Elle a besoin de trois attributs:
-
type: nous sert à dire que c'est un fichier de type CSS que l'on va renseigner ici ; -
rel: nous sert à dire que la relation entre le fichier HTML et le fichier CSS est une feuille de style ; -
href: nous sert à indiquer où se trouve notre fichierstyle.csspour que le navigateur puisse le charger.
Voici, dans notre cas, la nouvelle ligne dans notre code HTML:
<head>
<meta charset="utf-8" />
<title>Mon site perso</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
Maintenant, nous pouvons commencer à écrire du CSS dans notre fichier style.css et on verra le résultat dans notre page web.
La manière dont on écrit en utilisant un langage est appelée la syntaxe. Si vous ne respectez pas la syntaxe d'un langage, cela ne fonctionnera tout simplement pas!
Une instruction en CSS s'écrit de la manière suivante:
sélecteur {
propriété: valeur;
propriété: valeur;
propriété: valeur;
}
Commençons par essayer de mettre notre titre de niveau 1 en rouge:
h1 {
color: red;
}
De cette manière, on indique à CSS que tout ce qui est contenu dans nos balises <h1> </h1> doit être affiché en rouge (red, en anglais).
On peut également mettre plusieurs propriétés dans une instruction (attention de bien terminer par un ; à chaque ligne):
h1 {
color: red;
font-size: 36px;
text-decoration: underline;
}
Regardez maintenant le résultat dans votre navigateur en rafraîchissant votre page web!
Super! Voici plusieurs propriétés CSS qui sont à votre disposition pour vous exercer sur vos autres balises:
-
color: change la couleur d'un texte- exemple de valeurs:
purple,red,blue,green,yellow,black,white,rose...
- exemple de valeurs:
-
font-size: change la taille d'un texte- exemple de valeurs:
8px,12px,20px,36px,48px...
- exemple de valeurs:
-
font-weight: change la graisseur d'un texte- exemple de valeurs:
normal,bold,bolder,lighter...
- exemple de valeurs:
-
font-family: change la police d'un texte- exemple de valeurs:
sans-serif,Tahoma,Arial,Helvetica...
- exemple de valeurs:
-
background-color: change la couleur de l'arrière-plan- exemple de valeurs:
purple,red,blue,green,yellow,black,white,rose...
- exemple de valeurs:
-
text-decoration: ajoute des décorations au texte- exemples de valeurs:
underline,overline,line-through...
- exemples de valeurs:
-
text-transform: transforme le texte- exemples de valeurs:
uppercase,lowercase,capitalize...
- exemples de valeurs:
