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

Explorer les citations courtes, longues et les abréviations

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Parmi les éléments structurants du texte, quelques-uns sont parfois mal ou sous-employés. Faites donc le tour de l'univers des citations et des abréviations utilisés dans vos contenus.
07:52

Transcription

Parmi les éléments structurants du texte il y en a un qui a souvent été très mal utilisé, très mal employé, et qui cause pas mal de soucis. Et notamment non seulement il cause des soucis, dans son emploi, mais en plus il est sous-employé. Alors, le plus simple c'est de rentrer dans l'explication visuelle. Regardez ici, si j'ai un texte souvent, dans Dreamweaver on a un outil qui nous permet de faire une indentation, un Blockquote ici. Donc qu'est-ce que va faire le Blockquote ? Le Blockquote va simplement ajouter ici deux balises Blockquote ouvrantes et fermantes, autour de ce texte, et vous voyez que ça l'indente, ça le place un petit peu en marge du contenu. Et souvent des personnes ont utilisé cette subtilité, pour pouvoir modifier le positionnement du texte. Faites attention si vous voulez modifier le positionnement du texte, utilisez le CSS, pas les balises Blockquote. Qu'est-ce que la balise Blockquote ? C'est une balise de citation. C'est à dire en gros ici, certainement de dire voilà là il s'agit d'une citation, d'une phrase, extrait d'un texte ou d'un discours. Voilà, mais on pourrait aller plus loin et se dire que ce Blockquote, on pourrait ne pas simplement que ne mettre du texte, du phrasing content, c'est à dire du texte flottant à l’intérieur de cette balise, on va pouvoir structurer, placer par exemple un titre en disant : ici c'est le titre d'une citation et voilà la citation. On va pouvoir donner ce texte-là. Et ce qui est très important maintenant en allant plus loin dans l'expression de cette citation c'est de pouvoir donner l'attribut « Cite » cette fois CITE, ici pour pouvoir indiquer le lien vers la référence d’où a été extrait cette citation. Rien ne vous empêche également de pouvoir la spécifier ici de manière visuelle pour l'utilisateur, mais là vous pouvez l'adonner un niveau du moteur pour éviter tout ce qu'on appelle, le duplicate content, etc. puisque vous allez dire non, je cite quelque chose qui a été publié dans un autre article, dans un autre site, que le mien. Bien entendu vous pouvez intervenir aussi sur la citation elle-même pour pouvoir lui donner un style, lui donner un aperçu visuel différent, en fonction de vos souhaits qu'il s'agisse simplement d'une simple phrase ou d'une citation plus complète dans le texte. Alors, là ou je vous disais que c’était un peu sous-employé, sous utilisé, c'est que à coté de la citation Blockquote, il existe ce qu'on appelle des citations courtes, un peu comme si on utilitait des phrases. Donc laissez-moi revenir par exemple placer un article avec une phrase. Nous voilà revenus à une époque ou je cite : il vaux mieux chanter maintenant, et ne pas danser en dehors de la cadence. Donc ici on a une citation qui a été au milieu d'une phrase, donc c'est pas une citation globale, comme extraite d'une texte, c'est extrait d'une phrase, dans une phrase. Donc ici si on regarde du coté du code ici je cite : il vaut mieux chanter maintenant, et ne pas danser en dehors de la cadence. Donc on va pouvoir placer une citation, et pour cela on a utilisé la balise « q », ici en la plaçant au début et à la fin de la citation courte, que l'on va utiliser. On va pouvoir également utiliser le fameux attribut « cite », pour donner le lien vers la page, qui contient cette information-là. Et si vous regardez ici par défaut, on a ce qu'on appelle le petit guillemet, qui se met automatiquement. Alors, que je n'en ai placé aucun, c'est automatiquement le navigateur qui se dit : c'est une citation courte, je vais mettre des guillemets. Alors on reviendra plus tard sur ce guillemet, on va continuer, parce qu'il peut avoir aussi une deuxième approche, qui dirait par exemple : comme disait l'autre voici une réponse qui fâche, avec bien entendu : voici une réponse ce qui fâche, qui est la réponse, mais qui fâche, on pourrait dire entre guillemet. Vous savez un peu comme quand on parle avec les doigts, on fait les guillemets dans l'air, et on pourrait dire : voici une réponse qui fâche. Pour amoindrir le mot « fâche », donc on a la citation dans une citation. Mais ici si je regarde ici dans la partie du code, je vais pouvoir dire que j'ai un début de citation ici, une fin de citation là, et puis je refais une citation à l’intérieur de la citation, c'est à dire que j'aimerai une balise Q à l’intérieur d'une balise Q, pour pouvoir donner cette représentation. Et si vous voyez ici les deux guillemets sont représentés de manière différente puisque le navigateur a bien compris qu'il y avait une imbrication de citation on va dire. Donc ici par contre on pourrait se dire que certaines écoles disent : je vais rajouter un espace « fin » en amont et en aval de chaque citation pour pouvoir décoller les guillemets du texte. Donc on va pas mettre un espace normal on mettra un espace « fin », donc on (incompréhensible). Il existe une troisième possibilité non pas de citer, mais de pouvoir nommer quelque chose, citer quelque chose, si je parle par exemple ici, dans son dernier ouvrage, « Citons », qui est le nom de l'ouvrage, Ernest Zitapolio nous présente sa vision de citation. « Citons », c'est un ouvrage. Mais là je vais pouvoir utiliser cette fois-ci non pas l'attribut, mais la balise « cite », CITE, pour dire : voilà, ici je cite un titre de quelque chose, alors faites bien attention entre HTML4 et HTML5, cette version de la balise « cite » a changé. Ici maintenant c'est vraiment utiliser pour le titre d'un ouvrage, le titre d'une référence et le titre d'un film et non plus comme on pouvait le faire avant pour présenter un auteur, pour présenter pas mal de choses, aujourd'hui ça s'est un peu restreint pour mieux se cibler. Alors, au niveau des CSS ici on va pouvoir définir sur la balise « q », ici la description quotes, et définir simplement séparer chaque fois par des doubles quotes ici, des doubles apostrophes chacun de caractères qui devra être utilisé pour représenter l’imbrication. Donc ici les deux premiers vont représenter les deux extérieurs, et des deux derniers vont représenter les deux intérieurs, voyez que ici ça a changé, ça se modifie, puisque je vais pouvoir contrôler la manière de les gérer. Vous pouvez également ici venir gérer le contenu de ces éléments, avec un « Q before », un pseudo-class CSS et un pseudo-class After, histoire de pouvoir les agrandir les positionner différemment, les adapter, changer la couleur etc, de façon à pouvoir bien contrôler votre citation. On fait rapidement un dernier élément que l'on pourrait considérer non pas de citation, mais qui est important de venir repérer dans le texte. Si je prends cette phrase ici : La principale mission de la CNC est de recenser et cataloguer les diverses sources de la EQA, à vos souhaits. Que veut dire CNC, que veut dire EQA alors ? On pourrait penser Centre Nationale de la Cinématographie, et EQA, je sais pas. Donc il est très important chaque fois que vous avez du contenu de texte de venir le structurer sémantiquement et de le définir. Donc c'est CNC c'est une abréviation, c'est un acronyme, mais c'est une abréviation pour le HTML, ne plus utiliser de balise acronyme qui était valable en HTML4, mais qui ne l'est plus en HTML5. et donc de venir entourer cette balise CNC par une balise « ABBR », abbréviation. Et il faut penser à mettre dans le titre ici la valeur, et ici c'est la Chambre Nationale de la Citation. Et là en survolant dans le navigateur, vous allez avoir un petit outil, qui va apparaître, qui va permettre de dire : mais voilà ce qu'il a mis. Par contre c'est en quelle langue ici ? En fait c'est en langue française, donc de venir rajouter l'attribut langue FR. De ce fait vous pouvez venir rajouter dans la partie « DocType », HTML, langue égale FR. Dans la seconde-là, on dirait tout était en FR, mais faites bien attention de le spécifier au cas par cas, c'est beaucoup plus explicite et beaucoup plus intéressant. Donc on va faire exactement pareil pour EQA, on va les rajouter une balise ABBR tour à tour. Un attribut title qui va pouvoir dire qu'il s'agit de Every Quotes Agency et que là c'est en quoi, c'est en langue anglaise. Donc voilà, il est très important de venir rendre à César ce qui est à César, de venir bien décrire chacun de nos contenus structurels soit au travers de la balise BlockQuote, qui est plus large, c'est la balise « Q », qui va permettre de pouvoir cibler de situation courte, qui pourrons mettre imbriquer la balise « CITE », qui va permettre de pouvoir définir des titres ou des appellations, et enfin la balise « ABBR » qui va pouvoir définir des abréviations, des acronymes ou tout raccourci, qui peut être fait dans la langue française, comme par exemple le mot CAP qui peut dire le CAP, le CAP ou encore CAP, qui est un diminutif de capable, de CAP, voilà. Donc penser à venir définir tout ces types de contenu, vous allez pouvoir donner un sens encore plus sémantique à l’intégralité de vos textes.

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 !