User talk:Jpatonni

French translation proposal for : The basics of HTML

Introduction

Dans cette article du Web Standards Curriculum, vous allez apprendre les bases du langage HTML – Ce que c'est, à quoi ça sert, un résumé de son histoire et finalement, à quoi ressemble la structure d'un document HTML. Il s'agit d'un article d'introduction et d'autres articles de ce curriculum aborderont plus en détail les différentes facettes du langage HTML.

Qu'est-ce que le HTML

La plupart des logiciels qui lisent et écrivent des fichiers utilisent un format de fichier spécifique. Par exemple, Microsoft Word comprend les fichiers « .doc » et Microsoft Excel comprend les fichiers « .xls ». Ces fichiers contiennent des instructions sur la façon de recomposer le document lors de chaque ouverture, le contenu du document lui-même ainsi qu'un ensemble de métadonnées propre au document comme, par exemple, le nom de l'auteur du document, sa dernière date de modification, voire même, la liste des changements qui ont été faits de manière à pouvoir passer d'une version à l'autre du document.

Le HTML (« HyperText Markup Language » : langage de balisage hypertext) est un langage qui permet de décrire le contenu d'un document Web. Il utilise une syntaxe spécial à base de balises (parfois également appelées « éléments »). Ces balises encadrent le texte présent dans le document afin d'indiquer aux agents utilisateurs (comme par exemple les navigateurs Web) comment interpréter la portion du document qu'elles délimitent.

Un agent utilisateur est n'importe quel logiciel utilisé pour accéder à une page Web au nom de l'utilisateur. Il y a une importante distinction à faire ici. Tous les navigateurs de bureau (Internet Explorer, Opera, Firefox, Safari, Chrome, etc.) ou les divers navigateur alternatifs pour d'autres terminaux (comme par exemple le « Wii Internet Channel » pour la console du même nom ou les navigateurs pour mobile comme Opera Mini ou Safari pour iPhone) sont des agents utilisateur. Néanmoins, tous les agents utilisateur ne sont pas des navigateurs. Les programmes automatisés utilisés par Google ou Yahoo! pour indexer les pages Web qui seront affichées dans leur moteurs de recherche sont également des agents utilisateur, même si aucun être humain ne les contrôlent directement.

A quoi ressemble le HTML

HTML est une représentation au format texte d'un contenu et de sa structure. Par exemple :

<p id="exemple">Ceci est un paragraphe.</p>

Le « <p> » est ce que l'on appelle une balise. Elle signifie : « Ce qui suit doit être considéré comme un paragraphe ». Dans la mesure où elle est placée au début du contenu qu'elle définit, cette balise est appelée « balise ouvrante ». Le « </p> » est la balise qui indique là où le paragraphe se termine (c'est ce que l'on appelle une « balise fermante »). La balise ouvrante, la balise fermante et tout ce qui se trouve entre les deux définissent ce qu'on appelle un « élément ». La partie « id="exemple" » est ce que l'on appelle un attribut, nous en reparlerons un peu plus loin. Bien que ce ne soit pas tout à fait la même chose, beaucoup de gens utilisent indifféremment les termes « balise » et « élément » sans vraiment ce soucier de la différence.

Dans la plupart des navigateurs, il existe une option « Code source de la page » ou « Afficher la source » que l'on trouve habituellement dans un menu « Affichage ». Essayez-le dès à présent ; Rendez vous sur le site Web de votre choix, sélectionnez cette option et passer un peu de temps à explorer le code HTML qui structure la page que vous aurez choisie.

L'histoire du HTML

Dans l'article « L'histoire d'Internet et du Web, et l'évolution des standards du Web (en) », vous avez appris quelques petites choses sur les origines du Web moderne. Lorsque Tim Berners-Lee à inventé le « World Wide Web », il a créé en même temps le premier serveur Web, le premier navigateur et la toute première version de HTML (en).

Bien que le HTML ait considérablement changé depuis son origine, une grande partie de ce qui fait le HTML moderne est déjà présente dans cette première version et plus de la moitié des balises décrites alors existent encore aujourd'hui.

