Balises HTML pour insérer des images, des images dans HTML. Image en HTML - tout sur la balise IMG

Les images sur les pages Web peuvent être utilisées de deux manières : comme arrière-plan et comme image indépendante. Il est recommandé d'utiliser trois formats graphiques : JPEG, GIF et PNG. Tous les navigateurs les prennent en charge ; d'autres formats peuvent nécessiter des outils spéciaux.

En règle générale, toutes les images d'un site sont stockées dans un dossier séparé, par exemple les images. Et les chemins d'accès aux images sont écrits de la même manière que dans les liens. Si vous avez oublié, jetez un œil.

Dans tous les exemples suivants, les chemins d'accès aux images seront écrits sur la base du fait que les images se trouvent dans le dossier images et les pages dans le dossier du site, situé au même niveau.

Images d'arrière-plan

L'image d'arrière-plan remplit tout l'espace de l'élément pour lequel elle est spécifiée. Donc, en précisant dans la balise attribut background="fon.gif", l'image fon.gif remplira toute la fenêtre du navigateur.

Exemple de code : Résultat

Lors de la spécification d'une image de fond de document, n'oubliez pas de spécifier également le paramètre couleurbg. Cela est dû au fait que l'utilisateur peut avoir désactivé le chargement de l'image et ne verra pas votre magnifique arrière-plan. Ensuite le navigateur utilisera le paramètre couleurbg.

Incorporation d'images

La balise est utilisée pour placer des images sur la page , qui a un seul paramètre obligatoire src, qui spécifie l'URL de l'image.

Exemple de code :

img tag Reste du contenu du document

Résultat:

Reste du contenu du document

D'accord, le texte à côté de l'image n'est pas très joli.

Pour que nos images ressemblent à ce que nous souhaitons, nous devons les aligner. Et le paramètre nous aidera avec ça aligner.

Ce paramètre a plusieurs significations. Regardons-les tous avec des exemples.

Exemple de code avec paramètre aligner="gauche"

Balise img avec le paramètre align="left" L'image est à gauche, et le texte circule autour d'elle à droite, et ce texte peut occuper plusieurs lignes.

Résultat:

L'image est à gauche, et le texte l'entoure à droite, et ce texte peut occuper plusieurs lignes.

Exemple de code avec paramètre aligner="droite"

Balise img avec le paramètre align="right" L'image est à droite, et le texte circule autour d'elle à gauche, et ce texte peut occuper plusieurs lignes.

Résultat:

L'image est à droite, et le texte l'entoure à gauche, et ce texte peut occuper plusieurs lignes.

Exemple de code avec paramètre aligner="haut"

balise img avec align="top" La bordure supérieure de l'image est alignée sur l'élément le plus haut de la ligne actuelle. L'image semble incrustée dans la ligne. Si l'image est grande, la ligne est étendue jusqu'à cette hauteur.

Résultat:

La bordure supérieure de l'image est alignée sur l'élément le plus haut de la ligne actuelle. L'image semble incrustée dans la ligne. Si l'image est grande, la ligne est étendue jusqu'à cette hauteur.

Exemple de code avec paramètre align="texttop"

balise img avec align="texttop" La bordure supérieure de l'image est alignée sur l'élément de texte le plus haut de la ligne actuelle (la lettre majuscule de la ligne).

Résultat:

La bordure supérieure de l'image est alignée sur l'élément de texte le plus haut de la ligne actuelle (la lettre majuscule de la ligne).

Exemple de code avec paramètre aligner="milieu"

Balise img avec le paramètre align="middle" Aligne le milieu de l'image sur la ligne de base de la ligne actuelle.

Résultat:

Aligne le milieu de l'image sur la ligne de base de la ligne actuelle. * une grande police est conçue pour rendre plus claire la différence entre le milieu et l'absmiddle

Exemple de code avec paramètre align="absmilieu"

Balise img avec le paramètre align="absmiddle" Aligne le milieu de l'image sur le milieu de la ligne actuelle.

Résultat:

Aligne le milieu de l'image sur le milieu de la ligne actuelle.

Exemple de code avec paramètre aligner="bas"

Balise img avec le paramètre align="bottom" Aligne la bordure inférieure de l'image sur la ligne de base de la ligne actuelle.

Résultat:

Aligne la bordure inférieure de l'image sur la ligne de base de la ligne actuelle.

Exemple de code avec paramètre align="absbas"

Balise img avec le paramètre align="absbottom" Aligne la bordure inférieure de l'image sur la bordure inférieure de la ligne actuelle.

Résultat:

Aligne la bordure inférieure de l'image sur la bordure inférieure de la ligne actuelle.

Si nous voulons que le texte soit situé sous l'image, alors nous devons utiliser la balise
avec paramètre clair, ce qui interdit la circulation. L'emballage peut être interdit du côté droit (droit), du côté gauche (gauche) et des deux côtés (tous).

