Apprendre le HTML (2/4) - Balises sémantiques et tableaux

Bonjour à tous et bienvenue dans cette deuxième partie sur le HTML. Dans cette vidéo, nous allons traiter les balises sémantiques et les tableaux HTML. Les balises sémantiques ont été introduites avec HTML5. Ce sont des balises qui ont le même rendu que la balise div, c'est-à-dire que ce sont des balises de type bloc mais qui ont un sens que les navigateurs et les moteurs de recherche peuvent comprendre. Prenons l'exemple suivant. C'est une page web qui contient plein d'éléments. Ces éléments-là, ils ont été répartis sur plusieurs zones de la page. Normalement, on peut faire ce travail avec des divs. Autrement dit, on va diviser la page en plusieurs divs qu'on appelle des conteneurs, que l'on va styler ensuite avec CSS pour placer chaque conteneur à l'emplacement qui lui est approprié. Là par exemple, c'est la zone qui contient le menu principal plus un outil de recherche. Ici c'est la zone qui contient la bannière, ensuite donc c'est la zone qui contient les différentes entrées, les différents articles. Il y a aussi sur les côtés le bas de page, etc. C'est-à-dire qu'on va diviser notre page selon notre besoin rien qu'avec des balises div ou bien des balises span. Mais bien sûr il faut utiliser le CSS pour ceci. Maintenant si un moteur de recherche vient scruter cette page, il va trouver que tous les contenus ils ont été intégrés au sein de la même balise. C'est la balise div. C'est-à-dire qu'il pourra pas estimer l'importance d'une information par rapport à une autre parce que toutes les informations, elles ont été posées sur la même balise qui est la balise div. Et c'est ça le rôle des balises sémantiques. Les balises sémantiques sont des balises qui ont le même rôle que la div, ça veut dire que ce sont des balises bloc. Il y en a beaucoup en HTML5, mais nous on va se contenter de quelques-unes, les plus utilisées d'ailleurs. Par exemple, la balise header. Footer, nav, section, bien section, aside et article. La balise header n'a rien à voir avec la balise head. La balise head, c'est une balise qui contient des informations supplémentaires à l'exécution de la page. Par contre, toutes ces balises-là, ce sont des balises qui s'incorporent à la balise body, c'est-à-dire que ce sont des balises dont le contenu sera affiché dans le navigateur. Maintenant, examinons chacune de ces balises. Header, c'est une balise d'en-tête. Footer, c'est une balise de bas de page. Nav, c'est pour la navigation qui contient le ou bien les menus principaux de notre page. Section, c'est une grande section, c'est-à-dire un grand conteneur qui en contiendra d'autres. D'ailleurs, il peut contenir des aside, des articles, d'autres header, d'autres footer et même d'autres nav. Maintenant, essayons de projeter ça sur cette page-là. Par exemple, le menu principal, au lieu de le mettre dans la div, on peut le mettre dans le nav. La bannière, ça serait automatiquement le header, et tout le contenu qui est là sera dans une grande section. Que l'on va diviser en 2 zones par exemple. Une zone gauche et une zone droite. Ces 2 zones peuvent être d'autres sections ou bien des balises articles, voire même des balises aside. Il y a juste une chose à comprendre, c'est que généralement dans la balise article, on ne va pas mettre des informations que nous avons générées nous-mêmes. Généralement, il y a des pages qui contiennent des informations qui viennent d'ailleurs, comme les flux RSS ou bien la météo que je peux incorporer à ma propre page web. Ça veut dire que ce sont des informations que je n'ai pas générées moi-même. Mais qui vient d'un autre site web. Dans ce cas, ces informations-là, il serait pertinent de les placer dans la balise article. Alors article, on va la consacrer à ceci. Maintenant, on peut juste jouer avec les autres balises selon notre choix. Mais il faut savoir que quand le moteur de recherche ou bien un outil quelconque viendra pour scruter notre page, il saura estimer l'importance d'une information par rapport à une autre. Continuons. Alors là, on peut mettre par exemple d'autres sections, voire des aside. Et bien sûr le bas de page, ça sera le footer. Au lieu de mettre que des divs, on va répartir, ou bien on va jouer avec les balises sémantiques. On aura le même rendu, le même design, rien ne changera, mais c'est la nature de l'information elle-même qui va être exportée aux outils de recherche et aux navigateurs. Une remarque importante, c'est que le fait de voir la balise header ou bien footer nous fait penser automatiquement que le header sera placé en haut de la page et footer en bas. Mais ce n'est pas tout à fait vrai. En fait, n'oubliez pas que toutes ces balises-là, elles sont équivalentes à la balise div. Elles vont faire la même chose que la balise div côté affichage. Il y a juste la sémantique qui va être rajoutée. Alors quand vous mettez footer avant le nav, c'est sûr que vous aurez le contenu du footer au-dessus du contenu du nav et pas l'inverse. Le navigateur, c'est pas lui qui va se charger de bien placer les balises là où ça devrait être placé logiquement. Ça, c'est votre rôle ou bien le rôle du CSS qui viendra ensuite répartir les bons éléments aux bons endroits. Par exemple, on va mettre ici le texte header, footer, nav, section, aside et article. On exécute notre page, on va voir que l'ordre, c'est celui qui a été établi dans le code: header, footer, nav, section, aside et article. Footer n'est pas descendu en bas, header il est resté en haut parce que c'est normalement c'est la première balise par laquelle j'ai commencé. Alors n'oubliez pas, les balises sémantiques ce sont des balises div mais qui ont un sens. Il reste d'autres balises sémantiques comme la balise canvas où nous allons dessiner en JavaScript, la balise figure ou bien figcaption. Bref, il y a plein de balises sémantiques, mais généralement on peut utiliser ces 6 balises-là afin de notre page web d'une manière correcte. Maintenant, nous allons nous intéresser aux tableaux. Les tableaux, c'est quoi? Ce sont tout simplement des grilles ou bien des cellules qui vont contenir des données. Ces données-là, elles seront organisées sous forme de liste, soit horizontalement ou bien verticalement. Pour créer un tableau en HTML, nous allons utiliser la balise table. Voilà, la balise table va créer un espace pour le tableau. Mais le tableau lui-même, c'est quoi? Ce sont des cellules qui le constituent. Alors il faut créer des lignes et des colonnes. L'intersection des deux vont constituer ce qu'on appelle des cellules. Alors la ligne, c'est la balise tr. On va commencer par la ligne puis la colonne. Et maintenant la ligne contient les colonnes. La colonne, c'est td. En minuscule ou en majuscule, c'est la même chose. Ça vérifie pas la casse. Maintenant quand j'exécute, excusez-moi, il y a un truc que j'ai oublié là. Voilà. Maintenant quand j'exécute, je vais voir qu'il y a vraiment rien de visible sur ma page normale parce qu'un tableau c'est un gros rectangle qui contient des cellules. Alors il faut quand même soit les colorer ou bien leur donner une bordure afin qu'ils soient visibles. Maintenant on va mettre quelques attributs de base. Qu'il faut déclarer. Pour table, on va mettre width, par exemple 100%. Donc là, quand je mets pourcentage, ça veut dire qu'il va occuper la totalité du conteneur. Dans ce cas, le conteneur, il n'y a rien d'autre que body, alors ça sera la page entière. Notre tableau, donc, il aura la même largeur que la page. On va mettre border 0, ça veut dire l'épaisseur d'abord c'est 0 pixels, ça sera pas visible. Ensuite, cell-spacing, on va mettre par exemple 4. Cell-padding, on va mettre par exemple 2. Cell-spacing, c'est l'espacement entre les cellules voisines, et cell-padding, c'est la marge interne de la cellule. On va voir de quoi ça s'agit ensuite. Il faudra d'abord dessiner les cellules et mettre un contenu dedans pour pouvoir percevoir l'effet de cell-spacing et cell-padding. Pour tr, on peut mettre des attributs, mais bon, généralement on n'aura pas vraiment besoin. Pour t'aider par contre, on va juste mettre un truc du genre height pour lui donner une hauteur, par exemple 100 pixels. Voilà, là je vais pas mettre l'unité. Pour le pourcentage, je mets l'unité parce que c'est relatif, mais quand c'est en pixels, on met rien, juste 100. Automatiquement, navigateur sait que c'est 100 pixels. Pour le width, on veut que ça occupe la totalité du tableau, alors 100% du conteneur qui est le tableau dans ce cas, et du coup c'est 100% de la page. Et on va pas oublier de colorer notre fond afin de pouvoir distinguer notre cellule. Par exemple, bgcolor, et on va mettre la couleur par exemple orange. Normalement, bgcolor c'est un attribut qui est obsolète, ça veut dire qu'on préfère faire ça avec du CSS. Mais puisqu'on n'a pas encore vu de CSS, alors on va se contenter de faire tout avec du HTML. On exécute pour voir le résultat. Alors là, nous avons une cellule, bon il y a une erreur quelque part, ça devrait être orange, voilà. Orange. Nous avons maintenant un seul tableau qui contient une seule ligne et une seule colonne. Alors nous avons une seule cellule. Si on veut avoir deux cellules, il suffit de prendre le TD, le copier et les coller dans le même TR. C'est-à-dire la même ligne contient désormais deux colonnes. Mais il faut changer la largeur parce que 100% pour les deux, c'est pas logique. On va mettre 50%. 50%. Dans ce cas, on n'aura pas de débordement et notre tableau contiendra toujours 100% de la page. Il sera divisé en 2. Quand j'exécute, je vais voir qu'il y a maintenant 2 cellules. Ils ont la même couleur parce que j'ai pas changé de bg-color. Vous avez remarqué l'apparition d'un petit trait, une petite marge entre les 2. C'est ce qu'on appelle le cell-spacing, l'espacement entre les cellules. Je peux le changer pour voir son effet. Par exemple, mettre ici 40. Quand j'exécute, voilà l'espacement. S'agrandit autour de la cellule entière. Voilà, cette padding, on veut pas voir son effet tant qu'on n'a pas mis un contenu dans la cellule. On va remettre la valeur 4. On va changer l'arrière-plan de la deuxième, par exemple blue. Et voilà notre tableau. Imaginez maintenant que je vais ajouter une deuxième ligne qui contient 2 cellules à son tour. Il suffit de copier Il le collait juste en dessous dans le même tableau parce que c'est le même tableau qui contient maintenant deux lignes. Chaque ligne contient deux colonnes. Là encore, je vais changer les couleurs. Par exemple, yellow, green. J'exécute. Je vais voir l'effet. Ça va ressembler à ceci. Et pour écrire dans le tableau, il suffit d'entrer dans la balise td et écrire ce qu'on veut. Bonjour. Et si j'écris, bon, peu importe, bonsoir, etc. Ici j'aurai le contenu qui sera bien sûr aligné de cette manière. Pour l'alignement, on peut ajouter des attributs align ou bien valign, mais je préfère ne pas entrer dans ces détails parce que ce sont des choses que l'on va faire plus tard avec du CSS. Imaginez maintenant qu'on veut créer un tableau qui contient 2 lignes. La première ligne contient une seule colonne qui va occuper la totalité de la largeur. Et la deuxième ligne contient 2 colonnes. Alors dans ce cas, on va entrer dans la première ligne, on va éliminer une des 2 cellules, la première ou la deuxième, peu importe. On peut même éliminer le texte pour ne conserver que la couleur. Ensuite, on va agrandir la largeur 100%, ce qui paraît logique, mais si on exécute, on va voir que ça va pas vraiment donner le résultat souhaité. Regardez, donc il y a la deuxième cellule de la deuxième ligne qui a été réduite, bon presque écrasée par la première cellule. Et c'est normal parce que les bordures sont en quelque sorte dépendantes. Si vous étirez la cellule d'en dessus, celle qui est en dessous va s'étirer à son tour. Afin de les rendre indépendantes, il faut appliquer ce qu'on appelle le fusionnement des cellules. Le fusionnement, c'est quoi? On va aller dans le code. La nouvelle cellule qu'on a générée, celle qu'on a conservée, on va lui ajouter un attribut pour dire au navigateur que c'est le résultat de fusionnement de 2 cellules. Mettre dans col span égal à 2, c'est-à-dire on a fusionné 2 cellules pour en avoir qu'une seule. Et quand on exécute maintenant, on va voir que dans la première lignée on a une seule cellule et dans la deuxième nous avons 2 cellules. Une remarque importante, sachez que les tableaux sont de moins en moins utilisés de nos jours parce que tout simplement ils ne sont pas responsifs. Ça veut dire qu'ils s'adaptent pas tellement aux appareils mobiles comme les téléphones qui ont un écran étroit. C'est pourquoi on préfère utiliser des conteneurs comme les divs ou bien les balises segmentées qu'on a vues, les aligner avec le CSS et introduire du contenu dedans. Et à la fin, ça aura l'air d'un tableau. Mais selon les cas, on peut toujours se servir des tableaux classiques. Il y a aussi d'autres balises que j'ai pas mentionnées dans cette séance. Bon, à la fin de de ne pas trop alourdir le contenu, comme par exemple la balise theader, thefooter, la balise th. Ce sont juste des balises qui vont donner un sens à des lignes pour dire c'est une ligne d'en-tête, des lignes de bas de page, et des fois il va placer automatiquement ces lignes au bon emplacement. Mais comme j'ai dit, vous pouvez créer votre tableau avec les 3 balises qu'on a vu ici, à savoir table, tr et td, les placer à votre guise là où vous souhaitez, et si vous voulez ajouter des effets spéciaux, il suffit d'appliquer le CSS. Afin de casser le rendu par défaut. Merci pour votre attention et à la vidéo prochaine.