Programmation Web - HTML5 - Formation complète

Name: Programmation Web - HTML5 - Formation complète
Rating: 5.0 (2 reviews)

Apprenons tout de A à Z sur le HTML5

Created byJean-Michel ROSEE

Last updated 7/2025

French

What you'll learn

Vous serez tout la programmation en HTML5
Vous serez capable de concevoir la structure d'un site web et valider celui-ci en HTML5
Comprendre et identifier lié les erreurs en HTML5
Vous serez capable de passer à la suite de la formation, l'apprentissage du CSS3

Course content

7 sections • 32 lectures • 7h 23m total length

Présentation de la formation6:11
Présentation de la formation

Le but de cette vidéo est de vous présenter la formation sur l'apprentissage du HTML5 de A à Z avec la description des différentes étapes que l'on va passer au fur et à mesure.

Je m'appelle Jean-Michel ROSEE et je serais votre formateur tout au long de ces vidéos,

Bonne vidéo et bon apprentissage,
Présentation de l'interface4:06
Aperçu de l'interface Udemy

Il est toujours intéressant de comprendre comment fonctionne l'interface Udemy, voilà pourquoi une vidéo a été faite dans ce sens afin de vous aider à mieux comprendre celle-ci.
Présentation du module Ressources3:22
Module Ressources

Chaque leçon vu ensemble est accompagnée d'un répertoire avec tout le travail qui a été fait.
Mais ce n'est pas tout, j'ai aussi fait en sorte de vous créer un petit fichier web qui regroupe d'une part, tous les liens que je vous ai noté fans le fichier texte mais aussi plein d'informations complémentaires ou supplémentaires sur tel ou tel thème.
A propos des notes et commentaires2:58
Avis et remarques

Au bout d'un certain moment de la formation, il vous sera demander de me mettre une note et une remarque.
Avant toute chose, n'oubliez pas que vous pouvez me poser des questions par le biais du système d'apprentissage Udemy et bien entendu je me ferais un plaisir de vous répondre,

Voilà, bonne formation

Naissance du Web4:07
Origine et naissance du Web

Allez un peu d'histoire histoire de voir l'évolution de la la communication jusqu'à l'arrivée d'Internet.
Gestion d'un navigateur4:06
Gestion des navigateurs

La gestion d'un navigateur permettra d'interpréter et pouvoir mettre en forme la structure d'une page Web.
Installation d'un IDE8:32
Installation d'un outil de type IDE
Il existe une multitude d'outil permettant de coder plus facilement comme ATOM, SublimeText et ainsi de suite.
Dans notre cas, nous utiliserons l'outil de Microsoft qui se nomme Visual Studio Code
Enregistrement d'une page web4:09
Enregistrement fichier Web

Avant de commencer, il est important de vous montrer comment enregistrer un fichier web afin que celui-ci soit interpréter et visible par un navigateur.
Introduction

Gestion de la structure d'une page Web8:10
La structure de base

Commençons à étudier la structure de base d'une page Web afin d'en comprendre les rouages.
Nous allons commencer à comprendre ce que l'on appelle un doctype, une balise HTML, HEAD et BODY.
Gestion des balises16:05
Gestion de quelques balises de base

Après avoir vu le début de le structure d'une page Web, il va être intéressant de se mettre les mains dans le cambouis afin de commencer à comprendre ce que l'on appelle une balise.
Mettre en forme le texte, le souligner, le mettre en gras, en italique, voir les différentes titres et ainsi de suite.
Encodage de caractères12:49
Encodage d'une page Web
Heureusement depuis la version HTML5, l'encodage est maintenant plus facile à gérer mais néanmoins certains caractères devront être utilisé comme des caractères ASCII, vous ne comprenez pas ce que je dis, alors cette vidéo vous expliquera tout.
Gestions de listes15:09
Gestion des listes

Vous avez déjà vu quelques balises, mais il existe des balises dédiées aux listes qui peuvent être ordonnées ou non ordonnées ou des liste de définitions.
Gestions des images17:32
Gestion des images

