XHTML Css

Module : Technologie web
Objectifs :
Apprendre les concepts fondamentaux des langages XHTML et CSS pour le dveloppement des pages web statiques, Acqurir les connaissances ncessaires pour la conception des applications web dynamiques avec le langage PHP.
Ateliers projets :
Ralisation dun projet dans le cadre dun groupe, en autonomie partielle et en dlai limit: Construction des sites Web dynamiques.
Rfrences :
www.commentcamarche.com www.developpez.com www.la-grange.net/w3c/xhtml1/ www.w3.org/Style/CSS/ www.php.net
Introduction
Le langage XHTML est un langage de formatage de texte adapt la conception de pages web. XHTML nest pas un langage de programmation, mais un langage de mise en forme de donnes : une page Web dcrit une structure statique, tandis qu'un programme est un processus dynamique.
SGML
Gnalogie du XHTML
Le SGML est un mta-langage : il permet de dfinir des langages baliss.
HTML
XML XHTML
Le HTML est l'un de ces langages baliss, fond en particulier sur la notion de lien hypertexte, qui permet de naviguer confortablement d'une page une autre. le langage XML, prcisment fond sur la notion d'extensibilit ; comme le SGML, le XML est un mtalangage. le langage XHTML drive du XML, mais conserve les principes fondamentaux du HTML. La norme du XHTML est dfinie par le W3C, qui encourage les concepteurs de pages web passer du HTML au XHTML. 2
SOMMAIRE
Partie 1 : Les bases du XHTML
Gnralit Premire page XHTML Organisation du texte Cration des liens Les images
Partie 2 : Les Feuilles de style CSS

Metrre en place le CSS Formatage du texte en CSS Les pseudos-formats
Partie 3 : XHTML et CSS

Les listes puces Mise en bote Les tableaux Les formulaires
3
Les bases du XHTML

XHTML : eXtensible HyperText Markup Language.
Gnralits
Premire page web Le langage XHTML est utilis pour crire le contenu de votre site web, grce des informations logiques : "Ceci est mon titre, ceci est mon menu, l c'est le texte principal de la page, l il y a une image etc etc...".
Organisation du texte
Cration des liens
CSS : Cascading Style Sheets Le langage CSS sert prsenter les pages web : Mes titres sont en rouge est souligns, mon texte est en police Aral, mon nom est centr, etc
N.B : XHTML : Ecriture des pages web CSS : Prsentation des pages web
Images
Les bases du XHTML

Gnralits
Premire page web
Editeur : Notepad++, logiciel en franais et gratuit pour ldition des pages web
Cration des liens
Images
Les bases du XHTML

Un navigateur web : Logiciel client capable dinterroger
Gnralits
Premire page web les serveurs web, dexploiter leur rsultas et de mettre en page les informations grce aux instructions contenues dans la page XHTML. Quelques Navigateurs web: Mozilla Firefox, Internet Explorer, Netscape, Safari, Mozilla Firefox Images Logiciel gratuit disponible en version franaise est adapt au langage CSS
Cration des liens
Les bases du XHTML

Les balises et les attributs
Gnralit
XHTML est un langage balises, une page XHTML est un fichier texte contenant des balises pour formater le texte, les images, etc.
Les balises Premire page web

Une balise est une commande encadr par le caractre infrieur "" et le caractre suprieur ""; Exemple : balise
Cration des liens
Il existe deux types de balises: Balise par paire : la premire balise est appel balise ouvrante et la seconde est dite balise fermante, Exemple : balise Texte format /balise
Balise seule : Elles sont rares, mais sen sert pour insrer un lment dans une page, ce type de balise se termine par un caractre / . Exemple : image/ N.B : Si vous voyez balise si quil ya srement une balise fermante /balise qui suit quelque parts. Si vous voyez balise/ cest une balise seule
Images
Les bases du XHTML

Gnralit Les attributs Un attribut est un lment prsent au sein dune balise (par paire ou seule), permettant de dfinir de nouvelles proprits cette dernire. Dans le cas des balaises par paire, les attributs sont mis dans les balises ouvrantes seulement. Exemple : image nom=ciel.jpg/ citation auteur=Neil Amstrong date = 21/07/1969 Cest un petit pas pour lhomme, un pas de gant pour lhumanit /citation
Premire page web
Cration des liens
Images
Les rgles retenir Les balises existent soit par paires (<balise> </balise>) ; soit toutes seules, mais dans ce cas il faut mettre un / la fin de la balise (ex. : <balise />) Les noms des balises et des attributs s'crivent toujours en minuscules (ex. : "citation, auteur, date") Les valeurs des attributs peuvent contenir des majuscules (ex. : "Neil Armstrong") S'il y a des attributs dans une balise fonctionnant par paire, on ne les met que dans la balise ouvrante (cf : exemple ci-dessus).
8
Les bases du XHTML

Gnralit
Page XHTML
Voici le code de base d'une page web, qui va servir de point de dpart chacune de nos pages : Code source 0: code de base dune page XHTML < !DOCTYPE html PUBLIC ..//W3C//DTD XHTML 1.1 //EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd> <html xmlns=http://www.w3.org/1999/xhtml xml :lang=fr> <head> <title> Bienvenu sur mon site ! </title> <meta http-equiv=Content-Type content=texte/html ; charset=iso-8859-1/> </head> <body> </body> </html>
Premire page web
Cration des liens
Images
Les bases du XHTML

Gnralit
Quelques explications
< !DOCTYPE html PUBLIC ..//W3C//DTD XHTML 1.1 //EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd> cette balise sert dire au navigateur que ce fichier est une page XHTML1.1. La balise <html>, est la balise principale qui englobera toute votre page (X)HTML, elle nest ferme quen dernier. La balise <html> contient 2 attributs : xmlns : cet attribut, obligatoire, indique une adresse traitant du XHTML. xml:lang : cet attribut sert indiquer dans quelle langue est rdige votre page web. ("fr" , "en", "it", "es" etc etc...) La balise <head> contient quelques informations d'en-tte pour votre page web. A l'intrieur de la balise <head> il y a: La balise <title> indiquant le titre de votre page web. La balise <meta> qui indique que vous allez taper des caractres spciaux au franais ( etc...). La balise <body> contient le corps de la page web, cest dire quentre les balises <body> </body> quon va crire le contenu de notre page. 10
Premire page web
Cration des liens
Images
Les bases du XHTML

Les commentaires
Gnralit
Les commentaires se sont des informations crites pour rendre le code lisible. Un commentaire est une balise spcial commenant par 
Premire page web
Code source 1: Exemple de commentaire

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns=http://www.w3.org/1999/xhtml xml :lang=fr> <head> <title> Bienvenu sur mon site ! </title> <meta http-equiv=Content-Type content=texte/html ; charset=iso-88591/> </head> <body> <!- Voici un exemple de commentaire --> </body> </html>
Cration des liens
Images
11
Les bases du XHTML

Gnralit
La premire tape pour "remplir" votre site, c'est d'crire du texte dedans. En effet, nous allons voir successivement : Comment rdiger des paragraphes La faon dont fonctionnent les titres Comment donner de l'importance certains mots de son texte Et enfin, nous verrons quelques balises un peu plus "rarement" utilises, mais que vous devez connatre au cas o vous en ayez besoin un jour.
Premire page web
Organisation Du texte
Cration des liens
Images
12
Les bases du XHTML

Les paragraphes
Gnralit En XHTML, lcriture du texte est faite sous forme de paragraphes. Chaque paragraphe se trouve entre les balises <p> et </p> (qui signifient "paragraphe").
Code source 2: Exemple de paragraphe
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns=http://www.w3.org/1999/xhtml xml :lang=fr> <head> <title> Bienvenu sur mon site ! </title> <meta http-equiv=Content-Type content=texte/html ; charset=iso-8859-1/> </head> <body> <p> Bonjour et bienvenu sur mon site web! Ceci est le dbut alors soyer passion, on apprend petit petit </p> </body> </html>
Premire page web
Cration des liens
Images
13
Les bases du XHTML

Saut dune ligne
Gnralit <br /> est une balise seule qui sert juste indiquer qu'on doit aller la ligne, <br /> doit tre obligatoirement l'intrieur d'un paragraphe (entre les balises <p></p>).
Code source 3: Exemple de saut de ligne <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Bienvenue sur mon site !</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <p> Bonjour et bienvenue sur mon site !<br /> Ceci est mon premier test, alors soyez indulgents s'il vous plat, j'apprends petit petit comment crer un site web. </p> <p> Pour l'instant c'est un peu vide, mais quand j'aurai appris un peu plus de choses, je vous assure que vous allez tre surpris ! </p> </body> </html>
Premire page web
Cration des liens
Images
14
Les bases du XHTML

Gnralit
Les titres
En XHTML, on a le droit d'utiliser 6 niveaux de titres diffrents. On a donc 6 balises de titre diffrentes que l'on peut utiliser : <h1> </h1> : signifie "titre trs important". En gnral, on s'en sert pour afficher le titre de la page en haut. <h2> </h2> : signifie "titre important". Utilisez-les par exemple pour organiser vos paragraphes et leur donner un titre. <h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un "sous-titre" si vous voulez) <h4> </h4> : titre encore moins important. <h5> </h5> : titre pas important. <h6> </h6> : titre vraiment pas important du tout.
Premire page web
Cration des liens
Images
15
Les bases du XHTML

Gnralit
Code source 4 : Exemple des titres <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns=http://www.w3.org/1999/xhtml xml :lang=fr> <head> <title> Bienvenu sur mon site ! </title> <meta http-equiv=Content-Type content=texte/html ; charset=iso8859-1/> </head> <body> <h1>Titre super important</h1> <h2>Titre important</h2> <h3>Titre un peu moins important (sous-titre)</h3> <h4>Titre pas trop important</h4> <h5>Titre pas important</h5> <h6>Titre vraiment pas important du tout</h6> </body> </html>
Premire page web
Cration des liens
Images
16
Les bases du XHTML

Mettre en valeur le texte
Gnralit
XHTMl met la disposition deux balises pour mettre en valeur des mots dans un paragraphe. Ces deux balises sont : La balise <em> </em> : pour mettre des mots en italique La balise <strong> </strong> : sert pour mettre des mots en gras
Premire page web
Code source 5 : Exemple de mise en valeur du texte

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns=http://www.w3.org/1999/xhtml xml :lang=fr> <head> <title> Bienvenu sur mon site ! </title> <meta http-equiv=Content-Type content=texte/html ; charset=iso-8859-1/> </head> <body> <p> Bonjour et bienvenu sur mon site web! <br /> Ceci est le dbut alors <em> soyer passion </em>, on apprend <strong> petit </strong> petit </p> </body> </html> 17
Cration des liens
Images
Les bases du XHTML

Gnralit Quelques balises rares (mais utiles!) Nous allons voir les balises suivantes : Mettre en exposant ou en indice; Les citations; Les acronymes
Code source 6 : Exemple de mise en exposant ou en indice <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns=http://www.w3.org/1999/xhtml xml :lang=fr> <head> <title> Bienvenu sur mon site ! </title> <meta http-equiv=Content-Type content=texte/html ; charset=iso-88591/> </head> <body> <p> Bonjour et bienvenu sur mon site web! <br /> Le langage XHTML est apparut en XXI<sup>me</sup> siecle <br /> X<sub>n </sub> = X<sub>n-1 </sub> - 2X<sub>n-2 </sub> </p> </body> </html> 18
Premire page web
Cration des liens
Images
Les bases du XHTML

Les citations
Gnralit On peut faire 2 types de citations : Des citations courtes, dans un paragraphe : balise <q>, Des citations longues lextrieur dun paragraphe: balise <blockquote>
Premire page web
Cration des liens
Code source 7 : Exemple de citation courte <p>Vous souvenez-vous de la phrase clbre qu'a prononc Neil Armstrong en posant le premier pied sur la Lune ? <q>C'est un petit pas pour l'Homme, un grand pas pour l'Humanit</q>. C'tait un certain 20 Juillet 1969...</p>
Images
19
Les bases du XHTML

Gnralit Code source 8 : Exemple de citation longue
<h1>Le Corbeau et le Renard</h1> <p>Voici ce qui est sans aucun doute une des plus connues fables de <em>La Fontaine</em> :</p> <blockquote> <p> Matre Corbeau, sur un arbre perch,<br /> Tenait en son bec un fromage.<br /> Matre Renard, par l'odeur allch,<br /> Lui tint peu prs ce langage :<br /> </p> </blockquote>
Premire page web
Cration des liens
Images
N.B : En XHTML, on distingue 2 types de balises : Les balises de type inline : Utiliser l'intrieur d'un paragraphe. C'est le cas notamment des balises <strong>, <em>, <q> etc... Les balises de type bloc : ces balises servent structurer la page en plusieurs "blocs" , exp : <p>, <h1>, <h2>, <blockquote>...
20
Les bases du XHTML

Gnralit
Les acronymes
Un acronyme est une suite d'initiales utilise gnralement pour raccourcir certains noms, comme par exemple XHTML, FBI, CSA etc...Pour que le visiteur sache de quoi il s'agit, vous devez entourer votre acronyme de la balise <acronym> La nouveaut ici, c'est que vous allez devoir utiliser un attribut (title) pour expliquer ce que signifie l'acronyme.
Code source 9 : Exemple dutilisation dacronyme
Premire page web
Cration des liens
<p>Le <acronym title="eXtensible HyperText Markup Language">XHTML </acronym> est le langage qui permet de crer un site web.</p>
Images
21
Les bases du XHTML

Gnralit Dans cette section, nous allons apprendre faire des liens entre les pages web. Un lien : un texte sur lequel on peut cliquer pour se rendre sur une autre page.
Premire page web
Relatif ou absolu ? Il y a 2 types de liens : Les liens internes un site : Un lien d'une page une autre, est un lien relatif. Un lien relatif est assez court, par exemple "fichiers/cible.html".
Les liens vers d'autres sites : ce sont par exemple des liens vers "http://www.yahoo.fr". Ces liens sont appels liens absolus et, contrairement aux liens relatifs, ils commencent souvent par "http://". Les liens les plus simples priori sont les liens absolus : http://www.site.net/index.html ... est un lien absolu. Pas compliqu jusque-l, mais un peu long crire.
Cration des liens
Images
22
Les bases du XHTML

Gnralit
Un lien vers une autre page

Pour faire un lien, on utilise la balise <a>. On doit ajouter l'attribut "href" pour indiquer l'adresse de la page cible (la page vers laquelle le lien amne).
Premire page web
Code source 10 : Exemple de lien absolu <p>Hep ! Je connais un site qu'il est vraiment super : le <a href="http://www.la-grange.net/w3c/xhtml1/">Site officiel du XHTML</a><br /> N'hsitez pas aller le visiter, il vaut <em>vraiment</em> le coup d'oeil ;)</p>
Organisation du texte Cration des liens
Images
N.B : Si vous faites un lien vers un site qui comporte une adresse un peu bizarre avec des &, comme : http://www.site.com/?data=15&name=toto1&source=ms ... Vous devrez remplacer tous les & par & comme ceci : http://www.site.com/?data=15&name=toto1&source=ms Vous ne verrez pas la diffrence, mais cela est ncessaire pour que votre page web respecte les normes du XHTML. 23
Les bases du XHTML

Gnralit
Nous venons de faire ici un lien en absolu vers un autre site ("http://"...). Maintenant, nous allons voir comment faire un lien en relatif. Je cre 2 pages : source.html et cible.html. source.html contient un lien vers cible.html, et les 2 pages se trouvent dans le mme dossier. Voici comment on procde : Code source 11: Source.html <h1>fichier source</h1> <p>Tu te trouves sur source.html <br /> Souhaites-tu visiter <a href="cible.html">le fichier cible.html</a> ?</p>
Premire page web
Code source 12: cible.html
Images
<h1>fichier cible</h1> <p>Bravo ! Tu viens d'atterir sur cible.html !</p>
24
Les bases du XHTML

Gnralit
Une bulle daide sur le lien Une bulle daide peut tre ajout au lien laide de lattribut title, ceci permet dinformer le visiteur avant mme de cliquer sur le lien. Code source 13: Une bulle daide <p>Allez donc visiter le <a href="http://www.commentcamarche.com" title="Encyclopdie dinformatique">Site dinformatique</a></p>
Premire page web
Un lien pour envoyer un mail Pour envoyer un mail, vous pouvez utiliser des liens "mailto". Rien ne change au niveau de la balise, vous devez simplement modifier la valeur de l'attribut href comme ceci : href="mailto:votrenom@bidule.com"
Images
Code source 14: Une bulle daide

