Les attributs d’une balise HTML

Contenu du cours

A propos des attributs d'une balise HTML
Liste des attributs les plus utilisés
Attributs de quelques balises usuelles

1. A propos des attributs d'une balise HTML

Un attribut d'une balise HTML est un élément supplémentaire qui peut être ajouté à la balise pour fournir des informations supplémentaires ou définir certains comportements spécifiques pour cet élément. Les attributs sont définis à l'intérieur de la balise d'ouverture et peuvent avoir différentes valeurs en fonction de leur but.

2. Liste des attributs les plus utilisés

Voici quelques-uns des attributs couramment utilisés dans les balises HTML :

id : Définit un identifiant unique pour l'élément. Cet attribut est souvent utilisé pour cibler spécifiquement un élément avec des styles CSS ou des scripts JavaScript.
class : Définit une ou plusieurs classes pour l'élément. Les classes sont utilisées pour regrouper des éléments similaires et appliquer des styles CSS à plusieurs éléments en même temps.
style : Permet de spécifier des styles CSS en ligne pour l'élément. Cela peut inclure des propriétés telles que la couleur du texte, la taille de la police, les marges, etc.
src : Utilisé principalement dans les balises d'images (<img>) et les balises de médias (<audio>, <video>) pour spécifier l'URL de la source du contenu.
href : Utilisé dans la balise <a> pour spécifier l'URL de destination du lien hypertexte.
alt : Utilisé dans les balises d'images (<img>) pour fournir un texte alternatif qui s'affiche lorsque l'image ne peut pas être chargée ou lue.
title : Définit un texte d'infobulle qui apparaît lorsque l'utilisateur survole l'élément.
disabled : Désactive un élément interactif, tel qu'un bouton ou un champ de saisie.
checked : Coche une case d'option par défaut dans les éléments de formulaire (<input type="radio">, <input type="checkbox">).
placeholder : Fournit un texte indicatif à afficher dans un champ de saisie avant que l'utilisateur y entre des données.
target : Utilisé dans la balise <a> pour spécifier où ouvrir le lien (par exemple, dans une nouvelle fenêtre ou un nouvel onglet).
colspan et rowspan : Utilisés dans les balises de table (<td>, <th>) pour spécifier le nombre de colonnes ou de lignes qu'une cellule doit occuper.

Notez bien que: ceci n'est qu'une petite sélection des attributs disponibles en HTML. Il en existe de nombreux autres, chacun ayant son propre rôle et sa propre utilisation spécifique. Il est important de se référer à la documentation officielle de HTML: https://www.w3.org/TR/html52/ ou à des ressources en ligne pour une liste complète des attributs disponibles pour chaque balise.

3. Attributs de quelques balises usuelles

3.1 Les attributs de la balise body

La balise <body> en HTML est utilisée pour englober tout le contenu visible d'une page web. Voici quelques-uns des attributs couramment utilisés dans la balise <body> :

