Support de cours XHTML-CSS proposé par Mr Yao Yapi Cyrille(aiglecyrille@gmail.

com)

XHTML-CSS
CHAP 1 : Historique d’Internet et du Web
Dans ce cours nous allons apprendre à créer un site web de A à Z. Pour ce faire nous allons apprendre 2 langages
informatiques appelés XHTML et CSS. Mais avant faisons un peu d’historique.

1. Les origines de l’ Internet

• Le 4 oct obre 1957, pendant la guerre froide, l’union soviét ique a réussi à lancer le prem ier sat ellit e
en orbit e. Appelé “ Spout nik 1”
• Réplique am éricaine avec la créat ion d’ARPA ( Advanced Research Proj ect s Agency) au sein du
départ em ent de la défense am éricaine. L’obj ect if ét ait d’effect uer des recherches et de développer
des idées av ancées et t echnologiquem ent en avance sur son t em ps.
• En 1969 ARPA m et en place un réseau m ilit aire d’ordinat eurs appelés ARPANET
• Au fil des années, ARPANET va s’ét endr e aux universit és, puis au dom aine public et connaît re du
succès grâce au prot ocole TCP/ I P ( com m ut at ion de paquet s) et des services t els que le cou r r ie r
é le ct r on iqu e et FTP ( File Transfert Prot ocol : prot ocole de t ransfert de fichier)
• En 1983 la part ie de l'ARPANET appart enant aux Forces arm ées des Ét at s- Unis fut séparée du rest e
du réseau et devint le M I LN ET ( Milit ary Net work ) , t andis que réseau public se dénom m ait
m aint enant I N TERN ET ( I nt er- Net w ork : I nt erconnexion de plusieurs réseaux, Réseau I nt ernat ional)

2. La création du “ www : world wide web”

• Tout a com m encé au début des années 70, au cours d'une réunion à l'im prim erie du gouvernem ent
canadien. Un cert ain W illia m Tu n n icliffe propose de sé pa r e r le con t e n u de l'in for m a t ion ( le
t e x t e , im a ge s…) de la m a n iè r e de l’a ffich e r ( m ise e n for m e ) . Déj à à l'époque, alors
qu'I nt ernet n'ét ait réservé qu'à quelques t rès rares privilégiés, on parlait de séparer le cont enu ( ce
qui est auj ourd'hui devenu le langage XHTML) de la m ise en form e ( qui est devenu le CSS) .
• En 1986 : invent ion du SGM L ( St andard Generalized Markup Langage) .C'est un langage puissant ,
m ais t rop com plexe. Le SGML ne connaît ra donc j am ais de grande gloire
• En 1991, Tim ( Tim ot h y ) Be r n e r s- Le e du CERN ( Cent re Européen de Recherche Nucléaire) avait
t ravaillé sur u n syst è m e de ge st ion de l’in for m a t ion , dans lequel un t ext e pouvait cont enir des
références ou liens vers d’aut res t rav aux, perm et t ant ainsi à l’ut ilisat eur de rapidem ent passer d’un
docum ent à l’aut re( N a viga t ion ) . I l a créé un serveur perm et t ant la publicat ion de ce st yle de
docum ent s, appelés hypert ext es ( Se r ve u r h t t p ou W e b) ainsi qu’un program m e en perm et t ant la
lect ure( N a viga t e u r ) . I l ba pt isa ce syst è m e le “W or ld W ide W e b”. Pour créer les prem ière pages
web ( pages hypert ext es) , Tim s’inspire du SGML et créer le langage H TM L ( H ype r t e x t M a r k u p
La n ga ge )
• A peine 2 ans plus t ard, un des prem iers navigat eurs grat uit s apparaît : il s'appelle M oza ïc et
fonct ionne aussi bien sur Mac que sur PC.
Ent re 1993 et 1994, le nom bre de sit es web passe de 500 à 10 000, la croissance est énorm e.

XHTML-CSS Page 1
 Support de cours XHTML-CSS proposé par Mr Yao Yapi Cyrille(aiglecyrille@gmail.com)

3. La naissance du W3C

