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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. HTML. Cours Web. HyperText Markup Language (HTML) 1. HTML 1. HTML. HyperText Markup Language (HTML) Lionel Seinturier

1. HTML. Cours Web. HyperText Markup Language (HTML) 1. HTML 1. HTML. HyperText Markup Language (HTML) Lionel Seinturier Cours Web HyperText Markup Language (HTML) Lionel Seinturier Université Pierre & Marie Curie Lionel.Seinturier@lip6.fr HyperText Markup Language (HTML) HTML : langage de balisage issu de SGML Document

Plus en détail

Les images. ! Ce qu il faut savoir. Les natures d images

Les images. ! Ce qu il faut savoir. Les natures d images Chapitre 2 Les images! Ce qu il faut savoir GIMP permet de retoucher et de composer des images. Celles-ci peuvent se caractériser principalement par leur nature (photo, dessin ou peinture), les couleurs

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

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

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

Introduction à HTML. A. HTML et le web

Introduction à HTML. A. HTML et le web Introduction à HTML Isabelle Debled Renesson Marie-Dominique Devignes LORIA 1 2 1 Fonctionnement en mode client/serveur 1. Construction d une requête ex web : http://www.loria.fr/news CLIENT 5. Mise en

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

HTML 5. Page de base Meta Outils pour Firefox. Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées

HTML 5. Page de base Meta Outils pour Firefox. Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées HTML 5 Page de base Meta Outils pour Firefox Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées Les 6 niveaux de titre Indices et exposants Les liens L arborescence

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

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

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

Introduction au Format d Images Fixes

Introduction au Format d Images Fixes Master Info deuxième année Introduction au Format d Images Fixes Partie 1 Alain Trémeau Laboratoire d Informatique Graphique et d Ingénierie de la Vision 1 2 Introduction - Un format d'image comprend en

Plus en détail

Initiation à html et à la création d'un site web

Initiation à html et à la création d'un site web Initiation à html et à la création d'un site web Lors de la première séance de TP, vous avez mis en place la structure d'accueil pour votre site personnel et vous avez appris comment accéder librement

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

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

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL Prise en main de NVU et Notepad++ (conception d application web avec PHP et MySql) Propriétés Intitulé long Formation concernée Matière Présentation Description Conception de pages web dynamiques à l aide

Plus en détail

Leçon 1 : PRESENTATION ET PRISE EN MAIN DE PHOTOSHOP

Leçon 1 : PRESENTATION ET PRISE EN MAIN DE PHOTOSHOP I. CONTENU DU COURS THÉORIQUE ET PRATIQUE CHAPITREIV : CREATION DE BOUTONS Leçon 1 : PRESENTATION ET PRISE EN MAIN DE PHOTOSHOP OBJECTIF PEDAGOGIQUE OPERATIONNEL : A la fin de cette leçon, l élève doit

Plus en détail

PHPWEBSITE -Tutoriel image

PHPWEBSITE -Tutoriel image PHPWEBSITE -Tutoriel image La capture des images depuis le web pour mon site. L optimisation d images pour le web, 1 Préparer des images pour le Web A. Généralités 1. Les trois formats d'images sur le

Plus en détail

Exporter (2) Ouvrir/Enregistrer Importer/Exporter (3)

Exporter (2) Ouvrir/Enregistrer Importer/Exporter (3) Formats de fichier Une des choses la plus difficile est de passer d'un logiciel à l'autre. Ils sont parfois plus ou moins compatibles. Certains logiciels «préfèrent» certains formats de fichier. Le tableau

Plus en détail

Contenu détaillé du stage :

