Exercice HTML: TP HTML & CSS

Participez au vote ☆☆☆☆☆★★★★★

Ecrire un Code qui permet de réaliser le Tableau suivant:

 

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

htmlheadtitleposition/title
style type="text/css"

/style
/headbody bgcolor="FFFFFF" text="#000000"

div id="boite1" style="background:red; border:solid 2px blue;"boite 1/div
div id="boite2" style="background:blue; border:solid 2px white;"boite 2/div
div id="boite3" style="background:yellow; border:solid 2px red;"boite 3
        div id="boite4" style="background:gold; border:solid 2px green;"boite 4/div
        div id="boite5" style="background:lime; border:solid 2px navy;"boite 5/div
        div id="boite6" style="background:red; border:solid 2px blue;"boite 6/div
/div

/body/html

Exercice HTML: Page Spécifique

A titre d'exemple on vous demande de réaliser la page correspondant à la recette des Œufs sur le plat de manière à ce qu'elle ressemble à celle ci-dessous:



ExerciceHTML-id2198
  1. L' entête et le pieds de page sont conforme à la charte.
  2. L'illustration de la recette est à droite avec une légende en petit caractères
  3. Les ingrédients sont listés dans une zone à fond vert pàle et dans une police sans-serif. Chaque élément de la liste est indexe par une lettre (par ordre alphabétique)
  4. Les noms des ingrédients apparaissent en bleu
  5. Les commentaires sont en rouge, décalés d'une largeur équivalente à 5 lettres M vers la droite.
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



<html>
  <head>
    <meta charset="UTF-8"/>
 <link rel="stylesheet" type="text/css" href="charte.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="oeuf.css" media="screen" />
    <title>l'oeuf</title>
    <style>
   img { width="30%" height="30%"}
    </style>
  </head>
  <body>


    <div class="en-tete">	<h1>Cuisine</h1>
      <a href="">Accueil</a>><a href="">Recettes simples</a>><b>Œufs sur le plat</b> 

    </div>

    <h2><a id="a1">Œufs sur le plat</a></h2>

    <div class="illustration">
      <img src="oeuf.png" alt="image d'un œuf."/>
      <p>Une illustration très laide, mais libre de droits.</p>
      <div></div>
    </div>
    <div class="ingredients">
      <h3>Ingrédients</h3>
      <ol>
	<li>une noisette de <span class="ingr">beurre</span> ;
	  <p class="remarque">Si le beurre est salé, on salera moins les œufs ensuite.</p>
	</li>
	<li>des <span class="ingr">œufs</span>
	  <p class="remarque">prendre des œufs raisonnablement frais</p>
	</li>
      </ol>
      </div>

    <h3>Préparation</h3>
    <ol class="preparation">
      <li>Faire chauffer la poêlle</li>
      <li>la graisser avec le beurre</li>
      <li>casser les deux œufs dans la poêlle</li>
      <li>retirer du feu quand la consistence souhaitée est atteinte</li>
    </ol>


	<div class="bas-de-page">
           <p>   NFA016:  <br/> <img src="logo_cnam.png" alt="le logo du cnam"/></p>
	</div>

  </body>
</html>

Exercice HTML: Images et heure

Ecrire le code qui permet de réaliser la petite page suivante:



ExerciceHTML-id2212 
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

html
head
titleImage/title			
style	
#s{
border:dotted 2px red;
margin:auto;
width:100;
height:100;
padding-left:10px;
}
/style
script language="javascript">	
 var i=1;
 function afficher(){
if(i=5){
photo.src=i+".jpg";} 				   
if(i==5){
i=0;}
i++;}	
 function heure(){
var d=new Date();						
document.getElementById('d').innerHTML="il est : "+d.getHours()+" h "+d.getMinutes()+" m "+d.getSeconds()+" s.";
}
setInterval('afficher()',1000);
setInterval('heure()',1000);
 /script 
/head	 
body
center		  
div id="s">
="up" scrollamount="1" width="100" height="100" onmouseover="stop();" onmouseout="start();">
ple premier lien/p									
brimg src="1.jpg" width=80 height=80 />
/marquee>
/div
p id="d">/pbr />
img src="1.jpg" name="photo" width=350 height=350 />	

/center
/body
/html

Exercice HTML: La Balise FRAME

Ecrire le code HTML qui permet de réaliser la page suivante:

 

ExerciceHTML-id2181 
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184


<HTML>

<HEAD>

