Une seule balise est utilisée pour insérer une image dans le texte d'une page Web. (Tableau P1). Les attributs de cette balise définissent tous les paramètres de l'image placée sur la page. L'attribut SRC est obligatoire, définissant l'adresse et le nom du fichier graphique. Si l'attribut SRC n'est pas défini, seule l'icône d'image vierge sera affichée.

Structure des balises avec l'attribut SRC ressemble à :

.

Si un fichier graphique nommé Institute se trouve dans le même dossier que la page Web, alors pour le placer, vous devez écrire :

.

Format du nom de fichier

Pour placer un fichier graphique portant le nom MINSK, situé dans D:\Collection\Cities\MINSK.GIF, vous devez écrire .

Utiliser une balise une page Web contient un fichier graphique situé sur un autre ordinateur dans réseau mondial"Internet".

Pour créer une page Web avec une photo de notre institut, illustrée à la Fig. 4.1, vous devez saisir le code HTML suivant :

Notre Institut

Riz. 4.1. Page web avec photo de l'institut

Dans l'exemple ci-dessus, la hauteur de la photo (HEIGHT) est de 200 pixels et la largeur (WIDTH) est de 300 pixels. Pour placer la photo, un paragraphe est créé avec un alignement central.

Lignes horizontales

Les lignes horizontales sont placées sur une page Web à l'aide d'une seule balise

Regardons quelques exemples pour expliquer le placement des lignes horizontales :

1.

2.

WIDTH = "200" ALIGN="RIGHT"> – une ligne horizontale de couleur verte, de 15 pixels d'épaisseur, 200 pixels de large et alignée à droite.

3.

4.

WIDTH = "300" ALIGN = "LEFT"> – une ligne horizontale de couleur rouge, de 20 pixels d'épaisseur, 300 pixels de large et alignée à gauche.

L'affichage des lignes pour les quatre exemples enregistrés est illustré à la Fig. 4.2.

Riz. 4.2. Lignes sur une page Web

TABLEAUX

Création de tableaux

Le tableau est créé à l'aide d'une balise appariée

Tout tableau est constitué de lignes et de lignes – de cellules. Les balises suivantes sont utilisées pour former des lignes et des cellules de tableau :

... – nouvelle ligne ;

... – cellule d'en-tête;

... – une cellule de tableau ordinaire.

Ces balises sont écrites à l'intérieur d'une balise appariée

Le tableau est formé ligne par ligne - d'abord, une ligne est spécifiée et le nombre requis de cellules y est indiqué, puis la deuxième ligne, etc.

Afin d'obtenir le tableau présenté à la Fig. 5.1, vous devez saisir le code HTML suivant :

Riz. 5.1. Page du tableau

Le texte dans les cellules d'en-tête du tableau (Fig. 5.1) est affiché en caractères semi-gras et aligné au centre de la cellule, tandis que dans les cellules normales, le texte n'est pas mis en surbrillance et est aligné à gauche.

A noter que dans le code HTML de la page ci-dessus la balise

alors l'épaisseur de la bordure extérieure sera de 6 pixels. Pour empêcher l'affichage des bordures du tableau, vous devez définir l'attribut BORDER sur 0, ou simplement omettre cet attribut.

Comme indiqué, le HTML est aujourd'hui la base pour écrire n'importe quelle page Web dans World Wide Web. À en utilisant CSS Le codage HTML évolue radicalement. Vous pouvez dire adieu à la réutilisation de balises HTML encombrantes uniquement pour obtenir certains effets visuels. À propos de certaines balises ou attributs HTML, tels que la balise obsolète...

Maison

Commandez un site Web et commencez à faire des affaires !

Cette phrase peut être entendue et vue sur de nombreux sites, et ce n'est pas en vain !

Site web — c'est le visage de l'entreprise. Et c’est le canal de communication le plus moderne et le plus efficace avec les consommateurs potentiels. Seules les capacités d'un site Internet permettent d'utiliser pleinement tous les moyens de transmettre un message d'information à l'utilisateur. Des informations textuelles, audio et vidéo peuvent être présentées sur un seul site pour familiariser le consommateur avec elles.

En utilisant logiciel Sur le site, vous pouvez accepter des paiements, parler au téléphone, gérer des bases de données, envoyer et recevoir des fax, échanger des SMS et effectuer de nombreuses autres actions. Un site Internet moderne est un centre d'information non seulement pour toute entreprise, mais aussi pour tout internaute.

