MODULE INF112. Préparation pour le CC2

Dimension: px
Commencer à balayer dès la page:

Download "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="http://www.ujf-grenoble.fr"> <a href="http://www-valence.ujfgrenoble.fr/~girod/cours_internet"> <a href="http://www.grr.ulaval.ca/grrwww/manuel/ 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="http://www-valence.ujfgrenoble.fr/~girod/cours_internet/chap4/cours_html.html#he ading4"> monfichier.html <a href="../repertoire/ monfichier.html#ancre"> <a name="#ancre"> <a> 27 Les liens : adresse électronique <A 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 </A> 2. <A contacter Toto </A> 3. <A contacter Toto </A> 4. <A 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="http://dsunet.ujf-grenoble.fr"> <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="http://www.ujf-grenoble.fr/BUS"> </MAP> 67 Coordonnées du rectangle (222,307) (342,376) <AREA SHAPE="RECT" COORDS="222,307,342,376" HREF="http://dsu-net.ujf-grenoble.fr"> 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="http://www.ujf-grenoble.fr/BUS"> 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

LES IMAGES NUMÉRIQUES

LES IMAGES NUMÉRIQUES LES IMAGES NUMÉRIQUES On désigne sous le terme d'image numérique toute image (dessin, icône, photographie ) acquise, créée, traitée ou stockée sous forme binaire (ensemble de 0 et de 1). On distingue deux

Plus en détail

L image numérique. Bitmap (ou matricielle) vectorielle

L image numérique. Bitmap (ou matricielle) vectorielle L image numérique Bitmap (ou matricielle) vectorielle L image Bitmap (ou matricielle) L image est considérée comme un rectangle constitué de points élémentaires appelés pixels. Elle permet la qualité photographique

Plus en détail

Création de page web avec Dreamweaver 2.0

Création de page web avec Dreamweaver 2.0 Création de page web avec Dreamweaver 2.0 Guide d accompagnement pour Windows avril 2002 Suzanne Harvey Responsable RÉCIT suzanne.harvey@prologue.qc.ca http://www.apinfo.qc.ca http://www.cssh.qc.ca/se/recit

Plus en détail

Les images en informatique

Les images en informatique Partie 1 Les images en informatique Anne GEDDES 1 I. Les catégories d images Il existe 2 catégories d images : Les images vectorielles Les images bitmap (ou images raster) 2 A. Les images vectorielles

Plus en détail

TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels

TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels HTML tableau Lévis Thériault, hiver 2009 Structure d un tableau

Plus en détail

Comment coder une image en langage binaire? Michel Futtersack, Faculté de Droit, Université Paris Descartes

Comment coder une image en langage binaire? Michel Futtersack, Faculté de Droit, Université Paris Descartes Comment coder une image en langage binaire? Michel Futtersack, Faculté de Droit, Université Paris Descartes Les deux grands types d'images numériques Image matricielle (bitmap) Image vectorielle Image

Plus en détail

LES IMAGES NUMERIQUES

LES IMAGES NUMERIQUES LES IMAGES NUMERIQUES Baccalauréat S -Spécialité Informatique et Sciences du Numérique 4.1 : Représentation de l'information : Images numériques Objectifs L'apprenant doit être capable de o numériser une

Plus en détail

Action 1 : Découverte de l outil informatique. Action 2 : Environnement WINDOWS XP à Seven, Linux. Action 3 : Traitement de texte. Action 4 : Tableur.

Action 1 : Découverte de l outil informatique. Action 2 : Environnement WINDOWS XP à Seven, Linux. Action 3 : Traitement de texte. Action 4 : Tableur. Action 1 : Découverte de l outil informatique. Action 2 : Environnement WINDOWS XP à Seven, Linux. Action 3 : Traitement de texte. Action 4 : Tableur. Action 5 : Présentation de diaporama. Action 6 : Programmation

Plus en détail

TP : IMAGE NUMERIQUE MATRICIELLE (WINDOWS)

TP : IMAGE NUMERIQUE MATRICIELLE (WINDOWS) TP : IMAGE NUMERIQUE MATRICIELLE (WINDOWS) 1. Calculer la résolution d affichage en ppi de votre écran. Pour cela vous munir d une règle graduée et appliquer la formule : 2. Sur combien d octets est codée

Plus en détail

Webmaster / Concepteur Multimedia

