Ce didacticiel explique comment décorer une page Web en y ajoutant des graphiques. Nous nous familiariserons avec les formats d'image les plus courants, découvrirons quelle balise est utilisée pour ajouter des images à la page et comprendrons les étiquettes alternatives et l'alignement du texte et des graphiques. Nous nous familiariserons également avec les attributs de base des images et apprendrons comment ajuster la largeur et la hauteur de l'image. Ensuite, quelques mots sur l’utilisation d’images comme liens et sur ce que sont les vignettes d’images. En conclusion, voici quelques conseils généraux pour utiliser des graphiques sur une page Web.

Ajouter des images à une page Web
Si une page Web ne contient que des informations textuelles, quelqu’un peut la trouver intéressante en raison des informations qui y sont présentées, mais il est peu probable que quiconque ose la qualifier d’attrayante. Ajouter des images à une page Web est très simple. L'ajout de graphiques pouvant donner à une page un aspect professionnel nécessite certaines connaissances. C’est le sujet de la leçon d’aujourd’hui.

Les deux formats d'image les plus couramment utilisés sur Internet sont GIF et JPEG. Le format, développé et nommé par le groupe JPEG (Joint Photographic Experts Group), est généralement utilisé pour enregistrer des images avec des transitions de couleurs douces, telles que des photographies.

Presque tous les autres éléments graphiques sont enregistrés au format GIF (Graphics Interchange Format) - un format d'échange graphique. Actuellement, il existe un autre nouveau format graphique qui devient de plus en plus populaire : PNG (Portable Network Graphics). Il est prévu qu'il remplace à terme le format GIF. Cependant, ne vous précipitez pas pour sauvegarder tous vos fichiers graphiques dans ce format, car il n'est pas encore supporté par tous les navigateurs.

Toutes les images sont ajoutées à une page Web à l'aide de la même balise, appelée balise source d'image. . Probablement, vous pouvez maintenant déterminer vous-même que cette entrée est constituée de la balise réelle , son attribut (scr) et la valeur de cet attribut (location). Cependant, étant donné que l'utilisation de l'attribut scr est obligatoire, il est plus pratique de parler de cette entrée comme d'une balise générale. Vous avez peut-être également remarqué que la balise source de l’image n’a pas de balise de fermeture correspondante. Il s'agit d'une balise distincte et autonome, alors n'oubliez pas d'ajouter une barre oblique à la fin : .

#1058;D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DТD/xhtml1/transitional.dtd"> Premières images e> Cette image a été ajoutée à ma première page Web.r >

Ajout de sous-titres alternatifs
En voyageant sur Internet, vous avez probablement remarqué plus d'une fois diverses inscriptions qui s'affichent lorsque vous passez votre souris sur un élément graphique d'une page Web. Ces étiquettes fournissent généralement des informations supplémentaires sur l'image elle-même ou sur la zone de la page qu'elle occupe.

L'exemple de code HTML ci-dessous montre comment l'attribut alt est ajouté à l'intérieur d'une balise . Comme l'attribut src, l'attribut alt indique au navigateur Web des informations supplémentaires sur l'image et peut également toujours être utilisé en conjonction avec une balise. .

L'attribut alt spécifie un texte alternatif pour un élément graphique ajouté à une page Web. Ce texte est appelé texte alternatif car il peut apparaître à l’écran comme alternative à l’image elle-même. L'attribut alt a un autre objectif très important. De nombreux visiteurs Internet qui utilisent de faibles débits de données peuvent demander à leur navigateur de ne pas charger ou afficher d'informations graphiques. Cela leur permet de charger les pages Web plus rapidement sur leurs ordinateurs.

N'oubliez pas non plus que tous les navigateurs ne sont pas capables d'afficher des graphiques dans leurs fenêtres. Par exemple, le navigateur Lynx ne prend pas du tout en charge cette fonctionnalité. Ainsi, l'attribut alt permet à un web designer d'être sûr que si un visiteur de sa page web ne voit pas d'image sur son écran, il pourra au moins voir les informations textuelles ajoutées à cette image.

Bien que l'attribut alt puisse être défini pour chaque balise , veillez à ne pas attribuer de messages texte inappropriés à certains éléments graphiques. Par exemple, cela n’a aucun sens d’ajouter des étiquettes de texte alternatives à divers éléments de l’apparence d’une page Web. Pour éviter de telles erreurs, vous pouvez attribuer l'attribut alt de ces éléments à une valeur vide (alt=""). Si vous ne définissez aucune autre valeur d'attribut, le navigateur restituera l'image à sa taille d'origine, en alignant le bord supérieur de l'image avec le bord supérieur de la chaîne de texte adjacente. Vous pouvez modifier ces deux options à l’aide des balises de feuille de style.

Attributs des images
Pour l'étiquette Des attributs sont fournis qui vous permettent de redimensionner l'image. Certains de ces attributs sont répertoriés ci-dessous.
hauteur— Spécifié en pixels ou en pourcentages — Détermine la hauteur de l'image
largeur— Spécifié en pixels ou en pourcentages — Détermine la largeur de l'image.

Ajustement de la hauteur et de la largeur de l'image
Les dimensions d'une image placée sur une page Web peuvent être spécifiées à l'aide des attributs de hauteur et de largeur. Les valeurs de ces attributs sont précisées soit en nombre fixe de pixels, soit en pourcentage par rapport à la taille de la page. Jetez un œil au code HTML ci-dessous. Dans la première balise, les dimensions de l'image originale, que vous avez déjà vue dans les dessins précédents de cette leçon, sont fixées à 60 pixels verticalement et 60 pixels horizontalement. Dans la deuxième balise, la largeur de la même image est définie à 6 % de la largeur de la page et la hauteur à 10 % de la hauteur de la page. L'image montre à quoi ressemblent ces deux images dans une fenêtre de navigateur.

Lors de l'affichage d'une image dans sa fenêtre, le navigateur est tout aussi efficace pour traiter les valeurs spécifiées en pixels et en pourcentages. Sachez cependant que les ordinateurs des visiteurs de votre page Web peuvent être réglés sur une résolution d'écran différente de celle installée. pour votre moniteur. Qu’est-ce qui en découle ? Par exemple, la résolution du moniteur est définie sur 800x600. Dans l'exemple précédent, la largeur du graphique ajouté à la page Web était définie sur 6 % de la largeur de la page, ce qui, à cette résolution, serait de 48 pixels. Si vous visualisez la même image sur un moniteur avec une résolution de 1024x800, les 6 % spécifiés de la largeur de la page correspondront à une largeur de 61 pixels.

