MODULE INF112. Préparation pour le CC2

Transcription

1 MODULE INF112 TD Préparation pour le CC2 Choisir un thème scientifique (exposé déjà fait?) Faire des recherches sur le Web si nécessaire Choisir une organisation du site Plan des pages Liens entre elles Page d'accueil page1 page2 page3 2 UJF : L1- L2 / Année 1

2 Préparation du CC2 Respecter les consignes!!!! Nom des fichiers Organisation des répertoires 3 Remarques pratiques importantes sur les noms de fichiers Des extensions correctes : Les noms des fichiers sont composés de deux parties : nnnn.xxxx Où nnnnn représente son nom qui ne doit pas contenir d espace blanc, ni de caractères accentués ou de ponctuation autre que le point qui le sépare de xxxx, l extension. Formes correctes :.html.htm.jpg.gif... Pas d'accents ou d'espace blancs dans les noms de fichier. 4 UJF : L1- L2 / Année 2

3 Remarques pratiques importantes sur les noms de fichiers (suite) Exemples incorrects : MonFichier.html.html Mon Fichier.html étoilées.jpg Exemples corrects : MonFichier.html Mon_Fichier.html Des chemins d'accès relatifs pour les URL apparaissant dans les pages web (balises A, IMG, LINK,...). Nom du fichier de la page d'accueil : index.php 5 Cahier des charges du site Thème relié aux sciences Recommandations minimales (on peut faire plus ) : 1 page accueil + 3 autres pages. Le site doit mettre en œuvre tout ce qui a été vu, c'est à dire : Les liens : des liens internes, des liens (externes) d'une page à l'autre, des liens vers des sites externes. Des images : images simples (photos, schémas...), images cliquables (boutons, agrandissements,...), image à zone sensible (MAP). NB : les liens et les images doivent fonctionner après transfert sur le serveur! Cf remarques pratiques sur les noms de fichiers, ainsi que sur l utilisation de chemins d accès relatifs (fin TD8). 6 UJF : L1- L2 / Année 3

4 Cahier des charges du site (suite) Une table, éventuellement pour la mise en page d'une image, par exemple. Une liste, avec numérotation ou avec puces. Un formulaire avec plusieurs objets de saisie (boutons, zones textes,...) et donnant un score correct. Une certaine cohérence dans la présentation des pages (couleurs, police, taille des caractères) sera obtenu par l utilisation d une feuille de style externe (fichier.css). Toutes les sources utilisées devront être citées (livres, sites web,...). L'adresse électronique et les CV des auteurs. 7 Plan Les cookies Les chemins d accès Les liens internes, mail Les tableaux Les images Format d un image Insertion d image dans une page web Image à zone cliquable multiples (MAP) 8 UJF : L1- L2 / Année 4

5 Les cookies 9 COOKIE Permet de "déposer" de l'information chez l'utilisateur et de "relire" cette information : témoin de connexion, mouchard, espion) Exemple Panier d'achat Magazines en-ligne (mémorisation des articles déjà lus) Inconvénients potentiels Un site peut retrouver les informations produites par d'autres sites; Réutilisation possible de la carte de crédit d'un utilisateur (si plusieurs utilisateurs emploient la même machine) Motivation Chaque requête de page web est indépendante des autres requêtes Pas de mécanisme permettant de contrôler l'ordre de navigation dans les pages d'un site. 10 UJF : L1- L2 / Année 5

6 Dépôt de cookie Client Client http http Requête HTTP Page HTML Serveur Serveur http http 1 ère méthode : le serveur web envoie une instruction de création de cookie à votre navigateur. Requête HTTP 2ème méthode : les instructions de création de cookie (écrites dans un langage de programmation) sont encapsulées dans une page HTML. Client Client http http Page HTML <SCRIPT> </SCRIPT> Serveur Serveur http http 11 Stockage et contenu d'un cookie Exemple de moteur de recherche : création d un cookie à l inititative de Google (nom du domaine : google.com) PREFID=b1d01d3ec1553ac3:CR=1:TM= :LM= :S=gxoZsAVfXXEx5HK google.com/ * Chaîne de caractères (NOM = VALEUR) ID = votre numéro d identification TM = date et heure de création du cookie LM = date et heure des dernières modifications S = afin d assurer l intérité des informations Exemple de site commercial : création d un cookie à l inititative de Amazon (nom du domaine : amazon.fr) session-id-time amazon.fr/ *session- id amazon.fr/ *ubid-tacbfr amazon.fr/ * Exemple de site académique : création d un cookie à l inititative de l université de Stanford(nom du domaine : stanford.edu) SUNetCookieBrowserTRUEstanford.edu/ * des messages à décrypter!! 12 UJF : L1- L2 / Année 6

