INTRODUCTION AU HTML/CSS

Introduction au HTML

Le HTML est le principal langage de programmation utilisé sur internet. On trouve aussi le XHTML. Il permet d'afficher du texte, des images, de mettre en forme le texte, de créer des liens...

Le HTML fonctionne avec des balises. On dit aussi "tag" ou "markup" en anglais. On en trouve deux 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é :

Cela donne donc :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    ...
  </head>
  <body>
    ...
  </body>
</html>

Le décalage vers la droite de <head> par rapport à <html> s'appelle l'indentation. Facultative, elle améliore la lisibilité.

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 la 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>
    ...

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

Naviguer d'une page à l'autre

Ils permettent de "naviguer" d'une page à l'autre. Les liens sont créés avec les balises <a> et </a>. 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" cellpadding="5">
  <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" cellspacing="0" cellpadding="3">
  <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 :

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 :

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 UTF8

Par ailleurs, la grande richesse de l'encodage utf8 est la multitude des caractères disponibles. Le programme ci-dessous 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 :