Cours d’Initiation HTML et CSS – Apprendre les bases du langage pour créer des sites web

Cours d’Initiation HTML et CSS - Apprendre les bases du langage pour créer des sites web

Un cours d’introduction aux langages HTML et au CSS pour les débutants

La communauté web foisonne de ressources sur les dernières propriétés CSS3 et API HTML5 tendances, pourtant, il semble encore difficile de trouver des ressources fiables et faciles d’accès pour les débutants.

Partant de ce constat, cela fait plus de 5 ans maintenant que j’interviens dans différentes structures, écoles et universités pour donner des formations d’introduction au HTML et CSS. Le public est souvent des étudiants et étudiantes débutantes de filières se destinant à travailler dans les métiers du web plus tard (chefs de projets, designers, marketing et communication) mais sans pour autant forcément devenir des intégrateurs ou des développeurs front ou des personnes amenées à côtoyer du HTML et CSS sans toujours pour autant le pratiquer assidûment ou le comprendre (futurs rédacteurs webs, community managers, etc.)

Le but de ce cours d’initiation n’est donc pas de faire d’eux des développeurs et développeuses chevronnées, mais de leur permettre de comprendre les bases des langages HTML et CSS pour les aider à construire en toute autonomie des pages web simples sans forcément avoir besoin de passer par des éditeurs WYSIWYG.

Si vous êtes intégrateur chevronné, vous n’allez effectivement pas apprendre grand chose :D

Le programme des cours

Dans ces cours je distingue la partie HTML de la partie CSS.

Le cours de HTML

Dans la première partie dédiée au HTML, nous abordons tout d’abord des généralités sur le langage, la syntaxe des balises, éléments et attributs, le doctype, balise body et structure d’un document valide ainsi que les balises meta utiles. Nous nous intéressons ensuite aux éléments de structuration du contenu (div, p, titres h1, etc), les liens hypertextes, la mise en forme de texte (strong, em, etc.), les éléments de liste (ul, ol, li), l’ajout d’images et de médias dans une page web pour finir par une petite introduction aux tableaux HTML et aux formulaires HTML. J’essaie également de sensibiliser les étudiants et personnes formées aux problématiques d’accessibilité tout au long de cette partie.

Formation HTML CSS, aperçu du cours d'initiation au HTML

Le cours de CSS

Dans la partie de formation dédiée au CSS, nous commençons encore une fois par une introduction aux notions de base pour ensuite voir la syntaxe CSS, la généalogie, DOM et (une partie des) différents types de sélecteurs, les couleurs et unités CSS, les propriétés de typographie, polices et puces pour nous intéresser ensuite aux bordures et arrières plans. Une section est ensuite dédiée aux dimensions, margin et padding puis aux alignements d’image grâce aux flottants, propriété display, au positionnement relative, absolute et fixed et une petite introduction à flexbox, grid-layout et un avant goût du responsive pour aller plus loin avec des liens et une bibliographie.

Formation HTML CSS, aperçu du cours d'initiation au CSS

Encore une fois, le but est vraiment de faire là une introduction, sorte de tutoriel de ce à quoi des élèves débutants risquent d’être confrontés, sans pour autant devenir des front-développeurs. L’idée est de poser des bases, le cours pouvant ensuite être complété par des cours plus avancés lors de leur formation.

Mise à disposition du PDF de formation

En discutant avec les étudiants (et certains débutants), je me suis rendu compte que les slides de cours pourraient être utiles en dehors de mes formations. Je vous propose donc de les télécharger directement. Partagez-les, faites en bénéficier le plus grand nombre.

Télécharger le PDF Initiation au HTML – CSS (9 Mo)

J’ai retiré les exercices du support à télécharger car ils n’ont pas vraiment de sens si je ne suis pas là pour les expliquer aux étudiants. Si vous souhaitez un tutoriel plus complet avec les exercices, n’hésitez pas à me contacter par mail et je verrais ce qu’il est possible de faire en terme de formations.

Licence et utilisation

Mes slides de cours d’initiation HTML et CSS sont disponibles sous la licence Attribution – Pas d’Utilisation Commerciale – Partage dans les Mêmes Conditions CC BY-NC-SA

