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 octobre 1957, pendant la guerre froide, l’union soviétique a réussi à lancer le prem ier satellit 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épartem ent de la défense am éricaine. L’obj ectif était d’effect uer des recherches et de développer des idées avancées et t echnologiquem ent en avance sur son tem ps.
• En 1969 ARPA m et en place un réseau m ilitaire d’ordinat eurs appelés ARPANET
• Au fil des années, ARPANET va s’étendre aux universités, puis au dom aine public et connaît re du succès grâce au protocole TCP/ I P ( com m utation de paquet s) et des services tels que le cou r r ie r é le ct r on iqu e et FTP ( File Transfert Protocol : protocole de transfert de fichier)
• En 1983 la partie de l'ARPANET appartenant aux Forces arm ées des État s- Unis fut séparée du reste du réseau et devint le M I LN ET ( Milit ary Net work) , tandis que réseau public se dénom m ait
m aintenant I N TERN ET ( I nter- Net work : I nterconnexion de plusieurs réseaux, Réseau I nternational)
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 certain 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 nternet n'ét ait réservé qu'à quelques très rares privilégiés, on parlait de séparer le contenu ( ce qui est auj ourd'hui devenu le langage XHTML) de la m ise en form e ( qui est devenu le CSS) .
• En 1986 : invention du SGM L (Standard 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 travaillé sur u n syst è m e de ge st ion de l’in for m a t ion, dans lequel un t exte pouvait contenir des référ ences ou liens vers d’autres t ravaux, perm et tant ainsi à l’ut ilisat eur de rapidem ent passer d’un docum ent à l’aut r e(N a viga t ion) . I l a créé un serveur perm et tant la publication de ce style 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 pr ogram m e en perm et t ant la lect ur e(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 hypertext 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 tard, un des prem iers navigat eurs gratuits apparaît : il s'appelle M oza ïc et fonctionne aussi bien sur Mac que sur PC.
Entre 1993 et 1994, le nom bre de sit es web passe de 500 à 10 000, la croissance est énorm e.
XHTML-CSS
3. La naissance du W3C
• La popularit é grandissante du web com m ença à suscit er des intérêts com m erciaux.
• Microsoft et Net scape privilégient le développem ent de nouvelles fonctionnalit és propriétaires ou en com pétition frontale avec celles exist antes 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 antes.
• Pour m ett re fin à tout ce désordre et assurer l’évolution du web, 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écifications ( appelées
“ recom m andations” ) telles 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 tre un term e au désordre qu'était devenu le langage HTML. En effet, au fur et à m esure de son évolut ion, des balises HTML ont été "inventées" par les navigateurs Net scape et I nternet Explorer ( de Microsoft) . Cert aines balises m archaient sur un navigateur, m ais pas sur l’aut re.
On décide d'arrêter le développem ent du langage HTML et d'en créer un nouveau.
Le X H TM L ( Extensible HyperText Markup Language) devient 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ètem 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 autant le droit à l'erreur qu'en HTML.
Le CSS
L'histoire du CSS ( Cascading Style 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 avantages : l'apparence du site web pourra être 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ête à sortir.
5. Votre site web est-il valide ?
Souvenez- vous : le W3C a établi des norm es. I l est nécessaire de les respecter, pour qu'on soit sûrs que tous les sites web parlent la m êm e "langue".
Le W3C propose sur son sit e web ( www.w3.org) un outil qui s'appelle le "Validat eur" ( "Validator" en anglais) .
Le validateur est une sorte de program m e qui va analyser vot re code source et vous dire s'il est correctem ent fait, ou s'il com port e des erreurs que vous devez corriger.
6. Nos outils de travail
Pour créer un site web, on doit indiquer des inform ations à l'ordinat eur. I l ne suffit pas de sim plem ent taper le text e qu'il y aura dans son sit e, il faut aussi savoir placer ce texte, insérer des im ages, faire des liens etc...
Pour expliquer à l'ordinat eur ce que vous voulez, il va falloir ut iliser un langage qu'il com prend.
Et com m e nous l’avons dit plus haut nous utiliserons :
• XHTML pour écrire le contenu de nos pages web.
• CSS pour présenter ce contenu.
Une quest ion que vous devez certainem ent vous être 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 ett re d’écrire nos codes sources en xhtm l et css. Nous pouvons entre aut res Bloc- notes( Windows) , Notepad, vi( Linux) , em acs( Linux) ,sm ultron( Mac OS) .Dans notre cours, nous ut iliserons Bloc- not es, vu que nous travaillons dans un environnem ent Windows qu’il y est installé 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 navigateur est le logiciel qui va int erpréter vos codes xhtm l et css et afficher vos pages web d’une m anière accessible au com m un des m ortels. Parm i les navigateurs qui existent , cit ons :
• I nternet Explorer
• Mozilla Firefox
• Opera
• Google Chrom e
• Net scape
• Konqueror ( pour Linux)
• Lynx ( pour Linux)
• Apple Safari ( pour Mac et Windows)
• etc...
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 texte, vous allez t rouver un autre élém ent au m ilieu : ce sont les balises.
Une balise com m ence par un chevron ouvrant "< " et se term ine par un chevron ferm ant "> ". Par exem ple :
< nom - de- la- balise>
Les balises sont invisibles pour le visiteur, elles servent de m arqueurs pour indiquer quelque chose( donner une instruction) au navigateur. Par exem ple, une balise perm et d'indiquer que tel text e est le tit re de votre page, cet autre t exte est une citation etc et c...
I l existe 2 types de balises : certaines balises apparaissent t ouj ours par paire, d'aut res au contraire sont toutes 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 tape du texte, 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 type de balise se t erm ine touj ours par un slash "/ ", m ais cet te fois le slash se t rouve à la fin de la balise.
< ba lise - se u le / >
Les attributs (propriétés, caractéristiques)
Les att ributs sont un m oyen de donner des précisions sur une balise. On peut t rouver des att ribut s sur les deux types de balises ( par paire ou seule) . La syntaxe 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 attribut :
< im a ge n om = " sole il.j pg" / >
I ci, l'at tribut est "nom ", et il a pour valeur "soleil.j pg". Cela indique que l'im age que l'on veut insérer s'appelle "soleil.j pg" tout sim plem ent .
renforcer une partie de t exte :
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 distinguons :
• l’élém ent < st r on g> j a m a is< / st r on g> ;
• le contenu d’élém ent « j a m a is » ;
• la balise ouvrante < st r on g> ;
• la balise ferm ant e correspondante < / 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 te pet ite partie théorique, j e vais vous donner ici quelques règles pas bien com pliquées qu'il faudra retenir si vous voulez faire une parfait e pet ite page web :
• Les balises existent soit par paires ( < balise> < / balise> ) ; soit toutes seules, m ais dans ce cas il faut m ett re un / à la fin de la balise ( ex. : < balise / > )
• Les nom s des balises et attribut s s'écrivent touj ours en m inuscules
• Les valeurs des att ribut s peuvent contenir des m aj uscules
• S'il y a des attribut 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 onsite)
Ouvrer une page Bloc- notes
Enregist rer (Fich ie r + En r e gist r e r Sou s) cette page sous le nom essai.htm l dans le dossier que vous venez de créer