Alors que de plus en plus de personnes commençaient à écrire des pages Web et à créer de nouveaux navigateurs, de nouvelles fonctionnalités furent ajoutées à HTML. Certaines ont été adoptées massivement (comme, par exemple, la balise img utilisée pour ajouter des images au sein des documents et qui est apparue pour la première fois dans le navigateur NCSA Mosaic). D'autres restèrent plus confidentielles et n'ont été utilisées que par un ou deux navigateurs. De plus en plus, la nécessité de standardiser le langage se faisait sentir. C'est ainsi que les développeurs Web et les créateurs de logiciels de navigation décidèrent de créer un document (appelé « spécification ») qui définirait de manière définitive ce qu'est HTML afin de pouvoir vérifier qu'ils utilisaient ou implémentaient HTML correctement.

L'IETF (Internet Engineering Task Force — un organisme de standardisation dédié à l’interopérabilité d'Internet) publia une première proposition de standardisation du HTML en 1993. Cette proposition fut abandonnée en 1994 sans devenir un standard mais poussa l'IETF à créer un groupe de travail chargé de s'occuper de la standardisation du HTML.

En 1995, HTML 2.0 fut écrit en reprenant un certain nombre d'idées issues de la proposition originale de l'IETF. Une proposition alternative nommée HTML+ fut également produite par Dave Raggett. Cette proposition fut utilisée comme base pour l'implémentation de nombreux nouveaux éléments dans les navigateurs (comme la méthode pour insérer des images dans les documents, défrichée par NCSA Mosaic)

Une version de travail de HTML 3.0 fut produite un peu plus tard la même année. Malheureusement, le travail sur cette version fut interrompu à cause d'un manque de soutien de la part des fabriquants de navigateurs opposés à la direction prise par le langage. HTML 3.2 retira nombre des nouvelles fonctionnalités de la version 3.0 et préféra adopter un certain nombre des balises créées par les navigateurs les plus populaires de l'époque : NCSA Mosaic et Netscape Navigator.

En 1997, le W3C publia HTML 4.0 en temps que « recommandation ». Il adopta encore plus de fonctionnalités issues des extensions spécifiques de chaque navigateur mais il tenta également de rationaliser et de nettoyer le HTML. Ce nettoyage fut réalisé en indiquant que certains éléments étaient dépréciés — Cela signifie que ces éléments sont obsolètes et que même s'ils font partie de cette version de HTML, ils pourront éventuellement être supprimés dans une future version. L'idée était d'encourager un usage de HTML plus orienté vers la structuration sémantique des documents (pour en savoir plus, lisez cet autre article du curriculum : The web standards model (en))

HTML 4.01 fut publié en 1999, avec quelques errata ajoutés en 2001. Il s'agit de la toute dernière version du standard HTML, néanmoins, HTML5 est à présent en cour d'élaboration.

En 2000, le W3C publia également la spécification XHTML 1.0 qui est une réécriture du langage HTML pour qu'il soit compatible avec la norme XML.

En 2007, le W3C a repris le travail sur le langage HTML en créant un nouveau groupe de travail et en reprenant les travaux réalisés par le WhatWG sous le nom de HTML5. Dans ce curriculum, nous utiliserons HTML5, mais ne vous inquiétez pas — Si vous avez déjà réalisé des choses avec HTML 4, vous n'aurez rien à réapprendre. En effet, HTML5 englobe l'intégralité de HTML 4 (modulo quelques fonctionnalités qui ont été légèrement redéfinies) et ajoute de puissantes nouvelles fonctionnalités par dessus. Nous préciserons clairement les choses lorsque nous parlerons des nouveautés issues de HTML5.

Si vous souhaitez en savoir un peu plus, vous pouvez également lire What is HTML? (en)

La structure d'un document HTML

Un document HTML typique ressemble à ça :

<!DOCTYPE html>
<html>
  <head>
    <title>Page d'exemple</title>
  </head>
  <body>
    <h1>Salut tout le monde</h1>
  </body>
