|
Infos pratiques : une sélection d'articles utiles
|
La création d'un site Web valide implique la séparation du contenu et de sa présentation, ainsi que l'utilisation d'une "Définition de type de document" pour le respect des standards.
Pour créer un nouveau site Internet, il est aujourd'hui fortement recommandé d'intégrer la mise en conformité aux standards dès le début du projet. Le W3C recommande l'utilisation d'une DTD, du XHTML pour implémenter le contenu du site, et du CSS pour gérer la présentation.
1ère étape : choisir sa DTD
|
HTML4.01 frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3c.org/TR/html4/frameset.dtd">
HTML4.01 transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML4.01 strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
XHTML1.0 frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML1.0 transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML1.0 strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
La DTD est un document contenant les règles d'écriture de la page Web.
Il existe six DTD avec chacune des règles de syntaxe plus ou moins
rigoureuses, et un ensemble de balises autorisées.
Pour les nouveaux sites Web, il est conseillé de choisir la DTD XHTML 1.0 Strict, qui respecte les derniers standards :
- les balises doivent toutes être fermées,
- les balises et leurs attributs doivent être en minuscules,
- les balises propriétaires ne sont pas autorisées,
- les guillemets sont obligatoires autour de toutes les valeurs d'attributs,
- les attributs et éléments de présentation doivent être remplacés par des styles CSS,
- l'attribut target des liens n'est pas autorisé,
- les iframe ne sont pas autorisés |
2ème étape : écrire le contenu en XHTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titre de la page</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<h1>Titre</h1>
<p>texte puis passage à la ligne<br/>suite du texte à la ligne et mot mis en <em>valeur</em></p>
<p>encore du texte avec un mot mis encore plus en <strong>valeur</strong></p>
<img src= 'lien/image.jpg' / alt="image">
</body>
</html>
|
|
Dans le fichier XHTML, le contenu est créé à l'aide des balises autorisées par la DTD. La présentation se fera ultérieurement dans le fichier CSS.
Il existe deux types de balise XHTML :
- les balises de type bloc pour structurer la page en plusieurs pavés : <p>, <blockquote>, <h1>...
- les balises inline qui se trouvent à l'intérieur de balises blocs.
Le texte et les sauts de ligne <br> s'écrivent obligatoirement dans des paragraphes <p>. La balise <em> fait ressortir le texte, et le met en italique sur certains navigateurs. La balise <strong> insiste encore plus sur le texte, et le met en gras sur certains navigateurs. <img> devient une balise seule. Il n'est plus possible d'utiliser l'attribut border=0 pour enlever le cadre bleu, cette manipulation s'effectue désormais avec le CSS.
|
3ème étape : la présentation du contenu avec le CSS
* { color: red; }
p { color: red; }
<p class="exeption">
.exception { color: red; }
h1, h2 { color: red; }
<img src="logo.jpg" id="style_logo">
#style_logo { color: red; }
h3 strong { color: red; }
p .exception { color: red; }
a:hover { color: red; }
a:active { color: black; }
a:focus { color: yellow; }
a:visited { color: grey; }
|
|
Pour mettre un style sur une balise XHTML, il faut créer une classe dans le fichier CSS qui portera le même nom que la balise. Au sein du fichier CSS :
* { } agit sur toutes les balises XHTML.
p { } met un style sur la balise <p>
.exception { } correspond à la balise portant l'attribut class="exception"
#style_logo { } agit sur la balise avec l'attribut id="style_logo". class et id ont le même fonctionnement, mais id est utilisable une seule fois.
h3 strong { } est une imbrication. Il met un style sur la balise strong qui se trouve à l'intérieur de la balise h3. L'imbrication peut aussi se faire en mélangeant balises et classes.
Les pseudo formats permettent d'appliquer un style à une balise selon des conditions (survol de la souris, lien visité...).
|
Dernière étape : valider son site Web
Le validateur du W3C, disponible sur le site Web du consortium, vérifie la conformité de la syntaxe et le respect de la DTD choisie.
Le validateur supporte différents langages de balisage comme HTML, XHTML, SMIL, MathML...
Si votre site est valide, vous pourrez afficher le sigle W3C indiquant la conformité de votre code.
|
