TP de HTML

Nous allons aujourd'hui partir à la découverte de html. Nous verrons à la séance prochaine comment structurer proprement les documents pour séparer le contenu de la mise en page. Cette séance se déroulera sous linux.

la base

Nous allons commencer par créer un document html très petit, et nous l'enrichirons au fur et à mesure. Lancez d'abord kwrite (c'est l'éditeur de texte par défaut sous kde, l'environnement que vous utilisez avec linux), et recopiez le texte suivant :

<html>
<head>
 <meta name="author" content="Marc Glisse">
 <!-- je suis bête, j'ai oublié de modifier le nom de l'auteur -->
 <title>
  Premier essai
 </title>
</head>
<body>
 <p>
  Bonjour tout le monde...
 <!-- je ne sais pas trop quoi écrire
 alors je fais plein de commentaires
 qui ne vont pas s'afficher -->
 <hr>
</body>
</html>

Si vous ne trouvez pas cela très beau, commencez par indiquer à kwrite que votre document est du html, en cliquant dans le menu Outils→Mode de coloration syntaxique→Balises→HTML. Créez un sous-répertoire de votre public_html pour ce TP, et enregistrez-y ce fichier sous un nom avec extension .html. Quand vous ouvrez un fichier avec l'extension .html, kwrite met tout seul les couleurs, on n'a été obligé de lui préciser que parce qu'il s'agissait d'un nouveau fichier. À l'aide d'un navigateur (konqueror ou firefox, par exemple), regardez votre page. Nous allons la modifier progressivement (n'hésitez pas à faire d'autres changements que ceux proposés, en vous en inspirant), et il faudra vérifier à chaque nouvelle étape à quoi ressemble maintenant votre page.

Un peu de vocabulaire

Voici juste quelques termes techniques. Un truc de la forme : <plouf> est appelé une balise. Ce qui se trouve entre une balise <plouf> et la balise correspondante </plouf> est un élément de type plouf. On peut préciser des propriétés d'un élément en ajoutant à sa balise ouvrante des attributs. Dans <plouf hygrometrie="100%">, l'élément plouf a un attribut de nom hygrométrie et de valeur 100%.

Des couleurs

Remplacez la ligne <body> par la suivante :

<body bgcolor="#00C0FF" text=red>

Vous devez avoir une image mine.gif (ou un nom similaire) chez vous. En fait n'importe quelle image fera l'affaire. Copiez-là dans le répertoire de ce TP, et essayez à la place :

<body background="mine.gif">

Ne soyez pas surpris si cela devient complètement illisible, c'est un piège classique des fonds d'écran.

Paragraphes

Ecrivez deux paragraphes de texte, en sautant des lignes entre les deux paragraphes. Par exemple, reprenons à Bonjour tout le monde... :

Bonjour tout le monde... Ceci est un premier paragraphe. J'essaie de le
faire
suffisamment long pour qu'il y ait au moins un retour à la ligne, sinon
c'est moins joli.



Et maintenant j'ai sauté plein de lignes, que se passe-t-il ?

Vous pouvez supprimer tous ces sauts de ligne, et mettre à la place <p>. Essayez aussi de mettre <br> à la place. <p> indique un changement de paragraphe, alors que <br> est un simple retour à la ligne. En général, vous devriez donc plus utiliser <p>.

Titres

Changeons un peu le texte de notre page, pour quelque chose comme :

<h1 align=center>Voici un titre</h1>
<h2>Maintenant un sous-titre</h2>
<h3>Et on peut continuer</h3>
<h4>La profondeur est limitée</h4>
<h5>Pénultième</h5>
<p align=right>Un petit texte justifié à droite pour introduire
cette partie, elle le mérite bien, et puis il serait dommage de se
priver.
<h6>Un vraiment petit paragraphe</h6>
Et un titre est un changement de paragraphe implicite.

Paragraphes spéciaux

On ajoute encore :

<blockquote>
Mignonne, allons voir si la rose<br>
Qui ce matin avoit desclose"lt;bp&wt;
Sa robe de pourpre au Soleil,<br>
A point perdu ceste vesprée<br>
Les plis de sa robe pourprée,<br>
Et son teint au vostre pareil.
</blockquote>
<pre>
&lt;html&gt;
 &lt;body&gt;
 &lt;/body&gt;
&lt;/html&gt;
</pre>

On utilise blockquote pour des citations longues, et pre pour du texte préformaté, comme du code dans un langage de programmation. Quelles différences de rendu observez-vous ? Que se passe-t-il si au lieu d'écrire &lt; et &gt; on écrit directement < et > ?

Les barres horizontales

On a depuis le début une barre en bas de notre page, représentée par <hr>. On va la modifier un peu. Essayez le code suivant :

<p>Barre horizontale simple,
<hr>

<p>avec une longeur relative limitée,
<hr width=50%>

<p>avec une longueur absolue,
<hr width=100>

<p>avec d'autres positions dans la page,
<hr width=50% align=right>
<hr width=50% align=left>
 
<p>avec une épaisseur modifiée,
<hr size=3>

<p>sans l'ombré,
<hr noshade>

<p>avec une longueur dépendant de la taille des caractères,
<hr style="width: 10em;">

N'oubliez pas de changer la taille de votre fenêtre pour voir comment évoluent les traits. Changez aussi la taille des caractères (dans le menu affichage, ou en appuyant sur CONTROL et + ou -).

Les styles logiques

Encore du code à recopier :

<p>
Il y a parfois des mots très <strong>importants</strong>,
d'autres que l'on veut simplement mettre <em>en valeur</em>.
On peut vouloir indiquer que <kbd>CTRL-Q</kbd> quitte kwrite.
On parle parfois de code que l'on a écrit, comme
<code>&lt;html&gt;</code>. <samp>Ceci est un
exemple</samp>. Lorsque je définis un mot, je l'écris
<dfn>mot</dfn>. Et pour citer quelqu'un :
<cite>quand on veut s'amuser, <strong> on
additionne les plaisirs. </strong></cite>.

Voyez-vous la même chose avec firefox et konqueror ? Ces éléments ont une valeur sémantique, mais laissent le navigateur décider comment les rendre (on verra à la prochaine séance comment lui donner des indications sur ce qu'on attend).

Styles, couleurs, tailles, fontes

<ul>
 <li> <b> Le texte peut être en gras, </b> </li>
 <li> <i> Les italiques mettent le texte en valeur !</i> </li>
 <li> <tt> Et enfin, on peut écrire à la machine du même nom, </tt></li>

 <li> <u> un style souligné à éviter : ici, on ne peut pas cliquer,</u> </li>
 <li> <s> et on peut même rayer du texte </s> </li>
 <li> <big> On peut écrire de gros caractères, </big> <small> ou de petits </small> </li>

 <li> Et enfin, on peut utiliser des exposants comme dans 1<sup>er</sup> ou des indices, u<sub>n+1</sub> = u<sub>n</sub>+1 </li> 
</ul>
<ul>
 <li> <font color=purple>Du texte violet, </font></li>
 <li> du texte, <font size=+3> du texte plus gros (en relatif),</font> </li>
 <li> <font size=2> du texte, taille absolue, </font> </li>

 <li> <font face="Zapf Chancery"> et des jolies lettres.</font></li>
</ul>

Énumérations

Dans le paragraphe précédent, on vient de créer une liste. Que se passe-t-il si on remplace ul par ol ? Créez une liste, dont le premier élément commencera par « Les peintres », suivi d'une liste numérotée avec dans l'ordre vos trois peintres favoris. Le second élément sera la même chose avec « Les musiciens ». Vous ferez de plus suivre le nom de votre musicien préféré d'une liste numérotée de ses trois meilleures chansons. Vous pourrez ensuite essayer de remplacer un <ol> par <ol type="a"> (au lieu de "a", on peut choisir parmi : a, A, i, I, 1). Essayez aussi : <ol start="42">. Dans vos listes imbriquées, remplacez tous les ol par des ul, et regardez les points utilisés.

Tableaux

<table>
  <tr> <td> X </td> <td> 1 </td>  <td> 2 </td> <td> 3 </td> </tr>
  <tr> <td> 1 </td> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr>
  <tr> <td> 2 </td> <td> 2 </td> <td> 4 </td> <td> 6 </td> </tr>
  <tr> <td> 3 </td> <td> 3  </td> <td> 6 </td> <td> 9 </td> </tr>
</table>

On ajoute maintenant au début de l'élément table :

<caption align=bottom> Table de multiplication </caption>

La table n'est pas encore très jolie. Ajoutez à l'élément table un attribut border, de valeur 1. Pour changer encore plus radicalement, essayez :

<table border=20 cellpadding=10 cellspacing=5>

Voici quelques exemples plus compliqués. Après les avoir testés, faites un tableau similaire au second, en vous arrangeant pour avoir un artiste qui était à la fois peintre et musicien, et un autre qui a vécu à cheval entre deux siècles. Avec l'attribut bgcolor, vous lui mettrez aussi une couleur de fond dorée. En appliquant maintenant cet attribut aux cellules individuelles, vous ferez un échiquier (ou une mosaïque plus jolie). Utilisez aussi <font color="purple"> pour changer la couleur du texte de façon appropriée.

L'alignement dans les cellules, verticalement, horizontalement,
<br><br>
<table border width=50%>
 <tr> <th> </th> <th ><font size=6> Peintre </font> <th> <font size=6>Écrivain </font> <th><font size=6> Musicien </font>
 <tr valign=top align=center> <th> <font size=6> 17<sup>ème</sup> </font> <td> Rembrandt <td> Molière <td> Bach
 <tr valign=middle align=left> <th><font size=6> 19<sup>ème</sup> </font> <td> Monet <td> Goethe <td> Brahms
 <tr valign=bottom align=right> <th><font size=6> 20<sup>ème</sup> </font> <td> Modigliani <td> Jarry <td> Ellington
</table>

<hr>
On peut faire l'alignement, case par case, 
<br><br>
<table border width=50%>
 <tr> <th> </th> <th ><font size=6> Peintre </font> <th> <font size=6>Écrivain </font> <th><font size=6> Musicien </font>
 <tr > <th> <font size=6> 17<sup>ème</sup> </font> <td valign=top align=center> Rembrandt <td> Molière <td> Bach
 <tr > <th><font size=6> 19<sup>ème</sup> </font> <td> Monet <td valign=middle align=right > Goethe <td> Brahms
 <tr > <th><font size=6> 20<sup>ème</sup> </font> <td valign=bottom align=left> Modigliani <td> Jarry <td> Ellington
</table>

<hr>
Les cases peuvent être fusionnées, 

<table border>
 <tr> <td>un <td colspan=2> exemple simple </td>
 <tr> <td> avec <td> trois <td> colonnes 
</table>

Liens

Votre document commence (enfin ce qu'il y a après <body>) sans doute par un titre <h1>Titre</h1>. Remplaçons-le par : <h1 name="debut" id="debut">Titre</h1> (on est censé utiliser id et pas name, mais Internet Explorer retarde un peu, alors on fait avec. Le plus sûr est de mettre les deux, car konqueror semble avoir du mal avec name). Ajoutez maintenant à la fin de votre document (avant </body>) : <p>Lien vers <a href="#debut">en haut</a>. Cliquez dessus dans le navigateur. On peut aussi ajouter d'autres liens. Faites une copie de votre page sous un nom différent, par exemple nouveau.html. Ajoutez alors le code suivant : <a href="nouveau.html">nouvelle page</a>. Que se passe-t-il si vous remplacez href="nouveau.html" par href="nouveau.html#debut" ? Faites dans la nouvelle page un lien vers la fin de la vieille page (notez que l'attribut name peut-être utilisé sur la plupart des éléments). Ajoutons encore, pour compléter la collection :

Un <a href="http://www.loria.fr/~glisse/enseignement/html/">lien
déjà visité</a>.<br>
Un <a
href="http://www.loria.fr/~glisse/enseignement/css/">lien</a>
pas encore visité.<br>
Pour <a href="mailto:marc.glisse@loria.fr">m'écrire</a>.
Pour ouvrir <a href="" target="_blank">cette même page dans une
autre fenêtre</a>.

Vous cliquerez sur tous ces liens, mais avant, regardez ce qui se passe si vous rajoutez les attributs link="yellow" et vlink="orange" à <body>.

Images

Si vous avez une image dans vos fichiers, tant mieux. Sinon, téléchargez-en une sur internet, n'importe laquelle. Créez un sous-répertoire photo dans public_html, et mettez-y cette image. Vous pouvez maintenant ajouter le code : <img src="../photo/monimage.jpg"> en adaptant au nom de l'image. .. indique de remonter d'un répertoire. Déplacez le répertoire photo dans votre répertoire principal, et adaptez le lien : src="../../photo/monimage.jpg". Que se passe-t-il ? Insérez maintenant votre image au milieu d'un paragraphe, et ajoutez-lui un attribut align. Essayez les valeurs : top, bottom, center, left, right. Arrangez-vous pour que cliquer sur votre image renvoie sur votre autre page. Pensez à ajouter un attribut alt="Texte alternatif" qui sera utilisé par les navigateurs ne pouvant afficher d'image. Vous pouvez voir éventuellement avec votre chargé de TD s'il y en a un installé sur cet ordinateur (lynx).

Formulaires et Scripts

Pour cette partie, utilisez de préférence firefox. Allez sur cette page, pour un exemple de script. Après l'avoir testé, vous pourrez regarder comment il est fait. Il suffit pour cela de demander à votre navigateur de vous afficher le code source de la page, ce qui est possible par différent menus ou en tapant CTRL-U. Pour d'autres exemples de scripts et formulaires, regardez ici. Il existe aussi divers cours de javascript disponibles en ligne, je viens de chercher et le premier sur lequel je suis tombé est ici. Essayez de faire un formulaire qui vous empêche de le remplir parce qu'il change de page dès que vous passez la souris dessus. Vous pouvez aussi faire un petit quizz, ou chaque réponse apporte un certain nombre de points, et annoncer son score au participant à la fin. Quel est le principal inconvénient de procéder ainsi pour faire un quizz ?

Rapides

Vous avez déjà fini ? Vous pouvez aller lire ceci, qui a failli servir de base pour le TP d'aujourd'hui. Vous pouvez aussi aller regarder les fichiers que vous avez créé avec nvu à la séance précédente. Vous verrez sans doute des éléments ou attributs que je n'ai pas mentionnés ici, essayez de jouer avec pour voir leurs fonctions exactes.

Valid XHTML 1.0 Strict