</html>

Ce qui donnera ceci quand il sera afficher par un navigateur :

Le document commence par un élément qui décrit son type, on parle de « Doctype » (Nous détaillons cet élément particulier dans l'article « Choosing the right doctype for your HTML documents (en) »). Cela sert principalement à dire au navigateur d'afficher le document en « mode standard » afin qu'il fonctionne correctement. Il permet également de signaler aux outils de validation à quelle version de HTML ils doivent se référer pour pouvoir valider votre document. Ne vous souciez pas trop de ce que cela signifie pour le moment. Nous y reviendrons plus tard. Retenez juste que ce que vous voyez dans notre exemple est le doctype HTML5.

Juste après ce doctype, vous pouvez voir la balise ouvrante de l'élément html. Cet élément englobe l'intégralité du document. La balise fermante de l'élément html est toujours la dernière chose que l'on trouve dans tout document HTML.

À l'intérieur de l'élément html on trouve l'élément head. Cet élément est un conteneur pour toutes les informations relatives au document (ses métadonnées). Il est décrit en détail dans l'article L'élément HTML head (en). Il contient lui-même un autre élément, l'élément title. Ce dernier définit le titre du document « Page d’exemple » qui apparait dans la barre de menu du navigateur.

L'élément head est immédiatement suivi de l'élément body. Cet élément-ci englobe le contenu visible du document. Dans notre exemple, ce contenu se compose d'un simple titre de premier niveau (matérialisé par un élément h1) avec le texte « Salut tout le monde ».

Et voila ! C'est notre document complet.

Comme on le voit, les éléments peuvent contenir d'autres éléments. Le corps du document va nécessairement contenir un certain nombre d'éléments imbriqués les uns dans les autres. Les éléments de structure tels que article, header ou div permettent de créer le squelette du document. Ces sections seront à leur tour divisées en sous-sections qui contiendront des titres, des paragraphes, des listes, etc. Les paragraphes, par exemple, contiendront eux-même des éléments pour définir des liens, des citations, des emphases, etc. Vous en apprendrez plus sur tous ces éléments dans nos autres articles.

La syntaxe des éléments HTML

Un élément HTML est en général constitué de deux balises qui entourent un bloc de texte et, la plupart du temps, un élément peut contenir d'autre éléments (comme l'élément html qui contenait les éléments head et body dans notre exemple précédent). il y a bien sûr des exceptions à cette règle : certains éléments ne peuvent contenir ni texte ni élément, comme par exemple l'élément img. Vous en apprendrez plus sur ce point dans un autre article.

Les éléments peuvent également comporter des attributs. Ceux-ci peuvent modifier le fonctionnement ou enrichir la sémantique des éléments. Regardons un nouvel exemple.

<header>
  <h1>Les bases de 
    <abbr title="Hypertext Markup Language">HTML</abbr>
  </h1>
</header>

Cette exemple s'affichera de la manière suivante:

