Projet Tuteuré. Création d'un site Internet

Transcription

1 Projt Tuturé Création d'un sit Intrnt par : Joly Damin (group Eb) Chihaoua Rayan (groupea) Lhomm Clémnt (groupea) Daquin Paul (groupea) Tutur : Virgini Dégardin Anné Scolair 008/009 IUT 'A' départmnt GEII Bd Paul Langvin BP Villnuv d'ascq Cdx

2 Rmrcimnts Nous tnons à rmrcir tout particulièrmnt t à témoignr notr rconnaissanc à Mll Dégardin Virgini, notr tutur d projt, pour l aid qu ll nous a apporté durant cs quatr mois. Sa disponibilité, sa pédagogi t ss consils nous ont été préciux dans nos choix d concption t d élaboration d nos programms. Nous rmrcions par aillurs notr ntourag, plus particulièrmnt nos amis. Ls informations préciuss qu ils nous ont donnés, nous ont ainsi prmis d poursuivr c projt dans ls millurs conditions.

3 Tabl ds matièrs Rmrcimnts... Tabl ds matièrs... Introduction...4 Objctifs du projt...5 I Sujt d l'étud...5 II L'xistant...5 III Définition ds objctifs...5 Démarch d concption du projt...6 I Préambul sur l'architctur, l'organisation d'intrnt...6 II Ls étaps clfs d la création d'un sit Intrnt...7 Difficultés rncontrés... Bilan t avnir sur notr projt...4 Annx : utilisation d divrs langags d programmation...5 Bibliographi...

4 Introduction Dans l cadr d notr préparation au DUT (Diplôm Univrsitair d Tchnologis) GEII (Géni Elctriqu t Informatiqu Industrill), ls étudiants sont amnés à choisir t à ffctur un projt proposé par ls nsignants d l'iut (Institut Univrsitair d Tchnologi). Nous avons ainsi choisi l projt «Création d'un sit Intrnt» tuturé par Mll Virgini Dégardin, profssur d'informatiqu. C projt nous prmt d dévloppr plusiurs qualités : l'autonomi la rsponsabilité l travail n équip la communication. Dans ls annés 90, un nouvau srvic Intrnt st apparu : l World Wid Wb, la toil d'araigné mondial, qu l'on appll plus familièrmnt l «Wb». C'st c srvic qui assur un crtain succès à l'intrnt. L but st ici d lir différnts pags qui formnt un sit Intrnt à l'aid d'un navigatur. D plus, l nombr d'ordinaturs connctés à Intrnt n'a cssé d progrssr : n fft, nous somms passés d 000 machins n 984 à million n 99. L'utilisation d'intrnt était à la bas résrvé aux univrsités t aux ntrpriss. C'st au cours d l'anné 99 où Intrnt s'ouvrira véritablmnt au grand public avc l'arrivé d Mosaïc, l prmir navigatur Wb. D nos jours, Intrnt st un outil t un moyn d communication incontournabl, comm l téléphon t la télévision, Intrnt fait maintnant parti d la vi quotidinn pour ds cntains d millions d prsonns. Un sit Intrnt st un nsmbl d pags wb hyprliés ntr lls t miss n lign à un adrss Wb. L sit Intrnt, c'st comm un livr, à partir du momnt où l contnu d clui-ci st intérssant t qu'il st corrctmnt illustré, alors l'intrnaut s fra un rél plaisir d consultr c sit Wb. C'st n affinant nos rchrchs qu notr choix s'st porté sur la réalisation d'un sit Intrnt. Aujourd'hui, il st si facil d ls consultr. Cpndant, notr group souhait acquérir davantag d'informations t pouvoir ainsi étudir concrètmnt t réalisr un sit Intrnt. Au cours du Smstr, notr travail a consisté à comprndr l fonctionnmnt d'un sit Intrnt, notammnt n ffctuant un étud tchniqu sur c sujt ainsi qu'un état d l'art : commnt réalisr un sit Intrnt grâc à ds logicils gratuits. C'st alors qu s posnt plusiurs qustions au sin du group : - l nom d domain - l srvur, l'hébrgmnt du sit - l langag d programmation utilisé : php html - mysql - la différnc ntr un sit statiqu ou un sit dynamiqu - l référncmnt du sit - l logicil gratuit utilisé l'aspct graphiqu la construction d pags - ls flux RSS. Par conséqunt, nous avons choisis d rédigr c rapport sous form d quatr partis. La prmièr st constitué d la présntation d nos objctifs, puis nous xposrons la démarch d concption utilisés afin d répondr aux dmands d notr échéancir t au sujt choisis, vindra nsuit la parti concrnant la présntation d la création d'un sit wb. Enfin, nous évoqurons nos difficultés rncontrés au cours d c prmir smstr, ainsi qu ls solutions apportés par chacun d'ntr nous. Nous trminrons c rapport par nos vus sur l projt t l'avnir qui s'offr à lui. 4