<TITLE> utilisation des frames</TITLE>

</HEAD>

<FRAMESET ROWS="90, *">

<FRAME src="exemple1.html" NAME="exemple" MARGINWIDTH=5                   MARGINHEIGHT=5>

 <FRAMESET COLS="50%, 50%">

                    <FRAME SRC="atelier-5.html" NORESIZE

                                     NAME="structure"  MARGINWIDTH=5 MARGINHEIGHT=5>

                    <FRAME SRC="atelier8.html"

                                     NAME="division"  MARGINWIDTH=5 MARGINHEIGHT=5>

</FRAMESET>

<NOFRAMES>

 ce document contient des frames et votre navigateur est incapable de les gérer

<NOFRAMES>

</FRAMESET>

</HTML>
-----------------------------------------------------------------------------------------------------

Atelier-5.html:

<HTML>

  <HEAD>

     <TITLE>mon home page</TITLE>

   </HEAD>

<BODY>

   <H1>PRENOM NOM </H1>

    Fonction: <BR>  

   Organisme: <BR> 

  détails personnels :<BR> 

  Activités de formation:<BR> 

  autres activités: <BR> 

 </BODY>

</HTML>
-----------------------------------------------------------------------------
exemple1.html:
<html>
  <head>
     <title> introduction au langage HTML </title>
  <head>
<body >
   mon premier document html ! 
   effectivement vous avez raison, c'est très simple !!!!! 

</body>
------------------------------------------------------------------------------
atelier8.html:

<HTML>
 <HEAD>
     <TITLE> Les tabeaux </TITLE>
 </HEAD>
 <BODY>
<table >
  <tr valign=center align=CENTER>
    <th>article</th>
    <th>référence</th>
    <th>prix</th>
</tr>
<tr valign=center align=CENTER>
    <td>livre</td>
   <td>A120</td>
  <td>98</td>
 </tr>  
<tr valign=center align=CENTER>
    <td>cahier</td>
   <td>A125</td>
  <td>5.0</td>
 </tr>  
</table>
<table border=6 cellspacing=2 >
  <tr valign=center align=CENTER>
    <td colspan=4>cellule unique</td>
  </tr>
  <tr valign=center align=left>
    <td rowspan=2 bgcolor="green">100</td>
   <td>200</td>
   <td>500</td>
  <td>1000</td>
  </tr>
  <tr valign=MIDDLE align=CENTER>
   <td>cellule</td>
   <td>gauche</td>
  <td>droite</td>
  </tr>

</table>
<table border=5 cellspacing=2 cellpadding=10>

    <caption align="TOP">

      <b>Tableaux &agrave éléments multiples</b>

    </caption>

   <tr align="center">

        <td><a href="http://www.ensias.ma">ENSIAS</a></td>

        <td><img src="p-suivante.gif"></td>

        <td></td>

    </tr>

    <tr>

       <td><img src="telecharger.GIF"></td>

        <td>

           <ul>

           <li>un

          <li>Deux

          <li>trois

          </ul>

       </td>

       <td align="center">

         <a href="www.w3.org">
 <img     src="porte.gif"></a>

        </td>

     </tr>

    <tr>

      <td align="center"><i>Entrez<br>votre nom</td>

      <td align="left">

            <form method="post" action="aucune">

             <input name="nom">

               <td align="center">

              <input type="submit" value="clic!">

            </form>

       </td>

    </tr>

</table>

 </BODY>

Exercice HTML: Formulaire avec Style

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



ExerciceHTML-id2167 
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

html
head
/head
body
centertable border=1
tr
tdh2ucenterBienVenu/center/u/h2
form method="post" action="http://www.serveur.fr/cgi-bin/script"
Nom : INPUT TYPE ="text" NAME="Nom" VALUE="" >
Prénom : INPUT TYPE ="text" NAME="Prenom" VALUE="" >
Mot de passe : INPUT TYPE="password" NAME="Pass" SIZE=5P
Choisissez quelque chose :br
input type="radio" name="svt" value="svt" checked>sciences de la vie et de la terre br
input type="radio" name="math" value="math"mathématiquesp
fait le choix d'icibr
centerselect name="choix" multiple size=5
optionmath
option selected>physique
optionAnglais
/select/centerp
vous voulez faire : br
input type="checkbox" name="génié"ingenieurbr
input type="checkbox" name="farme" checked>docteur
p
centertextarea name="avs" cols=44 rows=12
/TEXTAREA
P
INPut type="reset" value="Suppremer"
input type="submit" value="Envoyer"
/form
/td/td/table/center

