Les attributs facultatifs de la balise img incluent : Balises HTML pour insérer des images, des images en HTML

Étiqueter IMG conçu pour afficher des images sur une page Web sous forme graphique Format GIF, JPEG ou PNG. Cette balise a un seul paramètre obligatoire, src , qui spécifie l'adresse du fichier contenant l'image. Si nécessaire, le dessin peut être lié à un autre fichier en plaçant une balise IMG dans le conteneur A. Parallèlement, une bordure s'affiche autour de l'image, qui peut être supprimée en ajoutant le paramètre border=0 à la balise IMG.

Les images peuvent également être utilisées comme cartes d'images, où l'image contient des points chauds qui agissent comme des liens. Une telle carte apparence n'est pas différente d'une image ordinaire, mais en même temps elle peut être divisée en zones invisibles de formes différentes, où chacune des zones sert de lien.

Syntaxe

Balise de fermeture
Pas obligatoire.

Possibilités
aligner - détermine comment l'image sera alignée le long du bord et comment le texte s'enroulera.
alt - texte alternatif pour l'image.
bordure - l'épaisseur du cadre autour de l'image.
hauteur - hauteur de l'image.
hspace - espace horizontal de l'image au contenu environnant.
ismap - indique au navigateur que l'image est une image cliquable côté serveur.
lowsrc - chemin d'accès au fichier graphique basse résolution pour un affichage préliminaire.
src - chemin d'accès au fichier graphique.
vspace - espace vertical de l'image au contenu environnant.
largeur - largeur de l'image.
usemap - lien vers la balise MAP contenant les coordonnées de la carte image client.

Exemple 1 : Utilisation de la balise IMG

Lorem ipsum dolor assis amet...

Description des paramètres de la balise IMG

Paramètre ALIGN

Description
Pour les images, vous pouvez spécifier leur position par rapport au texte ou à d'autres images sur la page Web. La façon dont les images sont alignées est spécifiée par le paramètre align de la balise IMG.

Syntaxe

Arguments
Le tableau 1 répertorie les valeurs possibles du paramètre align et le résultat de son utilisation.

Les options les plus populaires sont left et right , qui créent un habillage du texte autour de l'image. Pour éviter que le texte ne s'adapte parfaitement à l'image, il est recommandé d'ajouter les paramètres hspace et vspace dans la balise IMG, qui spécifient la distance au texte en pixels.

Bien que toutes les valeurs du paramètre align soient prises en charge par les navigateurs, les arguments absbottom , absmiddle , baseline et texttop ne sont pas décrits dans la spécification HTML 4.

Valeur par défaut
bas

Exemple 2 : Aligner une image

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Paramètre ALT

Description
Le paramètre alt définit un texte alternatif pour les images. Ce texte vous permet d'obtenir informations textuelles sur le dessin lorsque le chargement de l'image est désactivé dans le navigateur. Étant donné que les images sont chargées une fois que le navigateur a reçu des informations à leur sujet, le texte de remplacement de l'image apparaît plus tôt. Et au fur et à mesure du chargement, le texte sera remplacé par une image.

Les navigateurs affichent également du texte alternatif sous forme d'info-bulle lorsque vous passez votre souris sur une image.

Syntaxe

Arguments
Toute chaîne de texte appropriée. Il doit être placé entre guillemets doubles ou simples.

Valeur par défaut
Non.

Exemple 3 : ajout d'un texte alternatif

alt="(!LANG :Retour à la page principale" !}>

Paramètre BORDURE

Description
Une image placée sur une page Web peut être placée dans un cadre de différentes largeurs. Cela se fait en utilisant le paramètre border de la balise IMG. Par défaut, il n'y a pas de bordure autour d'une image sauf si l'image est un lien. Dans ce cas, la couleur de la bordure correspond à la couleur du texte spécifiée à l'aide du paramètre de style ou de texte de la balise BODY.

Syntaxe

Arguments

Valeur par défaut
0

Exemple 3. Cadre autour de l'image