Même si vous commencez à apprendre le langage HTML et que nous ne verrons pas ou très peu de CSS, il est bien entendu plus cool de mettre en place des images, nous verrons donc comment intégrer des images ou des images aléatoires grâce au site web https://picsum.photos/
Gestions des liens18:55
Gestion des liens

La gestion des liens pourra se faire se faire de plusieurs façons:

On aura la gestion de liens entre pages
La gestion de liens inter pages symbolisé par un #
Un lien pourra être associé à une image afin d'agrandir celle-ci ou créer un fichier zippé
Et en dernier, on pourra associer un lien à un email mais de moins en moins utilisé
Gestion des tableaux18:59
Gestion des tableaux

Bien que la gestion des tableaux n'est presque plus utilisé, il est toujours intéressant de savoir que ces balises existent, on apprendra donc à créer différents tableaux avec différents styles en y intégrant des images.
Gestion des commentaires6:53
Gestion d'un commentaire

Commenter votre programmation est primordiale, nous verrons comment commenter des blocs ou des morceaux de codes ou même noter des informations qui pourront aider par la suite.
Bien entendu, tous ces commentaires ne sont pas vu lors de la visualisation d'une page web.
QUIZZ HTML5 - Partie 01

Gestion de la balise DIV et SPAN12:17
Gestion de la balise DIV et SPAN

Il est très important de comprendre que vous aurez des balises de type SPAN(en ligne) ou BLOC (avec un retour chariot et à la ligne), nous allons donc nous pencher sur ces deux types de balises.
Différence entre le chemin relatif et absolu12:18
Relatif ou Absolu

Nous allons voir la différence primordiale entre un chemin relatif et absolu, vous verrez aussi ce que peut signifier ce fameux ..
Donc En HTML, un chemin absolu est l'adresse complète d'une ressource à partir de la racine du site Web, tandis qu'un chemin relatif est l'adresse d'une ressource à partir du répertoire courant.
Gestion de la structure en HTML522:40
Gestion de la structure HTML5

Après avoir les balises standard comme <HEAD>, <BODY>, <HTML>, il existe bien entendu pleins d'autres balises depuis la venue du langage HTML5, nous verrons les balises comme :

SECTION
ARTICLE
HEADER
NAV
FOOTER
ASIDE

Et ainsi de suite, grâce à ces balises on va pouvoir plus facilement structurer le contenu de notre page WEB.
Aperçu et apprentissage sur l'inspecteur Web17:03
Inspecteur Web

Il faudrait une formation complète pour pouvoir vous expliquer tout ce que peut faire l'outil Inspecteur Web, celui-ci regorge d'outils et d'options permettant de mieux cerner les problèmes ou erreurs sur vos pages web, mais pas que, vous pouvez retrouver toutes vos images, vos taux de transfert et ainsi de suite.
Gestion des autres balises de mise en forme21:17
Autres balises

Afin d'aller plus loin, nous allons parcourir les différentes balises HTML5 en vous donnant une petite description de celles-ci, bien entendu le plus important est de pouvoir retrouver sur le site web https://developer.mozilla.org/fr/ la balise qui conviendra au travail à faire.
Mise en ligne du site Web28:23
Mise en ligne du site web

Il va être intéressant de mettre en ligne notre site web, même si celui-ci n'est pas terminé, avant de commencer à comprendre les rouages de transfert de fichiers (Web, image ...) vers le serveur qui hébergera nos différentes pages Web.
Nous allons utiliser un provider ou fournisseur gratuit afin d'y héberger nos différentes pages web.
Bien entendu rien ne vous empêche de prendre un autre fournisseur gratuit ou payant, à vous de voir.
Gestion d'un formulaire - partie 0128:42
Gestion d'un formulaire - Partie 01

La gestion d'un formulaire pourra être très utile pour la mise en place de Newsletter, l'inscription à un site web, formulaire de commande, formulaire de recherche et ainsi de suite.
Dans cette première partie, nous verrons les balises standard comme :

<FORM>
<LABEL>
<INPUT>
<TEXTAREA> avec bien entendu les différentes options que cela peut comporter.

