Réussir son site web avec XHTML et CSS

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "Réussir son site web avec XHTML et CSS"

Transcription

1 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 en RGB Le fond...3 La couleur de fond...3 L image de fond Les pseudo-formats...6 Nous allons dans cette leçon nous intéresser à la couleur et aux images de fond. 1. La couleur du texte Le langage CSS offre un large choix de couleurs. Les couleurs déterminent l ambiance de votre site et forment son identité visuelle. La propriété permettant de changer la couleur du texte est color. Il existe plusieurs façons d indiquer une couleur. Couleur du texte color un nom # rgb(r,g,b) Indiquer la couleur avec un nom de couleur Indiquer la couleur en hexadécimal Indiquer la couleur en RGB Indiquer la couleur du texte avec un nom C est la technique la plus facile mais le choix est limité à 16 couleurs. Couleur Traduction Couleur Traduction white blanc yellow jaune silver argent (gris léger) olive olive (jaune foncé) gray gris (gris foncé) aqua bleu clair black noir blue bleu red rouge navy marine (bleu foncé) maroon marron fuchsia fuchsia (rose) lime citron vert (vert clair) purple violet green vert teal bleu-vert Vous allez mettre en violet les titres de niveau 2. h2 color: purple; Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 08 p.1/6

2 Indiquer la couleur du texte en hexadécimal Pour indiquer une couleur plus précise, il va falloir utiliser une autre technique. Une des possibilités consiste à écrire la valeur hexadécimale de la couleur. En informatique, on peut obtenir une couleur en mélangeant du rouge, du vert et du bleu en précisant les proportions de chacune de ces composantes. Un nombre écrit en hexadécimal est écrit à l aide de 16 symboles : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F À retenir Une couleur écrite en hexadécimal se décompose en quatre parties : # (dièse) (quantité de rouge) (quantité de vert) (quantité de bleu) Exemple : #C0670F Vous allez changer la couleur des paragraphes en gris-vert. p color: #36563A; Indiquer la couleur en RGB RGB est l abréviation de "Red, Green, Blue", soit "Rouge, Vert, Bleu". Cette fois, la quantité de chaque composante est indiquée à l aide d un nombre variant de 0 (rien) à 255 (tout). À retenir Une propriété pour une couleur écrite en RGB s écrit de la façon suivante : color: rgb(,,); un nombre de 0 à 255. Vous allez changer la couleur des liens en violet. a color: rgb(168, 104, 155); Remarque Pour déterminer les composantes d une couleur, vous pouvez utiliser un logiciel de dessin comme Paint (RGB) ou Photoshop (RGB, hexadecimal,) en trouvant la couleur que vous souhaitez et en regardant son code dans la palette de couleurs. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 08 p.2/6

3 2. Le fond Nous allons voir comment modifier la couleur de fond ou comment mettre une image de fond. Le fond ne désigne pas forcément toujours le fond de toute la page, on peut aussi changer la couleur de fond des paragraphes ou des titres, ce qui revient à surligner. La couleur de fond La propriété backgroud-color vous permet de modifier la couleur de fond d un élément. Pour la valeur, cela fonctionne exactement comme avec la propriété color. Couleur du fond background-color un nom # rgb(r,g,b) Indiquer la couleur avec un nom de couleur Indiquer la couleur en hexadécimal Indiquer la couleur en RGB La couleur de fond de la page Pour appliquer une couleur de fond à la page, il suffit de modifier le style de la balise qui englobe tout le contenu de la page, c est-à-dire la balise <>. Modifiez dans Notepad++ la feuille de style style.css en modifiant le code suivant : background-color: #D8A459; Le surlignement Si on applique la propriété background-color à une autre balise que <>, seul le texte à l intérieur de cette balise prendra la couleur de fond. Vous allez surligner les titres de niveau 2. h2 background-color: #EDD7B8; L image de fond Insérer une image de fond La propriété permettant d insérer une image est background-image. La valeur comportera le chemin vers le fichier image. L image de fond peut être du type JPEG, GIF, PNG, Insérer une image de fond propriété background-image url("image") L adresse de l image de fond indiquée dans l url est relative à la position du fichier CSS. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 08 p.3/6

