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

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

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

Transcription

1 CSS 3 Julien David A Julien David (A / 27

2 Feuilles de styles Cascading Style Sheets CSS est un langage de feuilles de styles. Une feuille de style permet de décrire le rendu d un fichier HTML. Attention (encore) CSS n est pas un langage de programmation. Julien David (A / 27

3 Écriture d une feuille de style 1 s e l e c t e u r{ 2 p r o p r i e t e 1: valeur ; 3 p r o p r i e t e 2: valeur ; 4 } Écriture d une règle Les sélecteurs les plus simples sont les balises html. on verra qu il existe des sélecteurs plus complexes. Julien David (A / 27

4 Écriture d une feuille de style 1 html{ 2 background c o l o r : grey ; 3 } 4 5 body{ 6 background c o l o r : blue ; 7 } main{ 1 background c o l o r : black ; 2 c o l o r : white ; 3 text a l i g n : center ; 4 } Julien David (A / 27

5 Associer une feuille de style à un fichier HTML Lier CSS et HTML On ajoute dans l en-tête du fichier HTML (balise <head>) la ligne suivante. <link href= fichier.css rel= stylesheet type= text/css /> Julien David (A / 27

6 Formatage du texte Le Formatage du texte font-family : police de caractère. font-size : taille des caractères. font-style : texte en italique ou non. font-weight : texte en gras ou non. text-align : alignement horizontal du texte (gauche, droit, centré, justifié). text-decoration : texte souligné, surligné (trait au dessus), barré, clignotant, normal. color : couleur du texte.... Julien David (A / 27

7 Les couleurs Couleurs Il existe 3 façon de désigner une couleur : 1 par son nom : red, blue, lightblue,... (140 noms supportés à ce jour par tous les navigateurs) 2 par les fonctions rgb et rgba : rgb(255, 0, 0), rgb(0, 0, 255), rgb(173, 216, 230) 3 en héxidécimal : #FF 0000, #0000FF, #ADD8E6 Julien David (A / 27

8 L arrière-plan Le background background-color background-image background-repeat background-attachment background-position Julien David (A / 27

9 Les bordures Les bordures border-width border-style (requis) border-color border-radius Julien David (A / 27

10 Les listes Les listes list-style-type list-style-image list-style-position Julien David (A / 27

11 Les tableaux Les tableaux border-collapse Julien David (A / 27

12 Modèle de boîte Julien David (A / 27

13 Positionnement Positionnement statique : static Valeur par défaut, les éléments apparaîssent dans le même ordre que dans le code HTML, cet ordre est appelé le flux de la page HTML, impossible d utiliser les valeurs : top, left, right, bottom. la largeur par défaut d un type block est la largeur du conteneur. Julien David (A / 27

14 Positionnement Positionnement relatif : relative Les valeurs : top, left, right, bottom indiquent la position par rapport à celle que l élément aurait du avoir dans le flux. ne modifie pas l affichage des autres éléments dans le flux, garde les mêmes dimensions et marges que pour static. Julien David (A / 27

15 Positionnement Positionnement absolut : absolute l élément est retiré du flux, l affichage des autres éléments est effectué comme s il n existait pas, Par défaut, l élément est affiché la où il aurait du être affiché dans le flux (risque de superpositions), on utilise donc les valeurs : top, left, right, bottom, ces valeurs indiquent la position du premier ascendant qui n est pas statique (au pire, le navigateur), la largeur par défaut est la largeur minimum pour afficher le contenu. Julien David (A / 27

16 Positionnement Positionnement fixe : fixed identique à absolute sauf pour deux choses : le positionnement se fait toujours par rapport aux bords du navigateur. en cas de défilement de la page, l élément ne bouge pas. Julien David (A / 27

17 Objets flottants Objets flottants Un objet flottant que l on peut placer à droite ou à gauche de son conteneur. Le contenu des autres éléments évite alors de se superposer avec l élément flottant. Julien David (A / 27

18 Classes et identifiants HTML : Classes et identifiants Afin de marquer des balises comme possédant des caractéristiques communes ou unique, il est possible de leur attribuer une ou plusieurs classes, ou un identifiant. Julien David (A / 27

19 Classes et identifiants Classes Les classes permettent d indentifier un ensemble de balises. Dans le code HTML 1 <a r t i c l e class= exemple > 2 <header><h2 class= i t a l i q u e >Les classes</ h2></ header> 3 Ici, contrairement au monde reel, i l n y a pas de lutte des <em class= italique, rouge >classes</em> 4 </ a r t i c l e> Dans le code CSS 1. exemple{ 2 padding :1%; 3 border : 1px black s o l i d ; 4 border radius :25px ; 5 } 6. i t a l i q u e{ 7 font s t y l e : i t a l i c ; 8 } 9. rouge{ 0 c o l o r : red ; 1 } Julien David (A / 27

20 Classes et identifiants Classes Les classes permettent d indentifier un ensemble de balises. Dans le code HTML 1 <a r t i c l e class= exemple > 2 <header><h2 class= i t a l i q u e >Les classes</ h2></ header> 3 Ici, contrairement au monde reel, i l n y a pas de lutte des <em class= italique, rouge >classes</em> 4 </ a r t i c l e> Dans le code CSS 1. exemple{ 2 padding :1%; 3 border : 1px black s o l i d ; 4 border radius :25px ; 5 } 6. i t a l i q u e{ 7 font s t y l e : i t a l i c ; 8 } 9. rouge{ 0 c o l o r : red ; 1 } Julien David (A / 27

21 Classes et identifiants Classes Les classes permettent d indentifier un ensemble de balises. Dans le code HTML 1 <a r t i c l e class= exemple > 2 <header><h2 class= i t a l i q u e >Les classes</ h2></ header> 3 Ici, contrairement au monde reel, i l n y a pas de lutte des <em class= italique, rouge >classes</em> 4 </ a r t i c l e> Dans le code CSS 1. exemple{ 2 padding :1%; 3 border : 1px black s o l i d ; 4 border radius :25px ; 5 } 6. i t a l i q u e{ 7 font s t y l e : i t a l i c ; 8 } 9. rouge{ 0 c o l o r : red ; 1 } Julien David (A / 27

22 Classes et identifiants Identifiant Les identifiants permettent d identifier une balise unique. Dans le code HTML 1 <div id= j o l i f o n d > 2 Ce bloc va avoir un j o l i fond rien que pour lui. 3 </ d i v> Dans le code CSS 1 # j o l i f o n d{ 2 background image : u r l ( j o l i. jpg ) ; 3 background position : top l e f t ; 4 background repeat : no repeat ; 5 } Julien David (A / 27

23 Classes et identifiants Identifiant Les identifiants permettent d identifier une balise unique. Dans le code HTML 1 <div id= j o l i f o n d > 2 Ce bloc va avoir un j o l i fond rien que pour lui. 3 </ d i v> Dans le code CSS 1 # j o l i f o n d{ 2 background image : u r l ( j o l i. jpg ) ; 3 background position : top l e f t ; 4 background repeat : no repeat ; 5 } Julien David (A / 27

24 Classes et identifiants Identifiant Les identifiants permettent d identifier une balise unique. Dans le code HTML 1 <div id= j o l i f o n d > 2 Ce bloc va avoir un j o l i fond rien que pour lui. 3 </ d i v> Dans le code CSS 1 # j o l i f o n d{ 2 background image : u r l ( j o l i. jpg ) ; 3 background position : top l e f t ; 4 background repeat : no repeat ; 5 } Julien David (A / 27

25 Les pseudos classes Les pseudos-classes Permet de spécifier un état particulier d une balise. Quelques exemples Interaction avec la souris :hover la souris passe sur la balise. :active clic maintenu sur la balise. Les liens hypertextes : :link lien non visité. :visited lien visité. Les <input> des formulaires :valid les valeurs sont valides. :invalid les valeurs sont invalides. Julien David (A / 27

26 Les pseudos éléments Les pseudos-éléments Permet de spécifier la mise en page de parties spécifiques d une balise. : :before permet d insérer du contenu avant celui d une balise. : :after permet d insérer du contenu après celui d une balise. : :selection zone sélectionnée/surlignée par l utilisateur. : :first-line première ligne de texte du conteneur. : :first-letter première lettre de texte du conteneur. Julien David (A / 27

27 Combinaisons Combinaisons de sélecteurs Il est possible de combiner plusieurs sélecteurs. Conjonction 1. l o l : : before,. l o l : : a f t e r{ 2 content : u r l ( l o l. png ) ; 3 } Julien David (A / 27

28 Rappel : Le DOM Code html 1 <! doctype html> 2 <html> 3 <head> 4 <meta charset= UTF 8 /> 5 </ head> 6 7 <body> 8 <nav> 9 <a href= 5 image. html >Image</ a> 0 <a href= 6 son. html >Son</ a> 1 <a href= 7 video. html >Video</ a> 2 </ nav> 3 4 <main> 5 <header> 6 <h1>je suis l en tete principal de la page</ h1> 7 </ header> 8 9 <a r t i c l e> 0 <header> 1 <h3>je suis l en tete d un article</ h3> 2 </ header> 3 <s e c t i o n> 4 Je suis une section dans un a r t i c l e. 5 </ s e c t i o n> 6 </ a r t i c l e> 7 8 <footer>je suis le pied de page de l a r t i c l e.</ footer> 9 </ main> </ body> 3 4 </ html> DOM html head body meta meta meta title nav main header article footer h1 header section h3 Julien David (A / 27

29 Combinaisons Combinaisons de sélecteurs A B B descendant de A. A > B B descendant direct de A. A + B B directement adjacent à A (B après A). A B B adjacent à A (B après A). A.B tous les A de classe B. A # B A avec identifiant B. A,B A et B. Julien David (A / 27

30 Héritage Héritage par défaut Certaines propriétés sont héritées par défaut par tous les éléments du conteneur. La couleur du texte, La police, Les styles de listes,... Exceptions Les balises ayant des propriétés prédéfinies n hériteront pas automatiquement. la couleur des liens hypertextes, les modifications de la police pour les balises <h1>,..., <h6>, <em> et <strong>. Julien David (A / 27

31 Héritage Héritage par défaut Certaines propriétés sont héritées par défaut par tous les éléments du conteneur. La couleur du texte, La police, Les styles de listes,... Exceptions Les balises ayant des propriétés prédéfinies n hériteront pas automatiquement. la couleur des liens hypertextes, les modifications de la police pour les balises <h1>,..., <h6>, <em> et <strong>. Julien David (A / 27

32 Héritage Héritage explicite Pour toute propriété, on peut préciser explicitement qu elles vont être héritées du conteneur. Exemple 1 main{ 2 margin :2%; 3 border :1px solid black ; 4 } 5 p{ 6 margin : inherit ; 7 border : i n h e r i t ; 8 } Julien David (A / 27

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

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

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

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

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

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

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

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

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

Programmation Web HTML5

Programmation Web HTML5 Programmation Web HTML5 Julien David A101 - david@lipn.univ-paris13.fr 2016 Julien David (A101 - david@lipn.univ-paris13.fr) 2016 1 / 1 Organisation Cours 5 séances pour 5 langages : HTML5, CSS3, PHP5,

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

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

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

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

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

TD n 5 : Feuilles de styles

TD n 5 : Feuilles de styles 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

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

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

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

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

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. HyperText Markup Language. Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises qui permettent :

HTML. HyperText Markup Language. Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises qui permettent : HTML HyperText Markup Language Objectifs : - s'initier au langage HTML - savoir lire un code source html simple Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises

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

HTML/CSS. Louis-Claude CANON. 16 et 17 septembre CANON HTML/CSS 16 et 17 septembre / 40

HTML/CSS. Louis-Claude CANON. 16 et 17 septembre CANON HTML/CSS 16 et 17 septembre / 40 HTML/CSS Louis-Claude CANON louis-claude.canon@loria.fr 16 et 17 septembre 2009 CANON HTML/CSS 16 et 17 septembre 2009 1 / 40 Plan Contexte introductif 1 Contexte introductif 2 HTML 3 CSS 4 Synthèse CANON

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

ISN - HTML : Apprendre HTML5. M. Lagrave HTML5. Code source Site classique CSS Bluefish. M. Lagrave. Lycée Beaussier

ISN - HTML : Apprendre HTML5. M. Lagrave HTML5. Code source Site classique CSS Bluefish. M. Lagrave. Lycée Beaussier Lycée Beaussier 2012 2013 Sommaire Le HTML «HyperText Markup Language» est un langage de balisage pour la création de site internet, il sert à structurer votre document. D autres langages peuvent s ajouter

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

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

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

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

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

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

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

Fiche TD n 1 Le langage HTML

Fiche TD n 1 Le langage HTML Fiche TD n 1 Le langage HTML 1 Introduction Le HTML est le langage utilisé pour formaliser l information échangée sur internet. Il est constitué de balises qui indiquent de quelle manière les informations

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

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

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

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

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

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

MODULE HTML CSS.

MODULE HTML CSS. MODULE HTML CSS David Tourel david.tourel@iut-tlse3.fr HTML : HyperText Markup Language Langage de description Interprété par les navigateurs Associé au CSS et JavaScript Métiers: développeur front end,

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

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

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

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

XML. DTD Le schéma XSD

XML. DTD Le schéma XSD XML Structure d un dun document xml DTD Le schéma XSD Structure dun d un document XML Un document XML contient les éléments suivants: Le prologue Un arbre contenant

Plus en détail

HTML 5 CSS 3 Responsive

HTML 5 CSS 3 Responsive HTML 5 CSS 3 Responsive Programme de formation Microsoft Partner France Belgique Suisse - Canada Formez vos salariés pour optimiser la productivité de votre entreprise Dernière mise à jour : Avril 2014

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

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

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

Développement Web (NFA0016)

Développement Web (NFA0016) Développement Web (NFA0016) première session Février 2013 Durée : 3h Modalités : Tous documents autorisés. Calculatrices, ordinateurs, téléphones portables interdits. Barème donné à titre indicatif. Exercice

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

Introduction au langage HTML L1S Un fichier HTML est un fichier contenant du texte, «lisible» dans un éditeur de texte

Introduction au langage HTML L1S Un fichier HTML est un fichier contenant du texte, «lisible» dans un éditeur de texte Introduction au langage HTML L1S1 2012-2013 I Quelques généralités Un fichier HTML est un fichier contenant du texte, «lisible» dans un éditeur de texte Lorsque vous consultez un site, les fichiers HTML

Plus en détail

XHTML. et CSS 2. Michel Martin

XHTML. et CSS 2. Michel Martin XHTML et CSS 2 Michel Martin 1 Les bases du XHTML/CSS Ce premier chapitre rappelle tout ce qu il est bon de connaître lorsque l on se lance dans la programmation XHTML/ CSS, depuis la déclaration de types

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

Mémento des balises HTML 5

Mémento des balises HTML 5 Mémento des balises HTML 5 s de premier niveau Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour réaliser le «code minimal» d'une

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

Arbres Mathématiques Informatique et Navigateurs Internet

Arbres Mathématiques Informatique et Navigateurs Internet Arbres Mathématiques Informatique et Navigateurs Internet Jacques Duma Présentation de la structure d arbre sur des exemples qui montrent où elle intervient en mathématique et en informatique. Application

Plus en détail

COURS DE PROGRAMMATION DE SITE WEB 1

COURS DE PROGRAMMATION DE SITE WEB 1 COURS DE PROGRAMMATION DE SITE WEB 1 Chapitre 1 Les bases PLAN DU COURS 1.1 L histoire du WEB 1.2 Du HTML au XHTML et le CSS 1.3 Définition (HTML, XTML, CSS, ASP, PHP, FLASH, CGI, PEARL) 1.4 Les éditeurs

Plus en détail

Test Test Test Test Test

Test Test Test Test Test Mise en forme d un document HTML Niveaux de titre Le langage HTML définit 6 niveaux de titre (en anglais heading), afin de définir une structuration hiérarchique des paragraphes dans un texte : Balise

Plus en détail

Les feuilles. de styles CSS. Castanet Thomas - Année scolaire 2009/ page 1

Les feuilles. de styles CSS. Castanet Thomas - Année scolaire 2009/ page 1 Les feuilles de styles CSS Castanet Thomas - Année scolaire 2009/2010 - page 1 Sommaire : Présentation 4 Les propriétés de styles 4 Formatage de police................................... 4 Contrôle du

Plus en détail

Mémento des balises HTML

Mémento des balises HTML Chapitre 21 Mémento des balises HTML Diculté : C ette page est une liste non exhaustive des balises HTML qui existent. Vous trouverez ici un grand nombre de balises HTML. Nous en avons déjà vu certaines

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

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

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

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

Cours 11 Feuilles de styles CSS

Cours 11 Feuilles de styles CSS École de bibliothéconomie et des sciences de l information SCI6052 Information documentaire numérique Cours 11 Faculté des arts et des sciences 22 novembre 2016 Christine Dufour, 2016 1/ 30 SCI6052 2/

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

INSA - ASI TechnoWeb : jquery 1/24. Technologies Web. jquery. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18,

INSA - ASI TechnoWeb : jquery 1/24. Technologies Web. jquery. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18, INSA - ASI TechnoWeb : jquery 1/24 Technologies Web jquery Alexandre Pauchet INSA Rouen - Département ASI BO.B.RC.18, pauchet@insa-rouen.fr INSA - ASI TechnoWeb : jquery 2/24 Plan 1 Introduction 2 Fonctionnalités

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

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

Partie 2 : La mise en forme avec CSS

Partie 2 : La mise en forme avec CSS Partie 2 : La mise en forme avec CSS Sommaire : Mettre en lace le CSS : Aliquer un style : sélectionner une balise Aliquer un style : class et id Aliquer un style : les sélecteurs avancés Formatage du

Plus en détail

1. Mise en page 2 2. En-tête et pied de page Format du texte Notes de bas de page 6 5. Utilisation des styles 7

1. Mise en page 2 2. En-tête et pied de page Format du texte Notes de bas de page 6 5. Utilisation des styles 7 1. Mise en page 2 2. En-tête et pied de page 2 2.1. en -tête 2 2.2. pied de page 3 3. Format du texte 4 3.1. Alignement 4 3.2. police, taille 4 3.3. cadre 6 3.4. Caractères spéciaux 6 4. Notes de bas de

Plus en détail

Tutoriel : Feuille de style externe

Tutoriel : Feuille de style externe Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?

Plus en détail

HTML et page Web diaporama

HTML et page Web diaporama but du diaporama principe général le titre ainsi qu une section contenant un paragraphe le titre ainsi qu un paragraphe dont le texte est centré une section dont le texte est coloré en rouge (couleur définie

Plus en détail

Technologies du Web. CONDITIONS DE DEROULEMENT DE L ACTIVITE Phases de travail Objectifs Activités

Technologies du Web. CONDITIONS DE DEROULEMENT DE L ACTIVITE Phases de travail Objectifs Activités Technologies du Web Tutoriel 2 : «Présenter une page Web» Problématique Présenter une page web avec une feuille de style. CONDITIONS DE DEROULEMENT DE L ACTIVITE Phases de travail Objectifs Activités 1

Plus en détail

UNIX ET PROGRAMMATION WEB Cours 5

UNIX ET PROGRAMMATION WEB Cours 5 Plan UNIX ET PROGRAMMATION WEB Cours 5 kn@lri.fr http://www.lri.fr/~kn 1 Systèmes d'exploitation (1/2) 2 Systèmes d'exploitation (2/2) 3 Réseaux, TCP/IP 4 Web et HTML 5 CSS 5.1 Introduction 5.2 Boîtes

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

Fiche Interface du tableur. Table des matières

Fiche Interface du tableur. Table des matières Fiche Interface du tableur Table des matières 1-Interface...1 2-Barres d'outils...1 3- Cellules...7 3.1-Onglet «Bordures»...7 3.2-Onglet «Alignement»...8 3.3-Onglet «Nombres»...8 3.4-Onglet «Arrière-plan»...9

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

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

HTML5 et CSS3 Faites évoluer le design de vos sites web (3e édition)

HTML5 et CSS3 Faites évoluer le design de vos sites web (3e édition) Introduction A. La création de sites web 18 B. Les langages 18 C. Le livre 18 1. Pour les designers web 18 2. Le contenu 18 Chapitre 1 : L évolution du HTML et des CSS A. Rapide historique de l Internet

Plus en détail

HTML5 et CSS3 Complément vidéo : Découvrez les nouveaux effets et l'insertion native de l'audio et de la vidéo

HTML5 et CSS3 Complément vidéo : Découvrez les nouveaux effets et l'insertion native de l'audio et de la vidéo Introduction A. La création de sites web 18 B. Les langages 18 C. Le livre 18 1. Pour les designers web 18 2. Le contenu 18 Chapitre 1 : L évolution du HTML et des CSS A. Rapide historique de l Internet

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

- WEB / HTML - Annexe 1 : Définition des balises HTML

- WEB / HTML - Annexe 1 : Définition des balises HTML Balises d encadrement - WEB / HTML - Annexe 1 : Définition des balises HTML Encadre le code source. Encadre la zone d entête de la page Web dans laquelle

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

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

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

Fiche Interface du tableur. Table des matières

Fiche Interface du tableur. Table des matières Fiche Interface du tableur Table des matières 1-Interface...1 2-Barres d'outils...2 3- Cellules...8 3.1-Onglet «Nombres»...8 3.2-Onglet «Police»...9 3.3-Onglet «Effets de caractère»...9 3.4-Onglet «Alignement»...10

Plus en détail

4. LES TRANSITIONS EN CSS3

4. LES TRANSITIONS EN CSS3 151 4. LES TRANSITIONS EN CSS3 Les CSS3 permettent, avec le module Transition de passer d une valeur CSS à une autre avec une transition spécifiée si un événement est détecté au niveau d un élément. Concrètement,

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

Les bases du HTML5/CSS3

Les bases du HTML5/CSS3 1 Les bases du HTML5/CSS3 Ce premier chapitre rappelle tout ce qu il est bon de connaître lorsqu on se lance dans le développement HTML5/CSS3, depuis la déclaration de type de document jusqu au regroupement

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

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

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

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

Examen du 16 décembre 2014

Examen du 16 décembre 2014 Licence STS mention Informatique, semestre 5 2014 2015 Programmation fonctionnelle (Info 311) Durée : 3h 6 pages Examen du 16 décembre 2014 Les notes de TD manuscrites ainsi que les fiches de cours et

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