5 Objctifs du projt I Sujt d l'étud L thèm d notr étud st l sit intrnt, ou plus précisémnt la création d'un sit intrnt. Ls sits intrnt sont d nos jours dvnus communs sur l wb. On utilis ls sits intrnt pour touts ls utilisations possibls, qu ça soit ludiqu, économiqu, informatiqu, politiqu, un sit wb délivr toujours un mssag, un information. C'st n c point qu nous avons voulu délivrr la notr, t c'st c sur quoi notr sit portra, c'stà-dir dans l'apprntissag à la création d'un sit intrnt. La création d'un sit intrnt rquirt d nombruss connaissancs t compétncs qu nous n possédions pas au départ, néanmoins la formation rçu n GEII nous prmt d nous rapprochr qulqu pu d cs connaissancs. Dans c projt auqul notr group d quatr étudiants s'st lancé, il fut d'mblé décidé d'imposr ds objctifs afin d n pas prdr d vu notr projt. II L'xistant Afin d pouvoir nvisagr ls améliorations possibls, il nous a fallu prndr connaissanc du sujt t fair l bilan ds outils nécssairs à la création d'un sit wb, t ssayr d définir nos objctifs pour l projt sur lqul nous allions travaillr pndant 5 mois. III Définition ds objctifs Pour pouvoir crér un sit intrnt il nous faut ds connaissancs, connaissancs dont nous n disposions pas au départ. Pour parfair à c manqu, il nous a fallu fair ds rchrchs portant sur ls différnts définitions qu nous avait proposé notr tutur. C'st ainsi qu s définirnt divrs objctifs. Ls objctifs mis n plac sont alors : - L'appropriation total du sujt t la maîtris d clui-ci par chacun ds mmbrs du group. - La rchrch ds divrss définitions qu nous n maitrisions pas. - L'invntair bibliographiqu d nos rchrchs. - La mis n plac d'un échéancir nous prmttant d miux gérr notr tmps d travail. - La rédaction ds compts rndus à tmps. - La préparation du projt papir t d la soutnanc. Cs objctifs ainsi définis, nous amènnt à s'y tnir t à ls rmplir. Cux-ci nous amènnt à rmplir l principal objctif qui st d réalisr un sit Intrnt n ayant au préalabl fait un étud bibliographiqu ainsi qu sur ls moyns t outils à usr pour réalisr un tl sit Intrnt. L sit qu nous allons crér portra lui-mêm dirctmnt sur la création d'un sit intrnt, xpliquant aux intrnauts commnt ils puvnt ux aussi y parvnir. 5

6 Démarch d concption du projt I Préambul sur l'architctur, l'organisation d'intrnt 6

7 C'st à partir d 97 qu l'on put datr l'émrgnc d l'intrnt tl qu'on l connaît aujourd'hui, mais avc ds dévloppmnts t un implication davantag marqués dpuis l début d c nouvau siècl. Srvir l'armé st un chos, mais ls scintifiqus ont vu dans cs transmissions à distanc la possibilité d'échangr ds informations ssntills sur lurs travaux. Ils ont alors dévloppé un résau au travrs ds univrsités n l'articulant autour d'un protocol d communication novatur nommé TCP/IP (qui signifit Transfr Control Protocol/Intrnt Protocol), clui qui st utilisé d nos jours. Avc l protocol IP, dux ordinaturs séparés par ds millirs, voir ds millions d ilomètrs puvnt communiqur. Ils rçoivnt un adrss IP, c'st-à-dir un numéro qui prmt d ls idntifir sur Intrnt. C protocol d transfrt st actullmnt intrnational ; chaqu fois qu l'on s rnd sur Intrnt, notr ordinatur rçoit, d la part d notr fournissur d'accès, un numéro IP qui nous idntifi sur c gigantsqu résau. Validé n tant qu tl, nous pouvons ainsi drrièr notr écran visitr ls millions d pags qui constitunt aujourd'hui l Wb. L Wb st un parti d l'intrnt. C'st d'aillurs la sul qui nous intérss vraimnt n tant qu'utilisatur t futur créatur. Nous dirons qu l Wb (qui signifi «toil» n français) st un srvic d l'intrnt proposant d'autrs srvics. L plus important d tous, clui qui a assis l succès du Wb, st la mssagri élctroniqu. Nous pouvons fair un parnthès sur l'-mail qui st un srvic du Wb mis à notr disposition par notr fournissur d'accès. Cla prmt d'nvoyr ds courrirs à tout prsonn disposant d'un adrss -mail du typ : damin.joly@tudiant.univ-lill.fr. Enfin, il faut savoir qu tous ls sits qu nous visitons sont hébrgés sur un srvur. Un srvur st un énorm ordinatur (il y n a parfois plusiurs) rmpli d disqus durs (comm l nôtr par xmpl) qui stocnt ds fichirs dans un format qu puvnt lir ls navigaturs Wb. Il n résult l'affichag d'un pag Wb rmpli d'élémnts statiqus ou dynamiqus : txts, imags fixs, tc. II Ls étaps clfs d la création d'un sit Intrnt 7

8 Nous avons donc choisis nsmbl avc notr tutur ls notions incontournabls à saisir pour la réalisation d notr sit Intrnt au Smstr. Publir son sit. Pour hébrgr notr sit Wb, nous avons trois solutions : - ls fournissurs d'accès. C'st la solution d facilité. En fft, nous disposons d'un accès à Intrnt t d'un spac d publication pour nos pags Wb. Souvnt, ls fournissurs d'accès proposnt un srvic d'hébrgmnt ds sits. Notr abonnmnt comprnd crtainmnt un pu d'spac Wb gratuit c qui d'aillurs st largmnt suffisant pour ls sits simpls. - ls srvurs virtuls. - ls srvurs dédiés. Cs dux typs d srvur sont principalmnt intérssants pour ls sociétés. Un srvur virtul st un dossir présnt sur l disqu dur d'un srvur Wb physiqu. Chaqu srvur virtul hébrgé par l srvur physiqu fonctionn comm un srvur Wb physiqu. La solution du srvur virtul st intérssant si notr sit st simpl, pu xigant, t qu nous nous attndons à un trafic modéré. Enfin, c'st la solution la plus économiqu. Cpndant, la plupart ds sociétés gérant ds srvurs virtuls, gèrnt égalmnt ds srvurs dédiés. Un srvur dédié st un ordinatur uniqu dstiné à hébrgr xclusivmnt notr sit. Ls srvurs virtuls t dédiés offrnt plus qu'un hébrgmnt. Ils gèrnt égalmnt ls -mails. Pour hébrgr notr sit prsonnl, nous dvons fair appl à un fournissur d'spac Wb gratuit, ou tout simplmnt, l'iut pourrait s'n chargr, d'après notr tutur. 8

9 Ensuit, il faut égalmnt obtnir un nom d domain. Un nom d domain st l'adrss d'un sit sur l World Wid Wb. Par xmpl, lorsqu l'on dmand à notr navigatur Intrnt d s rndr à l'adrss suivant : il st évidnt qu'il va s rndr sur l sit Wb du départmnt Géni Elctriqu & Informatiqu Industrill d l'iut 'A'. L nom domain, qui st très parlant, st traduit par l DNS (Domain Nam Srvr), n un séri d chiffrs plus facils à intrprétr par l'ordinatur. Ctt séri d chiffrs st applé adrss IP. Voici l'xmpl ds cinq xtnsions d domains ls plus connus :.com => opérations commrcials.fr => sits généralists d langu français.du => organisms éducatifs.nt => fournissurs d srvics Intrnt.org => organisations à but non lucratifs. Enfin, un fois qu nous avons choisis un nom d domain t qu nous nous soyons assurés qu'il st disponibl, nous dvons l'nrgistrr. Généralmnt, c'st notr fournissur d'spac Wb qui s'n charg. Nous dvrons égalmnt utilisr t configurr un clint FTP : FTP signifi Fil Transfr Protocol. Un clint FTP st n brf un logicil nous prmttant d publir ls fichirs sur Intrnt. Dans l cadr d notr projt tuturé, nous utilisrons un logicil simpl d utilisation t gratuit tls qu FilZilla. 9

