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 !