Lorsque vous redimensionnez une image, assurez-vous de définir les deux valeurs pour qu'elles correspondent à sa hauteur et à sa largeur. Si vous modifiez une seule de ces valeurs, l'image elle-même apparaîtra étirée verticalement ou horizontalement sur l'écran. Une autre option consiste à ajuster la taille de l'image à l'aide d'un éditeur graphique.

Vous pouvez créer l'illusion que l'image se charge plus rapidement. Que l'image soit redimensionnée ou non, incluez toujours des valeurs pour les attributs de hauteur et de largeur, car elles indiqueront au navigateur des informations importantes sur la quantité d'espace qui doit être allouée sur la page pour accueillir l'image. Dans ce cas, le navigateur peut désigner l'espace requis pour l'image et continuer à construire d'autres éléments de la page sans arrêter de charger l'image elle-même. De cette façon, la page semble se charger plus rapidement car les visiteurs n'auront pas à attendre que l'image se charge complètement avant de enfin voir d'autres informations présentées sur la page.

Si vous avez vraiment besoin que l'image occupe une quantité spécifique d'espace sur la largeur de la page, utilisez des valeurs en pourcentage. Dans ce cas, sur l'écran de n'importe quel moniteur, l'image occupera la même partie de la page que sur votre écran. Si vous souhaitez que la résolution de l'image elle-même (sa taille en pixels) reste constante, utilisez des valeurs exprimées en pixels.

Aligner le texte et les graphiques
Attribut d'alignement des balises vous permet d'aligner l'image sur le bord droit (valeur droite) ou gauche (valeur gauche) de la ligne de texte. Des exemples d'utilisation de cet attribut sont présentés dans la figure.

Le même attribut peut également être utilisé pour aligner une image verticalement (encore une fois, par rapport à la chaîne de texte). Il peut prendre trois autres valeurs : top, bottom et center. Si l'attribut align est défini sur top, le bord supérieur de l'image est aligné avec le bord supérieur de tout texte environnant. Si l'attribut align est défini sur bottom, le bord inférieur de l'image est aligné avec le bord inférieur du texte environnant. Si l'attribut align est défini sur center, le centre de l'image est aligné sur le centre de la ligne de texte.

Utiliser des images comme liens
Les images ne servent pas seulement à la conception de pages Web. Ils peuvent être utilisés avec succès comme hyperliens vers d’autres documents. HTML résout facilement ce problème car les images sont transformées en hyperliens exactement de la même manière que les légendes. Pour ce faire, vous devez également appliquer une balise, renfermant un élément de page Web qui doit devenir un lien vers un autre document. Ainsi, si un lien hypertexte doit être suivi après avoir cliqué sur une image, la balise doit inclure la balise de cette image.

Dans ce cas, après qu'un visiteur d'une page Web passe la souris sur cette image, le message texte « Ceci est mon autoportrait ! » s'affichera à côté du curseur. En cliquant sur l'image, vous ouvrirez le document DOC2.htm vers lequel pointe le lien hypertexte.

Images miniatures
Une autre façon courante d'utiliser la capacité du HTML à créer des hyperliens consiste à utiliser certaines images pour créer des liens vers d'autres. Pourquoi est-ce nécessaire ? Le fait est que bien souvent, la taille des images que vous souhaitez publier sur une page Web est trop grande et rien ne garantit que les visiteurs auront la patience d'attendre la fin du chargement. Dans de tels cas, une copie plus petite de l’image originale est créée, appelée vignette, que le navigateur peut charger beaucoup plus rapidement. Si un visiteur est intéressé par l'image et souhaite en télécharger une copie complète, il lui suffit de cliquer sur cette vignette. Voici à quoi ressemblent les codes HTML correspondants.

Comme vous pouvez le voir, cliquer sur l'image thumbnail.jpg ouvre un autre fichier image (image.jpg). La chaîne de texte, spécifiée comme valeur de l'attribut alt, indique au visiteur comment ouvrir l'image principale.

Secrets pour utiliser les images avec succès
Les images sont intéressantes et attrayantes, fournissent de nombreuses informations visuelles et sont très faciles à ajouter aux pages Web, mais vous devez tout de même suivre certaines des règles suivantes si vous souhaitez vraiment créer un site qui deviendra populaire auprès des internautes.

Plus la taille du fichier image est grande, plus le téléchargement sur l'ordinateur de l'utilisateur prendra du temps. Étant donné que la plupart des internautes utilisent encore des connexions à faible bande passante pour accéder au Web, la taille des fichiers téléchargés reste pour eux d'une importance cruciale. Assurez-vous d'en tenir compte et essayez de placer les images sur vos pages Web aussi petites que possible.

Non seulement la taille du fichier d’une image individuelle est importante, mais également la taille globale du fichier HTML dans son ensemble. Plus vous ajoutez d’images à une page Web, même petites, plus la taille du fichier du document final sera grande. Prévisualisez votre page dans différents navigateurs et estimez le temps qu'il faudra à chaque navigateur pour la charger.

Parce que l'attribut alt est très important (il est recommandé de le définir pour chaque balise , soyez prudent lorsque vous l'utilisez. Assurez-vous que le contenu du message texte correspond toujours à l'image elle-même, sinon les visiteurs de votre page pourraient être induits en erreur. Le même point s'applique à l'envers : assurez-vous que les images correspondent aux informations textuelles présentées sur la page Web. Une photo d’un avion serait appropriée sur un site Web consacré au transport aérien, mais totalement déplacée sur un site Web consacré à la faune.

Vous pouvez trouver de nombreuses images intéressantes sur Internet et les enregistrer facilement sur votre ordinateur. Cependant, bon nombre de ces images sont protégées par le droit d'auteur. Si vous trouvez une image que vous aimez sur un site commercial, vérifiez s'il y a des mentions de droits d'auteur et si l'image est disponible pour une utilisation gratuite.

Si l'image présentée sur la page Web n'est pas protégée par le droit d'auteur, vous pouvez la copier dans la mémoire de votre ordinateur. Pour ce faire, faites simplement un clic droit sur cette image et sélectionnez Enregistrer l'image sous dans le menu qui s'ouvre. Une fois que vous avez enregistré l'image sur votre ordinateur, vous pouvez l'utiliser davantage comme n'importe quelle autre image.

