Bienvenue sur ma page Web !
Je sais... Elle n'est pas super intéressante !
Elle est complètement vide, mais toutes les pages Web commencent comme ça !
Je vais vous montrer bientôt comment la remplir.
Pour commencez, passons une minute
à regarder le squelette d'une page Web vide.
Chaque page Web débute avec
cette ligne bizarre appelée le DOCTYPE tout en haut.
C'est juste une indication pour que le navigateur
sache que cette page Web est écrite en HTML moderne, récent,
et pas en HTML simple comme on en faisait il y a longtemps.
Ensuite, la première balise de la page.
HTML est un langage de balises ("markup" en anglais).
Une balise, c'est un de ces trucs
qui commence avec ce crochet ouvrant
et se termine par un autre crochet fermant.
Si vous aimez les maths, ces signes sont :
"strictement inférieur à" et "strictement supérieur à".
La première balise de toute les pages est toujours
la balise HTML, juste après le DOCTYPE.
Celle-là est la balise HTML de début,
et tout en bas, on trouve la balise HTML de fin,
qui lui ressemble... à part, ce caractère "back-slash"
... qui est, du coup, très important.
Cette balise HTML doit contenir toutes les autres balises...
de votre page Web.
C'est bien pour ça, que la balise HTML de fin est tout à la fin.
Beaucoup de balises ont cette construction par paire,
mais pas toutes.
OK. Sous la balise HTML, il y a toujours une balise HEAD.
Cette balise contient des informations qui aide le navigateur à afficher la page,
mais ne contient rien qui sera affiché.
Dans cette balise META, on donne plus d'infos au navigateur
sur la façon d'afficher la page.
Par exemple, si vous utilisez des caractères classiques
comme ceux de la langue anglaise ou française,
et pas de caractères de l'alphabet arabe ou chinois,
vous devez utiliser le jeu de caractères utf-8.
Ensuite, il y a cette balise TITLE ("titre" en anglais),
que le navigateur utilise pour connaître le titre de la page.
C'est ce qui est affiché comme titre de l'onglet,
dans les favoris ou dans les résultats de recherche.
Ici, sur la Khan Academy, le titre s'affiche au dessus de la page Web.
Essayons de changer ce titre.
Je vais créer une page sur les lapins. Donc j’écris...
"Tout savoir sur les lapins".
Et vous voyez que le nom de la page, au dessus, a changé aussi.
Bon. OK. On a terminé avec ça.
Donc on "ferme" la balise HEAD, et on va regarder la balise
qui contiendra tout le reste : la balise BODY.
C'est simple : on a juste la balise d'ouverture et celle de fin.
Que va-t-on ajouter maintenant ?
Je fais une page Web sur les lapins,
donc je dois indiquer ça dans un gros titre tout en haut.
Pour ajouter un titre, on utilise la balise H1.
Ensuite, j'écris : ... Tout sur les lapins.
En fait, on a 6 balises différentes pour les titres.
H1, H2, H3, H4, H5 et... H6 !
La balise H1 est à utiliser pour les titres les plus importants.
La balise H6... pour les titres les moins importants
On va ajouter d'autres titres pour avoir plusieurs chapitres.
J'utilise la balise H2,
car les chapitres sont un peu moins importants.
J'écris : infos principales... ... chansons.
Maintenant ajoutons du contenu.
Pour cette page, je cible des lecteurs...
qui sont des extra-terrestres qui n'ont jamais vu de lapins.
Donc je commence par une bonne description des lapins.
En fait, j'ai besoin d'un premier paragraphe avec du texte.
Comment faire un paragraphe en HTML ?
Avec la balise P... bien sûr !
On ajoute une balise P, et je vais copier du texte...
que je n'ai plus qu'à coller... pour ne pas avoir à tout écrire.
Impeccable !
Ensuite, les extra-terrestres auront besoin des paroles d'une chanson.
donc je vais leur proposer une de mes chansons préférées.
J'utilise la balise P pour ça... et je colle les paroles.
J'adore celle là !
Mais... Oh, oh ! Tout est affiché sur la même ligne.
Comment peuvent-ils savoir la chanter correctement ?
Pourquoi le navigateur n'affiche pas les sauts de lignes ?
En fait, les navigateurs ne tiennent pas compte des sauts de ligne,
ni des espaces dans votre HTML.
Si on veut qu'il passe à la ligne,
on doit le lui dire en utilisant une autre balise...
la balise BR : pour le saut de ligne.
OK. on va l'utiliser pour chaque saut de ligne.
Ça ressemble à une chanson, maintenant !
Avez-vous remarqué un truc spécial pour la balise BR ?
Il n'y a pas de balise de fin.
Et en fait, en y réfléchissant,
un saut de ligne ne contient aucun contenu,
donc il n'y a rien à "encadrer".
Juste la balise ouvrante BR est suffisante.
Et voilà notre première page.
Les extra-terrestres vont pouvoir en savoir un peu sur les lapins...
et vous avez appris les bases du HTML.
Quand j'aurais terminé,
jouez avec ce code HTML et essayez de changer des trucs.
Quand vous êtes prêts, continuez avec votre premier défi !