Dans cette exemple, un élément header (utilisé pour définir l'en-tête de page du document) contient un élément h1 (niveau de titre le plus élevé) qui à son tour contient du texte. Une partie de ce texte est contenu dans un élément abbr (utilisé pour signaler et expliciter une abréviation) comportant un attribut title dont la valeur est Hypertext Markup Language.

Beaucoup d'attributs du langage HTML sont communs à tous les éléments, néanmoins quelques uns sont spécifiques à un élément donné ou à quelques éléments identifiés. Ceux-ci sont toujours de la forme clé="valeur". La valeur est souvent entourée par des guillemets anglais, simple ou double : Ce n'est pas obligatoire avec HTML5 sauf lorsque la valeur de l'attribut comprend plusieurs mots. Dans ce cas, les guillemets sont obligatoires pour dire clairement qu'il s'agit bien d'une valeur unique et pas de plusieurs attributs. Ceci dit, je vous encourage tout de même à encadrer systématiquement les valeurs d'attributs avec des guillemets anglais double dans la mesure où il s'agit d'une bonne pratique et que cela rend le code plus facile à lire. En outre, certaines versions de HTML avec lesquelles vous pourriez être amené à travailler requiert l'utilisation de ces guillemets, c'est le cas, par exemple, de XHTML 1.0. Dans tous les cas, les autres versions de HTML qui ne contraignent pas à l’utilisation des guillemets ne seront pas gênées par leur présence.

Les attributs et leurs valeurs sont, pour la plupart, définis par la spécification HTML (en). Vous ne pouvez pas créer vos propres attributs et valeurs. Cela aurait pour conséquence de produire du code HTML invalide, or un tel code invalide peut perturber les navigateurs qui risquent d'avoir des problèmes pour interpréter vos pages correctement. Les seules véritables exceptions sont les attributs id et class : vous pouvez librement choisir leur valeur dans la mesure où ces attributs sont là pour vous permettre de donner un sens personnalisé aux éléments HTML.

Un élément à l’intérieur d'un autre élément est dit « enfant » de cet élément. Ainsi, dans notre précédent exemple, abbr est un enfant de h1 qui est lui-même un enfant de header. A l'inverse, l’élément header est considéré comme le « parent » de l'élément h1. Cette notion de parent/enfant est importante dans la mesure où c'est une des bases qui soutient CSS et qu'elle est massivement utilisée en Javascript.

Les éléments de type bloc et ceux de type en-ligne

Il y a deux grandes catégories d'éléments en HTML qui correspondent aux types de contenu ou de structure que ces éléments représentent : les éléments de type bloc et les éléments de type en-ligne.

Les éléments de type bloc correspondent à des éléments de haut niveau généralement dévolus à la structuration du document. Pour vous aider à les reconnaitre, sachez que les éléments de type bloc sont ceux qui commencent en général sur une nouvelle ligne, laissant tous ceux qui les précèdent au dessus d'eux et tous ceux qui les suivent en dessous. Parmi les éléments de type bloc les plus courants, on compte les paragraphes, les éléments de liste, les titres et les tableaux.

Les éléments de type en-ligne sont toujours contenus à l’intérieur d'éléments de type bloc et englobe de petites portions de contenu, jamais des paragraphes entier ou des regroupements de contenu. Un élément de type en-ligne ne générera pas de saut de ligne : c'est le genre d'élément que l'on trouve à l’intérieur d'un paragraphe de texte. Parmi les éléments de type en-ligne les plus courants, on compte les liens hypertexte, les mise en exergue de texte et les petites citations.

Note : HTML5 redéfinit les catégories d'éléments de HTML (voir : Element content categories (en)). Bien que ces nouvelles définitions soient plus précises et moins ambigües que celles qui existaient jusque là, elles sont aussi beaucoup plus compliquées à comprendre que les types « bloc » et « en-ligne ». Nous continuerons donc d'utiliser ces deux catégories tout au long de ce curriculum.

Les caractères spéciaux en HTML

Il reste une dernière chose à voir à propos des documents HTML : La manière d'inclure des caractère spéciaux dans ces documents. En effet, en HTML les caractères <, > et & sont spéciaux. Ils sont utilisés comme délimiteurs au sein du document plutôt que de représenter les caractères inférieur, supérieur et esperluette.

Une des premières erreurs que commettent les développeurs Web consiste à utiliser une esperluette et à voir quelques chose de complètement différent s'afficher. Par exemple, si vous écrivez « Vous pouvez payer en Francs&euros », vous risquez de voir s'afficher « Vous pouvez payer en Francs€s » dans certains navigateurs.

Cela tient au fait que la chaine « € » est ce que l'on appelle une référence de caractère HTML. Une référence de caractère est une méthode pour inclure dans un document HTML un caractère difficile, voire impossible, à saisir avec un clavier ou indisponible dans un format d'encodage de caractère donné.

L'esperluette (&) débute la référence et le point-virgule (;) la termine. Ceci dit, certain agents utilisateur peuvent être particulièrement permissifs sur la syntaxe HTML et ne pas tenir compte de l'oubli d'un point virgule ce qui va les conduire à traiter « &euro » comme une référence de caractère. Ces références de caractère peuvent être composées soit de nombres soit de mots-clés (dans ce dernier cas, on parle alors « d'entités HTML »)

