Réussir son site web avec XHTML et CSS

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

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

Transcription

1 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 Appliquer un style à des balises...3 Appliquer un style à une balise...3 Appliquer un style à plusieurs balises...4 Appliquer un style à des balises imbriquées Appliquer un style à certaines balises...4 id : un identifiant unique...4 class : un identifiant réutilisable Les commentaires en CSS...6 Le CSS, pour Cascading Style Sheets (Feuilles de style en cascade), n'est pas plus compliqué que le XHTML, il est juste différent car il sert à réaliser la présentation de votre page web. On dit "Feuille de style" car en règle générale, on écrit le code CSS dans un fichier à part (avec l'extension.css). C'est un fichier dans lequel on écrit l'apparence que notre site doit avoir : la couleur et la police du texte, la taille des titres, la position des menus, la couleur ou l'image de fond 1. Insérer du code CSS On peut écrire du code CSS à 3 endroits différents, selon ce qu'on préfère : Méthode A : dans un fichier.css (méthode recommandée et utilisée dans ce cours) Méthode B : dans l'en-tête du fichier XHTML Méthode C : dans les balises (non recommandé) Dans un fichier.css Le design d'un site évolue toujours au fil du temps. Le problème, lorsqu'on n'utilise pas de feuilles de style, c'est qu'il faut reprendre toutes les pages html une à une pour modifier une police de caractère ou une couleur de fond... La technique la plus courante et la plus conseillée consiste à créer un fichier spécial, avec l extension.css, pour placer le code CSS. Ce fichier, appelé feuille de style, centralise toute la mise en forme du site. En cas de changement d un paramètre dans cette feuille, la modification est répercutée automatiquement dans toutes les pages XHTML reliées à cette feuille de style. Ouvrez le logiciel Notepad++ Activez la coloration CSS en allant dans le menu Langage > CSS Vous allez changer la couleur de fond de toutes vos pages et centrer tous les paragraphes. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 06 p.1/6

2 Tapez le code CSS suivant : body background-color: #BEDDE4; p text-align: center; Enregistrez le fichier dans le dossier Site-nice en le nommant style.css et observez vos pages dans un navigateur. Vous observez que rien ne se passe. En effet, maintenant que le fichier CSS existe, il va falloir modifier tous les fichiers XHTML pour leur dire d utiliser le fichier style.css pour leur mise en forme. On doit pour cela rajouter la balise <link /> entre les balises <head> et </head>. Attacher un fichier CSS à un fichier XHTML <link rel="stylesheet" media="screen" type="text/css" title="titre" href="style.css" /> title : c'est le nom que vous donnez à votre feuille de style (mettez ce que vous voulez) href : c'est l'emplacement où se trouve votre feuille de style sous forme de lien relatif. SITE-NICE index contact style images pages banniere nice01 carnaval gastronomie histoire localisation -climat Vous allez attacher le fichier style.css au fichier index.html. Ouvrez dans Notepad++ le fichier index.html Ajouter entre les balises <head> le code suivant : <link rel="stylesheet" media="screen" type="text/css" title="mon style" href="style.css" /> Enregistrez la page et observez le résultat dans un navigateur. Retournez dans le fichier style.css et changez la valeur de Background-color en #EEAFC2 et la valeur de la balise p en right. Enregistrez le fichier puis observez les changements dans votre navigateur. Attachez le fichier style.css aux fichiers contact.html, carnaval.html, gastronomie.html, histoire.html et localisation-climat.html Enregistrez les pages et observez le résultat dans un navigateur. Retournez dans le fichier style.css et changez la valeur de background-color en #2f8bbc et la valeur de la balise p en center. Enregistrez le fichier puis observez les changements dans votre navigateur. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 06 p.2/6

