Scribd
Importer
128 vues4 pages

tp4 HTML

Ce document décrit les étapes pour créer des éléments de section et un formulaire dans une page web. Il explique comment ajouter un header, footer, navigation, sections et articles, et comment structurer le contenu. La deuxième partie décrit la création d'un formulaire avec différents champs comme le nom, date de naissance, adresse et numéro de téléphone.

Transféré par

القرآن الكريم
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
128 vues4 pages

tp4 HTML

Ce document décrit les étapes pour créer des éléments de section et un formulaire dans une page web. Il explique comment ajouter un header, footer, navigation, sections et articles, et comment structurer le contenu. La deuxième partie décrit la création d'un formulaire avec différents champs comme le nom, date de naissance, adresse et numéro de téléphone.

Transféré par

القرآن الكريم
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 4

Institut Supérieur d’Informatique et de Multimédia de Sfax

Matière : Web Statique 1


Auditoire : P-PIIM A-U : 2023-2024
TP n° 4 : Eléments de section et Formulaire
Enseignante responsable : Chamkha Nadia

Remarque : Dans la partition D : ou bien E : de votre ordinateur, vous avez déjà créé un dossier
nommé Web1. Dans ce répertoire, créer un sous-répertoire nommé TP4. Vous travaillerez dans ce
répertoire tout au long du TP4 et ne pas hésiter à faire des sauvegardes de son contenu sur une clé
USB ou l’envoyer par mail.

Le but de ce TP est :
 Utilisation des éléments de section de page
 Maitriser les formulaires

Partie 1 : Eléments de section

Le but de cette partie est de créer et d’ajouter des éléments de section à fin d’améliorer la
présentation des informations duTP3 (Ex+Ex2) comme suit :

1
1. Fusionner les pages du TP3 et enregistrer le fichier sous le nom TP4.html
2. Changer <body> comme suit : <body style="background-color: #A8A8AF;width:1200px;
margin: 0 auto;">
3. La mise en page va se faire avec 5 éléments principaux : <header>, <footer>, <nav>,
<section>, <article> et <aside>.

Header : Concerne l’entête du document.


3.1. Placer le titre entre les balises <header> ….</header>.
3.2. On va remplacer la balise de l’image (<img src="isimsf.jpg" alt="isims"
title="isim-Sfax" width ="1000" height ="300"/>) par un code CSS.
Donc, dans la balise <head>, intégrer le code CSS suivant:
<head>
...
<style>
...
header {
background-image: url("isimsf.jpg");
width: 100%;
height: 250px;
}
</style>
</head>

Section qui peut regrouper un élément nav et un élément article


 nav : Concerne la partie navigation (c-à-d les liens de la partie sommaire).
3.3. Placer tout le sommaire entre balises <nav>……</nav>.
3.4. Ajouter le code CSS suivant entre <style>……</style> pour mettre en valeur
l'élément nav.
nav {
background-color: silver;
border-radius: 10px;
width: 400px;
height: 250px;
float:left;
position: relative;
margin:20px 20px 20px 20px;
}
 article : Concerne le paragraphe qui définit l’ISIMS.
3.5. On va placer ce paragraphe entre balises <article>………</article>.

2
3.6. Ajouter une classe art1 dans le code CSS et l’utiliser dans la balise article ;
 Dans la balise <style> ajouter :
.art1{
width:700px;
height:250px;
background-color:olive;
border-radius: 10px;
float:left;position: relative;
padding-left: 10px;
padding-right: 10px;
margin:20px 20px 20px 20px;
font: italic 1.2em "Fira Sans", serif;
}
 Dans la balise <article>, appeler la classe art1 : <article class="art1">

Une autre section qui contient les listes de définitions : Formation, Personnel,
Références et Liens externes.
3.7. Ajouter <section style="position:relative;float:left;margin:20px 20px
20px 20px;border-radius:10px;">

aside : Pour le tableau « Département »


3.8. Ajouter <aside></aside> pour regrouper le tableau département avec son titre

footer : section de conclusion


3.9. Ajouter <footer></footer> à la fin du document.
3.10. Entre balise <footer> ……</footer> ajouter :
[email protected]|Contact:[email protected]
3.11. Ajouter aussi le code CSS suivant :
<footer style="background-color:gray; height:25px;text-align:center">

4. Insérer l’image bouton.gif après le tableau département et avant </aside>. Cette image
forme un lien vers la page formulaire : formulaire.html qu’on va la créer et la développer
dans la partie 2.

3
Partie 2 : Formulaire

On va créer le formulaire qui sert à saisir les données de l’étudiant pour s’inscrire.

Pour ce faire on va suivre les étapes suivantes :

1. Mettre en place le pourtour du formulaire à l’aide de la balise <fieldset> ; le texte : « Vos


données personnelles » du cadre s’obtient grâce à la balise <legend>. La cible (action) du
formulaire sera "destination.html".
2. Ajouter les champs nom (type text), prénom (type text) et le champ date de naissance
(type date).
3. Ajouter le champ lieu de naissance (balises select). La liste déroulante devra contenir les
valeurs Sfax, Gabes, Bizerte, et Tunis.
4. Ajouter le champ adresse postale (balise textarea). La zone de texte fait 2 lignes et 30
colonnes. La syntaxe de textarea est la suivante : <textarea rows="..."
cols="...">texte par défaut</textarea>
5. Ajouter le champ code postal (type text).
6. Ajouter les champs adresse électronique et page personnelle (types email).
7. Ajouter le champ téléphone portable (type tel).
8. Ajouter le champ civilité (type radio) ; les balises nécessaires seront entourées de balises
fieldset afin d’obtenir l’aspect visuel du cadre.
9. Ajouter un bouton de soumission (type=submit) et un bouton de réinitialisation
(type=reset).

Vous aimerez peut-être aussi