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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Plan. Avant de créer son site. Quelques logiciels complémentaires

Plan. Avant de créer son site. Quelques logiciels complémentaires Internet, créer son site personnel. Yves Roger Cornil Microcam06, Fréjus Vous Accueille 7 mars 2005 Plan Pourquoi publier sur Internet? Quelques prérequis et quelques logiciels Combien ça coûte? Rappels

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

Ecriture de pages Web Le langage HTML Karam Mustapha Karam.mustapha@lsis.org

Ecriture de pages Web Le langage HTML Karam Mustapha Karam.mustapha@lsis.org Ecriture de pages Web Le langage HTML Karam Mustapha Karam.mustapha@lsis.org Comment fonctionne le Web? C'est un mécanisme client-serveur. Le client demande un fichier, le serveur lui donne tel qu'il est

Plus en détail

Initiation à linfographie

Initiation à linfographie Ce support de cours de l Agence universitaire de la Francophonie est distribué sous licence GNU FDL. Permission vous est donnée de copier, distribuer et/ou modifier ce document selon les termes de la Licence

Plus en détail

3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML

3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Page:1/20 CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Objectifs de l activité pratique : Notions sur le HTML, le WEB et le W3C Créer une page web statique au format HTML : - les marqueurs ou balises

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

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

Les outils de création de sites web

Les outils de création de sites web Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site

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

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

Formats d images. 1 Introduction

Formats d images. 1 Introduction Formats d images 1 Introduction Lorsque nous utilisons un ordinateur ou un smartphone l écran constitue un élément principal de l interaction avec la machine. Les images sont donc au cœur de l utilisation

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

Manuel d'utilisation de l'administration du site Japo.ch - 1

Manuel d'utilisation de l'administration du site Japo.ch - 1 Manuel d'utilisation de l'administration du site Japo.ch 1. Identification L'administration est protégée par une identification. Veuillez saisir ici votre nom d'utilisateur et votre mot de passe. Manuel

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

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

Chapitre 22 Optimisation pour diffusion à l'écran, pour le web

Chapitre 22 Optimisation pour diffusion à l'écran, pour le web 1 1 9 9 7 7 Optimisation pour diffusion à l'écran, pour le web Diffusion pour le web........................ 31 Les paramètres avant l exportation................. 31 Optimisation pour le web......................

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

Normes techniques 2011

Normes techniques 2011 Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique

Plus en détail

Ateliers Bureautique et Internet

Ateliers Bureautique et Internet Ateliers Bureautique et Internet Utiliser les fonctionnalités de l outil bureautique Débutants et personnes souhaitant approfondir leurs connaissances > Acquérir les fonctions de base et avancées des principaux

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

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

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

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des

Plus en détail

Guide de réalisation d une campagne e-mail marketing

Guide de réalisation d une campagne e-mail marketing Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La

Plus en détail

Usage des photos pour Internet et pour la presse

Usage des photos pour Internet et pour la presse Usage des photos pour Internet et pour la presse Que ce soit sur Internet ou dans la presse, l'usage de photographies a la même fonction qui est d illustrer le propos. Pour bien jouer son rôle d information

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

Parcours guidé : créer des pages simples au format html avec Nvu 28/1/10

Parcours guidé : créer des pages simples au format html avec Nvu 28/1/10 Table des matières 1. AVANT-PROPOS... 4 1.1. PRESENTATION DE NVU... 4 1.2. CARACTERISTIQUES PRINCIPALES DE NVU... 4 1.3. OBJECTIF DE CE DOCUMENT... 4 1.4. PRE-REQUIS NECESSAIRES... 4 1.5. MODE D'EMPLOI

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

GESTION DU LOGO. 1. Comment gérer votre logo? 2. 2.1. Format de l image 7 2.2. Dimensions de l image 8 2.3. Taille de l image 9

GESTION DU LOGO. 1. Comment gérer votre logo? 2. 2.1. Format de l image 7 2.2. Dimensions de l image 8 2.3. Taille de l image 9 GESTION DU LOGO 1. Comment gérer votre logo? 2 1.1. Insérer un logo 3 1.1.1. Insérer un logo dans le bandeau 3 1.1.2. Insérer un logo dans les éditions 4 1.2. Supprimer un logo 6 1.2.1. Supprimer un logo

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

