Accueil > Cours > Créez votre site web avec HTML5 et CSS3

Créez votre site web avec HTML5 et CSS3

15 heures  Facile

Mis à jour le 04/01/2023

 

 Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

J'aimerais créer mon propre site web… mais je n’y connais rien… Par où commencer ?

Vous êtes au bon endroit ! Ce cours est LE cours à suivre si vous débutez complètement en programmation.

Vous allez vous initier à la programmation avec des langages accessibles, faciles à apprendre, et incontournables du Web : HTML5 et CSS3.

C’est très souvent par ces langages qu’on commence quand on apprend à programmer, car ils sont à la base de tous les sites que vous pouvez
voir lorsque vous naviguez sur internet !

Si vous pensez ne pas avoir le niveau pour suivre ce cours, ne vous inquiétez pas : HTML et CSS sont des langages très abordables. Nous allons les
découvrir pas à pas : de toute façon, on vous explique tout et vous serez très vite capable d'ajouter du texte à votre site, de construire un menu de
navigation, d'insérer des images... et bien plus encore !

Dans ce cours, vous allez commencer par apprendre à écrire en langage HTML ! Vous apprendrez à utiliser ce que l'on appelle des balises : elles vous
permettront de structurer les éléments qui constituent le contenu de votre site web. Ainsi, vous verrez comment créer des titres, des paragraphes de
texte, des liens hypertextes, ou encore comment insérer des images sur vos pages web.

Ensuite, vous allez vous plonger dans le CSS ! Et là, vous vous demandez :

Mais pourquoi apprendre deux langages séparément ? Pourquoi ne pas avoir créé un seul langage qui mixe HTML et CSS ? Pourquoi HTML
n'est pas suffisant ?

Toutes ces questions sont de bonnes questions et il est totalement normal de se les poser. Ce cours y répondra, mais si vous voulez une réponse en
avant-première, la voici : le HTML et le CSS sont deux langages qui se complètent, le premier permet de créer et de structurer du contenu, le second
permet de faire de la mise en forme visuelle et dynamique. En bref, le CSS permet d'avoir la main sur le style, autrement dit le look de votre site web.
Sans lui, votre site ressemblerait à ce que l'on faisait dans les années 90 2000. Bref, c'est le CSS qui rendra votre site web moderne et créatif.

En basculant sur le langage CSS, vous découvrirez sur une nouvelle syntaxe, c'est-à-dire, une nouvelle façon d'écrire du code. Mais vous verrez, elle
ne sera pas fondamentalement différente. Dites-vous déjà que :

1. en HTML, vous utiliserez des balises qui permettent de décrire votre contenu - vous les écrirez entre chevrons   < >  ;

2. en CSS, vous utiliserez des propriétés qui permettent d'appliquer du style à des éléments HTML - vous les écrirez entre accolades   { } .

Mais comment appliquer un style CSS à des éléments HTML si ce sont deux langages séparés ?
L'éditeur dans lequel vous écrirez du code permet d'écrire dans différents langages, dont le HTML et le CSS. Ce que nous ferons, c'est tout
simplement de coder :

1. un fichier de contenu en HTML - qui aura l'extension   .html   ;

2. et un autre fichier de style en CSS - qui aura l'extension   .css .

Ces deux fichiers seront enregistrés sur votre ordinateur. Pour les faire communiquer, il suffira d'ajouter une seule ligne de code dans le fichier HTML !
Grâce à cette ligne de code, dès que vous cliquerez sur votre fichier HTML pour l'ouvrir afin de regarder votre site web sur le navigateur, il appellera
automatiquement le fichier CSS. Cela vous permettra d'admirer la mise en style que vous aurez appliquée et de la modifier à loisir sans toucher au
contenu.

Et vous verrez que le langage CSS fait vraiment la différence sur un site web : vous apprendrez à mettre en forme votre texte et notamment à utiliser
la police de caractères de votre choix. Vous apprendrez aussi à appliquer de la couleur sur différents éléments HTML, comme le texte, mais également
le fond d'une portion de texte ou encore le fond de toute la page. Vous découvrirez comment créer des bordures et des ombres sur des blocs pour
faire une mise en page plus visuelle ; mais aussi comment ajouter des effets d'interaction avec les futurs visiteurs de votre site web, pour le rendre
dynamique !