Et c'est une manière gagnant-gagnant de transmettre efficacement et en même temps simplement et clairement vos idées ou vos développements au public le plus large. Et aujourd'hui, les documents Web écrits dans le langage de balisage hypertexte HTML restent la principale forme de présentation de données dans l'environnement Web.

Les avantages les plus importants du HTML sont :

• simplicité, vous permettant d'apprendre le HTML dans les plus brefs délais.
• possibilité de créer vos propres pages Web
• et HTML fonctionne exactement de la même manière sur toutes les plateformes existantes aujourd'hui ; il n'est pas nécessaire d'acheter du matériel supplémentaire. Et il suffit d'utiliser n'importe quel éditeur de texte disponible, par exemple le Bloc-notes.

Dans ce site, j'ai essayé de décrire en détail l'ensemble du processus de création de votre propre site Web, à savoir la publication du projet terminé sur Internet afin d'y donner accès à tous les utilisateurs.

J'espère que mes articles seront très utiles à beaucoup, car je ne suis moi-même pas programmeur, mais je suis très inspiré par ce travail.

Graphiques et trafic

Les exigences relatives à la beauté et à l'expressivité de la conception des pages Web sont en conflit constant avec capacités techniques hébergement Web moderne. Le concepteur du site Web doit donc devenir un intermédiaire entre le concepteur et l'utilisateur et maintenir strictement un équilibre entre l'attrait visuel et une rapidité raisonnable de diffusion de l'information sur le Web. Pour réussir à résoudre ce problème, vous devez connaître tous les formats graphiques utilisés sur Internet, comprendre les différences entre eux, leurs domaines d'application et leurs caractéristiques d'utilisation.

Pour comprendre le grand nombre de formats et de protocoles acceptés sur Internet et créer votre propre page, vous devez sélectionner celui qui convient le mieux à vos objectifs spécifiques. Certains formats peuvent être spécifiques à un seul navigateur, tandis que d'autres nécessiteront un plug-in spécial.

GIF et JPEG sont deux des formats graphiques les plus populaires qui sont depuis longtemps devenus des standards de facto pour une utilisation sur le Web. Les deux sont assez universels, lisibles par la plupart des navigateurs et ne nécessitent pas de logiciel spécial (ni de modules supplémentaires). GIF et JPEG sont des formats d'images raster qui, par conséquent, déterminent un format fixe (résolution) lors de l'affichage de ces images à l'écran. Lorsque vous essayez de mettre à l'échelle (fournie dans certains navigateurs), les images raster (pixel) perdent considérablement en qualité.

Pour le format GIF 8 bits (256 couleurs), le choix de la palette de couleurs constitue également un problème sérieux.

Les formats de graphiques vectoriels sont beaucoup plus attractifs pour une utilisation sur le Web. Contrairement aux bitmaps, les graphiques vectoriels sont basés sur une représentation mathématique (géométrique) des données. De telles images sont nettement plus petites en termes de volume de stockage/transfert, faciles à mettre à l'échelle et ne perdent pratiquement pas de qualité lors d'une conversion. Malheureusement, les formats vectoriels sont encore peu utilisés sur Internet, mais des standards ont déjà été constitués et devraient intéresser les concepteurs.

Plusieurs normes vectorielles ont été proposées relativement récemment, et les formats PGML et VML sont actuellement à l'étude par le World Wide Web Consortium (W3C). Cependant, Macromedia, qui promeut VML, a depuis longtemps ouvert son format vectoriel Shockwave Flash à d'autres développeurs et a implémenté des modules supplémentaires pour visualiser des graphiques dans ce format pour les navigateurs populaires.

Toutefois, les nouveaux produits ne sont pas nécessairement meilleurs pour toutes les applications. Les images les plus courantes publiées sur Internet restent des photographies numériques, des dessins et des images numérisées, qui demandent beaucoup de travail et sont peu recommandables à convertir au format vectoriel.

Par conséquent, le choix du format dépend en fin de compte de vos objectifs, et c'est à vous de décider quelles images conviennent le mieux à votre public cible.

CompuServe destinait à l'origine son format GIF aux applications interactives dans le contexte des capacités limitées des graphiques standard sur un ordinateur personnel. Il s'agissait à l'origine d'un format raster 4 bits, puis 8 bits, avec une palette de couleurs spécifiée prenant en charge un maximum de 256 couleurs. L'un des avantages non négligeables du format est que les images peuvent être indexées sur une palette spécifique (ensemble de couleurs), tandis que les images JPEG ne peuvent pas être « verrouillées » sur une palette et leur affichage « correct » n'est pas toujours possible.

