TD n 5 : Feuilles de styles

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

Download "TD n 5 : Feuilles de styles"

Transcription

1 TD n 5 : Feuilles de styles 1. Préparation du site a. Récupérez le site avec liens internes et tableaux du TD4 et assurez vous qu il soit dans un dossier aide-memoire sous D:\et-l2. 2. Joindre une feuille de style b. Créez un dossier feuillesdestyle dans le dossier aide-memoire. c. Stockez dans ce dossier la feuille de style aidememoire.css disponible sur le BV. d. Dans l en-tête de chaque document de votre site (FeuillesDeStyles.html, images.html, index.html, introduction.html, lehtml.html) ajouter un lien (relatif) vers la feuille de style aidememoire.css récupérée dans la question précédente : <link href="chemin" rel="stylesheet" type="text/css"> 3. Gestion des polices e. Comparez la mise en forme obtenue avec la saisie d écran ci-dessous : f. Examinez la feuille de style et expliquez le fonctionnement de la propriété font-family, sous le titre «font-family» que vous ajouterez sous «modification des propriétés pour un sélecteur». g. Modifiez les styles associés aux titres jusqu à h5 (y compris h1) de manière à ce que la police utilisée pour les titres soit Verdana si elle est disponible, Arial sinon et enfin une police «sans-serif» si aucune des deux autres n est accessible. Page 1 de 5

2 h. Changez la taille (font-size) des éléments h2 en "large" et en "medium" pour les titres de niveau inférieur. 4. Couleurs Dans cette partie nous allons modifier la mise en forme des tableaux pour qu elles aient un cadre. i. Modifiez le fond des tableaux pour qu il soit noir. Une liste des couleurs est accessible ici : En passant par un logiciel d édition d image vous pourriez obtenir n importe quelle couleur à travers sa composition RVB en hexadécimal. j. Profitez-en pour que la police utilisée dans les tableaux soit une police Verdana de petite taille (font-size: small). k. Visualisez le document ainsi obtenu dans votre navigateur. Que constatez-vous? l. Changez maintenant la couleur du fond des cellules du tableau en blanc. m. Pour les en-têtes du tableau, appliquez une couleur de fond gris-foncé et une police blanche et en gras. 5. Classe et styles Dans notre site, nous avons souvent des exemples de code HTML ou CSS pour donner des exemples. Il serait intéressant qu ils se remarquent plus, mais il n y a pas de balise spéciale pour ces éléments. Nous allons donc créer une classe. Pour différencier les classes des balises, les noms de classes commenceront toujours par un point. /*La classe important s écrirait de la manière suivante :*/.important{ font-weight: bold; } n. Créez dans la feuille de style, un style "code", dont la police sera courier new, en petite taille, en gras et en bleu foncé sur fond "cornsilk" (c est un code couleur prédéfini). Pour appliquer le style associé à une classe à un élément, il faut lui ajouter l attribut class="nomdelaclassesanspoint" : <p class="important">notez bien qu on indique qu il s agit d une classe avec un. dans la CSS. Mais que dans le document HTML on fait appel à cette classe en n utilisant que son nom.</p> o. Appliquez la classe aux cases des tableaux contenant les réponses aux exercices sur les liens relatifs et sur les entités (lehtml.html > exercice). p. Quelle est la couleur du fond qui a été privilégiée? Celle associée aux cellules du tableau ou celle associée à la classe? Page 2 de 5

3 Dans ce site il se peut que le code ne soit pas l unique contenu d une balise. Dans ce cas, on utilise une balise span pour séparer, dans le contenu de l élément père, ce qui appartient à une classe donnée, de ce qui ne lui appartient pas. <p>seul le mot "<span class="important">important</span>" l est (important)...</p> q. Dans le paragraphe «appel en cascade depuis un document HTML» du document feuilledestyle.html ajoutez le paragraphe suivant : Dorénavant à chaque fois que vous ferez figurer dans votre site un exemple de code (HTML ou CSS), vous lui appliquerez la classe "code". 6. Styles associés à un identifiant unique. Notre redéfinition des styles pour les tableaux a aussi affecté nos menus. Or les menus sont des tableaux particuliers que nous voudrions différencier. Dans chaque page il n y aura qu un seul menu, nous pouvons donc lui donner un identifiant unique dans la page. Nous l appellerons menu. Nous pouvons associer un style à un identifiant donné, pour ce faire nous allons utiliser le #. r. Créez dans la feuille de style, un style associé à l identifiant menu, pour lequel la couleur de fond sera # s. Ajoutez l identifiant menu (attribut id="menu"), créée ci-dessus aux menus de vos différentes pages. 7. Combinaisons de sélecteurs Nous avons modifié la couleur de fond des menus, mais les cellules qu ils contiennent gardent la même couleur. Plutôt que d appliquer une classe à chaque cellule du tableau, nous allons les sélectionner en combinant les sélecteurs. t. Créez un sélecteur qui permette d accéder aux propriétés des éléments td qui sont situés (quelque part) dans l élément d identifiant menu et choisissez leur comme couleur de fond #770B0B. Vous remarquez que la couleur a été modifier pour toutes les cellules du menu, mais les liens sont devenus illisibles : u. Créez un sélecteur qui permette d accéder aux liens qui sont situés (quelque part) dans l élément d identifiant menu et assurez vous qu ils seront en blanc et ne seront pas soulignés (text-decoration: none). 8. Pseudo classes v. En utilisant le sélecteur de pseudo-classe :hover, faites que lorsque l on passe sa souris au dessus d un élément du menu, sa couleur de fond soit #E Page 3 de 5

