Sommaire : 1. Introduction ⋅ Fonctionnement d’Internet ⋅ Les langages XHTML et CSS 2. Premiers éléments de XHTML ⋅ Structure d’un document ⋅ Mise en forme du texte ⋅ Liens, remarques et signes réservés 3. Premiers éléments de CSS ⋅ Syntaxe, style du texte et classes 4. Couleurs 5. Insertion d’images 6. Mise en ligne 7. Mise en page avancée ⋅ Bordures ⋅ Listes et tableaux ⋅ Boîtes et flottants ⋅ Propriétés des liens ⋅ Listes et menus

1. Introduction ` la conception de sites web
a
Formation de 12h donn´e ` l’ENS Lyon entre 2011 et 2013
e a
Adrien Barbaresi
1 / 97

2. Sommaire
1 Introduction
Fonctionnement d’Internet
Les langages XHTML et CSS
2 Premiers ´l´ments de XHTML
ee
Structure d’un document
Mise en forme du texte
Liens, remarques et signes r´serv´s
e e
3 Premiers ´l´ments de CSS
ee
Syntaxe, style du texte et classes
4 Couleurs
5 Insertion d’images
6 Mise en ligne
7 Mise en page avanc´e
e
Bordures
Listes et tableaux
Boˆ et flottants
ıtes
Propri´t´s des liens
ee
Listes et menus
2 / 97

3. Introduction Pr´sentation du cours
e
Pourquoi XHTML/CSS ?
Clart´ dans la conception
e
Gestion du contenu (XHTML) s´par´e de la gestion de la forme (CSS)
e e
Une combinaison ´prouv´e (plus de 10 ans d’existence)
e e
Ajout r´gulier de nouvelles fonctions
e
Polyvalent et utilisable partout
La m´thode n’est pas tout
e
R´aliser un site internet ne se r´sume pas ` cela
e e a
Des adaptations sont parfois n´cessaires
e
3 / 97

4. Introduction Pr´sentation du cours
e
Objectif du cours
Les outils pour r´aliser des sites internet sont nombreux et en constante
e
´volution.
e
Il s’agit d’acqu´rir un socle de connaissances qui pourra resservir :
e
Le langage HTML est pr´sent au cœur du web et de ses outils
e
La mise en forme via CSS fait quasiment l’unanimit´
e
Le tandem XHTML/CSS permet de r´aliser une pr´sentation soign´e
e e e
La mise en ligne des fichiers se fait tr`s souvent de la mˆme mani`re
e e e
4 / 97

5. Introduction Pr´sentation du cours
e
Questions pr´miminaires
e
Un site, pour quoi faire ? (professionnel / personnel)
Quel contenu ? fixe ou fr´quentes mises ` jour ?
e a
Pour quel public ?
Les r´ponses peuvent amener ` faire certains choix lors de la r´alisation.
e a e
5 / 97

6. Introduction Pr´sentation du cours
e
Cycle de conception d’un site internet
Analyse de l’existant
Conception
Impl´mentation
e
D´ploiement
e
Diffusion
⇒ D´finir un cahier des charges pour la validation de l’unit´ du C2i2e.
e e
6 / 97

7. Introduction Internet
Fonctionnement : l’Internet, un monde norm´
e
1 Protocoles d’´change d’informations
e
2 H´bergement et adresses
e
3 Rˆle du navigateur
o
7 / 97

8. Introduction Internet
Les protocoles de la pile TCP/IP
Un mod`le indicatif des protocoles composant la famille TCP/IP dans le
e
mod`le OSI de l’ISO :
e
´
Etape Exemples de protocoles
7 Application HTTP, HTTPS, SMTP, FTP
6 Pr´sentation
e ...
5 Session SOCKS, NFS
4 Transport TCP, UDP
3 R´seau
e IPv4, IPv6, IPSec, ICMP
2 Liaison Ethernet, Wi-Fi, Bluetooth, irDA
1 Physique ...
8 / 97

9. Introduction Internet
Encapsulation de l’information lors de sa descente de la pile
Source : https ://en.wikipedia.org/wiki/File :UDP encapsulation.svg
9 / 97

10. Introduction Internet
Deux protocoles de transfert utilis´s ici
e
HTTP (HyperText Transfer Protocol)
Protocole de communication client-serveur d´velopp´ pour le
e e
World Wide Web.
Clients HTTP les plus connus : les navigateurs Web, qui permettent ` a
un utilisateur d’acc´der ` un serveur contenant les donn´es.
e a e
Il existe aussi des syst`mes pour r´cup´rer automatiquement le contenu
e e e
d’un site (aspirateurs, robots d’indexation, etc.).
FTP
Protocole de communication destin´ ` l’´change informatique de
ea e
fichiers sur un r´seau TCP/IP.
e
´
Egalement mod`le client-serveur.
e
Souvent utilis´ pour la mise en ligne de contenu.
e
10 / 97

11. Introduction Internet
HTTPS
HTTPS ⇒ combinaison de HTTP avec une couche de chiffrement.
Fonctionne grˆce ` un certificat d’authentification ´mis par une autorit´
a a e e
tierce r´put´e fiable.
e e
Garantit th´oriquement la confidentialit´ et l’int´grit´ des donn´es
e e e e e
envoy´es et re¸ues.
e c
Soit dans la pile TCP/IP (simplifi´e) :
e
Application HTTP
Transport TCP + SSL/TLS
R´seau
e IPv4 / IPv6
Acc`s
e Ethernet, Wifi, ...
11 / 97