Exercice HTML: La Balise SPAN

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

Exemple de feuille de style globale

Voici un élément strong qui est inséré dans le texte.

Voici un paragraphe dont le texte est justifié : pour visionner cette propriété, il faut bien sûr que le texte comporte plus de deux lignes, car dans le cas inverse, il semblera correspondre à un paragraphe ordinaire, sans justification...

Portion de texte (SPAN) dont la classe est "info"

un element P avec un attribut class

 
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

<HTML>

  <HEAD>

  <TITLE>demo style global </TITLE>

  <STYLE TYPE="text/css">

                BODY {background-image:URL(image.jpg)}

                P {text-align:justify}

                .info {background:maroon;color:white}

                STRONG {color:red}

    </STYLE>

 </HEAD>

  <BODY>

   <H1> Exemple de feuille de style globale </H1>

<P> 

Voici un <STRONG>élément strong</STRONG> qui est inséré dans le texte. 

<P>Voici un paragraphe dont le texte est justifié : pour visionner cette propriété, il faut bien sûr que le texte comporte plus de deux lignes, car dans le cas inverse, il semblera correspondre à un paragraphe ordinaire, sans justification... </P>



<SPAN CLASS="info">Portion de texte (SPAN) dont la classe est "info" </SPAN>

<P CLASS="info"> un element P avec un attribut class </P>

  </BODY>

</HTML>

Exercice HTML: Texte et Image avec Style

Ecrire le code qui permet de réaliser ce qui suit:



ExerciceHTML-id2192 
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


HTML

  HEAD

  TITLEdemo style global /TITLE

 STYLE TYPE="text/css"

         P {

           border-style: dotted

           border: solid;

	text-align: justify;

	text-indent: 1pixels;

	display: block;

	margin: 5px;

	width: 300;

	border: solid #0033FF;

                  width: 400px;

                 height: 145px

	}		   

 img.p {

	font-size: 16px;

	font-style: normal;

	line-height: 30px;

	font-weight: bold;

	margin: auto;

	text-align: right;

	display: block;

	float: right;

	padding: 0px;

	clear: right;

	position: absolute;

	top: 15px;

	right: 80px;

	height: 120px;

	width: 120px;

}

 /STYLE

  /HEAD

  BODY

  P

   On peut subdiviser la marge, la bordure et l'espacement selon qu'il s'agisse du côté gauche, droite, haut ou bas (ex. dans le schéma, "MG" mis pour marge gauche [ndt. margin-left], "ED" mis pour espacement droit [ndt. padding-right], "BH" mis pour bordure haute [ndt. border-top], etc.). 



On appelle le périmètre de chacune des quatre aires 

(contenu, espacement, bordure et marge) un "bord", chaque boîte a donc quatre bords : 

 BR

 img CLASS="p" src="image1.jpg"/ 

 img src="image1.jpg" 

  /BODY

/HTML

Exercice HTML: HTML Pas à Pas

1. Crée un nouveau document dont le titre sera Exercice Pas à Pas.

2. Écris la phrase suivante avec la police de caractères Times New Roman:

Je fais mon second projet HTML Pas à Pas.

36. Écris la phrase suivante en augmentant la police de base de 2. (La taille par défaut est 3):

J'écris maintenant avec la police de base, de taille 5.

4. Reviens avec la taille de base.

5. Fais un changement de paragraphe.

6. Écris cette expression:

36 cm3

7. Fais un changement de ligne.

8. Écris cette expression:

30 °C

9. Fais un changement de paragraphe.

10. Trace une ligne pleine longueur.

11. Fais un changement de paragraphe.

12. Écris cette liste non ordonnée:

  • Pommes
  • Poires
  • Ananas 

13. Fais un changement de paragraphe.

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

1. Clique sur Fichier de bloc-notes, Nouveau et dans la case Titre, écris Exercice_Pas_à_Pas.txt et insère les codes des réponses qui suivent. 

2. Voici les codes à insérer :

<FONT FACE="Times New Roman">
Je fais mon second projet HTML Pas à Pas
.</FONT> 

3. Voici les codes qui doivent être insérer:

<FONT SIZE=5>
J'écris maintenant avec la police de base, de taille 5.
</FONT> 

4. Place le curseur après le code 
</FONT>. 

5. insère :<P> 

