Les langages des standards du Web

par lena · 7 septembre 2009

Les standards du web regroupe un ensemble de langages publics pour diverses utilisations et fonctionnalités, (x)HTML, CSS, DOM, RDF, PNG, Javascript… nous allons au cours de ce tutoriel en dresser le tableau et les descriptions.

HTML

HTML (Hypertext Markup Language) est un langage à balises qui permet de structurer sémantiquement le contenu d’une page Web. L’ensemble des balises qu’il contient permet de définir un ensemble d’éléments de page, tels que des titres (h2, h3…) des paragraphes (p), des éléments de listes (ul, ol, li, dl, dd, dt…) ou encore des images (img, object) ou … grand luxe… des éléments multimédia (object).

Le langage est arrivé aujourd’hui à la version 4.01 et l’évolution préconise plus une orientation vers le xHTML. En savoir plus…

Dans un premier temps, il est important de prendre connaissance de l’ensemble des balises disponibles afin de ne pas réinventer l’eau chaude sous forme d’une foison de balises <div> ou <span> toutes autant inutiles que verbeuses.

Vous pouvez également parcourir une liste et une présentation de HTML sur ce tutoriel. Certes un peu trop complet et quasi exhaustif, l’ouvrage de C Musciano et B Kenedy, HTML & xHTML reste un incontournable.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Document sans nom</title>
  </head>
  <body>
  </body>
</html>

XHTML

xHTML est arrivé pour continuer la route ouverte par le HTML et lui apporter des compléments dans ses carences, extensibiliser des balises, ainsi que pour renforcer sa syntaxe d’écriture. En savoir plus sur le xHTML 1.0 et en savoir plus sur le xHTML 1.1.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
  </head>
  <body>
  </body>
</html>

XML

XML (eXtensible Markup Language) est un méta-langage de structuration qui permet de créer des arborescences complexes. Ce langage permet l’utilisation de name space, ce qui étend encore plus les possibilités qu’il offre. Notament avec des langages comme MathML, SMIL, XSL, SVG….

Vous trouverez plétore d’ouvrages sur le vaste sujet que représente XML et n’aurez que l’embarras du choix pour vous décider sur un livre d’introduction.

Le livre formation à XML de Michael J Young, reste un judicieux compromis entre découverte, utilisation pratique et ouverture vers des schémas plus complexes. Vous pourrez également trouver une introduction simplifiée sur ce tutoriel de Puce et Média.

<?xml version="1.0" encoding="utf-8" ?>
<pubs>
    <pub>
        <accroche>Visitez les grands canyons.</accroche>
        <destination>Les grands Canyons</destination>
        <url>https://www.puce-et-media.com/creanum/XML_flux/GC.htm</url>
        <prix>1299 €</prix>
        <full href="file://canyon.jpg"></full>
        <bando>canyon_band.jpg</bando>
        <vignette>canyon_vign.jpg</vignette>
    </pub>
</pubs>

CSS

Complément indissociable du HTML ou du xHTML, les CSS (Cascade Style Sheet), ou feuilles de styles en cascades, permettent d’apporter la mise en forme et l’accastillage visuel à du contenu structuré.

Elles sont apparues pour la première fois, au début des années 90, sous forme plus ou moins propriétaires et se sont vues recommandées sous CSS1 par le W3C en 96.

Depuis ce moment-là les navigateurs ont peinés afin d’intégrer l’ensemble des recommandations. Aujourd’hui, la quasi totalité des principaux navigateurs intégrent les majeures parties de CSS2.

Il existe une multitude d’ouvrages sur les CSS, certains couvrant des aspects très techniques, d’autres des études de cas pratiques, certains sont de très bons dictionnaires, d’autres présentent des hacks et astuces… bref, la littérature est assez importante sur le sujet. Le CSS 2 de Raphaël Goetter reste un excellent choix, en plus en français dans le texte… que vouloir de plus… :). Vous trouverez également un tutoriel simplifié sur les CSS et leur utilisation sur ce tutoriel.

Voici quelques liens :

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #666666;
  width: 900px;
}
#page {
  width: 100%;
}

XSL – XSLT

Les feuilles de style XSL (eXtensible Stylesheet Language), sont destinées à mettre en forme les documents XML. Ces feuilles de styles sont des modèles, qui permettent au travers de l’utilisation de feuilles de styles CSS, de restituer le document sous tout aspect, HTML, Text, WML….

Le lien suivant pointe vers un document XML doté d’une XSL : cliquez sur le lien, puis vérifiez le code source. Si le document n’est pas doté d’une XSL, le navigateur affiche alors l’arborescence du document comme vous pouvez le constater ici.

Le rendu est directement interprété par le navigateur. De ce fait, seuls les navigateurs modernes (à partir de 6.0) peuvent rendre un tel résultat. Si votre parc internaute peut être amené à utiliser des navigateurs plus anciens, ou avoir besoin de visualiser le contenu sur d’autres types de périphériques, téléphone, lecteur d’écran, etc… il est alors préférable d’envisager une solution serveur basée sur XSL-T, pour XSL Transformation.

L’interprétation se fait donc côté serveur et le code renvoyé est directement interprétable par le périphérique.

Il existe peu d’ouvrages qui soient référence sur le sujet, vous trouverez néanmoins l’excellent Comprendre XSLT de P. Rigaux et B. Amann, please en français dans le texte, et également deux articles parus chez Créanum, Dreamweaver avec XML, XSL et CSS et XSL dans le code.

