Mon Mondrian. Compétences visées. Les bases du HTML, du CSS, la balise
, le positionnement, les mesures. Description

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "Mon Mondrian. Compétences visées. Les bases du HTML, du CSS, la balise
, le positionnement, les mesures. Description"

Transcription

1 Mon Mondrian Compétences visées Les bases du HTML, du CSS, la balise <div>, le positionnement, les mesures. Description Peindre, c'est salissant. Le code, c'est plus propre. À travers ce projet, recréez un classique de l'art Moderne, Composition II en Rouge, Bleu et Jaune de Pietr Mondrian, directement dans votre navigateur, en utilisant la balise <div> et les notions d «#id» et de «.class». 1 / 12

2 Étape 1 : peignons le mur de notre galerie. Commençons par nous offrir un grand mur gris pour accrocher notre toile. Créons deux fichiers dans le même répertoire. Le premier s'appellera modern_mondrian.html et le deuxième s'appellera style.css. Copions la structure de base d'une page html dans le fichier mondrian.html. Votre code devrait ressembler à ceci : <!DOCTYPE html> <html> <head> <title>mon titre</title> <meta charset="utf-8"/> <link href="style.css" media="screen" rel="stylesheet" type="text/css"/> </head> </html> Dans le fichier css, donnons aux balises html et body une couleur grise. Pour réaliser cela, utilisons la propriété background-color. Nous choisirons comme couleur de fond un gris clair. Nous noterons cette couleur sous sa forme hexadécimale : #F6F6F6. Pour donner rapidement la même propriété à plusieurs éléments, il suffit de séparer leur nom par une virgule. Votre code devrait ressembler à ceci : body, html { background-color: #f6f6f6; Sauvegardez et regardez le résultat dans votre navigateur. Nous avons un beau mur gris clair pour exposer notre chef-d'oeuvre. Étape 2 : accrochons notre toile Nous allons créer un grand carré. Ce sera la toile pour notre peinture au code. Pour cela, nous allons nous servir de deux nouveaux concepts : #id et <div>. Dans le fichier HTML, utilisons la balise <div>. La balise div ne fait rien en particulier, elle indique seulement une division. C'est une boîte dans laquelle on place d'autres éléments (textes, images, etc). 2 / 12

3 Il est possible de donner un nom, une identité unique à cet élément en insérant dans la balise ouvrante un attribut id. Cela se fait de cette manière : <div id='' ''>. Cela permettra de lui appliquer des styles CSS. Insérons notre <div> en lui donnant l'id «painting» (peinture en anglais). Enregistrez les modifications et regardez le résultat dans votre navigateur. Pour le moment, rien n'apparaît sur le mur de notre galerie. Notre toile reste invisible. Nous allons avoir besoin de CSS pour lui donner un peu de style. Dans notre fichier CSS, nous allons utiliser le sélecteur #id. Ce sélecteur permet d'appliquer un style à un élément unique de notre page HTML. Vous pouvez donner à votre sélecteur le nom que vous voulez, vous devez seulement placer le caractère # (dièse) devant le nom de votre div. Nous allons appeler notre sélecteur #painting pour donner un style à notre <div id= painting >. #painting { Utilisons les propriétés width et height pour régler la largeur et la hauteur. Donnons à ces deux propriétés une valeur de 400px. Utilisons un beau blanc cassé pour donner une couleur de fond à notre toile. Pour cela, utilisons la propriété background-color et donnons lui la valeur hexadécimale suivante : #FFF4DB. #painting { background-color : #FFF4DB ; width : 400px ; height : 400px ; Enregistrez les modifications et regardez le résultat dans votre navigateur. Vous remarquez que votre toile se trouve dans le coin en haut à gauche de votre navigateur. Nous allons créer des marges en utilisant une nouvelle propriété : margin. Nous voulons créer une marge en haut, une marge à droite et une marge à gauche. Nous allons devoir parler un peu anglais. Pour régler la marge en haut, nous utiliserons la propriété margin-top, pour la marge de gauche, la propriété margin-left, et pour celle de droite, margin-right. 3 / 12