Vous devez créditer l’Œuvre, intégrer un lien vers la licence et indiquer si des modifications ont été effectuées à l’Œuvre. Vous devez indiquer ces informations par tous les moyens raisonnables, sans toutefois suggérer que l’Offrant vous soutient ou soutient la façon dont vous avez utilisé son Oeuvre.

Vous n’êtes pas autorisé à faire un usage commercial de cette Oeuvre, tout ou partie du matériel la composant.

Dans le cas où vous effectuez un remix, que vous transformez, ou créez à partir du matériel composant l’Oeuvre originale, vous devez diffuser l’Oeuvre modifiée dans les même conditions, c’est à dire avec la même licence avec laquelle l’Oeuvre originale a été diffusée.

 

Vous souhaitez des conseils en ergonomie ou en expérience utilisateur ? Un design de site, d'interface ou d'application mobile ? Envie de travailler ensemble ou de m'inviter à donner une conférence ? Consultez mes réalisations ou contactez moi directement.

7 réflexions au sujet de « Cours d’Initiation HTML et CSS – Apprendre les bases du langage pour créer des sites web »

  1. Ping : HTML&CSS – rester en veille /// lycée Gutenberg

  2. Ping : 600 slides d'initiation au HTML/CSS de Stephanie Walter - share.theoti.me

  3. Bonjour Stéphanie,
    Belle initiative que de partager tes slides! Pour ma part, je n’ai jamais passé le pas, n’ayant pas encore pu les rentabiliser… et en plus ils sont tellement moches, que j’ai pas envie que mon absence de talent soit visible de tous ;))
    J’ai regardé la table des matières, pas tout lu, et donc pardon si je fais un contresens… mais j’ai regretté que tu attaques bille en tête sur le “comment”, sans passer par le “pourquoi”. Je veux dire par là: tu dis comment faire ceci et cela, mais pas pourquoi ceci ou cela apparaît et fonctionne dans le navigateur. Je n’ai pas ton expérience de la formation au HTML, à vrai dire je ne l’ai fait qu’une fois. Mais lorsque je l’ai fait, ne trouvant rien de satisfaisant à mon goût, j’ai pris le parti de commencer par expliquer le DOM, sa vie, son oeuvre, pour donner ensuite les clés du HTML et du CSS. C’était risqué, j’aurais pu me heurter à un mur d’incompréhension; mais pas du tout, au contraire cela a fluidifié tout le reste, et justifié naturellement les bonnes pratiques et le code bien formé.
    Si ça t’intéresse, je peux t’envoyer mes slides pour que tu voies ce que ça donne (alors, oui, ils sont bruts de fonderie, moches à pleurer, mais j’avais pas eu le temps, je les ai finis en cours de formation lol). N’hésite pas à me communiquer une adresse mail ;)
    ++

    • Merci :)
      En fait le public de ces cours sont des débutants, souvent dans des formations qui n’ont pas toujours grand chose à voir avec le web (com’, formations de langue), le genre de personnes qui ont déjà du mal parfois avec un ordinateur (j’ai du expliquer comment dézipper les exercices en fois en cours). Je ne souhaitais donc pas les effrayer en commençant par leur expliquer le DOM. Je voulais du concret, qu’ils jouent avec le code dans le navigateur avant de faire de l’abstrait. Encore une fois, le but est pas d’en faire des intégrateurs, mais qu’ils comprennent comment ça fonctionne, à eux de continuer s’ils veulent ensuite aller plus loins vers des ressources plus complètes et complexes.
      Si j’ai bien compris tu as survolé les slides et la table des matières. Je t’encourage à jeter un nouveau oeil aux slides plus en détail cette fois et surtout à la partie sur le CSS. J’y évoque le DOM, toute la partie sur la descendance des sélecteurs, le principe de representer son code HTML comme un arbre, je parle du DOM et du concept sans vraiment le nommer au final. Mais je préfère en parler après plusieurs heures de pratique, c’est moins effrayant.

    • Merci Stéphanie pour ce diaporama très instructif.
      Je donne également un cours d’initiation à des étudiants exactement dans la situation que tu décris (non spécialistes, n’ont jamais vu une ligne de code, ne seront probablement pas intégrateurs), et à la lecture de ton diaporama je me suis posé plein de questions, de deux ordres: pédagogie, et technique.
      Pédagogie :
      – combien d’heures as-tu pour donner ce cours?
      – le résultat auquel doivent arriver les étudiants est-il un site fini (statique, de quelques pages)?
      – ce sont des étudiants en quelle année (licence 1,2, ou 3) ou master?
      – tu as des groupes de combien d’étudiants en moyenne ?

      Technique
      Je suis très attentif à ce que tu proposes car je suis venu à l’idée d’enseigner le HTML/CSS après avoir commencé les cours avec un CMS; je me suis rendu compte que le CMS était un “trompe l’œil” pour les étudiants et ne les sortait pas assez de la logique pousse-bouton. Je me suis aussi rendu compte que la motivation à créer quelque chose soi-même à partir de son code est très forte chez les étudiants, passé la première appréhension. Mais sur un cours de 25h, j’ai fait des choix, et j’ai l’impression que les tiens sont différents (et justement, ça m’intéresse de savoir pourquoi):
      – sur le positionnement, c’est un vrai arrache cheveux; j’ai décidé de leur apprendre directement flexbox, qui simplifie je trouve énormément la donne; pourquoi est-ce que tu l’as laissé hors champ, alors que les navigateurs l’acceptent tous?
      – de même, je leur ai demandé de faire un site (3 pages mini) responsive, partant du principe qu’il serait plus vu sur un tél que sur un grand écran: tu penses que c’est une bonne idée?
      – je projette même de faire la prochaine initiation en mobile first (partant de l’idée que le mobile est plus contraint, et qu’on peut associer “amélioration progressive” et “complexité progressive de l’apprentissage”…
      En fait, je me dis que si ils ont l’occasion de se servir de ses connaissances, ce sera dans les 3/4 prochaines années, et qu’il vaut mieux qu’ils aient en main les standards d’aujourd’hui. Ma à lire ton diaporama, je me demande vraiment : est-ce que je fais fausse route?

      • Hello,
        Combien d’heures : ca depend des formations, 14h dans certaines, 3h + des videos dans d’autres, 10h encore dans une autre, dans tous les cas, PAS ASSEZ :/
        Résultat : c’est une introduction le but c’est de faire une simple page, et surtout de comprendre quand ils vont devoir utiliser un CMS ou lire un cahier des charges les tenants et aboutissants.
        Groupes : entre 7 et 25
        Niveau : Licence 3, Master 1, et des gens en formation (aka des gens qui travaillent dans des agences par exemple)

        Pour Flexbox je suis d’accord, c’est la prochaine étape faire évoluer le cours pour ajouter du flexbox MAIS mon nombre d’heures n’est pas extensible, ça veut dire retirer des choses. En fait je pense que pour le moment encore, beaucoup de sites sur lesquels vont intervenir les étudiants on été construits en flottants, du coup ne pas leur enseigner les flottants serait un handicape s’ils doivent intervenir sur de l’existant (dans leurs stages ou apprentissages).
        Un exemple tout con : beaucoup d’étudiants travaillent avec du WordPress et vont utiliser l’éditeur pour aligner des images. Ils ont donc besoin des flottants pour comprendre ce genre de choses. Float ne va pas disparaitre, on va juste s’en servir à l’avenir pour ce pour quoi c’était fait à savoir des alignements d’image (comme dans l’exemple de mes cours), et pas forcement pour les layouts, effectivement. J’ai aussi l’impression que pleins de devs se jettent dans flexbox sans comprendre les autres propriétés.
        Pareil pour les position: absolute pour faire des modales ou des effets, fixed pour les menus. Bref on peut pas tout faire avec flexbox, j’aimerai l’ajouter un jour, mais il faudrait ajouter des heures :/ De toute façon souvent ils ont un cours plus avancé ensuite, mon cours c’est vraiment un cours de HTML et de CSS, au sens très brut comprendre le langage pas un cours d’intégration web.
        J’enseigne pas le responsive mais je leur propose dans un des layouts une mise en page fluide, et je leur explique qu’avec ca ils ont les bases, le responsive ensuite c’est surtout déplacer des blocs en fonction du contenu dans le navigateur :)
        Je sais pas si tu fais fausse route, ce n’est pas à moi de juger, je connais pas tes étudiants et leurs besoins.