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.
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.
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%.
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.
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>.
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.
On ajoute encore :
<blockquote> Mignonne, allons voir si la rose<br> Qui ce matin avoit desclose<br> 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> <html> <body> </body> </html> </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 < et > on écrit directement
< et > ?
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 -).
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><html></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).
<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>
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.
<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>
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>.
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).
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 ?
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.