3 Dans l en-tête du fichier XHTML (pour information) Une autre technique consiste à placer le code CSS à l intérieur même du fichier XHTML. Il devra être placé entre des balises spéciales <style></style> placées entre les balises <head></head>. Insérer du code CSS dans le fichier CSS <head> <title>exemple de CSS dans le header</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <style type="text/css"> /* code CSS ici */ </style> </head> À retenir Il est préférable de créer un fichier.css spécialement pour le code CSS. Cela évite de dupliquer le même code CSS dans plusieurs fichiers XHTML. Vous pourrez faire changer le design du site en un clin d'œil. De plus, le fichier ne sera téléchargé qu'une seule fois pour toutes les pages de votre site, ce qui allègera la taille des fichiers.html et rendra donc votre site plus rapide! 2. Appliquer un style à des balises Dans un CSS, on trouve 3 éléments différents : Des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence. Par exemple, si on veut modifier l'apparence de tous les titres <h1>, je dois écrire h1. Des propriétés CSS : les "effets de style" de la page sont rangés dans des propriétés. Il y a par exemple la propriété color qui permet d'indiquer la couleur du texte, font-size qui permet d'indiquer la taille du texte,... Il y a beaucoup de propriétés CSS et il ne faut hésiter à utiliser un aide-mémoire. Les valeurs : à chaque propriété CSS on doit indiquer une valeur. Par exemple, pour la couleur, il faut indiquer le nom de la couleur, pour la taille, il faut indiquer quelle taille on veut,... Chaque valeur est fermée par un point-virgule ; Appliquer un style à une balise Appliquer un style à une balise balise Vous souhaitez aligner à gauche et mettre en rouge tous les titres de niveau 1. Ouvrez dans Notepad++ la feuille de style style.css Pour aligner à gauche et mettre en rouge les titres <h1> seulement, ajoutez à votre feuille de style le code suivant : h1 text-align: left; color: #b3181c; Enregistrez la feuille de style style.css et observez dans votre navigateur et après actualisation les changements dans vos pages. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 06 p.3/6

4 Appliquer un style à plusieurs balises Il est possible d appliquer un même style à plusieurs balises à la fois. Pour faire cela, il suffit de séparer les noms des balises par des virgules. Appliquer un style à plusieurs balises balise1, balise2, balise3 Vous souhaitez mettre en forme les titres de niveau 2 comme les titres de niveau 1. Modifiez votre feuille de style style.css de la façon suivante : h1, h2 text-align: left; color: #b3181c; changements dans vos pages. Appliquer un style à des balises imbriquées Le CSS permet de définir des règles encore plus précises. Vous pouvez appliquer un style à des balises imbriquées (balise imbriquée = une balise qui en contient une autre). Pour faire cela, il suffit de séparer le nom des balises par un espace. Appliquer un style à des balises imbriquées balisea baliseb Cela signifie que le style sera appliqué au contenu de la baliseb située dans la balisea. 3. Appliquer un style à certaines balises Vous avez vu comment changer l apparence de toutes les balises d un même type (par exemple, tous les paragraphes). Comment faire pour changer l apparence, par exemple, de certains paragraphes en particulier ou de certains titres seulement? Pour appliquer un style CSS à une balise précise, il faut identifier ces balises en leur donnant un nom. On a la possibilité pour faire cela d'utiliser des attributs spéciaux qui fonctionnent sur toutes les balises : L'attribut class L'attribut id id : un identifiant unique L attribut id sert à donner un nom unique dans toute la page à une balise. Par conséquent, vous ne devez pas donner deux fois le même nom à deux balises d une même page. Donner un nom unique à une balise (XHTML) <balise id="nom_balise"> Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 06 p.4/6

5 Dans la feuille de style, le symbole dièse # permet d indiquer que l on parle d une balise ayant un nom précis (identifiée par l attribut id). Appliquer un style à une balise nommée par l attribut id (CSS) #nom_balise /* Propriétés CSS ici */ Vous souhaitez aligner à droite la barre de navigation sur toutes les pages. Pour cela, vous nommerez ce paragraphe puis vous lui affecterez un style particulier : Modifiez dans Notepad++ tous les fichiers en nommant le paragraphe contenant la barre de navigation barre-navigation : Enregistrez la page. <p id="barre-navigation"> <a href="index.html">accueil</a> [ ] </p> Modifiez votre feuille de style style.css en rajoutant le style : #barre-navigation text-align: right; color: white; changements dans vos pages. class : un identifiant réutilisable L attribut class sert également à donner un nom à la différence près qu on peut donner le même nom à autant de balises que l on veut. Donner un nom réutilisable à une balise (XHTML) <balise class="nom_balise"> Dans la feuille de style, le point. permet d indiquer que l on parle d une balise ayant un nom précis (identifiée par l attribut class). Appliquer un style à une balise nommée par l attribut class (CSS).nom_balise /* Propriétés CSS ici */ Vous souhaitez écrire en gras et en blanc deux phrases de la page d accueil. Pour cela, vous nommerez ces deux parties puis vous leur affecterez le style voulu : Modifiez dans Notepad++ le fichier index.html en nommant le paragraphe Vous y trouverez [ ] de Nice et le paragraphe Vous pourrez également [ ] en cliquant ici! accroche : <p class="accroche">vous y trouverez quelques informations sur la ville de Nice :</p> <p class="accroche">vous pourrez également nous contacter pour nous faire part de toutes vos remarques.</p> Enregistrez la page. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 06 p.5/6

