Conception de site web

Une interface dans les grandes lignes.

Ce d oc u m e n t t r aite d' u n e p e tite p a r tie d e la réalisa tio n d' u n site web m ai s q ui n 'e n e s t p a s m oi n s im p o r ta n t : la créatio n d e la s t r uc t u re d' u n e p age inter n e t. Ce d oc u m e n t es t d e s ti né à t o u te s p e r s o n n e s d é sira n t affiner s e s co n n ais s a nce s d a n s l'élab o ra tio n d e site inter ne t e n res p ecta n t a u mie ux les s t a n d a r d s d u web W3C p o u r u n e m eille ur inte rro pé r a bilité et u n e rec herc he ergo n o miq ue. De s u rcr oît ces écrit s t e n t e n t d' a p p r oc he r les p r a tiq ue s d e co nce p tio n d u web2.0. Ce d oc u m e n t n e t raite p a s d u d e sign, ni d e s tec h n ologies s e rve u r. Il n e t r aite p a s n o n pl u s d e la p ré se n t a tio n e n Fra m e s et. Pré - r e q uis : n o tio n d u b alisage h t ml, cs s e t cult u re inter ne t.

I La base du html / xhtml
Lors q ue l'on n avigue s u r inter ne t o n u tilise u n n avigate u r (brows er e n a nglais) t el q u e Inter ne t Explorer, Firefox, Opera ... Ces n avigate u r s vo n t in te r p r e te r le co de h t ml d' u n e p age web p o u r affiche r s o n co n te n u (textes, images...) mi s e n for m e. On p e u t voir le co de h t ml d' u n e p age d e p uis u n n avigate u r e n cliq ua n t s u r « affiche r le co de s o u rce » (Le racco u rci Ctrl +U p e r m e t a u s si d e faire cet te actio n s elo n le n avigate u r). Pour créer u n e p age web n ul be s oin d ' u tiliser u n logiciel ult ra - m o d e r n e e t ult ra - p aya n t, u n blocNote s uffit. Nb: Cha q ue n avigate u r n'affiche p a s exacte m e n t la m ê m e dis p o sitio n d' u n e m ê m e p age. Ainsi il es t n éce s s aire d e créer d e s p age s valides a ux s t a n d a r d s W3C p o u r s e r a p p r oc he r a u mie ux d e ce q ue l'o n s o u h aite. Evite z alor s d e t ro p u tiliser les é dite u r s WYSIWYG car o n ob tie n t ja m ais exacte m e n t ce q u e l'on ve ut (WYSINAWYG).

David Epely - 2 0 0 7 / 2 0 0 8

