Médiaforma

All posts tagged W3C

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.

 


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

Le W3C met à disposition des développeurs Web un validateur de code HTML. Pour l’utiliser, rendez-vous sur la page http://validator.w3.org :

Si le code à tester se trouve sur le Web, il vous suffit de préciser son URL dans la zone de texte Address et de cliquer sur Check.

Si le code se trouve sur votre ordinateur, vous pouvez aussi le soumettre au validateur. Sélectionnez Validate by Direct Input. Copiez-collez le code à tester dans la zone réservée à cet effet et cliquez sur Check.

Dans cet exemple, une erreur et trois avertissements ressortent de l’analyse. Déplacez la barre de défilement verticale pour en savoir un peu plus sur les problèmes rencontrés.

L’erreur vient du fait que la balise <title> n’a pas été spécifiée dans l’en-tête.

Le premier avertissement indique que le code analysé est de type HTML5 et que le validateur peut ne pas être suffisamment précis.

Le deuxième avertissement vient du fait qu’aucun encodage de caractère n’a été spécifié.

Le troisième avertissement indique que l’encodage de caractère supposé est UTF-8. Cet avertissement ne serait pas apparu si la page avait été testée en ligne et non depuis l’ordinateur local.

Ces problèmes sont très simples à régler.

1)      Nous définissons une balise <title> dans l’en-tête :
<title>Le sélecteur astérisque</title>

2) Nous définissons une balise <meta> pour spécifier le type d’encodage des caractères :
<meta charset=”UTF-8″ />

Nous cliquons sur Revalidate pour tester le nouveau code. Cette fois-ci, le code est correct :