Vous êtes sur la page 1sur 30

Introduction Web : Cours

1re anne

IUT de Villetaneuse.
Mathieu Lacroix1 25 janvier 2013

1. E-mail : mathieu.lacroix@iutv.univ-paris13.fr, Page Web : http://www.lipn.univ-paris13.fr/~lacroix/

IUT de Villetaneuse

Mathieu LACROIX

Introduction Web, 1re anne

Table des matires


1 Internet, Web et XHTML 1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.1.1 Dnitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.1.2 Quest-ce quune adresse Web (url) ? . . . . . . . . . . . . . . . . . . 1.1.3 Que se passe-t-il lorsque je saisis une adresse Web (fichier.html) ? 1.2 Le langage XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2.1 Balises courantes du XHTML . . . . . . . . . . . . . . . . . . . . . . 1.2.2 Information dun document XHTML . . . . . . . . . . . . . . . . . . 1.2.3 Reprsentation dun document XHTML sous forme darbre . . . . . 1.2.4 Dirences entre balises de type block et balises de type inline . . 1.2.5 La DTD ou les "rgles" dcriture dun chier XHTML . . . . . . . 2 Mise en page avec CSS 2.1 criture de code CSS . . . . . . . . . . . . . . . . . . . . 2.2 Les principales proprits et leurs valeurs . . . . . . . . 2.2.1 Modication de la police . . . . . . . . . . . . . . 2.2.2 Dimensions . . . . . . . . . . . . . . . . . . . . . 2.2.3 Modication du fond . . . . . . . . . . . . . . . . 2.2.4 Bordures et marges . . . . . . . . . . . . . . . . . 2.2.5 Modications lies aux listes et tableaux . . . . . 2.2.6 Modication du type de la balise . . . . . . . . . 2.2.7 Positionnement . . . . . . . . . . . . . . . . . . . 2.2.8 Modication du curseur de la souris . . . . . . . 2.2.9 Spcication de lachage en cas de dpassement 2.3 Classes et identiants . . . . . . . . . . . . . . . . . . . 2.4 Balises XHTML span et div . . . . . . . . . . . . . . . . 2.5 Les pseudo-formats . . . . . . . . . . . . . . . . . . . . . 2.5.1 Pseudo-formats associs aux liens . . . . . . . . . 2.5.2 Pseudo-formats associs aux paragraphes . . . . 2.5.3 Pseudo-format :first-child . . . . . . . . . . . 2.6 Les dirents slecteurs et modications en cascades . . 2.6.1 Combinaisons de slecteurs . . . . . . . . . . . . 2.6.2 Styles en cascade . . . . . . . . . . . . . . . . . . 2.6.3 Priorit des slecteurs . . . . . . . . . . . . . . . 2.7 Hritage . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.7.1 Valeur par dfaut et hritage . . . . . . . . . . . 2.7.2 Valeur inherit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 5 5 6 6 8 10 12 12 13 14 17 17 18 18 19 19 20 21 22 22 25 25 26 26 27 27 27 27 27 27 28 28 29 29 30

IUT de Villetaneuse

Mathieu LACROIX

Introduction Web, 1re anne

Cours 1

Internet, Web et XHTML


Dans ce chapitre, nous donnons tout dabord les dnitions de lInternet, du Web et du langage XHTML. Nous expliquons ensuite ce quest une url et les direntes actions induites lorsque je demande acher une page Web laide dun navigateur. Nous montrons nalement comment dnir une page Web.

1.1

Introduction

Tout le monde sait utiliser "le Web" pour accder des sites. Cependant, peu de monde comprend exactement les mcanismes qui entrent en jeu lorsque lon utilise "le Web". Ce sont ces mcanismes que nous abordons dans cette section.

1.1.1

Dnitions

Tout dabord, il est primordial de connatre de quoi nous parlons. Les termes Internet, Web ne sont en eet pas toujours utiliss correctement. Voici une liste de dnitions ncessaires pour comprendre de quoi nous parlons. Rseau : ensemble de machines (ordinateurs, imprimantes, modems routeurs, ...) pouvant communiquer entre elles. Pour tre en mesure de communiquer, ces machines doivent tre relies entre elles soit par des cbles, soit par des ondes (wi). Un ordinateur reli un modem de type neufbox, freebox ou autre correspond donc un rseau. De mme, tous les ordinateurs de lIUT de Villetaneuse forment un rseau. Internet : obtenu par contraction de "Interconnexion Networks" (interconnexion de rseaux). Internet est un rseau connectant entre eux dirents rseaux existants. Internet a pour vocation de relier tous les ordinateurs du monde. Internet permet donc de faire communiquer deux machines connectes sur des rseaux dirents. Cest donc grce internet quil est possible de communiquer de chez soi avec un ordinateur de lIUT de Villetaneuse. Mais Internet nest quun rseau, cest--dire quil permet juste denvoyer des donnes (0 ou 1) entre deux ordinateurs. Web : application permettant de consulter laide dun programme spcique appel navigateur, des pages dun site (ensemble de pages relies entre elles). Si le navigateur et le site se trouvent sur des ordinateurs dirents, alors le Web utilise lInternet pour la communication entre ces deux ordinateurs. Le Web nest donc quune application utilisant Internet. Dautres applications sont le courrier lectronique, la messagerie instantane, etc. Navigateur : Le navigateur est un logiciel permettant lachage de pages dun site Web. Diffrents navigateurs existent : Internet Explorer (54.77%), Mozilla Firefox (19.82%), Google Chrome (18.04%) et Apple Safari (5.24%) sont dirents exemples de navigateurs. Langage XHTML (ou HTML) : langage de balises permettant de spcier dans une page Web quelles parties correspondent un titre, un paragraphe, quelles images insrer dans 5

IUT de Villetaneuse

la page, etc. Cest grce ce langage (et au CSS, que nous verrons plus tard), que les navigateurs peuvent acher correctement les pages Web. Un exemple (trs incomplet ! ! !) de code XHTML est le suivant : <h1> Ceci est un titre </h1> <p> Ceci est un paragraphe... </p> Le Web est donc une application permettant dacher, dans un navigateur, des chiers texte contenant du code XHTML. Ces chiers se trouvent gnralement sur un ordinateur dirent et le Web utilise alors lInternet pour transmettre les informations entre les deux ordinateurs : celui possdant le chier et celui sur lequel est utilis le navigateur. Lordinateur sur lequel sont stocks des chiers contenant du code XHTML est appel serveur. Lautre ordinateur est appel client. La principale caractristique du Web est la possibilit de passer dun chier lautre grce aux liens hypertextes. Ce sont ces liens hypertextes qui permettent par exemple de passer de la page daccueil dun compte facebook aux pages contenant les photos, les messages, etc.

1.1.2

Quest-ce quune adresse Web (url) ?

Lorsque je souhaite acher la page daccueil de Facebook dans mon navigateur, il faut donc que je signale que je veux le chier correspondant la page daccueil du site Facebook. Ces informations doivent donc tre donnes sous forme dadresse Web ou url (Uniform Resource Locator, littralement "localisateur uniforme de ressource") en anglais. Une adresse Web est de la forme : nom_du_protocole://adresse_du_site/chemin_du_repertoire/fichier protocole : indique le langage utilis pour la communication entre deux ordinateurs. Il est ncessaire car il permet de sassurer que les deux ordinateurs parlent le mme langage an quils se comprennent. Le protocole dnit donc les rgles pour un type de communication. Les protocoles de communication sappliquent en dehors de linformatique. Une conversation tlphonique sappuie par exemple sur un protocole. An davoir une conversation tlphonique, vous devez composer le numro de tlphone de votre interlocuteur. Vous attendez ensuite quil dcroche et dise "allo" avant de commencer votre conversation. Vous vous prsentez ensuite, etc. Le protocole du Web est le protocole http. adresse_du_site : correspond ladresse du serveur sur lequel se trouve le chier que vous dsirez consulter. Cette adresse correspond au numro IP de la machine (ex : 69.63.181.12) ou une chane de caractres (ex : www.facebook.com) qui est appele nom de domaine. Un nom de domaine est associ un numro IP unique. chemin_du_repertoire : correspond au rpertoire o se trouve le chier sur le serveur. chier : nom du chier que vous voulez consulter. Voici dirents exemples dadresses Web : http://www-lipn.univ-paris13.fr/~lacroix/Documents/IntroWeb/interaction.html http://69.63.181.12/index.php http://www.facebook.com/ On remarque que pour la dernire adresse donne en exemple, il ny a pas de chier spci. Dans ce cas, le chier est alors le chier index.html ou index.php. Comme le nom de domaine www.facebook.com est associ au numro IP 69.63.181.12, les deux dernires adresses sont quivalentes !