Contenu détaillé du stage : Contenu détaillé du stage : Création Internet et Accessibilité Méthodologie de suivi et de gestion pour assurer un rôle d intégrateur Web (Présentation hebdomadaire) (720 heures -10 Stagiaires 30h par

Plus en détail

WEBDESIGNER PROGRAMME WEBDESIGNER ARTISTE ET TECHNICIEN LUMIÈRE SUR LA FORMATION

WEBDESIGNER PROGRAMME WEBDESIGNER ARTISTE ET TECHNICIEN LUMIÈRE SUR LA FORMATION ARTISTE ET TECHNICIEN LUMIÈRE SUR LA FORMATION DURÉE 70 jours de formation Module 1 - Infographiste PAO : 4 semaines de cours intensifs + 2 semaines d atelier pédagogique Module 2 Concepteur de site internet

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

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles Index A affichage, CSS 180 album photos, créer 83 arrière-plan, CSS 152 images 152 Attributs de balises HTML action 90 align 71 attributs communs 131 background 39 border 39, 70 cellpadding 70 cellspacing

Plus en détail

Chapitre 1 HTML et le Web... 15. Chapitre 2 Les navigateurs du marché... 31. Chapitre 3 Les bases du langage HTML... 49

Chapitre 1 HTML et le Web... 15. Chapitre 2 Les navigateurs du marché... 31. Chapitre 3 Les bases du langage HTML... 49 Chapitre 1 HTML et le Web... 15 1.1 Pourquoi apprendre le langage HTML?... 17 1.2 Trois concepts étroitement liés : WWW, HTML et HTTP... 18 1.3 Principes généraux et versions de HTML... 20 Utilisation

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

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

Initiation à html et à la création d'un site web

Initiation à html et à la création d'un site web Initiation à html et à la création d'un site web Introduction : Concevoir un site web consiste à définir : - l'emplacement où ce site sera hébergé - à qui ce site s'adresse - le design des pages qui le

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

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 à HTML. Code: html-intro. Patrick Jermann - Daniel K. Schneider - Barbara Class - Vivian Synteta Version: 1.0 (modifé le 15/5/01 par VS)

Introduction à HTML. Code: html-intro. Patrick Jermann - Daniel K. Schneider - Barbara Class - Vivian Synteta Version: 1.0 (modifé le 15/5/01 par VS) Introduction à HTML html-intro Introduction à HTML Code: html-intro Originaux url: http://tecfa.unige.ch/guides/tie/html/html-intro/html-intro.html url: http://tecfa.unige.ch/guides/tie/pdf/files/html-intro.pdf

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

Support de cours sur l'image numérique. Table des matières

Support de cours sur l'image numérique. Table des matières Support de cours sur l'image numérique Table des matières 1-Deux types d'images...1 1.1-Bitmap - Image matricielle...1 1.2-Vectorielle...2 2- La compression...3 3- Les images et nombre de couleur...3 4-

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

Images numériques. Notions et contenus. évaluée

Images numériques. Notions et contenus. évaluée Images numériques Thème Notions et contenus Compétence travaillée ou évaluée Résumé Mots clefs Académie Référence Auteur Transmettre et stocker de l information Caractéristiques d une image numérique :

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

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

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

Créez votre premier site web De la conception à la réalisation

Créez votre premier site web De la conception à la réalisation Chapitre 1 : Introduction A. Introduction 17 Chapitre 2 : Les langages A. L objectif 21 B. L HTML 21 1. L état des lieux 21 2. Les éléments HTML 21 3. Les attributs 22 4. Les caractères 23 5. Les espaces

Plus en détail

Création de maquette web

Création de maquette web Création de maquette web avec Fireworks Il faut travailler en 72dpi et en pixels, en RVB Fireworks étant un logiciel dédié à la création de maquettes pour le web il ne propose que les pixels pour le texte

Plus en détail

Codage texte et. Quelques notions de base... Codage de l image. Codage du texte. Caractères alpha-numériques codés en ASCII :

Codage texte et. Quelques notions de base... Codage de l image. Codage du texte. Caractères alpha-numériques codés en ASCII : Codage texte et images Quelques notions de base... Dans un ordinateur les informations sont regroupées dans des fichiers contenant des suites d éléments binaires, binary digits or bits (0 et 1) constituant

Plus en détail

TP SIN Traitement d image

TP SIN Traitement d image TP SIN Traitement d image Pré requis (l élève doit savoir): - Utiliser un ordinateur Objectif terminale : L élève doit être capable de reconnaître un format d image et d expliquer les différents types

Plus en détail

COURS D'INITIATION A LA CREATION DE PAGES INTERNET EN HTML

COURS D'INITIATION A LA CREATION DE PAGES INTERNET EN HTML COURS D'INITIATION A LA CREATION DE PAGES INTERNET EN HTML Denis Bourdon dbourdon@dbourdon.com Étudiant 2ème année Département Télécommunications ENSIMAG/ENSERG 1 PLAN Introduction Qu'est-ce que HTML?

Plus en détail

LANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation

LANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation ING 01 LANGAGUE JAVA Durée : 21 heures 1090 HT / jour Dates : à définir en 2012 Concevoir et développer des programmes en langage Java Comprendre le fonctionnement de la machine virtuelle S approprier

Plus en détail

Chapitre III : La multimédia. La multimédia

Chapitre III : La multimédia. La multimédia La multimédia INTRODUCTION La multimédia est une technique qui permet d'utiliser l'information sous plusieurs formes : image, texte, son et vidéo. C'est pour cela l'ordinateur doit être équipé de périphériques

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

SUPPORT DE COURS ADOBE PHOTOSHOP ELEMENTS

SUPPORT DE COURS ADOBE PHOTOSHOP ELEMENTS Présentation de Photoshop Eléments Photoshop Elements est un logiciel de retouche d'images. Il est organisé de manière à ce que les outils les plus importants soient à portée de main lorsque vous en avez

Plus en détail

FORMATION / CREATION DE SITE WEB / 4 JOURNEES Sessions Octobre 2006

FORMATION / CREATION DE SITE WEB / 4 JOURNEES Sessions Octobre 2006 I. INTRODUCTION 1. Présentation du formateur et des élèves 2. Historique internet : d'où ça vient a. Historique général : 3 étapes majeures 1. l'histoire de l'informatique débute en 1942 avec la première

Plus en détail

Formats de documents numériques 1. Format d images

Formats de documents numériques 1. Format d images Formats de documents numériques 1 Paramètres d une image Ecran Format d images Format : extention jpg, gif, png, tif Poids : 20 Ko, 100 Ko, 1 Mo Qualité : l image est-elle dégradée? L image est-elle zoomable?

Plus en détail

Construire des sites pour l'iphone avec Freeway

Construire des sites pour l'iphone avec Freeway Construire des sites pour l'iphone avec Freeway La création de pages pour l'iphone (ou l'ipod Touch) n'est pas très différente de la création de pages pour un ordinateur. Apple a tout fait pour que cela