cadre vert de 2 pixels d'épaisseur

Paramètres HAUTEUR et LARGEUR

Description
Pour redimensionner une image en HTML, les paramètres de largeur et de hauteur sont fournis. Vous pouvez utiliser des valeurs en pixels ou en pourcentages. Si l'entrée en pourcentage est définie, les dimensions de l'image sont calculées par rapport à l'élément parent - le conteneur où se trouve la balise IMG. S'il n'y a pas de conteneur parent, la fenêtre du navigateur fait office de conteneur. En d’autres termes, width=100% signifie que l’image sera étirée sur toute la largeur de la page Web. L'ajout d'un seul paramètre de largeur ou de hauteur préserve les proportions et les proportions de l'image. Le navigateur attend que l'image soit complètement chargée pour déterminer sa hauteur et sa largeur d'origine.

Assurez-vous de définir les dimensions de toutes les images de la page Web. Cela rend le chargement de la page un peu plus rapide car le navigateur n'a pas besoin de calculer la taille de chaque image après l'avoir reçue. Cette déclaration est particulièrement importante pour les images placées dans un tableau.

La largeur et la hauteur de l'image peuvent être modifiées plus ou moins grandes. Cependant, cela n'affecte en rien la vitesse de chargement de l'image, puisque la taille du fichier reste inchangée. Par conséquent, effectuez un zoom arrière avec prudence car... Cela peut semer la confusion parmi les lecteurs quant à la raison pour laquelle une si petite image prend si longtemps à se charger. Mais augmenter la taille entraîne l'effet inverse : la taille de l'image est grande, mais le fichier se charge plus rapidement par rapport à une image de même taille. Mais la qualité du dessin se dégrade.

Syntaxe

Arguments
Tout entier positif en pixels ou en pourcentage.

Valeur par défaut
La largeur ou la hauteur d'origine de l'image.

Exemple 4 : Dimensions de l'image

Paramètre HSPACE et VSPACE

Description
Pour n'importe quelle image, vous pouvez définir des marges horizontales et verticales invisibles à l'aide des paramètres hspace et vspace. Cela est particulièrement vrai lorsque le texte entoure une image. Dans ce cas, pour que le texte ne « coule » pas étroitement sur l'image, il est nécessaire d'ajouter un espace vide autour de celle-ci.

Syntaxe

Arguments
Tout nombre entier positif en pixels.

Valeur par défaut
0

Exemple 5. Retraits de l'image

Paramètre ISMAP

Description
Le paramètre ismap indique au navigateur que l'image est une image cliquable côté serveur. Les cartes d'images vous permettent de lier des liens vers différentes zones de la même image. Mis en œuvre en deux diverses options- serveur et client. Lors de l'utilisation de l'option serveur, le navigateur envoie une requête au serveur pour obtenir l'adresse du lien sélectionné et attend une réponse avec les informations requises. Cette approche nécessite un temps supplémentaire pour attendre le résultat et fichiers séparés pour chaque carte image.

L'envoi de données au serveur s'effectue comme suit. Vous devez placer la balise IMG dans le conteneur A, où vous devez spécifier l'adresse du programme CGI comme valeur du paramètre href. Le programme analyse les coordonnées de clic de souris reçues, calculées à partir du coin supérieur gauche de l'image, et renvoie la page Web requise.

Syntaxe

Arguments
Non.

Valeur par défaut
Par défaut, cette option est désactivée.

Exemple 6. Dessiner sous forme d'image cliquable

Si l'utilisateur a défini les coordonnées de la souris sur l'image sur 100, 50, après avoir cliqué sur le lien, le fichier sera ouvert à l'adresse http://www.htmlbook.ru/cgi-bin/map.cgi?100,50. Les derniers chiffres sont transférés au programme CGI à l'aide de la méthode GET et interprétés sur le serveur.

Paramètre LOWSRC