6 Modifiez votre feuille de style style.css en rajoutant le style :.accroche font-weight: bold; color: white; changements dans votre page index.html. Remarque Remarque Il est conseillé de nommer les balises en utilisant dans vos attributs id et class des noms clairs et intelligibles. N oubliez pas qu un nom ne doit pas comporter d accent ou d espace (utilisez le trait-bas _) et privilégiez l utilisation de lettres minuscules. Plusieurs class pour une balise Il est possible de donner plusieurs class à une même balise. Il vous suffit pour cela de séparer les noms des classes par un espace dans le code XHTML. Ex. <balise class="classe1 classe2"> 4. Les commentaires en CSS Il est possible, comme en XHTML, d insérer des commentaires. Les commentaires ne seront pas affichés, ils servent simplement à indiquer des informations pour vous, par exemple pour vous y retrouver dans un long fichier CSS. Il faut utiliser /* pour indiquer le début d un commentaire et */ pour en indiquer la fin. Commentaire CSS /* commentaire */ Modifiez votre feuille de style style.css en rajoutant avant le style.accroche le commentaire suivant : /* Ceci est un identifiant réutilisable */ changements dans votre page index.html (aucun normalement). Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 06 p.6/6

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 03 Réussir son site web avec XHTML et CSS Créer des liens 1. Insérer un lien vers une autre page...1 Création d un lien simple...1 Ajout d une infobulle...2 Un lien pour envoyer un email...2 2. Les

Plus en détail

Les CSS et la gestion des différentes polices La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS.

Les CSS et la gestion des différentes polices La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS. La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS. font-family: Famille de police font-size: Taille de votre police de caratère font-style: Le style de police. Gras,

Plus en détail

HTML CSS Fiche numéro 6

HTML CSS Fiche numéro 6 HTML CSS Fiche numéro 6 Sources : https://openclassrooms.com/ L'ancien site 2minuteslearning.fr qui à malheureusement disparu https://www.vectorskin.com/balises-html5/ Mettre en place le CSS Dans un premier

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 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

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

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

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

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

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

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

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

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

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

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

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

Carrefour de l information Université de Sherbrooke. Dreamweaver MX 2004 Deuxième partie Savoir améliorer ses sites Web

Carrefour de l information Université de Sherbrooke. Dreamweaver MX 2004 Deuxième partie Savoir améliorer ses sites Web Carrefour de l information Université de Sherbrooke Dreamweaver MX 2004 Deuxième partie Savoir améliorer ses sites Web Par : Josée Martin (hiver 2005) Édition revue et augmentée par : Marc-André Dulude

Plus en détail

CHARGÉE DE COURS : N. VANASSCHE

CHARGÉE DE COURS : N. VANASSCHE CHARGÉE DE COURS : N. VANASSCHE WWW.NATHALIEVANASSCHE.BE DE NOMBREUSES PERSONNES CONFONDENT (À TORT) INTERNET ET LE WEB. le Web fait partie d'internet. Internet est donc un grand ensemble qui comprend,

Plus en détail

HTML : exercices. 2. Enregistrez le fichier sous le nom «test.html» 3. A l aide d un navigateur, ouvrez le fichier que vous venez d écrire

HTML : exercices. 2. Enregistrez le fichier sous le nom «test.html» 3. A l aide d un navigateur, ouvrez le fichier que vous venez d écrire HTML : exercices Exercice 1 : Affichage de document HTML 1. Ouvrez le bloc-note, copiez-y le document suivant : mon premier document Il fait beau .

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

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

