Cours HTML basique

1. Qu'est-ce que le HTML ?

HTML, acronyme de HyperText Markup Language, est le langage de balisage standard utilisé pour créer et structurer des pages web.

Il est composé d'éléments appelés balises qui décrivent le contenu et la structure de la page. Les balises permettent de marquer différents types de contenu tels que du texte, des images, des liens, des formulaires, etc.

Le HTML est la base fondamentale de toute page web et est souvent combiné avec d'autres technologies web telles que le CSS pour le style et le JavaScript pour l'interactivité.

Exemple simple de code HTML : 👇


<h1>Titre principal de la page</h1>

<h3>Titre de paragraphe</h3>
<p>Je suis un <b>premier paragraphe</b>...</p>
<p>Je suis un <b>deuxieme paragraphe</b>...</p>

<ul>
  <li>Accueil</li>
  <li>À propos</li>
  <li>Contact</li>
</ul>

<a href="https://example.com" target="_blank">Je suis un lien externe</a>

👁 Affichage dans le navigateur :

Titre principal de la page

Titre de paragraphe

Je suis un premier paragraphe...

Je suis un deuxième paragraphe...

Accueil
À propos
Contact

Je suis un lien externe

2. L'éditeur de code.

Lorsque vous commencez à créer des sites web, l'outil le plus important que vous utiliserez est votre éditeur de code. C'est là que vous saisirez toutes les lignes de code qui composeront votre site. Pour les débutants, nous recommandons un éditeur de code convivial et polyvalent tel que Visual Studio Code.

Visual Studio Code, souvent abrégé VS Code, est un éditeur de code gratuit et open source développé par Microsoft. Il offre de nombreuses fonctionnalités qui le rendent idéal pour les débutants et les professionnels. Doté d'une interface utilisateur intuitive et d'une large gamme d'extensions, VS Code facilite l'écriture, la lecture et la gestion du code HTML et CSS.

Une des fonctionnalités les plus utiles de Visual Studio Code est son système d'extensions. Vous pouvez personnaliser et étendre les capacités de l'éditeur en installant des extensions pour le langage HTML, le langage CSS, et bien d'autres encore. Ces extensions ajoutent des fonctionnalités telles que la coloration syntaxique améliorée, les suggestions de code, la validation du code et bien plus encore, ce qui rend l'écriture de code plus rapide et plus précise.

En résumé, l'éditeur de code est l'outil de base de tout développeur web, et Visual Studio Code est un excellent choix pour les débutants en raison de sa simplicité, de sa polyvalence et de sa puissance.

3. Architecture du dossier web.

L'architecture du dossier web fait référence à la structure organisationnelle des fichiers et des répertoires d'un site web.

Structure de dossier web : 👇


  <!-- Contient le site web -->
  📂 Dossier web
  ├── 📄 index.html
  ├── 📄 contact.html
  ├── 📁 css/
  │   └── 📄 styles.css
  ├── 📁 js/
  │   └── 📄 scripts.js
  ├── 📁 images/
  │   └── 📷 image.png
  │   └── 📷 image.jpeg
  │   └── 📷 image.webp
  └── 📁 assets/
      ├── 📁 fonts/
      │   └── 📝 arial.ttf
      ├── 📁 icons/
      │   └── 🌄 image.svg
      ├── 📁 audios/
      │   └── 🎵 audio.mp3
      │   └── 🎵 audio.ogg
      │   └── 🎵 audio.wave
      └── 📁 videos/
          └── 🎞 video.mp4
          └── 🎞 video.mpeg

ℹ Dans cette structure :

index.html, est la page d'accueil du site.
css/, contient les fichiers CSS.
js/, contient les fichiers JavaScript.
images/, contient les fichiers images.
assets/, contient d'autres ressources telles que:

des polices,
des icônes,
des musiques,
des vidéos.

Cette architecture permet une organisation claire et logique des fichiers, facilitant ainsi la maintenance et la gestion du site web.

4. Balises structurantes.

Les balises HTML structurantes sont utilisées pour organiser et structurer le contenu d'une page web de manière logique et hiérarchique ainsi que d'améliorer son accessibilité et son référencement.

Voici quelques-unes de ces balises : 👇


 <nav>
  <!-- Barre de navigation-->
 </nav>

 <header>
  <!-- En-tête du site web -->
 </header>

 <!-- Contenu de la page -->
 <main>

 <!-- Section 1 -->
  <section>
    <article>
      <!-- Article -->
    </article>
 </section>

 <!-- Contenu latérale -->
 <aside>
  <address>
    <!-- Une adresse -->
  </address>
  <blockquote>
    <!-- Une citation -->
  </blockquote>
 </aside>

 <!-- Section 2 -->
 <section>
  <!-- Balise de division -->
    <div>
      <!-- Contenu -->
    </div>
 </section>

 </main>
 <!-- Fin du Contenu de la page -->

 <footer>
  <!-- Pied de page -->
 </footer>

5. Balises essentielles textes.

Les balises HTML essentielles pour le texte sont utilisées pour structurer et formater le contenu textuel d'une page web. Ces balises sont utilisées en permanence quelque soit le projet de la page web !

