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

Save this PDF as:
 WORD  PNG  TXT  JPG

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

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

Transcription

1 CSS positionnement

2 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 min-height, padding, margin. Principaux éléments de type bloc : header, section, footer, article, aside les titres h1, h2, h3, h4, h5, h6 ; le paragraphe p ; les listes et éléments de liste ul, ol, li, dl, dd ; le bloc de citation blockquote ; le texte pré-formaté pre ; les tableaux table. 2

3 POSITIONNEMENT Rappel balises de type inline Les éléments se placent les uns à côté des autres. Les propriétés width, height, padding-top(bottom), margin-top(bottom) NE SONT PAS utilisables. Principaux éléments de type inline le lien a ; l'image img ; les emphases em et strong ; la citation q et cite ; l'élément code ; l'exemple samp ; les abréviations et acronymes abbr, acronym ; 3

4 POSITIONNEMENT Flux : traitement linéaire du contenu de la page. Bloc et inline => design vite limité!!!! Comment répondre au besoin de placer 2 blocs côte à côte. 4

5 LES TABLEAUX - FLOW Les tableaux ont longtemps été utilisés pour de la mise en forme. Mais c est une mauvaise idée car pas de séparation du fond et de la forme! Balise de type bloc. Eléments spécifiques pour les tableaux : <table> Déclaration du tableau <caption> titre du tableau <tr> - Ligne de tableau <th> - Cellule d'en-tête du tableau <td> - Cellule du tableau 5

6 TABLEAU EXEMPLE HTML Rendu navigateur 6

7 LES TABLEAUX GROUPE DE COLONNES colgroup : regroupement de colonnes ayant la même structure. col : définition des colonnes regroupées sous l élément <colgroup> Attributs : span : permet d indiquer le nombre de colonne width : indication de la largeur de la colonne. 7

8 LES TABLEAUX GROUPE DE LIGNES Pour organiser un long tableau, on peut être amené à regrouper les lignes : <thead> pour l entête. <tfoot> pour le pied. Attention, l ordre est différent au niveau de l écriture, <tfoot> s écrit avant <tbody> <tbody> pour le corps Attribut de fusion de cellule : fusion de ligne : rowspan fusion de colonne : colspan 8

9 TABLEAUX - EXEMPLE HTML Rendu navigateur 9

10 TABLEAUX MAIS ÇA C ÉTAIT AVANT! Waybackmachine : archive du net. ( ) Visualisation ebay.fr, juin 2001 (idem fnac, amazon ) 10

11 Les tableaux sont utiles pour présenter des données PAS POUR DE LA MISE EN FORME (sauf cas des newsletters) Le positionnement des blocs se gère à l aide de 3 propriétés CSS. 11

12 1. LA PROPRIÉTÉ POSITION Propriété position (porte bien son nom! ) 3 valeurs : absolute, relative ou fixed Accompagnée des propriétés left, right, top bottom qui prennent une valeur en px, pt, cm, %... Effet de calque. A utiliser avec parcimonie. 12

13 1. POSITION : RELATIVE Position relative inscrit l élément dans le flux normal, puis le décale horizontalement et/ou verticalement. Le contenu suivant n'est pas affecté par ce déplacement. «relatif» par rapport à son emplacement d origine. 13

14 1. POSITION Z-INDEX Calque au dessus Gestion des calques : propriété z-index (valeur positive ou négative). Calque au dessous 14

15 1. POSITION : ABSOLUTE Suppression radicale de l élément dans le flux. permet de ne pas dépendre de l'ordre dans lequel les éléments HTML sont déclarés dans le code Se positionne par rapport à la fenêtre du navigateur, en haut et à gauche, ou par rapport au dernier élément positionné 15

16 1.POSITION: ABSOLUTE 400px 16

17 1. POSITION : FIXED Positionnement fixed : ne fait plus parti du flux. L élément est toujours positionné au même endroit malgré le défilement sur l écran 17

