TP de HTML

TP de HTML
Nous allons aujourd'hui partir la dcouverte de html.
la base
Nous allons commencer par crer un document html trs petit, et nous l'enrichirons au fur et mesure. Lancez d'abord un diteur de texte et recopiez le texte suivant :
<html> <head> <meta name="author" content="Etudiant EMI">  <title> Premier essai </title> </head> <body> <p> Bonjour tout le monde...  <hr> </body> </html>
Crez un sous-rpertoire de votre dossier pour ce TP, et enregistrez-y ce fichier sous un nom avec extension .html. Quand vous ouvrez un fichier avec l'extension .html,
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 kwrite. 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 et 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>
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
Il faut explorer 3 type de liens : Un lien vers le meme doc Un line vers un fichier local Un lien vers un fichier sur Internet
Un <a href="http://www.emi.ac.ma/">lien dj visit</a>.<br>
Images
Il faut avoir une image. Vous pouvez maintenant ajouter le code : <img src="../photo/monimage.jpg"> en adaptant au nom de l'image.

TP de HTML

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

TP de HTML

Hochgeladen von

Copyright:

Verfügbare Formate

TP de HTML

Nous allons aujourd'hui partir la dcouverte 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 :

Un <a href="http://www.emi.ac.ma/">lien dj visit</a>.<br>

Das könnte Ihnen auch gefallen