Médiaforma

All posts tagged attribut

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans les trois rubriques précédentes, vous avez vu qu’il était possible de définir un style CSS dans une balise HTML, dans une feuille de styles intégrée au document HTML ou dans une feuille de style externe, stockée dans un fichier d’extension .css.

La troisième technique est celle qui donne les meilleurs résultats en termes de réutilisation. En effet, la feuille de styles externe peut être utilisée par toutes les pages d’un site, ce qui assure leur uniformité et soulage l’écriture. Il suffit pour cela d’insérer une balise <link> dans chaque page concernée.

L’utilisation d’une feuille de styles interne est intéressante lorsque le nombre de pages est très limité.

Quant à la modification des styles dans les balises, elle est marginale et ne sert qu’à “surclasser” un style, c’est à dire à modifier les caractéristiques d’un style qui a été défini dans une feuille de styles externe ou interne.

De la même manière, les styles définis dans une feuille de styles interne surclassent ceux définis dans une feuille de style externe.

Il y a donc deux niveaux de surclassement possibles : les styles définis dans une feuille de styles externe sont surclassés par ceux définis dans une feuille de styles interne qui sont eux-mêmes surclassés par ceux définis dans les balises HTML.

Lorsque vous définissez un site Web, la démarche consiste à créer une feuille de styles externe dans laquelle vous définissez les styles généraux à utiliser dans vos pages. Si une page doit utiliser un ou plusieurs styles spécifiques, il vous suffit de les redéfinir dans une feuille de styles interne. Enfin, si une balise doit utiliser un style particulier, il vous suffit de le définir dans la balise en utilisant un attribut style.


Voici quelques termes qu’il est bon d’avoir en tête lorsqu’on développe en jQuery :

Balise

Aussi appelée élément ou tag, c’est l’entité de base du langage HTML. Les balises sont toujours encadrées par les caractères < et >. Par exemple <html> ou encore <body>. Les balises ouvertes doivent être fermées avec une balise fermante. Par exemple </html> ou encore </body>. Certaines balises peuvent être à la fois ouvrantes et fermantes. Dans ce cas, le caractère / apparaît avant le signe > de fin de balise. Par exemple, <img src=’image.jpg’ />.

Attribut

Outre leur nom, certaines balises HTML peuvent recevoir une ou plusieurs informations complémentaires. Ces informations sont des attributs. Toujours spécifiés dans la balise ouvrante, ils sont suivis d’un signe = et d’une valeur entre guillemets. Lorsqu’une balise contient plusieurs attributs, ils sont séparés par des espaces. La balise <img> du code <img src=’jquery.jpg’ alt=’logo jQuery’ id=’imglogo’ /> contient trois attributs : src, alt et id.

Block

Les balises HTML de type block sont affichées sur des lignes successives. Par exemple, si l’on définit deux balises <div> dans un document HTML, elles seront affichées l’une en dessous de l’autre. Les balises de type block peuvent être dimensionnées, et donc occuper un espace bien défini (hauteur et largeur) dans un document.

Inline

Les balises HTML de type inline sont affichées les unes à la suite des autres. Par exemple, si l’on définit deux balises <span> dans un document HTML, elles seront affichées sur une même ligne. Les balises de type inline ne peuvent pas être dimensionnées. Elles occupent un espace qui dépend de leur contenu.

Inline-block

C’est un mélange des types inline et block. Si on définit deux balises de type inline-block dans un document HTML, elles seront affichées l’une à la suite de l’autre (c’est le comportement des balises inline). Leur taille (largeur et hauteur) pourra également être définie (c’est le comportement des balises block).

Feuille de styles

C’est un document qui rassemble un ou plusieurs styles CSS qui définissent la mise en forme d’un document. Si la feuille de styles est interne à un document, les différents styles doivent être définis dans l’en-tête du document, entre les balises <style type=”text/css”> et </style>. Si la feuille de styles est externe, vous devez définir les styles dans un fichier d’extension .css et y faire référence dans l’en-tête du document en utilisant une balise de ce type : <link rel=”stylesheet” type=”text/css” href=”styles.css” />

Ici, la feuille de styles a pour nom styles.css.

Propriétés CSS

Elles définissent les caractéristiques d’un style CSS. Elles sont précisées dans la feuille de styles, entre les accolades ouvrante et fermante qui suivent le nom du style. Dans l’exemple qui suit, color et margin sont des propriétés CSS :

li {
  color: red;
  margin: 10px;
}

Sélecteur CSS

Pour définir une règle CSS, on utilise un sélecteur qui indique à quoi va se reporter la règle. Il peut s’agir d’un sélecteur de balise, de classe, d’identifiant, de pseudo-élément, voire même d’un sélecteur universel qui s’adresse à toutes les balises du document. Le tableau suivant donne quelques exemples pour mieux comprendre le fonctionnement des sélecteurs.

