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.

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

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

Transcription

1 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, italique, oblique... font-variant: La variante de police font-weight: La taille de la police

2 1.Famille de police. Vous devez indiquer le nom de la police comme ceci : font-family:police; Seulement, pour éviter qu'il n'y ait de problème si l'internaute n'a pas la même police que vous, on met en général plusieurs noms de police, séparés par des virgules : font-family:police1, police2, police3, police4; Le navigateur essaiera d'abord de mettre la police1. S'il ne l'a pas, il essaiera de mettre la police2. S'il ne l'a pas, il essaiera la police3 et ainsi de suite. En général, on met en tout dernier "serif", ce qui correspond à une police standard (qui ne se met que si aucune autre police n'a été trouvée).

3 Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs et que vous pouvez donc utiliser sans crainte : Arial Arial Black Comic Sans MS Courier New Georgia Impact Times New Roman Trebuchet MS Verdana

4 2.Taille de votre police de caractère. Vous devez indiquer le nom de la police comme ceci : font-size:taille; En réalité, les possibilités pour modifier la taille du texte sont nombreuses (et variées!). En pixels : c'est une façon très précise d'indiquer la taille du texte. C'est à vous de dire combien de pixels exactement doit faire le texte. Pour avoir un texte de 16 pixels de hauteur, vous devez écrire : font-size:16px;

5 En donnant une valeur relative : c'est-à-dire en écrivant carrément "gros", "très gros", "petit", "minuscule". Mais bien sûr, comme tout c'est en anglais, vous devez écrire: font-size: xx-small Voici la liste des différentes valeurs que vous pouvez mettre ainsi que leur signification : xx-small : minuscule x-small : très petit small : petit medium : moyen large : grand x-large : très grand xx-large : euh... gigantesque

6 En pourcentage : ça c'est facile. Si vous indiquez "100%", le texte aura une taille "normale". Si vous mettez "130%", le texte aura une taille correspondant à 130% de la taille normale. Ca ressemble énormément aux "em" (en fait c'est plus ou moins pareil). Après, tout est une question de goût. Vous devez écrire: font-size:140% Les mentions en pourcentage se réfèrent à la taille de police de l'élément parent.

7 3.Le style de police. Vous devez indiquer le nom de la police comme ceci : font-style: italic; Avec font-style: vous pouvez spécifier le style de police. Les données suivantes sont possibles: italic = style de police italique. oblique = style de police oblique. normal = style de police normal.

8 4.La variante de police. Vous devez indiquer le nom de la police comme ceci : font-variant:valeur; Cette option d'afficher en petites capitales, peut vous être utile pour réaliser des titres ou sous-titres mais son utilité est vite limitée et sa répétition peut devenir pénible pour le visiteur. Vous devez écrire: font-variant: normal Valeurs possibles normal =variante de police normale. small-caps =petites capitales.

9 5.La taille de la police (graisse de police). La graisse de police correspond à l'état plus ou moins gras dans lequel la police est représentée.vous devez indiquer le nom de la police comme ceci : font-weight: valeur Vous pouvez contrôler la taille de votre texte. Valeurs possibles: bold = gras. bolder = très gras. lighter = plus fin. 100,200,300,400,500,600,700,800,900 = très fin (100) jusqu'à très gras (900) normal = graisse normale de police. Attention: Il n'y a pour ainsi dire aucune police installée qui supporte toutes les mentions permises relatives à la graisse de police.

10 Exemple: 1. Ouvrir l'éditeur de texte. Si vous utilisez Notepad++, pensez à aller dans le menu "Langage / CSS" pour activer la coloration du CSS. Vous penserez à enregistrer votre fichier en.css au lieu de.html 2. Créons un modèle de texte Cette page sera un fichier CSS nommée: styles_polices.css #police { font-family: Arial, Helvetica, sans serif; font-size: 14px; font-style: italic; font-weight: bold; font-variant: small-caps; }

11 Ecrire les codes Html suivants dans le fichier polices.htm Pour inclure notre CSS dans notre page HTML, il nous suffit d'insérer le code suivant entre les balises <head> et </head>: <link rel="stylesheet" type="text/css" href="styles_polices.css"> pour indiquer le chemin du fichier style_div.css

