Sommaire Cours HTML
  1. Introduction
  2. Chapitre 1 : Le navigateur et l'éditeur de texte
  3. Chapitre 2 : Introduction a la syntaxe HTML
  4. Chapitre 3 : Structure de base d'une page HTML5
  5. Chapitre 4 - Écrire une page en HTML5
  6. Conclusion
  7. Quiz
  8. Exercices
  9. Mémento

Temps de lecture : 12 Minutes


I.Introduction

Ce cours permet d'obtenir les bases dans le langage de balisage HTML (Hypertext Markup Language), qui a été conçu pour représenter les pages web. Pour développer son premier site web, il faut commencer par comprendre grossièrement comment fonctionne un site. Un site web est un ensemble de fichiers ordonnés, hébergés sur un serveur web. L'hébergement web permet que le site soit accessible depuis internet. Cependant, on peut également reproduire un hébergement web en local, à l'aide de différents outils ; c'est-à-dire que le site sera accessible uniquement depuis son poste. C'est utile en phase de développement car on reproduit le futur environnement du site sans pour autant qu'il soit accessible au plus grand nombre. Comme tous les langages informatiques, le HTML évolue au fil du temps. Créé pour représenter des pages web au début des années 1990, par un certain Tim Berners-Lee, le HTML en est aujourd'hui à sa 5ème version, le HTML5. C'est le W3C qui gère, encadre et définit plusieurs langages informatiques, notamment liés au web, dont le HTML. Tim Berners-Lee suit encore et garde un œil attentif à l'évolution du web au sein du W3C.

Qu’est-ce que le HTML ?

Maintenant que le décor est planté, on va pouvoir attaquer les choses plus sérieuses. Rendez-vous au chapitre suivant.



II.Chapitre 1 : Le navigateur et l'éditeur de texte

De quoi va-t-on avoir besoin pour créer un site web ? De quels logiciels hyper complexes et méga chers ?

1)Navigateur web

Les navigateurs web sont gratuits et parfaitement accessibles. Ils sont utilisés quotidiennement par la planète entière. Le rôle du navigateur web est d'interpréter des fichiers informatiques pour les afficher visuellement à un utilisateur. Entre deux navigateurs, l'interprétation peut diverger. Certaines instructions peuvent ne pas être connues ou être interprétées différemment. Nous reviendrons sur cette notion dans le cours sur le CSS. De plus, avec l'avènement des smartphones, à peu près tous les navigateurs se déclinent en version mobile. Il y a également de légères différences.

2)Liste non exhaustive de navigateurs web

Nom Environnement/Système d'exploitation Moteur de rendu (cœur) Site
Firefox Linux, Mac OS, Windows, Android, iOS Gecko https://firefox.com/
Chrome Linux, Mac OS, Windows, Android, iOS Blink https://google.com/chrome/browser/
Vivaldi Linux, Mac OS, Windows Blink https://vivaldi.com/
Safari Mac OS, iOS WebKit https://www.apple.com/fr/safari/

3)L'éditeur de texte

Le second logiciel dont nous allons avoir besoin est également gratuit et est installé par défaut sur tous les ordinateurs équipés du système d'exploitation Windows : le bloc-notes. Aussi incroyable que cela puisse paraître, ce petit outil permet de créer des sites web. Alors, vous vous posez peut-être une excellente question : est-ce que Mark Zuckerberg a créé la première version de Facebook avec ça ? Je ne peux le garantir à 100% mais j'ai bien peur que non. Pour deux raisons très simples. Mark travaillait sur Mac OS et ne profitait donc pas du merveilleux bloc-notes Windows. La deuxième raison, et vous vous en doutiez sûrement, est qu'il en existe des plus ergonomiques et performants. Le bloc-notes et les autres logiciels que nous allons découvrir appartiennent à la famille des éditeurs de texte. Je te vois venir gros comme une maison Lorraine Atta, non Microsoft Word n'est pas un éditeur de texte mais un logiciel de traitement de texte. Avec Word, on met en forme le texte. On y ajoute des tableaux, de la couleur, des graphiques, etc., alors qu'avec un éditeur de texte, on écrit tout simplement et uniquement du texte.

Notepad++ image de note-pad

Visual Code image de visual code

Bloc note image de bloc-note


4)Liste non exhaustive d'éditeurs de texte

Nom Environnement/Système d'exploitation Site
Notepad++ Windows https://notepad-plus-plus.org/
Sublime Text Linux, Mac OS, Windows http://www.sublimetext.com/
Coda Mac OS https://panic.com/coda/
Atom Linux, Mac OS, Windows hhttps://atom.io/

Pour continuer dans les chapitres suivants, vous devrez avoir l'un des éditeurs de texte ci-dessus ou un autre d'installé sur votre poste de travail.





Ce cours sur le HTML en est un parmi tant d'autres. Le web regorge de ressources sur le développement web. Celui-ci a été rédigé par mes soins et est orienté pour les débutants. Il est non-exhaustif. Si vous repérez une erreur ou un oubli, vous pouvez bien évidemment me contacter. me contacter

Ce cours a été rédigé en mars 2025.