Page ouverte le 11/04/2006
XHTML? CSS?
XHTML (eXtensible HyperText Markup Language) est un langage balisé servant à l'écriture de pages du World Wide Web. XHTML, officialisé en 2000, est le successeur de HTML 4. C'est une reformulation de HTML 4 en XML 1.0
Consulter : http://www.la-grange.net/w3c/xhtml1/#xhtml
Concrètement, on se sert de :
- XHTML : pour écrire le contenu des pages web (le fond)
- CSS : pour la présentation de ce contenu (la forme)
Bonne utilisation du XHTML
Cet encadré pourrait être mis en conclusion car pour bien le comprendre, il faut savoir ce qu'est le XHTML, d'autant qu'on peut faire du XHTML sans en tenir compte.
Mais, volontairement je le mets en préambule, car cela permettra de mieux aborder certains chapitres en comprenant mieux certains principes et qu'ensuite, pour une utilisation optimum du XHTML, il faudra les avoir à l'esprit.
Lors de la conception de pages web en XHTML, quelques notions et principes de base a connaître et essayer de respecter au mieux (qui seront développés dans les chapitres suivants) :
- Le langage HTML définit la structure de la page à l'aide d'éléments (les balises).
- Le langage CSS apporte le rendu visuel.
- Les deux entités doivent être complémentaires mais dissociées : la première apporte le sens (la sémantique), la seconde ajoute du rendu d'affichage.
- Le XHTML évite l'usage des balises de présentation dont certaines sont dépréciées à mesure qu'évolue le XHTML. Il en va de même pour les attributs liés à la présentation.
Pour tout ce qui touche à la présentation, il est fortement recommandé de le traiter au niveau des feuilles de style CSS.
- XHTML recommande de respecter la sémantique. Pour cela, il faut savoir :
- W3C http://www.w3.org/TR/CSS21/sample.html propose un formatage par défaut des balises devant être pris en compte par les navigateurs avec quelques fois des interprétations un peu différentes de l'un à l'autre.
- Si aucun style n'a été spécifié sur les CSS, c'est ce rendu qui est pris en compte.
- Respecter la sémantique, c'est utiliser pour les titres les balises h1, h2…, pour les paragraphes les balises p, etc… et ne pas abuser des balises génériques div et span.
Exemple des div remplaçant des p car ces derniers provoquent un saut de ligne important (margin-top 1.12em par défaut), alors qu'il suffit de préciser dans un CSS la valeur qu'on veut que le navigateur exécute. Idem pour les autres balises dont on peut préciser l'effet recherché.
Car même si le rendu visuel est identique, il n'en va pas de même par exemple pour les moteurs de recherche qui analyserons mieux une page respectant la sémantique (les balises ayant un sens, il faut les utiliser pour ce qu'elles sont).
Nota : en imposant un style bien précis à des balises prédéfinies comme h1, h2, p, etc…, cela peut être un moyen pour harmoniser le rendu de ses pages web quelque soit le navigateur.
Voir ce lien : http://www.alsacreations.com/article/lire/585-Le-rendu-par-defaut-des-elements-HTML.html.
Terminologie de la conception web
Balise & élément
- Balise : Le mot balise se réfère au segment de code HTML délimité par des chevrons (< et >) et s'écrit (par exemple pour la balise html) comme
<html>.
La plupart des balises vont par paires, avec une « balise ouvrante » et une « balise fermante ». L'élément entouré par ces balises est donc décrit entre la balise ouvrante et la balise fermante. Le <html> que nous venons d'écrire est une balise ouvrante, et avec sa balise fermante </html> il délimite l'intégralité de l'élément HTML. Notez la barre oblique juste avant le nom de l'élément dans la balise fermante. C'est elle qui établit le statut de la balise en tant que fermante.
Un petit groupe d'éléments sont appelés « vides », comme <img src="image.jpg" alt="" /> (élément image) et <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />, qui est une « méta-balise » fréquemment utilisée. Ces balises sont des entités individuelles qui n'entourent donc aucun « contenu », bien qu'elles puissent « appeler » du vrai contenu dans une page. Les éléments vides comme <img src="image.jpg" alt="" /> comportent une barre oblique précédée d'un espace juste avant le chevron final, mais seulement pour les pages en XHTML ou en XML. Les pages HTML ne sont pas obligées d'avoir cet espace+barre oblique à la fin d'un élément vide.
- Élément : un élément est tout ce qui apparaît entre une paire de balises ouvrante et fermante. On se fiche du nombre de trucs à l'intérieur, ils font tous partie de l'élément. Ce qui veut dire qu'un ou plusieurs éléments peuvent être dans un autre élément. On appelle ce phénomène « imbrication », et l'élément imbriqué est appelé un « enfant » de l'élément « parent ». On dit que les éléments « parents » « contiennent » ou « entourent » leurs enfants. Ces termes signifient qu'un élément complet, avec ses balises, se trouve entièrement à l'intérieur d'une autre paire de balises, le plaçant donc à l'intérieur de cet élément.
Div
- Div : abréviation de division. Élément créé par le W3C pour servir d' « élément bloc » générique quand il n'est pas souhaitable d'utiliser un des éléments blocs plus anciens, comme
<h1> ou <p>. Ceux-là et les autres éléments sémantiques transmettent du sens à leurs contenus, en déclarant à la face du monde « Voici un titre » ou « Voici un paragraphe ». Toutefois, ces vieux éléments sémantiques sont aussi associés à des comportements par défaut. Leurs marges et remplissages sont généralement pré-réglés, de manière variable d'un navigateur à l'autre.
Pour cette raison, un élément bloc tout simple a été ajouté à HTML, dépourvu de tout le bagage accompagnant les éléments « traditionnels ». C'est ainsi qu'est né le « div » et avec lui l'élément « span ». Le span sert en gros à envelopper un texte pour y appliquer un style, indépendamment du texte autour de lui. Un span est « en-ligne » comme du texte, au lieu d'être « bloc » comme l'élément div, et suit les mêmes règles de rendu que le texte. Par exemple, si on veut appliquer une couleur de fond à une phrase unique au milieu d'un paragraphe, on place une balise span de chaque côté de la phrase, et on applique un style à ce span.
Classe & id
- Classe : c'est simplement un groupe de styles auquel on a donné un « nom » de classe, pour pouvoir l'associer à un élément. Quand une classe est créée dans la feuille de style, on peut l'appliquer à la balise ouvrante de n'importe quel élément. C'est un peu comme une baguette magique que l'on peut pointer vers un élément en disant « Toi ! Obéis à ces styles ! » Comme toutes les baguettes magiques, on peut la pointer encore et encore, stylant des éléments à gogo.
- Id : la seule différence avec classe, c'est que id ne peut-être utilisé qu'une seule fois par page. Quand on applique un
id, on attribue à un élément non seulement des styles, mais aussi une identité précise.
Attributs & propriétés
- Attribut : un attribut est placé directement dans une balise HTML ouvrante, et affecte le contenu de l'élément que cette balise délimite. Un bon exemple serait
<table bgcolor="#c0c0c0" width="300">. bgcolor et width sont tous les deux des attributs de ce tableau. La syntaxe d'un attribut comprend toujours le nom de l'attribut, suivi d'un signe « égal », et de la valeur de l'attribut. Les guillemets autour de la valeur sont optionnels pour des pages écrites avec un doctype HTML, mais obligatoires pour des pages XHTML et XML..
- Propriété : les propriétés CSS sont (généralement) utilisées dans une feuille de style. Elles ont aussi des valeurs qui définissent l'apparence d'un élément. Certaines propriétés sont similaires aux attributs, par exemple
{width : 300px ;} mais la plupart peuvent avoir beaucoup plus de valeurs possibles que n'importe quel attribut.
Attention aux différences de syntaxe :
- pour la propriété width et sa valeur, avec l'ajout obligatoire à cette dernière d'une unité de longueur. L'attribut bgcolor est remplacé en CSS par la propriété background-color. Cette propriété utilise des valeurs similaires à celles disponibles pour l'attribut, ainsi bgcolor="#c0c0c0" devient {background-color: #c0c0c0;} dans une feuille de style.
- clear="all" est une paire attribut/valeur de HTML, alors que {clear: both;} est la paire propriété/valeur équivalente en CSS.
- L'attribut style : une source de confusion possible est la syntaxe des styles CSS « en-ligne ». Ces styles sont contenus dans la balise ouvrante d'un élément, affectant cet élément et lui seul. Il s'agit pourtant toujours de CSS. Comme seuls les attributs sont autorisés dans une balise ouvrante, un nouvel attribut a été créé pour gérer le problème. C'est l'attribut
style.
L'attribut style est utilisé pour appliquer des styles à base de CSS directement à l'intérieur de la balise ouvrante d'un élément, et ressemble à ceci : style="width: 300px; background-color: #c0c0c0;". C'est comme une mini-feuille de style complète, nichée dans une balise via l'attribut style.
Noter que l'attribut style suit la même syntaxe que les autres attributs, sauf que sa valeur consiste en une ou plusieurs propriétés CSS suivies de leurs valeurs respectives. L'attribut style exige aussi l'application de guillemets autour des paires propriété/valeur qu'il contient. L'attribut style est pratique pour des tests de style rapides, et aussi pour ajouter un complément de style à des articles d'une page.
Feuilles de styles externes, intégrées, et en-ligne
« Positionné »
« Conteneur »
« Hack CSS »
Haut de page