12 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <link href="styles_polices.css" rel="stylesheet" type="text/css"> <title>police et CSS</title> </head> <body> <div id="police">ceci est une police arial de 14px gras italique et avec des petites majuscules</div> </body> </html> Résultat

13 Les classes et les ID Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des styles. Elle consiste à préciser la balise sélectionnée (comme pour une déclaration de style), puis de lui ajouter un point (.) et le nom que l'on souhaite donner à la classe. Le nom de la classe peut-être composé de lettres (accentuées ou non), de chiffres et de tirets : Modifions notre exemple le # est remplacer par un point.police { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; font-weight: bold; font-variant: small-caps; }

14 Appel d'une classe dans le fichier polices.htm Pour appeler une classe dans le code HTML, il suffit de rajouter un attribut class à la balise : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <link href="styles_polices.css" rel="stylesheet" type="text/css"> <title>police et CSS</title> </head> <body> <div class="police" id="boite">ceci est une police arial de 14px gras italique et avec des petites majuscules</div> </body> </html>

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

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

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

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

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

É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

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

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

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

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

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

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

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

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML, CSS Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML Pour le fond -> HTML Pour la forme ->CSS Les balises Les balises orphelines Attributs de balise LES BALISES PRINCIPALES HTML

Plus en détail

texte affiché

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

Plus en détail

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

XHTML. et CSS 2. Michel Martin

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

Plus en détail

Chapitre 7. extended HyperText Markup Language (XHTML)

Chapitre 7. extended HyperText Markup Language (XHTML) Chapitre 7 extended HyperText Markup Language (XHTML) Objectifs Le Web statique : Du HTML au XHTML Apprendre à manipuler les éléments XHTML Attention : projet évalué plutôt sur la «qualité» du code XHTML

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

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

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

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

HTML. Informatique de l Internet: le langage HTML HTML. Navigateur. Structure (1) Balises (1)

HTML. Informatique de l Internet: le langage HTML HTML. Navigateur. Structure (1) Balises (1) HTML Informatique de l Internet: le langage HTML Joël Quinqueton Dépt MIAp, UFR IV UPV Université Montpellier III Balises et structure des documents HTML Formulaires Cadres Feuilles de style HTML Hyper

Plus en détail

Tu peux changer le type d écriture ici FICHE. Open Office 3.0. Tu peux souligner, surligner, barré le texte. Tu peux modifier

Tu peux changer le type d écriture ici FICHE. Open Office 3.0. Tu peux souligner, surligner, barré le texte. Tu peux modifier Open Office 3.0 Utilisation du menu déroulant 1) Il faut selectionner le texte ou le mot que l on souhaite modifier. Lorsque le texte ou le mot sont sélectionnés 2) Aller dans l onglet Format, sélectionner

Plus en détail

Chapitre 1 Vocabulaire

Chapitre 1 Vocabulaire Chapitre 1 Vocabulaire Typographie? Orthotypographie? Tout ce qui a trait au dessin de lettres, et l'utilisation de caractères est réuni sous l'appellation typographie. Étymologiquement, «typographie»

Plus en détail

Techniques d'affichage des documents XML

Techniques d'affichage des documents XML SESSION 21 Techniques d'affichage des documents XML Programme de la session Appliquer des formats aux documents XML Utiliser XSLT et XPath pour la publication Web Introduction aux feuilles de styles CSS

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

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

LA TYPOGRAPHIE DU WEB 3- Les ressources typographiques du HTML

LA TYPOGRAPHIE DU WEB 3- Les ressources typographiques du HTML LES DOSSIERS DU CERIG LA TYPOGRAPHIE DU WEB 3- Les ressources typographiques du HTML Jean-Claude Sohm / EFPG (créé le : 20 juillet 2000 / révisé le : 19 décembre 2000) URL : http://cerig.efpg.inpg.fr/icg/dossiers/typo/chap3.htm

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

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

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

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

Plus en détail

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

Mon Mondrian. Compétences visées. Les bases du HTML, du CSS, la balise

Mon Mondrian. Compétences visées. Les bases du HTML, du CSS, la balise <div>, le positionnement, les mesures. Description Mon Mondrian Compétences visées Les bases du HTML, du CSS, la balise , le positionnement, les mesures. Description Peindre, c'est salissant. Le code, c'est plus propre. À travers ce projet, recréez

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

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

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

2E Révision introduction au Tableur > 2) La cellule

