Université Frères Mentouri Constantine 1 M2 RT

Faculté des Sciences de la technologie TP Technologies du Web

Département d’électronique Année : 2024-2025

TP 03 : HTML & CSS - PARTIE 02.

Objectifs du TP
À la fin de ce TP, l'étudiant disposera des outils et des compétences nécessaires pour créer un formulaire
HTML avec un formatage spécifique en utilisant une feuille de style CSS externe (feuilles de style en
cascade). Les objectifs spécifiques sont :

▪ Utiliser des éléments HTML de base avec certains attributs pour créer un formulaire HTML simple.
▪ Utiliser le CSS pour décrire la présentation du document HTML dans un document séparé.
▪ Apprendre la structure de base des règles CSS et comprendre comment les navigateurs les interprètent.
Travail Demandé
Les formulaires HTML sont une partie fondamentale du développement web, permettant aux utilisateurs
de saisir des données et d'interagir avec un site. Ils sont utilisés à diverses fins, telles que la connexion
utilisateur, les barres de recherche, les formulaires d'inscription, les formulaires de feedback, et bien plus
encore. Dans ce TP, nous allons créer un formulaire HTML étape par étape en utilisant différents tags
HTML et en le formatant à l'aide de règles CSS. Ce TP comprend les étapes suivantes qui couvrent les
bases de la production d'une page web.

Étape 01 (Création des documents) :

1. Créez un dossier, en tant que dossier racine de votre site web, sur le bureau de Windows, nommé
« [votre nom complet] ».

2. À l'intérieur de ce dossier, créez un autre dossier nommé "images".

3. Ouvrez l'éditeur Notepad++ (ou Sublime) et créez un nouveau document HTML (formulaire
.html), nommé "MonFormulaire", dans votre dossier racine.

4. Configurez la structure de base de ce document HTML, où la langue est l'anglais (0,25 pts).

5. L'en-tête de la page web doit contenir le titre "MonFormulaire" pour la page, un lien vers le
fichier CSS et des éléments meta pour spécifier le codage des caractères, les auteurs et les mots-
clés suivants (0,25 pts) :

o Formulaires HTML
o HTML de base
o Formatage CSS

Page 1|5
Université Frères Mentouri Constantine 1 M2 RT
Faculté des Sciences de la technologie TP Technologies du Web
Département d’électronique Année : 2024-2025

Étape 02 (Formulaire HTML) : Saisissez le contenu ci-dessous dans votre document

"MonFormulaire", dans la section body.

1. Ajoutez un titre de niveau 1 avec le texte "Formulaire de collecte de données de voyage" .

2. Ajoutez une ligne horizontale pour séparer le titre du contenu du formulaire.

3. Ajoutez un paragraphe avec le texte [Informations requises : l'utilisateur doit fournir les
informations pour ce champ afin de soumettre le formulaire avec succès]. Appliquez un style en
ligne à ce paragraphe pour définir la couleur du texte en rouge, la marge gauche à 450 pixels, et
le style de police en italique.

4. Créez un formulaire HTML simple avec les champs décrits dans la figure ci-dessous.

o Remarque : utilisez l'attribut required pour les éléments nécessitant des informations
afin de spécifier que ces champs de saisie particuliers doivent être remplis par
l'utilisateur avant que le formulaire puisse être soumis.

5. L'attribut target du formulaire doit référer à un nouvel onglet, la méthode HTTP est post, et le
formulaire doit envoyer les données directement à votre adresse e-mail.

6. Le mode de paiement doit inclure les options suivantes {Carte de crédit, PayPal, Virement
bancaire ou espèces}.

Étape 03 (Document CSS) : Dans cette étape, créez un fichier séparé nommé “style.css” (avec une
extension .css) contenant les règles CSS suivantes.

1. Ajoutez une règle CSS pour définir une couleur d’arrière-plan différente pour la page web et
appliquez la police Verdana à tout le texte dans le corps de votre document HTML.