Webmaster / Concepteur Multimedia Durée : 217 heures Objectifs : Webmaster / Concepteur Multimedia Participants : Toute personne attirée par la création de site internet professionnel. Méthodes : Mise en pratique sur micro-ordinateur.

Plus en détail

TP Codage Traitement d images numériques ISN TS1

TP Codage Traitement d images numériques ISN TS1 TP Codage Traitement d images numériques ISN TS1 I. Notion d image numérique 1. Définition Une image numérique est un ensemble discret de points appelés pixels ( contraction de picture elements ). Un pixel

Plus en détail

nom : Collège Ste Clotilde

nom : Collège Ste Clotilde UNE CONFIGURATION INFORMATIQUE Objectif : Identifier les éléments principaux d une configuration L ordinateur enregistre des données qu il traite pour produire un résultat Sifflements 20 Notice 12 attache

Plus en détail

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56)

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Guide d'utilisation De Kompozer AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Table des matières Fiche1 : Créer, nommer et sauvegarder une page...2 Fiche2 : Modifier les couleurs et le fond

Plus en détail

Introduction à Expression Web 2

Introduction à Expression Web 2 Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer

Plus en détail

LES IMAGES NUMERIQUES

LES IMAGES NUMERIQUES LES IMAGES NUMERIQUES Ce qui génère ces images, ce sont : les appareils photo numériques, les scanners, les caméscopes numériques, des logiciels de dessin, On les trouve : sur Internet : auquel cas, il

Plus en détail

Examen d'informatique module INF112. 1ère session 2003-2004. sans calculatrice, sans document

Examen d'informatique module INF112. 1ère session 2003-2004. sans calculatrice, sans document Examen d'informatique module INF112 1ère session 2003-2004 sans calculatrice, sans document Le barème est indicatif Sauf indiqué contraire, dans les questions à choix multiples, il peut (ou non) y avoir

Plus en détail

Image numérique. Être efficace avec son ordinateur. Dominique Lachiver

Image numérique. Être efficace avec son ordinateur. Dominique Lachiver Image numérique Être efficace avec son ordinateur Dominique Lachiver Paternité - Pas d'utilisation Commerciale - Partage des Conditions Initiales à l'identique : http://creativecommons.org/licenses/by-nc-sa/4.0/fr/

Plus en détail

TP Initiation au langage HTML

TP Initiation au langage HTML TP Initiation au langage HTML (1) Rappels de quelques généralités Un fichier HTML n'est pas compilé (ce n'est pas un programme) Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant

Plus en détail

ATELIER INFORMATIQUE. Le travail avec les images

ATELIER INFORMATIQUE. Le travail avec les images ATELIER INFORMATIQUE Le travail avec les images Réduire le poids des images Pourquoi réduire la taille (poids) de images? - Pour adapter la taille de l image originelle à la taille de l écran sur lequel

Plus en détail

Nvu - KompoZer. Table des matières. Tuto rapido

Nvu - KompoZer. Table des matières. Tuto rapido Nvu - KompoZer Table des matières 1. Démarrage rapide...2 1.1. Créer une nouvelle page...2 1.2. Ouvrir une page existante...2 1.3. Enregistrer une page...2 2. Utiliser KompoZer...3 2.1. L'interface...3

Plus en détail

On définit sous le terme d image numérique toute image (dessin, icône, photographie )

On définit sous le terme d image numérique toute image (dessin, icône, photographie ) On définit sous le terme d image numérique toute image (dessin, icône, photographie ) Acquise, créée, traitée ou stockée sous forme binaire (suite de 0 et de 1) Lorsqu'on agrandit une image numérique,

Plus en détail

Gérer un site avec Kompozer. Josiane Ducournau CRDP Aquitaine