2E Révision introduction au Tableur > 2) La cellule Objectifs de ce module Je serai capable... de changer les polices et la taille des caractères dans les cellules ou plages de cellules d utiliser des styles différents d aligner les cellules (gauche, centré,

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

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

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

Développement Web (NFA0016)

Développement Web (NFA0016) Développement Web (NFA0016) seconde session Avril 2011 Durée : 3h Modalités : Tous documents autorisés. Calculatrices, ordinateurs, téléphones portables interdits. Remarque : Pour ne pas surcharger, on

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

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

Les bases du HTML5/CSS3

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

Plus en détail

Partie HTML TD 1 : Les bases du HTML

Partie HTML TD 1 : Les bases du HTML Partie HTML TD 1 : Les bases du HTML 1 Introduction HTML = HyperText Marked Language HTML est un langage permettant de décrire des données affichables sous forme de page par un navigateur Web. HTML peut

Plus en détail

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

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

T.P. OUTILS DE L INTERNET

T.P. OUTILS DE L INTERNET T.P. OUTILS DE L INTERNET Le HTML (HyperText Markup Language) est un langage informatique utilisé pour la création de pages Web. Une page HTML est un simple fichier texte contenant des balises (parfois

Plus en détail

CREATION WEB DYNAMIQUE

CREATION WEB DYNAMIQUE CREATION WEB DYNAMIQUE II ) xhtml ET CSS II-1 ) Introduction Le xhtml, extensible HyperText Markup Language, est un langage identique au langage HTML mais respectant la syntaxe définie par XML Quant vous

Plus en détail

Fiche TD n 1 Le langage HTML

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

Plus en détail

XML: la validation de HTML et XHTML

XML: la validation de HTML et XHTML Rappels : bonne formation / validité XML: la validation de HTML et XHTML Andrei Popescu-Belis TIM / ETI, Université de Genève Cours n 4 7.4.2005 Bien distinguer BF et validité bonne formation (BF) : respecter

Plus en détail

Ajax, jquery et PHP. 42 ateliers pour concevoir des applications Web 2.0. Jean-Marie Defrance. 3 e édition

Ajax, jquery et PHP. 42 ateliers pour concevoir des applications Web 2.0. Jean-Marie Defrance. 3 e édition Ajax, jquery et PHP 42 ateliers pour concevoir des applications Web 2.0 3 e édition Jean-Marie Defrance Groupe Eyrolles, 2008, 2010, 2011, ISBN : 978-2-212-13271-7 15 Plug-ins jquery Ce dernier chapitre

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

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

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

Créer un papier à lettre

Créer un papier à lettre Créer un papier à lettre Une fois terminé, votre papier à lettres devra être stocké dans le dossier Stationery qui se trouve ici ; Pour Windows Mail C:\Users\votrenomdesession\AppData\Local\Microsoft\Windows

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

Écrire des maths sur internet. I Comparaison de méthodes. 1 Les images. a Avantage. b Inconvénients

Écrire des maths sur internet. I Comparaison de méthodes. 1 Les images. a Avantage. b Inconvénients Écrire des maths sur internet Note de style : les noms des applications sont en italiques, les codes sont en police à chasse fixe et les copies d écran sur fond gris. Les liens [en] sont en anglais, les

Plus en détail

Informatique. Le petit répertoire

Informatique. Le petit répertoire Comment : crire un courrier électronique avec «laposte.net» Méthode : 1. Connecter vous à l adresse : www.laposte.net 2. Taper votre identifiant et votre mot de passe 3. La fenêtre ci-dessous apparaît

Plus en détail

Francis Draillard. Premiers pas HTML 5 CSS 3 & 6 e édition. Mise à jour. Groupe Eyrolles, 2006, 2008, 2010, 2012, 2013, 2015, ISBN :

Francis Draillard. Premiers pas HTML 5 CSS 3 & 6 e édition. Mise à jour. Groupe Eyrolles, 2006, 2008, 2010, 2012, 2013, 2015, ISBN : Francis Draillard Premiers pas en CSS 3 & HTML 5 6 e édition Mise à jour Groupe Eyrolles, 2006, 2008, 2010, 2012, 2013, 2015, ISBN : 978-2-212-13944-0 chapitre 1 Introduction au HTML et aux feuilles de

Plus en détail