7 Stockage et contenu d'un cookie Le stockage des cookies dépend du client HTTP IE : chaque cookie dans un fichier différent. Firefox : tous ses cookies dans un seul fichier. Opera : tous ses cookies dans un seul fichier et le crypte (Impossible de les modifier). 13 Consultation de cookie Client Client http http Requête HTTP Serveur Serveur http http Statistique Page HTML particulière, Poste client Poste serveur 14 UJF : L1- L2 / Année 7

8 Les chemins d accès 15 Les chemins d accès <A href="../repertoire/monfichier.html"> < img source="repertoire/maphoto.jpg"> Entre guillemets : un chemin désignant l'emplacement d'un fichier. monfichier.html, maphoto.jpg : noms de fichiers. Les noms des fichiers doivent être transmis sans modification par des ordinateurs utilisant des systèmes et des langues très variés. Conseil : n'utiliser ni lettre accentuée ou particulière au français, ni espace, ni barre oblique ou inverse dans un nom de fichier ou de dossier pour site Web. repertoire/,../ sont des noms de dossiers (ou répertoire).../ désigne le répertoire père du répertoire courant. 16 UJF : L1- L2 / Année 8

9 Arborescence d'un disque dur Répertoire Fichier.htm Image.jpg CHEMIN ABSOLU : Z:/PagesWeb/MonSite/home.html Z:/PagesWeb/MonSite/fifi/PageFifi3.html Z:\ PagesWeb MonSite Home.html fifi toto PageFifi1.html PageFifi2.html PageFifi3.html PageToto1.html PageToto2.html PageToto3.html Poste de travail (votre PC) 17 Arborescence d'un disque dur (2) Répertoire Fichier.htm Image.jpg CHEMIN RELATIF (à partir de MonSite) : home.html fifi/pagefifi3.html Z:\ PagesWeb MonSite Home.html fifi toto PageFifi1.html PageFifi2.html PageFifi3.html PageToto1.html PageToto2.html PageToto3.html Poste de travail (votre PC) 18 UJF : L1- L2 / Année 9

10 Exercice 8-1A Voici un extrait des fichiers et répertoires présents sur le disque dur d'un ordinateur : Z:\ répertoire fichier HomeSurSarado MonSite index.html pages images Page1.html Page2.html photo.jpg drapeau.gif Quel code, extrait de "index.html", est exact et quel sera son effet? <A HREF="../pages/Page1.html"> Vers la page 1 </A> <A HREF="../../pages/Page1.html">Vers la page 1 </A> <A HREF="pages/Page1.html"> Vers la page 1 </A> <A HREF="../Page1.html"> Vers la page 1 </A> 19 Exercice 8-1B Voici un extrait des fichiers et répertoires présents sur le disque dur d'un ordinateur : répertoire Z:\ fichier HomeSurSarado MonSite index.html pages images Page1.html Page2.html photo.jpg drapeau.gif Quel code, extrait de "Page1.html", est exact et quel sera son effet? <A HREF="../pages/index.html"> Accueil </A> <A HREF="../../pages/index.html"> Accueil </A> <A HREF="pages/index.html"> Accueil </A> 20 <A HREF="../index.html"> Accueil </A> UJF : L1- L2 / Année 10

