2. Développement Web
(X)HTML

2.1. Qu'est ce que (X)HTML ?

(X)HTML ou eXtensible HyperText Markup Language est un langage à balises issu de XML (eXtensible Markup Language), qui dérive lui-même des concepts du SGML (Standard Generalized Markup Language) conçu à partir de 1969 par Charles Goldfarb travaillant à l'époque chez IBM. SGML est employé dans les industries de la documentation et de l'édition.

Pour rappel, une balise est "un objet, un ouvrage, ou un dispositif destiné à guider un navigateur, un pilote".

2.1.1. XML (eXtensible Markup Language)

Si on considère les langues naturelles (français, anglais, ...), la compréhension d'une phrase repose sur au moins trois facteurs :

• la syntaxe : l'ordre dans lequel apparaissent les mots
• la sémantique : le sens des mots
• le contexte : sérieux, ironie, ton sur lequel est dit le texte, moyen détourné, sens premier, second degré

L'idée fondamentale du langage XML (eXtensible Markup Language, à la base de XHTML) est l'utilisation de balises pour ajouter un contenu syntaxique et sémantique à un texte. Par exemple en XML pour décrire la phrase "le lion mange la gazelle", on pourrait écrire :

On retrouve la phrase initiale agrémentée d'informations complémentaires :

• phrase, sujet, article, ... sont des balises
• genre, nombre, type, racine, temps sont des attributs
• masculin, singulier, animal sont des valeurs
• les mots : le, lion, mange, la, gazelle, représentent le contenu initial

Applications

Les informations complémentaires peuvent être utilisées afin de vérifier le sens de la phrase ou d'en extraire de l'information. Par exemple, à partir de toutes les phrases d'un texte ou d'un ensemble de textes, du type "le(s) lion(s) mange(nt)/dévore(nt) ...", on pourrait en déduire le régime alimentaire des lions.

De la même manière, si on avait écrit "la gazelle mange le lion", qui est une phrase syntaxiquement correcte, on pourait en déduire que la phrase est fausse du point de vue sémantique puisqu'un herbivore ne mange pas d'autres animaux.

2.1.2. et (X)HTML dans tout ça ?

D'un point de vue historique, XHTML 1.0 (2001) est une évolution de HTML version 4.01 basée sur XML. La version XHTML 2.0 qui a été développée pendant près de 8 ans a été abandonnée en 2009 à la faveur de XHTML 5 (2012). XHTML 2.0 n'était pas rétro-compatible avec HTML 4. Afin de comprendre les différences entre ces versions, on peut consulter ce site.

Parmi les principaux éléments liés à HTML 5, on note :

• l'introduction d'un canvas qui permet de réaliser des graphiques
• l'édition de documents directement dans la page web
• la validation automatique de formulaires
• le glisser / déposer plus simple
• la gestion améliorée des supports média : audio, vidéo
• de nouveaux éléments structurels qui évitent l'utilisation des <div>

Pour en savoir plus vous pouvez consulter cette page.

2.1.3. Extensions de fichiers

Les fichier (X)HTML prennent l'extension .html (ou parfois .htm), il existe d'autres extensions notamment lorsque l'on utilise des langages de script pour dynamiser les pages web :

• .php pour le langage PHP
• .py pour Python
• .pl pour Perl
• .rb pour Ruby
• .asp Active Server Page, Microsoft
• .jsp Java Server Pages (J2EE, Oracle)
• .js pour Javascript
• .css pour les Cascading Style Sheets

Par exemple, si on a activé sur le serveur web la possibilité d'utiliser le langage de programmation PHP, un fichier d'extention .php peut ne contenir que du code PHP ou uniquement du code (X)HTML ou du code (X)HTML avec des sections de code PHP.

2.2. Structure d'un document de base HTML

Un document de base contient deux parties :

• le header (entête) qui donne des informations sur la page comme l'encodage des caractères, le contenu du document ainsi que des liens vers des fichiers CSS ou Javascript (cf cours suivants)
• le body ou corps de la page qui correspond au contenu de la page et les éléments qui la constituent

On remarquera que dans la partie head, les balises meta devraient être terminées par /> puisque l'on n'écrit pas <meta>...</meta>, mais ce n'est pas le cas : HTML5 doesn't need the closing. XHTML does.

On remarque également que le début du document est beaucoup plus simple que dans les versions antérieures d'HTML où il fallait écrire par exemple :

2.3. Eléments de contenu simples

Les éléments de base sont les éléments liés au texte comme :

• Les titres de sections ou headers : <h1> à <h6>, attention à ne pas confondre avec la balise <head>
• les paragraphes <p> ... </p>

Ainsi que certains anciens éléments de mise en forme, mais que l'on recommande à présent de remplacer par des styles dans des CSS :

• le mise en gras du texte : <b>texte en gras</b>
• le mise en italique du texte : <i>texte en italique</i>
• l'emphase du texte : <em>texte en emphase</em>, qui par défaut ressemble à l'italique
• <u>souligné</u>
• <s>barré</s>