MANUEL D UTILISATION DE VOTRE SITE INTERNET

MANUEL D UTILISATION DE VOTRE SITE INTERNET MANUEL D UTILISATION DE VOTRE SITE INTERNET SOMMAIRE PRESENTATION 3 IDENTIFICATION.. 4 LE MENU (paramètres, contenu, divers).... 5 MENU PARAMETRES (mes coordonnées, mes photos, mes menus, mon bandeau).

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

Comment créer des GIF animés en dix étapes?

Comment créer des GIF animés en dix étapes? Comment créer des GIF animés en dix étapes? Tutoriel GIF Movie Gear Septembre 2002 Rédigé par :Visicom Média inc. 1 TABLE DES MATIERES PRÉSENTATION DE GIF MOVIE GEAR... 2 BARRE DE MENUS... 2 BARRE D'OUTILS

Plus en détail

GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL

GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL 1. Avant de commencer Il existe plusieurs éditeurs de pages Web qui vous permettent de construire un site Web. Nous vous conseillons toutefois de

Plus en détail

Développement Web pour mobiles

Développement Web pour mobiles Développement Web pour mobiles Les bases du HTML par Eric Sarrion Date de publication : 11/08/2010 Dernière mise à jour : Le langage HTML est le langage de base permettant de construire des pages web,

Plus en détail

IMAGE NUMERIQUE : NUMERISATION-TRAITEMENT- RETOUCHES

IMAGE NUMERIQUE : NUMERISATION-TRAITEMENT- RETOUCHES MINISTERE DE LA COMMUNAUTE FRANCAISE ADMINISTRATION GENERALE DE L ENSEIGNEMENT ET DE LA RECHERCHE SCIENTIFIQUE ENSEIGNEMENT DE PROMOTION SOCIALE DE REGIME 1 DOSSIER PEDAGOGIQUE UNITE DE FORMATION IMAGE

Plus en détail

Dans nos locaux au 98 Route de Sauve 30900 NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur

Dans nos locaux au 98 Route de Sauve 30900 NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur FORMATION FORFAIT WEB DEVELOPPEUR Qualification ISQ OPQF Formacode 46 125 Certification de titre professionnel Web Designer + modules optionnels : Développement PHP/MySQL avancé, Web App, CMS e-boutique

Plus en détail

Webmaster / Webdesigner / Wordpress

Webmaster / Webdesigner / Wordpress Webmaster / Webdesigner / Wordpress Pré-requis : Projet professionnel. Bonne maîtrise de l'ordinateur. Bases en infographie et / ou traitement de texte fortement recommandées. Objectifs : Concevoir un

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

Suzanne Harvey

<Créer un site Web. avec/> Suzanne Harvey aire l o c s texte n o c le Dans Suzanne Harvey Conseillère pédagogique en informatique Service local du RÉCIT Commission scolaire de Saint-Hyacinthe Québec, Canada suzanne.harvey@prologue.qc.ca

Plus en détail

Dans l Unité 3, nous avons parlé de la

Dans l Unité 3, nous avons parlé de la 11.0 Pour commencer Dans l Unité 3, nous avons parlé de la manière dont les designs sont créés dans des programmes graphiques tels que Photoshop sont plus semblables à des aperçus de ce qui va venir, n

Plus en détail

Les images et les animations sur le web. Guérineau Chloé BTS2 Année 2001/2012

Les images et les animations sur le web. Guérineau Chloé BTS2 Année 2001/2012 Les images et les animations sur le web Guérineau Chloé BTS2 Année 2001/2012 Sommaire I) Les images sur le web 1) Qu est ce qu une image? Les images numériques, destinées à être visualisées sur les écrans

Plus en détail

Chapitre 2 Créer son site et ses pages avec Google Site

Chapitre 2 Créer son site et ses pages avec Google Site Réaliser un site internet à l aide de Google Site 10 Chapitre 2 Créer son site et ses pages avec Google Site 1. Créer un Google site 1. Rendez-vous sur www.google.be et connectez-vous à votre compte Gmail

Plus en détail

Cours SPIP 2.0 pour rédacteur. 1. Présentation de SPIP. 2. Architecture d un site SPIP

Cours SPIP 2.0 pour rédacteur. 1. Présentation de SPIP. 2. Architecture d un site SPIP Cours 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 savoir