Cette propriété est particulièrement importante pour les développeurs qui utilisent l'indexation de palette pour optimiser le transfert d'images pour toutes les plates-formes (PC, Mac, Web-TV ou autres), quelle que soit la profondeur de couleur avec laquelle un système particulier fonctionne. Cette polyvalence est obtenue grâce à une palette limitée de 216 couleurs, qui comprend toutes les couleurs courantes utilisées à la fois sous Windows et, par exemple, sous MacOS. Concevoir un site dans une palette universelle garantit un affichage cohérent, multiplateforme et indépendant du matériel. De plus, le format GIF utilise un schéma de compression sans perte (avec un algorithme de codage par répétition simple : une séquence d'octets de même couleur est remplacée par un mot de deux octets dont l'un contient le motif d'ombrage, et le second détermine le nombre de répétitions), afin que les données graphiques dans ce format ne perdent pas d'informations pendant le processus de compression et de récupération. Cependant, c'est précisément en raison de ces restrictions de couleurs intégrées que le format GIF ne peut être utilisé que pour les images comportant un nombre limité de couleurs, comme les diagrammes en noir et blanc ou celles contenant de grandes zones d'une seule couleur, comme cadres de dessins animés ou dessins numériques avec remplissage de couleurs unies. Bien sûr, vous pouvez enregistrer n'importe quelle image dans

Ainsi, les principaux avantages du format GIF sont l'utilisation d'une compression sans perte et la préservation économique de zones de couleur unies avec une limite claire et des transitions de couleurs strictes. Le format JPEG diffère de celui décrit en ce sens que, selon le niveau de compression, les zones pleines y sont détruites et les transitions de couleurs nettes sont lissées ou floues.

Le principal critère de choix du format GIF : si vous avez vous-même dessiné une image dans un logiciel graphique comme Photoshop ou Painter qui comporte de grandes zones de la même couleur, ou si vous avez traité une image existante et que vous souhaitez l'enregistrer contraste élevé(nécessaire, par exemple, lors de l'affichage de texte), puis enregistrez dans ce format (cela s'applique principalement aux dessins en noir et blanc ou aux couleurs médiocres).

Pour les photographies, les images fixes vidéo ou autres images en couleur utilisant des transitions de couleurs douces (dégradés), utilisez le format JPEG.

Il est également important de se rappeler que si vous essayez d'enregistrer des images à tons continus au format GIF, vous devrez probablement supprimer beaucoup d'informations lors du processus de préparation de l'image (lors de sa conversion en palette fixe) et de la compression du GIF. Cette méthode sera si inefficace que vous perdrez également financièrement (à la fois en termes de coûts de main d’œuvre et de taille de fichier).

Entre autres choses, le format GIF offre ce que l'on appelle l'apparence entrelacée, qui aide les utilisateurs de chaînes lentes au tout début de la réception à évaluer le contenu de l'image (l'effet est similaire au dessin progressif d'un image de mise au point) et le temps nécessaire à sa transmission complète, et par conséquent accepter de décider s'il faut continuer à le prendre ou s'il vaut mieux arrêter de le prendre.

Cependant, contrairement au JPEG progressif, l'effet ici est plus psychologique que réel (voir figure).

Il faut également retenir un avantage important du format GIF, qui dans certains cas ne peut être évité même avec tous ses défauts, est la prise en charge de la transparence (extension GIF89a), qui permet d'afficher une silhouette aux contours non rectangulaires sur un fond existant. . La transparence au format GIF est implémentée de manière primitive - une couleur (généralement l'arrière-plan) est attribuée comme transparente. Cet avantage est souvent utilisé lors de la création de boutons et d'icônes dans la conception de pages (JPEG n'offre aucun support pour la transparence). En conclusion, nous pouvons dire ce qui suit : GIF - pour parvenir à un compromis efficace entre le matériel et les logiciels existants, et la possibilité d'indexer une image GIF 8 bits en 216 couleurs universelles est essentielle lorsque vos images sont destinées à être affichées sur une variété de navigateurs et de plates-formes inconnues.

JPEG - format pour les photographies et les images vidéo

