introduction principes syntaxe CSS : introduction

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "introduction principes syntaxe CSS : introduction"

Transcription

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

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

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

4 tout cela manque quand même de style chaque élément HTML est affiché par le navigateur avec un style par défaut. sanscss.html Université Lille 1 Technologies du Web CSS : introduction 4

5 tout cela manque quand même de style chaque élément HTML est affiché par le navigateur avec un style par défaut. sanscss.html les éléments <h1> apparaissent avec une police de taille 2em et «en gras» les éléments <p> forment des blocs qui s affichent les uns en dessous des autres avec une marge haute et basse de 1em et leur texte est affiché avec la police par défaut du navigateur les éléments <q> sont encadrés par des guillemets les éléments <strong> sont en gras etc. Université Lille 1 Technologies du Web CSS : introduction 4

6 CSS il est possible de modifier le style par défaut grâce aux CSS Université Lille 1 Technologies du Web CSS : introduction 5

7 CSS CSS il est possible de modifier le style par défaut grâce aux CSS Université Lille 1 Technologies du Web CSS : introduction 5

8 CSS il est possible de modifier le style par défaut grâce aux CSS CSS Cascading Université Lille 1 Technologies du Web CSS : introduction 5

9 CSS il est possible de modifier le style par défaut grâce aux CSS CSS Cascading Style Université Lille 1 Technologies du Web CSS : introduction 5

10 CSS il est possible de modifier le style par défaut grâce aux CSS CSS Cascading Style Sheets Université Lille 1 Technologies du Web CSS : introduction 5

11 CSS il est possible de modifier le style par défaut grâce aux CSS CSS Cascading Style Sheets feuilles de style «en cascade» exemple avec CSS Université Lille 1 Technologies du Web CSS : introduction 5

12 CSS il est possible de modifier le style par défaut grâce aux CSS CSS Cascading Style Sheets feuilles de style «en cascade» exemple avec CSS «CSS Zen garden» Université Lille 1 Technologies du Web CSS : introduction 5

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

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

15 un concept important séparation de la forme et du contenu il faut définir séparément la forme et le contenu Université Lille 1 Technologies du Web CSS : introduction 8

16 un concept important séparation de la forme et du contenu il faut définir séparément la forme et le contenu Université Lille 1 Technologies du Web CSS : introduction 8

17 un concept important séparation de la forme et du contenu il faut définir séparément la forme et le contenu la structure d un document et son contenu sont décrits en HTML Université Lille 1 Technologies du Web CSS : introduction 8

18 un concept important séparation de la forme et du contenu il faut définir séparément la forme et le contenu la structure d un document et son contenu sont décrits en HTML sa présentation est gérée par les CSS Université Lille 1 Technologies du Web CSS : introduction 8

19 un concept important séparation de la forme et du contenu il faut définir séparément la forme et le contenu la structure d un document et son contenu sont décrits en HTML sa présentation est gérée par les CSS 1 on crée le document (contenu et structure) sans se préoccuper de sa mise en forme Université Lille 1 Technologies du Web CSS : introduction 8

20 un concept important séparation de la forme et du contenu il faut définir séparément la forme et le contenu la structure d un document et son contenu sont décrits en HTML sa présentation est gérée par les CSS 1 on crée le document (contenu et structure) sans se préoccuper de sa mise en forme 2 on conçoit la (les!) mise(s) en forme puis éventuellement on les modifie/adapte Université Lille 1 Technologies du Web CSS : introduction 8

21 avantages document HTML et feuille CSS peuvent être définis dans des fichiers séparés Université Lille 1 Technologies du Web CSS : introduction 9

22 avantages document HTML et feuille CSS peuvent être définis dans des fichiers séparés création plus efficace Université Lille 1 Technologies du Web CSS : introduction 9

23 avantages document HTML et feuille CSS peuvent être définis dans des fichiers séparés création plus efficace code HTML plus simple et plus lisible Université Lille 1 Technologies du Web CSS : introduction 9

24 avantages document HTML et feuille CSS peuvent être définis dans des fichiers séparés création plus efficace code HTML plus simple et plus lisible on peut changer la feuille de style sans modifier le document Université Lille 1 Technologies du Web CSS : introduction 9

