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.