TechnoWeb Td3-Css+sol

Université Frères Mentouri-Constantine1 – Département électronique - Technologie web – TD n°3 : CSS
TD3 exercice 1
Considérons le tableau de l’exercice numéro 1 du TD2 et le programme html solution correspondant (version
v2 donnée ci-dessous). Séparez ce programme en deux parties : un fichier html et fichier CSS externe.
Résultats de techno web 2017
Code apprenant Note Décision
123 65% admis
124 Non disponible
125 36% ajourné
126 à 127 Non concernés
Module acquis
128 Absent
Code source (v2 sans css) qui doit être modifié et éclaté en deux : html + css
Particularité par rapport à la version 1: utilisation de caption, thead, tbody
<html>
<head>
<meta http-equiv="content-type" content="text/html charset=ISO-8859-1" >
<title>Solut td1 v2</title>

</head>
<body>
<br>
<table border="1" cellpadding="0" cellspacing="0">
<!— on change de méthode en utilisant la balise <caption> càd légende du tableau
<tr >
<td colspan="3" style="border: 1px solid"
valign="top" width="633px" align="center">
<b>Résultats de techno web 2017</b>
</td>
</tr>
-->
<caption> Résultats de techno web 2017 </caption>
<thead>
<!—Il s’agit de l’entête du tableau. Ne pas confondre avec l’entête du document <head> -->
<tr>
<th > <B> Code apprenant</B> </th>
<th > <B> Note </B> </th>
<th > <B> Décision </B> </th>
</tr>
</thead>
<tbody>
<!—Il s’agit du corps du tableau. Ne pas confondre avec le corps du document <body> -->
<tr>
<td valign="top" width="211"> 123 </td>
<td valign="top" width="211"> 65% </td>
<td valign="top" width="211"> admis </td>
</tr>
<tr>
< td colspan="2" valign="top"> Non disponible </td>
</tr>
<tr >
<td valign="top" width="211"> 36% </td>
<td valign="top" width="211"> ajourne </td>
</tr>
1
<tr >
<td rowspan="2" valign="top" width="211"> 126 à 127 </td>
<td valign="top" width="211"> </td>
<td rowspan="2" valign="top" width="211">
<p align="center">Non concernés </p>
<p align="center">Module acquis </p>

</td>
</tr>


<tr >
</tr>
<tr>
<td valign="top" width="211" align="right" > Absent </td>
</tr>
</tbody>
</table>
</body>
</html>
2
Solution exercice 1 : Version3 utilisant un fichier css (Voir les remarques à la fin des fichiers CSS)
Par rapport à la version v2, il ne reste aucune mise en forme dans le fichier html. On a rajouté en plus un
fichier css.
Dans le fichier html on a rajouté la création d’une division (partie colorée en bleu cyanure): on a mis le contenu
« absent » de la celleule entre <div> pour pouvoir lui appliquer un traitement spécifique (l’aligner à droite) dans
le fichier CSS.
On a plusieurs versions de fichiers css pour le même fichier html:
V31 : où des erreurs ont été volontairement commises
V32 : où les erreurs de v31 ont été corrigées
Partie 1: fichier html
<html>
<head>
<meta http-equiv="content-type" content="text/html charset=ISO-8859-1">

<link rel="stylesheet" type="text/css" href=" td1_hh_v3.css" />
<title>Solut td3 exo2 v3</title>

</head>
<body>
<br>
<table >
<thead>

<tr>
<th > Code apprenant </th>
<th > Note </th>
<th > Décision </th>
</tr>
</thead>
<tbody>

<tr>
<td > 123 </td>
<td > 65% </td>
<td > admis </td>
</tr>
<tr>
<td > 124 </td>
< td colspan="2"> Non disponible </td>
</tr>
<tr >
<td > 125 </td>
<td > 36% </td>
<td > ajourne </td>
</tr>
<tr >
<td rowspan="2" > 126 à 127 </td>
<td > </td>
<td rowspan="2" >
<p >Non concernés </p>
<p >Module acquis </p>

</td>
</tr>
3



<tr >
<td > </td>
</tr>
<tr>
<td > 128 </td>
<td ><div> Absent </div></td>