Gérer un site avec Kompozer. Josiane Ducournau CRDP Aquitaine Gérer un site avec Kompozer Organisation, plan de travail Création de pages Tout les fichiers, dossiers, images auront des noms (ex. nouveautes.htm ; ces noms ne devront comporter ni espaces, ni caractères

Plus en détail

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet!

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet! Créez en quelques minutes votre site Internet! SOMMAIRE : Choisir une interface graphique - Nommez votre site... page 03 5 étapes de création... page 04 Les outils de création graphique... page 05 Mise

Plus en détail

The GIMP. Sommaire : INFORMATIQUE et MULTIMEDIA Traitement et retouche d images avec «The GIMP» Traitement et retouche d images avec :

The GIMP. Sommaire : INFORMATIQUE et MULTIMEDIA Traitement et retouche d images avec «The GIMP» Traitement et retouche d images avec : Traitement et retouche d images avec : The GIMP Gimp (Gnu Image Manipulation Program) est un puissant outil d'édition et de manipulation d'images. Développé à l origine pour Linux par Peter Mattis et Spencer

Plus en détail

Création de site Web à l aide de l outil SimpliSite

Création de site Web à l aide de l outil SimpliSite Centre de documentation sur l éducation des adultes et la condition féminine (CDÉACF) Création de site Web à l aide de l outil SimpliSite Par François Dallaire CDÉACF Décembre 2006 Création de site Web

Plus en détail

TD : Codage des images

TD : Codage des images TD : Codage des images Les navigateurs Web (Netscape, IE, Mozilla ) prennent en charge les contenus textuels (au format HTML) ainsi que les images fixes (GIF, JPG, PNG) ou animée (GIF animée). Comment

Plus en détail

Copyleft octobre 10 - Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 0. Acquisition Restitution. Technologies analogiques

Copyleft octobre 10 - Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 0. Acquisition Restitution. Technologies analogiques Copyleft octobre 10 - Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 0 IMAGE Restitution Codage de l'image fixe Les formats MATRICIELS (ou bitmap) : L'image est représentée comme une ensemble

Plus en détail

INFO 2 : Traitement des images

INFO 2 : Traitement des images INFO 2 : Traitement des images Objectifs : Comprendre la différence entre image vectorielle et bipmap. Comprendre les caractéristiques d'une image : résolution, définition, nombre de couleurs, poids Etre

Plus en détail

LE SITE INTERNET DU COLLÈGE

LE SITE INTERNET DU COLLÈGE LE SITE INTERNET DU COLLÈGE I) Introduction 1) Présentation Le site du collège est réalisé à l aide de SPIP. C'est un logiciel de publication pour l Internet qui permet de gérer un site à plusieurs, de

Plus en détail

Préparation d un post (article) pour idweblogs

Préparation d un post (article) pour idweblogs Préparation d un post (article) pour idweblogs 30/09/2013 Préparation des documents... 2 Le texte... 2 Les images... 2 Les vidéos... 3 Transmission des documents à idweblogs... 4 Par mail... 4 Via notre

Plus en détail

Optimiser les e-mails marketing Les points essentiels

Optimiser les e-mails marketing Les points essentiels Optimiser les e-mails marketing Les points essentiels Sommaire Une des clés de succès d un email marketing est la façon dont il est créé puis intégré en HTML, de telle sorte qu il puisse être routé correctement

Plus en détail

PROGRAMME DE FORMATION Atelier de communication

PROGRAMME DE FORMATION Atelier de communication PROGRAMME DE FORMATION Atelier de communication OBJECTIFS : PRE-REQUIS : PUBLIC : Permettre aux agriculteurs de disposer d un site web pour faire découvrir leurs activités et leurs produits par le biais

Plus en détail

Introduction à la conception de sites web

Introduction à la conception de sites web Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 9-16 janvier 2006 1- Les grands principes du web (1) Client / serveur réseau programmes communicants

Plus en détail

Utiliser le logiciel Photofiltre Sommaire

Utiliser le logiciel Photofiltre Sommaire Utiliser le logiciel Photofiltre Sommaire 1. Quelques mots sur l image 2. Obtenir des images numériques 3. Le tableau de bord de logiciel PhotoFiltre 4. Acquérir une image 5. Enregistrer une image 6. Redimensionner

Plus en détail

1 Module 1 : feuille de style, position des blocs, nombre d éléments

1 Module 1 : feuille de style, position des blocs, nombre d éléments Plugin d'habillage d'eva-web 4 Le plugin d'habillage d'eva-web permet de : adapter la position, la taille des divers éléments la composant choisir les couleurs de fonds des divers secteurs choisir la taille,

Plus en détail

LE SITE INTERNET DU COLLÈGE

LE SITE INTERNET DU COLLÈGE LE SITE INTERNET DU COLLÈGE I ) Introduction: 1 Présentation : Le site du collège est réalisé à l aide de SPIP. C'est un logiciel de publication pour l Internet qui permet de gérer un site à plusieurs,

