17 mai 2010

Les images en HTML

Maintenant, que vous savez mettre en forme du texte (gras, italique, police ...), nous allons passé à l'insertion d'image dans un document HTML. Pour cela, nous allons utiliser la balise suivit de l'attribut SRC.
Maintenant, saisissez . Après le =, vous devez insérer l'adresse de votre images. Vous pouvez mettre une adresse relative (../../image.jpg) ou absolue (http://www.monsite.com/image/images.jpg).
L'exemple suivant vous montre l'insertion du logo helpclic.net dans le une page HTML :
Ce qui donne :
Conseil pour les images :

  • Réduisez au maximum le poids de votre image car plus une image est lourde plus elle mettra longtemps à s'afficher. Pour cela, utiliser des logiciels de retouche photo comme THE GIMP (logiciel gratuit équivalent à PHOTOSHOP)
  • Ajoutez les attributs WIDTH et HEIGHT pour définir la largeur et la hauteur de votre image. Ces deux attribut permet de réserver l'emplacement sur la page même si l'image n'est pas encore affichée. Les valeurs de ces deux attributs sont exprimées par défaut en pixels
  • Ajoutez l'attribut BORDER pour définir ou non une bordure à votre image. La valeur de l'attribut BORDER s'exprime en pixel.
  • Ajoutez l'attribut ALT. Cet attribut affiche le nom de votre image si celle-ci ne s'affiche pas dans votre document HTML. Cet attribut est très important pour le référencement (on en reparlera plus tard)
Voici le code complet de mon logo :
logo helpclic
logo helpclic
Cette image est exactement la même que précédement. La seul différence c'est que pour le référencement de ma page internet, celle-ci est optimisée grâce aux attribut WIDTH, HEIGHT, BORDER et surtout ALT.

Aucun commentaire:

Enregistrer un commentaire