Comment insérer une image en HTML, la balise img et ses attributs. Insérer une image en HTML

Nous espérons que cet article vous sera utile. Bonne lecture!

Les images nous permettent instantanément de comprendre à quel point un site ou un article donné peut être intéressant pour nous, elles créent une ambiance et peuvent révéler un sujet d'une nouvelle manière. Parfois, une photo vaut mille mots.

Mais vous ne devriez pas y participer si vous n’avez pas Instagram ou une boutique en ligne. Il est conseillé que les images :

Si vous n'avez pas de photo appropriée, vous pouvez utiliser ce qu'on appelle banque de photos (banque de photos) - un lieu où de nombreuses photographies, illustrations et graphiques vectoriels. Il existe de nombreuses ressources de ce type, vous avez peut-être même entendu parler de l'une des plus importantes - Shutterstock, mais les téléchargements y sont payants.

Pour ceux qui n'aiment pas payer trop cher, à la fin de l'article nous avons préparé prime- une liste de plusieurs banques de photos où vous pouvez télécharger gratuitement une énorme quantité de beaux matériaux de haute qualité :)

Formats d'images

Dans World Wide Web Principalement 3 types d’images sont utilisés :

gif(Format d'échange graphique - format d'échange d'images)

C'est le premier format qui a commencé à être utilisé sur Internet. Les avantages de ce format sont la disponibilité animations et de petite taille, la page se charge rapidement. De plus, il soutient la transparence. Inconvénient - uniquement utilisé 256 couleurs(c'est en fait pour ça que la taille est petite), c'est à dire. il ne peut pas être utilisé pour des images en couleur.

jpeg, alias jpg(Groupe conjoint d'experts en photographie - Groupe conjoint d'experts en photographie - c'est le nom de l'organisation de développement)

adapté à la création d'images en couleur de haute qualité, Photos. La taille de ces images est grande, elles imposent donc généralement une charge importante sur le serveur. Si vous devez compresser jpeg (par exemple Moins de poids photos), nous vous recommandons de prendre la taille de l'image finale multiple de huit , la perte de qualité sera donc minime.