1.1.3

Que se passe-t-il lorsque je saisis une adresse Web (fichier.html) ?

Lorsque je saisis sur un navigateur (par exemple Mozilla Firefox) une adresse Web dont le chier porte lextension .html (ou .htm), cela signie que je souhaite que mon navigateur ache le chier HTML situ lendroit indiqu par ladresse Web. Pour cela, il est ncessaire que le client (mon ordinateur) et le serveur (contenant le chier que je souhaite visualiser) communiquent. Cela se passe de la manire suivante :
Mathieu LACROIX

Introduction Web, 1re anne

Dpartement informatique

1. le client envoie un message au serveur pour lui demander de lui envoyer le chier, 2. le serveur rpond en envoyant le chier demand, 3. le navigateur interprte le code XHTML reu et ache la page Web. Ceci est illustr dans la gure suivante.

Figure 1.1 Schma de requte en XHTML 1 De manire plus prcise, pour demander au serveur de lui envoyer le chier, le client (mon ordinateur) va envoyer au serveur un message du type : GET /~lacroix/Documents/IntroWeb/interaction.html HTTP/1.1 Host: www-lipn.univ-paris13.fr Ce code correspond alors "Bonjour site www-lipn.univ-paris13.fr, je communique selon le protocole HTTP (version 1.1). Peux-tu menvoyer (get en anglais) sil te plat le chier /lacroix/Documents/IntroWeb/interaction.html ?" Gnralement, la requte est suivie de quelques informations supplmentaires qui ne sont pas ncessaires. Le client peut dire sur quel type de systme dexploitation il tourne (windows, linux, mac), quelle est la taille en octets de la requte envoye, etc. Le serveur recevant la requte envoie son tour un message. Celui-ci ressemble alors HTTP/1.1 200 OK Content-Type: text/html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Page personnelle de Mathieu LACROIX</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <h1> Interaction client/serveur lors de la saisie dune url (statique) </h1> ... </html> La premire ligne indique que le serveur a accept la rponse. La deuxime ligne spcie que le serveur envoie du code html. Le reste correspond au code html de la page interaction.html. Le navigateur recevant le code XHTML interprte les balises et ache alors la page Web. Pour lexemple, on obtient alors :
1. Image construite partir dune image du site "Le site du zro".

Introduction Web, 1re anne

Mathieu LACROIX

IUT de Villetaneuse

Figure 1.2 Visualisation de la page Web avec le navigateur

Remarque : La gure prcdente correspond au rendu visuel du code XHTML de la page demande sans aucune instruction de mise en page (code CSS). Comme vous avez dj pu le remarquer, beaucoup de pages Web contiennent des images. Par exemple, ma page index.html contient une image reprsentant le logo de lIUT. Dans le code XTML de ma page, jai donc utilis une balise indiquant que le chier image (logo_iut_villetaneuse.jpeg) de lIUT doit tre ach sur la page. Le navigateur doit alors galement demander au serveur de lui envoyer cette image. Lachage de la page ncessite alors plusieurs changes entre le client et le serveur. On peut alors reprsenter ces changes de la manire suivante : client : Bonjour serveur, peux-tu menvoyer le chier index.html sil te plat ? serveur : Bonjour, pas de problme, je te lenvoie. client : Pour acher la page index.html, jai besoin du chier logo_iut_villetaneuse.jpeg, peux-tu me lenvoyer sil te plat ? serveur : Pas de problme, je te lenvoie. Les deux premires lignes correspondent au premier change que nous avons vu prcdemment. Pour demander le chier image, le client envoie une autre requte (similaire la premire), lui demandant denvoyer le chier. Le nombre de requtes que fait le client dpend donc du nombre de chiers ncessaires pour acher la page Web (ce sont des images, des chiers CSS, ou des scripts). Plus ce nombre est important, plus la communication entre le serveur et le client est importante, et plus le navigateur met du temps acher la page ! Remarque : Les chiers ncessaires pour acher une page Web peuvent se trouver sur dirents serveurs. Dans ce cas, le navigateur demande chaque serveur les chiers dont il a besoin.

1.2

Le langage XHTML

Nous venons de voir succintement comment fonctionne le Web. Nous expliquons maintenant comment crire un chier au format XHTML. Le langage XHTML est un langage de balises permettant dcrire des pages Web. Le langage XHTML peut tre vu comme du HTML vriant certaines rgles dcriture, dnies dans un document appel Dnition de Type de Document (DTD). Ces rgles contraignent lcriture de code en obligeant par exemple les balises tre crites en lettres minuscules (il y a dautres rgles que nous verrons plus tard). Les chiers XHTML sont donc plus simples, plus clairs et suivent tous
Mathieu LACROIX

Introduction Web, 1re anne

Dpartement informatique

les mmes rgles. Ils simplient ainsi la comprhension, et donc lachage des pages Web par tous les navigateurs. Ils permettent galement une meilleure visibilit et indexation dans les moteurs de recherche. Lintrt de ces rgles est identique celui des rgles de grammaire, dorthographe et de ponctuation pour la langue franaise (ou toute autre langue). Il est en eet beaucoup plus facile de lire un texte en franais dont les phrases commencent par une majuscule et nissent par un point, o les verbes sont conjugus correctement, etc. Les balises du XHTML sont utilises pour structurer les lments dun document XHTML, cest--dire pour signier quelles parties correspondent un titre, un paragraphe, un tableau, une image, une liste, etc. En aucun cas, elles ne permettent de modier lachage de ces lments. Par exemple, le XHTML ne permet pas de mettre en couleur un texte ! Toutes les instructions modiant lachage sont dnies dans un chier spar, appel chier CSS. Ce chier contient un code (qui nest pas du XHTML !) modiant lachage des structures logiques (titres, paragraphes, etc). Dans ce chier CSS, les instructions permettent de spcier par exemple : "les titres doivent tre achs en rouge, les paragraphes doivent tre achs en bleu sur fond marron et faire 300 pixels de larges, ...". Nous verrons comment crire du code CSS dans le chapitre suivant. Sparer le contenu (code XHTML) de la forme (code CSS) dune page Web permet de simplier la cration ou la maintenance dune page (ou site) Web. En eet, comme les direntes instructions sont spares, il nest pas ncessaire de modier le chier XHTML correspondant au contenu du site pour modier son apparence. De la mme manire, de cette faon, il est vraiment plus facile de sassurer que toutes les pages dun mme site Web ont le mme style dachage. Il sut pour cela dassocier chaque page Web du site le mme chier CSS. Le langage XHTML est donc un langage de balises. Chaque balise commence par le caractre "<" et se termine par le caractre ">". Par exemple : <p>. Ces balises ne sont pas aches par le navigateur car elles ne correspondent pas du texte. Elles servent uniquement expliquer les lments dune page Web. Les balises vont gnralement par paire : la balise ouvrante et la balise fermante. Cette dernire se distingue de la balise ouvrante par le caractre "/" qui est ajout juste aprs le caractre "<". Par exemple, la balise ouvrante <p> et la balise fermante </p>. Ces balises servent indiquer que ce qui est entre la balise ouvrante et la balise fermante correspond un lment de la page. Par exemple, le code indique que tout se qui se trouve entre la balise <p> et la balise </p> correspond un paragraphe dans la page Web. Certaines balises ne sont cependant pas utilises par paire. Ces balises sont appeles balises auto-fermantes. Cest le cas lorsquil ny a pas rien mettre entre la balise ouvrante et la balise fermante. Par exemple, pour sauter une ligne (dans un paragraphe), on utilise la balise de nom br. En suivant la syntaxe prcdente, on devrait donc crire
<p> Ceci est un paragraphe </p>