12. Introduction Internet
L’h´bergement
e
En pratique :
Fichiers stock´s sur un serveur connect´ ` internet
e ea
Souvent : un compte utilisateur, des logiciels sp´cifiques
e
Donn´es accessibles ` une certaine adresse
e a
(via des serveurs sp´cifiques)
e
12 / 97

13. Introduction Internet
Le navigateur
Le moteur de rendu
Permet d’afficher les ´l´ments d’une page Web
ee
Plusieurs moteurs de rendu HTML : Gecko (Mozilla), KHTML (Linux) et
Webkit (Apple), Trident (Microsoft), Presto (Opera), etc.
En th´orie des normes, mais en pratique une certaine variabilit´ dans
e e
l’affichage...
Les ressources annexes
Contenus sp´cifiques affich´s par des plugins (audio, vid´o, animations)
e e e
D´pend de la configuration de l’utilisateur, de l’installation et de la mise `
e a
jour de certains logiciels
13 / 97

14. Introduction Les langages
Un binˆme
o
Deux langages de mise en forme, un travail compl´mentaire :
e
le fichier XHTML (.html) appelle un fichier CSS (.css)
Avantages
Changer l’apparence de tout un site facilement (pr´sentation uniforme)
e
Ou changer le contenu sans se soucier de la pr´sentation
e
Code plus l´ger, meilleure visibilit´
e e
14 / 97

15. Introduction Les langages
XHTML : un langage de description formelle de document
´
Ecriture dans un ´diteur de texte :
e
un bloc-notes peut suffire
texte brut augment´ de balises (balisage logique)
e
introduit par des caract`res sp´ciaux
e e
le r´sultat : un fichier .html affichable par un navigateur
e
15 / 97

16. Introduction Les langages
Parent´
e
Inscription dans la famille des langages de description formelle
Ordonner et structurer des informations
Permettre une lecture par les machines
Mais aussi une lecture humaine
Forte redondance
Quelques membres de la famille
A
LTEX
XML (h´ritier de SGML)
e
feuilles de style (XSLT)
MediaWiki et autres
16 / 97

17. Introduction Les langages
Historique : le HTML
Hypertext Markup Language
Langage de balisage qui permet d’´crire de l’hypertexte
e
Pr´sent d`s le d´but du web, depuis le d´but des ann´es 90
e e e e e
Adaptation d’un langage d´j` existant (SGML) pour r´pondre en
ea e
particulier ` ces besoins :
a
structurer s´mantiquement et mettre en forme le contenu des pages
e
inclure des ressources multim´dias dont des images, des formulaires
e
de saisie, et des ´l´ments programmables
ee
Standard actuel
HTML 4 date de 1997. HTML 5 est de plus en plus r´pandu.
e
17 / 97

18. Introduction Les langages
´
Etat des lieux : XHTML et CSS
XHTML
eXtensible HyperText Markup Language, dit XHTML, est un langage de
balisage servant ` ´crire des pages pour le World Wide Web.
ae
Con¸u ` l’origine comme le successeur d’HTML
c a
Reformulation de HTML, syntaxe plus stricte
CSS
Cascading Style Sheets : feuilles de style en cascade
⇒ D´crire la pr´sentation
e e
Cascade : diff´rents styles adapt´s ` la configuration de l’utilisateur et `
e e a a
l’architecture des documents
Formatage du document par cat´gories, blocs de r`gles
e e
18 / 97

19. Introduction Les langages
Les standards
Le W3C
World Wide Web Consortium
Organisme de standardisation ` but non-lucratif
a
Standards pour XHTML (stable) et CSS (3`me version en cours de
e
d´veloppement)
e
Validation du code
Possibilit´ de faire valider son code pour savoir s’il est compatible
e
(L’existence d’un standard n’implique pas qu’il soit toujours appliqu´)
e
http ://validator.w3.org/
19 / 97

20. Introduction Les langages
Web statique et web dynamique
Web statique Web dynamique
Contenu fix´ d’avance
e Contenu inject´ ` chaque
ea
Le serveur HTTP renvoie un consultation
fichier Le serveur HTTP transmet
´
Evolution lente (ne change des requˆtes dont il recueille
e
que par une intervention les r´sultats
e
humaine) Toujours diff´rent, peut
e
changer en fonction du
contexte et de l’utilisateur
20 / 97

21. Structure XHTML Balises
Les balises
Syntaxe
<balise>Texte affect´ par la balise</balise>
e
<balise-seule/>
<balise attribut=”texte de l’attribut”>Texte affect´</balise>
e
Exemples
<i>Texte en italique</i>
<br/> (Retour ` la ligne)
a
<a href=”http ://www.ens-lyon.fr/”>Lien vers l’ENS Lyon</a>
21 / 97

22. Structure XHTML Essentiel
Structure d’un document XHTML
Pour ˆtre valide, un document XHTML doit respecter la structure
e
suivante :
1 D´claration de type de document
e
2 Marqueur de d´but de document (ou ´l´ment racine)
e ee
3 Marqueur de d´but d’en-tˆte
e e
4 Champ titre
5 Marqueur de fin d’en-tˆte
e
6 Corps du document
7 Marqueur de fin de document
22 / 97

23. Structure XHTML Essentiel
Structure d’un document XHTML
Pour ˆtre valide, un document XHTML doit respecter la structure
e
suivante :
1 DTD : < !DOCTYPE html PUBLIC Formal Public Identifier System
Identifier >
2 Marqueur de d´but de document : <html>
e
3 Marqueur de d´but d’en-tˆte : <head>
e e
4 Champ titre : <title></title>
5 Marqueur de fin d’en-tˆte : </head>
e
6 Corps du document : <body></body>
7 Marqueur de fin de document : </html>
23 / 97