Le caractère de l'esperluette doit donc être inclus dans le document via l'entité HTML « & » ou via la référence de caractère numérique « & ». Vous pouvez trouver un tableau de l'ensemble des références de caractère HTML sur Wikipedia (en).

Conclusion

Dans cet article, vous avez vu les bases du langage HTML, comment il a évolué et vous avez commencé à explorer la structure d'un document HTML. Le prochain article est dédié à l'exploration de l'élément head des documents HTML puis, ensuite, viendra l'exploration de l'élément body

Note : cet article a été publié pour la première fois au sein de Web Standards Curriculum d'Opera sous le titre « 12: The basics of HTML », rédigé par Mark Norman Francis. Au même titre que l'original, celui-ci est publié sous licence Creative Commons. Attribution, Non Commercial — Partage à l'identique — 2.5.

French translation proposal for : Introduction to the Web Standards Curriculum

Introduction

Tous les auteurs qui ont contribué à ce curriculum sont des passionnés qui croient fermement aux standards du Web. Nous voulons tous faire de notre mieux pour rendre le Web meilleur et je suis convaincu que cela passe par l'apprentissage et l'enseignement, peu importe qu'il s'agisse d'apprendre aux gens comment collaborer et avoir plus de respect les uns pour les autres, ou qu'il s'agisse de leur enseigner comment rendre leur sites Web compatibles d'un navigateur à l'autre et accessibles et utilisables par n'importe quel utilisateur (par exemple les personnes souffrant d'un handicap, les utilisateurs de connexion bas-débit ou de terminal mobile, etc.) Les standards du Web sont la solution à toutes ces questions, en conséquence nous avons décidé de contribuer à leur adoption, aujourd'hui comme demain.

Bienvenue sur le Web Standards Curriculum, un ensemble de ressources pédagogiques destinées à donner une base solide en design et développement Web à toute personne qui le souhaite. Ces articles sont gratuits, librement accessibles et ne nécessitent aucune connaissance préalable particulière. A l'origine, ils sont plutôt pensés pour les écoles. En effet les standards du Web sont parfois assez peu présents dans certains cours traditionnels. Ceci dit, vous devriez pouvoir exploiter ces articles quelque soit votre age ou votre activité tant que vous vous intéressez aux meilleurs méthodes pour construire des sites ou application Web.

Pourquoi des standards Web

Voyons brièvement les principales raisons qui expliquent en quoi c'est une bonne idée d'adopter les standards du Web (sachant que ces raisons sont détaillées dans les autres articles qui composent ce curriculum). Utiliser les standards du Web et les bonnes pratiques qui y sont associées offrent les avantages suivants :

Efficacité du code : Une grande partie des bonnes pratiques associées aux standards du Web sont liées à la réutilisation du code — Écrivez votre code une fois et réutilisez-le chaque fois que vous en avez besoin.
Faciliter la maintenance : Cet avantage est fortement lié au précédent — Si vous écrivez votre code une seul fois et le réutilisez partout où vous en avez besoin, il vous suffira alors de ne faire qu'une seule modification pour voir celle-ci répercutée partout sur votre site sans avoir à faire des changements dans tous les sens.
Accessibilité : Ce point et le suivant sont très proches — Un des grands idéaux du Web et des rendre les sites Web accessibles à tous le monde quelles que soit les conditions. Cela implique de rendre les sites Web utilisables même par les personnes souffrant de handicaps visuels ou moteurs comme les aveugles ou les tétraplégiques. En utilisant les standards du Web et les bonnes pratiques associées, vous serez capable de rendre vos sites accessibles même à ces utilisateurs quasiment sans effort.
Interopérabilité : En règles générales vous devez vous assurer que vos sites Web fonctionnent non seulement sur les principales plateformes — i.e. Windows, Mac, Linux — mais également avec des navigateurs plus exotiques comme ceux présents sur les téléphones mobiles, les tablettes tactiles, les consoles de jeux, etc. En utilisant les standards du Web, vous augmentez significativement la probabilité de voir vos sites fonctionner sur tous ces terminaux. Il y a bien plus de navigateurs Web présents sur les téléphones mobiles que sur les ordinateurs de bureau. Pouvez-vous (ou vos clients) vraiment vous permettre d'ignorer ce marché ?
Robots d'indexation/Moteurs de recherche : Ici nous allons parler de ce que l'on appelle communément le SEO (Search Engine Optimization) ["optimisation pour moteur de recherche"] — Cette activité consiste à rendre vos sites aussi visibles et compréhensibles que possible par ce que l'on appelle des robots d'indexation. Ceux-ci parcourent le Web pour les référencer, leur donnant un meilleur positionnement dans les moteurs de recherche comme Google. C'est un domaine particulièrement pointu (n'hésitez pas à lire les articles suivants si le sujet vous intéresse : Intelligent site structure for better SEO! (en) et Semantic HTML and Search Engine Optimization (en)). Mais cette fois encore, en utilisant simplement les standards du Web vous rendrez vos sites bien plus visibles et compréhensibles par Google, Yahoo!, Bing, etc., ce qui est plutôt bon pour vos affaires.