Description
Le paramètre lowsrc est utilisé pour afficher une image de faible qualité avant que l'image finale ne soit complètement chargée. Cette approche vise à réduire le temps d’attente des utilisateurs. On lui montre d'abord une image basse résolution ou un dessin en noir et blanc, qui se charge rapidement en raison de la petite taille initiale du fichier. Pendant que l'utilisateur la regarde, l'image se charge bonne qualité, qui remplace progressivement celui d'origine. Les tailles de ces images doivent être les mêmes.

Syntaxe

Arguments

Valeur par défaut
Non.

Exemple 7. Chemin vers un dessin de mauvaise qualité

Paramètre SRC

Description
Adresse fichier graphique, qui sera affiché sur la page Web. Les fichiers les plus populaires sont au format GIF et JPEG.

Syntaxe

Arguments
La valeur est le chemin complet ou relatif du fichier.

Valeur par défaut
Non.

Exemple 8. Chemin d'accès au fichier graphique

Description

Étiqueter conçu pour afficher des images au format graphique GIF, JPEG ou PNG sur une page Web. L'adresse du fichier image est spécifiée via l'attribut src. Si nécessaire, le dessin peut être lié à un autre fichier en plaçant la balise dans un conteneur . .

Utiliser un attribut que vous connaissez déjà aligner vous pouvez contrôler l'alignement des images par rapport aux autres éléments de la page html. À l'attribut aligner il y a plusieurs significations, mais nous sommes les plus à l'heure actuelle Deux m'intéressent :

• gauche- l'image est située sur le bord gauche de la page, et le texte circule autour de l'image à droite ;


• droite- l'image est située sur le bord droit de la page, et le texte et d'autres éléments circulent autour de l'image à gauche.

Par exemple, le code HTML

le navigateur s'affichera comme ceci

Et ce code HTML :

ressemblera à ceci :

Pour empêcher le texte de s'enrouler autour d'une image, vous pouvez utiliser la balise BR(qui nous est familier grâce à la section précédente). À l'étiquette BR il y a un attribut clair, qui peut prendre trois valeurs :

• gauche- arrêter le texte qui entoure les images alignées à gauche ;


• droite- arrêter le texte qui entoure les images alignées à droite ;


• tous- Arrêtez l'enroulement du texte autour des images alignées à gauche et à droite.

Insérer une image:

Description et utilisation

Étiqueter insère une image dans un document HTML.

Notez que les images ne sont techniquement pas insérées dans la page. En fait, les images renvoient vers des pages HTML. Étiqueter crée un conteneur pour l'image.

À l'étiquette deux attributs obligatoires : src et alt.

Différence entre HTML et XHTML

Dans la balise HTML n'a pas de balise de fermeture.

Dans la balise XHTML doit être correctement fermé.

Les attributs "align", "border", "hspace" et "vspace" de l'élément img sont obsolètes et ne sont pas pris en charge dans XHTML 1.0 Strict.

Conseil: L'attribut alt est utilisé comme texte alternatif lorsqu'il n'y a pas d'image, plutôt que comme texte survolé par la souris. Pour afficher du texte lorsque vous survolez une image, utilisez l'attribut title. Comme ça: .

Attributs requis

Attributs facultatifs

Attributs standards

Attributs d'événement

De nos jours, presque aucun site Web ne peut se passer d’images dans les pages HTML, car comme le dit la sagesse populaire : « Il vaut mieux voir une fois qu’entendre cent fois ». Après avoir lu cet article, vous apprendrez à utiliser la balise IMG, qui permet d'ajouter des images aux pages d'un site Web. Nous considérerons des exemples pour HTML 5, mais ils fonctionneront également pour les versions antérieures du langage de balisage hypertexte.

Comment insérer une image dans une page HTML

