Contenu du cours
Leçon 1
Ce cours est votre premier pas vers le développement web. Nous présenterons les éléments clés de toute page web : les balises HTML et leur structure de contenu. Vous apprendrez à mettre en forme du texte avec des titres et des paragraphes, à créer des listes et des tableaux pour l'organisation, et à ajouter des images pour un impact visuel. Nous aborderons également les formulaires, qui facilitent l'interaction, et soulignerons le rôle du HTML5 dans la conception web moderne. Au fil du cours, vous découvrirez comment le HTML s'associe au CSS et au JavaScript pour donner vie aux sites web, notamment grâce à des fonctionnalités comme le canevas HTML5. À la fin de ce cours, vous disposerez de bases solides pour poursuivre la formation complète en développement web.
0/2
Leçon 2
Dans ce cours, nous explorerons un ensemble d'éléments HTML qui rendent les pages web interactives et dynamiques. Vous apprendrez à créer des formulaires permettant aux utilisateurs de saisir et d'envoyer des données, ainsi que des zones de texte pour des blocs de saisie plus volumineux. Nous examinerons également la balise « marquee », à la fois originale et historique, et pourquoi elle est rarement utilisée dans le développement web moderne. Nous verrons ensuite comment ajouter des fonctionnalités avec la balise « script » et pourquoi la balise « noscript » est importante pour les visiteurs dont les navigateurs bloquent ou ne prennent pas en charge JavaScript. Enfin, nous reviendrons sur l'élément « title » dans le — un détail minime mais essentiel pour chaque page. Ces concepts comblent le fossé entre le HTML statique et l'univers interactif de JavaScript, du canevas HTML5 et des pratiques modernes de développement web.
0/2
Leçon 3
Dans cette leçon, nous enrichissons notre boîte à outils avec diverses balises HTML et HTML5 qui donnent du sens, de la structure et de la puissance aux pages web. Vous découvrirez comment met en valeur une définition et pourquoi est préféré à pour le texte important. Nous pratiquerons les bases de la mise en page avec
, et découvrirons comment , , and
permettent d'afficher clairement le code et les exemples de sortie.

Nous passons ensuite au lien et au multimédia : pour la navigation, pour les ressources externes, et les éléments   
et
0/2
Leçon 4
Dans cette leçon, nous nous concentrons sur les balises HTML5 supplémentaires qui rendent les formulaires, les mises en page et le contenu structuré plus performants et conviviaux. Vous verrez comment permet aux utilisateurs de télécharger des fichiers et comment et afficher des indicateurs visuels comme l'achèvement des tâches ou des valeurs mesurables. Nous travaillerons également avec , qui propose aux utilisateurs des suggestions d'options lors de la saisie dans un formulaire. Pour la structure du document, nous étudierons les éléments sémantiques.
,
, et
— essentiel pour organiser le contenu en blocs significatifs. Nous explorerons également
et
, idéal pour associer des images ou des schémas à des légendes descriptives. Enfin, nous nous exercerons à utiliser pour marquer les dates et les heures dans un format lisible par machine, et l'interactif
et Les balises permettent aux utilisateurs de développer et de réduire le contenu. À la fin de ce cours, vous saurez combiner ces balises pour créer des pages web HTML5 plus riches, plus sémantiques et plus interactives.
0/2
Leçon 5
Dans cette leçon, vous apprendrez à dessiner et animer des graphiques avec <canvas> et JavaScript. Nous configurerons un canevas dans le DOM, récupérerons son contexte de rendu 2D et afficherons des formes, du texte et des images. Vous vous exercerez aux tracés (moveTo, lineTo, arc), aux remplissages et aux contours, aux couleurs et aux dégradés, aux jointures de lignes et au dessin de texte. Nous aborderons le dessin d'images/sprites, la gestion du ratio de pixels de l'appareil pour un rendu net, et l'effacement/redessin de chaque image avec requestAnimationFrame pour une animation fluide. Vous découvrirez également l'interactivité de base avec les événements souris/toucher et apprendrez à enregistrer/exporter des dessins via toDataURL. À la fin, vous maîtriserez le workflow de base d'un canevas : initialiser, dessiner, mettre à jour et animer.
0/2
Leçon 6
SVG (Scalable Vector Graphics). SVG est un graphique vectoriel XML que vous pouvez insérer dans la page avec <svg>. Il s'adapte parfaitement à toutes les tailles, est accessible et sémantique, et les formes individuelles (comme <rect>, <circle>, <path>, <text>) sont des éléments DOM que vous pouvez styliser avec CSS et manipuler avec JS. Les attributs clés incluent viewBox, width, height, fill, stroke, stroke-width. SVG est idéal pour les icônes, les graphiques, les logos et les diagrammes interactifs. Entités (affichant des caractères réservés). Pour afficher les caractères normalement interprétés par HTML, utilisez les entités : &lt; → < , &gt; → > , &amp; → & , &quot; → " , &apos; → ' , &nbsp; → espace insécable. Les entités nommées et numériques (comme ©) fonctionnent toutes deux. (obsolète). <center> est obsolète. Centrez avec CSS : texte avec text-align: center;, blocs avec margin: 0 auto; ou mise en page moderne (Flex/Grid). Glisser-déposer HTML5. Activez-le en définissant draggable="true" sur un élément et en écoutant dragstart. Autorisez les dépôts en empêchant la valeur par défaut lors du dragover. Utilisez l'API DataTransfer dans les événements pour définir les données lors du dragstart et obtenir les données lors du drop. Événements typiques : dragstart, dragover, drop, plus dragenter, dragleave, dragend.
0/2
Leçon 7
Stockage clé-valeur (chaînes uniquement) limité à l'origine de la page et persistant après les rechargements et redémarrages. Méthodes principales : setItem(key, value), getItem(key), removeItem(key), clear(), key(index) et la propriété length. Stockage des objets avec JSON.stringify / JSON.parse. Les quotas sont généralement de quelques Mo par origine. Synchrone (blocage du thread principal), protégé par la même origine, toute modification déclenche un événement de stockage dans les autres onglets de la même origine (et non dans l'onglet concerné). Utilisez sessionStorage pour une durée de vie par onglet. Évitez de stocker des secrets ; les données sont lisibles par tout script de la même origine et peuvent être synchronisées dans certains navigateurs. La navigation privée peut réduire les quotas ou effacer les données à la sortie.
0/2
Cours HTML complet – De zéro à héros

Dans cette leçon, nous enrichissons notre boîte à outils avec diverses balises HTML et HTML5 qui donnent du sens, de la structure et du pouvoir multimédia aux pages web. Vous découvrirez comment &lt;dfn&gt; met en évidence une définition et pourquoi &lt;strong&gt; est préféré à &lt;b&gt; pour le texte important. Nous pratiquerons les bases de la mise en page avec &lt;div&gt;, et apprenez comment &lt;samp&gt;, &lt;code&gt;, et &lt;pre&gt; aide à afficher clairement le code et l'exemple de sortie.

Nous passons ensuite à la liaison et au multimédia : &lt;a href="..."&gt; pour la navigation, &lt;link&gt; pour les ressources externes, et la &lt;audio&gt; et &lt;video&gt; éléments pour l'intégration de contenu multimédia enrichi. Enfin, nous introduisons la structure sémantique HTML5 avec &lt;article&gt; et &lt;aside&gt;, qui donnent aux pages un sens plus clair à la fois pour les navigateurs et les moteurs de recherche.

À la fin de cette session, vous comprendrez comment ces balises améliorent la lisibilité, l'accessibilité et l'expérience utilisateur, vous rapprochant ainsi de la création de sites Web modernes et bien structurés.