4 9. Le modèle de la boîte 9.1. Le padding (remplissage) w. Cela se voit particulièrement dans les menus, mais c est aussi le cas dans les autres : le contenu des cases des tableaux est "collé" aux bordures, nous allons modifier le style associé aux cellules des tableaux en rajoutant un padding de 2 pixels (px) en haut (padding-top) et en bas (padding-bottom) et de l équivalent d un caractère (em) à gauche(padding-left) et à droite (padding-right) Border (bordures) La gestion des bordures se fait à travers 3 propriétés : border-width (valeurs : thin, medium, thick, *px) border-style (valeurs : none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset) border-color (valeurs : cf. autres attributs de couleur) On peut définir séparément les bordures haute, basse, de gauche et de droite : border-left-width, border-top-style, border-bottom-color, border-right-style x. Pour les éléments h1, définissez une fine bordure solide Margin (marges) vs. padding y. Nous allons travailler sur les titres de niveau 1 (h1), pour bien voir ce qui se passe, modifiez la couleur de fond associée en blanc. Nous allons rendre les gros titre plus imposants, pour cela nous allons commencer par en agrandir la hauteur : la ligne au dessus et la ligne en dessous du titre seront laissées vides mais appartiendront au titre : z. Ajoutez aux éléments h1 un padding en haut et en bas de 1 élément. aa. Ajoutez leur aussi une marge en haut et en bas de 2 éléments 9.4. Dimensions et positionnement Notre menu tel qu il est, n est pas toujours accessible, nous allons utiliser les propriétés de positionnement pour améliorer cela. Nous allons mettre le menu sur la gauche de l écran. Il y a 4 manières de positionner un élément : De manière statique : c est le positionnement automatique, dit dans le flux. Quand un objet est positionné ainsi, on ne peut pas modifier ses propriétés de positionnement. De manière relative : par rapport à la position qu il occuperait dans le flux (en statique). Avec ce type de positionnement, la place qui aurait été allouée à l élément normalement est laissée libre. (position : relative;) De manière absolue : par rapport à la fenêtre. (position : absolute;) De manière fixe : les coordonnées sont identiques à celles dans un positionnement absolu, mais quand on fait défiler l écran l élément ne bouge pas. (position : fixed;) bb. Définissez un positionnement fixe pour l élément d identifiant unique menu. Page 4 de 5

5 Le menu passe maintenant au dessus du contenu de la page, nous allons donc lui faire de la place en ajoutant une marge à gauche pour toute la page : cc. Ajoutez une marge à gauche de 150 pixels au style associé au body. La place est effectivement laissée libre mais le menu est déplacé aussi. Nous allons donc positionner le menu en fonction de la fenêtre (car nous avons choisi un positionnement fixe) : La propriété top donne la position du haut de l élément, par rapport au haut de la fenêtre. La propriété bottom donne la position du bas de l élément, par rapport au bas de la fenêtre. La propriété left donne la position de la gauche de l élément, par rapport à la gauche de la fenêtre. La propriété right donne la position de la droite de l élément, par rapport à la droite de la fenêtre. dd. Positionnez le menu à 12 pixels de la gauche de la fenêtre. ee. Positionnez le haut du menu au tiers de la fenêtre. On veut avoir de chaque côté du menu le même écart, il faudra donc qu à droite de l élément, il y ait un espacement de 12 pixels entre le menu et le corps du document. On ne peut gérer cela par rapport à la droite de la fenêtre dont la largeur est variable. Cependant on sait que l espace laissé est de 200 px : (gauche) - 12 (droite) = 176 px (largeur) Attention la largeur est la largeur du contenu de l élément comme ici, il n y a ni padding ni marge, on peut considérer que la largeur de l élément est identique à celle de son contenu. ff. Donnez au menu une largeur (width) de 176 pixels. Vous devriez maintenant avoir quelque chose ressemblant à : Page 5 de 5

CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise { Propriété : valeur ;

CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise { Propriété : valeur ; CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise Pour les commentaires : /* un commentaire */ Classe : La construction d une classe :.ma_classe

Plus en détail

Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le de la page :

Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le <head> de la page : CSS La présentation Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le de la page : body { background: orange;

Plus en détail

L1 - Informatique et internet

L1 - Informatique et internet L1 - Informatique et internet Hervé Le Crosnier laboratoire GREYC - Université de Caen! herve.lecrosnier@unicaen.fr http://ensweb.users.info.unicaen.fr HTML + CSS Listes, images et liens Page HTML

Plus en détail

Mémo CSS 3. Exemple : h1 concerne toutes les éléments titres de niveau 1

de la page.

Mémo CSS 3. Exemple : h1 concerne toutes les éléments titres de niveau 1 <h1> de la page. Mémo CSS 3 Les sélecteurs simples balise permet de viser tous les éléments d un certain type de balise. Exemple : h1 concerne toutes les éléments titres de niveau 1 de la page..maclasse permet de

Plus en détail

texte affiché

<div id=nom_id class=ma_classe>texte affiché</div> Rappel - Les sélecteurs de base La syntaxe de CSS est simple, elle est composée de 3 éléments: un sélecteur des propriétés des valeurs sélecteur { Il existe 3 sélecteurs de base: le sélecteur de balise

Plus en détail

CSS 3. Julien David. A101 - Julien David (A / 27

CSS 3. Julien David. A101 - Julien David (A / 27 CSS 3 Julien David A101 - david@lipn.univ-paris13.fr 2016 Julien David (A101 - david@lipn.univ-paris13.fr) 2016 1 / 27 Feuilles de styles Cascading Style Sheets CSS est un langage de feuilles de styles.

Plus en détail

Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices

Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices Dreamweaver CSS Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices CSS CSS - Cascading Style Sheets Servent à mettre en forme les éléments

Plus en détail

Introduction. Principe général : distinction entre le contenu et la forme Rappel de quelques avantages découlant de cette distinction :

Introduction. Principe général : distinction entre le contenu et la forme Rappel de quelques avantages découlant de cette distinction : Introduction Principe général : distinction entre le contenu et la forme Rappel de quelques avantages découlant de cette distinction : Alléger les pages Web (une définition pouvant s'appliquer à plusieurs

Plus en détail

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML, CSS Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML Pour le fond -> HTML Pour la forme ->CSS Les balises Les balises orphelines Attributs de balise LES BALISES PRINCIPALES HTML

Plus en détail

Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours :

Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours : COURS PROGRAMMATION WEB ASCADING STYLE SHEETS CSS CASCADING Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours : http://essai.rnu.tn/enseignants/fatmachaker2.htm Année Universitaire :

Plus en détail

Technologies de l Internet. Partie 3 : CSS Iulian Ober

Technologies de l Internet. Partie 3 : CSS Iulian Ober Technologies de l Internet Partie 3 : CSS Iulian Ober iulian.ober@irit.fr Introduction au langage CSS permet de changer la mise en forme d'une page (X)HTML sans modifier son contenu gain de temps, de simplicité

Plus en détail

Université de Nice-Sophia Antipolis Jeudi 15 mars Création et Manipulation de documents

Université de Nice-Sophia Antipolis Jeudi 15 mars Création et Manipulation de documents Université de Nice-Sophia Antipolis Jeudi 15 mars 2007 Polytech CiP1 Durée: 1h30 Création et Manipulation de documents (Hélène Renard / Sylvain Schmitz) Travaux Dirigés Séance n o 6 1 Objectifs du TD Utiliser

Plus en détail

TP Informatique. Personnalisation de page web HTML avec le langage CSS. Objectifs :

TP Informatique. Personnalisation de page web HTML avec le langage CSS. Objectifs : TP Informatique Personnalisation de page web HTML avec le langage CSS Objectifs : - Approfondir ses connaissances au langage HTML - Changer le style et la présentation d une page HTML grâce au langage

Plus en détail

STUDIO - TI6 TABLE DES MATIÈRES NOUVELLE MATIÈRE. 1. Donner une «class» à une

<div></div> STUDIO - TI6 TABLE DES MATIÈRES NOUVELLE MATIÈRE. 1. Donner une «class» à une <div> Sujet STUDIO - TI6 PASCAL PLACEMAN Sujet HTML - CSS révisions TABLE DES MATIÈRES Nouvelle matière: 1. Donner une «class» à une 2. Créer une div en plein-écran 3. Gérer des colonnes 4. Mettre une video

Plus en détail

Exercice 1 : Structuration de document avec HTML

Exercice 1 : Structuration de document avec HTML Université Lumière Lyon 2 Université Nationale d Économie de Kharkiv Master 1 IDSM Année 2016-2017 Programmation Web Exercices pratiques (1) : HTML et CSS Jérôme Darmont (http://eric.univ-lyon2.fr/~jdarmont/),

Plus en détail

STUDIO - TI6 TABLE DES MATIÈRES. NOUVELLE MATIÈRE (suite) 9. Intégration du logo. Sujet. HTML - CSS révisions - suite.

STUDIO - TI6 TABLE DES MATIÈRES. NOUVELLE MATIÈRE (suite) 9. Intégration du logo. Sujet. HTML - CSS révisions - suite. STUDIO - TI6 PASCAL PLACEMAN Sujet HTML - CSS révisions - suite TABLE DES MATIÈRES Nouvelle matière: 9. Intégration du logo 10. Un titre devant la vidéo 11. Utiliser des polices typographiques grâce à

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 06 Réussir son site web avec XHTML et CSS CSS, le langage de mise en page du Web 1. Insérer du code CSS...1 Dans un fichier.css...1 Dans l en-tête du fichier XHTML...3 2. Appliquer un style à des

Plus en détail

Les CSS un menu horizontal Nous créons deux dossiers un_niveau et multi_niveaux comprenant :

Les CSS un menu horizontal Nous créons deux dossiers un_niveau et multi_niveaux comprenant : Les CSS un menu horizontal Nous créons deux dossiers un_niveau et multi_niveaux comprenant : style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs. positionnement.php

Plus en détail

Programmation Web TD8- CSS

Programmation Web TD8- CSS ²Université de la Manouba Ecole Supérieure d'economie Numérique Programmation Web TD8- CSS Objectifs - Développer des pages Web HTML5 validées - Mettre en place des fichiers CSS pour une meilleure présentation

Plus en détail

Dossier ISN : Tracés de fonctions mathématiques :

Dossier ISN : Tracés de fonctions mathématiques : Dossier ISN : Tracés de fonctions mathématiques : Par Crosetti Pauline et Depoers Quentin. Lycée Colbert Tourcoing. Année scolaire 2012/2013. Sommaire : - Recherches et étude du projet - Html - Css - Javascript

Plus en détail

Cours CSS/JavaScript

Cours CSS/JavaScript Cours /JavaScript E.Coquery emmanuel.coquery@liris.cnrs.fr Cascading Style Sheets Principe : séparation du style et de la structure HTML Structure paragraphes, tableaux, liens,... Style polices de caractères,

Plus en détail

Balises obsolètes.

texte

p { font-size: 20px; color: red; text-transform: uppercase; }

Balises obsolètes. <p>texte</p> p { font-size: 20px; color: red; text-transform: uppercase; } Balises obsolètes De nombreuses balises et propriétés sont obsolètes : font, basefont, center, s, u, b, i, align, width, height, size, color, border, background, bgcolor, border, face, name, target, En

Plus en détail

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML, CSS Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML Pour le fond -> HTML Pour la forme -> CSS Les balises Les balises orphelines Attributs de balise LES BALISES PRINCIPALES HTML

Plus en détail

TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class

TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class Création et mise en forme d'une page Web avec une feuille de style Ouvrez la page index.htm qui envoyer par email. Insérez une feuille de style

Plus en détail

CSS 3. Mai Jérôme GUY

CSS 3. Mai Jérôme GUY CSS 3 Mai 2013 Jérôme GUY CSS Contenu Introduction... 3 Où écrire le CSS?... 3 Inclure un fichier CSS... 3 Les commentaires... 4 Class et Id... 4 Les balises SPAN et DIV... 4 Les sélecteurs avancés...

Plus en détail

15. GERER LES IMAGES D ARRIERE-PLAN

15. GERER LES IMAGES D ARRIERE-PLAN 52 15. GERER LES IMAGES D ARRIERE-PLAN Il y a deux méthodes pour insérer les graphiques d une page web : Ajout du graphique dans l arrière-plan d un DIV à l aide des CSS (exemple : une texture pour créer

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 11 v2 Réussir son site web avec XHTML et CSS TD de révision : le design d un site web 1. La structure générale... 2 2. Primo, le XHTML... 3 Découpage des pages en blocks... 3 Création du modèle de

Plus en détail

Les CSS un menu vertical Nous allons créer un dossier menu_vertical. Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes

Les CSS un menu vertical Nous allons créer un dossier menu_vertical. Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes Les CSS un menu vertical Nous allons créer un dossier menu_vertical Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes A l'intérieur du dossier un_niveau Nous créons les fichiers

Plus en détail

Création d'un site Web avec KompoZer

Création d'un site Web avec KompoZer Création d'un site Web avec KompoZer Table des matières 1Rudiments sur le langage HTML.1 1.1Structure d'une page web :.1 1.2Le langage des pages Web.2 2Préparation du site web..2 3Utilisation d'une feuille

Plus en détail

Les CSS et la gestion des différentes polices La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS.

Les CSS et la gestion des différentes polices La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS. La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS. font-family: Famille de police font-size: Taille de votre police de caratère font-style: Le style de police. Gras,

Plus en détail

Université de Carthage Ecole Supérieure de la Statistique et de l Analyse de l Information. Les bases du CSS

Université de Carthage Ecole Supérieure de la Statistique et de l Analyse de l Information. Les bases du CSS Université de Carthage Ecole Supérieure de la Statistique et de l Analyse de l Information Les bases du CSS o Syntaxe générale : balise1 balise2 balise3 o Taille du texte : font-size En pixels : c'est

Plus en détail

Sommaire : I - Introduction css3. II - Sélecteurs. Positions, dimensions et styles. Styliser notre feuille css3. V - Memento.

Sommaire : I - Introduction css3. II - Sélecteurs. Positions, dimensions et styles. Styliser notre feuille css3. V - Memento. Sommaire : I - Introduction css3 II - Sélecteurs III - IV - Positions, dimensions et styles Styliser notre feuille css3 V - Memento IV - Liens et sources I - Introduction CSS3 : Qu'est-ce qu'on peut faire

Plus en détail

2E Révision introduction au Tableur > 2) La cellule

2E Révision introduction au Tableur > 2) La cellule Objectifs de ce module Je serai capable... de changer les polices et la taille des caractères dans les cellules ou plages de cellules d utiliser des styles différents d aligner les cellules (gauche, centré,

Plus en détail

Présentation Nous pouvons spécifier le style de l élément en trois endroits :

Présentation Nous pouvons spécifier le style de l élément en trois endroits : Javascript et CSS Présentation Nous pouvons spécifier le style de l élément en trois endroits : En attribut de l élément : c est le style dit inline. Dans une

Plus en détail

Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés :

Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés : CSS positionnement POSITIONNEMENT Rappel balises de type bloc Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés : width, height, min-width, ou

Plus en détail

WEB BALISES. Lorem Ipsum : texte en latin (qui ne veut même rien dire en latin) qui permet de mettre du texte quand il en faut.

WEB BALISES. Lorem Ipsum : texte en latin (qui ne veut même rien dire en latin) qui permet de mettre du texte quand il en faut. WEB 27/09 Chaque élément est une balise : HTML -> visible HEAD -> invisible BODY -> DOCTYPE: c est le type de document qu on va utiliser, XHTML 1.1=> le plus strict (qu on va bosser) N importe quel première

Plus en détail

1 - travail en pleine page du navigateur

1 - travail en pleine page du navigateur Utilisation du bandeau Fckeditor «TEXTE ENRICHI» dans les pages du site internet Version 1 du 7 avril 2009 Bandeau de l éditeur Fckeditor 1 - travail en pleine page du navigateur Pour faciliter le travail

Plus en détail

TP 4 : IMAGES ET ARRIERE-PLANS

TP 4 : IMAGES ET ARRIERE-PLANS TP 4 : IMAGES ET ARRIERE-PLANS Les images dans le texte La balise img du langage Html permet d'insérer des images dans une page Html. Exemple : où fichier_image est le nom et

Plus en détail

HTML5 et CSS3. Table des matières : CE qu'est l'html5 Déclaration De Page page 3 Ossature D'une Page Les Balises. Les Nouvelles Balises CSS3

HTML5 et CSS3. Table des matières : CE qu'est l'html5 Déclaration De Page page 3 Ossature D'une Page Les Balises. Les Nouvelles Balises CSS3 HTML5 et CSS3. Table des matières : CE qu'est l'html5 page 2 Déclaration De Page page 3 Ossature D'une Page page 3 Les Balises...page 4-6 Les Nouvelles Balises...page 4-6 CSS3 page 7-9 Page 1/9 HTML5 Le

Plus en détail

Utilisation des tableaux dans Dreamweaver

Utilisation des tableaux dans Dreamweaver Utilisation des tableaux dans Dreamweaver Ecole-Club Migros Alain Court Usages des tableaux Le tableau en HTML a été la première réponse aux besoins de mise en page. En effet, le langage HTML n'est pas

Plus en détail

Dreamweaver Image survolée

Dreamweaver Image survolée Dreamweaver Image survolée Image retournée (rollover) Un lien peut également être une surprise! Par exemple, vous passez votre souris et l image s illumine, la couleur change, l image se transforme. Comment

Plus en détail

Fonctions de base (1 ère partie) 1-2

Fonctions de base (1 ère partie) 1-2 A Enregistrer un document (pour la première fois) L enregistrement sert à conserver le travail en cours sur un support (disque dur, clé usb, ). On dit indistinctement Enregistrer ou sauvegarder un document

Plus en détail

Conception de documents et d interfaces numériques

Conception de documents et d interfaces numériques CAEN 2016-2017 Conception de documents et d interfaces numériques TD n 10 WEB Les Feuilles de styles CSS 2 ANNE Jean-François D après le cours de Mme DRAFATE Style des tableaux Feuilles de Style (CSS)

Plus en détail

Les outils de création de sites web (suite)

Les outils de création de sites web (suite) Tuto 3ème séance - p1 Les outils de création de sites web (suite) 8. Les feuilles de style Alors que le langage HTML a pour objet de coder le contenu (texte, images, etc.) d'une page web pour la rendre

Plus en détail

Balises obsolètes.

texte

p { font-size: 20px; color: red; text-transform: uppercase; }

Balises obsolètes. <p>texte</p> p { font-size: 20px; color: red; text-transform: uppercase; } Balises obsolètes De nombreuses balises et propriétés sont obsolètes : font, basefont, center, s, u, b, i, align, width, height, size, color, border, background, bgcolor, border, face, name, target, En

Plus en détail

GL/ITEC 2915F Automne 2011 L utilisation de l ordinateur et des logiciels d applications I DEVOIR # 2 A soumettre le 12 décembre 2011 avant minuit

GL/ITEC 2915F Automne 2011 L utilisation de l ordinateur et des logiciels d applications I DEVOIR # 2 A soumettre le 12 décembre 2011 avant minuit Glendon Campus Information Technology (ITEC) Objectifs GL/ITEC 2915F Automne 2011 L utilisation de l ordinateur et des logiciels d applications I DEVOIR # 2 A soumettre le 12 décembre 2011 avant minuit

Plus en détail

PROPRIETES DES STYLES

PROPRIETES DES STYLES PROPRIETES DES STYLES POLICES DE CARACTERES font-family Polices de caractères. On peut mettre une liste de police dans l ordre de préférence. Les noms des polices doivent dans ce cas être séparées par

Plus en détail

CSS = Cascading Style Sheets

CSS = Cascading Style Sheets CSS = Cascading Style Sheets = ecrit dans un fichier.css exemple style1.css un meme fichier peut etre partage par plusieurs pages ( uniformite) ajouter dans head page HTML qui utilisera le css :

Plus en détail

Viatique. pour la création. de site. avec Kompozer. à l usage des. débutants

Viatique. pour la création. de site. avec Kompozer. à l usage des. débutants Viatique pour la création de site avec Kompozer à l usage des débutants Avant de commencer... 3 Création d une page simple... 3 Informations sur la page... 3 Apparence... 3 Sauvegarde... 3 Saisie du contenu...

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 08 Réussir son site web avec XHTML et CSS Couleur et fond 1. La couleur du texte...1 Indiquer la couleur du texte avec un nom...1 Indiquer la couleur du texte en hexadécimal...2 Indiquer la couleur

Plus en détail

Réussir. avec XHTML et CSS. 3e édition. son site web. Nebra. Mathieu. Préface de Laurent Denis

Réussir. avec XHTML et CSS. 3e édition. son site web. Nebra. Mathieu. Préface de Laurent Denis Mathieu Nebra Réussir son site web avec XHTML et CSS 3e édition Préface de Laurent Denis Groupe Eyrolles, 2006, 2008, 2010, ISBN : 978-2-212-12485-9 Table des matières 1. UN SITE WEB, COMMENT ÇA MARCHE?...

Plus en détail

Contrôle final Développement Web

Contrôle final Développement Web Université de Batna 3 ème année Licence Pro IIM Faculté des sciences Département d informatique 2015/2016 Durée : 1h30 Le 30/05/2016 Question de cours (4.5 pts) Contrôle final Développement Web 1. Le cycle

Plus en détail

CSS MEMENTO. Support de cours. rédigé par : Jonathan Fechner. Dernière mise à jour : 27 Aout 2012

CSS MEMENTO. Support de cours. rédigé par : Jonathan Fechner. Dernière mise à jour : 27 Aout 2012 CSS MEMENTO Support de cours rédigé par : Jonathan Fechner Dernière mise à jour : 27 Aout 2012 Jonathan Fechner - support de cours HTML / CSS - www.jonathanfechner.fr - tout droits réservés - page 1 sur

Plus en détail

Écriture de pages Web

Écriture de pages Web Écriture de pages Web Le langage CSS Laurent Tichit Janvier 2011 Copyright 2005-2009 Laurent Tichit 1 Les feuilles de styles CSS Elles permettent de changer la mise en forme d'une page HTML ou XHTML sans

Plus en détail

HTML5 et CSS3 Maîtrisez les standards de la création de sites Web (3e édition)

HTML5 et CSS3 Maîtrisez les standards de la création de sites Web (3e édition) Le HTML5 et les CSS 1. L'évolution de HTML 15 2. L'évolution des CSS 16 2.1 La notion de module 16 2.2 L'évolution des statuts 16 2.3 Les préfixes vendeurs 17 2.4 Utiliser les préfixes vendeurs 18 3. La

Plus en détail

M1 / VP8 CREATION DE FEUILLES DE STYLE

M1 / VP8 CREATION DE FEUILLES DE STYLE M1 / VP8 CREATION DE FEUILLES DE STYLE Master 1 [Tribet Hervé] 2012 Styles sous DW8 Les styles HTML sont des mises en forme complexes regroupées sous une appelation ; on peut créer des styles HTML avec

Plus en détail

Exemples! !Mise en forme du texte!!les tableaux!!utilisation d images!!la navigation!!les Cadres!!Paramètres d une page!

Exemples! !Mise en forme du texte!!les tableaux!!utilisation d images!!la navigation!!les Cadres!!Paramètres d une page! Le langage Html : Chapitres HTML!!Mise en forme du texte!!les tableaux!!utilisation d images!!la navigation!!les Cadres!!Paramètres d une page! L1-STS-Internet et Programmation! 47! Le langage Html : Mise

Plus en détail

Concepts de base d Excel

Concepts de base d Excel Concepts de base d Excel Excel est une application performante de feuilles de calcul et d analyse de données. Pour en tirer le meilleur parti, il faut d abord en comprendre les concepts de base. Ce didacticiel

Plus en détail

Enseignant d informatique au collège Bougafer - Alnif - délégation Tinghir, et

Enseignant d informatique au collège Bougafer - Alnif - délégation Tinghir, et Réalisée par : Mohamed AGHROUD Enseignant d informatique au collège Bougafer - Alnif - délégation Tinghir, et Formateur MOS au centre de formation école Saghrou1 - Alnif- délégation Tinghir. 1. Fichier

Plus en détail

Annexe : Balises HTML et CSS

Annexe : Balises HTML et CSS Annexe : s HTML et CSS Cette partie contient une liste non exhaustive des balises HTML et CSS les plus utilisées. Nous avons déjà certaines dans le cours, néanmoins il y en a d'autres que nous n'avons

Plus en détail

Réseaux 1. TP 6 Les feuilles de style CSS2 CORRIGE

Réseaux 1. TP 6 Les feuilles de style CSS2 CORRIGE I.U.T. de Nice Côte d Azur 2004-2005 Département Informatique Réseaux 1 TP 6 Les feuilles de style CSS2 CORRIGE Objectif : introduire les principes des feuilles de style CSS2 Note : vous placerez vos fichiers

Plus en détail

Ajax, jquery et PHP. 42 ateliers pour concevoir des applications Web 2.0. Jean-Marie Defrance. 3 e édition

Ajax, jquery et PHP. 42 ateliers pour concevoir des applications Web 2.0. Jean-Marie Defrance. 3 e édition Ajax, jquery et PHP 42 ateliers pour concevoir des applications Web 2.0 3 e édition Jean-Marie Defrance Groupe Eyrolles, 2008, 2010, 2011, ISBN : 978-2-212-13271-7 15 Plug-ins jquery Ce dernier chapitre

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

On le retrouve dans plusieurs modules tels que le courrier, le forum, l agenda, les tâches, les communiqués et plus particulièrement dans Édu-Notes.

On le retrouve dans plusieurs modules tels que le courrier, le forum, l agenda, les tâches, les communiqués et plus particulièrement dans Édu-Notes. 154 L éditeur de texte L ÉDITEUR DE TEXTE L éditeur de texte du portail est une application destinée à créer et modifier des textes pour créer des documents HTML. L éditeur de texte possède certaines fonctions

Plus en détail

Documents HTML Mise en forme CSS

Documents HTML Mise en forme CSS Département Éducation et Technologie Documents HTML Mise en forme CSS Feuilles de style en cascade Guy Vastersavendts 5.62 Novembre 1999 Centre pour la Formation à l'informatique dans le Secondaire Document

Plus en détail

1.2 Création de colonnes à partir d une sélection de texte

1.2 Création de colonnes à partir d une sélection de texte TP Numéro 4 METTRE EN FORME UN DOCUMENT A L AIDE DE COLONNES, ACQUISITION DES TECHNIQUES DE MISE EN PAGE DE DOCUMENTS LONGS TELS QUE DES RAPPORTS OU DES MEMOIRES. 1 COLONNES Pour présenter du texte sur

Plus en détail

Les tableaux et les pseudo-classes CSS

Les tableaux et les pseudo-classes CSS Les tableaux et les pseudo-classes CSS Introduction : Pendant longtemps, la mise en page des sites reposait sur l utilisation de tableau. En effet, face à l absence ou l interprétation parfois fantaisiste

Plus en détail

Maintenant que votre emploi du temps est apparu, vous allez le mettre en forme en utilisant les sept barres ci-dessous.

Maintenant que votre emploi du temps est apparu, vous allez le mettre en forme en utilisant les sept barres ci-dessous. Vous allez réaliser deux emplois du temps (un pour la semaine A et un pour la semaine B). Vous avez votre carnet de liaison et vous allez suivre toutes les étapes afin de réaliser vos deux emplois du temps.

Plus en détail

HTML CSS Fiche numéro 14

HTML CSS Fiche numéro 14 HTML CSS Fiche numéro 14 Sources : https://openclassrooms.com/ L'ancien site 2minuteslearning.fr qui à malheureusement disparu https://www.vectorskin.com/balises-html5/ Positionnement en CSS Avant de nous

Plus en détail

> RETOUR A LA LIGNE. Pour forcer un retour à la ligne, insérez la balise
. [BR comme BReak (rupture) en anglais]

> RETOUR A LA LIGNE. Pour forcer un retour à la ligne, insérez la balise <BR>. [BR comme BReak (rupture) en anglais] GUIDE HTML ADMINIS TRATIO N DE VO TRE SITE Ce document présente les principales balises HTML pour vous permettre d enrichir la présentation des textes gérés par formulaire d administration. > L usage de

Plus en détail

CSS 2 Editions OEM (Groupe Eyrolles), 2003, ISBN

CSS 2 Editions OEM (Groupe Eyrolles), 2003, ISBN Patrick Beuzit Aide-mémoire CSS 2 Editions OEM (Groupe Eyrolles), 2003, ISBN 2-7464-0479-6 Les propriétés CSS 43 Les propriétés azimuth: H Définit l'origine spatiale des sons. Nécessite un système supportant

Plus en détail

12. LES MISES EN PAGE FLUIDES (LIQUIDES ET ELASTIQUES)

12. LES MISES EN PAGE FLUIDES (LIQUIDES ET ELASTIQUES) 119 12. LES MISES EN PAGE FLUIDES (LIQUIDES ET ELASTIQUES) Pour rappel, il existe trois grands principes de mise en page 1 : Fixe le design possède une largeur fixe exprimée le plus souvent en pixels.

Plus en détail

Découvrir l environnement de Word

Découvrir l environnement de Word Découvrir l environnement de Word Qu est-ce qu un traitement de texte Un traitement de texte est un logiciel permettant de créer des documents contenant du texte, les images, des tableaux (sans calcul).

Plus en détail

Styler un formulaire avec Dreamweaver cs5. MC Benveniste

Styler un formulaire avec Dreamweaver cs5. MC Benveniste Styler un formulaire avec Dreamweaver cs5 MC Benveniste 2013 Styler un formulaire Formulaire de base Formulaire avec les css Styler un formulaire Un formulaire contient des balises : pour les étiquettes

Plus en détail

4.- LES TABLEAUX OBJECTIFS PEDAGOGIQUES CREER UN TABLEAU

4.- LES TABLEAUX OBJECTIFS PEDAGOGIQUES CREER UN TABLEAU 4.- LES TABLEAUX 4.1.- OBJECTIFS PEDAGOGIQUES II est parfois utile d'améliorer la lisibilité de données en les présentant sous la forme d'un tableau. Il n'est pas question ici de réaliser des tableaux

Plus en détail

HTML CSS Fiche numéro 6

HTML CSS Fiche numéro 6 HTML CSS Fiche numéro 6 Sources : https://openclassrooms.com/ L'ancien site 2minuteslearning.fr qui à malheureusement disparu https://www.vectorskin.com/balises-html5/ Mettre en place le CSS Dans un premier

Plus en détail

Attribut : style. Attribut style Balise toutes

Attribut : style. Attribut style Balise toutes CSS 2.1 Attribut : style Attribut style Balise toutes !

Plus en détail

Réaliser une carte de voeux GIMP

Réaliser une carte de voeux GIMP Réaliser une carte de voeux GIMP I - IMPORTER ET PERSONNALISER UNE PHOTOGRAPHIE... 2 1.1 - Ouvrir la photographie... 2 1.2 - Choisir les couleurs... 2 1.3 - Ajouter un calque... 2 1.4 - Ajuster le filtre

Plus en détail

Classe de première SI CSS

Classe de première SI CSS CSS Table des matières 1. La petite histoire du CSS...2 2. Déclaration du CSS...2 2.1. Fichier.css...2 2.2. En-tête du fichier HTML...3 2.3. Directement dans les balises...3 3. Appliquer un style...3

Plus en détail

Partie HTML TD 1 : Les bases du HTML

Partie HTML TD 1 : Les bases du HTML Partie HTML TD 1 : Les bases du HTML 1 Introduction HTML = HyperText Marked Language HTML est un langage permettant de décrire des données affichables sous forme de page par un navigateur Web. HTML peut

Plus en détail

ANIMATION. Chapitre II

ANIMATION. Chapitre II Chapitre II ANIMATION I- Introduction Un logiciel créateur d animations pour le web est une application qui permet de créer des animations pour qu elles soient intégrées dans les pages web. Les animations

Plus en détail

Mise en page avec CSS

Mise en page avec CSS Mise en page avec CSS CSS ne sert pas uniquement à formater le texte et afficher des images de fond. Si on se concentrait un peu sur les tâches de base de mise en page? Bienvenue dans le monde du positionnement.

Plus en détail

Cours de I21 SOMMAIRE

Cours de I21 SOMMAIRE Cours de I21 Voir le chap 2 : cours de Javascript SOMMAIRE I. Introduction sur le langage HTML II. Balises primaires a. mise en forme b. hyperliens c. insérer une image III. Création de listes IV. Création

Plus en détail

MISE EN FORME D'UNE FEUILLE DE CALCUL

MISE EN FORME D'UNE FEUILLE DE CALCUL MISE EN FORME D'UNE FEUILLE DE CALCUL MISE EN FORME CONTENU D'UNE CELLULE Attribut des caractères dans une cellule Il est possible d'affecter des attributs aux caractères contenus dans une cellule (police,

Plus en détail

Mise en forme du texte à l aide de styles

Mise en forme du texte à l aide de styles Mise en forme du texte à l aide de styles Appliquez-vous à maintes reprises la même mise en forme, en changeant peut-être la couleur, la taille et la police, pour mettre en valeur votre texte? Vous pouvez

Plus en détail

METTRE EN FORME. Il existe plusieurs manières de changer la largeur d'une ou plusieurs colonnes.

METTRE EN FORME. Il existe plusieurs manières de changer la largeur d'une ou plusieurs colonnes. Colonnes et lignes : largeur et hauteur Largeur des colonnes METTRE EN FORME Il existe plusieurs manières de changer la largeur d'une ou plusieurs colonnes. S'il s'agit d'une seule colonne, vous pouvez

Plus en détail

GUIDE D UTILISATION DU LOGICIEL LIMESURVEY (Création d enquêtes en ligne)

GUIDE D UTILISATION DU LOGICIEL LIMESURVEY (Création d enquêtes en ligne) GUIDE D UTILISATION DU LOGICIEL LIMESURVEY (Création d enquêtes en ligne) http://w3.avignon.inra.fr/limesurvey/admin/admin.php Username : admin Password : Quelques liens utiles pour travailler sur Limesurvey

Plus en détail

INSERTION ET GESTION D IMAGES DANS UN DOCUMENT WORD

INSERTION ET GESTION D IMAGES DANS UN DOCUMENT WORD INSERTION ET GESTION D IMAGES DANS UN DOCUMENT WORD On peut insérer deux types d images dans un document : 1) des images de la bibliothèque du logiciel (appelées «cliparts») et 2) des fichiers image (par

Plus en détail

Chapitre 1 : Prise en main d Excel

Chapitre 1 : Prise en main d Excel Chapitre 1 : Prise en main d Excel I. Qu'est-ce qu'un tableur? Un tableur permet de saisir des données, de faire des traitements sur ces données et de les afficher. Les originalités du tableur sont l'organisation

Plus en détail

UTILISATION «PAGE BUILDER»

UTILISATION «PAGE BUILDER» 1/- AJOUTER DES IMAGES DANS LA BIBLIOTHÈQUE DES MÉDIAS. - Cliquer sur «Médias» puis sur l onglet «Bibliothèque». - Cliquer ensuite sur «Ajouter». 1 1 2 - Faire glisser les images à ajouter à l endroit

Plus en détail

retouche photo avancée avec The Gimp Atelier 4

retouche photo avancée avec The Gimp Atelier 4 Dans cette partie, nous allons voir comment insérer des effets de texte avec The Gimp 1) Retour sur l'outil texte Cliquez sur l outil, Texte, et choisissez la police de caractère que vous désirez appliquer

Plus en détail

Création de sites Web ~ Module 1 Introduction HTML - CSS

Création de sites Web ~ Module 1 Introduction HTML - CSS Création de sites Web ~ Module 1 Introduction HTML - CSS 1 Introduction : HTML, pour HyperText Markup Language, est le langage conçu pour représenter les pages Internet. C est un langage de balises permettant

Plus en détail

NOTICE SUR LES DIFFÉRENTS MODES D'AFFICHAGE D'UN DOCUMENT WORD

NOTICE SUR LES DIFFÉRENTS MODES D'AFFICHAGE D'UN DOCUMENT WORD INTRODUCTION Le logiciel de traitement de texte Word permet d'afficher un même document selon différents modes, les 3 principaux étant les modes Normal, Page et Plan. Ceux-ci sont accessibles à partir

Plus en détail

TECHNOLOGIE DE L INFORMATION

TECHNOLOGIE DE L INFORMATION TECHNOLOGIE DE L INFORMATION Le tableur-grapheur Activité 5 FICHE PÉDAGOGIQUE Utilisation du tableur-grapheur TECHNOLOGIE au collège, classe de me OBJECTIFS DE LA SEQUENCE À l'issue de la séquence, l'élève

Plus en détail

REALISATION D'UNE FICHE DE TRAÇABILITE DE LA VIANDE BOVINE avec WORD 97

REALISATION D'UNE FICHE DE TRAÇABILITE DE LA VIANDE BOVINE avec WORD 97 REALISATION D'UNE FICHE DE TRAÇABILITE DE LA VIANDE BOVINE avec WORD 97 1. Donner un nom et enregistrer votre document En utilisant le menu "Fichier" sélectionner "Enregistrer sous" pour accéder à la fenêtre

Plus en détail

03-08ter. Recadrer une image

03-08ter. Recadrer une image 03-08ter. Recadrer une image Recadrer une image sur GIMP GIMP est un programme gratuit équivalent à Photoshop en code source ouvert. Il permet entre autres de changer la taille d une image à partir de

Plus en détail

À la découverte de Pages version 5.5 sous OS X

À la découverte de Pages version 5.5 sous OS X Les Aventuriers du Bout du Monde La revue des clubs Microcam Rampe de Lancement numéro 85 01/02/2015 À la découverte de Pages version 5.5 sous OS X 10.10. Volume 2 - Tableaux, styles, table des matières!

Plus en détail

Open Office Texte 4. Créer une table des matières «automatique» Numéroter les pages à partir d un point précis dans le document

Open Office Texte 4. Créer une table des matières «automatique» Numéroter les pages à partir d un point précis dans le document Open Office Texte 4 Créer une table des matières «automatique» Numéroter les pages à partir d un point précis dans le document Marion HIRSCHAUER, Juin 2015 1 Sommaire I. Les niveaux de titre : attribuer

Plus en détail

XML DTD CSS Aide-mémoire

XML DTD CSS Aide-mémoire XML DTD CSS Aide-mémoire Bernard JACQUEMIN SCIMEC/CREM UHA Bernard (pt) Jacquemin (at) uha (pt) fr Langage XML Notions Le langage XML est un langage informatique strict qui permet de structurer des données

Plus en détail

Microsoft Excel Novembre 2009

Microsoft Excel Novembre 2009 Microsoft Excel Novembre 2009 TABLE DES MATIÈRES CONCEPTS IMPORTANTS DANS MICROSOFT EXCEL... 4 Le classeur... 4 La feuille de calcul... 4 La cellule... 4 La cellule active... 5 La plage de cellules...

Plus en détail