png(Portable Network Graphics - Portable graphiques de réseau . Prononcé de la même manière que ping, c'est-à-dire )

ce format a été initialement développé pour le web, c'est-à-dire L'image pèse généralement peu et ne ralentit pas la page lors du chargement. Ce format a été créé pour remplacer le gif obsolète, mais contrairement à lui, il ne prend pas en charge l'animation. png-8, comme gif, utilise seulement 256 couleurs. Format png-24 prend en charge 16 millions de couleurs, même si c'est déjà assez lourd. png-32 contient le même nombre de couleurs que png-24, et en plus il permet d'obtenir une image Avec arrière-plan transparent , et vous pouvez ajuster le degré de transparence. Lorsque vous réduisez la taille d’un png, il n’y a aucune perte de qualité des couleurs.

Résumons

gif- pour l'animation

jpeg- pour les photos

png- pour les icônes, boutons, arrière-plans, logos, captures d'écran, dessins, textes, photographies avec fond transparent

Insérer une image dans un fichier HTML

Pour ajouter une image à la page, utilisez étiqueter (de l'anglais image - image, photo). Il s'agit d'une balise unique et ne nécessite pas de balise de fermeture. Cette balise contient des attributs à l'intérieur.

Attribut src(de l'anglais source - source) indique le chemin d'accès au fichier (l'endroit où se trouve l'image). Si l'image est sur votre ordinateur (le site est encore en développement) ou sur votre serveur, utilisez lien relatif. Si l'image provient du réseau, un lien absolu est nécessaire. Découvrez comment procéder dans l'article "Liens".

Ainsi, pour connecter une image à votre page Web, vous devez écrire du code comme celui-ci :

attribut alt(de l'anglais alternative - alternative) indique le texte que l'utilisateur verra si l'image ne se charge pas. Le chemin est incorrect, l'image a été supprimée, Mauvais internet- il peut y avoir plusieurs raisons, et il est conseillé à une personne de comprendre ce qui se cache derrière cette icône détestée.

Les moteurs de recherche veillent attentivement à ce que cet attribut soit renseigné. Et le validateur HTML (une ressource pour vérifier l'exactitude du code) percevra l'absence de l'attribut alt comme une erreur. Si tous les attributs sera rempli, et contiendra également des mots-clés si possible - la visibilité de votre site augmentera considérablement, c'est-à-dire il sera affiché plus souvent dans les recherches. Cela vient du domaine du référencement, et à ce stade, il nous suffit de savoir qu'un tel attribut existe, et un site « live » doit l'avoir renseigné. Tant que le site est sur notre disque, il peut rester vide.

Dans l'exemple ci-dessous, nous avons délibérément spécifié un chemin d'accès à l'image inexistant afin que vous puissiez voir comment fonctionne l'attribut alt.

Hauteur et largeur des images

Vous pouvez également définir la hauteur et la largeur de l'image si l'image originale est par exemple. plus que ce dont vous avez besoin.

En HTML5, il est recommandé de le faire en utilisant CSS ou attribut de style , comme ça:

Dans cet exemple, nous avons pris 30 % de la largeur, non pas de l'image originale, mais de la taille de la fenêtre du navigateur. Lorsque width = 100%, l'image s'ouvre sur toute la largeur du navigateur. N'oubliez pas cette fonctionnalité pour cent, comme unités de mesure.

D’ailleurs, si on avait écrit uniquement la largeur, le résultat aurait été le même, essayez :

< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg"

alt = "panda dans l'arbre" style = "largeur : 30 % ;" >

Vous pouvez également définir la largeur et la hauteur dans pixels. Dans le cas de notre panda, dont les dimensions originales sont de 1196 x 796 pixels, pour que l'animal ne souffre pas lorsqu'il est compressé, il faut conserver les proportions, et ici on ne peut pas se passer d'une calculatrice. Disons que nous voulons réduire la taille de l'image de 3 fois, nous devons alors définir les dimensions sur 399 x 265 pixels.

Veuillez noter que si l'on agrandit l'image proportionnellement, il suffit alors de spécifier un seul paramètre, par exemple. largeur. Le navigateur intelligent calculera lui-même la taille totale de l'image.

Essayez d'exécuter ce code et regardez le résultat :

< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg"

alt = "panda dans l'arbre" style = "largeur : 399px ;" >

Définissez toujours les dimensions de l’image. En règle générale, les images prennent plus de temps à charger que le reste du code HTML. Si le navigateur sait combien d'espace réserver aux images, il peut continuer à charger le site sans attendre le chargement des images.

Un peu de naphtaline

S'il vous arrive de bricoler le code d'un site créé en HTML-4 ou même avant, vous remarquerez que la taille des images est définie à l'aide de paramètres spéciaux. attributs de largeur Et hauteur. Il s'agit d'une méthode obsolète, bien que toujours valable en HTML5. Cependant, nous vous recommandons d'utiliser le style, car Les attributs de largeur et de hauteur peuvent être affectés par des styles internes ou externes qui vivront dans le navigateur ou dans votre fichier CSS. Nous y reviendrons plus en détail lorsque nous examinerons CSS, mais pour l'instant, regardons simplement un exemple de la façon dont les styles affectent les attributs de hauteur et de largeur.

Il y a 3 onglets dans cette fenêtre : sur le premier vous voyez le code html, sur le 2ème code CSS et sur le dernier - comme toujours, le résultat. Cela fonctionne comme si le premier onglet était un fichier index.html, le second un fichier style.css et le troisième un navigateur. Donc, maintenant notre CSS dit que tous les éléments avec la balise img ont une largeur de 100 %. Les tailles par défaut des attributs width et height sont en pixels, il n'est donc pas nécessaire d'ajouter d'unités ici.

La différence de résultats est évidente :)

Également dans les anciennes versions de HTML, les attributs suivants étaient utilisés :

aligner, qui était utilisé pour aligner l’image horizontalement ou verticalement.

espace h- indentation à gauche et à droite de l'image par rapport au contenu environnant (par exemple, du texte ou une image adjacente)

espace virtuel- indentation au dessus et en dessous de l'image vers le contenu qui l'entoure.

frontière- définir l'épaisseur du cadre autour de l'image (par défaut elle est nulle)

De nos jours, toutes ces manipulations (et bien plus encore) se font en CSS, nous avons donc décidé de ne pas vous ennuyer ici. Si vous êtes toujours intéressé par la façon de travailler avec ces attributs, écrivez dans les commentaires, nous ajouterons cet élément :)

Placer une image dans le code

D'où nous plaçons notre étiquette dépend de la façon dont il sera affiché dans le navigateur.

Exemple n°1 - avant le paragraphe :

Des éléments tels que

ET

faire référence à éléments de bloc . Ils commencent toujours sur une nouvelle ligne et occupent toute la largeur disponible de la fenêtre du navigateur. Si tu es la première place , et après lui un élément de bloc, par exemple un paragraphe, il sera déplacé vers la ligne suivante.

Exemple n°2 - au début du paragraphe

Il s'agit d'un élément en ligne, il s'insère dans un élément de bloc et ne démarre pas une nouvelle ligne. Dans l'exemple ci-dessus, le texte s'enroule autour de l'image car le code enregistré à l'intérieur

Légendes des illustrations

Pour marquer ou signer une photo sur une page, utilisez étiqueter

(de l'anglais figure - dessin). Cette balise indique que du contenu tel que des illustrations, des photographies, des schémas, etc. y sera placé.

Étiqueter

(titre de l'image) vous permet d'ajouter une légende à l'image. Voici comment cela fonctionne:

Veuillez noter que par défaut, le navigateur dispose de certains paramètres de style pour la balise

, en particulier, il y a des retraits de 40 px à gauche et à droite.

Alors, toi et moi avons appris

  • ajouter une image à la page : en utilisant étiqueter
  • appris les attributs requis pour cette balise : src pour indiquer le chemin et alt pour décrire l'image
  • comprendre quel format est le meilleur et quoi utiliser : jpeg pour les photographies, png pour les logos et les captures d'écran, gif pour l'animation
  • comment définir au mieux les dimensions de l'image : en utilisant attribut de style avec paramètres largeur Et hauteur
  • Nous avons compris comment l'image sera affichée en fonction de l'endroit dans le code : séparément si devant un élément bloc et avec un wrap si à l'intérieur d'un élément bloc (par exemple

    )

Et pour avoir quelque chose avec quoi travailler, nous devons prendre ces images quelque part, sans violer les droits d’auteur de qui que ce soit.

C'est donc l'heure du bonus :)

Liste des banques de photos gratuites

Avant de commencer, veuillez noter que chaque capture d'écran ici est un lien vers le site. Comment créer des images sous forme de liens, lisez l'article "Liens".

Sur pixabay, vous trouverez 680 000 images gratuites sur n'importe quel sujet, distribuées sous la licence Creative Commons CCO (CC Zero), c'est-à-dire ils peuvent être utilisés, distribués, modifiés à toutes fins, même commerciales.

La banque de photos contient 390 000 photos et images gratuites. Il est plus difficile de trouver une image sympa ici, mais il existe aussi de bons exemples. La publicité des banques de photos payantes est assez distrayante. Nous plaçons cette ressource à la deuxième place en raison du nombre d'images, mais en termes de convivialité, elle sera probablement la dernière de notre classement.

Photostock propose plus de 250 000 photos gratuites, pour la plupart de haute qualité. Vous pouvez télécharger même sans inscription. Disponible en anglais uniquement.

Beaucoup de photos élégantes sous licence CC Zero. Vous pouvez télécharger sans inscription. Cette banque de photos vous comprendra également uniquement en anglais.

Le site a été créé par un concepteur de sites Web indien qui comprend à quel point il peut être difficile de trouver des photos de haute qualité. Toutes les photos ont été prises par lui personnellement et vous pouvez en faire ce que vous voulez. Aime photographier la nourriture, les ordinateurs de bureau, les ordinateurs et toutes sortes d'objets. Recherche - uniquement en anglais.


Cela permet d'afficher le contenu d'une autre page au sein d'une seule page. Par exemple:

La plupart des images qu’une personne voit sur les sites Web sont également du contenu provenant d’une autre page. Voici notamment l'adresse de l'émoticône au format .gif :

Voici des manières d'ajouter une image à un site, qui peuvent être mises en évidence si vous regardez le code de la page :

HTML : balise
http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" alt="smiley" height="30" width="30"> !}
CSS : propriétés et
CSS : pseudo-éléments et
HTML : balise de graphiques vectoriels (pas d'URL)
CSS : pas d'URL

Comment connaître l'adresse d'une photo et la copier

Il existe plusieurs façons de copier l'adresse de l'image :

  1. Placez le curseur sur la photo, cliquez sur le bouton droit de la souris, dans le menu contextuel qui apparaît, il vous sera demandé de copier l'URL, cliquez sur l'élément souhaité.
    Fig.1 Si vous pointez sur la photo et cliquez sur le bouton droit de la souris, un menu contextuel avec les éléments suivants s'ouvrira dans Mozilla Firefox
  2. Placez le curseur sur la photo, cliquez sur le bouton droit de la souris, dans le menu contextuel qui apparaît, il vous sera demandé d'étudier les caractéristiques de la photo, cliquez sur l'élément souhaité (sur la Fig. 1, voir l'élément « Informations sur l'image ») ; sous Internet Explorer, voir la rubrique « Propriétés »), dans la fenêtre qui s'ouvre, sélectionnez l'adresse de l'image,
    • Faites un clic droit sur la souris et cliquez sur « Copier » dans le menu contextuel qui apparaît.

    Fig.2 Si vous pointez sur une photo dans Mozilla Firefox, faites un clic droit sur la souris, sélectionnez « Informations sur l'image » dans le menu contextuel qui apparaît, une fenêtre s'ouvrira où vous pourrez voir une liste des images utilisées sur la page, leur adresse, texte alternatif (contenu dans l'attribut alt), taille réelle et échelle utilisée
  3. Placez le curseur sur la photo, cliquez sur le bouton droit de la souris, dans le menu contextuel qui apparaît, il vous sera demandé d'accéder à la page de l'image, cliquez sur l'élément souhaité (sur la Fig. 1, voir l'élément « Ouvrir l'image ») . Une page s'ouvrira contenant une seule image. Sur toute sa hauteur, s'il a été préalablement réduit avec l'aide ou avec en utilisant CSS. Sélectionnez l'adresse de la page qui s'ouvre dans la barre d'adresse du navigateur,
    • Appuyez sur le raccourci clavier Ctrl + C.

    Fig.3 Voici à quoi ressemble la page d'émoticônes.
    Son URL : http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif
  4. Sur les appareils tactiles (smartphone, tablette), maintenez longuement votre doigt sur la photo sans bouger ; dans le menu contextuel qui apparaît, il vous sera demandé d'accéder à la page de l'image, de cliquer sur l'élément souhaité (il peut s'appeler "Voir l'image"). Une page s'ouvrira contenant une seule image. En pleine hauteur s'il a été préalablement réduit en taille à l'aide ou en utilisant CSS. Appuyez ensuite longuement sur l'adresse dans la barre d'adresse du navigateur. Une fois que les curseurs apparaissent et que l'URL entière est sélectionnée (si nécessaire, les curseurs peuvent être déplacés à la distance requise), cliquez sur le bouton « Copier » dans le panneau qui apparaît.
  5. Placez le curseur sur la photo, cliquez sur le bouton droit de la souris, dans le menu contextuel qui apparaît, il vous sera demandé d'accéder à la page de l'image de fond, cliquez sur l'élément souhaité. Une page s'ouvrira contenant une seule image. Pleine hauteur si elle a été préalablement réduite à l'aide de CSS. Sélectionnez l'adresse de la page qui s'ouvre dans la barre d'adresse du navigateur (voir Fig. 3),
    • Cliquez sur le bouton droit de la souris et sélectionnez « Copier » dans le menu contextuel qui apparaît.
    • Appuyez sur le raccourci clavier Ctrl + C.

Comment enregistrer une image

Placez le curseur sur la photo, cliquez sur le bouton droit de la souris, dans le menu contextuel qui apparaît, il vous sera demandé de sauvegarder l'image, cliquez sur l'élément souhaité (sur la Fig. 1, voir l'élément « Enregistrer l'image sous... "), dans la fenêtre qui s'ouvre, sélectionnez un dossier sur votre ordinateur, où le dessin sera enregistré.

Si la photo est une image de fond, vous devez d'abord vous rendre sur la page de l'image (voir Fig. 3).

Comment ajouter une image à une page Web

Tout d'abord, l'image doit être téléchargée depuis votre ordinateur vers l'hébergement du site, vers un réseau social (VKontakte, Google+ etc.), Yandex.Disk ou Google.Disk, afin que l'image ait sa propre adresse sur Internet.

S'il existe un éditeur visuel, la séquence d'actions est généralement la suivante :

  1. placez le curseur de la souris à l'endroit où la photo doit apparaître,
  2. cliquez sur l'icône similaire à ou à,
  3. sélectionnez un fichier sur votre ordinateur,
  4. si possible, remplissez le texte alternatif (c'est-à-dire la description de l'image).

Résultat : l'image sera insérée sur la page du site, et surtout, téléchargée sur le serveur du projet web. Elle aura désormais sa propre adresse sur Internet. Et maintenant, vous pouvez modifier le code fourni par l'éditeur visuel dans l'onglet « HTML », car l'éditeur visuel ajoute souvent des balises inutiles et les capacités du HTML et du CSS sont incomparablement supérieures.

Si l'URL existe déjà, mais provenant d'un autre site peu connu, alors il est toujours préférable d'enregistrer une telle photo sur votre ordinateur puis de la télécharger sur le serveur du site, si cette action est autorisée par le propriétaire de la photo, afin que ne pas violer les droits d'auteur, car

  • Certains sites peuvent interdire l'utilisation d'adresses d'images sur d'autres ressources (en savoir plus sur l'interdiction des hotlinks).
  • les sites sont de courte durée et après un certain temps, lorsque le projet Web est supprimé, l'image de votre site disparaîtra également, ne laissant à sa place, au mieux, qu'un texte alternatif.

S'il n'y a pas d'éditeur visuel, la séquence d'actions est généralement la suivante :

  1. créer un dossier d'images,
  2. créez un fichier .htaccess dans le dossier image, dont le contenu sera # fermer l'accès à http://site.ru/image/ Options -Index # fermer l'accès à http://site.ru/image/.htaccess ordre autoriser, refuser refuser de tous
  3. téléchargez une image dans le dossier d'images, appelé, par exemple, plain.gif (à l'avenir, toutes les images seront également téléchargées dans ce dossier),
  4. sur une page HTML, utilisez une URL comme http://site.ru/image/plain.gif, par exemple, http://site.ru/image/plain.gif" alt="smiley" height="30" width="30">!}

Bonjour chers lecteurs du blog ! Dans cet article, vous apprendrez tout sur comment insérer une image dans une page html. Vous avez plusieurs images que vous souhaitez mettre sur votre page ou vous souhaitez mettre un logo sur votre site ? Tout cela est facile. Après avoir lu cet article, vous pourrez insérer des images dans vos pages html sans aucune difficulté. Pour ce faire, nous parlerons en détail de étiqueter et ses attributs, nous examinerons rapidement les formats de fichiers graphiques tels que gif, jpeg et png, ainsi que les nouvelles fonctionnalités HTML5 qui facilitent l'insertion de vidéo et d'audio dans votre site.

Étant donné que les données graphiques et le texte HTML ne peuvent pas être combinés dans un seul fichier, ils sont affichés sur un site différemment des autres éléments des pages HTML. Tout d'abord, les images graphiques et autres données multimédias sont stockées dans des fichiers séparés. Et pour les intégrer dans une page Web, des balises spéciales sont utilisées qui contiennent des liens vers ces fichiers individuels. En particulier, une telle balise est étiqueter . Après avoir rencontré une telle balise avec une adresse, le navigateur demande d'abord le fichier correspondant avec une image, un audio ou une vidéo au serveur Web, puis l'affiche ensuite seulement sur la page Web.

Toutes les images graphiques et, en général, toutes les données stockées dans des fichiers distincts de la page Web sont appelées mis en œuvreéléments de page.

Avant d'insérer des images et de regarder le tag en détail , cela vaut la peine d'en apprendre un peu plus sur les formats graphiques.

Formats d'images graphiques.

Il existe de nombreux formats graphiques différents, mais les navigateurs n’en prennent en charge que quelques-uns. Examinons-en trois.

1. Format JPEG(Groupe mixte d'experts en photographie). Un format assez populaire utilisé pour stocker des images. Prend en charge les couleurs 24 bits et conserve toutes les demi-teintes des photos inchangées. Mais jpeg ne prend pas en charge la transparence et déforme les petits détails et le texte des images. JPEG est principalement utilisé pour stocker des photographies. Les fichiers dans ce format ont les extensions jpg, jpe, jpeg.

2. Format GIF(Format d'échange graphique). Le principal avantage de ce format est la possibilité de stocker plusieurs images à la fois dans un seul fichier. Cela vous permet de créer des vidéos animées entières. Deuxièmement, il soutient la transparence. Le principal inconvénient est qu'il ne prend en charge que 256 couleurs, ce qui ne convient pas au stockage de photos. Le GIF est principalement utilisé pour stocker des logos, des bannières, des images avec des zones transparentes et contenant du texte. Les fichiers dans ce format ont l'extension gif.

3. Format PNG(Portable Network Graphics). Ce format a été développé pour remplacer l'ancien GIF et, dans une certaine mesure, le JPEG. Prend en charge la transparence, mais n'autorise pas l'animation. Ce format porte l'extension png.

Lors de la création de sites Web, ils utilisent généralement des images au format JPEG ou GIF, mais ils utilisent parfois PNG. L'essentiel est de comprendre dans quels cas quel format est préférable d'utiliser. En bref:

    JPEG est mieux utilisé pour stocker des photographies ou des images en niveaux de gris qui ne contiennent pas de texte ;

  • Le GIF est principalement utilisé pour l’animation ;
  • PNG est le format pour tout le reste (icônes, boutons, etc.).

Insérer des images dans des pages HTML

Alors, comment insérer une image sur une page Web ? Vous pouvez insérer une image à l'aide d'un seul étiqueter . Le navigateur place l'image à l'emplacement de la page Web où il rencontre la balise .

Code pour insérer des images en HTML la page ressemble à ceci :

Ce code html placera sur la page web une image stockée dans le fichier image.jpg, qui se trouve dans le même dossier que la page web. Comme vous l'avez peut-être remarqué, l'adresse de la photo est indiquée dans attribut src. Je t'ai déjà dit ce que c'est. Ainsi, l'attribut src est un attribut obligatoire qui sert à indiquer l'adresse du fichier avec l'image. Sans attribut src balise imgça n'a pas de sens.

Voici quelques exemples supplémentaires de spécification de l'adresse d'un fichier avec une image :

- ce code html insérera une image appelée image.jpg sur la page, qui est stockée dans le dossier images situé à la racine du site.

L'attribut src peut contenir plus que de simples liens relatifs vers des images. Étant donné que les images sont stockées en ligne avec des pages HTML, chaque fichier image a sa propre URL. Par conséquent, vous pouvez insérer l'URL de l'image dans l'attribut src. Par exemple:

Ce code insérera une image du site mysite.ru sur la page. Une URL est généralement utilisée lorsque vous pointez vers une image sur un autre site. Pour les images stockées sur votre site, il est préférable d'utiliser des liens relatifs.

Étiqueter est un élément en ligne, il est donc préférable de le placer à l'intérieur d'un élément de bloc, par exemple à l'intérieur d'une balise

- paragraphe :

Pratiquons et insérons une image d'articles précédents sur le HTML sur notre page. Je vais créer un dossier « images » à côté du fichier html de ma page et y placer un fichier image « bmw.jpg », qui ressemble à ceci :

Ensuite, le code html de la page avec l'image insérée ressemblera à ceci :





Site sur les voitures.


Site sur les voitures.



Bienvenue sur notre site automobile. Vous trouverez ici de nombreux articles intéressants et utiles sur les voitures, leurs caractéristiques techniques et leurs caractéristiques.


Langage scientifique voiture Ce:


Véhicule routier sans chenilles à moteur mécanique à au moins 4 roues.



Classement des voitures


Les voitures sont des types suivants :



  • Voiture de voyageurs;

  • Cargaison;

  • VUS ;

  • Petit chariot;

  • Ramasser;

  • Des sports;

  • Courses.


Tous droits réservés. 2010
Site sur les voitures.





Et regardez le résultat affiché dans le navigateur :

Comme nous le voyons, il n’y a rien de compliqué à placer des images sur des pages Web. Examinons ensuite quelques autres attributs de balise importants. .

L'attribut alt est une option de secours

Étant donné que les fichiers image sont stockés séparément des pages Web, le navigateur doit effectuer des requêtes distinctes pour les récupérer. Mais que se passe-t-il s'il y a beaucoup d'images sur la page et que la vitesse de connexion réseau est faible, le téléchargement de fichiers supplémentaires prendra alors beaucoup de temps. Et c’est encore pire si l’image a été supprimée du serveur à votre insu.

Dans ces cas, la page Web elle-même se chargera avec succès, seuls des rectangles blancs seront affichés à la place des images. Par conséquent, pour indiquer à l’utilisateur quelle est l’image, . À l'aide de cet attribut, vous spécifiez le texte dit de remplacement, qui sera affiché dans un rectangle vide jusqu'à ce que l'image soit chargée :

Et voilà à peu près à quoi cela ressemble :

Définir les dimensions de l'image

Il y a encore quelques attributs de balise img que vous devez connaître. Il s'agit de quelques attributs largeur Et hauteur. Vous pouvez les utiliser pour spécifier les dimensions de l'image :

largeur="300" hauteur="200">

Les deux attributs indiquent la taille en pixels. L'attribut width indique au navigateur quelle doit être la largeur de l'image et l'attribut height quelle doit être sa hauteur. Ces deux attributs peuvent être utilisés ensemble ou séparément. Par exemple, si vous spécifiez uniquement l'attribut width, le navigateur sélectionnera automatiquement la hauteur proportionnellement à la largeur spécifiée et également dans le cas de l'utilisation uniquement de l'attribut height. Si vous ne spécifiez pas du tout ces attributs, le navigateur déterminera automatiquement la taille de l'image avant de l'afficher à l'écran. Il convient seulement de noter que la spécification des tailles d'image accélérera légèrement le navigateur lors de l'affichage de la page.

Il s’agit pour l’instant d’insérer des images sur des pages, nous verrons ensuite comment insérer de l’audio ou de la vidéo sur un site Web…

Insérer de la vidéo et de l'audio à l'aide de HTML 5

La nouvelle spécification HTML5 introduit plusieurs nouvelles balises qui facilitent l'intégration de fichiers multimédias. Cela s'applique principalement à la vidéo et à l'audio.

Insérer l'audio HTML5 fournit une balise appariée L'adresse du fichier dans lequel est stocké le clip audio est indiquée à l'aide de l'attribut src qui nous est déjà familier :

Étiqueter

Par défaut, le clip audio n'est pas affiché sur la page Web. Mais si dans le tag

Une balise appariée est utilisée pour insérer une vidéo sur une page Web . Avec ce tag, tout est pareil qu'avec le tag

Il n’y a pas grand chose à dire sur l’insertion d’images et de contenu multimédia dans des pages HTML. J'espère que la question « Comment insérer une image dans une page HTML ? Je vous ai répondu. donc je vais juste résumer :

    Pour insérer des images en HTML page utilisant une seule balise et indiquez l'adresse du fichier avec l'image dans l'attribut src: ;

  • en utilisant attribut altétiqueter vous pouvez définir un texte de remplacement au cas où l'image ne se chargerait pas ;
  • utiliser des attributs largeur Et hauteur vous pouvez définir la taille des images sur une page Web ;
  • il existe des balises appariées pour insérer de l'audio et de la vidéo en HTML5

Si quelque chose n'est pas clair, demandez dans les commentaires et n'oubliez pas de vous abonner aux mises à jour de mon blog. Rendez-vous dans les prochains articles !

Bonjour, chers lecteurs du site blog. Dans le prochain article de cette section, nous continuerons à examiner les balises. Plus tôt, nous avons appris ), parlé du formatage des commentaires et ), et avons également abordé le sujet des caractères espaces dans Code HTML Et . Oui, nous avons également discuté des possibilités.

Aujourd'hui, je souhaite m'attarder plus en détail sur les éléments du langage de balisage hypertexte que vous rencontrerez le plus souvent lorsque vous travaillez sur votre projet Web. Je parle de insertion d'images et de liens hypertextes dans le code des pages Web. Sans le savoir, il sera très difficile de travailler de manière productive sur la conception de sites Web. Ces balises sont activement utilisées à la fois lors de la rédaction et de la conception d'articles, ainsi que lors de la conception d'un modèle étendu sur la structure du moteur.

Comment insérer une image - balises html Img

Disons que vous utilisez un éditeur visuel pour rédiger des articles, ce qui vous permet de ne pas penser à la façon dont les balises d'images et de liens hypertexte sont écrites dans le code. Mais le fait est qu'aucun éditeur n'est idéal, et souvent pour corriger un autre bug dans la conception du texte d'un article, il vous suffira simplement de passer en mode éditeur html et d'apporter des modifications directement aux balises des images et se lie lui-même.

Si vous savez insérer des images et des liens dans un document HTML, cela peut grandement vous simplifier la vie et gagner du temps. De plus, étudier les dix éléments les plus courants n’est pas difficile. En réalité, il ne reste plus beaucoup de tags et, bien sûr, les héros d’aujourd’hui sont parmi les plus courants et les plus fréquemment utilisés.

D'autre part, les mêmes éléments sont également activement utilisés dans la conception du modèle que vous utilisez - insertion de liens, d'images, de conteneurs, de listes (nous en parlons), divers, etc.

Et, par conséquent, afin de comprendre la structure du modèle (il s'agit des modèles Joomla et des thèmes WordPress) et, si nécessaire, d'y apporter des modifications, vous devez encore une fois connaître au moins un petit nombre d'éléments de code. Croyez-moi, le temps consacré à cela sera plus que payant à l'avenir. Eh bien, supposons que je vous ai convaincu de la nécessité de vous familiariser avec le langage de balisage et qu'il est temps de passer directement aux héros de notre publication d'aujourd'hui.

Pour insérer des images La balise HTML Img est utilisée sur la page. L'image ci-dessous a été insérée à l'aide de celui-ci :

L'attribut Src permet de spécifier le nom et l'emplacement de stockage du fichier image (en d'autres termes, le chemin d'accès à celui-ci). Dans ce cas, il peut être pointé vers un fichier contenant une image. Les chemins sont spécifiés à l'aide du caractère "/", qui sert de séparateur entre les noms des sous-répertoires dans lesquels les fichiers image sont stockés.

Le chemin absolu vers Src partira de http://vash_sait.ru (pour mon blog -). Ensuite, en utilisant « / » pour séparer les noms des sous-dossiers, le chemin complet du fichier image est écrit, se terminant à la fin par le nom et l'extension du fichier lui-même. Par exemple,

Le chemin relatif dans Src est défini en définissant le chemin relatif depuis le dossier source, qui contient le fichier du document HTML lui-même et à partir duquel vous essayez d'ouvrir l'image, vers le fichier graphique. Si ce fichier se trouve sur le serveur dans le même dossier que le document à partir duquel on y accède, vous n'avez pas besoin de préciser le chemin d'accès - il vous suffit de préciser le nom du fichier graphique (en préservant la casse des lettres ).

Si ce fichier se trouve sur le même serveur, mais dans un répertoire différent, vous devez spécifier le chemin d'accès à partir du répertoire où se trouve le document à partir duquel on y accède (dans l'exemple ci-dessus, un chemin relatif est utilisé - image/finik.jpg) .

Définissez la largeur et la hauteur de l'image à l'aide des attributs Largeur et Hauteur

Les attributs HTML Largeur et Hauteur vous permettent de définir la taille de la zone (largeur et hauteur, respectivement) qui sera allouée sur la page pour cette image. Ils sont insérés à l’intérieur de la balise Img, par exemple comme ceci :

Si cette zone ne correspond pas à la taille réelle de l'image que vous souhaitez insérer, l'image sera étirée ou rétrécie en fonction de la taille spécifiée. Cependant, vous ne devez pas utiliser cette méthode, par exemple pour réduire la taille d'une image insérée dans un document. Après tout, son poids restera important, ce qui ralentira le chargement de la page Web.

Il est préférable de redimensionner d'abord l'image dans un éditeur graphique (vous pouvez même le faire dans ), puis de l'insérer ensuite dans le document. De plus, lors de l'enregistrement d'un fichier graphique, vous devez faire attention à son poids final. Cela ne devrait pas être trop gros. Parfois, il vaut mieux sacrifier un peu la qualité de l’image (heureusement, avec de petites tailles, elle sera pratiquement imperceptible) pour réduire le poids final.

Lors de l'enregistrement de dessins, utilisez des types compacts GIF (pour insérer des images schématiques) ou JPG (pour insérer des photographies). La largeur et la hauteur, contrairement à l'attribut Src (le seul obligatoire dans la balise Img), sont facultatives. Beaucoup ne les indiquent tout simplement pas, mais ils autorisent néanmoins légèrement accélérer le chargement des documents.

Le fait est que si le navigateur ne trouve pas la largeur et la hauteur à l'intérieur de la balise html Img, il faudra alors du temps pour connaître la taille de l'image, la charger et ensuite seulement continuer à télécharger le reste du contenu du document. . Dans le cas où vous avez spécifié la hauteur et la largeur, le navigateur réserve automatiquement de l'espace pour l'image des tailles spécifiées dans ces attributs et continue de charger la page Web.

Si les fichiers graphiques affichés sur une page donnée sont très lourds et qu'ils sont nombreux, alors l'insertion de Hauteur et Largeur permettra aux utilisateurs de commencer à lire le texte du site pendant que les graphiques sont encore en cours de chargement.

De plus, si vous ne spécifiez pas la largeur et la hauteur à l'intérieur de l'image, une situation peut survenir dans laquelle, avec une petite image et un texte alternatif très long (défini par l'attribut Alt dans la balise Img, discuté ci-dessous), un décalage temporaire se produira. avant que les graphiques ne soient chargés, conception de sites Web, car un texte alternatif long prendra autant d'espace qu'il en a besoin.

Si la largeur et la hauteur sont utilisées, l'espace d'affichage du texte alternatif sera limité aux tailles qui y sont spécifiées. Pour la plupart, c'est pourquoi j'essaie d'écrire ces attributs dans la balise Img.

Alt et Titre dans la balise html Img

Les attributs Alt et Title sont très utiles, du point de vue de l’optimisation interne d’un site Web pour les moteurs de recherche. Lisez et faites la promotion du site vous-même ou dans la publication « ».

Le premier d'entre eux définit le texte dit alternatif pour l'image. Vous pouvez voir ce texte si vous désactivez les graphiques dans votre navigateur. Alt est conçu pour cela - pour indiquer aux moteurs de recherche quel type d'image il devrait y avoir. Le titre est destiné à informer l'utilisateur sur le contenu de l'image.

Le contenu du titre de la balise Img est affiché dans une ligne contextuelle si l'utilisateur déplace la souris sur l'image. Ces deux attributs (si vous les avez spécifiés) vous permettent d'inclure des images de votre projet Web dans le fichier . Par conséquent, vous ne devez pas négliger cette opportunité et assurez-vous d'enregistrer au moins Alt. La disposition de vos images devrait ressembler à ceci :

En fait, de nombreux attributs peuvent l'être et vous pouvez tous les voir au moins en utilisant le lien fourni. Mais dans la pratique, vous n'utiliserez probablement que ceux que j'ai répertoriés dans cet article.

Permettez-moi de vous rappeler encore une fois les règles d'écriture des balises. Après la parenthèse triangulaire ouvrante, toujours sans espace, est écrit son nom, puis, séparé par un espace, est écrit le nom de l'attribut qui lui est attribué. Après le nom de l'attribut, sans espace, un signe égal est placé et son paramètre est écrit entre guillemets (par exemple, largeur en pixels pour Largeur).

L'attribut suivant à l'intérieur d'une balise HTML est séparé du précédent par un espace. À la fin se trouve un support triangulaire de fermeture. Veuillez noter que Img n'est pas couplé, c'est-à-dire il n'a pas de balise de fermeture.

Idéalement, c’est ainsi que devraient être conçues toutes les images utilisées dans votre projet web. Cet aspect peut être obtenu sans modifier manuellement le code HTML de chaque image. Les éditeurs visuels de divers CMS (Joomla, WordPress, etc.) vous permettent de définir toute cette richesse dans une interface graphique conviviale, mais après une configuration d'essai, assurez-vous de vérifier le code (dans n'importe quel éditeur visuel, vous pouvez passer à l'affichage du code html de l'article).

Créez des hyperliens à l’aide de la balise de lien html « A »

Un lien est l’un des principaux éléments d’organisation des documents en HTML. Sans eux, une page Web ne serait qu’une page. Ils sont créés à l'aide de la balise "A". Le seul attribut obligatoire est Href. Il précise l'URL (chemin) vers laquelle l'utilisateur doit se rendre en cliquant sur cet hyperlien.

Le lien peut mener soit vers la page interne de votre propre ressource (un point très important de l'optimisation interne y est spécifiquement lié) soit vers la page d'un autre projet. La balise HTML A est appariée et, par conséquent, comporte un élément de fermeture. Le texte du lien hypertexte (ancre - il est écrit en détail en termes de promotion de la promotion SEO) est placé entre les balises « A » d'ouverture et de fermeture.

Les moteurs de recherche analysent non seulement l’ancre elle-même, mais également les mots qui l’entourent. Ceci doit être pris en compte lorsque vous placez des liens vers votre site sur d'autres ressources. Pour lui donner un aspect plus naturel, vous pouvez déplacer une partie du texte en dehors de l'ancre, par exemple :

Ouvre dans une nouvelle fenêtre et lien depuis l'image (image)

Eh bien, d'accord, nous avons de nouveau été distraits par l'optimisation des moteurs de recherche. Revenons aux balises. Pour la balise html « A », il existe un attribut très nécessaire qui vous permettra d'ouvrir la page vers laquelle mène ce lien. dans une nouvelle fenêtre. Cela peut être nécessaire si vous créez un lien vers de nombreux documents externes à partir d'une seule page. Dans ce cas, il serait plus pratique pour le visiteur de garder votre page toujours ouverte.

Target dispose d'une option à cet effet qui vous permet d'ouvrir la page dans une nouvelle fenêtre appelée _VIDE. Si Target n'est pas spécifié dans la balise A, alors le lien s'ouvrira dans la même fenêtre. Exemple d'utilisation de l'attribut Target :

Ancre (si le lien est utilisé pour du maillage interne, alors ce texte doit contenir les mots-clés par lesquels vous souhaitez promouvoir l'article vers lequel mène cet hyperlien)

Veuillez noter que l'ordre des attributs dans les balises n'est en aucun cas réglementé. Avec le même succès vous pouvez écrire :

Il existe une opinion selon laquelle les moteurs de recherche accordent plus d'importance aux liens provenant d'images, mais selon certaines données, c'est le contraire qui est vrai. Mais lorsque vous utilisez ce type de liens, il n’existe pas d’ancre dans laquelle vous pourriez insérer les informations nécessaires. mots clés. Dans ce cas, vous pouvez utiliser l'attribut Title pour la balise A.

Ru/image/finik.jpg" Largeur="200" Hauteur="150">

Le titre peut également être utilisé dans le cas d’une ancre de texte standard. Dans ce cas, les informations qui y sont inscrites seront visibles si vous déplacez le curseur de la souris sur le lien hypertexte. En fait, cet attribut peut être utilisé dans presque toutes les balises Langage HTML, mais cela ne servira pas à grand-chose.

Ici, vous devez noter les mots-clés par lesquels vous souhaitez promouvoir l'article vers lequel mène cet hyperlien.

Création d'ancres et de liens de hachage

Un autre attribut intéressant est NAME, qui était autrefois assez largement utilisé pour créer ce qu'on appelle des ancres de lien, accessibles à l'aide de ce qu'on appelle des liens de hachage. C'est un peu déroutant, mais je vais essayer de clarifier maintenant. Disons que tu as besoin faire référence à un endroit précis dans le texte du document(pas au début), où une certaine question est discutée.

Si vous mettez un simple lien hypertexte vers cet article, alors après avoir cliqué dessus, l'article s'ouvrira au tout début et l'utilisateur devra y trouver l'endroit sur lequel vous souhaitiez concentrer votre attention. Ainsi, à l'aide d'ancres et de liens de hachage, vous pouvez vous assurer que l'article s'ouvre exactement là où vous le souhaitez et que l'utilisateur n'a pas à fouiller dans des documents inutiles.

Pour mettre en œuvre la méthode décrite de création d'hyperliens dans Document HTML Auparavant, il fallait d’abord insérer une ancre dans l’article vers laquelle mènerait le lien de hachage. L'ancre était une structure rappelant un lien ordinaire, mais en même temps elle restait invisible pour le visiteur. Il ressemblait à ceci :

Ceux. il s'avère que l'ancre était constituée uniquement des balises d'ouverture et de fermeture « A », alors qu'elle ne contenait pas d'ancre et n'avait qu'un seul attribut NAME requis. Le paramètre de cet attribut était une étiquette dont vous deviez vous-même préciser le nom. Cette étiquette a ensuite été utilisée pour créer un lien de hachage.

Voici maintenant la façon d'insérer des ancres considéré comme obsolète et le validateur de code HTML sera considéré comme gaffe . Veuillez y prêter attention. Les ancres sont désormais placées en les ajoutant à la balise la plus proche.

Disons que pour un titre dans un article, cela pourrait ressembler à ceci :

Titre

Ainsi, après avoir placé toutes les ancres nécessaires dans le texte de l'article, nous pouvons commencer à créer des liens de hachage qui feront référence à des endroits du texte de l'article qui ont été précédemment marqués de la manière décrite ci-dessus (à l'aide du sélecteur d'ID). .

Le lien hypertexte est créé de manière standard, sauf qu'à la fin de l'URL, qui est écrite dans le Href, un signe dièse (signe pointu ou symbole dièse) est placé, et après vient le nom de l'étiquette de l'ancre. c'est à l'endroit requis dans le texte de l'article.

Ancre

Si l'ancre se trouve dans le même document HTML que le lien de hachage, alors seule l'ancre peut être spécifiée.

Ancre

Bonne chance à toi! A bientôt sur les pages du site blog

Vous pouvez regarder plus de vidéos en allant sur
");">

Vous pourriez être intéressé

Listes en code Html - Balises UL, OL, LI et DL
Comment les couleurs sont définies dans le code HTML et CSS, sélection des nuances RVB dans les tableaux, sortie Yandex et autres programmes
Formulaires HTML pour le site - balises Form, Input et Select, Option, Textarea, Label et autres pour créer des éléments de formulaire Web
Img - Balise HTML pour insérer une image (Src), aligner et enrouler le texte autour d'elle (align), ainsi que définir l'arrière-plan (background)
Comment créer un lien hypertexte (A, Href, Target blank), comment l'ouvrir dans une nouvelle fenêtre du site, et aussi faire d'une image un lien en code Html

Il est difficile de trouver un site Web sur Internet qui ne contient pas d'images, et cela n'est pas surprenant, car elles constituent l'essentiel de la conception du site Web, ce qui lui donne un aspect mémorable. UN bon design site Internet est la clé de son développement réussi. Pour afficher des images en HTML il n'y a qu'une seule balise .

1. Syntaxe des balises

Description de l'image" src ="URL " [attributs ]>

Veuillez noter que cette balise est unique et ne nécessite pas balise de fermeture .

L'attribut src est obligatoire. Il est utilisé pour spécifier l'adresse de l'image affichée. Vous pouvez spécifier une URL absolue ou relative. Si vous ne précisez pas l'adresse ou si vous l'écrivez avec une erreur, l'image ne s'affichera pas.

Attribut alt="description" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.!}

Les attributs restants sont facultatifs ; nous les examinerons ci-dessous. Tout d’abord, donnons un exemple simple de sortie d’une image au format HTML.

2. Comment insérer une image en HTML

Pour insérer une image en HTML, utilisez la balise . Nous avons regardé la syntaxe un peu plus haut. Donnons des exemples pratiques.

Exemple 2.1. Utiliser une balise

... ...

Ce code

DANS dans cet exemple nous avons indiqué l'adresse directe de l'image à partir des images sur Yandex Photos. Le plus souvent, des liens sont fournis vers des images situées sur la même URL. Par exemple, src="/img/kartinka.jpg", c'est-à-dire l'adresse relative est indiquée.

Il est possible de placer plusieurs photos à la suite. S’ils ne tiennent pas sur une ligne, ils passeront automatiquement à la suivante.

Exemple 2.2. Afficher plusieurs images en HTML les unes après les autres

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

Convertit ce qui suit sur la page :

Si nous devions poster une autre image, ce serait avec nouvelle ligne, car il ne rentrerait plus dans celui-ci.

Exemple 2.3. Utiliser un texte alternatif (alt) dans img

Il est recommandé d'inclure un texte alternatif ( attribut alt) dans la balise , pour vous assurer contre le cas où l'image ne serait pas disponible. Vous trouverez ci-dessous un exemple utilisant du texte alternatif. Dans le premier cas, nous n'avons pas précisé la taille de l'image, mais dans le second nous le faisons.

... Exemple d'image" src ="321.jpg "> ...

Convertit ce qui suit sur la page :


Si nous placions une autre image, elle serait sur une nouvelle ligne, puisqu'elle ne rentrerait plus dans cette ligne.

Examinons maintenant de plus près tous les attributs des balises .

3. Attributs et propriétés des balises

1. Propriété align="parameter" - détermine l'alignement de l'image. Cette valeur affecte également la manière dont le texte s'articulera autour de l'image. Peut accepter les paramètres suivants :

  • gauche - alignement à gauche
  • middle - aligner le milieu de l'image sur la ligne de base de la ligne actuelle
  • bottom - alignez la bordure inférieure de l'image sur le texte environnant
  • top - la bordure supérieure de l'image est alignée sur l'élément le plus haut de la ligne actuelle
  • droite - alignement à droite

Exemple 3.1. Aligner une image en HTML à droite

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

Convertit ce qui suit sur la page :

2. Propriété alt="texte" - подсказка/описание картинки. Выполняет сразу две важные функции:!}

  • Affiche une info-bulle au survol
  • Si les images sont désactivées dans le navigateur, ce texte s'affiche

Cet attribut est également très important lors du classement des images dans Yandex Images et Google images. Il doit être ajouté à chaque image, car c'est l'un des facteurs pris en compte par les algorithmes des moteurs de recherche.

Exemple 3.2. Sortie d'une image en HTML avec un cadre (bordure)

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

Convertit ce qui suit sur la page :

4. Propriété bordercolor="color" - définit la couleur de la bordure qui entoure l'image. N'a de sens que si l'attribut border est supérieur à 0.

Exemple 3.3. Sortie d'une image en HTML avec un cadre coloré

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

Le résultat est visible juste au-dessus.

Note

Les attributs border et bordercolor peuvent être définis dans Styles CSSà img :

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

5. Propriété height="NUMBER" - définit la hauteur de l'image : soit en pixels, soit en pourcentage. Par exemple, si une image a une taille de 400x200 et que nous spécifions une hauteur de 150 pixels, alors elle est compressée à 300x150 (25 % plus petite), c'est-à-dire proportionnellement.

6. Propriété width="NUMBER" - définit la largeur de l'image : soit en pixels, soit en pourcentage. Par exemple, si une image a une taille de 1 000 x 800 et que la largeur est spécifiée sur 1 200 pixels, elle est automatiquement agrandie de 20 % pour atteindre 1 200 x 960.

7. Propriété hspace="NUMBER" - définit l'indentation horizontale de l'image en pixels à partir d'autres objets HTML.

8. Propriété vspace="NUMBER" - définit l'espace vertical de l'image en pixels à partir d'autres objets HTML.

Note

Au lieu de hspace et vspace, je vous conseille d'utiliser l'ancienne marge éprouvée (vous pouvez en savoir plus à ce sujet dans la leçon sur la description des styles HTML). Permettez-moi de vous rappeler brièvement :

  • marge supérieure : X px ; (X - retrait supérieur)
  • marge inférieure : Y px ; (Y - retrait inférieur)
  • marge gauche : L px ; (L - retrait à gauche)
  • marge droite : R px ; (R - retrait à droite)

Définissez les retraits des objets en pixels. Les valeurs négatives sont autorisées. Par défaut, soit il hérite de la valeur de l'ancêtre, soit il a la valeur 0.

Par exemple. La marge gauche est de 50 pixels et la marge supérieure est de 10 pixels.

... marge supérieure : 10 px ; marge gauche : 50px"src=" https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

Convertit ce qui suit sur la page :

Dans cet exemple, l'indentation en haut était de 10 pixels, à gauche de 50 pixels.

9. Propriété class="class_name" - vous pouvez attribuer une classe à une image pour définir le style de toutes les images de cette classe.

4. Comment faire d'une image un lien

Cette question se pose chez les jeunes webmasters. C'est en fait très simple. Pour ce faire, encadrez simplement le tag balise (lien).

Par exemple

... Adresse_image"> ...

5. Comment arrondir les coins d'une image

https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"style="border-radius: 30px">

Cher lecteur, vous en savez maintenant beaucoup plus sur la balise html img. Maintenant, je vous conseille de passer à la leçon suivante.

ARTICLES LIÉS