Voir le code  Cacher le code

<h1>Titre h1</h1>
<h2>Titre h2</h2>
<p>Voici un texte <b>en gras</b>, <em>en emphase</em>, <u>souligné</u>. </p>

2.3.1. La balise <span> pour modifier le style du texte

La balise <span>texte</span> permet de modifier le style d'un texte à l'intérieur d'un paragraphe. Elle est généralement utilisée de concert avec les fichiers CSS.

Voici un exemple simple :

Voir le code  Cacher le code

<p>Voici un texte <span style="color: red;">en rouge</span>. </p>

2.3.2. Les balises <sub> et <sup>

Ces balises permettent de mettre en indice ou en exposant les valeurs qu'elles encadrent.

Voir le code  Cacher le code

<p>On cherche les racines de l'équation  (e<sub>1</sub>)  
	3x<sup>2</sup> - 6x - 5 </p>

2.4. La balise liées aux hyperliens

2.4.1. Naviguer entre pages

Les balises <a>...</a> sont l'élément essentiel des documents (X)HTML car elles permettent la navigation de page en page.

Un lien ou hyperlien est défini par :

• l'URL (Uniform Resource Locators) ou adresse de la page sur laquelle on désire se rendre, définie par l'attribut href
• la partie de texte sur laquelle on devra cliquer pour accéder à la page définie entre les balises <a>texte à cliquer</a>

Voir le code  Cacher le code

<p>Bonjour, ceci est ma première 
<a href="http://leria-info.univ-angers.fr/~jeanmichel.richer/">page</a> web !</p>

2.4.2. Naviguer vers un endroit de la page

On peut, en outre, ajouter une référence dans la page grâce au caractère # que l'on ajoute à la fin de l'URL.

Mais il faudra également ajouter la définition de ce lien dans la page :

Voir le code  Cacher le code

<p>Je veux aller au <a href="#SECOND_PARAGRAPHE">second paragraphe</a> 
de la page info.html</p>
<a name="SECOND_PARAGRAPHE"></a>
<p>Un second paragraphe</p>

2.4.3. Ouvrir un nouvel onglet

On peut également ouvrir une page dans un nouvel onglet en ajoutant l'attribut target. On recommande d'ajouter rel="noopener noreferrer" pour des raisons de sécurité :

Voir le code  Cacher le code

<p>Se rendre sur <a href="http://yahoo.fr" target="_blank" 
	rel="noopener noreferrer">Yahoo</a> en ouvrant un nouvel onglet.</p>

Enfin, on peut ouvrir une URL dans une nouvelle fenêtre :

Voir le code  Cacher le code

<p>Ouvrir une nouvelle fenêtre vers <a href="http://yahoo.fr" target="_parent"
	 onclick="window.open('http://yahoo.fr', name='_blank', 
	 'width=600, height=400, toolbar=yes, resizable=no'); return false;">Yahoo</a>.</p>

2.5. Les images

Il existe une seule balise auto fermante appelée <img> pour insérer des images. Elle dispose de plusieurs attributs comme :

• src (obligatoire) qui donne l'URL de l'image
• alt, que l'on conseille de remplir, et qui donne une description sous forme d'un texte de l'image; elle remplacera l'image si celle-ci n'est pas trouvée
• width, la largeur de l'image (facultatif), exprimée en pixels; on ne donne que la largeur sans préciser l'unité
• height, la hauteur de l'image (facultatif), exprimée en pixels; on ne donne que la hauteur sans préciser l'unité

Voir le code  Cacher le code

<p class="center">
	<img src="ens/l1/img/bi2_part_2.png" 
	     alt="structure des répertoires sous Linux"
	     width="200" height="100" />
</p>

2.6. Les listes

On trouve trois types de listes :

• les listes non numérotées (unordered) <ul>...</ul>
• les listes numérotées (ordered) <ol>...</ol>
• les listes de descriptions <dl>...</dl>

L'exemple qui suit montre comment utiliser ces listes :

Voir le code  Cacher le code

	<!-- liste non numérotée -->	
	<h5>Liste non numérotée</h5>
 
	<ul>
		<li>premier élément</li>
		<li>second élément</li>
	</ul>
 
	<!-- liste numérotée -->
	<h5>Liste numérotée</h5>
 
	<ol>
		<li>premier élément</li>
		<li>second élément</li>
	</ol>
 
	<!-- liste de descriptions -->
	<h5>Liste de descriptions</h5>
 
	<dl>
		<dt>Nos Cafés</dt>
			<dd>Cappuccino</dd>
			<dd>Latté</dd>
			<dd>Latté Machiatto</dd>
		<dt>Nos Thés</dt>
			<dd>English Breakfast</dd>
			<dd>Chaï</dd>	
	</dl>
 
	<!-- Combinaison de listes -->
	<h5>Combinaison de listes</h5>
 
	<dl>
		<dt>Nos Cafés</dt>
			<dd> Capuccino
				<ul>
					<li>classique</li>
					<li>lait d'amande</li>
					<li>lait de coco</li>
				</ul>	 
			</dd>
			<dd>Latté</dd>
			<dd>Latté Machiatto</dd>
		<dt>Nos Thés</dt>
			<dd>English Breakfast
				<ol>
					<li>Darjeeling</li>
					<li>Russian</li>
				</ol>
			</dd>
			<dd>Chaï</dd>	
	</dl>

