Les Feuilles de Style CSS, Le Langage XHTML
|
|
|
- Clémence Drapeau
- il y a 7 ans
- Total affichages :
Transcription
1 T-GSI STAGE RENOVATION - HTML.Chapitre 4 - Les Feuilles de Style CSS, Le Langage XHTML Sources du document : Livre d Eric Crepin Conception de site Internet Intranet ; Le consortium W3C (texte de référence XHTML 1.0 du 26 janvier 2000), traduit par lagrange.net (section w3c) ; Le site ALL WEB ; Le site ALL HTML ; Magazine Compétence Micro n 9 et 16. Autres sources données à titre de bibliographie : Le site de Didier cabuzel ; Le site de Gilles Chagnon (XML) ; Le site devparadise ; Le site WebDeveloper; Magazine Linux Pratique HS juin-juillet 2005, Développement Web. Olivier Mondet A. XHTML et les feuilles de style CSS Les feuilles de style CSS (Cascading Style Sheets) permettent de personnaliser les instructions du HTML selon ses propres besoins. Elles ont vu le jour en 1996 et sont actuellement à leur version 2. Les feuilles de style permettent de créer ses propres balises et de modifier les balises existantes. Il s agit d un des principaux chevaux de bataille de XML (extensible markup language) et de l architecture des pages en dissociant contenu et présentation. L utilisation de CSS permet la création de pages en XHTML (extensible hypertext markup language). Les pages XHTML sont des pages HTML qui empruntent les règles du XML. Le XHTML est une recommandation officielle depuis le 26 janvier Nous l avons dit : L objectif est de tendre vers la séparation du contenu et de la présentation. XHTML est un premier pas vers XML où la séparation est définitive. De plus, le recours aux feuilles de style permet de centraliser dans un ou plusieurs fichiers distincts la mise en forme des documents HTML. Ainsi les modifications de mise en forme deviennent plus aisées et uniformes. Le XHTML représentera désormais le squelette d un document habillé grâce aux feuilles de style. Nous utilisons actuellement, le XHTML version 1.0, la version 2.0 devrait sortir courant Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 1 / 22 om ( )
2 A.1. Déclarations de type de document Le document XHTML commence par la balise : <?xml version="1.0" encoding="utf-8"?>. Les déclarations de formalisme XHTML utilisé doivent être les suivantes : <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " : il s'agit de la version 1, sans support des éléments des versions précédentes ; <DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " : il s'agit de la version 1 avec support des anciennes versions de html ; <DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " : S'applique aux fichiers gérant le multifenêtrage. Ensuite, la balise html doit comprendre les attributs avec les déclarations : xmlns=" xml:lang= fr qui définissent l espace de nommage des éléments xml. Voici le squelette minimal d un page XHTML : <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang= fr lang= fr > <head> <title>titre de votre page</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <link rel="stylesheet" href="votre_style.css" type="text/css"> </head> <body>... </body> </html> Une page XHTML rassemble des liens envers diverses sources : <link /> feuille de style CSS <script ></script> script javascript <!DOCTYPE > page XHTML xhtml1-xxx.dtd Liens externes d un document XHTML Om ( ) Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 2 / 22 om ( )
3 A.2. Document bien formé En XML, le document doit être bien formé, c'est-à-dire respecter des règles : - pas d enchevêtrement de balises ; - les éléments (balises) et leur attributs doivent être écrits en minuscules ; - les valeurs des éléments doivent toujours êtres entre quottes ; - on ne peut utiliser des raccourcis de balises (par exemple : checked, noshade, compact doivent être suivis de leur valeur) ; - les éléments vides comme br ou hr doivent s écrire <br/> ou <br></br> (<hr/> ou <hr></hr>) ; - les scripts externes doivent être préférés, tout comme les feuilles de style externes ; - les éléments doivent être identifiés de façon unique par un attribut id lorsque c est nécessaire, l attribut name sera bientôt abandonné B. Utilisation des feuilles de style B.1. Redéfinition d une balise existante Le principe des feuilles de style est la définition de la mise en forme d un document XHTML. A partir des balises incluses dans le document la feuille de style précise leur présentation, leur positionnement, leur mise en relation avec les autres divisions du document Nous allons inclure une feuille de style qui modifie l aspect des liens : <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang= fr lang= fr > <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>liens de la balise a</title> <link rel= stylesheet href= style.css type= text/css /> </head> <body> <h1>nouveaux liens</h1> Visiter la <a href="fichiers/pagea.html">page A</a> <br /> Visiter la <a href="fichiers/pageb.html">page B</a> </body> </html> Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 3 / 22 om ( )
4 /* Balise a avec ses différents états : link : lien ; hover : souris sur le lien active : lien lors du clic visited : lien visité */ a:link { a:hover { a:active { a:visited { font-family: Arial, Helvetica; font-size: 10pt; color: black; font-family: Arial, Helvetica; font-size: 10pt; color: blue; text-decoration: none; font-family: Arial, Helvetica; font-size: 10pt; font-family: Arial, Helvetica; font-size: 10pt; color: silver; Lorsque le lien n est pas visité (a:link color: black; ) le lien est en noir : Lorsque le lien est visité (a:visited color: silver; ) le lien est en gris : Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 4 / 22 om ( )
5 NB : Le body aurait pu avoir les paramètres <BODY link="black" vlink="silver"> qui auraient produit un résultat similaire. Cependant la feuille de style offre plus de variétés de paramétrage (police, positionnement, sur-lignage, contour ). B.2. Décoration des liens <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang= fr lang= fr > <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>liens avec a:hover</title> <link rel= stylesheet href= style.css type= text/css /> </head> <body> <h1>nouveaux liens</h1> Visiter la <a href="fichiers/pagea.html">page A</a><br /> Visiter la <a href="fichiers/pageb.html">page B</a> </body> </html> /* balise a:hover avec un trait dessus (overline) et dessous (undeline) */ a:hover { font-family: Arial; text-decoration: underline overline; color: #800000; Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 5 / 22 om ( )
6 B.3. Création d une nouvelle classe avec une balise DIV Mise en valeur d un texte avec une nouvelle classe : <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang= fr lang= fr > <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>mise en forme avec une balise div</title> <link rel= stylesheet href= style.css type= text/css /> </head> <body> <h1>nouveau Style</h1> <div class="botitre"> bon bah voilà </div> </body> </html> /* La balise div de classe botitre définie à la fois un positionnement avec position ; top et left ; une mise en forme de l objet avec height, width, border, layer ; et une mise en forme du contenu avec background, font, letter. */ div.botitre { position: absolute; top: 20px; left:400px; height:20px; width: 390px; font-family: Arial; font-size: 12pt; letter-spacing: 5pt; border-style: inset; background-color: silver; layer-backgroud-color: silver; Nous avons défini une nouvelle classe de DIV nommée botitre avec d autres paramètres. Il va de soit que nous aurions pu redéfinir DIV lui-même. L intérêt et de pouvoir définir autant de sous classes de DIV que de besoin. Il convient à présent de distinguer l utilisation des sélecteurs class et de id. Nous venons d utiliser le sélecteur class pour définir un style particulier de div (class="botitre"). On peut aussi définir une classe générale applicable à plusieurs balises différentes (cf. plus bas). On peut également définir un Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 6 / 22 om ( )
7 style propre à une balise : on le définit alors avec un # dans la feuille de style puis on l attribue à la balise avec id. B.4. La balise DIV et les styles Avec la balise DIV vous allez pouvoir modifier l'aspect d'un ou plusieurs paragraphes à l'aide de classes ou sous-classes se trouvant un fichier externe (ce qu il est conseillé de faire). De même vous pouvez effectuer ces effets en proposant un style appliqué directement au paragraphe. Cette balise DIV est souvent associée avec "class" (et "id") et se retrouve souvent pour positionner un élément. B.4.1. Utilisation usuelle d une balise DIV <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang= fr lang= fr > <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>utilisations de la balise DIV</title> <link rel= stylesheet href= style.css type= text/css /> </head> <body> utilisation des classes ou sous-classes : <div class="marge">avec le choix de la sous-classe ".marge" vous obtenez d'abord sa spécificité d'un écartement de 75px du bord de la marge gauche et d'un texte en italique. Pour le reste il y a héritage direct du parent "p" </div> </body> </html>.marge { margin-left: 75px; font-style: italic; Les styles définis sont applicables à plusieurs balises, pas uniquement DIV. Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 7 / 22 om ( )
8 B.4.2. Les héritages de styles Il est possible d utiliser le principe de l héritage entre définitions de balises. Par exemple définir une classe et prévoir le sort de tous les éléments qui seront définis dans cette classe et leurs spécificités : <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang=?fr? lang=?fr?> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>héritages des balises</title> <link rel="stylesheet" href="style1.css" type="text/css" /> </head> <body> <h1>test avec héritage</h1> <div class="liste1"> <ol start="20" compact="compact"> <li>qu EST CE QU INTERNET?</li> <li>d OU VIENT INTERNET?</li> <ul type="square"> <li>historique.</li> <li>le projet SAGE.</li> <li>naissance de la téléinformatique.</li> <li>arpanet l ancêtre d INTERNET.</li> </ul> <li>limites D INTERNET</li> </ol> </div> <h1>test sans héritage</h1> <ol start="20" compact="compact"> <li>qu EST CE QU INTERNET?</li> <li>d OU VIENT INTERNET?</li> <ul type="square"> <li>historique.</li> <li>le projet SAGE.</li> <li>naissance de la téléinformatique.</li> <li>arpanet l ancêtre d INTERNET.</li> </ul> <li>limites D INTERNET</li> </ol> </body> </html>.liste1 { font-family: Verdana; font-size: 10pt; letter-spacing: 2pt; border-style: solid; background-color: silver; border-color: blue;.liste1 ol { color: orange; Dans cet exemple, les éléments LI contenus dans une classe liste1 seront oranges. Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 8 / 22 om ( )
9 B.4.3. Déclaration du style au sein de la balise DIV Dans des cas tout à fait exceptionnels on peut définir le style dans la balise elle-même. Il n est pas recommandé d agir de la sorte. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang= fr lang= fr > <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>utilisations de la balise DIV</title> <link rel= stylesheet href= style.css type= text/css /> </head> <body> utilisation de votre "style" personnel : <div style="font-family: verdana, times, sans-serif; color: green; font-size: 12pt; text-decoration: underline; background-color: #FFFFFF;"> Ici vous ne tenez plus compte des règles CSS mais appliquez un STYLE de votre choix à un ou plusieurs paragraphes de votre page. De ce fait il n'y a plus notion d'héritage et vous devez reprendre les déclarations conformes à ce langage. </div> </body> </html> Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 9 / 22 om ( )
10 B.4.4. Application d un style sur une balise de paragraphe Il est possible de définir un ou plusieurs paragraphes qui prennent, outre les styles habituels, une couleur de fond propre à faire ressortir le contenu à l'aide d'une déclaration associée à DIV. Notez que pour rester en conformité avec les services de validation du CSS il faut ajouter la déclaration "color:xxxx" qui comme toujours vient suppléer les navigateurs anciens qui ne supporteraient pas les feuilles de style. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang= fr lang= fr > <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>utilisations de la balise P</title> <link rel= stylesheet href= style.css type= text/css /> </head> <body> utilisation de votre "style" personnel : <p class="jaune">c'est jaune</p> <p class="vert">c'est vert</p> </body> </html>.jaune { background-color: #FFFF00;.vert { background-color: #00FF00; Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 10 / 22 om ( )
11 B.4.5. Balise DIV avec regroupement des propriétés Voici une mise en place de règles pour un paragraphe avec l'aide de la balise DIV, qui offre l'avantage de réduire le code source sans modifier le résultat. <?xml version="1.0" encoding="utf-8"?> <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang= fr > <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>utilisations de la balise DIV</title> <link rel= stylesheet href= style.css type= text/css /> </head> <body> utilisation de plusieurs "styles" personnels : <div class="essai-texte essai-fond essai-grand"> Les feuilles de style CSS. Les feuilles de style CSS. Les feuilles de style CSS. Les feuilles de style CSS. Les feuilles de style CSS. Les feuilles de style CSS. Les feuilles de style CSS. Les feuilles de style CSS. Les feuilles de style CSS. Les feuilles de style CSS. Les feuilles de style CSS. Les feuilles de style CSS. </div> </BODY> </HTML>.essai-texte {.essai-grand { font-style: italic; color: green; font-size: 16pt;.essai-fond { background-color: #CCFF99; B.5. Exemple complet de mise en forme d un document Cet exemple montre une structure de, page plus élaborées. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="fr" lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>ma page avec</title> <link rel="stylesheet" href="css/monstyle.css" type="text/css"/> </head> Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 11 / 22 om ( )
12 <body> <span class="menu"> <b>menu :</b><br/> - Aller chez <a href=" - Aller à <a href="mapage1.html">mapage 1</a><br /> - et puis voilà... </span> <h1 class="haut">voici une nouvelle page</h1> Texte qu'on a envie d'écrire. <div class="blabla"> Ici il y a du texte, et des choses intéressantes, des bidules.<br/> Et du blabla. </div> </body> </html> /* style du fond de page, de la police par défaut */ body { background-image: url("../images/fond_gris.jpg"); font-family: Arial,Verdana; color: #ffffff; /* style du titre principal*/ h1.haut { color: #006611; background: #000000; width: 50; /* style cadre à gauche */ div.blabla { background: #665533; color: yellow; font-family: Verdana; font-size: 12pt; margin: 20px; padding: 10px; width: 200px; border-style: outset; border-color: green; border-width: thin; /* style du titre à droite avec les liens */ span.menu { background: skyblue; color: black; font-size: 11pt; margin-top: 100px; float: right; width: 150px; height: 5cm; padding: 4px; border-top-style: solid; Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 12 / 22 om ( )
13 border-top-color: red; border-top-width: thin; border-bottom-style: solid; border-bottom-color: red; border-bottom-width: thin; /* style des liens */ a:link { text-decoration: none; color: orange; a:hover { background: black; color: yellow; text-decoration: overline underline; a:visited { text-decoration: none; color: orange; Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 13 / 22 om ( )
14 B.6. Les sélecteurs Les sélecteurs permettent d ajuster la mise en forme des documents. Des exemples d utilisation des sélecteurs sont donnés dans le chapitre XML. B.6.1. Sélecteurs d attribut : note[niveau="moyen"] { note[niveau] *[niveau] bts[stat~="admis"] { div#debut Elément contenant une valeur d attribut particulière. Elément contenant un attribut NIVEAU. Tous les éléments ayant un attribut NIVEAU. Elément contenant un mot particulier dans leur valeur d attribut. Les éléments qui possèdent des ID uniques peuvent être désignés par leur numéro d ID et avoir une mise en forme dédiée dans la feuille de style. B.6.2. Sélecteurs de pseudo-classes : div:first-child a:link a:visited a:active a:hover a:focus *:lang Vise la mise en forme du premier élément enfant de l élément nommé. Lien non encore visité. Lien visité. Lien sur lequel on est en train de cliquer. Lien sur lequel passe la souris non encore activé. Lien sur lequel il y a le focus. Désigne tous les éléments (avec le sélecteur universel *) qui ont une langue. B.6.3. Sélecteurs de pseudo-éléments : xxx:first-letter xxx:first-line xxx:before xxx:after Première lettre de l élément (par exemple pour faire une lettrine). Première ligne d un élément. Avant l élément (par exemple insérer du texte avant l élément). Après l élément. Olivier Mondet Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 14 / 22 om ( )
15 Annexe : principales propriétés pour les CSS (selon le site -Reference) - traduction O. Mondet Eléments de fond background Spécifie toutes les valeurs possibles du fond en background-color une seule déclaration. background-image background-repeat background-attachment background-position background-attachment Indique si le fond doit se dérouler avec le contenu de la page ou rester fixe. scroll fixed inherit background-color Spécifie la couleur de fond de l élément. color-rgb color-hex color-name transparent background-image Spécifie l image de fond à utiliser. url none background-position Spécifie la position de départ d une image de fond. top left top center top right center left center center center right bottom left bottom center bottom right x- y- x-pos y-pos background-repeat Spécifie si l image de fond doit être répétée. repeat repeat-x repeat-y no-repeat inherit Dimension height Spécifie la hauteur d un élément. auto line-height Spécifie la distance entre les lignes d un texte. normal number max-height Spécifie la hauteur maximale d un élément. none max-width Spécifie la largeur maximale d un élément. none min-height Spécifie la hauteur minimale d un élément. min-width Spécifie la largeur minimale d un élément. width Spécifie la largeur d un élément. auto Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 15 / 22 om ( )
16 Bordure border border-bottom Spécifie toutes les valeurs possibles de la bordure en une seule déclaration. Spécifie toutes les valeurs possibles de la bordure basse en une seule déclaration. border-width border-style border-color border-bottom-width border-style border-color border-bottom-color Spécifie la couleur de la bordure basse. border-color border-bottom-style Spécifie le style de la bordure basse. border-style border-bottom-width Spécifie l épaisseur de la bordure basse. thin medium thick border-color Spécifie la couleur de la bordure. color border-left Spécifie toutes les valeurs possibles de la bordure gauche en une seule déclaration. border-left-width border-style border-color border-left-color Spécifie la couleur de la bordure gauche. border-color border-left-style Spécifie le style de la bordure gauche. border-style border-left-width Spécifie l épaisseur de la bordure gauche. thin medium thick border-right Spécifie toutes les valeurs possibles de la bordure droite en une seule déclaration. border-right-width border-style border-color border-right-color Spécifie la couleur de la bordure droite. border-color border-right-style Spécifie le style de la bordure droite. border-style border-right-width Spécifie l épaisseur de la bordure droite. thin medium thick border-style Spécifie le style de la bordure : none (par défaut), hidden (caché), dotted (pointillés), dashed (tirets), solid (trait continu), double (double trait continu), groove (cannelure), ridge (relief), inset (incrustation), outset (autre relief).. border-top Spécifie toutes les valeurs possibles de la bordure haute en une seule déclaration. none hidden dotted dashed solid double groove ridge inset outset border-top-width border-style border-color border-top-color Spécifie la couleur de la bordure haute. border-color border-top-style Spécifie le style de la bordure haute. border-style border-top-width Spécifie l épaisseur de la bordure haute. thin medium thick border-width Spécifie l épaisseur de la bordure. thin medium thick Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 16 / 22 om ( )
17 Disposition clear Spécifie si une boîte flottante peut se positionner à côté d un objet. left right both inherit none cursor Spécifie le type de pointeur affiché. url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help display Spécifie de façon simple le formatage d un élément. float Spécifie une boîte flottante. left right none position Spécifie la position d un élément. static relative absolute fixed visibility Spécifie si un élément est visible ou non en transparence. none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption visible hidden collapse Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 17 / 22 om ( )
18 Polices de caractères font Spécifie toutes les valeurs possibles de la police en une seule déclaration. font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar font-family Spécifie le type de police (Arial, Verdana ). family-name generic-family font-size Spécifie la taille de la police. xx-small x-small small medium large x-large xx-large smaller larger font-size-adjust font-stretch Spécifie l aspect de la police qui lui permettra de garder sa hauteur. Spécifie le rétrécissement ou l expansion d une police. none number font-style Spécifie le style de la police. normal italic oblique font-variant Spécifie l affichage d un texte en police normal ou en police petites majuscules. normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded normal small-caps font-weight Spécifie la grosseur d une police. normal bold bolder lighter Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 18 / 22 om ( )
19 Eléments de liste, puces list-style list-style-image list-style-position Spécifie toutes les valeurs possibles d éléments de liste en une seule déclaration. Spécifie une image comme puce d un élément de liste. Spécifie où se trouve la puce d un élément de liste. list-style-type list-style-position list-style-image none url inside outside list-style-type Spécifie l affichage par défaut d une puce. none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha marker-offset Spécifie la taille d une puce. auto Marge margin margin-bottom margin-left margin-right margin-top Spécifie toutes les valeurs possibles d une marge en une seule déclaration. Spécifie la taille de la marge en-dessous de l élément. Spécifie la taille de la marge à gauche de l élément. margin-top margin-right margin-bottom margin-left auto auto Spécifie la taille de la marge à droite de l élément. auto Spécifie la taille de la marge au-dessus de l élément. auto Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 19 / 22 om ( )
20 Contours des éléments outline Spécifie toutes les valeurs possibles d un contour en une seule déclaration. outline-color Spécifie la couleur du contour. color invert outline-color outline-style outline-width outline-style Spécifie le style du contour. none dotted dashed solid double groove ridge inset outset outline-width Spécifie l épaisseur du contour d un element. thin medium thick Remplissage des éléments padding Spécifie toutes les valeurs possibles du remplissage en une seule déclaration. padding-bottom padding-left Spécifie la taille du remplissage bas d un élément. Spécifie la taille du remplissage gauche d un élément. padding-right Spécifie la taille du remplissage droit d un élément. padding-top Spécifie la taille du remplissage haut d un élément. padding-top padding-right padding-bottom padding-left Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 20 / 22 om ( )
21 Positionnement bottom Spécifie l éloignement bas d un élément par rapport à l élément parent (au-dessus ou audessous). clip left overflow right top Spécifie la forme d un élément (l élément est façonné dans la forme puis affiché). Spécifie l éloignement gauche d un élément par rapport à l élément parent (au-dessus ou audessous). Spécifie ce qu il advient si le contenu d un élément dépasse son espace. Spécifie l éloignement droit d un élément par rapport à l élément parent (au-dessus ou audessous). Spécifie l éloignement haut d un élément par rapport à l élément parent (au-dessus ou audessous). auto shape auto auto visible hidden scroll auto auto auto vertical-align Spécifie l alignement vertical d un élément. baseline sub super top text-top middle bottom text-bottom z-index Spécifie le numéro d ordre d empilement d un élément. auto number Tableau border-collapse Spécifie la bordure d un tableau. collapse separate border-spacing Spécifie la distance entre les bords de cellules adjacentes (uniquement avec border-collapse définit avec "separate "). caption-side Spécifie la position du contenu. top bottom left right empty-cells Spécifie si les cellules vides auront une bordure show ou non (uniquement avec border-collapse définit hide avec "separate "). table-layout Spécifie la presentation du tableau. auto fixed Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 21 / 22 om ( )
22 Texte color Spécifie la couleur du texte. color content Insertion de texte libre. texte direction Spécifie l orientation du texte (ltr veut dire left to right). letter-spacing Augmente ou diminue l espace entre les caractères. ltr rtl normal text-align Spécifie l alignement du texte dans un élément. left right center justify text-decoration Spécifie le style d un texte. none underline overline line-through blink text-indent text-shadow Spécifie le retrait d alinéa de la première ligne d un texte. Spécifie la couleur et/ou la taille de l hombre d un texte. none color text-transform Permet la transformation de la casse d un texte. none capitalize uppercase lowercase white-space Indique qu il faut respecter tous les espacements contenus dans un élément sans avoir à utiliser la balise <BR />. normal pre nowrap word-spacing Augmente ou diminue l espace entre les mots. normal Olivier Mondet Ch.4 - Le Langage XHTML avec Les Feuilles de Style CSS.doc page 22 / 22 om ( )
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
.. 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
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
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
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?
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
SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE
SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SITE INTERNET DE L ASSOCIATION Diapositive 1 RAPPORT DE PROJET Site internet de l association INTRODUCTION 1) Je m appelle Léonard STRONG. 2) Oral de présentation
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
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
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...
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
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...
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
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
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
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
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é
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
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
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
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
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.
ENVOI EN NOMBRE DE Mails PERSONNALISES
MAILING ENVOI EN NOMBRE DE Mails PERSONNALISES 2 Téléchargement 3 Installation 6 Ecran d accueil 15 L envoi de mails 22 Envoi d un document HTML crée avec Word (envoi en base 64) 25 Le compte courriel
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
Les sites web avec NVU
Les sites web avec NVU Table Des Matières Les sites web avec NVU Les bases du web Les protocoles réseaux Le Web Uniform Resource Locator Recherche d'informations Création et gestion d un site Web Utiliser
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
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
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,
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
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
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
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,
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
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
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
Module : programmation site Web dynamique Naviguer entre les pages via site map
Module : programmation site Web dynamique Naviguer entre les pages via site map Soit le site web suivant qui est constitué de six pages web : On veut créer un menu constitué de trois nœuds principaux générale
Architecture Multi-Niveaux
Architecture Multi-Niveaux Patrick FELIX (felix@labri.fr) Franck RUBI (rubi@labri.fr) Département Informatique IUT Bordeaux1 12 novembre 2007 Architecture Multi-Niveaux 1 Plan 1. Introduction : vers une
www.evogue.fr SUPPORT DE COURS / HTML
L i a m T A R D I E U www.evogue.fr SUPPORT DE COURS / HTML Sommaire Sommaire... 2 Présentation... 3 Introduction... 3 Fonctionnement... 3 Historique... 4 Navigateurs... 6 Définition... 6 Historiquement...
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
{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
Sommaire. 1/ Grille. 2/ Specs globales. 3/ Specs HP. 4/ Specs Questions. 5/ Specs Offre. 6/ Specs Faq. 7/ Comportements interactifs
Sommaire 1/ Grille 2/ Specs globales 3/ Specs HP 4/ Specs Questions 5/ Specs Offre 6/ Specs Faq 7/ Comportements interactifs 1/ Grille et breakpoints Desktop :
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
Petite définition : Présentation :
Petite définition : Le Web 2.0 est une technologie qui permet la création de réseaux sociaux, de communautés, via divers produits (des sites communautaires, des blogs, des forums, des wiki ), qui vise
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
CREATION d UN SITE WEB (INTRODUCTION)
CREATION d UN SITE WEB (INTRODUCTION) Environnement : World Wide Web : ordinateurs interconnectés pour l échange d informations ( de données) Langages : HTML (HyperText Markup Language) : langages pour
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
// HTML, Javascript XHTML & CSS
design graphique / web design // HTML, Javascript XHTML & CSS version 1.0 date 28 / 04 / 2010 auteur Loïc Swiny contact mr@sweeen.com // sommaire HTML 01. Introduction au langage HTML 02. Introduction
< 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
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
Guide technique d accessibilité pour la création et la refonte des sites Web de l administration publique. Date : Juillet 2010 Version 1.
Guide technique d accessibilité pour la création et la refonte des sites Web de l administration publique Date : Juillet 2010 I- Mode d emploi du présent guide technique...5 II- Recommandations pour le
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.
Optimiser les performances d un site web. Nicolas Chevallier Camille Roux
Optimiser les performances d un site web Nicolas Chevallier Camille Roux Intellicore Tech Talks Des conférences pour partager son savoir Le mardi au CICA Sophia Antipolis http://techtalks.intellicore.net
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
Création d'une application WEB avec PHP / MySQL
1 Créer une application WEB avec PHP / MySQL Par Philippe Bousquet Copyright (c) 2003 2008 Philippe Bousquet. 2 Ce livre électronique est une réédition d'un article de préparation d'une
Internet. DNS World Wide Web. Divers. Mécanismes de base Exécution d'applications sur le web. Proxy, fire-wall
Internet DNS World Wide Web Mécanismes de base Exécution d'applications sur le web Divers Proxy, fire-wall 1 Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet
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
Les services usuels de l Internet
Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet Courrier électronique (mail) - protocole SMTP (Simple Mail Transfer Protocol) inclut maintenant tous types
INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)
CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.
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,
101 Réaliser et publier un site WEB
101 Réaliser et publier un site WEB Rapport personnel de module EMF - Section informatique John Baudin Module du.2008 au.2008 Table des matières 1 Introduction... 1 2 Le XHTML... 1 2.1 Les balises... 1
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
Sana Sellami. sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012
Sana Sellami sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012 Connaître les principales techniques pour la création de sites web Se familiariser avec les langages du web Rendre dynamique le
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
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
SYSTÈMES D INFORMATIONS
SYSTÈMES D INFORMATIONS Développement Modx Les systèmes de gestion de contenu Les Content Management Système (CMS) servent à simplifier le développement de sites web ainsi que la mise à jour des contenus.
1 ère Université WEB. Courbevoie Samedi 21 octobre 2006. Votre site interactif sur internet.
1 ère Université WEB Courbevoie Samedi 21 octobre 2006 Votre site interactif sur internet. Programme de la journée. 10H30 - Introduction Université web Votre site interactif sur internet. 10H35 Généralités
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
Dévéloppement de Sites Web
1 Dévéloppement de Sites Web Cours II : Internet et HTML - une très brève introduction Peter Stockinger Séminaire de Maîtrise en Communication Interculturelle à l'institut National des Langues et Civilisations
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...
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
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
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
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
GUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS
GUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS Table des matières Présentation de la plateforme d envoi de courriels... 4 1- Gestion des contacts... 5 1.1. Base de données... 5 1.1.1- Création
NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web
NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des
Le piratage informatique. Rapport de projet. Spécialité Informatique 1 re année. DEJOUR Kévin SOUVILLE Jean-François. Suivi : Mokhtari-Brun Myriam
6, bd maréchal Juin F-14050 Caen cedex 4 Spécialité Informatique 1 re année Rapport de projet Le piratage informatique DEJOUR Kévin SOUVILLE Jean-François Suivi : Mokhtari-Brun Myriam 2 e semestre 2005-2006
Comment insérer une image de fond?
COMMUNICATION VISUELLE Mise en page à l aide d un traitement de texte Comment insérer une image de fond? Image Plein papier ou au Format utile qu est-ce que cela veut dire? La mise en page d un document
Sage 100 CRM - Guide de la Fusion Avancée Version 8. Mise à jour : 2015 version 8
Sage 100 CRM - Guide de la Fusion Avancée Version 8 Mise à jour : 2015 version 8 Composition du progiciel Votre progiciel est composé d un boîtier de rangement comprenant : le cédérom sur lequel est enregistré
Les types de fichiers
Les types de fichiers Tristan Crolard, Sovanna Tan Septembre 2007, m.a.j. septembre 2014 1/41 Tristan Crolard, Sovanna Tan Les types de fichiers disponible sur http://lacl.fr/tan/l1/types_fichiers.pdf
Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014
Identification du contenu des évaluations Septembre 2014 Tous droits réservés : Université de Montréal Direction des ressources humaines Table des matières Excel Base version 2010... 1 Excel intermédiaire
Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org
Les sites Internet dynamiques contact : Patrick VINCENT pvincent@erasme.org Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et
Proxies,, Caches & CDNs
Proxies,, Caches & CDNs Anthony Busson Plan Exemple de page web simple Anatomie du téléchargement d une page web Problématique Définition : Proxy, Reverse Proxy Interception, Redirection Système de cache
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
Le codage informatique
Outils de Bureautique Le codage informatique (exemple : du binaire au traitement de texte) PLAN 3) Le codage binaire 4) Représentation physique des bits 5) Le bit est un peu court... 6) Codage de texte
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
Uniformiser la mise en forme du document. Accélère les mises à jour. Permets de générer des tables de matières automatiquement.
Les styles Table des matières Les styles... 1 1. Tutoriels... 1 2. Pourquoi utiliser les styles?... 1 3. Qu'est-ce qu'un style?... 1 4. Utiliser les styles existants... 2 Afficher les styles... 2 Appliquer
02/02/2011. test 1. Communication visuelle & web. Pao. Principes fondamentaux. Les six principes de base. La mise en page. Module sur trois journées
Communication visuelle & web Module sur trois journées 1, 5 jour : communication print & visuelle 1.5 jour : communication web mise en pratique evaluation sur QCM Vous serez en mesure participer à la conception
Initiation aux techniques du Web. Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr
Initiation aux techniques du Web Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr La balise Intégrer un élément ou un fichier externe (video, audio, flash, pdf ). Le support
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
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
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
Zen, SASS, responsive design
, SASS, responsive design Felip Manyer i Ballester Res Telæ 21 mai 2013 Felip Manyer i Ballester, SASS, responsive design 1/36 Plan 1 Créer un thème sous Drupal Généralités Concepts à mettre en œuvre Typologie
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
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
Optimiser moteur recherche
Optimiser moteur recherche Vous apprennez à inscrire vos sites dans les moteurs de recherche et les optimiser, déjà à la construction Worldsoft SA Inscription de sites Web dans les moteurs de recherche
Atelier de Création de pages Web
Atelier de Création de pages Web par Stéphane Groleau SADC Société d aide au développement de la collectivité de Portneuf http://www.sadcportneuf.qc.ca http://www.reseau-sadc.qc.ca/ http://www.dec-ced.gc.ca/