Nous verrons la suite dans la deuxième partie
Gestion d'un formulaire - partie 0215:57
Gestion d'un formulaire - Partie 02

Dans la seconde partie, nous verrons des options plus accès pour les téléphones mobiles, Internet n'arrêtant pas d'évoluer, pleins de balises d'options ont été crées afin de répondre aux besoins des nouvelles techniques ou technologies.
Gestion des formats audios et vidéos19:37
Gestion des format AUDIO et VIDEO

Après avoir vu la gestion et l'insertion d'images, nous allons voir comment insérer de l'audio ou de la vidéo, ce qui est très commun maintenant pour les différents sites Web.

Au niveau de la balise <AUDIO>, nous verrons les différents formats qui sont utilisés.
Au niveau de la balise <VIDEO>, là-aussi nous verrons les différents formats et options que l'on pourra ajouter.
Gestion d'une iframe10:59
Gestion d'une IFRAME

Bien que la balise <IFRAME> soit de moins en moins utilisée, il est toujours intéressant de voir ce que l'on peut faire avec, dans mon cas, je vous monterais l'exemple d'insertion d'une carte de type Google MAPS.
On peut aussi insérer des pages dans d'autres pages web mais très mal supporté par les Smartphones.
Gestion des autres balises - allons plus loin18:26
Autres balises - Allons plus loin

Afin d'aller encore plus loin aux niveaux balises en HTML5, nous allons voir grâce au site web https://www.w3schools.com encore d'autres balises, là aussi avec un petit descriptif et utilisation de celle-ci.
Validation de votre site web en ligne16:09
Validation du site Web

Bien, vous avez maintenant une bonne connaissance sur la programmation en HTML5, ce qui va être maintenant intéressant c'est de vérifier si vous n'avez pas fait d'erreurs dans votre code.
Il existe sur le Web une multitude d'outils permettant de vérifier votre code, votre site web, mais j'ai préféré privilégier l'outil du W3C qui se nomme https://validator.w3.org

on pourrait soit :

Vérifier l'adresse d'un site web
Soit téléchargcer une page web
Inclure directement le code
Toutes ces méthodes permettront de voir si le code est correct ou non toujours par rapport au consortium W3C.
QUIZZ HTML5 - Partie 02

Conception d'un site Web27:41
Conception d'un site web

Nous allons faire de nouveau un site web qui sera composé de 3 pages web (index.html, portfolio.html et contact.html), c'est le genre de site web que l'on rencontre afin de présenter un site Web dit vitrine.
Nous allons donc décomposer (copier/coller de codes) celui-ci par différents blocs en HTML5 ce qui nous permettra de faire en même temps une révision de tout ce que j'ai pu vous enseigner.
Mise en place du CSS321:26
Conception d'une page Web (HTML5/CSS3)

Bon je sais, cette formation ne devait pas comporter de CSS, mais je me suis dit, il va être intéressant de vous montrer la puissance de ce second langage que je proposerais dans une prochaine formation, et surtout si vous voulez déjà avoir un aperçu de celui-ci, je vous propose une formation gratuite de plus d'une heure afin de vous familiariser sur ce nouveau langage.

Donc, sur cette vidéo, je vais vous faire une description rapide du CSS afin que vous ne soyez pas trop perdu, mais comme je vous ai dis, vous pourrez déjà récupérer la formation gratuite afin de commencer à apprendre les bases en CSS3

Conclusion5:28
Conclusion

Et voilà, c'est terminé pour cette formation, c'est donc la première formation complète sur l'apprentissage du HTML5 avec un peu de CSS.
Ne pas hésiter à me poser des questions, si vous avez des questions ou des suppositions d'ajout de contenu qui permettrait d'enrichir cette formation, je me ferais un plaisir de vous répondre.

Donc comme je vous ai dit, la prochaine formation sera une formation complète sur l'apprentissage du CSS3, sachant que vous avez dès à présent une formation gratuite de presque deux heures sur les bases du CSS3 pour ceux et celles qui seraient impatient(e)s de démarrer l'apprentissage ce nouveau langage.

