Quelques notes — Programme de formation HTML & CSS

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Quelques notes — Programme de formation HTML & CSS

Les langages du web HTML et CSS sont généralement structurés autour de concepts qui ont peu à voir avec la manière dont ils seront utilisés : les concepteurs ne sont généralement pas les auteurs. Il appartient à ces derniers de tâtonner un peu, beaucoup ou passionnément et d’en parler avec leurs voisins pour connaitre les bonnes pratiques du jour. Pour dire les choses autrement, les langages du web ne sont pas livrés avec «le» mode d’emploi. La plupart des tutoriels que l’on trouve sur le web reprennent généralement le découpage que l’on trouve dans les spécifications du W3C.

Si les spécifications sont très utiles pour comprendre la nature des ingrédients (balises HTML et propriétés CSS), elles ne nous disent pas grand chose sur la manière de les mettre en oeuvre pour réaliser un site web. S’il n’existe pas de recette toute faite, c’est certainement à cause des plats (les contenus) qui sont uniques.

Enfin, en même temps, on ne peut pas ne pas constater que les sites Web sont à 90% composés de :

  • En-tête pour : logo, baseline, visuel, un ou plusieurs menus de navigation,
  • Zone de contenu principale : texte, image, vidéo,
  • Une, deux ou trois barre latérales (Sidebar) à droite, à gauche de la zone de contenu,
  • Pied de page (Footer).

Depuis quelques temps, je réfléchis à la mise en place d’un plan de cours pour l’apprentissage du couple HTML & CSS. Dans l’idéal, cette formation devrait être :

  1. Assimilable rapidement par les débutants qui n’ont jamais vu une balise HTML ou une règle CSS,
  2. Convainquante pour inciter les créatifs à se pencher sur les notions d’intégration web,
  3. Intéressante pour ceux qui utilisent ces langages dans leur vie professionnelle ou en amateur (dans le noble sens du terme).

La plupart des plans de cours sur le sujet séparent souvent l’étude du HTML des CSS. J’aimerais mettre en place une méthode globale s’inspirant (très librement) de la Programmation Orientée Objet (POO), en initialisant un super objet — le site web — englobant d’autres objets comme le header, la sidebar, les menus et les différentes zones de contenu que l’on trouve généralement dans un site internet ou sur un blog (titres, sous-titres, paragraphes, liste, etc.). A cet égard, HTML 5 permet d’aller dans ce sens avec les balises header, nav, article, aside, footer.

CSS et HTML sont dans un bateau…

Sans le HTML, les CSS ne servent à rien. Dans la pratique, on rencontre rarement HTML sans CSS. Au lieu d’aborder les deux langages de manière séquentielle, j’envisage de démarrer par la mise en place d’un vocabulaire de base qui fournirait les briques élémentaires nécessaires à la construction d’un site web. Cela pourrait s’effectuer en abordant les deux langages simultanément tout en ajoutant les notions d’ergonomie et d’accessibilité  : les bonnes manières s’apprennent dès le début.

Ces briques seraient composées de bouts de code, de module, de composés HTML & CSS «prêts à l’emploi» à expliquer aux apprenants par le biais d’exercices pratiques qui débuteraient le plus tôt possible dans la formation. L’apprenant serait ensuite invité à assembler ces briques pour construire une page web. Le formateur fournissant à cette occasion les indispensables conseils, trucs et astuces concernant l’apparence sur les différents navigateurs, l’utilisation des commentaires conditionnels, etc., selon le temps disponible.

Parmi les méthodes proposées dans les commentaires du billet d’Aymeric, nombreuses sont celles qui préconisent de partir du contenu pour commencer l’apprentissage de HTML. Je suis généralement le premier à prendre mon Stabilo ® pour baliser le contenu avant même de prendre une tablette graphique ou mon Notepad++. Toutefois, intégrer le balisage du contenu dans la formation peut s’avérer chronophage et ne pas trouver sa place dans le temps généralement impartie dans les centres de formation où un module de base dure rarement plus d’une semaine.

