L'essentiel du HTML5

Utiliser les images et les figures

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
En complément des balises <im> et <picture>, accédez à la balise <figure>. Cette balise vous permet de structurer toutes les illustrations accompagnant le contenu de la page.
02:51

Transcription

En complément de la balise image qui contient un média image, on a vu la balise picture qui va représenter un ensemble de médias de type visuel. On a également sous le capot, la balise figure, qui elle, va représenter une illustration, la manière de pouvoir illustrer un propos, un contenu. Alors, ce qui est important de bien comprendre ici, au niveau de la balise figure, c'est que regardez, le contenu aurtorisé c'est une balise figcaption qui va être suivi par du flow content donc tout le html qu'on veut. Ou du flow content qui va être suivi par une figcaption. C'est à dire que la balise figcaption qui va être la légende, un peu, de cette figure, devra être soit au début du html enfant de figure, ou le dernier enfant de figure, d'accord ? Mais pas perdu au milieu Alors, pour l'illustrer, on va regarder directement sur du code. Ici, on a des feuilles de style qui vont mettre en forme toute cette figure. Presqu'à la limite, c'est pas le propos. On va regarder comment le construire structurellement parlant. Alors, on va commencer par mettre une balise figure. Et puis ce fameux figcaption qui sera la légende. Donc, on va décrire le propos. Alors ici, ce que je vous propose de faire, c'est de mettre en gros le map susy. Le map susy, c'est le paramètrage par défaut qu'on souhaite réutiliser sur Susy. Peu importe le propos, on aurait pu représenter la molécule d'eau, ça aurait été pareil pour l'illustration de l'utilisation de cette figure. Alors, ici, on a un figcaption. On aurait pu la garder au début, c'est comme vous voulez. Bon, pour l'illustration, je la garde enfant. Et on va mettre maintenant, une balise de titre qui présenterait le thème de cette figure. Donc, on pourrait dire, voilà, c'est une déclaration sous forme de balise h3. On va mettre un paragraphe qui va décrire cette déclaration. Donc lorem ipsum sit amet. Et puis on va se dire qu'on aurait pu mettre un fragment d'image pour illustrer cette figure. L'image serait cette image-là, qui serait une capture écran de la représentation du code de cette map susy, ici. On va ensuite mettre peut être un fragment de code qui représentera le code de cet élément là. Et là, ça y est, on a à l'intérieur de cette balise figure, l'intégralité de notre description. Il ne me reste plus qu'à enregistrer ici, à passer dans un navigateur, et d'actualiser pour voir le résultat ici. Alors, on a bien ici une figure. Alors on peut le regarder depuis le mode d'inspection sur l'élément. On a bien notre élément de figure global, ici, qui contient un titre, un paragraphe, une image, un bout de code et le figcaption. Voilà, donc on est extrêmement structuré au niveau de la représentation de cette illustration de contenu. Mais en même temps, on a un aspect sémantique qui va nous permettre de pouvoir bien comprendre qui compose cette figure et où sont aussi bien l'image d'illustration que le titre que la légende que le bout de code qui le complète.

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 !