- JE ME PERFECTIONNE - 29 Janvier 2014 BUREAUTIQUE ET TRAITEMENT DE TEXTE

- JE ME PERFECTIONNE - 29 Janvier 2014 BUREAUTIQUE ET TRAITEMENT DE TEXTE - JE ME PERFECTIONNE - 29 Janvier 2014 BUREAUTIQUE ET TRAITEMENT DE TEXTE OBJECTIF DE LA SEANCE - Réaliser un communiqué de presse - Approfondir sa pratique du traitement de texte afin d être autonome

Plus en détail

Ajouter des éléments spéciaux à un document

Ajouter des éléments spéciaux à un document Module F Ajouter des éléments spéciaux à un document CAS Valérie Milou, directrice commerciale chez Concept plein air, vous demande de compléter un rapport recommandant la mise en œuvre de mesures écologiques

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

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

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

Création de sites Web ~ Module 1 Introduction HTML - CSS

Création de sites Web ~ Module 1 Introduction HTML - CSS Création de sites Web ~ Module 1 Introduction HTML - CSS 1 Introduction : HTML, pour HyperText Markup Language, est le langage conçu pour représenter les pages Internet. C est un langage de balises permettant

Plus en détail

ISN S8: Les pages web

ISN S8: Les pages web Objectif : L'objectif de ce TP est de réaliser une page HTML 1. Introduction : HTML et CSS : deux langages pour créer un site web Pour créer un site web, on doit donner des instructions à l'ordinateur.

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

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

RÉDIGER UN TEXTE SUR WORD TRAVAILLER LA MISE EN FORME

RÉDIGER UN TEXTE SUR WORD TRAVAILLER LA MISE EN FORME RÉDIGER UN TEXTE SUR WORD TRAVAILLER LA MISE EN FORME ACTIVITÉ 1 DÉCOUVRIR L ACCUEIL A Premiers pas sur Word 1 Pour ouvrir un document Word, quelle icône utilisez-vous? 2 Que pouvez-vous faire sur Word

Plus en détail

TP n 1 : Initiation au langage HTML

TP n 1 : Initiation au langage HTML Atelier informatique-langage HTML TP n 1 : Initiation au langage HTML 1. Rappels de quelques généralités - Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant un ensemble de convention

Plus en détail

STUDIO - TI6 TABLE DES MATIÈRES NOUVELLE MATIÈRE. 1. Donner une «class» à une

<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

Contrôle final Développement Web

Contrôle final Développement Web Université de Batna 3 ème année Licence Pro IIM Faculté des sciences Département d informatique 2015/2016 Durée : 1h30 Le 30/05/2016 Question de cours (4.5 pts) Contrôle final Développement Web 1. Le cycle

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

Dreamweaver Image survolée

Dreamweaver Image survolée Dreamweaver Image survolée Image retournée (rollover) Un lien peut également être une surprise! Par exemple, vous passez votre souris et l image s illumine, la couleur change, l image se transforme. Comment

Plus en détail

GUIDE Word (version intermédiaire) Version 2010 Table des matières

GUIDE Word (version intermédiaire) Version 2010 Table des matières GUIDE Word (version intermédiaire) Version 2010 Table des matières 1. Les rubans... 2 2. Pagination... 4 3. En-tête et pied de page... 5 4. Note de bas de page ou des notes de fin de document... 7 5. Table

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

Tutoriel pour apprendre à créer son blog source : Aide de 1ère étape : quel hébergeur de blog?

Tutoriel pour apprendre à créer son blog source : Aide de  1ère étape : quel hébergeur de blog? 1ère étape : quel hébergeur de blog? La création de blog est tout à fait similaire d un d hébergeur à un autre. Si j ai choisi Canalblog, c est pour sa simplicité, mais il existe un grand nombre d autres

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

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

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

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

1. Premier démarrage d Outlook

1. Premier démarrage d Outlook 1. Premier démarrage d Outlook Lors de la première visualisation du logiciel, nous avons cet écran sur l icône Outlook Express en surbrillance. - La fenêtre principale où se situe en surbrillance le mot

