-
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 !