11 Exercice 8-1C Voici un extrait des fichiers et répertoires présents sur le disque dur d'un ordinateur : répertoire Z:\ fichier HomeSurSarado MonSite index.html pages images Page1.html Page2.html photo.jpg drapeau.gif Quel code, extrait de "Page2.html", est exact? Quel sera son effet? <IMG SRC="images/drapeau.gif"> <IMG SRC="../images/drapeau.gif"> <IMG SRC="../drapeau.gif"> 21 <IMG SRC="../../images/drapeau.gif"> Exercice 8-1D Voici un extrait des fichiers et répertoires présents sur le disque dur d'un ordinateur : répertoire Z:\ fichier HomeSurSarado MonSite index.html pages images Page1.html Page2.html photo.jpg drapeau.gif Sachant que la page web doit être installée sur un serveur web, quel est le meilleur lien pour accéder à la page index.html dans le répertoire MonSite? <A HREF="MonSite/index.html"> page accueil </A> <A HREF = "Z:/HomeSurSarado/MonSite/index.html"> page accueil </A> 22 <A HREF="ftp:/MonSite/index.html> UJF : L1- L2 / Année 11

12 Exercice 8-1E Voici un extrait des fichiers et répertoires présents sur le disque dur d'un ordinateur : Z:\ répertoire fichier HomeSurSarado MonSite index.html pages images Page1.html Page2.html photo.jpg drapeau.gif L'auteur du site veut ajouter un lien sur les mots "Page 2" du fichier "Page1.html" permettant d'accéder au fichier "Page2.html". Doit-il ajouter quelque chose dans Page1.html? Si oui, quoi? Doit-il ajouter quelque chose dans Page2.html? Si oui, quoi? 23 Liens : pour aller plus loin 24 UJF : L1- L2 / Année 12

13 Les liens (ou pointeurs) : <A> </A> <A HREF="adresse_cible"> texte ou image cliquable </A> texte du lien ou image cliquable L'adresse cible peut être: un document distant : <a href=" <a href=" <a href=" manuelhtml.html"> un document local (sur le même serveur) <a href="../repertoire/monfichier.html"> 25 Les liens : ancre (ou cible, ou point d'accès) <a href="#ancre"> texte du lien</a> Auparavant, cette ancre doit avoir été définie au moyen de : <A NAME="ancre"> </A> Recherches de toutes sortes : moteurs, annuaires, encyclopédies,... <a href="#annuaires">annuaires</a> * <a href="#moteur">moteursde Recherche</a> * <a href="#recherche">recherches spécialisées</a> * <a href="#encyclopedie">encyclopédies</a> * <a href="#revues">périodiques scientifiques</a> <a NAME="annuaires"></a>Annuaires : Annuaire Universitaire :... Annuaire de l'enseignement et de la Recherche (UREC) :... Les pages blanches :... Les spectacles :... <a NAME="moteur"></a>Moteurs de Recherche : Google :... AltaVista :... Yahoo :... <a NAME="recherche"></a>Recherches spécialisées : 26 UJF : L1- L2 / Année 13

14 Les liens : ancre (suite) Une ancre à l'intérieur d'un fichier local <a href="../repertoire/monfichier.html#ancre"> ou distant : <a href=" ading4"> monfichier.html <a href="../repertoire/ monfichier.html#ancre"> <a name="#ancre"> <a> 27 Les liens : adresse électronique <A href="mailto:toto@ujf-grenoble.fr"> Envoyer un mail à Toto </A> Envoyer un mail à Toto 28 UJF : L1- L2 / Année 14

15 Exercice 8-2A Z:\ répertoire fichier HomeSurSarado MonSite index.html pages images glossaire.html Page1.html Page2.html photo.jpg drapeau.gif Dans la page index.html, on souhaite mettre un lien permettant aux visiteurs du site d'envoyer un courrier électronique. Pour cela, il faut introduire : 1.Un lien interne 2.Un lien externe 3.Un lien ftp 4.Un lien mailto 29 Exercice 8-2B Z:\ répertoire fichier HomeSurSarado MonSite index.html pages images glossaire.html Page1.html Page2.html photo.jpg drapeau.gif Laquelle de ces syntaxes est correcte? 1. <A HREF="toto@ujf-grenoble.fr"> </A> 2. <A HREF="toto@ujf-grenoble.fr"> contacter Toto </A> 3. <A HREF="mailto:toto@ujf-grenoble.fr"> contacter Toto </A> 4. <A MAILTO="toto@ujf-grenoble.fr"> contacter Toto </A> 30 UJF : L1- L2 / Année 15

