Le CSS : un complément au HTML

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "Le CSS : un complément au HTML"

Transcription

1 Le CSS : un complément au HTML CSS est l'abréviation de «Cascading Style Sheets». CSS est un langage de style qui définit la présentation des documents HTML. Par exemple, CSS couvre les polices, les couleurs, les marges, les lignes, la hauteur, la largeur, les images d'arrière-plan, les positionnements évolués et bien d'autres choses.

2 Deux façons d'appliquer le style CSS à un document HTML Méthode 1 : Dans la ligne (l'attribut style) <html> <head> <title>exemple</title> </head> <body style="background-color: #FF0000;"> <p>cette page est rouge</p> </body> </html>

3 Méthode 2 : Externe (un lien vers une feuille de style) C est la meilleure. Une feuille de style externe est simplement un fichier texte ayant l'extension «.css». Comme n'importe quel fichier, la feuille de style peut être rangée sur un serveur Web ou sur un disque dur. L'astuce consiste à créer un lien depuis le document HTML vers la feuille de style (style.css). Ce lien peut être créé en une ligne de code HTML : <link rel="stylesheet" type="text/css" href="style/style.css" />

4 La ligne de code doit s'inscrire dans la section d'en-tête du code HTML, c'est-à-dire entre les balises <head> et </head> : <html> <head> <title>mon document</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body>... Plusieurs documents HTML peuvent être reliés à la même feuille de style. En d'autres termes, on peut utiliser un seul fichier CSS pour contrôler la présentation de plusieurs documents HTML qui vont garder la même structure ( ce qui est recommandé )

5 essai.htm <html> <head> <title>mon document</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>ma première feuille de style</h1> </body> </html> style.css body { background-color: #FF0000; } Placez maintenant les deux fichiers dans le même dossier. Songez à sauvegarder les fichiers avec les bonnes extensions (respectivement «.htm» et «.css»)

6 Les couleurs et les arrières-plans Nous voulons tous les titres du document en rouge foncé. Les titres sont tous balisés avec l'élément HTML <h1>. Le code suivant donne aux éléments <h1> une couleur verte. h1 { color: #00FF00; } On peut définir les couleurs avec des valeurs hexadécimales comme dans l'exemple précédent (#00FF00), ou avec les noms des couleurs ("green"), ou avec des valeurs RGB : rgb(0,255,0).

7 La propriété 'background-color' La propriété background-color décrit la couleur d'arrièreplan des éléments. L'élément <body> est le réceptacle de tout le contenu du document HTML. Pour changer la couleur d'arrière-plan d'une page entière, il faudrait donc appliquer la propriété 'background-color' à l'élément <body>.

8 On peut aussi appliquer une couleur d'arrière-plan à d'autres éléments y compris les titres et le texte. Dans l'exemple ci-dessous, Des couleurs d'arrière-plan différentes sont appliquées aux éléments <body> et <h1>. body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; } Vérifier le résultat en modifiant votre CSS et en actualisant la page essai.htm. Remarque : nous avons appliqué deux propriétés à <h1> en les séparant par un point-virgule.

9 Les images d'arrière-plan [background-image] Pour insérer une image en arrière-plan d'une page Web, on applique la propriété background-image à l'élément <body>. body { background-color: #FFCC66; background-image: url("image.gif"); } h1 { color: #990000; background-color: #FC9804; } Cela signifie que l'image se trouve dans le même dossier que la feuille de style. On peut aussi appeler des images dans d'autres dossiers avec url("../images/image.gif"), ou même sur Internet en donnant l'adresse complète du fichier : url("http://www.html.net/image.gif").

10 Répéter l'image d'arrière-plan [background-repeat] Pour insérer une image en arrière-plan d'une page Web, on applique la propriété background-image à l'élément <body>. background-repeat: repeat-x : L'image se répète horizontalement background-repeat: repeat-y : L'image se répète verticalement background-repeat: repeat : L'image se répète horizontalement et verticalement background-repeat: no-repeat : L'image ne se répète pas Exemple : body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; } Vérifier le résultat en modifiant votre CSS et en actualisant la page essai.htm.

11 Positionner une image d'arrière-plan [background-position] Par défaut, l'image d'arrière-plan se positionnera dans le coin supérieur gauche de l'écran. La propriété backgroundposition permet de changer cette position prédéfinie et de placer l'image d'arrière-plan n'importe où à l'écran. background-position: 2cm 2cm : L'image est positionnée à 2 cm de la gauche et à 2 cm du haut de la page background-position: 50% 25% : L'image est positionnée au centre et à un quart de la page vers le bas background-position: top right : L'image est positionnée au coin supérieur droit de la page Vérifier le résultat en modifiant votre CSS et en actualisant la page essai.htm.

12

13 Exemple : body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: scroll; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804;} Vérifier le résultat en modifiant votre CSS et en actualisant la page essai.htm. Il est possible de placer toutes ces propriétés dans une seule ligne : background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

14 La famille de polices [font-family] Exemple : h1 { font-family: arial, verdana, sans-serif; } h2 { font-family: "Times New Roman", serif; } Les titres marqués par des éléments <h1> s'afficheront dans la police "Arial". Si elle n'est pas installée dans l'ordinateur de l'utilisateur, la police "Verdana" sera utilisée à la place. Si ces deux polices sont indisponibles, les titres s'afficheront dans une police de la famille sans-serif. Remarque : le nom de la police "Times New Roman" contient des espaces, et elle est donc listée entre des guillemets.

15 Le style des polices [font-style] Exemple : h1 { font-family: arial, verdana, sans-serif; } h2 { font-family: "Times New Roman", serif; font-style: italic; } Vérifier le résultat en modifiant votre CSS et en actualisant la page essai.htm sans oublier d ajouter un titre h2. Remarque : Plusieurs polices sont déclarées car si la première est absente dans le navigateur, on passe à la suivante La propriété font-style définit si le style de la police concernée doit être normal, italic ou oblique. Dans l'exemple à suivre, tous les titres balisés par des éléments <h2> s'afficheront en italiques.

16 La graisse des polices [font-weight] La propriété font-weight décrit avec quel degré de graisse (ou de «noir») présenter la police. Elle peut avoir une graisse normal ou bold (caractères gras). Certains navigateurs permettent même d'utiliser des nombres entre 100 et 900 (les centaines) pour décrire la graisse de la police. Exemple : p { font-family: arial, verdana, sans-serif; font-weight: bold; } Vérifier le résultat en modifiant votre CSS et en actualisant la page essai.htm sans oublier d ajouter un paragraphe ( <p> texte </p> ).

