Apprenez les bases de l’HTML pour maîtriser les technologies de l’information, Internet et les réseaux sociaux

Par Pierre Martin, publié le 1 août 2023 à 11h50.

Internet et réseaux sociaux

Html - Image d'illustration.

Dans cet article, nous vous proposons d’apprendre les notions de base du langage de codage HTML. Ce dernier est utilisé pour créer des pages web et permet d’accéder aux fonctionnalités offertes par les technologies de l’information, Internet et les réseaux sociaux.

Qu’est-ce que l’HTML ?

L’HyperText Markup Language (HTML) est un langage de balisage qui permet de structurer le contenu et la mise en forme des documents sur le Web. Il s’agit d’un standard du World Wide Web Consortium (W3C), une organisation internationale qui développe et maintient les normes du Web.

Le HTML est composé de balises (tags en anglais) qui déterminent comment le texte et les autres éléments de la page seront affichés dans les navigateurs. Chaque balise est définie par une paire d’accolades angulaires « < » et « > ». Les balises sont généralement utilisées par paires, avec une balise ouvrante et une balise fermante.

Les principales balises HTML

Voici une liste non exhaustive des balises les plus couramment utilisées dans un document HTML :

< !DOCTYPE> : définit le type de document et sa version (par exemple, HTML5).
<html> : délimite le début et la fin du document HTML.
<head> : contient les informations générales sur la page, telles que le titre et les métadonnées.
<body> : englobe tout le contenu visible de la page (texte, images, liens, etc.).
<h1> à <h6> : représente les titres et sous-titres de niveaux différents. Le niveau <h1> est le plus important et <h6> est le moins important.
<p> : définit un paragraphe de texte.
<a> : crée un lien hypertexte vers une autre page web ou un fichier externe.
<img> : insère une image dans la page.
<ul> : crée une liste à puces non ordonnées.
<ol> : crée une liste numérotée ordonnée.
<table> : génère un tableau pour présenter des données tabulaires.

Mise en forme du texte avec l’HTML

Le langage HTML offre plusieurs balises pour la mise en forme du texte, telles que :

<b> : met le texte en gras. Il est préférable d’utiliser la balise <strong> pour indiquer l’importance d’un texte.
<i> : met le texte en italique. Il est recommandé d’utiliser la balise <em> pour insister sur une partie du texte.
<br> : crée un saut de ligne sans changer de paragraphe.
<pre> : affiche du texte préformaté avec des espacements fixes et respecte les retours à la ligne présents dans le code source.

Les attributs HTML

En plus des balises, il existe des attributs HTML qui permettent de spécifier des propriétés supplémentaires pour une balise. Les attributs sont inclus dans la balise ouvrante et sont constitués d’une paire clé-valeur. Voici quelques exemples :

id : attribut qui assigne un identifiant unique à un élément HTML. Cela peut être utile pour appliquer des styles CSS ou manipuler l’élément avec JavaScript.
class : attribut qui détermine la ou les classes CSS à appliquer à un élément HTML. Plusieurs éléments peuvent partager la même classe.
src : attribut utilisé avec les balises <img>, <audio> et <video> pour indiquer l’URL du fichier source.
href : attribut utilisé avec la balise <a> pour déterminer l’URL de destination du lien hypertexte.
alt : attribut qui fournit une description textuelle alternative pour les images. Ceci est important pour l’accessibilité des personnes malvoyantes et les moteurs de recherche.

Exemple de code HTML simple

Voici un exemple de code HTML mettant en pratique certaines notions abordées dans cet article :

< !DOCTYPE html>
<html>
  <head>
    <title>Ma première page HTML</title>
  </head>
  <body>
    <h1>Bienvenue sur ma page web !</h1>
    <p>Ceci est un paragraphe de texte.</p>
    <p>Consultez mon <a href="blog.html">blog</a> pour en savoir plus.</p>
    <ul>
      <li>Article 1</li>
      <li>Article 2</li>
    </ul>
  </body>
</html>

Cet exemple de code crée une page web simple avec un titre, deux paragraphes, un lien hypertexte et une liste à puces.

En maîtrisant les bases du codage en HTML, vous serez en mesure de créer vos propres pages web et d’interagir efficacement avec les technologies de l’information, Internet et les réseaux sociaux. N’hésitez pas à explorer davantage les différentes balises et attributs pour enrichir vos compétences en matière de développement web.

Le Récap

Qu’est-ce que l’HTML ?
Les principales balises HTML
Mise en forme du texte avec l’HTML
Les attributs HTML
Exemple de code HTML simple

Qu’est-ce que l’HTML ?

Les principales balises HTML

Mise en forme du texte avec l’HTML

Les attributs HTML

Exemple de code HTML simple

Pour débuter