TP1 Dev102

Déveleppemnt Digital
DEV102
ISTA SOUK SEBT
Compte rendu
TP N°1
Réalisé par:
➢ Mounir Grich
➢ Ayoub Fatihi
Solution de TP N°1
Exercice1: Page de présentation de la Filière Développement Digital

Questions 1,2,3,4 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Filière Développement Digital</title>
</head>
<body>
<a href=" https://www.ofppt.ma/">“Licence
d’éducation en informatique d’Agadir</a>
<h1>Le développement digital :</h1>
<p> définition et élément de réponse Dans le jargon professionnel,
<br> le développement digital, désigne l’ensemble des technologies et
des solutions implémentées pour permettre à une entreprise de rester
<br> compétitive dans un monde de plus en plus numé Ce terme est
également connu sous le terme de transformation digitale ou de transition
numérique. </p>
</body>
</html>
Résultat
Exercice2: Les liste
<!DOCTYPE html>
<html>
<head>
<title>list</title>
</head>
<body>
<h2><u>Liste à puce :</u></h2>
<ul>
<li>Adresse : Nouveau Complexe Universitaire, Cité Dakhla, CP 80000,
Agadir</li>
<li>Tél : +212528227125</li>
<li>Fax : +212528227260</li>
<li>Email : istas@edu.ac.ma</li>
<li>Web : https://www.ofppt.ma/
</li>
</ul>
<h2><u>Liste descriptive :</u></h2>
<p> <b><h2>
Quelques définitions de termes</h2></b>
</p>
<dl>
<dt><h2>HTML</h2></dt>
<dd>Hypertext Markup Language</dd>
<dt><h2>www</h2></dt>
<dd>World Wide Web</dd>
<dt><h2>Navigateur</h2></dt>
<dd>Logiciel spécialisé dans l'interprétation du langage HTML</dd>
</dl>
<dt><h2>HTTP </h2></dt>
<dd>Hypertext Transfert Protocol</dd>
<h2><u>Liste numérotée :</u></h2>
<h2> Cours HTML</h2>
<ol>
<li>Structure</li>
<li>Divisions</li>
<li>Listes</li>
<ol type="a">
<li>Styles</li>
<li>Liens</li>
<li>Image</li>
<ol type="i">
<li>Tableau</li>
<li>Frames</li>
<li>Formulaires</li>
</ol>
</ol>
</ol>
<h2><u>Combinaison de listes numérotée et à puce :</u></h2>
<ol>
<li>Semestre 3 :</li>
<ul type="circle">
<li>Technologies du Web </li>
<li>Système d’exploitation</li>
<li>...</li>
</ul>
<ul type="circle">
<li>Structures de données</li>
<li>...</li>
</ul>
</ol>
<ul>
<ul type="circle">
<li>Réseaux</li>
<li>Bases de données</li>
<li>...</li>
</ul>
<ul>
<li>Java</li>
<li>UML</li>
<li>...</li>
</ul>
</ul>
</body>
</html>
Résultat
Exercice3: Les liens
•Index.html
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<h1>L'Ecole supérieure de l'éducation et de la formation - Agadir</h1>
<h2>Bienvenue sur notre site officiel</h2>
<a href="Presentation.html">Presentation</a>
<br>
<a href="Realisation.html">Realisation</a>
<br>
<a href="Contact.html">Contact</a>
</body>
</html>
Résultat
•Presentation.html
<!DOCTYPE html>
<html>
<head>
<title>presentation</title>
</head>
<body>
<h1>Présentation de l'école</h1>
<p>L'école permet à ses édudiants d'acquérir des connaissances académiques
et des compétences professionnelles indispensables à leur employabilité dans
le domaine <br>de l'enseignement.L'Innovation,la Qualité et la Performance
sont les trois concepts
qui animent l'esprit de cette nouvelle institution .</p>
<input type="button" value="retour>
</body>
</html>
Résultat
•Realisation.html
<!DOCTYPE html>
<html>
<head>
<title>Realisation</title>
</head>
<body>
<h1>L'Ecole supérieure de l'éducation et de la formation - Agadir</h1>
<h2>L'Ecole Supérieure de L'Education et de la Formation d'Agadir offre
plusieurs formations:</h2>
<ul>
<li>Licence d'Education:Enseignement Secondaire:Langue Française.</li>
<li>Licence d'Education:Enseignement Secondaire:Langue Anglaise.</li>
<li>Licence d'Education:Enseignement Secondaire:Mathématique.</li>
<li>Licence d'Education:Enseignement Secondaire:Informatiques.</li>
<li>Licence d'Education:Enseignement Primaire.</li>
<li>Licence Professionnelle:Didactique du Français Langue
Etrangère.</li>
<li>Licence Professionnelle:English Language Teaching and the Global
Market.</li>
</ul>
<input type="button" value="retour">
</body>
</html>
Résultat
•Contact.html
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
</head>
<body>
<h1>Contact</h1>
<h2>Ecole Supérieure de l'Education et de La Formation d'Agadir</h2>
<ul>
<li>Adresse:Nouveau Complexe Universitaire,Cité Dakhla,CP
80000,Agadir</li>
<li>Tél:+212528227125</li>
<li>Fax:+212528227260</li>
<li>Email:esefa@uiz.ac.ma</li>
<li>Web:esefa.uiz.ac.ma</li>
</ul>
<input type="button" value="retour">
</body>
</html>
Résultat
Exercice 4 : Les tableaux
<!DOCTYPE html>
<html>
<head>
<title>Tableau</title>
</head>
<body>
<h1>Tableau1:</h1>
<table border="1">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tr>
<th>1 </th>
<th>Deux </th>
<th>Trois </th>
<th>4 </th>
</tr>
<tr>
<th>Cinq </th>
<th>6 </th>
<th>Sept </th>
<th>8 </th>
</tr>
<tr>
<th>9 </th>
<th>Dix </th>
<th>11 </th>
<th>12 </th>
</tr>
</table>
<h1>Tableau2:</h1>
<table border="1" style="color:rgb(14, 67, 119);">
<tr>
<th colspan="2" rowspan="2">Population</th>
<th colspan="3">Moyenne</th>
</tr>
<tr>
<th>Hauteur en cm</th>
<th>Espérance de vie</th>
<th>Poids moyen</th>
</tr>
<tr>
<th rowspan="2">Sexe</th>
<th>Masculin</th>
<th>1.78</th>
<th>70</th>
<th>75</th>
</tr>
<tr>
<th>Féminin</th>
<th>1.70</th>
<th>80</th>
<th>55</th>
</tr>
</table>
<h1>Tableau3:</h1>
<table border="1" style="background-color:rgb(134, 207, 179);
color:rgb(17, 77, 138);">
<caption><b>Comparatif modèle économique</b></caption>