Plus en détail

GUIDE ANIMATEUR DE SITE

GUIDE ANIMATEUR DE SITE GUIDE ANIMATEUR DE SITE Sommaire Guide Animateur 1 Premier pas avec ASPresso... 3 1.1 Accéder à votre site web... 3 1.2 Terminologie liée au site... 3 1.3 Accéder à l'interface d'administration... 3 1.4

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

Mise en forme du texte à l aide de styles

Mise en forme du texte à l aide de styles Mise en forme du texte à l aide de styles Appliquez-vous à maintes reprises la même mise en forme, en changeant peut-être la couleur, la taille et la police, pour mettre en valeur votre texte? Vous pouvez

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

Formation sur Word. Formation sur Word

Formation sur Word. Formation sur Word Formation sur Word Microsoft office Word est un logiciel de traitement de texte permettant la rédaction de documents, de rapports, de notes de service, etc. Il permet de faciliter l envoie de lettre par

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

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

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

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

Démarrer LibreOffice Writer et découvrir l'interface.

Démarrer LibreOffice Writer et découvrir l'interface. LibreOffice.org est une suite bureautique libre, complète et entièrement gratuite, proposant tous les outils nécessaires à la bureautique : traitement de texte, présentation, tableur, base de données.

Plus en détail

INTRODUCTION AU LOGICIEL WORD 2016

INTRODUCTION AU LOGICIEL WORD 2016 INTRODUCTION AU LOGICIEL WORD 2016 PAR OLIVIER GINGRAS CONSEILLER A LA VIE ETUDIANTE UNIVERSITE DU QUEBEC EN OUTAOUAIS CAMPUS SAINT-JEROME AOUT 2016 TABLE DES MATIÈRES 1. ONGLET FICHIER... 1 1.1. Localisation

Plus en détail

Cours de XHTML. chaîne de caractères

Cours de XHTML. <balise attribut=valeur attribut2=valeur2 >chaîne de caractères</balise> Cours de XHTML Introduction XHTML n'est pas un langage de programmation proprement dit, il s'agit simplement d'un langage de balisage dont le rôle est de formaliser l'écriture d'un document web avec 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

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

Viatique. pour la création. de site. avec Kompozer. à l usage des. débutants

Viatique. pour la création. de site. avec Kompozer. à l usage des. débutants Viatique pour la création de site avec Kompozer à l usage des débutants Avant de commencer... 3 Création d une page simple... 3 Informations sur la page... 3 Apparence... 3 Sauvegarde... 3 Saisie du contenu...

Plus en détail

1 - Ouverture du logiciel Word. Pour cela deux solutions :

