TP1 : Encodage d’une facture (langages Web Frontend) Sidi Ahmed Mahmoudi, Aurélie Cools
Web Technologies (I-ILIA-011) 2021-2022
Web Technologies (I-ILIA-011)
Travaux Pratiques
TP 1 : Encodage de factures avec HTML, CSS
• Introduction :
Durant ce TP nous allons utiliser les différents technologies (HTML, CSS) afin d’établir un
document web d’encodage d’une facture.
1. Partie 1 (HTML) : créer la page suivante à l’aide du langage HTML (utilisez les balises de body, div, h1,
h2, p, fieldset, legend, form, select, hr, input, br, etc.)
Figure 1: page HTML pour l'encodage de facture
TP1 : Encodage d’une facture (langages Web Frontend) Sidi Ahmed Mahmoudi, Aurélie Cools
Web Technologies (I-ILIA-011) 2021-2022
2. Partie 2 (CSS) : améliorer le style et mise en forme de la page avec le langage CSS. Il est conseillé
d’utiliser un fichier CSS externe, appelé depuis l’entête.
▪ Le fichier CSS devra améliorer les balises : body, select, select :focus, input[type=text],
input[type=textarea], input[type=button], input[type=submit] et input[type=reset].
▪ Le résultat devrait ressembler à cette page :
select {
width: ;
padding:;
border:;
border-radius:;
background-color: ;
color:;
}
body
{
background-color:;
}
input[type=text]
{
width: ;
padding: ;
margin: ;
box-sizing: ;
background-color: ;
color: ;
}
select:focus
{
border: ;
}
...
Figure 2: Page HTML (+ CSS) pour l'encodage de facture
TP1 : Encodage d’une facture (langages Web Frontend) Sidi Ahmed Mahmoudi, Aurélie Cools
Web Technologies (I-ILIA-011) 2021-2022
3. Partie 3 (CSS avancé) : (facultative)
- Depuis Moodle, télécharger les codes HTML et CSS correspondants à la solution de la
problématique ci-dessus « TP1 Partie 3 : CSS Avancé » (intégrant des nominations de classes en
vue de faciliter le passage vers une nouvelle mise en forme).
- Tester et afficher votre page HTML.
- Améliorer encore plus le style et mise en forme de cette page HTML avec le langage CSS en
mettant en forme les balises et classes suivantes :
▪ .header : entête
▪ .topnav : top navigation bar
▪ .topnav a : top navigation links
▪ .topnav a:hover : top navigation links (effet lors du passage de la souris)
▪ column.side : pour donner une taille à la colonne : informations fournisseur
▪ column.middle : pour donner une taille à la colonne : Formulaire
▪ Etc.
Le résultat devrait ressembler à cette page :
Remarque : Les TP2 et TP3 (JavaScript + JQuery) seront réalisé à partir du même exemple.
Figure 3 : Nouvelle page HTML (+ CSS) pour l'encodage de facture
1
/
3
100%