Exercice HTML: Insertion Dessin

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

Ecrivez le code HTML permettant de réaliser la page représentée sur la ?gure ci-dessous. L’image correspond à un fichier nommé dessin.png.  Elle se trouve dans le sous répertoire images qui est au même niveau que la page html.

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



<html>
<head>
<meta charset="utf-8" />
<title>Exercice 1</title>
</head>
<body>
	<p>
		Un beau texte avec une <img src="dessin.png" alt="image d'une maison" />
		image. L'image s'appelle "dessin.png", et se trouve dans le dossiers
		"images". Celui-ci est situé au même endroit que la page à écrire.
	</p>

	<h1>Première partie</h1>
	<p>On vous demande ici</p>
	<ul>
		<li>D'écrire le code xhtml strict qui correspond à cette page</li>
		<li>On n'utilisera pas ici de <em>feuille de style</em>.</li>
	</ul>

	<h1>Seconde partie</h1>

	<p>Voir exo 2</p>

	<h1>Jouons avec des listes imbriquées</h1>
     <ol>
        <li> Ceci est le premier élément numeroté</li>
        <li> Ceci est le deuxième élément numeroté
           <ul>
           <li> Ceci est le premier sous-élément du deuxième élément numeroté
              <ol>
              <li> Et ceci est un sous-élément numéroté d'un sous-élément</li>
              <li> Et ceci est un autre sous-élément numéroté du même sous-élément</li>
              <li> Vous suivez toujours ?</li>
              </ol>
	   </li>
           <li> Ceci est le deuxième sous-élément du deuxième élément numeroté</li>
           <li> Ceci est le troisième sous-élément du deuxième élément numeroté</li>
           </ul>
        </li>
        <li> Ceci est le troisième élément numeroté qui contient deux defintions
	  <dl>
	    <dt>facile</dt>
	      <dd>qui n'est pas difficile</dd>
            <dt>difficile</dt>
	      <dd>synonyme de compliqué</dd>


	  </dl>
	</li>
     </ol>
</body>
</html>

Exercice HTML: Identification du navigateur

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

Identification du navigateur

L'objet navigator contient les informations suivantes sur votre navigateur :

  • Nom de code : Mozilla
  • Nom de l'application : Netscape
  • Numéro de version : 5.0 (Windows NT 6.0) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.75 Safari/535.7
  • « User Agent » : Mozilla/5.0 (Windows NT 6.0) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.75 Safari/535.7
  • Langue : fr
  • Plate-forme : Win32
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>Identification du navigateur</title>

</head>

<body>

<H1>Identification du navigateur</H1>

<HR>

<P>

L'objet <B>navigator</B> contient les informations suivantes sur votre navigateur:

</P>

<UL>

<SCRIPT LANGUAGE="JavaScript">

document.write("<LI><B>Nom de code :</B> " + navigator.appCodeName);

document.write("<LI><B>Nom de l'application :</B> " + navigator.appName);

document.write("<LI><B>Numéro de version :</B> " + navigator.appVersion);

document.write("<LI><B>« User Agent » :</B> " + navigator.userAgent);

document.write("<LI><B>Langue :</B> " + navigator.language);

document.write("<LI><B>Plate-forme :</B> " + navigator.platform);

</SCRIPT>

</UL>

<HR>

</body>

</html>

Exercice HTML: La Balise OL

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

Exemple de liste de type ordonnée ()

  1. Fichiers HTML
  2. Fichiers images
  3. Fichiers sons
  4. Fichiers films
  5. Fichiers test
  6. Fichiers exemples
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


html


head

titleListes <ul>/title

/head


body


    h2 Exemple de liste de type ordonnée (<ol>)/h2


    <ol type=a>


        <li Fichiers HTML


         <li Fichiers images


         <li value=4 Fichiers sons


        <li Fichiers films
         <li Fichiers test


        <li  Fichiers exemples

     /<ol


 /body
/html

Exercice HTML: Mises en forme de paragraphes

Vous allez créer une page, appelée Base_HTML.html, qui fera apparaître plusieurs mises en forme de paragraphes et de titres.

La page comprendra 3 parties. Il est conseillé d’aller vérifier dans le navigateur votre travail entre chaque partie. Pour cela, enregistrez votre fichier avec le bloc-notes et réactualisez la page dans le navigateur.

Description de la page à créer :

  • Le fond de la page sera bleu et le texte blanc.
  • Le titre de la page sera :

Mise en forme de base

1ère partie :

  • Un titre de niveau 1 centré :

PREMIERE PARTIE

  • Un paragraphe avec le texte suivant en rouge :

Je suis le premier paragraphe, je suis rouge…

  • Une ligne séparatrice de taille 2 et de couleur rouge

2ème partie :

  • Un titre de niveau 2 centré :

DEUXIEME PARTIE

  • Un paragraphe centré constitué des 3 lignes suivantes avec le texte jaune et de taille 5 :

Je suis le 2ème paragraphe au centre en taille 5 et en jaune

  • Une ligne séparatrice de taille 7, de 300 pixels de longueur et de couleur noire

3ème partie :

  • Un titre de niveau 3 centré :

TROISIEME PARTIE

  • Un paragraphe, à droite comprenant le texte suivant en taille 7 et la police Arial :

Je suis le dernier paragraphe, je suis en taille 7 avec la police Arial et à 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


<html>
<head>
<title>mise en forme de base</title>
</head>
<body bgcolor="#0000ff" text="#ffffff">
<center ><h1>PREMIERE PARTIE</h1></center>
<p>
<font color="#ff0000">
je suis le premier paragraphe, je suis rouge
</font>
<hr size="2" color="#ff0000">
<center><h2>DEUXIEME PARTIE</h2></center>
<p align="center">
<font color="#ffff00" size="5">
<i>je suis le 2emeparagraphe</i><br>
<b> au center</b><br>
<u> en taille 5 et en jaune</u>
</font>
<hr size="7" width="300" color="#000000">
<center><h3>TROISIEME PARTIE</h3></center>
<p align="right">
<font face="arial" size="7">
je suis le dernier paragraphe, je suis en
taille7 avec la police Arial et à droite…
</font>
</ body>
</ html>

Exercice HTML: Page avec Banner et Formulaite

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

 



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

<HTML>
<head>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="468" height="60" id="d.swf" align="middle">
	<param name="allowScriptAccess" value="sameDomain">
	<param name="movie" value="d.swf">
	<param name="quality" value="high">
	<param name="bgcolor" value="#ffffff">
	src="d.swf" quality="high" bgcolor="#ffffff" width="468" height="60" name="d.swf" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>

<body>

<FORM  METHOD="POST" ACTION="/cgi-bin/questionnaire.cmd?xxx">

<p>
<h4><CENTER>Essai Formulaire
</CENTER></H4>
<pre><b>
<LI>NOM: <input type="text"name="name" size=30>

<LI>ADRESSE: <input type="text"
name="street.address" size=30>
<LI>VILLE :<input type="text"
name="city" size=30>
<LI>PROVINCE: <input type="text"
size=15 name="state">
<LI>CODE POSTAL: <input type="text
name="zip" size=10>
<LI>PAYS:<input type="text"
name="country" size=20>
<LI>TELEPHONE: <input
type="text" name="phone" size=10>
<LI>COURRIER ELECTRONIQUE:  <input
type="text" name="email" size=30>
</b></pre>
<input type="submit"
value="Soumettre">  <input
type="reset" value="Effacer et
recommencer"><P>
</form><p>
</BODY>
</head>
</html>

 Exercice HTML: Paragraphe

Ecrire le code qui permet de réaliser la paragraphe quivante:

Les mois du printemps

  • avril
  • mai
  • juin

Les mois d'automnep

  1. octobre
  2. novembre
  3. dcembre
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

<html>
<head>
Exercice HTML</titre>
</head>
<body>


<H1>Les mois du printemps</H1> 

<H2>Les mois du printemps</H2>

<UL><LI>avril 

<LI>mai 

<LI>juin</UL>

<P>

<H3>Les mois d'automnep 

</H3>

<OL><LI>octobre 

<LI>novembre 

<LI>dcembre</OL> 


</body>
</html>

Exercice HTML: Petit page avec Bannière et Formulaire

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



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