17 Le corps des polices [font-size] On peut choisir parmi beaucoup d'unités différentes (par exemple, pixels et pourcentages) pour décrire les corps des polices. Exemple : h1 { font-size: 30px; } h2 { font-size: 12pt; } h3 { font-size: 120%; } p { font-size: 1em; } Les unités «px» et «pt» font que le corps de la police est absolu, tandis que «%» et «em» permettent à l'utilisateur de l'ajuster si nécessaire. Il est conseillé utiliser des unités ajustables telles que «%» ou «em». Vérifier le résultat en modifiant les valeurs des fontsize et en actualisant votre page html.

18 L'indentation du texte [text-indent] La propriété text-indent permet de décaler les paragraphes de texte en appliquant une indentation à la première ligne du paragraphe. Dans l'exemple suivant, un alinéa de 30px est appliqué à tous les paragraphes balisés par un élément <p> : Exemple : p { text-indent: 30px; } Vérifier le résultat en en modifiant votre CSS et en actualisant votre page html.

19 L'alignement du texte [text-align] La propriété CSS text-align correspond à l'attribut align utilisé en HTML. Le texte peut être aligné à gauche (left), à droite (right), centré (center) ou justifié justify. Exemple : td { text-align: center; } p { text-align: justify; } Dans l'exemple, le texte du tableau <td> est centré et le texte des paragraphes est justifié. Vérifier le résultat en modifiant votre CSS et en actualisant la page essai.htm sans oublier d ajouter un tableau.

20 La décoration du texte [text-decoration] La propriété text-decoration permet d'ajouter des «décorations» ou «effets» différents au texte. Par exemple, on peut souligner le texte, le barrer, ou tracer un trait audessus, etc. Dans l'exemple suivant, les éléments <h1> sont des titres soulignés, les éléments <h2> sont des titres avec un trait au-dessus et les éléments <h3> des titres barrés. Exemple : h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; } Vérifier le résultat en modifiat votre CSS et en actualisant la page essai.htm sans oublier d ajouter un titre h3.

21 Les propriétés des liens Le CSS permet de définir ces propriétés différemment, selon que le lien est visité, non visité, activé, ou si le curseur le survole. Cela permet d'ajouter des effets plaisants et utiles à vos sites Web Exemple : a:link { color: blue; text-decoration:none; } a:visited { color: purple; text-decoration:none; } a:active { background-color: yellow; text-decoration:none; } a:hover { color:red; text-decoration:none; }

22 Exemple : a {color: blue;} a:link { font-style: italic; } a:visited { color: red; } a:active { background-color: orange; } a:hover { font-weight:bold; } La pseudo-classe :link est utilisée pour les liens menant aux pages que l'utilisateur n'a pas visitées. La pseudo-classe :visited est utilisée pour les liens menant aux pages que l'utilisateur a visitées. La pseudo-classe :active est utilisée pour les liens qui sont activés. La pseudo-classe :hover est utilisée lorsque le pointeur de la souris survole un lien. Vérifier le résultat en modifiant votre CSS et en actualisant la page essai.htm sans oublier d ajouter un lien.

23 Le regroupement avec <span> La balise span permet d ajouter des caractéristiques visuelles à des parties spécifiques du texte des documents ( agit sur une ligne ) Exemple : <ul> </ul> <li>fraise</li> <li> <span class= bizarre > Pomme de terre</span></li> <li>banane</li> <ul> </ul> <li>radis</li> <li> <span class= bizarre > framboise</span></li> <li>carotte</li>

24 Le regroupement avec <span> Code css associé à la balise span : span.bizarre { } color:red; background-color:blue; La partie de texte encadrée par la balise span de classe «bizarre» aura les propriétés ci-dessus. Vérifier le résultat en modifiant votre CSS et en tapant le petit programme html.

25 Le regroupement avec <div> La balise div permet d appliquer des propriétés à plusieurs éléments ( balise de regroupement ) Exemple : <div id= fruits"> <ul> <li>fraise</li> <li>pomme</li> <li>banane</li> </ul> </div> <div id= legumes"> <ul> <li>radis</li> <li>poireaux</li> <li>carotte</li> </ul> </div>

26 Dans notre feuille de style, nous pouvons utiliser le regroupement : #fruits { background:blue; } #legumes { background:red; } Par la suite, nous utiliserons la balise div de façon un peu plus évoluée en positionnant les blocs. Vérifier le résultat en modifiant votre CSS et en complétant votre essai.htm.

27 Le modèle des boîtes

28 Fixer la marge d'un élément [Margin] Un élément a quatre côtés : droit ("right"), gauche ("left"), supérieur ("top") et inférieur ("bottom"). La marge est la distance entre chaque côté et l'élément avoisinant (ou les bordures du document) Comme premier exemple, nous allons voir comment définir les marges du document même, c'est-à-dire de l'élément <body>.

29 body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; } Ou bien plus élégant et concis : body { margin: 100px 40px 10px 70px; } Nous pouvons appliquer cela à d autres balises : body { margin: 100px 40px 10px 70px; } p { margin: 5px 50px 5px 50px; }

30 En définissant l'espacement des titres, on change le remplissage autour du texte dans chaque titre : Exemple : h1 { background-color: yellow; padding: 20px 20px 20px 80px; } h2 { background-color: orange; padding-left:120px; } padding décale l emplacement du texte sans toucher à l arrière plan contrairement à margin qui change également l arrière plan. Ajouter ces 2 lignes au CSS de la page 26 puis modifier l HTML de la page 25 en ajoutant une balise <h1> et une balise <h2> puis vérifier le résultat. Modifier le padding en margin puis vérifier le résultat.

31 Les bordures L'épaisseur des bordures [border-width] L'épaisseur des bordures est définie par la propriété borderwidth, dont les valeurs peuvent être "thin", "medium" et "thick", ou une valeur numérique en pixels. La figure cidessous illustre le système :

32 La couleur des bordures [border-color] La propriété border-color définit la couleur d'une bordure. Des valeurs de couleur normales sont, par exemple, "#123456", "rgb(123,123,123)" ou "yellow". Les types de bordures [border-style] On peut choisir parmi plusieurs types de bordures. Voici huit types de bordures différentes. Toutes les bordures ont la couleur "gold" et une épaisseur valant "thick" mais elles peuvent naturellement s'afficher dans d'autres couleurs et épaisseurs. On peut utiliser les valeurs "none" ou "hidden" si on ne veut aucune bordure.

33 Les types de bordures [border-style]

34 Les trois propriétés décrites précédemment peuvent être réunies pour chaque élément et donc produire des bordures différentes. Définissons des bordures différentes pour <h1>, <h2>, <ul> et <p>. Le résultant n'est peut-être pas très beau mais il montre quelques-unes des nombreuses possibilités : h1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } p { border-width: 1px; border-style: dashed; border-color: blue; } ul { border-width: thin; border-style: solid; border-color: orange; } Les lignes peuvent également s écrire : h1 { border: thick dotted gold; } h2 { border: 20px outset red; } p { border: 1px dashed blue; } ul { border: thin solid orange; } Modifier le CSS et vérifier le résultat sur votre page html.