16 Exercice 8-2C Z:\ répertoire fichier HomeSurSarado MonSite index.html pages images glossaire.html Page1.html Page2.html photo.jpg drapeau.gif Dans la page Page2.html, on souhaite faire un lien vers glossaire.html. Pour cela, on insère le code suivant : <a href="../../glossaire.html"></a> dans Page2.html. A votre avis, ce code va-t-il nous permettre de réaliser ce que l on souhaite? 1. Oui 2. Non, l'url du site doit commencer par 3. Non, il faut insérer ce code dans glossaire.html 4. Non, il faut mettre <a href="../glossaire.html"> Non, il faut ajouter du texte entre les balises <a> et </a> Exercice 8-2D Dans la page Page2.html, on décrit la formation des différents types de massifs montagneux. Pour organiser le texte, on introduit deux parties (une pour décrire la formation des massifs jeunes et une autre pour décrire la formation des massifs anciens). En début de cette même page, une table des matières est proposée. On souhaite permettre aux utilisateurs d accéder directement à chacune des parties à partir de la table des matières. Pour faire cela, il faut : 1. introduire une ancre pour chaque nom de la table des matières en début de fichier et introduire un lien externe au niveau de chaque partie 2. introduire une ancre pour chaque nom de la table des matières en début de fichier et introduire un lien interne au niveau de chaque partie 3. introduire une ancre pour chaque partie, et introduire un lien externe pour chaque nom de la table des matières en début de fichier 4. introduire une ancre pour chaque partie, et introduire un lien interne pour chaque nom de la table des matières en début de fichier 5. ce n est pas possible 32 UJF : L1- L2 / Année 16

17 Les tableaux en HTML 33 Balises HTML de base d'une table : <TABLE></TABLE> Création d'un tableau. <TR> <TD></TD> Définition d'une rangée, à utiliser pour chacune des rangées requises, à l'intérieur des deux balises <TABLE></TABLE>. («Table Row») Définition d'une cellule de la table, à insérer à l'intérieur des deux balises <TR>. («Table Data») <TABLE> <TR> <TR> </TABLE> <TD>1</TD><TD>2</TD> <TD>3</TD><TD>4</TD> <TD>5</TD><TD>6</TD> <TD>7</TD><TD>8</TD> 34 UJF : L1- L2 / Année 17

18 Attributs de la balise <table> L attribut BORDER permet : 1- d'afficher une ligne entourant chaque cellule du tableau 2- définir un encadrement d'épaisseur variable autour du tableau Avec <TABLE BORDER=1> l'exemple précédent devient : Avec <TABLE BORDER=10> l'exemple précédent devient : 35 Attributs de la balise <table> L attribut CELLSPACING détermine l'épaisseur de la bordure entre les cellules. L attribut CELLPADDING détermine l'espacement entre le texte de chaque cellule et sa bordure. Avec : <TABLE border cellspacing=8> notre exemple devient : Avec : <TABLE border cellpadding=10> notre exemple devient : 36 UJF : L1- L2 / Année 18

19 Attributs de la balise <table> L attribut WIDTH permet de spécifier la largeur totale d'un tableau Soit en pourcentage de la largeur de la fenêtre. Ainsi, si vous redimensionnez cette fenêtre plus large ou plus étroite, le tableau se recalculera en conséquence. Soit en nombre de pixels. La largeur du tableau est alors fixe. Remarque : cet attribut capricieux ne donne pas toujours le résultat prévu Exemple avec <TABLE border cellpadding=10 width="100%"> Exemple avec <TABLE border cellpadding=10 width=100> 37 Attributs de la balise <table> L attribut BGCOLOR="#RRGGBB" définit la couleur de fond de la cellule. RR, GG et BB sont les valeurs hexadécimales des composantes Rouge(RR), Verte(GG) et Bleu(BB). Remarque : cet attribut s'applique s'applique aussi à <body>, <TR> et <TD> Exemple avec : <TABLE border cellpadding=10 width=100 bgcolor="#cef0f0"> 38 UJF : L1- L2 / Année 19