18 2. LES ÉLÉMENTS FLOTTANTS Float Permet d aligner des blocs. 3 valeurs left, right, none : left = L'élément se trouve à gauche et sera entouré par la droite des éléments qui le suivent. right = L'élément se trouve à droite et sera entouré par la gauche des éléments qui le suivent. none = L'élément ne sera pas entouré (réglage normal). Est associé à l attribut width. Dans le fichier HTML, le bloc avec la propriété float doit toujours être écrit AVANT le bloc non flottant. 18

19 2. FLOAT PAR L EXEMPLE FLOAT : LEFT; HTML Rendu navigateur SANS FLOTTANT Rendu navigateur AVEC FLOTTANT CSS 19

20 2.FLOAT PAR L EXEMPLE - FLOAT : RIGHT CSS HTML Rendu navigateur 20

21 2. FLOAT PAR L EXEMPLE A NE PAS SUIVRE Historique de la propriété «float», utilisation pour afficher du contenu en colonne : margin sur le non-flottant 350px (margin-left) 21

22 2. FLOAT & CLEAR Clear : force le passage du bloc en dessous. clear : left = «annule» un float : left. clear : right = «annule» un float : right. both = «annule» les flottants à gauche et à droite. none = maintient le flottant. 22

23 FLOAT & CLEAR PAR L EXEMPLE Lorsque le contenu du float est plus «haut» que le contenu en position «normale». Problème car le texte du premier paragraphe est moins haut que l image 1 23

24 CLEAR 24

25 3. DISPLAY - Modification du comportement, sans perturber le flux La propriété Display admet plusieurs valeurs inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, tableheader-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, flex, inherit 25

26 DISPLAY INLINE, BLOCK, INLINE-BLOCK block l élément sera considéré comme un élément de type block => possibilité de lui affecter une taille des marges verticales (exemple d utilisation : le lien d un menu). inline l élément sera considéré comme un élément de type inline. Attention, la propriété «width» n est pas active. inline-block L élément est traité comme un élément inline MAIS il est possible de lui affecter une taille et des marges. 26

27 DISPLAY INLINE-BLOCK 27

28 3. DISPLAY :NONE L élément ne sera pas affiché. Par exemple, permet de masquer des éléments de sous menu. Test possible des propriétés : rycss_display_inline2 28

29 DISPLAY NONE - INLINE-BLOCK 29

30 DISPLAY LIST-ITEM transforme n importe quel élément en liste. Peut supporter les propriétés suivantes : 'list-style-type', 'list-style-image', 'list-style-position' et 'list-style' 30

31 DISPLAY MISE EN FORME TABULAIRE Avantages : //avec les anciennes pratiques de mises en forme sous forme de tableau. Permet de centrer verticalement en utilisant la propriété vertical-align. Inconvénients : La propriété margin n est pas applicable aux éléments en display table-cell La propriété padding n est pas applicables aux élément en display: table-row-group, table-header-group, table-footer-group, tablerow, table-column-group et table-column. 31

32 DISPLAY DE TYPE DISPLAY : TABLE table, inline-table, table-row-group, table-column, table-column-group, table-header-group, tablefooter-group, table-row, table-cell et table-caption comportement identique à celui d'une table display: table-cell. Le bloc se comporte comme une cellule => texte peut se centrer verticalement. 32

33 DISPLAY : TABLE-CELL Si aucun display : table n est décrit dans les prédécesseurs, le navigateur crée les objets de table manquants. Pour aller plus loin 33

34 DISPLAY : TABLE-CELL EXEMPLE 34

35 DISPLAY : FLEX Boîte flexible, c est-à-dire peut prendre toute la largeur ou pas, peut s afficher en colonne, ou en ligne. Déclaration de la propriété display : flex sur le parent. Pour les enfants concernés, précisions avec d autres propriétés : flex, flex-direction(valeur : column ou row), order! Navigateurs récents. Pour aller plus loin : flexbox-layout-module.html 35

