Le langage htmlAuteur : Julien Gauchet le 03/07/2017 (1 revision)

L'HyperText Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des programmes informatiques.

1. Structure une page html

Une page html est un cas particulier de document xml, format permettant de stocker des données dans un fichier de manière hiérarchiques. Une <balise> permet d'ouvrir une section et </balise> permet de fermer la section.

Il est possible d'insérer des commentaires dans le document en respectant la syntaxe suivante :

<!-- Ceci est un commentaire -->

Toute page html contient au moins les éléments suivants :

<!DOCTYPE html>
<html>
	<head>
		<!-- Éléments de description de la page, titre, style -->
	</head>
	<body>
		<!-- Contenu de la page -->
	</body>
</html>

En html5, les balises html, body, title peuvent être enlevées, chacun décidera en fonction de ses névroses personnelles de les conserver ou de les enlever. Personnellement, je les conserve.

2. Les balises de l'entête : <head>

2.1. La balise <title>

Cette balise permet d'insérer un titre à la page, c'est le titre qui apparait sur l'onglet ouvert dans le navigateur

<title>Titre de la page</title>

2.2. La balise <style>

Cette balise permet de définir le style de la page (style css). En général, on évite de définir le style dans la page html, on le définira plutot dans un fichier css à part.

<style>
	body {background-color: red;}
</style>

2.3. La balise <link>

Cette balise permet de définir un fichier css externe

<link rel="stylesheet" href="style.css" />

Plusieurs feuilles de styles peuvent être utilisées dans un document html.

2.4. La balise <script>

Cette balise permet de créer un javascript

<script>
	function afficher {
		alert("ok");
	}
</script>

L'écriture de scripts ne sera pas traitée dans ce document.

2.5. La balise <meta>

Cette balise permet de donner certaines informations sur le format du document ou de décrire son contenu. Plusieurs attributs existent. Un attribut est important, il s'agit de l'attribut charset qui permet de définir l'encodage de la page :

<meta charset="UTF-8" />

2.6. Exemple d'entête

<!DOCTYPE html>
<html>
<head>
	<title>Titre du site</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<meta charset="UTF-8" />
</head>

3. Le contenu d'un document html

3.1. Les paragraphes

Les paragraphes sont entourés par des balises <p> et contiennent le texte du paragraphe ou d'autres balises (titres, liens, etc.)

CodeRésultat
<html>
<head>
	<style>
		
	</style>
</head>

<body>
	<p>Le texte du paragraphe 1</p>
	<p>
	Le texte du paragraphe 2
	</p>
</body>
</html>

Il est possible d'ajouter un tooltip sur un paragraphe : lorsque la souris le survole, le tooltip apparaît :

CodeRésultat
<html>
<head>
	<style>
		
	</style>
</head>

<body>
	<p title="Le tooltipp">
		Le texte du paragraphe
	</p>
</body>
</html>

La balise <pre> permet d'entrer du texte pré-formaté : les retours à la ligne, les tabulations, etc sont conservées tels qu'écrits

CodeRésultat
<html>
<head>
	<style>
		
	</style>
</head>

<body>
	<pre>
		Le texte pré-formaté
nouvelle ligne </pre> </body> </html>

3.2. Les titres

Les titres sont entourés par les balises <hX> où X est le niveau du titre : <h1>, <h2>, etc.

CodeRésultat
<html>
<head>
	<style>
		
	</style>
</head>

<body>
	<h1>Titre 1</h1>
	<h2>Titre 1.1</h2>
	<h2>Titre 1.2</h2>
	<h1>Titre 2</h1>
</body>
</html>

3.3. Les sauts de lignes

La balise <br /> permet de sauter une ligne. La balise <hr /> permet de tracer une ligne horizontale. Cette balise est de moins en moins utilisée : lui préférer les css.

CodeRésultat
<html>
<head>
	<style>
		
	</style>
</head>

<body>
	Texte<br />
	Texte 2
	<hr />
</body>
</html>

3.4. Les liens

Les liens sont des éléments cliquables qui redirigent vers une autre url du site. Le lien est encadré par les balises <a> l'URL de destination est donné dans la balise href.

<a href="http://www.insee.fr">Texte du lien</a>

3.5. Les images

La balise <img> permet d'insérer des images. Les caractéristiques de l'image sont données via les attributs :

  • src : chemin vers l'image
  • alt : texte alternatif (si l'image n'est pas visible)
  • width : la largeur
  • height : la hauteur

<img src="image.jpg" alt="description image" width="104" height="142" />

3.6. Le formatage du texte

Le formatage est possible en html, mais il est fortement déconseillé, il vaut mieux utiliser les css pour définir les styles.

Pour formater, on peut utiliser les balises <b> pour passer en gras, <i> pour mettre en italic. D'autres éléments permettant de formater existent.

3.7. Les tableaux

Les tableaux sont représentés par la balise <table>, ils sont construits ligne par ligne. Une ligne est une balise <tr>. Les lignes sont découpées en cellules avec la balise <td>.

CodeRésultat
<html>
<head>
	<style>
		table, th, td {border: 1px solid black;}
	</style>
</head>