<td > <p > </p> </td>
</tr>
</tbody>
</table>
</body>
</html>
Partie 2 : fichier CSS

/*Fichier td1_hh_v31.css*/
table{border:1px; cellspacing:0; }
caption{ font-weight: bold; valign:top;width:633;align:center;}
th{ text-align:left; }
td{valign:=top;width:211;border: thin black; padding:0px ; }
p{align:center;}
div{align :right}
/*On remarque que la bordure du tableau ne s’affiche pas. De même que les bordures des cellules */
/*car il manque la valeur "solid" à l’attribut « border » */
/*La largeur des cellules (211px) n’est pas prise en compte, car on a oublié l’unité « px ». La largeur de */
/*la colonne est alors automatiquement réglée en fonction du contenu de la cellule la plus large*/
/*Cependant les marges internes des cellules sont bien prises en compte*/
/*De même pour la largeur (633) de la légende "caption" du tableau. Elle est automatiquement réglée */
/*en fonction de la largeur du tableau*/
/*Fichier td1_hh_v32.css*/
table{border:1px solid;cellspacing:0px;}
caption{ font-weight : bold; valign : top; width: 633; align: center;}
th{text-align : left; }
td{ valign:top;width:211px; border: solid thin black; padding:0px; }
p{text-align : center;}
div{text-align : right}
/*On remarque que la bordure du tableau s’affiche. De même que les bordures des cellules */
/*La largeur des cellules est bien prise en compte */
/*Bien qu’on ait oublié l’unité « px » pour la largeur (633) de la légende du tableau "caption ", */
/*sa largeur est automatiquement réglée en fonction de la largeur du tableau (3 x211=633) . */
4
Université Frères Mentouri-Constantine1 - Cours technologie web – TD n°3 : CSS
TD3 Exercice 2
En partant de la solution de l’exercice 1, donner les modifications sur le fichier css permettant
d’afficher le tableau ci-dessous.
Titre de tableau : en bleu, centré non encadré: 0.75pt
Titre de colonnes : italique,

vert sur fond rouge
Cellule
Texte : en bleu
Aligné à gauche
Arrière-plan : gris
Bordure : en noir de largeur
3 pixels
Marge intérieure :15 pixels
Encadrement tableau :
bleu de largeur 4 px
Décalage: 250 pixels
Fusion lignes Deux lignes Fusion colonnes Aligné à droite Centré

Fusion lignes
Solution exercice 2 : partie 2: fichier css

