Comment créer une page HTML valide et l’afficher en local ?

Créez un fichier avec l’extension .html, ajoutez la structure HTML de base, puis ouvrez-le dans un navigateur.

Quelle différence entre un lien interne et un lien externe en HTML ?

Un lien interne mène vers une page ou une section du même site ; un lien externe renvoie vers un autre site web.

Comment adapter un site HTML et CSS aux écrans de téléphone ?

Utilisez la balise meta viewport, des unités relatives et des media queries CSS.

Image de cours gratuite HTML et CSS complet

Cours en ligne gratuit HTML et CSS complet

Durée du cours en ligne : 11 heure et 30 minutes

4.59

(82)

Créez des pages web propres et responsives : cours en ligne gratuit pour maîtriser HTML & CSS, écrire un code valide et styliser vos contenus de A à Z.

Dans ce cours gratuit, découvrez

Rôles et différences HTML vs CSS, et pourquoi ils sont essentiels au web
Structure d’une page HTML valide (doctype, head, body) et bonnes pratiques d’indentation
Balises, attributs, entités HTML, commentaires et validation/compatibilité du code
Texte et contenus HTML : titres, paragraphes, retours ligne, importance, listes, liens, ancres
Insertion et optimisation de médias : images, audio, vidéo et sémantique d’intégration
Fondamentaux CSS : sélecteurs, propriétés, héritage, id/class, où écrire le CSS
Typographie et texte CSS : font-family, taille, styles, couleurs, opacité, alignements
Modèle des boîtes : width/height, border, padding, margin, ombres, gestion des espaces
Mise en page CSS : display, block/inline, div/span, position/z-index, float/clear
Arrière-plans CSS : couleurs, images, dégradés, préfixes vendeurs
Tableaux HTML : structure, en-têtes, lignes/cellules et opérations courantes
CSS avancé : shorthand/longhand, sélecteurs complexes, pseudo-classes/éléments, sprites
Effets CSS : transitions et animations (durée, keyframes) pour interactions et mouvements
Formulaires HTML : inputs, types, attributs, organisation et mise en forme

À propos du cours en ligne gratuit

Envie de créer un site qui ressemble vraiment à ce que vous imaginez ? Ce cours en ligne gratuit HTML et CSS complet vous accompagne pas à pas pour apprendre les fondations du web et gagner en autonomie. Vous partez des bases essentielles pour comprendre comment une page s’organise, comment le navigateur interprète votre code, et comment transformer une structure HTML en une interface claire, lisible et agréable grâce au CSS.

Au fil des vidéos et des exercices, vous adoptez de bonnes pratiques dès le départ : travailler en local comme le font les développeurs, choisir un éditeur adapté, écrire un code propre avec une indentation cohérente, et ajouter des commentaires utiles sans alourdir vos fichiers. Vous apprenez à manipuler les éléments, balises et attributs, puis à construire une page HTML valide avec une structure solide. L’objectif est de vous donner des réflexes durables, pas seulement des recettes.

Vous avancez ensuite sur les éléments indispensables à n’importe quel site : titres, paragraphes, gestion des espaces et des retours à la ligne, hiérarchisation de l’information et niveaux d’importance du texte. Vous découvrez comment structurer des contenus avec des listes, créer des liens internes et externes, et utiliser des ancres pour améliorer la navigation. Vous apprenez aussi à intégrer des images de manière pertinente, en tenant compte du poids, de la qualité et de la compatibilité.

Côté CSS, le cours vous fait comprendre comment sélectionner précisément les éléments à styliser et comment appliquer les propriétés qui donnent vie à votre mise en page. Vous découvrez où écrire votre CSS selon les besoins d’un projet, et comment garder une organisation claire entre structure et présentation. Enfin, vous abordez la validation et la compatibilité du code, afin d’éviter les erreurs fréquentes et de produire des pages plus fiables sur différents navigateurs.

Que vous visiez une reconversion, un projet personnel, un portfolio ou simplement la compréhension du web, ce cours vous aide à acquérir une compétence concrète, immédiatement applicable : créer et styliser vos propres pages avec HTML et CSS, proprement et méthodiquement.

Contenu du cours