Le format JPEG tire son nom de l'acronyme du comité Joint Photographic Experts Group, qui a créé cette norme à la fin des années 80 et au début des années 90. Le format JPEG est basé sur un algorithme de compression avec perte (transformation en cosinus discrète), qui divise votre image en régions (généralement des carrés de 8x8 pixels) au sein desquelles la distribution des couleurs est remplacée par une fonction mathématique et seuls les coefficients de cette fonction sont stockés, permettant vous de reconstituer son apparence. Naturellement, vous rencontrerez une certaine perte de qualité (selon la complexité de la fonction utilisée pour remplacer l'image) et après restauration vous ne recevrez plus une image réelle, mais son « substitut » mathématique. Cependant, selon la qualité de votre original et le degré de compression, la perte de qualité peut être totalement invisible pour le spectateur.

Mais le principal avantage du format JPEG par rapport au GIF est que si le GIF n'est que de 8 bits (256 couleurs), le JPEG est de 24 bits et peut afficher jusqu'à 16,7 millions de couleurs. Pour cette raison, un JPEG en couleur reproduit naturellement beaucoup plus d'informations vidéo qu'un GIF. Ce format est le mieux adapté aux images réelles - images numérisées ou photos numériques

, ainsi que des images vidéo numérisées ou des scènes d'infographie 3D rendues.

Un autre avantage du JPEG est que, contrairement au GIF, il permet de définir indépendamment le degré de compression appliqué à l'image source, ce qui permet de maintenir l'équilibre nécessaire entre taille et qualité.

Ainsi, lorsque vous travaillez avec une photo au format JPEG, vous avez la possibilité de sauvegarder une image 24 bits avec 16,7 millions de couleurs, et, malgré la perte de qualité lors de la compression, elle reste bien plus fidèle à l'original qu'une 256- performances GIF en couleur. Dans ce cas, la perte inévitable de qualité dépend fortement de la taille, de la qualité et du type de l’image originale.

De plus, JPEG permet de définir l'affichage dit progressif, c'est-à-dire lorsque, lors du chargement, une représentation « grossière » de l'image apparaît immédiatement à l'écran, qui, au fur et à mesure de sa réception Informations Complémentaires, s'améliore progressivement (en même temps, vous pouvez acquérir la compréhension nécessaire de l'essence du matériel soumis avant même la fin du téléchargement et interrompre le processus à tout moment, ce qui permet de gagner considérablement du temps lors de la visualisation du contenu en ligne).

Vous pouvez utiliser ces outils à votre guise, et une telle manifestation étape par étape peut être d'une grande aide dans la lutte contre la congestion des canaux. Le seul problème avec le JPEG progressif (par opposition au GIF entrelacé) est que les anciens navigateurs peuvent ne pas le prendre en charge.

PNG - une nouveauté raster universelle

Représentant de la prochaine génération de formats raster, PNG, a pris les meilleures propriétés du JPEG et du GIF et a ajouté sa propre approche unique de la présentation de l'image, ce qui permet de l'intégrer dans un seul fichier. différentes versions la même image en basse, moyenne et haute résolution.

Le format PNG (Portable Network Graphics) est un format graphique raster relativement nouveau qui a été approuvé comme standard par le consortium W3C et devrait progressivement remplacer les deux formats « obsolètes » : GIF et JPEG. PNG offre à la fois l'indexation des couleurs (jusqu'à 256 couleurs), la prise en charge des couleurs 24 et 48 bits (True-Color) et fonctionne avec un canal de transparence (canal alpha), et il est beaucoup plus efficace que les formats de stockage traditionnels. images tramées.

