This page has been robot translated, sorry for typos if any. Original content here.

Travailler avec des images

Travailler avec des images

Les graphiques Web jouent un rôle important. Brisant la monotonie des longues pages de texte, elles peuvent véhiculer un sens du contexte, être un élément de l'esthétique de la page ou servir de publicité (notamment dans le cadre d'activités commerciales). Avec toutes les vertus des images, ils ne peuvent pas être maltraités. La raison en est que la majorité des utilisateurs d’Internet n’ont pas choisi l’accès haut débit en raison de son coût élevé et qu’un grand nombre de photos entraîne une attente exorbitante au chargement, ce qui se transforme en une "limite" de patience. Le solde optimal des fichiers graphiques est de 50 à 80 Ko par page. Pour tenir dans ces cadres, compressez les fichiers au format GIF ou JPEG, optimisez les images toutes faites dans ces formats (sur le principe de la "qualité taille").

Accéder aux descriptions des outils du langage HTML, destinés à placer des images sur une page Web, rassemble les images nécessaires dans un dossier. Donc, vous économiserez beaucoup de temps.

Pour insérer des fichiers image sur la page, utilisez une seule balise <IMG> . Voici ses attributs:

  • SRC - indique l'adresse de l'image. S'applique toujours à la balise <IMG>
  • WIDTH - largeur de l'image. (mesuré en pixels (px))
  • HAUTEUR - hauteur de l'image (px)
  • ALIGN - un moyen d'aligner l'image sur la page (valeurs gauche (gauche), droite (droite), haut (haut), bas (bas), milieu (milieu))
  • VSPACE - retrait vertical du texte (px)
  • HSPACE - retrait horizontal du texte (px)
  • ID ou NOM - attribue un nom (si un lien interne est créé avec l'image)
  • BORDER - épaisseur du cadre (px)
  • USEMAP - carte de référence
  • ALT - commentaires qui seront visibles lorsque vous passez la souris sur l'image

Les attributs de la balise <IMG> sont appliqués selon les besoins, à l'exception de la première. Et le code dans la page pourrait ressembler à ceci:

<IMG SRC = "img / tchk.gif" WIDTH = "5" HEIGHT = "5" HSPACE = "5" VSPACE = "5" BORDER = "0" ALIGN = "left">

Veuillez noter qu’il n’ya pas de balise de fermeture </ img> .

Les dimensions de l'image doivent être indiquées - réelles, afin d'éviter un affichage incorrect des images sur l'écran.

Nous aimerions particulièrement souligner l’important attribut ALIGN . Avec son aide, l'image est positionnée sur l'écran:

  • par rapport au texte (le code image est inséré dans les conteneurs <P> </ P> et <DIV> </ DIV> , en se positionnant). Exemple: <P ALIGN = "left"> <IMG SRC = " adresse " ALIGN = "right"> texte </ P>
  • par rapport à la table (le code d'image est inséré dans la cellule de table - le conteneur <TD> </ TD> est aligné sur la cellule)
  • page relativement vierge

Remarque: l’image ne peut pas être alignée verticalement par la méthode habituelle. Pour ce faire, placez-le dans le conteneur <P> </ P> ou <DIV> </ DIV> , où dans ce dernier mettez " ALIGN " avec les valeurs souhaitées.

Une carte de références est une méthode d'utilisation de liens avec une image, généralement divisée en parties, chaque partie servant de lien. Il est basé sur le système de coordonnées cartésien, où (0,0) est le coin supérieur gauche de l'image. Le code de telles cartes de référence est assez laborieux s'il est tapé manuellement. Par conséquent, nous conseillons aux débutants de se tourner vers les éditeurs HTML graphiques, ils affichent le code du lien dans le fichier HTML fini.

Au lieu des attributs VSPACE , HSPASE , BORDER et ALIGN , il est courant d’utiliser des feuilles de style en cascade.

Pour bien comprendre ce processus, une théorie ne suffira pas, alors commencez des exercices pratiques sur votre PC.