HTML - Images
Les images sont très importantes pour embellir ainsi que pour représenter de nombreux concepts complexes de manière simple sur votre page Web. Ce didacticiel vous guidera à travers des étapes simples pour utiliser des images dans vos pages Web.
Insérer une image
Vous pouvez insérer n'importe quelle image dans votre page Web en utilisant <img>marque. Voici la syntaxe simple pour utiliser cette balise.
<img src = "Image URL" ... attributes-list/>La balise <img> est une balise vide, ce qui signifie qu'elle ne peut contenir qu'une liste d'attributs et qu'elle n'a pas de balise de fermeture.
Exemple
Pour essayer l'exemple suivant, gardons notre fichier HTML test.htm et notre fichier image test.png dans le même répertoire -
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>Cela produira le résultat suivant -
Vous pouvez utiliser un fichier image PNG, JPEG ou GIF en fonction de votre confort, mais assurez-vous de spécifier le nom de fichier image correct dans srcattribut. Le nom de l'image est toujours sensible à la casse.
le alt L'attribut est un attribut obligatoire qui spécifie un autre texte pour une image, si l'image ne peut pas être affichée.
Définir l'emplacement de l'image
Habituellement, nous conservons toutes les images dans un répertoire séparé. Alors gardons le fichier HTML test.htm dans notre répertoire personnel et créons un sous-répertoireimages dans le répertoire personnel où nous conserverons notre image test.png.
Exemple
En supposant que l'emplacement de l'image est "image / test.png", essayez l'exemple suivant -
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>Cela produira le résultat suivant -
Définir la largeur / hauteur de l'image
Vous pouvez définir la largeur et la hauteur de l'image en fonction de vos besoins en utilisant width et heightles attributs. Vous pouvez spécifier la largeur et la hauteur de l'image en termes de pixels ou de pourcentage de sa taille réelle.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>
</html>Cela produira le résultat suivant -
Définir la bordure de l'image
Par défaut, l'image aura une bordure autour d'elle, vous pouvez spécifier l'épaisseur de la bordure en termes de pixels à l'aide de l'attribut border. Une épaisseur de 0 signifie qu'il n'y a pas de bordure autour de l'image.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>Cela produira le résultat suivant -
Définir l'alignement de l'image
Par défaut, l'image s'alignera sur le côté gauche de la page, mais vous pouvez utiliser align attribut pour le placer au centre ou à droite.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
</body>
</html>Cela produira le résultat suivant -
Graphiques Web gratuits
Pour les graphiques Web gratuits, y compris les modèles, vous pouvez consulter les graphiques Web gratuits