Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel du HTML5

Examiner les listes et les listes de définitions

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Éléments structurels incontournables en HTML, les éléments de listes sont extrêmement utiles. Ils vous permettent d'énumérer le contenu de manière très organisé.
05:57

Transcription

Dans un de ses ouvrages Andy Clark expliquait que dans la structure, tout est une liste en fait. Un paragraphe c'est une liste de phrases, une phrase c'est une liste de mots, des mots, des listes de caractères etc. Et en fait c'est bien vrai sur un grand nombre de points, c'est-à-dire qu'on sous-utilise une certaine partie d'éléments structurels, sémantiques et du HTML, qui sont les éléments de liste. Alors on va voir les éléments de liste, comment on peut les utiliser, comment ils peuvent nous rendre service. Dans un premier temps une liste c'est simplement une balise « ul », pour unordered list, liste non-ordonnée. Et puis à l'intérieur on va placer autant d'éléments « li », que l'on souhaite. Certains ouvrages disent que le dernier « li » n'est pas nécessaire puisque dès qu'on en ouvre un, on comprend tout à fait que c'est bon, il n'y a pas de soucis des fois, on peut omettre le dernier. Personnellement je vous préconise de le garder parce que vous vous allez voir que les listes peuvent contenir bien d'autres choses et souvent après c'est pas le petit peu de caractères qu'on va écrire en plus qui va nous embêter. Alors, on a les premières listes qui sont les listes unordonnées, mais on a aussi les listes ordonnées. Alors Il suffit de remplacer le « u » par un mot, de passer un « ol » à « /ol » à l'intérieur de « li », et là cette fois-ci on a des listes ordonnées ici, qui vont pouvoir avoir un ordre d'énumération. Voilà, on peut imbriquer des listes, alors, pour imbriquer des listes ici je prends un exemple de liste unordonnée qui s'imbrique, ce qui est important de comprendre par contre c'est qu'ici le dernier « li » n'existe pas. le dernier « li » va se trouver ici. Il faut bien comprendre que cet élément de sous-liste ici dans toute cette partie-là se trouve être un enfant de cet élément-là. Donc, il ne peut pas être après. il est vrai que si vous prenez ce « li », et que vous le placez ici, ça va fonctionner pareil, sauf que structurellement parlant, on ne sera pas tout à fait dans la même hiérarchie. Donc c'est important de comprendre que les éléments imbriqués, doivent l'être à l'intérieur de l'élément « li » parent. Ensuite vous pouvez imbriquer des listes ordonnées, dans des listes ordonnées, dans des listes unordonnées, etc. Vous pouvez faire ce que vous voulez là dessus, ne perdez surtout pas le fil. La deuxième possibilité qu'il n'est pas négligeable de prendre, c'est surtout de se dire que les éléments de liste peuvent contenir toutes sorte d’éléments. Regardez ici, mon élément « li » peut contenir du Flow content. Et qu'est-ce que le Flow content ? On se le rappelle encore une fois, se sont des flows elements. Qu'est-ce que sont les flows elements ? Ce sont tous les éléments de phrasing elements, c'est à dire toutes les balises de type inline, comme on a vu tout à l'heure, « a », « em », « strong », « small », « mark », etc, y compris toutes les balises de type block, de type « article », « aside », « header », « footer » etc, donc on va pouvoir placer toutes ces séries d’éléments, à l’intérieur de nos éléments de type « li ». Donc, c'est ce que je vous invite à faire, par exemple et rejoindre ce qu'Andy Clark a expliqué à une certaine époque, c'est que si j'ai une série de news, qui vont se présenter dans la page de couverture d'un de mes sites, et bien cette série de news il est vrai que ça va être une unordered list qui contiendra un élément de type « li » , alors ne vous inquiétez pas j'ai fait des feuilles de style, déjà en amont. Vous pourrez venir les voir à souhait, c'est pas le propos de cette formation, donc, on ne va pas trop s'attarder là dessus, mais c'est tout à fait normal, que tout ce style au fur à mesure, qu'on va incrémenter le code. Donc ici cet élément de liste peut contenir une image, c'est tout à fait normal, il peut y avoir aussi un élément structurel de type « titre », donc un H3 ici, on peut avoir exactement un paragraphe qui va venir incrémenter le contenu de cet news. On peut même voir ce qu'on appelle un agregrade review, c'est à dire de placer un petit élément qui va mettre un certain nombre d’étoiles par rapport à la notoriété que l'article va prendre auprès des visiteurs, et puis bien entendu ne pas oublier de rajouter un lien pour lire la suite. Et ce qui a été fait une fois puisque là c'est un seul élément « li », qui contient l'intégralité de cette news, on peut le répéter, par un deuxième élément, voir un troisième élément. D'accord et avec des feuilles de style on peut dire attention la news première tu la styles de manière différente, un peu plus grosse, plus en valeur, une image plus importante etc. Donc voyez, vous pouvez rentrer dans des éléments de liste, comme ça pour venir énumérer un certain nombre d'information au sein de votre site. Il existe qu'une troisième manière d'approcher, j'allais dire justement la définition de liste, ce sont justement les balises de définition de liste. Alors, c'est un ensemble de balises « dl », « dt », et « dd ». Regardons du coté de la nomenclature, ici la description liste c'est une balise « dl » qui ne peut contenir aucun, ou un, ou plus élément de « dt », et suivi par un, ou plus élément de « dd ». Et puis ensuite les « dt » pour le terme, je dis souvent le titre, la définition, titre de définition ou définition terme, lui, il va pouvoir contenir du Flow content, donc on retrouverait là ce qu'on trouve avec la balise « li », et pour « dd » pareil, du flow content on va en mettre un ou plusieurs. Alors justement regardons de ce coté-là pour la mise en place, là encore une fois pareille de feuilles de style le CSS on était abordées cette fois-ci, pas séparé, mais ici à l'intérieur, directement. Ici on va faire quoi ? On va mettre un élément de type « dl », definition list, on va placer un premier élément définition terme, le titre de la définition, « Lorem ipsum », par exemple, Alors ça pourrait être le contact, le poste d'un collaborateur, ça pourrait être le nom d'un des produits que vous vendez, penser toujours qu'il y a une liste de quelque chose. Donc là, c'est le terme de la description, voilà. Et ici on va placer un « dd », qui va contenir la définition, donc toute série d'information. Et rappelez-vous à l'intérieur ici, je peux avoir H1,H2,H3 des images, paragraphes, etc. Donc on va pouvoir les placer intérieur de « dd », Et ici je vais replacer un autre « dt ». On a vu qu'on pouvait contenir un ou plusieurs « dd », donc ici je vois que j'ai bien plusieurs « dd », il n'y a pas de soucis et puis on va pouvoir répéter comme ça autant de fois qu'on le souhaiterait pour remplacer un certain nombre, donc vous voyez ici avec les éléments de liste, qu'il s'agisse des listes normales, des listes ordonnées, non-ordonnées, des définitions de liste, toutes ces énumérations de contenu sont très structurelles puisque tous les parsers vont comprendre qu'il s'agit d'une énumération de quelque chose, et on a une structure qui va nous permettre de pouvoir venir imbriquer l'ensemble de ce contenu.

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 !