Plus en détail

INITIATION AU LANGAGE HTML

INITIATION AU LANGAGE HTML INITIATION AU LANGAGE HTML I INTRODUCTION Seules les bases du langage HTML sont abordées ici. Cette initiation a pour but de "démarrer", les nombreuses ressources concernant ce langage vous permettront

Plus en détail

Traitement numérique de l'image. Raphaël Isdant - 2009

Traitement numérique de l'image. Raphaël Isdant - 2009 Traitement numérique de l'image 1/ L'IMAGE NUMÉRIQUE : COMPOSITION ET CARACTÉRISTIQUES 1.1 - Le pixel: Une image numérique est constituée d'un ensemble de points appelés pixels (abréviation de PICture

Plus en détail

FORMATS DE FICHIERS. Quels sont les différents types d informations numériques dans un document multimédia?

FORMATS DE FICHIERS. Quels sont les différents types d informations numériques dans un document multimédia? FORMATS DE FICHIERS Choisir et justifier un format de fichier pour réaliser un document multimédia 1 ) Le problème d Amélie Amélie et Léa ont publié leur premier article sur leur propre blog. Amélie constate

Plus en détail

TD-1 : traitement de l image et HTML

TD-1 : traitement de l image et HTML TD-1 : traitement de l image et HTML Préliminaires Les cours seront toujours sur ma page institutionnelle : http://virginie.zampa.u-grenoble3.fr/pages/cours-15-16.html Si vous avez besoin de me contacter

Plus en détail

Formation > Développement > Internet > Réseaux > Matériel > Maintenance

Formation > Développement > Internet > Réseaux > Matériel > Maintenance Formation > Développement > Internet > Réseaux > Matériel > Maintenance SOMMAIRE 1. ACCEDER A L'INTERFACE D'ADMINISTRATION...5 1.1. Le navigateur... 5 1.2. L'interface d'administration... 5 2. METTRE

Plus en détail

Utiliser une image. Micro-ordinateurs, informations, idées, trucs et astuces

Utiliser une image. Micro-ordinateurs, informations, idées, trucs et astuces Micro-ordinateurs, informations, idées, trucs et astuces Utiliser une image Auteur : François CHAUSSON Date : 8 février 2008 Référence : utiliser une image.doc Préambule Voici quelques informations utiles

Plus en détail

Domaine B5 : Réaliser la présentation de ses travaux en présentiel et en ligne.

Domaine B5 : Réaliser la présentation de ses travaux en présentiel et en ligne. Travail dirigé Domaine B5 : Réaliser la présentation de ses travaux en présentiel et en ligne. Item B53 : Réaliser des documents hypermédias intégrant textes, sons, images fixes et animées et liens internes

Plus en détail

Bernard Lecomte. Débuter avec HTML

Bernard Lecomte. Débuter avec HTML Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.

Plus en détail

Fiche n 4 Utilisation de Kompozer Table des matières

Fiche n 4 Utilisation de Kompozer Table des matières Fiche n 4 Utilisation de Kompozer Table des matières 1-Travail préparatoire...1 1.1-Contraintes sur les noms de fichier...1 1.2-Préparation du dossier de stockage...1 1.3-Barre d'outils...1 1.4-Création

Plus en détail

DOSSIER RESSOURCES CRÉATION DE PAGES HTML UTILISATION DU LOGICIEL DREAMWEAVER

DOSSIER RESSOURCES CRÉATION DE PAGES HTML UTILISATION DU LOGICIEL DREAMWEAVER DOSSIER RESSOURCES CRÉATION DE S HTML UTILISATION DU LOGICIEL DREAMWEAVER SOMMAIRE SITE Créer un nouveau site Page 1 Ouvrir un site Pages 1-2 Créer une nouvelle page Page 2 Modifier les propriétés d'une

Plus en détail

3 : LA COMPRESSION DE DONNEES

3 : LA COMPRESSION DE DONNEES 3 : LA COMPRESSION DE DONNEES Représentation de l information Algorithmique Langages et programmation Architectures matérielles CONNAISSANCES ABORDEES Numérisation : Coder sous forme d'un code standard

Plus en détail

PhotoFiltre Fonctions de base

PhotoFiltre Fonctions de base PhotoFiltre Fonctions de base PhotoFiltre est un programme gratuit de retouche d images. Dans sa version gratuite, tous les outils de base sont présents, donnant à ce logiciel des possibilités plus que

