TP HTML

TP de HTML
La base
Nous allons commencer par crer un document html trs petit, et nous l'enrichirons au fur et mesure. Recopiez le texte suivant :
<html> <head> <meta name="author" content="Albert Einstein">  <title> Premier essai </title> </head> <body> <p> Bonjour tout le monde...  <hr> </body> </html>
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 lment de type plouf. On peut prciser des proprits d'un lment en ajoutant sa balise ouvrante des attributs. Dans <plouf hygrometrie="100%">, l'lment plouf a un attribut de nom hygromtrie 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 rpertoire de ce TP, et essayez la place :
<body background="mine.gif">
Ne soyez pas surpris si cela devient compltement illisible, c'est un pige 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 gnral, 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 limite</h4> <h5>Pnultime</h5> <p align=right>Un petit texte justifi droite pour introduire cette partie, elle le mrite 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 spciaux
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 vespre<br> Les plis de sa robe pourpre,<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 prformat, comme du code dans un langage de programmation. Quelles diffrences de rendu observez-vous ? Que se passe-t-il si au lieu d'crire < et > on crit directement < et > ?
Les barres horizontales

On a depuis le dbut une barre en bas de notre page, reprsente par <hr>. On va la modifier un peu. Essayez le code suivant :
<p>Barre horizontale simple, <hr> <p>avec une longeur relative limite, <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 modifie, <hr size=3> <p>sans l'ombr, <hr noshade> <p>avec une longueur dpendant de la taille des caractres, <hr style="width: 10em;">
N'oubliez pas de changer la taille de votre fentre pour voir comment voluent les traits. Changez aussi la taille des caractres (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 trs <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 lditeur. On parle parfois de code que l'on a crit, comme <code><html></code>. <samp>Ceci est un exemple</samp>. Lorsque je dfinis 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 mme chose avec Firefox, IE, ou Konqueror ? Ces lments ont une valeur smantique, mais laissent le navigateur dcider comment les rendre (on verra la prochaine sance 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 mme nom, </tt></li> <li> <u> un style soulign viter : ici, on ne peut pas cliquer,</u> </li> <li> <s> et on peut mme rayer du texte </s> </li> <li> <big> On peut crire de gros caractres, </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>
numrations
Dans le paragraphe prcdent, on vient de crer une liste. Que se passe-t-il si on remplace ul par ol ? Crez une liste, dont le premier lment commencera par Les peintres , suivi d'une liste numrote avec dans l'ordre vos trois peintres favoris. Le second lment sera la mme chose avec Les musiciens . Vous ferez de plus suivre le nom de votre musicien prfr d'une liste numrote 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 imbriques, remplacez tous les ol par des ul, et regardez les points utiliss.
Tableaux
<table> <tr> <td> <tr> <td> <tr> <td> <tr> <td> </table> X 1 2 3 </td> </td> </td> </td> <td> <td> <td> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> 1 </td> <td> 2 </td> <td> 3 </td> </tr> 2 </td> <td> 4 </td> <td> 6 </td> </tr> 3 </td> <td> 6 </td> <td> 9 </td> </tr>
On ajoute maintenant au dbut de l'lment table :

<caption align=bottom> Table de multiplication </caption>
La table n'est pas encore trs jolie. Ajoutez l'lment table un attribut border, de valeur 1. Pour changer encore plus radicalement, essayez :
<table border=20 cellpadding=10 cellspacing=5>
Voici quelques exemples plus compliqus. Aprs les avoir tests, 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 vcu cheval entre deux sicles. Avec l'attribut bgcolor, vous lui mettrez aussi une couleur de fond dore. En appliquant maintenant cet attribut aux cellules individuelles, vous ferez un chiquier (ou une mosaque plus jolie). Utilisez aussi <font color="purple"> pour changer la couleur du texte de faon approprie.
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> Molire <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> Molire <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 fusionnes, <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 aprs <body>) sans doute par un titre <h1>Titre</h1>. Remplaons-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 sr 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 diffrent, 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 lments). Ajoutons encore, pour complter la collection :
Un <a href="http://www.yahoo.fr">lien dj visit</a>.<br> Un <a href="http://www.google.fr">lien</a> pas encore visit.<br> Pour <a href="mailto:diou@univ-metz.fr">m'crire</a>. Pour ouvrir <a href="" target="_blank">cette mme page dans une autre fentre</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, tlchargez-en une sur internet, n'importe laquelle. Crez un sous-rpertoire 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 rpertoire. Dplacez le rpertoire photo dans votre rpertoire principal, et adaptez le lien : src="../../photo/monimage.jpg". Que se passe-t-il ? Insrez 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.
HTML : Tableaux et cadres

