Formation (X)HTML-CSS avancé

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

Download "Formation (X)HTML-CSS avancé"

Transcription

1 Formation (X)HTML-CSS avancé

2 Table des matières 1 Introduction La philosophie W3C Du HTML au XHTML Et dans la pratique Complément de XHTML La notion de validité Insérer des images dans vos pages Définir des listes d éléments Utilisation du langage CSS Lier sa page à une feuille de style CSS Ce qu est une feuille de style Intérêt de la manipulation La pratique Un exemple concret Le modèle DOM Document Object Model La notion d ID La notion d héritage Les sélecteurs CSS Les sélecteurs de base Sélecteurs de classe et d ID Le sélecteur multiple Le sélecteur par héritage Etude de propriétés CSS Les images avec CSS Largeur et hauteur Les notions de marges et de padding Le placement des objets La propriété display La propriété float La propriété clear La propriété overflow Références 17 2

3 1 Introduction 1.1 La philosophie W3C 2 COMPLÉMENT DE XHTML Le W3C, ou World Wild Web Consortium, est un consortium qui a été fondé en 1994 par monsieur Berners-Lee. Le consortium est une organisation constituée de groupes de travail qui vise à développer des standards et des normes pour le web. Le but de ces standards est de créer une unification de la manière de créer des contenus pour le web, notamment les pages web. Le HTML a longtemps été un langage hasardeux trop permissif quant à sa syntaxe. Il en résulte de nombreuses pages codées de manières fort différentes, les rendant plus rapidement obsolètes. Aujourd hui, le travail du W3C est reconnu mondialement et le web de l avenir se trouve dans le XHTMl et non le HTML. La philosophie W3C consiste, en temps que développeur, à s efforcer de respecter les normes recommandées (et non imposées) par le W3C. Il en résulte des pages web plus propres, plus structurées et plus pérennes. 1.2 Du HTML au XHTML Mais au fond, quelle différence entre ces langages, et d où sort ce fameux X? Le principe de base est de considérer qu un fichier HTML est également un fichier XML. Le XML est un métalangage (langage qui définit des langages) et les pages web telles que nous vous avons appris à les faire dans la séance précédente sont des fichiers XML. XML est utilisé pour de nombreuses autres choses, comme les flux RSS, les fichiers de configuration, etc... L idée générale est de séparer le contenu de sa forme. Un document XML structure les informations, et permet ensuite de les organiser indépendamment de leur contenu. Voilà pourquoi nous n écrirons presque plus de définition de forme (taille, couleur, alignement) au sein du code XHTML. On définit des zones, manipulables ensuite via le langage CSS. Voilà en quoi consiste la philosophie du web selon le W3C : respecter les standards et structurer l information. 1.3 Et dans la pratique Dans la pratique, XHTML supprime des balises de HTMl considérées comme obsolètes. Rassurez-vous, aucune des ces balises ne vous ont été apprises à la première séance. Et d une manière générale, écitez de copier-coller des gros morceaux de HTML depuis un autre site : vérifiez d abord sa validité vis-à-vis des standards du W3C. 2 Complément de XHTML Nous allons apprendre ici à utiliser d autres balises qui n ont pas été évoquées à la première séance. 2.1 La notion de validité Un document XHTML est dit valide lorsqu il respecte les normes du W3C. Mais ce n est pas aussi simple, car il y a plusieurs normes. Les principales sont XHTML 1.0 Strict, XHTML 1.0 Transitional et XHTML 1.1. Vous n aurez besoin de XHTML 1.0 Transitional que si vous devez valider de vieux documents HTML existants. Nous recommandons d utiliser XHTML 1.0 Strict, pour des raisons liés aux types MIME des fichiers que nous n expliciterons pas ici. Une 3