Leçon vidéo : COURS COMPLET HTML ET CSS [1/71] - Présentation du cours 03m
Exercice: Quel est le but de ce tutoriel ?
Leçon vidéo : COURS COMPLET HTML ET CSS [2/71] - Pourquoi apprendre à coder ? 08m
Exercice: Pourquoi est-il crucial d'apprendre le HTML et le CSS pour le développement web?
Leçon vidéo : COURS COMPLET HTML ET CSS [3/71] - Définitions et rôles 07m
Exercice: Quels sont les rôles principaux du HTML et du CSS ?
Leçon vidéo : COURS COMPLET HTML ET CSS [4/71] - Versions HTML et CSS 03m
Exercice: Qu'est-ce qu'une version en HTML et CSS ?
Leçon vidéo : COURS COMPLET HTML ET CSS [5/71] - Travail en local et en production 04m
Exercice: Quel est l'avantage principal de travailler en local plutôt qu'en production ?
Leçon vidéo : COURS COMPLET HTML ET CSS [6/71] - L'éditeur de texte 05m
Exercice: Quel type de logiciel est recommandé pour commencer à coder en HTML et CSS ?

Leçon vidéo : COURS COMPLET HTML ET CSS [7/71] - Éléments, balises et attributs 11m
Exercice: Quel est l'objectif premier du chapitre sur les éléments et balises HTML ?
Leçon vidéo : COURS COMPLET HTML ET CSS [8/71] - Structure d'une page HTML 07m
Exercice: Qu'est-ce qui constitue une page HTML valide ?
Leçon vidéo : COURS COMPLET HTML ET CSS [9/71] - Création d'une page HTML 05m
Exercice: Quelle est la première étape pour créer un fichier HTML ?
Leçon vidéo : COURS COMPLET HTML ET CSS [10/71] - Indentation et commentaires HTML 09m
Exercice: Qu'est-ce qu'un "dante" en HTML et pourquoi est-il important de l'utiliser ?
Leçon vidéo : COURS COMPLET HTML ET CSS [11/71] - Titres et paragraphes en HTML 09m
Exercice: Quelle est la différence entre les éléments 'title' et 'H' en HTML?
Leçon vidéo : COURS COMPLET HTML ET CSS [12/71] - Espaces et retours à la ligne en HTML 08m
Exercice: Quel élément HTML utilise-t-on pour effectuer un retour à la ligne ?
Leçon vidéo : COURS COMPLET HTML ET CSS [13/71] - Les niveaux d'importance des textes 07m
Exercice: Quels sont les objectifs de ce chapitre sur la gestion de l'importance des textes HTML?

Leçon vidéo : COURS COMPLET HTML ET CSS [14/71] - Les listes en HTML 13m
Exercice: Quels sont les types de listes en HTML abordés dans le chapitre?
Leçon vidéo : COURS COMPLET HTML ET CSS [15/71] - Liens internes et externes en HTML 17m
Exercice: Qu'est-ce qu'un lien interne en HTML ?
Leçon vidéo : COURS COMPLET HTML ET CSS [16/71] - Autres types de liens HTML 13m
Exercice: Quel est l'objectif de la création d'une encre en HTML ?
Leçon vidéo : COURS COMPLET HTML ET CSS [17/71] - Insérer des images en HTML 10m
Exercice: Quel format d'image est généralement choisi pour économiser le poids tout en conservant une bonne qualité pour des photographies ?
Leçon vidéo : COURS COMPLET HTML ET CSS [18/71] - Validation et compatibilité du code 08m
Exercice: Quelle est l'importance des entités HTML dans le codage web ?

Leçon vidéo : COURS COMPLET HTML ET CSS [19/71] - Sélecteurs et propriétés CSS 05m
Exercice: Qu'est-ce que les sélecteurs CSS ?
Leçon vidéo : COURS COMPLET HTML ET CSS [20/71] - Où écrire le CSS 08m
Exercice: Quels sont les trois endroits où l'on peut écrire du code CSS selon le cours ?
Leçon vidéo : COURS COMPLET HTML ET CSS [21/71] - Les commentaires en CSS 04m
Leçon vidéo : COURS COMPLET HTML ET CSS [22/71] - Les sélecteurs CSS simples 05m
Exercice: Qu'est-ce que les sélecteurs CSS simples ciblent ?
Leçon vidéo : COURS COMPLET HTML ET CSS [23/71] - Les attributs id et class 07m
Leçon vidéo : COURS COMPLET HTML ET CSS [24/71] - L'héritage en CSS 07m
Leçon vidéo : COURS COMPLET HTML ET CSS [25/71] - Les types block et inline 05m
Exercice: Qu'est-ce qu'un élément de type bloc en HTML et CSS ?
Leçon vidéo : COURS COMPLET HTML ET CSS [26/71] - Les éléments HTML div et span 07m