J'espère que vous avez pris autant de plaisir à suivre cette formation que j'ai eu à concevoir celle-ci, je vous dis donc à la prochaine formation.
Votre formateur: Jean-Michel ROSEE

Evolution 202513:08
Evolution 2025

Bon il est clair, que vous en savez déjà plus sur le langage HTML5 et je vous ai montré aussi un peu de CSS3, je vous rappelle que vous avez une première formation gratuite sur le CSS3.
Bon pour revenir à l'évolution du langage HTML5, on se pencher de plus prés sur une nouveau site web qui sera prêt à être mise en ligne, on va utiliser beaucoup les <META>

Requirements

Aucune expérience n'est requise, tout vous sera expliqué, vous avez juste besoin d'un ordinateur et d'une connexion internet

Description

Bonjour et bienvenue sur cette formation complète

Vous êtes passionné(e) par le développement web et vous souhaitez apprendre à créer des sites web dynamiques et interactifs ou alors vous êtes débutant(e) et souhaitez apprendre à coder.

Cette formation complète d'apprentissage du HTML5 est faite pour vous !

Mais qu'est-ce que le HTML5 :

Le HTML5 est la dernière version du langage de balisage de pages web le plus utilisé au monde. Il permet de créer des sites web modernes et attrayants en utilisant une variété de fonctionnalités et de balises, telles que les formulaires, l'audio, la vidéo, les graphiques vectoriels, les animations et bien plus encore.

Vous voulez devenir un(e) expert(e) en développement web et créer des sites web professionnels et attrayants ? Alors ne cherchez plus, notre formation complète d'apprentissage du HTML5 est faite pour vous !

Avec plus de 7 heures de cours, cette formation vous permettra de maîtriser le HTML5, nous verrons tout de A à Z, en balayant les différentes balises et leurs utilisations.

On commencera par:

Naissance du web, origine, gestion d'un navigateur, d'un IDE
Ensuite on attaquera la structure d'une page web basique (liste à puces, gestion image, lien, tableau, commentaire)
Ensuite on continuera avec la gestion des blocs, nouvelles balises en HTML5, mise en ligne du site web, gestion d'un formulaire en deux parties.
Afin d'animer tout cela, nous verrons comment intégrer du son, de la vidéo, des cartes de type google Maps
Dernière étape, on apprendra à valider le code de notre site web par le biais du site web Validator
Cerise sur le gâteau, nous mettrons un peu de CSS3 afin de rendre plus cool celui-ci, même si cette formation était dédié à l'apprentissage du HTML5.

Histoire d'agrémenter le tout, je vous ai concocté quelques QUIZZ afin de valider vos acquis.

Au niveau des ressources, pour chaque leçon, un répertoire(fichier web, image) est à disposition afin de pouvoir reproduire le même exercice et vous trouverez aussi un répertoire noté Aide_HTML5 récapitulant tout le travail que l'on aura fait ensemble sur l'apprentissage du HTML5 avec une multitude de liens, conseils, astuces.

J'ai fait en sorte que mes leçons soient claires et accessibles, bien entendu ne pas hésiter à me poser des questions, je me ferais un plaisir de vous répondre,

Alors n'attendez plus, inscrivez-vous dès maintenant à cette formation d'apprentissage du HTML5 et devenez un(e) expert(e) en développement web !

Bon apprentissage et bonne formation

Who this course is for:

Cette formation s'adresse aux personnes qui souhaitent comprendre et apprendre le HTML5, aux Développeur web, intégrateur web.

Programmation Web - HTML5 - Formation complète

What you'll learn

Explore related topics

Course content

Présentation de la formation4 lectures • 17min

Introduction4 lectures • 21min

Apprendre le langage HTML - Partie 018 lectures • 1hr 55min

Apprendre le langage HTML - Partie 0212 lectures • 3hr 44min

Apprendre le langage HTML - Partie 032 lectures • 49min

Conclusion1 lecture • 5min

Évolution 20251 lecture • 13min

Requirements

Description

Who this course is for: