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

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

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

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 10 Réussir son site web avec XHTML et CSS Positionnement et mise en page par le CSS 1. Les 3 modes d affichage pour les éléments HTML... 1 1- Bloc / block... 1 2- En-ligne / inline... 1 3- Invisible

Plus en détail

Réussir son site web avec XHTML et CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Création d'un site Web avec KompoZer

Création d'un site Web avec KompoZer Création d'un site Web avec KompoZer Table des matières 1Rudiments sur le langage HTML.1 1.1Structure d'une page web :.1 1.2Le langage des pages Web.2 2Préparation du site web..2 3Utilisation d'une feuille

Plus en détail

Programmation PHP Septembre 2010

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

Plus en détail

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

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

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

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

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

C2i : Création de pages web

C2i : Création de pages web C2i : Création de pages web IUFE 2016/2017 Matthieu Giraud LIMOS, Université Clermont Auvergne Matthieu Giraud C2i : Création de pages web 1 / 33 Introduction Sommaire 1 Introduction 2 Structure d une

Plus en détail

Introduction HTML / CSS a

Introduction HTML / CSS a TP 1 Introduction HTML / CSS a a. Support de TP inspiré des notes de Cours de Cyril Gravelier Dans ce TP, nous allons réaliser nos premières pages Web. Pour ce faire, nous aborderons les bases du langage

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

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

Exercice 4 Manipulation des balises HTML

Exercice 4 Manipulation des balises HTML 1 Exercice 4 Manipulation des balises HTML Dans cet exercice vous allez simplement manipuler les différentes syntaxes qui constituent le langage html. Sources : Une fois l archive décompressée vous trouverez

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

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

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

TP07: barre de navigation

TP07: barre de navigation TP07: barre de navigation Ce tp poursuit les tps précédents. Pour commencer, dans votre dossier «php» (qui est dans «www»), recopiez vos fichiers du TP06 dans un nouveau dossier «TP07» (cp -r TP06 TP07).

Plus en détail

Apprendre les bases du HTML5 et du CSS3. Objectif : Dans cette série d'activités vous apprendrez à utiliser HTML5 et CSS3 pour créer des pages web

Apprendre les bases du HTML5 et du CSS3. Objectif : Dans cette série d'activités vous apprendrez à utiliser HTML5 et CSS3 pour créer des pages web Apprendre les bases du HTML5 et du CSS3 Objectif : Dans cette série d'activités vous apprendrez à utiliser pour créer des pages web Durée : 4h Chapitre 2 Nom : Prénom : Classe : Table des matières Activité

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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

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

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

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

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

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

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

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

soit directement sur une image clé. Cella permet d'insérer facilement des bruitages à une animation.

soit directement sur une image clé. Cella permet d'insérer facilement des bruitages à une animation. Le son dans Flash Il y a plusieurs façons d'insérer du son dans une animation flash : soit directement sur une image clé. Cella permet d'insérer facilement des bruitages à une animation. Soit avec l'action

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

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

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

Les outils de création de sites web (suite) Tuto 3ème séance - p1 Les outils de création de sites web (suite) 8. Les feuilles de style Alors que le langage HTML a pour objet de coder le contenu (texte, images, etc.) d'une page web pour la rendre

Plus en détail

L1 - Informatique et internet

L1 - Informatique et internet L1 - Informatique et internet Hervé Le Crosnier laboratoire GREYC - Université de Caen! herve.lecrosnier@unicaen.fr http://ensweb.users.info.unicaen.fr HTML + CSS Listes, images et liens Page HTML

Plus en détail

LE CODE HTML 1- INTRODUCTION. Page 1 sur 5

