DEPARTEMENT TECHNOLOGIE

ISET SFAX
DE L’INFORMATIQUE

Atelier 3
Matière : DEVELOPPEMENT WEB I Niveau : L1 TI
Enseignant : Equipe pédagogique A.U. 2022-2023
2023

Dans ce TP, on s’intéresse à mettre en forme les pages Web crées dans le TP2 (index.html, cv.html et
contacts.html) en utilisant les feuilles de style CSS3 de la manière présenté dans l’annexe 1.

Index.html

1. Introduire les modifications HTML suivante :

- Supprimer l’image cliquable placé dans la balise <nav></nav> et la remplacer par la liste à puce
suivante

<ul>
<li><a href="ahmed.overblog.com">Mon
href=" Blog</a></li>
<li><a href="cv.html">Mon
href="cv.html CV</a></li>
<li><a href="contact.html">Contact</a></li>
href="contact.html">C
</ul>
- Supprimer l’image utilisé dans la balise <header></header>
- Attribuer à la balise header l’attribut : id="banniere_image"
- Ajouter dans le bloc <header></header> le bloc <div> suivant :

<div id="banniere_description">
Il ne faut pas avoir beaucoup de chance pour avancer...
</div>
- Ajouter avant le titre <h1> Bienvenue sur ahmedtounsi.com !</h1>
! l’image "ico_epingle.png" et lui
affecter l’attribut class="ico_categorie"
- Placer l’image homme.jpg dans un pargarphe <p></p>
<p><

<p id="photo_ahmed"><img
id="photo_ahmed">< src="homme.jpg"/></p>

- Placer la vidéo dans un paragraphe <p></p>

<p id="v1" >

<video width="320" height="240" controls poster="poster.jpg">
<source src="ahmed.mp4" type="video/mp4">
</video>
</p>

2. Créer une feuille de style externe (style.css) puis assigner cette dernière à la page index.html
Page 1 sur 5
3. Ajouter les propriétés de style suivantes à la feuille « style.css »

Corps du document Corps de la page

Titre h1 (bloc section) et lien de navigation <a> (bloc

nav)

Bloc de navigation

Bannière

Mise en forme de la bande au dessous de la bannière Pied de page

Page 2 sur 5
CV.html

1. Introduire les modifications HTML suivante :

- Supprimer le titre <h1> CV de Ahmed Tounsi</h1>

- Supprimer le bloc <div title="menu"></div>
- Supprimer les balises <figure> et <figcaption>
- Remplacer la balise <div title="mes coordonnées"></div> par un bloc <header></header>
- Déplacer l’image dans le bloc <header></header>
- Mettre l’âge et le grade d’un paragraphe <p></p>
- Mettre les autres informations dans un autre paragraphe <p></p>

<header>
<img src="homme.jpg"/>
<h1> Ahmed Tounsi </h1>
<p class="p1">
28 ans <br/> Maitre assitant en informatique
</p>
<p class="p2">
Département technologies de l’informatique <br/>
ISET de Sfax -: Route de Mahdia Km 2.5 BP 88 A - 3099 Sfax ; Tel: 74 431 425 ;
Fax: 74 431 386.<br/>
Mail : <a href="mailto:ahmed.tounsi@gmail.fr"> ahmed.tounsi@gmail.fr </a> <br/>
Web : <a href="www.ahmedtounsicom"> www.ahmedtounsi.com </a>
</p>
</header>
- Supprimer les lignes <hr/>
- Supprimer le bloc Contact et la citation <q></q>
- Supprimer la balise <mark></mark> et la balise <strong></strong>
- Encadrer tous les blocs <div></div> par un bloc <section></section>
- Remplacer tous les blocs <div></div> par des blocs <article></article>

2. Créer une feuille de style externe (cv.css) puis assigner cette dernière à la page cv.html
3. Ajouter les propriétés de style suivantes à la feuille « style.css »

Corps du document paragraphe <p>

Bloc <header></header>

Titre h1 et premier paragraphe <p>

Page 3 sur 5
 image Titre h2

Table
Bloc article

Contact.html

1. Introduire les modifications HTML suivante :

- Supprimer tous les balises <br/>

- Ajouter au label nom l’attribut id="l1"
- Ajouter au <textarea> l’attribut id="m"
- Supprimer les attributs cols et rows de la zone textarea

2. Créer une feuille de style externe (contact.css) puis assigner cette dernière à la page contact.html
3. Ajouter les propriétés de style suivantes à la feuille « contact.css »

Corps du document Input

Fieldset

Legend Label nom

Textearea

Page 4 sur 5
 Annexe

Figure 1 - Index.html

Figure 2 - CV.html

Figure 3 - contact.html

Page 5 sur 5