1. Tableaux
Question 1 : Construire un document HTML permettant de gnrer le tableau ci-dessous.
Question 2 : Modifier les attributs des balises de lignes et de cellules pour obtenir les effets suivants
2. Cadres
Les balises <frameset> et </frameset> peuvent se substituer aux balises <body> et </body> dun document HTML classique. Elles permettent de dfinir une organisation de cadres nomms sur la page, par exemple :
<html> <head> <title>Cadres</title> </head> <frameset rows="100,*"> <frame name="bandeau" src="bandeau.html"></frame> <frameset cols="100,600"> <frame name="menu_gauche" src="menu_gauche.html"></frame> <frame name="principal" src="principal.html"></frame> </frameset>
</frameset> <noframes> <body> Votre navigateur naccepte pas les cadres </body> </noframes> </html>
va produire :
videmment en fonction du contenu des fichiers indiqus dans les attributs src des cadres). La modification du cadre principal pourra se faire partir du menu de gauche en indiquant dans la balise href lattribut target="principal".
Question 3 : Construire un document HTML permettant de gnrer les cadres dcrits ci-dessous
Question 4 : Mme question en utilisant des tableaux Question 5 : Construire un document HTML pour le cadre menu gauche, contenant une liste non
ordonne de trois liens, chacun modifiant le contenu de lcran principal

Question 6 : Est-il possible dutiliser un mcanisme similaire en utilisant les tableaux ?
CSS
1. Premire approche du CSS
Question 1 : Construire un document HTML et un document CSS produisant laffichage ci-dessous,
le fichier HTML ne devra contenir aucun attribut de balise et ne devra utiliser que les balises h1, p et div :
2. CSS approfondi
Placement de botes flottantes
Vous considrerez le document HTML suivant :
<div id="i0"> <div id="i1">Texte i1</div> <div id="i2">Texte i2</div> </div> <p>texte non flottant devant se placer autour des botes flottantes, quelques mots devraient sans doute tre suffisants...</p>
et construirez le fichier CSS permettant dobtenir quelque chose du genre :
La taille des botes de gauche tant dun quart de la largeur de laffichage.
Superposition de divisions et mise en premier plan automatique

<div id="i1">Texte id1</div> <div id="i2">Texte id2</div> <div id="i3">Texte id3</div>
La division qui vient au premier plan est colore en orange.
Infobulle
<h3>Remarque :</h3> <p>Dans cette recette, le <a class="infobulle" href="#"> globzug <span>produit 100% naturel issu de la fermentation de la pomme de terre</span></a> peut tre avantageusement remplac par du <a class="infobulle" href="#"> zortron <span>produit synthtique vachement moins bon</span></a>.</p>
avec affichage de linfobulle lorsque le pointeur passe sur le mot soulign.
Compteurs
<div class="c1">Texte c1 <div class="c2">Texte c2</div> <div class="c2">Texte c2</div> <div class="c2">Texte c2</div> </div> <div class="c1">Texte c1 <div class="c2">Texte c2</div> <div class="c2">Texte c2</div> <div class="c2">Texte c2</div> <div class="c2">Texte c2</div> </div> <div class="c1">Texte c1 <div class="c2">Texte c2</div> <div class="c2">Texte c2</div> </div>
Liste d'lments XHTML