Plus en détail

Bac Professionnel Systèmes Electroniques Numériques

Bac Professionnel Systèmes Electroniques Numériques DR - Création d un site WEB TP Le HTML Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de taper simplement le texte qu'il y aura dans son site, il faut aussi

Plus en détail

Installation du logiciel

Installation du logiciel Hot Potatoes Hot Potatoes est un logiciel gratuit proposé par Half-Baked Software et l Université de Victoria au Canada. Il se compose de six modules permettant chacun de mettre au point différents types

Plus en détail

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos. KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html

Plus en détail

Vade-mecum des «raccourcis typographique» dans SPIP

Vade-mecum des «raccourcis typographique» dans SPIP Vade-mecum des «raccourcis typographique» dans SPIP Fonctionnalités Méthodes Commentaires Intertitre {{{le titre}}} Le texte entre triples accolades est affiché comme un titre. Changement de Cliquer deux

Plus en détail

Chapitre 3 : Multimédia

Chapitre 3 : Multimédia Chapitre 3 : Multimédia Le multimédia est l ensemble de techniques et de produits qui permettent l utilisation simultanée et interactive de plusieurs modes de représentation de l'information (texte, son,

Plus en détail

L'image numérique - synthèse. par Cyril Vauclare (2010)

L'image numérique - synthèse. par Cyril Vauclare (2010) L'image numérique - synthèse par Cyril Vauclare (2010) Sommaire 1. Les pixels... 3 2. Les couleurs... 3 3. Définition d'une image... 4 4. Résolution d'une image... 5 5. Formats d'images numériques... 6

Plus en détail

INTRODUCTION AUX OUTILS DE MICROGRAFX VERSION 6 (WINDOWS DRAW ET PHOTOMAGIC)

INTRODUCTION AUX OUTILS DE MICROGRAFX VERSION 6 (WINDOWS DRAW ET PHOTOMAGIC) INSTITUT NATIONAL AGRONOMIQUE PARIS-GRIGNON INA P-G INTRODUCTION AUX OUTILS DE MICROGRAFX VERSION 6 (WINDOWS DRAW ET PHOTOMAGIC) Objectifs Initiation rapide au dessin vectoriel et à la retouche d'image

Plus en détail

Insertion d'images dans Dreamweaver

Insertion d'images dans Dreamweaver Insertion d'images dans Dreamweaver Ecole-Club Migros Alain Court 3 formats d images utilisables Gif (Graphics p Interchange Format) ) a été créé par CompuServe pour afficher plus rapidement les images

Plus en détail

Optimiser les images pour l affichage sur votre site

Optimiser les images pour l affichage sur votre site Optimiser les images pour l affichage sur votre site Table des matières Introduction : Pourquoi compresser une image?...1 I/ Les différents types de compression d images...1 I.I / Le format GIF...2 I.2

Plus en détail

Portail des communes Guide Référent ville

Portail des communes Guide Référent ville Portail des communes Guide Référent ville Services aux communes Introduction Vous êtes Référent pour votre commune et venez de recevoir vos identifiants de connexion à l ENT école. Ce document va vous

Plus en détail

Créer un site internet (ou des pages)

Créer un site internet (ou des pages) Ce qu il faut savoir avant de commencer Driss SABRI Une page Web est un outil de communication pour lequel on a des contraintes spécifiques 1. avant d en créer il faut se poser les questions habituelles

Plus en détail

Présentation. Référenciel : textes officiels

Présentation. Référenciel : textes officiels Présentation BO n 42 du 23 novembre 2000 BO n 13 du 29 mars 2001 Compétences requises pour le niveau 2 Référenciel : textes officiels Feuille de position niveau 2 (collège) - Culture informatique. - Organiser

Plus en détail

ALGORITHMIQUE PROGRAMMATION INTERNET - NIVEAU 1

ALGORITHMIQUE PROGRAMMATION INTERNET - NIVEAU 1 ALGORITHMIQUE PROGRAMMATION INTERNET - NIVEAU 1 Code NFA053, 6 ECTS Chapitre 02 HTML / LIENS ET INSERTIONS D OBJETS Le plus grand soin a été apporté à la réalisation de ce support pédagogique afin de

Plus en détail

