L'invention du Web : HTML et son évolution

O. À propos du cours et de ce document

http://www.maison-des-sciences.org:8080/ecm/eo/2004/rdv1074119
Cours de l'École ouverte de l'Internet http://www.ecole.eu.org/
Mardi 23 mars 2004 18h30 - Espace Mendès France, Poitiers
http://www.maison-des-sciences.org/emf
Jean-François Billaud - mailto:billaud@interpc.fr
http://www.interpc.fr/mapage/billaud/

1. HTML ?

http://www.w3.org/People/Berners-Lee/
HyperText Markup Language
langage = grammaire, syntaxe
balises
hypertxte
W3C = World Wide Web Consortium
(MIT, CERN, INRIA, DARPA, CE, Keio University of Japan...)
http://www.w3.org/Consortium/
Les documentations en français :
http://www.w3.org/2003/03/Translations/byLanguage?language=fr

2. Avant le Web

mail
ftp = file transfer protocol
Au mieux une liste de fichiers par site, pas d'annuaire
gopher http://gopher.quux.org:70/Software/Gopher/servers

3. L'idée du Web

Passer d'un serveur à l'autre sans s'en rendre compte
(en opposition à ftp en mode console)
Liens
Notion de protocole http
Serveur et client http://www.interpc.fr/mapage/billaud/html-css.htm
Pages statiques et pages dynamiques
Côté serveur : CGI, PHP+MySQL
Côté client : java, javascript, flash...

4. Un oeil sur l'historique

http://www.interpc.fr/mapage/billaud/html-css.htm

4.1. La mise en oeuvre précède les standards

Microsoft contre Netscape
Chacun ses extensions, des standards de fait
Les normes suivent de loin

4.2. La normalisation précède la mise en oeuvre

HTML 4
CSS
XHTML 1.0
XHTML 1.1

5. L'évolution

5.1. HTML 1.0 draft -> HTML 3.2

Le contenu et sa mise en forme sont mélangés
peu de « méta-informations »
HTML 2.0 http://www.ietf.org/rfc/rfc1866.txt
HTML 3.2 http://www.w3.org/TR/REC-html32

5.2. CSS1

le seul médium d'affichage prévu est l'écran, mais les polices couleurs
etc sont définis dans des styles internes ou externes
style interne : tout dans un seul fichier
style externe : un même style peut servir à plusieurs pages HTML
Un exemple de typographie : http://www.interpc.fr/mapage/billaud/chire-m.htm http://www.interpc.fr/mapage/billaud/chire-m.css Référence : http://www.yoyodesign.org/doc/w3c/css1/index.html

5.3. HTML 4.0

Une transition vers une séparation complète
Pourquoi les cadres (frames) sont à éviter
http://www.la-grange.net/w3c/html4.01/cover.html

5.4. CSS 2

Une seule page HTML en entrée, plusieurs médias en sortie
Positionnement
Des tutoriels : http://www.openweb.eu.org/
Référence : http://www.yoyodesign.org/doc/w3c/css2/cover.html
Un exemple : http://www.csszengarden.com

5.5. XHTML 1.0 et 1.1

XML ? http://www.w3.org/XML/1999/XML-in-10-points.fr.html
http://www.la-grange.net/w3c/xhtml1/
Amélioration de la structuration du document :
traitement automatisé ...
Modularisation : module de base + extensions
SMIL
MATHML
SVG
De la nécessité de HTML et CSS valides
Validateur HTML http://validator.w3.org/
Validateur CSS http://jigsaw.w3.org/css-validator/
Les validateurs du W3C http://www.w3.org/QA/Tools/#validators
Tidy (validateur correcteur) http://tidy.sourceforge.net/

5.6. Vers le web sémantique

Ajouter des information permettant d'améliorer le traitement du sens
évolution description « physique » vers description « sémantique »
Exemple
<i> (italique)
-> <em> (emphasis)
-> <cite> (citation)
-> <span class="citation2"> (xhtml+css)
-> <breve-citation-en-latin> (xml)
RDF

6. Les outils

6.1. Du côté serveur

Mon premier serveur whttpd sous Windows 3.11 (~1994)
Logiciels libres, logiciels propriétaires
Les systèmes d'exploitation
apache (diverses plateformes) http://httpd.apache.org/
zope (serveur + site) http://www.zope.org/
IIS (serveur) http://www.microsoft.com/france/
PHP (scripts côté serveur) http://www.php.net
Mysql (base de données) http://www.mysql.com/
Postgresql (base de données) http://www.postgresql.org/
SPIP (publication) http://www.spip.net/
...
Whats that site running? http://uptime.netcraft.com/up/graph
http://uptime.netcraft.com/up/graph?site=lns-p19-7-81-56-162-129.adsl.proxad.net

6.2. Clients

Internet Explorer http://www.microsoft.com/france/
Netscape http://www.netscape.com/ http://www.netscape.fr/
(racheté par AOL, développement terminé)
Mozilla http://www.mozilla.org/
Amaya http://www.w3.org/Amaya/
OOo http://www.openoffice.org/
Opéra http://www.opera.com/
...

6.3. Composeurs

Éditeurs de texte simples (genre bloc-notes)
Éditeurs à coloration syntaxique
Éditeurs de feuilles de style
Frontpage, Frontpage Express http://www.microsoft.com/france/
Dreamweather http://www.macromedia.com/
Mozilla http://www.mozilla.org
Amaya http://www.w3.org/Amaya/
nvu http://www.nvu.com/

7 La semaine prochaine

http://www.maison-des-sciences.org/mds/ecm/eo/2004/rdv1074126
Cours Ecole Ouverte 2004 - 7. Qu'est-ce qu'un programme informatique ?
Mardi 30 mars 2004 à 18h30. Salle Confluence. Espace Mendès France, Poitiers

JFB, le 23 mars 2004

retour