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

Save this PDF as:
 WORD  PNG  TXT  JPG

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

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

Transcription

1 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 lisible par les navigateurs, le langage CSS (abréviation de Cascading Style Sheets), également lisible des navigateurs a pour objet la mise en forme de ce contenu pour le rendre présentable sur un site web. Les mêmes éditeurs seront utilisés que pour écrire une page html. Il est recommandé de créer un fichier texte dans le même dossier que le fichier html en lui donnant l'extension.css Dans l'éditeur Notepad++ on sélectionnera CSS dans le menu Langages afin d'afficher une présentation spécifique des pages css. Syntaxe de base des feuilles de style La syntaxe générale est la suivante : Exemple css11 : on décide que tous les titres de taille h3 soient en rouge et de taille 20 pixels, tous les paragraphes p en bleu en police 'verdana'. Le code s'écrira : Enregistrons cette feuille dans le même dossier que l'exemple 3 que nous avions donné dans le premier tuto en l'appelant style3.css La question se pose alors de savoir où faire référence à cette feuille de style. La réponse est dans le <head> de la page html avec la syntaxe suivante : <link rel=''stylesheet'' href=''style3.css'' /> ce qui signifie que la page html qui suit doit établir un lien avec une feuille de style dénommée style3.css En intégrant ce code dans la page exemple3bis.html prise comme exemple, cela donne ce qui suit :

2 Tuto 3ème séance - p2 Code page html : + code css : = Résultat dans le navigateur: Notons que ce qui n'a pas été spécifié par la feuille de style (titre h2, citation blockquote) est affiché dans le style par défaut. Notons aussi que la première citation (balise <q>) est dans le même style que celui de la balise <p>, les polices des titres étant celles par défaut (Times new roman) car non spécifiées. La valeur 'small' pour la taille des balises p et q signifiant plus petit que la taille par défaut. Allons plus loin en précisant les notions d'attributs class et id ainsi que les différents types de sélecteurs.

3 Tuto 3ème séance - p3 Appliquer un style au moyen des attributs class et id Il est fréquent qu'un style ne soit pas défini pour toutes les balises d'un type donné mais seulement à certaines d'entre elles. Dans ce cas, il faut les identifier au moyen d'un attribut spécifique. Ces attributs se placent sur les balises choisies dans le code html et l'on s'y réfère dans le code css. Ces attributs sont de 2 sortes : Attribut class : exemple : dans l'exemple précédent, ajoutons l'attribut class=''conseil'' dans la première balise h3 (ligne 10 du code html) puis remplaçons le sélecteur h3 par.conseil sur la ligne 6 du code css. On constate que seul le premier titre h3 est affecté par le style rouge/15pixels et pas le second qui a gardé son style par défaut (noir/20px). Ne pas omettre le point devant le nom de la classe : Code html : + code css : = résultat dans le navigateur