• La popularit é grandissant e du w eb com m ença à suscit er des int érêt s com m erciaux.
• Microsoft et Net scape privilégient le développem ent de nouvelles fonct ionnalit és propriét aires ou en
com pét it ion front ale avec celles exist ant es dans les aut res navigat eurs, m ais im plém ent ées de
m anière incom pat ible, plut ôt que de corriger celles déj à exist ant es.
• Pour m et t re fin à t out ce désordre et assurer l’évolut ion du w eb, Tim Berness- Lee fonda en 1994 le
W or ld W ide W e b Con sor t iu m ( W 3 C) .
• Durant les années qui ont suivies, le W3C a publié plusieurs spécificat ions ( appelées
“ recom m andat ions” ) t elles que HTML 4.0, le form at d’im ages PNG, et les feuilles de st yles CSS
versions 1 et 2.

4. Les standards XHTML et CSS

 Du HTML au XHTML
• De 1991 à 1998, le langage HTML a évolué de sa version 1.0 à la version 4.0
• XHTML 1.0 : début 2000, le W3C décide de m et t re un t erm e au désordre qu'ét ait devenu le langage
HTML. En effet , au fur et à m esure de son évolut ion, des balises HTML ont ét é " invent ées" par les
navigat eurs Net scape et I nt ernet Explorer ( de Microsoft ) . Cert aines balises m archaient sur un
navigat eur, m ais pas sur l’aut re.
On décide d'arrêt er le développem ent du langage HTML et d'en créer un nouveau.
Le XH TM L ( Ext ensible HyperText Markup Language) dev ient alors le st a n da r d : ce la n ga ge doit
fon ct ion n e r de la m ê m e m a n iè r e su r t ou s le s n a viga t e u r s, e t pa s le dr oit de cr é e r de
n ou ve lle s ba lise s t a n t qu e le W 3 C n e l'a pa s a u t or isé !
Concrèt em ent , par rapport au HTML il y a assez peu de différences, m ais le langage est plus " St r ict "
, vous n'avez pas aut ant le droit à l'erreur qu'en HTML.

 Le CSS
L'hist oire du CSS ( Cascading St yle Sheet s) début e, elle, en 1996. On revient à l'idée lancée par William
Tunnicliffe : il fa u t sé pa r e r le con t e n u de la m ise e n pa ge . Cela apport e de nom breux avant ages :
l'apparence du sit e w eb pourra êt re plus facilem ent m ise à j our, les pages seront plus rapides à charger, on
pourra proposer plusieurs designs aisém ent et c... Depuis 1999, nous avons CSS 2 et CSS3 s’apprêt e à
sort ir.

5. Votre site web est-il valide ?

Souvenez- v ous : le W3C a ét abli des norm es. I l est nécessaire de les respect er, pour qu'on soit sûrs que
t ous les sit es web parlent la m êm e " langue" .
Le W3C propose sur son sit e web ( w ww .w 3.org) un out il qui s'appelle le " Validat eur" ( " Validat or" en
anglais) .
Le validat eur est une sort e de program m e qui va analyser vot re code source et vous dire s'il est
correct em ent fait , ou s'il com port e des erreurs que vous devez corriger.
I l exist e 2 validat eurs différent s :

Un validat eur ( x) HTML. ( ht t p: / / validat or. w3. org/ . )

Un validat eur CSS. ( ht t p: / / j igsaw. w3. org/ css-validat or/ )

Tout au long de ce cours nous allons parler des règles à respecter pour concevoir un site web
correcte selon les standards W3C (ici XHTML et CSS)

XHTML-CSS Page 2
 Support de cours XHTML-CSS proposé par Mr Yao Yapi Cyrille(aiglecyrille@gmail.com)

6. Nos outils de travail

Pour créer un sit e web, on doit indiquer des inform at ions à l'ordinat eur. I l ne suffit pas de sim plem ent t aper
le t ext e qu'il y aura dans son sit e, il faut aussi savoir placer ce t ext e, insérer des im ages, faire des liens
et c...
Pour ex pliquer à l'ordinat eur ce que v ous voulez, il va falloir ut iliser un langage qu'il com prend.
Et com m e nous l’avons dit plus haut nous ut iliserons :

• XHTML pour écrire le cont enu de nos pages w eb.

• CSS pour présent er ce cont enu.

Une quest ion que vous devez cert ainem ent vous êt re déj à posée, c'est : " De quel logiciel j e vais avoir besoin
pour créer m on sit e web ?"

 L’ Editeur de texte (ou de code)

L’édit eur est le logiciel qui va nous perm et t re d’écrire nos codes sources en xht m l et css. Nous pouvons
ent re aut res Bloc- not es( Window s) , Not epad, vi( Linux) , em acs( Linux) ,sm ult ron( Mac OS) .Dans not re cours,
nous ut iliserons Bloc- not es, vu que nous t ravaillons dans un environnem ent Windows qu’il y est inst allé par
défaut .