On le retrouve dans plusieurs modules tels que le courrier, le forum, l agenda, les tâches, les communiqués et plus particulièrement dans Édu-Notes.

On le retrouve dans plusieurs modules tels que le courrier, le forum, l agenda, les tâches, les communiqués et plus particulièrement dans Édu-Notes. 154 L éditeur de texte L ÉDITEUR DE TEXTE L éditeur de texte du portail est une application destinée à créer et modifier des textes pour créer des documents HTML. L éditeur de texte possède certaines fonctions

Plus en détail

Réseaux 1. TP 6 Les feuilles de style CSS2 CORRIGE

Réseaux 1. TP 6 Les feuilles de style CSS2 CORRIGE I.U.T. de Nice Côte d Azur 2004-2005 Département Informatique Réseaux 1 TP 6 Les feuilles de style CSS2 CORRIGE Objectif : introduire les principes des feuilles de style CSS2 Note : vous placerez vos fichiers

Plus en détail

TD2 : XHTML/CSS. Université Bordeaux 1 Licence 3 Informatique

TD2 : XHTML/CSS. Université Bordeaux 1 Licence 3 Informatique Université Bordeaux 1 T.D. Licence 3 Informatique 2007 2008 TD2 : XHTML/CSS Le but de ce TP est d apprendre les bases du langage XHTML. Voici deux sites de référence pour le XHTML et le HTML : http://www.w3.org/tr/xhtml1

Plus en détail

Balises obsolètes.

texte

p { font-size: 20px; color: red; text-transform: uppercase; }

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

Plus en détail

MODULE WEB AVANCE L essentiel sur JavaScript

MODULE WEB AVANCE L essentiel sur JavaScript MODULE WEB AVANCE L essentiel sur JavaScript La partie cours aborde les points suivants : EXERCICES Les tableaux Les évènements Les structures conditionnelles Les boîtes de dialogue Les objets Les fonctions

Plus en détail

Créer une page HTML avec l'éditeur Notepad++

Créer une page HTML avec l'éditeur Notepad++ Page Html Créer une page HTML avec l'éditeur Notepad++ Ouvrir Notepad++ Ecrivez un court texte. Enregistrer ce fichier dans un dossier que vous avez préalablement créé dans vos documents ou sur votre bureau

Plus en détail

Le principal étant de nommer de manière identique les identificateurs dans notre page html!

Le principal étant de nommer de manière identique les identificateurs dans notre page html! Il ne s'agit pas ici de faire un cours de code CSS! Il faudrait un certain nombre de chapitres et surtout commencer par le commencement à savoir le HTML et le XHTML. Mais pour la plupart, vous êtes habitués

Plus en détail

Formation HTML / CSS. ar dionoea

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

Plus en détail

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

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

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

Plus en détail

Guide pour l élaboration du mémoire. DEES Master 1 ère année Master 2 ème année

Guide pour l élaboration du mémoire. DEES Master 1 ère année Master 2 ème année Guide pour l élaboration du mémoire DEES Master 1 ère année Master 2 ème année 1 STRUCTURE Il est impératif de suivre cet ordre! 1. Couverture. 2. Page de titre (facultative). 3. Résumé en français avec

Plus en détail

Principales balises HTML5

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

Plus en détail

METTRE EN FORME UN ARTICLE

METTRE EN FORME UN ARTICLE METTRE EN FORME UN ARTICLE Il y a trois méthodes pour mettre en valeur le contenu d un article : Soit avec la barre typographique. Soit avec des raccourcis clavier. Soit avec des balises html. 1 ère méthode

Plus en détail

protocole utilisé (autre exemple ftp)! nom du serveur!

protocole utilisé (autre exemple ftp)!  nom du serveur! Le Langage HTML! Finalité:! Définir un langage permettant d élaborer des sites Web, c est à dire un ensemble de pages web (ou pages Html) organisées (de façon logique) sous forme de graphe.! La transition

Plus en détail

Initiation aux technologies de l information

Initiation aux technologies de l information Initiation aux technologies de l information Frédéric Gava (MCF) gava@univ-paris12.fr LACL, bâtiment P2 du CMC, bureau 221 Université de Paris XII Val-de-Marne 61 avenue du Général de Gaulle 94010 Créteil

Plus en détail

Développement Web (NFA0016)

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

Plus en détail

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

HTML5 et CSS3 Maîtrisez les standards de la création de sites Web (3e édition)