Concernant les listes, on pourra modifier le style de numérotation ou le symbole utilisé pour les listes non numérotées qui peut être un carré, un cercle ou une image (voir le cours CSS).

2.7. Les <div>

Les balises <div>...</div> permettent de créer de nouveaux éléments auxquels on associera un style particulier (cf. cours CSS).

2.8. Le canvas

Le canvas permet de réaliser des dessins :

Voir le code  Cacher le code

<div style = "text-align:center;">
<canvas id="zone_dessin" width="400" height="400">
  CANVAS NOT SUPPORTED IN THIS BROWSER!
</canvas><br />
<button onclick="return dessine();">Dessine</button>
&nbsp;&nbsp;
<button onclick="return efface();">Efface</button>
 
</div>

2.9. Les formulaires

Les formulaires permettent de saisir des informations qui seront envoyées au serveur pour y être traitées : il peut s'agir de faire un calcul, d'insérer ou d'extraire des informations d'une base de données.

Vous trouverez sur cette page plus d'informations concernant les formulaires et les éléments qui les composent.

2.10. Les tableaux

Les tableaux sont introduits par la balise <table>. Leur description a été augmentée avec HTML 5 avec les balises <thead>, <tbody> et <tfoot>.

Chaque ligne est introduite par la balise <tr> qui contiennent les balises qui décrivent les colonnes :

• <th> pour une colonne de titre
• <td> pour une colonne de données

Voir le code  Cacher le code

<table style="border-collapse: collapse;" class="center">
 
	<caption>Ma première table</caption>
 
	<!-- l'entête avec les titres des colonnes -->
	<thead>
		<tr>
    	  	<th>Month</th>
      		<th>Savings</th>
		</tr>
	</thead>
 
	<!-- le corps avec les données -->
	<tbody>
		<tr>
		  	<td>January</td>
		  	<td>$100</td>
		</tr>
		<tr>
		  	<td>February</td>
		  	<td>$80</td>
		</tr>
	</tbody>
 
	<!-- éventuellement le bas de tableau avec des données récapitulatives -->
	<tfoot>
		<tr>
			<td>Sum</td>
			<td>$180</td>
		</tr>
	</tfoot>
 
</table>

La balise <td> est dotée d'attributs qui permettent de fusionner des lignes ou des colonnes :

• colspan spécifie le nombre de colonne à fusionner
• et rowspan le nombre de lignes

Voir le code  Cacher le code

<table style="border-collapse: collapse;" class="center">
 
	<!-- le corps avec les données -->
	<tbody>
		<tr>
		  	<td colspan="2"> fusion de deux colonnes </td>
		  	<td>2</td>
		</tr>
		<tr>
		  	<td>3</td>
		  	<td>4</td>
		  	<td>5</td>
		</tr>
		<tr>
			<td rowspan="2"> fusion de<br />deux lignes </td>
			<td>7</td>
			<td>8</td>
		</tr>
		<tr>
			<td>9</td>
			<td>10</td>
		</tr>
 
	</tbody>
 
	<caption>Ma table</caption>
</table>

Voici un exemple assez simple d'une commande : table sans mise en forme et le même exemple avec mise en forme.

2.11. Les nouvelles balises HTML5

Ces nouvelles balises ont pour but de mieux structurer les pages en fournissant des balises de nom fixe (main, header, footer, nav, aside, ...) plutôt que d'utiliser des <div>...</div> qui seront spécifiques à chacun. On peut consulter ce document afin d'avoir un aperçu de ces différentes balises.

2.12. Le DOM (Document Object Model)

Les pages (X)HTML sont composées de balises qui incluent d'autres balises de manière récursive. Un document XML ou HTML peut être manipulé pour en extraire de l'information. On dispose de deux approches pour cela :

• l'approche SAX (Simple API for XML) qui consiste à écrire un parser (analyseur en français) qui parcourt le document et qui dès qu'une balise est détectée, exécute une action.
• l'approche DOM (Document Object Model) qui consiste à représenter tout le document en mémoire sous forme d'un arbre (composés de noeuds) ou d'une liste de listes

L'approche DOM possède un inconvénient c'est qu'elle nécessite de représenter tout le document en mémoire alors que ce n'est pas le cas pour l'approche SAX. Cependant, l'approche SAX nécessite l'écriture d'un analyseur ce qui prend du temps à écrire.

Au sein du navigateur une page web est représentée au format DOM. Le langage Javascript disponible dans chaque navigateur permet la manipulation du DOM, c'est à dire la consultation, l'ajout, la suppression et modification de noeuds (cf Cours Javascript).

2.13. Suite du cours

La suite du cours s'intéresse aux CSS (Cascading Style Sheets).

2.14. Exercices