L'algorithme de compression pour une image en couleur est supérieure à JPEG en qualité, et avec la prise en charge d'une palette indexée limitée (jusqu'à 256 couleurs), le nouveau format offre une compression sans perte 10 à 30 % meilleure que celle implémentée dans le format GIF, ce qui le rend optimal pour une utilisation dans tous les cas. Malheureusement, le nouveau format ne permet pas de sacrifier la qualité de l'image en échange d'un taux de compression plus élevé, comme dans.

Format JPEG Prise en charge de la transparence dans contrairement au GIF, il est à part entière, c'est-à-dire que vous pouvez créer des images ou des bordures translucides, de sorte que le problème des bordures « propres », si difficile à résoudre lors de l'utilisation de la transparence dans un fichier GIF, est facilement surmonté ici.

Cependant, malgré toutes les améliorations apportées par PNG, le nouveau format ne prendra son envol que lorsqu'il sera utilisé par les concepteurs de sites Web et les éditeurs de logiciels pour restituer les images dans le nouveau format et les préparer à la publication. En attendant, il est assez difficile de trouver des images PNG n'importe où sur Internet, malgré l'inclusion récente de la prise en charge de ce format dans Netscape Navigator et Microsoft Internet Explorer.

Et bien qu'ils dernières versions et prennent en charge PNG, ils le font de manière très limitée. Actuellement, la seule solution pour les utilisateurs souhaitant voir un fichier PNG complet consiste à installer eux-mêmes un module externe (similaire à PNG Live).

Apparemment, les développeurs tardent à attendre que les utilisateurs passent complètement aux nouveaux formats. Eh bien, un conservatisme sain ne fait jamais de mal, mais nous vous recommandons tout de même fortement de passer progressivement au format PNG, en remplaçant au moins toutes les utilisations existantes du format GIF.

Représentation vectorielle

JPEG, GIF et PNG sont des formats raster basés sur une représentation discrète (en pixels ou par points) d'une image, tandis que les formats vectoriels sont basés sur des formules mathématiques (représentation géométrique de formes). Les graphiques vectoriels offrent des avantages significatifs par rapport au raster, en particulier lorsqu'il s'agit de diagrammes, de textes et de graphiques industriels (et les formats économiques sont d'une grande importance pour Internet).

