L'essentiel du HTML5

Analyser diverses écritures libres

Testez gratuitement nos 1255 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Inspectez rapidement quelques balises, parfois oubliées, mais pouvant vous aider à mieux structurer et à découper vos contenus.
03:26

Transcription

Enfin pour clore ce chapitre sur le texte, nous allons voir toute une série de petites balises, que l'on utilise généralement à l’intérieur des paragraphes de nos contenus, à part peut-être une ou deux d'entre elles, qui sont parfois utiles, parfois sous utilisées, sous-exploitées également et qui nous permettent de pouvoir donner un sens à ces contenus et surtout après de pouvoir être stylées de manière personnelle, par les CSS. Alors le visuel que vous allez voir c'est le visuel par défaut des navigateurs, la seul différence c'est qu'ici je vais avoir mis pour certaines d'entre elles un display block, pour que chacun soit séparé et qu'on passe à la ligne à chaque fois pour mieux les distinguer. Alors ici j'ai un fragment de texte flottant et je vais utiliser la première balise qui va être la balise « pre » qui va me donner le texte préformaté, tel qu'il le serait à l'interieur des balises. Alors ici qu'est-ce que ça veut dire ? Regardez. Si je place une ligne supplémentaire, voyez ici « Incidunt », j'ai eu une ligne supplémentaire, alors on le voit pas très bien ici si je passe en mode indirect, on voit bien que c'est allé à la ligne, ça ne suis pas ici c'est comme s'il y avait eu un retour-chariot. Alors qu'ici il n'y a pas de retour-chariot, c'est simplement un véritable retour mécanique qu'il y a eu. Regardez si j'indente ici, que je rajoute un peu plus d'espace, on voit bien que le mot va se décaler il va pouvoir donner libre court à la règle typographique que je vais implémenter ici à l’intérieur de cette balise « pre ». Ça peut être intéressant, des fois pour remettre en forme un texte, tel qu'il a été écrit manuscritement, par exemple ou tel qu'il était dans le contexte initial. On peut, bien entendu quand même placer des balises à l’intérieur, si je mets une balise « strong » ici, elle va bien être refletée également. On a une autre balise, de ce type là qu'on peut utiliser alternativement, qui est la balise « code », qui utilise par défaut si vous le regardez à peu près le même type de représentation, c'est ici « Earum » le même type d'encodage de la font utilisée. Ça va être utilisé surtout pour pouvoir représenter du code informatique. Et la encore on peut bien entendu et heureusement aller placer des balises à l’intérieur ici une balise « m » pour pouvoir styler ce code un peu comme on le souhaiterait. Ensuite on a la balise « ins », qui se souligne par défaut, et qui se met légèrement en gras légèrement soutenu, c'est une balise qui va permettre de montrer que c'est une insertion de texte qui a été faite à contrario si vous voulez de la balise de suppression de texte, qui va être barré. Donc quand vous avez un travail en cours avec une équipe collaboratrice, sur un contenu, vous voyez attaché, on a rajouté ça , ou ça on l'a supprimé, voilà. Vous pouvez faire un circuit de révision comme ça avec de vraies balises sémantiques, et structurelles pour cela, bien entendu encore une fois vous pouvez utiliser vos propore styles CSS pour les mettre en forme et en valeur. « kbd » pour Keyboard va dire : tapez ceci, tapez par exemple votre nom, et vous le tapez directement dans cette balise là, ça va pouvoir être repéré, donc si vous avez des instructions pour récupérer des contenus et les préformater dans des champs de formulaire, vous savez où vous pouvez les récuperer, se sont dans ces balises-là. Et puis pareil pour « var ». « Var » va être utilisé des fois pour définir des variables comme son nom l'indique, mais aussi par exemple pour un texte qui doit être remplacé, qui est un placeholder, un garde-place pour l'utilisateur. Voilà donc toutes un certain nombre de petites balises que je vous invite à venir découvrir plus en amont, ici, dans la partie de W3C sur leurs descriptions ici et encore une fois toujours revenir à la source et explorer parfois même toute la pléthore de balise que l'on a sous le capot et qui sont à notre disposition, pour formater, structurer donner un sens sémantique encore une fois à nos contenus.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :29 juin 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !