Nous verrons ensuite comment insérer une image dans un document HTML et configurer son affichage. Pour travailler, vous n'avez besoin que de l'éditeur et du navigateur mentionnés ci-dessus.

Si vous n'avez toujours pas Notepad++ ou si vous avez un problème pour le télécharger et que vous êtes tourmenté par la question : comment insérer une image en HTML dans le bloc-notes ?

La réponse est simple, travailler dans un bloc-notes ordinaire ne diffère que par le fait qu'il n'y a pas de surbrillance de code Couleurs différentes, pour la lisibilité et la séparation du code du texte lui-même.

Comment insérer une image dans une page HTML

Après avoir installé l'éditeur, l'élément correspondant apparaîtra dans le menu contextuel qui apparaît lorsque vous cliquez avec le bouton droit sur n'importe quel fichier.

Maintenant, pour éditer un tel fichier, appelez simplement menu contextuel faites un clic droit dessus, puis « Modifier avec Notepad++ ».

Une page de test sera utilisée pour observer les résultats des modifications du code.

Pour insérer une image dans le code HTML, utilisez une balise sur une seule ligne img. Son attribut principal est la source de la photo.

Il peut s'agir de n'importe quel fichier, sur un disque dur, ou d'un lien vers une image existant sur le réseau. Encadré avec des étiquettes < p> p>.

Pour ajouter une photo, vous devrez saisir la ligne suivante :

.

Voici à quoi cela ressemblera dans l'éditeur :

Et voici comment sa présence sera affichée sur la page :

SRC indique la source de l'image. Un seul nom de fichier suffit si le fichier image se trouve dans le même document HTML répertoires.

Si la photo se trouve dans un autre répertoire, vous devrez alors en spécifier le chemin, en commençant par le dossier dans lequel se trouve le fichier html.

Conseil! Il est important de considérer que sur le chemin vers fichier donné La photo ne doit pas contenir de caractères cyrilliques. De plus, lors de l'écriture d'un nom de fichier, la casse est importante.

Vous pouvez utiliser une illustration provenant d’Internet comme source. Pour ce faire, il vous suffit d'indiquer un lien vers celui-ci dans l'attribut, au lieu de l'emplacement sur le disque dur.

Tableau de formatage du chemin de fichier

Pour redimensionner une image vous devrez ajouter deux attributs : largeur Et hauteur. La valeur est formatée de la même manière que pour n'importe quel attribut.

Après le signe égal, vous devez préciser la taille en pixels.

Si disponible clairement dimensions données illustration, il sera affiché sur la page comme suit :

Aligner et modifier une image

Comment insérer une photo en html au centre ? Pour attribuer la position de l'image sur la page, utilisez aligner, lié à la balise p.

Plusieurs valeurs lui sont autorisées : centre(centre), gauche(bord gauche) et droite(bord droit).

Voici à quoi ressemble l'image sur la page, centrée sur le bord droit.

Important! Pour attribuer l'emplacement de la photo par rapport au texte, plutôt qu'à la page, il faut utiliser l'attribut align dans la balise img. Les valeurs sont les mêmes que pour l'attribut tag.

En fonction de la valeur spécifiée, l'image changera de position par rapport au texte.

Pour placer une image dans le texte, entrez simplement la balise img(avec tout le cadre) dans bloc de texte V.

Pour ajouter une bordure, utilisez l'attribut border avec une valeur numérique qui indique l'épaisseur de la bordure en pixels.

Pour définir les marges verticales et horizontales, utilisez espace virtuel Et espace h. Leur valeur numérique désigne la distance du texte à l'image, directement en pixels.

Dans l'exemple, l'attribut espace virtuel la valeur est fixée à 50 pixels.

La taille du remplissage horizontal indiquera la distance à laquelle le texte sera placé lors de l'enroulement autour de l'image.

Deux autres attributs utiles - alt Et titre. Le premier définit un texte alternatif pour l'image.

Avec lui, si l'image ne se charge pas pour une raison quelconque, le texte spécifié dans la valeur de l'attribut sera affiché à la place.

Afin de tester les capacités de l'attribut, vous pouvez déplacer le fichier depuis le répertoire spécifié dans le code.

Texte spécifié comme valeur d'attribut titre, affichera une info-bulle lorsque vous passerez la souris directement sur l'image. Dans le code, sa conception n'est pas différente des autres attributs.

Après avoir rafraîchi la page, le résultat sera comme ceci :

Table d'attributs de balise img

voter[s]

	Description