Définition 1

Une page Web est un fichier texte créé en HTML et hébergé sur le World Wide Web (WWW). En plus du texte, une page Web peut contenir des liens hypertextes grâce auxquels vous pouvez naviguer vers et visualiser d'autres pages Web, ainsi que des inserts sous forme de graphiques, d'animations, de clips vidéo et de musique.

En utilisant HTML, vous pouvez :

1. Créez et modifiez des pages Web.
2. Editez des documents HTML depuis Internet en tenant compte du fonctionnement de tous les objets intégrés dans le document (images, animations, etc.).
3. Utilisation de liens hypertextes et possibilité d'intégrer des dessins, des diagrammes, des animations, des clips vidéo, de la musique et de la parole, des effets spéciaux de texte dans un document HTML, de créer des présentations multimédias, des diaporamas et des projets de démonstration.

Note 1

Les images graphiques sont généralement stockées dans des fichiers séparés. Le langage HTML possède des balises spéciales avec lesquelles des liens sont écrits dans les codes des pages Web, qui sont les adresses réelles de ces fichiers sur Internet. Lorsqu'il rencontre de telles balises, le navigateur Web demande au serveur Web le fichier correspondant avec une image, un audio ou une vidéo et l'affiche sur la page Web à l'emplacement de cette balise. Toutes les données (images, audio et vidéos, etc.) stockées dans des fichiers distincts de la page Web sont appelées éléments intégrés aux pages Web. Examinons de plus près le processus d'ajout d'une image à une page Web.

Ajout d'images à une page Web

L'attractivité des pages Web réside précisément dans les graphiques et autres objets divers qui y sont utilisés. Ajouter une image à une page n’est pas difficile. Mais ajouter des graphiques susceptibles de donner à une page Web un aspect plus présentable et professionnel est beaucoup plus difficile et nécessite des connaissances particulières.

Vous pouvez ajouter une image à une page à l'aide de la balise source de l'image, qui ressemble à :

où est la balise elle-même et scr est son attribut. Puisque l'attribut scr est requis, nous pouvons dire que toute cette entrée est une balise commune. La balise source de l'image n'utilise pas de balise de fermeture correspondante car la balise source est autonome et nécessite donc une barre oblique de fermeture à la fin lorsqu'elle est utilisée : .

Ajout de sous-titres alternatifs

Sur Internet, vous pouvez souvent trouver diverses inscriptions qui s'affichent lorsque vous passez votre souris sur n'importe quel objet graphique d'une page Web. Ces légendes contiennent généralement des informations supplémentaires sur l'image elle-même ou sur la zone de la page sur laquelle elle se trouve.

Vous trouverez ci-dessous le code HTML avec l'attribut alt ajouté à l'intérieur de la balise. Cet attribut, similaire à l'attribut src, indique au navigateur des informations supplémentaires sur l'image et peut également toujours être utilisé en conjonction avec une balise.

alt="(!LANG : Ceci est une image !" />!}

La fonction de l'attribut alt est de définir un texte alternatif pour un élément graphique ajouté à une page Web. On l'appelle alternative car elle s'affiche à l'écran comme une alternative à l'image elle-même. L'attribut alt remplit une autre fonction importante. Il permet au web designer d'être sûr que si un visiteur de la page ne voit pas d'image sur son écran, il pourra au moins voir les informations textuelles ajoutées à cette image.

Lors de l’utilisation de l’attribut alt pour chaque balise, il est important de faire attention à ne pas attribuer de messages texte inappropriés aux éléments graphiques. Par exemple, il ne sert à rien d’ajouter des étiquettes de texte alternatives aux éléments de conception de page. Pour éviter de telles erreurs, vous pouvez définir l'attribut alt de ces éléments sur une valeur vide (alt=" "). Si vous ne définissez aucun autre attribut, le navigateur restituera l'image à sa taille d'origine, mais alignera le bord supérieur de l'image avec le bord supérieur de la chaîne de texte adjacente. Cependant, vous pouvez modifier ces deux paramètres à l'aide des balises de feuille de style.

Attributs des images

La balise possède des attributs qui vous permettent de redimensionner les images. En voici quelques uns:

• hauteur – il est utilisé pour déterminer la hauteur de l'image en pixels ou en pourcentages ;
• largeur – il est utilisé pour déterminer la largeur de l’image en pixels ou en pourcentages.

Ajustement de la hauteur et de la largeur de l'image

Les tailles des images placées sur les pages Web peuvent être définies à l'aide des attributs ci-dessus. De plus, leurs valeurs sont définies soit en nombre fixe de pixels, soit en pourcentage par rapport à la taille de la page. Dans le code HTML ci-dessous, la première balise contient les dimensions de l'image originale en pixels (60 pixels verticalement et 60 pixels horizontalement), la deuxième balise définit la largeur de la même image à 6 % de la largeur de la page, et la hauteur à 10% de la hauteur de la page.

alt="C'est une image !" hauteur="60" largeur="60" />

alt="C'est une image !" hauteur="10%" largeur="6%" />

Note 2

Lors de l'affichage d'images dans sa propre fenêtre, le navigateur fait un travail tout aussi efficace en traitant les deux types de valeurs. Cependant, vous devez vous rappeler que les visiteurs des pages Web peuvent avoir une résolution d'écran différente de la vôtre sur leur ordinateur. Par conséquent, lors du redimensionnement d'une image, vous devez spécifier les deux valeurs de l'image (hauteur et largeur). Si vous modifiez une seule de ces valeurs, l'image à l'écran peut apparaître étirée verticalement ou horizontalement.

Il peut être utilisé pour créer l’illusion d’un chargement plus rapide des images. Pour ce faire, vous devez toujours préciser les valeurs des attributs height et width, que l'image ait été redimensionnée ou non. Parce qu'ils fournissent au navigateur des informations importantes sur la quantité d'espace requise pour placer une image sur une page. En réponse, le navigateur alloue l'espace requis pour l'image et continue de construire d'autres éléments de la page sans arrêter de charger l'image elle-même. Cela donne l'impression que la page se charge plus rapidement, car les visiteurs n'ont pas besoin d'attendre que l'image se charge complètement avant de voir d'autres informations sur la page.

