Créer une structure et des balises HTML de base

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/BasicStructureGroup -.-> html/viewport("Viewport Declaration") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-451029{{"Créer une structure et des balises HTML de base"}} html/head_elems -.-> lab-451029{{"Créer une structure et des balises HTML de base"}} html/charset -.-> lab-451029{{"Créer une structure et des balises HTML de base"}} html/lang_decl -.-> lab-451029{{"Créer une structure et des balises HTML de base"}} html/viewport -.-> lab-451029{{"Créer une structure et des balises HTML de base"}} html/text_head -.-> lab-451029{{"Créer une structure et des balises HTML de base"}} html/doc_flow -.-> lab-451029{{"Créer une structure et des balises HTML de base"}} html/inter_elems -.-> lab-451029{{"Créer une structure et des balises HTML de base"}} end

Configuration d'un document HTML avec une 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

Ajout de la balise racine HTML et de 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 lang aide à 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

Configuration de la section `<head>` avec les balises `<meta>` et `<title>`

Dans cette étape, vous apprendrez à propos de la section <head> d'un document HTML et à utiliser les balises <meta> et <title> pour fournir des informations importantes sur votre page web.

Ouvrez votre fichier index.html dans le WebIDE et mettez à jour la section <head> avec l'exemple suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="A simple HTML learning page" />
    <title>My HTML Learning Journey</title>
  </head>
  <body>
    <h1>Welcome to HTML Metadata</h1>
    <p>This page demonstrates head section configuration.</p>
  </body>
</html>

Décortiquons les principales balises <meta> et leurs objectifs :

<meta charset="UTF-8"> : Spécifie l'encodage des caractères du document
<meta name="viewport"> : Garantit un affichage correct sur différents appareils
<meta name="description"> : Fournit une brève description de la page pour les moteurs de recherche
<title> : Définit le titre de la page affiché dans l'onglet du navigateur

Exemple de résultat dans un onglet de navigateur :

My HTML Learning Journey

Points clés à retenir :

La section <head> contient les métadonnées du document HTML
Les balises <meta> fournissent des informations supplémentaires aux navigateurs et aux moteurs de recherche
La balise <title> est cruciale pour l'identification de la page et le référencement SEO
Toujours inclure les balises <meta> d'encodage des caractères et de la vue (viewport)

Comprendre les balises HTML simples et doubles

Dans cette étape, vous apprendrez les deux types de balises HTML : les balises simples (auto-fermantes) et les balises doubles. Comprendre la différence entre ces balises est crucial pour créer des documents HTML bien structurés.

Ouvrez votre fichier index.html dans le WebIDE et mettez à jour la section <body> avec l'exemple suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Tags Exploration</title>
  </head>
  <body>
    <!-- Double Tags (Opening and Closing) -->
    <h1>Welcome to HTML Tags</h1>
    <p>This is a paragraph with <strong>bold text</strong>.</p>

    <!-- Single (Self-Closing) Tags -->
    <img src="example.jpg" alt="Example Image" />
    <br />
    <input type="text" placeholder="Enter your name" />
  </body>
</html>

Décortiquons les différents types de balises :

Balises doubles (balises appariées) :

Ont une balise ouvrante <tag> et une balise fermante </tag>
Le contenu est placé entre les balises ouvrante et fermante
Exemples : <h1>, <p>, <strong>, <div>

Balises simples (balises auto-fermantes) :

N'ont pas de balise fermante distincte
Se ferment elles-mêmes à l'intérieur de la balise
Exemples : <img>, <br>, <input>

Le résultat affiché dans un navigateur serait le suivant :

Welcome to HTML Tags
This is a paragraph with bold text.
[Une image serait affichée ici]
[Un champ de saisie de texte serait affiché]

Exemple de résultat avec des balises HTML

Points clés à retenir :

Les balises doubles entourent le contenu et nécessitent à la fois une balise ouvrante et une balise fermante
Les balises simples sont autonomes et n'entourent pas de contenu
Toujours fermer les balises doubles pour maintenir une structure HTML correcte
Certaines balises simples peuvent avoir des attributs pour fournir des informations supplémentaires

Explorer la balise `<body>` et le placement du contenu de la page

Dans cette étape, vous apprendrez à propos de la balise <body> et à structurer le contenu au sein d'un document HTML. La balise <body> est l'endroit où tout le contenu visible d'une page web est placé.

Ouvrez votre fichier index.html dans le WebIDE et mettez à jour la section <body> avec l'exemple suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Content Placement Example</title>
  </head>
  <body>
    <!-- Headings -->
    <h1>Welcome to HTML Content Placement</h1>
    <h2>Subheading Level 2</h2>
    <h3>Subheading Level 3</h3>

    <!-- Paragraphs -->
    <p>This is a paragraph explaining the importance of content structure.</p>

    <!-- Lists -->
    <h4>Key HTML Elements:</h4>
    <ul>
      <li>Headings</li>
      <li>Paragraphs</li>
      <li>Lists</li>
    </ul>

    <!-- Div for grouping content -->
    <div>
      <p>This paragraph is inside a div container.</p>
    </div>

    <!-- Links and Images -->
    <a href="https://example.com">Visit Example Website</a>
    <img src="example.jpg" alt="Example Image" width="300" />
  </body>
</html>

Le résultat affiché dans un navigateur serait le suivant :

Exemple de résultat du placement du contenu HTML

Points clés à retenir :

La balise <body> contient tout le contenu visible de la page
Utilisez les balises de titre (<h1> à <h6>) pour créer une hiérarchie de contenu
Les paragraphes, les listes et autres éléments aident à organiser les informations
Les balises <div> peuvent regrouper et structurer le contenu
Incluez des liens et des images pour améliorer l'interactivité de la page

Résumé

Dans ce laboratoire (lab), les participants ont appris les étapes fondamentales de la création d'une structure de base de document HTML. Le processus a commencé par la configuration de la déclaration DOCTYPE, qui est essentielle pour garantir un affichage correct dans le navigateur et la compatibilité avec HTML5. Les apprenants ont exploré les balises HTML essentielles, notamment la balise racine <html>, les sections <head> et <body>, en comprenant leurs rôles spécifiques dans l'organisation du document.

Le laboratoire a guidé les étudiants dans la création d'un document HTML complet, en montrant comment ajouter des balises <meta>, définir l'encodage des caractères, définir un titre de page et placer le contenu dans la balise <body>. Les participants ont acquis une expérience pratique dans la construction d'une page HTML bien structurée, en apprenant des concepts clés tels que les balises HTML simples et doubles, l'imbrication correcte des balises et l'importance de la mise en forme sémantique dans le développement web.

Créer une structure et des balises HTML de base

Introduction

Skills Graph

Configuration d'un document HTML avec une déclaration DOCTYPE

Ajout de la balise racine HTML et de la structure de base

Configuration de la section <head> avec les balises <meta> et <title>

Comprendre les balises HTML simples et doubles

Explorer la balise <body> et le placement du contenu de la page

Résumé

Configuration de la section `<head>` avec les balises `<meta>` et `<title>`

Explorer la balise `<body>` et le placement du contenu de la page