En outre, indépendamment du contenu, l’immense majorité des sites web partage les mêmes caractéristiques. On pourrait passer beaucoup de temps à lister tous les éléments constituant un site et faire des statistiques pour savoir si tel ou tel élément se retrouve le plus souvent dans le header, la sidebar ou le footer, etc. mais force est de constater qu’à ce niveau, un consensus se dégage : le logo, la baseline et le menu principal se retrouvent dans haut de la page tandis que les informations de contact et de copyright se situent plutôt en bas de la page !

On pourrait donc, dans le cadre d’une formation sur cinq jours,  fixer les idées autour des zones que l’on rencontre généralement sur les sites web ou les blogs :

  1. un header (pour le logo, la baseline, la navigation principale et les liens d’évitement),
  2. une zone de contenu…
  3. … associée à une ou plusieurs barres latérales,
  4. avec un footer (contact, crédits, copyright) pour finir.

Ce découpage mélange joyeusement l’analyse fonctionnelle et la présentation, mais présente l’avantage de fixer les idées sur des choses auxquelles les apprenants ont été confrontés, ce qui a son importance.

Pour aborder l’apprentissage des balises et la sémantique qui leur est associée, je propose de partir du logo qui peut être le premier niveau de la page d’accueil (ce n’est pas gravé dans le marbre, cf. 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO).  On pourra lui réserver la balise h1 avec un background pour l’image. On pourra masquer le texte d’une manière ou d’une autre.

Partant du principe qu’une zone de menu sera souvent composée avec une liste de liens, il me semble utile de proposer dès le début les méthodes généralement utilisées pour faire flotter les li, transformer les a en bloc, utiliser les images de fonds, etc.

Une zone de contenu secondaire est souvent représentée par une barre latérale placée à droite ou à gauche de la zone de contenu. Pourquoi ne pas introduire directement les notions de positionnement avec float et les positions relative et absolute ? Pour un débutant, ces notions ne sont pas plus difficiles à comprendre que le reste. Je me dis qu’elle seront peut-être même plus rapidement assimilées en les abordant dès le début, même si les notions de contexte de formatage ou de clearing ne sont pas très évidentes au premier abord.

Je reviendrais sur le sujet un peu plus tard selon vos retours. L’objectif est de remplir un programme de formation détaillé sur 5 jours permettant à des personnes ayant des pré-requis réduits au minimum de pouvoir créer une page web «classique».

Pour ne pas conclure

Ce billet est une ébauche que je compléterais au fur et à mesure avec vos suggestions. Ce billet traine dans mes brouillons depuis que Aymeric a eu — dès 2007 — l’excellente idée de synthétiser les commentaires qui avaient suivis son billet sur le plan de formation idéal pour l’apprentissage de XHTML et des CSS que je vous invite à lire sans plus attendre.

Linkographie

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