20 Attributs des balises <TR> et <TD> ALIGN permet d'aligner le contenu des cellules : à gauche ALIGN=LEFT à droite ALIGN=RIGHT ou au centre ALIGN=CENTER Par défaut : alignement à gauche (ALIGN=LEFT) Exemple avec : <TABLE width="200" border="2"> <TR align="right"> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> <TR> <TD align="center">5</td> <TD>6</TD> <TD>7</TD> <TD>8</TD> </TABLE> 39 Attributs des balises <TR> et <TD> VALIGN permet d'aligner le contenu :» en haut VALIGN = TOP» au centre VALIGN = MIDDLE» au bas VALIGN = BOTTOM» ou sur la même ligne BASELINE Par défaut : alignement au centre (VALIGN=MIDDLE). Exemple avec : <TABLE width="200" height="200" border="2"> <TR> <TD valign="top">1</td> <TD valign="middle">2</td> <TD valign="bottom">3</td> <TD baseline>4</td> <TR> <TD VALIGN="TOP">5</TD> <TD VALIGN="MIDDLE">6</TD> <TD VALIGN="BOTTOM">7</TD> <TD BASELINE>8</TD> 40 </TABLE> UJF : L1- L2 / Année 20

21 Attributs de la balise <TD> COLSPAN donne à une cellule une largeur qui est un multiple des autres colonnes <TABLE width="200" border="2"> <TR> <TD colspan="4">1</td> <TR> <TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD> </TABLE> ROWSPAN donne à une cellule une hauteur qui est un multiple des autres lignes <TABLE width="200" border="2"> <TR> <TD rowspan="2">1</td> <TD>2</TD> <TD>3</TD> <TD>4</TD> <TR> <TD>6</TD><TD>7</TD><TD>8</TD> </TABLE> 41 Table : parcours étudiants 42 UJF : L1- L2 / Année 21

22 Table : parcours étudiants <TABLE BORDER CELLSPACING=1 CELLPADDING=3 WIDTH=487> <TR><TD COLSPAN=2 ALIGN="CENTER">Déroulement</TD> <TD COLSPAN=5 ALIGN="CENTER">Modules</TD> <TR><TD VALIGN="MIDDLE" ROWSPAN=2>Année 1</TD> <TD> Semestre 1</TD> <TD >BIO110</TD> <TD >CHI110</TD> <TR><TD >Semestre 2</TD> <TD >TUE110</TD> <TD >BIO241</TD> <TD >INF112</TD> <TD >BIO242</TD> <TD >OUV110</TD> <TD >BIO243</TD> <TD >BIO244</TD> <TR><TD >Semestre 2</TD> <TD >CHI242</TD> <TD >BIO121</TD> <TD >BIO122</TD> <TR><TD >Année 3</TD> <TD >CHI120</TD> <TD COLSPAN=6 ALIGN="CENTER">Licence biologie</td> <TD >TUE121</TD> <TD >OUV120</TD> </TABLE> <TR><TD VALIGN="MIDDLE" ROWSPAN=2>Année 2</TD> <TD >Semestre 1</TD> <TD >BIO231</TD> <TD >BIO232</TD> <TD >STA210</TD> <TD >TUE231</TD> <TD >OUV230</TD> 43 Exercice 8-3 : table Représentez la page web qui sera produite par le butineur avec le code html suivant : <HTML> <HEAD> <TITLE>ABC</TITLE> </HEAD> <BODY> <table BORDER=1 > <tr> <td><center>température</center></td> <td COLSPAN="2"><center>Saison</center></td> </tr> <tr> <td>ville</td> <td>hiver</td> <td>eté</td> </tr> <tr> <td>montréal</td> <td>-20</td> <td>30</td> </tr> </table></body></html> 44 UJF : L1- L2 / Année 22

