JRES 95, Chambéry

22-24 novembre 1995

Quelques évolutions récentes du World Wide Web

Vincent QUINT

INRIA Rhône-Alpes

[Next] [Previous] [First]

Quelques évolutions récentes du World Wide Web

Le World Wide Web Consortium (W3C)
Évolutions de HTML : HTML3
Feuilles de styles pour le Web : CSS
Conclusion

[Next] [Previous] [First]

Le World Wide Web Consortium

Missions du W3C:

Spécifier des standards et développer des techniques de base
Développer des logiciels de référence
Promouvoir et disséminer la technologie
Encourager l'industrie à développer des produits conformes aux standards

Partenaires :

MIT et INRIA
Membres industriels et académiques
Amérique : 50, Europe : 35, Asie : 8

[Next] [Previous] [First]

Activités du W3C

Sécurité : authentification et protection
Performances : réplication et caches
Nouvelles versions de HTTP et HTML
Présentation des documents : feuilles de style (CSS)
Internationalisation
Travail coopératif
Communications à faible débit et mobiles
etc.

[Next] [Previous] [First]

HTML3 : objectifs

Combler les lacunes de HTML2
Sur-ensemble de HTML2 avec compatibilité totale
Simple à produire (auteurs) et à utiliser («browsers»)
Extensible : sous-classes et liens vers d'autres formats
Indépendance des plates-formes : simple terminaux, braille, etc.
Représentation du contenu, pas de la forme graphique
Support pour les feuilles de style

[Next] [Previous] [First]

HTML3 : principales nouveautés

Tableaux
Figures
Sous-classes
Formules mathématiques
Bannières fixes

[Next] [Previous] [First]

Tableaux

Un modèle simple

Des lignes <TR> constituées de cellules <TH>, <TD>
Les cellules peuvent s'étendre dans les deux directions :attributs colspan et rowspan

Plusieurs usages

Représentation de tableaux
Mises en pages complexes

[Next] [Previous] [First]

Exemple de tableau

	average		other category
	height	weight	other category
males	1.9	0.003
females	1.7	0.002

<table border=1>
    <tr><th rowspan=2><th colspan=2>average
        <th rowspan=2>other<br>category
    <tr><th>height<th>weight
    <tr><th align=left>males<td>1.9<td>0.003
    <tr><th align=left>females<td>1.7<td>0.002 
</table>

[Next] [Previous] [First]

Figures

Une figure est une image accompagnée de

Légende <CAPTION> et crédit <CREDIT>
Surcharge <OVERLAY> : images superposées
Description textuelle structurée, avec liens
Zones sensibles gérées directement par le client

Texte coulé le long de la figure.

[Next] [Previous] [First]

Un exemple de figure

<FIG SRC="mainmenu.gif">
 <H1>Services proposes</H1>
 <P>Choisissez entre :
 <UL>
   <LI><A HREF="cont.html" SHAPE="rect 30,200,60,16"> Contacts</A>
   <LI><A HREF="new.html" SHAPE="rect 160,200,30,16"> Nouveautes</A>
   <LI><A HREF="pro.html" SHAPE="rect 200,200,50,16"> Produits</A>
 </UL>
</FIG>

[Next] [Previous] [First]

Sous-classes

Les éléments HTML peuvent être spécialisés avec l'attribut CLASS

<DIV CLASS=Chapitre> <DIV CLASS=Section>

<DIV CLASS=Annexe>

L'attribut CLASS est utilisés par les feuilles de style

[Next] [Previous] [First]

Autres nouveautés

Liens typés

<LINK REL=xx>

xx : ToC, Index, Glossary, Up, Next, Previous, Help, Home...

Identification de tout élément

<XX ID=yy>

Remplace l'attribut NAME. Identifie la cible d'un lien

Structuration hiérarchique

<DIV CLASS=xx>

Permet de diviser un document en parties imbriquées

Langue

<XX LANG=fr>

Utile pour la coupure des mots, la ponctuation, etc.

[Next] [Previous] [First]

Cascading Style Sheets (CSS)

Objectifs

Permettre aux auteurs et éditeurs de contrôler l'aspect graphique de leurs documents
Permettre aux lecteurs d'influer sur la présentation
Préserver l'approche structurale de HTML
Maintenir l'indépendance vis à vis des plates-formes

[Next] [Previous] [First]

Plusieurs niveaux

Le style peut être spécifié à plusieurs niveaux

Un ensemble de documents

L'entête <HEAD> des documents fait référence par un <LINK> à une feuille de style partagée

Les éléments de même type dans un document

L'entête <HEAD> du document contient des éléments <STYLE>

Une classe d'éléments d'un document

<STYLE> dans l'entête et attribut CLASS dans les éléments

Un élément particulier

L'élément contient un attribut STYLE.

[Next] [Previous] [First]

Exemple de style

<HEAD>
   <TITLE>Titre du document</TITLE>
   <LINK REL=StyleSheet HREF="housestyle.css">
   <STYLE NOTATION=CSS>
     H1 { color: blue }
     H1.vert { color: green }
   </STYLE>
</HEAD>
<BODY>
<H1 STYLE="color: red">Titre rouge</H1>
<H1 CLASS=vert>Titre vert</H1>
<H1>Titre bleu</H1>
</BODY>

[Next] [Previous] [First]

Propriétés de style

Géométrie

Décalages, largeur, marges

Polices

Famille, taille, graisse, style, interligne

Couleurs

Couleur des caractères, du fond, image de fond

Texte

Interlettrage, souligné, encadré, indice, exposant, capitales

[Next] [Previous] [First]

Mise en oeuvre de HTML3 et CSS

Arena

un «browser» et un éditeur de feuilles de style développé par le W3C

Tamaya

un éditeur HTML3 supportant CSS développé à l'Inria

[Next] [Previous] [First]

Tamaya

Édition WYSIWYG

L'utilisateur n'a pas besoin de connaître HTML

Manipulation des liens

Établissement des liens par simple clic, couper, copier, coller

Contrôle structural et syntaxique

L'éditeur garantit que les documents produits sont corrects

Édition multi-vues

Vue intégrale, vue des ancres, vue des titres, vue de la structure

[Next] [Previous] [First]

Tamaya (suite)

Feuilles de style prédéfinies

Pour l'écran, pour l'impression, pour un exposé, etc.

Accès au Web

Tamaya peut être utilisé en même temps comme un client

Publication

Écriture à distance, vérification de la cohérence des liens

[Previous] [First]

Conclusion

HTML3

HTML évolue vers une structuration plus rigoureuse des documents,

tout en restant raisonnablement simple.

Feuilles de style

Contrôle de la présentation par un moyen bien adapté.

Outils

Des outils spécifiques sont nécessaires pour produire des pages Web correctes qui utilisent les nouvelles possibilités.