1 - Ouverture du logiciel Word. Pour cela deux solutions : : 1 - Ouverture du logiciel Word Pour cela deux solutions : ouverture à partir de l icône sur le bureau en double cliquant dessus ou cliquer sur démarrer - tous les programmes - Microsoft office Word (cf.

Plus en détail

Manuel d utilisation UTILISATION DES LISTES PRÉFÉRÉES. Page 3-30

Manuel d utilisation UTILISATION DES LISTES PRÉFÉRÉES. Page 3-30 Manuel d utilisation UTILISATION DES LISTES PRÉFÉRÉES Les listes préférées sont les listes de vos canaux favoris. Vous créez et modifiez vousmême les listes et y ajoutez ou en supprimez des canaux. Vous

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

Premiers essais de mise en forme

Premiers essais de mise en forme OpenOffice.org Writer Premiers essais de mise en forme Conventions : "clic" sans plus de précision implique d'appuyer sur le bouton gauche de la souris. "clic-droit" implique d'appuyer sur le bouton droit

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

Présentation générale des onglets de Word 2007

Présentation générale des onglets de Word 2007 Présentation générale des onglets de Word 2007 La version 2007 de Word a fait disparaître la barre de menu Fichier, Edition... Celle-ci a été remplacée par un ruban composé d'onglets. Ces onglets sont

Plus en détail

Ajouter une table des matie res a ses documents Word

Ajouter une table des matie res a ses documents Word Ajouter une table des matie res a ses documents Word Par Clément JOATHON Dernière mise à jour : 14/11/2014 Pour vous y trouver dans un document de plusieurs pages, il n'y rien de tel qu'une table des matières

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

Mieux concevoir ses fiches de cours HG avec OOo Modifier les styles, Numéroter ses titres, Créer un modèle et l'exporter

Mieux concevoir ses fiches de cours HG avec OOo Modifier les styles, Numéroter ses titres, Créer un modèle et l'exporter Mieux concevoir ses fiches de cours HG avec OOo Modifier les styles, Numéroter ses titres, Créer un modèle et l'exporter 1-Modifier les styles d'une page OOo propose par défaut ses propres styles, que

Plus en détail

CREER ET UTILISER DES MODELES

CREER ET UTILISER DES MODELES Modèles et formulaires Word 2007/2010 Page 1 sur 5 CREER ET UTILISER DES MODELES Création d un modèle. Lorsque vous utiliser souvent le même type de document (télécopie, mémo, courrier standard,...), il

Plus en détail

METTRE EN FORME. Modifier style, couleurs, taille et police d'un texte

METTRE EN FORME. Modifier style, couleurs, taille et police d'un texte METTRE EN FORME Modifier style, couleurs, taille et police d'un texte Style du texte On appelle style, les options de mises en forme suivantes : Italique Gras Souligné Ces options se trouvent dans la barre

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

É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

1 Prendre en main l interface et créer ses premiers courriers... 15

1 Prendre en main l interface et créer ses premiers courriers... 15 1 Prendre en main l interface et créer ses premiers courriers... 15 1.1. Tour d horizon... 16 Démarrer Word 2003... 16 Saisir un texte... 19 Appliquer quelques mises en forme... 21 Visualiser le document

Plus en détail

HTML et page Web diaporama

HTML et page Web diaporama but du diaporama principe général le titre ainsi qu une section contenant un paragraphe le titre ainsi qu un paragraphe dont le texte est centré une section dont le texte est coloré en rouge (couleur définie

Plus en détail

WORD 2007 LES BASES DE WORD

WORD 2007 LES BASES DE WORD WORD 2007 LES BASES DE WORD Alain BIGOTTE 17/11/2010 TABLE DES MATIERES Les bases de Word... 1 1. La sélection d'un mot, d'une phrase, d'un paragraphe 2. La mise en forme des caractères 3. Le Copier /

Plus en détail

Gestionnaire de contenu

Gestionnaire de contenu Gestionnaire de contenu C est dans le gestionnaire de contenu que vous pouvez éditer votre contenu Web personnel. Les sujets abordés dans cet aide mémoire sont : L interface du Gestionnaire de contenu

Plus en détail

DREAMWEAVER 2. Introduction. Créer un dossier et la première page d'un site. Faire alterner deux images

DREAMWEAVER 2. Introduction. Créer un dossier et la première page d'un site. Faire alterner deux images DREAMWEAVER 2 SOMMAIRE Introduction Créer un dossier et la première page d'un site Utiliser les fenêtres de l'écran et saisir du texte Contrôler les éléments de l'en-tête Insérer une image Insérer et paramétrer

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

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

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

Manuel SPIP. SPIP vous donne la possibilité de changer votre mot de passe très simplement.

Manuel SPIP. SPIP vous donne la possibilité de changer votre mot de passe très simplement. Manuel SPIP Se connecter à la partie Administration Pour créer un article, il faut entrer dans la partie administration du site en cliquant sur «Administration» en bas de la page d accueil du site, et

Plus en détail

I ) L environnement de programmation HTML :

I ) L environnement de programmation HTML : HTML5 COURS ET EXERCICES I ) L environnement de programmation HTML : - Ouvrir Notepad++ (http://notepad-plus-plus.org/fr/)et taper les trois lignes suivantes : Voici mon premier SITE Conception d une page

Plus en détail

Créer une table des matières. Sommaire

Créer une table des matières. Sommaire MICROSOFT WORD Révision Mars 2016 Créer une table des matières 1. Introduction... 2 2. Appliquer des styles de titre... 2 1. Appliquer un style par défaut... 2 2. Créer un style... 2 3. Modifier un style

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

UTILISER MCK3. - Utilisez les boutons à gauche pour ajouter des objets sur la page. (Voir Chap. III)

UTILISER MCK3. - Utilisez les boutons à gauche pour ajouter des objets sur la page. (Voir Chap. III) UTILISER MCK3 1.C Pour bien commencer Après avoir installé et démarré MCK, vous pouvez créer un nouveau projet. 1 Cliquez sur " Créer un nouveau projet ". 2 Après avoir donné un nom à votre projet, vous

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édacteur Comment ajouter / modifier du texte

Rédacteur Comment ajouter / modifier du texte Rédacteur Comment ajouter / modifier du texte Etape 1 : Authentifier sur le site Cliquez sur Privé puis saisissez votre «Nom d'utilisateur» et «Mot de passe» Une fois authentifier, cliquer sur le bouton

Plus en détail

Starter Kit. KompoZer. Apprenez, pratiquez, créez

Starter Kit. KompoZer. Apprenez, pratiquez, créez Starter Kit KompoZer Apprenez, pratiquez, créez PARTIE 1 Découvrir Kompozer CHAPITRE 4 Mes premières pages web La publication sur le Web possède ses propres techniques. Une page d un site n est pas une

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

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

Un petit tutoriel pour utiliser Wordpress (LeRepaire)

Un petit tutoriel pour utiliser Wordpress (LeRepaire) Un petit tutoriel pour utiliser Wordpress (LeRepaire) I. Pour écrire un article : Il faut déjà avoir un compte qui permette de le faire (ce n est pas un compte par défaut, il faut demander un accès à l

Plus en détail

2. Premier enregistrement dans un répertoire spécifique et titre de page

2. Premier enregistrement dans un répertoire spécifique et titre de page Tutoriel Kompozer 1. Ouverture et configuration de l'interface Lors de la première ouverture, l'interface est comme à l'image 1a. À chaque démarrage, il y a une fenêtre d'astuces qui vous donne des trucs

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

SITES IMPACTS BEZOOM V2.1 MODE D'EMPLOI

SITES IMPACTS BEZOOM V2.1 MODE D'EMPLOI SITES IMPACTS BEZOOM V2.1 MODE D'EMPLOI INDEX I. LOGIN II. SITE GENERAL 1. A PROPOS A. Information B. Contact C. Liens D. Bas de page E. Favicon 2. CMS A. Ajoutez (une rubrique) B. SEO 3. GALLERY A. Ajoutez

Plus en détail

Classes : PREMIERES A-C-D

Classes : PREMIERES A-C-D LYCEE SECOND CYCLE DEPARTEMENT D'INFORMATIQUE Année scolaire 2011-2012 Classes : PREMIERES A-C-D Horaire hebdomadaire : 2 heures PRÉ REQUIS Connaissances de la Classe de 2 nde Savoir lire le français ou

Plus en détail

WORD 2010 Traitement de texte

WORD 2010 Traitement de texte S U P P O R T D E C O U R S WORD 2010 Traitement de texte 4 Mise en forme des paragraphes Niveau Essentiel Table des matières 1 Alignements des paragraphes... 3 2 Les retraits de paragraphes... 4 Retrait

Plus en détail

Mettre en forme des caractères et des paragraphes. WORD Mettre en forme du texte

Mettre en forme des caractères et des paragraphes. WORD Mettre en forme du texte Mettre en forme des caractères et des paragraphes WORD Mettre en forme du texte Mettre en forme du texte SOMMAIRE : I METTRE EN FORME DES CARACTÈRES... 3 1.1 - Modifier la police de caractère... 3 1.2

Plus en détail

Longs documents. Styles

Longs documents. Styles Styles Un style est un ensemble de mises en forme de paragraphes et de caractères regroupées sous un nom unique que l on applique ensuite à un ou plusieurs paragraphes à l'aide d'une seule commande. Ainsi,

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

1.2 Création de colonnes à partir d une sélection de texte

1.2 Création de colonnes à partir d une sélection de texte TP Numéro 4 METTRE EN FORME UN DOCUMENT A L AIDE DE COLONNES, ACQUISITION DES TECHNIQUES DE MISE EN PAGE DE DOCUMENTS LONGS TELS QUE DES RAPPORTS OU DES MEMOIRES. 1 COLONNES Pour présenter du texte sur

Plus en détail