ALGORITHMIQUE PROGRAMMATION INTERNET - NIVEAU 1

Transcription

1 ALGORITHMIQUE PROGRAMMATION INTERNET - NIVEAU 1 Code NFA053, 6 ECTS

2

3 Chapitre 02 HTML / LIENS ET INSERTIONS D OBJETS

4 Le plus grand soin a été apporté à la réalisation de ce support pédagogique afin de vous fournir une information complète et fiable. Cependant, le Cnam Champagne-Ardenne n'assume de responsabilités, ni pour son utilisation, ni pour les contrefaçons de brevets ou atteintes aux droits de tierces personnes qui pourraient résulter de cette utilisation. Les exemples ou programmes présents dans cet ouvrage sont fournis pour illustrer les descriptions théoriques. Ils ne sont en aucun cas destinés à une utilisation commerciale ou professionnelle. Le Cnam ne pourra en aucun cas être tenu pour responsable des préjudices ou dommages de quelque nature que ce soit pouvant résulter de l'utilisation de ces exemples ou programmes. Tous les noms de produits ou autres marques cités dans ce support sont des marques déposées par leurs propriétaires respectifs.

5 Ce support pédagogique a été rédigé par Maxime MONNY, enseignant vacataire au Cnam Champagne- Ardenne. Copyright Centre d'enseignement A Distance du Cnam Champagne-Ardenne. Tous droits réservés. L'utilisation du support pédagogique est réservée aux formations du Cnam dispensées à distance. Tout autre usage suppose l'autorisation préalable écrite du Cnam Champagne-Ardenne. Toute utilisation, diffusion ou reproduction du support, même partielle, par quelque procédé que ce soit, est interdite sans autorisation préalable écrite du Cnam Champagne-Ardenne. Une copie par xérographie, photographie, film, support magnétique ou autre, constitue une contrefaçon passible des peines prévues par la loi, du 11 mars 1957 et du 3 juillet 1995, sur la protection des droits d'auteur.

6