Pour garantir que l'image sur n'importe quel écran, quelle que soit sa résolution, occupe exactement un certain espace sur la largeur de la page, il est nécessaire d'utiliser des valeurs en pourcentage. Si vous souhaitez que la résolution de l'image elle-même soit constante (sa taille en pixels), vous devez utiliser des valeurs en pixels.

Aligner le texte et les graphiques

Pour aligner une image sur le bord droit ou gauche d'une ligne de texte, utilisez l'attribut align de la balise. Par exemple:

alt="C'est une image !" hauteur="60" largeur="60" align="right" />

Pour aligner verticalement une image par rapport à une chaîne de texte, vous pouvez également utiliser cet attribut, qui peut prendre les valeurs haut, bas et centre. La valeur top spécifie que le bord supérieur de l'image doit être aligné avec le bord supérieur du texte environnant. La valeur bottom spécifie que le bord inférieur de l'image doit être aligné avec le bord inférieur du texte environnant. La valeur center spécifie que le centre de l'image doit être aligné avec le centre de la ligne de texte.

Utiliser des images comme liens

Les images sont également utilisées pour créer des hyperliens vers d’autres documents. En HTML, une image devient un hyperlien au même titre qu’une zone de texte. Pour ce faire, on utilise une balise qui renferme un élément de page (dans notre cas, une image) qui doit devenir un lien. Le lien sera suivi en cliquant sur cette image.

Images miniatures

En plus de la méthode ci-dessus, dans laquelle une image agit comme un hyperlien, elle peut également être utilisée comme un hyperlien permettant de passer d'une image à une autre. Ceci est nécessaire dans les cas où la taille de l'image que vous souhaitez publier sur une page Web est assez grande et prendra beaucoup de temps à charger, ce qui est inacceptable pour de nombreux visiteurs. Ils créent donc une copie réduite de cette image (vignette) et la représentent avec un lien hypertexte. Si un visiteur de la page est intéressé par cette image, il peut cliquer sur la vignette pour voir l'image complète. Voici un exemple de code :

alt="Cliquez pour voir l'image normale."

hauteur="60" largeur="60" />

Secrets pour utiliser les images avec succès

Les images fournissent de nombreuses informations visuelles aux visiteurs, ce qui les rend attrayantes, et elles sont également assez simples à ajouter à une page Web, mais il existe certaines règles pour créer un site qui doivent être respectées si nous voulons qu'il devienne populaire sur l'Internet.

Lors de la création de pages, vous devez essayer d'y placer de petites images, car les grandes images prendront beaucoup de temps à charger et certains utilisateurs utilisent encore des connexions à faible bande passante pour accéder au réseau, et par conséquent, la taille des fichiers téléchargés est limitée pour eux.

Note 3

La taille globale du fichier HTML dans son ensemble est également importante, ce qui, à son tour, dépendra non seulement de la taille des images qu'il contient, mais également de leur nombre. Vous devez être prudent lorsque vous utilisez l'attribut alt afin que le contenu du message texte corresponde toujours à l'image elle-même. Et dans le cas contraire : il faut s’assurer que l’image correspond aux informations textuelles présentées sur la page.

Lorsque vous utilisez des images empruntées à Internet sur la page que vous créez, vous devez vérifier si ces images sont protégées par le droit d'auteur.

C'est grâce aux graphismes des pages Web que WWW est devenu le service Internet le plus populaire, et c'est à lui que nous devons toute cette variété de pages.

La particularité des graphiques utilisés sur les pages Web est qu'ils ont leurs propres limites, dont nous devons tenir compte et dont nous devons profiter.

Il existe deux principaux formats de fichiers utilisés sur les sites Web : GIF et JPG. Un nouveau format de graphisme Web appelé PNG (prononcé « ping ») est en cours de promotion, mais il n'est pas encore largement utilisé et tous les navigateurs ne le comprennent pas, nous ne traiterons donc pas de ce format pour l'instant.

Commençons donc par analyser les formats GIF et JPG, décrivons leurs principales propriétés et fonctionnalités.

Format GIF

Ne prend pas en charge plus de 256 couleurs (moins est possible et souvent nécessaire) ;

Utilise une palette de couleurs ;

Utilise une compression sans perte à l'aide de la méthode LZW (qui est similaire à celle utilisée dans l'archiveur PKZIP, et donc les fichiers GIF ne sont pratiquement pas compressés) ;

Prend en charge la numérisation entrelacée ;

Il s'agit d'un format de streaming, c'est-à-dire l'affichage de l'image démarre pendant le pompage ;

Permet d'attribuer l'attribut transparent à l'une des couleurs de la palette, qui est utilisée lors de la création de GIF dits transparents ;

Il a la capacité de sauvegarder plusieurs images dans un seul fichier, qui est utilisé dans la production de GIF animés ;