Exemple de code :

Interdiction de l'habillage d'image
Autres éléments du document

Résultat:

Autres éléments du document

Tailles des images

Toute image a une taille spécifiée en pixels. Lorsque vous intégrez une image sur une page, vous devrez peut-être réduire la taille de l'image d'origine.

A cet effet, la balise il y a des paramètres largeur- largeur et hauteur- hauteur. Ils sont spécifiés en pixels ou en pourcentages (pourcentage de la largeur de l'écran)

Lorsque vous chargez une image, le navigateur redimensionnera automatiquement votre image aux paramètres de largeur et de hauteur spécifiés. Gardez simplement à l’esprit qu’un réglage imprécis des paramètres peut entraîner une modification des proportions de l’image et, par conséquent, sa distorsion.

Exemple de code :

Résultat:

Séparer les images du texte

Vous avez sans doute remarqué que le texte colle très étroitement aux images. Ce n'est pas toujours joli. Il existe des options pour résoudre ce problème espace h- indentation horizontale et espace virtuel- retrait vertical. Les retraits sont spécifiés en pixels.

Exemple de code :

La balise img est en retrait. Le reste du contenu du document n'est plus collé à l'image.

Résultat:

Texte alternatif

Si l'utilisateur a désactivé le mode de chargement d'image, alors au lieu de l'image, il verra une croix rouge (dans Internet Explorer) ou une autre icône (dans d'autres navigateurs). Ce serait bien de lui donner une idée de ce qui est montré sur la photo. Pour ce faire, utilisez le paramètre alt. Le texte de cette option sera affiché à la place de l'image (si le mode de chargement d'image est désactivé). Si l'image est affichée, ce paramètre donne un indice lors du survol du curseur de la souris, mais pas dans tous les navigateurs.

En HTML, les images sont insérées à l'aide d'une balise img.
Étiqueter img- vide, il contient des attributs et n'a pas de balise fermante.

L'attribut est utilisé pour afficher une image sur la page src. SRC vient de la source, ce qui signifie Source. La valeur de l'attribut src est URL images.

La ligne ci-dessus signifie que l'image se trouve dans le même répertoire (dossier) que le fichier HTML lui-même qui renvoie à cette image. Disons que vous avez un dossier HTML, qui contient index.html avec le code ci-dessus et l'image elle-même avec le titre image.jpg.

Dans ce cas, lors de l'ouverture index.html Vous verrez cette image dans votre navigateur. Si vous l'avez ailleurs (un dossier supérieur ou inférieur), vous verrez alors soit un champ blanc, soit un petit rectangle avec une croix rouge (l'image n'a pas pu être chargée).

Les images ne se trouvent pas toujours dans le même répertoire (dossier) que le fichier lui-même, c'est pourquoi la spécification des chemins sera décrite plus précisément un peu plus tard.

Attributs de la balise img

En plus de src, la balise img possède d'autres attributs responsables de la taille de l'image affichée, de sa légende, etc.

src- adresse de l'image
largeur- largeur de l'image
hauteur- hauteur de l'image
titre- signature qui apparaît lorsque vous survolez l'image
alt- texte alternatif. Nécessaire pour le robot de recherche et l'indexation d'images
frontière- épaisseur de la bordure de l'image. 0 - pas de bordure, 1 - bordure la plus fine, etc.

Adresse de l'image insérée (exemples)

En règle générale, photos ne sont pas stockés dans le même dossier que les fichier HTML. A cet effet, un dossier est créé dans le même répertoire photos(ou img, selon le goût et la couleur). Et toutes les images nécessaires y sont déjà placées. Dans le cas d'un stockage séparé, vous devrez spécifier une adresse différente pour l'attribut src

Si le fichier se trouve dans le dossier ci-dessus, alors

Vous pouvez également insérer une image provenant d'un autre site, sans la télécharger dans votre dossier. Pour ce faire, vous devez disposer d'une connexion Internet stable et approximativement du code suivant, dans lequel vous saisissez l'adresse de l'image sur Internet dans l'adresse :

Image d'arrière-plan en HTML

Comme image de fond des fichiers avec des extensions peuvent apparaître gif, jpg, jpeg Et png. Si la taille de l'image est plus petite que la fenêtre du navigateur, l'image continuera automatiquement à remplir l'arrière-plan restant. DANS corps utiliser l'attribut arrière-plan, dans lequel on précise le chemin d'accès à l'image

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 dans l'attribut src vous pouvez spécifier uniquement 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 à l'aide de 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, alors le navigateur affichera l'image sous une forme réduite ; si les valeurs sont plus grandes, alors le navigateur étendra l'image aux dimensions spécifiées, mais dans ce cas l'image sera moins clair. 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 circule autour d'elle vers la droite et en dessous, alors nous définissons la valeur gauche pour la propriété CSS float, et si l'image doit être à droite, alors on précise la bonne valeur :