<tr>
<td colspan=" 3 "><b> Modéle</b></td>
<td rowspan=" 2 "><b>Vitesse en km/heure</b></td>
<td rowspan="2 "><b>Consommation en litre/100 km</b></td>
</tr>
<tr>
<td><b>Marque</b></td>
<td><b>Type</b></td>
<td><b>Numé de sé</b></td>
</tr>
<tr>
<td>Peugeot 106</td>
<td>B2</td>
<td>234.34</td>
<td>132</td>
<td>5.7</td>
</tr>
<tr>
<td>citroen AX</td>
<td>AT67B8</td>
<td>6789</td>
<td>126</td>
<td>5.5</td>
</tr>
</table>
</body>
</html>
Résultat
Exercice 5: Les Formulaires
<!DOCTYPE html>
<html>
<head>
<title>Formulaires</title>
</head>
<body><pre>
<form>
<fieldset>
<legend><b>Vos coordonnées</b></legend>
<label for="nom">Nom:</label> <input type="text" name="nom"
id="nom" value="votre nom">
<label for="prénom">Prénom:</label> <input type="text" name="prénom"

id="prénom" value="votre prénom">
<label for="date">Date de naissance:</label><input type="date" name="date"

id="date">
<label for="mail">Mail:</label> <input type="mail" name="mail"

id="mail" value="votre mail">
<label for="site">Votre site:</label> <input type="site" name="site"

id="site">
<label for="pass">Code:</label> <input type="password" name="pass"

id="pass">
<input type="radio" name="genre" id="genre">Homme

<label for="genre">Genre:</label>
<input type="radio" name="genre" id="genre">Femme
<label for="pays">Pays:</label> <select name="pays" id="pays"
style="color:rgb(255, 71, 71);">
<option value="1">Votre pays</option>
<optgroup label="Afrique" >
<option value="1">Algérie</option>
<option value="2">Maroc</option>
<option value="3">Mauritanie</option>
</optgroup>
<optgroup label="Europe" >
<option value="1">France</option>
<option value="2">Belgique</option>
<option value="3">Italie</option>
<option value="4">Allemagne</option>
</optgroup>
<optgroup label="Amérique" >
<option value="1">Canada</option>
<option value="2">Argentine</option>
</optgroup>
<optgroup label="Autres" >
<option value="1">Europerope</option>
<option value="2">Asie</option>
<option value="3">Amériques</option>
<option value="4">Océanie</option>
</optgroup>
</select>
</fieldset></form>
<form><fieldset><legend><b>Vos gouts</b></legend>
<input type="checkbox" name="chk1" value="Tarte aux fraises à la crème
d'amandes"/> Tarte aux fraises à la crème d'amandes
<input type="checkbox" name="chk1" value="Tarte aux prunes" /> Tarte aux
prunes
<input type="checkbox" name="chk1" value="Tarte rustique aux mirabelles de
Lorrain, noisettes et miel " />Tarte rustique aux mirabelles de Lorrain,
noisettes et miel
<textarea name="txt" id="txt" cols="80%" rows="5" >Décrivez vos gouts en
détail</textarea>
</fieldset></form>
<form><fieldset><legend><b>Envoyer nous votre photo</b></legend>
<input type="file">
<input type="reset" name="reset" id="reset" value="Effacer"> <input

type="submit" name="sub" id="sub">
</fieldset>
</form>
</pre>
</body>
</html>
Résultat

TP1 Dev102

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP1 Dev102

Transféré par

Droits d'auteur :

Formats disponibles

Déveleppemnt Digital

Exercice1: Page de présentation de la Filière Développement Digital

<input type="button" value="retour>

<caption><b>Comparatif modèle économique</b></caption>

<label for="prénom">Prénom:</label> <input type="text" name="prénom"

<label for="date">Date de naissance:</label><input type="date" name="date"

<label for="mail">Mail:</label> <input type="mail" name="mail"

<label for="site">Votre site:</label> <input type="site" name="site"

<label for="pass">Code:</label> <input type="password" name="pass"

<input type="radio" name="genre" id="genre">Homme

<input type="reset" name="reset" id="reset" value="Effacer"> <input

Vous aimerez peut-être aussi