24. Structure XHTML Essentiel
Minimum requis
Cf fichier modele 1.html
Encodage du texte source (souvent utf-8 ou iso-8859-1)
DTD
En-tˆte comprenant les balises de titre (mˆme sans titre)
e e
Corps de document
Fin de document
24 / 97

25. Structure XHTML Essentiel
Exercice
Travail sur l’´diteur, consultation du r´sultat dans le navigateur
e e
Texte entre les balises de titre
Texte dans le corps de document
Espaces dans les balises
Espaces dans le texte
25 / 97

26. Structure XHTML Mise en forme
Les titres
Hi´rarchie
e
Il est possible d’introduire six niveaux de hi´rarchie dans les titres.
e
Les balises de d´but et de fin s’ouvrent et se ferment toujours de la mˆme
e e
mani`re.
e
Par d´faut les titres ont un certain style, qui peut ˆtre modifi´ par le
e e e
fichier CSS.
Exemple
<h1>Titre principal</h1>
<h3>Titre secondaire</h3>
<h6>Titre de paragraphe</h6>
26 / 97

27. Structure XHTML Mise en forme
Lignes
Retours ` la ligne
a
Peu importe le nombre de lignes saut´es dans le fichier source, le
e
retour ` la ligne ne se fait que par la balise :
a
<br />
On peut la placer plusieurs fois de suite pour cr´er un plus grand espace
e
vertical.
Cela dit la gestion de l’espacement se fait plutˆt par des param`tres de
o e
style.
27 / 97

28. Structure XHTML Mise en forme
Paragraphes
D´limitation
e
Le marquage d’un d´but de paragraphe se fait avec la balise <p>
e
La fin est marqu´e par </p>
e
Exemple
<p>
Ceci est un paragraphe. R´sultat
e
</p> Ceci est un paragraphe.
<p> En voici un autre.
En voici un autre.
</p>
28 / 97

29. Structure XHTML Mise en forme
Mise en forme du texte
Il est possible de marquer du texte pour qu’il apparaisse en gras ou en
italique.
NB : quelque soit l’´l´ment, il faut qu’il soit ´crit en minuscules pour ˆtre
ee e e
valide.
Exemple
R´sultat
e
Text normal et <b>mots en
Text normal et mots en gras.
gras</b>.<br/>
Texte en italique.
<i>Texte en italique.</i>
29 / 97

30. Structure XHTML Mise en forme
Listes
Deux types diff´rents
e
liste simple : ul
liste num´rot´e : ol
e e
Les lignes sont toujours d´limit´es par la balise li
e e
Exemple : liste simple
<ul>
<li>texte de la premi`re
e R´sultat
e
ligne</li> texte de la premi`re ligne
e
<li>texte de la seconde texte de la seconde ligne
ligne</li>
</ul>
30 / 97

31. Structure XHTML Liens
Arborescence et chemins d’acc`s
e
Description
Les fichier stock´s dans le disque dur d’un ordinateur sont repr´sent´s par
e e e
une arborescence.
Elle compte un ´l´ment racine, des r´pertoires et des fichiers.
ee e
Example : lien local
C :/Mes documents/Mes photos/image.jpg
Racine et chemin d’acc`s jusqu’au fichier.
e
Exemple : adresses internet
http ://www.ens-lyon.fr/
http ://perso.ens-lyon.fr/adrien.barbaresi/cours/
31 / 97

32. Structure XHTML Liens
R´alisation de liens
e
´e
El´ment et attribut
Les liens sont un ´l´ment qui comporte au moins un attribut :
ee
<a>texte du lien</a>
(marquage pr´sent mais lien inop´rant)
e e
Syntaxe de l’attribut : au sein de la balise
href=”adresse”
Exemple
<a href=”http ://www.ens-lyon.fr/”>ENS Lyon</a>
32 / 97

33. Structure XHTML Liens
Liens vers des fichiers
Liens relatifs
Les fichiers peuvent ˆtre stock´s localement.
e e
On passe alors par le chemin d’acc`s local d’apr`s la position du fichier
e e
html.
On parle de lien relatif.
Exemple
<a href=”fichier.pdf”>voir fichier PDF</a>
<a href=”images/photo1.jpg”>cf photo num´ro 1</a>
e
33 / 97

34. Structure XHTML R´visions et remarques
e
Encodage
Cf fichier mod`le
e
utf-8 (format appel´ ` ˆtre le standard)
eae
iso-8859-1 (ordinateurs Windows voire Mac r´cents)
e
windows-1252 (ordinateurs Windows de la salle)
Indication dans l’en-tˆte (obligatoire pour que le texte s’affiche
e
correctement)
<meta http-equiv=”Content-Type” content=”text/html ;
charset=windows-1252” />
34 / 97