<body>
	<table>
		<caption>Le titre du tableau</caption>
		<tr>
			<th>Titre colonne 1</th>
			<th>Titre colonne 2</th>
		</tr>
		<tr>
			<td>Valeur 1.1</td>
			<td>Valeur 1.2</td>
		</tr>
		<tr>
			<td>Valeur 2.1</td>
			<td>Valeur 2.2</td>
		</tr>
		<tr>
			<th>Titre colonne 1</th>
			<th>Titre colonne 2</th>
		</tr>
	</table>
</body>
</html>

Pour plus de clarté et pour pouvoir utiliser plus facilement les css, les tableaux peuvent êtres découpés à l'aide des balises suivantes :

  • thead pour l'entête
  • tbody pour les lignes
  • tfoot pour le pied du tableau

CodeRésultat
<html>
<head>
	<style>
		table, th, td {border: 1px solid black;}
	</style>
</head>

<body>
	<table>
		<caption>Le titre du tableau</caption>
		<thead>
			<tr>
				<th>Titre colonne 1</th>
				<th>Titre colonne 2</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<th>Titre colonne 1</th>
				<th>Titre colonne 2</th>
			</tr>
		</tfoot>
		<tbody> 
			<tr>
				<td>Valeur 1.1</td>
				<td>Valeur 1.2</td>
			</tr>
			<tr>
				<td>Valeur 2.1</td>
				<td>Valeur 2.2</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

Pour fusionner des cellules,

  • horizontalement, on utilise l'attribut colspan et on précise le nombre de colonnes sur lesquelles s'étendent la cellule.
  • Verticalement, on utilise l'attribut rowspan et on précise le nombre de lignes sur lesquelles s'étendent la cellule.

CodeRésultat
<html>
<head>
	<style>
		table, th, td {border: 1px solid black;}
	</style>
</head>

<body>
	<table>
		<tr>
			<th colspan="3">Personnes</th>
		</tr>
		<tr>
			<th rowspan="2">Nom</th>
			<th colspan="2">Téléphone</th>
		</tr>
		<tr>
			<th>Domicile</th>
			<th>Portable</th>
		</tr>
		<tr>
			<td>Julien</td>
			<td>02 38 45 68 78</td>
			<td>06 30 12 85 65</td>
		</tr>
	</table>
</body>
</html>

3.8. Les listes

Les listes non ordonnées (listes à puces) sont définies avec l'élément <ul>. Chaque item de la liste est définit grâce à <li>.

CodeRésultat
<html>
<head>
	<style>
		
	</style>
</head>

<body>
	<ul>
		<li>élément 1</li>
		<li>élément 2</li>
	</ul>
</body>
</html>

Les listes ordonnées sont définies avec l'élément <ol>.

CodeRésultat
<html>
<head>
	<style>
		
	</style>
</head>

<body>
	<ol>
		<li>élément 1</li>
		<li>élément 2</li>
	</ol>
</body>
</html>

Il est possible de paramétrer la numérotation grâce à l'attribut type.

4. Formulaires html

La balise <form> est utilisée pour définir une zone du document utilisée pour recueillir des informations entrées par les utilisateurs.

4.1. La balise <input>

Les formulaires html contiennent des éléments permettant de saisir des informations : « l es input ». La balise <input> permet de saisir des informations.

Les input sont de différents types. Les champs texte

  • text : champ texte sur une ligne
  • password : champ texte dans lequel la saisie est masquée
  • number : champ texte contenant un nombre, il est possible de définir le minimum et le maximum de ce nombre.

CodeRésultat
<html>
<head>
	<style>
		
	</style>
</head>

<body>
	Identifiant
	<br />
	<input type="text" name="id" value="anonyme" />
	<br />
	Mot de passe
	<br />
	<input type="password" name="pass" value="" />
</body>
</html>

4.2. Les cases à cocher

radio : permet de définir des cases à cocher au sein d'un groupe, une seule case peut être cochée. Un groupe se caractérise par plusieurs radios ayant un même attribut name.

checkbox : permet de définir des cases à cocher

CodeRésultat
<html>
<head>
	<style>
		
	</style>
</head>

<body>
	Sexe :
	<br />
	<input type="radio" name="g1" value="M">Homme
	</input><br />
	<input type="radio" name="g1" value="F">Femme
	</input><br />
	<input type="radio" name="g1" value="A">
	Ne sait pas</input><br />
	<br />
	Moyen de transport :
	<br />
	<input type="checkbox" name="v1" value="velo">
	Vélo</input>
	<input type="checkbox" name="v2" value="car">
	Voiture</input>
</body>
</html>

4.3. La validation du formulaire

La validation du formulaire consiste à envoyer les données à un programme de traitement. Les données envoyées sont celles présentes dans la balise <form>. Pour envoyer les données, on utilise un input particulier avec un type submit.

Il est possible de réinitialiser les données du formulaire avec un input de type reset.

CodeRésultat
<html>
<head>
	<style>
		
	</style>
</head>

<body>
	<!DOCTYPE html>
	<html>
		<body>
			<form action="page_action.php">
				Identifiant
				<br />
				<input type="text" name="id" value="anonyme" />
				<br />
				Mot de passe
				<br />
				<input type="password" name="pass" value="" />
				<br /><br />
				<input type="submit" />
				<input type="reset" />
			</form>
		</body>
	</html>
</body>
</html>