10 Sit statiqu ou dynamiqu? Sit statiqu Sit dynamiqu Entr sit statiqu t dynamiqu, il y a ds différncs tchnologiqus, mais surtout ds différncs dans la rapidité d mis à jour... Un sit statiqu st un sit wb constitué d pags HTML, dont l contnu chang pu. On parl d sit construit "n dur", donc plus rigid. Pour l mttr à jour, il st nécssair d connaîtr ls langags HTML, JavaScript, ou un éditur d cod. Avantag : Moins chr au départ, souplss t librté dans l dsign. L choix dépnd d la taill du sit. Si on vut l fair actualisr souvnt par ds non-informaticins, il vaut miux choisir un sit dynamiqu. La notion d sit Wb dynamiqu s'oppos à cll d sit statiqu. En fft, un sit dynamiqu st un sit Wb rlié à un bas d donnés, dont ls pags s construisnt à la dmand d l'intrnaut. Clui-ci nvoi ds rquêts au srvur, qui va piochr ls réponss dans un bas d donnés. L résultat st rnvoyé t s'affich dans l navigatur d l'intrnaut. Ls blogs, ls forums, ls sits marchands avc ds catalogus, ls sits n plusiurs langus, sont ds sits dynamiqus. Nous vrrons ainsi au cours d l'apprntissag du langag d programmation au Smstr, si notr group réalisra un sit statiqu ou dynamiqu... 0

11 Référncmnt du sit On désign par "référncmnt" un nsmbl d tchniqus visant à indxr l contnu d'un sit dans ls bass d donnés ds outils d rchrch (moturs, annuairs). L but du référncmnt st d'apportr un bonn visibilité à un sit. Cla pass par plusiurs msurs : - Obtnir ds lins dpuis ds sits "partnairs" - Enrgistrr l'adrss du sit dans ds annuairs - Fair apparaîtr l sit dans ls pags d résultat ds moturs d rchrch - Tout autr msur visant à accroîtr l trafic du sit... Un démarch d référncmnt qualitatif visra à fair apparaîtr l sit l plus "haut" possibl dans ls résultats ds moturs d rchrch. L'objctif étant d s positionnr n prmièr pag, c'st à dir dans ls dix prmirs.

12 Flux RSS Flux RSS RSS st un acronym d Rally Simpl Syndication (syndication vraimnt simpl), ou d Rich Sit Summary (sommair d'un sit nrichi). RSS st un acronym d Rally Simpl Syndication (syndication vraimnt simpl), ou d Rich Sit Summary (sommair d'un sit nrichi). L trm anglais Syndication désign un méthod d partag d l'information, notammnt avc la vnt d'un articl à plusiurs journaux. Un tchniqu qui s'st étndu aux autrs médias, comm la télévision (programm vndu à plusiurs chaîns) t aujourd'hui l'intrnt (contnu diffusé sur plusiurs sits). Un flux au format RSS st un fichir XML, mis à jour n tmps rél, qui rprnd automatiqumnt ls titrs ou l txt d'un sit. Bin souvnt, il s'agit d sits d'actualité, wbzins, blogs... L flux RSS st nsuit intégré dans un pag wb t affiché sous form d lins cliquabls, qui rnvoint vrs l sit autur du flux. C standard prmt d diffusr touts sorts d'information, d'alrts, d mis à jour d lists ou d'événmnts. L utilisation d flux RSS pour ainsi fair connaîtr ls miss à jour d notr sit wb plutôt qu d nvoyr un -mailing massif. C systèm d flux RSS prmt la diffusion ds nouvlls ds sits d'information, c qui prmt d consultr cs drnièrs sans forcémnt visitr l sit, d ls formatr comm on souhait, d fair un pré-sélction ds articls tc. Ls wbmastrs intègrnt cs flux à lur sit intrnt pour affichr ls actualités d'autrs sits. Ls intrnauts récupèrnt ds flux pour lir cs actualités sur lur navigatur préféré. Conclusion. Nous avons vu dans ctt parti qu la compréhnsion d qulqus notions tlls qu l nom d domain, l srvur, l'hébrgmnt, l référncmnt, l flux RSS, tc. était important pour comprndr la phas bibliographiqu d notr projt. Cpndant, nous allons voir au sin d ctt drnièr parti ls difficultés d rchrch du group concrnant cs différnts notions ainsi qu d'autrs problèms, plus généraux.