35. Structure XHTML R´visions et remarques
e
Deux validations diff´rentes
e
Le W3C
Si le r´sultat attendu s’affiche dans le navigateur, cela n’implique pas
e
n´cessairement que tout le code soit valide.
e
De la mˆme mani`re, un code peut ˆtre valide mais ne pas s’afficher
e e e
conform´ment aux attentes.
e
Rappel : validation du code
http ://validator.w3.org/
35 / 97

36. Structure XHTML R´visions et remarques
e
Notion d’arborescence I
Principe
Chaque fichier ou r´pertoire est r´f´renc´ par un autre r´pertoire, ce
e ee e e
qui forme une hi´rarchie coh´rente, appel´e aussi arborescence, dont le
e e e
point d’entr´e est le r´pertoire racine.
e e
La racine est unique.
Par exemple, sur une partition Windows la racine est souvent C :
Pour les syst`mes Windows, le s´parateur est un antislash.
e e
Dans les pages HTML en revanche c’est un slash.
36 / 97

37. Structure XHTML R´visions et remarques
e
Notion d’arborescence II
Exemple
C:Windowssystem32avifile.dll
Le fichier avifile.dll se trouve donc dans le r´pertoire system32, qui
e
lui-mˆme se trouve dans le r´pertoire Windows, lui-mˆme se trouvant ` la
e e e a
racine du syst`me de fichiers C:
e
On dit que Windows est le r´pertoire parent de system32.
e
On dit de C:windowssystem32 que c’est un chemin absolu car
c’est une r´f´rence qui ne tient pas compte de la position pr´c´dente.
ee e e
Par contre, system32 est un chemin relatif : cette r´f´rence suppose
ee
que le r´pertoire courant est C:Windows.
e
37 / 97

38. Structure XHTML Signes r´serv´s
e e
Signes r´serv´s en XHTML
e e
Fonctionnement
Certains signes ne peuvent pas ˆtre ´crits tels quels car ils sont utilis´s par
e e e
le langage XHTML.
Il faut alors passer par une formulation alternative.
Liste
< &lt ;
> &gt ;
” &quot ;
’ &apos ;
& &amp ;
38 / 97

39. Structure XHTML Signes r´serv´s
e e
Insertion de commentaires
Il est possible d’ins´rer dans le fichier des lignes qui ne seront pas affich´es.
e e
Cela permet de d´crire ce que l’on a mis en place, de dresser une liste des
e
choses restant ` faire, etc.
a
Les commentaires sont toujours introduits de la mˆme mani`re.
e e
Exemple
< !- - commentaire
sur plusieurs lignes
- ->
39 / 97

40. CSS Introduction
CSS, un bref historique (I)
D´veloppement
e
Les sp´cifications CSS sont d´velopp´es par
e e e niveaux .
Chaque nouveau niveau doit int´grer le pr´c´dent, et chaque
e e e
impl´mentation doit ˆtre compatible avec la pr´c´dente.
e e e e
Le r´sultat : une mise en place fastidieuse qui n’est toujours pas achev´e.
e e
40 / 97

41. CSS Introduction
CSS, un bref historique (II)
Versions
Sp´cification CSS1 finale publi´e le 17 d´cembre 1996, d´finit une
e e e e
cinquantaine de propri´t´s.
ee
Second niveau de CSS publi´ en tant que recommandation en mai
e
1998 – ´tend consid´rablement les possibilit´s th´oriques avec environ 70
e e e e
propri´t´s suppl´mentaires.
ee e
Retours d’impl´mentation de CSS2 → le groupe de travail CSS du W3C
e
r´dige ` partir de 2001 une version r´vis´e CSS 2.1 sur la base de ce qui
e a e e
´tait effectivement adopt´ par les diff´rents navigateurs.
e e e
CSS 3 n’est que tr`s partiellement standardis´.
e e
41 / 97

42. CSS Introduction
Standards et pratiques : un comparatif
Un comparatif des diff´rents moteurs d’affichage est tenu ` jour sur le site
e a
Wikip´dia anglophone :
e
https ://secure.wikimedia.org/wikipedia/en/wiki/Comparison of layout engines (CSS)
Les tableaux sont ´difiants : certains ´l´ments de CSS sont loin d’ˆtre
e ee e
affich´s par tous les navigateurs, d’autres ne le sont que partiellement.
e
42 / 97

43. CSS Bases
Une affaire d’h´ritages
e
Principe
cascading ⇒ les caract´ristiques de pr´sentation se propagent
e e en
cascade d’un ´l´ment ` ses fils.
ee a
Exemple
Si un ´l´ment de type <a>, dont on ne sait rien de la police, se trouve
ee
dans un ´l´ment de type <p>, alors le <a> va h´riter de cet ´l´ment
ee e ee
<p> les propri´t´s de style.
ee
43 / 97

44. CSS Bases
Incorporation dans un document
Il y a deux possibilit´s pour mettre en forme un document par une feuille
e
de style CSS :
Int´gr´ au document
e e
Feuille de style directement dans l’entˆte du document
e
Entre une paire de balises <style type=”text/css”>...</style>
Fichier ` part (solution retenue pour ce cours)
a
Code dans un fichier s´par´, souvent nomm´ en .css
e e e
Appel dans l’en-tˆte du fichier .html avec une balise de la forme
e
<link rel=”stylesheet” type=”text/css” href=”fichier.css”/>
NB : Dans ce cas, le fichier CSS se trouve dans le mˆme r´pertoire que le
e e
fichier XHTML.
44 / 97

45. CSS Syntaxe
Syntaxe des ´l´ments
ee
Chaque ´l´ment de la feuille de style ob´it ` cette syntaxe :
ee e a
Un s´lecteur ou plus
e
Il sert ` indiquer ` quelle cat´gorie les modifications de style s’appliquent.
a a e
s´lecteur {
e
...
}
Une d´claration ou plus
e
Elle comporte syst´matiquement une propri´t´ et une valeur :
e ee
propri´t´ : valeur ;
ee
45 / 97