/*Fichier td3-ccs_exo2.css*/
body {background-color:#FFFFCC;margin-left:200px;}
table{border:4px solid #0000ff;}
caption{color:blue;font-size:30px;font-weight:bold;font-family:Georgia,sans-serif;backgroud:#FF0000;
valign:top;width:633;align:center;}
th{font-style:italic;text-align:left;font-family:Verdana,Georgia,sans-serif;color:#00FF00;background-
color:#FF0000;}
td{padding:15px; border:3px solid black;valign:=top;width:211px;color:#0000FF;background-color:grey;}
p{text-align:center;}
div{text-align :right}
5
TD3 exercice 2bis (extrait de l’interrogation écrite M2R&T 18 janv 2020-exo 1)

Donner le programme permettant d’afficher le tableau suivant
Titre de tableau : en bleu, centré non encadré

Font : Georgia
Titre de colonnes :
italique, vert sur fond rouge
Font : Verdana
Cellule
Texte : en bleu
Aligné à gauche
Arrière-plan : gris
Bordure : en noir de largeur
3 pixels
Marge intérieure :15 pixels
Espace entre cellules : 15px
Encadrement tableau :
bleu de largeur 4 px
Décalage: 250 pixels
Aligné à droite Fusion cellules

Fusion cellules Centré
Fusion cellules
6
Solution exercice 2bis

1° Programme html permettant d’afficher le tableau indiqué (fichier td3_exo2bis.html)
<html>
<head>
<meta http-equiv="content-type" content="text/html charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="td3_exo2bis.css" />
<title>exo1 interro 2020</title>
</head>
<body>
<br>
<table >
<thead>
<th > Code apprenant </th>
<th > Note% </th>
<th > Décision </th>
</thead>
<tbody>
<tr>
<td > 1 à 12 </td>
<td > 75% </td>
<td > admis </td>
</tr>
<tr >
<td > 13 </td>
<td > 47% </td>
<td > <div>ajourne<div> </td>
</tr>
<tr>
<td > 14 </td>
< td colspan="2"> Non disponible </td>
</tr>
<tr >
<td rowspan="2" > 15 à 20</td>
<td > </td>
<td rowspan="2" >
<p > Non concernés </p>
<p > AUDITEURS </p>
<p> LIBRES < /p>
</td>
</tr>
<tr >
<td > </td>
</tr>
<tr>
<td > 21 </td>
<td > <p > </p> </td>
<td > <div>absent</div> </td>
</tr>
<tr>
<td > 22 à 40 </td>
<td > 90% </td>
<td > <p > ADMIS; </p> </td>
</tr>
</tbody>
</table>
</body>
</html>
7
2°Programme css correspondant (fichier td3_exo2bis.css)

Pour bien illustrer et comprendre les bordures des cellules, ce fichier est décliné en trois
versions : v1, v2 et v3 utilisant toutes le même fichier html (mais que par commodité nous avons
renommé en v1.html, v2.html et v3.html pour les appels respectifs aux 3 fichiers css).
Remarque : la gestion des espaces dans le fichier html par "cellpaddig" et "cellspacing" est obsolète en html5. Elle se fait
obligatoirement dans le fichier css par « padding » pour la balise « td », et « border-spacing » pour la balise « table ».
/*Fichier td3_exo2bis_v1.css correspondant à exo1_interro20.css*/

/* écriture selon le format : sélecteur (ou balise) {attribut (ou propriété) : valeur} */
body {background-color: #FFFFCC; margin-left: 200px;}
table{border:4px solid #0000ff; CELLspacing: 15px;}
caption{color:blue;font-size:30px;font-weight:bold;font-family:Georgia,sans-serif;backgroud:#FF0000;
valign: top; width:633; align: center;}
th{font-style: italic; text-align:left;font-family:Verdana,Georgia,sans-serif;color:#00FF00;
background-color: #FF0000;}
td{padding:15px;
border:3px solid black;
valign: top; width: 211px; color: #0000FF; background-color: grey;}
p{text-align: center;}
div{text-align: right;}
/*Fichier td3_exo2bis_v2.css */
/*Par rapport à la version v1, on a remplacé l’attribut « cellspacing » (espacement entre cellules) par l’attribut
border-spacing (espacement entre bordures), car « cellspacing » n’est pas reconnu par html5 ! Donc elle n’a
pas été prise en compte dans l’affichage de la version 1
table{border:4px solid #0000ff; border-spacing: 15px;}
/*Fichier td3_exo2bis_v3.css */
/*Par rapport à la version v1, on a remplacé l’attribut « cellspacing » (espacement entre cellules) par l’attribut
« border-collapse » (coller les bordures) */
table{border: 4px solid #0000ff; border-collapse: collapse;}//permet de coller les bordures des cellules
8
Université Frères Mentouri-Constantine1 - Technologie Web – TD3 : CSS - Exercice 3
TD3 Exercice 3 (extrait de ratr M1auto2018 exo 2)

Donner ce qui est exactement affiché à l’écran (sans oublier d’indiquer les couleurs de
texte, de l’arrière plan, des bordures,…)
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link rel="stylesheet" type="text/css" href="td3-css_exo3.css">
<title> td3-css_exo3</title>
</head>
<body>
<div style="text-align: center;">
<p style="font-family: Courier New,Courier; color: white; font-weight: bold; background-color: blue;">
<big><big><big>BIENVENUE SUR MON BLOG PEDAGOGIQUE</big></big></big></p><br>
<span style="color: blue; font-weight: bold;"> <big><big> Hamdi Hocine</big></big></span><br>
<hr style="width: 50%; height: 2px; color: green;"><br>
<a href="images/photo_hh.jpg" style="border: 2px solid red; color: green;"
title="photo de l'auteur">Ma Photo
</a>
<hr style="width: 100%; height: 2px; color: blue;">
</div>
<div style="text-align: left;">
<table>
<caption> Sommaire: </caption>
<thead>
<tr>
<th> Description </th>
<th> Lien </th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2"> 1. Mes cours </td>
<td> <a href="http://www.tw.client/teluc.umc.edu.dz">Technologie web Client</a></td>
</tr>
<tr>
<td> <a href="http://www.tw.serveur/teluc.umc.edu.dz">Technologie web Serveur</a></td>
</tr>
<tr>
<td> 2. Mon CV </td>
<td><a href="documents/mon_cv.pdf"> Le CV</a></td>
</tr>
<tr>
<td> 3. Pour me contacter </td>
<td> <a href="mailto:hhamdi@umc.edu.dz">
<img style="border: 0px solid ; width: 50px; height: 50px;" alt="mail to"
title="envoyer un message à Hamdi Hocine" src="images/MailTo.jpg"></a>
</td>
</tr>
</tbody>
</table>
</div></body></html>
9
/*Fichier td3-css_exo3.css*/
/* ce fichier css est utilisé uniquement pour la mise en forme du tableau et la couleur de l’arrière-plan de la page*/
body {background-color:#FFFFCC;margin-left:50px;} // couleur beige
table{border:4px solid #0000ff;}
caption{color:blue;font-size:30px;font-weight:bold;font-family:Georgia;background-color:#00FF00;
valign:top; text-align:left;}
th{font-style:italic;text-align:center;font-family:Verdana,Georgia;color:#00FF00;background-color:#FF0000;}
td{padding:15px; valign:=top;width:200px;color:#0000FF;}
Solution exercice 3
Version 1 :
50pixels
Texte en bleu
Arrière plan de la
Texte en blanc sur fond bleu police Courier vert page : beige
New Traits d’épaisseur 2 pixels Traits
bleu
Lien en vert encadré rouge vers le fichier "photo_nina.jpg"
Georgia gras 30 pix bleu sur fond vert
Textes en italique verdana rouge sur fond

vert
Textes en bleu Lien vers le cours "tw-client" sur la plateforme de téléenseignement
Lien vers le cours "tw-serveur" sur la plateforme de téléenseignement

Bordure 4 pix bleu
Lien vers le fichier "mon_cv".pdf de la directory

« documents »
Lien vers l’adresse "email hhamdi@umc.edu.dz"
Image se trouvant dans le fichier "MailTo.jpg" de la directory "images"
Après clic sur le lien ma photo
10
Version 2
Lien vers le fichier "photo_nina.jpg"
Après clic sur la photo de l’auteur
11

TechnoWeb Td3-Css+sol

Transféré par

Informations du document

Titre original

Copyright

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 :

TechnoWeb Td3-Css+sol

Titre original :

Transféré par

Droits d'auteur :

Université Frères Mentouri-Constantine1 – Département électronique - Technologie web – TD n°3 : CSS

Partie 2 : fichier CSS

Titre de tableau : en bleu, centré non encadré: 0.75pt

Titre de colonnes : italique,

Décalage: 250 pixels

Fusion lignes Deux lignes Fusion colonnes Aligné à droite Centré

Solution exercice 2 : partie 2: fichier css

TD3 exercice 2bis (extrait de l’interrogation écrite M2R&T 18 janv 2020-exo 1)

Titre de tableau : en bleu, centré non encadré

Espace entre cellules : 15px

Aligné à droite Fusion cellules

Solution exercice 2bis

2°Programme css correspondant (fichier td3_exo2bis.css)

/*Fichier td3_exo2bis_v1.css correspondant à exo1_interro20.css*/

TD3 Exercice 3 (extrait de ratr M1auto2018 exo 2)

Textes en italique verdana rouge sur fond

Lien vers le cours "tw-serveur" sur la plateforme de téléenseignement

Lien vers le fichier "mon_cv".pdf de la directory

Lien vers l’adresse "email hhamdi@umc.edu.dz"

Image se trouvant dans le fichier "MailTo.jpg" de la directory "images"

Après clic sur le lien ma photo

Lien vers le fichier "photo_nina.jpg"

Après clic sur la photo de l’auteur

Centres d'intérêt liés

Vous aimerez peut-être aussi

/Fichier td3_exo2bis_v1.css correspondant à exo1_interro20.css/