Ainsi, le premier avantage est la taille nettement plus petite des images vectorielles par rapport aux bitmaps, car ce n'est pas chaque pixel individuel de l'image qui est décrit, mais la figure entière (par exemple, pour spécifier un cercle, vous devez transmettre 3-4 nombres : rayon, coordonnées du centre, et peut-être le type ou l'épaisseur de la ligne et ses attributs). Les formules mathématiques qui décrivent la représentation vectorielle occupent beaucoup moins d'espace que les pixels individuels et leurs attributs.

Un autre avantage important de la représentation vectorielle est la possibilité de redimensionner une image de manière presque illimitée (ou de détailler certaines parties de celle-ci) sans aucune perte de résolution ou de clarté de l'image. Aucun effort n'est requis pour adapter la représentation vectorielle à une palette, une plate-forme, un matériel ou des caractéristiques de conception particulières ; et la coordination du schéma de compression et de la qualité d'affichage s'effectue sans aucun problème.

Cependant, toutes les images raster ne peuvent pas être converties sous forme vectorielle (par exemple, les photographies, les images numérisées ou les dessins raster sont difficiles à vectoriser). Mais il est tout simplement stupide de convertir des dessins vectoriels spécialement préparés (tels que des dessins au trait, des pictogrammes, des illustrations techniques, des cartes, des graphiques d'information et autres qui sont historiquement vectoriels) en forme raster pour publication sur Internet, ce qui se produit partout aujourd'hui.

Problèmes d'affichage graphiques vectoriels sur le World Wide Web est né du fait qu'il n'existait pas d'autre méthode d'affichage que le raster, et que le module intégré apparu pour afficher les fichiers au format PDF n'offrait pas une flexibilité adéquate et nécessitait de stocker tout le contenu sous une seule forme - PDF.

Pour offrir la possibilité d'intégrer de manière transparente des graphiques vectoriels dans un format HTML traditionnel sans aucun logiciel supplémentaire, deux nouvelles normes vectorielles sont actuellement examinées par le comité des normes du W3C : PGML (Precision Graphics Mark-up Language) et VML (Vector Mark-up Language). ). PGML est pris en charge par Adobe Systems, IBM, Netscape et Sun Microsystems, et VML est pris en charge par Microsoft, Hewlett-Packard, Autodesk, Macromedia et Visio. Les deux normes sont basées sur des extensions du langage de balisage XML, promu pour une utilisation sur le Web comme successeur du HTML et recommandé par le W3C pour une utilisation future.

Mais actuellement, aucun des navigateurs ne prend en charge les normes graphiques vectorielles, bien que des modules supplémentaires (Plug-ins) soient déjà disponibles. Parmi les moyens les plus populaires d'afficher des images vectorielles statiques sur le Web aujourd'hui figurent le format SWF (Shockwave Flash) de Macromedia et le format Xara Flare, encore sous-estimé.

Éclater- bonne décision, qui permet l'inclusion d'images vectorielles qui permettent une augmentation presque illimitée du niveau de détail de la page, tandis que leurs tailles sont comparables à celles de Shockwave Flash. Cela ne veut pas dire que l'utilisation de modules supplémentaires pour visualiser les images est si gênante, mais lorsque vous utilisez de tels outils sur vos pages, assurez-vous d'en avertir l'utilisateur et de lui donner la possibilité de télécharger le module correspondant avant d'accéder à la page. qui inclura ces éléments.

À court terme, cela ralentira bien sûr le processus de navigation des nouveaux utilisateurs, mais progressivement vous gagnerez de plus en plus d'adhérents jusqu'à ce que les outils correspondants soient enfin inclus dans la prochaine version du navigateur et que les débutants n'aient plus besoin des outils supplémentaires. module.

Animation, interactivité et interaction D'une manière générale, les images GIF peuvent être disposées sous forme d'une pile spéciale dans un seul fichier, et le « film » (flipbook) résultant peut être reproduit en créant une simple animation raster. Netscape et Microsoft prennent en charge les GIF animés depuis la troisième version de leurs navigateurs, leur présence sur le Web est donc désormais difficile à éviter. De nombreux animateurs GIF qui vous permettent de créer de telles piles GIF sont très répandus (à la fois commerciaux et accessibles au public). Cependant, « revitaliser » le format GIF peut conduire à des problèmes incontrôlables.

tailles de fichiers

, car chaque « niveau » d'une telle pile est une image GIF individuelle, donc 15 images par seconde typiques pour une animation par ordinateur peuvent produire d'innombrables kilo-octets.

En combinaison avec Java ou JavaScript, vous pouvez créer une animation interactive qui répondra à l'utilisateur. Examinons maintenant d'autres solutions pour l'animation Web et l'interaction interactive des utilisateurs, et le rôle principal ici continue d'être joué par Macromedia, qui est entré depuis longtemps sur le marché avec ses programmes Shockwave et Flash et améliore constamment ses produits, augmentant leur efficacité conformément avec les besoins des utilisateurs et des concepteurs. pour créer une animation et la publier sur une page Web. Shockwave Flash produit de très petits fichiers (puisqu'il utilise un format de représentation principalement vectorielle) et, comparé à d'autres formats, est le plus pratique du point de vue de la préparation.

Lors de la publication d'une telle animation sur vos pages, n'oubliez pas d'en informer l'utilisateur afin qu'il puisse s'approvisionner en module supplémentaire à l'avance et se préparer à l'attente fastidieuse du téléchargement. Cependant, les dernières versions de Netscape Navigator et Internet Explorer avoir des modules de visualisation pour les animations Flash même dans le package de base. Netscape a confirmé que les futures versions de Navigator bénéficieront de ce support pour Flash, même au niveau du code.

La décision finale vous appartient

Ainsi, l'attitude envers la présentation du contenu Web change, de nouveaux formats de données et outils de développement qui les prennent en charge apparaissent. Cependant, les formats plus anciens (GIF et JPEG pour la présentation de graphiques) restent très populaires. Ils sont pris en charge par presque tous les navigateurs et la plupart des développeurs possèdent une vaste expérience de leur utilisation. Il est important d'utiliser le bon format pour l'objectif spécifique afin de garantir un équilibre entre la qualité de l'image et la taille des fichiers. Par exemple, une image au format GIF peut prendre plus de place et produire un résultat de moins bonne qualité qu'au format JPEG, tandis que pour une autre ce sera le contraire.

Cependant, lors de la représentation d'images bitmap, le format PNG devient préférable, et si vous allez encore plus loin et essayez d'utiliser image vectorielle, alors aujourd'hui le format Shockwave Flash de Macromedia est à votre service.

Le format SWF (Shockwave Flash) n'est pas un format couramment utilisé, mais un format vectoriel interne Programmes Flash de Macromedia (voir « Macromedia Flash Lessons » sur CD-ROM), donc pour obtenir votre propre image ou animation, vous devrez acheter le package multimédia approprié auprès de Macromedia, et l'utilisateur devra installer un module supplémentaire pour visualiser le résultat.

Ainsi, pour placer simplement une image vectorielle sur votre page Web, vous devrez surmonter un certain nombre d'inconvénients.

Cependant, d’autres formats vectoriels sont en route et deviendront bientôt la norme.

OrdinateurPress 5"1999

Il existe deux méthodes de placement images graphiques sur la page :

• insertion d'images individuelles;
• remplir l'arrière-plan avec une image.

Dans tous les cas, l'image graphique est extraite du fichier.

Insertion de graphiques

L'insertion d'une image graphique à partir d'un fichier au format graphique sur une page se fait à l'aide de la balise (de l'anglais, image - image) indiquant l'adresse du fichier comme argument Attribut SRC:

< IMG SRC = "адрес_графического_файла" >

L'adresse du fichier graphique est soit une URL, soit un nom de fichier, éventuellement accompagné d'un chemin. Par exemple, pour afficher un fichier graphique logotip.jpg vous devez écrire la balise :

< IMG SRC = "logotip.jpg" >

Pour augmenter la vitesse de transfert d'une image graphique dans une balise vous pouvez utiliser l'attribut ( paramètre supplémentaire) LOWSRC, qui prend l'adresse d'un fichier graphique comme argument. Vous pouvez créer deux fichiers graphiques : l'un (par exemple, disons logotip.jpg) contient une image haute résolution et l'autre (par exemple, logotip.gif) contient une image basse résolution. Puis la balise :

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

... demande au navigateur de télécharger d'abord le fichier logotip.gif, puis de le remplacer par le fichier logotip.jpg dès sa réception.

Une autre façon d'accélérer le chargement des graphiques consiste à définir la taille de la zone rectangulaire dans laquelle le graphique sera placé à l'aide d'attributs. LARGEUR(largeur) et HAUTEUR(hauteur), mesurée en pixels. Si vous spécifiez ces attributs, le navigateur allouera d'abord de l'espace pour les graphiques, préparera la mise en page du document, affichera le texte, puis chargera les graphiques. Notez que le navigateur compresse ou étire l'image pour l'adapter à la taille d'image spécifiée. Un exemple de spécification des dimensions d'une image :

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Les graphiques sont généralement utilisés en conjonction avec du texte, le défi d'aligner le texte et les graphiques se pose donc. Ce problème est résolu en utilisant l'attribut ALIGNERétiqueter en utilisant divers arguments. Par exemple, nous pourrions souhaiter que le texte entoure une image vers la droite ou la gauche. Habituellement, l’image est étroitement intégrée au texte, ce qui peut être laid. Pour éviter cela, vous pouvez définir des marges vides autour de l'illustration. Les champs sont créés à l'aide d'attributs VSPACE pour les marges supérieure et inférieure et НSPACE pour les marges latérales dans une balise . Les arguments de ces attributs sont spécifiés sous forme de nombres qui spécifient la taille des champs en pixels. Pour annuler l'habillage du texte autour des graphiques, utilisez la balise
.

La balise suivante définit les graphiques du fichier logotip.jpg pour qu'ils s'ajustent à droite (l'image sera située à gauche du texte) :

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

Si vous souhaitez placer une image à droite du texte, vous avez besoin de l'attribut ALIGNER assigner un argument DROITE:

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

Pour définir les marges autour de l'image, vous devez écrire une balise comme :

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Ici, les nombres 20 et 10 déterminent la taille des champs.

Regardons un exemple partage graphiques et textes. Ouvrez le Bloc-notes ( éditeur de texte Bloc-notes) Windows. Écrivez-y du code HTML en utilisant les balises décrites ci-dessus. Vous trouverez ci-dessous un programme qui génère du texte et des graphiques. Vous pouvez utiliser n’importe lequel des fichiers dont vous disposez comme fichier graphique. Le fichier utilisé ici est logotip.gif.

< HTML >

< HEAD >

< TITLE >Exercice 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 >Le texte s'enroule autour des graphiques à droite< / H1 >

De larges possibilités de positionnement précis des images (ainsi que d'autres éléments) sur la page offrent tableaux Et styles. Ces Éléments HTML sera discuté plus tard. Par exemple, vous pouvez définir un tableau sans cadres visibles, et placer des images, textes et autres éléments dans les cellules de ce tableau.

Couleurs dans le tableau

Comment construire un tableau sur une page

Listes dans les listes

Listes de définitions

Liste numérotée

Liste à puces

Comment créer une liste sur une page

Il existe trois principaux types de listes : les listes à puces, les listes numérotées et les listes de définitions. La principale différence entre les types répertoriés réside dans la méthode et la structure de numérotation.

Le plus couramment utilisé est non numéroté, ou liste à puces. Une liste à puces est spécifiée par des balises et les éléments de liste entre ces balises sont spécifiés par une balise