Cependant, comme entre <br> et </br> il ny a jamais rien, on prfre utiliser une seule balise br. Pour signier cependant quelle sutilise toute seule, on doit rajouter le signe "/" la n de la balise. Le code correct est donc :
<p> Premire ligne <br></br> deuxime ligne </p>

<p> Premire ligne <br /> deuxime ligne </p>

Dernire chose, il est parfois ncessaire dajouter des attributs aux balises pour spcier certaines informations. Par exemple, si je veux insrer une image dans ma page Web, il faut que jutilise la balise <img /> qui indique quun chier image doit tre incorpor la page. Cependant, pour que le navigateur sache quelle image acher, il faut spcier la source de limage, cest--dire le nom du chier image et lendroit o il se trouve. Pour cela, nous utilisons des attributs. Ces attributs sutilisent de la manire suivante 9
Mathieu LACROIX

Introduction Web, 1re anne

IUT de Villetaneuse

1 2

< balise attribut1 ="valeur1" attribut2="valeur2" attribut3="valeur3"> ... </balise> < balise attribut1 ="valeur1" attribut2="valeur2" />

suivant que lon ait une balise ouvrante et une balise fermante, ou une balise auto-fermante. Les attributs se mettent donc dans la balise ouvrante (si la balise nest pas auto-fermante). De plus, ils sont crits en minuscules. La valeur de lattribut est entre guillemets et lon peut avoir plusieurs attributs spars par des espaces.

Remarque : Comme pour beaucoup de langages informatiques, mettre plusieurs espaces dafle ou sauter des lignes ne modie absolument rien. Protez-en pour crire un code agrable lire ! Remarque : Le symbole < correspondant louverture dune balise en XHTML, il nest pas possible dutiliser ce symbole comme un caractre normal. Pour insrer ce symbole, il faut utiliser le codage spcial &lt;. Ainsi, si je souhaite crire un paragraphe contenant "1 < 2" en XHTML, je dois alors crire <p> 1 &lt; 2 </p>. De la mme manire, si je veux insrer le symbole &, il faut alors insrer &amp;.

1.2.1

Balises courantes du XHTML

Nous dcrivons maintenant les principales balises du XHTML Racine du document Tout document XHTML doit commencer par la balise <html> et se terminer par la balise </html>. En-tte du document Un document XHTML contient plusieurs informations qui ne seront pas aches dans la page Web. Ces informations dnissent le titre de la page (ATTENTION : ce titre nest pas un titre apparaissant dans la page Web mais le titre de longlet sous Firefox !), lencodage des caractres, etc. Seul le titre de la page (balise title) est obligatoire. La balise dnissant len-tte est la balise head. (Un exemple est donn par la suite.) Corps du document Toutes les informations qui doivent tre aches sur la page (titres, paragraphes, tableaux, images, etc) doivent tre comprises entre les balises <body> et </body>. Titres Nous avons dj vu comment crire un titre important en utilisant la balise h1 (e.g., <h1> Titre important </h1>). De mme que pour un document classique tel que ce cours, il est possible de dnir en XHTML des titres moins importants, correspondant par exemple des sous-titres. Limportance du titre est appel niveau du titre. Il existe en XHTML six niveaux de titres dirents, donns par les balises h1, h2, h3, h4, h5 et h6. Par exemple, le dbut de la table des matires de ce cours serait reprsente laide du code XHTML suivant :
<h1> Internet , Web et XHTML </h1> <h2> Introduction </h2> <h3> Dnitions </h3> <h3> Quest-ce quune adresse Web (url)?</h3> <h3> Que se passe-t-il lorsque je saisis une adresse Web?</h3> <h2> Le langage XHTML </h2>

1 2 3 4 5 6

Paragraphes

Un paragraphe doit tre compris entre les balises <p> et </p> 10


Introduction Web, 1re anne

Mathieu LACROIX

Dpartement informatique

1 2 3 4 5

Listes ordonnes et non ordonnes Il est possible en XHTML de dnir des listes ordonnes (balise ol) et non-ordonnes (balise ul). Pour utiliser ces listes, il est ncessaire de dnir des items. Chaque item dune liste doit tre compris entre les balises <li> et </li>. Les dirents items doivent alors tre compris entre les balises <ol> et </ol> dans le cas dune liste ordonne ou entre les balises <ul> et </ul> dans le cas dune liste non-ordonne. Par exemple, la liste de la page 7 peut tre reprsente par le code XHTML suivant :
< ol > < li > le client envoie un message au serveur pour lui demander de lui envoyer le chier , </ li > < li > le serveur rpond en envoyant le chier demand, </li> < li > le navigateur interprte le code XHTML et ache la page Web. </li> </ ol >

Saut de lignes

Un saut de ligne est reprsent par la balise auto-fermante <br />. Une ligne horizontale est dessine grce la balise auto-fermante <hr />.

Ligne horizontale

Mise en valeur de texte Du texte peut tre mis en valeur grce aux balises em et strong. Le texte mettre en valeur doit tre compris entre les balises <em> et </em> ou entre les balises <strong> et </strong>. Insertion dimages Une image peut tre insre grce la balise auto-fermante <img />. Cette balise doit obligatoirement contenir les deux attributs suivants : src : indique le nom du chier image ainsi que son chemin. Ce chemin peut tre relatif, cest--dire dni par rapport lendroit o se trouve la page Web ou absolu. Si limage se trouve sur le mme site que la page Web, il est prfrable dutiliser le chemin relatif. alt : texte alternatif dcrivant limage, utilis si limage nexiste plus ou pour les navigateurs textes par exemple. Voici un exemple de code XHTML insrant le chier image "logo_iut.png" qui se trouve dans le rpertoire Images contenu dans le rpertoire o se situe la page Web contenant le code :
<img src="Images/logo_iut.png" alt="logo de lIUT de Villetaneuse" />

L encore, le chemin du chier XHTML peut tre relatif ou absolu.

Liens hypertextes Les liens hypertextes permettent de naviguer dune page Web une autre. Un lien hypertexte seectue laide de la balise a. Llment cliquable (texte ou image par exemple) doit tre compris entre la balise ouvrante <a> et la balise fermante </a>. Il est ncessaire de donner en attribut (attribut href) la page qui doit souvrir lors du clic sur le lien. Pour pouvoir, partir du chier fichier1.html, accder en cliquant au chier fichier2.html, il faut ajouter dans le code XHTML du fichier1.html le code
<a href ="chemin_du_fichier2/fichier2.html"> cliquez ici pour accder chier2.html </a>

Tableaux Il est possible de dnir des tableaux en XHTML. Un tableau est reprsent par un ensemble de lignes, chaque ligne contenant un ensemble de cellules. Chaque contenu de cellule doit tre compris entre les balises <td> et </td>. Les cellules dune mme ligne doivent tre comprises entre les balises <tr> et </tr>. Finalement, les lignes dun tableau doivent tre comprises entre les balises <table> et </table>. Le tableau Cellule 1 Cellule 4 Cellule 2 Cellule 5 11 Cellule 3 Cellule 6

est alors cod en XHTML de la manire suivante :


Introduction Web, 1re anne

Mathieu LACROIX

IUT de Villetaneuse

1 2 3 4 5 6 7 8

< table >

< tr > </ tr > < tr >

<td> Cellule 1 </td> <td> Cellule 2 </td> <td> Cellule 3 </td> <td> Cellule 4 </td> <td> Cellule 5 </td> <td> Cellule 6 </td>

Gnralement, les cellules de la premire ligne et/ou colonne dun tableau contiennent les noms des donnes (ex : nom, age, etc) de la colonne. On parle alors de cellules den-tte du tableau. En XHTML, une cellule den-tte est dnie laide des balises <th> et </th> au lieu des balises <td> et </td>. Remarque : Ces balises servent uniquement insrer un tableau de donnes sur la page Web. Elles ne doivent en aucun cas tre utilises pour sa mise en page.

</ tr > </ table >

1.2.2

Information dun document XHTML