Prend en charge la possibilité d'insérer des blocs de contrôle dans un fichier, qui vous permettent d'insérer des commentaires dans le fichier (par exemple, sur les droits d'auteur :), le délai entre l'affichage des images, etc.

Et maintenant, une petite précision : à quoi peuvent conduire ces propriétés. GIF prend en charge un maximum de 256 couleurs, ce qui signifie que toutes les images que nous enregistrons au format GIF réduisent explicitement ou implicitement le nombre de couleurs pour respecter cette limite (différents programmes avec un succès variable). Et d'où la conclusion - si vous avez besoin de placer une belle photographie avec des transitions douces et des nuances de couleurs subtiles, alors après la transformation, tout sera bien pire - les nuances ne seront plus subtiles et la photographie entière prendra un aspect non naturel, aspect irréaliste. Par conséquent, si vous devez toujours enregistrer la photo au format GIF et transmettre toutes les nuances, vous devez alors recourir à des astuces. Par exemple, vous pouvez appliquer un filtre artistique à une photographie et la transformer en dessin ou appliquer des tons. Mais l'enregistrement d'images et de dessins dans ce format ne pose aucun problème : ils sont généralement bien compressés et ne contiennent pas beaucoup de couleurs. Examinons maintenant les propriétés et les fonctionnalités du deuxième format le plus populaire sur Internet.

Format JPEG

Vous permet d'enregistrer des images en couleur avec un nombre de couleurs de 16,7 millions de couleurs (ou 24 bpp), et si l'image a moins de couleurs, avant d'enregistrer le fichier, elle est toujours convertie en une image en couleur ; Utilise une compression avec perte, grâce à laquelle il atteint des niveaux de compression de fichiers faramineux ; Prend en charge le balayage progressif, c'est-à-dire L'image apparaît d'abord avec une qualité médiocre et s'améliore progressivement au cours du processus de chargement. Ce sont peut-être tous les avantages du format JPG, et son objectif principal est de stocker des images de qualité photographique.

Optimisation graphique

Tout le travail de traitement graphique est effectué dans un format intermédiaire

Examinons quelques fonctionnalités du travail avec des graphiques. Malgré le fait que nous enregistrions les images dans un fichier GIF prenant en charge 256 couleurs ou dans un fichier JPG avec 16,7 millions de couleurs, nous devons travailler avec l'image dans un format intermédiaire qui nous permet de sauvegarder l'image sans distorsion et sans perte de couleurs de profondeur (par exemple, TIFF et formats internes d'éditeurs tels que PSD). Le fait est que pendant le travail, vous devrez modifier ou déformer l'image plusieurs fois, ce qui entraînera finalement une réécriture répétée du fichier. Un enregistrement répété au format GIF entraînera la perte des nuances de l'image, et au format JPG, chaque nouvel écrasement du fichier introduira de nouvelles distorsions et, après un certain temps, la photo aura l'air terrible. Par conséquent, tous les travaux de traitement graphique sont effectués dans un format intermédiaire (bien qu'il comporte des fichiers de grande taille) et ce n'est qu'à la toute dernière étape que l'image est convertie au format souhaité (souvent simultanément à l'optimisation de la taille du fichier).

Pour les pages Web, la question de la taille des photos est très importante. Quelle taille dois-je les faire ? Vont-ils prendre trop de temps à charger ? Lors de l’optimisation, vous pouvez réduire la taille du fichier, mais cela ne vaut guère la peine d’optimiser une photo qui n’a aucun sens. La toute première étape de l'optimisation consiste à mettre en évidence l'essentiel de la photographie (en éliminant tout le reste) et à se concentrer sur l'élément illustré. Ceci est réalisé grâce à l'opération de recadrage et à la recherche de la partie la plus expressive qui transmet le sens de la photographie. Après cette opération, vous pouvez déjà optimiser l'image, et dans ce cas elle aura effectivement la plus petite taille.

Et avec la taille des photographies, vous devez respecter un certain compromis - ne les rendez pas trop petites, dans lesquelles vous ne pouvez rien voir même à la loupe, et vous ne devez pas les rendre trop grandes, pour ne pas étirer le temps dans l'éternité. Bien sûr, il y a des exceptions : une grande photo correctement optimisée peut prendre un temps de transfert équivalent au temps de transfert d'une photo ordinaire et, à l'inverse, une petite photo mal optimisée prendra jusqu'à la fin des jours pour se charger. Une photographie ordinaire peut être considérée comme une photo d’une taille d’environ 250 x 300 pixels et occupant environ 6 à 10 kilo-octets. Cela ne signifie pas que toutes les photographies doivent être de cette taille, mais la zone de la photographie doit lui être équivalente. Ces recommandations s'appliquent aux photographies qui « illustrent » du texte et ne s'appliquent pas aux dessins qui servent d'éléments de navigation.

Le deuxième élément le plus important du remplissage des pages Web après le texte sera sans aucun doute la conception graphique. Il s’agit de différents types de dessins, de photographies et peut-être même de clips vidéo. Nous pouvons également utiliser le son pour afficher des pages Web.
Nous allons commencer par placer des images graphiques. Les navigateurs ne peuvent afficher que trois types de fichiers graphiques. Il s'agit de fichiers GIF, JPEG et PNG. Les fichiers GIF vous permettent de créer des images animées. Les fichiers JPEG sont couramment utilisés pour enregistrer des images photographiques. Le format PNG récemment introduit permet de combiner une bonne qualité d'image et une petite taille de fichier graphique. Mais une fois que l'image a été regroupée dans un fichier graphique, elle doit encore être intégrée d'une manière ou d'une autre dans la page Web.

La balise est utilisée pour cela avec de nombreux paramètres. Cette balise n'a pas de paire fermante car elle ne crée aucune portée pour la règle d'affichage, elle intègre uniquement une image graphique dans le contenu de la page Web. En fait, une image graphique peut aussi être un hyperlien ou même cacher plusieurs hyperliens derrière elle, mais nous parlerons des hyperliens dans la section suivante de ce chapitre, mais pour l'instant nous comprendrons les règles d'utilisation de la balise .

L'attribut principal et obligatoire de la balise est l'attribut src. La valeur de cet attribut est l'adresse du fichier graphique inséré, ou, pour être plus précis, son URL. Si le fichier graphique se trouve sur le même serveur Web, il suffit alors d'écrire le nom complet du fichier, y compris son chemin d'accès dans les sous-répertoires, c'est-à-dire si le répertoire images contient des images, alors la balise d'insertion d'image graphique prendra le formulaire suivant :

Dans cet exemple, nous utilisons une image GIF située dans un fichier appelé pictl.gif, lui-même situé dans un répertoire appelé images. Il convient de noter que les barres obliques - barres obliques - sont inclinées dans une direction différente de celle utilisée dans les chemins de fichiers des systèmes d'exploitation des familles DOS et Windows. Le fait est qu'au départ, les serveurs Web étaient basés sur le système d'exploitation Unix, qui prend en charge un système de fichiers avec des barres obliques similaires. Désormais, quel que soit le système d'exploitation pris en charge par le serveur du site Web, tous les chemins sont écrits de la même manière et traités correctement par le logiciel serveur.

À l'aube du développement du WWW, les navigateurs affichaient uniquement des informations textuelles ; aucun graphique n'était pris en charge. De nos jours, cela ne se produit pratiquement jamais, mais chaque navigateur a la possibilité de désactiver le chargement des graphiques. Par conséquent, vous devez toujours utiliser la représentation textuelle alternative de l’image. Simplement, vous devez préparer le texte qui sera affiché à la place d'une image s'il ne peut pas être chargé par le navigateur pour une raison quelconque. Ce texte est ajouté à la balise en utilisant le paramètre ait, dont la valeur est la chaîne de texte souhaitée, c'est-à-dire que vous obtenez approximativement la construction suivante :

Dans le cas où l'image graphique est toujours affichée par le navigateur, le texte de la représentation textuelle alternative est affiché sous forme d'« indice », un court indice de texte lorsque l'utilisateur passe le curseur de la souris sur l'image graphique souhaitée.

Cependant, il existe une option plus détaillée pour créer de telles invites textuelles. À l'aide du paramètre longdesс, l'adresse de la ressource Internet est spécifiée, qui contient une description complète de cette image graphique. La valeur de ce paramètre est bien entendu l'URL de la ressource avec une description de l'image.

Le paramètre name vous permet de spécifier un nom d'image unique qui identifie cet élément de conception de page Web. Cette option est conservée à des fins de rétrocompatibilité ; elle reste des versions précédentes du standard HTML. Actuellement, toutes les balises utilisent le paramètre id à ces fins.

Par défaut, l'image graphique est affichée exactement telle qu'elle a été créée, en conservant ses dimensions verticales et horizontales. Cependant, nous avons la possibilité de définir explicitement les dimensions de l'image à notre discrétion. Les paramètres de hauteur et de largeur sont utilisés pour cela. Nous savons déjà comment définir les dimensions en pixels ou en pourcentages. Il est seulement nécessaire de noter que les navigateurs s'efforcent de conserver les proportions de l'image, donc la définition explicite des dimensions qui modifient les proportions peut être ignorée par le navigateur, et il choisira les dimensions qui seraient aussi proches que possible de celles spécifiées par le navigateur. utilisateur sans violer les proportions. Par conséquent, les images graphiques des tailles qui seront utilisées lors de leur affichage dans le cadre de pages Web sont généralement préparées pour les pages Web. Et si une image doit être affichée plusieurs fois avec des tailles différentes, il est alors plus facile de préparer plusieurs fichiers graphiques que de confier vos dessins au navigateur pour un affichage non autorisé, ce qui peut perturber toute la mise en page des pages Web.

À l'aide de paramètres, nous pouvons spécifier la quantité d'espace libre qui séparera l'image graphique des autres éléments de conception de la page Web qui l'entoure, c'est-à-dire, en fait, définir l'indentation de l'image. Les paramètres hspace et vspace sont utilisés pour cela. Le paramètre hspace définit l'espacement horizontal en pixels et le paramètre vspace définit l'espacement vertical. Veuillez noter que seules les valeurs numériques indiquant les distances en pixels peuvent être utilisées comme valeurs pour ces paramètres. Aucune valeur nulle n'est prévue pour ces paramètres, mais généralement chaque navigateur utilise une petite valeur non nulle.

Et en utilisant le paramètre border, nous pouvons définir l'épaisseur de la bordure entourant l'image. Comme d'habitude, la valeur du paramètre est un nombre indiquant l'épaisseur en pixels. La valeur par défaut est zéro, ce qui rend la bordure invisible.

Il faut également mentionner l’alignement de l’objet graphique par rapport au texte qui l’entoure. Le paramètre align est utilisé pour cela. Un mot-clé parmi un ensemble prédéfini d’entre eux peut être utilisé comme valeur. Les valeurs du bas, du milieu et du haut sont utilisées pour positionner la première ligne de texte qui s'étend verticalement autour de l'image. La valeur top le déplace vers le haut, bottom le déplace vers le bas et middle permet de centrer la ligne verticalement. Les valeurs gauche et droite permettent d'aligner l'image graphique horizontalement. La première valeur, à gauche, comme vous pouvez le deviner, déplace l'image vers le bord gauche du bloc dans lequel elle est affichée, et vers la droite, vers la droite.

Il est maintenant temps de voir, avec des exemples, comment positionner un dessin et le combiner avec du texte qui doit entourer l'image graphique souhaitée.

Inscription 1.11

"http://www.w3.org/TR/htm!4/strict.dtd">




<р>
C'est le texte qui entoure l'image.
C'est le texte qui entoure l'image.

L'apparence de ce document HTML lorsqu'il est affiché à l'aide d'un navigateur est illustrée à la Fig. 1.11.

Riz. 1.11. Fenêtre du navigateur affichant le résultat de l'affichage du fichier présenté dans le listing 1.11

Dans cet exemple, nous avons utilisé une pure balise d’insertion d’image sans aucun paramètre supplémentaire. Comme nous pouvons le voir, l'image est insérée immédiatement après la première phrase, là où nous avons placé la balise . Dans le même temps, si nous réduisons horizontalement la taille de la fenêtre d'affichage du navigateur afin que la première phrase et le dessin ne puissent pas y tenir sur une seule ligne, alors la phrase serait affichée en premier, puis le dessin en dessous, pressé contre le bord gauche de la fenêtre de visualisation. À sa droite, le texte qui le suit commencerait à s'afficher de manière à ce que la ligne de base de la ligne coïncide avec le bord inférieur du dessin.

Ajoutons maintenant un paramètre d'alignement horizontal à la balise d'affichage de l'image. Le code résultant est présenté dans le listing 1.12.

Inscription 1.12

"http://www.w3.org/TR/html4/strict.dtd">


<р>C'est le texte qui entoure l'image. align="ieft">
C'est le texte qui entoure l'image. C'est le texte qui entoure l'image.
C'est le texte qui entoure l'image.

Comme vous pouvez le voir, dans ce cas encore, le texte commence à s'afficher en premier, puis l'image graphique, pressée vers le bord gauche, selon la directive donnée à l'aide du paramètre align, et le reste du texte est placé au bord gauche. à droite de l'image (Fig. 1.12), c'est-à-dire que l'image ne peut pas occuper la première ligne, puisque le texte commence avant elle. La même chose se produira si vous utilisez le paramètre align avec la valeur right, mais l'image ne sera pressée que contre le bord droit de la fenêtre et le texte circulera autour d'elle sur le côté gauche. C'est tous les changements.

Voyons maintenant comment fonctionne l'alignement vertical. Bien que le paramètre d'alignement soit inséré dans la balise d'image, les changements les plus importants sont visibles dans le texte entourant l'image. Voyons l'effet du paramètre d'alignement vertical à l'aide d'un exemple.

Riz. 1.12. Fenêtre du navigateur affichant le résultat du fichier présenté dans le listing 1.12

Inscription 1.13

"http://www.w3.org/TR/html4/striqt.dtd">




<р>C'est le texte qui entoure l'image. align="milieu">
C'est le texte qui entoure l'image. C'est le texte
qui circule autour du dessin.
C'est le texte qui entoure l'image.

Le résultat de l'affichage de ce document HTML est présenté dans la Fig. 1.13.

Riz. 1.13. Fenêtre du navigateur affichant le résultat du fichier présenté dans le listing 1.13

Dans cet exemple, nous définissons l'alignement vertical au centre, ce qui signifie que la première ligne de texte après la balise d'insertion d'image apparaît verticalement centrée dans l'espace blanc à droite de l'image. Le reste du texte apparaît sous l'image. Si nous devions définir le paramètre d'alignement sur top, alors la première ligne apparaîtrait à côté de la bordure supérieure de l'image. Et lorsque vous utilisez la valeur inférieure, la première ligne de texte apparaîtra à côté de la bordure inférieure de l'image. Notez que le navigateur ne reconnaît qu'un seul paramètre d'alignement, ce qui signifie que nous pouvons spécifier un alignement vertical ou horizontal. Si les outils intégrés pour positionner et aligner l'image ne suffisent pas, vous pouvez vous tourner vers le processus de mise en page à l'aide de tableaux. Nous examinerons l’utilisation des tableaux dans l’une des sections suivantes de ce chapitre.

Nous avons la possibilité d'utiliser des vidéos dans la conception de pages Web. Vous devez être très prudent lorsque vous les utilisez, car les fichiers contenant ces ressources vidéo sont généralement assez volumineux. Et pour qu'un utilisateur distant puisse les visualiser dans son navigateur, il lui faudra télécharger intégralement ce fichier sur sa machine. En utilisant les canaux accessibles à la plupart des internautes, une telle procédure peut prendre beaucoup de temps. Mais aucun de nous n’aime attendre qu’une page Web se charge.

Les navigateurs sont généralement capables de lire les fichiers vidéo AVI, Real Video et Windows Media. Et leur implémentation dans la page Web se fait à l'aide de la même balise . Mais le paramètre dunscr est utilisé pour spécifier l'emplacement du fichier vidéo. Par défaut, un clip vidéo intégré dans une page Web est lu une seule fois, immédiatement après le chargement complet de la page. Mais nous avons quelques possibilités de réguler le processus de lecture d'un clip ou de donner à l'utilisateur la possibilité de contrôler sa lecture.

Si inclus dans la balise Si nous activons le paramètre start, nous pouvons spécifier explicitement un événement après lequel le navigateur devra lire le clip vidéo téléchargé. Les mots-clés mouseover et fileopen peuvent être utilisés comme valeurs pour ce paramètre. Le premier précise que le clip doit être lu après que l'utilisateur a placé le curseur de la souris sur l'espace alloué à l'insertion vidéo, et le second précise que la lecture commencera immédiatement après le chargement complet du fichier HTML. Cependant, nous pouvons combiner ces deux options. Dans ce cas, la balise d'intégration vidéo ressemblera à ceci :

Nous pouvons spécifier combien de fois la vidéo doit être lue en utilisant le paramètre de boucle prévu à cet effet. La valeur de ce paramètre est un nombre qui spécifie le nombre de fois que le clip vidéo sera répété. Cependant, si nous voulons que la vidéo soit lue en continu, sans nombre fixe de répétitions, nous devons alors utiliser la valeur infinie. Et en utilisant le paramètre loopdelay, nous pouvons définir un délai entre les répétitions d'un clip vidéo. La valeur de ce paramètre est un nombre indiquant la période de temps en millisecondes. Examinons l'utilisation de ces paramètres en utilisant le fragment de code suivant comme exemple :

Ici, nous spécifions explicitement que le clip vidéo sera lu deux fois immédiatement après le chargement de la page Web, avec un délai de cinq secondes entre les lectures.

Dans ce cas, nous contrôlons nous-mêmes l'affichage du fichier vidéo. Mais on peut transférer cette prérogative à un utilisateur distant qui chargera la page Web. Pour ce faire, vous devez entrer dans la balise contrôle le paramètre sans aucune valeur. La présence de ce paramètre dans la balise indique clairement que les commandes de lecture seront affichées avec le clip vidéo sur la page Web.

Les paramètres que nous avons considérés sont tout à fait suffisants pour l'intégration correcte des fichiers vidéo dans le contenu d'une page Web. Regardons un exemple détaillé (Fig. 1.14).

Inscription 1.14

"http://www.w3.org/TR/html4/strict.dtd">
.

<р>Texte brut.

Riz. 1.14. Fenêtre du navigateur affichant le résultat du fichier présenté dans le listing 1.14

Naturellement, puisque la procédure d'insertion d'un fragment vidéo dans le corps d'une page Web est un cas particulier d'insertion de graphiques, alors tous les autres paramètres applicables à la balise sont appliqués à la balise d'insertion de fragment vidéo. , tels que les paramètres d'alignement, l'indication explicite de la taille et autres.

Les capacités multimédia incluent également la conception sonore d'une page Web. Mais nous ne pouvons utiliser le son que comme format d’arrière-plan, c’est-à-dire qu’un certain fichier son sera lu sur l’ordinateur de l’utilisateur distant après le chargement de la page Web. Si, bien sûr, son ordinateur est équipé d'une carte son, c'est-à-dire qu'un fichier HTML contenant une page Web est initialement téléchargé sur l'ordinateur de l'utilisateur distant, puis tous les autres fichiers utilisés dans la conception de cette page Web, tels que les fichiers graphiques, des vidéos, sont téléchargées - et des clips audio.

Ainsi, pour que la visualisation d'une page Web soit accompagnée d'une lecture sonore, vous devez insérer la balise dans le code de la page . La balise n'est pas placée dans le corps de la page Web, mais dans son titre, c'est à dire entre les balises Et. Cette balise a un paramètre src obligatoire, dont la valeur est l'URL du fichier son inclus. Il convient de noter que les navigateurs sont assurés de reconnaître et de lire les fichiers audio MIDI et WAV. La lecture d'autres formats, tels que MP3 et Real Audio, n'est possible que lorsque des modules supplémentaires sont connectés aux navigateurs.

Comme pour les clips vidéo, nous pouvons définir le nombre de fois qu'un fichier audio sera lu à l'aide du paramètre de boucle. La valeur de ce paramètre est le nombre de répétitions. Si vous avez besoin de lire constamment un fragment audio, vous devez utiliser la valeur "-1", c'est-à-dire que si nous voulons qu'un certain fichier audio soit lu en continu lors du chargement d'une page Web, nous devons utiliser la construction suivante :

Ceci conclut notre réflexion sur l'utilisation d'objets multimédias et graphiques dans la conception de pages Web et passe à la partie suivante du premier chapitre.

L'une des fonctionnalités les plus attrayantes du WWW est la possibilité d'inclure des liens vers des fichiers graphiques et multimédias qui rendent une page Web plus attrayante et intéressante. Cela peut inclure des icônes, des dessins, des photographies, des images cliquables et l'utilisation de données audio, vidéo et d'animation.

2.2.1. Insérer des graphiques dans un document HTML

L'importance des images graphiques dans la création de documents électroniques ne peut être surestimée : les documents deviennent plus expressifs et plus vivants et seront perçus plus facilement et plus naturellement. Cependant, il faut toujours se rappeler du sens des proportions dans tout. La sursaturation d’un document avec du matériel illustratif détournera de manière injustifiée l’attention des utilisateurs du véritable contenu de la page et entraînera également un chargement plus lent de la page en raison de la présence d’un grand nombre d’images.

Les composants graphiques d'une page Web peuvent être divisés en trois grandes catégories selon leur objectif :

– graphiques illustratifs, y compris les photographies de texte d'accompagnement et les dessins explicatifs , dessins, diagrammes;

– graphiques fonctionnels, qui représente les contrôles (boutons de navigation, compteurs et éléments de formulaire interactifs) ;

– graphismes décoratifs –éléments de conception de page qui y sont inclus pour la beauté et ne transportant pas de charge d'informations (images d'arrière-plan, séparateurs réalisés sous forme de fichiers graphiques, en-têtes et bien plus encore).

Formats graphiques. En raison de l’utilisation d’Internet, le téléchargement des graphiques prend un certain temps. Et plus ce temps est court, plus c'est pratique pour l'utilisateur. Par conséquent, les trois formats les plus populaires actuellement utilisés pour les images graphiques sont GIF, JPEG et PNG. Ils contiennent divers algorithmes de compression d'images avec perte, qui peuvent réduire considérablement la taille du fichier cible.

GIF-format. En 1978, les chercheurs israéliens Jacob Ziv et Abraham Lempel ont développé un nouvel algorithme de compression de données pour l'époque sans perte de données (LZ78 est le nom du projet). Quelques années plus tard, le programmeur américain Terry Welch l'a amélioré (LZW) et a également présenté son développement à l'usage de tous.

En 1987, Bob Berry a créé un format graphique fondamentalement nouveau, le GIF, basé sur l'algorithme LZW. L'essence de l'algorithme de compression : la réduction de la taille d'un fichier graphique est obtenue en mélangeant des nuances similaires en une seule ; les informations sur l'image dans le fichier GIF sont enregistrées ligne par ligne, c'est-à-dire qu'il s'agit d'un tableau de descriptions de lignes d'un pixel de haut. Propriétés : mélanger des nuances similaires en une seule, fonctionnant avec une palette fixe de 256 couleurs.

Le format GIF est utilisé dans un document HTML uniquement pour afficher des graphiques professionnels : diagrammes, logos, boutons, autres éléments de conception de page - et des images avec une palette de couleurs de 256.

Une autre propriété du GIF est l'entrelacement, c'est-à-dire l'image n'est pas chargée en totalité, mais par parties (les 1ère, 5ème, 10ème lignes sont lues, puis la 2ème, 6ème, 11ème, etc. ), c'est-à-dire qu'elle semble se manifester.

En 1989, CompuServe a publié une nouvelle version de GIF89a, qui utilise ce qu'on appelle le « canal alpha » - qui est un masque de transparence de l'image - pour créer une image avec un fond transparent en l'enregistrant avec le fichier. Les couleurs saturées car transparentes deviennent invisibles dans le navigateur.

Une autre caractéristique de GIF89a est que ce format vous permet de stocker plusieurs images différentes dans une formule avec un seul titre physique, en les affichant séquentiellement les unes après les autres.

JPEG-format. La norme JPEG est utilisée pour publier des photographies, des reproductions de peintures et des images comportant un grand nombre de couleurs et de transitions de couleurs. Format JPEG, créé sur la base d'un algorithme de compression d'image unidirectionnelle avec perte de qualité, codant non pas des éléments identiques, comme les algorithmes LZW, mais des intervalles interpixels.

Le mécanisme de compression comprend trois étapes.

L'image est convertie en une image couleur LAB, qui la décompose en trois canaux indépendants : L – préserve l'intensité des couleurs, A et B – pour stocker les informations de couleur.

Compression : environ les trois quarts des informations de couleur sont supprimés du modèle de couleur résultant, puis l'image est divisée en sections de 8 x 8 pixels et convertie en un tableau de données numériques. Le titre de chaque bloc décrit la couleur dominante de la zone, le reste des informations décrit des nuances moins visibles.

Lors de la troisième étape de compression, une certaine partie des informations décrivant les nuances secondaires est supprimée du tableau de données et la quantité de données supprimées dépend de la qualité de l'image résultante sélectionnée par l'utilisateur. Et enfin, le fichier fini est compressé selon l'algorithme de Hoffman, qui consiste à remplacer les caractères les plus fréquents dans le tableau de données par un codage à deux bits plus compact.

La décompression JPEG s'effectue dans l'ordre inverse.

Le nombre maximum de couleurs qu'une image JPEG peut contenir est de 16 millions.

PNG-format. Ce format a été développé en 1995 pour remplacer le format GIF après qu'Unisys ait déposé un droit d'auteur sur son algorithme de compression LZW. Parallèlement, certaines caractéristiques techniques ont été développées, notamment en améliorant la qualité et en augmentant le nombre de couleurs supportées.

Activation des graphiques dansla toile-page. L'intégration de graphiques dans un document HTML se fait à l'aide d'une seule balise < IMG >.

L'attribut SRC (source) spécifie l'URL de l'image (Figure 2.3).

Riz. 2.3. Exemple d'affichage avec tag < IMG >

Cet attribut est obligatoire dans la balise < IMG > (Tableau 2.2).

Tableau 2.2

Attributs des balises< IMG>

Fin de tableau. 2.2

HEIGHT="215" BORDER="5" ALT="lily">!}

L'utilisation d'une balise dans cet exemple permet de placer une image d'un fichier sur le côté droit de la fenêtre du navigateur, de définir la taille de cette image et de la placer dans un cadre (voir Figure 2.3).