Exercice HTML: Tables des matières

Rédigé par GC Team, Publié le 11 Janvier 2012, Mise à jour le Jeudi, 15 Décembre 2022 19:43
Participez au vote ☆☆☆☆☆★★★★★


Donner le document html qui permet d'obtenir cette page:

Exercice_HTML-id2201

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<html>
<head>
<title>Les listes en langage HTML</title>
</head>
<body>
<h2 align="center">Tables des matières sur le langage HTML</h2>
<hr width="90%" size="7">
<ol>
<li><b>Introduction au langage HTML.</b>
<ol type="a">
<li>Documents HTML.</li>
<li>Avantage de HTML</li>
<li>Structure d'une page Web.</li>
<li>Balises.</li>
<li>Attributs.
<ul>
<li><u>Exemples</u></li>
</ul>
</li>
<li>Les entités HTML.
<ul type="disc">
<li><u>Exemples</u></li>
</ul>
</li>
</ol>
</li>
<li><b>Ossature d'un document HTML.</b>
<ol>
<li><b>L'en-tête</b>
<ul>
<li><b>Le titre</b></li>
</ul>
</li>
<li><b>Les commentaires</b></li>
<li><b>Le corps</b></li>
</ol>
</li>

<li><b><font size="+1">Quelques balises<sup>(toutes les <i><font
color="#FF0000">balises</font></i>
ne sont pas traitées)</sup></font></b></li>
<ul>
<li><b><i><h1>...</h1>`<h6>...</h6&g
t;</i></b>
<ol type="A">
<li><font color="#FF0000">Les niveaux 1, 2 et 3.</font></li>
<li><font color="#ff0000">Le niveau 4</font></li>
<li><font color="#ff0000">Le niveau 5 et 6.</font></li>
</ol>
</li>
<li><b><i><hr></i></b></li>
<li><i><b><nobr>...</nobr></b></i></li>
</ul>
<li><b>Les styles de présentation.</b></li>
<li><b>Les polices de caractères.</b></li>
</ol>
</body>
</html>

Exercice HTML: Diaporama

Créer un Code HTML qui permet de réaliser un Diaporama auto des photos
ExerciceHTML-id2169

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117


html
head
titleDocument sans titre/title
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/head

body bgcolor="#FFFFFF"
table width="209" height="250" border="1" align="center"
  tr
    td width="199" height="159" bgcolor="#3399FF" div align="left"
        script language="JavaScript1.2"
//Drop-in slideshow- Par Dynamic Drive
//Pour d'autres codes DHTML scripts, visitez http://www.dynamicdrive.com
//Laissez en place le copyright svp


var slideshow_width=200 // Largeur des images. Utilisez la plus grande largeur si vos images ne sont pas identiques
var slideshow_height=133 //Hauteur des images. Utilisez la plus grande largeur si vos images ne sont pas identiques
var pause=4000 //Pause entre chaque image (3000=3 seconds)


var dropimages=new Array()
// Entrez ci-dessous le path et le nom de vos images
// IMPORTANT / N'oubliez pas d'incrémenter la valeur qui est entre les crochets [...]
dropimages[0]="image1.jpg"
dropimages[1]="image2.jpg"
dropimages[2]="image3.jpg"
dropimages[3]="image4.jpg"
dropimages[4]="image5.jpg"
dropimages[5]="image6.jpg"
////Ne rien éditer ci-dessous/////////////


var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[p]
}


var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1


if (ie4||dom)
document.write('
+slideshow_width+';height:'+slideshow_height+';overflow:hidden">
+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'">
+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"> 
')

else
document.write('img name="defaultslide" src="'+dropimages[0]+'"')


var curpos=slideshow_height*(-1)
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1




function movepic(){
if (curpos0){
curpos=Math.min(curpos+degree,0)
tempobj.style.top=curpos
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='ExerciceHTML-id2204+dropimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}


function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("movepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=dropimages[curimageindex]
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}


function resetit(what){
curpos=slideshow_height*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.top=curpos}


function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='+dropimages[curimageindex]+'">'
rotateimage()
}


if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)


/script
      /div/td
  /tr
/table
/body
/html

Exercice HTML: Paragraphe avec Style

Ecrire le code qui permet de réaliser le paragraphe suivant:

Titre du document

Le premier paragraphe

Formats de documents structurés

  1. SGML
  2. HTML
  3. XML

Le second paragraphe

Formats de documents structurés

SGML
Standard Generalized Markup Language
XML
Extensible Markup Language
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45



<HTML>
	<HEAD>

		<TITLE>Titre du document</TITLE>

	</HEAD>

	<BODY>

	 	<H1>Titre du document</H1>

		<P>Le premier paragraphe</P>

		       <H2>Formats de documents structurés</H2>

	                           <OL>

		             <LI>SGML</LI>

		              <LI>HTML</LI>

		              <LI>XML</LI>

                                            </OL>
		<P>Le second paragraphe</P>

                                         <H2>Formats de documents structurés</H2>

                                            <DL>

	                              <DT>SGML</DT>

                                                   <DD>Standard Generalized Markup Language</DD>

                                               <DT>XML</DT>

                                                    <DD>Extensible Markup Language</DD>

                                                    <DT>
                                               </DL>
    	</BODY>
</HTML>

Exercice HTML: Simples Balises

1. Écris cette liste ordonnée:

  1. Aimer
  2. Détester
  3. Haïr
  4. Adorer

2 Fais un changement de paragraphe.

3. Écris maintenant une définition de liste:

Langage HTML

Codification utilisée pour les documents WWW. Ce type de codes a été inventé par Tim Berners-Lee alors au CERN.

Langage Java

Programmation qui fait suer son concepteur tout en lui apportant plusieurs satisfactions... 

4. Fais un changement de ligne, trace une ligne centrée horizontalement qui occupera 80 % de la largeur de la page. Termine avec un changement de paragraphe.

5. Sauvegarde ton travail sur ton dossier personnel. Nomme ton fichier exercice1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

1. Voici les codes :

<OL TYPE=A> 
<LI>Aimer 
<LI>Détester 
<LI>Haïr 
<LI>Adorer
</OL> 

2. Voici le code :<P> 

3. Voici les codes :

<DL> 
<DT>Langage HTML
<DD>Codification utilisée pour les documents WWW. Ce type de codes a été inventé par Tim Berners-Lee au CERN. 
<DT>Langage Java<DD>Programmation qui fait suer son concepteur tout en lui apportant plusieurs satisfactions...
</DL> 

4. Voici les code :

<BR>
<HR WIDTH=80%>
<P> 

5. Clique sur Fichier de bloc-notes, Enregistrer sous. Sélectionne ton dossier personnel et dans la case Nom du fichier, écrit Ecercice3.html. Clique sur Sauvegarder. Maintenant ouvre ton fichier par ton navigateur et regarde le résultat.

Exercice HTML: Table et Paragraphe

Exercice 1

Donner le document html qui permet d'obtenir

Comparatif modèle économique

Modèle

Vitesse en km/heure

Consommation en litre/100 km

Marque

Type

Numero de série

Peugeot 206

B2

234.34

132

5,7

Citroën AX

AT67B8

6789

126

5,5

Exercice 2

Donner le document html qui permet d'obtenir

  1. Systèmes d'exploitation
  • MerDos
  • Vaindaube
  • Unix
  1. Langages de programmation
  • non orientés objets
  1. Fortran
  2. Cobol
  3. C
  • orientés objets
  1. Java
  2. Perl
  3. Python
  4. Ruby
  5. Réseaux
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

Exercice 1
HTML
HEAD
TITLEExercice 3/TITLE
/HEAD
BODY
UL
LISystème d'expoitation/LI
UL
LIMerDos/LI
LIVaindaube/LI
LIUnix/LI
/>UL
LILangages de programmation/LI
UL
LInon orientés objets/LI
UL
LIFortran/LI
LICobol/LI
LIC/LI
/>UL
LIorientés objets/LI
UL
LIJava/LI
LIPerl/LI
LIPython/LI
LIRuby/LI
/>UL
/>UL
LIRéseaux/LI
/>UL
/BODY
/HTML

-----------------------------------------------------------------
Exercice 2

HTML
HEAD
TITLEExercice 4/TITLE
/HEAD
BODY
CENTER
TABLE BORDER=1
>CAPTIONComparatif modèle économique/>CAPTION
TR
TH COLSPAN="3"STRONGModèle/STRONG
TH ROWSPAN="2"STRONGVitesseBRen km/heure/STRONG
TH ROWSPAN="2"STRONGConsommationBRen litre/100 km/STRONG
/TR
TR
THSTRONGMarque/STRONG/>TH
THSTRONGType/STRONG/>TH
THSTRONGNumero de série/STRONG/>TH
/TR
TR
TDPeugeot 206/TD
TDB2/TD
TD ALIGN=MIDDLE>234.34/TD
TD132/TD
TD5,7/TD
/TR
TR
TDCitroën AX/TD
TDAT67B8/TD
TD ALIGN=MIDDLE>6789/TD
TD126/TD
TD5,5/TD
/TR
/TABLE
/CENTER
/BODY
/HTML

Exercice HTML: Apparence d’un tableau

Créer les ?chiers XHTML et CSS a?n de mettre en page les tableaux comme sur la Figure suivante.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Code HTML
<table class="droite">
 <tr>
 <th> Col 1 </th> <th> Col 2 </th> <th> Col 3</th>
 </tr>
 <tr class="impair">
 <td> Case1 </td><td> Case 2 </td><td> Case 3</td>
 </tr>
<tr class="pair">
<td> Case4 </td><td> Case 5 </td><td> Case 6</td>
</tr>
<tr class="impair">
<td> Case7 </td><td> Case 8 </td><td> Case 9</td>
</tr>
<tr class="pair">
<td> Case10 </td><td> Case 11 </td><td> Case12 </td>
</tr>
</table>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Code CSS
table
 {
 width : 400px;
 margin-left : auto;
 margin-right : auto;
 border : 2px solid black;
 border-collapse : collapse;
 text-align : center;
}
th,td
{
border : 1px solid black;
width : 30%;
height : 40px;
}
 tr { background-color : #DC2F2F; }

 tr.impair { background-color :#F16D6D; }

tr.pair { background-color : #CB4040;}

Exercice HTML: Choix d'Image

Créer le code qui permet de réaliser lce qui suit :

ExerciceHTML-id2214

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<html>
<head>
<script language ="JavaScript">

function afficheImage(saison){
 switch (saison) {
 case 'printemps' :
 document.images[0].src = "photo_printemps.jpg"
 break
 case 'ete' :
 document.images[0].src = "photo_ete.jpg"
 break
 case 'hiver' :
 document.images[0].src = "photo_hiver.jpg"
 break
 case 'automne' :
 document.images[0].src = "photo_automne.jpg"
 break
 default :
 document.images[0].src = "photo_vide.jpg"

 } 
}
</script>
</head>
<body>
<center>

<A href="javascript:afficheImage('printemps')"> cliquer ici pour voir une image printemps </A><br>
<A href="javascript:afficheImage('ete')"> cliquer ici pour voir une image ete </A><br>
<A href="javascript:afficheImage('automne')"> cliquer ici pour voir une image automne </A><br>
<A href="javascript:afficheImage('hiver')"> cliquer ici pour voir une image hiver </A><br>
<A href="javascript:afficheImage('vide')"> cliquer ici pour voir une photo vide </A><br>
<IMG SRC="photo_vide.jpg">
</center>
</body>
</html>

Exercice HTML: Création Formulaire Réponse QCM

Ecrire le code HTML de la fenêtre d’affichage du corrigé représentée par l’image ci-dessous.
ExerciceHTML-id2160

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

HTML
HEAD
TITLEL'utilisation des procédés RAID1 et RAID5 - réponse au test/TITLE
META NAME="Description" CONTENT="L'utilisation des procédés RAID1 et RAID5 - réponse au test"
META NAME="Keywords" CONTENT="Administration avec Windows NT"
META NAME="Author" CONTENT=""
META NAME="Generator" CONTENT="WebExpert3"
META NAME="Organisme" CONTENT=""/HEAD
BODY BGCOLOR="#FFFFFF"
TEXT="#000000"
LINK="#000080"
VLINK="#800080"
ALINK="#FF0000"
SCROLL=AUTO LEFTMARGIN=20 RIGHTMARGIN=0 TOPMARGIN=0
FONT FACE="Times New Roman"
TABLE WIDTH="100%" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="0" BORDER="0"
COL SPAN="3"
TR
TD/TD
TD
CENTERH3FONT COLOR="#800000"L'utilisation des procédés RAID1 et RAID5BRRéponse
du test/FONT/H3
HR/CENTER


FONT SIZE=2
PIBFONT COLOR="#008000"Les bonnes réponses aux questions apparaissent en couleur
rouge./FONT/B/I
PBQuestion 1 :/B
BRQuel est le type de disque système qui réalise une copie exacte de toutes les données
d'une partition disque dans une autre partition ?
I
LI RAID.BR
LI Sauvegarde disque.BR
LIBFONT COLOR="#FF0000" Mise en miroir./FONT/BBR
LI Dépannage à chaud.BR/I
PBQuestion 2 :/B
BRQuel est le type de disque système qui utilise de 3 a 32 disques physiques et est
aussi connu sous le nom de RAID5 ?
I
LIBFONT COLOR="#FF0000" Agrégats par bandes avec parité./FONT/BBR
LI Agrégats par bandes sans parité.BR
LI Disques en miroir.BR
LI Agrégats par bandes avec données répétitives.BR/I
PBQuestion 3 :/B
BRQuel sont les types de disques qui assurent la tolérance de pannes ?
I
LI Les agrégats de partition.BR
LIBFONT COLOR="#FF0000" Les agrégats par bandes avec parité./FONT/BBR
LI Les agrégats par bandes sans parité.BR
LIBFONT COLOR="#FF0000" Les disques en miroir./FONT/BBR
LI RAID de niveau 0.BR/I
CENTERFORM
INPUT TYPE="button" VALUE="Fermer la fenêtre" Onclick="self.close()"
/FORM/CENTER
/TD
TD/TD
/TR
/TABLE
/FONT
/BODY
/HTML

Exercice HTML: Ecriture des Balises

Styles d'ecritures Ecrire le Code HTML qui permet de réaliser les Textes suivants:

la balise pour le gras 
la balise pour Italic 
la balise pour le Souligné 

Autres balises de formatages et de mise en page 
la balise affiche le texte de facon trés accentué. la plupart des navigateurs mettent le texte en gras la balise ou la balise affiche le texte en barré

la balise affiche le texte en indice: exemple soient a1, a2,a3 trois entiers.

la balise affiche le texte en exposant: exemple soient les 1ers jours du XXIémesiécle.

la balise
centre tous les elements contenus dans la balise
la balise
applique un alignement spécial à une partie du document avec les attributs: LEFT, RIGHT, CENTER,JUSTIFY
la balise Permet de choisir une police, une taille et une couleur à appliquer à une partie de texte la balise la balise identifie une citation qui saffichera en décalage par rapport au reste du document 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

html  

head

titleStyles d'ecritures title

head 

body  

    BASEFONT SIZE=4 COLOR="blue" FACE="times new roman"

  B la balise <B> pour le gras B BR

    I la balise <I> pour Italic I BR

    U la balise <U> pour le Souligné/U BR 

    P Autres balises de formatages et de mise en page BR

        STRONG la balise <STRONG >affiche le texte de facon trés accentué. la plupart des navigateurs mettent le texte en gras STRONG

        S la balise <S>ou la balise <STRIKE> affiche le texte en barré /S

        p la balise <SUB>affiche le texte en indice: exemple  

             soient aSUB1/SUB, aSUB2/SUB,aSUB3/SUB trois entiers.

        /p

        p la balise <SUP>affiche le texte en exposant: exemple  

             soient les 1SUPers/SUP jours du XXISUPéme/SUPsiécle.

        /p

        CENTER la balise <CENTER>centre tous les elements contenus dans la balise /CENTER

        DIV la balise <DIV>applique un alignement spécial à une partie du document avec les attributs: LEFT, RIGHT, CENTER,JUSTIFY /DIV 

        FONT SIZE= -1 COLOR="red" FACE="Arial"

          la balise <FONT>Permet de choisir une police, une taille et une couleur à appliquer à une partie de texte

        /FONT 

        /BLOCKQUOTE     

           la balise la balise <BLOCKQUOTE> identifie une citation qui saffichera en décalage par rapport au reste du document 

        /BLOCKQUOTE     



  /body

/html

Exercice HTML: Fichier CSS

Modifier, à l’aide d’un fichier CSS, l’apparence du titre de niveau 3 et du paragraphe pour obtenir le résultat de la ?gure 2.3.

ExerciceHTML-id2203

A?n de répondre à cette question, télécharger les deux images suivantes:

Exercice1HTML-id2203

Exercice2HTML-id2203

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

h3
 {
 background-image: url(’title.png’);
 background-repeat : no-repeat;
 font-weight : normal;
 font-size : medium;
 width : 300px;
 height : 20px;
 text-align : center;
 margin-bottom : 0px;
 padding-bottom : 0px;
 }

 p
 {
 width : 300px;
 margin-top : 0px;
 padding-top: 0px;
 text-align : justify;
 background-image: url(’degrade.png’);
 }

Exercice HTML: Formulaire Type

Ecrire le code HTML qui permet de réaliser le Formulaire suivant:

ExerciceHTML-id2161

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

h2Formulaire Type/h2
form method="post" action="http://www.naziha.com")
h3Coordonnees/h3
strongNom/strongbr
input type="text" name="nom" size="25"p
strongPrenom/strongbr
input type="text" name="prenom" size="25"p
strongJe désire recevoir une documentation/strong
input type="checkbox" name=”doc”>p
strongPays/strong
select name="pays" size=1
optionCH: Suisse
optionD: Allemagne
..................
/selectpp
strongSexe/strong
input type="radio" name="sexe"Masculin
input type="radio" name="sexe"Fémininp
h3Domaine(s) d'activite/h3
Vous pouvez en choisir plus qu'un...p
input type="checkbox" name="domaine" value="Pedagogie"Pedagogie
input type="checkbox" name="domaine" value="Psychologie"Psychologie
input type="checkbox" name="domaine" value="Informatique"Informatique
input type="checkbox" name="domaine" value="Autre"Autre
h4Commentaire/h4
Si vous le voulez, vous pouvez decrire vos activites ou interets p
TEXTAREA name="comments" rows=4 cols=60/textareap
input type="reset" value="Effacer les données"
input type="submit" value="Enregistrer les donnees"p
/form

Exercice HTML: Hyperliens


Travail à Faire:

  1. Crée un nouveau document HTML dont le titre sera Exercice HTML 2.
  2. Insère une image, tu la sauvegarde par menu.gif, dans le document. Cette image sera en coordonnées.
  3. Délimite la zone Accueil et donne-lui cette adresse: index.html (Lien externe, ---)
  4. Délimite la zone Aide et donne-lui cette adresse: aide.html (Lien externe, ---)
  5. Délimite la zone Écrivez-nous et donne-lui ton adresse électronique (Lien externe, mailto).
  6. Centre l'image menu.gif (avec le code center);
  7. Convertis les caractères spéciaux, sauvegarde le tout sur ton dossier personnel. Le nom du fichier sera ex2.html
  8. Visualise ton document avec votre navigateur. Clique sur les 3 zones de l'image.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

1. 
<HEAD> 
<TITLE>Exercice HTML 2</TITLE> 
</HEAD>

2. 
<MAP NAME="fictif"> 

SHAPE="RECT" COORDS="3,0,156,15"

3. 
HREF="index.html"> 

SHAPE="RECT" COORDS="166,3,273,13" 

4. 
HREF="aide.html"> 

SHAPE="RECT" COORDS="292,3,425,15" 

5. 
HREF="mailto:xx@gmail.com> </MAP>

6. 
<CENTER>
<IMG SRC="menu.gif" BORDER=0 WIDTH=438 HEIGHT=16 USEMAP="#fictif">
</CENTER>