Sélecteur Type Se rapporte à
h2 Sélecteur de balise Toutes les balises <h2>
.rouge Sélecteur de classe Toutes les balises de classe rouge
#grand Sélecteur d’identifiant La balise d’identifiant grand
:first-letter Sélecteur de pseudo-élément La première lettre d’un élément
.rouge:first-letter Sélecteur de pseudo-élément d’une classe La première lettre des balises de classe rouge
* Sélecteur universel Toutes les balises

W3C

Le World Wide Web Consortium (W3C), est un organisme de standardisation à but non lucratif, chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP.

DOM

Le DOM (Document Object Model) est une structure de données qui représente un document HTML comme une arborescence. La racine de cet arbre est un nœud nommé document qui correspond grossièrement à la balise <html>. Tout aussi grossièrement, les balises HTML définies dans la page Web correspondent aux nœuds de l’arbre DOM et en constituent la structure. Le langage jQuery est en mesure d’interroger le DOM pour connaître les caractéristiques (attributs et valeurs HTML, propriétés et valeurs CSS) des balises qui constituent un document HTML, mais aussi de modifier ces éléments pour changer l’allure et/ou le contenu du document.

DTD

Le DTD (Document Type Declaration) fait référence à la balise <!DOCTYPE>. Cette dernière doit apparaître en tête des documents HTML. Elle indique au navigateur les règles d’écriture utilisées dans le document. Dans ce cours, nous utiliserons systématiquement les règles d’écriture du langage HTML5. Le DTD correspondant sera <!DOCTYPE html>.

Jeu de caractères

Le jeu de caractères d’un document HTML est associé aux différents claviers nationaux. Pour indiquer au navigateur dans quel jeu de caractères vous travaillez, vous devez insérer une balise <meta charset=””> dans l’en-tête du document. Deux jeux de caractères sont essentiellement utilisés :

  • ISO-8859-1 pour accéder à la majorité des caractères des langues occidentales, telles que le français, l’anglais, l’allemand, l’espagnol, etc.
  • UTF-8 pour afficher sur une même page des caractères issus de plusieurs langues (français et japonais par exemple).

Selon vos besoins, vous utiliserez donc une balise <meta charset=’ISO-8859-1′> ou <meta charset=’UTF- 8′>.

Fonction jQuery

C’est le point d’entrée de la bibliothèque jQuery. Vous pouvez utiliser au choix l’instruction jQuery() ou son alias $(). Dans ce cours, nous utiliserons systématiquement l’alias pour limiter l’écriture.

Méthodes jQuery

La bibliothèque jQuery est constituée d’un ensemble de blocs de code autonomes appelés méthodes. Ce qui fait la puissance de cette bibliothèque, c’est avant tout la grande diversité des méthodes proposées. Pour exécuter une méthode jQuery, il suffit de préciser son nom à la suite d’un sélecteur en le séparant de ce dernier par un point : $(sélecteur).méthode(paramètres);

Objet jQuery

On appelle « objet jQuery » l’entité retournée par la fonction jQuery, c’est-à-dire par $(). Cet objet représente un ensemble de zéro, un ou plusieurs éléments issus du DOM.

 


Pour en terminer avec les sélecteurs CSS, je vais vous montrer comment modifier les caractéristiques des balises qui contiennent un attribut dont la valeur contient une chaîne donnée.

A titre d’exemple, nous allons écrire en rouge les balises <p> dont l’attribut title contient le mot paragraphe.

Comme vous pouvez le voir, seuls les premier, deuxième et cinquième paragraphes ont un attribut title qui contient le mot paragraphe. Le sélecteur à utiliser est le suivant :

p[title*=”paragraphe”]

L’astérisque indique que l’attribut doit contenir le texte entre guillemets. Sans lui, seuls les paragraphes dont l’attribut title vaut paragraphe seraient concernés.

Pour que les paragraphes dont l’attribut title contient le mot paragraphe apparaissent en rouge, il suffit d’ajouter color: red; à la suite du sélecteur et de l’entourer d’accolades. Voici le résultat :


Cette rubrique fait suite à la précédente. Elle vous montre comment modifier les caractéristiques de balises qui contiennent un attribut initialisé avec une valeur donnée.

Supposons que vous vouliez changer la couleur des paragraphes en fonction de leur alignement :

  • les balises <p> qui possèdent un attribut align égal à left doivent apparaître en rouge ;
  • les balises <p> qui possèdent un attribut align égal à center doivent apparaître en bleu ;
  • les balises <p> qui possèdent un attribut align égal à right doivent apparaître en vert.

Vous utiliserez pour cela des sélecteurs du type p[align="valeur"], où valeur vaut left, center ou right.

Voici le résultat :


Pour mettre en forme un document HTML, il peut être utile de sélectionner les éléments qui possèdent un attribut donné. Dans cet exemple, nous allons affecter la couleur rouge aux paragraphes qui possèdent un attribut align.

Le corps du document contient six balises <p>. Quatre d’entre elles ont un attribut align.

Pour défdinir les caractéristiques des balises <p> qui possèdent un attribut align, vous utiliserez le sélecteur p[align]. Ici par exemple, nous affectons la couleur rouge aux balises qui possèdent un attribut align :

p[align] {color: red;}

Voici le résultat :