<h2>Me contacter</h2> <p>Pour me contacter, <a href="mailto:h.mouncif@caramail.com">cliquez ici</a> !</p>
25
Les bases du XHTML

Gnralit
Un lien vers une ancre Une ancre est un point de repre qui amne directement le visiteur la partie recherch dans une grande page web. Pour crer une ancre, il suffit de rajouter lattribut id une balise qui va servir de repre, exemple : <h2 id=mon ancre> Titre </h2> Ensuite faire un lien comme suivant : <a href=#mon ancre>Aller vers lancre <a>
N.B : href contient un dise(#) suivi du nom de lancre. Fichier: ancres.html Code source 15: Exemple dancre
Premire page web
<h1>Ma grande page</h1> <p> Aller directement la partie traitant de :<br /> <a href="#cuisine">La cuisine</a><br /> </p> <h2 id="cuisine">La cuisine</h2>
Images
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pharetra volutpat nisl. Nullam sollicitudin nulla eget justo. Maecenas urna dui, mollis ut, tristique sit amet, adipiscing nec, neque. Praesent bibendum tempor metus. Sed vitae tellus mollis magna luctus ultrices. Mauris sollicitudin aliquet nunc. Aenean urna. Duis lorem. Proin augue. Quisque interdum felis eu diametc, etc, etc, etc,.. .</p>
26
Les bases du XHTML

Lien vers une ancre situe dans une autre page Gnralit
L'ide, c'est de faire un lien qui ouvre une nouvelle page et qui amne directement une ancre situe plus bas sur cette page. En pratique : il suffit de taper le nom de la page, suivi d'un dise (#), suivi du nom de l'ancre. Par exemple : <a href= ancres.html#cuisine"> ... vous amnera sur la page ancres.html, directement au niveau de l'ancre appel "cuisine".
Premire page web
Code source 16: Exemple dancre dans une autre page <h1>Le Mgamix <sup>TM</sup></h1> <p> Rendez-vous quelque part sur une autre page :<br /> <a href="ancres.html#cuisine">La cuisine</a><br /> </p>
Images
27
Les bases du XHTML

Gnralit
Formats dimages
Notre but dans cette section est de faire le tour des formats dimages que lon utilise sur le web pour savoir desquelles choisir. Voici les formats dimages quon utilise sur
le web. JPEG : le format JPEG est trs rpandu. Il est particulirement adapt pour les photos, et c'est d'ailleurs souvent dans ce format-l qu'est l'image de votre fond d'cran Les images de type JPEG ont gnralement l'extension ".jpg", mais aussi parfois ".jpeg" (a revient au mme).
Premire page web Organisation du texte Cration des liens
Palmier.jpg
Images
28
Les bases du XHTML
Gnralit
PNG : le format PNG est le plus rcent de tous. Ce format est adapt la plupart des graphiques. L'avantage du PNG, c'est qu'il peut tre rendu transparent, ce qui est trs apprciable. Le PNG existe en 2 versions :
PNG 8 bits : le PNG 8 bits est la version du PNG limite 256 couleurs. PNG 24 bits : le PNG 24 bits est la version du PNG la plus volue, elle supporte plusieurs millions de couleurs (comme le JPEG). Quel intrt d'utiliser le PNG 24 plutt que le JPEG ? Pour la transparence ! a permet de crer de beaux effets de transparence facilement sur des lments graphiques, notamment pour le design de votre site web. Malheureusement, Internet Explorer est la masse. Il ne gre pas bien le PNG 24 bits : il peut afficher l'image, mais n'affichera pas la transparence.
fleur.png(8 bits)
Images
voiture.png(24 bits)
29
Les bases du XHTML
Gnralit
GIF : c'est un format assez vieux, trs utilis. Le PNG est bien meilleur que le GIF : les images sont plus lgres et la transparence est meilleure. Le format GIF est limit 256 couleurs (alors que le PNG peut aller jusqu' plusieurs millions de couleurs). Le format GIF, conserve quand mme un avantage que le PNG n'a pas : il peut tre anim. N.B: Une photo (ou une image avec beaucoup de couleurs) : utilisez un JPEG. Un graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits si possible car le format est meilleur, sinon utilisez un GIF. Une image anime : utilisez un GIF anim.
Insrer une image

Pour insrer une image, on doit utiliser la balise <img />. C'est une balise de type seule (comme <br />). Elle possde 2 attributs indispensables : src : Indique la source o se trouve l'image insrer. On peut mettre un chemin absolu (ex. : "http://www.site.com/fleur.png") ou un chemin relatif. Ainsi, si votre image est dans un sous-dossier "images" vous devrez taper : src="images/fleur.png alt : Un "texte alternatif" qui sera affich la place de l'image si celle-ci ne peut pas tre tlcharge, ou sur les navigateurs de personnes handicapes (non-voyants). Pour la fleur, on mettrait par exemple : alt="Une fleur"
Images
N.B : Si vous ne faite pas de textes alternatifs aux images, votre page ne sera pas une page XHTML valide.
30
Les bases du XHTML

Exemple dinsertion dimage: Gnralit
Code source 17: Insrer une image <p> Voici une photo que j'ai prise dans un jardin :<br /> <img src="images/fleur.jpg" alt="Photo dune fleur" /> </p> N.B :Notez que les images se mettent obligatoirement l'intrieur d'un paragraphe (<p></p>). Si vous ne le faites pas, comme pour "alt" la page s'affichera correctement mais votre page ne sera alors plus valide.
Une bulle daide

Lattribut utilis pour afficher une bulle daide est title (le mme pour les liens) Code source 18: Une bulle daide associe une image <p> Voici une photo que j'ai prise dans un jardin :<br /> <img src="images/fleur.jpg" alt="Photo dune fleur" title="Allez voir la galerie dimages! " /> </p> 31
Images
Les bases du XHTML

Image cliquable
Gnralit
Comme le texte, une image peut servir de lien. Au lien de mettre du texte entre les balises <a></a>, on peut mettre une balise <img/>
Code source 19: une image cliquable <p> Vous souhaitez vous rendre vers un endroit magique ? Rien de plus simple, cliquez sur l'image ci-dessous :<br /> <a href="http://www.voyage.fr"><img src="images/palmier.jpg" alt="Photo de Palmier" title="Cliquer pour voyager !" /></a> </p>
Images
32
Les feuilles de style CSS

Mettre en Place le CSS
Dans cette partie, nous allons dcouvrir les feuilles de style pour la prsentation des pages web. Le code CSS est crit dans un fichier part ( 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 etc... On peut crire du code CSS dans 3 endroits diffrents : Dans un fichier .css : Cset la mthode recommande. Parmi les nombreux avantages que cette solution apporte, il y a la possibilit de pouvoir proposer facilement plusieurs designs diffrents vos visiteurs.
Formatage du texte en CSS
Les pseudos -formats
33

Code source 20: Balise intgrant un emplacement externe du code CSS < !DOCTYPE html PUBLIC ..//W3C//DTD XHTML 1.1 //EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd> <html xmlns=http://www.w3.org/1999/xhtml xml :lang=fr> <head> <title> Bienvenu sur mon site ! </title> <meta http-equiv=Content-Type content=texte/html ; charset=iso-88591/> Par mis les attributs media="screen" type="text/css" title="Design sombre" de La balise <link/> nous trouvons : <link rel="stylesheet" title : cest le nom de la feuille de style, href="sombre.css" /> href : cest lemplacement o se trouve la feuille de style. </head> <body> <p>Cette page comporte une feuille de style externe. C'est la meilleure mthode utiliser quand on fait du CSS.</p> </body> </html>
34

Directement dans le header du fichier XHTML : il est aussi possible de taper du CSS directement l'intrieur mme du fichier XHTML, entre les balises <head></head>. Vous devrez y mettre une balise <style></style> l'intrieur, exemple : Code source 21: Balise intgrant le code CSS dans le header de la page XHTML
< !DOCTYPE html PUBLIC ..//W3C//DTD XHTML 1.1 //EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd> <html xmlns=http://www.w3.org/1999/xhtml xml :lang=fr> <head> <title> Bienvenu sur mon site ! </title> <meta http-equiv=Content-Type content=texte/html ; charset=iso-88591/> <style type="text/css"> /* Vous taperez votre code CSS ici */ </style> </head> <body> <p> Cette page comporte du CSS directement dans le header.</p> </body> </html> 35

La mthode " l'arrache" dans les balises : a c'est la troisime (et la moins recommande) des mthodes. Elle consiste ajouter un attribut style sur les balises pour leur appliquer un style particulier. Cet attribut fonctionne sur toutes les balises. Par exemple sur un titre : Code source 22: du CSS larrache
<h1 style="/* Votre style pour cette balise ici */">Titre</h1>
Appliquer un style des balises Dans un CSS, on trouve 3 lments diffrents : Des noms de balises : on crit les noms des balises dont on veut modifier l'apparence. Des proprits CSS : les "effets de style" de la page sont rangs dans des proprits. Il y a par exemple la proprit color qui permet d'indiquer la couleur du texte, font-size qui permet d'indiquer la taille du texte etc .. Les valeurs : chaque proprit 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 etc ... 36

On peut mettre autant de proprits que l'on veut l'intrieur des accolades (enfin, il faut en mettre au moins une sinon a sert rien ). Chaque proprit est suivie du symbole "deuxpoints" (:) puis de sa valeur correspondante. Enfin, chaque ligne se termine par un pointvirgule (;) Exemple : Pour modifier tous les paragraphes pour qu'ils soient crits en bleu, avec une taille de 18 pixels. On peut crire le code CSS suivant : Code source 23: Exemple de CSS (essai.css) p { color : blue; font-size : 18px; } Code source 24: Schma dun fichier CSS balise1 { propriete: valeur; propriete: valeur; propriete: valeur; } balise2 { propriete: valeur; propriete: valeur; propriete: valeur; propriete: valeur; }
37

Exemple
Crez un fichier XHTML pour tester notre CSS. Il ne faut pas oublier de mettre la balise <link /> qui indique o se trouve notre fichier CSS.
Code source 25: Fichier XHTML pour tester le code CSS
< !DOCTYPE html PUBLIC ..//W3C//DTD XHTML 1.1 //EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd> <html xmlns=http://www.w3.org/1999/xhtml xml :lang=fr> <head> <title> Bienvenu sur mon site ! </title> <meta http-equiv=Content-Type content=texte/html ; charset=iso8859-1/> <link rel="stylesheet" media="screen" type="text/css" title= Essai" href= essai.css" /> </head> <body> <p>Cette page comporte une feuille de style externe. C'est la meilleure mthode utiliser quand on fait du CSS.</p> </body> </html> 38

Appliquer un style plusieurs balises Mettre en Place le CSS
Pour appliquer une mme plusieurs balises (exp. h1, h2). Il suffit de sparer les noms des balises par des virgules, comme ceci :
Code source 26: appliquer un style unique plusieurs balises h1,h2 { color : blue; font-size : 18px; }
Commentaires dans le code CSS

Les commentaires en CSS sont fait laide des caractres : /* commentaire*/ Code source 27: appliquer un style unique plusieurs balises p { color : blue; /*les paragraphes sont en bleu*/ font-size : 18px; }
39

Utilisation des attributs class et id
Les class vous permettent de dfinir un style personnalis. Supposons que vous vouliez dfinir un style appel "important" qui crive le texte en rouge / 18 pixels. Vous rajouterez l'attribut class="important" chacune des balises que vous voulez modifier.
Code source 28: Fichier XHTML pour tester le code CSS < !DOCTYPE html PUBLIC ..//W3C//DTD XHTML 1.1 //EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd> <html xmlns=http://www.w3.org/1999/xhtml xml :lang=fr> <head> <title> Bienvenu sur mon site ! </title> <meta http-equiv=Content-Type content=texte/html ; charset=iso8859-1/> <link rel="stylesheet" media="screen" type="text/css" title= Essai" href= essai.css" /> </head> <body> <p class = "important"> Cette page comporte une feuille de style externe. C'est la meilleure mthode utiliser quand on fait du CSS.</p> </body> </html>
40

Comment faire partir de l pour dire dans le CSS : "Je veux que toutes mes balises qui ont la class "important" soient crits en rouge / 18 pixels ?" C'est trs simple : au lieu de mettre le nom de la balise avant les accolades (comme p ou encore h1), vous devez crire un point suivi du nom de la class, comme par exemple : .important Ce qui nous donnerait le CSS suivant : Code source 29: la class "important"
.important { color: red; font-size: 18px; }
N.B : En CSS lattribut id est utilis comme lattribut class avec une lgre diffrence cest dtre prcd dun dise (#).
41

Les balises universelles Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id mais c'est plus rare) certains mots qui ne sont pas entours par des balises. En effet, le problme des class c'est qu'il s'agit d'un attribut, vous ne pouvez donc en mettre que sur une balise. Par exemple, si je veux modifier uniquement "Neil Armstrong" dans le paragraphe suivant :
Code source 30: comment faire pour colorer Neil Armstrong ? <p>Comme l'a dit Neil Armstrong un certain 20 juillet 1969...</p>
En fait, on a invent 2 balises qui ne servent rien, avec une petite (mais importante !) diffrence entre les deux : <span></span> : c'est une balise de type inline. Vous vous souvenez ce qu'est une balise inline ? C'est une balise qui se met l'intrieur d'un paragraphe, comme <strong>, <em>, <q>. Cette balise s'utilise donc au milieu d'un paragraphe, et c'est celle dont nous allons nous servir pour colorer Neil Armstrong.
42

<div></div> : c'est une balise de type block. Comme <p>, <h1> etc... Elle cre un nouveau "bloc" dans la page, et provoque donc obligatoirement un retour la ligne. C'est une balise trs utilise pour faire un design. Code source 31: la balise span
<p>Comme l'a dit <span class="nom">Neil Armstrong</span> un certain 20 juillet 1969...</p>
Code source 32: la feuille de CSS qui va avec .nom { color : bleu; }
43

Imbrication de balises
Une des dernires notions "de base" du langage CSS est la possibilit d'indiquer l'ordre d'imbrication des balises dans le CSS. Nous sommes dans notre fichier CSS. Nous souhaiterions dfinir un style uniquement pour les balises <em> qui se trouvent l'intrieur d'un titre <h3>. On doit crire ceci : Code source 33: balise imbrique h3 em /* => tous les em situs l'intrieur d'un h3 */ { color: blue; }

On a juste spar les 2 noms de balises par un espace, et non pas par une virgule. Cela signifie "Je veux modifier le style de toutes les balises <em> situes l'intrieur de titres <h3>". On a indiqu dans le CSS dans quel ordre devaient tre imbriques les balises. N.B: L'ordre est trs important ! Si on mis "em h3" cela aurait voulu dire "Tous les <h3> situs l'intrieur de balises <em>". Cela est d'ailleurs impossible faire car on ne peut pas mettre une balise de type block dans une balise de type inline. 44

Voici un exemple qui illustre limbrication:
Code source 34: balise imbrique <h3>L'imbrication, c'est <em>pratique</em></h3> <p>Cet exemple vous montre comment fonctionne l'imbrication.<br /> Le mot "pratique" dans le titre sera crit en bleu, mais pas celui-ci : <em>pratique</em>.</p> Vous pouvez aussi mlanger des balises et des class : p .important Ce qui signifie : "Toutes les class "important" contenues dans des balises <p>" Un petit exemple : blockquote p strong, h1 .important Alors l, attention de ne pas tout mlanger. La virgule "coupe" la ligne en deux, elle signifie "ET". Pour bien voir que la ligne est coupe en deux, je vais colorer les deux parties : blockquote p strong, h1 .important Ce qui veut dire : "Toutes les balises <strong> contenues dans un <p> ellesmmes contenues dans un <blockquote> ET toutes les class "important" contenues dans un titre <h1>" 45

Mettre en place le CSS
Cette fois, on passe au concret : nous allons voir successivement comment modifier la taille du texte, changer la police, aligner le texte etc... Taille du texte La proprit CSS qui permet de changer la taille du texte est font-size. On peut indiquer la taille du texte de diffrentes manires : En pixels : c'est une faon trs prcise d'indiquer la taille du texte. C'est vous de dire combien de pixels exactement doit faire le texte. Pour avoir un texte de 16 pixels de hauteur, vous devez crire : font-size: 16px; Les lettres auront une taille de 16 pixels, comme le montre l'image suivante :
46

Voici un exemple illustratif :
Code source 35: taille en pixel (CSS)
p {
font-size: 14px; /* Paragraphes de 14 pixels */ } h1 { font-size: 22px; /* Titres de 22 pixels */ }
N.B: Indiquer la taille du texte en pixels, centimtres et millimtres est trs pratique et trs prcis. Certes. Mais il est prfrable d'indiquer une taille relative (comme nous allons le voir) afin que la taille du texte s'adapte aux choix de tout le monde.
47

En donnant une valeur relative : c'est--dire en crivant carrment "gros", "trs gros", "petit", "minuscule". Mais bien sr, comme tout c'est en anglais. Voici la liste des diffrentes valeurs que vous pouvez mettre ainsi que leur signification : xx-small : minuscule x-small : trs petit small : petit medium : moyen large : grand x-large : trs grand xx-large : euh... gigantesque
Code source 36: taille en relatif .minuscule { font-size: xx-small; } .trespetit { font-size: x-small; } .petit { font-size: small; } .moyen { font-size: medium; } .grand { font-size: large; } .tresgrand { font-size: x-large; } .supermegagigatresgrand { font-size: xx-large; }
48

En em : c'est une autre faon d'indiquer de manire relative la taille du texte. Elle indique la taille du texte par rapport la taille normale de la police, c--d : "1em" signifie "Taille normale". Si vous mettez un nombre suprieur (gnralement un nombre dcimal) comme "1.3em", le texte aura une taille 1,3 fois plus grande. De mme pour rduire : "0.8em" et votre texte aura une taille 0,8 fois plus petite.
Code source 37: taille en em .petit_em { font-size: 0.7em; } .grand_em { font-size: 1.3em; }
N.B : Il faut mettre un point la place de la virgule pour les nombres dcimaux. Vous devez donc crire "1.4em" et non pas "1,4em" ! En pourcentage : a c'est facile. Si vous indiquez "100%", le texte aura une taille "normale". Si vous mettez "130%", le texte aura une taille correspondant 130% de la taille normale. a ressemble normment aux "em" (en fait c'est plus ou moins pareil). 49

Police La proprit CSS qui permet d'indiquer la police est font-family. Vous devez indiquer le nom de la police comme ceci : font-family : police; Pour viter qu'il n'y ait de problme si l'internaute n'a pas la mme police que vous, on met en gnral plusieurs noms de police, spars par des virgules : font-family:police1, police2, police3, police4; Le navigateur essaiera d'abord de mettre la police1. S'il ne l'a pas, il essaiera de mettre la police2. S'il ne l'a pas, il essaiera la police3 et ainsi de suite. En gnral, on met en tout dernier "serif", ce qui correspond une police standard (qui ne se met que si aucune autre police n'a t trouve).
Code source 38: la police h1 { font-family: "Arial Black", Arial, Verdana, serif; /* On essaie d'avoir Arial Black en priorit */ } p {
/* La police Comic Sans MS est agrable lire pour les paragraphes */ font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
}
50

Alignements simples Le langage CSS nous permet de faire tous les alignements que l'on connat : gauche, centr, droite et justifi. C'est tout simple. On utilise la proprit text-align, et on indique l'alignement dsir : left : le texte sera align gauche (c'est le rglage par dfaut). center : le texte sera centr. right : le texte sera align droite. justify : le texte sera "justifi". Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc la fin des lignes. Les textes des journaux, par exemple, sont tout le temps justifis. Code source 39: Les alignements
h1 { text-align: center; /* Pour centrer le titre */ font-family: "Arial Black", Arial, Verdana, serif; /* Un titre en Arial Black c'est mieux :o) */ } blockquote { text-align: justify; /* La citation sera justifie */ } .signature { text-align: right; /* Pour aligner droite ma signature */ font-family: "Comic Sans MS", Georgia, "Times New Roman", serif; font-size: 80%; }
51

Voici donc le code XHTML de cet exemple permettant de tester les alignements :
Code source 40: Les alignements <h1>La parole du sage</h1>
<p>Un jour, un grand sage a dit :</p> <blockquote><p>Vous ne pouvez pas modifier l'alignement du texte d'une balise inline (comme span, a, em, strong...). L'alignement ne fonctionne que sur des balises de type block (p, div, blockquote, h1, h2, ...), et c'est un peu logique quand on y pense : on ne peut pas modifier l'alignement de quelques mots au milieu d'un paragraphe !. C'est donc en gnral le paragraphe entier qu'il vous faudra aligner. </p></blockquote> <p class="signature">Sign : XHTML</p>
Indentation Qu'est-ce que l'indentation ? C'est tout simplement la mise en retrait du texte. Cela permet par exemple de faire commencer un paragraphe un peu plus droite, ce qui rend la lecture beaucoup plus facile et agrable. C'est un procd que l'on retrouve dans la plupart des livres d'ailleurs. Voici un exemple didentation :
52

On utilise la proprit text-indent. On doit indiquer quelle est la taille du retrait : on peut le faire en pixels, en centimtres, en millimtres... Bref, l le mieux c'est d'utiliser les pixels . Voir lexemple suivant, les textes des paragraphes sont en retrait avec text-indent
Code source 41: les alignements
p { text-indent: 30px; /* Les paragraphes commenceront 30 pixels sur la droite */ text-align: justify; /* Ils seront justifis */ font-size: large; /* Taille du texte grande */ }
L'avantage en CSS, c'est qu'il vous suffit de dire une fois pour toutes : "Je veux que tous mes paragraphes soient indents de 30 pixels sur la droite" et chaque fois que vous crirez un nouveau paragraphe, celui-ci sera automatiquement mis en retrait. Avant le XHTML ( l'poque du HTML) ce genre de chose tait impossible, ou plutt difficile et rptitif. Il y 2 autres proprits similaires : word-spacing : l'espace entre les mots (en pixels). letter-spacing : l'espace entre les lettres (en pixels). 53