4 Vous allez modifier l arrière-plan de vos pages en y insérant une image. Créez dans le dossier Site-nice/images un sous dossier fonds et copiez toutes les images du dossier ressources 08. Modifiez dans Notepad++ la feuille de style style.css. Supprimer la propriété de couleur de l arrière-plan (background-color). Rajouter le code suivant : background-image: url("images/fonds/fond01.jpg"); Essayez ensuite avec les images suivantes : fond02.jpg ; default.jpg ; etoiles.gif puis briques.jpg Remarque Bien choisir son image de fond Le plus souvent, une image de fond est une image qui peut être répétée. Une bonne image est donc une image relativement petite qui sera répétée. En règle générale, n utilisez pas une image dont le poids excède 60 Ko. Fixer l image de fond La propriété permettant d insérer une image est background-image. La valeur comportera le chemin vers le fichier image. L image de fond peut être du type JPEG, GIF, PNG, Lorsque vous êtes sur page assez longue et que vous descendez dans celle-ci, le fond bouge en même temps que le texte. Il existe une technique permettant de fixer l image de fond. Il s agit de la propriété background-attachment. Fixer l image du fond background-attachment fixed scroll L image de fond sera fixée L image de fond défilera avec le texte (valeur par défaut) Vous allez fixer l image d arrière-plan de vos pages. background-attachment: fixed; Répétition de l image de fond Par défaut, l image de fond se répète à l infini en mosaïque. Il est possible de limiter la répétition de l image grâce à la propriété background-repeat. Répéter l image de fond background-repeat no-repeat repeat-x repeat-y repeat Le fond ne se répétera pas Le fond se répétera uniquement horizontalement, sur la première ligne Le fond se répétera uniquement verticalement, sur la première colonne Le fond se répétera verticalement et horizontalement à l infini (valeur par défaut) Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 08 p.4/6

5 Vous allez changer l arrière-plan de vos pages en répétant certaines images. Modifiez dans Notepad++ la feuille de style style.css. Supprimer la propriété qui fixe l arrière-plan (background-attachment). Rajouter le code suivant : background-image: url("images/fonds/background1.gif"); background-repeat: repeat-y; Essayez ensuite avec l image background2.png en la répétant horizontalement. Positionner l image de fond Si vous souhaitez placer le fond à un endroit précis, il vous faudra recourir à la propriété backgroundposition. Il faut donner 2 valeurs successivement à cette propriété : la position par rapport à la gauche de l écran, et celle par rapport au haut de l écran. Ces valeurs peuvent être décrites soit en pixels, soit à l aide de mots. Positionner l image de fond background-position px px un mot Les valeurs en pixels Top ; middle ; bottom ; left ; center ; right En utilisant des pixels Vous souhaitez mettre placez votre fond 300 pixels plus à droite et 350 pixels plus bas par rapport au coin en haut à gauche de la page.. Modifiez dans Notepad++ la feuille de style style.css. Modifier le code suivant : background-image: url("images/fonds/galets.gif"); background-repeat: no-repeat; background-position: 300px 350px; En utilisant des mots Les valeurs en pixels permettent d être précis. Toutefois, si vous souhaitez centrer votre image ou autre, tout dépendra de la taille de l écran de vos visiteurs. On utilise alors des valeurs sous forme de mots en anglais. Les valeurs possibles : - top : en haut ; - middle : centré verticalement ; - bottom : en bas - left : à gauche ; - center : centré horizontalement ; - right : à droite Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 08 p.5/6

