L'essentiel du HTML5

Définir les attributs

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les attributs sont des nœuds d'information qui se placent à l'intérieur des balises ouvrantes. Il existe diverses familles d'attributs communes à toutes les balises ou propres à certaines d'entres elles. Le HTML5 les dotent d'un aspect applicatif.
06:12

Transcription

Les attributs sont des noeuds d'information que l'on place à l'intérieur d'une balise. Dans la partie de la balise ouvrante, comme ça, on va pouvoir définir un attribut, qui est égal, entre guillement, un contenu. Alors, les guillements sont devenus facultatifs, en HTML5 on peut les garder par habitude d'écriture. Après là c'est à vous de voir comment vous souhaitez écrire votre code. Sachez qu'en HTML5 c'est assez permissif. Personnellement je préfère mettre quand même les guillemets autour des attributs, des fois pour pouvoir délimiter des caractères un peu spéciaux ou des contenus un peu particuliers d'attributs. Alors, il existe certains attributs un peu particuliers qui, parfois, vont pouvoir contenir la même valeur. C'est à dire qu'en HTML4, un attribut "selected" par exemple, devait forcément être égal à entre guillemets selected. Donc l'attribut égal entre guillements l'attribut. En HTML5 aujourd'hui, ce n'est plus le cas, et on va pouvoir écrire directement balise attribut. Et donc, dès l'instant où la présence de l'attribut va être définie au sein de la balise ouvrante, ici, l'attribut sera pris en considération par le lecteur, par le navigateur. Alors, chaque balise va proposer un certain nombre d'attributs. Si je prends par exemple ici la balise a, de la balise hyperkink ici, on s'aperçoit qu'on a, au niveau des attributs, ce qu'on appelle les "global attributes", c'est à dire qu'ils vont être attribués à toutes les balises, quelles qu'elles soient, plus des attributs qui lui sont propres, comme ici, "href", "target", "rel", "hreflang", et cetera, qui vont être dédiés à la balise A. Donc on a des lots d'attributs globaux, qu'on va pouvoir venir lister si je clique sur cet élément ici, donc "accesskey","class", "contenteditable", et cetera qui vont être des attributs génériques, valables pour toutes les balises HTML, plus un certain lot d'attributs, qui seront propres, simplement, à chacune des balises de manière indépendante. Alors, afin de pouvoir mieux synthétiser tout ça, on va dire que pour les attributs, on a des attributs de type globaux. Les plus classiques c'est par exemple l'attribut "id", qui va permettre de donner un identifiant à la balise. L'attribut "class", qui va permettre, comme son nom l'indique, d'indiquer une classe à cette balise spécifique. L'attribut "style", qui va permettre de porter du style CSS directement sur cette balise et uniquement sur cette balise pour uniquement, bien entendu cette page-là. C'est quelque chose de très vertical. La balise "title", qu'on pourra réutiliser dans de nombreuses extensions propres au HTML. L'attribut "lang", qui permet de définir la langue d'écriture de la balise. Ca c'est très important pour les moteurs de recherche notamment. L'attribut "rel" qui permet d'attribuer une relation du fichier extérieur du fichier pointé vers le fichier sur lequel on est, ou la relation de la balise avec le fichier hôte, quelle est sa relation. L'"accesskey" qui va être utilisé pour donner une autorisation d'accès en accessibilité, on reviendra sur cette balise un peu plus tard, dans une étape dédiée. Pareil pour la balise "tabindex", qui va pouvoir indiquer l'ordre de tabulation si l'utilisateur utilise la tabulation pour naviguer. Donc on pourra naviguer de balise en balise comme ça. Grâce au numéro d'ordre donné à la tabindex. Et puis bien entendu tout un certain nombre d'attributs ne sont pas là, que les seuls attributs globaux. Après on a vu qu'il y avait des attributs spécifiques, comme le href par exemple, pour le lien, le src, pour la source d'un élément, le type pour définir son type-mime. Voilà, donc on pourra avoir tout un certain nombre d'attributs spécifiques en fonction des balises auxquelles on va avoir affaire. Après, on a des attributs d'évènements, c'est à dire qu'on pourrait venir dans le HTML comme ça, porter des éléments de type "onclick", "onload", quand tu charges cet élément, ou quand tu cliques sur cet élément, ou quand tu détectes une erreur sur cet élément, voici ce que tu peux faire. Bien entendu, on préferera externaliser ce javascript, et le placer plutôt dans des fichiers externes, et utiliser le don pour venir pointer dessus. Mais, sachez que dans le HTML, on peut avoir des attributs événementiels, qui nous permettent de donner de l'interactivité à notre base HTML. Et enfin l'attribut "data" étoile, manifesté par data-*, on verra une étape dédiée sur le data * . C'est un nouvel attribut HTML5, qui nous permets de pouvoir définir nos propres attributs, et enrichir ainsi le contenu HTML, en le dotant de certaines métadonnées personnelles, propres à l'application. Donc si on repart, maintenant, sur le fichier source qui nous a servi à ficher ces balises-attributs, ici, et que je fabrique trois paragraphes, on va s'apercevoir qu'HTML5 nous a donné des attributs assez intéréssants, comme par exemple l'attribut "draggable", qui va permettre s'il l'initialise à "true", de rendre un paragraphe déplaçable. On pourrait aussi avoir un "contenteditable true", qui va nous permettre de rendre le contenu éditable. Ca ne veut pas dire que la fonctionnalité est prise en compte complètement, il va falloir aussi venir l'épauler avec du javascript. Mais déjà, on a une base de travail qui va nous permettre d'avoir directement un outil déplaçable, vous voyez ici, je peux déplacer le paragraphe. Alors que si ici j'essaye de le déplacer, je peux pas, c'est du sélection. Et vous voyez celui-là, dès que je le sélectionne, il y a un petit liseret bleu, parce que je vais pouvoir venir taper à l'intérieur, et donc rajouter du contenu. Encore une fois, il va falloir prendre du javascript pour venir compléter l'information. Vous voyez que déjà, on a une fonctionnalité simplement liée, attachée par un attribut dans le HTML. On peut aller un tantinet plus loin, ici, si par exemple je crée un "contextmenu", je vais définir ce "contextmenu", et je vais dire qu'il va être égal à un "menuContextuel". Ce "menuContextuel" n'existe pas, je vais venir le créer. Pour cela, je vais venir créer, ici une balise "menu", en écrivant "menu label, sélection, menu item". Je vais créer comme ça des menus et des sous menus. Donc un premier menu "sélection", un second menu "action" qui contiennent eux-mêmes menu1 menu2. Et là je vais pouvoir venir dire qu'il s'agit d'un menu contextuel, donc de type contextuel. Et puis, je lui attribut un attribut, "id menu contextuel", qui le met en relation avec cet élément ici, ce paragraphe ici. Et bien entendu, je vais masquer cet élément-là, en passant l'attribut "hidden" directement, tout simplement pour dire que ce menu est masqué. Et si maintenant j'actualise ma page, ici, ma page de test, quand j'actualise, si je clique sur l'élément avec le menu droit, vous voyez que j'ai un menu déroulant qui est apparu, "sélection", "menu1", "menu2" et l'action "menu3". Il est très facile, comme ça, avec des attributs, de pouvoir rendre - rappelez vous, ce qu'on parlait, d'un HTML applicatif- de rendre de l'applicativité à nos contenus et à nos pages. Bien entendu, il va falloir gérer toute cette modification apportée dans le contenu par du script, par un moteur qui va venir le gérer. Mais vous voyez que les bases fondamentales peuvent être obtenues simplement en utilisant des attributs.

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 !