13 Difficultés rncontrés Notr projt a pour but d nous apprndr à crér un sit Intrnt (voir un sit Intrnt qui détaill précisémnt commnt nous pouvons crér un sit Intrnt). Prsqu tout l mond, d nos jours, utilis intrnt, qu s soit à ds fins privés, commrcials t profssionnlls, n tant qu loisirs, ou bin comm média d discussion. Cpndant, comm tl st l cas dans un société d consommation, nul bsoin d connaîtr l fonctionnmnt d Intrnt pour n profitr, prsqu plinmnt. En fft, un sit intrnt n st, du moins prsqu, qu un livr qu tout l mond puiss consultr dpuis son ordinatur prsonnl. Ls lins prmttnt d accédr à d autrs «pags», t lorsqu ls capacités du srvur sont dépassés, ls lins s «déchirnt». Ctt analogi put facilmnt êtr fait par un néophyt. Sulmnt, la marg ntr l utilisation t la création st énorm. Au départ, nous n avions qu put, voir aucun idé du procédé. Il nous as donc smblé évidnt qu ngrangr c savoir put êtr un atout décisif dans d nombrux cas, allant du sit d auto-présntation du parcours profssionnl, jusqu à la démonstration d un «plus» n vu d l'obtntion d un post. Ainsi, nous avons commncé nos rchrchs. La prmièr difficulté fut d trouvr ls différnts donnés priss n compt lors d la création d un sit, ainsi qu lur xplication. Ls rchrchs furnt d abord qulqu pu infructuus, puis vint l prmir rndz vous avz notr tutur, Mll Dégardin, qui nous fu d un grand aid t utilité. En fft, notr tutur nous a guidé quant à l orintation d nos rchrch n nous «cadrant» dans l sujt (à savoir, pour l prmir smstr, simplmnt la rchrch d informations concrnant ls différnts notions, t non la rchrch dirctmnt du sujt qu nous pourrions dévloppr au smstr ) t n nous faisant gagnr un tmps préciux, ll nous a d plus mis n main ls clés nécssairs à l aboutissmnt d notr projt n nous fournissant d nombruss donnés, qu il nous a suffit d rchrchr. Cpndant, arrivé à c nivau là, s st posé la difficulté d la compréhnsion n ll-mêm d la matièr qu nous avions réussit à trouvr. Ainsi ds notions tlls qu : - srvur - nom d domain - hébrgmnt - langag d programmation, tc. trouvèrnt aisémnt lurs placs car lls sont assz courammnt utilisé. (notions définis précédmmnt). Cpndant, ls notions d clint FTP, d flux RSS t d référncmnt, durnt fair l objt d rchrchs plus approfondis à l issu du duxièm rndz-vous pédagogiqu. S posa aussi la qustion d un sit soit statiqu (notr préférnc pour un début) ou n dynamiqu (plus contraignant). Nous avons finalmnt réussis à répondr aux attnts du projt, t cux, grâc à un aid appréciabl d Virgini Dégardin, ainsi qu un organisation solid, t un bonn communication ntr ls différnts mmbrs du group.

14 Bilan t avnir sur notr projt Comm nous avons pu l voir tout au long d notr étud, un sit intrnt st un outil d plus n plus utilisé par ls homms. Il prmt un ouvrtur sur l mond t sur la connaissanc t c st n c point qu nous avons voulu participr à c projt. Nous avons rncontré ds difficultés crts, mais cs drnièrs nous ont appris à travaillr n group t à nous répartir ds tâchs par nous mêm, nous rapprochant un pu plus du mond profssionnl qui nous attnd à la sorti d nos étuds. Nous avons ainsi élargit nos connaissancs n matièr d informatiqu pur t d tout c qui lui st lié ; qu c soit l apprntissag ds trms proprs à un sit Intrnt qu aux outils nécssairs à sa création. Enfin, nous somms à mêm aujourd hui d par tout l travail fournit d parlr d un sit Intrnt aisémnt à l oral t d n xpliqur son fonctionnmnt ainsi qu son utilité. C projt qui st l notr, t qui vis à la création d un sit intrnt s poursuivra lors du scond smstr t vrra sa mis n pratiqu dirct par sa création grâc à l'utilisation d'un logicil t d'un ou plusiurs langags d programmation. 4

