HTML Basic Examples - Tutoriel

Introduction

Dans ce tutoriel, nous allons explorer des exemples de code HTML de base pour vous aider à comprendre les concepts fondamentaux du langage de balisage.

Exemples

Exemple 1 : Texte et Balises

Utilisation de balises de texte pour créer une structure simple :

       <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Exemple de Texte HTML</title>
        </head>
        <body>
            <h1>Titre Principal</h1>
            <p>Ceci est un paragraphe.</p>
        </body>
        </html>

Exemple 2 : Liens Hypertextes

Création d'un lien hypertexte vers une page externe :

       <a href="https://www.example.com">Visitez Example.com</a>

HTML est un langage de balisage hypertexte utilisé pour créer des pages web. Il est composé d'éléments, qui sont des balises qui définissent la structure et le contenu d'une page web.

Dans ce tutoriel, nous allons apprendre les bases de l'HTML en examinant quelques exemples simples.

Exemple 1 : Une page web simple

Voici un exemple d'une page web simple :

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Ma première page web</title>
</head>
<body>
  <h1>Ce titre est en gros</h1>
  <p>Ce paragraphe est en normal</p>
</body>
</html>

Utilisez le code avec précaution. En savoir plus

Ce code crée une page web avec un titre et un paragraphe.

Explication

La ligne <!DOCTYPE html> indique au navigateur que le code est écrit en HTML.
La ligne <html> marque le début du document HTML.
La ligne <head> marque le début de la section <head> du document HTML.
La ligne <title> définit le titre de la page web.
La ligne </head> marque la fin de la section <head> du document HTML.
La ligne <body> marque le début de la section <body> du document HTML.
La ligne <h1> définit un titre de niveau 1.
La ligne <p> définit un paragraphe.
La ligne </body> marque la fin de la section <body> du document HTML.
La ligne </html> marque la fin du document HTML.

Exemple 2 : Un lien hypertexte

Voici un exemple d'un lien hypertexte :

HTML

<a href="https://fr.wikipedia.org/wiki/HTML">Lien vers la page Wikipedia sur HTML</a>

Utilisez le code avec précaution. En savoir plus

Ce code crée un lien vers la page Wikipedia sur HTML.

Explication

La balise <a> est utilisée pour créer un lien hypertexte.
L'attribut href définit l'adresse du lien.

Exemple 3 : Une image

Voici un exemple d'une image :

HTML

<img src="image.jpg" alt="Une image">

Utilisez le code avec précaution. En savoir plus

Ce code insère une image sur la page web.

Explication

La balise <img> est utilisée pour insérer une image sur une page web.
L'attribut src définit l'adresse de l'image.
L'attribut alt définit un texte alternatif à afficher si l'image ne peut pas être chargée.

Exercice

Créez une page web avec les éléments suivants :

Un titre de niveau 2
Un paragraphe avec une liste à puces
Une image
Un lien vers une autre page web

Testez votre page web en la ouvrant dans un navigateur.

Exercices avec Corrections

Exercice 1 : Structure de Liste

Créez une liste ordonnée (<ol>) avec trois éléments de votre choix.

       <ol>
            <li>Élément 1</li>
            <li>Élément 2</li>
            <li>Élément 3</li>
        </ol>

Questions à Choix Multiple (QCM)

Quelle balise est utilisée pour créer un lien hypertexte?
- A. <link>
- B. <a>
- C. <url>
Réponse correcte : B

Questions & Réponses

Question : Quelle est la fonction de la balise <head>?

Réponse : La balise <head> contient des éléments tels que la méta-information, les liens vers des fichiers CSS, et le titre de la page.

Études de Cas

Cas d'utilisation : Intégration d'une Image

Imaginez que vous devez intégrer une image (<img>) à votre page HTML. Proposez le code correspondant.

       <img src="chemin_de_l_image.jpg" alt="Description de l'image">

Éléments à Retenir

Les balises de texte structurent le contenu.
Les liens hypertextes sont créés avec la balise <a>.
La balise <head> contient des informations sur la page.

Proposition d'un Examen avec Correction

Quelle balise est utilisée pour structurer une liste ordonnée?
- A. <ul>
- B. <li>
- C. <ol>
Correction : C

Afficher le Contenu de la Réponse sous Forme d'une Page HTML

       <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Réponses HTML Basic Examples</title>
        </head>
        <body>
            <!-- Insérez ici le contenu des réponses sous forme de balises HTML -->
        </body>
        </html>