<HTML> 
<head>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="468" height="60" id="d.swf" align="middle">
	<param name="allowScriptAccess" value="sameDomain">
	<param name="movie" value="d.swf">
	<param name="quality" value="high">
	<param name="bgcolor" value="#ffffff">
	src="d.swf" quality="high" bgcolor="#ffffff" width="468" height="60" name="d.swf" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>
<BODY> 
    <FORM method=post action="etudiant.php"> 
Enregistrement d'un étudiant 
       <TABLE BORDER=0> 
<TR> 
   <TD>Nom</TD> 
     <TD> 
<INPUT type=text name="nom"> 
   </TD> 
</TR> 

<TR> 
   <TD>Prénom</TD> 
     <TD> 
     <INPUT type=text name="prenom"> 
     </TD> 
</TR> 
<TR> 
   <TD>Formation</TD> 
   <TD> 
 Initiale : <INPUT type=radio name="initiale" value="I"> 
 Continue : <INPUT type=radio name="continue" value="C"> 

 </TD> 
</TR> 
<TR> 
<TD>Cursus</TD> 
   <TD> 
   <SELECT name="cursus"> 
   <OPTION VALUE="informatique">Informatique</OPTION> 
   <OPTION VALUE="mathematique">Mathématique</OPTION> 
   <OPTION VALUE="lettres">Lettres</OPTION> 
   <OPTION VALUE="economie">Economie</OPTION> 
     <OPTION VALUE="autre">Autre</OPTION> 
   </SELECT> 
   </TD> 
</TR> 
<TR> 
   <TD>Commentaires</TD> 
   <TD> 
   <TEXTAREA rows="3" name="commentaires"> 
   Tapez ici vos commentaires</TEXTAREA> 
 </TD> 
</TR> 

<TR> 
   <TD COLSPAN=2> 
     <INPUT type="submit" value="Envoyer"> 
     </TD> 
     <TD> 
     <INPUT type="reset" value="Effacer"> 
   </TD> 
</TR> 

       </TABLE> 
   </FORM> 
</BODY> 
</head>
</HTML>

Exercice HTML: Rendu avec CSS

Modifier les fichiers HTML et CSS pour obtenir le résultat de la figure suivante:



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

Code HTML:


...
 <h1> Tableaux : </h1>

 <div class="mepParagraphes">
 <table class="gauche">

CODE DU TABLEAU

 </table>

 <table class="droite">
 CODE DU TABLEAU
 </table>
 </div>

 <h1> Paragraphe : </h1>
 <h3> Titre du paragraphe </h3>
 <p> TEXTE DU PARAGRAPHE</p>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Code CSS:

.mepParagraphes
 {
 width : 820px;
 margin-left : auto;
 margin-right : auto;
 position : relative;
 height : 240px;
 }
 .gauche
 {
 position : absolute;
 top : 0px;
 left : 0px;
 }
 .droite
 {
 position : absolute;
 bottom : 0px;
 right : 0px;
 }

Exercice HTML: Site de Formation

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

 

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


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>web design</title>
</head>
<body>
<div id="container">
		<div id="header">
        	<h1>Exercices<span class="off">gratuit</span></h1>
            <h2>Exercices Exercices</h2>
        </div>          
        <div id="menu">
        	<ul>
            	<li class="menuitem"><a href="#">Home</a></li>
                <li class="menuitem"><a href="#">About</a></li>
                <li class="menuitem"><a href="#">Products</a></li>
                <li class="menuitem"><a href="#">Services</a></li>
                <li class="menuitem"><a href="#">Design</a></li>
              <li class="menuitem"><a href="#">Contact</a></li>
            </ul>
        </div>       
        <div id="leftmenu">
        <div id="leftmenu_top"></div>
				<div id="leftmenu_main">                   
               <h3>Links</h3>                        
                <ul>
                    <li><a href="#">SEO</a></li>
                    <li><a href="#">PHP</a></li>
                    <li><a href="#">Ajax</a></li>
                    <li><a href="#">jQuery</a></li>
                    <li><a href="#">Web design</a></li>
                    <li><a href="#">Web Programming</a></li>
                    <li><a href="#">Content Creation</a></li>
                    <li><a href="#">Internet Marketing</a></li>
                    <li><a href="#">XHTML Templates</a></li>
                </ul>
</div>                            
              <div id="leftmenu_bottom"></div>
        </div>       
		<div id="content">        
        <div id="content_top"></div>
        <div id="content_main">
        	<h2>You may use this template in any manner you like. All I ask is that you leave the link back to my site at the bottom of the page. </h2>
        	<p></p>
           	<p></p>
       	  <h3>Template Notes</h3>
<p></p>
        </div>
        <div id="content_bottom"></div>          
            <div id="footer"><h3><a href="#">florida web design</a> | <a href="#">web tutorials</a> | <a href="#">html codes</a> | <a href="#">free templates</a></h3></div>
      </div>
   </div>
</body>
</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
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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218

body {
	margin: 0;
	padding: 0;
	text-align: left;
	font: 12px Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #061C37;
	background: #FACFCF;
	background-image:url(images/background.png);
	background-repeat:repeat-x;
}
*
{
  margin: 0 auto 0 auto;
 text-align:left;}

#container
{
  display: block; 
  height:auto;
  position: relative; 
  width: 960px;
}
#header
{
height:85px;
width:960px;	
}
#header h1
{
	position:absolute;
text-align:left;
color:#FFFFFF;
font-size:43px;
color:#FFF;	
left:14px;
top:18px;
}
#header h2
{
position:absolute;
text-align:right;
color:#FFD5D5;
left:490px;
top:38px;
width:400px;
}
#mainpic
{
background-image:url(images/main.jpg);
background-repeat:no-repeat;
width:900px;
height:354px;	
}
.off
{
color:#300;
}
#menu
{
display:block;
float:left;
clear:both;
width:960px;
height:54px;
float:left;
clear:both;
}
#leftmenu
{
margin-top:15px;
width:204px;
float:left;
}
#leftmenu_top
{
width:204px;
height:13px;
background-image:url(images/leftmenu_top.png);
}
#leftmenu_bottom
{
width:204px;
height:13px;
background-image:url(images/leftmenu_bottom.png);
}
#leftmenu_main
{
width:204px;
height:auto;
background-color:#420000;
}
#leftmenu_main ul
{
list-style: none;
padding: 0px;
width:204px;
}
#leftmenu_main h3
{
list-style: none;
padding: 0px;
width:204px;
color:#FFFFFF;
padding-left:10px;
padding-bottom:14px;
}
#leftmenu_main ul li
{
list-style: none;
padding: 0px;
width:204px;
text-align:left;
}
#leftmenu_main ul li a, #leftmenu_main ul li a:visited
{
	display:block;
list-style: none;
padding: 0px;
width:192px;
padding-left:12px;
padding-top:4px;
height:30px;
text-align:left;
background-image:url(images/leftmenu_link.png);
background-repeat:repeat-x;
margin-top:5px;
color:#FFFFFF;
text-decoration:none;
font-size:15px;
font-weight:bold;
}
#leftmenu_main ul li a:hover
{
color:#EED7D7;	
}
#content
{
display:block;
float:left;
width:689px;
height:auto;
padding-left:10px;
padding-top:15px;
padding-right:10px;
padding-bottom:5px;
}
#content_top
{
	background-image:url(images/main_top.png);
	background-repeat:no-repeat;
	width:689px;
	height:23px;
}
#content_main
{
background-image:url(images/main_back.png);
background-repeat:repeat-y;
width:659px;
padding-left:15px;
padding-right:15px;
}
#content_bottom
{
background-image:url(images/main_bottom.png);
background-repeat:no-repeat;
width:689px;
height:23px;
}
#footer
{
width:inherit;
height:auto;
}
#footer h3 a,#footer h3 a:visited
{
display:inline;
text-align:center;
font-size:12px;
text-decoration:none;
color:#FFF;
}
#menu ul {
	list-style: none;
	padding: 0px;
	margin-left:auto;
	width:960px;
}
#menu li {
	list-style: none;
	padding: 0px;	
	display: inline; 

}
#menu a {
	float: left;
	height: 36px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	font-weight: bold;
	padding-top: 18px;
	font-size: 15px;
	padding-left:13px;
	padding-right:13px;
}
#menu a:hover{
	background-image:url(images/link_background.png);
	background-repeat:repeat-x;
}
#content p
{
	}