Le texte du paragraphe va ici

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. Pour les photographies, le format JPEG est utilisé, mais si vous avez besoin que l'image ait un 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.

Tout ce que l'on sait de cet homme, c'est
qu'il n'était pas en prison, mais on ne sait pas pourquoi il n'était pas en prison.
Marc Twain.

Ceci est une leçon sur comment insérer une image en HTML, comment le concevoir, comment enrouler du texte autour d'une image, etc. Après tout, il est connu que les images rendent un site plus attrayant et différent des autres ressources, donc la possibilité d'utiliser une balise et ses attributs est très utile sur l'Internet moderne. Mais l’essentiel ici est le sens des proportions !

Un excès de graphiques alourdira la page HTML et, par conséquent, augmentera son temps de chargement. De plus, la présence d'un grand nombre d'images détournera les visiteurs du contenu principal du site (à moins, bien entendu, que les graphiques constituent le contenu principal du site). Alors, gardez-le avec modération et utilisez-le uniquement là où cela est nécessaire. Et vous serez heureux !

Dans la leçon, j'ai déjà expliqué comment utiliser des images comme arrière-plan d'un document HTML. Parlons maintenant de la façon dont les graphiques sont utilisés dans la « couche supérieure » d'une page HTML.

§ 1. Comment insérer une image

Pour insérer des images en HTML, utilisez la balise IMG Avec obligatoire attribut SRC. Cet attribut indique au navigateur le chemin d'accès au fichier image. Ceux. pour insérer une image avec le nom logo.jpgà un certain endroit de la page (à condition que la page et l'image se trouvent toutes deux dans un dossier(répertoire)), vous devez insérer le code html suivant à cet endroit :

src="logo.jpg">

Si l'image et la page se trouvent dans différent répertoires (dossiers), vous devez alors spécifier le chemin d'accès à l'image relativement pages. Par exemple, si une page html se trouve dans le répertoire (dossier) du site, dans le même répertoire (dossier) se trouve un sous-répertoire (dossier) images, dans lequel se trouve notre image logo.jpg, alors pour l'insérer, vous devez écris comme ceci :

images/logo.jpg">

Ou vous n'avez pas à vous inquiéter et à le signaler adresse complète de la photo. Par exemple, comme ceci :

http://www..png">

Dans ce dernier cas, le navigateur affichera le code comme ceci :

Note. Si l'image se trouve sur votre ordinateur, mais vous souhaitez l'insérer vers la page Internet, alors rien n'en sortira. Pour ce faire, vous devez d'abord déplacer l'image vers un endroit sur Internet(Par exemple, ). Et indiquez l'adresse complète dans le code de la page jusqu'à présent avec une photo.

En plus de l'attribut obligatoire SRCà l'étiquette IMG Il existe quelques attributs facultatifs supplémentaires. Regardons-les de plus près.

§ 2. Préciser la taille de l'image

Commençons par les attributs qui vous permettent de définir dimensions de l'image(plus précisément, prévoir un espace pour ces dimensions sur les pages). Les voici :

• largeur- largeur de l'image en pixels ou en pourcentage ;


• hauteur- la hauteur de l'image en pixels ou pourcentages.

Si ces attributs sont utilisés, il allouera d'abord de l'espace pour les graphiques, préparera la mise en page du document, affichera le texte, puis chargera l'image. En même temps, il placera l'image dans un rectangle de la taille sélectionnée, même si la largeur et la hauteur réelles de l'image sont plus grandes (compression) ou plus petites (étirement). Dans le cas où ces attributs ne sont pas utilisés, le navigateur chargera l'image immédiatement et l'affichage du texte et des autres éléments qui la suivent sera retardé.

La largeur et la hauteur des images peuvent être spécifiées à la fois en pixels (la taille de l’image sera constante quelle que soit la résolution de l’écran) et en pourcentages (la taille de l’image dépendra de la résolution de l’écran de l’utilisateur). Par exemple:

largeur="50" hauteur="20">

largeur="10%" hauteur="5%">

§ 3. Texte alternatif

Si l'utilisateur a désactivé l'affichage des images dans les paramètres du navigateur, au lieu de l'image, un texte alternatif peut être affiché, expliquant quel type de graphiques devrait être présent. Ceci est réalisé en utilisant l'attribut ALT:

Dans ce cas, le navigateur réservera de l'espace sur la page pour l'image, mais au lieu de l'image elle-même, il affichera le texte que vous écrivez dans la valeur de l'attribut. ALT:

Je le répète, cela se produira si l'utilisateur a désactivé l'affichage des graphiques. Sinon, l'image masquera le texte alternatif.

