Techniques de
développement
web
Institut supérieur
d'informatique -
Ariana
Équipe pédagogique : Mr
Ben Ben rkaya Moez - Mme
Boulifa Nadia - Mme Limam
hela
Février 2021
Table des matières
I - Manipulation des nouveautés du HTML5 et CSS3 3
1. Exercice : ....................................................................................................................................................... 3
2. Exercice : ....................................................................................................................................................... 4
3. Exercice : ....................................................................................................................................................... 5
4. Exercice : ....................................................................................................................................................... 6
5. Exercice : ....................................................................................................................................................... 7
6. Exercice : ....................................................................................................................................................... 7
7. Exercice : ....................................................................................................................................................... 8
Manipulation des nouveautés du HTML5 et CSS3
I Manipulation des
nouveautés du HTML5
et CSS3
Objectifs
À la fin de ce TP, vous serez capable de :
Utiliser du code HTML ;
Structurer une page web en HTML ;
Utiliser du code CSS ;
Mettre en forme une page web en CSS ;
Organiser les éléments d'une page web grâce au CSS ;
Modifier l'agencement d'une page HTML avec CSS .
1. Exercice :
Question
Dans cet exercice nous allons parler de balises sémantiques, de structure de page, de structure de contenu
afin d'organiser au mieux votre code pour concevoir de pages web optimisées, tout en respectant les
dernières normes HTML 5 en vigueur.
Le modèle de la page à créer est le suivant :
3
Exercice
:
2. Exercice :
Question
Dans cet exercice, nous allons voir comment créer un formulaire avec les nouveautés de HTML5 et
CSS3. Le modèle de la page à créer est le suivant :
4
Exercice
:
3. Exercice :
Question
En utilisant HTML5 et CSS3, créez un
:
- Menu horizontal
- Menu vertical
- Menu déroulant horizontal
- Menu déroulant vertical
5
Exercice
:
4. Exercice :
Question
L'objectif de cet exercice est de styler un tableau en CSS3 en évitant tout élément superflu (classe, attribut, id)
dans le code HTML, qui devra demeurer le plus épuré possible.
Vous observez au sein de la structure ci-après, outre les éléments classiques d'un tableau, un attribut sous-
exploité : scope . Celui ci précise si l’entête de cellule (<th>) doit être associé à sa ligne ou à sa colonne.
1 <table summary="Le prix imaginaire de certaines fruits sur le marché">
2 <caption>Prix des fruits </caption>
3 <tr>
4 <td></td>
5 <th scope="col">Origine</th>
6 <th scope="col">Prix</th>
7 </tr>
8 <tr>
9 <th scope="row">Kiwi</th>
10 <td>France</td>
11 <td>30€</td>
12 </tr>
13 <tr>
14 <th scope="row">Pastèque</th>
15 <td>taiwan</td>
16 <td>17€</td>
17 </tr>
18 <tr>
19 <th scope="row">Papaye</th>
20 <td>Romanie</td>
21 <td>1.3€</td>
22 </tr>
23 <tr>
24 <th scope="row">Melon</th>
25 <td>France</td>
26 <td>12€</td>
27 </tr>
28 <tr>
29 <th scope="row">Pomme</th>
30 <td>Tunis</td>
31 <td>3€</td>
32 </tr>
33 </table>
6
Exercice
:
5. Exercice :
Question
Créer un arrière-plan vidéo en plein écran avec CSS3, selon le modèle de la page
suivante
6. Exercice :
Question
Un flip box est une animation, créer les effets de retournement horizontal et vertical sur deux <div>
7
Exercice
:
7. Exercice :
Question
Créer une carte de profil avec CSS3 selon le modèle de la page
suivante
Indice :
- Téléchargement dossier
- font Téléchargement image
8
9