1 2 3 4 5 6 7 8 9 10 11

Le XHTML, pour tre valide, doit contenir un certain nombre dinformations qui sont stockes au dbut du document et dans la balise html. Ces informations sont les suivantes :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> < title > TITRE OBLIGATOIRE </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> ... le code XHTML de votre page ... </body> </html>

Les lignes 1 et 2 indiquent que le document est un document XHTML respectant les rgles dcriture (DTD) de lXHTML strict dnies par lorganisme W3C soccupant des normes du Web. Lattribut xmlns (et sa valeur bien sr !) de la balise html est obligatoire. Lexplication dpasse le cadre de ce cours. Lattribut xml:lang permet de spcier que le document est en franais. La ligne 6 indique que le document est encod en UTF-8. Tout document XHTML doit donc respecter cette structure pour tre valide. Il faut donc commencer systmatiquement tout chier XHTML en crivant ces lignes.

1.2.3

Reprsentation dun document XHTML sous forme darbre

1 2 3

Tout document XHTML peut tre reprsent sous forme darbre. Cet arbre sera par la suite utilis pour dnir certaines rgles dcriture (DTD) dun chier XHTML et pour modier la mise en page du document laide du code CSS (chapitre suivant). Cette construction sous forme darbre est relativement intuitive et peut tre vue comme un arbre gnalogique. Les sommets de larbre sont des balises XHTML. Il existe une che dune balise, disons balise1, une autre, disons balise2, si balise2 est comprise entre <balise1> et </balise1> et quil ny a pas une balise comprise entre <balise1> et </balise1> contenant la balise balise2. Bien que cette notion semble abstraite et dicile, elle est trs facile comprendre. Pour cela, considrons le document XHTML suivant.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> Mathieu LACROIX

12

Introduction Web, 1re anne

Dpartement informatique <head> < title > TITRE OBLIGATOIRE </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <h1> Voici un titre <strong> avec des mots importants! </strong> </h1> <p> Voici un premier paragraphe. Il contient notamment <a href="document.html"> un lien vers le chier document.html </a>. </p> <p> Le deuxime paragraphe contient des mots mettre en <em> valeur </em>. Nous avons ensuite une liste non ordonne : </p> < ul > < li > Premier point : encore <strong> <a href="document.html"> un lien </a> </strong> </ li > < li > Deuxime point : une autre liste < ul > < li > avec un item </li> < li > et un autre </ li > </ ul > </ li > < li > Finalement, un dernier point </ li > </ ul > </body> </html>

4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

Larbre reprsentant ce code XHTML est donn dans la gure 1.3. Il y a une che de html body car la balise body se trouve entre <html> et </html> et il nexiste pas de balise contenant body qui est contenue dans html. Cet arbre permet dindiquer direntes relations entre les balises, similaires celles dnies pour les arbres gnalogiques : Une balise balise1 est dite enfant dune balise balise2 sil existe une che de balise1 balise2. Par exemple la balise h1 est enfant de body. Une balise balise1 est dite parent dune balise balise2 si balise2 est enfant de balise1. Par exemple la balise body est parent de h1. Une balise balise1 est dite descendant dune balise balise2 si en prenant successivement les parents de balise1, on arrive sur balise2. Par exemple, la balise title est un descendant de html car head est parent de title et html est parent de title. Une balise balise1 est dite ascendant dune balise balise2 si balise2 est descendant de balise1. Remarque : Par dnition, tout parent est un ascendant et tout enfant un descendant. Attention : Dans larbre de reprsentation, les enfants dune balise sont ordonns de gauche droite suivant lordre dans lequel ils apparaissent dans le document XHTML. Ainsi, la balise head est gauche de la balise body puisque head apparat avant body dans le document.

1.2.4

Dirences entre balises de type block et balises de type inline

Les direntes balises que lon peut mettre dans le corps de la page peuvent tre classes en deux groupes. Balises de type block : Ce sont les balises qui crent un bloc, cest--dire que le navigateur eectue systmatiquement un retour la ligne aprs lutilisation de la balise. Parmi les balises que nous venons de voir, les balises de type block sont les balises : h1,...,h6, p, ol, ul, li, hr, table, tr.
Introduction Web, 1re anne

13

Mathieu LACROIX

IUT de Villetaneuse
html

head

body

title

meta

h1

ul

strong

em

li

li

li

strong

ul

li

li

Figure 1.3 Arbre de reprsentation du document XHTML Balises de type inline : Lutilisation de ces balises nentrane pas par la suite un saut de ligne. Ces balises sont : br, em, strong, img, a. Cette distinction permet notamment de dnir clairement certaines rgles dcriture dun document XHTML.

1.2.5

La DTD ou les "rgles" dcriture dun chier XHTML

An dtre valide, un document XHTML doit vrier un certain nombre de rgles dcriture. Ces rgles ont pour but dacher correctement une page Web mais permettent galement une meilleure visibilit du site sur le Web. De plus, elles permettent de rendre le site accessible pour tous les types de navigateurs (navigateurs textes par exemple). Il est primordial de suivre ces rgles ! Nous numrons ici les principales rgles. Imbriquation de balises Il nest pas possible dimbriquer deux balises, cest--dire douvrir une premire balise, puis une seconde, puis fermer la premire et fermer la seconde. Le code
<p>Paragraphe avec texte en <strong>gras</p></strong>

nest donc pas valide ! Il faut crire la place

<p>Paragraphe avec texte en <strong>gras</strong></p>

Utilisation des minuscules Les noms des balises et des attributs doivent tre crits avec des minuscules. Valeur des attributs en guillemets Les valeurs des attributs doivent obligatoirement tre encadres par des guillemets. Inclusion des balises inline Une balise de type inline ne peut pas tre enfant de la balise body. Autrement dit, toute balise de type inline doit tre comprise dans une balise de type block. Balises inline et block type inline.
Mathieu LACROIX

Une balise de type block ne peut tre comprise dans une balise de 14

Introduction Web, 1re anne

Dpartement informatique

1 2 3

Texte lintrieur dun bloc Tout texte doit se trouver dans des balises de type block. Le code suivant nest donc pas valide
<body>

Il faut imprativement utiliser une balise de type block pour encadrer ce texte. Par exemple, les balises de titres ou la balise p.
</body>

Voici le texte que je souhaite acher sur mon navigateur

Enfants et parents possibles Certaines balises sont interdites comme enfants ou parents dune autre balise. Ces rgles dcoulent gnralement du bon sens. Par exemple, on ne peut pas avoir un paragraphe contenu lintrieur dun titre. De mme, un titre ne peut pas tre contenu dans un paragraphe. De la mme manire, quasiment aucune balise ne peut tre contenue dans elle-mme. Par ailleurs, une liste (ordonne ou non ordonne) ne peut contenir que des balises dnissant des items. Autrement dit, les seuls enfants possibles des balises ul et ol sont les balises li. Pour connatre la liste des enfants et des parents possibles pour une balise, vous pouvez regarder sur le Web direntes rfrences telles que celle situe ladresse : http://fr.selfhtml.org/html/reference/elements.htm. Rappelez-vous que ce nest pas parce que le navigateur ache correctement votre page Web que celle-ci est valide ! Il faut absolument utiliser un validateur.

Introduction Web, 1re anne

15

Mathieu LACROIX

IUT de Villetaneuse

Mathieu LACROIX

16

Introduction Web, 1re anne

Cours 2

Mise en page avec CSS


Dans le chapitre prcdent, nous avons vu comment crire du code XHTML. Nous expliquons maintenant comment modier lachage dune page Web laide du CSS.

2.1

criture de code CSS

1 2 3 4

Comme vu prcdemment, le XHTML permet de spcier quel lment correspond chaque partie du chier XHTML. Par exemple, on peut spcier que telle partie correspond un titre de niveau 1, un paragraphe, un tableau, etc. Le CSS va nous permettre de spcier comment acher les dirents lments. Par exemple, nous pouvons spcier, laide du CSS, que les titres doivent tre achs en rouge, les paragraphes en italique, etc. Pour cela, nous crivons dans un chier CSS les direntes spcications. Ceci se fait en utilisant la structure suivante :
slecteur { }