35 La taille des boites : Fixer la largeur [width] et la hauteur [height] La hauteur de boite est fixée à 500 px et la largeur à 200 px Exemple : #boîte { height: 500px; width: 200px; border: 1px solid black; background: orange; } La balise div a maintenant une dimension bien définie avec une bordure solide noire et un fond orange. Par la suite, nous différentierons plusieurs balises div en leur donnant un identifiant. Vérifier le résultat sur votre page html en appliquant une balise div sur un morceau de programme.

36 Les éléments flottants (les flottants) Un élément peut avoir une position flottante à droite ou à gauche avec la propriété float. C'est-à-dire que la boîte et son contenu peuvent flotter soit à droite, soit à gauche dans un document (ou dans la boîte conteneur)

37 Si par exemple nous voulions qu'un texte s'enroule autour d'une image, le résultat serait le suivant :

38 Voici le code HTML de l'exemple précédent : <div id="picture"> <img src="bill.jpg" alt="bill Gates"> </div> <p>je ne vais pas écrire tout le texte car il est trop long! </p> Pour que l'image flotte à gauche et que le texte l'entoure, il suffit de définir la largeur de la boîte entourant l'image puis de donner à la propriété float la valeur "left". Notons que nous avons donner un identifiant à la balise div pour que les nouvelles propriétés ne concernent que cette balise #picture { float:left; width: 220px; } Créer les fichiers HTML et CSS correspondants de façon à avoir une boîte contenant le texte et l image.

39 Les flottants peuvent aussi servir pour le colonage d'un document. Pour créer les colonnes, il suffit de les structurer dans le code HTML avec des éléments <div> de la façon suivante : <div id="column1"> <p>texte1, Texte1,Texte1,Texte1,Texte1,Texte1</p> </div> <div id="column2"> <p>texte2, Texte2, Texte2, Texte2, Texte2, Texte2</p> </div> <div id="column3"> <p>texte3, Texte3, Texte3, Texte3, Texte3, Texte3</p> </div>

40 Une fois fixée la largeur des colonnes (par exemple à 33%), on fait simplement flotter chaque colonne à gauche en définissant la propriété float : #column1 { float:left; width: 33%; } #column2 { float:left; width: 33%; } #column3 { float:left; width: 33%; } La propriété float admet les valeurs "left", "right" ou "none". Reprenez les programmes html et CSS de la page 40. Vous compléterez l html avec : <h3> Voici une liste non ordonnée de condiments </h3> <div id= " colonne3 " > <ul> <li>curry</li> <li>paprika</li> <li>muscade</li> </ul> </div> Normalement la mise en page commence à devenir plus pratique avec cette méthode.

41 Le principe du positionnement CSS Le principe du positionnement CSS fait que l'on peut positionner une boîte n'importe où dans le système de coordonnées.

42 Le principe du positionnement CSS

43 Si nous voulons positionner un titre h1 à 100px du haut et à 200px de la gauche du document, notre code CSS pourrait être le suivant : h1 { position:absolute; top: 100px; left: 200px; } Tester avec un programme html simple : <html> <head> </head> <body> </body> </html> <title> positionnement </title> <h1> titre en position. </h1> le positionnement CSS est une technique de placement très précise des éléments. Elle est beaucoup plus facile que l'utilisation de tables, d'images transparentes ou autres choses.

44 Le positionnement absolu On place un élément en position absolue en fixant la valeur de la propriété position à "absolute". On peut alors utiliser les propriétés left, right, top et bottom pour placer la boîte. #box1 { position:absolute ; top: 50px; left: 50px; background-color:blue;} #box2 { position:absolute; top: 50px; right: 50px; background-color:green; } #box3 { position:absolute; bottom: 50px; left: 50px; background-color:yellow; } #box4 { position:absolute; bottom: 50px; right: 50px; background-color:red; } Ajouter à votre page html de la page 43, 4 balises div que nous remplirons avec un petit texte et compléter votre CSS. Vous pouvez ajouter un background-color pour rendre la boite plus visible. Pour mieux comprendre les effets de ce positionnement, ajouter du texte dans des balises <h1> afin de pouvoir faire défiler plusieurs écrans.

45 Le positionnement relatif Pour un élément en position relative, elle est calculée d'après sa position originale dans le document. Cela signifie que l'on déplace l'élément vers la droite, la gauche, le haut ou le bas. C est un décalage par rapport à sa position. #box1 { position:absolute; left: 150px; top: 150px; } #box2 { position:relative; right: 150px; top: 300px; } #box3 { position:relative; left: 50px; top: 200px; } #box4 { position:relative; left: 100px; bottom: 100px; } Modifier votre CSS et vérifier le résultat en actualisant votre page html. Modifier les valeurs afin de bien comprendre le fonctionnement de ce type de positionnement.

46 Le positionnement fixed Comme son nom l indique, la position des boites restent fixe. #box1 { position:fixed; top: 50px; left: 50px; background-color:blue;} #box2 { position:fixed; top: 50px; right: 50px; background-color:green; } #box3 { position:fixed; bottom: 50px; left: 50px; background-color:yellow; } #box4 { position:fixed; bottom: 50px; right: 50px; background-color:red; } Modifier votre CSS et vérifier le résultat faisant défiler les différents écrans de votre page htlm.

47

48 Une couche sur une couche avec z-index Il peut arriver que certains éléments se superposent. Z-index nous permet de choisir l'ordre dans lequel les éléments se recouvrent. Le système est tel qu'un élément de numéro supérieur recouvre ceux de numéro inférieur.

49 #box1 {position: absolute; left: 100px; top: 100px; z-index: 1; } #box2 { position: absolute; left: 180px; top: 180px; z-index: 2; } #box3 { position: absolute; left: 260px; top: 260px; z-index: 3; } #box4 { position: absolute; left: 340px; top: 340px; z-index: 4; } #box5 { position: absolute; left: 420px; top: 420px; z-index: 5; } La méthode est relativement simple mais les possibilités nombreuses. On peut placer des images sur du texte, ou du texte sur du texte. A l aide des images de carte à jouer fournies, programmer les fichiers html et CSS donnant le résultat de la page 48. Modifier le CSS et vérifier le résultat en actualisant votre page html.

50 Il existe plusieurs façons de fabriquer un site web plus facilement : Utiliser des GABARITS qui fournissent le CSS que l on peut modifier à sa guise. Utiliser des frameworks comme bootstrap et des templates où la structure est déjà établie et compatible avec l affichage des smartphones Utiliser des site comme wix qui permettent de générer un site sans toucher au code. Remarque : le code généré automatiquement n est pas optimisé ( pas très webmaster ).

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

TUTORIEL «REDIMENSIONNER UNE IMAGE»