src=””	Identifiant de la source de l'image. Il peut être utilisé soit enregistré sur le disque dur, soit localisé sur le réseau (l'adresse est indiquée à la place de l'emplacement sur le disque dur).
largeur= ""; hauteur = ""	Indicateurs de hauteur et de largeur de l’image. Si un seul est spécifié, le second est automatiquement mis à l'échelle en fonction du premier. La valeur numérique indique le nombre de pixels.
aligner=””	Attribut pour la position de l'image par rapport au texte. Valeurs valides : haut,milieubas,gauchedroite.
frontière=””	Attribue une bordure autour de l'image. La valeur numérique correspond à l'épaisseur du cadre en pixels.
espace virtuel= ""; hspace=""	Indicateurs d'indentation des éléments adjacents verticalement et horizontalement. La valeur spécifie le nombre de pixels entre les éléments. Lors de l'habillage du texte, l'attribut spécifie la distance par rapport au texte.
alt=””	Attribue une description alternative au cas où l'image, pour une raison quelconque, ne se chargerait pas. La valeur est arbitraire.
titre=””	Définit le texte de l'info-bulle de survol. La valeur est arbitraire.

Travailler avec des images en HTML (comment insérer une image, changer sa taille, faire de l'image un lien).

Insérer une image

Une balise non appariée est utilisée pour insérer une image dans un document HTML , qui est placé à l'emplacement du document où l'image doit être insérée. Cette balise a un paramètre obligatoire src, dont la valeur précise le chemin d'accès à l'image souhaitée dans le répertoire de votre site.

Par exemple, pour placer une image sur une page :

V dans la bonne place le document contient la ligne :

Cela permet au navigateur de savoir que le répertoire racine du site www.monsite.com il y a un sous-répertoire img 1.png

Nous avons indiqué ici chemin complet(ou adresse absolue) à l'image. Pouvez-vous préciser adresse relative Images:

Le navigateur interprète cette ligne ainsi : dans le répertoire où se trouve ce document html, il y a un sous-répertoire img, il contient une image avec le nom 1.png, qui doit être placé sur la page.

Voici un exemple de spécification d'une adresse d'image relative si votre site a une structure plus complexe et que l'exemple précédent ne convient pas :

Le navigateur interprète cette ligne comme suit : une combinaison de caractères ../ signifie que vous devez remonter d'un niveau à partir du répertoire où se trouve ce document html ; et puis comme dans l'exemple précédent : dans le répertoire où l'on se trouve il y a un sous-répertoire img, il contient une image avec le nom 1.png, qui doit être placé sur la page.

Pour des raisons de sécurité, il est préférable d'indiquer l'adresse relative de l'image, sauf dans les cas où vous placez sur votre page une image située sur un autre site.

Dimensions de l'image

La taille de chaque image est spécifiée par deux paramètres : la largeur et la hauteur. À l'étiquette Il existe des paramètres correspondants : largeur Et hauteur. Ces paramètres prennent des valeurs en pixels (px).

Vous pouvez définir les dimensions réelles de l'image :

Ce n'est pas nécessaire, mais c'est utile car... accélère légèrement le processus de chargement d'une page par le navigateur (le navigateur n'a pas besoin de calculer ces valeurs indépendamment). Si les dimensions de l'image sont immédiatement spécifiées dans les paramètres de la balise , alors de l'espace sur la page sera alloué pour cette image et la structure de la page ne changera plus lors du chargement - le texte sautera, par exemple.

Ou vous pouvez agrandir ou réduire l'image en attribuant des paramètres largeur Et hauteur d'autres significations. De plus, si l'on souhaite modifier les deux paramètres proportionnellement, il suffit d'indiquer une nouvelle valeur à un seul d'entre eux et d'omettre simplement le second. Le navigateur le calculera automatiquement.

Par exemple, pour agrandir notre image de 1,5 fois, on peut écrire :

ou

Le résultat sera le même:

Plus d'options largeur Et hauteur peut prendre des valeurs en pourcentages. Mais! Veuillez noter qu'il s'agit de pourcentages de la taille de la fenêtre du navigateur. Dans ce cas, vous pouvez également spécifier un seul paramètre et omettre le second.

Par exemple, si nous voulons que l’image occupe exactement la moitié de notre page en largeur, nous devons écrire ce qui suit :

Et nous obtiendrons :

Cadre autour de l'image

À l'étiquette il y a un autre paramètre facultatif frontière. Utilisez-le pour définir l'épaisseur du cadre autour de l'image. Par défaut, l'épaisseur du cadre de l'image est nulle, c'est-à-dire pas de cadre.

Par exemple, voici comment ajouter un cadre de 3 pixels d'épaisseur à notre image :

Voici ce que le navigateur va nous montrer :