Effet de style
Il existe en CSS une srie de proprits qui permettent de donner un peu plus de style aux pages web. Cela va de la mise en gras, italique, soulign la mise en capitales, en passant par la possibilit de faire clignoter le texte ! Mettre en italique Pour mettre en italique en CSS on utilise font-style, qui peut prendre 3 valeurs :
italic , oblique : le texte sera mis en italique, normal : le texte sera normal (par dfaut). Cela vous permet d'annuler une mise en italique. Par exemple, si vous voulez que les textes entre <em> ne soient plus en italique, vous devrez crire :
Code source 42: petites capitales em { font-style: normal; }
54

Code source 43: mise en italique
h1 { text-align: center; font-family: Arial, "Times New Roman", Verdana, serif; } h2 { font-style: italic; /* Les titres h2 seront en italique ! */ text-indent: 30px; /* On dcale un peu les sous-titres */ font-family: Arial, "Times New Roman", "Arial Black", Verdana, serif; }
Mettre en gras La mise en gras en CSS permet de mettre en gras par exemple les titres, certains paragraphes entiers etc... La proprit CSS pour mettre en gras est font-weight, et prend les valeurs suivantes : bold : le texte sera en gras. normal : le texte sera crit normalement (par dfaut). Exemple : Code source 44: petites capitales
p { font-weight: bold; }
55