6 Vous allez centrer dans la page l image de fond. Modifiez dans Notepad++ le code suivant de la feuille de style style.css. background-image: url("images/fonds/galets.gif"); background-repeat: no-repeat; background-position: top right; 3. Les pseudo-formats Jusqu ici, nous avons appliqué nos styles CSS à des balises précises. Pour dynamiser la page, on a la possibilité d utiliser des pseudo-formats ; Ceux-ci permettent d appliquer un style sur une balise dans certaines conditions, comme lors du survol avec la souris, lors d un clic, etc. Pseudo-format balise:pseudo-format Le pseudo-format :hover permet d appliquer un style lorsque la souris pointe sur un élément. Le pseudo-format :active permet d appliquer un style lorsque l on clique sur un lien. Le pseudo-format :visited permet d appliquer un style pour les liens déjà visités. Vous allez modifier l apparence des liens au survol, au clic et lorsqu ils ont déjà été visités. Modifiez dans Notepad++ le code de la feuille de style style.css. a color: green; a:hover color: red; background-color: #CFEFF5; a:active color: red; background-color: lime; a:visited color: blue; Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 08 p.6/6

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

<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

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

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

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

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

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

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

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

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

> 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

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

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

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

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

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

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

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

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

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

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

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

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

TROUVER LES BONNES COULEURS AVEC PALETTON.COM

TROUVER LES BONNES COULEURS AVEC PALETTON.COM AVEC PALETTON.COM (Mis à jour le 11/08/2014) Page 1 / 14 Paletton.com est un outil en ligne pour graphiste qui permet de trouver les bonnes combinaisons de couleurs à adopter pour son Web Design. Il s'agit

Plus en détail

Session 2 : Game Design-Infographie