25 avantages document HTML et feuille CSS peuvent être définis dans des fichiers séparés création plus efficace code HTML plus simple et plus lisible on peut changer la feuille de style sans modifier le document on peut avoir plusieurs feuilles de style pour un document Université Lille 1 Technologies du Web CSS : introduction 9

26 avantages document HTML et feuille CSS peuvent être définis dans des fichiers séparés création plus efficace code HTML plus simple et plus lisible on peut changer la feuille de style sans modifier le document on peut avoir plusieurs feuilles de style pour un document l homogénéité visuelle d un site est facilitée plusieurs pages peuvent partager la même feuille de style Université Lille 1 Technologies du Web CSS : introduction 9

27 principe le langage CSS définit un ensemble de propriétés qui ont une influence sur l affichage des éléments d une page Université Lille 1 Technologies du Web CSS : introduction 10

28 principe le langage CSS définit un ensemble de propriétés qui ont une influence sur l affichage des éléments d une page pour chaque propriété il existe un ensemble de valeurs possibles Université Lille 1 Technologies du Web CSS : introduction 10

29 principe le langage CSS définit un ensemble de propriétés qui ont une influence sur l affichage des éléments d une page pour chaque propriété il existe un ensemble de valeurs possibles il est possible de fixer ces propriétés pour chacun des éléments d un document HTML Université Lille 1 Technologies du Web CSS : introduction 10

30 principe le langage CSS définit un ensemble de propriétés qui ont une influence sur l affichage des éléments d une page pour chaque propriété il existe un ensemble de valeurs possibles il est possible de fixer ces propriétés pour chacun des éléments d un document HTML les propriétés agissent sur l apparence de la boîte d un élément Université Lille 1 Technologies du Web CSS : introduction 10

31 principe le langage CSS définit un ensemble de propriétés qui ont une influence sur l affichage des éléments d une page pour chaque propriété il existe un ensemble de valeurs possibles il est possible de fixer ces propriétés pour chacun des éléments d un document HTML les propriétés agissent sur l apparence de la boîte d un élément les propriétés concernent l apparence du contenu (fonte, style, couleur,...) la taille de la boîte (largeur, marges,...) le positionnement de la boîte (absolu ou relatif, visibilité)... Université Lille 1 Technologies du Web CSS : introduction 10

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

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

34 règle CSS Règle CSS Une règle CSS définit la valeur d une propriété CSS pour un sélecteur donné Université Lille 1 Technologies du Web CSS : introduction 13

35 règle CSS Règle CSS Une règle CSS définit la valeur d une propriété CSS pour un sélecteur donné selecteur { propriete : valeur } Université Lille 1 Technologies du Web CSS : introduction 13

36 règle CSS Règle CSS Une règle CSS définit la valeur d une propriété CSS pour un sélecteur donné selecteur { propriete : valeur } le sélecteur détermine les éléments sur lesquels s applique la règle Université Lille 1 Technologies du Web CSS : introduction 13

37 syntaxe il est possible de regrouper plusieurs règles d un même sélecteur les définitions sont alors séparées par des points-virgules Université Lille 1 Technologies du Web CSS : introduction 14

38 syntaxe il est possible de regrouper plusieurs règles d un même sélecteur les définitions sont alors séparées par des points-virgules h1 { color : blue ; font - size : 12 px; } «tous les éléments <h1> auront leur texte en bleu et une taille de police de 12px» Université Lille 1 Technologies du Web CSS : introduction 15

39 syntaxe on peut factoriser les règles partagées par des sélecteurs les sélecteurs sont alors séparés par des virgules Université Lille 1 Technologies du Web CSS : introduction 16

40 syntaxe on peut factoriser les règles partagées par des sélecteurs les sélecteurs sont alors séparés par des virgules h1, h2 { color : blue ; font - size : 12 px; } «les éléments <h1> et les éléments <h2> auront leur texte en bleu et une taille de police de 12px» Université Lille 1 Technologies du Web CSS : introduction 17

41 feuille de style une feuille de style CSS regroupe un ensemble de règles CSS exemple Université Lille 1 Technologies du Web CSS : introduction 18

42 intégration des règles CSS à l HTML différentes possibilités : Université Lille 1 Technologies du Web CSS : introduction 19

43 intégration des règles CSS à l HTML différentes possibilités : sans CSS Université Lille 1 Technologies du Web CSS : introduction 19

44 intégration des règles CSS à l HTML différentes possibilités : sans CSS CSS dans le code HTML (beurk) Université Lille 1 Technologies du Web CSS : introduction 19

45 intégration des règles CSS à l HTML différentes possibilités : sans CSS CSS dans le code HTML (beurk) à proscrire! Université Lille 1 Technologies du Web CSS : introduction 19

46 intégration des règles CSS à l HTML différentes possibilités : sans CSS CSS dans le code HTML (beurk) à proscrire! règles CSS en dur dans le document Université Lille 1 Technologies du Web CSS : introduction 19

47 intégration des règles CSS à l HTML différentes possibilités : sans CSS CSS dans le code HTML (beurk) à proscrire! règles CSS en dur dans le document bof, limitant! Université Lille 1 Technologies du Web CSS : introduction 19

48 intégration des règles CSS à l HTML différentes possibilités : sans CSS CSS dans le code HTML (beurk) à proscrire! règles CSS en dur dans le document bof, limitant! feuille de style externe : Université Lille 1 Technologies du Web CSS : introduction 19

49 intégration des règles CSS à l HTML différentes possibilités : sans CSS CSS dans le code HTML (beurk) à proscrire! règles CSS en dur dans le document bof, limitant! feuille de style externe : la solution à adopter style 1 la feuille css 1 style 2 la feuille css 2 Université Lille 1 Technologies du Web CSS : introduction 19

50 déclaration d une feuille CSS dans l entête (<head>) du document HTML : ou aussi : <link type="text/css" rel="stylesheet" href="fichier.css" /> Université Lille 1 Technologies du Web CSS : introduction 20

51 déclaration d une feuille CSS dans l entête (<head>) du document HTML : ou aussi : <link type="text/css" rel="stylesheet" href="fichier.css" /> <link type="text/css" rel="stylesheet" href="fichier.css" media="screen"/> Université Lille 1 Technologies du Web CSS : introduction 20