2. Ajoutez une règle CSS pour définir la taille de police du titre de niveau 1 à 52 pixels, la famille
de police à Arial ou une police sans-serif similaire, la couleur de police à #333 et le poids de la
police en gras. De plus, alignez le texte au centre, et ajoutez une marge inférieure de 20 pixels.

3. Ajoutez une règle CSS pour définir la bordure de <hr> comme une ligne pleine de 1 pixel avec
une couleur gris clair.

4. Ajoutez une règle CSS pour définir la largeur maximale du formulaire à 800 pixels, les marges
supérieures et inférieures à 0, et centrez automatiquement le formulaire horizontalement sur la
page en utilisant la valeur "auto" pour les marges gauche et droite.

Page 2|5
Université Frères Mentouri Constantine 1 M2 RT
Faculté des Sciences de la technologie TP Technologies du Web
Département d’électronique Année : 2024-2025

5. Ajoutez une règle CSS pour définir une marge inférieure de 10 pixels pour les éléments label,
input et textarea dans le formulaire, en veillant à ce qu’ils occupent chacun 95 % de la largeur
du formulaire.

6. Ajoutez une règle CSS pour définir le remplissage à l’intérieur des éléments input et textarea à
10 pixels, la taille de la police à 16 pixels, avec une bordure de 1 pixel de large, pleine et de
couleur #ccc. Donnez également à ces éléments des coins arrondis avec un rayon de 4 pixels.

7. Ajoutez une règle CSS pour définir la couleur de fond du bouton de soumission sur une nuance
de bleu (#007bff), la couleur du texte en blanc (#fff), supprimez toute bordure autour du bouton
de soumission et définissez le remplissage à l’intérieur du bouton (10 pixels d’espace au-dessus
et au-dessous du texte, et 20 pixels d’espace à gauche et à droite du texte). La règle doit
également définir la taille de la police du texte à l’intérieur du bouton à 18 pixels, arrondir les
coins du bouton de 4 pixels et changer le curseur de la souris en pointeur lorsqu'il survole le
bouton.

8. Appliquez le même style au bouton de réinitialisation, mais avec une couleur de fond différente.

9. Créez un sélecteur de classe pour définir la police sur Arial ou une alternative sans-serif, la taille
de la police à 16 pixels, la couleur du texte en gris foncé (#333333), la couleur de fond en gris
clair (#F0F0F0), les remplissages à 10 pixels, les bordures à une bordure pleine de 2 pixels et
des coins arrondis avec un rayon de 4 pixels. Appliquez ensuite cette classe aux éléments legend
dans le formulaire.

10. Vous pouvez ajouter des règles CSS supplémentaires (vos propres règles CSS) pour améliorer
le formatage de votre formulaire, avec des commentaires expliquant chaque commande de
formatage dans vos règles.

Remarque : En CSS, vous pouvez ajouter un commentaire en utilisant /* au début et */ à la fin du

commentaire, comme dans les exemples ci-dessous :

p{

font-size: 52px; /* Définir la taille de la police à 36 pixels */

color: #333; /* Définir la couleur de la police sur une teinte de gris foncé */

margin-bottom: 20px; /* Ajouter une marge en bas */

Page 3|5
Université Frères Mentouri Constantine 1 M2 RT
Faculté des Sciences de la technologie TP Technologies du Web
Département d’électronique Année : 2024-2025

Remarque : Ce travail doit être réalisé en binôme. Les pages web doivent être soumises pendant la
session de laboratoire au format ZIP. Le dossier racine doit porter votre nom complet.

Page 4|5
Université Frères Mentouri Constantine 1 M2 RT
Faculté des Sciences de la technologie TP Technologies du Web
Département d’électronique Année : 2024-2025

"Tous les navigateurs modernes prennent en charge les 140 noms de couleurs suivants. La figure
suivante montre les 140 noms de couleurs en tant que couleurs de fond accompagnés de leur code Hex."

Page 5|5