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 :

fichier : index.htm

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

Hello world!

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

•

: 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                

Hello world!