Leçons
Démarrer
Démarrer la formation
CodeGym /Cours /Python SELF FR /Introduction à HTML

Introduction à HTML

Python SELF FR
Niveau 29 , Leçon 0
Disponible

1. Les balises en HTML

Qu'est-ce que HTML ?

HTML (HyperText Markup Language) est un langage de balisage utilisé pour créer et structurer des pages web. Avec HTML, on peut organiser le contenu d'une page en utilisant différentes balises et attributs pour que le navigateur sache comment afficher les données. Dans cette conférence, on va explorer les concepts de base de HTML comme les balises, l'arbre des balises, les attributs, les balises autosuffisantes et la structure d'un document HTML.

En HTML, les balises sont les éléments clés qui permettent de baliser le contenu. Elles entourent du texte ou d'autres éléments pour aider le navigateur à comprendre comment les afficher. Par exemple, les balises <h1> et <p> indiquent au navigateur que le texte à l'intérieur est un titre ou un paragraphe.

Les balises sont écrites entre crochets angulaires <>. La plupart des balises ont une balise d'ouverture et une balise de fermeture. Par exemple :

HTML 
                      
                        <h1>Ceci est un titre</h1>
                        <p>Ceci est un paragraphe.</p>
Kotlin

Ici, <h1> est une balise d'ouverture, et </h1> est une balise de fermeture.

L'arbre des balises

Un document HTML possède une structure hiérarchique où les balises sont imbriquées les unes dans les autres, formant une structure arborescente. Cet "arbre des balises" définit comment les éléments sur la page sont connectés entre eux et dans quel ordre ils doivent être affichés.

Voici un exemple d'arbre de balises simple :

Python 

<html>
<head>
  <title>Exemple de page</title>
</head>
<body>
  <h1>Titre de la page</h1>
  <p>Voici un texte de paragraphe.</p>
</body>
</html>

Dans cet exemple, la balise <html> est l'élément racine. À l'intérieur, on trouve <head> et <body>. À l'intérieur de <body>, il y a les balises <h1> et <p>. Cette structure permet d'organiser logiquement le contenu de la page.

Les attributs

Les attributs en HTML sont utilisés pour ajouter des informations supplémentaires aux balises. Ils se placent dans la balise d'ouverture et sont composés d'un nom et d'une valeur. Par exemple :

HTML 

<a href="https://example.com">Lien vers le site</a>
<img src="image.jpg" alt="Description de l'image">
  • href indique l'adresse du lien.
  • src — le chemin vers une image.
  • alt — texte alternatif qui s'affiche si l'image ne se charge pas.

Les attributs permettent d'ajouter des caractéristiques supplémentaires aux éléments, comme un identifiant (id), des classes (class), des styles (style) et bien d'autres.

Les balises autosuffisantes

Certaines balises HTML ne contiennent pas de contenu interne et n'ont pas besoin de balise de fermeture. Ces balises sont dites autosuffisantes. Par exemple, la balise <img> est utilisée pour insérer une image et sa structure ressemble à ceci :

CSS 
  
    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.codegym.cc/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="Description de l'image">
HTML 
  
    <img src="image.jpg" alt="Description de l'image">

Autres exemples de balises autosuffisantes :

  • <br> — pour un saut de ligne.
  • <hr> — pour ajouter une ligne horizontale.

2. Introduction au document HTML

Un document HTML commence par la déclaration <!DOCTYPE html>, qui indique au navigateur que c'est un document HTML5. Ensuite vient la balise racine <html>, qui contient les balises <head> et <body>. Dans <head>, on trouve les métadonnées du document (titre, styles, scripts), et dans <body>, le contenu principal de la page.

Exemple de document HTML

Python 
      
        <!DOCTYPE html>
        <html lang="fr">
        <head>
          <meta charset="UTF-8">
          <title>Ma première page</title>
        </head>
        <body>
          <h1>Bienvenue !</h1>
          <p>Ceci est un exemple de document HTML.</p>
          <a href="https://example.com">Visitez notre site</a>
        </body>
        </html>
  • <!DOCTYPE html> informe le navigateur que le document est écrit en HTML5.
  • <html lang="fr"> spécifie la langue du document.
  • <meta charset="UTF-8"> définit l'encodage pour afficher correctement les caractères.
  • <title> donne le titre de la page, visible dans l'onglet du navigateur.

Balises supplémentaires dans <head>

La balise <head> contient des informations qui ne sont pas affichées directement sur la page mais qui sont importantes pour le site. Dans <head>, on peut ajouter les balises suivantes :

  • <meta name="description" content="Description de la page"> — une brève description de la page pour les moteurs de recherche.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> — permet de rendre le site adapté aux appareils mobiles.
  • <link rel="stylesheet" href="styles.css"> — pour inclure un fichier CSS contenant les styles.
  • <script src="script.js"></script> — pour inclure un fichier JavaScript externe.

Ces balises aident à améliorer l'interaction avec les utilisateurs, optimiser la page pour les moteurs de recherche et connecter les ressources nécessaires.

Commentaires
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION