Un langage d'affichage
HTML

Bureau d'études - Electronique

Présentation Vers tête de chapitre



Pour commencer, que constatons nous sur l'exemple HTML le plus simple qui pourrait être celui-ci ?

<html> 
	<body> Quelle joie de découvrir HTML ! </body>
</html> 

- HTML est un langage à balises, où les noms des balises sont tous imposés.

- La balise racine est  <html>.

- L'information à afficher est placée dans le champ d'information introduit par la balise  <body>.



Exercice 1 :

Copiez l'exemple ci-dessus dans un fichier "exemple HTML.html", puis lancez le fichier pour l'afficher dans le browser. Le texte placé dans la balise <body> s'affiche.

Copiez le même exemple dans un fichier "exemple XML.xml" et lancez le fichier. Le browser signale une erreur. Pourquoi ? Parce que HTML n'est pas du XML. Le browser se base sur l'extension du nom du fichier (.html ou .xml) pour décider de la manière dont il devra être interprété, mais pour être du XML il manque la ligne de déclaration en tête du fichier.

Recommencez les tests avec l'exemple ainsi complété.

<?xml version="1.0" encoding="iso-8859-1"?>

<html> 
	<body> Quelle joie de découvrir HTML ! </body>
</html> 

En ce qui concerne le fichier "exemple XML.xml", il est affiché par le browser comme tout fichier XML avec son style d'affichage caractéristique. Pour le fichier "exemple HTML.html", le browser continue d'afficher le texte comme précédemment.

A partir de maintenant sera utilisé XHTML, une évolution de HTML auquel ont été imposées les règles de structure strictes de XML. Quelques éléments sont ajoutés pour que l'exemple devienne un fichier standard XHML.

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >

<head>
  <title> Ma page de test </title>
</head>
	
<body>				<!-- ceci est un commentaire non affiché par le browser -->
Quelle joie de découvrir XHTML !
</body>

</html> 

Pas de panique !


- un élément DOCTYPE a été ajouté. Il s'agit d'une balise définie par XML avec la syntaxe <!DOCTYPE ... >. Elle permet par une indentification de type d'informer le browser des règles XHTML utilisées dans le document ; le browser vérifie la conformité de construction du fichier par rapport à ces règles. Pour la même raison, des attributs d'identification ont été ajoutés dans la balise <html>. Ces éléments de déclaration doivent figurer en entête du fichier XHTML.

- un chapitre <head> a été ajouté, il est destiné à contenir des instructions de gestion du document. Ici il contient la balise <title> pour donner un titre au document, titre qui apparaît habituellement dans la partie supérieure du cadre du browser.

- la présentation de la balise <body> a été modifiée, car elle contiendra par la suite l'ensemble des informations d'affichage du document.

Ce modèle de présentation d'un fichier XHTML servira dans tous les exemples qui suivent. A noter la possibilité d'ajouter des commentaires de syntaxe XML, mais ces commentaires servent uniquement au rédacteur du document et ne sont jamais affichés par le browser.




Exercice 2 : Copiez l'exemple ci-dessus où seul le contenu de la balise  <body> a été modifié, dans le fichier "exemple HTML.html". Recopiez les images ci-dessous dans le répertoire où se trouve le fichier "exemple HTML.html" par clic bouton droit et "Enregistrer l'image sous ...", puis rafraîchissez la page du browser.

photo1.jpg photo2.jpg photo3.jpg
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >

<head>
  <title> Ma page de test </title>
</head>
	
<body>
<h1>Un texte et une image</h1>
<div style="position:absolute; top:100px; left:50px" > une image  </div>
<img src="photo1.jpg" style="position:absolute; top:150px; left:50px; width:250px" />
</body>

</html> 

<h1> est une balise de mise en forme, elle permet de mettre le texte qu'elle contient sous la forme d'un titre.

<div> cloisonne un emplacement d'affichage.

<img> est une balise spécialisée pour l'affichage d'une image. Elle contient toujours l'attribut src="NomDuFichierImage" pour signaler le nom du fichier de l'image à afficher. A noter la forme simplifiée de la balise  <img src="..." /> , qui n'ouvre jamais de champ d'information.

L'attribut style utilisé dans les balises <div> et <img> est optionnel, il peut contenir toute une série de paramètres séparés par des points-virgules. Chaque paramètre est constitué d'un identifiant séparé de sa donnée par un caractère deux-points.

top sert à positionner l'élément sur l'écran, et représente l'emplacement du bord haut de l'élément affiché.

left sert à positionner l'élément sur l'écran, et représente l'emplacement du bord gauche de l'élément affiché.

width représente (si nécessaire) la largeur de l'élément affiché. height peut également être utilisé pour représenter la hauteur

position:abolute indique que les données top et left sont relatives au coin haut-gauche du conteneur, ici le l'écran ; à ce stade pour simplifier il est préférable d'admettre sa présence.

px signifie que l'unité utilisée est le pixel, c'est à dire le point élémentaire d'affichage de l'écran.


A titre d'exercice :

- Retirez les attributs style pour voir l'effet, ou modifiez la position de l'image ou sa dimension ...

- Ajoutez une deuxième image ou un deuxième texte, en ajoutant d'autres lignes <div ...> et <img .../> (n'oubliez pas de modifier les positions top et left)

Vous êtes déjà capable de créer une présentation d'images !...




Conclusion :

HTML (XHTML) et les ajouts que sont DHTML, DOM, CSS et autres, forment un très riche ensemble de techniques permettant des affichages élaborés, précis et esthétiques. Répertorier toute la documentation existante n'est plus possible depuis longtemps, et le lecteur curieux s'efforcera de trouver les meilleurs ouvrages pour sa formation.

Le domaine de l'affichage est si vaste et les techniques si nombreuses pour arriver exactement au même résultat visuel, que la maîtrise de seulement quelques éléments de base est très largement suffisante pour pouvoir faire des applications des plus intéressantes. Dans la suite de cette présentation, de nouveaux éléments d'affichage (HTML et DOM) seront introduits en fonction des besoins de manière à pouvoir disposer d'une palette de possibilités suffisante.

En attendant nous poursuivons immédiatement par le sujet suivant : Un langage de programmation : JavaScript.