52 Exemples de propriétés font-family : le type de police utilisée pour le contenu, font-size : la taille des caractères (en px, em, %, etc.) font-style : normal, italic, oblique font-weight : normal, bold, lighter, etc. border : la bordure autour du contenu de l élément (couleur, style,...) width : largeur du contenu (%, px, em, cm) color et background-color : couleurs du texte et de l arrière-plan (rgb(0,128,255), hexa #AAAAAA, symboles prédéfinis (navy, white,...), hsl,) liste exemple Université Lille 1 Technologies du Web CSS : introduction 21

53 Validation validateur Comme pour HTML, des outils de validation permettent de vérifier la correction syntaxique des feuilles CSS. Université Lille 1 Technologies du Web CSS : introduction 22

54 à suivre... CSS : cascades et sélecteurs Université Lille 1 Technologies du Web CSS : introduction 23

Formation HTML / CSS. ar dionoea

Formation HTML / CSS. ar dionoea Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations

Plus en détail

Conception de sites web. Feuille de styles CSS

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

Plus en détail

Formation Site Web : CSS et PHP

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

Plus en détail

Bac Professionnel Systèmes Electroniques Numériques

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

Plus en détail

Introduction aux feuilles de styles

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

Plus en détail

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

Une (petite) initiation au langage HTML

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

Plus en détail

Les 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

Programme de Formation

Programme de Formation Windows / PC - initiation Etre à l aise avec Windows, savoir se situer, organiser son environnement et classer ses documents Tout utilisateur désireux d être rapidement autonome dans l utilisation de l

Plus en détail

Création d un Site Web

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

Plus en détail

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

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

Plus en détail

Les feuilles de styles

Les feuilles de styles Qu'est-ce que les feuilles de style? Les feuilles de style CSS pour Cascading Style Sheets en anglais est un langage informatique qui sert à décrire la présentation des documents HTML. L'un des objectifs

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

Programmation en environnement graphique Créer un design original pour le site CSS Zen Garden en utilisant une CSS (20% de la note finale)

Programmation en environnement graphique Créer un design original pour le site CSS Zen Garden en utilisant une CSS (20% de la note finale) CONCEPTION D UN DESIGN CSS ZEN GARDEN A2012 Programmation en environnement graphique Créer un design original pour le site CSS Zen Garden en utilisant une CSS (20% de la note finale) TABLE DES MATIÈRES

Plus en détail

Réaliser une page du site http://la-ba.lyceegutenberg.net

Réaliser une page du site http://la-ba.lyceegutenberg.net Réaliser une page du site http://la-ba.lyceegutenberg.net Réaliser une page du site http://la-ba.lyceegutenberg.net Récupérer les éléments récupérer sur le bureau de votre ordinateur à partir du serveur

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

Introduction à la conception de sites web

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

Plus en détail

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

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

Plus en détail

Programmation Web TP2 CSS i

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

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

//////////////////////////////////////////////////////////////////// Développement Web

//////////////////////////////////////////////////////////////////// Développement Web ////////////////////// Développement Web / INTRODUCTION Développement Web Le développement, également appelé programmation, désigne l'action de composer des programmes sous forme d'algorithme (codage).

Plus en détail

{less} Guide de démarrage

{less} Guide de démarrage {less Guide de démarrage Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site

Plus en détail

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

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

Plus en détail

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

<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

Développement Web INITITIATION AU DEVELOPPEMENT WEB ET PRESENTATION DES DIFFERENTES SOLUTIONS POSSIBLES POUR LA MISE EN PLACE D'UN SITE WEB

Développement Web INITITIATION AU DEVELOPPEMENT WEB ET PRESENTATION DES DIFFERENTES SOLUTIONS POSSIBLES POUR LA MISE EN PLACE D'UN SITE WEB Développement Web INITITIATION AU DEVELOPPEMENT WEB ET PRESENTATION DES DIFFERENTES SOLUTIONS POSSIBLES POUR LA MISE EN PLACE D'UN SITE WEB Olivier Allaert 1 Développement Web Développement Web Principe

Plus en détail

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

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

Plus en détail

Optimiser moteur recherche

Optimiser moteur recherche Optimiser moteur recherche Vous apprennez à inscrire vos sites dans les moteurs de recherche et les optimiser, déjà à la construction Worldsoft SA Inscription de sites Web dans les moteurs de recherche

Plus en détail

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

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

Plus en détail

Documentation SPIP. Modifier l'habillage graphique

Documentation SPIP. Modifier l'habillage graphique Documentation SPIP Modifier l'habillage graphique Modifier l'habillage graphique 1. Introduction aux feuilles de style...4 Pourquoi les feuilles de style?...4 Concrètement...5 Notes...5 2. Les feuilles

Plus en détail

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

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

Plus en détail

96 Feuilles de style en cascade

96 Feuilles de style en cascade Microsoft Expression Web (version 2) 96 Feuilles de style en cascade Définir les styles Dans la création de pages Web valides, un principe fondamental apparaît : le contenu doit être séparé de sa présentation.

Plus en détail

PRETASHOP. Etre à l'aise avec l'utilisation d'un ordinateur et d'internet. Maitriser les bases de Microsoft Word.

PRETASHOP. Etre à l'aise avec l'utilisation d'un ordinateur et d'internet. Maitriser les bases de Microsoft Word. PRETASHOP LES OBJECTIFS : Vous verrez comment installer Joomla! localement puis sur un serveur distant, concevoir l organisation de votre site, rédiger vos premiers articles, maitriser les feuilles de

Plus en détail

Introduction à la programmation web

Introduction à la programmation web Introduction à la programmation web Nouvelles Technologies Dr. Thé Van LUONG The-Van.Luong@heig-vd.ch HEIG-VD Switzerland 8 octobre 2015 1/34 8 octobre 2015 1 / 34 Plan 1 État de l art des langages orientés

Plus en détail

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

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

Plus en détail

TP Initiation au langage HTML

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

Plus en détail

1.0 Composition du logo

1.0 Composition du logo Annexe 1 1.0 Composition du logo L espace à respecter entre le symbole et le bloc texte Cégep de Sainte-Foy correspond à la ligne tracée entre la pointe supérieure droite du symbole et la pointe inférieure

Plus en détail

Créer son site web. Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin

Créer son site web. Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin Créer son site web Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin 1 Personnaliser l'apparence du site Avec la distribution e-change 2 La version rapide 3 Choisir

Plus en détail

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

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

Plus en détail

Groupe Eyrolles, 2008 ISBN : 978-2-212-12234-3

Groupe Eyrolles, 2008 ISBN : 978-2-212-12234-3 Groupe Eyrolles, 2008 ISBN : 978-2-212-12234-3 9 Les règles de styles Il est nécessaire de bien connaître les règles de styles mais, pour un usage performant de Dreamweaver, il est aussi utile de bien

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

Création d un site Internet (partie 2 )

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

Plus en détail

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

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

Plus en détail

Créer un menu adaptable à toutes les résolutions

Créer un menu adaptable à toutes les résolutions Créé par : feektif Ce guide est reproductible en : 30 à 40 min et est d'un niveau : Intermédiaire Pour de tutoriel, nous allons réaliser un menu composé de cinq liens, chacun divisé en 3 éléments. Un curseur

Plus en détail

plus besoin de div pour le header footer les le reste de la page des balises existe en HTML5

plus besoin de div pour le header footer les le reste de la page des balises existe en HTML5 HTML5 : allege le code nouvelle balise: pour les lien vers des pages web pour du texte sur les coté pour rajouter un artcicle plus besoin de div pour

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

Contenu détaillé du stage :

Contenu détaillé du stage : Contenu détaillé du stage : Création Internet et Accessibilité Méthodologie de suivi et de gestion pour assurer un rôle d intégrateur Web (Présentation hebdomadaire) (720 heures -10 Stagiaires 30h par

Plus en détail

SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE

SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SITE INTERNET DE L ASSOCIATION Diapositive 1 RAPPORT DE PROJET Site internet de l association INTRODUCTION 1) Je m appelle Léonard STRONG. 2) Oral de présentation

Plus en détail

Les unités de taille des polices de caractères

Les unités de taille des polices de caractères Les unités de taille des polices de caractères Deux systèmes permettent d'indiquer les dimensions des éléments en CSS : les unités de taille fixe et les unités de taille relative. C'est la propriété font-size

Plus en détail

HTML5 et CSS3 pour des sites Responsive Web Design

HTML5 et CSS3 pour des sites Responsive Web Design Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur

Plus en détail

RESPONSIVE WEB DESIGN

RESPONSIVE WEB DESIGN RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le

Plus en détail

EXERCICE 1 : TRAVAILLER EN LIGNE

EXERCICE 1 : TRAVAILLER EN LIGNE EXERCICE 1 : TRAVAILLER EN LIGNE A l'aide des informations de connexion qui vous ont été remises, connectez-vous au serveur NFrance, qui nous propose gracieusement l'hébergement en ligne. Pour vous connecter,

Plus en détail

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web Le Web 1. Qu est-ce que le Web? 7 1.1 Côté serveur : HTTP, FTP, langages, SQL 7 1.2 Côté client : HTML, CSS, JavaScript 10 2. Les langages et leur utilité 10 2.1 HTML 10 2.2 CSS 13 2.3 JavaScript 16 2.4

Plus en détail

GUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS

GUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS GUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS Table des matières Présentation de la plateforme d envoi de courriels... 4 1- Gestion des contacts... 5 1.1. Base de données... 5 1.1.1- Création

Plus en détail

Option du thème. Naxialis Thèmes wordpress Professionnels. Le panneau «thème option» 1. Onglet «générale»

Option du thème. Naxialis Thèmes wordpress Professionnels. Le panneau «thème option» 1. Onglet «générale» Option du thème Le panneau «thème option» 1. Onglet «générale» - Insertion Image ou logo avec aperçu. - Réglage de la hauteur de l entête. (header) - Réglage de la marge supérieur et de gauche du logo

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

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design A.F.L.I.M. Ateliers de Formations Linguistique Informatique Multimédia Formation HTML5 et CSS3 - Pour des sites Responsive Web Design Formation : Présentation du HTML5 Bref historique du HTML5 Lignes de

Plus en détail

Il faudra absolument séparer le contenu de la page web (le fichier HTML) de son apparence (le fichier CSS).

Il faudra absolument séparer le contenu de la page web (le fichier HTML) de son apparence (le fichier CSS). ISN- semaine 10 HTML 1. Introduction HTML et CSS : deux langages pour créer un site web Pour créer un site web, on doit donner des instructions à l'ordinateur. Il ne suffit pas simplement de taper le texte

Plus en détail

Commandes de Word 2011 (menus, barres d outils, ruban) 1

Commandes de Word 2011 (menus, barres d outils, ruban) 1 Activer le mode plein Menu affichage > Activer le mode écran écran plein écran adresses de s (ignorer les adresses Internet et les adresses de s) orthographe> case à cocher ignorer les adresses Internet

Plus en détail

Multimédia - Partie WEB. Syllabus de 6 ème PHOTO

Multimédia - Partie WEB. Syllabus de 6 ème PHOTO Multimédia - Partie WEB Syllabus de 6 ème PHOTO Edition : 2015 Professeur : J. Pochet 2 Table des matières Table des matières... 3 Introduction... 5 Manipulation 1 : Page d introduction... 6 Objectif général...

Plus en détail

Joomla! 2.5 Créez et administrez vos sites Web

Joomla! 2.5 Créez et administrez vos sites Web Chapitre 1 : Installer Joomla! 1. Introduction 11 2. Qu'est-ce qu'un CMS? 11 3. HTML et XHTML 11 4. Différencier le contenu de la présentation 12 5. PHP et Apache 12 6. MySQL 13 7. Site statique ou site

Plus en détail

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design Chapitre 1 : Introduction A. Le développement des sites Web 14 B. Les fonctionnalités de Bootstrap 14 C. La compatibilité avec les navigateurs 15 D. Télécharger les exemples 15 Chapitre 2 : Installer Bootstrap

Plus en détail

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C Introduction L'Internet aujourd'hui 7 Le World Wide Web Consortium et les standards 7 Les logiciels de conception de sites web 7 L'objectif du livre 8 Interface de conception L'environnement système 9

Plus en détail

CATALOGUE DES FORMATIONS

CATALOGUE DES FORMATIONS CATALOGUE DES FORMATIONS WEB / GRAPHISME ADOBE ACROBAT PRO... 1 ADOBE PHOTOSHOP... 2 ADOBE INDESIGN... 3 ADOBE DREAMWEAVER... 4 ARTISTEER... 5 PREZI... 6 LE LANGAGE HTML... 7 LES FEUILLES DE STYLE CSS...

Plus en détail

Manuel de modifications des modèles

Manuel de modifications des modèles Manuel de modifications des modèles Contenu Avant propos...2 Introduction...2 Les 4 niveaux...2 Préparation...2 Quoi et pourquoi...2 Comment...2 Nommer les modèles modifiés...4 Niveau 1 Images...4 Quoi...4

Plus en détail

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

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

Plus en détail

Webmaster / Concepteur Multimedia

Webmaster / Concepteur Multimedia Durée : 217 heures Objectifs : Webmaster / Concepteur Multimedia Participants : Toute personne attirée par la création de site internet professionnel. Méthodes : Mise en pratique sur micro-ordinateur.

Plus en détail

CHARTE GRAPHIQUE annelaureperrone CHARTE GRAPHIQUE REZONNE

CHARTE GRAPHIQUE annelaureperrone CHARTE GRAPHIQUE REZONNE CHARTE GRAPHIQUE SOMMAIRE La charte graphique de REZONNE contient les principales règles d utilisation du logo. Son objectif est de conserver, à travers le temps, une cohérence graphique et une effi cacité

Plus en détail

Interfaces Homme/Machine et ergonomie d un site web

Interfaces Homme/Machine et ergonomie d un site web Interfaces Homme/Machine et ergonomie d un site web Apprendre à réaliser une interface Homme/Machine web en HTML 5 et CSS 3.0, à la structurer et à optimiser son ergonomie Retrouvez ce cours sur http://iut.e-concept-applications.fr

Plus en détail

Les bases d Excel. I L interface d Excel CHAPITRE I OBJECTIFS MOTS CLÉS

Les bases d Excel. I L interface d Excel CHAPITRE I OBJECTIFS MOTS CLÉS CHAPITRE I Les bases d Excel OBJECTIFS Découvrir l interface d Excel Mettre en forme un tableau Sélectionner et recopier des cellules Imprimer des documents Excel MOTS CLÉS Nouvelle Interface Mettre en

Plus en détail

STID 2ème année : TP Web/PHP

STID 2ème année : TP Web/PHP STID 2ème année : TP Web/PHP Plan de travail et aide mémoire jean.arnaud@inria.fr Ce document est composé de cinq parties : Un aide mémoire sur les aspects pratiques de la création de sites Une introduction

Plus en détail

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos. KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html

Plus en détail

Programmation WEB. HTML et Javascript

Programmation WEB. HTML et Javascript Programmation Web : HTML et Javascript Michaël Krajecki Université de Reims Champagne-Ardenne Département de Mathématiques et Informatique Moulin de la Housse - BP 1039 51687 Reims Cedex 2. Tél. : 03 26

Plus en détail

Travaux dirigés n 10

Travaux dirigés n 10 Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones

Plus en détail

XHTML & CSS PLAN. Ce COURS Intro. Ce COURS Intro. Gobelins 2013 2014

XHTML & CSS PLAN. Ce COURS Intro. Ce COURS Intro. Gobelins 2013 2014 PLAN XHTML & CSS Gobelins 2013 2014 Isabelle Biamonti 1. Le Web et ses langages 2. Le langage HTML 3. Créer une page HTML 4. Créer un site en liant les pages HTML 5. Balises spécifiques à HTML 5 6. Le

Plus en détail

Formation Webmaster : Création de site Web Initiation + Approfondissement

Formation Webmaster : Création de site Web Initiation + Approfondissement Contactez notre équipe commerciale au 09.72.37.73.73 Aix en Provence - Bordeaux - Bruxelles - Geneve - Lille - Luxembourg - Lyon - Montpellier - Nantes - Nice - Paris - Rennes - Strasbourg - Toulouse Formation

Plus en détail

Normes graphiques / Sigma Assistel / Site Internet version 1.0 / 12.11.03

Normes graphiques / Sigma Assistel / Site Internet version 1.0 / 12.11.03 version 1.0 / 12.11.03 CHOIX DE LANGUE / MESURES & GABARIT NORMES GRAPHIQUES & TYPOGRAPHIQUES 131 pixels La largeur totale du gabarit est de, 2 A ENTÊTE ET MENUS / MESURES & GABARIT NORMES GRAPHIQUES &

Plus en détail

Cours 1 PRÉSENTATION DU LOGICIEL LES MANIÈRES D UTILISER FRAMEMAKER LES DIFFÉRENTS FORMATS D ENREGISTREMENT SAUVEGARDE ET ENREGISTREMENT AUTOMATIQUE

Cours 1 PRÉSENTATION DU LOGICIEL LES MANIÈRES D UTILISER FRAMEMAKER LES DIFFÉRENTS FORMATS D ENREGISTREMENT SAUVEGARDE ET ENREGISTREMENT AUTOMATIQUE FrameMaker Cours 1 Synthèse 1 Cours 1 PRÉSENTATION DU LOGICIEL FrameMaker est un logiciel d'adobe orienté vers la documentation technique, la réglementation administrative et la réalisation d'ouvrages

Plus en détail

MODULE HTML CSS. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr

MODULE HTML CSS. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr MODULE HTML CSS Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr ORGANISATION DU MODULE 13 séances de 2 heures une partie cours une partie exercices sur machine. Modalités de contrôle : partiel en fin

Plus en détail

Formation (X)HTML-CSS avancé

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

Plus en détail

HTML, CSS, JS et CGI. Elanore Elessar Dimar

HTML, CSS, JS et CGI. Elanore Elessar Dimar HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML

Plus en détail

PROGRAMMER UNE PAGE WEB EN HTML ET CSS

PROGRAMMER UNE PAGE WEB EN HTML ET CSS Lycée Felix Le Dantec - Lannion PROGRAMMER UNE PAGE WEB EN HTML ET CSS 1STI2D TP8-3H NOM : PRÉNOM : CLASSE : Condition de réalisation : Travail seul Durée : 3 heures Matériel : un ordinateur sous Ubuntu

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

Programmation Tablette. Dominique Rossin Cours 1 - HTML / CSS

Programmation Tablette. Dominique Rossin Cours 1 - HTML / CSS Programmation Tablette Dominique Rossin Cours 1 - HTML / CSS Objectifs Comprendre le fonctionnement d une application Web Comprendre le fonctionnement d une application Smartphone Programmer et déployer

Plus en détail

1. La notion de cascade

1. La notion de cascade HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir

Plus en détail

openpersonnalite Documentation

openpersonnalite Documentation openpersonnalite Documentation Release 1.00 openmairie January 26, 2012 CONTENTS 1 utilisation 3 1.1 Principes................................................. 3 1.2 saisir une personne............................................

Plus en détail

PERSONNALISATION DE LA PAGE DE PAIEMENT & TICKET DE PAIEMENT

PERSONNALISATION DE LA PAGE DE PAIEMENT & TICKET DE PAIEMENT PERSONNALISATION DE LA PAGE DE PAIEMENT & TICKET DE PAIEMENT PAYBOX SYSTEM Point Transaction Systems, 11 A, rue Jacques Cartier - 78280 Guyancourt - FRANCE Société par Actions Simplifiée au capital de

Plus en détail

RESPONSIVE DESIGN. Gobelins 2014.2015. Isabelle Biamonti

RESPONSIVE DESIGN. Gobelins 2014.2015. Isabelle Biamonti RESPONSIVE DESIGN Gobelins 2014.2015 Isabelle Biamonti Plan Principe général Exemples Sans responsive Avec responsive Versions séparées Responsive design ou versions séparées? Comment rendre un design

Plus en détail

CSS3 CSS3 HTML5. HTML 5 et CSS 3. Cours et exercices corrigés. Cours et exercices corrigés. Jean Engels. J. Engels

CSS3 CSS3 HTML5. HTML 5 et CSS 3. Cours et exercices corrigés. Cours et exercices corrigés. Jean Engels. J. Engels 13/03/12 13:01 Page 1 Jean Engels Enseignant en mathématiques et concepteur de sites Web, Jean Engels est auteur de nombreux ouvrages portant sur les technologies du Web : HTML, CSS, JavaScript, PHP et

Plus en détail

Interface Interface de travail Configuration/Déclaration du site. Le texte Insertion et mise en page Hyperliens, ancres, liens e-mails

Interface Interface de travail Configuration/Déclaration du site. Le texte Insertion et mise en page Hyperliens, ancres, liens e-mails Formatrice créer son site Internet Notions de base XHTML, CSS, hyperlien, e-mail Les éléments : texte, images, animations, vidéo, son La navigation et l arborescence Répertoires, fichiers : les nommer?

Plus en détail

SITE WEB. Définition. Ensemble de fichiers reliés entre eux et déposés sur un serveur internet. Ordinateur connecté au réseau

SITE WEB. Définition. Ensemble de fichiers reliés entre eux et déposés sur un serveur internet. Ordinateur connecté au réseau SITE WEB Définition Ensemble de fichiers reliés entre eux et déposés sur un serveur internet. Ordinateur connecté au réseau Comment mon site est sur internet Je crée mon site sur mon ordinateur, en local.

Plus en détail

TP 5 Les CMS, la forme et le fond Internet et Outils (IO2)

TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) Un site, tel que vous avez appris à en programmer jusqu à maintenant, contenant un ensemble de pages HTML embellies de quelques feuilles de styles,

Plus en détail

Certificat Informatique & Internet Niveau1

Certificat Informatique & Internet Niveau1 Certificat Informatique & Internet Niveau1 Une production du CEMU Université de Caen Basse-Normandie Traitements de texte : fonctionnalités Isabelle Duchatelle d'après Pierre Beust Plan Saisie au clavier

Plus en détail

Liste des propriétés CSS

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

Plus en détail

Tutoriel d utilisation

Tutoriel d utilisation Tutoriel d utilisation JCE est l éditeur le plus complet pour Joomla! JCE est capable de gérer les mise en page comme un éditeur de type Word ou Open Office. Il permet d insérer des images et médias de

Plus en détail