4 2 COMPLÉMENT DE XHTML fois que vous avez choisi une norme, vous devez l indiquer dans le document. Celà se fait en ajoutant les deux lignes suivantes avant le tag d ouverture <html>. <?xml v e r s i o n= 1. 0 encoding= iso ?> <!DOCTYPE html PUBLIC //W3C//DTD XHTML 1. 0 S t r i c t //EN http : / /www. w3. org /TR/xhtml1/DTD/xhtml1 s t r i c t. dtd > Déclarer la norme choisie Vous remarquerez que la première déclaration indique l encodage du fichier. Celà ne vous empêche pas d utiliser une balise META pour le préciser encore. En effet, cette déclaration précise l encodage lorsque le document est interprété comme un fichier xml, alors que la balise META indique l encodage lorsque le fichier est interprété en tant que XHTML. Pour savoir si vos pages sont valides, vous pouvez vous rendre sur le site http ://validator.w3.org/ pour vérifier la validité de vos pages. Lorsque votre site est en ligne et valide, il est de bon ton d apposer un bandeau W3C pour le signaler. Cette validité est un gage de sérieux de la part du développeur. Le tag d ouverture <html> change légèrement lui aussi. Il convient de le déclarer comme dans cet exemple : <?xml v e r s i o n= 1. 0 encoding= iso ?> <!DOCTYPE html PUBLIC //W3C//DTD XHTML 1. 0 S t r i c t //EN http : / /www. w3. org /TR/xhtml1/DTD/xhtml1 s t r i c t. dtd > <html xmlns= http : / /www. w3. org /1999/ xhtml xml : lang= f r > <head> <t i t l e>page vide pour t e s t e r</ t i t l e> </head> <body> </body> </html> Un document XHTML 1.0 Strict Ce fichier se trouve dans le dossier canevas et se nomme vide.htm. 2.2 Insérer des images dans vos pages Pour ajouter des images, il suffit d utiliser une balise <img>. Sa syntaxe est la suivante : 4

5 3 UTILISATION DU LANGAGE CSS <img src= URL v e r s l image alt= Texte a l t e r n a t i f ou t i t r e /> Insérer des images Vous pouvez voir que la balise <img> est une balise qui s ouvre et se ferme avec un seul tag. Cette balise peut aussi posséder des attributs width et height, mais nous vous déconseillons leur utilisation. Il vaut mieux dimensionner correctement ses images avec un éditeur d image. Vous pouvez le faire avec The GIMP par exemple, qui est un logiciel libre de droits et gratuit. Malgré la popularité du format JPEG, nous vous recommandons l utilisation du format PNG pour vos images web. PNG supporte la transparence, comme GIF, mais permet d afficher des images avec une aussi bonne qualité que JPEG. Des fichiers d images sont disponibles dans le répertoire canevas. Vous pouvez partir de vide.htm pour faire un test. 2.3 Définir des listes d éléments Pour définir une liste d éléments, comme dans un menu par exemple, utilisez ceci : <ul> < l i>item 1</ l i> < l i>item 2</ l i> < l i>item 3</ l i> < l i>item 4</ l i> < l i>item 5</ l i> </ ul> Listes d éléments Les balises <li> peuvent bien sûr contenir des liens, des images ou autre. Néanmmoins, il convient de ne les utiliser que pour un petit volume, comme pour les items d un menu. Par défaut, celà donne une liste à puce avec des éléments alignés verticalement, mais celà peut être modifié avec CSS. 3 Utilisation du langage CSS 3.1 Lier sa page à une feuille de style CSS Ce qu est une feuille de style A la séance précédente, vous avez tapé du code CSS à l intérieur de la balise <style>. Une feuille de style n est rien d autre qu un fichier texte contenant le code CSS dont vous avez besoin. Il ne doit en aucun cas contenir du HTML. Vous devez lui donner l extension *.css. 5

6 3 UTILISATION DU LANGAGE CSS Intérêt de la manipulation Lorsque vous allez créer un site, il sera composé de plusieurs pages XHTML différentes, et vous voudrez (à moins d être bizarre) qu elles respectent un même design. On emploie le terme de charte graphique. Vous allez donc pouvoir dire à la page de respecter les styles présents dans tel ou tel fichier *.css. Vous pouvez faire un tour sur le site http :// Les pages ont toutes le même code HTML, seule la feuille de style change La pratique Il existe plusieurs méthodes pour lier sa page à une feuille de style. Voici celle que nous vous recommandons. Dans l en-tête (à l intérieur de la balise <head>), ajoutez le code suivant : <style type= t e x t / c s s u r l ( chemin/ v e r s / l e / f i c h i e r /de/ s t y l e. css ) ; </ style> Un document XHTML 1.0 Strict L avantage de cette méthode est que import est une directive de CSS2. Et alors, direzvous? Et alors si jamais le visiteur utilise un navigateur qui ne supporte que le CSS1, la feuille de style ne sera pas importée, et votre site s affichera de manière simpliste mais lisible. Alors qu avec une autre méthode, un vieux navigateur pourrait interpréter à moitié la feuille de style et rendre le site illisible Un exemple concret Ouvrez le fichier style.htm dans votre navigateur. Puis éditez ce fichier, remplacez style1.css par style2.css, enregistrez et actualisez. Vous pouvez voir que ce simple fait peut impliquer des changements importants quant aux placements des conteneurs les uns par rapport aux autres. 3.2 Le modèle DOM Document Object Model Le Document Object Model est une manière de représenter votre document XHTML. Il consiste à le considérer comme une structure arborescente. Chaque balise est un noeud, la racine est la balise <html>. Pour toute balise donnée, les balises qu elle contient sont appelées ses enfants et la balise concernée le parent. Pour mieux comprendre celà, vous pouvez utilisez un outil fort utile intégré dans le navigateur Firefox, appelé inspecteur DOM. Reprenez le fichier style.htm dans votre navigateur, puis cliquez sur Outils -> Inspecteur DOM. Développez un peu l arbre présenté pour visualiser sa structure. Lorsque vous cliquez sur un conteneur, ses bords apparaissent en rouge quelques instants pour vous le montrer La notion d ID En XHTML, tous les noeuds (les balises) ont le droit d utiliser l attribut id. Cet attribut sert à donner un nom unique à ce noeud. Dans un document, deux attributs id ne doivent 6

