Comment introduire des images en HTML (deux méthodes)

HTML (Hypertext Markup Language) est l'un des langages de base des pages Web Que vous construisiez une page statique ou une page dynamique, HTML est un élément indispensable. Les images sont l’un des éléments les plus importants et les plus couramment utilisés lors de la création de pages Web. Nous devons donc savoir comment introduire des images en HTML.

HTML peut introduire plusieurs types d'images, tels que .gif, .jpeg, .png et d'autres formats. Avant d'introduire des images, nous devons créer un dossier d'images pour le document HTML afin de stocker tous les fichiers image. Habituellement, le dossier d'images est placé dans le même répertoire que le fichier HTML afin que le fichier HTML puisse y accéder facilement.

En HTML, nous pouvons utiliser les deux méthodes suivantes pour référencer des images dans des pages Web.

1. Utiliser des images dans les balises

La méthode la plus courante consiste à utiliser la balise img (image) dans les documents HTML, elle est très simple et facile à utiliser. Voici la syntaxe de base de la balise :

<img src="image filename">

Parmi eux, l'attribut src est utilisé pour indiquer au navigateur où charger l'image, et le nom du fichier image est le nom du fichier image (notez que le chemin relatif doit être donné ici, pas le chemin absolu).

Par exemple, si notre dossier image et notre fichier HTML se trouvent dans le même répertoire et que nous souhaitons introduire une image nommée "exemple.gif" dans une page Web, le code ressemblera à ceci :

<img src="example.gif">

Ce sera dans Une image nommée "exemple.gif" s'affiche sur la page.

Si nous voulons ajouter plus d'attributs à l'image, comme la laisser créer des liens vers d'autres pages Web, ajouter des titres, modifier la largeur et la hauteur, etc., nous pouvons utiliser les balises suivantes :

<img src="image filename" alt="Image title" title="Image tooltip" height="number" width="number" border="number" align="left/right/center">

Parmi elles, l'attribut alt est utilisé pour ajouter le nom de l'image, il sera affiché lorsque l'image ne peut pas être affichée ; l'attribut de titre ajoutera un texte d'invite ; les attributs de hauteur et de largeur sont utilisés pour modifier la taille de l'image ; largeur de la bordure ; l'attribut align est utilisé pour contrôler l'alignement de l'image avec un autre texte.

Par exemple, si nous voulions ajouter une image d'une largeur de 200 pixels et d'une hauteur de 100 pixels, et la lier à une autre page, le code ressemblerait à ceci :

<a href="https://www.example.com/"><img src="example.gif" alt="Example Image" title="Click this image to go to example.com" height="100" width="200" border="1" align="center"></a>

2. Utiliser CSS pour créer l'image dans l'arrière-plan

Nous pouvons également ajouter des images en arrière-plan des pages Web en utilisant CSS (Cascading Style Sheets), qui est une autre méthode courante. Contrairement à la balise , cette méthode utilise l'image comme arrière-plan de la page Web entière plutôt que comme élément distinct.

Voici comment ajouter une image en arrière-plan à l'aide de CSS :

body {
    background-image: url('image filename');
}

Parmi eux, l'attribut background-image est utilisé pour indiquer au navigateur l'image qui doit être affichée en arrière-plan. Il peut également avoir d'autres options. , comme la définition de la couleur d'arrière-plan et des méthodes de mosaïque, etc.

Par exemple, si nous voulions afficher une image nommée "exemple.gif" en arrière-plan d'une page web, et la faire répéter horizontalement et verticalement, le code ressemblerait à ceci :

body {
    background-image: url('example.gif');
    background-repeat: repeat;
}

Cela ferait l'arrière-plan de la page entière soit remplie avec l'image "exemple.gif".

Lors de l'utilisation de cette méthode, nous devons accorder une attention particulière à la taille des images pour garantir qu'elles s'affichent correctement sur différents types d'appareils.

Résumé

Que vous utilisiez des images dans la balise ou que vous ajoutiez des images à l'arrière-plan à l'aide de CSS, HTML propose différentes manières d'introduire des images. Lors de l'utilisation de ces méthodes, nous devons prêter attention à la taille, au chemin et au format des images pour garantir qu'elles peuvent être affichées correctement dans la page Web. En utilisant des images en HTML, nous pouvons facilement ajouter des éléments personnalisés aux pages Web, les rendant plus riches et plus attrayantes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!