1 2 3 4

Le slecteur est la cible de la modication. Le slecteur peut donc tre par exemple une balise. La proprit est celle que nous voulons modier. Par exemple, la proprit peut tre la couleur dachage. La valeur correspond la valeur que lon souhaite aecter la proprit (ex : pour la couleur, on veut du rouge). Ainsi, si lon souhaite que les titres de niveau 1 soient achs en rouge, il sut de mettre le code :
h1 { }

proprit : valeur ;

Ces trois attributs sont ncessaires en XHTML. Le seul qui nous intresse est lattribut href qui permet de spcier le nom du chier contenant les instructions CSS et son chemin. Lutilisation de href est la mme que pour la balise a.
< link href ="fichierCSS.css" rel="stylesheet" type="text/css" />

Il peut y avoir plusieurs proprits associes un mme slecteur. Lensemble form par un slecteur et les proprits associes est appel une rgle. Dans un chier, il peut y avoir plusieurs rgles ayant le mme slecteur. Finalement, une fois que nous avons spci les modications dachage dans un chier, il sut de dire dans le chier XHTML que lachage doit suivre les spcications donnes dans le chier contenant le code CSS. Ceci se fait grce la balise auto-fermante link qui doit tre enfant de la balise head, cest--dire, directement contenue entre les balises <head> et </head>. La balise link sutilise de la manire suivante :

color : red;

17

IUT de Villetaneuse

Remarque contient du lisibilit. Remarque pas abords

: On utilise gnralement lextension de chier ".css" pour indiquer que le chier code CSS. Mme si cela nest pas ncessaire, utilisez cette extension pour plus de : Il existe dautres moyens dassocier du code CSS un code XHTML qui ne seront dans ce cours.

2.2

Les principales proprits et leurs valeurs

Nous prsentons maintenant direntes proprits du CSS ainsi que leur principales valeurs possibles. Cette liste nest pas exhaustive. Pour connatre toutes les proprits et leurs direntes valeurs, vous pouvez par exemple visiter le site http://fr.selfhtml.org/css/proprietes/index. htm.

2.2.1

Modication de la police

font-family permet de spcier la police qui doit tre utilise. Les valeurs possibles sont les direntes polices existantes telles que Times, Arial, Verdana, sans-serif, Script, Courrier, "Times New Roman", etc. Il est conseill de mettre comme valeur plusieurs polices au cas o le navigateur ne possde pas les premires polices. (Valeur par dfaut : dpend du navigateur) font-size indique la taille du texte. La taille peut tre spcie de manire absolue en donnant sa valeur en pixels ou en utilisant les valeurs xx-small, x-small, small, medium, large, x-large, xx-large. La taille peut galement tre donne de manire relative, cest--dire par rapport la taille de llment parent. Dans ce cas, la valeur est donne en pourcentage ou en unit "em" (1em correspondant 100%). (Valeur par dfaut : medium sauf pour les titres) font-style permet de spcicier si le texte est en italique (valeur : italic) ou non (valeur : normal). (Valeur par dfaut : normal sauf pour la balise em o la valeur est italic) font-weight permet de spcicier si le texte est en gras (valeur : bold) ou non (valeur : normal). Il est galement possible de mettre comme valeur un nombre entre 100 et 900. (Valeur par dfaut : normal sauf pour la balise strong o la valeur est bold et pour les titres o la valeur est spcie par un nombre) text-align permet de spcier lalignement horizontal du texte. Cette proprit sutilise uniquement pour les balises de type block. Les direntes valeurs sont : alignement gauche (left), alignement droite (right), centr (center), texte justi (justify) (Valeur par dfaut : dpend du navigateur et du sens de lecture) text-decoration permet de spcicier si le texte est soulign (valeur : underline), barr (valeur : line-through), clignotant (valeur : blink), avec un trait au-dessus (valeur : overline) ou sans dcoration (valeur : none). (Valeur par dfaut : none sauf pour la balise a o la valeur est underline) color permet de spcier la couleur dachage du texte. La valeur de cette proprit peut tre donne sous trois formes : nom de la couleur (en anglais) : red, blue, green, fuschia, gray, olive, purple, etc. Cependant, il ny a que 17 couleurs ayant un nom,
Mathieu LACROIX

18

Introduction Web, 1re anne

Dpartement informatique

code hexadcimal de la couleur : compos de trois chires hexadcimaux reprsentant les tons de Rouge, de Vert et de Bleu, il permet de dnir plus de 16 millions de couleurs. La couleur indigo correspond par exemple au code hexadcimal #4B0082. code RVB : permet de dnir les composantes de rouge, vert et bleu en indiquant leur proportion en pourcentage ou en notation absolue (nombre compris entre 0 et 255). La couleur indigo correspond au code RVB rgb(75,0,130). Les deux dernires formes sont similaires. Elles permettent rellement de dnir nimporte quelle couleur. Le problme est quil faut connatre le code de la couleur que lon souhaite utiliser. Pour cela, il existe plusieurs logiciels, tels que gimp ou gcolor, permettant de choisir une couleur dans une palette et achant les dirents codes associs la couleur choisie. (Valeur par dfaut : dpend du navigateur)

2.2.2

Dimensions

Il est possible de spcier les dimensions du contenu dune balise de type block. Ceci se fait laide des proprits suivantes : width permet de spcier la largeur du contenu de la balise. Cette taille peut tre exprime de manire absolue en pixels, ou de manire relative en pourcentage. (Dans ce cas, la largeur de llment est gale la largeur de llment parent multipli par le pourcentage.) width peut galement prendre la valeur auto. Dans ce cas, la valeur est gale la taille maximum possible que peut prendre llment. Cette valeur dpend des marges, de la taille de la bordure (cf. plus loin) et de la taille de llment parent. (Valeur par dfaut : auto) height permet de spcier la hauteur du contenu de la balise. La hauteur peut tre exprime en pixels ou pourcentage, ou par la valeur auto. Dans ce cas, la valeur correspond la hauteur minimum ncessaire pour acher llment. (Valeur par dfaut : auto) min-height permet de spcier la hauteur minimum du contenu de la balise. La hauteur du contenu de la balise de type block associe cette proprit sera gale au maximum entre la valeur donne pour cette proprit et la hauteur ncessaire pour acher correctement le contenu. Cette proprit sera utile par la suite pour sassurer que les direntes parties (menu, en-tte, partie principale, pied de page) dune page Web sachent correctement. (Valeur par dfaut : 0) Ces proprits ne sutilisent pas pour les lments de type inline qui, par dfaut, nont pas de dimensions. La seule exception est la balise img pour laquelle les deux premires proprits peuvent tre utilises pour indiquer la largeur et la hauteur de limage.

2.2.3

Modication du fond

Il est possible de modier la page Web en choisissant une couleur de fond (ou arrire-plan), ou une image de fond, pour chaque balise. background-color permet de spcier une couleur de fond. Les valeurs possibles sont les mmes que pour la proprit color plus la valeur transparent. (Valeur par dfaut : transparent) background-image permet de spcier une image de fond. La valeur est alors url("image") o image correspond au nom du chier image ainsi que son chemin (image sutilise de la mme manire que la valeur de lattribut href dans la balise a). Cette proprit prend la valeur none sil ny a pas dimage de fond. (Valeur par dfaut : none)
Introduction Web, 1re anne

19

Mathieu LACROIX

IUT de Villetaneuse

background-repeat permet dindiquer, lorsque limage de fond est plus petite que la taille de llment, si limage doit tre rpte ou non. Les direntes valeurs possibles sont : repeat-x : limage doit tre rpte horizontalement, repeat-y : limage doit tre rpte verticalement, repeat : limage doit tre rpte horizontalement et verticalement, no-repeat : limage ne doit pas tre rpte. (Valeur par dfaut : repeat)

2.2.4

Bordures et marges

Il est possible de spcier pour chaque balise une bordure et des marges intrieures et extrieures. La gure 2.1 montre quoi correspondent les bordures, les marges intrieures et extrieures dun lment.

margintop bordertop paddingtop marginleft borderleft paddingleft

margin border padding