7 3 UTILISATION DU LANGAGE CSS en aucun cas contenir la même valeur. Il s agit d un identifiant unique dans tous le document, désignant le noeud qui le possède. Celà est utile pour désigner les zones principales de vos pages, comme le menu ou le corps de texte. Cet ID est utilisable dans vos feuilles de style CSS, pour attribuer un style au noeud possédant tel ou tel ID. Pour ce faire, il faut utiliser la syntaxe suivante : nomdelabalise#i d c h o i s i { a t t r i b u t c s s : v a l e u r 1 ; a t t r i b u t c s s 2 : v a l e ur2 ; / Par exemple / div#menu { font s i z e : 1 2 pt ; c o l o r :# f f ; Utiliser les ID dans votre feuille de style La notion d héritage Les balises enfants possèdent une partie des propriétés CSS de leurs parents, notamment toutes les propriétés de décoration du texte comme sa couleur, sa police, sa taille, son alignement, etc. L héritage concerne aussi les enfants des enfants, les enfants des enfants des enfants, etc. Cette notion d héritage est très puissante car elle peut s utiliser avec les noms de balise, avec les classes et avec les ID. Il également possible d utiliser cette notion d héritage et d arborescence pour désigner des balises particulières. Par exemple, vous pouvez affecter par un style donné tous les paragraphes (balises <p>) des DIV d une classe donnée (par exemple maclasse ). Vous le verrez dans la section suivante. Prenons un premier exemple qui montre comment les propriétés s héritent. Le code CSS a été écrit directement dans la balise <style> pour faciliter la lecture, bien que la méthode via un fichier externe soit préconisée : <?xml v e r s i o n= 1. 0 encoding= iso ?> <!DOCTYPE html PUBLIC //W3C//DTD XHTML 1. 0 S t r i c t //EN http : / /www. w3. org /TR/xhtml1/DTD/xhtml1 s t r i c t. dtd > <html xmlns= http : / /www. w3. org /1999/ xhtml xml : lang= f r > <head> <t i t l e>page vide pour t e s t e r</ t i t l e> <meta http equiv= Content Type content= t e x t /xhtml ; c h a r s e t=i s o /> <style content= t e x t / c s s > 7