Leçon vidéo : COURS COMPLET HTML ET CSS [27/71] - La propriété CSS font-family 07m
Leçon vidéo : COURS COMPLET HTML ET CSS [28/71] - Autres propriétés CSS de type font 07m
Exercice: Quelle est la propriété CSS utilisée pour modifier la taille de la police d'écriture ?
Leçon vidéo : COURS COMPLET HTML ET CSS [29/71] - Couleur et opacité en CSS 22m
Leçon vidéo : COURS COMPLET HTML ET CSS [30/71] - Propriétés CSS de type text 14m
Leçon vidéo : COURS COMPLET HTML ET CSS [31/71] - Gestion des espaces en CSS 05m
Exercice: Quelles sont les trois nouvelles propriétés CSS que nous allons découvrir dans ce chapitre pour gérer les espaces en CSS?

Leçon vidéo : COURS COMPLET HTML ET CSS [32/71] - Le modèle des boîtes 06m
Leçon vidéo : COURS COMPLET HTML ET CSS [33/71] - Largeur et hauteur en CSS 07m
Leçon vidéo : COURS COMPLET HTML ET CSS [34/71] - Les bordures en CSS 10m
Exercice: Comment définir une bordure en CSS pour un élément HTML ?
Leçon vidéo : COURS COMPLET HTML ET CSS [35/71] - Padding et margin en CSS 11m
Leçon vidéo : COURS COMPLET HTML ET CSS [36/71] - Les ombres des boîtes 04m
Leçon vidéo : COURS COMPLET HTML ET CSS [37/71] - La propriété CSS display 08m
Exercice: Quelle est la différence entre les valeurs "inline" et "block" de la propriété CSS "display" ?
Leçon vidéo : COURS COMPLET HTML ET CSS [38/71] - Les propriétés position et z-index 13m
Leçon vidéo : COURS COMPLET HTML ET CSS [39/71] - Les propriétés float et clear 09m
Leçon vidéo : COURS COMPLET HTML ET CSS [40/71] - L'alignement en CSS 06m
Exercice: Comment peut-on aligner horizontalement un élément HTML en CSS ?

Leçon vidéo : COURS COMPLET HTML ET CSS [41/71] - La couleur de fond 03m
Leçon vidéo : COURS COMPLET HTML ET CSS [42/71] - Images de fond et gestion du fond 12m
Leçon vidéo : COURS COMPLET HTML ET CSS [43/71] - Dégradés linéaires 12m
Exercice: Qu'est-ce qu'un préfixe vendeur en CSS ?
Leçon vidéo : COURS COMPLET HTML ET CSS [44/71] - Dégradés radiaux 14m

Leçon vidéo : COURS COMPLET HTML ET CSS [45/71] - Créer un tableau simple 09m
Leçon vidéo : COURS COMPLET HTML ET CSS [46/71] - Créer un tableau structuré 09m
Exercice: Quel élément HTML est utilisé pour créer une ligne dans l'en-tête d'un tableau?
Leçon vidéo : COURS COMPLET HTML ET CSS [47/71] - Opérations sur les tableaux 10m
Leçon vidéo : COURS COMPLET HTML ET CSS [48/71] - Opérations sur les images 07m
Leçon vidéo : COURS COMPLET HTML ET CSS [49/71] - Insérer de l'audio en HTML 05m
Exercice: Quel est l'attribut que l'on doit obligatoirement préciser pour l'élément audio en HTML ?
Leçon vidéo : COURS COMPLET HTML ET CSS [50/71] - Insérer des vidéos en HTML 05m
Leçon vidéo : COURS COMPLET HTML ET CSS [51/71] - Intégration de média et sémantique 04m

Leçon vidéo : COURS COMPLET HTML ET CSS [52/71] - Notations CSS short hand et long hand 09m
Exercice: Quelles sont les propriétés CSS utilisées dans la notation short hand "fonte" ?
Leçon vidéo : COURS COMPLET HTML ET CSS [53/71] - Sélecteurs CSS complexes 11m
Leçon vidéo : COURS COMPLET HTML ET CSS [54/71] - Pseudo-classes CSS 11m
Leçon vidéo : COURS COMPLET HTML ET CSS [55/71] - Pseudo-éléments CSS 10m
Exercice: Qu'est-ce qu'un pseudo élément en CSS ?
Leçon vidéo : COURS COMPLET HTML ET CSS [56/71] - Les sprites en CSS 09m
Leçon vidéo : COURS COMPLET HTML ET CSS [57/71] - Les transitions CSS 10m
Leçon vidéo : COURS COMPLET HTML ET CSS [58/71] - Les animations CSS 15m
Exercice: Quelle est la propriété CSS qui correspond à la durée de l'animation en seconde?