Les majuscules en CSS Le CSS permet d'appliquer des effets trs intressants sur du texte, en modifiant automatiquement les majuscules. Nous allons voir 2 proprits CSS qui travaillent sur les majuscules. Commenons par la proprit font-variant, toute simple, qui prend uniquement 2 valeurs diffrentes : small-caps : le texte sera crit en petites capitales. normal : le texte sera crit normalement (par dfaut). Code source 45: petites capitales
p { font-variant: small-caps; } Vous crivez vos paragraphes normalement (comme d'habitude), et vous laissez CSS s'occuper de transformer a pour vous automatiquement en petites capitales.
56

Il y a une seconde proprit CSS qui travaille sur les majuscules elle aussi : text-transform. Elle peut prendre ces valeurs : uppercase : tout le texte sera crit en majuscules. lowercase : tout le texte sera en minuscules. capitalize : la premire lettre de chaque mot sera en majuscules. none : pas de transformation (par dfaut).
Code source 46: transformation (XHTML)
<h1>Je suis trs passion...</h1> <p>...mais je vais essayer de suivre pas pas. Enfin, si possible, mais je promets rien hein...<br /> <span class="mettre_en_majuscule"> ceci est un paragraphe que vous allez voir ecrit en majuscule, alors que pourtant dans le code xhtml il est ecrit en minuscule !??</span></p> <p class= "mettre_en_minuscule">CECI EST UN PARAGRAPHE QUE VOUS ALLEZ VOIR ECRIT EN MINUSCULE, ALORS QUE POURTANT DANS LE CODE XHTML IL EST ECRIT EN MAJUSCULES!!!</p>
57

Code source 47: transformation (CSS)
h1 { text-align: center; font-family: Arial, "Times New Roman", Verdana, serif; text-transform: capitalize; /* Les premires lettres des mots du titre seront en majuscules */ } .mettre_en_majuscule { text-transform: uppercase; /* Si j'ai envie de me faire entendre, je mets en majuscules */ } .mettre_en_minusule { text-transform: lowercase; font-style: italic; /* Le texte chuchot sera en minuscules et italique */ }
N.B: la proprit text-transform est vraiment pratique pour changer l'apparence de tout un texte en un clin d'oeil !, le CSS n'est pas utilis seulement pour aligner le texte et changer la police. Il peut aussi agir directement sur un texte dj crit pour modifier ses majuscules / minuscules.
58

Un peu de dco ? Cette proprit CSS porte bien son nom : text-decoration Elle permet, entre autres, de souligner le texte. Voici les diffrentes valeurs qu'elle peut prendre : underline : soulign. line-through : barr. overline : ligne au-dessus. blink : clignotant. Attention, cette proprit ne marche pas sous Internet Explorer. Elle fonctionne en revanche bien sur tous les autres navigateurs, dont Mozilla Firefox. none : normal (par dfaut).
Code source 48: un peu de dco grce au CSS <h1>A ne pas manquer !</h1> <p>La proprit CSS <em>text-transform</em> permet de dcorer un peu son texte :<br /> <span class="souligne">en le soulignant</span>...<br /> <span class="barre">en le barrant</span>...<br /> ...ou encore <span class="ligne_dessus">en mettant une ligne au-dessus</span>.</p>
59

Code source 49: un peu de dco grce au CSS
h1 { text-align: center; font-family: "Arial Black", Arial, "Times New Roman", serif; text-decoration: blink; /* Le titre sera clignotant ! (ne fonctionne pas sous IE) */ } .souligne { text-decoration: underline; } .barre { text-decoration: line-through; } .ligne_dessus { text-decoration: overline; } N.B: N'oubliez pas que l'intrt du CSS c'est aussi de pouvoir cumuler les styles. L j'ai cr une class "souligne" qui ne fait que souligner pour l'exemple, mais dans la pratique on cre souvent des class combinant les styles, comme par exemple une class "important" qui souligne le texte, le met en gras, et l'crit en plus gros
60

Les couleurs Mettre en place le CSS
Nous allons ici voir quelles sont toutes ces possibilits qu'offre le CSS pour choisir une couleur. La proprit qui permet de changer la couleur du texte est color . Indiquer le nom de la couleur La mthode la plus simple et la plus pratique pour choisir une couleur est de taper son nom (in english, of course). Le seul dfaut de cette mthode est qu'il n'existe que 16 couleurs dites "standard". D'autres couleurs officieuses existent, mais comme elles ne fonctionneront pas forcment pareil sur tous les navigateurs, je vais viter de vous les montrer.
Couleur white Aperu
silver
gray black red maroon lime green yellow olive blue navy fuchsia purple aqua teal
61

Voici le code CSS de test
Code source 50: de toutes les couleurs h1 { text-align: center; font-family: Arial, "Arial Black", "Times New Roman", serif; text-decoration: underline; color: green; /* Le titre en vert (pourquoi pas ?) */ } p { text-indent: 20px; color: blue; /* Les paragraphes en bleu */ } strong /* ... et les mots importants en rouge clignotant ! */ { color: red; text-decoration: blink; }
62

Et la page XHTML qui va avec
Code source 51: de toutes les couleurs
<h1>De toutes les couleurs</h1>

<p>Salut et bienvenue dans cette page haute en couleurs ! J'utilise des <strong> noms de couleurs standards</strong> dans mon CSS pour gayer un peu la page. Ainsi, "red" signifie "rouge", "blue" signifie "bleu" etc.</p> <p>Grce l'attribut <em> color </em> du CSS, j'ai (entre autres) pu convertir <strong> automatiquement </strong> tous mes mots importants (dans une balise "strong") en textes rouge clignotant ! Comme a, on ne risque pas de les louper ;o)</p>
La notation hexadcimale La notation hexadcimale permet de choisir une couleur, grce une combinaison de lettres et de chiffres qui indiquent une couleur. Exp : #FF5A28. On doit toujours commencer par crire un dise (#), suivi de 6 lettres ou chiffres allant de 0 9 et de A F. Ces lettres ou chiffres fonctionnent deux par deux. Les 2 premiers indiquent une quantit de rouge, les 2 suivants une quantit de vert, et les 2 derniers une quantit de bleu. (qui sont les composantes Rouge-VertBleu de la couleur) . Exemple : #000000 : la couleur noire, #FFFFFF : couleur blanche.
63

La mthode RGB Que signifie RGB ? En anglais, Rouge-Vert-Bleu s'crit Red-Green-Blue, ce qui s'abrge en "RGB". Comme pour la notation hexadcimale, on doit dfinir une quantit de rouge, de vert et de bleu pour choisir une couleur.
Color: rgb(243, 65, 243)
64

Bote couleur (Benjamin chartier, logiciel gratuit)
Je mets votre disposition un petit logiciel tout simple, spcialis dans le choix d'une couleur. Ce logiciel s'appelle "La bote couleurs"
Code source 52: La mthode RGB h1 { text-align: center; color: rgb(243,65,243); }
Longlet recommand est ("RVB") ou l'onglet "Visuel". Vous pouvez rcuprer en bas droite le numro de la couleur en hexadcimal (le numro commence toujours par un #), ou encore recopier les valeurs de Rouge-Vert-Bleu (RVB) dans le CSS. Enfin, et c'est certainement la fonctionnalit la plus intressante du logiciel, vous pouvez utiliser sur la pipette en haut droite pour rcuprer n'importe quelle couleur s'affichant sur votre cran !
65

Le fond Contrairement ce qu'on pourrait croire, le fond ne dsigne pas forcment le fond de toute une page web. On peut aussi appliquer un fond uniquement aux titres, ou aux paragraphes, ou encore certains mots d'un paragraphe. Il faut tout d'abord savoir qu'il existe 2 types de fonds : Les fonds comportant une couleur Les fonds comportant une image de fond Nous allons commencer nous intresser la couleur de fond dans un premier temps, puis nous verrons comment faire pour avoir une image de fond. La couleur de fond Pour indiquer une couleur de fond, on utilise la proprit CSS backgroundcolor. Elle s'utilise de la mme manire que la proprit color, c'est--dire que vous pouvez taper le nom d'une couleur, l'crire en notation hexadcimale ou encore utiliser la mthode RGB. Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise <body>. La balise <body> correspond toute la page web, c'est donc en modifiant sa couleur de fond que l'on changera la couleur de fond de la page web.
Code source 53: Une couleur de fond body /* On travaille sur la balise body, donc sur TOUTE la page */ { background-color: black; /* Le fond de la page sera noir */ color: white; /* Le texte de la page sera blanc */ }
66

On a indiqu une couleur de texte blanche la balise <body>, et tous les paragraphes <p> et titres <h1> ont pris cette couleur. Comment cela se fait-il ? C'est en fait simple comprendre et intuitif. La balise <body>, contient les balises de paragraphe <p> et de titre <h1>. SI on applique une couleur de fond noire et une couleur de texte blanche la balise <body>, tous les titres et paragraphes auront eux aussi une couleur de fond noire et un texte de couleur blanche... C'est ce phnomne qui s'appelle l'hritage : on dit que les balises qui se trouvent l'intrieur d'une autre balise "hritent" de ses proprits. Dautre part, si vous prcisez par la suite que les titres sont en rouge, ce style aura la priorit et vos titres seront donc en rouge. En revanche, si vous n'indiquez rien de particulier (comme on l'a fait tout l'heure), alors vos titres hriteront de la couleur blanche. Cela ne fonctionne pas uniquement pour la couleur, mais pour toutes les proprits CSS seront hrites : vous pouvez par exemple demander une taille de texte de "1.3em" dans la balise <body>, et tous vos titres et paragraphes seront de cette taille-l. Voici un exemple qui montre comment on "annule" l'hritage pour que nos titres ne soient pas crits en blanc. Cet exemple contient une class "surligne" qui met le texte sur fond jaune pour donner une impression de surlignage.
67

Code source 54: l'hritage
body { background-color: black; color: white; /* Toutes les balises contenues dans body verront leur texte color en blanc... */ } h1 { color: red; /* ... sauf si je demande expressment de changer la couleur par la suite */ } .surligne /* Un style qui permet par exemple de surligner certains mots d'un texte */ { background-color: yellow; color: black; /* Le texte surlign sera crit en noir, parce que le blanc sur fond jaune on voit rien ;o) */ }
Comme vous pouvez le constater, on n'a pas indiqu de couleur particulire pour les paragraphes (<p>), donc ils ont hrit de la couleur blanche. En revanche, le titre n'a pas hrit de la couleur blanche car on a crit qu'on voulait qu'il soit en rouge. La class "surligne" vous montre qu'on peut sans problme appliquer une couleur de fond certains mots d'un texte. 68

Mettre en place le CSS L'image de fond
Tout comme pour la couleur de fond, l'image de fond ne s'applique pas forcment la page entire, on peut tout aussi bien mettre une image de fond aux titres, paragraphes, citations etc... La proprit permettant d'indiquer une image de fond est background-image. Comme valeur, on doit lui mettre url("nom_de_l_image.png"). Par exemple : background-image:url("fond.png");
Bien entendu, votre fond n'est pas forcment en PNG, il peut aussi tre en JPEG ou en GIF. L'adresse indiquant o se trouve l'image de fond peut tre en absolu (http://...) ou en relatif (fond.png).
N.B : Attention lorsque vous mettez une adresse en relatif dans le fichier CSS ! L'adresse de l'image doit tre indique par rapport au fichier .css et non pas par rapport au fichier .html. Ainsi, si votre site comporte 2 dossiers : "css" et "images", il vous faudra taper : "../images/fond.png" pour rcuprer l'image de fond. Si vous ne mettez pas le chemin correct, votre image de fond ne s'affichera pas.
69
Si on veut appliquer une image de fond toute la page, on doit l encore utiliser la balise <body> : Code source 55: une image de fond body { background-image: url("images/neige.png"); } h1 { font-style: italic; font-family: "Arial Black", Arial, Verdana, serif; text-align: center; } blockquote p /* Tous les paragraphes contenus dans un blockquote */ { text-align: justify; text-indent: 25px; }
70

Il existe par ailleurs trois autres proprits CSS en rapport avec limage de fond. La premire permet de "fixer" le fond, pour qu'il ne bouge pas en mme temps que le texte. Cette proprit est background-attachment et peut prendre 2 valeurs : - fixed : l'image de fond reste fixe. - scroll : l'image de fond dfile avec le texte (par dfaut). En rutilisant le mme fichier XHTML que tout l'heure, mais en changeant un peu le CSS pour y rajouter background-attachment, on obtient ceci :
Code source 56 : une image de fond fixe body { background-image: url("../images/neige.png"); background-attachment: fixed; /* Le fond restera fixe */ } h1 { font-style: italic; font-family: "Arial Black", Arial, Verdana, serif; text-align: center; } blockquote p { text-align: justify; text-indent: 25px; }
71

La seconde proprit est celle qui gre la rptition de l'image de fond. Cette proprit s'appelle background-repeat et peut prendre ces valeurs : no-repeat : le fond ne sera pas rpt. L'image sera donc unique sur la page. repeat-x : le fond sera rpt uniquement sur la premire ligne, horizontalement. repeat-y : le fond sera rpt uniquement sur la premire colonne, verticalement. repeat : le fond sera rpt (par dfaut).
Gardons encore notre mme fichier XHTML, mais appliquons cette fois un fond dgrad qui se rpte uniquement verticalement.
Un dgrad
72

Code source 57 : une image de fond rpte verticalement body { background-image: url("../images/degrade.png"); background-repeat: repeat-y; /* Le fond ne se rptera que sur la premire colonne, verticalement */ } h1 { font-style: italic; font-family: "Arial Black", Arial, Verdana, serif; text-align: center; } blockquote p { text-align: justify; text-indent: 25px; }
73

La dernire des proprits sur le fond concerne la position de l'image de fond. On peut indiquer o doit se trouver l'image de fond avec background-position. Cette proprit n'est intressante que si vous avez mis "backgroundrepeat:no-repeat;" (un fond qui ne se rpte pas). Vous devez donner background-position 2 valeurs en pixels pour indiquer la position du fond par rapport au coin suprieur gauche de la page (ou du paragraphe si vous appliquez le fond un paragraphe). Ainsi, si vous tapez : background-position:30px 50px; ... votre fond sera plac 30 pixels de la gauche et 50 pixels du haut. Il est aussi possible de mettre ces valeurs en anglais : top : en haut. bottom : en bas. left : gauche. center : centr. right : droite. Il est possible de combiner ces mots. Par exemple, pour aligner une image en haut droite, vous taperez : background-position:top right; (voir exp. suivant)

74

Code source 58: une fond positionn dans la page
body { background-image: url(/images/skieur.gif"); /* Le fond est l'image "skieur.gif" */ background-repeat: no-repeat; /* Le fond ne se rpte pas */ background-position: top right; /* Le fond est align en haut droite */ background-attachment: fixed; /* Le fond est fix */ } h1 { font-style: italic; font-family: "Arial Black", Arial, Verdana, serif; text-align: center; } blockquote p { text-align: justify; text-indent: 25px; }
75

Il est possible dutiliser une sorte de "mga-proprit" background qui peut prendre plusieurs valeurs combines des proprits background-image, background-repeat, background-attachment et background-position. Pour toutes les "mga-proprits" comme background, il faut savoir que : L'ordre des valeurs n'a pas d'importance. Vous pouvez combiner les valeurs dans n'importe quel ordre : background:url("../images/skieur.gif") no-repeat top right fixed; background:no-repeat fixed top right url("../images/skieur.gif"); Vous n'tes pas obligs de mettre toutes les valeurs. Ainsi, si vous ne voulez pas mettre fixed, vous pouvez l'enlever sans problme : background:url("../images/skieur.gif") no-repeat top right; La "mga-proprit" n'est intressante que si vous avez plusieurs valeurs combiner bien entendu.
76
L'exemple suivant donne le mme rsultat que l'exemple (code Source 58) prcdent, mais il util background pour combiner les valeurs et rendre le fichier CSS plus petit.
Code source 59: une fond positionn dans la page body { background-image: url("../images/skieur.gif"); /* Le fond est l'image "skieur.gif" */ background-repeat: no-repeat; /* Le fond ne se rpte pas */ background-position: top right; /* Le fond est align en haut droite */ background-attachment: fixed; /* Le fond est fix*/ } /*background: url("images/skieur.gif") no-repeat top right fixed;*/ h1 { font-style: italic; font-family: "Arial Black", Arial, Verdana, serif; text-align: center; } blockquote p { text-align: justify; text-indent: 25px; }
77
Dans cette section, nous allons voir comment appliquer les proprits CSS des moments ou des endroits prcis. Par exemple, nous allons apprendre modifier l'apparence d'un lien au passage de la souris, modifier automatiquement la premire lettre d'un paragraphe etc...
Des liens sympas Lapplication dun style la balise <a> permet de modifier lapparence des liens. Par dfaut, les liens s'affichent en bleu et sont souligns. Supposons que vous ne vouliez pas du soulignement, vous allez utiliser : text-decoration:none; ... ce qui aura pour effet d'annuler le soulignement.

a {
Code source 60: des liens pas bleus-souligns
text-decoration: none; /* Les liens ne seront plus souligns */ color: red; /* Les liens seront en rouge au lieu de bleu */ font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */ }
78

Nous allons apprendre modifier l'apparence des liens : ... lorsque le visiteur pointe dessus avec la souris. ... lorsque le visiteur clique dessus. ... lorsque le visiteur a slectionn le lien. ... lorsque le visiteur a dj vu la page.
Au passage de la souris Le premier pseudo-format quon va voir s'appelle :hover. Comme tous les autres pseudo-formats que nous allons tudier, c'est une information que l'on rajoute aprs le nom de la balise (ou de la class) dans le CSS, comme ceci
Exemple de pseudo-format a:hover { }
79

":hover" signifie "Dessus". "a:hover" signifie donc : "Quand la souris est sur le lien" (quand on pointe dessus). A gauche, vous tapez comme d'habitude la balise concerne (en l'occurence <a>, la balise de lien), et droite vous mettez le pseudo-format. Voici un exemple de prsentation des liens, mais n'hsitez pas inventer le vtre :
Code source 61: des liens qui changent quand on pointe dessus
a { text-decoration: none; /* Les liens ne seront plus souligns */ color: red; /* Les liens seront en rouge au lieu de bleu */ font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */ }
a:hover /* Quand le visiteur pointe sur le lien */ { text-decoration: underline; /* Le lien deviendra soulign quand on pointera dessus */ color: green; /* Le lien sera crit en vert quand on pointera dessus */ }
80

La bonne nouvelle, c'est que vous pouvez appliquer le pseudo-format ":hover" n'importe quelle balise, la mauvaise nouvelle, c'est que pour Internet Explorer le ":hover" ne marche que sur les liens. Sur tous les autres navigateurs (dont Mozilla Firefox) fonctionne la perfection. Voici un exemple d'utilisation du :hover sur un paragraphe ( tester avec un autre navigateur que IE) :
Code source 62 : un paragraphe surprenant p:hover /* Quand on pointe sur un paragraphe */ { background-color: #CFE1EB; /* Le fond du paragraphe change de couleur */ text-indent: 20px; }
81

Au moment du clic Le pseudo-format :active permet d'appliquer un style particulier au moment du clic. Le lien gardera cette apparence trs peu de temps : juste pendant que vous cliquez avec le bouton de la souris. En clair, ce n'est pas forcment toujours bien visible. Un effet qui peut marcher avec :active, c'est de changer la couleur de fond du lien. Comme a, on voit bien qu'on a cliqu
Code source 63: au moment du clic
a:active /* Quand le visiteur clique sur le lien */ { background-color: #FFCC66; } a:hover /* Quand le visiteur pointe sur le lien */ { text-decoration: underline; color: green; } a /* Lien normal */ { text-decoration: none; color: red; font-style: italic; }
82

Lorsque le lien est slectionn Le pseudo-format :focus applique un style lorsque le lien est slectionn. Malheureusement, :focus ne marche pas du tout sur IE. Contrairement au :hover qui marchait au moins sur les liens, le :focus ne fonctionnera pas du tout sur ce navigateur. Pour ce qui est des liens, je vous mets un exemple trs similaire au prcdent (on change le fond) pour que vous puissiez comparer :
Code source 64: lorsque le lien est slectionn
a:focus /* Quand le visiteur slectionne le lien */ { background-color: #FFCC66; } a:hover /* Quand le visiteur pointe sur le lien */ { text-decoration: underline; color: green; } a /* Lien normal */ { text-decoration: none; color: red; font-style: italic; }
83

Le navigateur IE ne comprend pas le focus, pour remdier ce problme, on applique le mme style au :focus et au :active, en sparant les noms par une virgule :
Donner le mme style au focus et au active
a:active, a:focus /* Appliquer le mme style aux liens actifs et focus */ { background-color: #FFCC66; }
L'avantage de cette technique, c'est que si le navigateur est IE, il prendra uniquement le :active (et le fond sera un peu color), tandis que si c'est un autre navigateur le fond restera plus longtemps grce au :focus.
84

Quand la page a dj t t vue
Code source 65 : lorsque la page a dj t vue a:visited /* Quand le visiteur a dj vu la page concerne */ { text-decoration: line-through; } a:focus /* Quand le visiteur slectionne le lien */ { background-color: #FFCC66; } a:hover /* Quand le visiteur pointe sur le lien */ { text-decoration: underline; color: green; } a /* Lien normal */ { text-decoration: none; color: red; font-style: italic; }
Il est possible d'appliquer un style un lien vers une page qui a dj t vue. Par dfaut, le navigateur colore le lien en un violet immonde. Il est possible de modifier l'apparence des liens qui ont dj t vus grce au pseudo-format :visited (qui signifie "visit"). Une application marrante (mais pas trs utile) de ce pseudo-format pourrait tre de barrer tous les liens qui ont t vus :
85

Premire lettre et premire ligne En CSS, il est possible de modifier automatiquement l'apparence de la premire lettre et de la premire ligne du texte contenu dans une balise. Il s'agit l encore de pseudo-formats. Si on a tendance utiliser ceux-l plutt sur des paragraphes, n'oubliez pas que a fonctionne aussi bien sur d'autres balises (comme les titres). Premire lettre Pour modifier l'apparence de la premire lettre, il faut utiliser le pseudoformat : first-letter. On peut s'en servir pour crire en gras et en plus gros la premire lettre de tous les paragraphes de votre page.
Code source 66 : premire lettre p:first-letter /* La premire lettre de chaque paragraphe */ { font-weight: bold; /* En gras */ font-size: 1.2em; /* Ecrit lgrement plus gros que la normale */ color: blue; /* En bleu */ } p { text-indent: 20px; }
86

Premire ligne Un autre pseudo-format intressant permet de modifier cette fois la premire ligne. Il s'agit de :first-line. Appliqu aux paragraphes, il permet d'inciter la lecture du texte. Par exemple, vous pourriez automatiquement crire en petites capitales la premire ligne de chaque paragraphe, afin de les rendre plus attrayants : Code source 67 : premire ligne p:first-line /* La premire ligne de chaque paragraphe */ { font-variant: small-caps; /* En petites capitales */ color: blue; }
p {
text-indent: 20px; }
87

Exemple dutilisation des pseudos formats :before et :after Les pseudos formats :before et :after sont utilises pour ajouter automatiquement du texte au dbut et la fin de certains paragraphes, afin de diminuer la quantit de texte que vous avez crire. Exemple : supposons que je pose beaucoup de questions dans ma page web. En temps normal, j'crirai ceci en XHTML pour indiquer qu'une personne pose une question : <p>Question : quel est l'ge du webmaster ?</p> Pour automatiser linsertion du texte Question au dbut et du ? la fin, on peut crer une class spcifique nomme question (voir exemple suivant)

Code source 68: Code CSS relatif aux questions Code source 68: Questions <h1>Plein de questions</h1> <p class="question">Quel est votre age</p> <p class="question">Quel votre site favoris</p> <p class="question">Quel est votre couleur prfre</p> .question:before /* Avant chaque question */ { content: "Question : "; /* Commencer par Question : */ } .question:after /* Aprs chaque question */ { content: " ?"; /* Rajouter un point d'interrogation */ }
88

content est une proprit CSS vraiment particulire, vu qu'elle permet d'indiquer le texte que l'on veut mettre "Avant" (before) ou "Aprs" (after). Vous n'tes pas obligs de mettre uniquement la proprit content avec un :before ou :after, vous pouvez aussi utiliser tous les styles CSS que vous connaissez. Ces styles s'appliqueront au texte rajout par le :before ou :after.
Code source 69: Modifier le style du texte avant/aprs .question:before { content: "Question : "; font-weight: bold; /* "Question" sera en gras */ color: blue; /* "Question" sera en bleu */ } .question:after { content: " ?"; }
N.B : Si vous appliquez le pseudo-format :first-letter la class question, pour mettre en gras par exemple la premire lettre, c'est la premire lettre de "Question :" (le Q) qui sera mise en gras, et non pas la lettre qui se trouve juste aprs "Question :" :first-letter s'appliquera donc la premire lettre du texte crit avec le 89 :before.

Une image au lieu du texte Il est aussi possible d'indiquer une image la place du texte avec le :before et le :after. On utilise toujours la proprit content, mais au lieu de taper du texte entre guillemets, on va mettre une valeur "url" comme ceci : Code source 70: Modifier le style du texte avant/aprs .question:before { content: url("images/qst.gif"); /* Mettre une image de question */ } .question:after { content: " ?"; } N.B : N'oubliez pas que le chemin relatif vers l'image se fait partir de la position du fichier CSS et non pas du fichier XHTML. Si vous vous trompez dans le chemin, l'image ne s'affichera pas. 90
XHTML et CSS
Les listes puces
Diffrents types de listes Dans un premier temps nous apprendrons crer des listes puces d'un point de vue XHTML, et dans un second temps nous apprendrons dcorer ces listes via de nouvelles proprits CSS. Tout d'abord, il faut savoir qu'il existe 3 types de listes puces : - Les listes non ordonnes, Les listes ordonnes et Les listes de dfinitions. Liste non ordonne Crer une liste puce non ordonne est trs simple. Il suffit d'utiliser la balise <ul> que l'on referme un peu plus loin avec un </ul>, et chaque lment de la liste est crit entre les balises <li></li> Code source 71: Une liste puce non ordonne
Mise en bote
Les tableaux
Les formulaires
<ul> <li>Fraises</li> <li>Framboises</li> <li>Cerises</li> </ul> N.B : Pour faire des listes imbriques ( une liste puce DANS une liste puces). vous pouvez ouvrir une seconde balise <ul> l'intrieur d'un lment <li></li>. Si vous fermez les balises dans le bon ordre, il ne devrait pas y avoir de problme . 91
XHTML et CSS
Les listes puces
Liste ordonne Pour faire une liste ordonne, on utilise la balise <ol></ol>. Les lments de la liste sont insrer laide de la balise <li></li>. Lordre des lments (<li></li>) est important.
Code source 72: Une liste puce ordonne
Mise en bote
<ol> <li>Premier</li> <li>Second</li> <li>Troisime</li> </ol>

Liste de dfinition Une liste de dfinition est marque par les balises <dl></dl>. Pour les lments de cette liste, on utilise respectivement, la balise <dt></dt> pour indiquer l lment et la balise <dd></dd> pour indiquer sa dfinition.
Les tableaux
Les formulaires
Code source 73: Une liste de dfinition <dl> <dt>Chat</dt> <dd>Animal 4 pattes qui fait "Miaou !"</dd> <dt>Chien</dt> <dd>Animal 4 pattes qui fait "Ouaf Ouaf !"</dd> <dt>XHTML</dt> <dd> eXtensible HyperText Markup Language </dd> </dl>
92
XHTML et CSS
Les listes puces
Dcoration des listes
Ce que nous allons voir maintenant ce sont des proprits CSS spcialises dans la prsentation des listes puces. Retrait des listes La premire des proprits que je veux vous montrer est trs facile utiliser. Elle permet d'indiquer si on veut que la liste soit mise en retrait ou non. Cette proprit s'appelle list-style-position, et peut prendre 2 valeurs : inside : la liste n'est pas mise en retrait. outside : la liste est mise en retrait (par dfaut). Ce schma qui vous explique la diffrence entre inside et outside :
Mise en bote
Les tableaux
Les formulaires
93
XHTML et CSS
Les listes puces
Exemple de retrait des listes
Code source 74: retrait des listes (XHTML) <p>Voici une liste avec retrait (par dfaut) :</p>
Mise en bote
Les tableaux
<ul class="retrait"> <li>Liste<br /> puces</li> <li>Ligne 1<br />Ligne 2</li> <li>Vous pouvez voir<br />que le texte est dcal sur la droite</li> </ul> <ul class="pas_de_retrait"> <li>Liste<br /> puces</li> <li>Ligne 1<br />Ligne 2</li> <li>Vous pouvez voir<br />que le texte n'est pas dcal sur la droite</li> </ul> Code source 74: retrait des listes (CSS) .pas_de_retrait { list-style-position: inside; } .retrait { list-style-position: outside; }
Les formulaires
94
XHTML et CSS
Les listes puces
Reprsentation de la puce La proprit list-style-type permet de changer l'apparence de la puce. Pour les listes ordonnes (<ul>) : disc : un disque noir (par dfaut). Aperu : circle : un cercle. Aperu : square : un carr. Aperu : none : aucune puce ne sera utilise. Pour les listes ordonnes (<ol>), le choix est vaste : decimal : des nombres 1, 2, 3, 4, 5... (par dfaut) decimal-leading-zero : des nombres commenant par zro (01, 02, 03, 04, 05...). Ne fonctionne pas sur Internet Explorer upper-roman : numrotation romaine, en majuscules (I, II, III, IV, V...) lower-roman : numrotation romaine, en minuscules (i, ii, iii, iv, v...) upper-alpha : numrotation alphabtique, en majuscules (A, B, C, D, E...) lower-alpha : numrotation alphabtique, en minuscules (a, b, c, d, e...) lower-greek : numrotation grecque. Ne fonctionne pas sur Internet Explorer
Mise en bote
Les tableaux
Les formulaires
95
XHTML et CSS
Les listes puces
Exemple des listes non ordonnes
Code source 75: Listes non ordonnes (XHTML) <h2>Quelques listes non ordonnes</h2>
Mise en bote
Les tableaux
Les formulaires
<p>liste non ordonne <em>none</em> (sans puces) :</p> <ul class="rien"> <li>Liste</li> <li></li> <li>puces</li> </ul> <p>liste non ordonne avec <em>circle</em> :</p> <ul class="cercle"> <li>Liste</li> <li></li> <li>puces</li> </ul> <p>liste non ordonne avec <em>square</em> :</p> <ul class="carre"> <li>Liste</li> <li></li> <li>puces</li> </ul>
96
XHTML et CSS
Les listes puces
Exemple des listes ordonnes
Code source 75: Listes ordonnes (XHTML) <h2> Listes ordonnes</h2>
Mise en bote
<p>liste ordonne avec <em>decimal-leading-zero</em> :</p> <ol class="commence_a_zero"> <li>Un</li> <li>Deux</li> <li>Trois</li> </ol> <p>liste ordonne avec <em>lower-alpha</em> :</p> <ol class="lettres_minuscules"> <li>Un</li> <li>Deux</li> <li>Trois</li> </ol> <p>liste ordonne avec <em>upper-roman</em> :</p> <ol class="chiffres_romains"> <li>Un</li> <li>Deux</li> <li>Trois</li> </ol>
Les tableaux
Les formulaires
97
XHTML et CSS
Les listes puces
Les codes CSS des listes puces
Code source 75: Listes ordonnes (XHTML) /* Listes puces non ordonnes */ .lettres_minuscules { list-style-type: lower-alpha; } .chiffres_romains { list-style-type: upper-roman; } /* Quelques styles supplmentaires juste pour la prsentation*/ h2 { text-indent: 20px; font-family: Arial, Verdana, "Times New Roman", serif; } em { background-color: yellow; } Code source 75: Listes ordonnes (XHTML)
Mise en bote
Les tableaux
Les formulaires
.cercle { list-style-type: circle; } .carre { list-style-type: square; } .rien { list-style-type: none; } /* Listes puces ordonnes */ .commence_a_zero { list-style-type: decimal-leading-zero; }
98
XHTML et CSS
Les listes puces
Changer limage de la puce La proprit CSS list-style-image permet d'utiliser n'importe quelle image la place d'une puce. Vous devez lui indiquer comme valeur "url" suivi de l'adresse de l'image utiliser.!
Code source 76: Une image pour une liste puces ul /* Ma liste aura des puces en forme de dossiers */ { list-style-image: url("images/dossier.png"); } /* Juste pour amliorer la prsentation : */ a { color: blue; text-decoration: none; } a:hover { text-decoration: underline; }
Mise en bote
Les tableaux
Les formulaires
N.B : L'image de puce peut tre de n'importe quel type (PNG, GIF ou JPEG). Attention cependant, l'image ne doit pas tre trop grande sinon elle sera coupe. Je vous conseille d'utiliser une taille d'environ 15x15 pixels. 99
XHTML et CSS
Les listes puces
Block et Inline!!!! On peut classer les balises XHTML dans une des 2 catgories suivantes : inline et block (en franais : "En ligne" et "Bloc"). Par exemple, <p></p> ? Oui, c'est une balise block. Et <a></a> ? Ca c'est une balise inline. block : une balise de type "block" sur votre page web cre automatiquement un retour la ligne avant et aprs. Il suffit d'imaginer tout simplement un bloc. Votre page web sera en fait constitue d'une srie de blocks la suite les uns des autres. Mais vous verrez qu'en plus, il est possible de mettre un block l'intrieur d'un autre, ce qui va augmenter considrablement nos possibilits pour crer le design de notre site ! inline : une balise de type "inline" se trouve obligatoirement l'intrieur d'une balise "block". Une balise inline ne cre pas de retour la ligne, le texte qui se trouve l'intrieur s'crit donc la suite du texte prcdent, sur la mme ligne (c'est pour cela que l'on parle de balise "en ligne"). Est-ce que <p></p> cre un retour la ligne ? Oui, c'est donc une balise de type block. Est-ce que <a></a> cre un retour la ligne ? Non, le texte contenu dans cette balise s'crit la suite du texte prcdent, il reste sur la mme ligne. C'est donc une balise de type inline.
Mise en bote
Les tableaux
Les formulaires
100
XHTML et CSS
Les listes puces
Quelque exemples Afin de mieux vous aider assimiler quelles balises sont inline et quelles balises sont block, voici un petit tableau listant quelques balises courantes. Balise block : <p><blockquote> <h1><h2><ol><ul> Balise inline : <em> <strong> <q> <a> <sup> <img> Les balises universelles Ce sont des balises qui n'ont aucun sens particulier (contrairement <p> qui veut dire "paragraphe", <strong> "important" etc...). Le principal intrt de ces balises c'est de pouvoir appliquer une class (ou un id) pour le css quand aucune autre balise ne convient. Il existe 2 balises gnriques, et comme par hasard la seule diffrence entre les deux c'est que l'une d'elle est inline, l'autre est block : <span></span> (inline) et <div></div> (block) N.B : Les balises universelles sont "pratiques" dans certains cas, certes, mais attention ne pas en abuser. L'avantage c'est que si vous respectez ceci, votre code aura une certaine "logique".
Mise en bote
Les tableaux
Les formulaires
101
XHTML et CSS
Les listes puces
La taille Nous allons pour le moment travailler uniquement sur des balises de type "block". Pour commencer, nous nous intressons la taille des blocks. Contrairement un inline, un block a des dimensions prcises. Il a une largeur et une hauteur. width : c'est la largeur du block. A exprimer en pixels (px) ou en pourcentage (%). height : c'est la hauteur du block. L encore, on l'exprime soit en pixels (px), soit en pourcentage (%). Par dfaut, et c'est trs important savoir, un block prend 100% de la largeur disponible. Par exemple, un paragraphe (balise block) prend un 100% de largeur disponible (voir exemple suivant)
Mise en bote
Les tableaux
Les formulaires
Code Source 77: Un paragraphe (block) prend 100% de la largeur disponible <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna. </p> 102
XHTML et CSS
Les listes puces
Exemple : Le CSS suivant dit : "Je veux que tous mes paragraphes aient une largeur de 50%". Code source 78: largeur de 50% (CSS)
Mise en bote
p { width: 50%; text-align: justify; }
Les tableaux
Les pourcentages seront utiles pour crer un design qui s'adapte automatiquement la rsolution du visiteur. Toutefois, il se peut que vous ayez besoin de crer des blocks ayant une dimension prcise en pixels : Code Source 79: largeur en pixel (CSS) p { width: 250px; text-align: justify;
Les formulaires
103
XHTML et CSS
Les listes puces
Largeur et hauteur dun paragraphe Si vous voulez "couper" votre paragraphe pour qu'il soit d'une dimension exacte (exp. 250x100), vous allez devoir utiliser la proprit CSS overflow. Les valeurs que peut prendre sont les suivantes : visible (par dfaut) : si le texte dpasse les limites de taille, le block est agrandi de manire ce que tout soit visible. C'est ce que nous venons de constater. hidden : si le texte dpasse les limites, il sera tout simplement coup. On ne pourra pas voir tout le texte. scroll : l encore, le texte sera coup s'il dpasse les limites. Sauf que cette fois, le navigateur mettra en place des barres de dfilement pour qu'on puisse voir tout le texte. C'est un peu comme un cadre l'intrieur de la page. auto : mode "pilote automatique". En gros, c'est le navigateur qui dcide ou pas de mettre des barres de dfilement (il en mettra si c'est ncessaire).
Mise en bote
Les tableaux
Les formulaires
104
XHTML et CSS
Exemple dutilisation de la proprit overflow :
Les listes puces
Code source 80: Exemple doverflow (css) p /* Tous les paragraphes auront ces proprits CSS */ { width: 250px; height: 100px; text-align: justify; } /* Et chacun des paragraphes aura en plus une valeur d'overflow diffrente */ .coupe { overflow: hidden; } .barres_defilement { overflow: scroll; } .auto { overflow: auto; }
En hidden, on ne peut pas voir tout le texte. En scroll, le navigateur a mis des barres de dfilement verticales et horizontales (alors qu'on n'a pas besoin de la barre horizontale). En auto, le navigateur s'est charg denlever la barre horizontale car il nen a pas besoin. En pratique, on se sert plutt de overflow:auto; N.B : L'overflow vous sera trs utile si vous avez besoin de crer des "cadres" l'intrieur de votre page web.
Mise en bote
Les tableaux
Les formulaires
105
XHTML et CSS
Les listes puces
Les bordures Le CSS offre un large choix de bordures pour dcorer la page web. La proprit de CSS correspondante est border. Cest elle qui permet dindiquer quelle bordure on applique au block. Cette proprit possde trois valeurs pour modifier lapparence de la bordure : La largeur : indiquez la largeur de votre bordure. Mettez une valeur en pixels (comme 2px), ou utilisez un des mots-cl suivants : thin : bordure fine medium : bordure moyenne thick : bordure paisse C'est le navigateur qui choisit le nombre de pixels qui correspond thin, medium et thick. En gnral, c'est peu prs pareil sur tous les navigateurs.
Mise en bote
Les tableaux
Les formulaires
La couleur : c'est la couleur de votre bordure. Utilisez, comme on l'a appris, soit un nom de couleur ("black", "red"...), soit une valeur hexadcimale (#FF0000), soit une valeur rgb (rgb(198, 212, 37))
106
XHTML et CSS
Les listes puces
Le type de bordure : l, vous avez pas mal de choix. Votre bordure peut tre un simple trait, ou des pointills, ou encore des tirets etc... Voici les diffrentes valeurs disponibles : none : pas de bordure (par dfaut) solid : un trait simple. dotted : pointills. dashed : tirets. double : bordure double. groove : en relief. ridge : effet 3D. inset : autre effet 3D (on a l'impression que le block forme un creux). outset : encore un autre effet 3D (on a l'impression que le block est surlev).
Mise en bote
Les tableaux
Les formulaires
107
XHTML et CSS
Exemple dutilisation de la proprit border :
Les listes puces
Code source 81: bordures (CSS) p { width: 300px; text-align: justify; }
Code source 81: bordures (CSS) .dashed { border: 2px } .double { border: 4px } .groove { border: 4px } .ridge { border: 4px } .inset { border: 3px } .outset { border: 3px }
dashed red;
Mise en bote
Les tableaux
Les formulaires
.rien { border: none; } .solid { border: 2px solid black; } .dotted { border: 2px dotted green; }
double maroon;
groove teal;
ridge fuchsia;
inset black;
outset black;
108
XHTML et CSS
Les listes puces
En haut, droite, gauche, en bas...
Mise en bote
On peut mettre des bordures diffrentes en fonction du ct (haut, bas, gauche ou droite). Dans ce cas, vous devrez utiliser ces 4 proprits : border-top : bordure en haut. border-bottom : bordure en bas. border-left : bordure gauche. border-right : bordure droite.
Code source 82: bordures (CSS) p { width: 350px; } h2 { border-bottom: 2px solid black; } .haut_bas { border-top: 1px dashed red; border-bottom: 1px dashed red; }
Les tableaux
Code source 82: bordures (CSS)
Les formulaires
.points { border-top: 3px dotted blue; border-left: 2px solid green; border-right: 2px solid green; border-bottom: 3px dotted blue; } .tres_solide { border-left: 6px solid black; border-right: 6px solid gray; }
109
XHTML et CSS
Les listes puces
Ca marche aussi sur des balises inline ! On peut utiliser border sur des balises inline. Il y a une balise inline sur laquelle on utilise frquemment border : c'est <img /> (pour les images). En effet, vous vous souvenez que si vous transformez une image en lien, elle se voit dote d'une immonde bordure bleue : Code source 83: image (XHTML) Code source 84: pas de bordure sur limage (CSS) a img /* Toutes les images contenues dans un lien */ { border: none; /* Pas de bordure */ }
Mise en bote
<p> Vous souhaitez vous rendre vers un endroit magique ? Rien de plus simple, cliquez sur l'image ci-dessous :<br /> <a href="http://www.voyage.com"><img src="images/hawai.jpg" alt="Photo de Hawaii" title="Clique pour voyager !" /></a> </p>
Les tableaux
Les formulaires
N.B: Lcriture a img: signifie "Toutes les balises <img> contenues dans un lien <a>"... A la place de "border:none", on peut utiliser "border:0px" ou encore "border:0 ". 110
XHTML et CSS
Les listes puces
Les marges Tous les blocks possdent des marges. Ce qui est important, c'est de savoir qu'il existe 2 types de marges : Les marges intrieures Les marges extrieures Regardez bien ce schma :
Mise en bote
Les tableaux
Les formulaires
111
XHTML et CSS
Les listes puces
En CSS, on peut modifier la taille des marges avec les 2 proprits suivantes : padding : indique la taille de la marge intrieure. A exprimer en gnral en pixels (px). margin : indique la taille de la marge extrieure. L encore, on utilise le plus souvent des pixels. Pour bien voir les marges, prenons 2 paragraphes auxquels on met simplement une petite bordure : Code source 85: marge par dfaut (CSS)
Mise en bote
Les tableaux
p { width: 350px; border: 1px solid black; text-align: justify;
Les formulaires
} N.B : Comme vous pouvez le constater, il n'y a par dfaut pas de marge intrieure (padding). En revanche, il y a une marge extrieure (margin). C'est cette marge qui fait que 2 paragraphes ne sont pas colls et qu'on a l'impression de "sauter une ligne". Les marges par dfaut ne sont pas les mmes pour toutes les balises block. Essayez d'appliquer ce CSS des balises <div> qui contiennent du texte par exemple, vous verrez que l il n'y a par dfaut ni marge intrieure, ni marge extrieure ! 112
XHTML et CSS
Les listes puces
Supposons quon veut rajouter une marge intrieure de 12px aux paragraphes :
Code source 86: marges intrieures (CSS) p {
Mise en bote
}
width: 350px; border: 1px solid black; text-align: justify; padding: 12px; /* Marge intrieure de 12px */
Les tableaux
Maintenant, on veut que les paragraphes soient plus espacs entre eux. On rajoute la proprit margin pour demander ce qu'il y ait 50px de marge entre 2 paragraphes :
Code source 87: marges extrieures (CSS) p { width: 350px; border: 1px solid black; text-align: justify; padding: 12px; margin: 50px; /* Marge extrieure de 50px */ }
Les formulaires
N.B : margin (comme padding d'ailleurs) s'applique aux 4 cts du block. 113
XHTML et CSS
Les listes puces
En haut, droite, gauche, en bas... Voici la liste pour margin : margin-top : marge extrieure en haut. margin-bottom : marge extrieure en bas. margin-left : marge extrieure gauche. margin-right : marge extrieure droite Et la liste pour padding : padding-top : marge intrieure en haut. padding-bottom : marge intrieure en bas. padding-left : marge intrieure gauche. padding-right : marge intrieure droite. Code source 88: marges extrieures (CSS) p { width: 350px; border: 1px solid black; text-align: justify; padding: 12px; margin-bottom: 50px; }
Mise en bote
Les tableaux
Les formulaires
h1 Voici un exemple qui utilise margin-bottom { pour indiquer un espace en bas de chaque margin-left: 30px; paragraphe, ceci nous vitera davoir une marge gauche comme lexemple prcdent }
114
XHTML et CSS
Les listes puces
Centrer les blocks Il est tout fait possible de centrer des blocks, c'est mme trs pratique pour raliser un design centr quand on ne connat pas la rsolution du visiteur. Toutefois, et c'est trs important, cela ne fonctionne que si vous avez indiqu une largeur prcise (width) au block. Si vous n'avez pas indiqu de largeur, le block ne sera pas centr ! Prenons le cas de nos petits paragraphes. On leur a dj donn une largeur prcise ; maintenant si on veut les centrer sur notre cran nous allons mettre la valeur "auto" la proprit margin, comme ceci :
Code source 89: centrer le block (CSS) p {
Mise en bote
Les tableaux
Les formulaires
width: 350px; /* On a indiqu une largeur (obligatoire) */ border: 1px solid black; text-align: justify; padding: 12px; margin: auto; /* Le block est centr avec "auto" */ margin-bottom: 20px; }
N.B : le margin:auto ne peut fonctionner que si vous avez indiqu une largeur prcise pour votre block !. 115
XHTML et CSS
Les listes puces
Transformer un inline en block (vice versa) Les images (<img />) sont des balises de type inline, et vous prfreriez que ce soient des blocks ? Pas de problme ! Les titres (<h1>) sont de type block, et a vous a toujours embt, vous prfreriez que a soient des balises inline ? Aucun problme ! Il existe une proprit CSS trs puissante, elle s'appelle display. Cette proprit peut prendre les valeurs suivantes : block : la balise concerne deviendra de type block. inline : la balise concerne deviendra de type inline. En fait, display peut prendre d'autres valeurs. Pour transformer une balise inline en balise de type block, vous allez devoir taper : display:block; Par exemple, si je veux que TOUTES mes images soient de type block, j'crirai donc ceci : Une image block (CSS) img { display: block; } 116
Mise en bote
Les tableaux
Les formulaires
XHTML et CSS
Les listes puces
Les flottants La premire technique que nous allons voir, ce sont les flottants : faire entourer une image par du texte. Pour que vous voyiez bien de quoi on parle, voici ce que nous allons apprendre faire :
Mise en bote
Les tableaux
Les formulaires
Une image flottant gauche
Une image flottant droite
La proprit peut prendre 2 valeurs: left : l'lment flottera gauche. right : l'lment flottera... droite ! L'utilisation des flottants est trs simple. En fait, il n'y a que 2 choses faire : - Vous appliquez un float une balise. - Puis vous continuez crire du texte la suite normalement. 117
XHTML et CSS
Les listes puces
Faire flotter une image Nous allons apprendre ici faire flotter une image (qui est de type "inline" je vous rappelle). Voici le code XHTML que nous devons taper dans un premier temps :
Code source 90: Une image flottante (XHTML) <p><img src="images/flash.gif" class="imageflottante" alt="Image flottante" /></p> <p>Ceci est un texte normal de paragraphe, crit la suite de l'image mais qui l'"entourera" car l'image est flottante.<br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum mollis scelerisque nulla. Donec feugiat augue et sem. Nulla ut purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla volutpat leo quis magna. Donec accumsan lobortis ligula. Donec nec ante eu wisi tempus dictum. Sed nulla est, laoreet nec, consequat quis, iaculis non, tortor.</p>
Mise en bote
Les tableaux
Les formulaires
Code source 90: Une image flottante(CSS) .imageflottante { float: left; }
118
XHTML et CSS
Les listes puces
Mais comment faire si vous voulez qu'au bout d'un moment le texte continue en-dessous du flottant ? En gros, on aimerait pouvoir faire a :
Mise en bote
Les tableaux
Il existe en fait une proprit CSS qui permet de dire : "Stop, ce texte doit tre en-dessous du flottant et non plus ct". C'est la proprit clear qui peut prendre 3 valeurs : left : le texte se poursuit en-dessous aprs un float:left; right : le texte se poursuit en-dessous aprs un float:right; both : le texte se poursuit en-dessous, que ce soit aprs un float:left; ou aprs un float:right; Pour simplifier, on va utiliser tout le temps le clear:both, qui marche aprs un flottant gauche et aprs un flottant droite.
Les formulaires
119
XHTML et CSS
Les listes puces
Pour simplifier, on va utiliser tout le temps le clear:both, qui marche aprs un flottant gauche et aprs un flottant droite (a marche tous les coups). Pour illustrer son fonctionnement, on va prendre ce code XHTML : Code source 91: texte sous un flottant(XHTML) <p><img src="images/flash.gif" class="imageflottante" alt="Image flottante" /></p> <p>Ce texte est crit ct de l'image flottante.</p> <p class="dessous">Ce texte est crit sous l'image flottante.</p>
Mise en bote
Les tableaux
Les formulaires
Code source 91: texte sous un flottant(CSS) .imageflottante { float: left; } .dessous { clear: both; } 120
XHTML et CSS
Les listes puces Positionnement absolu, fixe et relatif
En plus des flottants, il existe 3 faons de positionner un block en CSS : Le positionnement absolu : il nous permet de placer un block n'importe o sur la page (en haut gauche, en bas droite, tout au centre etc...) Le positionnement fixe : c'est pareil que le positionnement absolu, mais cette fois le block reste toujours visible, mme si on descend plus bas dans la page. C'est un peu comme le background-attachment:fixed; Le positionnement relatif : c'est le plus compliqu des trois. En gros, a nous permet de dplacer un block par rapport sa position normale. Comme pour les flottants, le positionnement absolu, fix et relatif fonctionne aussi sur des balises de type inline comme <img />
Mise en bote
Les tableaux
Les formulaires
Toutefois, vous verrez qu'on l'utilise bien plus souvent sur des balises block que sur des balises inline. Il faut d'abord faire le choix entre les 3 modes de positionnement disponibles. Pour cela, on utilise la proprit CSS position laquelle on donne une de ces valeurs : - absolute : positionnement absolu. - fixed : positionnement fixe. - relative : positionnement relatif.
121
XHTML et CSS
Les listes puces
Le positionnement absolu Pour effectuer un positionnement absolu, on doit crire : position: absolute; et prciser o on veut que le block soit positionn sur la page web. Pour cela il faut utiliser 4 proprits CSS qui sont: left, right, top, bottom. On peut leur donner une valeur en pixels, comme "14px", ou bien une valeur en pourcentage, comme "50%"
Mise en bote
Les tableaux
Les formulaires
122
XHTML et CSS
Code source 92: positionnement du block(XHTML)
Les listes puces
Mise en bote
<p> Ceci est un paragraphe normal.<br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer vel libero. Cras dolor. Quisque quis odio eget justo pulvinar aliquet. Morbi luctus mi. Fusce leo. Integer eleifend condimentum felis. Phasellus vitae nibh. Mauris pellentesque porta magna. Quisque at turpis. Praesent semper odio eget risus. Praesent bibendum imperdiet massa. Quisque ac arcu ac. </p> <div>Block positionn</div>
Les tableaux
Code source 92: positionnement du block (CSS)
Les formulaires
div { background-color: yellow; border: 1px solid green; position: absolute; left: 35px; top: 50px; }
123
XHTML et CSS
Les listes puces
Le positionnement fixe Le fonctionnement est exactement le mme que pour le positionnement absolu, sauf que cette fois le block reste fixe, mme si on descend plus bas dans la page (Le positionnement fixe ne marche pas sur IE). Au lieu de faire position:absolute;, on va taper position:fixed; dans notre CSS. Comme tout l'heure, on s'aide de top, left, right et bottom pour placer notre block o on veut sur la page. Le position:fixed; est particulirement utile pour faire un menu qui reste toujours visible :
Code source 93: positionnement fixe(CSS) div { background-color: yellow; border: 1px solid green; width: 150px; height: 250px; position: fixed; right: 40px; top: 60px; } p { width: 300px; }
Mise en bote
Les tableaux
Les formulaires
124
XHTML et CSS
Les listes puces
Le positionnement relatif Le positionnement relatif sert gnralement faire des "ajustements". Il est diffrent des autres types de positionnement, car cette fois-ci lorigine (0, 0) ne se trouve plus en haut et gauche de la page, mais cette lorigine se trouve en haut gauche de la position actuelle de votre lment (voir limage). Prenons par exemple un texte important, situ entre 2 balises <strong>.
Code source : texte important strong { background-color: red; /* Fond rouge */ color: yellow; /* Texte de couleur jaune */ }
Mise en bote
Les tableaux
Les formulaires
Ainsi, si on fait position: relative et on applique une des proprits top, left, bottom, right, le texte sur fond rouge va se dplacer par rapport la position o il se retrouve.
125
XHTML et CSS
Les listes puces
Ainsi, si on veut que le texte important se dcale de 55 pixels vers la droite et de 10 pixels vers la bas, la balise strong devient comme suivant :
Code source : texte important
Mise en bote
Les tableaux
strong { background-color: red; /* Fond rouge */ color: yellow; /* Texte de couleur jaune */ position: relative; left: 55px; top: 10px; }
Les formulaires
Le texte sest dcal par rapport sa position initiale comme ceci :
126
XHTML et CSS
Les listes puces
Application: Design dun site web Il y a deux types de design des sites web: design fixe, design extensible Design fixe ou extensible? Un design fixe, c'est un design dont la largeur est de taille fixe (par exemple de 800 pixels). Il y a en gnral une marge gauche et droite, et le contenu du site se trouve au milieu. Voici un site au design fixe :
Mise en bote
Les tableaux
Les formulaires
127
XHTML et CSS
Les listes puces
Un design extensible, c'est un design qui s'largit automatiquement en fonction de la rsolution du visiteur. Si le visiteur est en 1024*768, le design fera 1024 pixels de large. Si le visiteur est en 1600*1200, il fera 1600 pixels de large.
Mise en bote
Les tableaux
Les formulaires
128
XHTML et CSS
Les listes puces
Structure gnrale La structuration de la page web se fait gnralement sous forme de blocks <div>. On va avoir au moins 4 blocks prsents comme suivant: l'en-tte contient en gnral le titre de votre site, sous forme de bannire. En dessous:
A gauche ou droite, le menu. De l'autre ct, le corps de la page,
Mise en bote
Les tableaux
Les formulaires
Enfin, le "pied de page" indique l'auteur du site, ventuellement son e-mail et un petit copyright
129
XHTML et CSS
Les listes puces
La structuration de la page web se fait gnralement sous forme de blocks <div>. On va avoir au moins 4 blocks prsents comme suivant: Code source : 4 blocks (div)
Mise en bote
<div id="en_tete">  </div> <div id="menu">  </div> <div id="corps">  </div> <div id="pied_de_page">  </div> N.B : Les blocks devront tre cris dans l'ordre, en premier l'en-tte, en dernier le pied de page. Pour ce qui est du menu et du corps qui se trouvent au mme niveau, l'ordre entre eux deux n'importe pas. On pourra modifier leur position dans le CSS (menu gauche, ou menu droite). 130
Les tableaux
Les formulaires
XHTML et CSS
Les listes puces
Un tableau simple Pour faire un tableau, on utilise les trois balises par paire suivantes : <table> </table>: indique le dbut et la fin du tableau, <tr> </tr> : indique le dbut et la fin d'une ligne du tableau, <td> </td> : indique le dbut et la fin du contenu d'une cellule. En XHTML, un tableau se construit ligne par ligne. Dans chaque ligne (<tr>), on indique le contenu des diffrentes cellules (<td>), comme dans le schma suivant :
Mise en bote
Les tableaux
Les formulaires
131
XHTML et CSS
Les listes puces
Par exemple, si je on veut faire un tableau deux lignes, avec 3 cellules par lignes (donc 3 colonnes), voici le code : Code source 94: tableau (XHTML) Code source 94: tableau (CSS) td /* Toutes les cellules des tableaux..*/ { border: 1px solid black; }
Mise en bote
Les tableaux
Les formulaires
<table> <tr> <td>Youssef</td> <td>33 ans</td> <td>Egypte</td> </tr> <tr> <td>Nadir</td> <td>26 ans</td> <td>Liban</td> </tr> </table>
132
XHTML et CSS
Les listes puces
Il existe une proprit CSS spcifique aux tableaux : border-collapse, qui signifie "coller les bordures entre elles". cette proprit peut prendre 2 valeurs: collapse : les bordures seront colles entre elles, c'est l'effet qu'on recherche. separate : les bordures seront dissocies (valeur par dfaut) Code source 95: tableau (CSS)
Mise en bote
Les tableaux
table { border-collapse: collapse; /* Les bordures seront colles*/ }
Les formulaires
La ligne den-tte La ligne d'en-tte se cre avec un <tr> comme on a fait jusqu'ici, mais les cellules l'intrieur sont cette fois des <th> et non pas des <td> !
133
XHTML et CSS
Les listes puces
La ligne d'en-tte est trs facile reconnatre pour 2 raisons : Les cellules sont des <th> au lieu des <td> habituels. C'est la premire ligne du tableau Code source 96: tableau (CSS) Code source 96: tableau (CSS) table { border-collapse: collapse; }
Mise en bote
Les tableaux
Les formulaires
<table> <tr> <th>Nom</th> <th>Age</th> <th>Pays</th> </tr> <tr> <td>Yossef</td> <td>33 ans</td> <td>Egypte</td> </tr> <tr> <td>Nadir</td> <td>26 ans</td> <td>Liban</td> </tr> </table>
td, th { border: 1px solid black; }
134
XHTML et CSS
Les listes puces
Pour prciser un titre au tableau, on utilise la balise <caption> Dans notre exemple, on a une liste de personnes Code source 98: tableau (CSS) Code source 98: tableau (CSS) table { border-collapse: collapse; } td, th { border: 1px solid black; }
Mise en bote
Les tableaux
Les formulaires
<table> <caption>Passagers du vol 377</caption> <tr> <th>Nom</th> <th>Age</th> <th>Pays</th> </tr> <tr> <td>Yossef</td> <td>33 ans</td> <td>Egypte</td> </tr> <tr> <td>Nadir</td> <td>26 ans</td> <td>Liban</td> </tr> </table>
135
XHTML et CSS
Les listes puces
Des tableaux plus labors Nous avons appris faire des petits tableaux simples. Ces petits tableaux suffisent dans la plupart des cas, mais il arrivera que vous ayez besoin de faire des tableaux plus... complexes. Nous allons voir 2 techniques particulires : Pour les gros tableaux, il est possible de les diviser en 3 parties : En-tte Corps du tableau Pied de tableau Pour certains tableaux, il se peut que vous ayez besoin de fusionner des cellules entre elles. Commenons par le premier point : vous avez un gros tableau, et vous devez le diviser en plusieurs parties. Diviser un gros tableau Si votre tableau est assez gros, vous aurez tout intrt la dcouper en plusieurs parties. Pour cela, il existe des balises XHTML qui permettent de dfinir les 3 "zones" du tableau :
L'en-tte (en haut) : il se dfinit avec les balises <thead></thead> Le corps (au centre) : il se dfinit avec les balises <tbody></tbody> Le pied du tableau (en bas) : il se dfinit avec les balises <tfoot></tfoot>
Mise en bote
Les tableaux
Les formulaires
136
XHTML et CSS
Les listes puces
Schmatiquement, un tableau en 3 parties se dcoupe donc comme cela :
Mise en bote
Les tableaux
La seule chose un peu droutante, c'est qu'il faut mettre les balises dans l'ordre suivant : 1. <thead> 2. <tfoot> 3. <tbody> On met donc dans le code d'abord la partie du haut, ensuite la partie du bas, et enfin la partie principale (tbody). Le navigateur se chargera d'afficher les lments au bon endroit. 137
Les formulaires
XHTML et CSS
Les listes puces
Code source 99: tableau (xhtml) <table> <caption>Passagers du vol</caption> <thead>  <tr> <th>Nom</th> <th>Age</th> <th>Pays</th> </tr> </thead> Code source 99: tableau (xhtml) <tbody>  <tr> <td>Martine</td> <td>34 ans</td> <td>France</td> </tr> <tr> <td>Jonathan</td> <td>13 ans</td> <td>Australie</td> </tr> <tr> <td>Xu</td> <td>19 ans</td> <td>Chine</td> </tr> </tbody> </table>
Mise en bote
Les tableaux
Les formulaires
<tfoot>  <tr> <th>Nom</th> <th>Age</th> <th>Pays</th> </tr> </tfoot>
138
XHTML et CSS
Les listes puces
Sur certains tableaux complexes, vous aurez besoin de "fusionner" des cellules entre elles. Un exemple de fusion ? Regardez, ce tableau liste des films et indique qui ils s'adressent :
Mise en bote
Pour le dernier film, vous voyez que les cellules ont t fusionnes : elles ne font plus qu'un. C'est exactement l'effet qu'on cherche obtenir.
Les tableaux
Les formulaires
Pour effectuer une fusion, il faut rajouter un attribut la balise <td>. Il faut savoir qu'il existe 2 types de fusion La fusion de colonnes : c'est ce que je viens de faire sur cet exemple. La fusion s'effectue horizontalement. On utilisera l'attribut colspan. La fusion de lignes : l, deux lignes seront groupes entre elles. La fusion s'effectuera verticalement. On utilisera l'attribut rowspan. Comme vous le savez, vous devez donner une valeur l'attribut (que ce soit colspan ou rowspan). Cette valeur, c'est le nombre de cellules fusionner entre elles. Sur notre exemple, on a fusionn deux cellules : celle de la colonne "Pour enfants ?", et celle de "Pour adolescents ?". On devra donc crire : 139
XHTML et CSS
Les listes puces
<td colspan="2"> : Qui signifie : "Cette cellule est la fusion de 2 cellules" Il est possible de fusionner plus de cellules la fois (3, 4, 5... tant que vous voulez). Voil le code XHTML qui me permet de raliser la fusion de tout l'heure :
Code source 100: tableau (xhtml) <table> <tr> <th>Titre du film</th> <th>Pour enfants ?</th> <th>Pour adolescents ?</th> </tr> <tr> <td>Massacre la trononneuse</td> <td> Non, trop violent</td> <td>Oui</td> </tr> <tr> <td>Les bisounours font du ski</td> <td>Oui, adapt</td> <td>Pas assez violent...</td> </tr> <tr> <td>Lucky Luke, seul contre tous</td> <td colspan="2">Pour toute la famille !</td> </tr> </table>
Mise en bote
Les tableaux
Les formulaires
141
XHTML et CSS
Les listes puces
Et pour le rowspan, on fait comment ? Pour notre exemple, on va "inverser" l'ordre de notre tableau : au lieu de mettre les titres de films gauche, on va les mettre en haut.
Code source 101: tableau (CSS)
Mise en bote
Les tableaux
Les formulaires
<table> <tr> <th>Titre du film</th> <td>Massacre la trononneuse</td> <td>Les bisounours font du ski</td> <td>Lucky Luke, seul contre tous</td> </tr> <tr> <th>Pour enfants ?</th> <td>Non, trop violent</td> <td>Oui, adapt</td> <td rowspan="2">Pour toute la famille !</td> </tr> <tr> <th>Pour adolescents ?</th> <td>Oui</td> <td>Pas assez violent...</td> </tr> </table>
142
XHTML et CSS
Les listes puces
Et avec un peu de CSS On connait dj la plupart des proprits CSS dont nous aurons besoin pour embellir le tableau. Quelques exemples : Pour modifier la bordure des cellules, il suffit d'utiliser border. Pour modifier la couleur de fond d'une cellule, on utilisera backgroundcolor. Pour modifier l'image de fond d'une cellule, on utilisera background-image Mais on peut aussi modifier la taille (font-size) et la police (font-family) du texte des cellules d'en-tte, en appliquant les proprits adaptes aux balises <th> On peut aussi agrandir le tableau tout entier (width), le centrer (margin:auto car le tableau est un block). On peut centrer le texte l'intrieur des cellules (text-align:center), modifier les marges intrieures des cellules (padding) pour arer le tableau.
Mise en bote
Les tableaux
Les formulaires
143
XHTML et CSS
Les listes puces Rien qu'avec des proprits CSS connues.
Utilisant le tableau du Code Source99 avec du code CSS : Code source 102: tableau (css) Code source 102: tableau (css) th /* Les cellules d'en-tte */ { background-color: #006600; color: white; font-size: 1.1em; font-family: Arial, "Arial Black", Times, "Times New Roman", serif; } td /* Les cellules normales */ { border: 1px solid black; font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif; text-align: center; padding: 5px; } 144
Mise en bote
Les tableaux
Les formulaires
caption /* Titre du tableau */ { margin: auto; font-family: Arial, Times, "Times New Roman", serif; font-weight: bold; font-size: 1.2em; color: #009900; margin-bottom: 20px; } table /* Le tableau en lui-mme */ { margin: auto; /* Centre le tableau */ border: 4px outset green; border-collapse: collapse; }
XHTML et CSS
Les listes puces
Quelques nouvelles proprits CSS Il existe quelques nouvelles proprits CSS qui sont propres aux tableaux. caption-side : indique o doit se trouver le titre du tableau (ne fonctionne pas sur Internet Explorer). Cette proprit peut prendre les valeurs suivantes : top : le titre sera plac en haut du tableau (par dfaut). bottom : le titre sera plac en bas du tableau. left : le titre sera plac gauche du tableau. right : le titre sera plac droite du tableau. border-collapse : on l'a dj vue tout l'heure, cette proprit indique que les bordures des cellules seront colles entre elles. On utilise souvent cette proprit car l'effet qu'elle procure est intressant. Les valeurs possibles sont : separate : les bordures seront spares les unes par rapport aux autres (par dfaut). collapse : les bordures seront colles entre elles. vertical-align : alignement vertical du contenu d'une cellule. Si une cellule a une hauteur importante, il est possible de placer son contenu en haut, en bas ou au milieu de la cellule : top : le contenu sera align en haut de la cellule middle : le contenu sera align au milieu de la cellule bottom : le contenu sera align en bas de la cellule
Mise en bote
Les tableaux
Les formulaires
XHTML et CSS
Les listes puces
Comme on connat dj border-collapse, on va utiliser le vertical-align et le caption-side : Code source 103: tableau (css) Code source 103: tableau (css) th /* Les cellules d'en-tte */ { background-color: #006600; color: white; font-size: 1.1em; font-family: Arial, "Arial Black", Times, "Times New Roman", serif; } td /* Les cellules normales */ { height: 80px; Vertical-align: bottom; font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif; text-align: center; padding: 5px; }
Mise en bote
Les tableaux
Les formulaires
caption /* Titre du tableau */ { caption-side: bottom; margin: auto; font-family: Arial, Times, "Times New Roman", serif; font-weight: bold; font-size: 1.2em; color: #009900; margin-top: 20px; }
table /* Le tableau en lui-mme */ { margin: auto; /* Centre le tableau */ border: 4px outset green; border-collapse: collapse; }
XHTML et CSS
Les listes puces
Crer un formulaire Lorsqu'il vous prend subitement l'envie d'insrer un formulaire dans votre page XHTML, vous devez obligatoirement crer une balise <form></form>. C'est la balise principale du formulaire, elle permet d'en indiquer le dbut et la fin. Code source 104: formulaire (xhtml) <p>Texte avant le formulaire</p> <form> <p>Texte l'intrieur du formulaire</p> </form>
Mise en bote
Les tableaux
<p>Texte aprs le formulaire</p>
Les formulaires
XHTML et CSS
Les listes puces
Il faut savoir qu'un formulaire est fait pour tre envoy. Par exemple, supposons que vous voulez recevoir les commentaires des visiteurs sur votre site web. Eh bien c'est l les problmes que l'on va se poser :
Mise en bote
Les tableaux
Problme n1 : comment envoyer le texte rentr par le visiteur ? Par quel moyen ? Problme n2 : une fois que les donnes ont t envoyes, comment les traiter ? Souhaitez-vous recevoir le message automatiquement par mail, ou prfrez-vous qu'un programme se charge de l'enregistrer quelque part, puis de l'afficher sur une page visible par tout le monde ?
Les formulaires
XHTML et CSS
Les listes puces
Vous devez indiquer 2 attributs la balise <form> afin de donner les rponses ces 2 problmes : method : cet attribut indique par quel moyen les donnes vont tre envoyes (problme n1). Il existe 2 moyens pour envoyer des donnes sur le web : method="get" : c'est une mthode en gnral assez peu adapte, car elle est limite 255 caractres. La particularit vient du fait que les informations seront envoyes dans l'adresse de la page (http://...), mais ce dtail ne nous intresse pas vraiment pour le moment. La plupart du temps, je vous recommande d'utiliser l'autre mthode : "post". method="post" : c'est la mthode la plus utilise pour les formulaires car on peut rentrer un grand nombre d'informations grce elle.
Mise en bote
Les tableaux
Les formulaires
action : c'est l'adresse de la page ou du programme qui va traiter les informations (problme n2). Cette page se chargera de vous envoyer un mail avec le message si c'est ce que vous voulez, ou bien d'enregistrer le message avec tous les autres dans une base de donnes. Cela ne peut pas se faire en XHTML / CSS, on utilisera en gnral un autre langage dont vous avez peut-tre entendu parler : le PHP.
XHTML et CSS
Les listes puces
On va donc maintenant complter la balise <form> avec les 2 attributs qu'on vient de voir. Pour method, on va mettre la valeur "post". Pour action, on va donner le nom d'une page spciale en PHP ("traitement.php"). C'est cette page qui sera appele lorsque le visiteur cliquera sur le bouton "Envoyer le formulaire". Code source 105: formulaire (xhtml) <p>Texte avant le formulaire</p>
Mise en bote
Les tableaux
<form method="post" action="traitement.php"> <p>Texte l'intrieur du formulaire</p> </form> <p>Texte aprs le formulaire</p>
Les formulaires
Pour le moment, on ne sait pas ce qu'il se passe l'intrieur de la page "traitement.php" : Nous verrons par la suite comment cette page PHP fait pour analyser les donnes du formulaire, mais ce n'est pas notre priorit.
Notre priorit l, c'est de voir comment en XHTML / CSS on fait pour insrer des zones de texte, des boutons et des cases cocher dans votre page web.
XHTML et CSS
Les listes puces
Zone de saisie
Nous allons voir quelles sont les balises XHTML qui nous permettent de rentrer du texte dans un formulaire. Pour commencer, il faut savoir qu'il y a 2 zones de texte diffrentes :
La zone de texte une ligne : comme son nom l'indique, on ne peut crire qu'une seule ligne l'intrieur : Elle sert pour rentrer des textes courts, comme par exemple : "Entrez votre pseudo" La zone de texte multiligne : cette zone de texte permet d'crire une quantit importante de texte sur plusieurs lignes.
Mise en bote
Les tableaux
Zone de texte une ligne Voici un exemple dune zone de texte: Pour insrer une zone de texte une ligne, on va utiliser la balise <input />. on doit crire : <input type="text" /> Mais ce n'est pas tout ! Il manque un attribut qui sera trs important : c'est le nom de votre zone de texte. En effet, cela vous permettra plus tard (dans le langage PHP) de reconnatre que tel texte est le pseudo du visiteur, tel texte est son mot de passe etc... Il faut donc donner un nom cette zone de texte, grce l'attribut name. Ici, on va supposer qu'on demande au visiteur de rentrer son pseudo : <input type="text" name="pseudo" />
Les formulaires
XHTML et CSS
Les labels
Les listes puces
Mise en bote
Cette zone de texte est bien jolie, mais si votre visiteur tombe dessus il ne sait pas trop ce qu'il doit mettre dedans. On va justement lui expliquer qu'il doit rentrer son pseudo. Pour indiquer ce que signifie une zone de texte au visiteur, on utilise la balise <label> qui "entoure" le libell ET la zone de texte, comme ceci : Code source 106: formulaire (xhtml)
Les tableaux
Les formulaires
<form method="post" action="traitement.php"> <p> <label> votre pseudoname: <input type="text" name="pseudo"/> </label> </p> </form>
XHTML et CSS
Quelques attributs supplmentaires
Les listes puces
Mise en bote
Il existe quelques autres attributs sur la balise <input /> intressants. Il est ainsi possible, de donner une valeur par dfaut votre zone de texte. Pour faire cela, il suffit d'ajouter l'attribut value <input /> comme dans cet exemple : <input type="text" name="pseudo" value="Myname" /> Autre chose : vous pouvez modifier la largeur de votre zone de texte ainsi que le nombre maximal de caractres que l'on peut mettre dedans. La largeur se dfinit avec size. Le nombre maximal de caractres se dfinit avec maxlength. Dans l'exemple suivant, la zone de texte contient le pseudo "Myname" par dfaut, elle fait 30 caractres de long mais on ne peut mettre que 10 caractres maximum l'intrieur : Code source 107: formulaire (xhtml) <form method="post" action="traitement.php"> <p> <label> votre pseudoname: <input type="text" name="pseudo" value="Myname" size="30" maxlength= 10"/> </label> </p> </form>
Les tableaux
Les formulaires
XHTML et CSS
Quelques attributs supplmentaires
Les listes puces
Mise en bote
Vous pouvez facilement faire en sorte que la zone de texte se comporte comme une zone "mot de passe", c'est--dire une zone o on ne voit pas l'cran ce qui est tap dedans. La seule chose que vous avez besoin de changer, c'est l'attribut type de <input />. Mettez type="password", et le tour est jou ! Je complte mon formulaire. Il demande maintenant au visiteur son pseudo ET son mot de passe : Code source 108: formulaire (xhtml)
Les tableaux
Les formulaires
<form method="post" action="traitement.php"> <p> <label> votre pseudoname: <input type="text" name="pseudo" value="Myname"/> </label><br/> <label> votre mot de passe: <input type= password" name="pass" /> </label> </p> </form>
XHTML et CSS
Zone de texte multilignes
Les listes puces
On arrive (enfin) aux zones de texte multilignes. Voici une zone de texte multiligne :
Mise en bote
Les tableaux
Les formulaires
Code source 109: formulaire (xhtml) <form method="post" action="traitement.php"> <p> <label> Comment pensez-vous que je pourrais amliorer mon site ? <br/> <textarea name="ameliorer"></textarea> </label> </p> </form>
XHTML et CSS
Les listes puces
On peut modifier la taille du textarea de 2 faons diffrentes : En CSS : il suffit d'appliquer les proprits CSS width et height au textarea. Malheureusement cette mthode ne marche pas sur Internet Explorer. Avec des attributs : on peut ajouter les attributs rows et cols la balise <textarea>. Le premier indique le nombre de lignes du textarea, et le second le nombre de colonnes.
Mise en bote
Les tableaux
Code source 110: formulaire (xhtml) <form method="post" action="traitement.php"> <p> <label> Comment pensez-vous que je pourrais amliorer mon site ? <br/> <textarea name="ameliorer" rows="10" cols="50" ></textarea> </label> </p> </form>
Les formulaires
XHTML et CSS
Vous pouvez donc mettre la valeur par dfaut du textarea comme ceci :
Les listes puces
Code source 111: formulaire (xhtml) <form method="post" action="traitement.php"> <p> <label> Comment pensez-vous que je pourrais amliorer mon site ? <br/> <textarea name="ameliorer" rows="10" cols="50" > Amliorer ton site ?! Mais enfin ! Il est tellement gnialissime qu'il n'y a pas besoin de l'amliorer ! </textarea> </label> </p> </form>
Mise en bote
Les tableaux
Les formulaires
XHTML et CSS
Les listes puces
lments doption En plus des zones de saisies, le XHTML vous offre une ribambelle d'lments d'options utiliser dans votre formulaire. On va voir dans cette partie : Les cases cocher, que vous connaissez srement... Les zones d'options, que vous connaissez aussi... Les listes droulantes, que vous avez dj d voir... Bon en fait vous connaissez dj tout
Mise en bote
Les tableaux
Les cases cocher La balise utiliser vous la connaissez dj : c'est <input /> On va seulement changer la valeur de son attribut type pour mettre "checkbox" : <input type="checkbox" name="choix" /> Code source 112: formulaire (xhtml) <form method="post" action="traitement.php"> <p> Cochez les aliments que vous aimez manger :<br /> <label><input type="checkbox" name="frites" /> Frites</label><br /> <label><input type="checkbox" name="steak" /> Steak hach</label><br /> <label><input type="checkbox" name="epinards" /> Epinards</label><br /> <label><input type="checkbox" name="huitres" /> Huitres</label> </p> </form>
Les formulaires
XHTML et CSS
Les listes puces
Vous pouvez faire en sorte qu'une case soit dj coche par dfaut. Pour faire cela, il faut rajouter l'attribut checked="checked" Code source 113: formulaire (xhtml)
Mise en bote
Les tableaux
<form method="post" action="traitement.php"> <p> Cochez les aliments que vous aimez manger :<br /> <label><input type="checkbox" name="frites" /> Frites</label><br /> <label><input type="checkbox" name="steak" /> Steak hach</label><br /> <label><input type="checkbox" name="epinards" /> Epinards</label><br /> <label><input type="checkbox" name="huitres" checked="checked" /> Huitres </label> </p> </form>
Les formulaires
Les zones doption Les zones doption permettent de faire un choix parmi une liste de possibilits :
XHTML et CSS
Les listes puces
La balise utiliser est toujours un <input />, avec cette fois la valeur "radio" pour l'attribut type. La grosse diffrence avec les cases cocher, c'est que les zones d'options fonctionnent par "groupe". Tout un groupe d'options a le mme nom, mais un attribut value diffrent chaque fois.
Mise en bote
Code source 114: formulaire (xhtml) <form method="post" action="traitement.php"> <p> Veuillez indiquer la tranche d'ge dans laquelle vous vous situez :<br /> <label><input type= radio" name= "age " value=" Moins5 " />Moins de 15 ans </label><br /> <label><input type=" radio " name=" age" value= "15-25 " />15-25 ans</label><br /> <label><input type=" radio " name="age" value= "25-40 " />25-40 ans</label><br /> <label><input type=" radio " name="age" value=" plus40" />plus 40 ans</label> </p> </form>
Les tableaux
Les formulaires
XHTML et CSS
Les listes puces
Pourquoi avoir mis le mme nom pour chaque option ? Tout simplement pour que le navigateur sache dans quel "groupe" le bouton fait partie. Essayez d'enlever les attributs name, vous verrez que chaque lment d'option deviendra slectionnable. Or, ce n'est pas ce que l'on veut, c'est pour a qu'on les "lie" entre eux en leur donnant un nom identique. Si vous avez 2 zones d'options diffrentes, il faut donner un nom unique chaque groupe comme ceci :
Code source 115: formulaire (xhtml) <form method="post" action="traitement.php"> <p> Veuillez indiquer la tranche d'ge dans laquelle vous vous situez :<br /> <label><input type="radio" name="age" value="moins15" /> Moins de 15 ans</label><br /> <label><input type="radio" name="age" value="15-25" /> 15-25 ans</label><br /> <label><input type="radio" name="age" value="plus40" /> plus que 40 ?!</label> </p> <p> Sur quel continent habitez-vous ?<br /> <label><input type="radio" name="continent" value="europe" /> Europe</label><br /> <label><input type="radio" name="continent" value="afrique" /> Afrique</label><br /> <label><input type="radio" name="continent" value="asie" /> Asie</label><br /> <label><input type="radio" name="continent" value="amerique" /> Amrique</label><br /> </p> </form>
Mise en bote
Les tableaux
Les formulaires
XHTML et CSS
Liste droulante
Les listes puces
Les listes droulantes sont un autre moyen lgant de faire un choix entre plusieurs possibilits :
Mise en bote
Les tableaux
Les formulaires
Cette fois, a fonctionne un peu diffremment. On va utiliser la balise <select></select> qui indique le dbut et la fin de la liste droulante. On ajoute l'attribut name la balise pour donner un nom la liste. Par exemple "pays" : <select name="pays"> Et maintenant, l'intrieur du <select></select>, on va mettre plusieurs balises <option></option> (une par choix possible). On rajoute un attribut value pour pouvoir identifier ce que le visiteur a choisi.
XHTML et CSS
Les listes puces
Code source 116: formulaire (xhtml) <form method="post" action="traitement.php"> <p> <label> Dans quel pays habitez-vous ?<br /> <select name="pays"> <option value="france">France</option> <option value="espagne">Espagne</option> <option value="italie">Italie</option> <option value="royaume-uni">RoyaumeUni</option> <option value="canada">Canada</option> <option value="etats-unis">Etats-Unis</option> <option value="chine">Chine</option> <option value="japon">Japon</option> </select> </label> </p> </form> N.B: Autre nouveaut, on ne peut plus utiliser le checked="checked" ici, on doit utiliser la place le... selected="selected". Il nous permet comme le checked de slectionner une valeur par dfaut :
Mise en bote
Les tableaux
Les formulaires
XHTML et CSS
Les listes puces
On peut aussi, crer des groupes d'options l'intrieur de la liste, grce la balise <optgroup></optgroup>. On doit lui ajouter l'attribut label qui permet de donner un nom au groupe ( ne pas confondre avec la balise <label> !). Code source 117: formulaire (xhtml)
Mise en bote
Les tableaux
Les formulaires
<form method="post" action="traitement.php"> <p> <label> Dans quel pays habitez-vous ?<br /> <select name="pays"> <optgroup label="Europe"> <option value="france">France</option> <option value="espagne">Espagne</option> <option value="italie">Italie</option> <option value="royaume-uni">Royaume-Uni</option> </optgroup> <optgroup label="Amrique"> <option value="canada">Canada</option> <option value="etats-unis">Etats-Unis</option> </optgroup> </select> </label> </p> </form>
XHTML et CSS
Un formulaire accessible et design ?
Les listes puces
Mise en bote
On va faire a en 4 tapes : Dfinir un ordre de tabulation (accessibilit) Dfinir des touches de raccourci (accessibilit) Organiser le formulaire en plusieurs zones (accessibilit et design) Rajouter du CSS (design) Dfinir un ordre de tabulation A chaque fois qu'on appuie sur Tab, on va au champ suivant. A chaque fois qu'on fait Maj + Tab, on retourne au champ prcdent : On va utiliser l'attribut tabindex qui peut se rajouter sur toutes les balises du formulaire qu'on a apprises. On doit lui mettre un nombre pour valeur. Chaque champ du formulaire doit avoir un nombre diffrent. Les nombres indiquent dans quel ordre on se dplace dans le formulaire : d'abord le n1, puis le n2, le n3 etc... On nest pas obligs de mettre des nombres qui se suivent. Il est mme conseill de laisser des "espaces" entre les nombres au cas o vous auriez besoin de rajouter plus tard des champs. Ainsi, il est tout fait possible de compter 10 par 10 : n10, n20, n30 etc...
Les tableaux
Les formulaires
XHTML et CSS
Les listes puces
Sur ce formulaire, les tabindex sont rajouts chaque champ. Le premier champ est celui qui a le numro le plus petit, et le dernier celui qui a le plus grand. Code source 118: formulaire (xhtml)
Mise en bote
<form method="post" action="traitement.php"> <p> <label>Quel est votre nom ?<br /> <input type="text" name="nom" tabindex="10" /> </label><br /> <label>Quel est votre prnom ?<br /> <input type="text" name="prenom" tabindex="20" /> </label><br /> <label>Quel est votre e-mail ?<br /> <input type="text" name="email" tabindex="30" /> </label><br /> </p> </form>
Les tableaux
Les formulaires
XHTML et CSS
Les listes puces
Pour dfinir une touche de raccourci, on utilise l'attribut accesskey qui, comme tabindex, peut se mettre sur tous les types de champs de formulaire qu'on a vus. Il faut lui mettre comme valeur la touche du clavier qui doit servir de raccourci pour le champ. Code source 119: formulaire (xhtml) <form method="post" action="traitement.php"> <p> <label>Quel est votre nom ? <em>(raccourci : N)</em> <br /> <input type="text" name="nom" tabindex="10" accesskey="N" /> </label><br /> <label>Quel est votre prnom ? <em>(raccourci : P)</em> <br /> <input type="text" name="prenom" tabindex="20" accesskey="P" /> </label><br /> <label>Quel est votre e-mail ? <em>(raccourci : E)</em> <br /> <input type="text" name="email" tabindex="30" accesskey="E" /> </label><br /> </p> </form>
Mise en bote
Les tableaux
Les formulaires
XHTML et CSS
Organiser le formulaire en plusieurs zones
Les listes puces
On utilisera la balise <fieldset></fieldset> pour dlimiter un groupe de champs. A l'intrieur de cette balise, vous mettrez vos champs (vos <input /> entre autres...) ainsi qu'une autre balise : <legend></legend>. Celle-ci permet de donner le nom du groupe.
Code source 120: formulaire (xhtml)
Mise en bote
Les tableaux
Les formulaires
<form method="post" action="traitement.php"> <fieldset> <legend>Vos coordonnes</legend>  <label>Quel est votre nom ?<br /> <input type="text" name="nom" tabindex="10" /> </label><br /> <label>Quel est votre prnom ?<br /> <input type="text" name="prenom" tabindex="20" /> </label><br /> </fieldset> <fieldset> <legend>Votre souhait</legend>  <p> Faites un souhait que vous voudriez voir exauc :<br /> <label><input type="radio" name="souhait" value="riche" tabindex="40" /> Etre riche</label><br /> <label><input type="radio" name="souhait" value="intelligent" tabindex="60" /> intelligent</label><br /> </p> </fieldset> </form>
XHTML et CSS
Les listes puces
Code source 121: formulaire (xhtml) <form method="post" action="traitement.php"> <fieldset> <legend>Vos coordonnes</legend>  <label>Quel est votre nom ?<br /> <input type="text" name="nom" tabindex="10" /> </label><br /> <label>Quel est votre prnom ?<br /> <input type="text" name="prenom" tabindex="20" /> </label><br /> </fieldset> <fieldset> <legend>Votre souhait</legend>  <p> Faites un souhait que vous voudriez voir exauc :<br /> <label><input type="radio" name="souhait" value="riche" tabindex="40" /> Etre riche</label><br /> <label><input type="radio" name="souhait" value="intelligent" tabindex="60" /> intelligent</label><br /> </p> </fieldset> </form>
Mise en bote
Les tableaux
Les formulaires
XHTML et CSS
Les listes puces
Faisons un peux de prsentation au formulaire laide du CSS : Code source 121: formulaire (css) Code source 121: formulaire (css) label { color: blue; } legend { font-family: Arial, "Arial Black", Georgia, "Times New Roman", Times, serif; color: #FF9933; font-weight: bold; } fieldset { margin-bottom: 15px; background-color: #FFFFCC; }
Mise en bote
Les tableaux
input, textarea { font-family: "Times New Roman", Times, serif; } input:focus, textarea:focus { background-color: #FFFF99; }
Les formulaires
XHTML et CSS
Les listes puces
Validation du formulaire Il existe trois types de boutons : Le bouton d'envoi : il dclenche l'envoi du formulaire. Le visiteur se retrouve automatiquement tltransport la page indique dans l'attribut action du formulaire. Un bouton d'envoi se cre avec l'attribut type="submit". Vous pouvez lui ajouter un attribut value pour changer le texte l'intrieur du bouton, mais vous pouvez laisser la valeur par dfaut, c'est aussi clair : <input type="submit" /> Le bouton de remise zro : il remet zro automatiquement toutes les valeurs du formulaire. On doit utiliser cette fois l'attribut type="reset" <input type="reset" /> Le bouton qui-sert--rien : c'est un bouton "gnrique" qui n'effectue aucune action particulire. Quel intrt ? Ca vous servira principalement lancer des scripts en Javascript. Cette fois, je vous recommande de mettre l'attribut value pour que l'on sache quoi sert le bouton : <input type="button" value="Je sers rien" />
Mise en bote
Les tableaux
Les formulaires
XHTML et CSS
Les listes puces
Code source 121: formulaire (xhtml) <form method="post" action="traitement.php"> <fieldset> <legend>Vos coordonnes</legend>  <label>Quel est votre nom ?<br /> <input type="text" name="nom" tabindex="10" /> </label><br /> <label>Quel est votre prnom ?<br /> <input type="text" name="prenom" tabindex="20" /> </label><br /> </fieldset> <fieldset> <legend>Votre souhait</legend>  <p> Faites un souhait que vous voudriez voir exauc :<br /> <label><input type="radio" name="souhait" value="riche" tabindex="40" /> Etre riche</label><br /> <label><input type="radio" name="souhait" value="intelligent" tabindex="60" /> intelligent</label><br /> </p> </fieldset> <p> <input type="submit" /> <input type="reset" /> </p> </form>
Mise en bote
Les tableaux
Les formulaires

XHTML Css

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

XHTML Css

Transféré par

Droits d'auteur :

Formats disponibles

Module : Technologie web

Partie 2 : Les Feuilles de style CSS

Partie 3 : XHTML et CSS

Les bases du XHTML

Les bases du XHTML

Les bases du XHTML

Les bases du XHTML

Les balises Premire page web

Les bases du XHTML

Premire page web

Les bases du XHTML

Premire page web

Les bases du XHTML

Premire page web

Les bases du XHTML

Premire page web

Code source 1: Exemple de commentaire

Les bases du XHTML

Premire page web

Les bases du XHTML

Premire page web

Les bases du XHTML

Premire page web

Les bases du XHTML

Premire page web

Les bases du XHTML

Premire page web

Les bases du XHTML

Premire page web

Code source 5 : Exemple de mise en valeur du texte

Les bases du XHTML

Premire page web

Les bases du XHTML

Premire page web

Les bases du XHTML

Premire page web

Les bases du XHTML

Premire page web

Les bases du XHTML

Premire page web

Cration des liens

Les bases du XHTML

Un lien vers une autre page

Premire page web

Organisation du texte Cration des liens

Les bases du XHTML

Premire page web

Organisation du texte Cration des liens

Code source 12: cible.html

<h1>fichier cible</h1> <p>Bravo ! Tu viens d'atterir sur cible.html !</p>

Les bases du XHTML

Premire page web

Organisation du texte Cration des liens

Code source 14: Une bulle daide

Les bases du XHTML

Premire page web

Organisation du texte Cration des liens

Les bases du XHTML

Premire page web

Organisation du texte Cration des liens

Les bases du XHTML

Premire page web Organisation du texte Cration des liens

Les bases du XHTML

font-size: 14px; /* Paragraphes de 14 pixels / } h1 { font-size: 22px; / Titres de 22 pixels */ }