-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathTD-Sites-Web.html~
864 lines (775 loc) · 65.1 KB
/
TD-Sites-Web.html~
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<TITLE>Réaliser un site Web</TITLE>
<link type="text/css" rel="stylesheet" href="style-cours-TC-IUT2.css" />
</HEAD>
<BODY LANG="fr-FR" DIR="LTR">
<Title>Réaliser un site Web</Title>
<Subtitle>Techniques de Commercialisation</Subtitle>
<Subtitle>
Problèmes, erreurs, fautes d'orthographes à signaler
<A HREF="mailto:[email protected]" target="blank">ici</A></Subtitle>
<H1>Objectifs de ce cours, déroulement
et notation</H1>
<question>Quel est l'objectif de ce cours ?</question>
<answer>L'objectif de ce cours est de connaître, comprendre et
savoir utiliser les outils de conception de sites Web.</answer>
<question>Combien de séances sont prévues ?</question>
<answer>Deux.</answer>
<question>Deux séances ? Mais ce TD a l'air assez long. Il va falloir
que je travaille entre deux séances ?</question>
<answer>Oui. En effet, deux
séances de TD sont prévues, il vous appartient donc de réaliser
de façon autonome ce que vous n'auriez pas eu le temps de faire en
cours. En particulier entre les deux séances afin de pouvoir poser
des questions à votre enseignant.
</answer>
<question>Il paraît qu'il n'y aura pas de contrôle final, est-ce vrai ?</question>
<answer>Oui. Vous serez notés sur la réalisation individuelle de
projets. En ce qui concerne plus particulièrement cette partie du
cours, vous devrez réaliser un site Web concernant une entreprise fictive.
Vous aurez une soutenance d'une dizaine de minute à réaliser en
salle machine devant un ou plusieurs des enseignants d'informatique.
La date et les modalités des soutenances vous seront données
ultérieurement.</answer>
<question>Comment puis-je poser des questions en dehors des séances ?</question>
<answer>Comme d'habitude, en envoyant un courrier électronique à
votre enseignant</answer>
<question>Pourquoi me demander de ne pas imprimer ce
document ?</question>
<answer>Parce que le document
évoluera certainement en fonction des erreurs, tournures
hasardeuses et des fautes d'orthographes ; parce qu'il
contient des liens hypertextes et que le papier ne permet pas encore
de suivre les liens hypertextes quoi qu'aujourd'hui,
il suffise d'un téléphone...</answer>
<H1>Une
page Web Simple</H1>
<P>
Au tournant des années 1990, Internet existe depuis déjà 20 ans
mais est encore principalement réservé aux militaires et aux
universitaires. Il offre pourtant déjà la plupart des services que
nous connaissons comme la messagerie électronique (<I>mail</I>), la
messagerie instantanée (<I>chat</I>), le transferts de fichiers
(<I>ftp</I>) mais leurs interfaces sont alors très sommaires voire
inexistantes. Un nouveau service, inventé au Centre Européen pour
la Recherche Nucléaire (CERN) à la frontière franco-Suisse par Tim
Berners-Lee, va révolutionner l'Internet et le démocratiser : le
Web.
</P>
<P>Le Web est constitué de pages. Que sont ces pages ?</P>
<UL>
<LI>Ouvrez le bloc note
<LI>Recopiez le
texte suivant (retours à la ligne et tabulations inclus) :
</UL>
<!--<P STYLE="margin-left: 2cm; margin-right: 1cm; margin-top: 0.2cm; margin-bottom: 0.2cm; background: transparent; border: 1px solid #000000; padding: 0.05cm; widows: 2; orphans: 2; page-break-before: auto"><A NAME="line1"></A>
<FONT COLOR="#808080"><FONT FACE="Arial, sans-serif"><FONT SIZE=2><html><BR> <head><BR> <title>Ma
première page Web</title><BR> </head><BR> <body><BR> Bonjour
le monde<BR> </body><BR></html></FONT></FONT></FONT></P>-->
<IMG SRC="Bonjour-le-Monde.png" NAME="Bonjour-le-Monde" ALIGN=CENTER WIDTH=40% BORDER=0>
<UL>
<LI>Enregistrez
le document mais donnez l'extension .html au lieu de .txt
Appellez-le <I>Bonjour.html</I></LI>
<LI>Ouvrez-le avec le navigateur Web Mozilla Firefox. Vous devriez obtenir une page dont le titre est <I>Ma première page Web</I>
et qui affiche <I>Bonjour le monde</I>.</LI>
</UL>
<p>Vous venez de créer une page Web. Elle est écrite dans le langage
HTML (Hypertext Markup Language) qui est un langage de balisage
c'est-à-dire que, comme des parenthèses, si vous avez une balise
ouvrante (par exemple, <I><html></I>) vous avez une balise
fermante (ex : <I></html></I>).</p>
<UL>
<LI>Identifiez
les différentes balises de <I>Bonjour.html</I> et dites à quoi elles correspondent.</LI>
</UL>
<div class="visu">
<H3>À Retenir</H3>
<p>Une page Web est simplement du texte brut écrit dans le langage HTML
qui va être interprété par un navigateur Web afin d'être affiché.</p>
<P>Les balises vont toujours par paires à une ouvrante correspond une
fermante, elles sont organisées en dernière ouverte première
fermée (équivalent à dernier entrant, premier sortant DEPS, LIFO).</P>
</div>
<P>
Une page seule a peu d'intérêt alors</P>
<UL>
<LI>créez-en une
seconde. Il faut que son nom soit différent de celui de la première
et que les deux soient dans le même répertoire. Pour gagner du
temps, vous pouvez copier le contenu de la première page dans un
nouveau fichier et ensuite le modifier.</LI>
</UL>
<!--<P STYLE="margin-left: 2cm; margin-right: 1cm; margin-top: 0.2cm; margin-bottom: 0.2cm; background: transparent; border: 1px solid #000000; padding: 0.05cm; widows: 2; orphans: 2; page-break-before: auto">
<FONT COLOR="#808080"><FONT FACE="Arial, sans-serif"><FONT SIZE=2><html><BR> <head><BR> <title>Ma
deuxième page Web</title><BR> </head><BR> <body><BR> Bonjour.
Où puis-je dire bonjour au monde ? <a href="Bonjour.html">Ici</a>
<BR> </body><BR></html></FONT></FONT></FONT></P>-->
<IMG SRC="Deuxieme-page.png" NAME="Deuxieme-page" ALIGN=CENTER WIDTH=100% BORDER=0>
<UL>
<LI>Ouvrez cette
nouvelle page avec un navigateur. Observez le mot <I>ici</I>.
Cliquez dessus.</LI>
</UL>
<div class="visu">
<H3>En savoir plus</H3>
<P>
En Décembre 2011, les 5 navigateurs Web les plus utilisés sont
(<A HREF="http://gs.statcounter.com/#browser-ww-monthly-201012-201012-bar" target="blank">source</A>)
:</P>
<P>
<A HREF="http://www.opera.com/browser/" target="blank"><IMG SRC="TD-Sites-Web_html_6571fb3.gif" NAME="HTTP://WWW.OPERA.COM/BROWSER/" ALIGN=LEFT WIDTH=5% BORDER=0></A> Opera
11 (part de marché 2%)</P>
<P>
<A HREF="http://www.apple.com/fr/safari/" target="blank"><IMG SRC="TD-Sites-Web_html_503981f7.png" NAME="HTTP://WWW.APPLE.COM/FR/SAFARI/" ALIGN=LEFT WIDTH=5% BORDER=0></A>Apple
Safari 5 (pdm 6%)</P>
<P>
<A HREF="http://www.mozilla-europe.org/fr/firefox/" target="blank"><IMG SRC="TD-Sites-Web_html_675359c5.png" NAME="HTTP://WWW.MOZILLA-EUROPE.ORG/FR/FIREFOX/" ALIGN=LEFT WIDTH=5% BORDER=0></A>Mozilla
Firefox 9, libre, gratuit et multiplateforme (pdm 25%)</P>
<P><A HREF="https://www.google.com/chrome/" target="blank"><IMG SRC="TD-Sites-Web_html_m33457f86.gif" NAME="HTTP://WWW.GOOGLE.COM/CHROME" ALIGN=LEFT WIDTH=5% BORDER=0></A>Google
Chrome 16 (pdm 28%)</P>
<p>
<A HREF="http://www.microsoft.com/france/windows/internet-explorer/telecharger-ie9.aspx" target="blank"><IMG SRC="TD-Sites-Web_html_25e46ee4.png" NAME="HTTP://WWW.MICROSOFT.COM/FRANCE/WINDOWS/INTERNET-EXPLORER/TELECHARGER-IE8.ASPX" ALIGN=LEFT WIDTH=5% BORDER=0></A>Microsoft
Windows Internet Explorer 8 qui est <A HREF="http://www.clubic.com/article-282232-1-comparatif-internet-explorer-firefox-opera-safari.html" target="blank">actuellement
le plus mauvais</A> et le plus utilisé des navigateurs (pdm 39% pic
à 95% en 2002-2003)</P>
<P>
Une répartition différente sur dispositif mobiles (<A HREF="http://gs.statcounter.com/#mobile_browser-ww-monthly-201112-201112-bar" target="blank">source</A>)</P>
<P>
<IMG SRC="TD-Sites-Web_html_aac5f3a.png" NAME="images9" ALIGN=LEFT WIDTH=5% BORDER=0>Android
(pdm 20%)</P>
<P>
<IMG SRC="TD-Sites-Web_html_7f4a7fb5.gif" NAME="images8" ALIGN=LEFT WIDTH=5% BORDER=0>
Nokia (pdm 13%)</P>
<P>
<A HREF="http://fr.blackberry.com/" target="blank"><IMG SRC="TD-Sites-Web_html_m62c758c3.gif" NAME="HTTP://FR.BLACKBERRY.COM/" ALIGN=LEFT WIDTH=5% BORDER=0></A>BlackBerry
(pdm 8%)</P>
<P>
<A HREF="http://www.opera.com/mobile/" target="blank"><IMG SRC="TD-Sites-Web_html_6571fb3.gif" NAME="HTTP://WWW.OPERA.COM/MOBILE/" ALIGN=LEFT WIDTH=5% BORDER=0></A>Opera
(pdm 24%)</P>
<P>
<A HREF="http://www.apple.com/fr/safari/" target="blank"><IMG SRC="TD-Sites-Web_html_503981f7.png" NAME="images4" ALIGN=LEFT WIDTH=5% BORDER=0></A>Apple
safari (pdm 22%)</P>
</div>
<P>
Il s'agit d'un lien hypertexte (ou hyperlien) qui permet, ici de
passer d'une page à une autre. Il sont l'essence du Web et rendent
également possible le passage vers d'autres services comme le
courrier électronique ou le transfert de fichier par un simple clic
de souris. Ce sont eux, également, qui permettent l'affichage de
photos et autres ressources multimédias.
</P>
<div class="visu">
<H3>En savoir plus</H3>
<P>Grâce
aux liens hypertextes, on va passer en un peu plus de 5 ans de 100
000 à 10 000 000 machines sur Internet. L'idée
ne vient pourtant pas du Web puisqu'elle date de...<A HREF="http://fr.wikipedia.org/wiki/Hypertexte" target="blank">1945</A>
pour la gestion des microfilms</P>
</div>
<P>Le langage HTML est relativement simple, il permet à un non
informaticien de réaliser une page Web. Il suffit de décrire le
contenu et la forme de la page.</P>
<UL>
<LI>Reprenez
votre première page et modifiez là en mettant une balise <I>B</I>
autour de monde.</LI></UL>
<!--<P STYLE="margin-left: 2cm; margin-right: 1cm; margin-top: 0.2cm; margin-bottom: 0.2cm; background: transparent; border: 1px solid #000000; padding: 0.05cm; font-style: normal; widows: 2; orphans: 2; page-break-before: auto">
<FONT COLOR="#808080" FACE="Arial, sans-serif" SIZE=2><html><BR> <head><BR> <title>Ma
première page Web</title><BR> </head><BR> <body><BR> Bonjour
le <B>monde</B><BR> </body><BR></html></FONT></P>-->
<IMG SRC="Bonjour-gras.png" NAME="Bonjour-gras" ALIGN=CENTER WIDTH=40% BORDER=0>
<UL>
<LI>À quoi sert
la balise <I><B></I> ?
Remplacez <I>B</I> par <I>I</I> (la lettre i).
À quoi sert la balise <I>I</I>
? Modifiez votre programme pour que le mot <I>Bonjour</I>
apparaisse en gras italique.</LI>
</UL>
<div class="visu">
<H3>À retenir</H3>
<P><I><HEAD></I>: contient les
informations sur la page comme le titre par exemple</P>
<P>
<I><BODY>: </I>le corps de la
page, ce qui s'affiche dans la fenêtre</P>
<P>
Même si la plupart des navigateurs
sont permissif, il vaut toujours mieux respecter les conventions et
une page Web doit avoir <B>une
seule tête</B> et <B>un
seul corps</b>.
<P>
En résumé, le squelette d'une page Web devrait être
<!--<P LANG="zxx" ALIGN=JUSTIFY STYLE="margin-bottom: 0cm; border: 1px solid #000000; padding: 0.05cm; font-weight: normal; page-break-inside: avoid; widows: 0; orphans: 0; page-break-before: auto; page-break-after: auto">
<FONT COLOR="#808080" FACE="Arial, sans-serif" SIZE=2>
<I><html></I>
<BR/><I> <head></I>
<BR/><I> <title></title></I>
<BR/><I> </head></I>
<BR/><I> <body></I>
<BR/><I> </body></I>
<BR/><I></html></I></P></font>-->
<IMG SRC="squelette-HTML.png" NAME="squelette-HTML" ALIGN=CENTER WIDTH=25% BORDER=0>
</div>
<UL>
<LI><P CLASS="puce-1-western" STYLE="text-indent: 0cm; font-style: normal">
Modifiez le corps de votre page pour rajouter des titres. Les titres se placent dans <body> </P>
</UL>
<!--<P STYLE="margin-left: 2cm; margin-right: 1cm; margin-top: 0.2cm; margin-bottom: 0.2cm; background: transparent; border: 1px solid #000000; padding: 0.05cm; font-style: normal; widows: 2; orphans: 2; page-break-before: auto">
<FONT COLOR="#808080"><FONT FACE="Arial, sans-serif"><FONT SIZE=2> <H1>Titres
de niveau 1</H1><BR> <H2>Titres de niveau
2</H2><BR> <H3>Titres de niveau 3</H3></FONT></FONT></FONT></P>
<P LANG="zxx" ALIGN=JUSTIFY STYLE="margin-top: 0.2cm; margin-bottom: 0.2cm; font-style: normal">-->
<IMG SRC="Titres.png" NAME="Titres" ALIGN=CENTER WIDTH=25% BORDER=0>
On peut définir des titres jusqu'au niveau 6. De même, les
paragraphes sont gérés avec la balise <I><p></I> (et bien sûr son pendant, <I></p></I>).</P>
<div class="visu">
<H3>En savoir plus</H3>
<P>La première page Web aurait été consultée le jour de Noël 1990.</P>
<P>Et voici à quoi ressemblait le premier navigateur qui fonctionnait
sur ordinateur <A HREF="http://fr.wikipedia.org/wiki/NeXT" target="blank">NeXT</A>
(l'ancêtre des ordinateurs actuels d'Apple)</P>
<p><IMG SRC="TD-Sites-Web_html_m763c149a.gif" NAME="images7" ALIGN=CENTER WIDTH=100% BORDER=0></p>
</div>
<P>
Les balises ont parfois des attributs. Par exemple pour <I><a
href="Bonjour.html">,</I> la balise <I><a></I> qui
définit les liens hypertextes a comme attribut <I>href </I>qui donne
la cible du lien
</P>
<div class="visu">
<H3>À retenir</H3>
<P>
La structure d'une balise ouvrante avec un attribut est de la forme :</P>
<P>
<<I>nomBalise attribut</I>="<I>valeur
attribut</I>"></P>
<P>
Il est possible d'avoir plusieurs attributs à la suite séparés par
des espaces </P>
<P>
Par exemple, <I><a href="Bonjour.html" target="_BLANK"></I>
signifie que pour la balise<I> <a> </I>l'attribut<I> href </I>a
la valeur<I> Bonjour.html (la page cible) </I>et l'attibut<I> target
</I>est la fenêtre cible<I> (</I>avec<I> _BLANK, </I>une nouvelle).</P>
<P>
La structure d'une balise fermante est plus simple</P>
<P>
Par exemple,<I> </body></I></P>
<P>
On trouvera <A HREF="http://www.codeshttp.com/baliseh.htm" target="blank">ici</A>
une liste des balises et des attributs associés</P>
</div>
<P>
Ces attributs permettent aussi de gérer l'apparence générale de la
page par exemple :</P>
<puce><p>pour les caractères (<I><font></I>)
il est possible de modifier</P>
<puce>la taille avec l'attribut size (exprimée en points pts ; par ex.
<font size = "5">) ;</puce>
<puce>la couleur avec l'attribut <I>color</I>
(noms en anglais ; par ex. <I><font color = "white"></I>)
;</puce>
<puce>la police avec l'attribut <I>face
</I>(par ex. <I><font
face = "Comic Sans MS"></I>)</puce>
<puce>Pour utiliser plusieurs attributs appartenant à une même balise comme <font>, on fait <font size = "5" face = "Comic Sans MS" color = "white"> texte</font></puce>
</puce>
<puce>La balise qui ferme n'a pas des attributs. Dans l'exemple précedent,<I> </font></I> reste égal même s'il y a trois attributs
</puce>
<PUCE>pour les paragraphes (<I><p></I>),
il est possible de modifier l'alignement avec <I>align</I>
(<I>left</I>, <I>right</I>,
<I>center</I>, <I>justify</I>;
par ex. <I><p align="left"></I>)</puce>
<puce>
pour le corps de la page Web
(<body>), la couleur du fond peut être modifiée grâce à
l'attribut <I>bgcolor</I>
(par ex. <I><body bgcolor="white"></I>)</puce>
<puce>
pour utiliser plusieurs balises qui affectent un seul texte au même temps, il faut faire :
<a><b><c>texte</c></b></a>. Par exemple :
<H1><font>texte</font></H1>
</puce>
<UL>
<LI><P>Réalisez la
page suivante en utilisant des balises de paragraphe </P>
</UL>
<p>
<IMG SRC="TD-Sites-Web_html_4dd56cb4.gif" NAME="images1" ALIGN=CENTER WIDTH=77% WIDTH=100% BORDER=0></p>
<!--<p>Voici
la page <A HREF="http://atoum.imag.fr/geta/User/didier.schwab/IUT/formatage.html">Web
correspondante</A>.</P>-->
<div class="visu">
<H3>À retenir</H3>
<P>
HTML permet de décrire à la fois le contenu et l'apparence d'une
page Web</P>
</div>
<P>
Lorsque l'on conçoit un site relativement grand, gérer des fichiers
textes et leur cohérence devient rapidement compliqué.
</P>
<UL>
<LI><P>Allez sur
<A HREF="http://fr.wikipedia.org/" target="blank">http://fr.wikipedia.org</A> .</P>
<LI><P>Allez
regarder le code source de la page (<I>Clic droit>Code source de
la page</I>)</P>
<LI><P>Observez la
complexité du code mais essayez de repérer des balises déjà
connues.</P>
</UL>
<P>
Pour gérer de tels sites, dès le milieu des années 1990, des
outils encore plus simples à utiliser ont été mis en place même
si des notions de HTML restent encore indispensables à l'écriture
de sites Web.</P>
<div class="visu">
<H3>À retenir</H3>
<P>
Pour être parfaitement lu par un navigateur, les lettres accentuées
et les symboles sont codés. Ce code commence toujours par une
esperluette (<I>&</I>) et
finit toujours par un point virgule (<I>;</I>).Par exemple, <I>é</I> pour
<I>&eacute; et è pour &egrave; </I>On
trouvera l'ensemble de ces symboles <A HREF="http://www.w3schools.com/charsets/ref_html_entities_e.asp" target="blank">ici</A>
</P>
</div>
<div class="visu">
<H3>À retenir</H3>
<P>
Il existe de nombreux tutoriaux en ligne sur le HTML, par exemple,
<A HREF="http://fr.html.net/tutorials/html" target="blank">celui-ci</A>.</P>
</div>
<H1>Les
éditeurs de site Web WYSIWYG</H1>
<P>
Les logiciels WYSIWYG (What you see is what you get, vous obtenez ce
que vous voyez) sont les logiciels pour lesquels l'utilisateur voit
directement ce qu'il obtiendra : <I>Writer</I> ou <I>Impress</I> en
sont des exemples, vous pouvez voir, en même temps que vous la
réalisez votre présentation sous <I>Impress</I> ou votre mémoire
avec <I>Writer</I>.</P>
<div class="visu">
<H3>En savoir plus</H3>
<P>
En ce qui concerne le Web, <I>Adobe Dreamweaver</I>, <I>Microsoft
Expression Web</I>, <I>Apple iWeb</I> en logiciels propriétaires et
<I>Mozilla Compozer</I> ou <I>BlueGriffon</I> en logiciel libres
permettent l'édition en WYSIWYG.</P>
<P>
Writer permet également de réaliser de petits sites.</P>
</div>
<UL>
<LI><P>
Avec LibreOffice Writer créez un document texte</P>
<LI><P>
Reproduisez la page <A HREF="petitFormattage.html" target="blank"><I>Mon
petit formatage</I></A> de la partie précédente.</P>
<LI><P>
Enregistrez le document au format HTML, ouvrez le avec un navigateur.</P>
<LI><P>Regardez
le code HTML généré par writer (clic droit puis code source de la page)</P>
</UL>
<P>Ce type de logiciel a toutefois quelques limites :</P>
<puce>
Il gère peu la cohérence graphique. Writer peut évidement
utiliser la notion de style mais ce n'est pas un standard du Web, si
vous rouvrez la page HTML avec une autre instance de Writer (un
Writer installé sur une autre machine par exemple), vous n'aurez
plus vos styles</puce>
<puce>
Il faut gérer toute la partie envoi des fichiers sur le serveur</puce>
<H1>Les systèmes de gestion de contenu</H1>
<P>
Généralement appelés par leur accronyme anglais CMS (<I>Content
Management System</I>). Comme leur nom l'indique, les utilisateurs
n'ont qu'à gérer le contenu et ne se préoccupent pas du stockage
ni de la cohérence graphique. Pour un utilisateur lambda, il s'agit
d'un site Web pour lequel il peut créer et/ou éditer des pages.
Vous en utilisez un depuis que vous êtes à l'iut l'intratek.</P>
<UL>
<LI><P>Connectez-vous
sur l' <A HREF="http://intratek-08.iut2.upmf-grenoble.fr/index.php" target="blank">intranet</A> et allez dans <I>enseignement>informatique>Web</I></P>
<LI><P>
Créez une nouvelle page</P>
<LI><P>
Dans le formulaire, mettez un titre à votre page (<A HREF="petitFormattage.html" target="blank"><I>Mon
petit formatage</I></A>)</P>
<LI><P>
Observer les différents menus dans la barre et formatez votre page
pour qu'elle soit le plus proche possible de la page Web réalisée
précédemment</P>
<LI><P>
Passez du mode code html au mode wysiwyg. Modifiez le code HTML et
vérifiez le résultat</P>
<LI><P>
Publiez votre page</P>
</UL>
<div class="visu">
<H3>En savoir plus</H3>
<P>
Il existe des milliers de CMS. Bien entendu tous n'ont pas les mêmes
fonctionnalités, la même simplicité, les mêmes usages le même
prix et ils ne sont pas tous très populaires. Le site
<A HREF="http://www.cmsmatrix.org/" target="blank">http://www.cmsmatrix.org/</A>
permettait d'en tester 1212 le 10 janvier 2012.</P>
</div>
<H1>Weebly</H1>
<P>
Weebly est l'un des nombreux CMS que l'on peut trouver sur le Web. Il
a deux principaux avantages, il offre un hébergement gratuit du site
et son utilisation WISIWYG est particulièrement poussée.</P>
<P>
C'est avec ce CMS que vous devrez concevoir un site Web cette année.
Ici, nous allons réaliser un petit site Web sur le département
Techniques de Commercialisation.</P>
<P>
<B>Rappel</B> : votre navigateur <B>doit être</B> Mozilla Firefox</P>
<UL>
<LI>Allez
sur le site de Weebly et cliquez sur "S'inscrire" (coin en haut à droite de l'écran) (<A HREF="https://www.weebly.com/fr" target="blank">https://www.weebly.com/fr</A>)</LI>
<p><IMG SRC="weebly0.png" NAME="images2" ALIGN=center WIDTH=50% BORDER=0></p>
<LI>Remplissez le formulaire </LI>
<p><IMG SRC="weebly1.png" NAME="formulaireInscription" ALIGN=center WIDTH=50% BORDER=0></p>
<LI>Une fois la fenêtre "Souhaitez-vous vendre des produits en ligne?", sélectionnez "Pas maintenant" </LI>
<p><IMG SRC="weebly3.png" NAME="formulaireInscription" ALIGN=center WIDTH=40% BORDER=1></p>
<LI>Séléctionnez un modèle autre que "Sol de terrace" et après cliquer sur "Commerncer l'édition"</LI>
<p><IMG SRC="weebly4.png" NAME="formulaireInscription" ALIGN=center WIDTH=50% BORDER=0></p>
<LI>Choississez
un sous-domaine que vous nommerez TC suivi de votre nom de famille
et de votre prénom et cliquez sur "Continuer"</LI>
<p><IMG SRC="weebly5.png" NAME="formulaireInscription" ALIGN=center WIDTH=50% BORDER=0></p>
<LI>Donnez un titre à votre site (<I>Site
Web TC</I>) et cliquez sur "Continuer"</LI>
</UL>
<P>
Vous êtes maintenant sur la page d'édition. C'est ici que vous
allez construire les pages de votre site. Weebly permet au créateur du site web de glisser-déposer des blocs contenant des fonctionnalités ou sections. Ainsi, il faudra que décider ce qu'on veut ajouter ainsi que son lieu sur la page. La plupart de modèles ont déjà un format prédefini (couleurs, polices, etc..). Toutefois, ils permettent de les modifier pour avoir un résultat plus personalisé. Par défault, elle travaille d'abord sur la page d'accueil, c'est à dire la première page que les personnes vont regarder. Pour modifier une autre, il faut aller sur l'onglet "Pages" (Menu supérieur), cliquer sur celle à éditer et cliquer encore une fois sur "Construire" (Menu supérieur) pour retourner sur l'espace d'édition. </P>
</UL>
<LI>Les options pour modifier le contenu du site se trouvent au côté gauche. Prenez un peu du temps pour les explorer</LI>
<p><IMG SRC="editionWeebly.png" NAME="formulaireInscription" ALIGN=center WIDTH=50% BORDER=0></p>
<P>Nous allons créer ici un
petit site sur le département techniques de commercialisation. </P>
<P>
Il faut définir l'ensemble des pages dont on aura besoin et leur
organisation</P>
<UL>
<LI>Définissez
l’arborescence pour qu'elle soit identique à celle ci-dessous (carré rouge).
Ici, le site est composé de trois pages principales (accueil,
Première année, Deuxième année) et de six "sous-pages
(faire glisser les pages vers la droite pour en faire
dessous-pages).</LI>
</UL>
<IMG SRC="arborescenceWeebly.png" NAME="images3" ALIGN=CENTER WIDTH=100% BORDER=0>
<UL>
<P>Il faut
maintenant mettre du contenu dans ces pages, éditer le site. Nous
commençons par la page d'accueil.</LI>
<LI>Allez sur la
page d'accueil</LI>
<LI>Le ménu à gauche vous permet de déposer des éléments sur
votre page (texte en colonnes, image…)</LI>
<LI>Réalisez la page d'accueil suivante contenant les informations de l'image. Vous devez chercher le logo du Dépt. Tech de Co de l'IUT2 et de rajouter le lien hypertexte <A HREF="https://iut2.univ-grenoble-alpes.fr/" target="blank">https://iut2.univ-grenoble-alpes.fr/</A> au mot "ici"
(site de l'IUT). Le formattage peut varier selon le modèle élu </LI>
<IMG SRC="accueilWeebly.png" NAME="images3" ALIGN=CENTER WIDTH=50% BORDER=1>
<LI>Vous
cliquerez sur « publier » (Coin supérieur droit) pour mettre votre site à
jour. Vous pouvez visiter le site et voir le résultat de vos modifications</LI>
</UL>
Après la page d'accueil, nous passons à la sous-page « Nous
contacter » où nous allons mettre le formulaire suivant</P>
<UL>
<LI>Insérer un
élément formulaire dans la page (<I>Menu côté gauche > Basique >
> Formulaires de contact</I>)
</LI>
</UL>
<IMG SRC="formulaireWeebly.png" NAME="images3" ALIGN=CENTER WIDTH=50% BORDER=1>
<UL>
<LI>
Vérifiez que le formulaire est envoyé à votre adresse (cliquer sur bouton
form options) et vous rajouterez « vous êtes intéressé(e)
par » en indiquant les différentes modalités (vous
utiliserez options boutons</LI>
<LI>
Dans les autres pages insérez des galeries de photo, des vidéos,
des sondages en ligne en formulant des questions avec des cases à
cocher et des boutons d’options, des mots croisés</LI>
</UL>
<H1>Les CSS</H1>
<P>Dès 1994, il est devenu clair que maintenir l'identité graphique
d'un site Web était compliqué. Imaginez le reponsable du site Web
d'un journal devoir systématiquement insérer le titre du journal,
régler les couleurs, la taille des titres et du texte.
</P>
<UL>
<LI>Dans Weebly, changez de thème</LI>
<LI>Qu'observez-vous ?</LI>
</UL>
<P>Le contenu n'a pas été modifié alors que la charte graphique
est complètement différente.</P>
<P>Comment expliquer cette possibilité alors que nous avons vu que
le HTML permet
de décrire à la fois le contenu et l'apparence d'une page Web ?
Simplement en enlevant du code HTML les informations du formatage.
Ainsi sont nées les CSS (Cascading Style Sheets : Feuilles de style
en cascade)</P>
<div class="visu">
<H3>À retenir</H3>
<P>
Les CSS jouent un rôle équivalent au masque d'une présentation et
aux styles d'un traitement de texte.</P>
<P>
Au HTML le soin de gérer le <B>contenu </B>, le<B> fond</B></P>
<P>
Au CSS le soin de gérer le <B>formatage</B>, la <B>forme</B></P>
</div>
<UL>
<LI>
Laissez de côté Weebly et revenez dans le système de fichier de
votre ordinateur.</LI>
<LI>Créez un répertoire (un dossier) appelé <I>test-CSS</I>.</LI>
<LI>Enregistrez <A HREF="Tests_CSS.html"> ce
fichier</A> dans le
répertoire puis ouvrez-le avec le bloc-note.</LI>
<LI>
Ouvrez ce fichier avec votre navigateur, lisez le poème, observez
sa forme</LI>
<LI>Dans
le répertoire où vous avez téléchargé ce fichier, créez un
second fichier, appelez-le <I>style.css</I> et
recopiez</LI>
</UL>
<IMG SRC="premier-css.png" NAME="premier-css" ALIGN=CENTER WIDTH=30% BORDER=0>
<P>Maintenant, nous allons indiquer dans
le fichier HTML (test-CSS.html) où aller chercher la feuille de
style</P>
<UL>
<LI>Dans la tête du fichier HTML,
insérez</LI>
</UL>
<IMG SRC="en-tete-css.png" NAME="en-tete-css" ALIGN=CENTER WIDTH=45% BORDER=0>
<UL>
<LI>Visualisez le résultat dans votre
navigateur, observez sa forme. Quelle est la différence ?</LI>
</UL>
<P>Pourquoi ? Analysons ce que nous
avons écrit dans le fichier CSS : <I>body </I> est
l'élément HTML que l'on souhaite formater et entre les accolades
<I>background-color,</I> la
couleur du fond qui sera donc vert clair.</P>
<div class="visu">
<H3>À retenir</H3>
<P>
Les éléments d'un fichier CSS ont la syntaxe suivante :</P>
<P>
<FONT COLOR="#00ae00">sélecteur</FONT>
{
<BR/>
<FONT COLOR="#ff0000">propriété<SUB>1</SUB></FONT>
: <FONT COLOR="#2323dc">valeur<SUB>1</SUB></FONT>;
<BR/>
<FONT COLOR="#ff0000">propriété<SUB>2</SUB></FONT>:
<FONT COLOR="#2323dc">valeur<SUB>2</SUB></FONT>;
<BR/>
...
<BR/>
<FONT COLOR="#ff0000">propriété<SUB>N</SUB></FONT>
: <FONT COLOR="#2323dc">valeur<SUB>N</SUB></FONT>;
<BR/>
}
</P>
<P>
<FONT COLOR="#00ae00">selecteur</FONT> :
la balise HTML à laquelle on souhaite appliquer la propriété</P>
<P>
<FONT COLOR="#ff0000">propriété</FONT>
: la propriété</P>
<P><FONT COLOR="#2323dc">
valeur</FONT>
: la valeur que l'on souhaite donner à la propriété</P>
<P>On trouve facilement sur le Web la liste des
propriétés et des valeurs (par exemple
<A HREF="http://www.siteduzero.com/informatique/tutoriels/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-1" target="blank">le site du Zéro</A> ou le site spécialisé <A HREF="http://www.css-faciles.com/proprietes-css-familles.php" target="blank">css-faciles</A>)</P>
</div>
<P>Vous modifierez le fichier CSS (et
uniquement ce fichier) pour obtenir la présentation suivante. Il
vous sera nécessaire de rechercher dans le lien précédant les
propriétés et valeurs associées nécessaires.</P>
<p>En sachant que</P>
<UL>
<LI>le titre <I>H1</I>
est écrit en <I>Arial</I>, en gras, centré
et dans la plus grande taille de police</LI>
<LI>le titre <I>H2 </I> est
est écrit en <I>Arial</I>, centré, les caractères sont en petites capitales
et en taille de police moyenne</LI>
<LI>le reste du texte est est écrit en <I>Arial</I>, italique,centré, et en taille de police petite et l'espace entre deux paragraphes vaut une demi-taille de ligne (line-height: 50%).</LI>
<LI>le body de la page est "SkyBlue" </LI>
</UL>
<IMG SRC="TD-Sites-Web_html_f39c458.gif" NAME="images12" ALIGN=CENTER WIDTH=100% BORDER=0/>
<!-- <P>Une solution est <A HREF="http://atoum.imag.fr/geta/User/didier.schwab/IUT/style-poss1.css">ici</A>
et une seconde<A HREF="http://atoum.imag.fr/geta/User/didier.schwab/IUT/style-poss2.css"> là</A></P>-->
<div class="visu">
<H3>En savoir plus</H3>
<P>
L'idée des CSS date de 1994, leurs
premières spécifications officielles datent de 1996-1998 mais il
faut attendre 2006 pour qu'<I>Internet Explorer</I> (qui
équipe alors environ 90% des machines) ne sache les interpréter
correctement.</P>
</div>
</UL>
<H1>Les CSS dans Weebly</H1>
<UL>
<P>Weebly nous offre une bonne centaine
de masques différents ce qui est largement suffisant pour une
utilisation personnelle simple mais insuffisant pour une utilisation
professionnelle. En effet, le site Web d'une entreprise doit
refléter son identité graphique. Il va ainsi falloir que nous
modifions les CSS de notre site pour obtenir le résultat attendu.</P>
<LI>Revenez sur le site que vous avez crée
<LI>En mode édition
du site, cliquez sur l'onglet <I>Thème</I>
<LI>Cliquez sur<I>
Editer HTML/CSS</I></LI>
<LI>Cliquez sur "main.less" et cherchez sur le code les indications "Text and type". Avec l'aide de <A HREF="http://goulvench.free.fr/vrac/CSS.html"> cette page de références</A> explorez et modifiez les valeurs mis par défault sur votre site.
</LI>
</UL>
<div class="visu">
<H3>En savoir plus</H3>
<P>
De nos jours, il existe une grande variété d'écrans (des
téléphones portable aux très grands écrans d'ordinateur) sur
lesquels on peut visualiser les pages Web. Leur définition est
exprimée en pixels qui sont les points sur l'écran qui affichent
une couleur.</P>
<P>La
taille de l'écran (c-à-d. la longueur de sa diagonale) est
exprimée, elle, en pouces (1 pouce (1") = 2,54cm), et n'est pas
nécessairement en rapport avec le nombre de pixels d'un écran.
Ainsi, les écrans des téléphones portables les plus récents ont
bien plus de pixel qu'une télévision à <A HREF="http://fr.wikipedia.org/wiki/Tube_cathodique" target="blank">tube
cathodique</A> : </P>
<UL>
<LI>
Télévision à tube cathodique: 768 ×
576 (nombre
de pixels sur la ligne ×
nombre sur la colonne);</LI>
<LI>
Téléphones
<A HREF="http://fr.wikipedia.org/wiki/IPhone" target="blank">Iphone edge, 3G, 3GS</A> (3,5" ; 480 × 320) <A HREF="http://fr.wikipedia.org/wiki/IPhone" target="blank">Iphone 4 & 4S</A> (3,5" ; 640 ×
960) ; <A HREF="http://fr.wikipedia.org/wiki/Samsung_i9000_Galaxy_S" target="blank">Samsung i9000 Galaxy S<A>, <A HREF="http://fr.wikipedia.org/wiki/Samsung_i9100_Galaxy_S_II" target="blank">Samsung i9100 Galaxy S II</A> (4" ; 480 × 800) ;</LI>
<LI>
Tablettes Apple <A HREF="http://fr.wikipedia.org/wiki/IPad" target="blank"> Ipad </A>
(9,7" ; 1024 × 768 puis 2 048 × 1 536), <A HREF="http://fr.wikipedia.org/wiki/Samsung_Galaxy_Tab" target="blank">Samsung Galaxy Tab 10.1 </A>(10,1" ; 1024×600 et 1280×800),
<A HREF="http://en.wikipedia.org/wiki/Archos#Generation_9" target="blank">Archos G9</A> (10,1" ; 1280*800)</LI>
<LI>
Télévisions haute définition
(1920 × 1080)</LI>
<LI> Moniteurs d'ordinateur (jusqu'à
2 560 × 1 440)</LI>
<P>
Wikipedia présente ce récapitulatif des principales
tailles d'écrans actuels exprimée en pixels</P>
<IMG SRC="http://upload.wikimedia.org/wikipedia/commons/e/e5/Vector_Video_Standards2.svg" NAME="images13" ALIGN=CENTER WIDTH=100% BORDER=0/>
</DIV>
<div class="visu">
<H3>En savoir plus</H3>
<P>
Le W3C (<A HREF="http://fr.wikipedia.org/wiki/World_Wide_Web_Consortium" target="blank"><I>World
Wide Web Consortium</I></A>),
créé en 1994 par Tim Berner-Lee est l'organisme chargé de définir
les standards du Web (HTML, CSS, <A HREF="http://fr.wikipedia.org/wiki/Extensible_Markup_Language" target="blank">XML</A>,
<A HREF="http://fr.wikipedia.org/wiki/SVG" target="blank">SVG</A>,...).
Ces standards sont dits libres (ou <A HREF="http://fr.wikipedia.org/wiki/Format_ouvert" target="blank"> ouverts </A>)
c'est-à-dire que leurs spécifications techniques sont publiques et
sans restriction d'accès ni de mise en œuvre.</P>
<P>
Certains formats dits propriétaires (ou <A HREF="http://fr.wikipedia.org/wiki/Format_fermé" target="blank">fermés</A>)
pourtant très utilisés ne font pas partie des <A HREF="http://fr.wikipedia.org/wiki/Standards_du_Web" target="blank">standards
du Web</A>.
Dans ce cas, pour pouvoir fabriquer un logiciel capable de les lire,
il faut payer une redevance. C'est le cas des fichiers <A HREF="http://fr.wikipedia.org/wiki/ZIP_(format_de_fichier) target="blank"">zip</A>
ou du <A HREF="http://fr.wikipedia.org/wiki/Adobe_Flash" target="blank">Flash</A>
par exemple. C'est d'ailleurs pourquoi il est contesté par les promoteurs de l'informatique libre (voir <A HREF="http://www.april.org/fr/pas-de-flash" target="blank">la position de l'April</A>). C'est également une des raisons avancée par Apple qui refuse de permettre son installation sur ses terminaux mobiles.</P>
</div>
<H1>Webographie</H1>
<P>
<SPAN STYLE="font-style: normal">Internet
</SPAN><A HREF="http://fr.wikipedia.org/wiki/Internet"><SPAN STYLE="font-style: normal">http://fr.wikipedia.org/wiki/Internet</SPAN></A></P>
<P>
<SPAN STYLE="font-style: normal">Histoire d'Internet
</SPAN><A HREF="http://fr.wikipedia.org/wiki/Histoire_d'Internet">http://fr.wikipedia.org/wiki/Histoire_d'Internet</A></P>
<P>
<SPAN STYLE="font-style: normal">Le Web
</SPAN><A HREF="http://fr.wikipedia.org/wiki/World_Wide_Web"><SPAN STYLE="font-style: normal">http://fr.wikipedia.org/wiki/World_Wide_Web</SPAN></A></P>
<P LANG="zxx" ALIGN=JUSTIFY STYLE="margin-top: 0.2cm; margin-bottom: 0.2cm; font-style: normal">
L'informatique au CERN</P>
<P>
<A HREF="http://fr.wikipedia.org/wiki/Organisation_européenne_pour_la_recherche_nucléaire#Informatique_au_CERN"><SPAN STYLE="font-style: normal">http://fr.wikipedia.org/wiki/Organisation_européenne_pour_la_recherche_nucléaire#Informatique_au_CERN</SPAN></A></P>
<P>
<SPAN STYLE="font-style: normal">Comparatif navigateurs : qui est le
meilleur ?
</SPAN><A HREF="http://www.clubic.com/article-282232-1-comparatif-internet-explorer-firefox-opera-safari.html"><SPAN STYLE="font-style: normal">http://www.clubic.com/article-282232-1-comparatif-internet-explorer-firefox-opera-safari.html</SPAN></A><SPAN STYLE="font-style: normal">
</SPAN>
</P>
<P>
<SPAN STYLE="font-style: normal">Part de marché des navigateurs
</SPAN><A HREF="http://gs.statcounter.com/"><SPAN STYLE="font-style: normal">http://gs.statcounter.com/</SPAN></A></P>
<P>
<SPAN STYLE="font-style: normal">Le langage HTML
</SPAN><A HREF="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language"><SPAN STYLE="font-style: normal">http://fr.wikipedia.org/wiki/Hypertext_Markup_Language</SPAN></A></P>
<P>
<SPAN STYLE="font-style: normal">Tutorial sur le HTML
</SPAN><A HREF="http://fr.html.net/tutorials/html/"><SPAN STYLE="font-style: normal">http://fr.html.net/tutorials/html/</SPAN></A></P>
<P>
<SPAN STYLE="font-style: normal">Les couleurs du Web
</SPAN><A HREF="http://fr.wikipedia.org/wiki/Couleurs_du_Web"><SPAN STYLE="font-style: normal">http://fr.wikipedia.org/wiki/Couleurs_du_Web</SPAN></A><SPAN STYLE="font-style: normal">
</SPAN>
</P>
<P>
<SPAN STYLE="font-style: normal">Les attributs en HTML
</SPAN><A HREF="http://fr.selfhtml.org/html/reference/attributs.htm"><SPAN STYLE="font-style: normal">http://fr.selfhtml.org/html/reference/attributs.htm</SPAN></A></P>
<P LANG="zxx" ALIGN=JUSTIFY STYLE="margin-top: 0.2cm; margin-bottom: 0.2cm; font-style: normal">
Les systèmes de gestion de contenu
</P>
<P>
<SPAN STYLE="font-style: normal">Les feuilles de style en cascade
(css) </SPAN><A HREF="http://fr.selfhtml.org/css/"><SPAN STYLE="font-style: normal">http://fr.selfhtml.org/css/</SPAN></A></P>
<P>
<SPAN STYLE="font-style: normal">Tutoriel CSS
</SPAN><A HREF="http://fr.html.net/tutorials/css/"><SPAN STYLE="font-style: normal">http://fr.html.net/tutorials/css/</SPAN></A></P>
<P>
<SPAN STYLE="font-style: normal">Liste des propriétés CSS
</SPAN><A HREF="http://www.siteduzero.com/tutoriel-3-13639-liste-des-proprietes-css.html"><SPAN STYLE="font-style: normal">http://www.siteduzero.com/tutoriel-3-13639-liste-des-proprietes-css.html</SPAN></A><SPAN STYLE="font-style: normal">
</SPAN>
</P>
<P>
<SPAN STYLE="font-style: normal">Faits marquants css (en anglais)
</SPAN><A HREF="http://webilus.fr/illustration/histoire-et-faits-marquants-sur-les-css"><SPAN STYLE="font-style: normal">http://webilus.fr/illustration/histoire-et-faits-marquants-sur-les-css</SPAN></A><SPAN STYLE="font-style: normal">
</SPAN>
</P>
<P>
<SPAN STYLE="font-style: normal">Interview sur la création des css
et le W3C
</SPAN><A HREF="http://www.gralon.net/articles/internet-et-webmaster/creation-site-internet/article-interview-de-bert-bos---histoire-et-evolutions-du-css-988.htm"><SPAN STYLE="font-style: normal">http://www.gralon.net/articles/internet-et-webmaster/creation-site-internet/article-interview-de-bert-bos---histoire-et-evolutions-du-css-988.htm</SPAN></A><SPAN STYLE="font-style: normal">
</SPAN>
</P>
<P>
<SPAN STYLE="font-style: normal">Site Web du W3C </SPAN><A HREF="http://www.w3.org/"><SPAN STYLE="font-style: normal">http://www.w3.org/</SPAN></A></P>
<P>
CSS zen garden : le même site à travers un certain nombre d'exemple de css <A HREF="http://www.csszengarden.com" target="_Blank">http://www.csszengarden.com</A>
</P>
</BODY>
</HTML>