Bureautique et Web Licence 1 Informatique 2020/2021
TP N° 05 : Initiation au langage HTML
Exercice 1:
1. Lancer l’éditeur de texte
2. Taper les balises indispensables, à savoir :
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY></BODY>
</HTML>
3. Indiquer le titre de votre projet La page de XXXX entre les deux balises TITLE (XXXX est
votre nom)
<HEAD><TITLE>La page de XXXX</TITLE></HEAD>
Remarques :
- Ce titre apparaîtra sur le bandeau du programme de navigation utilisé.
- Les autres éléments de la page devront être insérés entre les balises BODY.
4. Sauvegarder sous le nom page1.html dans le répertoire html.
Choix d'une couleur de fond pour la page
5. Placer le curseur après la balise BODY.
<BODY BGCOLOR=#B6BE78>
Choix d'une taille de titre
6. Taper le texte Bienvenue dans la page Web de XXXX entre des balises H1.
<H1>Bienvenue dans la page WEB de XXXX</H1>
Insertion d'une règle
7. Placer une règle horizontale grâce à la balise HR, puis une deuxième.
<HR><HR>
8. Ecrire en taille 4 Je suis étudiant(e) à l’Université de Bejaia
<H4> Je suis étudiant(e) à l’Université de Bejaia </H4>
Choix de la couleur des caractères
9. <FONT COLOR=#008000><H4> Je suis étudiant(e) à l’Université de Bejaia
</H4></FONT>
Insertion d'une image
10. Insérer l’image image.jpg.
<IMG SRC="Universite.jpg" ALT="Université de Bejaia">
Création d'un lien interne
11. Placer trois règles horizontales après l'image. Puis taper le texte Retour au début de page.
12. Placer une ancre d’arrivée
<H1><A NAME="haut de page">Bienvenue dans la page Web de X</A></H1>
13. Placer une ancre de départ
<A HREF="#haut de page">Retour au début de page</A>
1
Bureautique et Web Licence 1 Informatique 2020/2021
14. Sauvegarder le travail, lancer le navigateur et charger le fichier. Vérifier le fonctionnement du
lien.
15. Modifier le code source pour que certains textes et l'image apparaissent centrés.
Exercice 2 : Listes
1. Créer un nouveau fichier sauvegardé sous le nom liste.html.
2. Taper le code suivant :
<OL TYPE="A">
<LI> Mettre un en-tête
<LI> Choisir un fond
<LI> Placer un titre
</OL>
3. Visualiser le résultat avec le navigateur.
Liste avec définitions
4. Créer un nouveau fichier nommé liste1.html.
5. Taper le code suivant :
<DL><DT>Lundi
<DD>Maths
<DT>Mardi
<DD>Français</DL>
Remarque : La balise "DT" donne le titre de la définition et la balise "DD" la définition elle-même.
6. Visualiser cette page avec le navigateur.
Exercice 3: Utilisation de tableaux dans une page
1. Créer un nouveau fichier sauvegardé sous le nom tableau1.html.
2. Taper ce code :
<HTML>
<HEAD><TITLE>Les tableaux</TITLE></HEAD>
<BODY>
<table BORDER=5>
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>
</tr>
<tr>
<td>Carmen</td>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>États-Unis</td>
</tr>
</table>
</BODY>
</HTML>
2
Bureautique et Web Licence 1 Informatique 2020/2021
Exercice 4: Cadres
1. Taper les trois codes suivants :
<HTML> <HTML> <HTML>
<HEAD> <HEAD> <HEAD><TITLE>cadre3</TITLE></HEAD>
<TITLE>CADRE1</TITLE> <TITLE>cadre 2</TITLE> <FRAMESET ROWS="15%,*">
</HEAD> </HEAD> <FRAME SRC="un.htm">
<FRAMESET <FRAMESET <FRAMESET COLS="30%,*">
COLS="25%,*"> ROWS="25%,*"> <FRAME SRC="deux.htm">
<FRAME SRC="un.htm"> <FRAME SRC="un.htm"> <FRAME SRC="trois.htm">
<FRAME SRC="deux.htm"> <FRAME SRC="deux.htm"> </FRAMESET>
</FRAMESET> </FRAMESET> </FRAMESET>
</HTM> </HTM> </HTM>
2. Visualiser cette page avec le navigateur.
Exercice 5: Formulaires
1. Taper le code suivant :
<HTML>
<HEAD><TITLE>Exemple de formulaire</TITLE></HEAD>
<BODY>
<H2>Exemple de formulaire</H2>
<FORM ACTION=MAILTO: [email protected] METHOD="POST"><P>
Entrez votre nom : <INPUT NAME="nom" VALUE=""> <HR>
<H3>Cochez la case correspondant à votre cas :</H3>
<UL>
<LI><INPUT TYPE="RADIO" NAME="age" VALUE="-18"> Moins de 18 ans
<LI><INPUT TYPE="RADIO" NAME="age" VALUE="18-20"> De 18 à 20 ans
<LI><INPUT TYPE="RADIO" NAME="age" VALUE="+20"> Plus de 20 ans
</UL><P>
<H3>Quel est votre sport préféré :</H3><P>
<SELECT NAME="menu">
<OPTION> Football
<OPTION> Golf
<OPTION> Tennis
<OPTION> Cyclisme
</SELECT><HR>
<H3>Exprimez-vous :</H3>
<TEXTAREA NAME="COMMENTAIRES" COL=200 ROWS=3> A vous
</TEXTAREA>
<INPUT TYPE=SUBMIT VALUE="envoi">
<INPUT TYPE=RESET VALUE="annule">
</FORM>
</BODY>
</HTML>
2. Visualiser cette page avec le navigateur.