Plus en détail

Introduction à Dreamweaver

Introduction à Dreamweaver Introduction à Dreamweaver Dreamweaver est un logiciel d édition de page web. Un site est un ensemble de pages [souvent en format html, ce qui signifie HyperText Markup Language, reliées entre elles par

Plus en détail

Les images informatiques

Les images informatiques Les images informatiques Le bitmap L image est composée de points (pixels), avec une information de position et de couleur Sur 1 bit en noir et blanc Sur 8 bits soit 256 positions Sur 24 bits soit 8 bits

Plus en détail

Créer et faire vivre un site web pédagogique

Créer et faire vivre un site web pédagogique Créer et faire vivre un site web pédagogique 1. Créer un site web... 2 2. Utilisation d un CMS... 2 3. SPIP : Système de Publication Internet Partagé... 2 4. Le site de la Cité Scolaire Jean Moulin...

Plus en détail

Examen «Outils en Informatique» Vendredi 3 juin 2011

Examen «Outils en Informatique» Vendredi 3 juin 2011 Examen «Outils en Informatique» Vendredi 3 juin 2011 Durée de l épreuve: 1h30 Aucun document autorisé Le barème n est pas définitif, il est donné à titre indicatif Question 1 : QCM Dans les questions suivantes

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

TD HTML AVEC CORRECTION

TD HTML AVEC CORRECTION TD HTML AVEC CORRECTION On utilisera Notepad++ comme éditeur sur Windows Vous créez un répertoire www sous vos répertoires personnels et vous mettrez vos pages dedans. Créez vos fichiers HTML et n oubliez

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

Modules Multimédia PAO (Adobe)

Modules Multimédia PAO (Adobe) Modules Multimédia PAO (Adobe) Pré-requis : Bonne maîtrise de la manipulation d'un PC (environnement Windows ou Mac) et de la navigation Internet. Disposition pour le graphisme recommandée. Mémoire visuelle,

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

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

Rosetta. Sonde de l'agence Spatiale Européenne (ESA) dont le but est d'explorer la comète Churyumov Gerasimenko.

Rosetta. Sonde de l'agence Spatiale Européenne (ESA) dont le but est d'explorer la comète Churyumov Gerasimenko. AIM Les Images Tout travail sur une image numérique doit être précédé d une réflexion sur l utilisation future de cette image et donc sur le média qui sera chargé de la diffuser. Rosetta Sonde de l'agence

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

Formations OCCE Conception et réalisation d'un site web - manipulations de base - utilisation de Claris Home page 3 et ftp expert.

Formations OCCE Conception et réalisation d'un site web - manipulations de base - utilisation de Claris Home page 3 et ftp expert. Formations OCCE Conception et réalisation d'un site web - manipulations de base - utilisation de Claris Home page 3 et ftp expert. Internet - un site web Le web est une des applications principales du

Plus en détail

Insérer des images dans un document

Insérer des images dans un document Insérer des images dans un document Nous avons régulièrement besoin d insérer des tableaux, des graphiques ou des schémas) dans des documents, qu il s agisse d un dossier documentaire ou d un devoir (fichier

Plus en détail

3.5.1 Introduction: image bitmap versus image vectorielle

3.5.1 Introduction: image bitmap versus image vectorielle 3.5.1 Introduction 3.5.2 Principe 3.5.3 Avantages et Inconvénients 3.5.4 Applications 3.5.5 Logiciels sur Internet PLAN 3.5.1 Introduction: image bitmap versus image vectorielle Lorsque l'on affiche une

Plus en détail

AVANT DE COMMENCER INTRODUCTION

AVANT DE COMMENCER INTRODUCTION AVANT DE COMMENCER Le contenu sur le World Wide Web est maintenant divisé en plusieurs pages. La page d'introduction au World Wide Web contient une introduction et une description des éléments que l'on

Plus en détail

Illustrator. version CS2 exercices

Illustrator. version CS2 exercices Illustrator version CS2 exercices L interface Introduction au vectoriel et au bitmap Les outils Les palettes La gestion de l affichage Les aides au dessin La sauvegarde d un travail Les scripts et les

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

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

IMAGE NUMÉRIQUE IMAGE NUMÉRIQUE

IMAGE NUMÉRIQUE IMAGE NUMÉRIQUE 1. Signal analogique et signal numérique 2. Image matricielle - notion de pixel 2.1 La définition 2.2 La résolution 3. Image numérique 3.1 Image en niveaux de gris 3.2 Image en couleurs 4. Formats d image

Plus en détail

Différences entre image Bitmap et image vectorielle.

Différences entre image Bitmap et image vectorielle. Différences entre image Bitmap et image vectorielle. Qu est-ce qu une image numérique? D un point de vue informatique, l image est avant tout un fichier numérique qui va reconstituer un rendu visuel au

Plus en détail