Dans la première partie, vous avez appris qu'un fichier HTML est un fichier texte composé de couples de balises qui délimitent des zones. Et chaque zone peut contenir d'autres zones. La zone html ne contient que deux zones : la zone head et la zone body.
Dans cette partie, nous allons apprendre à donner des instructions au navigateur pour qu'il modifie ce qu'on voit.
Une page vide, mais en couleur !
Lorsqu'on clique sur ce lien, on voit une page vide et blanche (dont le titre est "Page vide !"). La page est blanche parce que la couleur de la page n'a pas été précisée. Alors, le navigateur a "choisi" la couleur blanche.
Chaque fois qu'on ne précise pas, le navigateur "choisit" à notre place.
En réalité, le navigateur ne choisit pas. Le navigateur est un programme fait par un ... programmeur qui, soucieux d'imiter ce qui est fait dans l'imprimerie, qui a décidé que la couleur par défaut d'une page est la couleur blanche.
Par défaut signifie que la valeur retenue (ici, la couleur) est celle décidée par le programmeur, si le programme ne reçoit pas de contre-ordre.
Cependant, en créant un fichier HTML, c'est vous qui donnez les instructions (balises). C'est donc vous qui aurez le dernier mot.
Pour modifier l'apparence par défaut, il va falloir préciser au navigateur d'autres valeurs (ici, d'autres couleurs).
Comme il est possible de modifier plusieurs valeurs par défaut, on va placer toutes les nouvelles valeurs dans un fichier spécial qui a pour extension ".css".
Comme nom, j'ai choisi "apparence". Le nom complet du fichier est donc "apparence.css". Ce fichier spécial est situé dans le même dossier que les fichiers HTML de ce cours.
Comme un fichier HTML est un fichier qui donne toutes les instructions au navigateur pour construire la page, mais que les instructions concernant l'apparence des zones sont situées dans un autre fichier ("apparence.css"), il va falloir donner, dans le fichier HTML, une instruction pour que le navigateur aille voir ce fichier.
Et, comme toute instruction donnée au navigateur se fait via une balise, il va falloir placer une nouvelle balise dans le fichier HTML. Et, comme cette balise concerne le navigateur, il faudra la placer dans la zone head.
Et quelle est cette balise "magique" ?
<link rel="stylesheet" href="apparence.css" />
Je n'explique pas cette balise !
Tout ce qu'il faut retenir est que cette balise :
- a pour nom link (ce qui signifie "lien" en anglais)
- elle sert à lier le fichier HTML et le fichier CSS
- est située dans la zone head
- contient l'emplacement d'un fichier CSS
Et qu'un fichier CSS contient des instructions concernant l'apparence de la page web.
Le contenu de ce fichier fera l'objet d'un autre mini-cours.
Un fichier HTML est souvent lié à un fichier CSS.
Ajoutons cette nouvelle balise au code. Et cliquons ici pour voir la différence.
La page est toujours vide, mais cette fois-ci elle est jaune !
Et, le titre de la page est "Page vide en couleur !"
Regardez le code-source de cette page, vous constaterez que seule la balise "magique" a été ajoutée (dans la zone head)
Rappel : Pour voir le code-source d'une page, il faut faire un clic droit sur la page et choisir "Afficher code".
En regardant attentivement le code-source, vous constaterez aussi que le titre de la page a changé.
On constate qu'un fichier HTML est plus riche qu'un simple fichier TXT car on peut y ajouter de la couleur ! (si on le lie à un fichier CSS).
L'étude du langage CSS n'entre pas dans le cadre de ce cours. Pour le moment, retenez simplement qu'on peut placer une balise "magique" (et un peu spéciale, car elle n'a pas de balise de fin </link>) et qu'elle fait appel à un fichier "magique" qui contient les instructions pour changer les couleurs.
Afficher 3 paragraphes
C'est bien joli ! Mais une page vide, blanche ou jaune, cela ne sert à rien. Pour voir du texte, il faut donc écrire du texte (dans la zone qui affiche = la zone body).
Or, un texte contient un ensemble de paragraphes. Il existe donc des zones paragraphes. Le nom de la balise qui délimite un paragraphe est p (comme paragraphe).
La balise <p> sert à dire : ici commence un paragraphe. Elle n'est pas obligatoire, mais est toujours utilisée ! Puisque dans une page web, on écrit du texte ...
La balise qui marque la fin du paragraphe est </p>.
Si vous avez oublié comment on construit une balise de fin, cliquez sur Construire une balise de fin.
Rappel : Un paragraphe est un ensemble de phrases.
Une phrase se termine par un point.
Lire le code
Exemple de code
<body> <p></p> <p></p> <p></p> </body>
Dans le code ci-dessus, on constate que la zone body contient trois zones de type p (vides).
Le navigateur lit le code caractère par caractère.
Un caractère est soit une lettre, un chiffre, un signe, un espace, ...
- Il sait qu'une balise est entourée des caractères "<" et ">"
- Dès qu'il lit le caractère "<", il se dit "attention", ici commence probablement une balise.
- Il lit ensuite le caractère "p".
- Il lit ensuite le caractère ">" qui est le caractère qui finit la balise.
- Il sait maintenant que la balise a pour nom p.
- Il sait alors qu'il s'agit de la balise de début d'une zone "paragraphe".
- Il sait qu'à une balise de début doit correspondre une balise de fin.
- Puisque la balise de début est "<p>", il sait que la balise de fin sera "</p>"
- Il recherche cette balise de fin.
- Il lit le caractère qui suit la balise trouvée (<p>)
- Dès qu'il lit le caractère "<", il se dit "attention", ici commence probablement une balise.
- Il lit ensuite "/p"
- Il lit ensuite le caractère ">" qui est le caractère qui finit la balise
- Il constate que la balise trouvée est "</p>"
- Il sait que cette balise est une balise de fin d'une zone de paragraphe.
- Il est maintenant certain qu'entre ces deux balises, se trouve la zone de "paragraphe".
- Il sait qu'il doit afficher à l'écran le texte qui se trouve entre ces deux balises.
- Il n'y a pas de texte entre ces deux balises. Il n'affiche donc rien.
- Il continue son analyse et trouve deux autres paragraphes vides.
Évidemment, un programme analyse le code en une fraction de seconde ... Et, sans se tromper !
Regardez une page remplie de trois paragraphes en cliquant sur page remplie de trois paragraphes.
On voit toujours rien ! C'est normal, car il n'existe pas de texte dans les trois zones p.
Regardez le code-source de la page, la zone body contient bien trois paragraphes.
Comme vous êtes malin, vous avez compris qu'il suffit de taper du texte entre les balises <p> </p> pour que ce texte s'affiche à l'écran.
Essayons tout de suite !
Regardez une page remplie de trois paragraphes non vides en cliquant sur page remplie de trois paragraphes non vides.
Maintenant, regardez le code-source de cette page. Ce qui entre les balises <p>
</p> est bien ce qui est affiché.
Enfin ! La page n'est plus vide. On peut lire du texte, mais surtout on voit bien les zones.
Regardez une page remplie de trois paragraphes non vides sans la balise "magique" (qui modifie l'apparence par défaut d'une page).
Et, regardez bien le code-source de cette page. Seule la balise "magique" n'est plus là.
On voit bien les textes, mais on ne voit plus les zones !
On ne peut deviner l'existence de trois zones que grâce au texte.
La couleur de fond, par défaut, de la zone body est le blanc, comme pour la zone de "paragraphe" ...
Chaque type de zone affichable peut avoir sa couleur de fond. Une zone affichable peut aussi avoir sa couleur de texte, mais conservons la couleur de texte par défaut : le noir.
D'accord, mais je ne vois toujours pas de lien !
J'y arrive, ... Mais il fallait d'abord comprendre comment afficher des mots avant
de pouvoir cliquer dessus.
Balise qui lie le fichier HTML au fichier CSS
Vous connaissez 7 balises : html, head, meta, title, body, link, p
Les 23 balises différentes, utilisées sur cette page, sont : ['html', 'head', 'meta', 'link', 'title', 'body', 'div', 'header', 'p', 'a', 'article', 'strong', 'em', 'h1', 'mark', 'pre', 'ul', 'li', 'br', 'h2', 'aside', 'footer', 'script']