Malgré tous ces avantages, la plupart des sites présents sur le Web ne respectent pas les standards du Web et beaucoup de développeurs en activité continuent de se reposer sur de mauvaises habitudes complètement dépassées. « Pourquoi ? » demanderez-vous. Il y a tout un tas de raisons à cela. Les gens citent régulièrement : le manques de formations ; les règles d'entreprises ; le fait qu'ils n'ont pas besoin d'apprendre car ils seront payés malgré tout ; la difficulté d'apprendre ; la qualité du support des standards dans les navigateurs... Voyons chacune de ces raisons en détail et les contre-arguments qui y sont associés pour pouvoir écarter toutes ces excuses à l'adoption ou l'apprentissage des standards du Web.

Manque de formation : C'est la principale raison qui a motivé la création de ce curriculum. L'enseignement des standards du Web laisse à désirer dans un grand nombre d'écoles et d'universités avec des programmes relayant des pratiques dépassées, ceux-ci pouvant êtres difficile à faire mettre à jour pour cause de procédures bureaucratiques inadaptées. De plus, les livres et le matériel pédagogique sont plutôt cher. Eh, une minute ! Il se trouve que nous avons ici toute une base pédagogique gratuite pour les enseignants !
Politique d'entreprise : On peut facilement constater que certaines entreprises disposent encore de vieux sites Web complètement dépassés. Certaines peuvent même avoir des règles qui contraignent leurs employés à utiliser des navigateurs hors d'age. Heureusement, les choses s'arrangent et maintenant qu'il y a ce curriculum pour expliquer comment faire les changements nécessaires, ça devrait progressivement aller encore mieux. En effet, mettre un site à jour en utilisant les derniers standards incite les entreprises à mettre les navigateurs qu'elles utilisent à niveau pour pouvoir mieux profiter de leurs propres sites. De même les entreprises devraient encourager leurs clients à mettre leurs navigateurs à jour. C'est un véritable enjeu commercial — comme nous l'avons vu précédemment, les sites qui utilisent les standards du Web bénéficient d'une meilleure visibilité dans les moteurs de recherche et sont plus facilement accessible au personnes souffrant de handicaps ou utilisant des terminaux exotiques. Une entreprise peut-elle vraiment se permettre d'ignorer tous ces utilisateurs ?
« Je n'ai pas besoin de les apprendre ! » : Je connais des développeurs qui vont affirmer « OK, j'utilise de vieilles pratiques mais je suis toujours payé pour ça — Alors, franchement, pourquoi est-ce que je devrais m’embêter avec ces nouveaux trucs ? » Comme nous l'avons vu ci-avant, cela vous permet d'écrire du code plus efficace, plus facilement et ça le rend plus facile à maintenir. Ça vous permet également de produire du code plus accessible et plus facilement exploitable sur les terminaux les plus variés. Est-ce que rien que ça, ça n'est pas déjà génial ? Ça va aussi vous donner l’opportunité de pérenniser vos savoir-faire tout en vous ouvrant des perspectives de rémunération supplémentaires. En effet, de plus en plus d'offres d'emplois demandent désormais une connaissance des standards du Web.
« C'est trop difficile à apprendre ! » : N'importe quoi ! Après avoir lu tout ou partie de ce curriculum, vous vous rendrez compte à quel point il est facile d’acquérir les bases de l'utilisation des standards du Web, peu importe que vous soyez un novice en développement/design Web ou un professionnel qui cherche à améliorer ses compétences.
Le support des standards dans les navigateurs : Nous avons longtemps constaté que le support des standards du Web dans les navigateurs pouvait sérieusement varier de l'un à l'autre avec pour conséquence de rendre la réalisation de sites Web cauchemardesque. Mais tout ça, c'est du passé — Les navigateurs modernes ont tous un excellent support des standards du Web et vous pouvez désormais construire des sites, respectant ces standards, capables de fonctionner dans des navigateurs relativement ancien même si ceux-ci ne supportent pas les toutes dernières technologies.

