INTRODUCTION AU HTML/CSS

Introduction

Le HTML est le principal langage utilisé sur internet. Il permet de structurer du texte, des images, de créer des liens... Apparu au début des années 1990, il est complété dix ans plus tard par le CSS (les versions 1 et 2 ont été peu utilisées), avec l'idée de séparer le document en deux parties :

Le tableau ci-dessous présente un bref historique de ces langages.

DateEvénementOrigine
1989-1992Naissance du HTMLTimothy John Berners-Lee (CERN)
1995HTML 2.0 puis 3.0W3C
1996CSS1
1997HTML 4.0
1998CSS2
1999CSS3
2000XHTML
2007HTML5, abandon du XHTML
2010CSS4

Les balises

Le HTML comporte environ 140 balises (on dit tag ou markup en anglais) différentes. On en trouve plusieurs sortes :

Une balise peut comporter un ou plusieurs attributs, donnant des précisions sur cette balise. A un attribut correspond une valeur.

Exemples

<p>Bonjour</p>
<hr width="50%">

Dans un document HTML, la première balise est la balise ouvrante <html> à laquelle correspond la balise fermante </html>. Quand le navigateur rencontre ces balises, il sait que le document est au format HTML. Il peut l'interpréter.

Un document au format HTML comporte deux parties (non obligatoires mais conseillées) :

En somme, un document au format HTML se présente sous la forme :

<html>

<head>
  ...
</head>

<body>
  ...
</body>

</html>

Ce code doit être complété avec :

Cela donne donc :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  ...
</head>

<body>
  ...
</body>

</html>

Remarques

Créer un document

Prenons un exemple. Un document avec un titre et deux parties comportant des paragraphes.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  TITRE DU DOCUMENT
  Titre de la partie 1
  Premier paragraphe de la première partie.
  Deuxième paragraphe de la deuxième partie.
  Titre de la partie 2
  Paragraphe de la deuxième partie.
</body>

</html>

Que se passe-t-il, dans la fenêtre navigateur? Tout ce que vous avez écrit s'affiche à la suite, sans retour à la ligne. En fait :

Donc, voici ce qu'il faut écrire :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <h1>TITRE DU DOCUMENT</h1>
  <h2>Titre de la partie 1</h2>
  <p>Premier paragraphe de la première partie.</p>
  <p>Deuxième paragraphe de la deuxième partie.</p>
  <h2>Titre de la partie 2</h2>
  <p>Paragraphe de la deuxième partie.</p>
</body>

</html>

Ce qui donne:

Mettre en forme les caractères

C'est très simple :

Exemples de mise en forme :

Présenter le document

Un titre pour la fenêtre

Cette fois, nous allons écrire entre les balises <head> et </head>. Commençons par mettre un titre. Il s'affiche dans le bandeau supérieur de la fenêtre.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Le titre du document</title>
</head>

<body>
  ...

Il est également possible d'associer au site web une favicon. Il s'agit d'une petite icône symbolisant le site et qui s'affiche, selon le navigateur, dans le bandeau à gauche du titre ou dans la barre d'adresse à gauche de l'URL. Cette icône a généralement une taille de 16×16 ou de 32×32 pixels. On la met en place en ajoutant, entre les balises <head> et </head> :

<link rel="icon" type="image/png" href="favicon.png">

Introduction au CSS

Pour donner une couleur au fond d'écran, écrivons une feuille de style. Ecrite dans le langage CSS, elle est ici placée entre les balises <style> et </style>. Elle peut aussi se placer dans un fichier à part.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Le titre du document</title>
  <style>
    body { background-color : pink; }
  </style>
</head>

<body>
  ...

Complétons cette feuille de style, pour :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Le titre du document</title>
  <style>
    body { background-color : pink; }
    h1 {
      text-align : center;
      color : red;
    }
    h2 {
      background-color : gold;
      color : green;
    }
  </style>
</head>

<body>
  ...

Ce qui donne :

Insérer des images

Retournons écrire entre les balises <body> et </body> . Bien sûr, pour insérer une image, il faut... une image. Vous pouvez récupérer le logo ci-dessous, si vous voulez. (le curseur de la souris étant sur l'image, clic droit, enregistrer l'image sous...).

Pour insérer l'image dans votre document, il vous suffit d'écrire :

<img src="Tux.png">

Créer des liens hypertexte

Naviguer d'une page à l'autre

HTML signifie hypertext markup language, qui se traduit par langage de liens hypertexte. Les liens, créés avec les balises <a> et </a> permettent de naviguer d'une page à l'autre. On peut insérer entre ces balises du texte ou des images.

Soient deux pages au format HTML. L'une se nomme page1.html et l'autre page2.html.

Dans la page page1.html, entre les balises <body> et </body>, écrivons :

<a href="page2.html">Lien vers la page 2</a>

De même, dans la page page2.html, entre les balises <body> et </body> :

<a href="page1.html">Lien vers la page 1</a>

Affichez la page page1.html avec le navigateur puis cliquez sur le lien que vous venez de créer. Vous devriez voir apparaître la page page2.html. Dans cet exemple, le lien est créé sur un texte. Il est possible de le remplacer par une image.

Naviguer au sein de la page