INFO-F-101 Programmation Projet 4 Page Ranking(1/4): Création de la matrice du compte des liens

INFO-F-101 Programmation Projet 4 Page Ranking(1/4): Création de la matrice du compte des liens INFO-F-101 Programmation Projet 4 Page Ranking(1/4): Création de la matrice du compte des liens Année académique 2009 2010 1 Introduction Ce projet est le premier d une série de quatre projets qui ont

Plus en détail

Activation et personnalisation de votre site mobile

Activation et personnalisation de votre site mobile Activation et personnalisation de votre site mobile Page 1 / 1 Table des matières 1. Activation de la version mobile 3 2. Personnalisation de la version mobile : premiers pas 2.1. Apparence générale et

Plus en détail

Programme de Formation

Programme de Formation Windows / PC - initiation Etre à l aise avec Windows, savoir se situer, organiser son environnement et classer ses documents Tout utilisateur désireux d être rapidement autonome dans l utilisation de l

Plus en détail

PhotoFiltre 7 : formats des images

PhotoFiltre 7 : formats des images PhotoFiltre 7 : formats des images L'enregistrement consiste à sauver votre image dans un fichier en utilisant un format de stockage compressé ou non. PhotoFiltre est capable d'enregistrer une image dans

Plus en détail

Ajouter une image dans un article

Ajouter une image dans un article Ajouter une image dans un article Supposons que vous vouliez mettre une image dans un article déjà créé précédemment mais pas encore validé à la publication. Deux possibilités s offrent à vous : Intégrer

Plus en détail

Un mini-site internet en une après-midi

Un mini-site internet en une après-midi Prérequis Posséder un ordinateur équipé d un logiciel pour écrire des fichiers texte simples, (SimpleText, BlocNotes, etc...), d un logiciel de Navigation Internet (InternetExplorer, Netscape, Mozilla,

Plus en détail

Introduction à HTML et CSS

Introduction à HTML et CSS ENS de Cachan Introduction à HTML et CSS Françoise Tort Chargement d'une page Web h"p://site.chemin./page.html navigateur requête.html.css.jpg.mp3 serveur web fichiers Le navigateur web traduit les pages,

Plus en détail

ENSEIGNER Transmettre et Stocker l Information en TS. Un exemple d information numérique: L image numérique

ENSEIGNER Transmettre et Stocker l Information en TS. Un exemple d information numérique: L image numérique Un exemple d information numérique: L image numérique 1. Les deux types d images numériques Les images bitmap (ou matricielles) Les images vectorielles Les images bitmap (littéralement «plan de bits» c

Plus en détail

Le nom d un fichier se décompose en 2 parties Son nom proprement dit. C est le nom que vous lui avez donné comme : - Techniques photos -Photos de

Le nom d un fichier se décompose en 2 parties Son nom proprement dit. C est le nom que vous lui avez donné comme : - Techniques photos -Photos de LES FICHIERS IMAGE Le nom d un fichier se décompose en 2 parties Son nom proprement dit. C est le nom que vous lui avez donné comme : - Techniques photos -Photos de Russie Etc -Son extension, située après

Plus en détail

Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014

Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014 Identification du contenu des évaluations Septembre 2014 Tous droits réservés : Université de Montréal Direction des ressources humaines Table des matières Excel Base version 2010... 1 Excel intermédiaire

Plus en détail

Tutoriel sur les bases de HTML et de PHP

Tutoriel sur les bases de HTML et de PHP Tutoriel sur les bases de HTML et de PHP Cours : Inf7214 Développement de logiciel Date : Hiver 2009 Ce tutoriel vous donne un aperçu du développement d application WEB avec les langages HTML et PHP. Vous

Plus en détail

1 CREER UNE PREMIERE PAGE WEB

1 CREER UNE PREMIERE PAGE WEB CLARIS HOME PAGE 2.0 1 CREER UNE PREMIERE PAGE WEB 1.1 DEMARRER CLARIS HOME PAGE Options du document Figure 1 CLARIS HOME PAGE affiche une page vide appelée «Sans titre.htm» Pour changer la couleur de

Plus en détail

le langage HTML Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1

le langage HTML Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1 le langage HTML Maxime Morge Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1 Plan Pourquoi est-il nécessaire de connaître le langage HTML? Comment stucturer le contenu d une page? Données

Plus en détail

2) Combien de tableaux apparents ont été tracés dans le site et de combien de cellules?

2) Combien de tableaux apparents ont été tracés dans le site et de combien de cellules? Travail dirigé : éléments de correction Item B53 du C2I Lycée M. Ponty II- Travail d analyse technique d un site Afin de vous proposez une présentation cohérente, votre entreprise à mis en ligne une illustration

