Scribd Logo
Importer

Bienvenue sur Scribd !

  • TP Structure

    Transféré par

    Unepersonne Inconnue
    14 vues2 pages

    Titre original

    tp structure

    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é
    14 vues2 pages

    TP Structure

    Transféré par

    Unepersonne Inconnue

    Droits d'auteur :

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

    Travaux Pratiques: Structuration de Page HTML et Modèle de Boîte CSS

    Objectif
    L'objectif de ce TP est double :

     Mettre en pratique la structuration d'une page HTML en utilisant les balises sémantiques.
     Appliquer les principes du modèle de boîte CSS pour styler et positionner les éléments.

    Matériel Nécessaire
     Un éditeur de texte (Visual Studio Code, Sublime Text, etc.)
     Un navigateur web

    Partie 1: Structuration HTML


    1. Créez un nouveau fichier HTML.
     Incluez le doctype, <html>, <head>, et <body>.

    2. Structurez la Page.
     Ajoutez un header avec un titre et une navigation.
     Insérez un main contenant plusieurs sections avec des titres et du texte.
     Placez un aside pour du contenu secondaire.
     Terminez par un footer avec des informations de contact ou des liens.

    3. Enregistrez et testez la page.


     Ouvrez le fichier dans un navigateur pour vérifier la structure.

    Partie 2: Style CSS et Modèle de Boîte

    1. Créez un fichier CSS et liez-le à votre HTML.


    2. Style du header, nav, et footer.
     Utilisez background-color, padding, et margin.
     Assurez-vous que le nav est bien aligné.
    3. Styling des sections et aside.
     Donnez une width, margin, et padding.
     Ajoutez des bordures pour mieux les distinguer.
    4. Centrez les éléments principaux.
     Utilisez margin: auto; et définissez une width appropriée.
    5. Testez et Ajustez.
     Visualisez votre page dans le navigateur.
     Ajustez les styles si nécessaire pour un meilleur rendu.

    Consignes Complémentaires
     Commentez votre code pour clarifier chaque section.
     Expérimentez avec différentes valeurs de margin, padding, width, et height.
     Testez la responsivité en redimensionnant la fenêtre du navigateur.

    Rendu
     Soumettez les fichiers HTML et CSS.
     Préparez une brève présentation expliquant vos choix de structuration et de style.

    Pour Aller Plus Loin


    Intégrez des images ou des icônes pour enrichir visuellement votre page.

    Ce TP est conçu pour renforcer la compréhension pratique des concepts de structuration HTML et de styling
    CSS, essentiels pour tout développeur web en herbe.

    Vous aimerez peut-être aussi