Un guide illustré pour débutants
Apprenez à créer des sites web avec HTML
Bienvenue dans le monde passionnant du développement web ! Ce livre vous guidera pas à pas pour créer votre première page web en HTML.
Vous découvrirez les bases essentielles et apprendrez à structurer votre contenu avec les bonnes balises.
HTML signifie HyperText Markup Language. C'est le langage de base utilisé pour créer des pages web.
Il permet de structurer le contenu d'une page en utilisant des balises.
Pour créer une page web en HTML, il suffit de créer un fichier avec l'extension .html. Ce fichier s'ouvre dans le navigateur web simplement en faisant un double-clic dessus.
Un fichier HTML est reconnu par son extension .html
1 Téléchargez Visual Studio Code
2 Créez un nouveau fichier nommé "index.html"
3 Double-cliquez sur le fichier pour l'ouvrir dans votre navigateur
Les balises HTML sont écrites entre chevrons < et >.
Elles indiquent au navigateur la nature du contenu qu'elles encadrent.
Structure d'une balise HTML
Sur PC :
Sur Mac :
| Balise | Signification | Exemple |
|---|---|---|
| <title> | "Ceci est le titre de la page" | <title>Ma Page</title> |
| <img> | "Ceci est une image" | <img src="photo.jpg"> |
| <p> | "Ceci est un paragraphe de texte" | <p>Bonjour le monde!</p> |
Elles s'ouvrent, contiennent du texte, et se ferment plus loin.
On a une balise ouvrante <title> et une balise fermante </title>.
Elles servent à insérer un élément à un endroit précis (comme une image).
Il n'y a pas besoin de balise fermante.
Jusqu'à récemment, on mettait un / à la fin des balises orphelines : <img />.
Cette syntaxe génère maintenant un avertissement. Il n'est donc pas recommandé de mettre un slash à la fin d'une balise orpheline.
Voici le code de base que vous devez utiliser pour créer votre première page web :
L'attribut lang="fr" précise la langue du site web.
Ce n'est pas obligatoire, mais cela évite des soucis d'affichage et indique que votre site est en français.
L'ordre des balises est important !
| Balise | Fonction | Explication |
|---|---|---|
| <!DOCTYPE html> | Déclaration du type de document | Indique qu'il s'agit d'une page HTML5 |
| <html> | Racine du document | Englobe tout le contenu de la page web |
| <head> | En-tête de la page | Contient les métadonnées (non affichées) |
| <meta charset="utf-8"> | Encodage des caractères | Permet d'afficher correctement les accents |
| <title> | Titre de la page | S'affiche dans l'onglet du navigateur |
| <body> | Corps de la page | Contient tout ce qui sera affiché à l'écran |
Les balises doivent s'emboîter correctement, comme des poupées russes.
Incorrect : <html><body></html></body>
Correct : <html><body></body></html>
En HTML, on parle d'éléments "parents" qui contiennent des éléments "enfants".
Par exemple, <html> est le parent de <head> et <body>.
Les commentaires servent à laisser des indications dans votre code. Ils ne sont pas affichés sur la page web.
Ils vous aident à vous rappeler comment fonctionne votre code si vous y revenez plus tard.
Pour commenter une ligne rapidement :
Tout le monde peut voir le code source de votre page une fois mise en ligne. Ne mettez donc pas d'informations sensibles dans les commentaires !
Dans votre fichier index.html :
1 Insérez la structure de base HTML
2 Changez le titre pour : "Accueil – Robbie Lens Photographie"
3 Écrivez un commentaire dans le body
Maintenant que vous savez créer la structure de base, vous pouvez :
Vous avez franchi la première étape !