Assemblez une page web complète avec le doctype et les balises html, head, meta et body.
Ouvrir cette leçon dans KodokonJusqu'ici, vous avez écrit des morceaux de HTML. Une vraie page web, elle, suit toujours la même structure complète, un peu comme une lettre officielle a toujours un en-tête, un corps et une signature. Tout commence par la déclaration <!DOCTYPE html>, écrite sur la toute première ligne : elle annonce au navigateur que le document utilise le HTML moderne. Ce n'est pas une balise, c'est une simple déclaration, et elle ne se referme pas.
Vient ensuite l'élément <html>, la racine de la page : tout le reste se place à l'intérieur. Son attribut lang="fr" indique la langue du document. Il contient exactement deux enfants. D'abord <head> (la tête) : la fiche d'identité de la page, avec des informations invisibles pour le visiteur. Puis <body> (le corps) : tout le contenu visible, c'est-à-dire vos titres, paragraphes, listes, liens, images et tableaux.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma première page</title>
</head>
<body>
<h1>Bienvenue sur ma page !</h1>
<p>Elle contient tout ce que j'ai appris.</p>
</body>
</html>Regardons le contenu du <head>. La balise autonome <meta charset="UTF-8"> précise l'encodage des caractères : c'est elle qui garantit que les accents (é, à, ç) s'affichent correctement. La balise <title> définit le titre de la page, affiché dans l'onglet du navigateur et dans les résultats de recherche. On ajoute souvent une deuxième balise <meta>, dite viewport, pour que la page s'adapte à la largeur des écrans de téléphone.
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Ma première page</title>
</head>Vous pouvez essayer dès maintenant, sans rien installer. Ouvrez un éditeur de texte simple (Bloc-notes sur Windows, TextEdit sur Mac en mode texte brut), recopiez le squelette complet, puis enregistrez le fichier avec l'extension .html, par exemple index.html. Double-cliquez ensuite sur le fichier : il s'ouvre dans votre navigateur, et votre première page s'affiche.