La couleur de la bordure correspond à la couleur du texte sur la page spécifiée à l'aide du paramètre texteétiqueter (Voir Leçon 6. Propriétés de la page - paramètres de la balise body), la couleur par défaut est le noir.

Et si tu ne veux pas voir le cadre, force le paramètre frontière valeur nulle :

Texte alternatif

Texte alternatif est affiché par le navigateur à la place de l'image jusqu'à son chargement. Ou au lieu d'une image, si pour une raison quelconque elle ne s'affiche pas.

Quand et si l'image est chargée, Texte alternatif s'affichera lorsque vous passerez votre souris sur cette même image.

Pour ajouter un texte alternatif, utilisez l'option altétiqueter , à laquelle est attribuée une valeur de chaîne, qui doit être placée entre guillemets.

Vous pouvez créer un texte alternatif sur plusieurs lignes.

Pour ce faire, insérez simplement un saut de ligne dans le document HTML.

texte">

Alignement des images

Pour une image, comme pour un paragraphe, il y a la notion d'alignement avec le texte et les autres images de la page. Vous pouvez également définir le type d'alignement à l'aide du paramètre alignerétiqueter .

Vous trouverez ci-dessous un tableau des valeurs de paramètres possibles aligner:

Possibilités haut du texte, haut, milieu, absmilieu, ligne de base, bas définir l’alignement vertical de l’image. Et les paramètres gauche Et droite faites savoir au navigateur de quel côté le texte doit être circuler image.

Remplissage autour de l'image

Pour empêcher le texte de s'enrouler près de l'image, vous pouvez définir un remplissage autour de l'image. Vous pouvez le faire en utilisant les paramètres espace h(rembourrage gauche et droit) et espace virtuel(espaces en haut et en bas) du tag .

L'exemple suivant montre le texte enroulé autour d'une image, avec l'image alignée à gauche et avec 5 pixels de remplissage autour d'elle :

Dans la ville de Stockholm, dans la rue la plus ordinaire, dans la maison la plus ordinaire, vit une famille suédoise ordinaire nommée Svanteson. Cette famille est composée d'un père très ordinaire, d'une mère très ordinaire et de trois enfants très ordinaires - Bosse, Bethan et Baby.

Voici le résultat dans le navigateur :

Dans la ville de Stockholm, dans la rue la plus ordinaire, dans la maison la plus ordinaire, vit une famille suédoise ordinaire nommée Svanteson. Cette famille est composée d'un père très ordinaire, d'une mère très ordinaire et de trois enfants très ordinaires - Bosse, Bethan et Baby.

Diviser une image en plusieurs parties

Il y a des moments où il est nécessaire de placer sur une page grande image. Mais la page mettra alors beaucoup de temps à se charger. Ce qu'il faut faire?

L'un des possibles La meilleure solution est de découper l'image en morceaux et de la placer sur la page à l'aide d'un tableau. Pour que l'image ressemble à un tout, il est nécessaire de supprimer la bordure du tableau et tout le remplissage à l'intérieur et entre les cellules. Ceux. attribuer aux paramètres de balise correspondants

valeurs nulles: bordure="0", espacement des cellules="0", rembourrage de cellules="0".

Dans l'exemple suivant, nous divisons l'image en 4 parties. Voici à quoi ressemblera le tableau :

Et voici le résultat:

Les images - ce sont peut-être elles qui façonnent notre idée généraleÔ réseau mondial. Accepter que informations graphiques une personne se souvient en général bien mieux que le texte. Par conséquent, les images constituent une partie importante de tout site Web et de toute page Web. Et c'est pourquoi je veux vous expliquer comment insérer une image en HTML.

Insérer une image en HTML à l'aide d'une balise

Vous savez sûrement que toutes les commandes HTML sont exécutées à l’aide de balises. Nous avons donc créé notre propre balise pour les images : . Il est unique, c'est-à-dire qu'il n'a pas de partie finale.

La chose la plus importante attribut img la balise est src (source) – le chemin d’accès à l’image. Vous y notez l'adresse où se trouve l'image. Il peut être écrit comme absolu ( site web/images/images2/image.jpg) ou comme relatif ( images/images2/image.jpg).

Ces deux chemins mènent au même fichier image.jpg, situé dans le dossier image2. Celui-ci, à son tour, se trouve dans le répertoire images et celui-là se trouve dans le dossier racine. Si vous notez tout de manière relative, alors lorsque vous changerez le nom de domaine de votre site, tout restera opérationnel. Par exemple, l’éditeur WordPress insère par défaut des adresses absolues. Mais personnellement, je ne vais pas changer de domaine et ça me convient.

Attributs supplémentaires et conception via CSS