Plus en détail

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,

Plus en détail

Création de site Web : Volet II concevoir et mettre un site en ligne

Création de site Web : Volet II concevoir et mettre un site en ligne Création de site Web : Volet II concevoir et mettre un site en ligne Ce document est offert par le CDEACF Table des matières Table des matières TABLE DES MATIÈRES...I REMERCIEMENTS...II INTRODUCTION...III

Plus en détail

Cours de numérisation sur Epson Perfection

Cours de numérisation sur Epson Perfection Cours de numérisation sur Epson Perfection 1- Vérifiez la propreté de la vitre, placez l original sur celle-ci. À savoir, on peut numériser des transparents avec ce scanner ; il a un capteur CCD dans le

Plus en détail

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles

Plus en détail

Utilisation du Brother Control Center SmartUI basé sur Windows pour PaperPort 8.0 et Windows XP

Utilisation du Brother Control Center SmartUI basé sur Windows pour PaperPort 8.0 et Windows XP Utilisation du Brother Control Center SmartUI basé sur Windows pour PaperPort 8.0 et Windows XP Brother Control Center SmartUI Le Brother Control Center est un utilitaire permettant d avoir accès très

Plus en détail

webmestre : conception de sites et administration de serveurs web 42 crédits Certificat professionnel CP09

webmestre : conception de sites et administration de serveurs web 42 crédits Certificat professionnel CP09 AISL - Architecture et Intégration des Systèmes Logiciels - 2011-2012 webmestre : conception de sites et administration de serveurs web 42 crédits Certificat professionnel CP09 Administrer un serveur et

Plus en détail

Initiation à la bureautique

Initiation à la bureautique Initiation à la bureautique i 1 17-18-19-20 mars 4 jours Ce stage doit permettre à des débutants de se familiariser avec l outil bureautique, d acquérir des connaissances de base autour de la micro-informatique.

Plus en détail

CURSUS PAO (CU010) Infographiste et maquettiste PAO

CURSUS PAO (CU010) Infographiste et maquettiste PAO Durée totale : 15 jours soit 105 heures Tarif : 4 000 Euros HT CALENDRIER DES SESSIONS 2010 : - du 6 au 24 décembre CALENDRIER DES SESSIONS 2011 : - Du 3 au 21 janvier - Du 28 février au 18 mars - Du 2

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

Support Gestionnaire pour les nouvelles versions CPM (outil Drupal) Télésanté Aquitaine

Support Gestionnaire pour les nouvelles versions CPM (outil Drupal) Télésanté Aquitaine Support Gestionnaire pour les nouvelles versions CPM (outil Drupal) Objet du document Ce document a pour but d'apporter des éléments de support au gestionnaire des nouvelles communautés de pratiques médicales.

Plus en détail

Initiation à Flash 5. Tiré de «Apprendre Flash 5 Visuel. Édition First Interactive, 2001, 308 p.»

Initiation à Flash 5. Tiré de «Apprendre Flash 5 Visuel. Édition First Interactive, 2001, 308 p.» Initiation à Flash 5 Tiré de «Apprendre Flash 5 Visuel. Édition First Interactive, 2001, 308 p.» Introduction à FLASH 2 Ouvrir, créer, enregistrer ou fermer un fichier FLASH («FLA») Exemple : 3 La fenêtre

Plus en détail

Dreamweaver 2. Formation création d un site WEB. Formateur : M. BRECHET Stéphane

Dreamweaver 2. Formation création d un site WEB. Formateur : M. BRECHET Stéphane Dreamweaver 2 Formation création d un site WEB Formateur : M. BRECHET Stéphane Sommaire Informations générales sur la création de site --------------------------------------- 2 Réserver gratuitement un

Plus en détail

II. Conversions. I. Initialisation. III. Méthode point. TD Python Traitement d images MP*

II. Conversions. I. Initialisation. III. Méthode point. TD Python Traitement d images MP* Le but de ce TD est d utiliser les procédures et fonctions Python pour traiter des fichiers images. II. Conversions I. Initialisation Importer le module numpy sous l appellation np. On utilise le module

Plus en détail

Toute personne souhaitant maîtriser les techniques liées à la conception de produits multimédia et à la création de sites Web.