Session 2 : Game Design-Infographie Session 2 : Game Design-Infographie Distribuer le document de «Game Design» qui décrit le jeu à créer. Le Game Design Document (en français : document de design ou document conceptuel de jeu vidéo, parfois

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

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

8 Puces et indentations

8 Puces et indentations 8 Puces et indentations Une palette «liste» proposant des mises en forme est à disposition dans l espace privé, toutefois voilà le codage à faire si vous souhaitez indenter le texte différemment ou l indenter

Plus en détail

Traitement de photos (Photoshop 7) Par : Patrick Kenny

Traitement de photos (Photoshop 7) Par : Patrick Kenny Traitement de photos (Photoshop 7) Par : Patrick Kenny 23 mars 2005 Table des matières Création d un nouveau document :... 3 Activer les barres d outils :... 4 Barre d outils :... 5-10 Redimensionner une

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 04 Réussir son site web avec XHTML et CSS Insérer des images 1. Les formats d image du Web...1 Les JPEG...1 Les PNG...1 Les GIF...1 Tableau récapitulatif :...2 2. Insérer une image dans une page...2

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

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

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

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

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

Créer un bouton pour le Web

Créer un bouton pour le Web Lorsqu'un internaute place le pointeur de sa souris sur un dessin dans une page Web, ce pointeur entre physiquement dans la zone de l'écran occupée par le graphique. L'internaute peut alors soit cliquer

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

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

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

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

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

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

Chapitre 13 Corrections des couleurs

Chapitre 13 Corrections des couleurs 1 1 9 9 7 7 2 2 1 9 7 Objectif.............................. 162 La répartition des couleurs..................... 162 Réglage du gamma dans le réglage Niveaux............. 162 Réglage du gamma dans le

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

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

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

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

Les standards du web

Les standards du web COURS - Partie 1 Le HTML5 et le CSS3, petits frères du HTML (ou XHTML) et du CSS viennent, alors que l ère actuelle est à l interconnexion et aux média multiples. Dans le but de satisfaire la demande grandissante

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

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

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

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

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

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

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

Plus en détail

introduction 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

Session 2 Introduction a Scratch

Session 2 Introduction a Scratch Session 2 Introduction a Scratch Résumé des activités de la session Repérage dans le plan système de coordonnées de Scratch (~15 minutes) Exploration de l interface Scratch (~5 minutes) Réaliser le dessin

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

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

Guide d utilisation FCK Editor

Guide d utilisation FCK Editor Guide d utilisation FCK Editor 1 Sommaire FCK Editor : introduction... 2 La mise en forme... 3 Agrandir la fenêtre de saisie... 3 Copier/Coller un contenu existant... 3 L utilisation des puces... 4 Création

Plus en détail

Objectif général de la séquence : - Connaître les couleurs

Objectif général de la séquence : - Connaître les couleurs Mise en œuvre de la Séance n 1.. / x Niveau : Cycles 2 Objectif général de la séquence : - Connaître les couleurs - Demander à une personne ses goûts - Exprimer ses goûts Compétences du socle commun travaillées

Plus en détail

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

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

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

Des liens sympas. ... ce qui aura pour effet d'annuler le soulignement. Vos liens ne seront alors plus soulignés.

Des liens sympas. ... ce qui aura pour effet d'annuler le soulignement. Vos liens ne seront alors plus soulignés. Les pseudo-formats Nous venons de passer en revue un grand nombre de propriétés CSS dans les chapitres précédents. Vous savez maintenant modifier la taille du texte, sa police, sa couleur etc etc... Nous

Plus en détail

Open Office Texte, Classeur et Présentation / «Gallery» d'images et de sons

Open Office Texte, Classeur et Présentation / «Gallery» d'images et de sons Open Office Texte, Classeur et Présentation / «Gallery» d'images et de sons Aperçu de la «Gallery» d'images et de sons d'open Office, détail de la barre d'outils «Image» et création de thèmes d'images

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

Test Test Test Test Test

Test Test Test Test Test Mise en forme d un document HTML Niveaux de titre Le langage HTML définit 6 niveaux de titre (en anglais heading), afin de définir une structuration hiérarchique des paragraphes dans un texte : Balise

Plus en détail

Infos : Les images pour le site

Infos : Les images pour le site Infos : Les images pour le site Objectifs : Pour compléter cette formation, nous vous proposons quelques solutions simples, pour les images (logos, photos, ) qui seront mises sur votre site, avec le logiciel

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

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

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

Technologies du Web: HTML

Technologies du Web: HTML Technologies du Web: HTML TP 2 : Structure générale et texte Objectifs : Dans ce premier TP, les balises de bases (h1,p,br...) ainsi que leurs principaux attributs sont abordés afin que nous soyons tout

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

Arbres Mathématiques Informatique et Navigateurs Internet

Arbres Mathématiques Informatique et Navigateurs Internet Arbres Mathématiques Informatique et Navigateurs Internet Jacques Duma Présentation de la structure d arbre sur des exemples qui montrent où elle intervient en mathématique et en informatique. Application

Plus en détail

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

Présentation de PowerPoint PRÉSENTATION DE POWERPOINT

Présentation de PowerPoint PRÉSENTATION DE POWERPOINT Présentation de PowerPoint PowerPoint est un logiciel permettant de réaliser des présentations dynamiques, pouvant servir à de multiples applications. Ex : Ce logiciel est utilisé par les orateurs lors

Plus en détail

Faire des zones sensibles dans une image : image mappée

Faire des zones sensibles dans une image : image mappée Insérer une image Avec l ADSL la vitesse de transfert s est considérablement améliorée et l utilisation des images, des animations et du son a littéralement explosé. Malgré tout, les utilisateurs ne doivent

Plus en détail

SITE INTERNET DU LYCÉE

SITE INTERNET DU LYCÉE LPR DU HAUT FOREZ VERRIERES EN FOREZ SITE INTERNET DU LYCÉE MODE D EMPLOI POUR L ECRITURE D ARTICLES Mode d emploi Utilisation de l interface privée des rédacteurs du site Internet du lycée Le nouveau

Plus en détail

GIMP POUR LE GRAPHISME

GIMP POUR LE GRAPHISME Création et multimédia GIMP POUR LE GRAPHISME Gimp est un logiciel de retouche d'image gratuit. Il est composé de plusieurs espaces de travail. Source : 70 ateliers pour Gimp, édité par Micro application

Plus en détail

Tutoriel Karaoke. La synchronisation consiste à définir un temps de début et de fin pour lequel les lignes seront visibles.

Tutoriel Karaoke. La synchronisation consiste à définir un temps de début et de fin pour lequel les lignes seront visibles. Tutoriel Karaoke Partie 2 : La synchronisation d un karaoké Note : Vous pouvez aussi rencontrer les termes : «time», ou encore «timing» qui sont exactement la même chose que la synchronisation mais dit

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

Modification d image avec Gimp

Modification d image avec Gimp Modification d image avec Gimp *Il est à noter que l explication détaillée des outils encerclés en rouge se retrouve dans la section Créer des images avec Gimp, car cela allègera cette section dédiée à

Plus en détail

SCRIBUS : PRESENTATION ET MODE D EMPLOI

SCRIBUS : PRESENTATION ET MODE D EMPLOI 1. J IMPORTE UNE IMAGE Je crée un cadre d image 3 possibilités : - Dans le menu insérer, je choisis cadre d image - Dans la barre des icônes, je choisis le carré avec un dessin - En me positionnant sur

Plus en détail

Spécifications Techniques Formats display SeLoger

Spécifications Techniques Formats display SeLoger Spécifications Techniques Formats display SeLoger - 2017 Formats Desktop Pavé Grand angle Skyscraper Habillage Formats Mobile Banner Interstitiel - Smartphones - Tablettes Formats in-mail Pavé DELAIS DE

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

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

GUIDE UTILISATEUR WIKIMANCHE

GUIDE UTILISATEUR WIKIMANCHE GUIDE UTILISATEUR WIKIMANCHE I. LA CONSULTATION a. ENTRER SUR WIKIMANCHE Ouvrir le navigateur Internet (Internet Explorer, Mozilla Firefix, etc..) Tapez www.wikimanche.fr dans la barre d adresse internet

Plus en détail

Cours N 6 Le langage HTML

Cours N 6 Le langage HTML Cours 6: Technologies web - le langage HTML Cours N 6 Le langage HTML Concepts de Base 1. Généralités HTML (pour HyperText Markup Language) est un langage de description de documents hypermédia. Un document

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

Charte graphique 09/17

Charte graphique 09/17 Charte graphique 9/17 Logotype Fédération Française de Karaté VERSIONS COULEUR La version couleur du logotype est à privilégier. LOGOTYPE VERTICAL LOGOTYPE HORIZONTAL Le logotype Fédération Française de

Plus en détail

Pardon pour mon étourderie. J ai cru que j avais omis de rédiger le supposé CR n 21 du 29 avril. Mais le 29 nous n avions pas cours.

Pardon pour mon étourderie. J ai cru que j avais omis de rédiger le supposé CR n 21 du 29 avril. Mais le 29 nous n avions pas cours. A corriger : cours n 21 Cours 21 s Voir le contenu des documents sur les pages suivantes. Pardon pour mon étourderie. J ai cru que j avais omis de rédiger le supposé CR n 21 du 29 avril. Mais le 29 nous

Plus en détail

Chapitre 10 Éclaircir ou assombrir une photographie en modifiant le point noir et le point blanc

Chapitre 10 Éclaircir ou assombrir une photographie en modifiant le point noir et le point blanc 1 1 9 9 7 7 2 2 Chapitre 1 Éclaircir ou assombrir une photographie en modifiant le point noir et le point blanc Objectif d utilisation........................ 13 Réglage Niveaux..........................

Plus en détail

Formation Interwrite Workspace. Fonctions du programme

Formation Interwrite Workspace. Fonctions du programme Formation Interwrite Workspace Lancement et réglages Lancer le programme Fonctions du programme Déplacer la barre d outils sur le bureau, adapter sa forme Modifier les réglages par défaut de la barre d

Plus en détail

Dreamweaver 2.0. GUIDE D UTILISATION POUR Dreamweaver 2.0. Logiciel de création de pages HTML. Page 1

Dreamweaver 2.0. GUIDE D UTILISATION POUR Dreamweaver 2.0. Logiciel de création de pages HTML. Page 1 1 GUIDE D UTILISATION POUR Dreamweaver 2.0 Logiciel de création de pages HTML SOMMAIRE Sommaire 1 Démarrer avec Dreamweaver 2.0 2 Le texte avec Dreamweaver 2.0 4 Insérer un lien hypertexte 4 Choisir les

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