46. CSS Syntaxe
Exemple de syntaxe
Fichier .css
s´lecteur1 {
e
propri´t´1 : valeur1 ;
ee
propri´t´2 : valeur2 ;
ee
}
s´lecteur2 {
e
propri´t´1 : valeur1 ;
ee
propri´t´3 : valeur3 ;
ee
propri´t´X : valeurX ;
ee
}
46 / 97

47. CSS Style du texte
Changer le style du texte
Propri´t´s et valeurs
ee
font-style italic, oblique ou normal
font-weight bold ou normal
font-variant small-caps pour les petites capitales, ou normal (inutilis´
e
pour l’instant)
normal ⇒ par d´faut, inutile de le pr´ciser sauf si des changements sont
e e
susceptibles d’ˆtre h´rit´s d’une cat´gorie sup´rieure.
e e e e e
Fichier .css
Fichier .html p{
<p> font-weight : bold ;
Quelque chose. }
</p> ou
p { font-style : italic ; }
47 / 97

48. CSS Style du texte
Fontes
Les fontes se changent par la propri´t´ font-family:
ee
Exemples
p{
font-family : Arial ;
}
ou
p { font-family : Times New Roman ; }
48 / 97

49. CSS Style du texte
Fontes
Valeurs
Le CSS d´finit des familles g´n´riques : serif, sans-serif, monospace,
e e e
cursive et fantasy.
On peut les utiliser en dernier recours, en proposant plusieurs possibilit´s
e
s´par´es par des virgules :
e e
Arial, Helvetica, sans-serif
Courier New, Courier, monospace
Times New Roman, Times, serif
Verdana, sans-serif
Les polices propos´es ci-dessus sont suppos´es tr`s courantes.
e e e
49 / 97

50. CSS Style du texte
Fontes
Exemples
font-family : Times New Roman, Times, serif ;
ou
font-family : Georgia, Palatino, Garamond, serif ;
(moins courant)
Si cette question vous int´resse :
e
https ://secure.wikimedia.org/wikipedia/en/wiki/Web typography
50 / 97

51. CSS Style du texte
Taille des caract`res
e
La taille se change par la propri´t´ font-size:
ee
Valeurs
Il y a trois types d’indications diff´rents :
e
valeur descriptive
(xx-small, x-small, small, medium, large, x-large, xx-large)
valeur relative ` la taille actuelle (larger, smaller ou un pourcentage)
a
longueur fixe, souvent en pixels (px)
Exemples
font-size : x-small ;
ou
font-size : 15px ;
51 / 97

52. CSS Style du texte
Alignement du texte
Alignement → propri´t´ text-align:
ee
Valeurs
left (souvent par d´faut)
e
right
center
justify
Exemple
text-align : center ;
52 / 97

53. CSS Style du texte
Exercice
⇒ Essayez ` pr´sent de changer l’apparence des titres (style, police de
a e
caract`res, taille).
e
⇒ Et l’apparence de tout le corps de document.
53 / 97

54. CSS Classes
Classes d’´l´ments
ee
Pour personnaliser le style des ´l´ments HTML, il est possible de leur
ee
ajouter une classe, qui fait alors partie de leurs attributs.
Fichier .html Fichier .css
<p class=”nom-de-classe”> p.nom-de-classe{
... ...
</p> }
54 / 97

55. CSS Classes
Exemple
Fichier .css
Fichier .html
p.test{
<p class=”test”>
text-align : right ;
...
font-size : 20px ;
</p>
}
55 / 97

56. CSS Classes
Style g´n´rique
e e
Le HTML fournit deux ´l´ments, <div> au niveau bloc et <span> au
ee
niveau inline, qui n’ont aucune pr´sentation particuli`re, et servent ` se
e e a
voir attacher un style.
Fichier .html
<div class=”times”>
Ce texte apparaˆ dans la police Times, <span class=”it”>une partie est
ıt
en italique</span>, pas l’autre.
</div>
Fichier .css
div.times{ font-family : Times New Roman, Times, serif ; }
span.it{ font-style : italic ; }
56 / 97

57. Exercice
Exercice de synth`se
e
R´alisez 3 documents XHTML dont le style est r´gi par le mˆme fichier .css
e e e
Ils comporteront trois cat´gories de titres diff´rents.
e e
Certains paragraphes seront tout en italique et justifi´s.
e
D’autres seront diff´rents par leur police de caract`res (taille et famille).
e e
Certains ´l´ments du texte seront syst´matiquement marqu´s en gras.
ee e e
Chaque page contiendra au moins un lien vers chacune des deux autres.
57 / 97

58. Rappels
R´visions : XHTML et CSS
e
La mani`re la plus simple pour cr´er un ensemble de pages web est de
e e
s´parer le fond et la forme :
e
Le fond : XHTML
En-tˆte et corps de document
e La forme : CSS
Texte et marquage : titres, Indications de pr´sentation
e
liens, divisions... S´rie de s´lecteurs
e e
´
Edition dans ´diteur de texte
e Propri´t´s et valeurs
ee
Plusieurs documents XHTML ´
Edition dans ´diteur de texte
e
par fichier CSS
58 / 97

59. Rappels
R´visions : exemple
e
Pour r´aliser deux types de paragraphes diff´rents :
e e
Fichier .html
Fichier .css
<p class=”enorme”>
p.enorme {
Cette balise <br />
text-weight : bold ;
permet de revenir ` la ligne.
a
font-size : 40px ;
</p>
}
<p class=”illisible”>
p.illisible {
Ces caract`res sont beaucoup
e
font-size : xx-small ;
trop petits.
}
</p>
59 / 97

60. Couleurs
Couleurs
Couleur du texte → propri´t´ color
ee
3 formats diff´rents
e
Prenons l’exemple du bleu, la mˆme valeur peut ˆtre repr´sent´e par :
e e e e
un nom : blue
une valeur hexad´cimale : #0000FF
e
une valeur RGB : rgb(0,0,255)
Possibilit´s
e
Il y a 17 couleurs standard : aqua, black, blue, fuchsia, gray, grey, green,
lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
Au total 16 million de couleurs peuvent ˆtre repr´sent´es de mani`re
e e e e
hexad´cimale ou cod´e Red-Green-Blue.
e e
60 / 97

61. Couleurs
Utilisation
Exemple 1 : les titres
h1 {
color : orange ;
}
Exemple 2 : Couleur du fond
body {
background-color : #d0e4fe ;
}
61 / 97

62. Couleurs
Pour en savoir plus
Liste des 147 noms de couleurs reconnus par HTML et CSS :
http://www.w3schools.com/cssref/css_colornames.asp
Nuancier de couleurs :
http://www.w3schools.com/cssref/css_colors.asp
Notion de gamut de couleur :
https://fr.wikipedia.org/wiki/Gamut
62 / 97

63. Couleurs Exercice
Ajouts ` l’exercice de synth`se
a e
R´alisez 3 documents XHTML dont le style est r´gi par le mˆme fichier .css
e e e
Ils comporteront trois cat´gories de titres diff´rents, chacune dans une
e e
couleur donn´e.
e
Certains ´l´ments du texte seront syst´matiquement marqu´s en gras et en
ee e e
rouge.
Chaque page contiendra au moins un lien vers chacune des deux autres.
Tous les documents seront valides.
63 / 97

64. Insertion d’images
Insertion d’images
Pr´requis
e
Pour ˆtre valide, la balise <img> doit comporter au moins ces deux
e
attributs :
src la source de l’image (un nom de fichier ou une adresse)
alt un texte de remplacement, au cas o` l’image est indisponible
u
Syntaxe
<img src=”adresse” alt=”texte”/>
64 / 97

65. Insertion d’images
Insertion d’images : Exemples
Image stock´e localement
e
<img src=”montagne.jpg” alt=”paysage de montagne” />
Image disponible sur un site distant
<img
src=”https ://upload.wikimedia.org/wikipedia/commons/thumb/3/34/
Locomotives-Roundhouse2.jpg/619px-Locomotives-Roundhouse2.jpg”
alt=”locomotives” />
65 / 97

66. Insertion d’images
Redimensionner les images
Attributs
width largeur (en pixels par d´faut)
e
height hauteur (en pixels par d´faut)
e
Exemples
<img src=”...” alt=”...” width=”250” height=”400” />
<img src=”...” alt=”...” width=”25%” />
NB : Il est pr´f´rable de redimensionner les images avant de les mettre en
ee
ligne, le rendu peut ˆtre mauvais.
e
66 / 97

67. Insertion d’images
Exercice
Affichez une image qui est ´galement un lien.
e
(Indice : au sens strict il s’agit plutˆt d’un lien qui renferme une image.)
o
67 / 97

68. Mise en ligne
Mise en ligne des fichiers
Cr´ation d’un espace
e
Afin d’avoir un endroit o` d´poser ses fichiers il faut cr´er un compte
u e e
d’h´bergement quelque part, par exemple en utilisant le service propos´
e e
par l’ENS.
Transfert
Pour transf´rer les fichiers on utilise le protocole FTP et un client
e
adapt´ : le logiciel FileZilla.
e
68 / 97

69. Bordures et placement en CSS Bordures
Bordures en CSS
Dessiner un cadre
border-style obligatoire : solid (ligne), dotted (en pointill´s), dashed
e
(tirets), ou double
border-width indication en pixels ou thin, medium, thick
border-color nom de couleur ou code
Exemple 2
Exemple 1
p{
p{
border-style : dotted ;
border-style : solid ;
border-width : thin ;
border-width : 1px ;
border-color : blue ;
}
}
69 / 97

70. Bordures et placement en CSS Bordures
Bordure d’un seul cˆt´
oe
Param`tres
e
Il y a 4 indications pour signifier la position en CSS :
top, bottom, left et right.
Exemples
p{
border-left-style : solid ;
border-width : 3px ;
}
p{
border-bottom-style : solid ;
}
70 / 97

71. Bordures et placement en CSS Bordures
Raccourci
Forme br`ve
e
Il est possible de simplifier la d´finition du cadre en pla¸ant tous les
e c
´l´ments les uns apr`s les autres, dans un ordre pr´d´fini :
ee e e e
(border-width), border-style, (border-color)
Les propri´t´s entre parenth`ses sont facultatives
ee e
Exemples
p{
border : solid blue ;
}
p{
border : 5px solid red ;
}
71 / 97

72. R´visions
e
Code source des pages
Afficher la source
Il est possible d’afficher le code source d’une page.
Avec le navigateur Firefox par exemple :
Ctrl + U
Affichage → Code source de la page
⇒ Il est donc envisageable de s’inspirer de la mise en forme ou du contenu
d’un site donn´.
e
72 / 97

73. R´visions
e
Fichiers
Noms
Attention ` ce que les fichiers XHTML soient bien enregistr´s au format
a e
.html et les fichiers CSS au format .css.
Fonction Enregistrer sous dans l’´diteur de texte ou Renommer dans
e
FileZilla.
Correspondance
Attention ` ce que le nom exact de la feuille de style (CSS) utilis´e se
a e
retrouve bien dans l’en-tˆte du document XHTML ` la ligne :
e a
<link rel=”stylesheet” href=”style.css” type=”text/css” />
73 / 97

74. R´visions
e
Mettre des fichiers en ligne
Utilisation d’un client FTP
Il faut en g´n´ral une adresse d´termin´e, un compte et un mot de
e e e e
passe.
Le transfert de fichiers, la cr´ation et la suppression de r´pertoires se
e e
fait toujours de la mˆme mani`re.
e e
Le contenu en ligne apparaˆ toujours dans la fenˆtre de droite, le
ıt e
contenu local ` gauche (avec FileZilla).
a
Restrictions
La mise en ligne de fichiers sujets ` des droits d’auteur est fortement
a
d´conseill´e, sur le site de l’ENS et ailleurs.
e e
En suivant la m´thode d´crite dans ce cours vous n’ˆtes en aucune fa¸on
e e e c
anonyme sur internet.
74 / 97

75. R´visions
e
Existence d’un site sur internet
R´f´rencement et visiteurs
ee
L’op´ration qui consiste ` faire indexer son site par un moteur de
e a
recherche s’appelle le r´f´rencement.
ee
Les liens entrants sont essentiels.
L’ad´quation ` des mots-cl´s donn´s joue ´galement un grand rˆle.
e a e e e o
M´moire
e d’internet
Les informations d’un site clos mais qui a ´t´ r´f´renc´ un jour sont
ee ee e
souvent accessibles, mˆme si elles ne sont plus en ligne depuis longtemps.
e
75 / 97

76. XHTML Listes
Rappel : listes
Deux types diff´rents
e
liste simple : ul
liste num´rot´e : ol
e e
Les lignes sont toujours d´limit´es par la balise li
e e
Exemple : liste simple
<ul>
<li>texte de la premi`re ligne</li>
e
<li>texte de la seconde ligne</li>
</ul>
76 / 97

77. XHTML Listes
Listes descriptives (lexiques)
Les ´l´ments dl, dt et dd
ee
dl (definition list) encadre le contenu
dt (definition term) est une entr´e
e
dd (definition definition) est la d´finition associ´e ` une entr´e
e e a e
Exemple
<dl>
<dt>Tennis</dt>
<dd>Le court de tennis est situ´ derri`re le bˆtiment A.</dd>
e e a
<dt>K-fˆt</dt>
e
<dd>La caf´t´ria se trouve dans le bˆtiment A.</dd>
ee a
</dl>
77 / 97

78. XHTML Tableaux
Tableaux
Balises
table d´finit l’ensemble du tableau
e
th (table header ) cellule d’en-tˆte
e
tr marque le d´but et la fin de ligne
e
td entoure le contenu de chaque cellule
Exemple : tableau ` deux colonnes
a
<table>
<tr><th>Colonne gauche</th><th>Colonne droite</th></tr>
<tr><td>Cellule 1 gauche</td><td>Cellule 1 droite</td></tr>
<tr><td>Cellule 2 gauche</td><td>Cellule 2 droite</td></tr>
<tr><td>Cellule 3 gauche</td><td>Cellule 3 droite</td></tr>
</table>
78 / 97

79. XHTML Tableaux
Titre du tableau
Caption
La balise caption se place ` l’int´rieur du tableau.
a e
Exemple
<table>
<caption>Titre</caption>
<tr><th>Colonne gauche</th><th>Colonne droite</th></tr>
<tr><td>Cellule 1 gauche</td><td>Cellule 1 droite</td></tr>
...
</table>
79 / 97

80. CSS Bordures
R´visions : bordures en CSS
e
Dessiner un cadre
border-style obligatoire : solid (ligne), dotted (en pointill´s), dashed
e
(tirets), ou double
border-width indication en pixels ou thin, medium, thick
border-color nom de couleur ou code
div.qqc {
border-style : solid ;
border-width : 1px ;
}
div.test {
border-style : dotted ;
border-width : thin ;
border-color : blue ;
}
80 / 97

81. CSS Style des tableaux
D´limitation des tableaux et des cellules
e
Bordure
table, th, td
{
border : 1px solid black ; /* Forme br`ve */
e
}
Fondu
table
{
caption-side : bottom ; /* ou top */
border-collapse : collapse ;
}
81 / 97

82. CSS Style des tableaux
Taille et style des cellules
XHTML
CSS
<table>
td.abc {
< !- -<th> est facultatif- ->
text-align : right ;
<tr>
height : 50px ;
<td>...</td>
vertical-align : bottom ;
<td class=”abc”>...</td>
/*top, bottom ou middle*/
</tr>
}
</table>
⇒ Comment changer la couleur du fond et/ou du texte ?
82 / 97

83. CSS Unit´s
e
Unit´s de mesure absolues
e
Unit´e Nom en CSS Description
Pouce in 1 in = 2,54 cm
Pica pc 1 pc = 1/6 in
Point pt 1 pt = 1/72 in
Centim`tre
e cm
Millim`tre
e mm
83 / 97

84. CSS Unit´s
e
Unit´s de mesure relatives
e
Unit´
e Description
em Taille de police de l’´l´ment s´lectionn´ ou du
ee e e
parent (si font-size).
ex Hauteur de la minuscule de l’´l´ment ee
s´lectionn´ ou du parent (si font-size).
e e
px D´pend de la r´solution du p´riph´rique d’af-
e e e e
fichage.
% 100 % = taille de l’´l´ment ou du parent
ee
84 / 97

85. CSS Boˆ
ıtes
R´glage de la taille
e
Param`tres
e
Deux moyens de modifier la taille d’un paragraphe ou d’un bloc :
width largeur d´sir´e
e e
height hauteur
Et deux unit´s courantes :
e
px taille en pixels
% taille en pourcentage de la surface d’affichage
div.exemple1 {
width : 400px ;
}
div.exemple2 {
height : 20% ;
}
85 / 97

86. CSS Flottants
Positionner deux ´l´ments l’un ` cˆt´ de l’autre
ee a oe
Les flottants
Pour permettre ` deux ou trois blocs d’ˆtre l’un ` cˆt´ de l’autre, il faut
a e a oe
les faire flotter , c’est-`-dire rendre leurs positions d´pendantes l’une
a e
de l’autre.
Exemple
div.exemple1 {
width : 40% ;
float : left ;
}
div.exemple2 {
width : 40% ;
}
86 / 97

87. CSS Flottants
Example avec trois parties
XHTML CSS
<p> p{
<span class=”gauche”> text-align : center ;
partie ` gauche
a }
</span> p span.gauche {
<span class=”droite”> float : left ;
partie ` droite
a }
</span> p span.droite {
partie au centre float : right ;
</p> }
87 / 97

88. CSS Flottants
Param`tres des boˆ
e ıtes
image disponible ` l’adresse suivante :
a
http://www.w3.org/Talks/2008/0911-CSS-Amsterdam/
88 / 97

89. CSS Flottants
Example : deux blocs
Sur la droite
Sur la gauche
div.exemple2 {
div.exemple1 {
border-style : dotted ;
border-style : dotted ;
border-width : thin ;
border-width : thin ;
border-color : blue ;
border-color : blue ;
width : 40% ;
width : 40% ;
float : right ;
float : left ;
margin-bottom : 40px ;
margin-bottom : 40px ;
margin-left : 30px ;
}
}
89 / 97

90. CSS Flottants
Example 2 : texte d´coll´ du cadre
e e
Sur la gauche Sur la droite
div.exemple1 { div.exemple2 {
border-style : dotted ; border-style : dotted ;
border-width : thin ; border-width : thin ;
border-color : blue ; border-color : blue ;
width : 40% ; width : 40% ;
float : left ; float : right ;
margin-bottom : 40px ; margin-bottom : 40px ;
padding : 10px ; padding-left : 4em ;
} }
90 / 97

91. Propri´t´s des liens
ee Ancres
Cr´er des liens ` l’int´rieur d’une mˆme page : les ancres
e a e e
Dans un menu
<ul>
<li><a href=”#partie2”>texte du lien</a></li>
<li><a href=”#photo”>texte du lien</a></li>
<li><a href=”page2.html#ancre”>lien vers une autre page</a></li>
</ul>
Plus loin dans la page
<h2><a name=”partie2”>Deuxi`me Partie</a></h2>
e
ou bien <h2 id=”partie2”>Deuxi`me Partie</h2>
e
<a name=”photo”></a><img src=”...”></img>
91 / 97

92. Propri´t´s des liens
ee Cibles
D´finir la fenˆtre cible d’un lien
e e
→ Attribut target
Dans le fichier HTML
blank ouvrir dans une nouvelle fenˆtre/onglet
e
self ouvrir dans la mˆme fenˆtre
e e
Example
<a href=”page3.html” target=” blank”>texte du lien</a>
92 / 97

93. Propri´t´s des liens
ee D´coration en CSS
e
D´coration des liens en CSS
e
Les pseudo-classes
link lien non visit´
e
visited lien visit´
e
hover pointeur de la souris au-dessus du lien
active liens activ´s (pendant le clic par ex.)
e
Exemples
a : link {color : orange ;}
a : visited {text-decoration :none ;}
a : hover {font-weight : bold ;}
NB : les pseudos-classes hover et active peuvent s’appliquer ` d’autres
a
´l´ments.
ee
93 / 97

94. Arri`re-plan
e
Arri`re plan en CSS
e
Couleur de l’arri`re plan
e
background-color: yellow;
background-color: rgb(60%,90%,75%);
Image en fond
background-image: url(http://www.un-site.fr/image.jpg);
background-repeat: repeat-x; ou repeat-y; ou no-repeat;
⇒ Trouvez un motif de fond sur internet et ajoutez-le ` votre page.
a
94 / 97

95. Listes / Menus Format
Format des listes
→ Propri´t´ list-style-type
ee
Num´rotation (type ol)
e
decimal (par d´faut au premier niveau)
e
lower-roman et upper-roman
lower-alpha et upper-alpha
lower-greek, hebrew, hiragana etc.
Symboles (type ul)
disc (par d´faut au premier niveau)
e
circle
square
none
95 / 97

96. Listes / Menus Menu
Cr´ation d’un menu
e
Nous allons cr´er un menu simple en utilisant les ´l´ments de XHTML et
e ee
de CSS vus en cours, en suivant le tutoriel sur la page ci-dessous :
http ://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-
CSS.html
96 / 97

97. Informations
Pr´sentation r´alis´e avec LTEX Beamer
e e e A
Auteur : Adrien Barbaresi
Document sous licence CC BY-SA
97 / 97