1 En route vers HTML 5 et CSS3

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

Download "1 En route vers HTML 5 et CSS3"

Transcription

1 IUT de Bobigny Licence CIWM-I TD n 3 Conception de Pages Web orientée Client Table des matières 1 En route vers HTML 5 et CSS La structure d un document HTML Les nouvelles balises de structure en HTML Les background multiples en CSS Transformer un document XHTML en HTML Les tableaux en (X)HTML Construire un tableau Les regroupements de contenu Fusionner des lignes et des colonnes d un tableau Exercice Les sélecteurs en CSS CSS Niveau CSS Niveau Le sélecteur universel Les sélecteurs d enfant Le sélecteur d éléments frères adjacents Les sélecteurs d attribut Les pseudo-classes Les pseudo-éléments CSS Niveau Le sélecteur général d éléments frères Les sélecteurs d attribut Les pseudo-classes Exercices En route vers HTML 5 et CSS3 Comme vous avez pu le constater dans l exercice 3 du document précédent, la réalisation d un design complexe n est pas forcément évidente. Que ce soit pour le positionnement des différents éléments ou pour la mise en place d images de fond, il est nécessaire d avoir recours à l élément div à de nombreuses reprises. Il arrive même que sa présence dans le document soit inutile pour la structuration du contenu et qu elle soit uniquement motivée par des besoins de mise en forme. 1

2 Nous allons voir maintenant que le langage HTML 5 et certaines propriétés de CSS3 permettent de remédier en partie à ce constat. 1.1 La structure d un document HTML 5 La déclaration du DOCTYPE est extrêmement simplifiée : <!DOCTYPE html> Vous remarquerez que cette déclaration ne fait référence à aucun numéro de version. Autrement dit, vous ne précisez pas que vous faites du HTML 5 mais que votre document intègre les dernières évolutions du langage. La déclaration de l encodage dans l en-tête du document à l aide de l élément meta est également largement simplifiée. Par exemple, pour déclarer que votre fichier source est encodé en UTF8, vous écrirez : <meta charset="utf-8"> Il n est plus obligatoire de donner la valeur "text/css" à l attribut type de l élément link pour faire référence à une feuille de style externe. On écrit : <link rel="stylesheet" href="monfichier.css"> Voici à quoi ressemble le squelette d un document HTML 5 : <!DOCTYPE html> <html lang="fr"> <head> <title>mon titre</title> <meta charset="utf-8"> <link rel="stylesheet" href="monfichier.css"> </head> <body> </body> </html> 1.2 Les nouvelles balises de structure en HTML 5 L utilisation presque abusive de l élément div a entraîné l introduction de nouvelles balises pour structurer son document, chacune d entre elles possédant une sémantique bien particulière et parfois très subtile. L élément section représente un bloc dont le contenu aborde la même thématique. Il représente un bloc autonome de contenu. Un document peut contenir une ou plusieurs sections, chacune pouvant contenir des titres, des paragraphes etc. L élément article désigne un bloc de contenu potentiellement autonome dans le sens où ce contenu peut être repris ou réutilisé seul. Il convient donc parfaitement pour une brève d un flux RSS, un billet de blog etc. 2

