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

14 Les liens : ancre (suite) Une ancre à l'intérieur d'un fichier local <a href="../repertoire/monfichier.html#ancre"> ou distant : <a href=" ading4"> monfichier.html <a href="../repertoire/ monfichier.html#ancre"> <a name="#ancre"> <a> 27 Les liens : adresse électronique <A 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=" <AREA SHAPE="POLY" COORDS="543,223,544,244,562,245,583,232,579,268,592,286,516,302,514, 296,523,277,512,275,507,266,519,254,492,239,497,222,539,221" HREF=" </MAP> 67 Coordonnées du rectangle (222,307) (342,376) <AREA SHAPE="RECT" COORDS="222,307,342,376" HREF=" 68 UJF : L1- L2 / Année 34

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

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

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

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

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

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

Plus en détail

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<Créer un site Web. avec/> 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

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

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

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

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

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

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

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

É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

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

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

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

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

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

Adobe Photoshop. Bonnes pratiques pour une utilisation professionelle CHAPITRE 7

Adobe Photoshop. Bonnes pratiques pour une utilisation professionelle CHAPITRE 7 M2 Caweb 2014-2015 Enseignant : Boris Epp Adobe Photoshop Bonnes pratiques pour une utilisation professionelle CHAPITRE 7 Sommaire 1. Les scripts a. Qu est-ce qu un script? b. La fenêtre script c. Créer

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

Spétechs Mobile. D e r n i è r e m i s e à j o u r : a o û t 2014

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

Plus en détail

GUIDE D UTILISATION DU BACKOFFICE

GUIDE D UTILISATION DU BACKOFFICE GUIDE D UTILISATION DU BACKOFFICE 1. Modifier les pages du site : - Aller dans l onglet «PAGE HTML», puis «Liste des pages HTML» - Pour visualiser votre page, cliquer sur le nom écrit en vert, dans la

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

Diffuser un contenu sur Internet : notions de base... 13

Diffuser un contenu sur Internet : notions de base... 13 Diffuser un contenu sur Internet : notions de base... 13 1.1 Coup d œil sur l organisation de cet ouvrage.............. 15 Préambule : qu est-ce qu une page web?................ 16 À propos du HTML...........................

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

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

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

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

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

WORDPRESS : réaliser un site web

WORDPRESS : réaliser un site web WORDPRESS : réaliser un site web Wordpress est un système de gestion de contenu (ou CMS) libre. Il permet de créer des sites relativement complexes (blog, forum, site vitrine, site dynamique), sans qu

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

Parcours FOAD Formation EXCEL 2010

Parcours FOAD Formation EXCEL 2010 Parcours FOAD Formation EXCEL 2010 PLATE-FORME E-LEARNING DELTA ANNEE SCOLAIRE 2013/2014 Pôle national de compétences FOAD Formation Ouverte et A Distance https://foad.orion.education.fr Livret de formation

Plus en détail

FrontPage Support d apprentissage septembre 2000

FrontPage Support d apprentissage septembre 2000 FrontPage Support d apprentissage septembre 2000 Table des matières Notions de base... 1 Le langage HTML... 1 Les éditeurs HTML... 1 Le navigateur... 1 Le transfert de fichiers... 1 L enregistrement des

Plus en détail

Formation Webmaster : Création de site Web Initiation + Approfondissement

Formation Webmaster : Création de site Web Initiation + Approfondissement Contactez notre équipe commerciale au 09.72.37.73.73 Aix en Provence - Bordeaux - Bruxelles - Geneve - Lille - Luxembourg - Lyon - Montpellier - Nantes - Nice - Paris - Rennes - Strasbourg - Toulouse Formation

Plus en détail

"CREEZ VOTRE SITE WEB ET VOTRE BLOG AVEC WORDPRESS"

CREEZ VOTRE SITE WEB ET VOTRE BLOG AVEC WORDPRESS "CREEZ VOTRE SITE WEB ET VOTRE BLOG AVEC WORDPRESS" BONNES FEUILLES OFFERTES PAR MA-EDITIONS : "OPTIMISER" - pages à 1 OPTIMISER Partir d'un modèle existant très bien... Mais c'est encore mieux quand on

Plus en détail

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

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

Plus en détail

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le

Plus en détail

CONSTRUCTION DE SITES WEB

CONSTRUCTION DE SITES WEB CONSTRUCTION DE SITES WEB 3ème partie Sommaire Introduction...3 Les Images sur le Web...3 Les Images Numériques...6 Les Formats des Fichiers...7 Les particularités du format GIF...8 Les Images Animées...9

Plus en détail

Certificat Informatique et internet Niveau 1 TD D1. Domaine 1 : Travailler dans un environnement numérique évolutif. 1. Généralités : Filière