Pour insérer une image dans une page, utilisez la balise HTML IMG. Pour une image, au moins deux attributs doivent être spécifiés : src (chemin d'accès au fichier contenant l'image) et alt (texte alternatif que l'utilisateur voit si l'image n'est pas chargée). L'attribut alt peut être vide, mais doit être présent. Vous pouvez également définir l'attribut title, puis lorsque vous survolez l'image, le texte spécifié dans cet attribut sera affiché.

Si le fichier avec l'image se trouve dans le même dossier que la page sur laquelle il est chargé, alors attribut src Vous pouvez uniquement spécifier le nom du fichier, par exemple :

Si la page se trouve à l'adresse http://www..html et que l'image est http://www..jpg, le chemin d'accès à l'image est spécifié comme suit :

Si la page se trouve dans le dossier http://www..site/logo.jpg, alors le chemin ressemblera à ceci :

Si l'image se trouve dans le dossier http://www.site/images/, quel que soit le dossier dans lequel se trouve la page du même site dans lequel l'image est insérée, le chemin d'accès au fichier peut être spécifié comme suit :

Ou vous pouvez spécifier le chemin complet du fichier image s'il se trouve sur un autre site :

Largeur et hauteur de l'image

Dans les versions antérieures de HTML, la hauteur et la largeur étaient définies à l'aide des attributs width et height, mais désormais tout ce qui affecte l'affichage de l'image est défini avec en utilisant CSS dans l'attribut style. Le plus souvent, la largeur et la hauteur sont spécifiées en pixels :

Si la largeur et la hauteur ne sont pas précisées, l'image sera affichée dans sa taille d'origine. Si les valeurs sont inférieures aux dimensions d'origine, le navigateur affichera l'image sous une forme réduite ; si les valeurs sont plus grandes, le navigateur étendra l'image aux dimensions spécifiées, mais dans dans ce cas l'image sera moins claire. Afin de ne pas déformer accidentellement l'image, vous pouvez définir, par exemple, uniquement la hauteur, puis la largeur sera réduite ou augmentée proportionnellement à la valeur de hauteur spécifiée.

En outre, la largeur et la hauteur peuvent être spécifiées sous forme de pourcentage de la largeur ou de la hauteur de la fenêtre du navigateur ou de tout élément de bloc dans lequel se trouve l'image :

Habillage d'image dans le texte et l'indentation

Par défaut, le texte est affiché sous l'image. Pour que le texte s'enroule autour de l'image, la propriété CSS float est utilisée, qui remplace l'attribut align. Si nous voulons que l'image soit à gauche du texte et que le texte s'enroule autour d'elle vers la droite et en dessous, définissez la valeur à gauche pour Propriétés CSS float, et si l'image doit être à droite, alors la valeur right est indiquée :

Vous pouvez également définir des retraits en haut, à droite, en bas et à gauche de l'image :

La même chose peut être formulée sous une forme abrégée :

Vous pouvez également définir les marges verticales et horizontales à l'aide de deux valeurs de propriété de marge au lieu des anciens attributs vspace et hspace. Disons que nous avons besoin d'une marge de 10 pixels en haut et en bas, et de 8 pixels à gauche et à droite :

Comment faire d'une image un lien vers une page

Ou nous pouvons définir notre propre couleur, type et épaisseur du cadre photo :

Formats d'images pour le Web

En règle générale, les sites Web utilisent plusieurs formats d'image. Utilisé pour les photographies Format JPEG, si vous avez besoin que l'image soit avec fond transparent, alors le format PNG est utilisé. Auparavant, le format GIF était utilisé à la place du format PNG, mais il est déjà obsolète - son seul avantage est la possibilité de créer des images animées. En règle générale, les formats PNG et GIF sont utilisés uniquement comme éléments de conception et uniquement dans les cas où l'image doit comporter des zones transparentes ou être translucide. Étant donné que les fichiers dans ces formats sont de très grande taille, leur utilisation n'est pas recommandée pour les photographies ordinaires - il existe un format JPEG pour cela. Avant de télécharger des images sur le site, il convient de réduire leur largeur et leur hauteur à la taille dans laquelle elles seront affichées sur le site afin qu'elles se chargent plus rapidement pour les utilisateurs.

La copie de l'article est interdite.