Dev Web
2020/2021
Bassem BSIR
LATICE laboratory Research Departement of Computer Science, Tunisia University ISITCom
Institut Supérieur d'Informatique et des Techniques de Communication
Adresse: Rue: G.P.1 Hammam Sousse-4011
Mobile phone: 216 28 18 36 84
Email: [Link]@[Link]
Commencer par créer un document html [Link] dans un dossier TP1 très petit, et nous
l'enrichirons au fur et à mesure. Lancez d'abord un éditeur de texte (Notepad++, sublime text,
navigateur js bin), et recopiez le code suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>
Premier essai
</title>
</head>
<body>
<p>
Bonjour tout le monde...
</p>
</body>
</html>
Changeons un peu le texte de notre page, pour quelque chose comme :
<h1>Voici un titre</h1>
<h2>Maintenant un sous-titre</h2>
<h3>Et on peut continuer</h3>
<h4>La profondeur est limitée</h4>
<h5>Pénultième</h5>
<p align= "right">Un petit texte justifié à
droite pour introduire cette partie, elle le
mérite bien, et puis il serait dommage de se
priver. </p>
<h6>Un vraiment petit paragraphe</h6>
<p> Et un titre est un changement de
paragraphe implicite.</p>
Ajoutez ces lignes dans la page précédente, et vérifier l'affichage. Avez-vous besoin d'ajouter
la balise <br> après une balise d'entête <h1-6> ou un paragraphe <p> ? Pourquoi ?
<ul>
<li> <b> Le texte peut être en gras, </b> </li>
<li> <em> Les italiques mettent le texte en valeur ! </em> </li>
<li> <big> On peut écrire de gros caractères, </big> <small> ou de petits </small>
</li>
<li> Et enfin, on peut utiliser des exposants comme dans 1<sup>er</sup> ou des
indices, u<sub>n+1</sub> = u<sub>n</sub>+1 </li>
</ul>
Dans le code précédent, on vient de créer une liste. Que se passe-t-il si
on remplace ul par ol ?
<table border="1">
<caption> Tableau 1: mes notes </caption>
<tr>
<td> X </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td> 2 </td>
<td> 2 </td>
<td> 4 </td>
<td> 6 </td>
</tr>
<tr>
<td> 3 </td>
<td> 3 </td>
<td> 6 </td>
<td> 9 </td>
</tr>
</table>
Travail demandé
Donnée de l'exercice
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 </TR>, </TH>, </TD> sont facultatives, mais il vaut mieux les mettre
Enseignement supérieur en Tunisie
Nnnnnn
Bbbbbbbb Cccccccc
Xxxxx
Un
Deux Yyyyy
Tableau 1 : Université de Sfax