<?xml version="1.0" encoding="iso-8859-1"?><!-- DWXMLSource="datas.xml" -->
<!DOCTYPE xsl:stylesheet  [
  <!ENTITY nbsp   "&#160;">
    ... 
]>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" encoding="iso-8859-1" doctype-public="-//W3C//DTD 
    XHTML 1.0 Transitional//EN" 
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
    <xsl:template match="/">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <title>Document sans nom</title>
                <link href="../../medias/Styles/pageVignettes.css" rel="stylesheet" type="text/css" />
            </head>
            <body>
                <xsl:for-each select="catalogue/magasine">
                    <p><a href="{lien}" class="texte">En savoir plus... </a></p>
                </xsl:for-each>  
            </body>
        </html>
    </xsl:template> 
</xsl:stylesheet>

PNG

Le PNG (Portable Network Graphics) est apparu dans le but de remplacer le Gif et d’apporter une alternative au format Tiff.

C’est un format graphique de compression sans perte, permettant la transparence de plusieurs couleurs, soit par index (la couleur est transparente ou opaque), soit par couche alpha, (la couleur peut posséder plusieurs degrés d’opacité)…

Certains navigateurs, en fonction de leur version, peuvent ne pas afficher correctement cette transparence. Internet explorer a connu quelques difficultés (en fonction des versions) pour gérer correctement ces transparences. Il y a eu à ce sujet une pétition demandant à Microsoft la prise en compte correcte de ce format. Mais cela est chose faite depuis la sortie de Internet Explorer 7.

L’ouvrage PNG the definitive guide de Roelofs, en anglais youps, reste une bonne référence sur le sujet.

Rendu et aperçu

L’image ci-dessus est au format PNG. Elle possède un style CSS associé qui lui attribut un fond de couleur bleu, visible au travers de la transparence du PNG.

Vous pouvez donc constater, en fonction du navigateur que vous utilisez, la bonne ou mauvaise représentation de celle-ci. Si toutefois vous obtenez un aperçu particulier, n’hésitez pas à nous faire parvenir une capture écran, en n’oubliant pas de mentionner le type et la version du navigateur ainsi que le système d’exploitation.

Quelques liens :

RDF

Le RDF (Resource Description Framework) défini par le W3C, permet de structurer et d’échanger les métadonnées d’un document au format XML (déjà utilisé par exemple par Acrobat avec le XMP. Voir à ce sujet le site de XML.com ). Une utilisation assez répandue de ces spécifications reste popularisée par les flux RSS.

L’idée de pouvoir ainsi permettre à des agents de directement communiquer avec les métadonnées contenues dans les documents, permet de conforter l’idée d’un web sémantique issue des travaux engagés dès 1994 par Tim Berners Lee.

Parmis les livres sur le RDF, Creating the Semantic Web with RDF de J Heljm est une bonne référence pratique et efficace pour une entrée en matière de web sémantique.

Quelques liens :

<rdf:RDF
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:dc="http://purl.org/metadata/dublin_core#"
>
    <rdf:Description about="http://www.dlib.org" 
      dc:Title="D-Lib Program - Research in Digital Libraries"
      dc:Description="The D-Lib program is ..."
      dc:Publisher="Corporation For National Research Initiatives"
      dc:Date="1995-01-07"
    />
</rdf:RDF>

DOM

Le DOM (Document Object Model) est une recommandation du W3C qui permet de décrire la structuration d’un document arboré style HTML ou XML. Cette structuration basé sur un modèle orienté objet, permet d’accéder à tout élément du document qui sera identifié par un attribut id= » » au travers de la méthode getElementById();.

Le Dom Scripting consiste à programmer l’affichage du document et son interactivité depuis ECMAScript.

Il y a quelques années cette technique était apparue sous le nom de DHTML. La différence avec cette époque, vient justement du DOM. Alors il fallait s’adresser à deux DOM différents, celui de Netscape qui faisait appel à document.layers[« id »] et celui de Internet Explorer qui lui se référait à document.all[« id »].

Le livre DOM Scripting de D. Shea et J. Keith apporte une présentation du DOM Scripting qui permet après une rapide description de ECMAScript de comprendre les mécaniques de cette technique et du Javascript non obstructive (Javascript Discret).

D’autres sources d’informations :

HTTP

Le protocole HTTP (Hypertext Transfer Protocol) reste le coeur de la puissance du web et devient de plus en plus une technologie courtisée par les applications qui utilisent AJAX.

Le livre HTTP Programming Recipes for Java Bots bien qu’orienté sur Java, permet de mieux comprendre la communication entre le serveur et le navigateur. Un petit tour du côté de la définition du dictionnaire en ligne Wikipédia sur les standards du Web.

GET /appel.html HTTP/1.0  
Host: adresse_ip.com  
Referer: http://www.adresse_ip.com/  
User-Agent: CERN-LineMode/2.15 libwww/2.17b3

Les langages des standards du Web

HTML

XHTML

XML

CSS

Voici quelques liens :

XSL – XSLT

PNG

Rendu et aperçu

Quelques liens :

RDF

Quelques liens :

DOM

D’autres sources d’informations :

HTTP

Laisser un commentaire Annuler la réponse