Vous pourrez le lancez en faisant D é m a r r e r + Tou s le s pr ogr a m m e s + Acce ssoir e s + Bloc- n ot e s

 Le Navigateur (Browser, Fureter, …)

Le navigat eur est le logiciel qui va int erprét er vos codes xht m l et css et afficher vos pages web d’une
m anière accessible au com m un des m ort els. Parm i les navigat eurs qui exist ent , cit ons :

• I nt ernet Explorer
• Mozilla Firefox
• Opera
• Google Chrom e
• Net scape
• Konqueror ( pour Linux)
• Lynx ( pour Linux)
• Apple Safari ( pour Mac et Window s)
• et c...

XHTML-CSS Page 3
 Support de cours XHTML-CSS proposé par Mr Yao Yapi Cyrille(aiglecyrille@gmail.com)

CHAP2 : L’ESSENTIEL DU XHTML

1. Les balises, attributs et éléments

 Les balises(ou marqueurs ou tag)

En effet dans une page XHTML, en plus du t ext e, vous allez t rouver un aut re élém ent au m ilieu : ce sont les
balises.
Une balise com m ence par un chev ron ouvrant " < " et se t erm ine par un chevron ferm ant " > " . Par exem ple :
< nom - de- la- balise>

Les balises sont invisibles pour le visit eur, elles servent de m arqueurs pour indiquer quelque chose( donner
une inst ruct ion) au navigat eur. Par exem ple, une balise perm et d'indiquer que t el t ext e est le t it re de vot re
page, cet aut re t ext e est une cit at ion et c et c...

I l exist e 2 t ypes de balises : cert aines balises apparaissent t ouj ours par paire, d'aut res au cont raire sont
t out es seules.

• Le s ba lise s e x ist a n t pa r pa ir e : ce sont les plus courant es. On écrit la prem ière balise, on t ape du
t ext e, puis on " ferm e" la balise en la réécrivant avec un slash devant " / " . Par exem ple :

< ba lise - pa ir e > m on t e x t e < / ba lise - pa ir e >

• Le s ba lise s se u le s : elles sont un peu plus rares, m ais il y en a quand m êm e. On s'en sert en
général pour insérer un élém ent dans une page.
Ce t ype de balise se t erm ine t ouj ours par un slash " / " , m ais cet t e fois le slash se t rouve à la fin de la
balise.

< ba lise - se u le / >

 Les attributs (propriétés, caractéristiques)

Les at t ribut s sont un m oyen de donner des précisions sur une balise. On peut t rouver des at t ribut s sur les
deux t ypes de balises ( par paire ou seule) . La synt axe est : n on - a t t r ibu t = “va le u r - a t t r ibu t ”
Par exem ple, prenons la balise seule < im age / > . C'est bien beau de dire qu'on insère une im age, m ais
encore faut - il indiquer laquelle. On fera ça avec un at t ribut :

< im a ge n om = " sole il.j pg" / >

I ci, l'at t ribut est " nom " , et il a pour v aleur " soleil.j pg" . Cela indique que l'im age que l'on veut insérer
s'appelle " soleil.j pg" t out sim plem ent .

Dans le cas d'une balise fonct ionnant " par paire" , on ne m et les at t ribut s que dans la balise ouv rant e et pas
dans la balise ferm ant e.

 Les éléments
Un élém ent est l’ensem ble com posé d’une balise ouvrant e, d’un cont enu ( du t ext e et / ou d’aut res balises) , et
de la balise ferm ant e correspondant e. Voici un ex em ple faisant int ervenir la balise < st rong> , qui perm et de

XHTML-CSS Page 4
 Support de cours XHTML-CSS proposé par Mr Yao Yapi Cyrille(aiglecyrille@gmail.com)

renforcer une part ie de t ext e :

I l n e fa u t < st r on g> j a m a is< / st r on g> ou blie r de fe r m e r le s ba lise s!

Dans cet exem ple, nous dist inguons :

• l’élém ent < st r on g> j a m a is< / st r on g> ;
• le cont enu d’élém ent « j a m a is » ;
• la balise ouvrant e < st r on g> ;
• la balise ferm ant e correspondant e < / st r on g> .

La bon n e com pr é h e n sion de la st r u ct u r e de s é lé m e n t s e st in dispe n sa ble . Elle a u r a de

