(Cette série d’articles est une traduction de la série Introduction to The Web Standards Curriculum publiée sur le site d’Opera Software. Cet article est une traduction de The Web standards model - HTML, CSS and JavaScript écrit par Jonathan Lane. N’hésitez pas à me faire part de vos remarques si vous voyez des incohérences avec le texte original!)
Introduction
Dans le dernier article, nous avons abordé brièvement les briques de base de l’internet-HTML (ou XHTML), CSS et JavaScript. Il est maintenant temps d’approfondir notre connaissance de chacun de ces trois standards-A quoi ils servent, comment ils interagissent ensemble afin de créer un site web. Cet article se décompose de la manière suivante:
- Pourquoi séparer?
- CSS-ajoutons du style
- JavaScript-ajoutons du comportement
- Une page d’exemple:
- Synthèse
- Exercice
Pourquoi séparer?
C’est habituellement la première question qui se pose à propos des standards internet. Il est tout à fait possible de créer du contenu, de le styler et de gérer sa mise en page en utilisant uniquement du HTML-l’élément font pour le style et les tableaux pour la mise en page, alors pourquoi s’ennuyer avec XHTML/CSS? Utiliser des tableaux pour la mise en page, etc. c’était ce qui était fait lors de la mauvaise période du design web, et de nombreuses personnes continuent à utiliser ces méthodes (bien que vous ne devez vraiment pas le faire), c’est d’ailleurs pour cela que nous avons mis ce cours en place. Nous ne couvrirons pas ces pratiques ici. Voici une liste de raisons incontestables qui pousse à utiliser CSS et HTML plutôt que les méthodes dépassées:
- Efficacité du code: Pour les fichiers sont gros, plus ils mettront du temps à être téléchargé, et donc plus cela coûtera cher pour certaines personnes (qui payent encore leurs téléchargements au Mega Octect). Bien entendu, vous ne voulez pas gaspiller votre bande passante avec d’énormes fichiers HTML pollués par des informations de mise en page et de style. La meilleure alternative consistant à nettoyer les fichiers HTML, et inclure toutes les déclarations de styles et de mise en page dans une ou plusieurs feuilles de styles séparées. pour voir un cas concret, allez sur l’article sur A List Apart Slashdot où l’auteur a réécrit l’intégralité d’un site populaire en XHTML/CSS.
- Facilité de maintenance: Dans la continuité du point précédent, si vos informations de style et de mise en page sont spécifiées à un seul endroit, cela veut dire que vous ne devez faire de mise à jour qu’à un seul endroit pour modifier l’apparence de votre site. A moins que vous ne préfériez mettre à jour cette information sur toutes les pages de votre site? Je n’en suis pas si sûr.
- Accessibilité: Les internautes souffrant d’un handicap visuel peuvent avoir recourt à un navigateur à synthèse vocale qui restitue l’information par le son (en remplacement de la vue)-ce navigateur va lire la page à l’utilisateur. De plus, les logiciels de commande vocale, utilisé par le personne à mobilité réduite, bénéficie aussi d’un site bien structuré sémantiquement. Tout comme les utilisateurs de navigateurs à synthèse vocale utilisent les touches de leur clavier pour naviguer entre les titres, liens et formulaires, un utilisateur de logiciels à commande vocale va utiliser la voix pour naviguer. Il est plus facile de naviguer dans les documents décrit sémantiquement (et non pour la mise en page), et l’information qu’ils contiennent à plus de chance d’être trouvée par l’utilisateur. En d’autres mots, plus vite vous allez “droit au but” (le contenu), mieux c’est. Les outils de synthèse vocale ne peuvent pas lire le texte enfermé dans les images, et certains usages de JavaScript les déroutent. Assurez-vous de rendre votre contenu principal accessible à tous.
- Interopérabilité: Comme votre page en XHTML ne contient que du balisage sémantique, sans information de style, elle peut être reformatée pour n’importe quel périphériques qui diffèrent sur pleins d’attributs (par exemple la taille de l’écran) en appliquant simplement une feuille de style alternative-il est possible de le faire de diverses manières (jetez un oeuil aux articles sur les mobiles sur dev.opera.com pour plus d’informations). Nativement, les CSS vous permette de définir différent styles en fonction du type de média/méthodes d’affichage (c’est à dire visualiser sur un écran, imprimer, visualiser depuis un téléphone mobile.)
- Moteur d’indexation (ndt: Web crawlers)/moteur de recherche: Il y a de fortes chances que vous souhaitiez que vos pages soient facilement trouvables sur Google, ou un autre moteur de recherche. Un moteur de recherche utilise un “crawler”, un logiciel spécialisé dans la navigation sur internet, pour lire vos pages. Si ce crawler à des problèmes pour récupérer l’information de vos pages, ou interprète mal ce qui est important car vous n’avez pas marqué les titres comme étant de titres, et ainsi de suite, alors vos chances d’être bien référencé seront réduites.
- C’est une bonne pratique: Ca fait un peu “Parce que je l’ai dit”, mais parlez à n’importe quels professionnels au courant des standards, et ils vous diront que séparer le contenu, le style et le comportement et la meilleure façon de développer une application.
Les balises, la base de chaque page
HTML et XHTML sont des langages de balisage composés d’éléments, qui contiennent des attributs (certains optionnels, d’autres obligatoires). Ces éléments servent à identifier les différents types de contenu des documents, tout en spécifier leur rendu supposé dans le navigateur (par exemple titres, paragraphes, tableaux, listes à puces etc.)
Comme vous vous en doutez, les éléments définissent le type du contenu, alors que les attributs donnent des informations complémentaires sur ces éléments, telles que l’identifiant de l’élément, ou l’adresse pointée par un lien. Vous devez avoir en tête que le balisage doit être le plus sémantique possible, i.e. décrire le sens du contenu le plus précisément possible. La figure 1 décrit en détail un élément (X)HTML.
Figure 1: Anatomie d'un élément (X)HTML
Maintenant que nous avons ça en tête, quelle est la différence entre HTML et XHTML?
Qu’est ce que le XHTML?
Le “X” de XHTML veut dire “extensible”. Une des questions les plus classiques lors du démarrage d’un projet est “Est-ce que je dois utiliser HTML ou XHTML, et quelle est cette foutue différence?”. Ils font quasiment la même chose; la plus grosse différence réside dans la structure. Le tableau 1 résume ces principales différences.
| HTML | XHTML |
|---|---|
Les éléments et les attributs ne sont pas sensibles à la casse, <h1> a le même sens que <H1>. |
Les éléments et les attributs sont sensibles à la casse; ils doivent être écrits en minuscules. |
Certains éléments n’ont pas besoins d’être fermés (par exemple les paragraphes, <p>), d’autres (appelés “éléments vides”) interdisent les balises de fermeture (par exemple les images, <img>). |
Tous les éléments doivent être explicitement fermés (par exemple <p>Un paragraphe</p>). Les éléments vides peuvent être fermés en ajoutant un slash à la fin de la balise d’ouverture (par exemple <hr></hr> et <hr/> sont identiques).
Si vous envoyez votre XHTML comme |
| Les valeurs d’attributs peuvent être spécifiées sans être entourées de guillemets. | Les valeurs d’attributs sont contenues entre guillemets. |
Certains attributs peuvent être raccourcis (i.e. <option selected>). |
Aucun attribut ne peut être raccourci (par exemple, <option selected="selected">). |
Le serveur devrait envoyer le HTML aux clients avec un type text/html. |
XHTML devrait utiliser le type application/xhtml+xml mais il doit utiliser à minima le type application/xml, text/xml ou text/html. Si text/html est utilisé alors il est conseillé de suivre les Directives de compatibilité HTML car le navigateur va considérer le flux comme étant du HTML (et utiliser la reprise sur erreurs pour gérer les différences entre les deux langages). |
Pour le moment, nous vous recommandons de ne pas trop vous soucier de savoir si vous écrivez du HTML ou du XHTML. Restez-en à appliquer le conseil présenté au cours de ce cours et utilisez un doctype HTML (voir l’article 14 pour plus d’informations sur les doctypes) et vous ne devriez pas trop vous tromper.
Validation, qu’est ce que c’est?
Comme HTML et XHTML sont des standards établis (ainsi que CSS), le World Wide Web Consortium (W3C) a créé un super outil appelé un validateur afin de vérifier automatiquement les pages, et relever tous les problèmes/erreurs potentiellement présents dans le code, tels que des balises de fermeture manquante ou des guillemets manquant pour entourer la valeur d’un attribut. Le validateur HTML est disponible en ligne sur http://validator.w3.org/. Il va automatiquement détecter si vous utilisez HTML ou XHTML, ainsi que le doctype utilisé. Si vous souhaitez tester vos CSS, le validateur associé est accessible sur http://jigsaw.w3.org/css-validator/.
Pour plus d’information sur la validation, voir l’Article 24. Pour plus d’informations sur les doctypes, voir l’Article 14.
CSS-ajoutons du style
Les feuilles de style CSS (Cascading Style Sheets) vous permettent de contrôler tous les détails du formatage et de la mise en page du document. Vous pouvez changer ou ajouter des couleurs, fonds, tailles de police et des styles ainsi que modifier le positionnement des éléments de votre page. Il y a 3 façons d’appliquer des styles avec une CSS: Redéfinir un élément, appliquer un style à un ID ou à une classe. Arrêtons nous sur chacune de ses méthodes:
- Redéfinir un élément. Vous pouvez modifier l’apparence par défaut de n’importe quel élément (X)HTML en définissant une instruction de style dessus. Si vous souhaitez que tous les paragraphes est un interligne double est écrit en vert, en CSS vous pouvez écrire la déclaration:
p {
line-height: 2;
color: green;
}Maintenant tout élément entouré par
<p></p>aura un interligne double et sera en vert. - Définir un ID. Vous pouvez donner à un élément un attribut de type
idpour l’identifier, de manière unique, sur la page (chaque ID ne peut être utilisé qu’une seule fois sur une page)-par exempleid="navigation_menu". Cela vous permet d’avoir un contrôle plus fin sur le formatage de la page, par exemple si vous souhaitez qu’un seul paragraphe est un interligne double et un texte en vert, donnez lui un ID:<p id=”highlight”>Paragraph content</p>
Et appliquez ensuite la règle CSS suivante:
#highlight {
line-height: 2;
color: green;
}Cela n’appliquera l’instruction CSS que sur l’élément qui aura l’ID
highlight(le symbole dièse est juste la convention CSS pour indiquer un ID). - Définir une classe. Les classes sont comme des IDs, hormis le fait que plusieurs éléments peuvent avoir la même classe sur la même page. Pour continuer avec notre exemple, si vous souhaitez avoir un interligne double et mettre en avant les 2 premiers paragraphes d’une page, vous devez leur ajouter des classes comme cela:
<p class=”highlight”>Paragraph content</p>
<p class=”highlight”>The content of the second paragraph</p>Et ensuite appliquer la règle CSS:
.highlight {
line-height: 2;
color: green;
}highlightest une classe cette fois ci-Le point est la convention CSS pour indiquer une classe.
L’exemple plus bas vous donnera une meilleure idée sur comment les CSS peuvent être utilisées; nous regarderons les CSS dans le détail à partir de l’article 22.
JavaScript-ajoutons du comportement
Enfin, Le JavaScript est un langage de script à utiliser pour ajouter du comportement sur vos pages web-pour valider les données d’un formulaire (vérification du format), pour fournir des fonctionnalités de glisser/déposer, modifier les styles à la volée, animer les éléments d’une page tels que les menus, manipuler des boutons, et un milion d’autres choses. La majorité des scripts fonctionnent en recherchant un élément HTML cible, et lui faire quelques chose, comme en CSS, mais avec une syntaxe et un fonctionnement différent.
JavaScript est un sujet bien plus compliqué et long que HTML et CSS, nous allons donc nous contenter de choses simples pour le moment pour éviter les confusions, je n’en parlerai donc pas dans l’exemple ci-dessous. En fait, vous ne rencontrerez pas le JavaScript avant longtemps dans ce cours.
An example page
Il y a beaucoup de détails que nous n’avons pas couvert jusqu’à présent, mais nous y reviendrons tous le long du cours! Pour le moment, Nous allons vous présenter un exemple concret de page, juste pour vous donner un avant-goût de ce que vous aller aborder lors des prochains articles.
L’exemple que nous vous proposons et une page de références, que vous pouvez utiliser par exemple pour citer les références à la fin d’un article de psychologie sur les dynamiques de groupe d’une équipe de développement web, ou un rapport sur l’utilisation de l’intern à haut débit aux états unis. De plus, si vous êtes pointilleux sur les écrits académiques, cet exemple montre un formattage de type APA (ndt: format de citation des sources de l’American Psychological Association) (il en fallait un). Télécharger le code ici.
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>References</title>
<style type="text/css">
@import url("styles.css");
</style>
</head>
<body>
<div id="bggraphic"></div>
<div id="header">
<h1>References</h1>
</div>
<div id="references">
<cite class="article">Adams, J. R. (2008). The Benefits of Valid Markup: A Post-Modernistic Approach to Developing Web Sites. <em>The Journal of Awesome Web Standards, 15:7,</em> 57-62.</cite>
<cite class="book">Baker, S. (2006). <em>Validate Your Pages.... Or Else!.</em> Detroit, MI: Are you out of your mind publishers.</cite>
<cite class="article">Lane, J. C. (2007). Dude, HTML 4, that's like so 2000. <em>The Journal that Publishes Genius, 1:2, </em> 12-34.</cite>
<cite class="website">Smith, J. Q. (2005). <em>Web Standards and You.</em> Retrieved May 3, 2007 from Web standards and you.</cite>
</div>
<div id=”footer”>
<p>The content of this page is copyright © 2007 <a href=”mailto:jonathanlane@gmail.com”>J. Lane</a></p>
</div>
</body>
</html>
Je ne vais pas expliquer ce fichier ligne par ligne, car vous allez voir de nombreux autres exemples dans les articles à suivre, cependant, il y a tout de même quelques points, listés ci-dessous, à noter.
Ligne 1 est ce que l’on appelle la déclaration de type du document, ou le doctype. Pour cet exemple, la page est en XHTML 1.0 Transitional. Le doctype spécifie les règles qui devront être respéctées par le balisage, et qui pourront être validées. Voir l’article 14 pour plus d’information sur les doctypes.
Lignes 5 à 7 servent à importer un fichier CSS dans la page-Le style contenu dans ce fichier sera appliqué au divers éléments de la page. La prochaine section vous détaillera le contenu de ce fichier css.
J’ai assigné une classe différente pour chacun des différents types de référence. En faisant ainsi, je peux appliquer un style différent pour chaque type de référence-par exemple, pour notre exemple, j’ai mis une couleur différente à droite de chaque élément pour faciliter la lecture.
Jettons un oeuil au CSS qui style le HTML.
styles.css
body {
background: #fff url('images/gradbg.jpg') top left repeat-x;
color: #000;
margin: 0;
padding:0;
border: 0;
font-family: Verdana, Arial, sans-serif; font-size: 1em;
}
div {
width: 800px;
margin: 0 auto;
}
#bggraphic {
background: url('images/pen.png') top left no-repeat;
height: 278px;
width: 362px;
position: absolute;
left: 50%;
z-index: 100;
}
h1 {
text-align: center;
text-transform: uppercase;
font-size: 1.5em;
margin-bottom: 30px;
background: url('images/headbg.png') top left repeat;
padding: 10px 0;
}
#references cite {
margin: 1em 0 0 3em;
text-indent: -3em;
display: block;
font-style: normal;
padding-right: 3px;
}
.website {
border-right: 5px solid blue;
}
.book {
border-right: 5px solid red;
}
.article {
border-right: 5px solid green;
}
#footer {
font-size: 0.5em;
border-top: 1px solid #000;
margin-top: 20px;
}
#footer a {
color: #000;
text-decoration: none;
}
#footer a:hover{
text-decoration: underline;
}
Je suis allé un peu loin de la définition des styles de cette page, en ajoutant d’éléguant effets de fond afin de vous montrer que l’on peut obtenir en utilisant des CSS.
Ligne 1 spécifie les styles par défaut pour le document, tels que la couleur du texte et du fond, épaisseur de la bordure autour du texte, etc. Certaines personnes ne s’embêtent pas à définir les paramètres par défaut comme cela, et la plupart des navigateurs utiliseront leurs styles par défaut, mais c’est une bonne pratique, car elle vous permet d’avoir plus de contrôle sur la façon dont le site web sera affiché dans les navigateurs.
A la ligne suivante j’ai fixé la largeur de la page à 800px (bien que j’aurai pu spécifier un pourcentage à la placep our que la page puisse s’ajuster à la fenêtre de navigateur). La marge est spécifiée de manière à s’assurer que le contenu sera toujours situé au centre.
Enfin, portons notre attention sur les images de fond utilisées (elles sont spécifiées avec les déclarations background: url). J’ai 3 éléments de fond dans cette page. Le premier est un gradient qui part du haut de la page, et qui nous donne un dégradé de bleu. Le deuxième, j’ai utilisé un fichier PNG semi-transparent qui représente un stylo afin d’avoir suffisament de contraste avec le texte et pour laisser le dégradé visible (Les images PNG semi-transparentes ne fonctionnent pas pour les version 6 ou inférieure de Internet Explorer, mais fonctionnent dans la grande majorité des navigateurs modernes; pour ces navigateurs, on peut avoir recourt au javascript écrit par Dean Edward pour corriger ce problème, ainsi que ceux liés au support CSS de ce navigateur). Le dernier élément, est un autre PNG semi-transparent pour le fond de l’en-tpete de la page. Cela lui donne un contraste un peu plus important.
Le résultat est celui de la figure 2.
Figure 2 - L'exemple avec les styles appliqués
Synthèse
Il n’y à rien de magique dans XHTML, CSS et JavaScript. C’est simplement un évolution du web. Si vous connaissiez déjà HTML, vous n’avez rien à “oublier”. Tout ce que vous connaissez déjà est utile, vous allez utiliser des méthodes un peu différentes pour certaine problématique (et être un peu plus rigoureux dans le balisage).
En plus d’avoir la satisfaction d’un travail bien fait, les utilisations des standards est juste censées. Le contre argument de cette utilisation est que cela prend du temps et que c’est compliqué d’obtenir une mise en page compatible avec les différents navigateurs. Cette argument peut se retourner contre lui car il est tout aussi compliqué de rendre compatible une mise en page basée sur un code non standard avec les différents navigateur et avec les navigateur futur. Comment être sûr qu’un balisage bancale sera toujours compatible avec Opera 12.0, Firefox 5.0 et IE 10.0? C’est impossible, à moins de suivre des règles.
Exercice
- Quelle est la différence entre une classe et un ID?
- Quel est le rôle joué par XHTML, CSS et JavaScript dans un site web?
- Modifier la mise en page de index.html de l’exemple fournis en ne touchant qu’ à la CSS (je vous conseille d’utiliser un éditeur comme Notepad ou Text Wrangler). Ne touchez surtout pas eu HTML.
- Ajoutez une icône pour chaque type de référence (une icône différente pour les articles, les livres et les ressources web). Créez vos propres icônes pour cela, et faites les apparaître sur le côté en utilisant la feuille du style uniquement.
- Cachez l’information de copyright en bas de page.
- Modifiez l’apparence du titre, pour qu’il soit bien distinctif.
- Que pouvez vous modifier sur la css pour rendre l’exemple compatible avec un téléphone portable?