15 Annx : utilisation d divrs langags d programmation HTML, c'st quoi? Prnons un imag assz simpl pour définir HTML : c'st un langag univrsl qui tint l Wb à bout d bras. Aucun pag du Wb n'échapp à c langag d dscription, ou à ss évolutions comm DHTML ou XML, ainsi qu l déploimnt d XHTML. Ainsi, lorsqu nous arrivons sur un sit, un pag Wb s'affich dans notr navigatur. Nous y contmplons du txt, ds imags, ds animations, ds vidéos, t ntndons parfois d la musiqu. Cpndant, il faut savoir qu l'nsmbl d cs élémnts ont été créé dans ds logicils spécifiqus comm Word par xmpl, pour l txt ; Photoshop, Firwors, Paint Shop Pro, tc. pour ls imags ; Windows Movi Mar, Pinnacl Studio, QuicTim, RalVido, tc. pour ls vidéos ; t WavLab pour l son, par xmpl. Un fois cs élémnts créés, il faut ls placr dans un ou plusiurs pags Wb pour qu'ils s'affichnt corrctmnt dans un navigatur Wb. C'st ainsi l langag HTML qui prmt d'y arrivr. Nous pouvons ainsi qualifir l langag HTML comm un langag structurl, il définit l'architctur ds différnts sits Intrnt. D plus, c'st égalmnt un langag d concption. En fft, il prmt à un dévloppur d mttr n plac tous ls élémnts évoqués ci-dssus. L HTML, grâc à ds baliss, c'st-à-dir ds morcaux d cod nfrmés ntr dux idntificaturs, assur un rspct total d la position ds élémnts d'un pag Wb. Au cours d la périod bibliographiqu, nous avons pu trouvr un sit intérssant : L sit du Zéro, qui rprnd ls principals baliss à connaîtr du langag XHTML, qu nous utilisrons crtainmnt au smstr lors d la réalisation d notr sit Intrnt grâc à un logicil d programmation, gratuit t intuitif. Ls baliss sont ds marquurs prmttant d structurr un pag Wb. Il xist plusiurs typs d baliss : Ls baliss d prmir nivau Ls baliss d prmir nivau sont ls principals baliss qui structurnt un pag XHTML. Ells sont indispnsabls pour réalisr l "cod minimal" d'un pag wb. Balis s <html > Dscription Balis principal d tout pag wb. On lui donn généralmnt attributs : xmlns : la list ds baliss xhtml xistants (applé spac d noms). xml:lang : la langu utilisé sur votr pag wb. Utilisz "fr" pour un documnt n français. En tmps normal, votr balis <html> doit rssmblr à cci : Cod : HTML <html xmlns=" xml:lang="fr"> 5

16 Balis s <had > <body > Dscription </html> En-têt d la pag Corps d la pag Balis Dscription Ls baliss d'n-têt Ctt balis prmt d'indiqur crtains informations sur la pag wb. On l'utilis l plus souvnt pour inclur un fuill d styl CSS, comm cci : Cod : HTML <lin rl="stylsht" mdia="scrn" typ="txt/css" titl="mon dsign" hrf="dsign.css" /> On put aussi s'n srvir pour - autrs choss : <lin / > Cod : HTML <!-- Pag d'accuil du sit --> <lin rl="start" titl="accuil" hrf="indx.html" /> <!-- Pag d'aid du sit --> <lin rl="hlp" titl="politiqu d'accssibilité" hrf="accssibilit.html" /> <!-- Fil RSS du sit --> <lin rl="altrnat" typ="application/rss+xml" titl="nws d mon sit" hrf="nws.xml" /> <!-- Icôn du sit (favicon) --> <lin rl="shortcut icon" typ="imag/x-icon" hrf="favicon.ico" / > Ctt balis prmt d définir ls propriétés d la pag wb. On s'n srt pour un foul d choss. Voici qulqus xmpls pratiqus : <mta /> Cod : HTML <!-- Autur d la pag --> <mta nam="author" contnt="jan Dupont" /> <!-- Dscription d la pag --> <mta nam="dscription" contnt="la pag prsonnll d Jan Dupont" /> <!-- Mots-clés d la pag --> <mta nam="ywords" contnt="xpérincs, rchrch, laboratoir, chimi" /> <!-- Adrss d contact --> <mta nam="rply-to" contnt="monadrss@mail.com" /> <!-- Empêchr la mis n cach d la pag par l navigatur --> <mta http-quiv="pragma" contnt="no-cach" /> <!-- Tabl d caractèrs --> <mta http-quiv="contnt-typ" contnt="txt/html; 6