TUTORIEL «REDIMENSIONNER UNE IMAGE» Mise à jour du 20 mai 2010 TUTORIEL «REDIMENSIONNER UNE IMAGE» Guide incluant la procédure de téléchargement d un logiciel gratuit Ce tutoriel est un pas-à-pas très détaillé. Cette prise de parti explique

Plus en détail

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

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

Plus en détail

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

Conception de sites web. Feuille de styles CSS

Conception de sites web. Feuille de styles CSS Conception de sites web Feuille de styles CSS M i s e e n p a g e : s o l u t i o n «v i e i l l e é c o l e» Mise en page par et par Long Vite illisible Peu souple Difficile à modifier

Plus en détail

Par défaut, les éléments de type bloc seront affichés dans une succession verticale.

Par défaut, les éléments de type bloc seront affichés dans une succession verticale. Le positionnement Par défaut, les éléments de type bloc seront affichés dans une succession verticale. Une boîte jaune Une boîte verte Les principaux éléments de type bloc sont : l'élément div ; les titres

Plus en détail

Programmation Web TP2 CSS i

Programmation Web TP2 CSS i Programmation Web TP2 CSS i Objectifs : Construction d'une page web : comprendre et utiliser un fichier CSS ; définir la structure d'une page web ; Consignes et Pré-requis Lire attentivement cet énoncé

Plus en détail

Introduction aux feuilles de styles

Introduction aux feuilles de styles Introduction aux feuilles de styles 1. Introduction Cette technologie a été introduite par Microsoft avec la version 3.0 (1996) avec pour but de modifier le contenu d'une page par une grande variété d'effets

Plus en détail

2011-2012. Intro Web. PICARD GRAVEL Marie-Eve

2011-2012. Intro Web. PICARD GRAVEL Marie-Eve Intro Web 2011-2012 «nous donnerons tout d'abord les définitions de l'internet, du Web et du langage XHTML. Nous expliquerons ensuite ce qu'est une url et les différentes actions induites lorsque je demande

Plus en détail

Publisher Version 98 LES PREMIERS PAS

Publisher Version 98 LES PREMIERS PAS GENERALITES : Publisher Version 98 LES PREMIERS PAS Publisher est un logiciel de PAO (Publication assistée par ordinateur). Facile d'emploi grâce aux menus déroulants, il permet d'élaborer et d'éditer

Plus en détail

p,ul,li,td { font-size : 100%; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; background-color : white; }

p,ul,li,td { font-size : 100%; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; background-color : white; } Enregistrer la feuille de style "style.css" mettre dans l'en-tête de la page html (entre les balises ) : mettre dans l'en-tête de

Plus en détail

Création d un Site Web

Création d un Site Web Session2 Etapes Faciles Pour Réussir Sur Internet Création d un Site Web Mounir_ahlyege@hotmail.com 1 CSS :Cascading Style Sheets en français feuilles de style en cascade C'est un autre langage qui vient

Plus en détail

Les feuilles de Style HTML : CSS

Les feuilles de Style HTML : CSS Les feuilles de Style HTML : CSS Tarek Melliti Laboratoire IBISC (Informatique Biologie Intégrative et Systèmes Complexes) tarek.melliti@ibisc.univ-evry.fr Plan du cours Séances 1 : Introduction à l informatique

Plus en détail

SUPPORT FORMATION Publisher 2007 initiation.

SUPPORT FORMATION Publisher 2007 initiation. SUPPORT FORMATION Publisher 2007 initiation. Sommaire I. INTRODUCTION... 4 1. Avantage de Publisher... 4 2. Composition prédéfinies... 5 3. Composants indépendants et déplaçables... 5 4. Les atouts des

Plus en détail

CSS. Thierry Lecroq. Université de Rouen FRANCE. Thierry Lecroq (Univ. Rouen) CSS 1 / 50

CSS. Thierry Lecroq. Université de Rouen FRANCE. Thierry Lecroq (Univ. Rouen) CSS 1 / 50 CSS Thierry Lecroq Université de Rouen FRANCE Thierry Lecroq (Univ. Rouen) CSS 1 / 50 Plan 1 Généralités sur les CSS 2 Les sélecteurs 3 Les propriétés 4 le dimensionnement et le positionnement Thierry

Plus en détail

Bac Professionnel Systèmes Electroniques Numériques

Bac Professionnel Systèmes Electroniques Numériques DR - Création d un site WEB TP Le HTML Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de taper simplement le texte qu'il y aura dans son site, il faut aussi

Plus en détail

VII - Layout d interface

VII - Layout d interface Introduction à l Interaction Homme-Machine (IIHM) VII - Layout d interface.contrôler positions et dimensions.arrangement automatique Stéphane Huot Dpt. Informatique DUT Info - S2 2013-2014 Attention hippies.

Plus en détail

COMMENT INSTALLER MON LOGICIEL?

COMMENT INSTALLER MON LOGICIEL? COMMENT INSTALLER MON LOGICIEL? 1 SOMMAIRE ETAPE 1 : ACCES AU SITE EBP... 3 ETAPE 2 : CHOIX DU PRODUIT... 4 ETAPE 3 : TELECHARGEMENT... 5 ETAPE 4 : IDENTIFICATION... 6 1- J ai déjà un compte EBP... 7 2-

Plus en détail

Introduction à la conception de sites web

Introduction à la conception de sites web Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 9-16 janvier 2006 1- Les grands principes du web (1) Client / serveur réseau programmes communicants

Plus en détail

TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels

TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels HTML feuilles de style en cascade (CSS) Lévis Thériault, hiver 2009 CSS (feuilles de style en cascade) CSS: Cascading

Plus en détail

<link rel = stylesheet  type = text / css  href = monstyle. css  /> Programmation Web AGRAL-3 et MTX-3, 2012-13 SÃl ance TP N o 5 Mars 2013 Objectifs Langage CSS Interactions HTML/CSS Manipulation [Où mettre ses fichiers? ] Pour ce TP vous allez mettre votre fichier HTML

Plus en détail

CSS. CSS : propriétés. Texte : text-align, text-decoration, text-indent, font-weight, font-family, font-style, font-size

CSS. CSS : propriétés. Texte : text-align, text-decoration, text-indent, font-weight, font-family, font-style, font-size CSS s de propriétés en CSS Manuele Kirsch Pinheiro Manuele.Kirsch-Pinheiro@univ-paris1.fr Remerciements Mes sincères remerciements aux collègues de l IUT Nancy Charlemagne pour leur aide lors de mon passage

Plus en détail

Code ILU Questions fréquentes

Code ILU Questions fréquentes Code ILU Questions fréquentes 1) Notre société possède déjà un code BIC pour le trafic maritime. Avons-nous également besoin d un code ILU? Conformément à la norme ISO 6346, le code BIC sert à marquer

Plus en détail

Liste des propriétés CSS

Liste des propriétés CSS Liste des propriétés CSS Cette page est une liste non exhaustive des propriétés CSS qui existent, le but étant de réunir sur une même page un maximum de propriétés CSS. Cette liste se concentre sur les