Il est également possible de placer des liens au sein même de la page, comme le montre l'exemple ci-dessous.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <h1>TITRE DU DOCUMENT</h1>
  <a href="#partie_1">Première partie</a>
  <a href="#partie_2">Deuxième partie</a>
  <h2 id="partie_1">Titre de la partie 1</h2>
  <p>Bla bla.</p><p>Bla bla.</p><p>Bla bla.</p><p>Bla bla.</p>
  <p>Bla bla.</p><p>Bla bla.</p><p>Bla bla.</p><p>Bla bla.</p>
  <h2 id="partie_2">Titre de la partie 2</h2>
  <p>Bla bla.</p><p>Bla bla.</p><p>Bla bla.</p><p>Bla bla.</p>
  <p>Bla bla.</p><p>Bla bla.</p><p>Bla bla.</p><p>Bla bla.</p>
  <p>Bla bla.</p><p>Bla bla.</p><p>Bla bla.</p><p>Bla bla.</p>
  <p>Bla bla.</p><p>Bla bla.</p><p>Bla bla.</p><p>Bla bla.</p>
</body>

</html>

Créer des tableaux

Créer un tableau basique

Pour créer un tableau on utilise plusieurs balises :

Exemple de code :

<table border="1">
  <tr><th>Date</th><th>Température (°C)</th></tr>
  <tr><td>2014-09-30 12:00:00</td><td>18.4</td></tr>
  <tr><td>2014-10-30 12:00:00</td><td>17.7</td></tr>
  <tr><td>2014-11-30 12:00:00</td><td>19.1</td></tr>
</table>

Résultat obtenu :

Fusionner des cellules

Pour fusionner les cellules, on utilise deux sortes d'attributs :

Exemple de code :

<table border="1">
  <tr><td rowspan="2">A</td><td colspan="2">B</td></tr>
  <tr><td>C</td><td>D</td></tr>
</table>

Résultat obtenu :

Ajouter un titre

Un titre de tableau se place entre les balise <caption> </caption>, juste après la balise <table>. Exemple de code :

<table border="1">
  <caption>Etudiants</caption>
  <tr><th>Nom</th><th>Age</th></tr>
  <tr><td>Dupont</td><td>18 ans</td></tr>
  <tr><td>Durand</td><td>19 ans</td></tr>
</table>

Résultat obtenu :

Ajouter une feuille de style

Dans les exemples précédents, l'attribut de balise border a été utilisé pour créer les lignes horizontales et verticales. Ces attributs de balise pour la présentation sont de moins en moins utilisés, au profit des feuilles de style. Exemple :

<style>
table { border-collapse: collapse; }
th, td {
  padding: 6px;
  border: solid 1px #000;
}
th { background-color: #ddd; }
</style>
<table>
  <tr><th>Nom</th><th>Age</th></tr>
  <tr><td>Dupont</td><td>18 ans</td></tr>
  <tr><td>Durand</td><td>19 ans</td></tr>
</table>

Résultat obtenu :

Créer des listes

Il en existe deux sortes :

Chaque élément de la liste commence avec la balise <li>.

Exemple de code :

<ul>
  <li>Poire
  <li>Banane
  <li>Pomme
</ul>
<ol>
  <li>Lundi
  <li>Mardi
  <li>Mercredi
</ol>

Résultat obtenu :

Balises génériques

Deux balises servent à toutes sortes d'utilisations. On leur applique, pour cela, le style CSS adéquat.

BaliseUtilité
<span>...</span>Balise générique de type en ligne
<div>...</div>Balise générique de type bloc

Caractères spéciaux

Code HTML

Les caractères < et > sont propres au HTML. En conséquence, ils ne peuvent être écrits directement. Par ailleurs, plusieurs caractères espace consécutifs sont réduits à un seul dans le rendu de la page HTML.

Pour obtenir ces caractères et quelques autres, une solution consiste à utiliser leur code HTML.

CaractèreCode HTML
<&lt;
>&gt;
espace&nbsp;
&&amp;
"&quot;

Encodage utf-8

La grande richesse de l'encodage utf-8 est la multitude des caractères disponibles. Le programme ci-dessous, ouvert de préférence avec un navigateur pas trop récent, permet d'en dresser une liste.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    h1 { text-align : center; }
  </style>
</head>

<body>
  <h1>LISTE DE CARACTERES UNICODE</h1>
  <p>Un simple copier-coller des caractères ci-dessous vous permettra
  de les insérer dans votre fichier texte enregistré au format UTF-8.</p>
  <script>
    debut=0;
    fin=11000;
    nb=45;
    for (var i=debut; i<fin; i++) {
      document.write("&#"+i+";  ");
        if (i>=nb && Math.round((i-debut)/nb)==(i-debut)/nb) {
          document.write("<br>");
        }
    }
  </script>
</body>

</html>

Espace insécable

On souhaite parfois mettre un espace entre deux caractères, sans toutefois qu'un retour à la ligne ne soit possible au niveau de cet espace. Deux solutions pour obtenir ce résultat sont proposées ci-dessous. Il en existe d'autres.

Exemple

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <p>Deux grandes tendances se dégagent :</p>
  <p>Deux grandes tendances se <span style="display:inline-block;">dégagent :</span></p>
  <p>Deux grandes tendances se dégagent&nbsp;:</p>
</body>

</html>

Résultat

Remarque

Si la solution avec l'espace insécable est plus simple, le style CSS évite qu'un tiret n'engendre un saut de ligne.

Guillemets

Les guillemets mettent en relief une expression, une citation, éventuellement ironique. Ils s'écrivent de diverses manières selon la langue. Le français emploie habituellement les chevrons doubles, complétés d’espaces insécables après le guillemet ouvrant et avant le guillemet fermant.

Ces caractères ne s'obtiennent pas immédiatement au clavier, d'où l'intérêt de la balise <q>. Un style associé à cette balise permet de s'assurer que l'affichage visé sera obtenu.

Exemple

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">    
  <style>
    q { quotes: "«\0000A0" "\0000A0»"; }
  </style>
</head>

<body>
  <p>La chanson <q>Bambino</q> était interprétée par Dalida.</p>
</body>

</html>