4 Tuto 3ème séance - p4 Attribut id : L'effet est identique à celui de la classe mais son usage est unique alors que l'attribut class est utilisable sur plusieurs balises. Syntaxe : dans le code html, introduire l'attribut id=''machin'' dans la balise souhaitée puis le sélecteur #machin dans le code css. Vous pourrez l'expérimenter vous-même. Les balises universelles : Elles n'ont pas d'autre fonction que de permettre d'introduire un attribut quand un texte n'est pas entouré d'une balise signifiante. Il y en a deux : une balise de type inline c'est à dire au milieu d'un texte, ce sera la balise <span class=''truc''>texte</span> et la balise de type block qui s'applique à un texte complet (comme le sont <p> ou <h1>, etc.), ce sera la balise <div class=''machin''>bloc de texte</div> Ces types d'attribut seront utilisés dans certains exemples qui vont suivre. Les principaux sélecteurs Nous avons déjà fait connaissance avec la notion de sélecteur dans les feuilles de style : il s'agit des éléments sur lesquels on applique une ou plusieurs propriétés. Ce sont d'abord toutes les balises simples que l'on écrit en css toutes seules sans aucun signe, exemple : p ou un titre h1, h2... Nous avons vu aussi les sélecteurs de classe :.class et #id Nous avons vu passer aussi deux balises auxquelles s'appliquent les mêmes propriétés (exemple3bis) : p, q On peut ajouter la syntaxe p q sans signe qui signifie que la propriété s'applique aux balises q situées à l'intérieur des balises p On ajoutera aussi le sélecteur universel * qui s'applique à toutes les balises. L'usage en est rare (police de caractères unique pour tout une page web, par exemple). Il en existe beaucoup d'autres qui sont listées sur le site du W3C mais vous savez l'essentiel. Formatage du texte : taille, police, style, alignement Taille : la propriété css est font-size : en valeur absolue on peut indiquer le nombre de pixels exemple : 12px ; ce n'est pas recommandé car le résultat dépendra de la résolution de l'écran. En valeur relative on peut indiquer: - soit l'une des 7 tailles suivantes : xx-small, x-small, small, medium, large, x-large, xx-large, ce qui est un peu limité. - soit, ce qui est plus fin le nombre de em, 1em étant le caractère 'normal' et l'on peut mettre des chiffres décimaux avec le point décimal anglais : 0.7em ou 1.8em ce qui est évidemment beaucoup plus souple. On peut aussi utiliser le pourcentage : 70 % ou 180 %. NB : pour savoir ce qu'on entend par 'normal' le plus simple est d'essayer avec la taille 1em pour chaque navigateur courant. Police : La propriété css est font-family : Il faut énumérer les polices acceptables dans l'ordre de préférence séparées par des virgules (l'internaute n'ayant pas forcément la même police que celle souhaitée). Les polices exprimées en plusieurs mots séparés seront mises entre '' NB : les polices suivantes fonctionnent sur la plupart des navigateurs : Arial, ''Arial black'', ''Comic sans MS'', ''Courrier New'', Georgia, Impact, ''Times New Roman'', ''Trebuchet MS'', Verdana Malgré tout, il est prudent de terminer la liste des polices en indiquant : serif ou sans-serif qui désignent les 2 types de police par défaut de l'utilisateur. Notons enfin qu'il y a des méthodes pour que le code aille chercher des polices peu courantes que l'on souhaitera utiliser sur un site. Cela ne me paraît pas fondamental. Mais si besoin est on peut consulter le site de référence de ce tuto fr.openclassrooms.com Style : normal, italique, gras : Les propriété css sont font-style: normal; ou italic; ou fontweight : bold; Il y a aussi la propriété text-decoration: underline; (souligné) ou blink; (clignotant) ou linethrough; (barré)

5 Tuto 3ème séance - p5 Alignement : La propriété css est text-align: left; (par défaut) ou right; ou center; ou justify; Couleurs : Textes : La propriété s'écrit: color : On peut écrire in english l'une des 16 couleurs désignées : white, silver, grey, black, red, maroon, lime, green, yellow, olive, blue, navy, fuschia, purple, aqua, teal (?) La notation hexadécimale avec un # devant est beaucoup plus précise : ex : #FF5A28 ou encore la notation RGB : rgb(240,96,204) On trouve les codes en téléchargeant la_boite_a_couleurs ou encore sur tout logiciel de dessin ou traitement d'images comme Paint. Couleur de fond : la propriété est background-color : Commentaires :ils s'écrivent ainsi en css : /* commentaire /* Notion d'héritage Les balises 'intérieures' héritent des propriétés des balises parentes sauf si on définit une exception par la balise <mark>texte</mark> pour la mise en valeur de certains mots. On définit également de cette manière les propriétés des balises <strong> et <em> Image de fond : background-image : url(''nom_image'') ; avec background-attachment : fixed ; ou scroll ; (fixe ou défilant avec le texte) avec background-repeat : no-repeat (image unique sur la page) ou repeat-x (répété sur la 1ère ligne) ou repeat-y (répété sur la 1ère colonne), repeat est par défaut. Avec no-repeat on peut définir background-position :top-right, bottom-center, p.ex. Ou avec des pixels : 30px 50px (de la gauche et du haut) On peut combiner les propriétés dans la même en écrivant seulement background : On peut mettre aussi plusieurs images d'url séparées par une virgule. Attention à l'ordre car, selon la règle bien connue, une image peut en cacher une autre... Transparence : elle est réglable par la propriété est: opacity : 0.6 par ex. ou en %, la valeur 1 signifiant: opaque Image flottante : L'exemple ci-après permettra de comprendre ce dont s'agit et comment on le réalise. Ce qu'on veut obtenir :