n om br e u se s a pplica t ion s pa r la su it e , m a is c’e st pa r a dox a le m e n t u n su j e t r a r e m e n t con n u de s
w e bm a st e r s. Le s é lé m e n t s H TM L on t ch a cu n u n e st r u ct u r e pa r t icu liè r e . I l e n e x ist e de u x fa m ille s
: le s é lé m e n t s de t y pe bloc e t le s é lé m e n t s a u fil du t e x t e , dit s e n lign e ( ou in lin e ) . Ce t y pe
dict e r a t ou s le u r s com por t e m e n t s : posit ion n e m e n t , a ffich a ge , e t c.
La dist in ct ion fon da m e n t a le e st a sse z cla ir e . Le s blocs dist in gu e n t de s pa r t ie s e n t iè r e s com m e
de s t it r e s, de s pa r a gr a ph e s, de s list e s, de s cit a t ion s, e t c. Le s é lé m e n t s e n lign e son t pr é vu s pou r
e n r ich ir loca le m e n t de s por t ion s de t e x t e ( lie n h ype r t e x t e , e m ph a se , r e n for ce m e n t , e t c.) .

 Les règles se syntaxe (à retenir)

Avant de t erm iner cet t e pet it e part ie t héorique, j e vais vous donner ici quelques règles pas bien com pliquées
qu'il faudra ret enir si vous voulez faire une parfait e pet it e page web :

• Les balises exist ent soit par paires ( < balise> < / balise> ) ; soit t out es seules, m ais dans ce cas il faut
m et t re un / à la fin de la balise ( ex. : < balise / > )
• Les nom s des balises et at t ribut s s'écrivent t ouj ours en m inuscules
• Les valeurs des at t ribut s peuvent cont enir des m aj uscules
• S'il y a des at t ribut s dans une balise fonct ionnant par paire, on ne les m et que dans la balise
ouvrant e.

2. Notre première page web

Nous allons créer une prem ière page web. Pour ce faire :

 Créer un dossier ( Clic dr oit + N ou ve a u + D ossie r ) n’im port e où sur le disque dur ( ex : m onsit e)

 Ouvrer une page Bloc- not es

 Enregist rer ( Fich ie r + En r e gist r e r Sou s) cet t e page sous le nom essai.ht m l dans le dossier que
vous venez de créer

 Structure générale d’ une page HTML

XHTML-CSS Page 5
 Support de cours XHTML-CSS proposé par Mr Yao Yapi Cyrille(aiglecyrille@gmail.com)

<html> Début de la page html

<head>
Entête de la page, contenant
des informations importantes
<title>Titre de la page < / title> pour les navigateurs et
moteurs de recherche
</ head>

<body>
Le corps qui contient tous les
éléments qui s’affichent dans la
(Contenu) fenêtre du navigateur

</ body>

</ html> Fin de la page html

 Indiquons la grammaire au navigateur

I l exist e plusieurs versions du langage HTML, cohabit ant sur le Web. On indiquera aux navigat eurs la version
ret enue pour un docum ent donné en préfaçant celui- ci d’un doct ype accom pagné d’une DTD, ou « définit ion
de t ype de docum ent ». C’est cet t e DTD qui définit la gram m aire précise du docum ent . Ce doct ype est un
code spécifique placé au t out début d’un docum ent HTML. I l précise au navigat eur le langage ret enu pour
l’écrit ure de la page : HTML ou XHTML, en version st rict e ou t ransit ionnelle, et c. C’est non seulem ent un
m oyen de s’assurer que le docum ent sera bien int erpr ét é par les navigat eurs, m ais aussi un élém ent
indispensable à sa validat ion par l’organism e de référence, le W3C. XHTML ( et HTML) exist ent en deux
versions principales :

• Transit ional ( t ransit ionnelle) , version prévue pour réaliser la t ransit ion vers la version st rict , est par
conséquent beaucoup plus perm issive que cet t e dernière.

• St rict est la version rigoureuse que nous ut iliserons. Beaucoup d’élém ent s ou d’at t ribut s y sont devenus
obsolèt es ( et int erdit s) . I l s’agit not am m ent des balises et propriét és de m ise en form e ( < cent er> , < font > ,
" align" …) . Le but est de pousser les développeurs à ut iliser le CSS pour la présent at ion et de lim it er le
docum ent HTML au seul cont enu.

On t rouve encore d’aut res doct ypes, proposant par exem ple les cadres ( fram es) , m ais nous les évit erons car
ces t echniques sont à déconseiller et ent ravent l’accessibilit é des sites web.

XHTML-CSS Page 6