4 Pour centrer notre toile sur le mur de notre galerie, il y a une méthode simple et rapide. Donnons la valeur auto à margin-left et margin-right. Pour la marge en haut, donnons la valeur 30px à la propriété margin-top. Juste pour le plaisir des yeux, nous allons ajouter une légère ombre aux contours de notre tableau. Utilisons la propriété box-shadow et donnons lui les valeurs suivantes : 10px 10px 0px #8D8D8D. #painting { background-color : #FFF4DB ; width : 400px ; height : 400px ; margin-left : auto ; margin-right : auto ; margin-top : 30px ; box-shadow : 10px 10px 0px #8D8D8D ; Enregistrez les modifications et admirez le résultat dans votre navigateur. Notre toile est prête! Nous avons mis en place notre structure de base. Il est temps de faire des mathématiques. Étape 3 : faisons quelques <div>isions! Il est temps de définir la structure de notre peinture. Il est très utile de dessiner un plan et de faire quelques calculs avant de coder. Il sera plus facile ensuite de placer les balises <div> et d'écrire leur style CSS. Pensons à notre tableau en termes de lignes, de colonnes et de boîtes. Tous ces éléments auront leur propre #id et leurs propres balises <div>. Certains seront visibles et en couleur, d'autres seront invisibles et serviront de conteneur. 4 / 12

5 Voici un plan de notre Mondrian en 400 pixels sur 400 pixels. Nous voyons deux lignes, la ligne du haut et la ligne du bas. La ligne du haut est composée d'une grande boîte à droite et de deux petites boîtes à gauche. Dans le fichier CSS, commençons par créer un sélecteur #id pour la ligne du haut. Parlons anglais et appelons ce sélecteur #toprow (top row signifie ligne du haut). Donnons lui une hauteur (height) de 290px. Regardons sur le schéma à quoi correspond cette valeur de 290px. La hauteur de la grande boîte correspond à la somme de la hauteur des deux boîtes de gauche (2 x 140px) et de leur séparation (+10px). Il n'est pas nécessaire de donner une valeur à la largeur de notre ligne #toprow car elle sera placée dans la <div> #painting qui a une largeur (width) de 400px. 5 / 12

6 Votre code CSS devrait ressembler à cela: #toprow { height: 290px; Dans le fichier HMTL, ajoutons une balise <div> avec une #id toprow. Votre code HTML devrait ressembler à cela: Si voulez vérifier le placement de notre div #toprow, vous pouvez lui ajouter temporairement une couleur de fond dans son style CSS avec la propriété background-color. Étape 4 : the big box Plaçons une de ces boîtes dont nous avons parlé. Commençons par la plus grande et la plus colorée du tableau : la grande boîte rouge en haut à droite. Dans le fichier CSS, ajoutons un nouveau sélecteur #id appelé #bigbox (grande boîte en anglais). Aidons-nous du schéma pour connaître sa hauteur (height) et sa largeur (width). Votre code CSS devrait ressembler à cela : #bigbox { width: 290px; height: 290px; Dans le fichier HTML, ajoutons une div avec une id bigbox à l intérieur de la div toprow. Votre code HTML devrait ressembler à cela : <div id="bigbox"> 6 / 12