Orga nise r s o n t ravail : Créer u n d o s sier d é dié à u n site o u à u n p r oje t. À l'interie u r créer u n n o uvea u fichier q ue l'o n n o m m e ra « in dex.ht m » (l'exte n sio n e s t im p o r t a n t e). Un d o u ble clique p e r m e t d e le faire affiche r d a n s u n n avigate u r (ce s er a u n e belle p age vide) et u n cliq ue d r oit > « o uvrir avec u n é dite u r d e texte » p e r m e t t r a d e m o difier cet te p age inte r ne t.

1.

Le DOCTYPE En p r e mier lieu il fa u t d éfinir le d oc ty pe. Celui - ci s p écifie le s t a n d a r d u tilisé p o u r écrire la p age.

h t ml 4.01 : la ngage h t ml clas siq ue, les b alises HTML s o n t écrites e n m aj u sc ule. Je d éco n seille celui - ci car il n'offre p a s l'inte ro p e ra bilité n éces s aire a ujo u r d' h ui et le co de h t ml d evien t vite chargé et p e u lisible. xh t ml1.0 - t r a n sitio nal : Ce d oc ty pe p e r m e t d e réécrire d e s p age s e n h t ml 4.01 e n s o u ple s s e. xh t ml1.0 - s t rict : Le m eilleu r m oye n p o u r s e p re p a rer a u xh t ml1.1 xh t ml1.1 : La d e r nière versio n d u s t a n d a r d W3C

• •

Prene z votre fichier « in dex.ht m » et in diq ue z le d oc ty pe q u e vou s s o u h aite z u tiliser. (plus d'i nfor m a tio n e t u n e liste d e s d oc ty pe s e s t visible s u r le site Alsa crea tio n )
Nb: écrire u n co m m e n t aire e n h t ml : <! - - ceci e s t u n co m m e n t aire - - >

fichier : index.htm <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtd">

David Epely - 2 0 0 7 / 2 0 0 8

2. Première s balis e s En xh t ml cha q ue élé m e n t d' u ne p age es t d éfinie et p o sitio n n é grâce à d e s balises : < b alise > q ui d oive n t être fer m ée s : < / b alise >, il existe a u s si d e s balise s a u t o fer m a n t e s : < b alise / > . Ecrivon s m ai n t e na n t la s t r uc t u re d e n o t re p age h t ml.

fichier : index.htm <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtd"> <html> <head> <!­­ ici se trouve l'entête de la page html, celle­ci n'est  pas directement affiché dans un navigateur ­­> <title>Bienvenue</title> <!­­ Le titre de la page. ­­> </head> <body> <h1>Hello world!</h1> <!­­ Le cor ps de page affiche les éléments (media) q u'on va  lui integrer ­­> </body> </html>

En o uvra n t cet te p re mière éba uc he d a n s u n n avigate u r o n verra a p p a r aît re u n joli « Hello worl d ». Celui - ci es t e n t o u ré d e la balise < h 1 > , o n lui in diq ue ain si q u e c'es t u n titre : Hea dline.

NB: En xht ml, t o u t e s les balises s'écrive nt e n m i n u sc ule. NB2: On voit d a n s la balise < h e a d > s e ule m e n t u n titre, bie n s û r ce ne s e ra p a s s uffisa n t p o u r si te co m ple t. Les b alise s < m e t a / > s o n t u tiles a u référe nce m e n t. Plus loin d a n s ce d oc u m e n t o n verra a p p a r aît re l'i m p o r t a tio n d e fichier cs s.

David Epely - 2 0 0 7 / 2 0 0 8

3. < t able > n'est pas fait p our faire la mi s e e n forme d'un e page

En h t ml4.01 o n u tilisait e s s e n tielle me n t les t a blea ux p o u r m e t t re e n for m e les p age web. Le s o ucis a rrive lors q ue l'o n im b riq ue pl u sie u r s ta blea ux. On s e re t r o uvait r a pi de m e n t avec d e s s o u rces a b s ol u m e n t illisibles e t difficile me n t m ai n te n a bles. Le xh t ml offre u n e n o uvelle vision; sé p a re r le co n te n u d e la p ré s e n t a tio n. Ce s o n t les fichier s .css (casca di ng s tyle s h eet) q ui s'occu pe r o n t d e l'a p p a re nce. Le x h t ml s'occu p e ra d e d éfinir le co n te n u :
• • • • •

< h2 > < d iv > < ul > <p> etc.

: u n titre : u n e divisio n : u n e liste : u n p a r agra p h e

Co m m e nço n s p a r u n m o d èle d e p age si m ple m ais p e r tina n t.
fichier : index.htm <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtd">  <html>  <head>  <title>Ma première page web2.0</title>  </head>  <body>  <div id="page">  <div id="header">  <h1>Hello world!</h1>  </div>    <div id="sidebar"> </div>    <div id="content"></div>    <div id="footer"></div>  </div>  </body>  </html>

David Epely - 2 0 0 7 / 2 0 0 8

Pou r l'in s t a n t rien d'i m p r e s sio n n a n t à l'affichage d e cet te p age m ai s o n a p r e p a r é le te r r ain.
• • •

On voit a p p a raître id = »ide n tifia n t» : o n ide n tifie les divisio n s, elles s o n t u niq u e s. Par la s uite o n les p e r s o n n alisera avec le css. Une division e ngloba n te (#page) p e r m e t t ra d e cha nger facile m e n t la p r é se n t a tio n d e la p age. Pen se z à l'in de n t a tio n, ceci p e r m e t d e mie ux se re p é rer s u r la s o u rce d' u ne p age.

4. Un p eu d e c onten u On va rajo u te r vite fait u n p e u d e co n te n u p o u r avoir d e la m a tière à t r availler.
fichier : index.htm <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtd">  <html>  <head>  <title>Ma première page web2.0</title>  </head>  <body>  <div id="page">  <div id="header">  <h1>Hello world!</h1>  </div>    <div id="sidebar">  <h3>Menu</h3>  <ul>  <li>menu 1</li>  <li>menu 2</li>  </ul>  </div>    <div id="content">  <h2>Ma page</h2>  <p>Un peu de contenu à rajouter ici</p>  </div>    <div id="footer">  <a href="index.htm" title="lien inutile">lien sur  la page</a>  </div>  </div>  </body>  </html>

David Epely - 2 0 0 7 / 2 0 0 8

On va alor s avoir n o s différe n t s élé m e n t s d e la p age s'afficher à la s uite. Il exis te d e ux ty p es d e balises : • ty p e bloc : ces b alises s'affiche n t les u n s a u d e s s o u s d e s a u t re s. Par exe m ple < d iv >, < p > , < h 1 > ... • ty p e inline : celles - ci s'affiche n t e n ligne, c'es t à dire à la s uite. Exe m ple : < s p a n > < a > ...

Une d e r nière cho s e ava n t d e p a s s er a ux cs s, à p a r tir d e m ai n te n a n t la p age es t valide a u te s t W3C et elle d oit le re s te r. Pour te s te r ces p age s o n p e u t u tiliser le te s t e n ligne : h t t p: / / v alida t or.w3.org / (les u tilisate u r s d e firefox p e uve n t es s ayer le pl ugin Ht ml valida to r q ui je d ois dire es t t rè s p r a tiq ue et int uitif).

5. Css : initialisation Il existe pl u sie u r s m é t h o d e s p o u r inclu re d u cs s, s oit directe m e n t d a n s les b alises h t ml, s oit d a n s l'en tê te o u e ncore d a n s u n a u t re fichier. Co m m e je l'in diq u ais p récé de m m e n t o n cherc he m ai n te n a n t à s é p a rer a u m axi m u m le co n te n u d e la p ré se n t a tio n. On va d o nc créer u n (ou pl u sie u r s) n o uvea u(x) fichier(s) q ue l'o n p e u t n o m m e r p a r exe m ple « d efa ult.cs s ».

NB : Vous ave z re m a r q u é, je n' u tilise q ue l'a nglais d a n s m e s ide n tifia n t s h t ml e t d a n s les n o m s d e fichier s. Ceci p o u r d e ux r aiso n s : 1 - On p e u t êt re a m m e n é à t r availler avec d e s ét ra nger s et il fa u t u n la ngage co m m u n et clair. 2 - Essaye z d'o uvrir u n e p age s u r inter ne t n o m m é « d éfa u t.h t m », le « é » va gé né rer u n co de caractè re relative m e n t h o r rible. De la m ê m e m a nière p o u r vot re d o s sier d e t r avail : p a s d'e s p ace (%20) ni d e carac tère s s pécia ux.

David Epely - 2 0 0 7 / 2 0 0 8

On l'i m p o r te alor s d a n s n o t re in dex.ht m
fichier : index.htm <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtd">  <html>  <head>  <title>Ma première page web2.0</title>  <link rel="stylesheet" type="text/css" href="default.css"  media="screen" /> </head>  <body>  <div id="page">  <div id="header">  <h1>Hello world!</h1>  </div>    <div id="sidebar">  <h3>Menu</h3>  <ul>  <li>menu 1</li>  <li>menu 2</li>  </ul>  </div>    <div id="content">  <h2>Ma page</h2>  <p>Un peu de contenu à rajouter ici</p>  </div>    <div id="footer">  <a href="index.htm" title="lien inutile">lien sur la  page</a>  </div>  </div>  </body>  </html>

6. Jouon s un p e u : un e pre mière mi s e e n form e On d éci de q u e n o t re p r é s e n t a tio n va se faire a s s e z si m ple m e n t :
• co ule ur d e fo n d : ble u fo ncé • p age : fo n d bla nc, 60 0 px ce n t rée avec u n e b or d u re d e 1 px grise • co ule ur d e t exte : gris fo ncé • lien s : s élection or a nge • m e n u : s u r le côté d r oi t • Titres : b o r d u re 2 px e n b a s • pie d d e p age : ble u p âle avec u n e bo r d u r e p oi n tillée, t exte ce n t ré e t p e tit.

David Epely - 2 0 0 7 / 2 0 0 8

Il s u ffit d e re m plir n o t re fichier d efa ult.css
default.css /* Un commentaire */  /* Blocs */  body{  margin : 0;  padding : 0;  background­color : #2F2F4F;  /*couleur des textes mais pas de liens!*/  color : #666;  }  #page{  width : 600px;  /*permet de centrer la page sans avoir besoin d'utiliser text­align */  margin : 10px auto;  border : 1px solid #333;  background­color : #fff;  }  #sidebar{  /*le menu est flottant sur le coté droit*/  float : right;  width : 150px;  }  #content{  /*le contenu ne passera pas dessus le menu*/  width : 430px;  }  #footer{  padding : 4px;  text­align : center;  border­top : 1px dotted #999;  background­color : #E6E8FA;  font­size : 0.8em;  }  /*Texts*/  a{  color : #666;  text­decoration : none;  }  a:hover{  background­color : #E47833;  }  h2{  border­bottom : 2px solid #999;  }

David Epely - 2 0 0 7 / 2 0 0 8

7. La finition On a p re s q u e te r mi né. La p age à l'air d e s'afficher correcte m e n t s u r IE ... m ai s u n p e tit p r o blè m e s u r Firefox, le pie d d e p age p a s se p a r d e s s u s le m e n u. Firefox u n p r o blè m e?! En réalité : n o n. On a s pecifié le m e n u co m m e flot t a n t d o n c le pie d d e p age va se coller s o u s le con t e n u, ce q ui es t logiq ue e n fin d e co m p t e. Voici la p e tite a s t uce p o u r régler ça. Il fa u t r ajo u te r u n e b ar re h o ri z o n t ale < h r / > e n d e s s o u s d u co n te n u e n m e t t a n t à jo u r les nivea ux grâce a u cs s :
index.htm <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtd">  <html>  <head>  <title>Ma première page web2.0</title>  <link rel="stylesheet" type="text/css" href="default.css"  media="screen" />  </head>  <body>  <div id="page">  <div id="header">  <h1>Hello world!</h1>  </div>    <div id="sidebar">  <h3>Menu</h3>  <ul>  <li>menu 1</li>  <li>menu 2</li>  </ul>  </div>    <div id="content">  <h2>Ma page</h2>  <p>Un peu de contenu à rajouter ici</p>  </div>    <hr class="clear" />    <div id="footer">  <a href="index.htm" title="lien inutile">lien sur la  page</a>  </div>  </div>  </body>  </html>

David Epely - 2 0 0 7 / 2 0 0 8

Puis a u nivea u d u cs s il fa u t rajo u te r u n e clas se :
default.css [...] hr.clear{  clear : both;  /* on cache la barre*/ visibility : hidden;  } [...] NB : En Css les clas se s à la différe nce s d e s ide n tifia n t s p e uve n t ré u tilisé s d a n s u n e p age.

8. C'est fini. Je r ajo u te rai p e u t êt re d a n s u n e n o uvelle versio n d e ce d oc u m e n t d' a u t re s m o d èles d e p age et l'intégra tio n d'effet s javascri p t q ui fo n t la n o t o riété d u web 2.0. Néa n m oi n s je p ré s e n te u n m o d èle d e n avigatio n m ai s il e n existe b ea uco u p. Je vo u s invite à jeter u n oeil à h t t p: / / w ww.navigatio n - web.co m , u n livre q ui p r o p o se u n e s oixa n t ai ne d e m o d èle s d e n aviga tio n. Puis p o u r ava ncer u n p e u pl u s d a n s l'élabo ra tio n d e p ages ergo n o miq ue s, plein d' a s t uce s e t u n e co m m u n a u t é t o ujo u r s gra n dis s a n te à l'aff û t d' u n inter ne t pl u s bea u e t m eilleu r : h t t p: / / w ww.alsacrea tio n s.co m . Et p o u r finir u n p e u d e d e sign avec le site h t t p: / / w ww.crys talx p.net q ui axe les créa tio n s vis uelles a u t o u r d' u n s tyle crys t al et ain si t r o uver u n p e u d'i n s pira tio n si n éce s s aire.

David Epely - 2 0 0 7 / 2 0 0 8