Scribd Logo
Importer

Bienvenue sur Scribd !

  • tp4 HTML

    Transféré par

    القرآن الكريم
    18 vues4 pages

    Titre original

    tp4_html (1)

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    18 vues4 pages

    tp4 HTML

    Transféré par

    القرآن الكريم

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 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 :
    copyright@exemple.org-2021|Contact:nom_prenom@gmail.com
    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