Voici quelques-unes de ces balises : 👇


  <h1>Titre de niveau 1</h1>
  <h2>Titre de niveau 2</h2>
  <h3>Titre de niveau 3</h3>
  <h4>Titre de niveau 4</h4>
  <h5>Titre de niveau 5</h5>
  <h6>Titre de niveau 6</h6>

  <p>Je suis un paragraphe</p>
  <i>Texte en Italique.</i>
  <b>Texte en gras.</b>
  <em>Texte important.</em>
  <del>Texte barré.</del>
  <mark>Texte en surbrillance</mark>
  <u>Texte souligné</u>
  <sup>Texte exposant</sup>
  <sub>Texte indice</sub>
  <abbr>Texte abrégé</abbr>

  <br> <!-- Saut de ligne -->
  <hr> <!-- Séparateur horizontal -->

  <!-- Lien interne -->
  <a href="index.html">Accueil</a>
  <!-- Lien externe -->
  <a href="https://example.com"target="_blank">Lien externe</a>

  <!-- Liste non ordonnée -->
  <ul>
    <li>Élément de liste</li>
    <li>Élément de liste</li>
    <li>Élément de liste</li>
  </ul>

  <!-- Liste ordonnée -->
  <ol>
    <li>Élément de liste</li>
    <li>Élément de liste</li>
    <li>Élément de liste</li>
  </ol>

6. Balises multimedias

Les balises multimédias en HTML permettent d'intégrer différents types de contenu multimédia, tels que des images, des fichiers audio et des vidéos, dans une page web. Elles offrent également des fonctionnalités de contrôle.

Voici quelques-unes de ces balises : 👇


<h3>🔍 Illustration</h3>
<figure>
<img src="Image" alt="Description" width="100%">
<figcaption>Image illustrative</figcaption>
</figure>

<h3>🎧 Podcast</h3>
<figure>
<audio src="Audio" controls></audio>
<figcaption>Episode du podcast</figcaption>
</figure>

<h3>📹 Vidéo Démonstrative</h3>
<figure>
<video src="Vidéo" controls></video>
<figcaption>Apprenez le HTML</figcaption>
</figure>

➡ alt est utilisé dans la balise <img> pour fournir un texte alternatif décrivant le contenu de l'image. Cet attribut est important pour l'accessibilité, car il est lu par les lecteurs d'écran pour aider les utilisateurs ayant une déficience visuelle à comprendre le contenu de l'image lorsqu'elle ne peut pas être affichée.

➡ src est utilisé dans les balises <img>, <audio> et <video> pour spécifier l'URL de la ressource à afficher ou à lire.

➡ width est utilisé dans la balise <img> pour spécifier la largeur de l'image en pixels ou en pourcentage de la largeur de son conteneur. Il est couramment utilisé pour contrôler la taille de l'image affichée sur la page web. La valeur 100% utilisée dans ce code permet à l'image de s'adapter à la largeur de son conteneur, assurant ainsi une mise en page flexible et réactive.

➡ controls est utilisé dans les balises <audio> et <video> pour inclure des contrôles de lecture de base pour les contenus multimédias. Lorsqu'il est présent, il affiche automatiquement des boutons de lecture, de pause et de volume, ainsi qu'une barre de progression de lecture. Cela permet aux utilisateurs de contrôler la lecture du média, de régler le volume et de naviguer dans le contenu. C'est une fonctionnalité importante pour offrir une expérience utilisateur interactive et conviviale.

📑 Structure d'une page web !

Gardez bien en tête qu'il ne s'agit que de la structuration HTML et que si vous utilisez ce code dans un éditeur de texte, seule la structure HTML apparaîtra dans le navigateur. Pour la mise en forme, il faudra apprendre CSS :)

👁 Structure HTML de base pour une page web.


  <!DOCTYPE html>
  <html lang="fr">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Ma première page web</title>
      <link rel="stylesheet" href="css/styles.css">
    </head>

    <body>

    <!-- En-tête du site -->
    <header>
      <h1>Titre principal</h1>
      <nav>
        <ul>
          <li><a href="#">Accueil</a></li>
          <li><a href="#">À propos</a></li>
          <li><a href="#">Services</a></li>
        </ul>
      </nav>
    </header>

    <!-- Contenu de la page -->
    <main>
      <section>
        <h2>Section 1</h2>
        <p>Ceci est un paragraphe dans la section 1.</p>
        <img src="image.jpg" alt="Image">
      </section>

      <section>
        <h2>Section 2</h2>
        <p>Un autre paragraphe pour la section 2.</p>
        <a href="#">Lien vers une autre page</a>
      </section>
    </main>

    <!-- Pied de page -->
    <footer>
      <p>Pied de page - © 2023 Mon Site Web</p>
    </footer>

    </body>
  </html>

Allez plus loin que ces simples démonstrations HTML !

↪ Les exemples ici ne sont que des aperçus de ce que le HTML peut offrir !
✔ Pour approfondir et maîtriser chaque aspect du HTML, plongez dans les tutos vidéos gratuits ou contactez l'agence web pour des cours privés (payants).
✔ Fini les solutions impersonnelles comme WordPress ou les documents fades sous Word : place à des sites vitrines professionnels et des mises en page HTML/CSS bien plus élégantes !