Dans le domaine des technologies internet, un langage à balises (markup langage) permet :
Une balise permet de délimiter un ensemble de caractères afin de le localiser dans une page et/ou de lui appliquer un traitement. Par exemple, la balise <strong> permet de mettre une portion de texte en évidence en HTML.
<strong>Texte en exergue avec la balise strong</strong>
Les langages à balises abordés dans ce document (XML, XHTML et HTML) sont tous issus du SGML (Standard Generalized Markup Langage), premier langage normalisé permettant la présentation de données dans des documents structurés par un langage à balises.
Les langages XHTML ou HTML sont souvent associé au langage CSS qui permet de mettre en forme (police, couleurs, etc …) le contenu qu'ils structurent.
XML signifie eXtensible Markup Language. C'est un langage à balises permettant la structuration des données.
Il est couramment employé, par exemple :
Exemple de fichier XML permettant de stocker une liste de postes de travail :
<?xml version="1.0" encoding="UTF-8"?>
<listeposte>
<poste fonction="hote">
<adresseIP>172.17.1.3</adresseIP>
<salle>T102<salle/>
</poste>
<poste fonction="hote">
<adresseIP>172.18.1.1</adresseIP>
<salle>T201<salle/>
</poste>
</listeposte>
Un fichier XML (extension .xml) commence par un prologue :
<?xml version="1.0" encoding="UTF-8"?>
Cette ligne permet de renseigner la version d'XML et la méthode d'encodage des caractères (iso-8859-1 ou UTF-8).
Les informations XML sont structurées sous forme d'un arbre d'éléments. L'élément racine est le premier après le prologue (<listeposte> dans le cas précédent) et englobe tous les autres éléments. Il doit être clôturé à la fin du document (</listeposte>).
Les éléments peuvent ensuite contenir du texte encadré entre deux balises ( <adresseIP>172.17.1.3</adresseIP>) ou d'autres éléments (cas de la balise <poste>).
Toute balise ouverte doit être fermée, dans l'ordre d'apparition. Tout élément vide sera noté de la manière suivante : <nombalise />
Chaque élément peut avoir un attribut (unique) dans sa balise d'ouverture, composé d'un nom et d'une valeur (<poste fonction="hote">).
Un schéma XML (XML Schema) permet de définir la structure d'un fichier XML ainsi que le type des données qu'il contient. Ce schéma permet de valider un fichier XML.
Schéma XML correspondant à l'exemple précédent :
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<xsd:element name="listeposte">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="poste" maxOccurs="unbounded">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="addresseip" type="xsd:string"/>
<xsd:element name="salle" type="xsd:string"/>
</xsd:sequence>
<xsd:attribute name="fonction" type="xsd:string"/>
</xsd:complexType>
</xsd:element>
</xsd:sequence>
</xsd:complexType>
</xsd:element>
</xsd:schema>
L'élément racine est le tag <xsd:schema...>. L'attribut xmlns permet de spécifier l'espace de nommage (namespace) afin de qualifier de manière unique un élément ou un attribut (element, name, …). Cette espace de nommage est défini par une URI ( http://www.w3.org/2001/XMLSchema dans notre cas).
Les éléments qualifiés de complexType comportent des attributs ou d'autres éléments (comme poste dans l'exemple précédent). Un élément peut posséder un attribut (comme fonction pour l'élément poste).
Certains outils permettent de construire graphiquement le schéma XML et assure la génération du code associé dans un fichier (extension .xsd).
Exemple de graphique généré avec un plugin du logiciel NetBeans :
L'objectif du HTML (HyperText Markup Langage) était de créer un langage permettant d'afficher des pages d'informations lisibles sur n'importe quel système d'exploitation et reliées entre elles par des liens hypertextes.
Le cadre d'utilisation des langages HTML ou XHTML est le suivant :
L'utilisateur, via le client HTTP, demande une page localisée par une URL (phase 1). Le serveur HTTP renvoie la page demandée (phase 2). La page (contenant de l'HTML, du XHTML ou du JavaScript) est ensuite interprétée par le client HTTP (phase3).
La version 4 de l'HTML a été publiée en 1999 par le World Wide Web Consortium (W3C – www.w3.org).
Une révision du langage a vu le jour avec la version 1 d'XHTML (X pour eXtensible) : XHTML, s'appuyant sur XML, devenait un langage beaucoup moins permissif que l'HTML mais en reprenait tous les attributs (XHTML est par exemple sensible à la casse).
Le XHTML2 ne verra pas le jour à cause d'un « schisme » lors de la création d'un groupe dissident appelé le WHATWG (Web Hypertexte Application Technology Working Group). Ce dernier, après un rapprochement avec le W3C, contribua a créer l'actuel HTML5, orienté RIA (Rich Internet Application).
Comme dit en introduction, l'XHTML permet de présenter une page web statique.
Le XHTML a une syntaxe beaucoup plus rigoureuse que l'HTML car adoptant les règles d'XML : Les balises doivent être écrites en minuscules et doivent être fermées. Si elles n'ont pas de contenu, elles s'écrivent <nombalise /> (par exemple <br />).
Les attributs des balises doivent être écrits entre guillemets simples ou doubles (<img src="logo.png" />)
Exemple de page écrire en XHTML1.1 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> ①
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> ②
<head> ③
<title>Site internet BTS IRIST</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body> ④
<h1>Bienvenue sur le site interne du BTS IRIST</h1> ⑤
<p>Pour accéder au site de la <strong>Cité Scolaire</strong>,
<em>cliquer sur le lien suivant :</em> ⑥
<a href="http://www.gcrampe.fr">Site Cité Scolaire</a></p> ⑦
<h2>Vous trouverez ici des ressources sur</h2>
<ul> ⑧
<li>La modélisation UML</li>
<li>La programmation Internet</li>
<li>Les réseaux locaux industriels</li>
</ul>
</body> ⑨
</html> ⑩
Détail de la page :
① Le « doctype » est la première instruction d'un fichier HTML / XHTML qui permet de spécifier au navigateur dans quel langage est codé la page ainsi que, dans notre cas, la DTD (Document Type Definition) utilisée. Une DTD renferme les règles de syntaxe à respecter.
② <html> est le premier tag d'un fichier XHTML / HTML. Il permet de spécifier l'uri du namespace (xmlns) d'XHTML1.1 (le namespace permet de spécifier le nom des balises) ainsi que la langue.
③ <head> permet de définir le titre de la page et d'indiquer que le contenu sera de l'HTML encodé selon la norme UTF-8 (prise en compte des accents et caractères spéciaux).
④ <body> est la balise annonçant le corps de la page.
⑤ <h1> permet de mettre en forme le texte comme étant un titre de niveau 1.
⑥ <em> et <strong> permettent de mettre respectivement le texte en emphase ou de le renforcer.
⑦ <a> permet de créer un hyperlien.
⑧ <ul> permet de créer une liste à puces.
⑨ </body> permet de fermer le corps de la page.
⑩ </html> permet de fermer la page.
Rendu dans le navigateur :
HTML 5 a repris l'essentiel d'HTML 4.01 afin d'en assurer la rétro compatibilité. De nombreuses choses ont été également simplifiée comme la déclaration du doctype et du content type.
<!DOCTYPE html> <meta charset="utl-8">
Les principaux apports d'HTML5 se situent au niveau des médias riches et des RIA (Rich Internet Application). Quelques nouveautés sont listées ci-après.
Les canvas permettent de créer des images dynamiques. La balise <canvas> est couplée avec du code JavaScript et permet de dessiner dans un navigateur. Il est ainsi possible de dessiner des graphiques, de créer des images à la volée, de créer des applications sans avoir recours à un plugin.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="uncanvas" width="300" height="200"></canvas>
<script>
var canvas=document.getElementById('uncanvas');
var context=canvas.getContext('2d');
context.strokeRect(20,30,80,40);
</script>
</body>
</html>
Rendu dans le navigateur :
La balise <audio> permet de créer un lecteur afin d'écouter un fichier audio (ici avec l'attribut controls qui fournit la pause, l'ajustement du volume...).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<audio src="interview.mp3" controls>
</body>
</html>
Rendu dans le navigateur :
L'HTML 5 amène également de nouveaux éléments permettant de structurer une page comme <section> (regrouper du contenu par thème), <footer> (éléments de fin de section comme auteur, copyright), etc...
Les feuilles de styles (fichier d'extension .css) permettent, une fois appliquée à une page HTML ou XHTML, de mettre en forme cette dernière. La version actuelle est la CSS 3.
Les feuilles de style comprennent des règles de style, chacun constituée :
Toutes les règles de style sont donc constituées d'un couple [propriété : valeur;]
Exemple de modification du style de la balise <h3> :
Code originel :
<h3>Un titre de niveau 3</h3>
Rendu dans le navigateur :
Modification du style :
<style>
h3 {
font-style: italic;
background: #AAAAAA;
font-family: Arial, sans-serif;
}
</style>
Rendu dans le navigateur :
Les feuilles de style permettent de modifier les styles de toutes les balises, de positionner des éléments dans la page, etc...
Il faut éviter d'utiliser les styles en ligne (nouveau style appliqué directement dans la balise) car on perd en lisibilité et la maintenance des pages est plus complexe.
Il est possible de stocker les différents styles dans un fichier CSS qui sera utilisé par plusieurs pages.
La syntaxe HTML pour faire cela est la suivante :
<head> ... <link rel="stylesheet" href="fichierdestyle.css"> ... </head>
Dans l'exemple précédent, le fichier de style (.css) est stocké au même endroit que le fichier HTML auquel on l'applique.
Une classe permet d'appliquer à certaines balises un style particulier. Une classe se définit dans le fichier CSS comme suit (exemple pour une classe appelée « citation »).
.citation { font-style: italic; }
Elle s'applique ensuite comme suit :
<p class="citation">Un paragraphe de type citation</p>
Rendu dans le navigateur :
Dans l'exemple précédent, toutes les balises peuvent déclarer être de classe « citation ». Il existe la possibilité d'affecter cette classe uniquement à la balise <p> auquel cas la définition aurait du être p.citation { font-style: italic; }.
Contrairement à une classe, un identifiant ne s'applique qu'à un seul élément dans la page.
La définition d'un identifiant se fait comme suit (exemple pour un identifiant appelé «resultat»).
#resultat { color: gray; }
L'application d'un identifiant se fait comme suit :
<p id="resultat">le résultat est en couleur grise</p>
Rendu dans le navigateur :
Seul l'identifiant « resultat » (unique dans la page) est concerné par le style. L'avantage est que ce dernier peut être par la suite également manipulé par JavaScript (voir exposé Ajax / jQuery).