XP-Infos n° 7 – janvier 2010

Le X/HTML : initiation et indices de qualité du code

Sommaire

Article : Le X/HTML : initiation et indices de qualité du code.
Trucs et astuces : Validateurs de code et cours sur le HTML
Dernières réalisations en date

Meilleurs vœux pour l’année 2009 à tous les lecteurs de XP-Infos !

Article

Comme déjà indiqué dans XP-Infos n° 6, le X/HTML est le langage de structuration des pages Web. Ce mois-ci, nous l’étudions un peu plus en détail et découvrons à quoi il ressemble.

Le code X/HTML

Voici à quoi ressemble le code d’une page HTML très simple :

<!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=utf-8"> <title>Le XHTML</title> </head> <body> <h1>Je suis un titre de niveau 1</h1> <p>Je suis un paragraphe et je contiens <a href="http://www.xp-internet.com" title="Sites Internet de qualité, conformes aux normes Web.">un lien</a> et une image : <img src="../images/Coucher de soleil.jpg" width="200" height="150" alt="Coucher de soleil."></p> <div id="division1">Je suis une division.</div> </body> </html>

Et voici le résultat dans un navigateur :

Je suis un titre de niveau 1.

Je suis un paragraphe et je contiens un lien et une image : Coucher de soleil

Je suis une division.

Les balises HTML

Le X/HTML est composé de balises, qui décrivent la structure d’une page Web. Le navigateur lit la page, interprète le code X/HTML et affiche le contenu en fonction des différentes informations collectées. Ainsi, la balise <h1></h1> décrit un titre de niveau 1, la balise <p></p> décrit un paragraphe, la balise <body></body> délimite le corps du document (où se trouve le texte visible).

Certaines balises sont composées d’un élément ouvrant (par exemple, <h1>) et d’un élément fermant (par exemple, </h1>) qui se distingue du premier par la barre oblique qu’il comporte. D’autres balises ne comportent qu’un seul élément, comme la balise <img>.

Les balises peuvent aussi comprendre des attributs, lesquels ajoutent des propriétés à la balise qui les comporte. Certains attributs sont obligatoires, par exemple :

l’attribut src="../images/Coucher de soleil.jpg", qui indique l’emplacement de l’image à afficher dans la balise <img>.

D’autres sont facultatifs, par exemple :

l’attribut id="division1", qui identifie la division de manière unique ;
l’attribut title="Sites Internet de qualité, conformes aux normes Web.", qui offre un texte que liront les navigateurs textuels ou qui sera affiché sous forme d’info-bulle par certains navigateurs visuels.

HTML ou XHTML

Le XHTML (eXtensible Hypertext Markup Language) est une reformulation du HTML selon la syntaxe plus exigeante du XML : aucune fonctionnalité ne différencie le XHTML et le HTML. Simplement, le XHTML exige une forme plus stricte et plus précise que le HTML.

Ainsi, la balise <li> qui décrit un élément de liste peut ne pas être fermée par la balise fermante </li> en HTML, alors qu’elle est obligatoire en XHTML. Ainsi :

code HTML :
<ul> <li>Élément de liste <li>Élément de liste
le même code en XHTML :
<ul> <li>Élément de liste</li> <li>Élément de liste</li> </ul>

Des éléments comme <html>, <head> et <body> sont implicites en HTML et peuvent donc être omis, alors qu’ils sont obligatoires en XHTML. Par ailleurs, les balises sans éléments de fermeture doivent se terminer par /> en XHTML ; par exemple, <img src="../images/Coucher de soleil.jpg" />.

Indices de qualité du code

Bien évidemment, il faut une certaine expertise pour juger de la qualité du code d’une page X/HTML. Mais comme dans de nombreux autres domaines, le bon sens peut aussi venir à votre secours :

Un code bien rangé, bien présenté, qui ne part pas dans tous les sens et ne présente pas de grands blancs est déjà le signe d’un travail soigné. Si l’auteur va jusqu’à soigner l’apparence du code, il est probable que le résultat final est soigné lui aussi.
L’utilisation de tableaux (balise <table></table>) pour autre chose que des données tabulaires (par exemple, pour créer une colonne à gauche, un texte central et une colonne à droite), qui plus est lorsqu’ils sont imbriqués sur plusieurs niveaux, est le signe d’un style de code dépassé, difficile à lire et à faire évoluer – donc plus coûteux à modifier –, mais aussi inutilement long à interpréter et donc à afficher par le navigateur.
La validation d’une page Web par les outils de validation du W3C est aussi une bonne indication de qualité du code, bien que cela ne soit pas une vérité absolue en soi : tout d’abord parce qu’il ne s’agit que d’une validation de la syntaxe du code, ensuite parce que ces validateurs peuvent parfois aussi comporter des bugs.

Trucs et astuces

Validateurs de code du W3C :

Pour le X/HTML : http://validator.w3.org/
Pour les liens brisés : http://validator.w3.org/checklink

Cours de X/HTML en ligne :

Débuter en HTML : http://www.pdimension.net/w3c/RaggettIntroduc-tionHTML.htm
Les techniques plus avancées : http://charlesmpiche.com/Creezun habitatweb/RaggettHTMLavance.html
Apprenez à créer votre site web : http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web.html

Dernières réalisations en date

Qualidis : interface graphique

Phister Traductions : http://www.phister.fr

Teresa Intrieri : http://www.ti-traductions.com

Le mois prochain

Les CSS : initiation et utilité pour un site Web.

XP-Internet vous conseille et vous aide à utiliser au mieux votre site Web, pour qu’il devienne un véritable outil destiné à augmenter vos ventes, à améliorer la perception de vos produits ou de vos services auprès de vos clients, et à mieux vous faire connaître.

Témoignages clients

“Xavier nous a apport� un soutien et un conseil pr�cieux lors de la refonte de notre site et a toujours �t� disponible pour r�pondre � nos questions ou nous aider � r�soudre un probl�me informatique. De plus, pour une association de traducteurs et d'interpr�tes comme la n�tre, c'est un atout inappr�ciable de parler � quelqu'un qui conna�t nos m�tiers et leurs exigences sp�cifiques. Encore merci pour votre comp�tence et disponibilit� !”

AAE-ESIT

“Nous avons confi� � M. Xavier Pitel le r�le de webmaster de notre nouveau site Internet des adh�rents � la SFT. Le site contient une base de donn�es cons�quente qui nous permet de g�rer en back-office les inscriptions de nos membres, le renouvellement des adh�sions, l'inscription � des formations, des votes en ligne, etc. Il repr�sente aussi une plate-forme de communication sur l'�v�nementiel du monde traducteur et de la SFT en particulier.

M. Pitel s'est toujours acquitt� de sa mission avec pr�cision, rapidit� et transparence.”

Comit� Directeur 2009 de la Soci�t� Fran�aise des Traducteurs

“Travail pro et consciencieux, large spectre de comp�tences (graphisme, d�veloppement...) et en plus sympathique !”

La Face nord du net

Plus de témoignages...

Projets à l’affiche

Client : Qualidis

Intervention : Cr�ation graphique originale. Codage XHTML + CSS.

Client : Phister Traductions

Intervention : Cr�ation graphique originale. R�daction des contenus. Construction et codage de l'ensemble du site.

Client : Intrieri Teresa

Intervention : Cr�ation graphique originale. R�daction des contenus. Construction et codage de l'ensemble du site.

Client : Baticom SCI

Intervention : Am�liorations et ajouts sur une interface graphique tierce achet�e par le client. Codage XHTML + CSS d'un mod�le WordPress. Conseil en SEO.

Portfolio...