h1, h2, h3, h4, h5, h6 Ces lments servent donner des titres, sous-titres, etc. h1 est gnralement rserv pour le titre de la page, mais cela laisse encore une profondeur de sous-sous-...-titres plus grande qu'en LaTeX basique, qui s'arrte \subsubsection. Ces lments sont souvent pourvus d'un attribut name ou id. Le second est la version officielle, mais le premier est le seul compris par internet explorer. Dans le doute mettez les deux. Ils servent placer une ancre, vers laquelle on pourra plus tard faire un lien cliquable. Ces deux attributs peuvent tre appliqus la plupart des lments. p Il sert organiser le texte sous forme de paragraphes. Mme si votre texte ne comprend qu'un seul paragraphe, mettez-le dans un lment de ce type. On verra la prochaine sance que cela permet de grer de faon simple les indentations, par exemple. strong, em Ces lments servent mettre en valeur. strong est plus important, et sera gnralement rendu par du gras, alors que em sera gnralement rendu par de l'italique, mais ce qui compte est le fait de donner de l'importance ce qui est l'intrieur, le rendu lui-mme sera tudi une autre fois. Il existe aussi un lment i qui sert mettre en italique, ce qui est utile quand on utilise l'italique pour respecter une rgle de typographie (locution trangre non francise, comme des pates al dente) et non pour mettre en valeur. dfn Cet lment indique que vous tre en train de dfinir son contenu. Par exemple : une application est dite <dfn>injective</dfn> ssi... cite Il permet d'indiquer que son contenu est un titre de livre, de film, etc. On peut lui donner un attribut lang avec comme valeur fr, en, it pour indiquer un nom franais, anglais ou italien. code Il indique un extrait de code informatique. C'est ce que j'utilise pour vous indiquer le contenu non format de votre page, par opposition ce que montre le navigateur (mme si c'est un choix contestable, j'aurais parfois mieux fait d'utiliser kbd (texte que l'utilisateur devrait entrer) ou var (instance d'une variable ou d'un argument un programme)). pre Il contient un texte prformat. Le navigateur respectera tous les espaces et les retours la ligne que vous mettrez l'intrieur. Il sert pour des pomes, du code informatique (code est utilis pour citer une ligne au milieu d'un texte, par pour citer plusieurs lignes). abbr, acronym Ils servent prciser les abbrviation et acronymes (les acronymes sont des sigles proconables, comme : ONU). Ils ne sont utiles que munis d'un attribut title, prcisant quoi fait rfrence ce sigle. Lorsque vous passerez la souris sur ce mot, certains navigateurs afficheront une bulle avec la signification du sigle. Essayez avec l'exemple fourni dans ce paragraphe. Pour vrifier comment j'ai fait, vous pouvez taper CONTROL+U ou cliquer avec le bouton droit et demander voir le code source du document. ul, ol, li Les lments ul et ol sont des listes d'lments li. Dans le second cas, les items seront numrots. Voici un exemple, faites en d'autres, et incluez des listes l'intrieur de certains items. <ol> <li> acheter une demi-baguette </li> <li> tlphoner aux impts </li> </ol> dl, dt, dd Il servent pour donner une liste de dfinitions. dl est la liste entire, et dedans on trouve en gnral en alternance des lments dt (terme dfinir) et dd (la dfinition elle-mme).
br, hr br indique un retour la ligne, et hr une ligne horizontale. Ni l'un ni l'autre n'a de contenu, on les referme donc immdiatement comme ceci : <br />. q, blockquote Ils indiquent une citation. q est utilis pour un simple morceau de phrase, et blockquote pour quelque chose de plus long. Pour citer un pome, on pourra donc par exemple utiliser un blockquote contenant un pre, ou un blockquote contenant un p, avec des br la fin de chaque ligne. Pour l'instant, Internet Explorer ignore les lments q. address Cet lment sert donner les coordonnes de quelqu'un (attention au nombre de d dans address). img Cet lment sert inclure une image. Comme br, il n'a pas de contenu et est referm immdiatement. L'intrt de cet lment rside dans son attribut src qui est un lien vers l'emplacement de l'image. Si votre image provient d'un autre site que le votre, indiquez son emplacement par : <img src="http://www.mines.inplnancy.fr/images/inpl_ac.gif" />. Si l'image est stock au mme endroit que la page que vous tes en train d'crire, vous pouvez faire un lien relatif. Par exemple : <img src="maphoto.jpg" /> indique d'inclure l'image du fichier maphoto.jpg qui se trouve dans le mme rpertoire que votre page. <img src="../images/maphoto.jpg" /> indique que pour trouver le fichier, il faut partir du rpertoire o est la page, remonter d'un niveau, et descendre dans le rpertoire images. Un autre attribut essentiel de cet lment est : alt. Il permet d'indiquer un texte pouvant tre affich la place de l'image. Vous pourriez ainsi mettre : <img src="maphoto.jpg" alt="photo d'identit" />. Il est essentiel de mettre un tel attribut, pour les cas o l'on ne peut pas (facilement) afficher l'image (imaginez ce qu'un logiciel de synthse vocale pour aveugles peut faire avec une page qui contient uniquement une animation flash...). Quand l'image n'a qu'une valeur dcorative et n'apporte aucune information, vous pouvez donner cet attribut une valeur nulle : alt="". Pour finir, faites attention aux images que vous mettez sur votre site, vrifiez que vous en avez le droit. Ce n'est pas parce qu'une image est disponible sur un autre site ou que vous avez pris une photo vous-mmes que vous avez le droit de les mettre sur votre site. table Voyons maintenant comment faire un tableau. Le plus simple est de regarder l'exemple suivant, et de s'en inspirer : <table border=1> <caption>Ceci est un tableau</caption> <tr><th> Colonne gauche </th><th> Colonne droite</th></tr> <tr><td> Cellule 1 </td><td> Cellule 2</td></tr> <tr><td> Cellule 3 </td><td> Cellule 4</td></tr> <tr><td> Cellule 5 </td><td> Cellule 6</td></tr> </table> l'lment table est le tableau, chaque ligne est un tr, et chaque cellule un td. Les th servent donner un nom une ligne ou colonne. caption est la lgende, et on ne peut la mettre qu'au dbut de l'lment table (ce qui ne veut pas dire qu'elle ne peut pas tre affiche sous le tableau). a Cet lment n'a aucune signification particulire. Il sert uniquement avec des attributs. On peut par exemple l'utiliser avec l'attribut name pour placer une ancre. On peut aussi l'utiliser pour faire un lien. L'attribut href indique la destination du lien. Le texte (ou l'image, ou ce que vous voulez) que vous mettrez dans l'lment a sera en gnral reprsent d'une couleur un peu diffrente, et vous pourrez cliquer dessus pour suivre le lien. Voici deux exemples : Vous pouvez <a href="mailto:prenom.nom@companie.fr">m'crire</a> ou regarder <a href="http://www.mines.inpl-nancy.fr/">ma page web</a> . Le dbut du lien indique le type de lien dont il s'agit (mailto pour envoyer un email, http est le protocole utilis pour tlcharger les pages web, vous avez peut-tre aussi entendu parler de ftp). On peut aussi faire des liens relatifs, comme pour les images : href="autrepage.html". J'ai parl plus haut d'ancres. On peut faire un lien vers une ancre comme ceci : Je place une <a name="ploum">ancre</a> et maintenant je cre un <a href="#ploum">lien</a>. On peut aussi faire un lien vers une ancre sur une autre page, en donnant l'adresse de l'autre page suivie d'un # et du nom de l'ancre. Pour tester les liens, vous aurez besoin de plusieurs fichiers. Le meilleur moyen de crer un nouveau fichier html est de recopier celui que vous avez dj sous un autre nom et de le modifier. div Cet lment n'a pas non plus beaucoup de sens par lui-mme, il sert dlimiter une partie de la page (contrairement a qui sert plus pour quelques mots). Nous verrons son utilit quand nous tudierons les feuilles de style.

Langue

TP HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP HTML

Titre original :

Transféré par

Droits d'auteur :

Formats disponibles

TP de HTML

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

Les barres horizontales

Les styles logiques

Styles, couleurs, tailles, fontes

On ajoute maintenant au dbut de l'lment table :

HTML : Tableaux et cadres

ordonne de trois liens, chacun modifiant le contenu de lcran principal

et construirez le fichier CSS permettant dobtenir quelque chose du genre :

La taille des botes de gauche tant dun quart de la largeur de laffichage.

Superposition de divisions et mise en premier plan automatique

et construirez le fichier CSS permettant dobtenir quelque chose du genre :

La division qui vient au premier plan est colore en orange.

et construirez le fichier CSS permettant dobtenir quelque chose du genre :

avec affichage de linfobulle lorsque le pointeur passe sur le mot soulign.

et construirez le fichier CSS permettant dobtenir quelque chose du genre :

Liste d'lments XHTML

Centres d'intérêt liés

Vous aimerez peut-être aussi