8 3 UTILISATION DU LANGAGE CSS </ style> </head> div { border : 1 px s o l i d #000000; margin : 1 0 px ; padding : 5 px ;. parent1 { c o l o r :# f f ;. parent2 { text d e c o r a t i o n : u n d e r l i n e ;. parent3 { font s t y l e : i t a l i c ; <body> Ce t e x t e a l e s t y l e par défaut. <div class= parent1 > Ce t e x t e e s t rouge. <div class= parent2 > Ce t e x t e e s t rouge et s o u l i g n é. <div class= parent3 > Ce t e x t e e s t rouge, s o u l i g n é et i t a l i q u e. </body> </html> La notion d héritage Ce fichier se nomme heritage.htm. Ouvrez le dans votre navigateur pour voir les effets de l héritage. Comme vous pouvez le voir, les DIV imbriqués reprennent les propriétés de leurs parents, sans qu on ai besoin de les redéclarer. 3.3 Les sélecteurs CSS Lorsque vous définissez un style, vous écrivez un nom, une classe ou un id, suivi d accolades contenant les propriétés CSS dont vous avez besoin. Ce qui se trouve avant ces accolades s appelle un sélecteur CSS. 8

9 3 UTILISATION DU LANGAGE CSS Les sélecteurs de base Vous connaissez déjà les sélecteurs de base. Les voici tout de même à titre de rappel : / Le s é l e c t e u r de b a l i s e s / div { / Le s é l e c t e u r de c l a s s e s /. maclasse { / Le s é l e c t e u r d ID / #iddudiv { Les sélecteurs de base Sélecteurs de classe et d ID Si vous connaissez la nature des balises possédant les classes et les ID que vous utilisez, il convient de l indiquer dans le sélecteur. De cette manière par exemple : / Le s é l e c t e u r de c l a s s e s plus p r é c i s / / N a f f e c t e que l e s DIV possédant c e t t e c l a s s e / div. maclasse { / Le s é l e c t e u r d ID / / Seule LE ( car i l d o i t ê t r e unique ) DIV possédant c e t ID s e r a a f f e c t é / div#iddudiv { Des sélecteurs plus précis 9

10 3 UTILISATION DU LANGAGE CSS Notez qu il ne doit pas y avoir d espace après le nom de la balise dans ce cas Le sélecteur multiple Le sélecteur multiple permet d attribuer un lot de propriétés CSS à plusieurs sélecteurs en même temps. Comme ceci par exemple : / Ce s é l e c t e u r va a f f e c t e r l e s DIV de c l a s s e uneclasse l e s SPAN de c l a s s e uneautreclasse l e s b a l i s e s <p> / div. uneclasse, span. uneautreclasse, p { Le sélecteur multiple Celà est très utile pour éviter moults redondances Le sélecteur par héritage Voilà sans aucun doute le plus intéressant des sélecteurs. Il permet de parcourir l arborescence. Voyez plutôt : / Ce s é l e c t e u r a f f e c t e t o u t e s l e s b a l i s e s de c l a s s e uneclasse contenue dans un DIV / div. uneclasse { / Ce s é l e c t e u r a f f e c t e tous l e s DIV contenus dans une b a l i s e de c l a s s uneclasse /. uneclasse div { / Ce s é l e c t e u r a f f e c t e t o u t e s l e s b a l i s e s LI contenues dans l e s DIV de c l a s s e item eux même contenus dans l e DIV d id menu / 10

11 4 ETUDE DE PROPRIÉTÉS CSS div#menu div. item l i { Le sélecteur multiple 4 Etude de propriétés CSS Nous allons ici nous intéresser à quelques propriétés CSS. Avant celà, il est nécessaire de comprendre une chose : vous n ajoutez jamais de propriétés, vous modifiez les valeurs par défaut de propriétés existantes. 4.1 Les images avec CSS CSS permet à sa manière d inclure des images. Celà est très utile lorsque vous avez besoin d images pour la décoration du site (bannières, bordures ombrées). Pour celà, il faut indiquer à CSS une image de fond pour l élément choisi. Celà est bien sûr utilisable sur la balise body. Voici la méthode : body { background image : u r l ( chemin/ v e r s / l /image. png ) ; background r e p e a t : no repeat ; background p o s i t i o n : top l e f t ; background attachment : f i x e d ; Utiliser des images de fond La première propriété spécifie le chemin de l image. Il doit s agir du chemin relatif par rapport au fichier CSS et non par rapport au fichier HTML de votre page. Celà est fort utile pour composer des thèmes utilisables partout depuis le site. La deuxième propriété sert à gérer le motif. Si votre image de fond est une petite image, et que vous voulez remplir l espace de fond avec, il suffit d utiliser une répétition. On peut répéter l image sur tout le plan (papier peint), sur l axe horizontal, ou sur l axe vertical. On ne peut ne pas répéter du tout.la troisième propriété La troisième propriété permet de choisir ou l image va se placer dans l élément. La quatrième propriété prend la valeur fixed ou scroll. Celà n a de sens que lorsqu un ascenseur apparaît dans l élément possédant l image de fond. C est souvent le cas si vous mettez un fond à <body>. Si vous défilez et que vous avez choisi fixed, le fond ne bougera pas et le texte volera au dessus. Avec scroll, le fond va suivre le déplacement de l ascenseur. Attention : cette propriété ne fonctionne que sur <body>. Sur des DIV, sa valeur reste fixed même si vous la changez. 11

12 4 ETUDE DE PROPRIÉTÉS CSS Il convient d utiliser background-color conjointement avec ces propriétés, en lui donnant la valeur de fond de l image. Des exemples se trouvent dans le fichier background.htm et scoll.htm. 4.2 Largeur et hauteur Il est souvent utile de pouvoir gérer la largeur à la hauteur des éléments. Celà se fait via les propriétés width et height qui se précisent en pixels ou en pourcentage. Vous allez voir un exemple au paragraphe suivant. Il existe également min-width, min-height, max-width et max-height, mais Internet Explorer 6 ne les supporte pas. Il convient de s en passer dans un souci d accessibilité. 4.3 Les notions de marges et de padding La marge est la distance entre le bord du conteneur et ce qui l entoure. Le padding est la distance entre le bord du conteneur et ce qu il contient. Fig. 1 Les marges et le padding Les tailles des marges et des padding se définissent soit en pixels, soit en em, soit en pourcentage (fonctionne pour les marges de gauche et de droite). On les modifie ainsi : div. maclasse { margin top : 10 px ; margin bottom : 10em ; margin l e f t :15%; margin r i g h t :15%; 12

13 4 ETUDE DE PROPRIÉTÉS CSS padding l e f t : 2 0 px ; padding r i g h t : 2 0 px ; padding top : 1 0em ; padding bottom : 5em ; div. a u t r e C l a s s e { margin : 1 0 px ; pa&dding : 5em ; div. encoreautre { margin : 5px 50 px 5px 50 px ; padding : 1em 5px 1em 50 px ; Modifier les marges et le padding Savoir bien gérer les marges est important car celà joue sur la place que les éléments ont le droit ou non de prendre. Voyez un exemple dans le fichier marges.htm. 4.4 Le placement des objets La propriété display Comme vous avez pu le remarquer, lorsque vous utilisez des DIV, ils se mettent les uns au dessus des autres, et prennent chacun la largeur complète de la page. Lorsque que vous utilisez des SPAN, ceux-ci ne prennent que la largeur occupée par leur contenu et ne force pas les autres SPAN à se placer au dessus et en dessous. Ces propriétés peuvent être changées via la propriété CSS display. Cette propriété peut prendre 17 valeurs, mais nous n en citerons que 3, à savoir block, inline et none. Lorsque la valeur choisie est block, l élément concerné a le comportement par défaut d un DIV. Lorsque la valeur est inline, l élément a le comportement par défaut d un SPAN. Vous pouvez de ce fait complètement inverser le fonctionnement de DIV et SPAN, mais celà n est pas recommandé. Changer cette valeur est utile pour gérer l alignement horizontal ou vertical d un menu par exemple. Voyez plutôt cet exemple, présent dans le fichier blocks.htm : <?xml v e r s i o n= 1. 0 encoding= iso ?> <!DOCTYPE html PUBLIC //W3C//DTD XHTML 1. 0 S t r i c t //EN http : / /www. w3. org /TR/xhtml1/DTD/xhtml1 s t r i c t. dtd > <html xmlns= http : / /www. w3. org /1999/ xhtml xml : lang= f r > <head> <t i t l e>images de fond</ t i t l e> <meta http equiv= Content Type content= t e x t /xhtml ; c h a r s e t=i s o /> <style content= t e x t / c s s > 13

14 4 ETUDE DE PROPRIÉTÉS CSS </ style> </head> div. b l o c s a { d i s p l a y : block ; div. cache a { d i s p l a y : none ; <body> <div> Du t e x t e avant l e s l i e n s <a href= # >Un l i e n</a> <a href= # >Un Autre</a> <a href= # >Un Troisième</a> Du t e x t e après l e s l i e n s </body> </html> <div class= b l o c s > Du t e x t e avant l e s l i e n s <a href= # >Un l i e n</a> <a href= # >Un Autre</a> <a href= # >Un Troisième</a> Du t e x t e après l e s l i e n s <div class= cache > Du t e x t e avant l e s l i e n s <a href= # >Un l i e n</a> <a href= # >Un Autre</a> <a href= # >Un Troisième</a> Du t e x t e après l e s l i e n s Utilisation de la propriété display Remarquez l utilisation d un sélecteur CSS par héritage. Utilisez l inspecteur DOM de Mozilla Firefox pour visualiser l espace occupé par les balises <a>. La valeur 14

15 4 ETUDE DE PROPRIÉTÉS CSS La propriété float Cette propriété est la plus délicate à comprendre et à maîtriser. Elle permet de faire flotter un DIV. En fait, celà aura pour effet de réduire le DIV à la taille de son contenu, et d autoriser d autres DIV (ou éléments dont la propriété display vaut block) à se placer à sa droite ou à sa gauche, selon qu on le fasse flotter à droite ou à gauche. Vous pouvez voir l effet de float dans les fichiers style.htm et marges.htm ou cette propriété est utilisée, ainsi que dans le paragraphe suivant. Dans la pratique, lorsque vous faites flotter un élément, limitez toujours sa largeur à l aide de la propriété width La propriété clear Cette propriété est très fortement liée à float puisqu elle sert à interdire à un élément d être cotoyé par des flottants à sa droite ou sa gauche, ou les deux en mêmes temps (respectivement, utilisez les valeurs left,right et both). Si vous faites flotter un élément mais que le suivant interdit les flottants autour de lui, c est comme si vous laissiez le comportement par défaut, à ceci près que le flottant est limité à la largeur de son contenu. Le listing suivant montre les comportements cités : <?xml v e r s i o n= 1. 0 encoding= iso ?> <!DOCTYPE html PUBLIC //W3C//DTD XHTML 1. 0 S t r i c t //EN http : / /www. w3. org /TR/xhtml1/DTD/xhtml1 s t r i c t. dtd > <html xmlns= http : / /www. w3. org /1999/ xhtml xml : lang= f r > <head> <t i t l e>bien g é r e r l e s marges</ t i t l e> <style content= t e x t / c s s > body { margin : auto ; width :700 px ; div#corps { border r i g h t : 1 px s o l i d #000; border l e f t : 1 px s o l i d #000; padding r i g h t : 2 5 px ; padding l e f t : 2 5 px ; div. flottantgauche { f l o a t : l e f t ; div. f l o t t a n t D r o i t { f l o a t : r i g h t div#pied2 { c l e a r : both ; 15

16 4 ETUDE DE PROPRIÉTÉS CSS </ style> </head> <body> <div id= corps > <div> <div class= flottantgauche > <ul> < l i>ce</ l i> < l i>div</ l i> < l i>e s t</ l i> < l i>un</ l i> < l i>f l o t t a n t</ l i> </ ul> <div id= t e x t e 1 > Ce t e x t e e s t j u s t e l à pour f a i r e beau. <div id= pied1 > Ce t e x t e a u s s i. <p>&nbsp ;</p> <div style= c l e a r : both ; ></div> <p>&nbsp ;</p> <div> <div class= f l o t t a n t D r o i t > <ul> < l i>ce</ l i> < l i>div</ l i> < l i>e s t</ l i> < l i>un</ l i> < l i>f l o t t a n t</ l i> </ ul> </body> </html> <div id= t e x t e 2 > Ce t e x t e e s t j u s t e l à pour f a i r e beau. <div id= pied2 > Ce t e x t e a u s s i. Utiliser les propriétés float et clear 16

17 5 RÉFÉRENCES La propriété overflow Cette propriété sert à gérer le comportement d un objet lorsque son contenu est obligé d en dépasser. Il prend la valeur auto, scoll, hidden ou visible. Exemples dans le fichier overflow.htm. 5 Références Contacter l auteur : jjansen@etu.enseeiht.fr Références CSS 2 : http :// reference.asp Validateur W3C : http ://validator.w3.org/ Mammouthland : http :// OpenWeb : http ://openweb.eu.org/ Alsacréations : http :// Les tableaux en XHTML : http ://fr.selfhtml.org/html/tableaux/construction.htm http ://fr.selfhtml.org/html/tableaux/constitution.htm 17

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

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

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

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

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

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

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

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

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

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

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

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

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

1. La notion de cascade

1. La notion de cascade HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir

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

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

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

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

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

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

Pack Fifty+ Normes Techniques 2013

Pack Fifty+ Normes Techniques 2013 Pack Fifty+ Normes Techniques 2013 Nos formats publicitaires par site 2 Normes techniques 2013 Display classique Pavé vidéo Footer Accueil panoramique Publi rédactionnel Quiz Jeu concours Emailing dédié

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

Langage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv>

Langage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv> Langage HTML (2 partie) «Je n'ai fait que prendre le principe d - hypertexte et le relier au principe du TCP et du DNS et alors boum! ce fut le World Wide Web!» Tim Berners-Lee

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

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

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

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

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

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

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

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

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

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

{less} Guide de démarrage

{less} Guide de démarrage {less Guide de démarrage Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site

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

< 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

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

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

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

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées? Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites Quelles solutions peuvent être employées? Présentation d une des solutions Conclusion Aujourd hui le web est

Plus en détail

SARL DDLX Multimédia Place du général de Gaule 34160 Boisseron Tèl :09 7219 85 01 Email : support@ddlx.org. Agence Web. Design Prestashop personnalisé

SARL DDLX Multimédia Place du général de Gaule 34160 Boisseron Tèl :09 7219 85 01 Email : support@ddlx.org. Agence Web. Design Prestashop personnalisé SARL DDLX Multimédia Place du général de Gaule 34160 Boisseron Tèl :09 7219 85 01 Email : support@ddlx.org Agence Web Design Prestashop personnalisé création de boutique en ligne site de présentation site

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

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

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

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

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

UN SITE WEB RESPONSIVE EN UNE HEURE?

UN SITE WEB RESPONSIVE EN UNE HEURE? UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N

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

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

Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?

Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers? Aide [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers? Au sein d'un ordinateur, les données et les fichiers sont stockés suivant une structure d'arbre appelée arborescence. Pour

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

Magento. Magento. Réussir son site e-commerce. Réussir son site e-commerce BLANCHARD. Préface de Sébastien L e p e r s

Magento. Magento. Réussir son site e-commerce. Réussir son site e-commerce BLANCHARD. Préface de Sébastien L e p e r s Mickaël Mickaël BLANCHARD BLANCHARD Préface de Sébastien L e p e r s Magento Préface de Sébastien L e p e r s Magento Réussir son site e-commerce Réussir son site e-commerce Groupe Eyrolles, 2010, ISBN

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

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

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

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

Ouvrir le compte UQÀM

Ouvrir le compte UQÀM Cliquez sur le titre pour visionner 1 Cliquez sur le titre pour visionner 2! Préliminaires! Ouvrir le compte UQÀM! Accéder au compte UQÀM! Paramètres de configuration! Les dossiers! Gérer les dossiers!

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

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

CONCEPTION D E-MAILS ADAPTATIFS

CONCEPTION D E-MAILS ADAPTATIFS CONCEPTION D E-MAILS ADAPTATIFS SELLIGENT Le contenu de ce manuel porte sur du matériel protégé par les droits d auteurs appartenant à Selligent. Ce manuel ne peut être ni reproduit, en tout ou en partie,

Plus en détail

THEME RESPONSIVE DESIGN

THEME RESPONSIVE DESIGN THEME RESPONSIVE DESIGN Tablettes, smartphones, netbooks, ordinateurs les résolutions d écrans sont nombreuses. Adaptez vous aux nouvelles habitudes des utilisateurs en étant visible de façon optimale.

Plus en détail

Programmation Web TP1 - HTML

Programmation Web TP1 - HTML Programmation Web TP1 - HTML Vous allez réaliser votre premier site Web dans lequel vous présenterez la société SC, agence spécialisée dans la conception des sites internet. 1 - Une première page en HTML

Plus en détail

Tutoriel de démarrage rapide destiné aux EDITEURS

Tutoriel de démarrage rapide destiné aux EDITEURS Tutoriel de démarrage rapide destiné aux EDITEURS 2007 Joseph Beeson josephbeeson@gmail.com Sous une licence Creative Commons : Paternité - Pas d'utilisation Commerciale - Partage des Conditions Initiales.

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

Publier un Carnet Blanc

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

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 d'utilisation du site Deptinfo (Mise en route)

Manuel d'utilisation du site Deptinfo (Mise en route) Manuel d'utilisation du site Deptinfo (Mise en route) 1)Nouveautés apportées par le nouveau site...2 2) Accès à l espace privé... 3 a) Accès... 3 b) Identification... 3 c)page d accueil de l espace privé...4

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

Publication dans le Back Office

Publication dans le Back Office Site Web de l association des ingénieurs INSA de Lyon Publication dans le Back Office Note : dans ce guide, l'appellation GI signifie Groupe d'intérêt, et GR Groupe Régional laure Buisset Page 1 17/09/2008

Plus en détail

HTML5 et CSS3 pour des sites Responsive Web Design

HTML5 et CSS3 pour des sites Responsive Web Design Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur

Plus en détail

SPECIFICITES TECHNIQUES DES FORMATS PUBLICITAIRES

SPECIFICITES TECHNIQUES DES FORMATS PUBLICITAIRES SPECIFICITES TECHNIQUES DES FORMATS PUBLICITAIRES Contact Traffic : Audrey Pluot-Etourneau apluot@staff.aufeminin.com LES FORMATS CLASSIQUES Nom du Format Dimension du Format Poids Max Fichiers Acceptés

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

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

SII Stage d informatique pour l ingénieur

SII Stage d informatique pour l ingénieur SII Stage d informatique pour l ingénieur Création d un site Web École nationale supérieure de techniques avancées SII Stage d informatique pour l ingénieur 1 / 15 L informatique et le temps qui passe...

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

Création de site Internet avec Jimdo

Création de site Internet avec Jimdo Création de site Internet avec Jimdo Ouvrez votre navigateur internet ou Internet Explorer ou Mozilla Firefox Rendez vous sur la page http://fr.jimdo.com/ voici ce que vous voyez. 1=> 2=> 1. Le nom que

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

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

www.imprimermonlivre.com

www.imprimermonlivre.com 0 www.imprimermonlivre.com Composition d une couverture avec Word L objectif de ce guide est de vous proposer un mode opératoire pour créer une couverture avec Word. Nous vous rappelons toutefois que Word

Plus en détail

Création d un site web avec le kit labo CNRS. Expérience au LMV - Ch. Postadjian (Laboratoire de Mathématiques de Versailles - UMR 8100)

Création d un site web avec le kit labo CNRS. Expérience au LMV - Ch. Postadjian (Laboratoire de Mathématiques de Versailles - UMR 8100) Création d un site web avec le kit labo CNRS Expérience au LMV - Ch. Postadjian (Laboratoire de Mathématiques de Versailles - UMR 8100) 1 2 outils DREAMWEAVER : Editeur qui permet de créer et gérer des

Plus en détail

Introduction aux concepts d ez Publish

Introduction aux concepts d ez Publish Introduction aux concepts d ez Publish Tutoriel rédigé par Bergfrid Skaara. Traduit de l Anglais par Benjamin Lemoine Mercredi 30 Janvier 2008 Sommaire Concepts d ez Publish... 3 Système de Gestion de

Plus en détail

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite?

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? Medialibs, votre partenaire digital Quoi? Un partenaire pour une gestion globale du digital (un laboratoire R&D, éditeur de logiciels

Plus en détail

Introduction à HTML5, CSS3 et au responsive web design

Introduction à HTML5, CSS3 et au responsive web design 1 Introduction à HTML5, CSS3 et au responsive web design Jusqu à une période récente, les sites web étaient conçus avec une largeur fixe de l ordre de 960 pixels, en espérant que les visiteurs en tirent

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

Dans ce mémento, vous trouverez les informations détaillées pour configurer les fonctionnalités du Responsive Design dans le Worldsoft CMS:

Dans ce mémento, vous trouverez les informations détaillées pour configurer les fonctionnalités du Responsive Design dans le Worldsoft CMS: 1 La taille et la résolution de l'écran des ordinateurs portables, des ordinateurs de bureau, des tablettes et des smartphones peuvent considérablement varier. C'est pour cette raison, que les sites Web

Plus en détail

Dans cette Unité, nous allons examiner

Dans cette Unité, nous allons examiner 13.0 Introduction Dans cette Unité, nous allons examiner les fonctionnements internes d une des plateformes de publication web les plus largement utilisées de nos jours sur l Internet, WordPress. C est

Plus en détail

Autour du web. Une introduction technique Première partie : HTML. Georges-André SILBER Centre de recherche en informatique MINES ParisTech

Autour du web. Une introduction technique Première partie : HTML. Georges-André SILBER Centre de recherche en informatique MINES ParisTech Autour du web Une introduction technique Première partie : HTML Georges-André SILBER Centre de recherche en informatique MINES ParisTech silber@cri.ensmp.fr http://www.cri.ensmp.fr/people/silber/cours/2010/web

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

Les Bases. Messaoudi Khaled, Boukelal Hanane (Etudiants Informatique ) 2015.

Les Bases. Messaoudi Khaled, Boukelal Hanane (Etudiants Informatique ) 2015. Référencer Mon SITE, BLOG Les Bases Messaoudi Khaled, Boukelal Hanane (Etudiants Informatique ) 2015. Le but de ce livre est de vous aider à bien positionné votre site web ou blog auprès des moteurs de

Plus en détail

MODE D'EMPLOI DU CONTRIBUTEUR WEB UAPV "CONTRIBUER DANS UNE RUBRIQUE DU SITE WEB"

MODE D'EMPLOI DU CONTRIBUTEUR WEB UAPV CONTRIBUER DANS UNE RUBRIQUE DU SITE WEB MODE D'EMPLOI DU CONTRIBUTEUR WEB UAPV "CONTRIBUER DANS UNE RUBRIQUE DU SITE WEB" Quelques conseils pour bien contribuer 1 Paramétrer votre navigateur web 2 Accéder au module de gestion des pages web 2

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

Afin d accéder à votre messagerie personnelle, vous devez vous identifier par votre adresse mail et votre mot de passe :

Afin d accéder à votre messagerie personnelle, vous devez vous identifier par votre adresse mail et votre mot de passe : 1 CONNEXION A LA MESSAGERIE ZIMBRA PAR LE WEBMAIL Ecran de connexion à la messagerie Rendez vous dans un premier temps sur la page correspondant à votre espace webmail : http://webmailn.%votrenomdedomaine%

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

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

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