3 L élément header, comme son nom l indique, permet de regrouper les éléments d entête d un document ou d une partie d un document. Une section ou un article peuvent chacun contenir un élément header. C est un bloc de contenu spécifique, alors que section reste un bloc de contenu générique. Comme header, l élément footer peut apparaître à divers endroits d un document. Son utilisation n est pas exclusivement réservée à contenir les informations d un pied de page, il peut apparaître dans une section ou un article. Son rôle est de regrouper les informations concernant l auteur, les mentions légales, les liens vers des contenus apparentés, etc. C est un bloc de contenu spécifique. L élément aside doit être utilisé pour du contenu indirectement apparenté. Il peut, par exemple, permettre de faire des encadrés, des citations, un bloc d archives relatives au contenu précédent etc. L élément nav a pour rôle de regrouper des informations de navigations, donc des liens, qu ils soient internes ou externes à la page. Il convient d utiliser nav pour des informations de navigations jugées comme majeures ou suffisamment pertinentes. 1.3 Les background multiples en CSS3 Parmi les nombreuses améliorations et nouveautés apportées par CSS3 figure la possibilité de définir plusieurs images de fond à un même élément de la page. Cela évite d avoir recours à la superposition de plusieurs éléments (en particulier des div) pour simuler la présence simultanée de plusieurs images de fond sur un même élément. Pour cela, on utilise les mêmes propriétés qu en CSS2 mais il est maintenant possible de définir plusieurs valeurs, séparées par une virgule, chacune de ces valeurs s appliquant à une des images de fond. L ordre de déclaration de ces valeurs est donc très important. Par exemple, si l on veut que la boîte d un élément p dispose d une image de fond dans le coin supérieur gauche et d une autre dans le coin inférieur droit, nous définirons les règles CSS suivantes : p { background-image : url("image1.png"), url("image2.png"); background-position : left top, right bottom; background-repeat : no-repeat; Vous noterez que, lorsqu une propriété est commune (ici no-repeat), il est inutile de la définir pour les deux images. 1.4 Transformer un document XHTML en HTML 5 Exercice 1: Vous allez maintenant transformer la page réalisée dans l exercice 3 du document 2 en utilisant HTML 5 et CSS3. 1. Modifier la structure du document de façon à ne conserver qu un seul élément div (id="page"), les autres étant remplacés par de nouvelles balises HTML 5 ou supprimés car devenus inutiles. 3

4 2. Modifier le CSS en conséquence 3. Le résultat final doit passer le test de validation HTML 5 du W3C. 2 Les tableaux en (X)HTML 2.1 Construire un tableau La création d un tableau commence par l élément table. Il a pour but de prévenir l ouverture d un tableau. Si l on ne va pas plus loin, rien ne sera affiché par le navigateur. L élément tr permet de créer une ligne de tableau. Pour ajouter des lignes, il suffit de répéter <tr>...</tr> autant de fois que nécessaire. L élément td régit la distribution des cellules à l intérieur d une ligne. On peut répéter cet élément autant de fois que nécessaire à l intérieur de l élément tr. Voici un exemple de tableau à 3 lignes contenant chacune 3 cellules : <table> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td></tr> </table> Si vous testez ce code, vous verrez que votre navigateur n affiche sans doute pas les bordures. CSS va s en charger à l aide des propriétés destinées à gérer les bordures. Les possibilités de personnalisation du tableau sont immenses (largeur, hauteur des cellules, style des caractères, couleur ou image de fond etc...) Il existe également des propriétés CSS destinées uniquement aux tableaux car l on peut choisir de faire fusionner les bordures des cellules ou non. On utilise alors la propriété border-collapse. Les valeurs possibles sont separate ou collapse. Dans le cas où les bordures sont séparées, on peut définir leur espacement à l aide de la propriété border-spacing qui prend une longueur comme valeur. Retournons maintenant du côté du XHTML car on peut aller encore plus loin dans la structuration de notre tableau : Un en-tête de tableau (élément th) affiche un titre en tête d une ligne ou d une colonne. Il s utilise de la même manière que l élément td. Exemple : <table> <tr><th>première ligne</th><td>1</td><td>2</td><td>3</td></tr> <tr><th>deuxième ligne</th><td>4</td><td>5</td><td>6</td></tr> <tr><th>troisième ligne</th><td>7</td><td>8</td><td>9</td></tr> </table> Le tableau peut-être pourvu d un titre global au moyen de l élément caption : <table> <caption>un exemple de tableau</caption> <tr><th>première ligne</th><td>1</td><td>2</td><td>3</td></tr> <tr><th>deuxième ligne</th><td>4</td><td>5</td><td>6</td></tr> 4

5 <tr><th>troisième ligne</th><td>7</td><td>8</td><td>9</td></tr> </table> 2.2 Les regroupements de contenu Il est possible de faire des regroupements de lignes à l aide des éléments thead, tfoot et tbody. Cela permet de créer, lorque cela est nécessaire, un en-tête de tableau, un pied de tableau et un (ou plusieurs) corps de tableau. En fait, tout tableau devrait au moins comporter un tbody : <table> <caption>un exemple de tableau</caption> <thead> <tr><th>première ligne</th><td>1</td><td>2</td><td>3</td></tr> </thead> <tfoot> <tr><th>deuxième ligne</th><td>4</td><td>5</td><td>6</td></tr> </tfoot> <tbody> <tr><th>troisième ligne</th><td>7</td><td>8</td><td>9</td></tr> </tbody> </table> Je vous conseille fortement de regarder dans votre navigateur l effet que le code précédent va avoir sur l ordre des lignes. 2.3 Fusionner des lignes et des colonnes d un tableau Nous pouvons faire fusionner plusieurs lignes en une seule au moyen de l attribut rowspan de l élément td ou th : <table> <caption>un exemple de tableau</caption> <tr><th>première ligne</th><td rowspan="2">1 et 4</td><td>2</td><td>3</td></tr> <tr><th>deuxième ligne</th><td>5</td><td>6</td></tr> <tr><th>troisième ligne</th><td>7</td><td>8</td><td>9</td></tr> </table> De la même façon, nous pouvons réunir plusieurs colonnes en une seule au moyen de l attribut colspan de l élément td ou th : <table> <caption>un exemple de tableau</caption> <tr><th>première ligne</th><td colspan="2">1 et 2</td><td>3</td></tr> <tr><th>deuxième ligne</th><td>4</td><td>5</td><td>6</td></tr> <tr><th>troisième ligne</th><td>7</td><td>8</td><td>9</td></tr> </table> 5

6 2.4 Exercice Exercice 2: Récupérer l archive nommée seance3-exercice2.documents.zip. Elle contient les documents nécessaires à la réalisation de l exercice. Dans Firefox, vous devez obtenir un résultat identique à celui de l image exercice2.tableaux.png. La feuille de style exercice2.css est donnée et vous ne devez pas la modifier. Vous devez écrire le fichier exercice2.html conforme au résultat attendu et valide en XHTML Strict ou HTML5. 3 Les sélecteurs en CSS Parmi tous les modules qui composent la spécification CSS Level 3, l un des plus avancé est celui décrivant l utilisation des sélecteurs en CSS. À l heure actuelle, le document du W3C est au stade de Proposed Recommandation. Tous les navigateurs récents sont entièrement compatibles. Il est possible de tester la compatibilité d un navigateur avec la spécification du W3C à l URL suivante : Les différents niveaux de CSS se construisent comme des couches s ajoutant aux précédentes. Ainsi, CSS Niveau 3 est entièrement compatible avec les autres niveaux. Il ne fait qu ajouter des possibilités supplémentaires. Il existe néanmoins une petite exception. CSS Level 3 fait une distinction nouvelle entre les pseudo-classes préfixées par le caractère : (exemple : :hover ) et les pseudoéléments préfixés par les caractères :: (exemple : ::first-line ). Les pseudo-classes ciblent des éléments du document à partir d un contexte (clic de souris, survol de la souris etc.). Les éléments ciblés ne peuvent pas être identifiés avant certaines actions de l utilisateur sur le document. Les pseudo-éléments concernent des éléments parfaitement identifiables dans l arborescence du document. Ils ne dépendent pas d un contexte particulier. Néanmoins, dans un soucis de compatibilité, les pseudo-éléments déjà présents dans les niveaux précédents de CSS peuvent s écrire avec l ancienne syntaxe qui ne faisait pas cette distinction. (exemple : :first-line ). 3.1 CSS Niveau 1 La spécification CSS Level 1 fournissait assez peu de possibilités en matière de sélecteurs : Le sélecteur de type qui permet de sélectionner tous les éléments d un type donné dans un document (X)HTML à partir de leur nom de balise. Exemple : h1 {... Le sélecteur de classe qui permet de sélectionner des éléments à partir de la valeur de l attribut class. Dans le sélecteur, le nom de la classe doit être préfixé par le caractère. 6

7 Lesélecteur d IDquipermet desélectionner deséléments àpartirdelavaleurde l attribut id. Cette valeur ne doit être utilisée qu une seule fois dans le document (X)HTML. Dans le sélecteur, le nom de l ID doit être préfixé par le caractère # La combinaison d éléments descendants (descendant combinator). On utilise le caractère d espacement entre deux ou plusieurs sélecteurs simples. Par exemple, la combinaison A B sélectionne tout élément B descendant de l élément A dans l arborescence du document (X)HTML. Les pseudo-classes de lien :link, :active, :visited. Elles s adressent aux éléments a du document. Les pseudo-éléments ::first-line et ::first-letter qui permettent de sélectionner la première ligne ou le premier caractère du contenu d un élément du document. 3.2 CSS Niveau 2 La spécification CSS Level 2 ajoute beaucoup de possibilités en matière de sélecteurs Le sélecteur universel Signalons l apparition du sélecteur universel. Il est représenté par le caractère*. Utilisé seul, il permet de sélectionner tous les éléments du document Les sélecteurs d enfant Il est possible de sélectionner un élément E qui est un enfant d un élément F. La syntaxe est la suivante : E > F Dans l exemple suivant, on sélectionne tous les paragraphes qui sont des enfants de l élément body et on met le texte en gris. body > p { color : #666666; Les éléments p qui se trouveraient, par exemple, à l intérieur d un élément div ne sont pas concernés puisqu ils ne sont pas des enfants directs de l élément body Le sélecteur d éléments frères adjacents Les sélecteurs d enfants adjacents suivent une syntaxe de cette forme : E1 + E2 où E2 est le sujet du sélecteur. Celui-ci est vérifié quand E1 et E2 ont le même parent dans l arbre du document et quand E1 y précède immédiatement E2. L exemple suivant produit une réduction de l espace vertical entre un élément h1 et l élément h2 qui le suit juste après : h1 + h2 { margin-top : -5mm; 7

8 3.2.4 Les sélecteurs d attribut Les sélecteurs d attribut permettent de sélectionner des éléments à partir de leur attribut, de la valeur de cet attribut, ou seulement à partir d une partie de cette valeur. Il existe quatre syntaxes. Par exemple : Le sélecteur p[title] sélectionne tous les éléments possédant un attribut title quelle que soit sa valeur. De la même manière, le sélecteur p[title] sélectionne tous les éléments p possédant un attribut title. Le sélecteur p[title="information"] sélectionne tous les éléments p possédant un attribut title dont la valeur est "information". Le sélecteur p[title ="information"] sélectionne tous les éléments p possédant un attribut title dont la valeur contient au moins le mot "information" séparé des autres par des espaces. Le sélecteur p[title ="info"] sélectionne tous les éléments p possédant un attribut title dont la valeur est une chaîne commençant par les caractères info suivi du caractère -. Notons qu il est possible de cumuler plusieurs sélecteurs d attribut qui se réfèrent à plusieurs attributs d un même élément, ou même, plusieurs fois au même attribut. Par exemple : img[class="vignette"][alt="portrait"]{ border : 1px solid green; Cette règle aura pour effet d ajouter une bordure verte autour des éléments d image à condition que leur attribut class ait pour valeur "vignette" et que leur attribut alt ait pour valeur "portrait" Les pseudo-classes La pseudo-classe :hover est appliquée lorsque l utilisateur survole la boîte produite par un élément au moyen de la souris sans l activer. L exemple suivant permet de changer l apparence du curseur de la souris au survol des liens (éléments a) : a:hover { cursor: crosshair; La pseudo-classe :focus s applique quand un élément reçoit l attention (celui-ci acceptant les événements du clavier ou d autres formes d entrées de texte). Selon la spécification, seuls les éléments (X)HTML acceptant l attribut tabindex sont concernés, c est-à-dire a, area, button, input, object, select et textarea. L exemple suivant permet aux éléments input de type text et password recevant le focus d avoir une couleur de fond rouge : input[type="text"]:focus, input[type="password"]:focus{ background-color : red; 8

9 Vous pouvez essayer la règle CSS précédente sur la mire de login réalisée dans l exercice 2 de ce document. La pseudo-classe :first-child permet de cibler le premier élément enfant au sein d un élément. Par exemple, li:first-child qualifie le premier élément li d une liste. ul li {border-top : 1px solid green; ul li:first-child {border-top : none; La pseudo-classe :lang() permet de cibler un élément dont la langue correspond à une certaine valeur indiquée entre parenthèses. Son utilisation possède un intérêt limité pour les sites monolingues. Signalons que la pseudo-classe :lang() hérite de la langue du parent ou de l ancêtre. Pour le code suivant : <div lang="fr"> <p> Du contenu... </p> </div> le sélecteur p:lang(fr) cible correctement l élément p contenu dans l élément div Les pseudo-éléments Les pseudo-éléments ::before et ::after permettent de générer du contenu au début ou à la fin de la boîte de contenu de l élément ciblé. Ils s utilisent conjointement à la propriété content qui peut prendre un certain nombre de valeurs dont : Toute chaîne de caractère placée entre guillemets. Une image via la syntaxe url("chemin de l image") La valeur d un attribut en utilisant la syntaxe attr(nom de l attribut). les valeurs open-quote (guillemets de citation ouvrants) et close-quote (guillemets de citation fermants). Exemple d utilisation : a:after { content : "(" attr(href) ")"; On peut compléter la règle précédente en utilisant des propriétés pour styler le contenu généré. Il existe de nombreuses autres valeurs possibles pour la propriété content. Vous pouvez vous référer à la traduction du document du W3C : CSS Niveau 3 9

10 3.3.1 Le sélecteur général d éléments frères Le sélecteur d éléments frères adjacents, dont la syntaxe est E + F, existe depuis le niveau 2 de CSS. Il cible l élément F directement adjacent à l élément frère E. Le sélecteur général d éléments frères élargit ce principe. En utilisant la syntaxe E F, il est maintenant possible de cibler un élément F toujours frère de E dans l arborescence du document mais les 2 éléments nesont plus forcément des frères directs. Ils ne sont plus dans l obligation de se suivre directement, d autres éléments frères peuvent s intercaler entre E et F Les sélecteurs d attribut Afin de faciliter le ciblage de certains éléments d un document, CSS Level 3 offre de nouvelles possibilités concernant les sélecteurs d attribut. [attribut^="toto"] permet de cibler les éléments dont l attribut attribut commence exactement par la chaîne "toto". [attribut$="toto"] permet de cibler les éléments dont l attribut attribut finit exactement par la chaîne "toto". [attribut*="toto"] permet de cibler les éléments dont l attribut attribut contient au moins une fois la sous-chaîne "toto" Les pseudo-classes Les sélecteurs W3C introduisent la notion de pseudo-classes structurelles qui permettent la sélection d éléments sur la base d informations supplémentaires se trouvant dans l arborescence du document mais qui ne peuvent être ciblées par des sélecteurs plus simples. La pseudo-classe :root cible l élément racine du document. Son intérêt est extrêment limité en XHTML puisque cet élément racine est toujours html. Son utilisation devient intéressante dès lors que l on utilise le langage CSS pour styler un document écrit dans un autre dialecte XML. E:nth-child(n) s applique au nème enfant d un élément, s il est de type E. Autrement dit, l élément E doit posséder n-1 frères avant lui dans l arborescence du document. Les valeurs contenues dans les parenthèses peuvent-être : Un entier positif ou négatif, le premier enfant correspondant à la valeur 1. Une expression de la forme an+b où a et b sont des entiers. L entier n prendra toutes les valeurs à partir de zéro. Les valeurs particulières even et odd qui s appliqueront à tous les éléments pairs (even) ou impairs (odd). Notons que even aura le même effet que l expression 2n et odd aura le même effet que 2n+1. li:nth-child(2){... /* le 2ème enfant d une liste s il s agit d un li */ li:nth-child(even){... /* les li pairs */ li:nth-child(2n+3){... /* le 3ème, le 5ème, le 7ème etc. */ li:nth-child(-n+3){... /* les 3 premiers seulement */ E:nth-last-child(n) s applique au nème enfant d un élément, s il est de type E mais en commençant par le dernier. Autrement dit, l élément E doit posséder n-1 frères après lui dans l arborescence du document. Cette pseudo-classe accepte les 10

11 mêmes valeurs dans les parenthèses que :nth-child(). La pseudo-classe E:nth-of-type(n) cible le nème frère dans l arborecence du document du même type que lui. Contrairement à :nth-child(), cette pseudoclasse ne prend pas en compte tous les frères quels que soient leur type mais seulement les frères de type E. Les valeurs dans les parenthèses sont les mêmes que pour :nth-child(). E:nth-last-of-type(n) se comporte comme la pseudo-classe précédente mais la numérotation commence par la fin. L élément E ciblé doit donc posséder n-1 frères du même type après lui dans l arborescence du document. E:last-child cible le dernier frère de l élément E dans l arborecence du document. Cette pseudo-classe est donc équivalente à E:nth-last-child(1). :first-of-type ciblelepremier élément desontypeparmisesfrères.équivalente à E:nth-of-type(1). :last-of-type cible le dernier élément de son type parmi ses frères. Équivalente à E:nth-last-of-type(1). :only-child cible les éléments qui n ont aucun frère dans l arborescence du document. :only-of-type cible tous les éléments qui sont les seuls de leur type parmi leurs frères. E:empty cible un élément de type E qui n a aucun enfant, y compris du contenu textuel. Si votre page contient des ancres internes, c est-à-dire des éléments nommés par des attributs id, et des liens pointant vers ces éléments, alors la pseudo-classe :target désigne l élément ciblé par l ancre en question. Vous trouverez un exemple d utilisation de cette pseudo-classe dans l exercice 4. Les pseudo-classes :enabled, :disabled et :checked permettent de cibler des éléments d un formulaire selon leur contexte. La première pseudo-classe permet de cibler les éléments actifs d un formulaire, la deuxième les éléments inactifs et la dernière les éléments cochés. Pour finir, signalons la présence de la pseudo-classe de négation :not(s) qui cible un élément qui ne correspond pas au sélecteur simple s placé entre parenthèses. Par exemple, pour affecter une couleur de fond à tous les éléments d une liste sauf le premier, nous pouvons écrire : li:not(:first-child){ background-color : #CC9966; Exercices Exercice 3: Dans l archive seance3-exercice3-documents.zip, vous trouverez un document XHTML avec 3 blocs contenant chacun un titre et un paragraphe. Sans toucher à ce 11

12 fichier, vous devez : 1. Fixer la largeur des blocs à 600px, affecter une bordure aux paragraphes, centrer le texte des titres et aligner les blocs les uns sous les autres à une distance de 250px du bord gauche de la page. 2. Placer le menu en position fixe dans l espace libre à gauche de la page. Que se passe-til lorqu on clique sur l un des items de ce menu? Affecter une couleur différente à chaque item du menu et attribuer la même couleur au titre correspondant et à la bordure du paragraphe correspondant. 3. Modifier la feuille CSS de manière à ce que les 3 paragraphes disparaissent du flux du document. 4. Lorsque vous cliquez maintenant sur l un des items du menu, seul le paragraphe correspondant doit s afficher dans votre page. Exercice 4: Vous devez récupérer l archive seance3-exercice4-documents.zip et obtenir le résultat correspondant à la capture d écran fournie (obtenue sous FF3.6) sans modifier le fichier (X)HTML donné. Pour information, l attribut hreflang de l élément a permet de préciser la langue du document pointé par l attribut href. Exercice 5: L archive seance3-exercice5-documents.zip contient le code d un tableau XHTML. Il vous est demandé de réaliser la présentation visible dans le sous-répertoire capture en minimisant le nombre de règles CSS à écrire et en ne modifiant pas le fichier XHTML. Exercice 6: Vous devez récupérer l archive seance3-exercice6-documents.zip et obtenir le résultat correspondant à la capture d écran fournie (obtenue sous FF3.6) toujours sans modifier le fichier (X)HTML donné. De plus : Le menu doit être centré sur la page. Aucune bordure ne doit faire plus de 1px d épaisseur. L ajout ou le retrait d un menu dans le fichier XHTML ne doit pas affecter la mise en forme du menu. L ajout ou le retrait d un sous-menu dans le fichier XHTML ne doit pas affecter la mise en forme générale et la présence de l image de la flèche doit rester conditionnée à l existence d au moins un sous-menu. On doit pouvoir changer l ordre des menus dans le fichier XHTML. La mise en forme doit rester cohérente et continuer à respecter les consignes précédentes. 12

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

HTML, CSS, JS et CGI. Elanore Elessar Dimar

HTML, CSS, JS et CGI. Elanore Elessar Dimar HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML

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

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

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

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

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...

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

Notes pour l utilisation d Expression Web

Notes pour l utilisation d Expression Web EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21 Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface

Plus en détail

Bernard Lecomte. Débuter avec HTML

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

Plus en détail

Media queries : gérer différentes zones de visualisation

Media queries : gérer différentes zones de visualisation 2 Media queries : gérer différentes zones de visualisation Comme nous l avons vu au chapitre précédent, les CSS3 sont constituées de modules. Media queries est simplement l un d eux. Ce module permet d

Plus en détail

TP 5 Les CMS, la forme et le fond Internet et Outils (IO2)

TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) Un site, tel que vous avez appris à en programmer jusqu à maintenant, contenant un ensemble de pages HTML embellies de quelques feuilles de styles,

Plus en détail

INTRODUCTION AU CMS MODX

INTRODUCTION AU CMS MODX INTRODUCTION AU CMS MODX Introduction 1. Créer 2. Organiser 3. Personnaliser UNE PETITE INTRODUCTION QUEST-CE QU UN CMS? CMS est l acronyme de Content Management System. C est outil qui vous permet de

Plus en détail

Optimiser pour les appareils mobiles

Optimiser pour les appareils mobiles chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...

Plus en détail

Manuel utilisateur du CMS Anan6

Manuel utilisateur du CMS Anan6 Manuel utilisateur du CMS Anan6 Sommaire Fonctionnalités générales 05 - Paramétrage du navigateur 06 - Connexion au CMS Anan6 07 - Visualisation de l interface du CMS 08 - Détails de la liste des composants

Plus en détail

RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado

RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado - RAPPORT AUDIT SEO Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado 17 septembre 2013 Table des matières Optimisation structurelle 2 Optimisation des standards, performances et

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

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

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

Travaux dirigés n 10

Travaux dirigés n 10 Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones

Plus en détail

Débuter avec Excel. Excel 2007-2010

Débuter avec Excel. Excel 2007-2010 Débuter avec Excel Excel 2007-2010 Fabienne ROUX Conseils & Formation 10/04/2010 TABLE DES MATIÈRES LE RUBAN 4 LE CLASSEUR 4 RENOMMER LES FEUILLES DU CLASSEUR 4 SUPPRIMER DES FEUILLES D UN CLASSEUR 4 AJOUTER

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

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

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

Support Web Administration et gestion des portails web des facultés - Université A.Mira Béjaia -

Support Web Administration et gestion des portails web des facultés - Université A.Mira Béjaia - UVERSITE A. MIRA - BEJAIA Support Web Administration et gestion des portails web des facultés - Université A.Mira Béjaia - Prise en main de CMS Joomla Exploitation des ressources Recommandations et Règles

Plus en détail

PRISE EN MAIN D UN TABLEUR. Version OPEN OFFICE

PRISE EN MAIN D UN TABLEUR. Version OPEN OFFICE PRISE EN MAIN D UN TABLEUR Version OPEN OFFICE Prise en main d un tableur page 2 1. L utilisation de la souris Pour faire fonctionner un tableur, on utilise le clavier mais aussi la souris. Rappelons,

Plus en détail

GUIDE Excel (version débutante) Version 2013

GUIDE Excel (version débutante) Version 2013 Table des matières GUIDE Excel (version débutante) Version 2013 1. Créer un nouveau document Excel... 3 2. Modifier un document Excel... 3 3. La fenêtre Excel... 4 4. Les rubans... 4 5. Saisir du texte

Plus en détail

Manuel d utilisation du site web de l ONRN

Manuel d utilisation du site web de l ONRN Manuel d utilisation du site web de l ONRN Introduction Le but premier de ce document est d expliquer comment contribuer sur le site ONRN. Le site ONRN est un site dont le contenu est géré par un outil

Plus en détail

JOOMLA 1.5 avancé SUPPORT DE COURS + annexe

JOOMLA 1.5 avancé SUPPORT DE COURS + annexe JOOMLA 1.5 avancé SUPPORT DE COURS + annexe SOMMAIRE 1. LA GESTION DES MODULES... Page 2 2. MODIFICATION DE SON TEMPLATE... Page 6 3. LA CREATION DE DIAPORAMA... Page 9 4. LA CREATION DE SONDAGE... Page

Plus en détail

Prise en main rapide

Prise en main rapide Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un

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

Mon aide mémoire traitement de texte (Microsoft Word)

Mon aide mémoire traitement de texte (Microsoft Word) . Philippe Ratat Mon aide mémoire traitement de texte (Microsoft Word) Département Ressources, Technologies et Communication Décembre 2006. Sommaire PRÉSENTATION DU DOCUMENT 1 Objectif principal 1 Deux

Plus en détail

Intégrateur Web HTML5 CSS3

Intégrateur Web HTML5 CSS3 Intégrateur Web HTML5 CSS3 L objectif de la 3W Academy est de former des petits groupes d élèves à l intégration de sites internet ainsi qu à la création d applications web simples telles qu un blog ou

Plus en détail

Cours pratique Excel. Dans chacune des feuilles, les donnés sont déjà entrées afin de gagner du temps.

Cours pratique Excel. Dans chacune des feuilles, les donnés sont déjà entrées afin de gagner du temps. Cours pratique Excel Présentation du classeur cours.xls C est un classeur qui contient 7 feuilles Liste de personnes Calculs simples Solde Listes Auto Relatif Absolu Formats Paye Cours AFM Dans chacune

Plus en détail

RACCOURCIS CLAVIERS. DEFINITION : Une «combinaison de touches» est un appui simultané sur plusieurs touches.

RACCOURCIS CLAVIERS. DEFINITION : Une «combinaison de touches» est un appui simultané sur plusieurs touches. S Vous n aimez pas la souris Les raccourcis clavier sont là pour vous faciliter la vie! INTRODUCTION : Vous avez du mal à vous habituer à la manipulation de la souris Des solutions existent : les raccourcis

Plus en détail

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com Guide de l utilisateur CMS 1 Navigation dans le CMS... 2 1.1 Menu principal... 2 1.2 Modules tableau... 3 1.3 Modules formulaire... 5 1.4 Navigation dans le site Web en mode édition... 6 2 Utilisation

Plus en détail

Numbers sur ipad. Atelier Formation Numbers sur ipad. [Notes extraitres de l'aide en ligne]

Numbers sur ipad. Atelier Formation Numbers sur ipad. [Notes extraitres de l'aide en ligne] Numbers sur ipad [Notes extraitres de l'aide en ligne] Table des matières Atelier Formation Numbers sur ipad Introduction à Numbers 4 Créer ou ouvrir une feuille de calcul 4 Créer ou ouvrir une feuille

Plus en détail

La Clé informatique. Formation Excel XP Aide-mémoire

La Clé informatique. Formation Excel XP Aide-mémoire La Clé informatique Formation Excel XP Aide-mémoire Septembre 2005 Table des matières Qu est-ce que le logiciel Microsoft Excel?... 3 Classeur... 4 Cellule... 5 Barre d outil dans Excel...6 Fonctions habituelles

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

Partie publique / Partie privée. Site statique site dynamique. Base de données.

Partie publique / Partie privée. Site statique site dynamique. Base de données. Partie publique / Partie privée. Partie publique - Front office / Partie privée - Back office. Utiliser l analogie avec une émission de télévision. Un journal télévisé = 1 journaliste + des reportages.

Plus en détail

Publier dans la Base Documentaire

Publier dans la Base Documentaire Site Web de l association des ingénieurs INSA de Lyon Publier dans la Base Documentaire Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008

Plus en détail

1 CRÉER UN TABLEAU. IADE Outils et Méthodes de gestion de l information

1 CRÉER UN TABLEAU. IADE Outils et Méthodes de gestion de l information TP Numéro 2 CRÉER ET MANIPULER DES TABLEAUX (Mise en forme, insertion, suppression, tri...) 1 CRÉER UN TABLEAU 1.1 Présentation Pour organiser et présenter des données sous forme d un tableau, Word propose

Plus en détail

mon site web via WordPress

mon site web via WordPress mon site web via WordPress Vocabulaire CMS : Content Management System WordPress fait partie de cette famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d applications

Plus en détail

VOCABULAIRE LIÉ AUX ORDINATEURS ET À INTERNET

VOCABULAIRE LIÉ AUX ORDINATEURS ET À INTERNET VOCABULAIRE LIÉ AUX ORDINATEURS ET À INTERNET Brancher / débrancher l ordinateur de la prise Allumer / éteindre l ordinateur : pour allumer ou éteindre l ordinateur vous devez appuyer sur le bouton On/off

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

< Atelier 1 /> Démarrer une application web

< Atelier 1 /> Démarrer une application web MES ANNOTATIONS SONT EN ROUGE : Axel < Atelier 1 /> Démarrer une application web Microsoft France Tutorial Découverte de ASP.NET 2.0 Sommaire 1 INTRODUCTION... 3 1.1 CONTEXTE FONCTIONNEL... 3 1.2 CONTEXTE

Plus en détail

Édu-groupe - Version 4.3

Édu-groupe - Version 4.3 Édu-groupe - Version 4.3 Guide de l utilisateur Gestion des fichiers Société GRICS, Équipe Évaluation Août 2012 2 CONSIDÉRATIONS GÉNÉRALES A. Importante mise en garde concernant les types de fureteur Les

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

Préambule. Sommaire. Ouverture de votre Service Client. Configuration de La Solution Crypto. Activation. Paramètres PagesIMMO

Préambule. Sommaire. Ouverture de votre Service Client. Configuration de La Solution Crypto. Activation. Paramètres PagesIMMO Préambule La Solution Crypto offre en standard la possibilité de publier vos annonces et de les diffuser sur Internet, sur votre site Web ou sur différents serveurs d annonces, comme le décrit en détail

Plus en détail

Formation Word/Excel. Présentateur: Christian Desrochers Baccalauréat en informatique Clé Informatique, 15 février 2007

Formation Word/Excel. Présentateur: Christian Desrochers Baccalauréat en informatique Clé Informatique, 15 février 2007 Formation Word/Excel Présentateur: Christian Desrochers Baccalauréat en informatique Clé Informatique, 15 février 2007 1 Avant de débuter Qui suis-je? À qui s adresse cette présentation? Petit sondage

Plus en détail

Construction d un Site Internet Dynamique avec Joomla René-Yves Hervé, Ph.D.

Construction d un Site Internet Dynamique avec Joomla René-Yves Hervé, Ph.D. Construction d un Site Internet Dynamique avec Joomla René-Yves Hervé, Ph.D. TABLE DES MATIÈRES I. Présentation de Joomla II. III. IV. Documents disponibles Installation de Joomla 3.1) Installation sur

Plus en détail

ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A.

ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. - 1 - PREAMBULE Les conditions générales d utilisation détaillant l ensemble des dispositions applicables

Plus en détail

Freeway 7. Nouvelles fonctionnalités

Freeway 7. Nouvelles fonctionnalités ! Freeway 7 Nouvelles fonctionnalités À propos de ce guide... 3 Nouvelles fonctionnalités en un coup d'oeil... 3 À propos de la conception d'un site web réactif... 3 Travailler avec les pages pour créer

Plus en détail

Modes Opératoires WinTrans Mai 13 ~ 1 ~

Modes Opératoires WinTrans Mai 13 ~ 1 ~ Modes Opératoires WinTrans Mai 13 ~ 1 ~ Table des matières Facturation... 2 Tri Filtre... 2 Procédures facturation... 3 Transfert Compta... 8 Création d un profil utilisateur... Erreur! Signet non défini.

Plus en détail

HTML. Notions générales

HTML. Notions générales 1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS

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

Table des matières A. Introduction... 4 B. Principes généraux... 5 C. Exemple de formule (à réaliser) :... 7 D. Exercice pour réaliser une facture

Table des matières A. Introduction... 4 B. Principes généraux... 5 C. Exemple de formule (à réaliser) :... 7 D. Exercice pour réaliser une facture Excel 2007 -2- Avertissement Ce document accompagne le cours qui a été conçu spécialement pour les stagiaires des cours de Denis Belot. Le cours a été réalisé en réponse aux diverses questions posées par

Plus en détail

Utiliser un CMS: Wordpress

Utiliser un CMS: Wordpress Utiliser un CMS: Wordpress Annie Danzart Annie.Danzart@telecom-paristech.fr Wordpress Concevoir un site web statique Concevoir un site web dynamique Choisir un hébergement Choix du CMS Wordpress: installation

Plus en détail

Gestion Électronique de Documents et XML. Master 2 TSM

Gestion Électronique de Documents et XML. Master 2 TSM Gestion Électronique de Documents et XML Master 2 TSM I n t r o d u c t i o n Les formats de données F o r m a t s d e d o n n é e Format de donnée : manière de représenter des informations dans un document

Plus en détail

Soyez accessible. Manuel d utilisation du CMS

Soyez accessible. Manuel d utilisation du CMS Soyez accessible. Manuel d utilisation du CMS Nameo : mode d emploi Nameo est une agence web basée en Alsace, à Strasbourg. Son champ d action : création ou refonte de sites internet, stratégie et mise

Plus en détail

Styler un document sous OpenOffice 4.0

Styler un document sous OpenOffice 4.0 Mars 2014 Styler un document sous OpenOffice 4.0 Un style est un ensemble de caractéristiques de mise en forme (police, taille, espacement, etc.) qui sert à structurer un document en l organisant de manière

Plus en détail

CMS Made Simple Version 1.4 Jamaica. Tutoriel utilisateur Récapitulatif Administration

CMS Made Simple Version 1.4 Jamaica. Tutoriel utilisateur Récapitulatif Administration CMS Made Simple Version 1.4 Jamaica Système de gestion de contenu CMS Made Simple est entièrement gratuit sous licence GPL. Tutoriel utilisateur Récapitulatif Administration Le système de gestion de contenu

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 pour la réalisation d'un document avec Open Office Writer 2.2

Guide pour la réalisation d'un document avec Open Office Writer 2.2 Guide pour la réalisation d'un document avec Open Office Writer 2.2 1- Lancement de l'application : Le Traitement de textes de la Suite OpenOffice peut être lancé : soit depuis le menu «Démarrer / Programmes/OpenOffice2.2/Writer

Plus en détail

Manuel d utilisation du module Liste de cadeaux PRO par Alize Web

Manuel d utilisation du module Liste de cadeaux PRO par Alize Web Manuel d utilisation du module Liste de cadeaux PRO par Alize Web INSTALLER ET CONFIGURER LE MODULE (BACK OFFICE) 2 Réglages des performances 2 Télécharger le module 3 Installer le module 4 Configurer

Plus en détail

Atelier Formation Pages sur ipad Pages sur ipad

Atelier Formation Pages sur ipad Pages sur ipad Pages sur ipad 1/43 Table des matières Atelier Formation Pages sur ipad Introduction à Pages 3 Créer ou ouvrir un document 3 Créer ou ouvrir un document 3 Textes et images du modèle 4 Remplacer du texte

Plus en détail

Avant-propos FICHES PRATIQUES EXERCICES DE PRISE EN MAIN CAS PRATIQUES

Avant-propos FICHES PRATIQUES EXERCICES DE PRISE EN MAIN CAS PRATIQUES Avant-propos Conçu par des pédagogues expérimentés, son originalité est d être à la fois un manuel de formation et un manuel de référence complet présentant les bonnes pratiques d utilisation. FICHES PRATIQUES

Plus en détail

4. Personnalisation du site web de la conférence

4. Personnalisation du site web de la conférence RTUTORIEL Prise en main de la plateforme 1. Création de l espace conférence Connectez- vous sur le portail http://test- www.sciencesconf.org avec le compte : - Identifiant : «admin1» - Mot de passe «1234»

Plus en détail

STID 2ème année : TP Web/PHP

STID 2ème année : TP Web/PHP STID 2ème année : TP Web/PHP Plan de travail et aide mémoire jean.arnaud@inria.fr Ce document est composé de cinq parties : Un aide mémoire sur les aspects pratiques de la création de sites Une introduction

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

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

Formation : WEbMaster Formation : WEbMaster Objectif et Description : Centre Eclipse vous propose une formation complète WebMaster, vous permettant de : Utiliser dès maintenant les nouveautés du web2, ainsi alléger les besoins

Plus en détail

Créer sa première base de données Access Partie 4/4 - Création d un état

Créer sa première base de données Access Partie 4/4 - Création d un état - le 19/02/2013 Créer sa première base de données Access Partie 4/4 - Création d un état Ce tutoriel est la suite de l article sur la création d une table, l article sur la création d une requête et l

Plus en détail

Programmation Internet Cours 4

Programmation Internet Cours 4 Programmation Internet Cours 4 Kim Nguy ên http://www.lri.fr/~kn 17 octobre 2011 1 / 23 Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.1 Fonctionnement du Web

Plus en détail

Installation et utilisation du client FirstClass 11

Installation et utilisation du client FirstClass 11 Installation et utilisation du client FirstClass 11 Support par téléphone au 03-80-77-26-46 ou par messagerie sur la conférence «Support Melagri» Sommaire Page I) Installation du client FirstClass 2 II)

Plus en détail

EXCEL TUTORIEL 2012/2013

EXCEL TUTORIEL 2012/2013 EXCEL TUTORIEL 2012/2013 Excel est un tableur, c est-à-dire un logiciel de gestion de tableaux. Il permet de réaliser des calculs avec des valeurs numériques, mais aussi avec des dates et des textes. Ainsi

Plus en détail

RESPONSIVE WEB DESIGN

RESPONSIVE WEB DESIGN RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le

Plus en détail

Manuel de mise en page de l intérieur de votre ouvrage

Manuel de mise en page de l intérieur de votre ouvrage Manuel de mise en page de l intérieur de votre ouvrage Merci de suivre strictement les recommandations de ce manuel qui a pour but de vous aider à préparer un livre dont la qualité de mise en page est

Plus en détail

Création d un site Internet

Création d un site Internet Création d un site Internet Weebly.com Johanne Raymond Collège Lionel Groulx, mai 2010 Service du soutien à l enseignement et Plan de réussite Ouvrir un compte sur Weebly... 1 Modifier le modèle... 2 Ajouter

Plus en détail

Comment mettre en page votre livre

Comment mettre en page votre livre GUIDE - ImprimermonLivre.com Comment mettre en page votre livre www.imprimermonlivre.com 1 V. 20131125 Conseils pour la mise en page de votre ouvrage L objectif de ce guide est de vous aider à réaliser

Plus en détail

SYSTRAN 7 Guide de démarrage

SYSTRAN 7 Guide de démarrage 1 SYSTRAN 7 Guide de démarrage Réf : DSK-7-QSG-HO-FR Bienvenue SYSTRAN 7 Guide de démarrage Félicitations! Nous vous remercions d avoir choisi SYSTRAN V7 la version la plus récente et la plus puissante

Plus en détail

TP1 - Prise en main de l environnement Unix.

TP1 - Prise en main de l environnement Unix. Mise à niveau UNIX Licence Bio-informatique TP1 - Prise en main de l environnement Unix. Les sujets de TP sont disponibles à l adresse http://www.pps.jussieu.fr/~tasson/enseignement/bioinfo/ Les documents

Plus en détail

Les bases de données. Se familiariser avec Base. Figure 1.1A Ouvre le fichier dont tu as besoin. Lance OpenOffice Base.

Les bases de données. Se familiariser avec Base. Figure 1.1A Ouvre le fichier dont tu as besoin. Lance OpenOffice Base. Exercice 1. 1 Se familiariser avec Base Figure 1.1A Ouvre le fichier dont tu as besoin. Données de l élève Lance OpenOffice Base. Ouvre le fichier nommé 6A Base de données clients (Figure 1.1A). Clique

Plus en détail

COMMENCER AVEC VUE. Chapitre 1

COMMENCER AVEC VUE. Chapitre 1 Chapitre 1 COMMENCER AVEC VUE Traduction en français du premier chapitre du manuel d'utilisation du logiciel VUE. Traduit de l'américain par Bernard Aubanel. CRÉER UNE NOUVELLE CARTE Pour ouvrir VUE: 1.

Plus en détail

Responsive Design. Technologies du web. Stéphane Bouvry, 2014

Responsive Design. Technologies du web. Stéphane Bouvry, 2014 Responsive Design Technologies du web Stéphane Bouvry, 2014 1. Objectif Utilisation de CSS pour la mise en page 2. Diapos Le responsive design : http://goo.gl/dmh8is 3. Grille fluide Dans cette partie,

Plus en détail

Cours Excel : les bases (bases, texte)

Cours Excel : les bases (bases, texte) Cours Excel : les bases (bases, texte) La leçon 1 est une leçon de base qui vous permettra de débuter avec Excel, elle sera fort utile pour les prochaines leçons. Remarque : à chaque fois qu il est demandé

Plus en détail

Tutoriel. Votre site web en 30 minutes

Tutoriel. Votre site web en 30 minutes Tutoriel Votre site web en 30 minutes But du tutoriel Nous allons vous présenter comment réaliser rapidement votre site avec Web Creator Pro 6 en vous basant sur l utilisation des modèles fournis avec

Plus en détail

Comment réaliser une capture d écran dans Word. Alors comment ouvrir une page Word?

Comment réaliser une capture d écran dans Word. Alors comment ouvrir une page Word? Comment réaliser une capture d écran dans Word Pour réaliser une capture d écran dans Word, l idéal est d ouvrir d abord la page Word. Mais on peut bien l ouvrir après la capture d écran. Alors comment

Plus en détail

Logiciels de référencement

Logiciels de référencement Outils Logiciels de référencement Afin de contrôler la qualité de son référencement, d optimiser et d améliorer son positionnement, il peut être utile d utiliser des outils couvrant tout ou partie du référencement.

Plus en détail

Date M.P Libellé Catégorie S.Catégorie Crédit Débit Solde S.B

Date M.P Libellé Catégorie S.Catégorie Crédit Débit Solde S.B Excel : Réalisation d un classeur Compta Saisir les étiquettes Renommer la première feuille Compta Laisser la première ligne vide et sur la deuxième ligne saisir les étiquettes Se placer sur A2 et saisir

Plus en détail

Ecrire pour le web. Rédiger : simple, concis, structuré. Faire (plus) court. L essentiel d abord. Alléger le style. Varier les types de contenus

Ecrire pour le web. Rédiger : simple, concis, structuré. Faire (plus) court. L essentiel d abord. Alléger le style. Varier les types de contenus Ecrire pour le web Un texte web de lecture aisée pour l internaute, l est aussi pour les moteurs de recherche ; l écriture peut ainsi être mise au service du référencement naturel. De façon complémentaire,

Plus en détail

Guide d'utilisation. OpenOffice Calc. AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons

Guide d'utilisation. OpenOffice Calc. AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons Guide d'utilisation OpenOffice Calc AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons 1 Table des matières Fiche 1 : Présentation de l'interface...3 Fiche 2 : Créer un nouveau classeur...4

Plus en détail

Créer sa première base de données Access Partie 3/4 - Création d un formulaire

Créer sa première base de données Access Partie 3/4 - Création d un formulaire - le 12/02/2013 Créer sa première base de données Access Partie 3/4 - Création d un formulaire Ce tutoriel est la suite de l article sur la création d une table et l article sur la création d une requête.

Plus en détail

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE

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

Manuel de l administrateur

Manuel de l administrateur Manuel de l administrateur (Version non définitive Novembre 2013) Technofutur TIC Pedago TIC CC by sa Première utilisation en qualité d administrateur Compte administrateur Statut utilisateur Paramètre

Plus en détail

Chapitre IX. L intégration de données. Les entrepôts de données (Data Warehouses) Motivation. Le problème

Chapitre IX. L intégration de données. Les entrepôts de données (Data Warehouses) Motivation. Le problème Chapitre IX L intégration de données Le problème De façon très générale, le problème de l intégration de données (data integration) est de permettre un accès cohérent à des données d origine, de structuration

Plus en détail

Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design

Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design Grilles Fluides CSS CREATION D UNE GRILLE FLUIDE Grille fluide Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design WWW.SUTTERLITY.FR

Plus en détail