Lorsque vous aurez fait le tour des bases du HTML (partie 1 et des bases du CSS (partie 2 , vous irez plus loin pour voir comment faire de la mise en
page (partie 3 . Vous découvrirez qu'un site web est organisé en différentes parties (l'en-tête, le contenu principal et le contenu complémentaire, le
pied de page), mais ce n'est pas tout ! Il est possible de créer différentes sections à l'intérieur du contenu central, et de le réorganiser à loisir.

Je ne comprends pas de quoi on parle, c'est normal ?

Pas de panique ! Imaginez que le contenu de votre site web soit placé sur une grille invisible ; et que cette grille ait des cases de différentes tailles
possibles, un peu comme une mosaïque. Et bien, vous serez capable d'appliquer une grille en CSS - avec les proportions de votre choix - pour pouvoir
y disposer votre contenu HTML. Vous découvrirez comment moduler de manière simple et efficace la position des éléments de votre site web.

Sans mise en page, votre contenu s'afficherait bêtement de manière linéaire, de haut en bas, les éléments les uns à la suite des autres… C'est
dommage ! Dans ce cours, on vous présentera différentes techniques pour faire de belles mises en page, notamment CSS grid et Flexbox.

Dans la dernière partie de ce cours (partie 4 , vous irez encore plus loin pour apprendre à rendre votre site responsive ; c'est-à-dire à faire en sorte
que votre site web s'adapte à n'importe quelle taille d'écran ! Vous verrez aussi comment créer des tableaux et des formulaires. Ainsi, les visiteurs de
votre site web pourront vous contacter, vous écrire un message ou vous demander des informations !

Alors, prêt à réaliser un site web de A à Z ? C’est parti !

Objectifs pédagogiques

À la fin de ce cours, vous serez capable de :

Maîtriser les bases de HTML5.

Faire de la mise en forme avec CSS3.
Agencer le contenu des pages. 
Utiliser des fonctionnalités avancées de HTML et CSS.

Prérequis :

Le cours Comprendre le Web si vous débutez de zéro.

Outils :

Dans le cadre de ce cours, vous allez réaliser un site web. Vous aurez besoin :

d’un navigateur web à jour (Chrome, Safari, Firefox ou encore Edge) ;

et d’un éditeur de texte (Visual Studio Code) que vous allez télécharger.

Vous utiliserez aussi GitHub pour consulter le code du site web et les corrigés des exercices.
  Commencer le cours

Comment ça marche ?

 Partie 1 - Maîtrisez les bases de HTML5


1. Tirez un maximum de ce cours
2. Comprenez la différence entre HTML et CSS
3. Créez votre première page web en HTML
4. Organisez votre texte
5. Créez un lien hypertexte en HTML
6. Insérez des images

 Quiz : Maîtriser les bases de HTML5

 Partie 2 - Mettez en forme vos pages web avec CSS3


1. Intégrez le CSS dans la page HTML
2. Changez l'apparence du texte
3. Ajoutez de la couleur et un fond
4. Créez des bordures et des ombres
5. Créez des apparences dynamiques

 Quiz : Mettre en forme des pages web avec CSS3

 Partie 3 - Agencez le contenu de vos pages


1. Structurez votre page
2. Découvrez le modèle des boîtes
3. Faites votre mise en page avec Flexbox
4. Découvrez les bases de CSS Grids
5. Abordez d'autres techniques de mise en page

 Quiz : Agencer le contenu de pages web

 Partie 4 - Utilisez des fonctionnalités avancées de HTML et CSS 

1. Ajoutez des tableaux

2. Créez des formulaires
3. Finalisez un formulaire et ajoutez un bouton d'envoi
4. Utilisez le responsive design avec les Media Queries
5. Allez plus loin

 Quiz : Utiliser des fonctionnalités avancées de HTML et CSS

 Certificat de réussite (voir un exemple)

Les professeurs
Mathieu Nebra
Entrepreneur à plein temps, auteur
à plein temps et co-fondateur
d'OpenClassrooms :o)
 Alexia Toulmet
Développeuse Fullstack
React/Node freelance passionnée
par le frontend

Découvrez aussi ce cours en...

 
Livre PDF