7 Sauvegardez et regardez le résultat dans votre navigateur. Notre bigbox n'apparaît pas... Elle n'a pas encore de couleur mais vous pouvez vérifier sa présence en faisant un clic droit et en choisissant Inspecter l'élément ou Code source de la page. Étape 5 : un peu de couleur et un peu de "class" Nous pourrions donner de la couleur à notre bigbox en utilisant background-color dans son style CSS. Cela fonctionnerait parfaitement. Mais nous allons créer plusieurs boîtes qui auront la même couleur. Utilisons des "class" pour gagner du temps. Les "class" fonctionnent comme les "id". Elles permettent d'ajouter des styles CSS à différents éléments. Les "id" correspondent à un seul élément alors qu'une même "class" peut s'appliquer à plusieurs éléments. Nous comprendrons mieux tout cela en le mettant en pratique. Dans le fichier CSS, créons un nouveau sélecteur appelé red. À la place du dièse "#" que nous avons utilisé pour créer des "id", la ligne doit commencer par un point ".". Donnons à la classe.red un background-color "red"..red { background-color: red; Vous pouvez utiliser la notation hexadécimale de la couleur :.red { background-color: #cc3333; Dans le fichier HTML, ajoutons notre class.red à notre div #bigbox en ajoutant dans la balise ouvrante l'attribut class="red". <div id="bigbox" class="red"> Sauvegardez et regardez le résultat dans votre navigateur. Nous avons une grande boîte rouge! 7 / 12

8 Maintenant que nous savons comment fonctionnent les class, créons notre palette. Dans le fichier CSS, ajoutons les class.blue,. yellow,.black..red { background-color: red;.blue { background-color: blue;.yellow { background-color: yellow;.black { background-color: black; Vous pouvez choisir d'utiliser la notation hexadécimale qui permet un choix infini de couleurs et de nuances. Pour trouver la notation hexadécimale des couleurs, vous pouvez utiliser le plugin firefox Colorzilla. Étape 6 : Ça flotte à droite! Vous avez peut-être remarqué que la grande boîte rouge est du mauvais côté. Par défaut, les éléments d'une page web se placent à gauche. Il faut leur donner une position. Plaçons cette grande boîte au bon endroit. Il y a plusieurs manière de positionner un élément dans une page web. Nous allons utiliser une méthode appelée float. Cela permet de faire "flotter" les éléments vers la gauche ou vers la droite jusqu'à ce qu'ils cognent dans un élément fixe. Mettons cela en pratique. Dans le fichier CSS, créons une classe que nous appellerons.right (droit en anglais). Votre code CSS devrait ressembler à cela :.right { float: right; Dans le fichier HTML, ajoutons la class right à notre #bigbox. Il suffit d'ajouter "right" à côté de "red" dans l'attribut class. <div id="bigbox" class="red right"> 8 / 12

9 Étape 7 : les séparations Ajoutons une séparation verticale à gauche de la boîte rouge. Dans le fichier CSS, créons une nouvelle #id appelée #divider1. Donnons lui une hauteur (height) de 290px et une largeur (width) de 10px. #divider1 { height: 290px; width: 10px; Dans le fichier HTML, ajoutons notre div avec une #id divider1. Donnons lui la class right pour que notre séparation vienne se ranger à droite et la class black pour lui donner une couleur noire. <div id="bigbox" class="red right"> <div id="divider1" class="black right"> Étape 8 : faire une colonne Nous allons nous occuper de la colonne située en haut en gauche du tableau. Dans cette colonne nous placerons trois div : deux div auront une class.mediumbox et une div, qui portera l'#id divider2, servira de séparation horizontale. Commençons par placer notre colonne en écrivant sous la div divider 1 une div avec une id "topleftcolumn" (en anglais qui signifie "colonne d'en haut à gauche"). <div id="bigbox" class="red right"> <div id="divider1" class="black right"> <div id="topleftcolumn" class= "right"> 9 / 12

10 Continuons en plaçant une div de class "mediumbox" dans la div "leftcolumn". <div id="bigbox" class="red right"> <div id="divider1" class="black right"> <div id="topleftcolumn" class= "right"> <div class="mediumbox"> Il reste encore deux div à placer. Sur une nouvelle ligne, sous la div "mediumbox", plaçons la div #divider2. Donnons lui une class "black". Terminons la structure HTML de notre colonne en plaçant notre deuxième div.mediumbox. <div id="bigbox" class="red right"> <div id="divider1" class="black right"> <div id="topleftcolumn" class= "right"> <div class="mediumbox"> <div id="divider2" class= "black"> <div class="mediumbox"> Occupons-nous du style CSS de ces nouveaux éléments. Créons un style pour la class.mediumbox. Nous donnerons à toutes les div.mediumbox une largeur (width) de 100px et une hauteur (height) de 140px. Ajoutons un style pour la div #divider2. Nous lui donnerons une hauteur (height) de 10px et une largeur (width) de 100px. 10 / 12

11 Votre code CSS devrait ressembler à cela : mediumbox { width: 100px; height: 140px; #divider2 { height: 10px; width: 100px; Étape 9 : La séparation du milieu Créons une autre séparation noire sous notre div #toprow (notre ligne du haut). Donnons à notre div l'id "middlerow" (ligne du milieu en anglais). <div id="bigbox" class="red right"> <div id="divider1" class="black right"> <div id="topleftcolumn" class= "right"> <div class="mediumbox"> <div id="divider2" class= "black"> <div class="mediumbox"> <div id="middlerow"> À vous d'écrire le code CSS pour donner à votre div les dimensions et la couleur qui conviennent. Étape 10 : Apportez la touche finale! À présent, vous êtes prêt pour coder vous-même cette dernière ligne. Il faut suivre la même démarche que pour la div #toprow. Ajoutons une div avec une id "bottomrow" (ligne du bas). À vous d'y placer les boîtes et les colonnes nécessaires. 11 / 12

12 Étape 11 : Mettez un peu de désordre. C'est fini? C'est beau, non? Peut-être qu'il est possible d'ajouter encore plus de divisions, des couleurs différentes et plus nombreuses. Vous savez désormais peindre avec du code. Bonus Du pixel au pourcentage (difficile) Remplacez l'unité de mesure dans le fichier css. Calculez les proportions du tableau en pourcentage et non plus en pixel. Commencez par remplacer 400px par 100% et lancez-vous dans l expérience. Broadway Boogie Woogie Vous aimez bien Mondrian? Regardez sur internet d autres œuvres de ce peintre et essayez d en reproduire une avec du code. Arriveriez-vous à programmer son œuvre «Broadway Boogie Woogie»? 12 / 12

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

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

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

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

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

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

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

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

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

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

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

Introduction aux CSS

Introduction aux CSS Introduction aux CSS CSS: Cascading Style Sheet = feuille de style en cascade CSS est en quelque sorte la peinture que l'on applique sur xhtml, avec nous allons pouvoir réaliser de la mise en page et de

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

INTRODUCTION AU LANGAGE HTML ET CSS INTRODUCTION AU LANGAGE HTML ET CSS Sur le Web il est d usage de séparer structure et contenu d une page (html) de son style (css) Quelques liens : http://validator.w3.org/:pour vérifier que le est conforme

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

C2i : Création de pages web

C2i : Création de pages web C2i : Création de pages web IUFE 2016/2017 Matthieu Giraud LIMOS, Université Clermont Auvergne Matthieu Giraud C2i : Création de pages web 1 / 33 Introduction Sommaire 1 Introduction 2 Structure d une

Plus en détail

TP07: barre de navigation

TP07: barre de navigation TP07: barre de navigation Ce tp poursuit les tps précédents. Pour commencer, dans votre dossier «php» (qui est dans «www»), recopiez vos fichiers du TP06 dans un nouveau dossier «TP07» (cp -r TP06 TP07).

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

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

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

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

ISN S9: Les pages web

ISN S9: Les pages web Objectif : Mettre en forme une page HTML Lors de l'écriture de pages web, nous savons qu'il faut prendre l'habitude de toujours séparer : Le fond (le contenu) : c'est le rôle du fichier HTML. La décoration

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

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

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

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

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

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

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

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

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

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

Partie CSS. Parmi toutes les utilisations des propriétés css ci-dessous, cochez celles qui ne contiennent pas d erreur :

Partie CSS. Parmi toutes les utilisations des propriétés css ci-dessous, cochez celles qui ne contiennent pas d erreur : Consignes : le sujet est séparé en deux : la partie HTML et la partie CSS. Pensez bien à rendre les deux. Les réponses aux questions se fait sur le sujet qui est ensuite ramassé. Tous documents autorisés.

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

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

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

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

Introduction aux feuilles de style CSS

Introduction aux feuilles de style CSS Introduction aux feuilles de style CSS Jean-Philippe PERNIN Université Stendhal Département Informatique Pédagogique Bureau I 113 Mél. : Jean-Philippe.Pernin@u-grenoble3.fr Jean-Philippe Pernin - DIP -

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

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

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

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

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

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

Bases de données et Internet

Bases de données et Internet Bases de données et Internet Faculté des Sciences et Techniques Fès Département de Génie Industriel Master Sciences et Techniques en Génie Industriel Professeur : F. Kaghat 2 Feuilles de style en cascade

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

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

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

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

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

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

FEUILLES DE STYLE ET LANGAGE CSS

FEUILLES DE STYLE ET LANGAGE CSS ICN ICN Informatique et Création Numérique 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 d'un texte,

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

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

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

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

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

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

TP 3 : Formulaires. M1106 Initiation au développement Web. Exercice 1 : Mon premier formulaire HTML5

TP 3 : Formulaires. M1106 Initiation au développement Web. Exercice 1 : Mon premier formulaire HTML5 IUT de Villetaneuse, Université Paris 13, Sorbonne Paris Cité DUT R&T 1 re année M1106 Initiation au développement Web 20162017 TP 3 : Formulaires Étienne André Version du sujet : 7 octobre 2016 Ce TP

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

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

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

Formation web 1 : HTML/CSS

Formation web 1 : HTML/CSS Formation web 1 : HTML/CSS Guillaume LEROY 1 1 DaTA Secrétaire Général 27 septembre 2016 Guillaume LEROY ENSTA ParisTech HTLM/CSS 27 septembre 2016 1 / 23 Sommaire 1 Internet 2 HTML/CSS 3 HTML : Les Balises

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

Visualisation d'informations

Visualisation d'informations Visualisation d'informations Créer un diagramme en bâtons avec D3 Arnaud SALLABERRY arnaud.sallaberry@lirmm.fr D3 1 (Data-Driven Documents) est une bibliothèque graphique JavaScript. Elle permet d'afficher

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

Les CSS pour la mise en page

Les CSS pour la mise en page Les CSS pour la mise en page Nous allons créer deux fichier style_div.css contiendra toutes les informations relatives au positionnement de nos différents blocs. positionnement.htm contiendra tout notre

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

il lui manque des images, mais au moins, elle a du style. Et elle a des liens, même s'ils ne mènent encore nulle part

<p>il lui manque des images, mais au moins, elle a du style. Et elle a des liens, même s'ils ne mènent encore nulle part </p> HTML 5 & CSS 3 1 - Le langage HTML N'utilisez pas un logiciel de traitement de texte, tels que Microsoft Word ou OpenOffice, car ils produisent des fichiers qu'un navigateur Web ne sait pas toujours lire

Plus en détail

CSS. CSS - Cascading Style Sheets. Servent à mettre en forme les éléments d une page HTML

CSS. CSS - Cascading Style Sheets. Servent à mettre en forme les éléments d une page HTML CSS CSS CSS - Cascading Style Sheets Servent à mettre en forme les éléments d une page HTML Eléments = parties de la structure d une page : titres, paragraphes, listes, tableaux, images, etc. Attention

Plus en détail

Introduction HTML / CSS a

Introduction HTML / CSS a TP 1 Introduction HTML / CSS a a. Support de TP inspiré des notes de Cours de Cyril Gravelier Dans ce TP, nous allons réaliser nos premières pages Web. Pour ce faire, nous aborderons les bases du langage

Plus en détail

Université Paris Dauphine Outils de l Internet 2011-2012 TP 5 : LES CADRES

Université Paris Dauphine Outils de l Internet 2011-2012 TP 5 : LES CADRES TP 5 : LES CADRES Le contenu de la page d'accueil d'un site ne constitue que la subdivision en plusieurs frames. Les codes sources de chacune des frames seront contenus dans d'autres fichiers HTML. La

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

É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

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

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

Le CSS : un complément au HTML

Le CSS : un complément au HTML Le CSS : un complément au HTML CSS est l'abréviation de «Cascading Style Sheets». CSS est un langage de style qui définit la présentation des documents HTML. Par exemple, CSS couvre les polices, les couleurs,

Plus en détail

TD n 3 - Notion de langage CSS. Table des matières

TD n 3 - Notion de langage CSS. Table des matières TD n 3 - Notion de langage CSS Table des matières 1-Mettre en forme un page en utilisant la balise ...2 2-Mettre en forme un page en utilisant une feuille de style externe...4 3-Conseils pratiques

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

Prog. Web - TP4 Année universitaire COURS : PLUS BESOIN DE FLASH!

Prog. Web - TP4 Année universitaire COURS : PLUS BESOIN DE FLASH! Prog. Web - TP4 Année universitaire 2012 2013 1 COURS : PLUS BESOIN DE FLASH! Aucune balise HTML4 ne permettait jusqu'ici de gérer la vidéo ou le son. Il fallait à la place utiliser un 'plugin' comme flash

Plus en détail

TP JAVASCRIPT IntegWeb SERIE 4 MMI

TP JAVASCRIPT IntegWeb SERIE 4 MMI TP JAVASCRIPT IntegWeb SERIE 4 MMI 2014-2015 Exemple d'intégration d'un plugin FANCYBOX Objectif : Découvrir comment exploiter le plugin FancyBox. Le plugin FancyBox et un outil très souvent utilisé sur

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

Cascading Style sheets

Cascading Style sheets Cascading Style sheets height CSS3 : Bordures, marges et espacements Que l'élément soit de type bloc (div, p ou form, ou de type inline comme span, img, a, il se voit attribué sa propre boite suivant le

Plus en détail

Apprendre les bases du HTML5 et du CSS3. Objectif : Dans cette série d'activités vous apprendrez à utiliser HTML5 et CSS3 pour créer des pages web

Apprendre les bases du HTML5 et du CSS3. Objectif : Dans cette série d'activités vous apprendrez à utiliser HTML5 et CSS3 pour créer des pages web Apprendre les bases du HTML5 et du CSS3 Objectif : Dans cette série d'activités vous apprendrez à utiliser pour créer des pages web Durée : 4h Chapitre 2 Nom : Prénom : Classe : Table des matières Activité

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

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

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

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2015/2016) Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2015/2016) Conception de Sites Web Dynamiques : TD 1 HTML5 statique, balises, liens relatifs/absolus, images, validateur W3C http://www.labri.fr/perso/preuter/cswd2016

Plus en détail

LOG4420 Conception de sites web dynam. et transact.

LOG4420 Conception de sites web dynam. et transact. LOG4420 Conception de sites web dynam. et transact. Travail pratique 2 Chargé de laboratoire: Antoine Béland Automne 2017 Département de génie informatique et de génie logiciel 1 Objectifs Le but de ce

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

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

TUTORIEL INKSCAPE. «Réaliser une jaquette DVD» Niveau requis : Débutant. Auteur : Champtoussel dominique

TUTORIEL INKSCAPE. «Réaliser une jaquette DVD» Niveau requis : Débutant. Auteur : Champtoussel dominique TUTORIEL INKSCAPE «Réaliser une jaquette DVD» Niveau requis : Débutant Auteur : Champtoussel dominique www.dom-web.net Prêt a réaliser une jaquette DVD 100 % originale? Marre de publisher et du travail

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

BDW1 - TP4 Premiers pas en HTML, CSS et PHP

BDW1 - TP4 Premiers pas en HTML, CSS et PHP 1 BDW1 - TP4 Premiers pas en HTML, CSS et PHP UCBL - Département Informatique de Lyon 1 2017 L objectif de ce TP est de vous familiariser avec le langage HTML, CSS et PHP Ce TP est à réaliser sous linux.

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

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

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

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