Développement (X)HTML

Un article de Eric Bruyndonckx.

Sommaire 1 Introduction 2 Langages HTML, XHTML 2.1 Pourquoi séparer la présentation de la structure 3 Thèmes abordés 4 Voir aussi

Introduction

HTML vient de l'anglais HyperText Markup Language (langage de balisage hypertexte).

Nombre de webmaster, même professionnels, ne connaissent pourtant qu'une infime part de ce langage, leur pratique se limitant souvent à utiliser un logiciel d'édition web qui génére des documents HTML automatiquement. Cette limitation, est un réel frein au développement et à la conception de site web dans un avenir où le respect de normes rigoureuses sera de plus en plus la règle.

Langages HTML, XHTML

HTML a longtemps été la référence au niveau de la conception de page web. Aujourd'hui, XHTML tend à remplacer HTML. Il s'agit en fait d'une évolution de ce langage dont le X signifie Extensible.

XHTML est, comme vous le verrez, un langage aussi simple que l'était HTML et en reprend les grandes lignes en y mettant de l'ordre.

Si vous connaissiez le langage HTML, veillez à bien notez les différences subtiles entre ces 2 langages. En effet, certaines balises HTML sont devenues obsolètes avec HTML et la rédaction est devenue beaucoup plus stricte. Par exemple les balises doivent constamment être fermées, et doivent obligatoirement être rédigées en minuscules.

Pourquoi utiliser XHTML ? Tout simplement car ce langage est parfaitement compatible avec tous les navigateurs actuels et se prête parfaitement à l'utilisation de CSS (Cascading Style Sheet).

XHTML permet de structurer parfaitement les données. Il en résulte un code extrêmement clair afin de définir indépendamment la présentation. Par cela, comprenez un document pour la structure ce votre contenu (XHTML), un deuxième pour l'apparence (CSS).

Pourquoi séparer la présentation de la structure

7 points essentiels :

• La clarification du code XHTML : plus aucune indication sur le design de la page n'est présent dans le code. Il ne reste que les références à des styles définis dans une feuille (CSS) séparée.
• La possibilité d'intervenir sur la présentation sans avoir à modifier la structure du site.
• La possibilité d'homogénéiser un design sur un site complet (un ou plusieurs styles CSS pour tout un site).
• Un gain de temps pour le codage des fichiers XHTML.
• Cette clarification du code simplifie l'implémentation de code PHP ou Javascript et par extension : AJAX.
• La possibilité de modifier rapidement un design : de la couleur d'un lien en passant par la position d'un élément, la feuille de style modifiée va s'appliquer sur le site complet.
• La possibilité d'utiliser plusieurs feuilles de styles avec une même page HTML pour gérer notamment l'impression du document (certains éléments ne sont pas utiles à l'impression, comme un menu, une publicité, etc.) ou encore proposer au visiteurs plusieurs designs différents, ce qui permet d'adapter le site Internet aux personnes handicapées (positionnement, taille police, couleurs, etc.)
• L'optimisation du travail d'équipe : un designer peut travailler sur les feuilles de styles CSS pendant que le développeur va travailler sur le code de la page. Donc un meilleur partage du travail !

Thèmes abordés

• Structure d'une page XHTML
• Les balises
  • Titres et paragraphes
  • Listes à puces, listes numérotées, listes descriptives, texte préformaté
  • Mise en forme du texte, caractères spéciaux et tailles de caractères
  • Liens internes et externes
  • Images, images avec zones réactives
  • Tableaux
• Formulaires
  • Validation de formulaires
  • Login, mot de passe, intranet
• Les feuilles de styles CSS
• Les mises en page
• Frameworks
• Divers scripts
  • Roll-over cellules
  • Google Map sur votre site
  • Galleries de photos
  • Livre d'or
• CMS
  • Wordpress (ébauche)
• Astuces
• Gérer la compatibilité entre les différents navigateurs

Voir aussi

Site de référence : www.w3.org/TR/xhtml1