7 CHAPITRE 02 LIENS ET INSERTION D OBJETS 1. LES COULEURS Dans le chapitre précédent, nous avons étudié la mise en forme du texte essentiellement en jouant avec les polices de caractères sur leur taille ou la forme. Le tout sous forme de texte noir et un fond blanc, couleurs par défaut d une page Web. Il est bien sûr possible de donner un peu de couleur à nos pages Web grâce à 2 attributs : bgcolor et color. Exemple de changement de couleur de fond en vert : <body bgcolor="green"> Exemple d une écriture de police en rouge : La couleur définie dans la valeur de l attribut peut se faire de 2 manières : soit en indiquant une couleur de base en la nommant directement (ex : red) soit en utilisant son code RGB en hexadécimal` (ex : #FF0000, code hexa du rouge) 1.1. LES COULEURS DE BASE L utilisation des couleurs de base est pratique mais limitée à 16 couleurs. L utilisation des couleurs RGB hexadécimal est plus complexe mais cela donne accès à plus de 16 millions de couleurs! Légende. Tableau de correspondance des couleurs de base et de leur code héxadécimal Nom Code Hexa Nom Code Hexa aqua #00FFFF navy # ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 1

8 black # olive # blue #0000FF purple # fuchsia #FF00FF red #FF0000 gray # silver #C0C0C0 green # teal # lime #00FF00 yellow #FFFF00 maroon # white #FFFFFF 1.2. LES COULEURS EN CODE RVB EN NOTATION HEXADECIMALE Il est possible de définir plus de 16 millions de couleurs en indiquant les valeurs RVB, rouge, vert, bleu (en anglais «RGB», red, green, blue) d'une couleur selon la notation #RRVVBB, empruntée au HTML, où RR, VV et BB représentent respectivement un nombre hexadécimal entre 00 et FF pour le Rouge, le Vert et le Bleu. FF étant la valeur la plus forte et 00 la valeur la plus faible. Petite précision : en décimal (10 chiffres au total), on compte de 0 à 9 et en hexadécimal (16 chiffres) on compte de 0 à F de cette manière A B C D E F. Ainsi le code #FF0000, représente la valeur la plus forte pour la composante rouge, la composante la plus faible (inexistante en conséquence) pour le vert et le bleu et donc on sait que l on a affaire au rouge le plus vif de la palette de couleurs. Pour le code #FFFF00, les composantes rouge et vert sont au maximum et le bleu inexistant. Si on mélange du rouge avec du vert on obtient du jaune et donc on a affaire au jaune le plus vif de la palette. Enfin, même si le codage hexadécimal permet de traduire plus de 16 millions de couleurs, en réalité nous sommes limités par les navigateurs qui ne supportent que 216 couleurs. Même si elles ne font pas parties des standards, on peut affirmer de manière pratiquement sûre que ce tableau de 216 couleurs fonctionne sur la majorité des plus grands navigateurs du marché. Pour information, si un navigateur ne sait pas traduire un code couleur hexadécimal, il a pour principe d afficher la couleur hexadécimale la plus proche. Attention donc dans le choix de vos couleurs, si leur code hexadécimal n est pas pris en charge, le navigateur affichera donc une couleur équivalente et donc légèrement différente de la teinte initiale! HTML / LIENS ET INSERTION D OBJETS 2

9 C est pour cette raison qu il est préférable d utiliser l une des 216 couleurs sûre du tableau fourni en annexe sous le nom «ANNEXE01-Tableau216couleurs.html» dont on peut voir un extrait ci-dessous. Légende. Extrait du tableau des 216 couleurs supportées de manière sûr 1.3. CONVERSION DECIMAL EN HEXADECIMAL Normalement les couleurs RGB sont traduites de 0 à 255 pour chacune des trois composantes. Ainsi pour la traduction d un rouge au hasard en code RGB décimal est RGB (254, 0, 0) Il suffit alors de convertir ces trois chiffres décimaux en trois chiffres hexadécimaux. ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 3

10 Pour la conversion vers un nombre hexadécimal, on créé tout d'abord un tableau des 'chiffres' hexadécimaux (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, et F). Ensuite, on divise le nombre décimal par 16, on en retient la partie entière (si on part de la première composante 254, 254/16= 15,875, on retient 15). On soustrait ensuite au nombre de départ (254) le nombre qu'on vient de retenir (15) multiplié par 16 (soit 240), ce qui nous laisse 14 ( ). Le premier chiffre retenu sert d'index dans le tableau des 'chiffres' hexadécimaux, on va donc prendre l'élément '15', c'est à dire 'F' comme étant la première partie de notre nombre hexadécimal, puis, de même avec le reste de notre opération '14' qui nous donne... 'E'! Pour l'exemple, 254 en hexadécimal donne donc 'FE'. Résumé du calcul pour convertir le chiffre 254 en hexadécimal : 254/16=15,875 > entier(15,875)=15 > hexa(15)=f > 15x16=240 > reste( )=14 > hexa(14)=e > #FE Comme le chiffre 0 en décimal donne 00 en hexadécimal, ainsi la traduction du code décimal RGB (254, 0, 0) donne le code hexadécimal RGB (#FE0000) LA BOITE A COULEUR Afin de vous aider dans vos recherches de couleur, je vous conseille également un logiciel fort utile : «la boîte à couleurs». Ce logiciel vous permettra grâce à sa pipette de parcourir tous les éléments de votre écran et de vous fournir la couleur hexadécimale de la couleur que vous pointez avec votre curseur de souris. Très utile dans la pratique. Ce logiciel est un gratuiciel et je l ai mis à votre disposition en téléchargement dans Plei@d. HTML / LIENS ET INSERTION D OBJETS 4

11 Légende. Gratuiciel «La boîte à couleurs» permettant de traduire les couleurs sur votre écran en code hexadécimal ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 5

12 2. LES LIENS ET ANCRES 2.1. DEFINITION DU LIEN Les liens hypertextes permettent de naviguer sur votre site, d envoyer un ou de faire un lien vers une page d un autre site (avec l accord du Webmaster, c est la loi) Pour créer un lien, il faut utiliser la balise HTML <a>, la lettre a pour «ancre». La balise HTML <a> a un attribut HREF qui va vous permettre de spécifier le lien. L'attribut HREF est la référence, l adresse de la page à charger dans le navigateur quand on clique sur ce lien. Lorsque vous définissez un lien dans une page HTML, n'oubliez pas de mettre </a> qui définit la fin pour bien définir où le lien s arrête. Exemple de liens : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="fr" lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>les Liens</title> </head> <body> <a href=" vers le site pleiad</a> <a href="page2.html">lien vers la seconde page de mon site</a> HTML / LIENS ET INSERTION D OBJETS 6

13 </body> </html> <a un mail à Maxime MONNY</a> 2.2. CHEMINS RELATIFS ET ABSOLUES On peut donc faire un lien vers une page de son site Internet comme l exemple ci-dessus du lien vers la page2. Si vous voulez faire des liens entre des pages du même site, il n'est pas nécessaire d'écrire l'adresse (URL) entière du document, que l on appelle l adresse absolue. On peut aussi utiliser les adresses relatives qui permettent de raccourcir l écriture de ces adresses. Sur le web, il vous faudra maitriser les notions d adresses relatives ou absolues pour pouvoir désigner le chemin d accès à un fichier ou à une page. Adresse ABSOLUE : Il s agit de l adresse complète du site. Ex : Notez que la barre oblique (ou «slache») «/» marque un niveau de classement c est à dire un dossier. Précédée de deux points «../» sa fonction est de remonter dans l arborescence des dossiers. Un moyen simple de repérer une adresse absolue : elle commence toujours par Adresse RELATIVE : Il s agit de la localisation du document à partir du dossier ouvert. Ex :./dossier/page2.html ou dossier/page2.html. Le «./» (un seul point) indique le dossier de démarrage. Il est sous entendu, on n est donc pas obligé de l indiquer. Le «../» (2 points) indique quand à lui le dossier de niveau supérieur. Afin de bien comprendre la différence, étudions le cas de 3 liens avec des adresses absolues et leurs correspondances en adresses relatives. Dans cet exemple, on imagine que nous faisons des liens à partir de la page (le fichier page1.html est contenu dans le dossier «dossier»)  <a href=" vers page2</a> <a href=" vers page3</a> <a href=" vers page4</a>  ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 7

14 <a href="page2.html">lien vers page2</a> <a href="../page3.html">lien vers page3</a> <a href="sousdossier/page4.html">lien vers page 4</a> Le chemin «../» pointe sur le dossier à un niveau supérieur par rapport à la position du fichier où le lien se trouve. En suivant le même raisonnement, vous pouvez aussi pointer sur une position deux dossiers (ou plus) en amont avec «../../» LIENS INTERNES Il existe 2 types de liens : - le lien externe qui permet de lier des pages différentes entre-elles. (c est le cas de tous les exemples de liens étudiés juste avant) - Le lien interne qui permet de se déplacer dans une page unique (utilisé surtout quand le contenu de cette page est important) Exemple : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="fr" lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>les Liens</title> </head> <body> <a href="#ancre1">lien vers le titre 1</a> <a href="#ancre2">lien vers le titre 2</a> HTML / LIENS ET INSERTION D OBJETS 8

15 <h1 id="ancre1">titre 1</h1> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <h1 id="ancre2">titre 2</h1> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </body> </html> L exemple ci-dessus représente une table des matières en haut de la page avec des liens vers chaque chapitre en dessous. Vous avez seulement besoin d'un attribut très utile, appelé id (pour identification), et du symbole «#». On utilise l'attribut id pour marquer l'élément que vous voulez relier. On crée ensuite un lien vers cet élément en utilisant le symbole «#» dans l'attribut de liaison. Le «#» indique au navigateur de rester sur la même page. Ce caractère doit être suivi de l'id de la balise à relier. Un autre attribut à connaître pour la balise <a> est l attribut «title». Il sert à donner une brève description du lien qui se traduit par l apparition du message entre les doubles guillemets si on laisse la souris sur le ien sans cliquer. <a href=" title="environnement Numérique de travail">lien vers le site Plei@d</a> ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 9

16 3. LES IMAGES 3.1. LA BALISE IMG Pour afficher une image dans une page HTML, il suffit d utiliser la balise <img> avec l attribut src qui permet d indiquer le chemin vers cette image (chemin relatif ou absolue). <img src="logo_pleiad.jpg" alt="description de l'image"/> Si votre image ne s affiche pas c est certainement dû à votre chemin qui est incorrect. L attribut alt est obligatoire dans la version DTD utilisée dans ce cours. En effet, cet attribut a pour but de décrire rapidement ce que l image représente, par l exemple, pour notre exemple on aurait pu mettre alt="logo Plei@d". Ce texte est une alternative au cas où le graphique ne peut pas être affiché LES FORMATS D IMAGE L exemple précédent utilise un format JPEG d image. 3 formats graphiques sont généralement utilisés sur le Web: - JPEG (Joint Photographic Experts Group - extension des fichiers.jpg ou.jpeg) - GIF (Graphics Interchange Format - extension des fichiers.gif) - PNG (Portable Network Graphics - extension des fichiers.png) Le format JPEG est un format de compression très efficace mais avec perte de qualité. Plus l'image est compressée, plus la qualité de l'image diminue. Il convient donc de trouver un compromis permettant un chargement rapide tout en gardant une qualité acceptable. Les logiciels graphiques permettent de régler le facteur de compression qui va de 1 à 99. (La qualité de l'image diminue avec l'augmentation du facteur de compression) Le format JPEG est particulièrement adapté et recommandé pour les images de type «Photographies», il peut supporter en effet 16.7 millions de couleurs et donne un bon rendu pour les images nuancées et les dégradés. Le format JPEG ne supporte pas la transparence et ne permet pas de créer des animations. Le codage standard donne une image qui va s'afficher petit à petit du haut vers le bas au fur et à mesure du chargement. Le codage progressif est sensé permettre un affichage progressif de l'image, l'image étant flou au début du chargement et devenant de plus en plus précise. Le format GIF est un format qui utilise une compression sans perte de qualité. Les images au format GIF peuvent contenir un maximum de 256 couleurs, ce qui rend ce format peu adapté pour les photographies, les HTML / LIENS ET INSERTION D OBJETS 10

17 images nuancées et les dégradés. Par contre ce format donne d'excellents résultats pour les images avec un petit nombre de couleurs, les logos, les formes géométriques, boutons etc... Le format GIF supporte la transparence et il permet également de créer des animations : les GIFs animés. L'option d'entrelacement permet d'afficher l'image progressivement, l'image étant flou au début du chargement et devenant de plus en plus précise. Le format GIF fait l'objet d'un brevet détenu par UNISYS. C est donc un format propriétaire. Un troisième format qui se rapproche du GIF, le format PNG utilise une compression sans perte de données. Le PNG supporte comme le GIF une palette indexée jusqu'à 256 couleurs, mais également les niveaux de gris jusqu'à 16 bits et les couleurs réelles jusqu'à 42 bits. Le PNG supporte la transparence ainsi que 254 niveaux de transparence partielle. Il possède également une méthode d'entrelacement très performante. Les fichiers PNG sont généralement plus légers que les GIF, par contre le PNG est moins performant que le JPEG pour la compression des photographies. A la différence du GIF, le PNG ne permet pas de créer des animations et les anciens navigateurs ne reconnaissent pas le format PNG. Ce format se dessine comme étant le remplaçant du format propriétaire GIF UNE IMAGE COMME LIEN Une image peut, bien sûr, être cliquable, c est à dire qu elle peut être l origine d un lien hypertexte, il suffit de l entourer de la balise <a>. <a href=" src="logo.jpg" alt="plei@d" border="0"/></a> N.B. : L attribut border permet de supprimer la bordure qui s affiche automatiquement pour certaines DTD tout autour d une image quand celle-ci est à l origine d un lien hypertexte ATTRIBUTS Voici un exemple de balise IMG avec les attributs les plus couramment utilisés : <img src="image.gif" border="0" width="100" height="66" vspace="20" hspace="20" align="left" alt="description de l'image"/> - border : définit la bordure autour de l image. Unité de mesure en pixel par défaut. Option indispensable si on a besoin d éliminer la bordure qui s ajoute automatique quand une image fait office de lien. En effet le fait de rendre une image cliquable, l agrémente automatiquement d un contour d image pour certaines DTD. Il suffit de spécifier ce contour (border) à 0px (pixel) pour le faire disparaître. ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 11

18 - width et height : spécifie la taille de cette image. Si vous la connaissez spécifiez ces 2 attributs, cela facilite l affichage de ces images pour certains navigateurs. Vous pouvez aussi doubler ces valeurs si vous voulez zoomer l image par exemple ou les réduire si besoin. Attention toutefois a garder le même ratio entre le width et le height sinon votre image sera déformée - vspace et hspace : permet de décaler verticale et horizontalement l image du texte de nombre de pixels indiqué dans chacun de ces 2 attributs. - align : définit l alignement de l image par rapport au texte, plusieurs valeurs possibles : top middle bottom left center right. HTML / LIENS ET INSERTION D OBJETS 12

19 3.5. LES IMAGES MAPPEES Plusieurs méthodes existent mais une seule est reconnue par la W3C : la méthode CSIM. C est celle qui va être décrite ci-dessous. Si une image peut être rendu entièrement cliquable, en l entourant de la balise <a>, on peut aussi rendre une image partiellement cliquable, c est à dire que seul certaines zones soient des liens hypertextes. Imaginons que pour l image suivante, seulement les formes géographiques soient cliquables et non pas la partie grise et noire. Pour cela il suffit d employer le code suivant : <img src="image_mappee.jpg" alt="formes géométriques" usemap="#carte"/> <map name="carte" id="carteid"> <area shape="circle" coords="58,50,40" href="cercle.html" alt="cercle"/> <area shape="rect" ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 13

20 coords="136,11,227,89" href="rectangle.html" alt="rectangle"/> <area shape="poly" coords="309,13,358,89,257,89" href="triangle.html" alt="triangle"/> <area shape="default" nohref="nohref" alt="default"/> </map> Tout d abord, dans cet exemple, vous remarquez que c est l attribut «usemap» qui prend le nom de la carte comme valeur et qui, donc, forme le lien avec cette carte. C est cette carte, définie par la balise «map», qui va indiquer les différentes zones («area») de liens cliquables. On remarque que ces zones peuvent avoir plusieurs formes (attribut «shape») : cercle, rectangle ou polygone, définies par des coordonnées. Chacune de ces zones est un lien vers l adresse spécifiée dans l attribut «href». Ce qui ait moins simple, c est de définir les valeurs de l attribut «coords»: ce sont les coordonnées des formes définies par «shape», mesurées en pixels depuis le coin supérieur gauche de l'image, comme nous l indique le dessin ci-dessous : Ainsi les coordonnées à renseigner dépendent de la valeur de «shape». Si «shape» a pour valeur : HTML / LIENS ET INSERTION D OBJETS 14

21 - "rect" : il suffit de préciser les coordonnées du coin supérieur gauche et inférieur droit du rectangle dans l ordre suivant : "x1,y1,x2,y2" - "circle" : il suffit de préciser les coordonnées du centre du cercle et son rayon dans cet ordre: "x,y,r" - "poly" : il suffit de préciser les coordonnées de chacun des points de votre polygone, dans l'ordre : "x1,y1,x2,y2,x3,y3..."si vous ne définissez que 1 ou 2 points, la balise n'aura aucun effet. - "default" : n'a pas besoin de cet argument, car il définit la cible de tout le reste de l'image. ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 15

22 4. EXERCICES 4.1. CONVERSIONS DECIMAL -> HEXADECIMAL Le but de cet exercice est de réaliser la page suivante : Voici le code HTML pour faire un rectangle de rouge vif (nuance maximum). Il comporte un attribut style pas encore étudié sur lequel on reviendra plus tard dans le cours.  rouge100% HTML / LIENS ET INSERTION D OBJETS 16

23 A vous donc de calculer la valeur décimale en pourcentage puis de la convertir en hexadécimal pour chaque pallier de 10% et réaliser ainsi cette page. Vous pouvez vérifier vos calculs sur la page réalisée à l aide de la boîte à couleur! Une fois cette première page réalisée, utilisez un nouvel attribut à la balise <body> de la manière suivante afin de découvrir et de tester son utilité. <body bgcolor="#ff0000"> 4.2. ALIGNEMENT DU TEXTE AVEC UNE IMAGE Afin de vous exercer dans la manipulation des images, cet exercice consiste à reproduire la page suivante. Il est à noter que chaque image est cliquable car un lien hypertexte a été fait vers la page ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 17

24 Légende. Copie d évran du résultat à obtenir N.B. : L image «pleiad.png» est disponible dans l archive FICHIERS_POUR_EXOS.zip dans Plei@d. Une fois cette première page réalisée, utilisez un nouvel attribut à la balise <body> de la manière suivante afin de découvrir et de tester son utilité. <body background="pleiad.png"> HTML / LIENS ET INSERTION D OBJETS 18

25 4.3. IMAGE MAPPEE AVEC MAPTHIS Trouver les coordonnées d un point sur une image est la partie la plus délicates car nous avons besoin de, soit faire appel à un logiciel de retouche d image qui nous fournira les coordonnées en pixel du pointeur de la souris sur l image, soit on utilise un logiciel comme «MapThis» dont un tutoriel récupéré sur un site est en annexe dans cette séance sur Ple@id Une fois que vous aurait lu ce tutoriel, vous constaterez qu il permet de générer le code de la balise MAP comme l exemple ci-dessous : <MAP NAME="cartons">     <AREA SHAPE=RECT COORDS="37,9,72,40" HREF="a.htm"> <AREA SHAPE=RECT COORDS="18,46,46,79" HREF="b.htm"> <AREA SHAPE=RECT COORDS="61,43,93,78" HREF="c.htm"> <AREA SHAPE=RECT COORDS="9,84,36,119" HREF="d.htm"> <AREA SHAPE=RECT COORDS="48,85,77,116" HREF="e.htm"> <AREA SHAPE=RECT COORDS="89,81,123,115" HREF="f.htm"> </MAP> Afin d être conforme à notre DTD, il est à noter que ce code doit subir quelques corrections : - Toutes les balises, attributs et valeurs des attributs doivent être en minuscules, - Les valeurs d attributs doivent être entourés de doubles guillemets, - Les commentaires sont inutiles et peuvent être supprimés, - L attribut «id» doit être ajouté à la balise «map». - Les balises AREA doivent être fermées ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 19

26 - L attribut ALT doit être ajouté pour chaque AREA. Ainsi le code doit être modifié et ressembler à cela : <map name="cartons" id="cartonsid"> </map> <area shape="rect" coords="37,9,72,40" href="a.htm" alt="a"/> <area shape="rect" coords="18,46,46,79" href="b.htm" alt="b"/> <area shape="rect" coords="61,43,93,78" href="c.htm" alt="c"/> <area shape="rect" coords="9,84,36,119" href="d.htm" alt="d"/> <area shape="rect" coords="48,85,77,116" href="e.htm" alt="e"/> <area shape="rect" coords="89,81,123,115" href="f.htm" alt="f"/> N.B. : Le «freeware» MapThis est disponible dans la logithèque de cette séance. Une fois «MapThis» installé, vous allez en avoir l utilité dans l exercice qui suit. HTML / LIENS ET INSERTION D OBJETS 20

27 A l aide de «MapThis» pour trouver les cordonnées, vous allez devoir créer 5 pages Web : - Un page de la carte de France contenant une image de la France mappée sur 4 liens dont les zones sont désignées par les 2 traits bleu ajoutés ci-dessous. - Chacun de ces 4 liens renvoie sur l une des pages correspondantes (nord-est.html, nord-ouest.html, sud-est.html, sud-ouest.html) dont une copie de l une d entre elles est ci-dessous. Légende. Une copie d écran de la page de la carte de France et une autre d une des 4 régions N.B. : L image «carte_france.gif» est disponible dans l archive FICHIERS_POUR_EXOS.zip dans Plei@d. ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 21

28 4.4. EVOLUTION DES COULEURS DES LIENS La couleur des liens hypertexte est personnalisable en ajoutant à votre balise <body> trois attributs : - link, qui définit la couleur des liens non visités, - alink, qui définit la couleur des liens actifs, - vlink, qui définit la couleur des liens visités. Avec ces explications, à vous de créer une page toute simple avec un lien qui pointe sur une autre page afin de tester les 3 attributs expliqués ci-dessus. Utilisez par exemple le bleu pour les liens non visités, le rouge pour les liens actifs et le vert pour les liens visités. HTML / LIENS ET INSERTION D OBJETS 22

29 4.5. LIENS INTERNES Le but de cet exercice est de faire une copie de votre exercice 3 et de le modifier afin de fusionner les 5 pages en une seule page Web utilisant des liens internes comme vous le montre la copie d écran suivante. ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 23

30 HTML / LIENS ET INSERTION D OBJETS 24