23 Exercice 8-4 : table encore Représentez la page web qui sera produite par le butineur avec le code html suivant : <HTML> <HEAD> <TITLE>ABC</TITLE> </HEAD> <BODY> <TABLE BORDER CELLSPACING=1 CELLPADDING=10> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> <TR> <TD>L</TD> <TD COLSPAN=2 ROWSPAN=2> </TD> <TD>E</TD> <TR> <TD>K</TD> <TD>F</TD> <TR> <TD>J</TD> <TD>I</TD> <TD>H</TD> <TD>G</TD> </TABLE> </BODY> </HTML> 45 Exercice 8-5 : table Ecrivez le code HTML permettant l'affichage suivant : Compétition de Curling 46 UJF : L1- L2 / Année 23

24 Les images 47 Image numérique Qu est ce qu une image? Forme discrète (quantifiable) d une représentation d un phénomène continu. Taille d une image en pixels définition d une image Image Informatique : Discrétisation codage informatique Poids d une image place prise en mémoire 48 UJF : L1- L2 / Année 24

25 Image vectorielle Décomposition en objets graphiques élémentaires Primitives graphiques basées sur des concepts mathématiques (cercle, rectangle, segment, arc, courbe ) Stockage : position, caractéristiques (couleur, épaisseur trait, style trait) avantages : indépendance par rapport à la résolution écriture fine et lisible modification des objets aisée (forme et apparence) Inconvénients : Ne permet pas de traiter des formes trop complexes (paysage) Pas d effets spéciaux (flou ) 49 Image bitmap Tableau de points Pas de notion d objet Codage d une suite de points Mixage complexe de couleurs fondamentales Résolution : densité de pixels dans l image Plus la résolution est élevée, plus l image a de pixels PPP : pixels par pouce (2,54cm) DPI : dot per inch avantages : adaptable aux images complexes format proche du matériel Inconvénients : Taille importante indépendante de l information de l image 50 UJF : L1- L2 / Année 25

26 Image vectorielle ou Image bitmap? Vectorielle : Schémas Cartes Domaines de la CAO et DAO (mécanique, architecture..) Bitmap : Retouche d une photo Effets graphiques sophistiqués 51 Manipulation d images Les images bitmap Concevoir l image directement sur l ordinateur Récupérer l image à partir d un autre support ; acquisition (scanner, appareil photo et caméra numérique ) Manipulation de l image avec un logiciel de traitement d image (paint, photoshop, paint shop pro, gimp ) Les images vectorielles Elles se traitent avec un grapheur. (careldraw, illustrator, xfig, gnuplot et aussi graphiques d Excel) Actuellement sur internet on ne manipule pratiquement que des images bitmap (balises IMG) De nouvelles méthodes permettent de manipuler des images vectorielles et de les insérer dans des pages web. 52 UJF : L1- L2 / Année 26

27 La couleur Codage : sur bits Bit = plus petite unité de mémoire de l ordinateur Pour reproduire une zone «grandeur» d information, le système emprunte à la mémoire ou 32 bits. Ce qui détermine les possibilités ci-contre. L information pour chaque pixel est définie par une couleur propre Deux couleurs NOIR ou BLANC Avec : 0 = vide, 1 = Noir et 2 = Blanc 16 Couleurs ou nuances de gris avec les mêmes obligations de 0 = vide et 15 couleurs pures. 256 Couleurs ou nuances de gris tenant compte des contraintes ci-dessus Couleurs ("High Color") Couleurs et oui seize millions (mode "True Color"). 53 La couleur 54 UJF : L1- L2 / Année 27

28 L information contenue dans chaque pixel est référencée dans une table. Ceci limite le nombre de couleurs au nombre d éléments de la table. Couleur indexée Ce mode de codage de la couleur a été introduit pour des problèmes historiques de conception, afin de limiter le coût de mémorisation. Actuellement toutes les cartes vidéo fonctionnent en codage direct. 55 Les calques Une image est constituée d un arrière-plan et d éventuelles couches successives indépendantes. Calques = couches Les éléments d une couche peuvent être opaques et donc masquer les couches inférieures et l arrièreplan, ou se «mélanger» de différentes façon avec les couches inférieures. 56 UJF : L1- L2 / Année 28

