11 - HTML

Introduction

HTML (HyperText Markup Language) est le langage utilisé pour structurer les pages Web. Il repose sur un système de balises (encadrées par des chevrons < >) qui décrivent le contenu et sa signification : titres, paragraphes, liens, images, etc.

HTML a un rôle sémantique : il ne dit pas « ce texte doit être en gros et en gras » mais plutôt « ce texte est un titre de niveau 1 ». C’est le navigateur (ou la feuille de style CSS) qui décide ensuite de l’apparence.

On peut afficher le code HTML de n’importe quelle page Web en faisant un clic droit puis Afficher le code source de la page, ou avec le raccourci Ctrl+U.

Structure générale d’une page

Toute page HTML suit cette structure :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Mon premier document</title>
  </head>
  <body>
    <h1>Titre de mon document</h1>
    <!-- Ceci est un commentaire -->
    <p>Bonjour, bienvenue sur ma page !</p>
  </body>
</html>

Le document est séparé en deux grandes parties :

  • <head> contient des informations destinées au navigateur (encodage, titre de l’onglet, liens vers des feuilles de style, etc.) ;
  • <body> contient le contenu visible de la page.

Règles à retenir :

  • le fichier commence par <!DOCTYPE html> ;
  • les commentaires s’écrivent <!-- ... --> ;
  • on écrit les balises en minuscules ;
  • l’indentation n’est pas obligatoire mais rend le code plus lisible.

Les balises

Une balise ouvrante et une balise fermante encadrent un contenu :

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

Certaines balises sont auto-fermantes (elles n’ont pas de contenu) :

<br>
<img src="photo.jpg" alt="Une photo">

Imbrication correcte

Les balises doivent être correctement imbriquées : on ferme d’abord la dernière balise ouverte.

<!-- Correct -->
<em>Ceci est <strong>très</strong> important</em>

<!-- Incorrect -->
<em>Ceci est <strong>très</em> important</strong>

Attributs

Les balises peuvent avoir des attributs qui précisent leur comportement. Un attribut se place dans la balise ouvrante sous la forme nom="valeur" :

<a href="https://example.com" target="_blank">Cliquez ici</a>
<img src="logo.png" alt="Logo" width="200">

Organiser son texte

Titres

Il existe six niveaux de titre, de <h1> (le plus important) à <h6> (le moins important) :

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Section</h3>

Paragraphes et sauts de ligne

<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<p>Un saut de ligne<br>au milieu du paragraphe.</p>

Mise en valeur

<strong>Texte important</strong>
<em>Texte en italique</em>
<mark>Texte surligné</mark>

Listes

Une liste non ordonnée (à puces) utilise <ul>, une liste ordonnée (numérotée) utilise <ol>. Chaque élément est dans une balise <li> :

<ul>
  <li>Premier élément</li>
  <li>Deuxième élément</li>
</ul>

<ol>
  <li>Étape 1</li>
  <li>Étape 2</li>
</ol>

Conteneurs

Les balises <div> et <span> sont des conteneurs génériques :

  • <div> regroupe des blocs d’éléments (paragraphes, listes, etc.) ;
  • <span> s’applique à une portion de texte à l’intérieur d’un bloc.
<div>
  <h2>Section</h2>
  <p>Un paragraphe avec un mot <span style="color:red;">en rouge</span>.</p>
</div>

Les liens hypertextes

Les liens permettent de naviguer entre les pages. On utilise la balise <a> avec l’attribut href :

<!-- Lien vers un site externe -->
<a href="https://www.csilyon.fr/">Site de la CSI</a>

<!-- Ouverture dans un nouvel onglet -->
<a href="https://www.csilyon.fr/" target="_blank">Site de la CSI</a>

<!-- Lien vers une autre page du même site -->
<a href="page2.html">Page 2</a>

<!-- Lien vers une ancre dans la même page -->
<a href="#introduction">Retour à l'introduction</a>

Les images

Les formats d’image courants sur le Web sont :

  • JPEG : adapté aux photographies ;
  • PNG : adapté aux illustrations, logos, captures d’écran ;
  • GIF : images simples ou animations.
<img src="photo.jpg" alt="Description de l'image">

L’attribut alt est obligatoire : il fournit un texte alternatif si l’image ne peut pas être affichée et améliore l’accessibilité.

On peut ajouter une légende avec <figure> et <figcaption> :

<figure>
  <img src="elephant.jpg" alt="Un éléphant">
  <figcaption>Un éléphant dans la savane</figcaption>
</figure>

On peut aussi faire d’une image un lien cliquable :

<a href="https://www.csilyon.fr/">
  <img src="logo-csi.png" alt="Logo de la CSI" width="150">
</a>

Validation

Pour vérifier si le code HTML d’une page est valide, on peut utiliser le validateur du W3C :

http://validator.w3.org/#validate_by_input+with_options


10 - Langage assembleur 12 - CSS