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

Travailler avec des images

Travailler avec des images

Les graphiques sur les sites Web jouent un rôle important. Violant la monotonie des longues pages de texte, il peut véhiculer la signification du contexte, être un élément de l'esthétique des pages ou servir de publicité (important dans les activités commerciales). Avec tous les mérites des images, ils ne peuvent pas être abusés. La raison en est que la plupart des utilisateurs d'Internet n'ont pas encore opté pour l'accès haut débit en raison de son coût élevé, et qu'un grand nombre d'images leur causent une attente exorbitante au démarrage, qui se transforme en «limite» de patience. L'équilibre optimal des fichiers graphiques est de 50-80 ko par page. Pour s'adapter à ce cadre, compresser les fichiers au format GIF ou JPEG, optimiser les images finies dans ces formats (sur la base du principe «taille-qualité»).

Lorsque vous commencez à décrire des outils HTML pour placer des images sur une page Web, compilez les images dans un dossier. Vous économiserez donc beaucoup de temps.

Pour insérer des fichiers image sur la page, il n'y a qu'une seule balise <IMG> . Voici ses attributs:

  • SRC - indique l'adresse de l'image. Toujours applicable à la balise <IMG>
  • WIDTH est la largeur de l'image. (mesurée en pixels (px))
  • HAUTEUR - la hauteur de l'image (px)
  • ALIGN - la méthode d'alignement de l'image sur la page (valeurs de gauche, droite, haut, bas, milieu)
  • VSPACE - indentation du texte le long de la verticale (px)
  • HSPACE - indentation du texte horizontalement (px)
  • ID ou NAME- attribue un nom (si une référence interne est faite à l'image)
  • BORDER - l'épaisseur de la trame (px)
  • USEMAP - carte de référence
  • ALT - commentaires qui seront visibles lorsque vous survolerez l'image

Les attributs de la balise <IMG> sont appliqués au besoin, sauf pour le premier. Et le code dans la page pourrait ressembler à ceci:

<IMG SRC = "img / tchk.gif" LARGEUR = "5" HAUTEUR = "5" HSPACE = "5" VSPACE = "5" BORDER = "0" ALIGN = "gauche">

Notez qu'il n'y a pas de balise de fermeture </ IMG> .

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

Surtout nous voulons noter l'attribut important ALIGN . Avec son aide, l'image est positionnée sur l'écran:

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

Remarque: L'image ne peut pas être alignée verticalement avec 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érence est un moyen d'appliquer des liens au moyen d'une image divisée conditionnellement en parties où chaque partie sert de référence. Il est basé sur le système de coordonnées cartésiennes, où (0,0) est le coin supérieur gauche de l'image. Le code pour ces cartes de référence est assez laborieux, si vous le tapez manuellement. Par conséquent, les débutants sont invités à se référer aux éditeurs HTML graphiques, ils sortent le code de 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 suffit pas, alors commencez une formation pratique sur votre PC.