29 Séquence de fabrication 57 Format de l image La sauvegarde Vectoriel : PS (postscript), CGM, WMF Bitmap : PNG, BMP, GIF, JPEG Conversion possible entre les différents formats à partir de logiciels Certains formats permettent de réduire la taille d origine d une image en utilisant les techniques de compression : la compression peut-être avec ou sans perte d informations. 58 UJF : L1- L2 / Année 29

30 Formats manipulés sous le Web Format GIF (Graphics Interchange Format) Version GIF89a Format payant pour la sauvegarde sous un logiciel Couleurs indexées : palette de 256 couleurs Système de compression d image Utilise une couleur de transparence Peut sauvegarder plusieurs images dans un même fichier pour donner un «GIF animé», une image animée. 59 Formats manipulés sous le Web Format JPEG (Joint Photographic Expert Group) Format true color Système de compression très efficace Les images JPEG (.jpg) ne peuvent être transparentes Les images JPEG (.jpg) ne peuvent être animées Suivant les choix de l utilisateur une partie de l information de l image peut être perdue 60 UJF : L1- L2 / Année 30

31 Formats manipulés sous le Web Format PNG (Portable Network Graphics) Format PNG (.png) Système de compression efficace Permet la transparence Plusieurs logiciels sont disponibles gratuitement pour convertir vos images JPEG, GIF, BMP, TIFF, PSD. au format PNG. 61 Formats manipulés sous le Web Format FLASH Nouveau standard pour réaliser des animations dans les pages web Utilise le format vectoriel pour sauvegarder les éléments de chaque image de l animation. 62 UJF : L1- L2 / Année 31

32 Insertion d'image dans une page html <IMG SRC="image" ALIGN="attribut" height=xx width=yy> image = adresse d'une image Les attribut facultatifs : "MIDDLE" "TOP" "BOTTOM" "LEFT" ou "RIGHT" La taille imposée de l image est donnée par xx, yy en pixels. 63 Exemples <IMG ALIGN=BOTTOM SRC="chouetteG.gif"> La chouette <IMG ALIGN=RIGHT SRC="chouetteG.gif"> chouette <BR> nom par lequel on désigne couramment<br> certains oiseaux rapaces nocturnes.<br> <EM>Le Petit Robert</EM> <BR CLEAR=ALL> 64 UJF : L1- L2 / Année 32

33 Image cliquable simple Syntaxe générale d'un lien : <A HREF="adresse_cible"> texte du lien ou image cliquable </A> Syntaxe générale d'une image cliquable : <a href="adresse_cible"><img SRC="adresse_image"></a> Exemple : <a href="cv-anglais.html"> <img SRC="drapeauAnglais.jpg" height=68 width=52></a> 65 Image avec plusieurs zones cliquables (images à zones sensibles ou MAP) 66 UJF : L1- L2 / Année 33

34 Image avec différentes zones cliquables <IMG SRC="Z:\SVSTU2\plan-5-9m.jpg" WIDTH=727 HEIGHT=511 BORDER=0 USEMAP="#map"> <MAP NAME="map"> <!-- #$-:Image Map file created by GIMP Imagemap Plugin --> <!-- #$-:GIMP Imagemap Plugin by Maurits Rijk --> <!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$VERSION:1.3 --> <!-- #$AUTHOR:letregua --> <AREA SHAPE="RECT" COORDS="222,307,342,376" HREF=" <AREA SHAPE="POLY" COORDS="543,223,544,244,562,245,583,232,579,268,592,286,516,302,514, 296,523,277,512,275,507,266,519,254,492,239,497,222,539,221" HREF=" </MAP> 67 Coordonnées du rectangle (222,307) (342,376) <AREA SHAPE="RECT" COORDS="222,307,342,376" HREF=" 68 UJF : L1- L2 / Année 34

35 Coordonnées du polygone (543,223) (544,244) (562,245) (583,232) (579,268) <AREA SHAPE="POLY" COORDS="543,223,544,244,562,245,583,232,579,268,592,286,516,302,514, 296,523,277,512,275,507,266,519,254,492,239,497,222,539,221" HREF=" 69 Image avec différentes zones cliquables 70 UJF : L1- L2 / Année 35

