HTML Attributes - Tutoriel

Introduction

Les attributs HTML fournissent des informations supplémentaires sur les éléments HTML. Chaque attribut a un nom et une valeur, et ils sont utilisés pour configurer ou ajuster le comportement des éléments. Ce tutoriel explore certains des attributs HTML couramment utilisés.

Exemples

Exemple 1 : Attribut "src" pour les Images

Utilisation de l'attribut "src" pour spécifier la source d'une image :

       <img src="chemin_de_l_image.jpg" alt="Description de l'image">

Exemple 2 : Attribut "href" pour les Liens

Création d'un lien hypertexte avec l'attribut "href" :

       <a href="https://www.example.com">Visitez Example.com</a>

Exercices avec Corrections

Exercice 1 : Attribut "style" pour le Texte

Utilisez l'attribut "style" pour rendre un texte en gras.

       <p style="font-weight: bold;">Texte en gras</p>

Tutoriel HTML Attribu

Les attributs HTML sont des informations supplémentaires qui peuvent être ajoutées à un élément pour modifier son comportement ou son apparence. Ils sont toujours définis dans l'élément ouvrant, entre des guillemets doubles.

Les noms des attributs

Les noms des attributs sont en lettres minuscules. Ils sont généralement descriptifs du but de l'attribut. Par exemple, l'attribut href définit l'adresse d'un lien hypertexte.

Les valeurs des attributs

Les valeurs des attributs peuvent être des chaînes de caractères, des nombres, des listes ou des objets. Par exemple, la valeur de l'attribut href est une URL.

Les paires nom/valeur

Les attributs sont toujours définis sous la forme d'une paire nom/valeur. Le nom de l'attribut est suivi d'un signe égal (=) et de la valeur de l'attribut.

Les attributs facultatifs

La plupart des attributs sont facultatifs. Cela signifie qu'ils peuvent être omis sans affecter le comportement ou l'apparence de l'élément.

Exemples d'attributs

Voici quelques exemples d'attributs HTML courants :

L'attribut href définit l'adresse d'un lien hypertexte.

<a href="https://www.example.com">Lien vers example.com</a>

Utilisez le code avec précaution. En savoir plus

L'attribut src définit l'adresse d'une image.

<img src="image.jpg" alt="Image de chat">

Utilisez le code avec précaution. En savoir plus

L'attribut style définit le style d'un élément.

<p style="color:red; font-size:18px;">Ce paragraphe est en rouge et en grand</p>

Utilisez le code avec précaution. En savoir plus

L'attribut class permet de regrouper des éléments ensemble.

<p class="important">Ce paragraphe est important</p>

Utilisez le code avec précaution.

Exercice

Modifiez la page web que vous avez créée dans l'exercice du tutoriel "HTML Elements" pour ajouter les attributs suivants :

style="color:red; font-size:18px;" au paragraphe
href="https://www.example.com" au lien
alt="Image de chat" à l'image

Testez votre page web en la ouvrant dans un navigateur.

Questions à Choix Multiple (QCM)

Quel attribut est utilisé pour spécifier la source d'une image?
- A. alt
- B. src
- C. href
Réponse correcte : B

Questions & Réponses

Question : Comment utilisez-vous l'attribut "alt" pour les images?

Réponse : L'attribut "alt" fournit un texte descriptif pour l'image, important pour l'accessibilité et l'affichage si l'image ne peut pas être chargée.

Études de Cas

Cas d'utilisation : Attribut "class" pour la Mise en Forme

Ajoutez la classe "highlight" à un paragraphe pour le mettre en surbrillance avec du CSS.

       <p class="highlight">Texte en surbrillance</p>

Éléments à Retenir

Les attributs fournissent des informations supplémentaires sur les éléments HTML.
L'attribut "src" spécifie la source, "href" est utilisé pour les liens, et "alt" fournit une description alternative.
L'attribut "style" peut être utilisé pour appliquer des styles en ligne.

Proposition d'un Examen avec Correction

Quel attribut est utilisé pour spécifier la source d'une image?
- A. alt
- B. src
- C. href
Correction : B

Afficher le Contenu de la Réponse sous Forme d'une Page HTML

       <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Réponses HTML Attributes</title>
        </head>
        <body>
            <!-- Insérez ici le contenu des réponses sous forme de balises HTML -->
        </body>
        </html>