[PROGRAMMATION WEB 2] TI1
TP1– Partie 3 : HTML5
Exercice 1 :
L’objectif de cet exercice est de tester les nouveaux éléments de saisie (input) de HTML5.
fieldset
date
time
datetime
month
week
number
range
tel
url
color
search
« formulaire.html »
1. Créez la page web « formulaire.html » en vous aidant des « inputs » écrits à droite.
Publicité
2. Créez une page en CSS «style.css » qui permet de modifier l’apparence de la page
«formulaire.html » selon le modèle ci-dessus.
3. Testez cette page dans plusieurs navigateurs. Que remarquez-vous ?
Partie 3 : Utilisation de HTML5
Dans cette partie, nous allons recréer les deux pages de la partie 2 en intégrant quelques
nouveautés de HTML5.
Les pages du site auront l’allure suivante :
ISET DE BIZERTE 2014-2015 | TP1 – Partie 3 – HTML5 1
[PROGRAMMATION WEB 2] TI1
Fig1 : index.html
Fig2 : inscription.html
ISET DE BIZERTE 2014-2015 | TP1 – Partie 3 – HTML5 2
[PROGRAMMATION WEB 2] TI1
La première chose à faire est de distinguer les principaux blocs sur la maquette. Cette fois ci,
nous allons utiliser les nouvelles balises sémantiques de HTML5.
1
3
5
6
Publicité
2
2
4
Fig3 : Maquette du site
1
Balise <header> </header>
2
Balise <nav> </nav>
Balise <a> </a>
3
4
5
6
Balise <a> </a> avec survol
(hover)
Balise <section> </section>
Balise <footer> </footer>
Balise <article> </article>
Balise <header> <header>
Publicité
A l’intérieur de la balise
<article>
Couleur de l’arrière-plan : LightBlue
Couleur du texte : Yellow
Alignement : centré
Marges extérieures: 0px
Marges intérieures : 10px
Flottement à gauche
Largeur : 25%
Couleur : Navy
Affichage : Block
Marges extérieures : 2px
Marges intérieures : 10px
Décoration du texte : none
Texte en Gras
couleur: Orange;
Couleur de l’arrière-plan: White
Flottement à gauche
Largeur : 75%
Publicité
Couleur de l’arrière-plan: #eee
Marges extérieures : 10px
Marges intérieures : 10px
Marges intérieures : 5px
ISET DE BIZERTE 2014-2015 | TP1 – Partie 3 – HTML5 3
[PROGRAMMATION WEB 2] TI1
On vous aidant du tableau ci-dessous :
- Créez deux pages en HTML « index.html » et « inscription.html ».
- Ajoutez dans chaque page les différentes balises selon la maquette de la figure Fig3.
- Créez les feuilles de styles nécessaires vous permettant d’obtenir l’apparence des allures des
figures Fig1 et Fig2.
NB : Vous devez ajouter ou modifier ce qui vous semble nécessaire pour obtenir le
résultat souhaité.
ISET DE BIZERTE 2014-2015 | TP1 – Partie 3 – HTML5 4