36 <map NAME="France"> <area SHAPE="POLYGON" COORDS="238, 41, 225, 6, 314, 0, 381, 54, 381, 72, 341, 70, 317, 64, 276, 49" HREF="/annuaire/index.fcgi?req=lcommunes&re=NORD+-+PAS+DE+CALAIS"> <area SHAPE="POLYGON" COORDS="270, 67, 284, 85, 283, 119, 297, 123, 339, 129, 352, 144, 358, 127, 364, 122, 371, 115, 373, 110, 381, 71, 341, 71, 327, 70, 275, 49, 270, 67" HREF="/annuaire/index.fcgi?req=lcommunes&re=PICARDIE" alt="picardie"> <area SHAPE="POLYGON" COORDS="245, 156, 222, 106, 179, 85, 204, 48, 271, 67, 286, 86, 283, 119, 265, 148, 245, 156" HREF="/annuaire/index.fcgi?req=lcommunes&re=HAUTE+NORMANDIE"> <area SHAPE="POLYGON" COORDS="352, 173, 360, 146, 339, 129, 296, 123, 283, 119, 274, 138, 294, 178, 313, 180, 334, 185, 352, 173" HREF="/annuaire/index.fcgi?req=lcommunes&re=ILE+DE+FRANCE"> <area SHAPE="POLYGON" COORDS="120, 477, 150, 334, 207, 380, 232, 337, 263, 354, 266, 379, 233, 440, 191, 446, 190, 463, 205, 480, 180, 521, 120, 477" HREF="/annuaire/index.fcgi?req=lcommunes&re=AQUITAINE"> <area SHAPE="POLYGON" COORDS="373, 358, 390, 356, 398, 365, 372, 396, 349, 383, 331, 402, 322, 384, 311, 402, 296, 402, 296, 383, 313, 361, 314, 357, 319, 338, 318, 320, 314, 304, 302, 294, 333, 268, 374, 290, 366, 306, 365, 333, 377, 346, 373, 358" HREF="/annuaire/index.fcgi?req=lcommunes&re=AUVERGNE"> <area SHAPE="RECT" COORDS="0, 0, 607, 635" HREF="/annuaire/cartes/"> </map> <img border="0" src="/annuaire/cartes/carte_france.gif" usemap="#france" WIDTH="608" HEIGHT="632"> 71 Exercice 8-6 : Poids d une image L appareil photo numérique que le Père Noël vous a offert produit des images couleurs par points de 2000x1500 pixels ; la couleur de chaque pixel est codée sur 3 octets. Le récit de vos aventures au Tibet occupe 500 pages ; chaque page contient 40 lignes de 60 caractères. Chaque caractère est codé par un octet. Vous réalisez un site web à l intention de votre famille en Bretagne pour leur faire partager ces moments inoubliables. La vitesse de transmission sur Internet sur la liaison utilisée est de 1 Mbits/s. Combien de possibilités de couleurs y a-t-il par pixel? Combien de temps faudra-il à votre famille pour recevoir : - le texte de votre site? - une image de votre site? 72 UJF : L1- L2 / Année 36

37 Exercice 8-7 : Image MAP Voici une image MAP dont les zones sensibles ne fonctionnent pas. Trouvez les 4 erreurs visibles dans le code html. <MAP NAME="sectionmap"> <AREA SHAPE="rect" COORDS="53,38,218,63" HREF="frames.html"> <AREA SHAPE="rect" COORDS="53,38,218,63" HREF="Z:/calepin.html "> <AREA SHAPE="rect" COORDS="67,68,228,92" HREF=""> <AREA SHAPE="rect" COORDS="57,97,218,121" HREF="neuf.html"> <AREA SHAPE="rect" COORDS="47,127,208,151" HREF="phil_Web/mona.html"> </MAP> 73 <IMG SRC="image/front.gif" ISMAP USEMAP="#mapsection"> A faire pour le TP 8 Dans le Guide des logiciels, lire le chapitre 9 : «GIMP» 74 UJF : L1- L2 / Année 37