html, body {
text-align: center;
}
p {text-align: left;}

Exercice HTML: Tableaux

Réaliser le tableau ci-dessous :

  • celui-ci doit être centré dans la page et occuper le 80% de la largeur de la fenêtre du navigateur
  • largeur des bordures: 10 pixels (attribut CELLSPACING=); épaisseur de l'ombrage: 3 pixels (attribut BORDER=); détachement du texte par rapport aux bords: 5 pixels (attribut CELLPADDING=)
  • la première colonne doit faire 80 pixels de large, les 2 autres se partageant le reste de la largeur
  • dans les 2 premières lignes d'en-tête et dans la première colonne, le texte doit être en gras et souligné ; dans les autres cellules, il doit être en style normal et justifié à gauche
  • réaliser alignement du texte "Xxxxx" au haut de la cellule, alignement du texte "Yyyyy" au bas de la cellule
  • définir couleurs de fond
  • placer une légende au bas du tableau
  • les balises , , sont facultatives, mais il vaut mieux les mettre

Nnnnnn

Aaaaaaaaaaaaa

Bbbbbbbb

Cccccccc

Un

Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla

Xxxxx

Deux

Yyyyy

Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla

Tableau 1 : abc def ghi jkl mno pqr stu vwx yz.

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

<CENTER><TABLE BGCOLOR="SILVER" WIDTH="80%" CELLSPACING="10" BORDER="3" CELLPADDING="5">
<CAPTION ALIGN="BOTTOM"><B>Tableau 1</B> : abc def ghi jkl mno pqr stu vwx yz.</CAPTION>
<TR BGCOLOR="RED" >
    <TH ROWSPAN="2" WIDTH="80">Nnnnnn</TH>
    <TH COLSPAN="2">Aaaaaaaaaaaaa</TH>
</TR>
<TR BGCOLOR="GRAY">
    <TH WIDTH="40%">Bbbbbbbb</TH>
    <TH WIDTH="40%">Cccccccc</TH>
</TR>
<TR>
    <TH BGCOLOR="GRAY">Un</TH>
    <TD>Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
	blabla blabla blabla blabla blabla</TD>
    <TD VALIGN="TOP">Xxxxx</TD>
</TR>
<TR>
    <TH BGCOLOR="GRAY">Deux</TH>
    <TD VALIGN="BOTTOM">Yyyyy</TD>
    <TD>Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
	blabla blabla blabla</TD>
</TR>
</TABLE></CENTER>

Exercice HTML: TP HTML et feuilles de style externe

1) Ecrire le code HTML et CSS qui permet de réaliser le tableau suivant:



2) Ecrire le code HTML et CSS "externe" qui permet de réaliser la page suivante:


 

ExerciceHTML-id2171 Exercice1HTML-id2171 
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

1)

HTML 

  HEAD

link rel="stylesheet" type="text/css" href="exe1.css"

  /HEAD 

  BODY 

    TABLE 

      TR 

        TDA 

        /TD 

        TDB 
        /TD 
        TDC 
        /TD 
      /TR 
      TR 
        TDA1 
        /TD 
       TDB1 
        /TD 
        TDC1 
        /TD 
      /TR 
    /TABLE 
  /BODY
/html

----------------------------------------------------------------------------

CSS:

table { 
border:2px solid black; 
margin:auto; 
} 
td, tr{ 
border:1px solid #f02485; 
text-align:center; 
width:150px; 
height:50px; 
vertical-align:middle; 
text-align:center;} 
------------------------------------------------------------------------------
2)
html

head

link rel=stylesheet type="text/css" href="test7.css"

body

H1Le titre EMest/EM important !/H1br

p les feuilles de styles/pbr

p css /p

/body

/html

-------------------------------------------------------------------------------
CSS:

BODY { 
  color: black;
  background: url('/2.gif') white;
}
p {
color:blue;
font-family=arial;
font-size:18;
}
Contenu publié le 10 Janvier 2012 Mise à jour le Jeudi, 15 Décembre 2022 20:29 et rédigé par BENKIRANE Fatima Ezzahra