DEVELOPPEMENT WEB
HTML/CSS - INTRODUCTION

Introduction

L'étude du HTML présente un triple intérêt :

Il permet de réaliser des documents adaptés à une publication sur le Web.
Les documents créés dans un format ouvert occupent peu de place en mémoire.
Il reste une bonne solution pour élaborer des IHM.

Le HTML 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 :

L'affichage du texte ou des images, en HTML (HyperText Markup Language).
Et la présentation du document, en CSS (Cascading Style Sheets).

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

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

Les balises

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

La plupart fonctionnent par paires, comme <head>...</head> ou <body>...</body>. Un contenu est encadré entre une balise ouvrante et la balise fermante correspondante.
Un petit nombre de balises (<meta>, <br>, <img>, ...), utilisées seules, sont les balises auto-fermantes ou vides.
Dans quelques cas particuliers (<li>, <option>, ...), la balise fermante est facultative, elle peut être omise.

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>

<p> : Balise ouvrante.
</p> : Balise fermante.
Bonjour : Contenu.

<hr width="50%">

<hr> : Balise vide.
width : Attribut.
50% : Valeur de l'attribut.

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) :

L'en-tête : Comprise entre les balises <head> et </head>, elle contient toutes sortes de renseignements qui ne s'affichent pas dans la page. Il s'agit de l'encodage, des feuilles de style, du titre de la page...
Le corps : Compris entre les balises <body> et </body>, il contient tout ce qui s'affiche dans la page.

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 :

Le prologue <!DOCTYPE html>, indiquant la version du HTML utilisée, ici la version 5.
La ligne <meta charset="utf-8">, indiquant que le fichier est sauvegardé avec l'encodage utf-8.

Cela donne donc :

<!DOCTYPE html>
<html>

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

<body>
  ...
</body>

</html>

Remarques

Le décalage vers la droite de <head> par rapport à <html> s'appelle l'indentation. Facultative, elle améliore la lisibilité.
Du texte entre  crée un commentaire non affiché par le navigateur.
Au début, les balises s'écrivaient plutôt en majuscules. Aujourd'hui, on les écrit communément en minuscules.

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 :

Le titre principal doit être placé entre les balises <h1> et </h1>.
Un sous-titre doit être placé entre les balises <h2> et </h2>. Un sous-sous-titre entre les balises <h3> et </h3>. Et ainsi de suite...
Les paragraphes se placent entre les balises <p> et </p>.

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 :

La portion de texte que vous voulez en italique se place entre les balises <i> et </i> (italic en anglais).
Pour qu'elle soit soulignée, il vous faut la placer entre les balise <u> et </u> (underline).
Et pour l'avoir en gras, placez-la entre les balise <b> et </b> (bold).
Bien sûr, vous pouvez combiner ces balises pour obtenir, par exemple, des caractères à la fois soulignés et gras.

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 en 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 :

Donner des couleurs aux titres (les noms sont écrits en anglais).
Centrer le titre principal.

<!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 :

<table>...</table> : Le tableau.
<tr>...</tr> : Une ligne du tableau.
<td>...</td> : Une cellule du tableau.
<th>...</th> : Une cellule de type en-tête.

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 :

rowspan : Fusionne les cellules verticalement.
colspan : Fusionne les cellules horizontalement.

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 :

<ul>...</ul> : Liste d'éléments non ordonnés.
<ol>...</ol> : Liste d'éléments ordonnés.

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.

Balise	Utilité
<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ère	Code HTML
<	<
>	>
espace
&	&
"	"

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>

DEVELOPPEMENT WEBHTML/CSS - INTRODUCTION

Introduction

Les balises

Exemples

Remarques

Créer un document

Mettre en forme les caractères

Présenter le document

Un titre pour la fenêtre

Introduction au CSS

Insérer des images

Créer des liens hypertexte

Naviguer d'une page à l'autre

Naviguer au sein de la page

Créer des tableaux

Créer un tableau basique

Fusionner des cellules

Ajouter un titre

Ajouter une feuille de style

Créer des listes

Balises génériques

Caractères spéciaux

Code HTML

Encodage utf-8

Espace insécable

Exemple

Résultat

Remarque

Guillemets

Exemple

DEVELOPPEMENT WEB
HTML/CSS - INTRODUCTION