Introduction au HTML

Qu'est-ce que le HTML ?

HTML, pour Hypertext Markup Language, est le langage de balisage standard pour créer des pages web. Il décrit la structure d'une page web en utilisant une série de balises.

Une page HTML de base

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Ma première page</title>
</head>
<body>
  <h1>Bienvenue !</h1>
  <p>Ceci est une simple page web.</p>
</body>
</html>

Tous les éléments à ajouter dans la page web sont à insérer entre les balises <body> et </body>

Balise ouvrante/fermante

En HTML, la majorité des balises possèdent une balise ouvrante et une balise fermante. Ces balises encadrent le contenu qu’elles affectent. Voici les caractéristiques principales :

Balise ouvrante : Composée du nom de la balise, entourée de chevrons < >. Elle peut contenir des attributs.
Exemple : <p> ou <a href="https://www.exemple.com">
Balise fermante : Identique à la balise ouvrante, mais précédée d’un slash / pour indiquer la fin de l’élément.
Exemple : </p> ou </a>

Exemple d’une balise ouvrante et fermante

<p>Ceci est un paragraphe avec une balise ouvrante et une balise fermante.</p>

Cas particuliers : les balises auto-fermantes

Certaines balises HTML ne nécessitent pas de balise fermante. Elles sont appelées balises auto-fermantes et sont utilisées pour des éléments ne contenant pas de contenu.

Exemple : <img /> ou <input /> Ces balises peuvent inclure des attributs comme src ou type.

Exemple de balises auto-fermante

<img src="image.jpg" alt="Une image descriptive" />
<input type="text" placeholder="Entrez votre texte" />

Rappel : bien structurer les balises

Toutes les balises ouvrantes doivent correspondre à des balises fermantes.
Les balises doivent être correctement imbriquées :

<div>
  <p>Ceci est un paragraphe.</p>
</div>

Incorrect :

<div>
  <p>Ceci est un paragraphe.</div>
  </p>

Les erreurs d’imbrication ou l’oubli de balises fermantes peuvent entraîner des comportements inattendus sur votre page web.

La distinction entre balises ouvrantes, fermantes et auto-fermantes est essentielle pour écrire un code HTML valide et compréhensible. Une bonne pratique consiste à utiliser un éditeur avec une validation HTML pour éviter les erreurs de syntaxe.

Les Balises de base en HTML

`<body>`

Utilisation : La balise <body> contient le contenu principal de votre document HTML, c'est-à-dire tout ce qui est visible sur la page web.
Exemple :

exemple.html

<body>
  <p>Ceci est un paragraphe.</p>
</body>

`<hn>`

Utilisation : <h1> à <h6> sont des balises de titre, h1 étant le plus important et h6 le moins.

exemple.html

<h1>Titre Principal</h1>
<h2>Titre Secondaire</h2>

`<p>`

Utilisation : La balise <p> est utilisée pour définir un paragraphe.
Exemple :

exemple.html

<p>Ceci est un exemple de paragraphe.</p>

`<a>`

Utilisation : La balise <a> définit un hyperlien.
Attributs importants :
- href : URL de la page vers laquelle le lien mène.
Exemple :

exemple.html

<a href="https://www.exemple.com">Visitez notre site</a>

`<img>`

Utilisation : La balise <img> est utilisée pour intégrer des images.
Attributs importants :
- src : L'URL de l'image.
- alt : Texte alternatif pour l'image.
Exemple :

exemple.html

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

`<div>`

Utilisation : La balise <div> est un conteneur générique pour le flux de contenu.
Exemple :

exemple.html

<div>
  <p>Un paragraphe à l'intérieur d'une div.</p>
</div>

Attributs et valeurs d'attributs

Attributs : Fournissent des informations supplémentaires sur une balise. Exemples : href, src, alt.
Valeurs d'attribut : Spécifient les données de l'attribut. Par exemple, dans href="https://www.exemple.com", https://www.exemple.com est la valeur de l'attribut href.