Médiaforma

All posts tagged balise

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

Les classes CSS sont faites pour être utilisées à plusieurs endroits dans le code HTML. Ainsi par exemple, plusieurs balises <p>, plusieurs balises de titre <h1> à <h6> et plusieurs balises <td> peuvent utiliser la même classe.

Lorsqu’une balise HTML à laquelle on désire affecter un style est utilisée une et une seule fois dans un document, il est possible de remplacer l’attribut class de cette balise par un attribut id. Dans ce cas, le sélecteur CSS à utiliser est non plus le point décimal mais le caractère #.

Passons à la pratique. Ce document HTML fait référence à la feuille de styles externe styles4.css. Le corps du document contient deux balises <p>. Un attribut id identifie de façon unique la première balise <p>.

Il ne reste plus qu’à définir le sélecteur fantaisie dans la feuille de styles. Le mot fantaisie est précédé d’un #, ce qui le mettra en relation avec la balise dont l’attribut id a pour valeur fantaisie. Et donc avec notre première balise <p>. Pour bien différentier le texte d’id fantaisie, nous définissons une police fantasy, un style italique et une taille de caractères égale à 30 pixels :

Il ne reste plus qu’à afficher le document HTML dans un navigateur. Voici le résultat :


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

Avant d’aller plus loin dans l’utilisation du langage CSS, nous allons marquer une pause pour définir ou rappeler quelques termes techniques qui seront utilisés tout au long de cette formation.

Une balise HTML est encadrée par les caractères “<” et “>“. Elle peut comporter un ou plusieurs attributs auxquels on affecte une valeur, généralement spécifiée entre guillemets. Par exemple, cette balise <a> contient deux attributs : href et target. Le premier précise l’adresse URL du lien et le deuxième indique que la page correspondante devra s’ouvrir dans une fenêtre secondaire :

<a href="https://www.mediaforma.com" target="_blank">Mediaforma</a>

Dans une feuille de styles (interne ou externe), on redéfinit une ou plusieurs propriétés en leur affectant des valeurs. Ici par exemple, trois propriétés sont redéfinies dans la balise h1 :

  • la valeur red est affectée à la propriété color ;
  • la valeur 50px est affectée à la propriété font-size ;
  • la valeur bold est affectée à la propriété font-style :
h1
 {
 color: red;
  font-size: 50px;
  font-style: bold;
 }

Pour faciliter la lisibilité du code, chaque couple propriété/valeur est généralement placé sur une ligne qui lui est propre. Mais si vous le souhaitez, il est possible de tout rassembler sur une seule ligne :

h1 {color: red; font-size: 50px; font-style: bold; }

Lorsqu’un style est redéfini à l’intérieur d’une balise HTML, on utilise l’attribut style suivi du signe “=“. Les couples propriété/valeur sont placés entre guillemets et séparés entre eux par des “;” :

<h1 style="color: red; font-size: 50px; font-style: bold; ">Texte</h1>


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.

 


Cette rubrique va vous montrer comment centrer horizontalement une balise <div> en utilisant quelques lignes de CSS. Dans cet exemple, la balise <div> contient quelques lignes de texte, mais vous auriez tout aussi bien pu y placer d’autres éléments, comme des images et/ou des vidéos par exemple.

La balise <div> est de style aucentre. Le centrage de la balise se fera donc dans la classe aucentre. Pour bien discerner les limites de la balise <div>, un arrière-plan de couleur jaune et une bordure groove continue de couleur rouge sont définis. La largeur de la balise est fixée à 300 pixels. L’astuce réside dans l’utilisation de la propriété margin, qui fixe les marges de la balise. Dans cet exemple, les marges supérieure et inférieure sont nulles et les marges gauche et droite s’adaptent automatiquement aux autres caractéristiques de la balise. Etant donné que la largeur de la balise a été fixée à 300 pixels, les marges gauche et droite se répartissent également la place restante.

Voici le résultat dans Internet Explorer :