§ 4. Alignement de l'image

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 existe plusieurs significations, mais deux nous intéressent principalement pour le moment :

• 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.

Dans ce document, je vais vous parler des balises HTML très importantes pour insérer des images et des graphiques sur la page, car sans cela, il est difficile de créer un beau et bon site Web.

Les images rendront votre site Web unique et le démarqueront des autres. Cependant, n’oubliez pas qu’une utilisation excessive de graphiques sur un site Web peut être une mauvaise chose.

Ne surchargez pas votre page html avec des images ; la page doit être légère et ne pas effrayer les visiteurs. Le visiteur doit toujours assimiler les informations principales et ne pas se laisser distraire ; insérer des images dans le HTML uniquement là où cela est nécessaire.

Sur la page des attributs de la balise BODY, j'ai déjà dit que les images pouvaient être l'arrière-plan d'une page html, et maintenant je vais vous expliquer comment ces mêmes images peuvent être utilisées à un niveau supérieur à l'arrière-plan.

Ainsi, pour insérer une image dans une page HTML, vous aurez besoin d'une balise , qui possède l'attribut le plus important SRC. Cet attribut est obligatoire pour indiquer l'adresse de l'image. Disons que vous devez mettre une image image.jpg à un endroit sur une page html, et que notre image sera située dans le même dossier (répertoire) avec la page, alors vous devez écrire le code html suivant :

Si l'image et la page HTML se trouvent dans des dossiers ou répertoires différents, vous devez alors écrire le chemin d'accès à l'image par rapport à la page. Par exemple, notre page html se trouve dans le dossier ou le répertoire news, dans le même répertoire ou dossier il y a un sous-répertoire (dossier) pop, dans lequel se trouve notre image image.jpg, puis pour l'insérer vous devez écrire comme ceci :

En plus de l'attribut src de la balise Il existe quelques autres attributs facultatifs mais importants :

• width — largeur de l'image (vous pouvez spécifier des pixels ou des pourcentages) ;
• hauteur — hauteur de l'image (vous pouvez spécifier des pixels ou des pourcentages).

Si vous ne spécifiez pas ces attributs, le navigateur chargera les dimensions réelles de l'image. Cependant, il ne faut pas en faire trop avec les valeurs de ces attributs, car augmenter la longueur ou la largeur de l'image peut la déformer, ce qui la gâcherait, par exemple une photographie d'une personne, où les proportions de la personne seront changement.

Comme je l'ai déjà écrit, les dimensions de l'image peuvent être spécifiées à la fois en pixels et en pourcentages. Laissez-moi vous donner juste un exemple :

Autre exemple de code html :

Il existe des cas où la possibilité d'afficher des graphiques, y compris des images, est désactivée dans le navigateur, et pour que votre page ne perde pas son sens, utilisez l'attribut alt, dans lequel nous écrivons un texte alternatif si l'image n'est pas chargée sur la page. . code html à titre d'exemple :

• gauche - l'image sera située à gauche et le texte à côté sera à droite ;
• à droite - l'image sera située à droite et le texte à côté sera à gauche.

Voici le code HTML :

Texte à côté de l'image.

et le navigateur affichera ce qui suit :

Texte à côté de l'image.

Code HTML pour la bonne valeur :

Texte à côté de l'image.

la page html ressemblera à ceci :

Texte à côté de l'image.

Pour empêcher le texte de s'enrouler autour de l'image, vous pouvez utiliser la balise BR mentionnée précédemment sur la page Formatage du texte en HTML. À propos, la balise BR a un attribut clair, avec ses propres valeurs :

• gauche - ne pas envelopper le texte, qui sera aligné à gauche ;
• à droite - ne retourne pas à la ligne le texte, qui sera aligné à droite ;
• all - ne retourne pas à la ligne le texte, qui sera aligné sur les bords gauche et droit.

Sans l'attribut align, le texte s'enroulera par défaut autour de la droite de l'image et sera presque aligné. Si vous souhaitez que le texte ne s'enroule pas étroitement autour de l'image, vous pouvez utiliser les attributs suivants :

• vspace - crée les marges supérieure et inférieure en pixels ;
• hspace - rend les marges latérales (gauche et droite) en pixels.

Je vais donner un simple code html à titre d'exemple :

C'est une si belle photo.

Essayez de voir par vous-même ce qui se passe dans cet exemple.

Vous pouvez également créer un cadre autour de l'image à l'aide de l'attribut border et spécifier sa taille en pixels. Plus la valeur est élevée, plus le cadre autour de l'image est grand. Le code HTML ressemblera à ceci :

la page html ressemblera à ceci :

J'ai écrit les balises HTML de base nécessaires pour insérer des images dans une page HTML. Ensuite, je vais vous expliquer comment créer des liens en HTML, ainsi que comment faire d'une image un lien.

Date de publication : 15 mai 2012