HTML5 et CSS3 Maîtrisez les standards de la création de sites Web (3e édition) Le HTML5 et les CSS 1. L'évolution de HTML 15 2. L'évolution des CSS 16 2.1 La notion de module 16 2.2 L'évolution des statuts 16 2.3 Les préfixes vendeurs 17 2.4 Utiliser les préfixes vendeurs 18 3. La

Plus en détail

Introduction à HTML. 27 Février Damien DURVILLE HTML 1

Introduction à HTML. 27 Février Damien DURVILLE HTML 1 Introduction à 27 Février 2004 Damien DURVILLE 1 Qu'est-ce que c'est? : Hypertext Markup Language hypertext : texte avec liens dynamique markup : marquage, codage, délimitation language : une manière de

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

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

Exercice 8. Les styles CSS

Exercice 8. Les styles CSS Exercice 8. Les styles CSS 1. Une feuille de style est un fichier dont l'extension est.css. On définit dans ce fichier nos préférences concernant l'affichage du contenu de notre page HTML : les polices

Plus en détail

Application du guide méthodologique 2010 avec Microsoft Word Fanny Gravel Marie-Josée Tondreau

Application du guide méthodologique 2010 avec Microsoft Word Fanny Gravel Marie-Josée Tondreau Fanny Gravel Marie-Josée Tondreau Août 2010 Table des matières Comment lire ce guide... 3 A. Sélectionner le papier.... 3 B. Modifier les marges... 5 C. Sélectionner la police et la taille des caractères....

Plus en détail

Conception d'interfaces Web

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

Plus en détail

Initiation aux langages du Web : CSS 1/26

Initiation aux langages du Web : CSS 1/26 Initiation aux langages du Web : CSS 1/26 Table des matières 1.Introduction... 4 2.Notion d'héritage... 4 3.Syntaxe... 5 Exemple 2: Application d'un style à plusieurs balises...5 4.Inclusion de style...

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

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

Les balises XHTML. Balises de structure. Balises de mise en forme. Balises de liens Balises de liste Balises d image Balises de tableau

Les balises XHTML. Balises de structure. Balises de mise en forme. Balises de liens Balises de liste Balises d image Balises de tableau Les balises XHTML Balises de structure Balises de liens Balises de liste Balises d image Balises de tableau Balises de cadre Balises de mise en forme Balises de formulaire 1 Balises de structure Un document

Plus en détail

Comment Customiser les couleurs et les polices des interfaces web

Comment Customiser les couleurs et les polices des interfaces web Comment Customiser les couleurs 1. Introduction Le quoi? Les couleurs et polices sont des éléments importants des interfaces web car interviennent dans l'ergonomie des applications en ligne. Pourquoi ce

Plus en détail

Introduction au langage HTML

Introduction au langage HTML Introduction au langage HTML Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT marzais@llaic3.u-clermont1.fr mathieu.lacroix@isima.fr antoine.vacavant@liris.cnrs.fr 24 et 25 Avril 2006 /80 Thibault MARZAIS,

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

LE FORMAT/POLICE. Objectif : Savoir changer de police dans le texte et savoir l adapter au document préparé. Durée : environ 20 minutes

LE FORMAT/POLICE. Objectif : Savoir changer de police dans le texte et savoir l adapter au document préparé. Durée : environ 20 minutes Corinne BLATEYRON LE FORMAT/POLICE Objectif : Savoir changer de police dans le texte et savoir l adapter au document préparé. Durée : environ 20 minutes Dans la fonction police sont regroupés la police

Plus en détail

On peut découper une page en plusieurs zones sur une boutique, chacune de ces zones ayant son utilité propre et sa façon d'être utilisée.

On peut découper une page en plusieurs zones sur une boutique, chacune de ces zones ayant son utilité propre et sa façon d'être utilisée. Elearning > Outils et méthodes pour rendre votre site plus attractif LES ZONES D'UNE PAGE On peut découper une page en plusieurs zones sur une boutique, chacune de ces zones ayant son utilité propre et

Plus en détail

Objectifs du chapitre

Objectifs du chapitre 1 Le langage HTML Objectifs du chapitre Introduire les concepts de marquage de base Présenter les éléments de HTML4 Les éléments de base du langage HTML Les tableaux Les éléments de formatage des pages

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

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