LE CODE HTML 1- INTRODUCTION. Page 1 sur 5 Page 1 sur 5 LE CODE HTML 1- INTRODUCTION Une page web est écrite nécessairement en code. Il en existe beaucoup, aux utilités diverses et variées. Le code le plus basique est toutefois le HTML ( HyperText

Plus en détail

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd">

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd> IUT Nice Côte d Azur Prog. Web Département informatique 2007-2008 TP1 HTML ET XHTML 1. Le document xhtml minimal Le langage xhtml est la dernière évolution du html. C est une version plus stricte du html,

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

FICHE 7 : INSERER UNE ZONE DE TEXTE

FICHE 7 : INSERER UNE ZONE DE TEXTE FICHE 7 : INSERER UNE ZONE DE TEXTE Dans Publisher comme dans PowerPoint, le texte d insère dans des zones de texte. 1. CREER UNE ZONE DE TEXTE 1. Cliquez sur le bouton Zone de texte. 2. Avec le bouton

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

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

Les tableaux. La mise en forme des tableaux (bordures, alignement horizontal et vertical, marges, ) se fait à l aide des styles CSS.

Les tableaux. La mise en forme des tableaux (bordures, alignement horizontal et vertical, marges, ) se fait à l aide des styles CSS. Les tableaux Les balises de tableau sont les suivantes : balise explication attributs titre du tableau tableau ligne d un tableau (table row) cellule d un tableau (table data) colspan(="nb

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 Fonctionnement du WEB 1. Le navigateur effectue une requête spécifiée à travers l URL 2. Le serveur retourne un flot de données 3.

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

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

HTML-CSS. Claude Petitpierre, André Maurer, complété par Brice Canvel

HTML-CSS. Claude Petitpierre, André Maurer, complété par Brice Canvel HTML-CSS Claude Petitpierre, André Maurer, complété par Brice Canvel Automne 2010 ii Table des matières 1 Pages du Web 1 1.1 Introduction......................................... 1 1.2 Le langage HTML......................................

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

Libfly Pro Web 2.0. Guide d intégration sur Aloès Versions 180+

Libfly Pro Web 2.0. Guide d intégration sur Aloès Versions 180+ Libfly Pro Web 2.0 Guide d intégration Aloès.docx Version 2.3 Libfly Pro Web 2.0 Guide d intégration sur Aloès Versions 180+ Groupe Archimed SA au capital de 1.000.000 - NAF 6202A Siret 1 39308811700071

Plus en détail

TD 1- Mise en forme d'un mémoire Word

TD 1- Mise en forme d'un mémoire Word TD 1- Mise en forme d'un mémoire Word ENREGISTREZ VOS DOCUMENTS REGULIEREMENT UTILISEZ LES UTILITAIRES D'AIDE A Rappel sur les modèles de documents A.1 Définition Un modèle est un objet destiné à être

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

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

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

Rapport du travail pratique

Rapport du travail pratique 14/10/2015 Introduction à HTML Rapport du travail pratique Ly Stéphane CLASSE FUTURE INGÉNIEURE Table des matières 1. Introduction. 2 2. Exercices. 2 2.1. Tableau formulaire....... 2 2.2. Index.... 3 2.3.

Plus en détail

2- Double-cliquez sur l icône du logiciel. 3- La fenêtre de l assistant de présentation s ouvre.

2- Double-cliquez sur l icône du logiciel. 3- La fenêtre de l assistant de présentation s ouvre. Comment créer un diaporama avec le logiciel de présentation de Open office? s 1- Préparez vos diapositives : sur des demi feuilles A4, 5- Créez les diapositives et choisissez la mise en page faites la

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

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

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

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

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

Plus en détail

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

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

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

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

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

Cours de XHTML. <balise attribut="valeur" attribut2="valeur2" >chaîne de caractères</balise>

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

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

I/ Une première très brève introduction au WEB :

I/ Une première très brève introduction au WEB : TP 10 : Vendredi 31 Janvier 2014 Langage de description HTML Langages de description Présentation du langage HTML et du principe de séparation du contenu et de la mise en forme. Créer et analyser une page

Plus en détail