YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

French subtitles

← HTML Basics (Video Version)

Get Embed Code
11 Languages

Showing Revision 2 created 11/13/2014 by Christophe Noblanc.

  1. Bienvenue sur ma page Web !

  2. Je sais... Elle n'est pas super intéressante !
  3. Elle est complètement vide, mais toutes
    les pages Web commencent comme ça !
  4. Je vais vous montrer bientôt
    comment la remplir.
  5. Pour commencez, passons une minute
  6. à regarder le squelette d'une
    page Web vide.
  7. Chaque page Web débute avec
  8. cette ligne bizarre appelée
    le DOCTYPE tout en haut.
  9. C'est juste une indication
    pour que le navigateur
  10. sache que cette page Web est
    écrite en HTML moderne, récent,
  11. et pas en HTML simple comme
    on en faisait il y a longtemps.
  12. Ensuite, la première balise de la page.
  13. HTML est un langage de balises
    ("markup" en anglais).
  14. Une balise, c'est un de ces trucs
  15. qui commence avec ce crochet ouvrant
  16. et se termine par un autre crochet fermant.
  17. Si vous aimez les maths,
    ces signes sont :
  18. "strictement inférieur à"
    et "strictement supérieur à".
  19. La première balise de toute les pages
    est toujours
  20. la balise HTML, juste après le DOCTYPE.
  21. Celle-là est la balise HTML de début,
  22. et tout en bas, on trouve
    la balise HTML de fin,
  23. qui lui ressemble... à part,
    ce caractère "back-slash"
  24. ... qui est, du coup, très important.
  25. Cette balise HTML doit contenir
    toutes les autres balises...
  26. de votre page Web.
  27. C'est bien pour ça, que la balise HTML
    de fin est tout à la fin.
  28. Beaucoup de balises ont
    cette construction par paire,
  29. mais pas toutes.
  30. OK. Sous la balise HTML, il y a
    toujours une balise HEAD.
  31. Cette balise contient des informations
    qui aide le navigateur à afficher la page,
  32. mais ne contient rien qui sera affiché.
  33. Dans cette balise META, on donne plus
    d'infos au navigateur
  34. sur la façon d'afficher la page.
  35. Par exemple, si vous utilisez des
    caractères classiques
  36. comme ceux de la langue anglaise
    ou française,
  37. et pas de caractères de
    l'alphabet arabe ou chinois,
  38. vous devez utiliser le jeu
    de caractères utf-8.
  39. Ensuite, il y a cette balise TITLE
    ("titre" en anglais),
  40. que le navigateur utilise pour
    connaître le titre de la page.
  41. C'est ce qui est affiché comme
    titre de l'onglet,
  42. dans les favoris
    ou dans les résultats de recherche.
  43. Ici, sur la Khan Academy, le titre
    s'affiche au dessus de la page Web.
  44. Essayons de changer ce titre.
  45. Je vais créer une page sur
    les lapins. Donc j’écris...
  46. "Tout savoir sur les lapins".
  47. Et vous voyez que le nom de la page,
    au dessus, a changé aussi.
  48. Bon. OK. On a terminé avec ça.
  49. Donc on "ferme" la balise HEAD,
    et on va regarder la balise
  50. qui contiendra tout le reste :
    la balise BODY.
  51. C'est simple : on a juste la balise
    d'ouverture et celle de fin.
  52. Que va-t-on ajouter maintenant ?
  53. Je fais une page Web sur les lapins,
  54. donc je dois indiquer ça
    dans un gros titre tout en haut.
  55. Pour ajouter un titre,
    on utilise la balise H1.
  56. Ensuite, j'écris :
    ... Tout sur les lapins.
  57. En fait, on a 6 balises différentes
    pour les titres.
  58. H1, H2, H3, H4, H5 et... H6 !
  59. La balise H1 est à utiliser
    pour les titres les plus importants.
  60. La balise H6... pour les titres
    les moins importants
  61. On va ajouter d'autres titres
    pour avoir plusieurs chapitres.
  62. J'utilise la balise H2,
  63. car les chapitres sont un peu moins importants.
  64. J'écris : infos principales...
    ... chansons.
  65. Maintenant ajoutons du contenu.
  66. Pour cette page, je cible des lecteurs...
  67. qui sont des extra-terrestres qui
    n'ont jamais vu de lapins.
  68. Donc je commence par une
    bonne description des lapins.
  69. En fait, j'ai besoin d'un premier
    paragraphe avec du texte.
  70. Comment faire un paragraphe
    en HTML ?
  71. Avec la balise P... bien sûr !
  72. On ajoute une balise P,
    et je vais copier du texte...
  73. que je n'ai plus qu'à coller...
    pour ne pas avoir à tout écrire.
  74. Impeccable !
  75. Ensuite, les extra-terrestres
    auront besoin des paroles d'une chanson.
  76. donc je vais leur proposer
    une de mes chansons préférées.
  77. J'utilise la balise P pour ça...
    et je colle les paroles.
  78. J'adore celle là !
  79. Mais... Oh, oh !
    Tout est affiché sur la même ligne.
  80. Comment peuvent-ils savoir
    la chanter correctement ?
  81. Pourquoi le navigateur
    n'affiche pas les sauts de lignes ?
  82. En fait, les navigateurs ne tiennent
    pas compte des sauts de ligne,
  83. ni des espaces dans votre HTML.
  84. Si on veut qu'il passe à la ligne,
  85. on doit le lui dire en utilisant
    une autre balise...
  86. la balise BR : pour le saut de ligne.
  87. OK. on va l'utiliser
    pour chaque saut de ligne.
  88. Ça ressemble à une chanson, maintenant !
  89. Avez-vous remarqué un truc spécial
    pour la balise BR ?
  90. Il n'y a pas de balise de fin.
  91. Et en fait, en y réfléchissant,
  92. un saut de ligne ne contient aucun contenu,
  93. donc il n'y a rien à "encadrer".
  94. Juste la balise ouvrante BR est suffisante.
  95. Et voilà notre première page.
  96. Les extra-terrestres vont pouvoir
    en savoir un peu sur les lapins...
  97. et vous avez appris les bases du HTML.
  98. Quand j'aurais terminé,
  99. jouez avec ce code HTML et
    essayez de changer des trucs.
  100. Quand vous êtes prêts, continuez
    avec votre premier défi !