Travailler avec des images

Travailler avec des images

Graphics sur des sites Web joue un rôle important. Briser la monotonie des pages de texte long, il peut transmettre le sens du contexte, un élément de l'esthétique pages ou pour servir la publicité (lorsque les activités commerciales importantes). Lorsque toutes les images du fond ne doivent pas être maltraités. La raison est que la majorité des utilisateurs d'Internet ont pas encore choisi une vitesse élevée en raison de son coût élevé, et un grand nombre d'images qu'ils produisent attente excessive au moment du chargement, qui est enveloppé dans une «limite» patience. L'équilibre optimal des fichiers d'image - 50-80 kb sur chaque page. Pour rester dans ces limites compresser les fichiers au format GIF ou JPEG, d'optimiser l'image finie dans ces formats (sur le principe de la «qualité-size").

Arriver à la description des outils HTML, conçus pour accueillir les images sur le Web page, collecter les images dans un seul dossier. Ainsi, vous pouvez économiser beaucoup de temps.

Pour insérer les fichiers d'image sur la page est une seule balise <IMG>. Voici ses attributs:

  • SRC - spécifie l'adresse de l'image. Toujours appliquer à une balise <IMG>
  • WIDTH - la largeur de l'image. (Mesurée en pixels (px))
  • HAUTEUR - hauteur de l'image (px)
  • ALIGN - un moyen d'aligner l'image sur la page (les valeurs à gauche ( à gauche), à droite ( à droite), en haut ( en haut), en bas ( en bas), milieu (milieu))
  • VSPACE - tiret du texte verticalement (px)
  • HSPACE - tiret du texte horizontalement (px)
  • ID ou le nom nom -prisvaivaet ( s'il est fait référence interne à l'image)
  • BORDER - l'épaisseur du cadre (px)
  • USEMAP - carte de référence
  • ALT - des commentaires qui sera visible lorsque vous survolez une image

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

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

S'il vous plaît noter qu'il n'y a pas de balise de fin </ IMG>.

Dimensions de l'image doivent être spécifiés - le réel, afin d'éviter l'affichage incorrect des images sur l'écran.

En particulier , nous voulons noter importante ALIGN d'attribut. Avec elle, l'image est positionnée sur l'écran:

  • sur le texte (code d'image est inséré dans le conteneur <P> </ p> <DIV> </ DIV>, se positionnant entre les deux ). Exemple: <P ALIGN = "left" > <IMG SRC = " adresse" ALIGN = "right"> text </ P>
  • par rapport à la table ( le code de l' image est insérée dans la cellule de la table - le conteneur <TD> </ TD> et alignée par rapport à la cellule)
  • par rapport à une page blanche

Remarque: L'image ne peut pas être aligné verticalement par la méthode habituelle. Pour ce faire, placez - le dans un récipient <P> </ P> ou <DIV> </ DIV>, où à la dernière place "ALIGN" avec les bonnes valeurs.

Card est un moyen de lier l'utilisation de liens en utilisant une image qui est classiquement divisé en parties, où chaque partie est une référence. Il est basé sur l'utilisation d'un système de coordonnées cartésiennes, où (0.0) - le coin supérieur gauche de l'image. tel code de la carte est tout à fait des références de temps, si le gain manuellement. Par conséquent, nous recommandons aux débutants de faire appel à graphique éditeur HTML, il affiche le code dans un fichier HTML prêt.

Au lieu de cela VSPACE attributs, HSPASE, BORDER et alignez sur les pratiques adoptées pour utiliser des feuilles de style en cascade.

Pour saisir pleinement le processus d'une théorie ne suffit pas, par conséquent, de procéder à des exercices pratiques sur votre PC.