Certificat Informatique et internet Niveau 1 TD D1. Domaine 1 : Travailler dans un environnement numérique évolutif. 1. Généralités : Filière Certificat Informatique et internet Niveau 1 Filière TD D1 Domaine 1 : Travailler dans un environnement numérique évolutif Nom N étudiant 1. Généralités : 1.1. Un ordinateur utilise des logiciels (aussi

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

Adobe Illustrator Logiciel de dessin vectoriel et de Cartographie Assistée par Ordinateur

Adobe Illustrator Logiciel de dessin vectoriel et de Cartographie Assistée par Ordinateur Adobe Illustrator Logiciel de dessin vectoriel et de Cartographie Assistée par Ordinateur I- Ouverture d une nouvelle feuille de travail Fichier / Nouveau (ou ctrl + N) Indiquer dans la fenêtre qui s ouvre

Plus en détail

Présentation du Framework BootstrapTwitter

Présentation du Framework BootstrapTwitter COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...

Plus en détail

Gestion collaborative de documents

Gestion collaborative de documents Gestion collaborative de documents ANT box, le logiciel qui simplifie votre GED Les organisations (entreprises, collectivités, associations...) génèrent chaque jour des millions de documents, e-mails,

Plus en détail

1 Comment faire un document Open Office /writer de façon intelligente?

1 Comment faire un document Open Office /writer de façon intelligente? 1 Comment faire un document Open Office /writer de façon intelligente? 1.1 Comment fonctionne un traitement de texte?: les balises. Un fichier de traitement de texte (WRITER ou WORD) comporte en plus du

Plus en détail

Formation Tutorée A Distance (FTAD) en BUREAUTIQUE

Formation Tutorée A Distance (FTAD) en BUREAUTIQUE Durée : 20 heures (Sur 2 mois maximum) Positionnement et parcours individuel de formation. Plate-forme de formation incluant cours, exercices et évaluation en ligne, disponibles 24 H/24, 7 j/7. 4 cours

Plus en détail

Fête de la science Initiation au traitement des images

Fête de la science Initiation au traitement des images Fête de la science Initiation au traitement des images Détection automatique de plaques minéralogiques à partir d'un téléphone portable et atelier propose de créer un programme informatique pour un téléphone

Plus en détail

creer votre site internet en html/css

creer votre site internet en html/css 3 jours (21 heures) 1110 HT (Inter) 2670 HT (Intra) Toute personne (particulier ou professionnel) souhaitant créer son site Internet Créez son site Internet Assurez sa mise en ligne Gérer les mises à jour

Plus en détail

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

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

Plus en détail

Proposition année universitaire-informatique (2014-2015)

Proposition année universitaire-informatique (2014-2015) Proposition année universitaire-informatique (2014-2015) L organisation est basée sur 5 niveaux d acquisition. (2 groupes par niveaux tous les 15jours) Niveau débutant. Niveau approfondissement. Niveau

Plus en détail

PR OC E D U RE S D E B A S E

PR OC E D U RE S D E B A S E Photofiltre Préparé par Philipe Lampron, auxiliaire du cours FPE 7650 en 2004-2005. *** Pour optimiser une image : enregistrer sous et augmenter la compression PR OC E D U RE S D E B A S E PhotoFiltre

Plus en détail

Utilisation de l éditeur.

Utilisation de l éditeur. Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7

Plus en détail

Web OOo Créer un site web avec OOo

Web OOo Créer un site web avec OOo Web OOo Créer un site web avec OOo Mars 2004 Réalisé avec : OOo 1.1.0 Plate-forme / Os : Toutes Fr.OpenOffice.org Table des Matières 1 Comprendre l organisation d un site web... 3 1.1 Créer sa maquette...3

Plus en détail

Les images numériques. 1. Le dessin vectoriel

Les images numériques. 1. Le dessin vectoriel Les images numériques 1 Le dessin vectoriel 2 Les images bitmap 3 Image en noir et blanc 4 Les codages de la couleurs 5 La synthèse additive (RVB) 6 La synthèse soustractive 7 Les couleurs indexées 8 Comment

Plus en détail

Création WEB avec DreamweaverMX

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

Plus en détail

SOMMAIRE 1 INTRODUCTION 3 2 CONTACTER VOTRE SUPPORT 3 3 ESPACE DE GESTION DES CARTES 4 4 CONFIGURER UNE CARTE 5

SOMMAIRE 1 INTRODUCTION 3 2 CONTACTER VOTRE SUPPORT 3 3 ESPACE DE GESTION DES CARTES 4 4 CONFIGURER UNE CARTE 5 SOMMAIRE 1 INTRODUCTION 3 2 CONTACTER VOTRE SUPPORT 3 3 ESPACE DE GESTION DES CARTES 4 4 CONFIGURER UNE CARTE 5 4.1 Ajouter une carte 5 4.1.1 Détails : nom, taille, marqueur 5 4.1.2 Ajout d un marqueur

Plus en détail

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

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

Plus en détail

COMMENT PUBLIER SUR ARIANE?

COMMENT PUBLIER SUR ARIANE? COMMENT PUBLIER SUR ARIANE? Rédacteur : Dr Michel Arnould 1. SOMMAIRE 1.Sommaire...1 2.Connexion...1 3.Gestion des pages du wiki...1 Ajouter une nouvelle page...1 Supprimer, renommer, protéger une page...1

Plus en détail

Outils permettant la diffusion de l information. Un point sur le droit numérique

Outils permettant la diffusion de l information. Un point sur le droit numérique Technologies de l Information et de la Communication Introduction aux NTE/TICE Présentation des UNR UNT Outils permettant la diffusion de l information Conceptualisation d un module d apprentissage numérique

Plus en détail