background : Définit une image de fond pour la page.
bgcolor : Définit une couleur d'arrière-plan pour la page en utilisant un code hexadécimal ou un nom de couleur.
text : Définit la couleur du texte dans la page en utilisant un code hexadécimal ou un nom de couleur.
link : Définit la couleur des liens non visités dans la page en utilisant un code hexadécimal ou un nom de couleur.
alink : Définit la couleur des liens activés (lorsqu'ils sont cliqués) dans la page en utilisant un code hexadécimal ou un nom de couleur.
leftmargin : Définit la marge à gauche
rightmargin : Définit la marge à droite
vlink : Définit la couleur des liens visités dans la page en utilisant un code hexadécimal ou un nom de couleur.
onload: Définit un script à exécuter lorsque la page est chargée.
onunload: Définit un script à exécuter lorsque la page est déchargée (lorsque l'utilisateur quitte la page).

Exemple (attribut background)

<body background="fond.jpg">
    <!-- Le contenu de la page -->
</body>

</body>

Exemple (attribut bgcolor)

<body bgcolor="#f0f0f0">
    <!-- Le contenu de la page -->
</body>

</body>

Exemple (attribut text)

<body text="blue">
    <!-- Le contenu de la page -->
</body>

</body>

Exemple (attribut link)

<body link="green">
    <!-- Le contenu de la page -->
</body>

</body>

Exemple (attribut alink)

<body alink="red">
    <!-- Le contenu de la page -->
</body>

</body>

Exemple (attribut vlink)

<body vlink="purple">
    <!-- Le contenu de la page -->
</body>

</body>

Exemple (attribut onload)

<!DOCTYPE html>
<html>
<head>
    <title>Exemple de fonction JavaScript</title>
    <script>
        function maFonction() {
            // Code de votre fonction ici
            console.log("La fonction maFonction() a été appelée lors du chargement de la page.");
            // Vous pouvez ajouter d'autres actions à exécuter lors du chargement de la page
        }
    </script>
</head>
<body onload="maFonction()">
    <!-- Le contenu de la page -->
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Exemple de fonction JavaScript</title>

function maFonction() {

// Code de votre fonction ici

console.log("La fonction maFonction() a été appelée lors du chargement de la page.");

// Vous pouvez ajouter d'autres actions à exécuter lors du chargement de la page

}

</script>

</head>

</body>

</html>

Notez bien que: ces attributs sont quelques-unes des options couramment utilisées pour personnaliser l'apparence et le comportement de la page contenue dans la balise <body>. Cependant, il est essentiel de noter que l'utilisation d'attributs de présentation (comme background, bgcolor, text, etc.) est considérée comme obsolète en HTML5. Il est préférable d'utiliser des styles CSS pour contrôler l'apparence de votre page web.

3.2 Les attributs de la balise paragraphe <p>

La balise <p> est utilisée pour créer des paragraphes dans une page HTML et qu'elle est destinée à contenir du texte et non d'autres éléments HTML. Utilisez ces attributs judicieusement pour améliorer la sémantique et la présentation de votre contenu et la mise en forme visuelle. Voici la liste complète des attributs de la balise

align: Définissait l'alignement du paragraphe par rapport à l'élément parent ou à d'autres éléments. Les valeurs possibles étaient "left" (gauche), "right" (droite), "center" (centre) ou "justify" (justifié).
class: Définissait une ou plusieurs classes pour le paragraphe, permettant une mise en forme spécifique avec des styles CSS ou l'utilisation de sélecteurs JavaScript.
dir: Définissait la direction du texte du paragraphe. Les valeurs possibles étaient "ltr" (de gauche à droite) ou "rtl" (de droite à gauche).
id: Définissait un identifiant unique pour le paragraphe, permettant de le cibler avec des styles CSS ou des scripts JavaScript.
lang: Définissait la langue principale du contenu du paragraphe en utilisant un code de langue spécifique.
style: Définissait des styles en ligne pour le paragraphe, permettant de personnaliser sa présentation visuelle.
title: Définissait un texte descriptif qui s'affichait sous forme d'infobulle lorsque l'utilisateur survolait le paragraphe.

Exemple (attribut align)

<p align="center">Ce paragraphe est centré.</p>

1	<p align="center">Ce paragraphe est centré.</p>

Exemple (attribut id)

<p id="paragraphe-1">Ce paragraphe a un identifiant unique.</p>

1	<p id="paragraphe-1">Ce paragraphe a un identifiant unique.</p>

Exemple (attribut lang)

<p lang="es">Este es un párrafo en español. (C'est un paragraphe en espagnol.)</p>

1	<p lang="es">Este es un párrafo en español. (C'est un paragraphe en espagnol.)</p>

Exemple (attribut style)

<p style="font-size: 20px; color: blue;">Ce paragraphe a une taille de police de 20px et une couleur bleue.</p>

1	<p style="font-size: 20px; color: blue;">Ce paragraphe a une taille de police de 20px et une couleur bleue.</p>

Exemple (attribut title)

<p title="Ceci est un paragraphe informatif">Passez la souris ici pour afficher une infobulle.</p>

1	<p title="Ceci est un paragraphe informatif">Passez la souris ici pour afficher une infobulle.</p>

Younes Derfoufi
CRMEF OUJDA

Post Views: 576

Acheter sur Très Facile !

Les attributs d'une balise HTML

1. A propos des attributs d'une balise HTML

2. Liste des attributs les plus utilisés

3. Attributs de quelques balises usuelles

3.1 Les attributs de la balise body

Exemple (attribut background)

Exemple (attribut bgcolor)

Exemple (attribut text)

Exemple (attribut link)

Exemple (attribut alink)

Exemple (attribut vlink)

Exemple (attribut onload)

3.2 Les attributs de la balise paragraphe <p>

Exemple (attribut align)

Exemple (attribut id)

Exemple (attribut lang)

Exemple (attribut style)

Exemple (attribut title)

Apprendre l'Informatique avec Python - Méthodes et exercices - MPSI-PCSI

Python pour Excel: Automatisation et Analyse des Données

Créer Votre Site Avec WordPress : Un Guide Pratique

Leave a Reply Cancel reply