TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class"

Transcription

1 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 . Insérez une feuille de style externe qui a pour nom presse.css avec pour type de média «screen» entre les balises <head> </head> Ouvrez ensuite un éditeur de texte tel que Topstyle et enregistrez la page sous le nom de presse.css. Nous commencerons par styler la balise html en lui donnant un arrière plan (background-color) de couleur gris (#C2CACF). Les marges externe (margin) et interne (padding) sont à zéro. html Maintenant, il faut paramétrer la balise body. Les marges externe (margin) et interne (padding) sont à zéro. On ajoute le même arrière plan couleur que pour la balise html et une image de fond (background-image) (reçue par mail). Cette image ne sera pas répété (background-repeat) et aura une position de 0px en valeur horizontale et verticale (background-position). Ensuite, nous fixerons l'image par rapport à la fenêtre (background-attachment), elle restera donc en place quelque soit la position de l'ascenseur. body Interpréter les effets de visuelles de chaque propriété de styles. 1/8

2 Il est nécessaire ensuite de positionner le texte par rapport à la bande noire. Nous allons créer un bloc avec un identifiant unique qui aura pour nom entry (div#entry). Il n'y aura pas de marge interne mais une marge externe de 0 en verticale qui se positionnera automatiquement par rapport à la marge de droite avec une marge fixe pour le bas de 10 et une marge fixe de gauche de 102. Il est à noter que 102px est la largeur de la bande noire. Le bloc aura une largeur fixe de 650px (width) et sa propre couleur d'arrière plan de préférence clair (#fefefe) pour contraster avec le gris de l'arrière plan principal. On applique au bloc une bordure (border) en trait plein, fine (1px). Div#entry padding: width:.. margin: 0 auto 10px 102px; background-color: border-width: border-style: Une fois la partie principale de la mise en page terminée, nous allons pouvoir nous intéresser sur la mise en forme des caractères. Dans le body, nous allons inclure comme police par défaut l'arial sansserif. La police par défaut est ici entre guillemet, préciser plusieurs familles augmente la probabilité que le visiteur disposera d'au moins de l'une d'entre elles. font-family: family: "arial",verdana,lucida,sans-serif; serif; 2/8

3 Nous traiterons ensuite de la balise de titre principal ou h1. Le titre sera de taille 2em en petite capitale (font-size) avec une barre en dessous pour marquer une rupture entre le contenu et le titre. On appliquera une bordure (border) de couleur noire en trait plein, fine (1px). La marge externe est à 0. On souhaite cependant grâce à la marge interne (padding) décaler le titre sur la gauche pour qu'il n'empiète pas sur la bande noire, 5px suffiront et le décaler un peu en hauteur de 6px (pure raison esthétique). H1. La balise de titre h2 sera définit un peu comme la balise de titre h1. Le titre aura pour taille 1.6em. La marge interne sera décalée de 5px sur la gauche comme pour h1 et de 5px en hauteur. H2... H3 suivra le modèle des titres h1 et h2. Le titre aura pour taille 1.4em. La marge interne sera décalée de 5px sur la gauche comme pour les deux autres et de 7px en hauteur. La marge externe sera à 0. H3 3/8

4 Pseudo-calss CSS : La mise en forme des liens ne concernera ici que les liens contenus dans le bloc #entry. L'attribut a:link ou lien correspondant au lien non visité, c'est à dire non présent dans le cache de votre navigateur, seront de couleur #768. Les liens visités ou a:visited, sont ceux déjà contenu dans le cache de votre navigateur. Pour les distinguer des liens non-visités, ils sont d'une couleur légèrement différente #777. Par défaut, les liens visités et non visités seront soulignés (text-decoration: underline). Il est d'usage d'utiliser des couleurs différentes pour les liens visités et non vus. Modifier la couleur d'un lien selon sa visualisation ou non est une méthode de base pour faciliter la navigation. On peut utiliser une couleur plus présente pour les nouveaux liens et une couleur moins forte pour les liens cliqués, afin d'indiquer aux lecteurs qu'ils ont été visités. Apparence lien par défaut : div#entry a.. Apparence lien visitée div#entry a:visited.. Apparence lien non visitée div#entry a:link Les paragraphes contenus dans le bloc #entry auront la même marge interne sur la gauche que les balises titre. div#entry p 4/8

5 Class CSS Nous souhaitons pour mettre en valeur les sources, les positionner autrement. Pour cela, nous allons utiliser un élément de type classe, c'est à dire que vous pouvez l'insérer dans différentes balises, ici nous l'avons inséré au sein de la balise paragraphe et nous l'appellerons cat. Ainsi dans le code html, toutes les balises paragraphes contenant un class="cat" apparaîtront, aligné à droite en petite capitale et italique, avec une taille de 0.9em. Pour que le texte ne touche pas le cadre, une marge externe de droite de 5px est préférable, accompagné d'une marge pour le bas de 5px. Appliquer au paragraphe : «d'après Verdens Gang, Oslo» p.cat. 5/8

6 Pseudo éléments css Pour embellir le texte, nous avons décidé de mettre en valeur la première lettre de chaque texte. Il existe une balise first-letter qui permet, adjoint à la balise paragraphe de ne modifier que la première lettre. Mais comme, nous ne souhaitons pas que les classes.cat subissent ces transformations, il est préférable d'utiliser une autre technique. On isolera manuellement, en la plaçant dans la balise neutre span, la première lettre en lui attribuant une classe ici.lettrine. Ainsi dans le code html, toutes les lettres contenues entre les balises suivantes, <span class="lettrine"></span>, seront affichée en gras, avec pour police par défaut Georgia serif. La taille de la lettre sera de 2em avec une marge interne de 3px pour intégrer un petit espacement entre la lettre et le paragraphe et un float:left. Float signifie que l'élément génère un bloc qui flotte à gauche. Essayez la feuille de style avec et sans float:left, vous verrez la différence. Appliquer à la première lettre de chaque paragraphe. Span.lettrine. 6/8

7 On pourrait juger que la mise en forme est terminée, mais je souhaiterais réussir à ce que le bandeau noir aille juste au bout de la page. Pour cela, j'utilise le pseudo-élément after qui sert à insérer un contenu généré après celui d'un élément, ici body. On obtient donc un body:after avec un texte généré automatiquement content: "Page crée le 14 Fev 2011 inspiré du blog de Karl Dubost" d'une taille de 1em et une marge externe de gauche de 200px. Body:after content: "Page crée le 14 Fev 2011 inspiré du blog de Karl Dubost"; font-size: size:. margin-left: left:. 7/8

8 N oublier pas de valider vos pages : xhtml STRICT et css avec les validateurs W3C Conclure sur les différents éléments css2 utilisé dans ce TP Essayer de convertir les unités de mesure utilisées en relative, tout en gardant la même apparence! Comparer l effet zoom. 8/8

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

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

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

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

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

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

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

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

TP Informatique. Personnalisation de page web HTML avec le langage CSS. Objectifs :

TP Informatique. Personnalisation de page web HTML avec le langage CSS. Objectifs : TP Informatique Personnalisation de page web HTML avec le langage CSS Objectifs : - Approfondir ses connaissances au langage HTML - Changer le style et la présentation d une page HTML grâce au langage

Plus en détail

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

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

Plus en détail

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

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

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

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

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

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

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

LE RECAP ಠ_ಠ. C est trop facile!

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

Plus en détail

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

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

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

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

Dreamweaver. b.t.s. année. communication visuelle / options mma

Dreamweaver. b.t.s. année. communication visuelle / options mma b.t.s. communication visuelle / options mma Dreamweaver Mise en page CSS [partie 3 : les BALISES DIV] 1 t e c h n o multimédia année HiÉrarchisation des contenus Cette partie utilise les inserts directs

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

Recouvrement des bordures

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

Plus en détail

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

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

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

15. GERER LES IMAGES D ARRIERE-PLAN

15. GERER LES IMAGES D ARRIERE-PLAN 52 15. GERER LES IMAGES D ARRIERE-PLAN Il y a deux méthodes pour insérer les graphiques d une page web : Ajout du graphique dans l arrière-plan d un DIV à l aide des CSS (exemple : une texture pour créer

Plus en détail

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

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

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

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

Plus en détail

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

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

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

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

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

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

Cours Web n o 3 CSS Notions avancées

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

Plus en détail

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

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

12. LES MISES EN PAGE FLUIDES (LIQUIDES ET ELASTIQUES)

12. LES MISES EN PAGE FLUIDES (LIQUIDES ET ELASTIQUES) 119 12. LES MISES EN PAGE FLUIDES (LIQUIDES ET ELASTIQUES) Pour rappel, il existe trois grands principes de mise en page 1 : Fixe le design possède une largeur fixe exprimée le plus souvent en pixels.

Plus en détail

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

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

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

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

É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

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

SPÉCIFICITÉS TECHNIQUES ING

SPÉCIFICITÉS TECHNIQUES  ING Nos Recommandations Informations obligatoires Les informations obligatoires Sender Objet Adresses de BAT XXX via L argus Champs de personnification Eviter les caractères accentués dans l objet du message

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

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

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

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

Editeur HTML. Mozilla

Editeur HTML. Mozilla Editeur HTML Mozilla Présentation Mozilla est un navigateur Web, il permet également de gérer la messagerie (Email) et d'éditer des pages au format HTML (Hyper Text Markup Language). Mozilla est basé à

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

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

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

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

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

GL/ITEC 2915F Automne 2011 L utilisation de l ordinateur et des logiciels d applications I DEVOIR # 2 A soumettre le 12 décembre 2011 avant minuit

GL/ITEC 2915F Automne 2011 L utilisation de l ordinateur et des logiciels d applications I DEVOIR # 2 A soumettre le 12 décembre 2011 avant minuit Glendon Campus Information Technology (ITEC) Objectifs GL/ITEC 2915F Automne 2011 L utilisation de l ordinateur et des logiciels d applications I DEVOIR # 2 A soumettre le 12 décembre 2011 avant minuit

Plus en détail

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

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

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

Rédaction d une fiche thématique Mutuelles étudiantes : Se grouper pour agir

Rédaction d une fiche thématique Mutuelles étudiantes : Se grouper pour agir Rédaction d une fiche thématique Mutuelles étudiantes : Se grouper pour agir Philippe Marcy (webmaster) Table des matières 1. QU EST-CE QU UNE FICHE THÉMATIQUE?... 2 2. FAIRE UNE PROPOSITION DE FICHE THÉMATIQUE...

Plus en détail

BDW1 - Programmation web - CSS

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

Plus en détail

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

TP 4 : IMAGES ET ARRIERE-PLANS

TP 4 : IMAGES ET ARRIERE-PLANS TP 4 : IMAGES ET ARRIERE-PLANS Les images dans le texte La balise img du langage Html permet d'insérer des images dans une page Html. Exemple : où fichier_image est le nom et

Plus en détail

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

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

Fonctions de base (1 ère partie) 1-2

Fonctions de base (1 ère partie) 1-2 A Enregistrer un document (pour la première fois) L enregistrement sert à conserver le travail en cours sur un support (disque dur, clé usb, ). On dit indistinctement Enregistrer ou sauvegarder un document

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

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

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

Formation Grainville la teinturiere. la- teinturiere.fr

Formation Grainville la teinturiere.  la- teinturiere.fr Formation Grainville la teinturiere www.grainville- la- teinturiere.fr Propulsé par : Un CMS en Open Source Version 1 p. 1 2 [Tapez le texte] Comment fonctionne le site? Le site permet aux internautes

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

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

Styler un formulaire avec Dreamweaver cs5. MC Benveniste

Styler un formulaire avec Dreamweaver cs5. MC Benveniste Styler un formulaire avec Dreamweaver cs5 MC Benveniste 2013 Styler un formulaire Formulaire de base Formulaire avec les css Styler un formulaire Un formulaire contient des balises : pour les étiquettes

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

Ouverture de Word Barre d outils

Ouverture de Word Barre d outils 1 Ouverture de Word Barre d outils Mise en page Tabulations Saisie d une lettre En-tête et pied de page Ajout au dictionnaire Fusion et publipostage : Lettre Fusion et publipostage : Enveloppe Fusion et

Plus en détail

Interface de Word. Règle. Volet office. Barre d outils de mise en forme Elle permet d exécuter rapidement des commandes de mise en forme du texte.

Interface de Word. Règle. Volet office. Barre d outils de mise en forme Elle permet d exécuter rapidement des commandes de mise en forme du texte. Interface de Word L écran de Word est constitué de différents éléments qui sont les suivants : Barre de titre Barre de menu Point d insertion Barre d outils de mise en forme Règle Marge Barre d outils

Plus en détail

Editeur de texte. Web4 v1.00. Editeur de texte

Editeur de texte. Web4 v1.00. Editeur de texte Editeur de texte 1 TABLE DES MATIÈRES Editeur de texte... 1 Utilisation de l éditeur de texte... 3 Raccourcis clavier :... 3 Interface... 3 Liste des fonctionnalités... 4 Insérer et éditer une image...

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

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

<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

M1 / VP8 CREATION DE FEUILLES DE STYLE

M1 / VP8 CREATION DE FEUILLES DE STYLE M1 / VP8 CREATION DE FEUILLES DE STYLE Master 1 [Tribet Hervé] 2012 Styles sous DW8 Les styles HTML sont des mises en forme complexes regroupées sous une appelation ; on peut créer des styles HTML avec

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

CONNEXION ACCUEIL PERSONNALISER. puis on arrive sur le tableau de bord. du tableau de bord. Que voit on? modifications rapide -page d'accueil

CONNEXION ACCUEIL PERSONNALISER. puis on arrive sur le tableau de bord. du tableau de bord. Que voit on? modifications rapide -page d'accueil CONNEXION puis on arrive sur le tableau de bord ACCUEIL du tableau de bord Que voit on? modifications rapide -page d'accueil ajouter nouvelle page afficher votre site une partie pour éditer un brouillon

Plus en détail

<div></div> STUDIO - TI6 TABLE DES MATIÈRES NOUVELLE MATIÈRE. 1. Donner une «class» à une <div> Sujet

<div></div> STUDIO - TI6 TABLE DES MATIÈRES NOUVELLE MATIÈRE. 1. Donner une «class» à une <div> Sujet STUDIO - TI6 PASCAL PLACEMAN Sujet HTML - CSS révisions TABLE DES MATIÈRES Nouvelle matière: 1. Donner une «class» à une 2. Créer une div en plein-écran 3. Gérer des colonnes 4. Mettre une video

Plus en détail

Voir le contenu des documents sur les pages suivantes.

Voir le contenu des documents sur les pages suivantes. Voir le contenu des documents sur les pages suivantes. INSERTION AUDIOS DANS UN SITE Ouvrir video.html avec bluefish Enregistrer une copie, la nommer audios.html Supprimer ce qui se trouve entre la balise

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

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

1 - travail en pleine page du navigateur

1 - travail en pleine page du navigateur Utilisation du bandeau Fckeditor «TEXTE ENRICHI» dans les pages du site internet Version 1 du 7 avril 2009 Bandeau de l éditeur Fckeditor 1 - travail en pleine page du navigateur Pour faciliter le travail

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

Guide Utilisation HTML et Microsoft FrontPage

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

Plus en détail

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

Introduction aux technologies WEB. Pr. Hajar IGUER

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

Plus en détail

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

Microsann Version 1. Cliquer sur un des deux boutons pour augmenter ou diminuer la taille de la police

Microsann Version 1. Cliquer sur un des deux boutons pour augmenter ou diminuer la taille de la police GÉNÉRALITÉS : Cet exposé s appuie sur Excel 2007. Après une saisie de texte et de données numériques dans le classeur Excel, il faut éventuellement changer la police des caractères, mettre en italique,

Plus en détail