Comme vous pouvez donc le constater, il n'y a aucune raison de ne pas utiliser les standards du Web pour développer vos sites. En outre, si vous êtes novice et que vous découvrez ce curriculum aujourd'hui, vous démarrerez du bon pied en apprenant directement les bonnes pratiques sans avoir à désapprendre d'éventuelles mauvaises pratiques.

OK, nous n'aimons guère parler de ces mauvaises pratiques, un peu comme s'il s'agissait de Voldemort ou un truc du genre. Nous ne prévoyons donc pas de détailler ces pratiques « dont-il-ne-faut-pas-prononcer-le-nom » ici. Nous préférons vous aiguiller directement sur le bon chemin. Cependant vous devez surement vous demander ce que sont ces pratiques si terribles que nous osons à peine les évoquer. Voyons brièvement de quoi il s'agit :

Par le passé, les gens avaient l’habitude de faire des choses comme :

Mettre en page leurs sites Web à l'aide d'immenses tableaux HTML. Ils utilisaient les différentes cellules du tableau pour positionner leurs images, leurs textes, etc. (les tableaux HTML ne sont pas fait pour ça et cela rajoute du code inutile dans les pages du site).
Utiliser des images GIF invisibles appelés « spacer » pour ajuster le positionnement des éléments au sein des pages (les images ne sont pas faites pour ça et cela rajoute du code inutile dans les pages du site).
Utiliser Javascript pour générer des menus à la volée (ce qui pose problème pour les personnes qui ont désactivé Javascript ou les utilisateurs de lecteur d'écran qui ont du mal avec ce genre de script) ou ne fonctionnant que dans un seul navigateur (que se passe-t-il pour les autres ?).
Inclure directement des instructions de mise en forme dans le code HTML en utilisant la balise <font> (ce qui rend la maintenance horriblement compliquée et rajoute du code inutile dans les pages du site).

Cette liste de crimes contre le développement Web est loin d'être exhaustive. Le pire, c'est que j'ai dit "Par le passé"... malheureusement, la réalité, c'est que beaucoup de gens continuent de faire tout ça. Dans le meilleur des cas, le développement Web est quelque chose de compliqué et ce genre de mauvaises pratiques ne fait qu'empirer les choses. Utiliser les standards du Web et leurs bonnes pratiques, tels qu'ils sont présentés ici, est la meilleure façon de vous en sortir.

Structure des articles

Ce curriculum est composé d'une série d'articles. Chaque article se focalise sur un sujet précis avec le contexte de ce sujet, les bases théoriques essentielles, des exemples et tutoriels pratiques ainsi que des questionnaires pour tester vos connaissances.

Qui devrait utiliser ce curriculum

Ce curriculum est fait pour toute personne désireuse d'apprendre le Web design basé sur les standards du Web en partant de zéro. Il essaye d’emmener le lecteur du statut de simple internaute à celui de développeur Web maitrisant HTML, CSS et Javascript. Cela va jusqu'aux fonctionnalités avancées de HTML5/CSS3 tout en donnant un bon niveau de connaissances sur des sujets connexes comme l'architecture de l'information, l’expérience utilisateur (UX), le design adaptatif, l'optimisation pour les mobiles ou encore la typographie.

Il devrait pouvoir vous donner assez de connaissances pour envisager d'entrer sereinement sur le marché de l'emploi (bien évidement l’expérience, elle, ne peut pas s'enseigner).

A qui est-il destiné exactement ? Il devrait être utilisable par toute personne qui veut apprendre le Web design "de la bonne façon" :

Les étudiants ou professeurs : Nous l'avons déjà signalé, cet ensemble d'articles est un point de départ idéal pour créer votre propre programme pour vos élèves, ou pour simplement enrichir vos supports de cours existant. Pour tout étudiant suivant déjà des cours liés au Web, vous devriez utiliser ce matériel pour compléter vos connaissances et vous devriez faire du lobbyisme auprès de vos professeurs pour qu'ils fassent de même !
Les lycéens et collégiens : Bien que ce curriculum ait été écrit à l'attention des adultes, il n'y a aucune raison que les plus jeunes ne puissent pas en bénéficier. Faites un essai et voyez ce que ça donne.
Les designers et développeurs Web : Il y a encore beaucoup de développeurs et de designer Web qui n'utilisent ni les standards du Web ni les bonnes pratiques qui y sont associées. Ceux-là devraient essayer d'enrichir leurs connaissances et nous les encourageons à laisser à ce curriculum une chance de leur montrer à quel point les standards du Web sont avantageux et facile à adopter. Pour ceux qui connaissent déjà ces standards, nous sommes sur que ce curriculum leur sera utile pour aider les autres, améliorer leurs compétences, se remémorer des points obscures ou encore trouver des ressources pour convaincre leurs patrons ou leurs clients que des considérations comme l'accessibilité sont importantes.
Les responsables de formations : Ce curriculum est l'opportunité idéale pour fournir une formation quasi-gratuite aux employés de leur entreprise.

Nous n'avons pas l'intention de faire payer les gens pour ce matériel pédagogique. Il est réalisé sous licence Creative Commons ce qui signifie qu'il est disponible gratuitement pour tous ceux qui veulent l'utiliser tant qu'ils respectent les conditions de cette licence.

Remerciement

Les personnes qui ont participé à l'élaboration de ce curriculum sont bien trop nombreuses pour que nous puissions toutes les citer. Nous savons qu'elles se reconnaitront et nous aimerions leurs adresser nos remerciements les plus sincères pour leurs contributions.

En savoir plus

Nous cherchons à améliorer ce curriculum en permanence et à le faire adopter par autant de gens que possible. Si vous avez des suggestions d'amélioration, des commentaires ou si vous voulez discuter de son utilisation où que ce soit, n’hésitez pas à nous contacter (en anglais) : Vous pouvez poser des questions ou simplement vous tenir au courant des derniers changements sur la liste de diffusion W3C public evangelist (en) ou bien vous pouvez écrire à Chris Mills à cmills [at] opera [dot] com. N'hésitez pas non plus à utiliser les pages de discussion des articles (via le lien "discussion" en haut de chaque page) ou même à éditer directement un article si vous pensez pourvoir l'améliorer (via le lien "edit" en haut de chaque page). Pour en savoir plus sur la genèse de ce curriculum, vous pouvez lire Web Education moving forward — Opera WSC goes to the W3C! (en)

Note : A l'origine, cet article fait partie du Web Standards Curriculum d'Opera, disponible à l'adresse Introductory material. Il a été rédigé par Chris Mills. Tout comme l'original, cet article est publié sous licence Creative Commons Attribution, Non Commercial — Partage à l'identique 2.5