Toute personne souhaitant maîtriser les techniques liées à la conception de produits multimédia et à la création de sites Web. Web Designer Durée 90 jours (630 h) Public Toute personne souhaitant maîtriser les techniques liées à la conception de produits multimédia et à la création de sites Web. Objectifs La formation Web designer

Plus en détail

Voici quelques-unes des questions auxquelles répond cette présentation.

Voici quelques-unes des questions auxquelles répond cette présentation. Qu est-ce que l édition d images? Quels sont les formats d image possibles? Quels sont les logiciels permettant de la pratiquer? Voici quelques-unes des questions auxquelles répond cette présentation.

Plus en détail

Le transfert par ftp avec FileZilla

Le transfert par ftp avec FileZilla Le transfert par ftp avec FileZilla Par : Emmanuel Henke Le programme de lecture : Télécharger Filezilla et l installer... 1 De quoi est composée l interface de l application?... 4 Se connecter à son serveur

Plus en détail

Personnaliser un thème WordPress pour un Blog de l'ara. Méthode pas à pas.

Personnaliser un thème WordPress pour un Blog de l'ara. Méthode pas à pas. Personnaliser un thème WordPress pour un Blog de l'ara. Méthode pas à pas. Table des matières I. Les outils nécessaires... 3 II. Utilisation de l'outil Artisteer.... 3 1. Pourquoi utiliser Artisteer?...

Plus en détail

OneDrive, le cloud de Microsoft

OneDrive, le cloud de Microsoft OneDrive est le cloud mis à disposition par Microsoft. Pour en profiter, il suffit de disposer d'un compte Microsoft (Tutoriel), Microsoft offre 10 Go de stockage (Dont 3 Go pour sauvegarder des photos).

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

Bureautique Initiation Excel-Powerpoint

Bureautique Initiation Excel-Powerpoint Module de Formation Personnalisée : Bureautique Initiation Excel-Powerpoint Durée : jours ouvrables Prix : Formation personnalisée en vue d obtenir les notions de base indispensables pour : Excel Office

Plus en détail

Formation HTML / CSS. ar dionoea

Formation HTML / CSS. ar dionoea Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations

Plus en détail

Supports. Images numériques. notions de base [1] http://lilapuce.net

Supports. Images numériques. notions de base [1] http://lilapuce.net Supports Images numériques notions de base [1] http://lilapuce.net Deux grands types d images numériques : bitmap et vectoriel La création d'une image informatique n'est possible qu'en utilisant l'un des

Plus en détail

Introduction. Nous vous souhaitons une bonne utilisation de NéoCMS. Votre nom de domaine : Le serveur de développement :

Introduction. Nous vous souhaitons une bonne utilisation de NéoCMS. Votre nom de domaine : Le serveur de développement : Introduction Bienvenue dans le guide d'utilisateurs de NéoCMS. Ce document a pour vocation de vous aider dans l'utilisation de votre CMS et vous est communiqué dans le cadre de nos formations. Vous y trouverez

Plus en détail

CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML

CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML A L'AIDE DU LOGICIEL LIBRE OFFICE Libre Office 3.3.3 et Open Office.org 3.3.0 sont deux suites bureautiques complètes, équivalentes (seule la charte

Plus en détail

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau) CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.

Plus en détail

Spétechs Mobile. D e r n i è r e m i s e à j o u r : s e p t e m b r e 2 0 1 4

Spétechs Mobile. D e r n i è r e m i s e à j o u r : s e p t e m b r e 2 0 1 4 Spétechs Mobile D e r n i è r e m i s e à j o u r : s e p t e m b r e 2 0 1 4 Généralités Envoi des créas à Amandine Canu, responsable traffic mobile : acanu@hi-media.com Mettre en copie de votre e-mail

Plus en détail

SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5

SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5 SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5 5 ADMINISTRER SON SITE WEBGAZELLE CMS 2.0 5 5.1 Configuration minimale

Plus en détail

Tutoriel : Feuille de style externe

Tutoriel : Feuille de style externe Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?

Plus en détail

DOKEOS Author Manuel du formateur

DOKEOS Author Manuel du formateur Retrouvez-nous en ligne sur notre site dokeos.com/fr DOKEOS Author Manuel du formateur Trois raisons de choisir DOKEOS Author Facile à prendre en main, DOKEOS Author est l outil de la suite Dokeos qui

Plus en détail