HTML, XHTML, CSS (feuilles de style)

Dans ce chapitre on aura l'occasion d'apprendre quelques définitions, et d'explorer un peu les langages HTML, XHTML, CSS et SGML. Donc soyez attentif. Depuis que vous êtes lancés dans l'apprentissage des technologies Web, vous serez dans la galère. Croyez-moi, vous avez commis la plus grave erreur de votre vie, en osant s'approcher d'un sujet aussi épineux. Dorénavant vous n'aurez plus droit à jouer ni à dormir

• HTML (HyperText Markup Language)

• XHTML (Extensible HyperText Markup Language)

• Historique des langages : SGML, HTML, XML et XHTML

• CSS (Cascading Style Sheet) ou feuilles de style en cascade

HTML (HyperText Markup Language)

Le langage utilisé pour créer des sites web est le HTML : HyperText Markup Language en français langage de balisage d'hypertexte. Le langage HTML est un langage dérivé du langage de marquage généralisé SGML (Standard Generalized Markup Language) car il en emprunte la syntaxe.

Le HTML permet de structurer du texte (l'organiser sous forme de : paragraphes, titres et sous-titres, citations, listes à puces etc.), faire des liens, insérer des images et des tableaux, inclure du son et des formulaires etc. Généralement ce langage ne s'utilise pas en solo mais on le combine avec d'autres langages pour obtenir des sites plus performants comme :

• les CSS qui permettent de spécifier l'apparence et le rendu visuel du site : les alignements, les bordures, la couleur et la taille des polices, les marges, couleurs et images de fond etc. ;
• le PHP pour créer un forum, un livre d'or, compteur de visiteurs, newsletter etc. ;
• JavaScript pour gérer les formulaires (collecter les données tapées par le visiteur pour faire un traitement), la gestion des cookies, faire des effets dynamiques (par exemple un effet rollover : si vous passez la souris au-dessus d'une image elle se modifie) etc.

XHTML (Extensible HyperText Markup Language : successeur du HTML)

Le XHTML est un langage de balisage qui constitue le successeur de HTML. Le XHTML se base sur la syntaxe définie par XML, plus récente et plus simple que la syntaxe définie par SGML sur laquelle se base HTML. Ce qui fait du HTML un langage obsolète mais en fin du compte ces deux langages se rapprochent beaucoup en règles d'écriture et permettent de remplir la même mission : créer des pages web.

Au cours de nos prochains tutos on va s'intéresser seulement au langage XHTML car c'est lui le plus récent et le plus populaire actuellement Mais souvenez-vous toujours que le XHTML au fond de lui n'est que la reformulation du HTML selon la syntaxe du XML, donc il s'agit seulement d'une modification de la syntaxe et non pas de fonctionnalités.

Le X signifie eXtensible qui fait référence au premier mot du XML : Extensible Markup Language et puis le reste (HTML) vous le connaissez.

Historique des langages : SGML, HTML, XML et XHTML

Pour bien comprendre la relation existant entre les langages de balisages : SGML, XML, HTML, XHTML, il faut se référer à l'histoire :
En 1986, le SGML (Standard Generalized Markup Language) a vu le jour. Il était caractérisé par une grande complexité. En fait sa spécification comprenait plus de 1200 pages ce qui l'a rendu inaccessible à tout le publique et par voie de conséquence il n'a pas connu beaucoup de succès

Les deux langages HTML et XML se sont découlés du langage SGML, mais avec peu de différences :

• le HTML : Il s'est inspiré énormément de sa syntaxe : la possibilité de taper les noms de balises et attributs en minuscule ou majuscule, certaines balises de fermeture ne sont pas obligatoires etc. Les balises du HTML et du SGML sont prédéfinies donc on a pas la possibilité d'étendre le balisage en inventant d'autres tags.
• le XML : Il garde les aspects positifs du SGML et met à la poubelle tout ce qui est compliqué, on peut dire que le XML est un SGML-LIGHT ou un SGML simplifié ou abrégé, un SGML qui serait à la portée des gens, en XML c'est vous qui invente vos propres balises c'est pourquoi on l'appelle Extensible Markup Language (langage de marquage extensible) car il peut être étendu en créant ses propres balises. En plus la syntaxe xml est plus stricte car dorénavant toutes les balises doivent être fermées, bien imbriquées, les noms de balises et attributs doivent être tapés en minuscule etc. La permissivité qui caractérisait le html et le sgml ne doit plus figurer dans le xml.

Le XHTML est une application du xml ce qui fait que le xhtml apporte au html les deux caractéristiques majeures suivantes :

• des règles de syntaxe plus rigoureuses ;
• l'extensibilité : le xhtml propose trois modules (DTD : doctype) chacun d'entre eux possède ses propres balises et attributs cependant vous pouvez créer votre propre DTD en y mettant vos propres balises et attributs ou encore modifier les dtd proposés par le W3C (World Wide Web Consortium). Autrement dit, il est possible de remplacer les dtd présents ou d'en rajouter d'autres balises c'est ça ce qu'on appelle l'extensibilité : la capacité d'étendre quelque chose. Même s'il est possible de créer un nouveau balisage, il est fortement recommandé de se servir des modules préconisés par le W3C.

CSS (Cascading Style Sheet) ou feuilles de style

CSS est l'abréviation du Cascading Style Sheet, on l'appelle en français : les feuilles de style en cascade, grâce a ce langage on détermine l'aspect et la présentation de nos pages web, par exemple le type de la police (Arial, Verdana...), la couleur de la police, la taille de la police, la couleur ou l'image de l'arrière-plan, fixer les marges, ajouter des bordures, positionner des éléments dans la page.

Grosso modo le XHTML sert à écrire le contenu de nos sites à savoir les titres, les paragraphes, les liens, les images, les tableaux etc. les CSS servent à donner du style et une bonne représentation au contenu des pages Web.

A vrai dire, je n'ai pas vidé tout mon sac. Mais rassurez-vous que vous allez parfaire vos connaissances à propos de ce langages au fil des chapitres Tuto suivant : Comment créer une page Web ? Editeurs ASCII et éditeurs WYSIWYG.