Scribd Logo
Importer

Bienvenue sur Scribd !

  • TP1 CSS

    Transféré par

    yamina ghobni
    30 vues4 pages

    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é
    30 vues4 pages

    TP1 CSS

    Transféré par

    yamina ghobni

    Droits d'auteur :

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

    Travail Pratique 1- CSS « Mise en Page Simple »

    Créez un fichier HTML (index.html) :

    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Mise en Page Simple</title>
    </head>
    <body>
    <div class="container">
    <header>
    <h1>Mon Site Web</h1>
    </header>

    <nav>
    <ul>
    <li><a href="#">Accueil</a></li>
    <li><a href="#">À Propos</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </nav>

    <section class="main-content">
    <article>
    <h2>Article 1</h2>
    <p>Ceci est le premier article de mon site.</p>
    </article>

    <article>
    <h2>Article 2</h2>
    <p>Voici le deuxième article de mon site.</p>
    </article>
    </section>

    <aside>
    <h2>À la Une</h2>
    <p>Informations supplémentaires ou publicités peuvent être affichées ici.</p>
    </aside>

    <footer>
    <p>&copy; 2023 Mon Site Web. Tous droits réservés.</p>
    </footer>
    </div>
    </body>
    </html>
    Créez un fichier CSS (styles.css) :
    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    }

    .container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    header {
    text-align: center;
    padding: 20px 0;
    }

    nav {
    background-color: #333;
    color: #fff;
    padding: 10px;
    }

    nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    }

    nav ul li {
    margin-right: 20px;
    }

    nav a {
    text-decoration: none;
    color: #fff;
    }

    .main-content {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    }

    article {
    width: 60%;
    }
    aside {
    width: 30%;
    background-color: #eee;
    padding: 10px;
    }

    footer {
    text-align: center;
    margin-top: 20px;
    }
    Ce TP vous offre une mise en page simple avec une barre de navigation, un contenu principal,
    une section latérale (sidebar), et un pied de page. Vous pouvez personnaliser les styles selon
    vos préférences et expérimenter avec différentes propriétés CSS pour créer une mise en page
    qui vous convient.

    Vous aimerez peut-être aussi