Vous êtes sur la page 1sur 2

ESIL Promo 2008

1/2
Exercices [X]HTML

Pourquoi écrire du HTML à la main ?


Faisons un petit essai. Je lance Word (vous êtes sous linux normalement, donc vous n'avez pas à le faire vous-mêmes),
j'écris juste un mot (« Bonjour » par exemple), et je demande à Word d'exporter ce fichier en HTML. Voici le résultat !

Auriez-vous écrit cela ?

<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word">
<meta name=Originator content="Microsoft Word">
<link rel=File-List href="./Bonjour_fichiers/filelist.xml">
<title>Bonjour</title>
<!--[if gte mso 9]><xml>
<o:DocumentProperties>
<o:Author>glisse</o:Author>
<o:LastAuthor>glisse</o:LastAuthor>
<o:Revision>1</o:Revision>
<o:TotalTime>1</o:TotalTime>
<o:Created>2005-09-11T19:49:00Z</o:Created>
<o:LastSaved>2005-09-11T19:50:00Z</o:LastSaved>
<o:Pages>1</o:Pages>
<o:Company>LORIA</o:Company>
<o:Lines>1</o:Lines>
<o:Paragraphs>1</o:Paragraphs>
<o:Version>9.2812</o:Version>
</o:DocumentProperties>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:WordDocument>
<w:HyphenationZone>21</w:HyphenationZone>
</w:WordDocument>
</xml><![endif]-->
<style>
<!-- /* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal

{mso-style-parent:"";

margin:0cm;

margin-bottom:.0001pt;

mso-pagination:widow-orphan;

font-size:12.0pt;

font-family:"Times New Roman";

mso-fareast-font-family:"Times New Roman";}
@page Section1

{size:595.3pt 841.9pt;

margin:70.85pt 70.85pt 70.85pt 70.85pt;

mso-header-margin:35.4pt;

mso-footer-margin:35.4pt;

mso-paper-source:0;}
div.Section1

{page:Section1;}
-->
</style>
</head>
<body lang=FR style='tab-interval:35.4pt'>
<div class=Section1>
<p class=MsoNormal>Bonjour</p>
</div>
</body>
</html>
ESIL Promo 2008 2/2

Bon, la réponse est “non !”, alors voilà les exercices.

Partie 1
1. Editer un document HTML qui possède une structure minimale (i.e. un document html vide). Visualiser ce document.
2. Ajouter un titre au document. Visualiser le document. Quels sont les changements?
3. Modifier le document de sorte que le fond de page soit en blanc et le texte soit en vert.
4. Insérer dans le corps du document la phrase : ma première page HTML !!. (Attention à l'écriture du caractère ‘è’).
5. Entourer la phrase ma première page HTML par les balises <h1> et </h1>. Quel est l'effet de cette modification ?
HTML fournit six balises de marquage de titres : <h1> à <h6>. Quelles sont les différences entre ces balises ? Es-
sayez-les.
6. On voudrait que le texte du titre soit en rouge tout en gardant la couleur du texte du corps du document en vert.
Comment faire ?
7. Entourer la phrase précédente par deux lignes horizontales centrées. La longueur de chaque ligne est égale à 70%
de la largeur de la page.
8. Rajouter dans votre document les définitions des termes : multimédia, hypertexte.
9. On voudrait que les termes définis soient affichés en gras. Enveloppez chacun de ces termes par une balise
<GRAS> </GRAS>. Remplacer la balise GRAS par la balise <TOTO> </TOTO>. Conclusion?
10. Corriger le document pour que les termes soient affichés en gras.
11. Modifier le document pour que les deux définitions soient affichées dans une liste 1), 2).
IUT de
12. Quelle est la fonction de la balise <i>Villetaneuse – Département
? et la balise GTR est la différence entre ces deux balises ?
<em> ?. Quelle
13. Editer une page HTML qui illustre le code de couleurs. Cette page affiche un tableau de 4x2 couleurs différentes.
Chaque case porte une couleur et la chaîne RVB associée.
TP 2 : Tableaux & cadres en HTML
Partie 2
Onconsidère
On considèreleslesdécompositions
décompositions suivantes
suivantes d'une
d'une pagepage
: :

Chaque section a une couleur de fond différente de l'autre et affiche le nom de cette couleur.
Chaque section a une couleur de fond différente de l'autre et affiche le nom de cette couleur.
14. Editer des pages HTML qui réalisent les configurations précédentes en utilisant la balise <table>.
1. Editer
15. Editerquatre
des pages
pagesHTML qui réalisent
HTML, nommées les configurations
: rouge, précédentes
bleu, vert et blanc. Le nom de en utilisant
la page la balise
indique la couleur de fond.
<table>.les configurations précédentes en utilisant les cadres.
16. Réaliser
2. Editer quatre pages HTML, nommées : rouge, bleu, vert et blanc. Le nom de la page
17. Editer un page décomposée en deux cadres verticaux. Le cadre de gauche affiche une liste non numérotée de qua-
indique la couleur de fond.
tre liens. Chaque lien permet d’afficher une page de couleurs différente dans le cadre de droit.
3. Réaliser les configurations précédentes en utilisant les cadres.
18.
4. Quelle
Editer est
un la différence
page entre l’utilisation
décomposée de tableaux
en deux cadres et l’utilisation
verticaux. Le cadrede cadres pouraffiche
de gauche décomposer une page ?
une liste
non numérotée
19. Développer de de
une page quatre
gardeliens. Chaque
de votre lienCette
site WEB. permet
paged’afficher une page
est décomposée en deuxde cadres
couleurs
: un cadre représen-
tant un sommaire
différente dans lequi indique
cadre le contenu de votre site et un cadre qui sert pour l’affichage de différentes pages pro-
de droit.
5. posées dans votre
Sauvegarder site. de cette page dans votre collection de signets après avoir cliquer sur
le signet
les liens. Commentaires.
6. Quelle est la différence entre l’utilisation de tableaux et l’utilisation de cadres pour
décomposer une page ?
7. Développer une page de garde de votre site WEB. Cette page est décomposée en deux

Vous aimerez peut-être aussi