Apprendre le HTML (1/4) - Conteneurs, images, liens hypertextes et listes

Bonjour et bienvenue dans cette nouvelle leçon où nous allons apprendre à coder en HTML. Comme je l'ai dit autrefois, les balises HTML sont innombrables, alors il est presque impossible de tout couvrir dans des leçons comme ça. Nous allons donc nous contenter des balises les plus utilisées et dont vous aurez besoin dans vos propres pages web. Alors commençons d'abord par créer une page HTML. Ici, je vais mettre mon travail dans un dossier de mon choix. La page s'appelle index.html et à côté il y aura une image que je vais intégrer par la suite au sein du contenu. Le code de la page index.html va ressembler à ceci dans un premier temps. Il contient tout d'abord le DOCTYPE, c'est-à-dire la déclaration du type du document. Il contient la balise HTML qui est la balise principale qui contiendra presque toutes les balises qui vont venir après. Il ne faut pas oublier l'attribut lang pour spécifier que dans quelle langue notre page est écrite. La balise head qui est l'en-tête du document qui contient les informations supplémentaires à l'exécution correcte de ma page. Et la balise body qui est la balise la plus importante puisqu'elle va contenir le contenu qui sera réellement visible dans l'écran de l'utilisateur. Alors pour la balise head, nous avons d'abord intégré 2 balises de base, à savoir la balise title qui sert de titre de document. Je vais appeler ici par exemple titre de mon document. Ensuite la balise meta, voilà, qui sert d'encodage. Alors la balise title, il va intégrer un titre sur la barre des titres du navigateur. Et la balise meta, il va spécifier l'encodage. Meta charset va spécifier ce qu'on appelle le jeu de caractères. Dans ce cas, on va utiliser UTF-8 qui est un jeu de caractères Unicode ou bien universel. Qui peut supporter presque toutes les écritures, y compris les écritures à accents. Maintenant, on va exécuter pour voir le résultat. Il faut d'abord enregistrer. Alors, quand j'exécute la page, première chose que je peux voir, c'est le titre du document qui a été changé. Voilà, titre de mon document, c'est le contenu de la balise title. À part ça, il n'y a rien dans le corps de la page. C'est normal parce que je n'ai encore rien mis dans la balise body. Alors maintenant, qu'est-ce qu'on va mettre dans la balise body? Bon, tout d'abord, on peut mettre un texte normal comme par exemple bonjour. Quand j'exécute, je vais voir que le texte est écrit d'une manière basique, c'est-à-dire il n'y a aucun formatage spécial. On va voir maintenant une série de balises simples qui peuvent modifier ce contenu. Par exemple, la balise b qu'on a déjà vu dans une première vidéo, qui peut mettre le contenu en gras. Sinon, la balise i qui peut appliquer l'italique à ce contenu qui devient un texte oblique, ou bien u C'est-à-dire souligné. Dans ce cas, le texte sera souligné. Ou bien S pour avoir un texte barré. Alors ça, c'est pour les effets basiques. Il faut savoir qu'il existe d'autres balises qui permettent de spécifier ce qu'on appelle les titres. C'est pas les titres comme la balise title, mais ça c'est un titre qui va s'afficher au sein du document même. Ces balises-là, elles commencent par H et ils peuvent être Ils peuvent aller de H1 jusqu'à H6. Voilà, H1 que je vais fermer. Par exemple, je vais mettre ici titre de premier niveau. Quand j'exécute la page, je vais voir que le titre qui apparaît, c'est un grand texte. Bon, normalement ça mesure 24 points et ça applique la graisse, ça veut dire le texte il est gras. Et en plus, ça peut aussi appliquer ce qu'on appelle des marges supérieures et inférieures. Donc ça, c'est pour le titre le plus grand, c'est H1. Maintenant, quand je mets H2, on va voir que le texte sera plus petit. Alors là, je vais mettre deuxième niveau. Voilà, ce sont les mêmes effets sauf que la taille du texte a changé. Et le dernier, c'est H6. H6, c'est le plus petit. Je vais mettre ici sixième niveau. Et voilà, donc là, le texte, c'est toujours gras Il y a toujours des marges, mais c'est un texte qui est plus petit. Voilà, alors là c'est pour les grands titres. Généralement on utilise soit H1 ou bien H2, c'est pour titrer un paragraphe ou bien une page entière. Là donc c'est pour les titres. Maintenant on va voir des conteneurs. Les conteneurs, ce sont des balises qui peuvent contenir des paragraphes ou bien des blocs de texte et des images et plein d'autres contenus. On va commencer par le conteneur P. P, ça veut dire un paragraphe. Je mettrai ici par exemple un nouveau paragraphe. Normalement, un paragraphe devrait être plus long que ça, mais bon, on va se contenter de ceci en guise d'exemple. Alors, on a le texte suivant. Maintenant, je mettrai une autre balise P. Remarquez bien que j'ai pas mis la balise BR qui spécifie le retour à la ligne. Donc, un autre paragraphe. Vous allez constater que les 2 paragraphes, ils ont été mis dans 2 lignes différentes. C'est normal parce que la balise P, on appelle une balise bloc. En fait, en HTML, il y a généralement 2 types de balises: des balises inline et des balises bloc. Les balises inline, ils vont pas engendrer des retours à la ligne, ils sont déclarés sur la même ligne que la balise précédente. Par contre, les balises bloc, ce sont des balises qui vont englober un bloc de contenu, c'est comme un paragraphe par exemple. Alors dans ce cas, un retour à la ligne avant et après sera automatiquement engendré. Il y a plein de balises bloc et plein de balises inline, mais on va découvrir ça au fur et à mesure. Alors notez que P c'est une balise bloc et ça engendre un retour à la ligne automatique. Voilà, il y a aussi la balise div, ça veut dire je peux enlever la balise P, la deuxième, je mettrai ici à la place div. Et quand j'exécute le code, bon, je vais voir maintenant que le contenu c'est presque le même, il y a rien qui a changé parce que la balise div c'est aussi un conteneur. Bon, la seule différence en quelque sorte c'est la sémantique de la balise. Ça veut dire p c'est notamment un paragraphe, par contre la balise div c'est un conteneur qui peut contenir des images, des paragraphes et plein d'autres objets. D'ailleurs, en parlant de la sémantique, on va voir ça d'une manière plus approfondie avec les balises du HTML5. Ce sont des nouvelles balises qui ont presque le même rendu que la balise div. Ça veut dire ce sont des simples balises bloc, mais qui ont une signification que les navigateurs et aussi des outils de recherche comme Google ou bien les autres outils peuvent comprendre. D'accord? Maintenant on va passer à la balise span. Donc ici nous avons div, maintenant on va mettre span. Voilà, le texte sera toujours le même, même si on ne code pas trop. Quand j'actualise, je vais voir que le contenu n'a pas vraiment changé, c'est-à-dire l'affichage final sur le navigateur est demeuré le même. Il y a juste un truc, c'est que la balise span est une balise inline. Ça veut dire qu'en théorie, il ne devrait pas retourner à la ligne. Et pourtant, on a constaté que le deuxième texte ici, il a bien fait un retour à la ligne. Tout simplement parce que la balise précédente est une balise bloc. Et comme j'ai dit, la balise bloc, il va engendrer un retour à la ligne avant et après. Imaginez maintenant qu'ici j'ai mis span. Les deux balises maintenant sont des span. Alors quand j'actualise, vous allez voir que les deux textes sont alignés sur la même ligne. C'est normal parce que ce sont des balises de type inline. Il existe aussi la balise font, la balise font comme ça, qui va formater un texte. Par exemple ici, texte à formater, c'est-à-dire on va lui donner un format. Dans un premier temps, le texte s'affiche de la même manière que le texte précédent, il n'y a aucun format spécial qui a été appliqué. Alors on peut mettre ici par exemple color orange. Quand on actualise, on va voir que le texte a vraiment changé de couleur. En réalité, la balise font, il faut toujours lui appliquer ce qu'on appelle les attributs. Les attributs que l'on peut appliquer, donc il y a color, il y a size, il y a aussi face pour changer la police ou bien l'écriture. Le seul souci, c'est que la balise font est devenue obsolète. Ça veut dire que W3C ne recommande pas trop cette balise. Pourquoi? Parce que tout ce qu'elle peut faire, c'est formater un texte. Ça veut dire donner un style texte, alors que ça c'est la tâche du CSS. Alors généralement, tout ce qu'on peut faire en CSS, vaut mieux ne pas le faire en HTML. Alors toutes les balises HTML qui appliquaient des effets visuels sur les balises ont été rendues obsolètes et sont remplacées par des styles CSS. Alors pour nous, on va pas accorder beaucoup d'attention à cette balise font. Maintenant, on va voir la balise img. Si vous voulez intégrer une image dans votre page web, alors vous utilisez généralement la balise img. Et pour la balise img, elle contient un attribut principal qui est src. Et dans src, on va mettre tout simplement la source de l'image. Alors regardez comment est-ce qu'on va établir la source. Tout d'abord, la page, elle est là. C'est mon code, je suis en train de l'écrire ici. L'image, elle est juste à côté. Alors maintenant, je vais tout simplement mettre un chemin relatif vers l'image, c'est-à-dire un chemin qui me mène d'ici à ici. Alors là, je mettrai logo.png, c'est-à-dire le nom de l'image. Quand j'exécute la page, je vais voir que le logo a été intégré. Imaginez maintenant que j'ai un nouveau dossier, par exemple un nouveau dossier que j'appellerai images, et dedans je mettrai mon image. Alors désormais l'image ne figure plus sur le même dossier que index. Ça veut dire depuis index il faut d'abord entrer dans le dossier images puis chercher logo. Alors là le chemin va changer, ça deviendra images/logo.png. Et quand j'actualise, l'affichage reste le même. En réalité j'ai utilisé ce qu'on appelle un chemin relatif. Ça veut dire un chemin qui commence à partir de l'emplacement où je suis en train de coder, c'est-à-dire à partir de index.html, et en arrivant jusqu'à la ressource que je souhaite afficher. Il y a aussi des chemins absolus. Les chemins absolus sur le web, ça commence par le HTTP ou bien HTTPS, bon, voire FTP. L'essentiel, c'est qu'il faut mettre ici l'URL. Par exemple, http://image/logo.png. Mais en général, on utilise des chemins relatifs. Alors ici, image/ logo.png. Je réexécute et le résultat reste le même, d'accord. Bon, pour la balise img, on peut ajouter d'autres attributs. Alors, un autre attribut qui est aussi important, c'est alt. D'ailleurs, alt, elle est obligatoire aux yeux de W3C, c'est-à-dire si vous voulez valider votre document, il faut impérativement mettre les alt au sein de toutes les images. Alt, ça veut dire tout simplement un texte alternatif. Autrement dit, si l'image ne s'affiche pas correctement il y a un texte qui va la remplacer. Par exemple, ici on va mettre texte de remplacement. Quand j'exécute, le texte de remplacement ne s'affiche pas. C'est normal parce que l'image est affichée correctement. Par contre, imaginez que je me suis trompé du nom de l'image. Je vais mettre logo avec un S. C'est une image qui n'existe pas. Il ne sera pas chargé par le navigateur. Par contre, il y a juste le texte de remplacement qui s'affiche. Et ça, c'est le rôle de la balise, de l'attribut alt. Notez aussi que l'attribut alt, il a un autre rôle dans le référencement. Si vous souhaitez référencer votre site sur les moteurs de recherche, et notamment sur Google, alors celui-ci accorde un peu d'importance au contenu de l'attribut alt. C'est pourquoi les référenceurs prennent le soin de mieux écrire, ou bien de mieux décrire cet attribut. Mais ça, on va le voir dans des leçons prochaines. Bon, d'autres attributs que l'on peut intégrer, par exemple l'attribut width et height, parce qu'ici la largeur et la hauteur de l'image qu'on est en train de voir sur navigateur, c'est la largeur et la hauteur réelle. C'est-à-dire l'image, elle est réellement, elle mesure réellement ces dimensions-là. Mais si vous voulez redimensionner, il suffit de mettre par exemple ici 200. Voilà, pour le width, ça veut dire la largeur sera 200 pixels. Il faut pas spécifier l'unité parce que c'est implicite. Alors là, quand j'actualise, je vais voir que l'image est réduite. Et vous avez peut-être remarqué qu'il n'y a pas que la largeur qui a été réduite, mais aussi la hauteur. En fait, c'est automatique. Puisque vous spécifiez une seule dimension, le navigateur recalcule l'autre dimension pour conserver les proportions, pour que l'image ne soit pas déformée. Mais rien ne m'empêche d'ajouter aussi de height. Imaginez maintenant que j'ai mis dans le height 300. Bien sûr, là je vais disproportionner l'image. Et du coup, regardez ce qui va se passer maintenant quand j'actualise. Bon, l'image a été un petit peu étirée vers le bas, et là c'est carrément une image qui a été déformée. C'est pourquoi donc il faut mettre toujours des proportions qui conserve la qualité ou bien qui conserve le bon affichage de l'image. Sinon, mettez juste la largeur ou bien la hauteur et laissez le navigateur deviner l'autre dimension pour que l'image soit toujours affichée convenablement. On va voir maintenant une autre balise, c'est la balise du lien. Si vous voulez mettre un lien hypertexte, qu'on appelle aussi hyperlien, sur votre page, le fait de cliquer sur ce lien-là vous ramène vers une autre page sur votre site web ou bien sur un autre site web. Pour intégrer un lien hypertexte, on utilise la balise a. Là, on va mettre le texte qu'on appelle l'ancre, l'ancre du lien. Là, par exemple, c'est le texte qui sera cliquable. Voilà, ancre du lien. Quand j'actualise, en fait, il se passe vraiment rien. Ça ressemble pas à un lien, c'est normal parce qu'il manque des attributs pour que le lien soit actif. Et l'attribut le plus important, c'est le chemin vers la ressource. Ça veut dire, si vous cliquez, vous allez aller où? On spécifie ça par href. On va mettre par exemple, imaginez que le fait de cliquer sur ce lien va me ramener vers l'image de tout à l'heure. Il suffit de mettre ici logo.png. J'actualise. Bon, maintenant ça ressemble à un lien. Voilà, c'est bien l'aspect caractéristique d'un lien par défaut, il est bleu souligné. Quand je clique, je vais voir que l'image a été chargée. Ça veut dire que je suis allé sur notre page web même si ce n'est pas vraiment une page HTML, mais c'est une image. D'ailleurs, c'est aussi un contenu hypertexte que le navigateur peut afficher sans le moindre problème. Alors, imaginez maintenant que cette image, vous voulez pas l'ouvrir sur la page courante, mais sur une nouvelle page ou bien nouvel onglet. Il suffit d'ajouter ici target égal, et qu'on va leur remettre _blank. Alors, dans ce cas, j'actualise. Quand vous cliquez, vous allez voir que ma page, elle reste ouverte, mais le lien est ouvert sur un nouvel onglet ou bien une nouvelle fenêtre. Bon, généralement vous faites cette opération quand vous voulez aller sur un autre site, un site externe. Alors pas la peine de charger le site externe sur votre site même, donc vous laissez le vôtre ouvert et vous ouvrez la cible dans un autre onglet. Notez qu'un lien hypertexte n'est pas toujours un texte, ça veut dire l'ancre du lien peut aussi être un autre objet autre que du texte. D'ailleurs on peut mettre ici l'image du dada, donc la balise img src=images/ logo.png. Voilà, c'est-à-dire c'est la balise img que j'ai encerclée par la balise a. Du coup, ça devient un lien hypertexte. Quand j'actualise, je vais voir que, regardez, donc la forme du curseur de la souris change. C'est-à-dire quand je clique, ça devient un lien actif. Bien sûr, on peut mettre d'autres objets à part les textes et les images. Bon, maintenant on va essayer de voir un autre élément HTML qui est aussi important, c'est ce qu'on appelle les listes. Alors les listes, c'est quoi? Imaginez que vous avez une liste d'objets à afficher d'une manière ordonnée ou bien d'une manière régulière. Alors dans ce cas, on va faire appel à la balise ul ou bien la balise ol. Bon, ils font la même chose mais avec une petite différence près. On va commencer par la balise ul. La balise ul, ça veut dire c'est un bloc, c'est-à-dire c'est une liste entière. Bien sûr, cette liste contient des entrées. Ces entrées-là, on va les spécifier par la balise li dans ul. Maintenant, par exemple, si on va mettre entrée 1, on va mettre copier, coller. On va mettre maintenant entrée 2, entrée 3. Voilà, on va se contenter de ça. Quand j'actualise la page, je vais voir maintenant que ma liste a été ordonnée. Regardez, donc il y a une sorte de puces qui ont été ajoutées au début. Et ça, c'est bien aligné. C'est pour spécifier que c'est une liste particulière qui contient des listes d'objets, ou bien des listes d'étudiants, ou bien ce que vous souhaitez. Voilà. Maintenant, pour ul, je peux aussi spécifier le type. Le type, c'est quoi? Parce qu'ici, donc, l'appui, c'est ce qu'on appelle un disque, c'est un cercle plein. Je peux mettre d'ailleurs donc circle pour le type, pour avoir un cercle creux. C'est-à-dire, c'est juste pour changer un peu la forme. Ou bien square pour avoir des petits carreaux comme ça. Voilà, bon, la valeur par défaut c'est disk. Si vous mettez rien, c'est disk qui sera chargé automatiquement et vous aurez donc les cercles pleins de tout à l'heure. Voilà, maintenant au lieu de ul, on peut aussi mettre ol. Ol, ce sont des listes ordonnées. Donc je vais éliminer maintenant l'attribut type, je vais laisser les mêmes entrées, les balises li avec les mêmes entrées, mais je vais voir qu'est-ce qui va changer, c'est quoi. C'est qu'il y a des numéros qui vont se mettre au début de la ligne pour spécifier que c'est une liste ordonnée. Première entrée, deuxième entrée, troisième entrée, etc. Là aussi, on peut changer le type pour spécifier que je veux pas des chiffres, mais je veux par exemple des caractères alphabétiques majuscules pour spécifier les entrées. Alors dans ce cas, je vais mettre un A majuscule et ça devient maintenant A, B, C. Si vous mettez ça en minuscule, Alors vous aurez des entrées minuscules. On peut aussi mettre des chiffres romains, par exemple I majuscule ici pour dire un chiffre romain en majuscule, et ça donne 1, 2, 3, voilà. Ou bien en minuscule, et ainsi de suite. Il y a autre chose, c'est qu'on peut aussi spécifier la valeur, la première valeur, parce que ici par défaut la première valeur c'est 1. Imaginez que je veux commencer à la valeur 4, je mettrai ici donc start 4. C'est-à-dire que la première valeur par défaut sera maintenant 4 et non pas 1. Et voilà, donc j'ai 4, 5, 6, bon, à la manière des chiffres ronds. Une remarque importante, c'est qu'il faut pas s'attendre à un bon design avec du HTML. Bien sûr, il y a des balises auxquelles on peut associer des attributs afin de changer le rendu par défaut, mettre des couleurs, des arrière-plans, agrandir le texte ou bien le souligner, etc. Mais tout ce qui est design ou bien tout ce qui est visuel vaut mieux le faire avec le langage CSS. Le CSS, il couvre tous les aspects visuels d'une page web qui a été intégrée avec du HTML. Alors, il faut noter que HTML, c'est un langage d'intégration ou de présentation de documents, et le CSS, c'est un langage qui va venir afin de styler ce contenu. C'est pourquoi il faut pas s'attendre à un bon design en faisant que du HTML. On va se contenter de ça dans cette vidéo et on se retrouve à la vidéo prochaine avec les nouvelles balises. Merci pour votre attention.