Introduction
Dans ce laboratoire (lab), les étudiants apprendront les compétences fondamentales pour créer une structure de document HTML de base et comprendre les balises HTML essentielles. Le laboratoire guide les participants dans la configuration d'un document HTML avec une déclaration DOCTYPE appropriée, l'ajout de la balise racine HTML, la configuration de la section <head> et l'exploration de différents types de balises HTML.
Les participants commenceront par créer un document HTML5, apprendre à déclarer le type de document, structurer la mise en page de base de la page et comprendre le but d'éléments clés tels que <html>, <head> et <body>. À la fin du laboratoire, les étudiants auront une compréhension complète de la création d'un document HTML bien formé et de l'utilisation de diverses balises HTML pour structurer le contenu des pages web.
Configurer le document HTML avec la déclaration DOCTYPE
Dans cette étape, vous apprendrez à configurer les bases d'un document HTML en ajoutant la déclaration DOCTYPE. La déclaration DOCTYPE est cruciale car elle indique aux navigateurs web quelle version d'HTML votre document utilise, garantissant un affichage correct et une compatibilité.
Tout d'abord, ouvrez le WebIDE et créez un nouveau fichier appelé index.html dans le répertoire ~/project.
La déclaration DOCTYPE pour HTML5 est simple et directe. Vous l'ajouterez comme première ligne de votre document HTML :
<!doctype html>
Cette déclaration indique aux navigateurs que vous utilisez HTML5, la dernière version d'HTML. Elle ne respecte pas la casse, mais la version en minuscules est recommandée pour la cohérence et la lisibilité.
Créons une structure complète de document HTML de base avec la déclaration DOCTYPE :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML!</h1>
</body>
</html>
Notes : En savoir plus sur Comment prévisualiser des fichiers HTML dans le WebIDE.
Le résultat affiché dans le navigateur serait le suivant :
Welcome to HTML!
Points clés à retenir :
- La déclaration DOCTYPE doit être la première ligne de votre document HTML
- Elle aide les navigateurs à comprendre quelle version d'HTML vous utilisez
- Pour le développement web moderne, utilisez
<!DOCTYPE html>pour HTML5 - La déclaration n'est pas une balise HTML ; c'est une instruction pour le navigateur
Ajouter la balise racine HTML et la structure de base
Dans cette étape, vous apprendrez la structure fondamentale d'un document HTML, en vous concentrant sur la balise racine HTML et la structure de base du document. La balise <html> est le conteneur de tous les autres éléments HTML et sert d'élément racine d'une page HTML.
Ouvrez le fichier index.html que vous avez créé à l'étape précédente dans le WebIDE. Développons la structure HTML précédente en ajoutant la balise racine complète et ses composants essentiels :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML Structure</h1>
<p>This is the basic structure of an HTML document.</p>
</body>
</html>
Décortiquons les composants clés :
- Balise
<html>: L'élément racine qui englobe tout le reste du contenu HTML - Attribut
lang="en": Spécifie la langue du document (anglais dans ce cas) - Deux éléments enfants principaux :
<head>: Contient les métadonnées du document<body>: Contient le contenu visible de la page web
Le résultat affiché dans un navigateur web ressemblerait à ceci :
Welcome to HTML Structure
This is the basic structure of an HTML document.
Points clés à retenir :
- Chaque document HTML doit avoir une balise racine
<html> - L'attribut
langaide à l'accessibilité et à l'optimisation pour les moteurs de recherche - Le document est divisé en sections
<head>et<body> - Un encastrement correct des balises est crucial pour un HTML valide