Leçon vidéo : COURS COMPLET HTML ET CSS [59/71] - Présentation des formulaires 02m
Leçon vidéo : COURS COMPLET HTML ET CSS [60/71] - Créer un formulaire HTML simple 09m
Leçon vidéo : COURS COMPLET HTML ET CSS [61/71] - Types d'input et listes d'options 23m
Exercice: Quelles sont les différentes valeurs que peut prendre l'attribut "type" de l'élément HTML "input" ?
Leçon vidéo : COURS COMPLET HTML ET CSS [62/71] - Les attributs des formulaires 12m
Leçon vidéo : COURS COMPLET HTML ET CSS [63/71] - Organiser et mettre en forme un formulaire 14m

Leçon vidéo : COURS COMPLET HTML ET CSS [64/71] - Introduction au responsive design 01m
Exercice: Qu'est-ce que le responsable design en CSS ?
Leçon vidéo : COURS COMPLET HTML ET CSS [65/71] - Meta viewport et valeurs CSS relatives 07m
Leçon vidéo : COURS COMPLET HTML ET CSS [66/71] - Media queries CSS 17m

Leçon vidéo : COURS COMPLET HTML ET CSS [67/71] - Création d'un site personnel (site CV) 1/4 02m
Leçon vidéo : COURS COMPLET HTML ET CSS [68/71] - Création d'un site personnel (site CV) 2/4 26m
Leçon vidéo : COURS COMPLET HTML ET CSS [69/71] - Création d'un site personnel (site CV) 3/4 32m
Leçon vidéo : COURS COMPLET HTML ET CSS [70/71] - Création d'un site personnel (site CV) 4/4 24m
Leçon vidéo : COURS COMPLET HTML ET CSS [71/71] - Conclusion 02m

Apprenez-en plus surCSS

Découvrez notre sélection de cours CSS gratuits en ligne pour apprendre à créer, styliser et optimiser des pages web modernes. Maîtrisez les sélecteurs, le responsive design, Flexbox, Grid, les animations et les bonnes pratiques grâce à des formations accessibles à tous. Progressez à votre rythme et obtenez un certificat pour valoriser vos compétences.

Apprenez-en plus surHTML

Découvrez notre sélection de cours HTML gratuits en ligne pour apprendre à créer et structurer des pages web, maîtriser les balises, les formulaires et les bonnes pratiques du développement web. Progressez à votre rythme grâce à des formations accessibles aux débutants comme aux initiés, et obtenez un certificat pour valoriser vos nouvelles compétences.

Ce cours gratuit comprend:

11 heure et 30 minutes du cours vidéo en ligne

Certificat numérique de réussite du cours (gratuit)

Exercices pour développer vos connaissances

100% gratuit, du contenu au certificat

Prêt à commencer ?Téléchargez l’application et commencez dès aujourd’hui !

Installez l'application

dès maintenant pour accéder au cours

Plus de 5000 cours gratuits

Programmation, anglais, marketing digital et bien plus encore ! Apprenez ce que vous voulez, gratuitement.

Plan d'études avec IA

L'intelligence artificielle de notre application peut créer un planning d'études pour le cours que vous choisissez.

De débutant à professionnel accompli

Améliorez votre CV grâce à notre certificat gratuit, puis utilisez notre intelligence artificielle pour trouver l'emploi de vos rêves.

Vous pouvez également utiliser le code QR ou les liens ci-dessous.

Code QR - Télécharger Cursa - Cours en ligne

Commentaires de cours: HTML et CSS complet

Les étudiants apprécient ce cours gratuit, jugé clair, pratique, instructif, complet et bien structuré. Ils soulignent sa facilité de compréhension, son intérêt et son utilité pour progresser et créer un site web. Une mise à jour du contenu serait toutefois souhaitable.

c'est vraiment un excellent cours: très pratique, bien expliqué. vraiment extraordinaire!

Excellent cours, complet et très bien structuré. Mériterait cependant d'être mis à jour, certaines fonctionnalités ne sont plus vraiment d'actualité.

c'est tellement instructif

j'aimerai poursuivre avec cette formation

sobre el curso no tengo nada que reprochar es increíble el profesor es calificado y enseña bien con mucha paciencia me encanta...

j’ai apprécié et je me suis perfectionné merci à vous !

J'ai reçu un très bon cours. C'est génial et intéressant. Je vous remercie beaucoup.

je vous remercie infiniment, grâce à vous je sais comment créer un site web...

c'est très symple et facile à comprendre merci

c'est génial ! je trouve ce que j'ai besoin