6 Tuto 3ème séance - p6 Code HTML : Code CSS : enregistré style4.css ---> Sur les questions de mise en forme à l'aide des feuilles de style, nous restera à voir quelques propriétés importantes telles que le réglage de l'apparence des liens : au survol lors du clic lorsque le le lien a été consulté Bordures La propriété est border:(ou border-top, bottom, left, right) avec, dans l'ordre taille en px, couleur, type, exemple: border: 2px blue dashed ; signifie 2 pixels, bleue, tirets Types de bordure : none, solid, dotted, dashed, double, groove, ridge, inset, outset les 4 dernières étant des variantes d'un effet de relief, à essayer. Bordure arrondie : border-radius: 5px définit le rayon de l'arrondi. Ombres : border-shadow: 5px 5px 0px black ; les 2 premières donnant le décalage hrz de l'ombre, puis l'adoucissement, enfin la couleur. Il existe aussi : text-shadow: mêmes paramètres.

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

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

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

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

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

Plus en détail

CSS 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

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

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

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

Plus en détail

CSS. Karima Boudaoud IUT- R&T

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

Plus en détail

Les 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

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

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

Plus en détail

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

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

Plus en détail

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

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

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

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

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

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

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

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

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

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

DOSSIER D'ACTIVITES SUR LE HTML N 9 Appliquer des feuilles de style à du texte

DOSSIER D'ACTIVITES SUR LE HTML N 9 Appliquer des feuilles de style à du texte DOSSIER D'ACTIVITES SUR LE HTML N 9 Appliquer des feuilles de style à du texte Objectifs : Apprendre à l apprenant à se créer un espace de travail sous Linux Apprendre à l apprenant à ouvrir un éditeur

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

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

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

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

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

Plus en détail

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

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

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

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

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

Plus en détail

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

CSS = Cascading Style Sheets

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

Plus en détail

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

Feuilles de style en cascade. Utilisation des CSS. Yan Bodain

Feuilles de style en cascade. Utilisation des CSS. Yan Bodain Feuilles de style en cascade Utilisation des CSS Cascading Style Sheets Yan Bodain (Yan.Bodain@polymtl.ca) Chercheur-développeur Maison des technologies de l'information et des communications pour la formation

Plus en détail

HTML. HyperText Markup Language. Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises qui permettent :

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

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

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

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

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

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

Plus en détail

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

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

Technologies de l Internet. Partie 3 : CSS Iulian Ober

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

Plus en détail

INF2005 Programmation web CSS. Jacques Berger

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

Plus en détail

Développement web avec XHTML et CSS

Développement web avec XHTML et CSS Déveloement web avec XHTML et CSS Pierre Dorbais Table des matières I Fond avec XHTML 3 1 Une age minimale 3 2 Les commentaires 3 3 Paragrahes 3 4 Titres 3 5 Saut de ligne et ligne horizontale 4 6 Mise

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

XML DTD CSS Aide-mémoire

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

Plus en détail

PROPRIETES DES STYLES

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

Plus en détail

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

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

Balises obsolètes. <p>texte</p> p { font-size: 20px; color: red; text-transform: uppercase; }

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

Plus en détail

Partie 2 : La mise en forme avec CSS

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

Plus en détail

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

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

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

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

Cours CSS/JavaScript

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

Plus en détail

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

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

Plus en détail

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

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

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

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

CSS = Cascading Style Sheets. Structure d'une feuille de style. Les sélecteurs. On peut sélectionner...

CSS = Cascading Style Sheets. Structure d'une feuille de style. Les sélecteurs. On peut sélectionner... Menu en absolu. Largeur fixe (em) CSS = Cascading Style Sheets écrits dans un fichier.css Exemple : style.css un même fichier peut être partagé par plusieurs pages! Uniformité de présentation) ajouter

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

Les Feuilles de Styles

Les Feuilles de Styles Chapitre 6 Les Feuilles de Styles http://chaker707.googlepages.com/ BEN MAHMOUD Chaker Chaker707@yahoo.fr Principe des feuilles de style Même idée que les styles des traitements de texte distinction entre

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