17 Balis Dscription 4 charst=iso-8859-" /> <!-- Rafraîchissmnt automatiqu au bout d 0 sconds --> <mta http-quiv="rfrsh" contnt="0; URL= /> En général, on utilis surtout l mta pour la tabl d caractèrs. Prmt d placr un script. On l'utilis souvnt pour mttr du cod Javascript : <scrip t> Cod : HTML <script typ="txt/javascript"> /* Votr script ici */ </script> Prmt d définir du cod CSS pour la pag. On lui mt l'attribut typ="txt/css". <styl > Exmpl : Cod : HTML <styl typ="txt/css"> /* Votr cod CSS ici */ </styl> Titr d la pag wb. <titl > C'st probablmnt la balis la plus important d'un pag wb. Choisissz bin votr titr car il a baucoup d'importanc pour ls moturs d rchrch (ils donnnt d l'importanc aux mots qui s trouvnt dans l titr). Cod : HTML <titl>ls ptits xpérincs chimiqus d M. Dupont</titl> Ls baliss d structuration du txt Balis Typ Dscription <acronym> <blocquot > Srt à définir ds acronyms, comm C.I.A. On utilis généralmnt l'attribut titl pour donnr la définition d l'acronym quand on point dssus : Cod : HTML <acronym titl="cntral Intllignc Agncy">C.I.A.</acronym> Citation (longu) Vous dvz obligatoirmnt mttr un balis d paragraph à l'intériur du blocquot. Par xmpl : Cod : HTML 7

18 Balis <cit> <q> <sup> <sub> <strong> <m> <h6> <h5> <h4> <h> <h> <h> <img /> <a> <br /> Typ Dscription 4 5 Citation (moynn) Citation (court) Mis n xposant Mis n indic <blocquot> <p> Txt d la citation </p> </blocquot> Mis n valur (fort) L txt st généralmnt mis n gras. Mis n valur (faibl) L txt st généralmnt mis n italiqu. Titr d nivau 6 Titr d nivau 5 Titr d nivau 4 Titr d nivau Titr d nivau Titr d nivau Insèr un imag. Utilisz ls attributs src (pour indiqur l'adrss d l'imag) t alt (pour indiqur un txt d rmplacmnt). Cs attributs sont obligatoirs. Exmpl : Cod : HTML <img src="tmplats/imags/smily.png" alt=":)" /> Lin hyprtxt. Indiquz l'url d dstination grâc à l'attirbut hrf : Cod : HTML <a hrf="autrpag.html">rndz-vous sur l'autr pag</a> Rtour à la lign 8

19 Balis <p> <hr /> Typ Dscription Paragraph Cré un lign d séparation horizontal <addrss> <dl> <ins> <dfn> <bd> <pr> Prmt d'indiqur un adrss, ou évntullmnt l'autur d'un documnt. L txt st généralmnt mis n italiqu. Prmr d'indiqur un txt qui a été supprimé. L txt st généralmnt barré. Prmt d'indiqur un txt qui a été inséré. L txt st généralmnt souligné. Prmt d'indiqur un définition. Prmt d'indiqur un cod qu doit tapr l visitur. L txt à l'intériur d la balis <pr> sra affiché tl qu'il a été tapé dans l cod (spacs t ntrés compris). Un polic d taill fix st utilisé. Ls baliss d list Ctt parti énumèr touts ls baliss XHTML prmttant d crér ds lists (lists à pucs, lists numérotés, lists d définitions...) Balis <ul> <ol> Typ Dscription List à pucs non numéroté. Vous dvz mttr un <li></li> par élémnt d la list. Exmpl : Cod : HTML 4 <ul> <li>un élémnt</li> <li>un autr élémnt</li> </ul> List à pucs numéroté. Vous dvz mttr un <li></li> par élémnt d la list. Exmpl : Cod : HTML 4 <ol> <li>elémnt n </li> <li>elémnt n </li> </ol> <li> listitm Prmt d crér un élémnt d list. L typ d la balis st particulir car ll n'st ni bloc ni inlin. On dit qu'll st d typ list-itm. <dl> List d définitions. Vous dvz altrnr chaqu trm <dt> par sa définition <dd>. 9

