Apprenez le HTML5 dans ce cours gratuit et interactif pour les débutants

Le HTML est l'un des principaux éléments constitutifs du Web, car il encapsule le contenu des sites Web que vous visitez. Cependant, malgré son énorme influence, très peu de gens connaissent réellement son fonctionnement.

Ainsi, afin d'améliorer la culture technologique du monde, nous nous sommes associés au développeur, concepteur et enseignant Eric Tirado et avons créé un cours gratuit sur HTML5.

Cliquez sur l'image pour accéder à la page du cours

Tout au long du cours, Eric vous fera passer du niveau débutant à compétent en HTML tout en vous montrant comment créer un site Web. Et la meilleure partie est: il vous faudra moins d'une heure pour terminer le cours!

Voyons maintenant comment cela s'est construit.

Le contenu des cours

Le cours contient 14 screencasts interactifs. Chaque distribution gère un concept de base du HTML, et la plupart durent entre trois et six minutes. Dans certains d'entre eux, vous serez encouragé à vous lancer dans le code et à expérimenter par vous-même, comme c'est possible avec la plate-forme Scrimba.

Leçon n ° 1: Introduction au Web

Il commence par vous apprendre un peu plus sur le Web en général, en examinant les clients, les serveurs et les trois langues que les navigateurs parlent: HTML, CSS et JavaScript.

Cela vous donne une bonne base pour les prochaines leçons, car vous comprendrez mieux le rôle global de HTML sur le World Wide Web.

Leçon n ° 2: Créer un document HTML

La prochaine étape consiste à créer votre premier document HTML. Cette conférence vous expliquera le fonctionnement des fichiers HTML et vous donnera également un aperçu rapide de la barre d'URL du navigateur.

Leçon n ° 3: Emboîter les éléments

L'imbrication est un concept essentiel en HTML, elle sera donc abordée dans la troisième leçon. L'imbrication signifie essentiellement que vous pouvez imbriquer les étiquettes les unes dans les autres. Pour imbriquer un élément HTML, ajoutez-le simplement entre les balises d'ouverture et de fermeture d'un autre élément HTML.

Leçon n ° 4: Éléments principaux et scripts

 Learning HTML       h1 { text-align: center; }   document.getElementById("h1").innerHTML = "Hello Universe!";   

L'élément head est la première balise HTML après la balise elle-même. C'est un conteneur pour les métadonnées et définit souvent le titre **, ** le jeu de caractères, les styles, les liens, les scripts et d'autres méta-informations.

Ainsi, dans cette conférence, vous apprendrez à remplir la balise Meta avec un tas de types de contenu différents, comme vous pouvez le voir dans l'extrait ci-dessus.

Leçon n ° 5: éléments de mise en page

HTML5 a introduit un tas d'éléments de mise en page qui rendent HTML plus sémantique. Ces nouvelles balises renforcent désormais le sens des éléments de mise en page les plus couramment utilisés, comme et , alors que dans le passé, nous n'avions qu'un élément sans signification à utiliser. Dans ce screencast, vous apprendrez les plus utiles et les plus importants.

Leçon n ° 6: Éléments de figure et d'image

Les images font partie intégrante de presque tous les sites Web. Dans cette conférence, vous apprendrez comment ajouter des images au site et comment y ajouter des légendes.

Leçon n ° 7: Intégrer des vidéos

Vous avez peut-être remarqué que les vidéos YouTube sont partout sur le Web, n'est-ce pas? Pas seulement sur youtube.com. Cela est possible grâce à l'une des fonctionnalités HTML permettant d'incorporer des médias dans une page ailleurs sur le Web. Dans cette leçon, nous couvrons les méthodes d'intégration de vidéos à partir de sites comme YouTube et également directement à partir d'un fichier vidéo.

Leçon n ° 8: Barre de navigation et éléments de liste

Dans cette conférence, vous apprendrez à créer la barre de navigation à l'aide d'une liste et d'éléments de liste non ordonnés. Cela implique à la fois une barre de navigation horizontale et verticale, à utiliser dans l'en-tête et dans la barre latérale de notre site.

Leçon n ° 9: Titres

Les en-têtes sont créés à l'aide de la balise, où le signe * doit être remplacé par des nombres de 1 à 6. L'importance de l'en-tête diminue à mesure que le nombre augmente, ce qui signifie

est celui que vous utiliseriez normalement pour votre titre ou texte le plus important sur votre page.

Leçon n ° 10: Mise en forme des paragraphes et du texte (partie 1)

Le formatage du texte est également important à connaître afin de créer des sites Web, et dans cette conférence, vous en apprendrez les bases. Vous reconnaîtrez probablement beaucoup de concepts ici à partir de processeurs de texte comme Word et Pages.

Leçon n ° 11: Mise en forme du texte (partie 2)

Dans cette leçon, vous en apprendrez plus sur la mise en forme, mais avec des balises qui affectent de gros blocs de texte. Des exemples de ceci sont les element and the element.

Lesson #12: Tables (part 1)

Original text


Tables can be a bit complicated, but this lecture tries to explain it as simply as possible. Secondly, two lectures will be dedicated to this subject so that you’ll properly understand it.

Lesson #13: Tables (part 2)

In this lesson, you’ll learn more advanced elements in tables, like , , and . These allow you to control the elements inside the head, body and footer separately.

You’ll also be exposed to the , which allows you to add styles to specific columns.

Lesson #14: Page linking and final touches

In the final screencast, we’ll wrap it all up and finish the website. We’ll add a link from the navigation to various sections on the page, and also introduce another page so that you understand how links between pages work.

By this point, you should have a solid understanding of HTML, and the most important tags of the language.

Note: Eric will also be launching a follow-up course in April, which will tackle CSS for beginners. Leave your email here if you want early access.

The Scrimba format

Finally, let’s also have a look at the technology behind the course, as it’s pretty slick. The course is built using Scrimba, an interactive coding screencast tool. Scrimba looks like normal videos, but they’re fully interactive. You can edit the code inside the casts!

Here’s a gif which explains the concept:

Pause the screencast → Edit the code → Run it! → See your changes

Pause the screencast → Edit the code → Run it! → See your changes

This is great for when you feel you need to experiment with the code in order to properly understand it, or when you simply want to copy a piece of the code.

So what are you waiting for? Head over to the course page and get started today!

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.