Plus en détail

Une (petite) initiation au langage HTML

Une (petite) initiation au langage HTML Une (petite) initiation au langage HTML Julien Coulié Partie 1 : Les bases Le langage HTML (HyperText Markup Language) est un langage de description de documents qui est le standard utilisé pour les pages

Plus en détail

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations

Plus en détail

MANUEL UTILISATEUR O T Y S GESTIONNAIRE DE NEWSLETTERS

MANUEL UTILISATEUR O T Y S GESTIONNAIRE DE NEWSLETTERS MANUEL UTILISATEUR O T Y S GESTIONNAIRE DE NEWSLETTERS A D R E S S E E T C O N T A C T S OTYS France INTERNET : www.otys.fr 22, boulevard de Stalingrad 92320 CHATILLON EMAIL : T : 01 46 12 11 07 Général

Plus en détail

1 Utilisation du logiciel Quanta+ 2

1 Utilisation du logiciel Quanta+ 2 COURS HTML-CSS Cours HTML Page 1 Table des matières 1 Utilisation du logiciel Quanta+ 2 2 Les feuilles de style CSS 4 2.1 Définition et principe................................. 4 2.2 Mais pourquoi donc

Plus en détail

Logotype «Usage...p4 Logotype «Couleur...p6 Logotype «Zone de protection...p8 Logotype «Les fonds...p10

Logotype «Usage...p4 Logotype «Couleur...p6 Logotype «Zone de protection...p8 Logotype «Les fonds...p10 Charte Graphique 1 SOMMAIRE Logotype «Usage...p4 Logotype «Couleur...p6 Logotype «Zone de protection...p8 Logotype «Les fonds...p10 Typographie «Choix...p14 Typographie «Attributs...p18 Supports «La Papeterie...p20

Plus en détail

Mémo technique à l usage des contributeurs de bretagne.fr

Mémo technique à l usage des contributeurs de bretagne.fr Mémo technique à l usage des contributeurs de bretagne.fr 1. Se connecter et accéder à son espace de travail 2. Créer un nouveau contenu 3. Mettre à jour une page du site 4. Questions / réponses 1. Se

Plus en détail

MANUEL D UTILISATION du variomètre FlyNet2 et de l application FlyNet pour smartphone et tablette Android

MANUEL D UTILISATION du variomètre FlyNet2 et de l application FlyNet pour smartphone et tablette Android ASI01/03/14 MANUEL D UTILISATION du variomètre FlyNet2 et de l application FlyNet pour smartphone et tablette Android version 1.30 www.asinstrument.ch www.flynet-vario.com CONTENU GÉNÉRALITÉS 3 VARIOMÈTRE

Plus en détail

Définitions. CSS Cascading Style Sheets Feuilles de style en cascade. FTP File Transfer Protocol Protocole de transfert de fichiers

Définitions. CSS Cascading Style Sheets Feuilles de style en cascade. FTP File Transfer Protocol Protocole de transfert de fichiers Introduction Ma première page Web (2/2) Ce document est l'étape 2 d'un didacticiel qui a pour but de donner un aperçu de la création d'une page Web. Une ou deux pages seront créées et présenteront leur

Plus en détail

LIRE ET COMPRENDRE L HISTOGRAMME D UNE PHOTO

LIRE ET COMPRENDRE L HISTOGRAMME D UNE PHOTO Nous allons apprendre, à travers ce dossier, à lire un histogramme et à s'en servir lors des prises de vue. Nous verrons quelle est son utilité et comment l'interpréter pour améliorer ses images. En photographie

Plus en détail

JOOMLA 1.5 avancé SUPPORT DE COURS + annexe

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

Plus en détail

Formation Site Web : CSS et PHP

Formation Site Web : CSS et PHP Formation Site Web : CSS et PHP Valentin Roussellet Joachim Jablon Chahine Benchorha VIA Centrale Réseaux 1 er décembre 2008 Qu'est-ce que CSS Les sélecteurs La mise en page et le box-model Une CSS (Cascading

Plus en détail

Guide web connect. Version 0 FRE

Guide web connect. Version 0 FRE Guide web connect Version 0 FRE Modèles concernés Le présent guide de l utilisateur s applique aux modèles suivants : ADS-600W. Définitions des remarques Les encarts suivants sont utilisés tout au long

Plus en détail

Références HTML et CSS

Références HTML et CSS Références HTML et CSS Balises HTML 1. Les balises bloc Titre hiérarchique à Affiche en caractères gras le titre contenu dans la balise. La balise correspond aux titres de niveau 1. La taille

Plus en détail

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015)

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Conception de Sites Web Dynamiques : TD 2 HTML5 statique, feuille de style CSS, Mise en page, Framework Bootstrap http://www.labri.fr/perso/preuter/cswd2015

Plus en détail

Réalisation d'un site web. Première partie : Création des pages HTML. thierry.vaira@orange.fr

Réalisation d'un site web. Première partie : Création des pages HTML. <tv>thierry.vaira@orange.fr</tv> Réalisation d'un site web Première partie : Création des pages HTML 1 Objectifs Se familiariser avec le codage HTML Acquérir une pratique minimale Être capable de mener à bien la construction d'un site

Plus en détail

1 Module 1 : feuille de style, position des blocs, nombre d éléments

1 Module 1 : feuille de style, position des blocs, nombre d éléments Plugin d'habillage d'eva-web 4 Le plugin d'habillage d'eva-web permet de : adapter la position, la taille des divers éléments la composant choisir les couleurs de fonds des divers secteurs choisir la taille,

Plus en détail

Introduction à la conception de sites web. Yannick Prié UFR Informatique Université Claude Bernard Lyon 1

Introduction à la conception de sites web. Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 Objectifs Introduction aux langages à balises Introduction à (X)HTML / CSS Introduction à la gestion

Plus en détail

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver Les bonnes pratiques du concepteur web moderne requièrent l usage des CSS pour la réalisation des mises en page. Les mises

Plus en détail

Les nouveautés de Word et Office XP... 17 1.1 1.2 Saisie, correction et gestion efficaces de document... 39 2.1 2.2 2.3 2.4 2.5 2.

Les nouveautés de Word et Office XP... 17 1.1 1.2 Saisie, correction et gestion efficaces de document... 39 2.1 2.2 2.3 2.4 2.5 2. Chapitre 1 Les nouveautés de Word et Office XP... 17 1.1 Office XP : c est nouveau... 19 Compatibilité des formats de fichiers... 19 Sobriété du nouveau design d Office... 19 Zones de tâches du volet Office...

Plus en détail

Le grafcet et les modes de marches

Le grafcet et les modes de marches Le grafcet et les modes de marches Le grafcet et les modes de marches... 1 Le gemma... 2 Exemple corrigé : Tri de caisse... 6 Exercice : Machine de conditionnement par lot de 3 paquets... 9 Les Modes de

Plus en détail

Site de la spécialité ISN du lycée Louis Marchal

Site de la spécialité ISN du lycée Louis Marchal 1 sur 10 07/01/2014 17:46 Site de la spécialité ISN du lycée Louis Marchal Licence Creative Commons Attribution - Pas d Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 France. Ecrire des

Plus en détail

Neopress est une filiale du groupe La Poste. Charte graphique

Neopress est une filiale du groupe La Poste. Charte graphique est une filiale du groupe La Poste Charte graphique Le sommaire Le logotype La version de référence En quadrichromie et en Pantone En monochromie, en noir et blanc et réserve blanche 3 La version exceptionnelle

Plus en détail

LE POSITIONNEMENT CSS. Quelques notions essentielles

LE POSITIONNEMENT CSS. Quelques notions essentielles LE POSITIONNEMENT CSS Quelques notions essentielles Pour éviter ça....element{ padding: 15px; width: 98.32%; /* pas compris, mais ça déborde à 98.33% */ position: relative; /* faut pas enlever */ overflow:

Plus en détail

Commençons. (Bonjour, mon nom est Stéphane)

Commençons. (Bonjour, mon nom est Stéphane) Commençons (Bonjour, mon nom est Stéphane) Objectif - Vue claire de la dynamique d'une page web - Compréhension de la logique des CMS - Quelques réflexes de «bonne pratique» - La réponse à un maximum de

Plus en détail

Lire l image. Observer l'image comme un objet, permet d'en décrire la géométrie.

Lire l image. Observer l'image comme un objet, permet d'en décrire la géométrie. Lire l image Observer l'image comme un objet, permet d'en décrire la géométrie. A. Le cadre L'image inscrit le réel dans un cadre plus ou moins souligné rectangulaire, carré, losangé, ovale, circulaire.

Plus en détail

Création d un site Internet (partie 2 )

Création d un site Internet (partie 2 ) Création d un site Internet (partie 2 ) Objectif : Apprendre les bases des langages XHTML et CSS pour réaliser un site CV Site ressource : http://jleu10.free.fr Adresse mail : jleu10@free.fr Jean-Louis

Plus en détail

Sommaire. Cliquer sur une ligne de la table ci-dessous pour aller à l'article correspondant et sur

Sommaire. Cliquer sur une ligne de la table ci-dessous pour aller à l'article correspondant et sur Sommaire Cliquer sur une ligne de la table ci-dessous pour aller à l'article correspondant et sur pour Sommaire Sommaire ---------------------------------------------------------------------------------------------------------

Plus en détail

POSITIONING AND CONTROL OF MOBILE ROBOTS

POSITIONING AND CONTROL OF MOBILE ROBOTS Laboratoire d Automatique POSITIONING AND CONTROL OF MOBILE ROBOTS Projet de Semestre / Eté Année académique 2004 / 2005 Jean Martial Miamo Nguekam Etudiant en 4 ième année Electricité Dr. Denis Gillet

Plus en détail

BCD Travel Business Manuel Utilisateur Juillet 2006

BCD Travel Business Manuel Utilisateur Juillet 2006 BCD Travel Business Manuel Utilisateur Juillet 2006 Page 1 of 40 1 CONNEXION...3 1.1 CONNEXION...3 1.2 ACCUEIL...4 2 PROFIL...5 2.1 PERSONNNEL...5 2.2 PAIEMENT...5 2.3 LIVRAISON...5 2.4 PREFERENCES...6

Plus en détail

Compléter les fiches de validation de projets

Compléter les fiches de validation de projets Compléter les fiches de validation de projets V ERSION 1 vendredi Rédaction : Louis GIRAUD : IA- IPR STI 1 / 6 M ODE D' D EMPLOI DU DOCUMENT DE VALIDATION DES PROJETS DE SPECIALITE 2D ET SSI STI 2D ET

Plus en détail

LES TABLES. Exemple de table :
cellule 1 cellule 2
cellule 3 cellule 4

LES TABLES. Exemple de table : <table> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> <td>cellule 4</td> </tr> </table> LES TABLES Les tables servent pour l'affichage de «données tabulaires», c'est-à-dire des informations présentées logiquement en rangées et en colonnes. Son intégration peut paraitre fastidieuse mais c'est

Plus en détail

Mathématiques3 e. Laurent Ploy Professeur au Collège Vincent Auriol à Revel (31) Roger Brault Professeur au Lycée Maréchal Soult à Mazamet (81)

Mathématiques3 e. Laurent Ploy Professeur au Collège Vincent Auriol à Revel (31) Roger Brault Professeur au Lycée Maréchal Soult à Mazamet (81) PHRE Collection Mathématiques e Laurent Ploy Professeur au Collège Vincent uriol à Revel () Roger Brault Professeur au Lycée Maréchal Soult à Mazamet (8) Ludovic Requis Professeur au Lycée de Touscayrats

Plus en détail

Introduction à la Simulation

Introduction à la Simulation ou comment créer votre premier jeu vidéo Jacques Duma http://math.et.info.free.fr/ http://ateliermathematique.free.fr/ Aspect visuel souhaité Aspect visuel souhaité Code source de la page HTML Feuille

Plus en détail

TinyTap. Guide de prise en main. Version 2.6. TinyTap, Create interactive lessons & games by TinyTap Ltd.

TinyTap. Guide de prise en main. Version 2.6. TinyTap, Create interactive lessons & games by TinyTap Ltd. TinyTap Version 2.6 Novembre 2015 Titre de l app Langue(s) Prix Lien App Store TinyTap, Create interactive lessons & games by TinyTap Ltd. Multilingue gratuit en version de base achats intégrés pour certains

Plus en détail

Mises à jour Diagnostic Suite V7

Mises à jour Diagnostic Suite V7 Mises à jour Diagnostic Suite V7 V7.3 SOMMAIRE V7.3 15/12/2011 Croquis : dessin par le contour du bâti et insertion des cloisons (accès directe à la documentation) V7.3 24/11/2011 Amiante : application

Plus en détail

NiceLabel Version 5.1 Enterprise Series. Notes de mise à jour. Rev-0911. 2007 Euro Plus & Niceware International, LLC Tous droits réservés.

NiceLabel Version 5.1 Enterprise Series. Notes de mise à jour. Rev-0911. 2007 Euro Plus & Niceware International, LLC Tous droits réservés. NiceLabel Version 5.1 Enterprise Series Notes de mise à jour Rev-0911 2007 Euro Plus & Niceware International, LLC Tous droits réservés. Head Office Euro Plus d.o.o. Poslovna cona A2 4208 Šenčur Slovenia

Plus en détail

INITIATION AU LANGAGE HTML

INITIATION AU LANGAGE HTML INITIATION AU LANGAGE HTML I INTRODUCTION Seules les bases du langage HTML sont abordées ici. Cette initiation a pour but de "démarrer", les nombreuses ressources concernant ce langage vous permettront

Plus en détail

Indexation et recherche visuo-textuelle des bases de données images

Indexation et recherche visuo-textuelle des bases de données images Indexation et recherche visuo-textuelle des bases de données images Hadi Akram LRSD, Département d informatique, Faculté des Sciences, Université Ferhat Abbas-Sétif 1, Algérie. akram_ha9@yahoo.fr Hadi

Plus en détail

LA RECHERCHE DOCUMENTAIRE SUR INTERNET

LA RECHERCHE DOCUMENTAIRE SUR INTERNET LA RECHERCHE DOCUMENTAIRE SUR INTERNET INTERNET C EST QUOI? Internet = Web + messageries + autres protocoles Depuis son invention dans les années 90, le Web a beaucoup évolué : on est passé du web 1.0

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

INITIATION HTML et CSS 3

INITIATION HTML et CSS 3 INITIATION HTML et CSS 3 Stéphane Malachane. 1 Structure de base d un page HTML titre Ordre des balises

Plus en détail

Créer une simple application Java avec netbeans. Par Ahcène BOUNCEUR

Créer une simple application Java avec netbeans. Par Ahcène BOUNCEUR Créer une simple application Java avec netbeans Par Ahcène BOUNCEUR Janvier 2005 INTRODUCTION Dans cet exemple nous allons vous montrer comment peut-on créer une simple application Java en utilisant l

Plus en détail

Liste des propriétés CSS

Liste des propriétés CSS 1 sur 10 02/02/2009 21:11 Liste des propriétés CSS Tutoriel 55 commentaires Cette page est une liste non exhaustive des propriétés CSS qui existent. Le but est de réunir sur une même page un maximum de

Plus en détail

Worldsoft CMS Méga Menu. Avec le Méga Menu du Worldsoft CMS, vous pouvez créer des menus de navigation.

Worldsoft CMS Méga Menu. Avec le Méga Menu du Worldsoft CMS, vous pouvez créer des menus de navigation. 1 Mega Menu Avec le du Worldsoft CMS, vous pouvez créer des menus de navigation. Vous pouvez mettre en place autant de menus que vous le désirez et les adapter graphiquement. Avec votre propre contenu

Plus en détail

CORRIGE DE LA PARTIE PHYSIQUE

CORRIGE DE LA PARTIE PHYSIQUE BACCALAURÉAT GÉNÉRAL SESSION SPECIALE D ENTRAINEMENT N 1 ENSEIGNEMENT SCIENTIFIQUE SÉRIE L Durée de l'épreuve : 1h30 - Usage de la calculatrice autorisé CORRIGE DE LA PARTIE PHYSIQUE PARTIE 1 : REPRÉSENTATION

Plus en détail

6GEI420 Systèmes Digitaux. Laboratoire #3

6GEI420 Systèmes Digitaux. Laboratoire #3 6GEI420 Systèmes Digitaux Laboratoire #3 Conception d un transmetteur RS232 Hiver 2010 1. Objectifs Apprendre à concevoir des circuits séquentiels en VHDL Apprendre à gérer plusieurs PROCESS en même temps

Plus en détail

Conception & Évaluation des Interfaces Homme-Machine. TD ou Devoirs

Conception & Évaluation des Interfaces Homme-Machine. TD ou Devoirs Conception & Évaluation des Interfaces Homme-Machine Concepteur du cours : Wendy E. Mackay, INRIA Futurs wendy.mackay@inria.fr Introduction aux TDs L'interface d'un logiciel détermine souvent sa réussite

Plus en détail

Rapport d évaluation du master

Rapport d évaluation du master Section des Formations et des diplômes Rapport d évaluation du master Energie solaire de l Université de Perpignan Via Domitia - UPVD Vague E 2015-2019 Campagne d évaluation 2013-2014 Section des Formations

Plus en détail

La mise en page web, feuille de style, cadre.

La mise en page web, feuille de style, cadre. La mise en page web, feuille de style, cadre. L importance du navigateur, son rôle est de lire le code HTML et CSS afin d afficher un résultat visuel à l écran, le problème est que les navigateurs n affichent

Plus en détail

Initiation HTML 5 / CSS 3. Clément Bourgoin cb@nokto.net v1.0-17/01/2013

Initiation HTML 5 / CSS 3. Clément Bourgoin cb@nokto.net v1.0-17/01/2013 Initiation HTML 5 / CSS 3 Clément Bourgoin cb@nokto.net v1.0-17/01/2013 1. Les langages du web Pour créer un site web, on utilise au moins deux langages : le HTML et le CSS. Il en existe d'autres mais

Plus en détail

Introduction Web : Cours. IUT de Villetaneuse.

Introduction Web : Cours. IUT de Villetaneuse. Introduction Web : Cours 1ère année IUT de Villetaneuse. Mathieu Lacroix 1 9 septembre 2014 1. E-mail : mathieu.lacroix@iutv.univ-paris13.fr, Page Web : http://www.lipn.univ-paris13.fr/~lacroix/ IUT de

Plus en détail

On peut distinguer les chromatographies en phase liquide et celles en phase gazeuse.

On peut distinguer les chromatographies en phase liquide et celles en phase gazeuse. Page 1 sur 10 1. Définition. C est une méthode de séparation, non destructrice en son principe, basée sur le fait que le coefficient de partage d un soluté entre deux phases dépend de la nature du soluté,

Plus en détail

H C Habitat Eco Constructif 26600 Pont de l Isère

H C Habitat Eco Constructif 26600 Pont de l Isère H C Habitat Eco Constructif 26600 Pont de l Isère Présentation & Dossier technique 1 Historique Les Américains, grand constructeurs de maisons à ossature bois ont découvert l ossature acier dans la maison

Plus en détail

Technique de réseaux et USV

Technique de réseaux et USV Remarques sur la technique de réseau Exploitation sur serveurs réseau WinCC ne prend en charge que le protocole réseau TCP/IP sur le bus pour terminaux. Il est impossible d'exploiter WinCC sur des serveurs

Plus en détail

Introduction aux squelettes SPIP «RÉCIT-FP Partenaires v1.3.2»

Introduction aux squelettes SPIP «RÉCIT-FP Partenaires v1.3.2» Introduction aux squelettes SPIP «RÉCIT-FP Partenaires v1.3.2» Note importante : Pour l installation de SPIP et des squelettes RÉCIT-FP Partenaires v1.3.2, veuillez vous référer au fichier INSTALL.txt.

Plus en détail

Assistance médicale à la procréation. Informations pour les couples receveurs. L accueil. d embryons

Assistance médicale à la procréation. Informations pour les couples receveurs. L accueil. d embryons Assistance médicale à la procréation Informations pour les couples receveurs L accueil d embryons Sommaire Du couple donneur au couple receveur 3 L accompagnement médical et l encadrement juridique de

Plus en détail

CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style. Conclusion TD/TP 2 / 16 CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style.

CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style. Conclusion TD/TP 2 / 16 CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style. Cascading style sheets () pour XML Plan de la séance BDISE XML Mathieu Sassolas 1 IUT de Sénart Fontainebleau Département Informatique 2 La sélection des éléments où s applique le style Année 2015-2016

Plus en détail

Formation (X)HTML-CSS avancé

Formation (X)HTML-CSS avancé Formation (X)HTML-CSS avancé Table des matières 1 Introduction 3 1.1 La philosophie W3C.................................. 3 1.2 Du HTML au XHTML................................. 3 1.3 Et dans la pratique...................................

Plus en détail

FAIRE SORTIR DES DESSINS

FAIRE SORTIR DES DESSINS FAIRE SORTIR DES DESSINS Introduction DROIT D AUTEUR Copyright 1998-2016. Wilcom Pty Ltd, Wilcom International Pty Ltd. Tous droits réservés. Tout titre et droits d auteur de Logiciel de broderie Digitizer

Plus en détail

Ed 03/95 PAQ 1530 NON URGENTE (INFO PRODUIT) TEMPORAIRE DEFINITIVE

Ed 03/95 PAQ 1530 NON URGENTE (INFO PRODUIT) TEMPORAIRE DEFINITIVE Ed 03/95 PAQ 1530 COMMUNICATION TECHNIQUE N : TC0394 Date : 04-12-2002 OmniPCX 4400 Nb de pages : 25 URGENTE (FLASH PRODUIT) NON URGENTE (INFO PRODUIT) TEMPORAIRE DEFINITIVE OBJET : MOBILES DECT POUR ETUDE

Plus en détail

TP 8 : Créer son site web de D à Z...

TP 8 : Créer son site web de D à Z... TP 8 : Créer son site web de D à Z... Présentation Nous allons tenter de créer en 2 ou trois séances un site WEB de toute pièce. Vous devrez choisir un thème (ce que vous voulez, ou presque...). Vous établirez

Plus en détail

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet Création de sites web INF0326 Outils bureautiques, logiciels et Internet Plan Création de pages web HTML et CSS Création de sites web avec WordPress Créer des pages web Partie 1 Système hypertexte Un système

Plus en détail

TP Initiation au langage HTML

TP Initiation au langage HTML TP Initiation au langage HTML (1) Rappels de quelques généralités Un fichier HTML n'est pas compilé (ce n'est pas un programme) Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant

Plus en détail

L entreprise et la production

L entreprise et la production Université Paris Est Créteil IUT DE CRETEIL VITRY Département de GEii 2 ème année du DUT de Génie Électrique et Informatique Industrielle Réalités humaines, économiques et sociales de l'entreprise 2 è

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

Vue d'ensemble des interfaces

Vue d'ensemble des interfaces Vue d'ensemble des interfaces Sage 50 Vue d'ensemble des interfaces 28.07.2014 2/9 Contenu 1. Logiciel Sage 50 un système ouvert... 3 Vue d'ensemble des interfaces... 3 2. Connexion On-Line via SOK Automation

Plus en détail

0 Version 1.3.2 OCTOBRE 2010 Guide de l utilisateur

0 Version 1.3.2 OCTOBRE 2010 Guide de l utilisateur 0 Version 1.3.2 OCTOBRE 2010 Guide de l utilisateur Sommaire SOMMAIRE... 1 PRESTASHOP, VOTRE SOLUTION E-COMMERCE... 6 FORMATIONS... 6 INSTALLATION DE PRESTASHOP... 7 2. Création d une base de données...

Plus en détail

Syntaxe CSS 4 Jeu de règles... 4 Propriétés et valeurs... 4 Les sélecteurs... 4 Exemples sur les sélecteurs... 8