Alors, sortons du sujet : pour afficher une image, il suffit de spécifier l'attribut src, mais il existe de nombreux autres attributs pour sa conception.

• width et height – la largeur et la hauteur de l’image. Il peut être défini dans les attributs correspondants dans la balise img
• aligner – alignement de l’image par rapport au texte. Par défaut, il est aligné à gauche. Vous pouvez également le mettre à droite et au centre (droite, centre)
• alt – texte alternatif qui sera affiché si l'utilisateur a désactivé l'affichage des images dans le navigateur. Il est utile de le remplir
• le titre est presque le même. Une sorte de description de l'image qui s'affichera lorsque vous passerez le curseur dessus
• vspace et hspace – espace vertical et horizontal de l’image par rapport au reste du contenu. Attention! Les attributs sont déjà obsolètes et il est préférable de définir ces retraits via une feuille de style
• classe - cours de style, qui est attaché à l'image et lui impose certains styles

Insérez une image si mignonne. Ici, nous avons ajouté la classe d'aperçu et maintenant, avec CSS, nous pouvons y accéder et spécifier n'importe quel style. Par exemple, ceux-ci :

Aperçu (remplissage : 20 px ; marge : 10 px ; bordure : 5px orange uni ; transformation : skewX(10deg); box-shadow : 0 0 15px 10px violet)

Laissez-moi résumer

Donc, pour afficher l'image, il vous suffit d'écrire balise img et ajoutez-y l'attribut src, qui spécifie le chemin d'accès à l'image. Tout le reste est caractéristiques supplémentaires- alignement, dimensions, texte alternatif, rotations, cadres, etc.

Et enfin, idéalement, tout cela devrait être écrit via CSS. Autrement dit, ne définissez pas les dimensions dans les attributs, mais ajoutez une classe de style supplémentaire à l'image, qui déterminera les dimensions. Il en va de même pour l'alignement, qui peut être effectué en CSS à l'aide de la propriété text-align, ainsi que des blocs flottants float.

26.06.2015

Salut tout le monde!
Nous continuons à étudier assidûment les bases du HTML.
Dans cette leçon, je vais vous dire, comment insérer une image en HTML-document, comment faire une image comme arrière-plan, taille de l'image, habillage du texte autour d'une image, comment aligner une image. Je soutiendrai toutes les possibilités énumérées avec des exemples et des résultats.
Ainsi, les images sur les pages Web peuvent être en arrière-plan ou normales. Quelle est la différence entre une image d’arrière-plan et une image ordinaire ?

Image de fond placé comme arrière-plan sur lequel vous pouvez insérer d'autres images, textes, tableaux, etc.

Image normale repoussera les autres éléments de la page (autres images, textes, tableaux, etc.). A l’aide de l’exemple, vous verrez et comprendrez alors tout.
Pour les pages Web, il est recommandé d'utiliser les formats suivants : Images JPEG(JPG), GIF et PNG.

○ Comment créer une image comme arrière-plan dansHTML

Pour faire d'une image l'arrière-plan d'une balise vous devez spécifier l'attribut « background » :

Maintenant regardons exemple complet. Insérez le fichier image « fon.jpg » à côté du fichier HTML.

et insérez ce code dans le fichier HTML :

JPG">

Le résultat sera comme ceci :

Attention

Mauvais nom :

Nom correct:

○ Comment insérer une image dansHTML

Pour insérer une image dans un document HTML, utilisez la balise avec le paramètre « src », qui précise le chemin ou l’adresse de l’image.

Regardons maintenant l'exemple complet. Insérez le fichier image « kartinka.jpg » à côté du fichier HTML et dans Fichier HTMLécris ce code :

Bonjour, ceci est ma première page sur le site.

Le résultat sera comme ceci :

Attention: Le nom de l'image doit être écrit en latin, sinon l'image ne sera pas affichée.

Mauvais nom :

Nom correct:

Je pense que vous avez tout compris jusqu'à présent. Essayons maintenant de combiner les deux exemples. Créons un arrière-plan pour la page Web, insérons une image et du texte.

JPG">

○ Comment insérer une image si elle se trouve dans le dossier "img" ou "images"?

Si l'image se trouve dans le dossier « img » ou « images », vous devez alors spécifier le chemin du fichier HTML vers le dossier « img » ou « images », puis entrez simplement le nom de l'image avec l'extension. Il ressemblera à ceci:

Si la photo se trouve sur un autre site ou blog, vous devez alors indiquer l'adresse du site et, si nécessaire, le dossier où se trouve la photo. Eh bien, bien sûr, vous devez indiquer le nom de l'image avec son extension.

Post précédent
Entrée suivante