TP1 -- Exercice 1
:
<html>
<head>
</head>
<body style=background-color:blue;>
<h1>PREMIERE PARTIE</h1>
<P style=color:red;>JE SUIS LE PREMIER PARAGRAPHE , je suis rouge </P>
<hr style=color:red; width="20%";>
<h2 style=text-align:center;>DEUXIEME PARTIE</h2>
<p style=" text-align:center;size:5px; color:yellow;">
je suis le 2eme paragraphe <br> au centre en taille 5 <br> et en jaune </p>
<hr style="background-color: black; width: 70%;height: 300px;" >
<h3 style="text-align: center;">TROISIEME PARTIE</h3>
<p style="text-align: right; font:arial; font-size: 30px;">je suis le dernier
paragraphe de la page avec la police arial en taille ( et aligne a droit</p>
</body>
</html>
TP1 -- Exercice 2 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol><li>systemes d'exploitation <ul>
<li>windows</li>
<li>unix</li>
</ul></li>
<li>langages de programmation
<ul>
<li>non orientes objets
<ul>
<li>cobol</li>
<li>c</li>
</ul> </li>
<li>orientes objets
<ul>
<li>java</li>
<li>perl</li>
P a g e 1 | 10
<li>python</li>
<li>c++</li>
</ul>
</li>
</ul>
</li>
<li>reseaux</li>
</ol>
</body>
</html>
TP1 -- Exercice 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<td>a1</td>
<td>200</td>
<td>Un</td>
<td>2000,25</td>
</tr>
<tr>
<td>b1</td>
<td>300</td>
<td>deux</td>
<td>3000,00</td>
</tr>
<tr>
<td>c1</td>
<td>400</td>
<td>trois</td>
<td>4000,00</td>
</tr>
</table>
</body>
</html>
P a g e 2 | 10
TP2 – Exercice 1:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1> <center> Gestion de produits </center></h1><br>
<center>
REF: <input type="text" name="reference">
Description: <input type="text" name="Description"><br><br>
Prix.U : <input type="text" name="Prix">
Quantité: <input type="text" name="qnt"> <br> <br>
<button > AJOUTER</button>
<button> EFFACER</button><br> <br>
<table border="1">
<tr>
<td> reference</td>
<td> description</td>
<td> prix unitaire</td>
<td> quantité</td>
</tr>
<tr>
<td> 1</td>
<td>p1</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td> 2</td>
<td>p2</td>
<td>20</td>
<td>15</td>
</tr>
<tr>
<td>3</td>
<td>p3</td>
<td> 40</td>
<td>07</td>
</tr>
<tr>
<td>4</td>
<td>p4</td>
<td>35</td>
<td>12</td>
</tr>
</table> </center> </body> </html>
P a g e 3 | 10
TP2 – Exercice 2:
<!DOCTYPE html>
<html>
<head>
<title> exercice1</title>
<style type="text/css">
.container{
border: 2px solid black;
width: 600px;
padding-left: 10px;
}
.container p{
display: inline-block;
font-weight: bold;
font-family: sans-serif;
}
</style>
</head>
<body>
<form class="container">
<p>Civilité</p>
<input style="margin-left: 60px" type="radio"id="Monsieur" value="Monsieur" n
ame="civil" checked="true">
<label for="Monsieur">Monsieur</label>
<input type="radio"id="Femme" value="Femme" name="civil">
<label for="Femme">Madame</label>
<input type="radio"id="mademoiselle" value="mademoiselle" name="civil">
<label for="mademoiselle">Mademoiselle</label> <br>
<p>Nom/Prénom</p>
<input type="text" name=" nomprenom"size="30" style="margin-left: 15px;"> <br>
<p style="vertical-align: top;">Adresse</p>
<textarea style="margin-left: 52px"> Rue No Boite postale</textarea> <br>
<p>No Postal/<br>Localité </p>
<input type="text" size="4" style="margin-left: 40px">
<input value="Tunis" size="10" type="text"> <br>
<p>Pays</p> <select size="1" style="margin-left: 80px">
<option>Algérie</option>
<option>Libye</option>
P a g e 4 | 10
<option>Maroc</option>
<option selected>Tunisie</option>
</select> <br>
<p>Plateforme(s)</p> <input type="checkbox" checked style="margin-left: 15px;
">
<label>windows</label>
<input type="checkbox" checked>Macintosh
<input type="checkbox">Unix<br>
<p>Applications(s)</p> <select size="4" style="vertical-align: middle;" multi
ple="true">
<option >Bureatique</option>
<option selected>DAO</option>
<option>SGBD</option>
<option>Internet</option>
</select>
<br>
<input style="margin-left: 350px; height: 30px;"type="button" value="effacer"
>
<input type="submit" value="Soumettre formulaire" style="height: 30px;">
</form>
</body>
</html>
TP3 – Exercice 1:
Fichier « [Link] »
body{
background-color: brown;
}
h1{
color: #FFF;
font-family: "Kanit";
font-size: 60px;
line-height:1em;
margin: 0;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
width: 100%
}
h3{
P a g e 5 | 10
color: aliceblue;
size: 50px;
margin: auto;
width: 50%;
border: 3px solid white;
padding: 10px;
Fichier « [Link] »
function afficherInvChaine()
{ var chaine_inverse="" ;
var ch=[Link]("inv").value;
for(i=[Link]-1; i>=0; i--)
{ chaine_inverse+=ch[i];
[Link]("result").innerHTML=chaine_inverse;
// innerHTML : permet de remplacer le contenu existant d'un élément par un nouveau contenu
Fichier « [Link]»
<html>
<head> <title> tp3-ex1 </title></head>
<link rel="stylesheet" href="[Link]">
<body>
<div class=""> <label id="jh"> Nom d'utilisateur</label>
<input id="inv">
<button onclick="afficherInvChaine()">afficher</button>
<h1 id="result"></h1>
</div>
<h3><i> Exercice inverse chaine </i></h3>
<script src="[Link]"></script>
</body>
</html>
P a g e 6 | 10
TP3 – Exercice2:
Fichier « [Link] »
body{
color: antiquewhite;
background-color: brown;
}
Fichier « [Link] »
function afficher()
var hauteur = [Link]("h2").value;
[Link]("h1").innerHTML="";
var hauteur = parseInt(hauteur, 10);
for (i=1; i<= hauteur; i++)
{ for (j=1; j<=i; j++)
{ [Link]("h1").innerHTML+="*";
[Link]("h1").innerHTML+="<br>";
Fichier « [Link]»
<html>
<head> <title> tp3-ex2</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<label><h1> Hauteur du triangle</h1> </label>
<input type="text" id="h2">
<button onclick="afficher()"> afficher </button>
<h1 align="center" id="h1"> </h1>
<script src="[Link]"></script>
</body> </html>
P a g e 7 | 10
TP3 – Exercice3:
Fichier « [Link] »
body{
background-color: brown;
}
h1{
color: white;
}
table{
color: bisque;
border: 2px solid white;
border-collapse: collapse;
}
Fichier « [Link] »
function afficher()
{ var x = [Link]("ok").value;
[Link]("table").innerHTML=""
var integer = parseInt(x,10);
for (i=1; i<=10; i++)
{ [Link]("table").innerHTML+= "<tr> <td> "+integer+" x "+i+" =
"+integer*i+" </td></tr> "
Fichier « [Link]»
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="[Link]">
<title>exercice3</title>
</head>
<body>
<h1> Donnez un entier</h1>
<input id="ok">
<button onclick="afficher()">voir le table de multiplication</button>
<table id="table" align="center" > </table>
<script src="[Link]"></script>
P a g e 8 | 10
</body>
</html>
TP3 – Exercice4:
<html>
<title>Ex3 TP6</title>
</html>
<body>
<script>
function Calculer(){
var nb = [Link]('entier').value;
var nb1 = [Link]('entier1').value;
var op = [Link]('op');
switch([Link]){
case '+':
[Link]('resulta').value=parseInt(nb)
+parseInt(nb1);
break
case '-':
[Link]('resulta').value=parseInt(nb)-
parseInt(nb1);
break
case '*':
[Link]('resulta').value=parseInt(nb)*pars
eInt(nb1);
break
case '/':
[Link]('resulta').value=parseInt(nb)/pars
eInt(nb1);
break
default:
break
};
}
</script>
<div id="div">
<input type="text" name="entier" id="entier" placeholder="Number">
<span id='1'></span>
<input type="text" name="entier1" id="entier1" placeholder="Number">
<span>=</span>
<input type="text" name="resulta" id="resulta" placeholder="resulta">
<br> <br>
<label>Choisir l'opirateur : </label>
<select name="op" id="op">
P a g e 9 | 10
<option value="+">Addition (+)</option>
<option value="-">Soustraction (-) </option>
<option value="*">multiplication (*)</option>
<option value="/">Division (/)</option>
</select>
<input type="submit" value="Calculer" onclick="Calculer()">
</div>
</body>
P a g e 10 | 10