Plus en détail

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12 Pages et sites Web Table des matières 1 Microsoft Expression Web S'orienter vers l'accessibilité...12 Espace de travail Installer le logiciel...13 Lancer/quitter Microsoft Expression Web 2...13 Découvrir

Plus en détail

FICHIER d' IMAGE & Compression/Compactage

FICHIER d' IMAGE & Compression/Compactage Partie 1 - Section 2 FICHIER d' IMAGE & Compression/Compactage Guy Kivits - p. 1 Fichier - Contexte Pour conserver une information, ou la transmettre, dans un système informatique il faut " l' emballer

Plus en détail

Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles

Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles Mission TICE - académie de Versailles 7 nov. 2008 Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles Anne-Cécile Franc Mission TICE académie de Versailles

Plus en détail

JPEG, PNG, PDF, CMJN, HTML, Préparez-vous à communiquer!

JPEG, PNG, PDF, CMJN, HTML, Préparez-vous à communiquer! JPEG, PNG, PDF, CMJN, HTML, Préparez-vous à communiquer! 1 / Contexte L ordinateur La loi du nombre La numérisation = codage d une information en chiffres binaire : 0 1 («bit») 8 bits = 1 octet 1ko = 1024

Plus en détail

TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web

TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web Réseau informatique TIC TC - IUT Montpellier Internet et le Web Ensemble d'ordinateurs reliés entre eux et échangeant des informations sous forme de données numériques But : Rendre disponible l information

Plus en détail

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. 1 Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. Voici un mode opératoire qui vous guidera dans l utilisation de

Plus en détail

CRÉATION D UN SITE INTERNET. Document de travail =================================== SOMMAIRE

CRÉATION D UN SITE INTERNET. Document de travail =================================== SOMMAIRE CONCEPTION RÉALISATION HÉBERGEMENT CRÉATION D UN SITE INTERNET Document de travail Aide à l établissement du cahier des charges. Ce document aborde les thèmes principaux de la mise en place d un site Internet

Plus en détail

II. Présentation de l'image

II. Présentation de l'image II. Présentation de l'image - Taille des images - La résolution des images - Notions d'image - Les modes colorimétriques - Les formats de travail LA TAILLE D UNE IMAGE Elle peut s exprimer soit en mm/cm

Plus en détail

UJF Licence Sciences INF 112. TP7 : découverte de HTML

UJF Licence Sciences INF 112. TP7 : découverte de HTML UFR IMA Informatique & Mathématiques Appliquées UNIVERSITE JOSEPH FOURIER Sciences, Technologie, Médecine Grenoble 1 : découverte de HTML Les fichiers cookie.html, exemple.html, exemple2.html, MerDeGlace.jpg,

Plus en détail

Méthodologie et exercices d'internet et du multimédia

Méthodologie et exercices d'internet et du multimédia Méthodologie et exercices d'internet et du multimédia acohen@ulb.ac.be 1 Introduction Statut du cours Projet Organisation du cours Environnement du travail Mode d'évaluation 2 Statut du cours Année(s)

Plus en détail

Définitions. CSS Cascading Style Sheets Feuilles de style en cascade. FTP File Transfer Protocol Protocole de transfert de fichiers

Définitions. CSS Cascading Style Sheets Feuilles de style en cascade. FTP File Transfer Protocol Protocole de transfert de fichiers Introduction Ma première page Web (2/2) Ce document est l'étape 2 d'un didacticiel qui a pour but de donner un aperçu de la création d'une page Web. Une ou deux pages seront créées et présenteront leur

Plus en détail

Silfid : Agence de création de site internet, formations et Conseils Retour sommaire

Silfid : Agence de création de site internet, formations et Conseils Retour sommaire Sommaire ILFID vous accueille dans sa salle de formation équipée d ordinateurs en réseau et connectés internet, d'un vidéo- Sprojecteur et tableau blanc. Nos solutions sont éligibles aux critères de financement

Plus en détail

Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée.

Tapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée. Créer un site Internet à l aide du logiciel NVU Le logiciel NVU, permet l édition Wysiwyg (What You See, Is What You Get, ce que vous voyez, est ce que vous obtenez ) d un site internet. Vous rédigez le

Plus en détail

Initiation informatique - ALLAEB SENIORS - La Bonneville sur Iton.

Initiation informatique - ALLAEB SENIORS - La Bonneville sur Iton. Initiation informatique - ALLAEB SENIORS - La Bonneville sur Iton. Public Titre du module N Contenu du module Objectif (s) Durée Découverte matériel 001 Mise sous tension de l'ordinateur. Utilisation du

Plus en détail

UTILISATION CMS LINKEO

UTILISATION CMS LINKEO UTILISATION CMS LINKEO Table des matières 1 Synopsis... 3 2 Connexion à l'interface d'administration...4 3 Edition d'une page...5 3.1 Edition d'une page...5 3.2 Ajout d'une image...5 3.2.1 Transfert d'une

Plus en détail

Web-Interactive Mai 2010. Interactive 2.0. Manuel d utilisation

Web-Interactive Mai 2010. Interactive 2.0. Manuel d utilisation Interactive 2.0 Manuel d utilisation 1 Contenu Chapitre 1 : L Arborescence... 3 Créer un menu.... 3 Ordonner les menus... 6 Destruction d un menu.... 6 Chapitre 2 : Les pages... 7 Titre de votre page....

Plus en détail

LES IMAGES NUMÉRIQUES

LES IMAGES NUMÉRIQUES LES IMAGES NUMÉRIQUES On désigne sous le terme d'image numérique toute image (dessin, icône, photographie ) acquise, créée, traitée ou stockée sous forme binaire (ensemble de 0 et de 1). On distingue deux

Plus en détail

Internet. Principes généraux Création de site web Langage HTML

Internet. Principes généraux Création de site web Langage HTML Internet Principes généraux Création de site web Langage HTML Internet Principes généraux L a n o t i o n d e r é s e a u Réseau : ensemble d interconnections permettant une communication Ex : réseau téléphonique,

Plus en détail

Module Article. Plate-forme de gestion de contenu. PubliShare utilise la librairie javascript (AJAX - Web 2.0)

Module Article. Plate-forme de gestion de contenu. PubliShare utilise la librairie javascript (AJAX - Web 2.0) G U I D E D U T I L I S AT I O N Publishare Plate-forme de gestion de contenu Module Article PubliShare utilise la librairie javascript (AJAX - Web.0) Sommaire Généralités Schéma de navigation Identification

Plus en détail

ATELIERS MULTIMEDIAS. Photos 2. Redimensionner ses photos. Médiathèques www.mediatheque-coral.fr

ATELIERS MULTIMEDIAS. Photos 2. Redimensionner ses photos. Médiathèques www.mediatheque-coral.fr ATELIERS MULTIMEDIAS Médiathèques LE DÔME Médiathèque 135 Place de l Europe BP 173 73204 ALBERTVILLE Cedex Tél. 04 79 10 44 70 Fax. 04 79 10 44 79 dome-mediatheque-albertville @coral.fr Photos 2 Redimensionner

Plus en détail

Création WEB avec DreamweaverMX

Création WEB avec DreamweaverMX Creation Web avec DreamweaverMX MX Initiation Sommaire.preparation.mise en forme.liens hypertextes.images.liens sur images.images avec zones sensibles.images survolees.liens de type courriel.apercu dans

Plus en détail

Structure du format BMP, sa lecture, sa construction et son écriture

Structure du format BMP, sa lecture, sa construction et son écriture Structure du format BMP, sa lecture, sa construction et son écriture Claude Parisel Mars 2003 Table des matières : 1. Le choix du format 2. Commentaires sur les autres formats 3. Format BMP pour noir&blanc,

Plus en détail

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE Atelier «pour débuter» La Gestion des photos avec Windows 7 1 Généralités sur le jargon de l image numérique Les différents formats d image : o BMP : il s'agit

Plus en détail

Mode d emploi SPIP 2.0 pour rédacteur

Mode d emploi SPIP 2.0 pour rédacteur Mode d emploi SPIP 2.0 pour rédacteur L objectif de ce document est d apprendre à utiliser le logiciel SPIP en tant que rédacteur. Ce cours ne requiert aucune connaissance informatique préalable à part

Plus en détail

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations

Plus en détail