20 Balis Typ Dscription Exmpl : Cod : HTML <dt> Trm à définir <dd> <dl> <dt>port</dt> <dd>ouvrtur dans un mur prmttant d'ntrr t d sortir</ dd> <dt>théâtr</dt> <dd>liu où l'on rprésnt ds ouvrags dramatiqus</dd> </dl> Définition du trm Ls baliss d tablau Balis <tabl> <caption > Typ Dscription Délimit un tablau. Voici un xmpl d tablau simpl : Cod : HTML <tabl> <caption>passagrs du vol 77</caption> <tr> <th>nom</th> <th>ag</th> <th>pays</th> </tr> <tr> <td>carmn</td> <td> ans</td> <td>espagn</td> </tr> <tr> <td>michll</td> <td>6 ans</td> <td>etats-unis</td> </tr> <tr> <td>françois</td> <td>4 ans</td> <td>franc</td> </tr> </tabl> - Prmt d donnr un titr au tablau 0

21 Balis Typ Dscription <tr> - Lign d tablau <th> - Cllul d'n-têt du tablau (généralmnt mis n gras) <td> - Cllul du tablau <thad> - <tbody> - Balis non obligatoir prmttant d'insérr l'n-têt du tablau. Si vous choisissz d'utilisr <thad>, <tfoot> t <tbody>, vous dvz ls mttr dans l'ordr suivant dans votr cod sourc :. <thad>. <tfoot>. <tbody> Balis non obligatoir prmttant d'insérr l corps du tablau <tfoot> - Balis non obligatoir prmttant d'insérr l pid du tablau Ls baliss d formulair Balis <form> Typ Dscription Délimit un formulair. Vous dvrz généralmnt donnr attributs à la balis <form> mthod : indiqu la méthod d'nvoi du formulair (gt ou post). Si vous n savz pas quoi utilisr, mttz post. action : la pag vrs laqull l visitur doit êtr rdirigé lorsqu'il a validé votr formulair. <fildst> <lgnd> <labl> Prmt d rgroupr plusiurs élémnts d'un formulair. On l'utilis généralmnt dans d grands formulairs. Pour donnr un titr à votr group, utilisz la balis <lgnd> Titr d'un group dans un formulair. A utilisr à l'intériur d'un <fildst> Titr d'un élémnt d formulair. Généralmnt, vous dvrz mttr l'attribut for sur ctt balis pour indiqur l'id d l'élémnt auqul corrspond l labl. Champ d formulair. Il xist d nombrux typs d champs différnts. Vous choisissz l typ d champ qu vous désirz grâc à l'attribut typ : <input /> Cod : HTML <!-- Zon d txt d'un lign --> <input typ="txt" /> <!-- Mot d pass (l txt st caché) --> <input typ="password" /> <!-- Envoi d fichir --> <input typ="fil" /> <!-- Cas à cochr -->

22 Balis Typ Dscription <input typ="chcbox" /> <!-- Bouton d'option --> <input typ="radio" /> <!-- Bouton d'nvoi --> <input typ="submit" /> <!-- Bouton d rmis à zéro --> <input typ="rst" /> <!-- Champ caché --> <input typ="hiddn" /> <txtara > <slct> <option> <optgrou p> Pnsz à donnr un nom à vos champs grâc à l'attribut nam Zon d saisi multilign. Vous pouvz définir sa taill grâc aux attributs rows t cols (nombr d ligns t colonns) ou bin l fair n CSS grâc aux propriétés width t hight. List déroulant. Utilisz la balis <option> pour crér chaqu élémnt d la list : Cod : HTML 4 5 <slct nam="pays"> <option valu="franc">franc</option> <option valu="spagn">espagn</option> <option valu="itali">itali</option> </slct> Elmnt d'un list déroulant Group d'élémnts d'un list déroulant. A utilisr dans l cas d'un grand list déroulant. Vous dvz utilisr l'attribut labl pour donnr un nom au group. Enfin, ci-dssous st présnt l cod minimal obligatoir pour débutr la réalisation d'un pag Wb : Cod : HTML <!DOCTYPE html PUBLIC "-//WC//DTD XHTML.0 Strict//EN" " <html xmlns=" xml:lang="fr"> <had> <titl>titr du sit</titl> <mta http-quiv="contnt-typ" contnt="txt/html; charst=iso-8859-" /> </had> <body> </body> </html>

23 Bibliographi

24