7 commentaires pour “Quelques notes — Programme de formation HTML & CSS”

  1. Article très complet et intéressant. Je suis novice en programmation (débutante) et j’avoue qu’un cours comme celui-là serait hyper intéressant parce qu’il inclut, en plus de la programmation, des notions d’ergonomie , des exercices, de l’intégration WEB et tout ça dans un cours!

  2. Etudinfo dit :

    Dans quelle partie vas tu caser l’habillage des formulaires ?

  3. Houlaaa, tu as décidé de voyager dans le temps ? ;)

  4. MarieEve dit :

    Cette formation me semble une idée tout à fait réalisable. J’ai appris css, alors que j’étais une parfaite débutante (même pas html) en 2008. Je me souviens plus du nombre exact de jours, sûrement entre 7 et 10. On a appris à créer un petit gabarit deux colonnes avec la techniques des colonnes factices, les commentaires conditionnels, les menus « floattant » et autres joyeusetés :) Par la suite, j’ai rencontré des personnes qui pensaient qu’il valait mieux commencer l’apprentissage des pages web par une mise en page en tableau, et puis ensuite passer au css. Mais je pense qu’on peut très bien commencer direct par le css. Bien sûr, on ne peut pas apprendre toutes les subtilités en 10 jours (y arrive-t-on jamais?). En plus si tu complète ça avec de l’ergonomie, c’est le top. C’est original ton approche OO du css, j’ai hâte de lire la suite de ton programme!

  5. Naïa dit :

    Les méthodes globales d’apprentissage présentent tout de même un soucis selon moi : le risque de confusion. Si effectivement ton programme s’applique à des purs débutants (ou même à ceux qui ont vaguement bidouillé), il est parfois difficile de savoir si la solution optimale est en css ou en html. Même encore aujourd’hui (je dis ça alors qu’au final cela fait peu d’années que je m’y intéresse vraiment), je me surprends à ne pas avoir pensé à tel ou tel cas (alors que dans la pratique j’y étais confrontée sans le savoir). Comme je lis beaucoup, j’anticipe beaucoup d’erreurs, mais je ne pense pas que tous tes formés en feront autant (car ils ont surement bien d’autres choses à faire j’imagine).

    Je pense que tout le défi ne sera pas dans la réalisation d’un programme qui mêle css et html (+ SEO) mais de réussir à les lier tout en ancrant dans les esprits ce qui les distingue et les usages précis que l’on peut faire de l’un et de l’autre. Une approche par le projet, comme tu sembles le suggérer, me semble idéale. Les questions se poseront d’elles-mêmes et alors tu pourras y apporter les réponses (ou guider tes apprentis sur la voie).

    Je pense par exemple à un cas que j’ai revu récemment, le cas du :before et :after : dans quels cas il vaut mieux utiliser la css ? Dans quel cas le contenu doit se trouver dans le html ? Et là tu as les deux et un choix qui se posent, permettant d’appuyer les différences de chacun de ces « codes ». Je ne sais pas jusqu’où tu comptes aller avec ta formation alors c’est peut-être déjà trop approfondi mais l’idée est là : A mon (humble) avis, partant d’un projet, tout dépendra de la qualité didactique de ton projet et sa pertinence (en vue des questions et problèmes qu’il saura soulever). Je ne saurais me prononcer trop rapidement sur ceux que tu proposes, mais je m’y pencherai peut-être davantage plus tard.

    Je te souhaite bonne chance pour l’élaboration (ou la finition) de cette formation.

    Cordialement, Naïa.

  6. RenoV dit :

    +1 L’idée du programme semble très intéressante. Je cherche actuellement une formation pour un graphiste « print » qui souhaite passer au webdesign et sur la partie html/css le programme que vous proposez semble idéal. Une date pour une première formation ;)

  7. Valérie Tremblay dit :

    Je suis enseignante et conseillère pédagogique en administration, commerce et informatique. Je suis notamment spécialisée en programmation HTML et CSS. J’ai d’ailleurs produit deux manuels de formation à ce sujet. En passant, je suis québecoise.

    L’an dernier, j’ai développé une formation en gestion et création de sites web pour les PME. Dans ce cours, j’enseigne à de parfaits débutants qui n’ont aucune notion. En appuyant sur le fait que c’est programmation orientée vers la mise en forme de texte, ils comprennent le principe de base à l’intérieur du premier trois heures de formation.

    En 45 heures, je leur enseigne la programmation HTML/XHTML (sans logiciel avec notepad++ dans les premiers quinzes heures) et le CSS incluant le positionnement. De plus, on couvre également le référencement, les notions de webdesign (aspect infographie) et l’analyse benchmarking. Avec les manuels de formation, ça va très bien. Nous avons répété l’expérience cette année encore avec succès. Nous avons même ajouté un quinze heures de formation pour un coaching sur leurs projets spécifiques.

    Continue, c’est réalisable. Cependant, si j’ai un conseil à te donner c’est de faire confiance en la capacité d’apprentissage des participants. Le CSS de base est très facile à comprendre avec des connaissances en programmation HTML/XHTML. Bonne journée à tous



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site