6. Écris l'expression et les codes pour l'exposant. Voici les codes : 
36 cm<SUP>3</SUP> 

7. Voici le code : <BR> 

8. Écris 30, fais un espace, aller aux Caractères spéciaux, place le symbole du degré en surbrillance et clique sur le crochet. 
Le symbole degré s'insère lui-même. Termine l'expression par C. Voici les codes qui s'afficheront:
30 °C 

9. Voici la balise :<P> 

10. Voici la balise à insérer :<HR> 

11. Voici le code :<P> 

12. Voici les codes à insérer:

<UL TYPE=DISC>
 <LI>
Pommes 
</LI>
<LI>
Poires 
</LI>
<LI>
Ananas
</LI>
</UL> 

13. insère:<P>

Exercice HTML: Image et Tableau

Ecrire le code qui permet de réaliser la petite page suivante:



ExerciceHTML-id22010 
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

<HTML>
<HEAD>
<TITLE>tableau 4</TITLE>
</HEAD>
<Body>
 <TABLE BORDER=5>
 <TR>
 <TD ROWSPAN=2>
<IMG SRC="225sbe52.jpg">
</TD>
 <TD>
<IMG WIDTH=70 HEIGHT=50 SRC="225sbe52.jpg" WIDTH=50% HEIGHT=50%>
</TD>
 <TD><IMG WIDTH=70 HEIGHT=50
SRC="225sbe52.jpg"></TD>
 <TD>
<IMG WIDTH=70 HEIGHT=50 SRC="225sbe52.jpg">
</TD>
 </TR>
 <TR>
 <TD>rien</TD>
 <TD>
<IMG WIDTH=70 HEIGHT=50 SRC="225sbe52.jpg">
</TD>
 <TD>
<IMG WIDTH=70 HEIGHT=50 SRC="225sbe52.jpg">
</TD>
 </TR>
</TABLE>
<BODY>
<HTML>

Exercice HTML: Image et Tableau

Ecrire le code qui permet de réaliser la petite page suivante:



ExerciceHTML-id22010 
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

<HTML>
<HEAD>
<TITLE>tableau 4</TITLE>
</HEAD>
<Body>
 <TABLE BORDER=5>
 <TR>
 <TD ROWSPAN=2>
<IMG SRC="225sbe52.jpg">
</TD>
 <TD>
<IMG WIDTH=70 HEIGHT=50 SRC="225sbe52.jpg" WIDTH=50% HEIGHT=50%>
</TD>
 <TD><IMG WIDTH=70 HEIGHT=50
SRC="225sbe52.jpg"></TD>
 <TD>
<IMG WIDTH=70 HEIGHT=50 SRC="225sbe52.jpg">
</TD>
 </TR>
 <TR>
 <TD>rien</TD>
 <TD>
<IMG WIDTH=70 HEIGHT=50 SRC="225sbe52.jpg">
</TD>
 <TD>
<IMG WIDTH=70 HEIGHT=50 SRC="225sbe52.jpg">
</TD>
 </TR>
</TABLE>
<BODY>
<HTML>

Exercice HTML: Attributs de Page

Réalisez la page Web représentée par l'image ci-dessous.



ExerciceHTML-id2168 
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

<HTML>
	<HEAD>
	  <TITLE>Corrigé Exercice Attributs de page</TITLE>
	</HEAD>
	<BODY BACKGROUND="fond_spirale.gif" TEXT="navy" LINK="red" VLINK="maroon">
	<BLOCKQUOTE>

	<H1>Exercice Attributs de page</H1>

	<UL>
	<LI>Cette page contient l'image "fond_spirale.gif"...
	<LI>Pour ménager de la place à gauche pour la spirale...
	<LI>La couleur par défaut du texte est le "navy"...
	<LI>Les liens...
	</UL>

	<TABLE ALIGN="center" WIDTH="60%" BGCOLOR="silver" BORDER="1">
	<TR>
	<TH COLSPAN="2">Couleur de fond "silver"</TH>
	</TR>
	<TR>
	<TH BGCOLOR="yellow">Fond "yellow"</TH>
	<TH BGCOLOR="lime">Fond "lime"</TH>
	</TR>
	</TABLE>

	</BLOCKQUOTE>
	</BODY>
	</HTML>
Contenu publié le 09 Janvier 2012 Mise à jour le Mercredi, 14 Décembre 2022 21:21 et rédigé par BENKIRANE Fatima Ezzahra