Conception Web2.0 v1

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 quot;//W3C//DTD XHTML 1.0 Strict//ENquot;
quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtdquot;>

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
<html>
<head>
<! ici se trouve l'entête de la page html, celleci 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 > : u n titre
•

< d iv > : u n e divisio n
•

< ul > : u n e liste
•

<p> : u n p a r agra p h e
•

etc.
•

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
<html>
<head>
<title>Ma première page web2.0</title>
</head>
<body>
<div id=quot;pagequot;>
<div id=quot;headerquot;>
</div>

<div id=quot;sidebarquot;> </div>

<div id=quot;contentquot;></div>

<div id=quot;footerquot;></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
<html>
<head>
</head>
<body>
</div>

<div id=quot;sidebarquot;>
<h3>Menu</h3>
<ul>
<li>menu 1</li>
<li>menu 2</li>
</ul>
</div>

<div id=quot;contentquot;>
<h2>Ma page</h2>
<p>Un peu de contenu à rajouter ici</p>
</div>

<div id=quot;footerquot;>
<a href=quot;index.htmquot; title=quot;lien inutilequot;>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
<html>
<head>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;default.cssquot;
media=quot;screenquot; />
</head>
<body>
</div>

<h3>Menu</h3>
<ul>
<li>menu 1</li>
<li>menu 2</li>
</ul>
</div>

<h2>Ma page</h2>
</div>

<a href=quot;index.htmquot; title=quot;lien inutilequot;>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;
backgroundcolor : #2F2F4F;
/*couleur des textes mais pas de liens!*/
color : #666;
}
#page{
width : 600px;
/*permet de centrer la page sans avoir besoin d'utiliser textalign */
margin : 10px auto;
border : 1px solid #333;
backgroundcolor : #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;
textalign : center;
bordertop : 1px dotted #999;
backgroundcolor : #E6E8FA;
fontsize : 0.8em;
}
/*Texts*/
a{
color : #666;
textdecoration : none;
}
a:hover{
backgroundcolor : #E47833;
}
h2{
borderbottom : 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
<html>
<head>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;default.cssquot;
media=quot;screenquot; />
</head>
<body>
</div>

<h3>Menu</h3>
<ul>
<li>menu 1</li>
<li>menu 2</li>
</ul>
</div>

<h2>Ma page</h2>
</div>

<hr class=quot;clearquot; />

<a href=quot;index.htmquot; title=quot;lien inutilequot;>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

Conception Web2.0 v1

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (17)

Conception Web2.0 v1