Mémento des propriétés CSS

Mémento des propriétés CSS Partie 5 : Annexes 238/246 Mémento des propriétés CSS Cette page est une liste non exhaustive des propriétés CSS qui existent en CSS3. Pour la plupart, ce sont des propriétés que nous avons vues dans le

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

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

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

Annexe : Balises HTML et CSS

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

Plus en détail

DOSSIER D'ACTIVITES SUR LE HTML N 12 Appliquer des feuilles de style aux formulaires

DOSSIER D'ACTIVITES SUR LE HTML N 12 Appliquer des feuilles de style aux formulaires DOSSIER D'ACTIVITES SUR LE HTML N 12 Appliquer des feuilles de style aux formulaires Objectifs : Apprendre à l apprenant à se créer un espace de travail sous Linux Apprendre à l apprenant à ouvrir un éditeur

Plus en détail

Technologies du Web Master COMASIC CSS

Technologies du Web Master COMASIC CSS Technologies du Web Master COMASIC CSS Antoine Amarilli 1 27 novembre 2014 1. Matériel de cours inspiré de notes par Pierre Senellart et de code par Pablo Rauzy. Merci à Pierre Senellart et Pablo Rauzy

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

Séance 13: Conception de sites web Partie 2

Séance 13: Conception de sites web Partie 2 : Outils de bureautique, logiciels et Internet Séance 13: Conception de sites web Partie 2 Chargée de cours: Ange Adrienne NYAMEN TATO Département Informatique Session Été 2017 Groupe 20 1 Notions abordées

Plus en détail

HTML est un langage pour décrire des pages web. HTML est un acronyme pour Hyper Text Markup Language (langage de balisage d'hypertexte)

HTML est un langage pour décrire des pages web. HTML est un acronyme pour Hyper Text Markup Language (langage de balisage d'hypertexte) Chapitre 1 Pages du Web 1.1 Introduction 1.2 Le langage HTML Les pages qui suivent présentent le langage HTML. Il s'agit du langage qui permet d'acher des informations sur une page web. En particulier,

Plus en détail

Balises obsolètes. <p>texte</p> p { font-size: 20px; color: red; text-transform: uppercase; }

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

Plus en détail

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

<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

LANGAGE HTML : STRUCTURE GENERALE, FORMATAGE DU TEXTE ET INSERTION D IMAGE

LANGAGE HTML : STRUCTURE GENERALE, FORMATAGE DU TEXTE ET INSERTION D IMAGE ICN ICN Informatique et Création Numérique LANGAGE HTML : STRUCTURE GENERALE, FORMATAGE DU TEXTE ET INSERTION D IMAGE 1 MISE EN SITUATION 1.1 Page Web «Une page Web est une ressource du World Wide Web

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

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

Couleurs, polices et autres attributs. Les feuilles de styles CSS. Les feuilles de style CSS. Page HTML avec fichier CSS

Couleurs, polices et autres attributs. Les feuilles de styles CSS. Les feuilles de style CSS. Page HTML avec fichier CSS Couleurs, polices et autres attributs Les feuilles de styles CSS Jusqu à HTML 3.2 : on utilise les attributs des balises. Exemples : ... ...

Plus en détail

COURS DE PROGRAMMATION DE SITE WEB 1

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

Plus en détail

É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

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

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

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

Plus en détail

On peut également définir certains éléments pour tout le fichier html, comme les liens par

On peut également définir certains éléments pour tout le fichier html, comme les liens par WEB : CSS (CSS 3) : Le CSS permet de créer des feuilles de style dans des fichiers ''.css'' qui sont utilisés par des fichiers html. La syntaxe du CSS est très simple, elle est constituée de règles associées

Plus en détail

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

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

Plus en détail

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

Programmation PHP Septembre 2010

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

Plus en détail

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. avec XHTML et CSS. 3e édition. son site web. Nebra. Mathieu. Préface de Laurent Denis

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

Plus en détail

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

Documents HTML Mise en forme CSS

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

Plus en détail

Attribut : style. Attribut style Balise toutes

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

Plus en détail

Cours 11 Feuilles de styles CSS

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

Plus en détail

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