36 LES MEDIA-QUERIES Css2 : attribut media de la balise link Css3 : media-queries Utilisation dans le fichier CSS(à la place de la balise suivi du type Exemple : HTML CSS 36

37 MEDIA-QUERIES Opérateurs logiques and "et", only "uniquement" not "non". Exemple pour écran de dimension inférieure à 640px 37

3. LE POSITIONNEMENT DANS LE FLUX COURANT (FLUX NORMAL)

3. LE POSITIONNEMENT DANS LE FLUX COURANT (FLUX NORMAL) 101 2.4. La norme ARIA 1? Les attributs «role» font partie d'une spécification du W3C : WAI-ARIA. Cette norme, couramment appelée ARIA, a été introduite avant HTML 5 pour pallier le manque d'accessibilité

Plus en détail

BDW1 - Programmation web - CSS

BDW1 - Programmation web - CSS BDW1 - Programmation web - CSS Fabien Duchateau fabien.duchateau [at] univ-lyon1.fr Université Claude Bernard Lyon 1 2016-2017 http://liris.cnrs.fr/fabien.duchateau/ens/bdw1/ Positionnement dans BDW1 BDW1

Plus en détail

CSS avancées. Vers HTML 5 et CSS 3. Raphaël Goetter. Préface de Daniel Glazman. Groupe Eyrolles, 2011, ISBN : 978-2-212-12826-0

CSS avancées. Vers HTML 5 et CSS 3. Raphaël Goetter. Préface de Daniel Glazman. Groupe Eyrolles, 2011, ISBN : 978-2-212-12826-0 CSS avancées Vers HTML 5 et CSS 3 Raphaël Goetter Préface de Daniel Glazman Groupe Eyrolles, 2011, ISBN : 978-2-212-12826-0 122 Tirer le meilleur de CSS première partie background: gray; margin: 5px; padding:

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

Balises de tableau. - choisir des bordures à afficher - contrôler le quadrillage des cellules - traiter séparément les sections (en-tête, corps, pied)

Balises de tableau. - choisir des bordures à afficher - contrôler le quadrillage des cellules - traiter séparément les sections (en-tête, corps, pied) Les tableaux XHTML ne sont pas qu un bon moyen de présenter l information, mais aussi un bon outil de mise en page Les tableaux permettent de - choisir des bordures à afficher - contrôler le quadrillage

Plus en détail

Cours Web n o 3 CSS Notions avancées

Cours Web n o 3 CSS Notions avancées Modèle de boîtes de CSS Cours Web n o 3 CSS Notions avancées Sandrine-Dominique Gouraud (gouraud@lri.fr) Pierre Senellart (pierre@senellart.com) Semaine du 3 octobre 2005 S.-D. Gouraud, P. Senellart (IFIPS)

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

HTML & CSS. d e s i g n w e b. [ présentation ]

HTML & CSS. d e s i g n w e b. [ présentation ] d e s i g n w e b [ présentation ] Généralités Les feuilles de styles (CSS) existent depuis 1996. Elles ne sont vraiment correctement supportées par les navigateurs que depuis 2000-2001. C'est donc depuis

Plus en détail

Mémento. Balises de premier niveau

Mémento. Balises de premier niveau Mémento 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 page web. principale

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 10 Réussir son site web avec XHTML et CSS Positionnement et mise en page par le CSS 1. Les 3 modes d affichage pour les éléments HTML... 1 1- Bloc / block... 1 2- En-ligne / inline... 1 3- Invisible

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

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

CSS. Techniques de mise en page. Chapitre 03

CSS. Techniques de mise en page. Chapitre 03 57 CSS Chapitre 03 Techniques de mise en page Objectifs du chapitre : Comprendre le modèle de boîte Les imbrications de boîtes Les zones structurelles de l HTML 5 Le positionnement dans le flux courant

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

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

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

Recouvrement des bordures

Recouvrement des bordures 4 Propriétés de mise en forme Tableau 4 43 Propriété table-layout (suite) auto : largeur automatique (valeur par défaut) ou fixed : largeur fixe. Propriété héritée. Pour retrouver la valeur initiale, utiliser

Plus en détail

LISTE DES BALISES EN HTML5

LISTE DES BALISES EN HTML5 LISTE DES BALISES EN HTML5 AIDE-MÉMOIRE HTML&CSS www.multiforme.eu BALISE DEFINITION DES BALISES DESCRIPTION Pour un commentaire L inclusion du DOCTYPE dans un document HTML assure

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

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

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 :

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

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

INSA - ASI TechnoWeb : CSS 1/23. Technologie Web CSS. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18,

INSA - ASI TechnoWeb : CSS 1/23. Technologie Web CSS. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18, INSA - ASI TechnoWeb : CSS 1/23 Technologie Web CSS Alexandre Pauchet INSA Rouen - Département ASI BO.B.RC.18, pauchet@insa-rouen.fr INSA - ASI TechnoWeb : CSS 2/23 Plan 1 Les CSS 2 XML et CSS INSA - ASI

Plus en détail

Développement. Web. Gaël Mahé. UFR math-info. automne 2005

Développement. Web. Gaël Mahé. UFR math-info. automne 2005 Développement Client Web Gaël Mahé UFR math-info automne 2005 Introduction 2 langages s'intégrant dans HTML, interprétés par le navigateur : CSS = langage de style JavaScript = langage de programmation

Plus en détail

VIVE LES TABLEAUX DE MISE EN PAGE! et si la solution était là depuis le début?

VIVE LES TABLEAUX DE MISE EN PAGE! et si la solution était là depuis le début? VIVE LES TABLEAUX DE MISE EN PAGE! et si la solution était là depuis le début? Raphaël Goetter ~ Paris Web 2011 Au tableau : élève Raphaël Goetter Dew TABLE(AU) DES MATIERES (hé hé) 1. Les dessous de table

Plus en détail

LE RECAP ಠ_ಠ. C est trop facile!

LE RECAP ಠ_ಠ. C est trop facile! LE RECAP ಠ_ಠ C est trop facile! POUR COMMENCER... Quand on commence un fichier HTML (HyperText Markup Language), on écrit en premier le DOCTYPE!! sans oublier les balises

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

TP : Zoning HTML / CSS

TP : Zoning HTML / CSS RETROUVEZ L INTÉGRALITÉ DES COURS SUR EPROJET.FR EVOGUE.FR LIAM TARDIEU TP : Zoning HTML / CSS Si l'on souhaite créer un site web, cela commence par apprendre à créer des zones (un zoning). Avant d'intégrer

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

CSS. Alexandre Benoit TS 2016/2017. D après openclassrooms

CSS. Alexandre Benoit TS 2016/2017. D après openclassrooms CSS D après openclassrooms Alexandre Benoit TS 2016/2017 I Les bases du CSS 2 / 29 Introduction Où écrit t on le CSS? : Dans un nouveau fichier par exemple, nous l écrirons dans le fichier style.css Dans

Plus en détail

Introduction aux technologies WEB. Pr. Hajar IGUER

Introduction aux technologies WEB. Pr. Hajar IGUER Introduction aux technologies WEB Pr. Hajar IGUER hajar.iguer@uic.ac.ma LES BALISES Les attributs Les balises HTML peuvent avoir des attributs. Chaque balise accepte uniquement les attributs qui la concerne.

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

CSS. Alexandre Benoit TS10. D après openclassrooms

CSS. Alexandre Benoit TS10. D après openclassrooms CSS D après openclassrooms Alexandre Benoit TS10 I Les bases du CSS 2 / 31 Introduction Où écrit t on le CSS? : 3 / 31 Introduction Où écrit t on le CSS? : Dans un nouveau fichier par exemple, nous l écrirons

Plus en détail

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

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 tableau Lévis Thériault, hiver 2009 Structure d un tableau

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

DAW Développement Applications Web. Ouadfel Salima Site du cours:

DAW Développement Applications Web. Ouadfel Salima Site du cours: DAW Développement Applications Web Ouadfel Salima Site du cours: http://salimaouadfel.e-monsite.com/ Conception de page web statique 2. CSS3 Validation CSS W3C Validator at http://jigsaw.w3.org/css-validator/

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

Web. Bruno BEAUFILS 2017/2018. Web 1 / 15

Web. Bruno BEAUFILS 2017/2018. Web 1 / 15 Web Bruno BEAUFILS 2017/2018 Web 1 / 15 1. World Wide Web HTML CSS Web World Wide Web 2 / 15 1. World Wide Web HTML CSS Web World Wide Web 3 / 15 Exercice Ecrivez un document vous décrivant à la forme

Plus en détail

Balises obsolètes. <p>texte</p> 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

Introduction au Web. Bruno BEAUFILS 2017/2018. Introduction au Web 1 / 15

Introduction au Web. Bruno BEAUFILS 2017/2018. Introduction au Web 1 / 15 Introduction au Web Bruno BEAUFILS 2017/2018 Introduction au Web 1 / 15 1. Retours 2. CSS CSS Introduction au Web Retours 2 / 15 Retours Syntaxe Syntaxe HTML pas respectée indenter votre texte (pour voir

Plus en détail

Introduction aux technologies WEB. Pr. Hajar IGUER

Introduction aux technologies WEB. Pr. Hajar IGUER Introduction aux technologies WEB Pr. Hajar IGUER hajar.iguer@uic.ac.ma CSS : CASCADING STYLE SHEET I 2 Historique CSS a été introduit avec HTML 4, afin de fournir une meilleure façon de mettre en forme

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

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

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

HIVER 2017 COURS INF2005 : PROGRAMMATION WEB. Exercices de Programmation Web, Laboratoires et TP

HIVER 2017 COURS INF2005 : PROGRAMMATION WEB. Exercices de Programmation Web, Laboratoires et TP HIVER 2017 COURS INF2005 : PROGRAMMATION WEB Exercices de Programmation Web, Laboratoires et TP Professeur : Abdel OBAID Ateliers : Ruben Chambilla Février 2017 TABLEAU DES MATIÈRES 1. Introduction...1

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

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

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

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

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

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

CSS. Karima Boudaoud IUT- R&T

CSS. Karima Boudaoud IUT- R&T CSS Karima Boudaoud IUT- R&T Plan Plan Références bibliographiques Introduction à CSS Sélecteurs Propriétés et valeurs Responsive design Conclusion Karima Boudaoud IUT R&T - Sophia Antipolis 3 Références

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

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

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez Mohammed REZGUI m.rezgui06@gmail.com Basé sur le cours de Guillaume Perez Contenu, Organisation Objectif principal: Base pour la création d un site Notions de client-serveur Notions de programmations Option

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

Balises obsolètes. <p>texte</p> 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

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

Mise en forme CSS3. Copyright Cédric Lefrancq - Tous droits réservés.

Mise en forme CSS3. Copyright Cédric Lefrancq - Tous droits réservés. Mise en forme CSS3 Copyright 2017 - Cédric Lefrancq - Tous droits réservés. 1 TABLE DES MATIERES Les bases de la feuille de style... 3 Les commentaires en CSS... 3 Intégrer la page CSS dans la page HTML...

Plus en détail

Principales balises HTML5

Principales balises HTML5 Principales balises HTML5 RAPPEL : Tout document HTML commence par le DOCTYPE suivi de la balise , et s achève avec la balise . DOCTYPE et HTML : Le DOCTYPE : La déclaration

Plus en détail

Programmation PHP Septembre 2010

Programmation PHP Septembre 2010 IFT1147 Programmation Serveur Web avec PHP Un bref survol de HTML et CSS HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,

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 d'interfaces Web

Conception d'interfaces Web Conception d'interfaces Web Licence 1 2. Créer un site Web avec HTML5 et CSS3 Bruno Jobard I. Introduction Les langages HTML et CSS décrivent la structure et la présentation d'une page Web. HTML est un

Plus en détail

Flexbox. Merci à : https://openclassrooms.com/courses/appreneza-creer-votre-site-web-avec-html5-et-css3/la-mise-enpage-avec-flexbox

Flexbox. Merci à : https://openclassrooms.com/courses/appreneza-creer-votre-site-web-avec-html5-et-css3/la-mise-enpage-avec-flexbox Flexbox Merci à : https://openclassrooms.com/courses/appreneza-creer-votre-site-web-avec-html5-et-css3/la-mise-enpage-avec-flexbox 03/04/2017 Au début, les webmasters utilisaient des tableaux HTML pour

Plus en détail

3/ ATELIER WEB LANGAGE CSS

3/ ATELIER WEB LANGAGE CSS 3/ ATELIER WEB LANGAGE CSS *Cascading Style Sheets : feuilles de style en cascade. Les feuilles de style servent, comme leur nom l'indique, à contenir les styles que vont prendre les différents éléments

Plus en détail

Les feuilles de style

Les feuilles de style 1 Les feuilles de style 1. introduction... 1 2. déclaration de style dans le document... 1 3. définitions de style dans les fichiers externes... 5 4. Les attributs de définitions de style... 6 1. introduction

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

DAW Développement Applications Web. Ouadfel Salima Site du cours:

DAW Développement Applications Web. Ouadfel Salima Site du cours: DAW Développement Applications Web Ouadfel Salima Site du cours: http://salimaouadfel.e-monsite.com/ Développement d Applications Web L'objectif de ce module est: 1. S'initier à la programmation Web en

Plus en détail

IAE - Web Marketing. Créer un site internet «simple» Publier un site internet Référencer un site internet. Olivier Toscano Gérant WebCMS Sàrl

IAE - Web Marketing. Créer un site internet «simple» Publier un site internet Référencer un site internet. Olivier Toscano Gérant WebCMS Sàrl IAE - Web Marketing Créer un site internet «simple» Publier un site internet Référencer un site internet Olivier Toscano Gérant WebCMS Sàrl HTML HTML est un langage à balisage Les balises permettent de

Plus en détail

Langages de l Internet

Langages de l Internet Langages de l Internet http://sebastien.mavromatis.free.fr/ Les feuilles de style CSS : Cascading Style Sheet Recommandation du W3C CSS1 (1996), CSS2 (1998), CSS2.1 (2005), CSS3 Support par les navigateurs

Plus en détail

Table des matières LES ÉLÉMENTS DE BASES DE LA PAGE LES BALISES DE SECTIONNAGE LES BALISES DE DISPOSITIONS LES BALISES - 3 -

Table des matières LES ÉLÉMENTS DE BASES DE LA PAGE LES BALISES DE SECTIONNAGE LES BALISES DE DISPOSITIONS LES BALISES - 3 - Table des matières LES ÉLÉMENTS DE BASES DE LA PAGE - 1 - LES BALISES DE SECTIONNAGE - 2 - LES BALISES DE DISPOSITIONS - 2 - LES BALISES - 3 - LES DIFFÉRENTS TYPES DE BALISES - 3 - LES TABLES - 5 - LES

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

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

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

Introduction au Web. Andrea G. B. Tettamanzi. Université de Nice Sophia Antipolis Département Informatique

Introduction au Web. Andrea G. B. Tettamanzi. Université de Nice Sophia Antipolis Département Informatique Introduction au Web Andrea G. B. Tettamanzi Université de Nice Sophia Antipolis Département Informatique andrea.tettamanzi@unice.fr Andrea G. B. Tettamanzi, 2013 1 CM - Séance 2 HTML Andrea G. B. Tettamanzi,

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

introduction principes syntaxe CSS : introduction

introduction principes syntaxe CSS : introduction CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1 au programme... 1 introduction 2 principes 3 syntaxe Université Lille 1 Technologies du Web CSS : introduction 2 au programme...

Plus en détail

Responsive Web Design, mises en page et grilles Les techniques modernes de conception web (2e édition)

Responsive Web Design, mises en page et grilles Les techniques modernes de conception web (2e édition) Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Les objectifs du livre 13 E. Les outils de l intégrateur web 13 1. Les

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

Développement Web. Les bases HTML et CSS LI328 UPMC

Développement Web. Les bases HTML et CSS LI328 UPMC 1 / 73 Développement Web Les bases HTML et CSS LI328 UPMC Les langages HTML et CSS 2 / 73 Production partie visuelle du site Les langages HTML et CSS 3 / 73 Interprétation côté client Pris en charge par

Plus en détail

introduction principes syntaxe CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1

introduction principes syntaxe CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1 CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1 au programme... 1 introduction 2 principes 3 syntaxe Université Lille 1 Technologies du Web CSS : introduction 2 au programme...

Plus en détail

<div id="nom_id" class="ma_classe">texte affiché</div>

<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

HTML. Damien Nouvel. Damien Nouvel (Inalco) HTML 1 / 23

HTML. Damien Nouvel. Damien Nouvel (Inalco) HTML 1 / 23 HTML Damien Nouvel Damien Nouvel (Inalco) HTML 1 / 23 Langage, calcul, télécommunications Plan 1. Langage, calcul, télécommunications 2. Web et documents HTML 3. Balises 4. Attributs Damien Nouvel (Inalco)

Plus en détail

Introduction à HTML: HyperText Markup Language

Introduction à HTML: HyperText Markup Language CREATION WEB HTML ET CSS Introduction à HTML: Le HTML, HyperText Markup Language, est un langage de balisage qui définit la structure logique d un document WWW diffusé sur le Web. La mise en forme de la

Plus en détail

Initiation au HTML. Qu est ce qu une page web?

Initiation au HTML. Qu est ce qu une page web? Initiation au HTML Qu est ce qu une page web? Il s agit ni plus ni moins que d un fichier, qui contient seulement des caractères alphanumériques. Autrement dit, vous n avez besoin que de votre bloc-notes,

Plus en détail

LANGAGE HTML : FEUILLES DE STYLE ET LANGAGE CSS

LANGAGE HTML : FEUILLES DE STYLE ET LANGAGE CSS ISN ISN Informatique et Sciences du Numérique LANGAGE HTML : FEUILLES DE STYLE ET LANGAGE CSS 1 INTRODUCTION AUX FEUILLES DE STYLE Le langage HTML est à la fois un langage permettant de décrire la structure

Plus en détail

Une page web utilisant uniquement du XHTML

Une page web utilisant uniquement du XHTML 1 Une page web utilisant uniquement du XHTML 2 La même page avec le CSS en plus Source: http://www.csszengarden.com/ 3 Séparer le fond de la forme a plusieurs avantages : Personnalisation du design du

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

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

Remerciements a Philippe Renevier pour le matériel du cours. Prog Web Server

Remerciements a Philippe Renevier pour le matériel du cours. Prog Web Server Remerciements a Philippe Renevier pour le matériel du cours Pierre se marie bientôt. Il organise une liste de cadeaux. Sur cette liste, Pierre peut ajouter des propositions de cadeaux. Les invités, comme

Plus en détail

INF2005 Programmation web CSS. Jacques Berger

INF2005 Programmation web CSS. Jacques Berger INF2005 Programmation web CSS Jacques Berger Objectifs L'utilité de CSS La syntaxe de CSS L'intégration à HTML Prérequis HTML CSS Cascading Style Sheets Version courante : CSS 3 Le problème initial Pollution

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

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

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

Mémo CSS 3. Exemple : h1 concerne toutes les éléments titres de niveau 1 <h1> 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. 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

TP 1 - HTML/CSS. 0. Préparatifs. 1. Structure de la page HTML

TP 1 - HTML/CSS. 0. Préparatifs. 1. Structure de la page HTML TP 1 - HTML/CSS Objectif : Créer une page WEB statique en manipulant le langage HTML et la mise en forme CSS. Bien comprendre les styles et le positionnement des blocs en CSS. 0. Préparatifs 1. Lancer

Plus en détail

Guide Utilisation HTML et Microsoft FrontPage

Guide Utilisation HTML et Microsoft FrontPage Guide Utilisation HTML et Microsoft FrontPage 4 4me Année Sciences Informatique Année scolaire : 2016-2017 I. Introduction au langage HTML HTML est un langage de description. Il permet d'enrichir un texte

Plus en détail