paddingright borderright marginright

height

CONTENU
width paddingbottom borderbottom marginbottom

Figure 2.1 Dimensions, bordures et marges 1

1 2 3 4

border permet de spcier la bordure dun bloc. La valeur est constitue de trois lments : la taille de la bordure, le style (trait plein, pointills) et la couleur. La taille est donne en pixels, le style par dotted (pointills), solid (trait plein) ou dashed (tirets). La couleur est spcie de la mme manire que pour lattribut color. La bordure dun paragraphe correspondant un trait plein de 1 pixel de couleur bleu est alors donne par :
p { }

Cette proprit prend la valeur none sil ny a pas de bordure. (Valeur par dfaut : none) Si lon souhaite donner direntes valeurs pour les bordures haut, bas, gauche et droite, il faut alors utiliser les proprits border-top, border-bottom, border-left ou border-right.
1. Image base sur une image provenant du cours de Marcel BOSC.

border : 1px solid blue ;

Mathieu LACROIX

20

Introduction Web, 1re anne

Dpartement informatique

1 2 3 4 5 6

margin permet de dnir la taille de la marge extrieure en pixels (px), en taille relative (em) ou en pourcentage. Si lon souhaite donner direntes tailles pour les marges extrieures haut, bas, gauche et droite, il faut alors utiliser les proprits margin-top, margin-bottom, margin-left ou margin-right. La valeur de la taille dune marge peut galement tre la valeur auto. Dans ce cas, on laisse le navigateur dterminer automatiquement cette taille. Si les marges gauches et droites sont dtermines par le navigateur, alors ce dernier centre llment. (Il faut cependant que la largeur (width) de llment ait t xe.) Donc, pour centrer les tableaux dans une page Web, il sut dajouter dans le code CSS :
table { width : 500px; margin- left : auto; margin- right : auto;

Pour les lments de type inline, seules les marges extrieures gauche et droite peuvent tre dnies. (Valeur par dfaut : dpend des cts (haut, bas, gauche, droite) et des lments)

padding permet de dnir la taille de la marge intrieure en pixels (px), en taille relative (em) ou en pourcentage. Si lon souhaite donner direntes tailles pour les marges intrieures haut, bas, gauche et droite, il faut alors utiliser les proprits padding-top, padding-bottom, padding-left ou padding-right. Pour les lments de type inline, seules les marges intrieures gauche et droite peuvent tre dnies. (Valeur par dfaut : 0 sauf pour la marge gauche pour les items dune liste)

Remarque Les tailles des marges (internes et externes) et de la bordure ne sont pas prises en compte dans les valeurs des attributs width et height. Ainsi, si un bloc a une largeur (width) de 100 pixels, une marge intrieure de 10 pixels, une marge extrieure de 20 pixels et une bordure de 3 pixels, sa largeur totale est donc de 166 pixels.

2.2.5

Modications lies aux listes et tableaux

La premire proprit est lie aux tableaux, les deux suivantes aux listes. border-collapse permet de spcier si les cellules dun tableau sont colles (valeur collapse) ou non (valeur separate). (Valeur par dfaut : separate) list-style-type dnit le type de puces utilises dans les listes non ordonnes : carr (valeur square), cercle (valeur circle), cercle plein (valeur dic) ou aucune puce (valeur none). Cette proprit permet galement de spcier la numrotation dune liste ordonne : chires dcimaux 1,2,.. (valeur decimal), chires romains en majuscules (valeur upper-roman), chires romains en minuscules (valeur lower-roman). (Valeur par dfaut : decimal pour les listes ordonnes et disc pour les listes non ordonnes) list-style-image permet dutiliser une image pour reprsenter la puce dune liste non ordonne. La valeur est donne par url("fichierImage") o "chierImage" reprsente le nom de limage et son chemin. Cette proprit prend la valeur none sil ny a pas dimage de fond. Si une image est spcie, alors aucune puce nest ache en plus de limage, quelle que soit la valeur de la proprit list-style-type. (Valeur par dfaut : none)
Introduction Web, 1re anne

21

Mathieu LACROIX

IUT de Villetaneuse

2.2.6

Modication du type de la balise

Il est possible de transformer une balise de type block en une balise de type inline et inversement. Pour cela, il faut utiliser la proprit display qui prend les valeurs suivantes : block : llment devient de type block, inline : llment devient de type inline, inline-block : llment est de type inline, mais on peut lui appliquer les proprits rserves aux balises de type block, permettant par exemple de spcier une hauteur et une largeur. none : llment nest pas ach. Ceci revient supprimer compltement llment dans le code XHTML. (Valeur par dfaut : correspondant au type de la balise)

2.2.7

Positionnement

Les lments peuvent tre positionns diremment suivant les valeurs de la proprit position et de la proprit float. Les dirents positionnements sont dcrits dans la suite. Positionnement statique Par dfaut, les lments dune page Web sont achs dans lordre o ils apparaissent dans le code XHTML. Cet ordre est appel ux de la page XHTML. Si la page XHTML contient Le navigateur ache dabord le titre, puis le paragraphe. Dans le paragraphe, il ache dabord le texte mis en valeur puis le texte mis fortement en valeur. De plus, il revient la ligne avant et aprs tout lment de type block. Par ailleurs, chaque lment de type block prend par dfaut toute la largeur quil peut, cest--dire toute la largeur de son conteneur. Tous les objets positionns selon le ux sont dits positionns de manire statique. La valeur de la proprit position est alors static. Cest la valeur par dfaut de cette proprit. Positionnement Relatif La valeur relative de la proprit position permet de dplacer llment par rapport la position quil avait dans le ux. Le dplacement est spci par les proprits top, bottom, left et right qui prennent comme valeur une distance donne en pixels ou en pourcentage. Ce dplacement ne modie pas lachage des autres lments du ux. De plus, llment garde les mmes dimensions et marges que sil avait t positionn avec la valeur static. Considrons le code XHTML
<body> <p> Paragraphe 1 < ul > < li > Item < li > Item </ ul > <p> Paragraphe 2 </body> </p> 1 </li> 1 </li> </p> <h1> titre </h1> <p> paragraphe avec du texte <em> mis en valeur </em> et du texte <strong> fortement mis en valeur </strong> </p>

1 2 3

1 2 3 4 5 6 7 8

1 2 3 4

et le code CSS
body {

22

width : 200px; height : 200px;

Mathieu LACROIX

Introduction Web, 1re anne

Dpartement informatique border : 2px dashed black; padding : 0; margin : 50px; } ul {

5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

border : 1px solid silver ; margin : 0; background-color : silver ;

} p {

background-color : #717171; border : 1px solid black ;

La gure 2.2 montre lachage obtenu lorsque la liste non ordonne est ache avec la proprit position:static puis avec position:relative et les proprits left:50px; et top:50px;.

Figure 2.2 position gale static puis relative.

Positionnement Absolu Lorsquun lment a position:absolute;, il est dabord retir du ux. Tous les lments du ux sont ensuite achs. Finalement, llment positionn de manire absolue est ajout par la suite. Par dfaut, cet lment est plac lendroit o il aurait t plac dans le ux. Pour modier
Introduction Web, 1re anne

23

Mathieu LACROIX

IUT de Villetaneuse

son placement, on utilise les proprits top, bottom, left ou right qui permettent de dnir la distance par rapport au premier ascendant qui nest pas positionn de manire statique. Si tous les ascendants sont positionns de manire statique, les distances sont donnes par rapport aux bords du navigateur. La largeur par dfaut dun lment positionn de manire absolue est gale au minimum pour acher le contenu de llment. La gure 2.3 montre lachage obtenu lorsque la liste non ordonne est ache avec les proprits position:absolute;, right:10px; et bottom:10px;. Dans le premier cas, tous les autres lments sont positionns de manire statique. La liste est donc positionne par rapport aux bords du navigateur. Dans le second cas, la balise body est positionne de manire relative (sans dplacement). Le positionnement de la liste se fait alors par rapport aux bords de la balise body.

Figure 2.3 Proprit position pour body gale static puis relative.

Positionnement xe Le positionnement xe (position:fixed;) dun lment est quivalent au positionnement absolu de cet lment, la dirence que le positionnement se fait toujours par rapport aux bords du navigateur. De plus, llment reste la mme position, mme en cas de dlement de la page Web. Objet ottant Il est possible de spcier quun lment est ottant, cest--dire quil peut tre entour de texte (ou par dautres lments), grce la proprit float. Llment est mis soit totalement gauche (valeur left), soit totalement droite (valeur right).
Mathieu LACROIX

24

Introduction Web, 1re anne

Dpartement informatique

Si llment nest pas ottant, alors la valeur de la proprit est none. (Valeur par dfaut : none)

2.2.8

Modication du curseur de la souris

Il est possible de modier le curseur de la souris au survol dun lment. Pour cela, il sut dutiliser la proprit cursor qui peut prendre les valeurs pointer (le curseur est une main), help (le curseur est un point dinterrogation), wait (le curseur prend la forme du symbole dattente), text (le curseur a la forme I, utilise pour slectionner du texte), url(chemin/nomImage.png) ou auto. (Valeur par dfaut : auto)

2.2.9

Spcication de lachage en cas de dpassement

Lespace ncessaire pour acher le contenu dun lment peut parfois tre suprieur aux dimensions (largeur et hauteur) de cet lment. Dans ce cas, il est possible de spcier comment acher le contenu qui dpasse de llment avec la proprit overflow. Si cette proprit a pour valeur visible, tout le contenu dpassant de llment sera ach (Il y a alors un risque de chevauchement). Si elle a pour valeur hidden, le contenu dpassant de llment ne sera pas ach. Si la valeur est auto, une barre de dlement sera ajoute si cela est ncessaire. Dans ce cas, le contenu ne dpassera pas les dimensions de llment. Il faudra utiliser la barre de dlement pour voir tout le contenu. (Valeur par dfaut : visible) titre dexemple, considrons le code XHTML suivant

1 2 3 4 5 6 7 8

<body> < ul >

1 2 3 4 5 6

associ au code CSS suivant


ul { width : 100px; height : 80px; border : 1px solid red;

</ ul > </body>

< li > < li > < li > < li >

Premier point </ li > Deuxime point </li> Troisime point </ li > Quatrime point </li>

Clairement, la liste non ordonne ne peut pas sacher entirement dans un espace de 100 * 80 pixels. La gestion de lachage de la liste dpend alors de la proprit overflow, comme montr dans la gure 2.4.

Figure 2.4 Achage de la liste avec la proprit overflow gale visible, hidden puis auto. 25

Introduction Web, 1re anne

Mathieu LACROIX

IUT de Villetaneuse

2.3

Classes et identiants

1 2 3 4

Nous venons de voir comment modier lachage de direntes balises. Ainsi, si je veux que tous les paragraphes soient crits en bleu, il me sut de mettre dans le chier CSS le code
p { }

1 2 3 4

Supposons maintenant que je veuille que seuls les deux premiers paragraphes soient en bleu. Pour cela, il faut alors distinguer les paragraphes entre eux ! Ceci peut se faire en utilisant les classes. Une classe est simplement un nom tel que "enBleu" par exemple. On peut ensuite indiquer quelles balises appartiennent cette classe grce lattribut XHTML class prenant comme valeur le nom dune classe. Dans notre exemple, on peut direncier les deux premiers paragraphes des autres en spciant que ces deux paragraphes appartiennent la classe "enBleu". Il sut alors, dans le chier CSS, de spcier les proprits et les valeurs des lments appartenant cette classe. Pour cela, il sut, pour le slecteur, dindiquer le nom de la classe prcd du caractre .. Ainsi, dans mon exemple, il faut modier dans le chier XHTML les deux premiers paragraphes selon <p class="enBleu"> ... </p>. Il faut ensuite ajouter dans le code CSS :
.enBleu { }

color : blue;

color : blue;

Il est galement possible certaines fois dutiliser les identiants plutt que les classes. Pour spcier quun lment a pour identiant nomId, il sut de rajouter dans la balise XHTML lattribut id selon <balise id="nomId">. Les spcications de lidentiant en CSS se font de la mme manire que pour une classe, except que le nom de lidentiant doit tre prcd du caractre # plutt que du point. Bien que les identiants et les classes soient similaires, il existe une dirence fondamentale : chaque identiant peut tre associ un unique lment, cest--dire quil ne peut y avoir deux balises dans un chier XHTML ayant la mme valeur de lattribut id. Lidentiant sert justement dsigner un lment unique. On lutilise gnralement pour indiquer les direntes parties dune page Web (haut de page, menu, pied de page, etc).

indique le paragraphe appartient la classe enRouge, enGras et la classe italique. Par ailleurs, un slecteur peut contenir plusieurs classes. Par exemple, le slecteur p.classe1.classe2 correspond aux paragraphes appartenant aux classes classe1 et classe2.
<p class="enRouge enGras italique"> ... </p>

Remarque : Il est possible de spcier quun lment appartient plusieurs classes (ou identiants). Pour cela, il faut donner comme valeur de lattribut class les noms des direntes classes auxquelles appartient llment, ces noms tant spars par des espaces. Par exemple, le code XHTML

2.4

Balises XHTML span et div

Il peut tre parfois ncessaire dappliquer une classe ou un identiant un bout du code XHTML. Comme une classe est dnie laide dun attribut dans une balise, il est donc ncessaire dans ce cas que le bout de code sur lequel je souhaite appliquer la classe ou lidentiant soit lintrieur dune balise. Si ce nest pas le cas, alors je peux ajouter des balises qui ne changent rien mais vont permettre de spcier une classe ou un identiant. Cest le rle des balises universelles span et div. La balise span est de type inline et div de type block.
Mathieu LACROIX

26

Introduction Web, 1re anne

Dpartement informatique

Supposons par exemple que je souhaite crire en bleu les noms de villes dun texte XHTML. Il me sut alors de dnir une classe "enBleu" dont le code CSS indique que le texte doit tre mis en bleu (cf. la partie prcdente). Je dois alors, dans le chier XHTML, encadrer chaque ville par la balise span de la manire suivante : <span class="enBleu"> nom dune ville </span>.

2.5

Les pseudo-formats

Il est parfois utile dappliquer un style un lment qui ne correspond pas une balise (e.g., la premire ligne dun paragraphe) ou un lment un certain moment (e.g., un lien lorsque la souris est dessus). Or, les slecteurs courants, comme les balises body ou p, ne permettent pas de modier lapparence dans ces cas-l. Il est alors ncessaire dutiliser dautres slecteurs, appels pseudo-formats. Ces derniers sutilisent de la manire suivante : slecteur:pseudo-format.

2.5.1

Pseudo-formats associs aux liens

1 2 3 4

Il est possible de modier lapparence dun lien lorsque la souris est dessus (:hover), lorsque lon clique avec la souris (:active) ou lorsque le lien a dj t visit (:visited). Si je souhaite quun lien soit ach en jaune lorsque lutilisateur clique dessus, je dois alors ajouter le code CSS suivant :
a: active { }

color : yellow ;

Si lon souhaite dnir plusieurs styles pour un mme lien suivant les dirents pseudo-formats, il faut alors dclarer les styles dans lordre :visited, :hover, :active. Remarque : Le pseudo-format :hover peut sappliquer sur dautres balises XHTML (e.g., p, h1, etc) pour modier lapparence des paragraphes, titres, etc au survol de la souris.

2.5.2

Pseudo-formats associs aux paragraphes

Il est possible de modier uniquement lapparence de la premire lettre dun paragraphe (:first-letter) ou lapparence de la premire ligne dun paragraphe (:first-line).

2.5.3

Pseudo-format :first-child

Le pseudo-format :first-child permet dindiquer que lon modie lapparence de llment uniquement si celui-ci est le premier enfant dune balise. Ainsi, les proprits associes p:firstchild sappliquent tous les paragraphes qui sont premier enfant dune balise. Si le code XHTML contient uniquement deux paragraphes, ces dernires sappliqueront uniquement au premier paragraphe (puisque celui-ci est le premier enfant de la balise body).

2.6
2.6.1

Les dirents slecteurs et modications en cascades


Combinaisons de slecteurs

Jusqu maintenant, nous avons vu que les slecteurs taient des balises (e.g., p, h1, etc), des balises avec des pseudo-formats, des classes ou des identiants. Il est cependant possible de crer des slecteurs par combinaison. Voici les direntes combinaisons possibles :
Introduction Web, 1re anne

27

Mathieu LACROIX

IUT de Villetaneuse

Combinaison E EF E>F E.maClasse E#myid E, F

Explication correspond tout lment E. correspond tout lment F qui est un descendant de llment E. correspond tout lment F qui est un enfant de llment E. correspond tout lment E appartenant la classe "maClasse". correspond tout lment E dont lidentiant est "myid". les modications sappliquent aux lments E et aux lments F.

Il est possible dutiliser ces direntes combinaisons entre elles pour spcier davantage la cible des modications. Ainsi, les proprits associes au slecteur #abc p.enRouge > a:hover sappliquent uniquement aux liens survols par la souris qui sont enfants de paragraphes appartenant la classe "enRouge", eux-mme descendants dlements dont lidentiant est "abc". De mme, les proprits associes au slecteur p > em.rouge.Italique , h1 .bleu sappliquent uniquement aux lments mis en valeur par la balise em appartenant aux classes "rouge" et "Italique" et enfants de paragraphes, ou alors aux lements appartenant la classe "bleu" et descendants de h1. Remarque : Il faut faire bien attention : les slecteurs p.enRouge et p .enRouge sont compltement dirents ! Le premier napplique les modications dapparence que pour les paragraphes appartenant la classe "enRouge", alors que le second modie lapparence des lments appartenant la classe "enRouge" et descendants dun paragraphe.

2.6.2

Styles en cascade

1 2 3 4 5 6 7 8 9 10 11 12 13 14

et que le chier CSS associ contient les rgles


p { } .enRouge { color : red; } #monId p { text - align : right ; } font - size : small;

Suivant les slecteurs, plusieurs rgles peuvent sappliquer un mme lment. Lorsque les proprits dnies dans ces direntes rgles sont toutes direntes, elles sappliquent toutes llment. Cest ce que lon appelle le style en cascade. Ainsi, si dans le code XHTML, on a :
< div id ="monId"> <p class="enRouge"> ... </p> </div>

le paragraphe sera alors crit en rouge, align droite et avec la taille small. En eet, les direntes rgles sappliquent car le paragraphe est un paragraphe, il appartient la classe enRouge et est galement un paragraphe ayant un ascendant dont lidentiant est monId.

2.6.3

Priorit des slecteurs

Les styles en cascade permettent dutiliser plusieurs rgles pour un mme lment. Que se passet-il si deux rgles indiquent deux valeurs direntes pour une mme proprit ? Par exemple, si lon a toujours le mme code XHTML que prcdemment mais que le chier CSS contient les rgles
Mathieu LACROIX

28

Introduction Web, 1re anne

Dpartement informatique

1 2 3 4 5 6 7 8 9

.enRouge { color : red; } #monId p { color : green; }

le paragraphe sache-t-il en rouge ou en vert ? An quil ny ait aucune ambigut, les rgles sappliquent selon une certaine priorit. Ainsi, si deux rgles sappliquent un mme lment avec deux valeurs direntes pour une mme proprit, alors la valeur de la proprit utilise pour llment sera celle donne par la rgle de priorit la plus leve. La priorit dune rgle est donne par la priorit du slecteur associ. Rapidement, plus le slecteur est spcique, plus sa priorit est leve. Dans notre exemple, #monId p est plus spcique que .enRouge, ce qui implique que le paragraphe sera crit en vert. De manire plus prcise, il est possible de dterminer la priorit entre deux slecteurs de la manire suivante. Pour chaque slecteur, on dtermine un nombre de trois chires dont le chire des centaines correspond au nombre didentiants apparaissant dans le slecteur, le chire des dizaines au nombre de classes et pseudo-formats apparaissant dans le slecteur et le chire des units au nombre dlements (autres que les identiants, les classes et les pseudo-formats) apparaissant dans le slecteur. Ainsi, le slecteur #monId p est associ au nombre 101 et .enRouge au nombre 010. Le slecteur #monId div.classe1 h2#monId2.classe2 em a est associ au nombre 224. Le slecteur qui possde le plus grand nombre est prioritaire. En cas dgalit, la priorit est donne la dernire rgle apparaissant dans le chier CSS.

2.7
2.7.1

Hritage
Valeur par dfaut et hritage

1 2 3 4

Si aucune valeur nest prcise pour une proprit dans le CSS, la valeur pour cette proprit est celle par dfaut. Ainsi, si la proprit border nest pas spcie dans le CSS, il ny a aucune bordure lachage puisque la proprit border associe nimporte quel lment prend la valeur par dfaut none. Cependant, les valeurs de certaines proprits peuvent tre hrites, cest--dire que pour ces proprits (telles que color), si aucune valeur nest spcie pour un lment, la valeur est alors celle de llment parent plutt que la valeur par dfaut. Ainsi, si le code CSS contient juste
body { }

1 2

alors tout sera crit en rouge (exception faite des liens hypertextes). En eet, pour chaque lment qui nest pas un lien, aucune valeur nest prcise pour la proprit color. La valeur associe cette proprit est alors gale la valeur de color pour llment parent. titre dexemple, considrons que le code XHTML entre les balises <body> et </body> est et que le code CSS associ est
.rouge { Introduction Web, 1re anne <p class="rouge"> Du texte <em> mis en valeur </em> puis <strong> du texte fortement mis en valeur . </strong> </p>

color : red;

1 2

29

Mathieu LACROIX

IUT de Villetaneuse color : red; } em {

3 4 5 6 7 8 9

color : blue;

La premire rgle sapplique au paragraphe mais elle ne sapplique pas au texte qui se trouve entre les balises <em> et </em>, ni celui se trouvant entre les balises <strong> et </strong>. Les parties Du texte et puis sont donc crits en rouge grce la premire rgle. Le texte entre les balises <em> et </em> est crit en bleu car seule la deuxime rgle du CSS sapplique. Finalement, pour le texte compris entre les balises <strong> et </strong>, aucune rgle ne sapplique. Puisque la proprit color peut tre hrite, la valeur de color pour ce texte est donc gale celle de son parent. Comme llment parent de strong est p.rouge, et que la valeur associe color est red, la valeur de color pour la balise strong est red et le texte compris entre <strong> et </strong> est donc crit en rouge.

Les proprits qui peuvent tre hrites sont les proprits relatives la police de caractres (section 2.2.1) et les proprits border-collapse, list-style-type, list-style-image et cursor. Les autres proprits prsentes dans ce cours ne peuvent pas tre hrites. Remarque Les liens sont crits en bleu car le navigateur ajoute automatiquement la rgle
a { } color : blue;

1 2 3 4

au tout dbut du code CSS. La proprit color ne peut donc pas tre hrite pour les liens. De la mme manire, le navigateur ajoute automatiquement que le texte mis en valeur par la balise em est crit en italique et que celui mis en valeur par la balise strong est crit en gras. De plus, les valeurs de font-weight et font-size pour les titres sont aussi ajouts. Remarque La proprit text-decoration ne suit pas les mmes rgles que les autres. En eet, ds quune valeur de text-decoration est spcie pour un lment, il nest plus possible denlever la dcoration pour les descendants.

2.7.2

Valeur inherit

Toutes les proprits acceptent galement la valeur inherit. Dans ce cas, la valeur pour cette proprit est exactement la mme que celle de llment parent. Cette valeur est possible mme pour les proprits qui ne peuvent a priori pas tre hrites.

Rfrences
Vous pouvez trouver de nombreux cours et tutoriels sur le Web. Voici quelques liens intressants : le site du zro (http://www.siteduzero.com/), Alsacrations (http://www.alsacreations.com/), le site SELFHTML (http://fr.selfhtml.org/), CSS Zen Garden (http://www.csszengarden.com/) montrant de nombreux exemples de chiers CSS. 30

Mathieu LACROIX

Introduction Web, 1re anne