Syntaxe CSS 4 Jeu de règles... 4 Propriétés et valeurs... 4 Les sélecteurs... 4 Exemples sur les sélecteurs... 8 Cours CSS 2013 tv - v.1.1 Sommaire Introduction aux feuilles de style 2 Constituants des pages web..................................... 2 Définition...............................................

Plus en détail

4. Dans quelle discipline artistique Banksy s est-il imposé comme un des plus grands?

4. Dans quelle discipline artistique Banksy s est-il imposé comme un des plus grands? Comment ça marche? Rendez-vous sur le site http://www.banksy-art.com/. Qui est Banksy? Légende ou réalité? 1. Quel est le titre de ce site? 2. Quel serait le véritable nom de Banksy? 3. De quel pays est-il

Plus en détail

Personnaliser vos écrans

Personnaliser vos écrans Personnaliser vos écrans Sommaire 1 Présentation 2 Mécanisme 3 Création du custom 3.1 Note 4 Création du dossier contenant les images personnalisées 4.1 Note 5 Création du dossier contenant le fichier

Plus en détail

AU PARCOURS PERSONNALISÉ. Le sujet en lui-même, toute une histoire. Les fonctions à apporter concrètement

AU PARCOURS PERSONNALISÉ. Le sujet en lui-même, toute une histoire. Les fonctions à apporter concrètement 1 SUJET 12 : GÉNÉRATEUR DE QCM Projet M1 de Mickaël Dervaux et Julien Prato DU GÉNÉRATEUR DE QCM AU PARCOURS PERSONNALISÉ Le sujet en lui-même, toute une histoire Les objectifs, quels sont-ils? Les fonctions

Plus en détail

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles Index A affichage, CSS 180 album photos, créer 83 arrière-plan, CSS 152 images 152 Attributs de balises HTML action 90 align 71 attributs communs 131 background 39 border 39, 70 cellpadding 70 cellspacing

Plus en détail

Balance d analyse corporelle Mode d'emploi

Balance d analyse corporelle Mode d'emploi Balance d analyse corporelle Mode d'emploi 1 La balance a été spécialement conçue pour évaluer votre poids, votre pourcentage de gras, votre pourcentage d hydratation, votre pourcentage de muscle et votre

Plus en détail

INTERNET CRÉER UN SITE EN HTML ET CSS

INTERNET CRÉER UN SITE EN HTML ET CSS INTERNET CRÉER UN SITE EN HTML ET CSS Nous allons vous proposer de créer un site Web de plusieurs pages en utilisant du code HTML et une feuille de style CSS. Toutefois, l utilisation du HTML et du CSS

Plus en détail

Enquête. les réseaux. 12 Test-Achats 543 juin 2010 www.test-achats.be

Enquête. les réseaux. 12 Test-Achats 543 juin 2010 www.test-achats.be Enquête Tarifs in les réseaux 12 Test-Achats 543 juin 2010 www.test-achats.be Sandrine Bouhy et David Wiame ternet mobile GSM au service du net Surfer n importe où avec son GSM ou son ordinateur devient

Plus en détail