Un petit cours de HTML

Introduction

Bienvenue sur ce mini-cours sur HTML. Déroulez la page et essayez de faire les différents exemples.

Commençons par le commencement...

Une page HTML, c'est avant tout du texte. Commencez donc par ouvrir un éditeur de texte (notepad sous windows ou gEdit sous GNU/Linux sera très bien).

  1. Tapez un texte quelconque, et enregistrez le fichier avec l'extension « .html »
  2. Cliquez droit sur le fichier créé (dans l'explorateur de fichiers) et ouvrez-le avec un navigateur Web (Internet Explorer, Firefox, Chrome...)
  3. Vous venez de créer votre première page Web :)

Le gabarit de base

Bon, du texte c'est bien, mais notre page est un peu triste toute seule. On va donc utiliser un langage de sémantique : le HTML.

Créez un fichier vide, de la même façon que le premier (avec l'extension « .html »)

Voici le gabarit de base pour commencer une page Web en HTML :

<!DOCTYPE html>
<html>
	<head>
		<title>Le titre dans la barre de titre>/title>
	</head>
	<body>
		Mon contenu
	</body>
</html>

Un problème d'encodage

Si vous avez essayé d'utiliser des accents, vous avez pu vous rendre compte que ceux-ci n'étaient pas bien affichés. Vu que le Web a été créé par des anglophones, les accents n'étaient pas prévus !

Pour résoudre ce problème, on va ajouter une balise dans notre gabarit :

<!DOCTYPE html>
<html>
	<head>
		<title>Le titre dans la barre de titre>/title>
		<meta charset="utf-8" />
	</head>
	<body>
		Mon contenu
	</body>
</html>

On a rajouté une balise qui s'appelle « charset » qui définit un encodage en UTF-8, un système qui - pour notre grand bonheur - gère les accents ;)

Les balises

En parlant de balises... c'est la base d'HTML. Une balise peut avoir deux formes :

Une balise permet de rajouter une notion sémantique à un texte. Vous pouvez en consulter la liste ici : http://www.w3schools.com/tags/

Quelques balises utiles

Les titres et paragraphes

Voici comment créer un titre : 

<h1>Mon titre</h1>
Il existe 5 niveaux de titres, on peut donc utiliser h1, h2, h3... h5. Du plus grand au plus petit.

Voici comment créer un paragraphe : 

<p>Mon paragraphe</p>

Pour sauter une ligne, on ne peut pas juste revenir à la ligne. Il faut utiliser la balise :

<br />

Certaines balises sont de type block (et ne nécessitent pas d'être placés dans une autre balise).

D'autres sont de type inline (comme les images, les liens...) et doivent impérativement être placés dans une balise de type block (paragraphe, ...).

On distingue les deux types par leur rendu : une balise block provoquera un retour à ligne une fois fermée. Ce n'est pas le cas d'une balise inline.

Dans certains cas (on le verra dans le cadre du CSS), on a besoin d'une balise sans comportement ou sémantique. Cela permet de structurer, rajouter une couleur à un texte quelconque, etc.

Pour cela, on dispose de deux balises conteneur neutres :

Gras et italique

Il existe deux paires de balises pour afficher un texte en gras ou en italique.

Pour le gras, on utilise la balise b ou la balise strong. La différence est d'un point de vue sémantique (b n'a pas de valeur sémantique, strong représente un texte important).

<strong>Un texte important</strong>
<b>Un texte en gras</b>

Même chose pour l'italique : i pour la version sans sémantique, em pour la version avec :

<em>Un texte un peu moins important</em>
<i>Un texte en italique</i>

Les liens

Voici comment créer un lien : 

<a href="ma_page.html">Le texte de mon lien</a>

Sur les balises, on peut rajouter des attributs (ici on a href pour définir le lien vers lequel on pointe).

Il existe deux attributs particuliers, qui seront utiles pour la suite :

Fait amusant, on peut faire pointer un lien vers une balise de la même page. Il suffit de mettre dans l'attribut href l'id de la balise, précédé d'un dièse « # ».

Les images

Voici comment insérer une image : 

<img src="mon_image.png" alt="Texte de remplacement" />

Les listes

Il existe trois types de listes : listes numérotées, non-numérotées et de définition.

Voici une liste numérotée :

  1. Item
  2. Item
<ol>
	<li>Item</li>
	<li>Item</li>
</ol>

Voici une liste non-numérotée :

<ul>
	<li>Item</li>
	<li>Item</li>
</ul>

Voici une liste de définition :

Grenouille
Truc vert humide
Lapin
Truc chaud et doux
<dl>
    <dt>Grenouille</dt>
    <dd>Truc vert humide</dd>
    <dt>Lapin</dt>
    <dd>Truc chaud et doux</dd>
</dl>

Les tableaux

On distingue deux types de tableaux : simples et complexes.

Voici un tableau simple :

Une case Une autre case Encore une autre 
<table>
	<tr>
		<td>Une case</td>
		<td>Une autre case</td>
		<td>Encore une autre</td>
	</tr>
</table>

Voici un tableau complexe :

titre 1 titre 2 titre 3 titre 4
pied 1 pied 2 pied 3 pied 4
case 1 case 2 case 3 case 4 
<table>
	<thead>
		<tr>
			<th>titre 1</th>
			<th>titre 2</th>
			<th>titre 3</th>
			<th>titre 4</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>pied 1</th>
			<th>pied 2</th>
			<th>pied 3</th>
			<th>pied 4</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>case 1</td>
			<td>case 2</td>
			<td>case 3</td>
			<td>case 4</td>
		</tr>
	</tbody>
</table>

Vérifier que mon code est valide

HTML est un langage de sémantique normé. Il y a donc des règles à respecter. Vous pouvez vérifier que votre page est valide sur ce site : http://validator.w3.org/.

Création d'un blog étape par étape

Cf : TP1 - Exo 4