Les attributs fournissent des informations supplémentaires aux éléments HTML.
Table des matières
- Attributs HTML
- attribut href
- attribut source
- Propriétés de largeur et de hauteur
- attribut alternatif
- Attribut de style
- attribut langue
- Nom d'attribut
- Guillemets simples ou doubles ?
- résumé du chapitre
Attributs HTML
- En HTML tous les éléments peuvent avoir des attributs.
- L'établissement fournit des informations supplémentaires. sur la composition
- L'attribut est toujours spécifié dans la balise par défaut.
- Les attributs généralement sont en paires nom / valeur exemple : name="value" .
attribut href
La balise <a>définit l' attribut de lien hypertexte hrefspécifie l'URL de la page qui renvoie a :
Exemple
<a href="Noblichete.blogspot.com">Visite </a>
Vous en apprendrez plus sur les liens dans notre chapitre sur les liens HTML .
attribut source
La balise <img>permet d'intégrer une image dans une page HTML. L'attribut SRC désigne le chemin vers l'image à afficher :
Exemple
<img src="img_girl.jpg">
Il existe deux manières de spécifier une URL dans src un attribut :
1. URL absolue - Liens vers des images externes hébergées sur d'autres sites Web, par exemple : src="https://www.noblichete.girl.jpg " .
Remarque : Les images externes peuvent être soumises à des droits d'auteur. Si vous n'êtes pas autorisé à utiliser Vous enfreignez peut-être les lois sur le droit d'auteur. De plus, vous n'avez aucun contrôle sur les images externes. Il peut être retiré ou modifié immédiatement.
2. URL relative - Un lien vers une image hébergée sur le site Web . Ici, l'URL n'inclut pas le nom de domaine . Si l'URL commence sans barre oblique, elle est relative à la page actuelle. Exemple : src="img_girl.jpg" . Si l'URL commence par une barre oblique, elle est relative au domaine. Exemple : src="/images/img_girl.jpg".
Conseil : Il est préférable d'utiliser des URL relatives. Il ne se cassera pas si vous changez de domaine.
Propriétés de largeur et de hauteur
La balise <img>doit avoir un attribut widthet et height qui spécifie la largeur et la hauteur de l'image. (en pixels):
Exemple
<img src="img_girl.jpg" width="500" height="600">
attribut alternatif
ALT Obligatoire de <img> la balise spécifie le texte alternatif de l'image. Si l'image ne peut pas être affichée pour une raison quelconque Cela peut être dû à des connexions lentes. ou des erreurs dans les Attributs src , ou si l'utilisateur utilise un lecteur d'écran.
Exemple
<img src="img_girl.jpg" alt="Girl wh a jacket">
Exemple
Voyez ce qui se passe si nous essayons d'afficher une image inexistante :
<img src="img_typo.jpg" alt="Girl wita jacket">
Vous en apprendrez plus sur les images dans notre chapitre Images HTML .
Attribut de style
Cet attribut style utilisé pour ajouter du style aux éléments comme les couleurs, les polices, les tailles, etc.
Exemple
<p style="color:red;">This is a red paragraph.</p>
Vous en apprendrez plus sur les styles dans notre chapitre Styles HTML .
attribut langue
lang Les attributs doivent <html>toujours être inclus dans les balises pour déclarer la langue de la page Web. Il est destiné à aider les moteurs de recherche et les navigateurs.
L'exemple suivant spécifie l'anglais comme langue :
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Le code pays est également ajouté au code langue dans lang ainsi les deux premiers caractères définissent la langue de la page HTML et les deux derniers caractères définissent le pays.
L'exemple suivant spécifie l'anglais comme langue et les États-Unis comme pays :
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Vous pouvez voir tous les codes de langue dans Notre référence de code HTML
Nom d'attribut
L'attribut titledéfinit des informations supplémentaires sur un élément.
La valeur de l'attribut title s'affiche sous forme d'info-bulle lorsque vous survolez un élément :
Exemple
<p title="I'm a tooltip">This is a paragraph.</p>
Nous recommandons : Utilisez toujours des attributs en minuscules.
L'attribut title (et tous les autres attributs) peuvent être en majuscules ou en minuscules, comme title ou TITLE .
Cependant, NoblicheTech recommande les attributs en minuscules dans HTML et exige des attributs en minuscules pour les types de documents plus restreints tels que XHTML.
Chez NoblicheTech, nous utilisons toujours des noms d'attributs en minuscules.
Nous vous recommandons : Toujours enchérir sur les attributs.
La norme HTML n'exige pas de guillemets autour des valeurs d'attribut.
Cependant, le recommande les citations au format HTML et exige des citations pour les types de documents plus précis tels que XHTML.
bien:
<a href="noblichete.blogspot.com">Visit our ( notre ) HTML tutorial</a>
mal:
<a href=noblichete.blogspot.com>Visit our ( notre ) HTML tutorial</a>
Parfois, vous devez utiliser des guillemets. Cet exemple n'affichera pas correctement l'attribut title car il contient des espaces :
Exemple
<p title=About NoblicheTech>
Chez NoblicheTech, nous utilisons toujours des guillemets autour des valeurs d'attribut.
Guillemets simples ou doubles ?
Les guillemets doubles autour des valeurs d'attribut sont couramment utilisés en HTML, mais les guillemets simples peuvent également être utilisés.
dans certaines situations lorsque la valeur de l'attribut elle-même contient des guillemets doubles Des guillemets simples sont requis :
<p title='John "ShotGu" Nelson'>
ou vice versa:
<p title="John 'ShotGun' Nelson">
résumé du chapitre
En HTML tous les éléments peuvent avoir des attributs.
L'attribut spécifie href est <a>URL de la page liée.
L'attribut src désigne <img>le chemin vers l'image à afficher.
widthet la fonctionnalité height <img>fournir des informations de taille pour les images.
Fonctionnalité alt <img>fournir un texte alternatif pour les images
Cet attribut style utilisé pour ajouter du style aux éléments tels que les couleurs, les polices, les tailles, etc.
Attribut de balise de déclaration de langue de la page Web lang.<html>
L'attribut title désigne des informations supplémentaires sur un élément.