Dans ce chapitre nous allons voir comment on isère une image dans un document HTML..
Pour insérer une image, on utilise la balise dont la syntaxe est la suivante :
<img src="chemin_de_l_image">par exemple, créez un nouveau HTML:
<html>
<head><title>Insérer une image</title></head>
<body>
<h1>Insertion d'images</h1>
<img src="images/image1.png">
</body>
</html>
Vous pouvez spécifier la taille de l'image, aligner un texte, ajouter un commentaire ou encore mettre une image en lien. cette balise accepte donc de nombreux attributs.
Visualisez le contenu du fichier test.html dans votre navigateur et observez.
Le navigateur affiche un titre ainsi qu'une image. Ajoutez les balises suivantes à votre texte pour qu'il ressemble à ceci :
<html>
<head><title>Insérer une image</title></head>
<body>
<h1>Insertion d'images</h1>
<img src="images/image1.png" width="300" height="150" align="right" alt="c'est une image">
<p>Le texte va se positionner à la droite de l'image. Cette balise accepte comme
autre options left et center</p>
</body>
</html>
Enregistrez votre travail, retournez à votre navigateur, actualisez la page et constatez le changement. Le paragraphe est à droite de l'image et la taille de l'image correspond à la taille indiquée dans la balise.
Pour caractériser la taille d'une image, on utilise WIDTH pour la largeur et HEIGHT pour la hauteur, l'unité de mesure par défaut est le pixel. il est important de contrôler la taille des images, cela accélère leur affichage. Pour aligner un texte, on utilise l'attribut ALIGN qui accepte comme valeur LEFT, RIGHT et CENTER.
Pour mettre fin à l'alignement du texte en rapport à l'image, on utilise le saut de ligne BR avec l'attribut clear qui accepte 4 arguments LEFT, RIGHT, CENTER, ALL. Soit on met fin à un alignement à gauche, à droite ou au centre, ou alors on utilise ALL qui met fin à toute type d'alignement. Utilisez le à chaque fois et vous ne ferez jamais d'erreurs.
Pour mettre une image en lien, il suffit d'insérer la balise d'inclusion d'image entre les balises de liens.
<html>
<head><title>Insérer une image</title></head>
<body>
<h1>Faire d'une image un lien Hypertexte</h1>
<a href="../dossier1/liens1.htm" alt="Ce lien est fait à partir d'une image">
<img src="images/image1.png" width="300" height="150" align="right" alt="c'est une image">
</a>
</body>
</html>
Vous pouvez désormais égayer vos documents HTML par l'insertion d'images. Vous êtes aussi en mesure d'utiliser des images pour gérer l'apparence visuelle de vos liens hypertexte. Cependant cette procédure pour générer ses liens est peu efficace auprès des moteurs de recherche.Pensez plutôt à utiliser les CSS par la création d'un arrière plan de calques et un texte édité dans le document HTML. Cette méthode favorisera votre référencement.