Posted on by

HTML : Pratiquer la mise en forme en CSS.

Objectif

L’objectif de ce TP est de créer une page web HTML simple et d’appliquer différents styles CSS pour la mettre en forme.

Instructions

1- Créez un nouveau fichier HTML et ajoutez les éléments suivants :

  • un en-tête (<header>) avec un titre (<h1>) et un menu de navigation (<nav>) contenant des liens vers différentes sections de la page.
  • une section principale (<main>) contenant du texte, des images et des liens.
  • un pied de page (<footer>) contenant des informations sur le site web.

Voici un exemple de structure HTML de base pour votre page web :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ma page web</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Titre de la page</h1>
        <nav>
            <ul>
                <li><a href="#section1">Section 1</a></li>
                <li><a href="#section2">Section 2</a></li>
                <li><a href="#section3">Section 3</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="section1">
            <h2>Section 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada leo vel libero sagittis ultricies. Sed vehicula metus sed nulla venenatis, eu tincidunt eros pretium. Nulla facilisi. Vivamus tristique justo a hendrerit tincidunt. Suspendisse non ipsum sed erat pellentesque commodo id eu nisl. Fusce vitae elit ac elit ultrices pharetra. Donec eu enim commodo, sagittis orci in, suscipit libero.</p>
            <img src="image1.jpg" alt="Image 1">
            <a href="#">Lien vers une page</a>
        </section>
        <section id="section2">
            <h2>Section 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada leo vel libero sagittis ultricies. Sed vehicula metus sed nulla venenatis, eu tincidunt eros pretium. Nulla facilisi. Vivamus tristique justo a hendrerit tincidunt. Suspendisse non ipsum sed erat pellentesque commodo id eu nisl. Fusce vitae elit ac elit ultrices pharetra. Donec eu enim commodo, sagittis orci in, suscipit libero.</p>
            <img src="image2.jpg" alt="Image 2">
            <a href="#">Lien vers une page</a>
        </section>
        <section id="section3">
            <h2>Section 3</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada leo vel libero sagittis ultricies. Sed vehicula metus sed nulla venenatis, eu tincidunt eros pretium. Nulla facilisi. Vivamus tristique justo a hendrerit tincidunt. Suspendisse non ipsum sed erat pellentesque commodo id eu nisl. Fusce vitae elit ac elit ultricespharetra. Donec eu enim commodo, sagittis orci in, suscipit libero.</p>
<img src="image3.jpg" alt="Image 3">
<a href="#">Lien vers une page</a>
</section>
</main>
<footer>
<p>Ceci est le pied de page</p>
</footer>

</body>
</html>
  1. Créez un fichier CSS séparé et ajoutez des styles pour mettre en forme la page. Vous pouvez commencer par ajouter une couleur d’arrière-plan, une couleur de texte et une police pour tout le document.
body { background-color: #f8f8f8; color: #333; font-family: Arial, sans-serif; }
  1. Ajoutez des styles CSS pour mettre en forme l’en-tête (<header>) et le menu de navigation (<nav>). Vous pouvez utiliser des marges et des rembourrages pour espacer les éléments, ainsi que des bordures pour ajouter une séparation entre les éléments.
header {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    padding: 10px;
}

nav {
    margin-top: 10px;
}

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

nav li {
    margin-right: 10px;
}

nav a {
    text-decoration: none;
    color: #333;
    padding: 5px;
    border: 1px solid #ccc;
}

nav a:hover {
    background-color: #f2f2f2;
}
  • Ajoutez des styles CSS pour mettre en forme la section principale (<main>). Vous pouvez utiliser des marges et des rembourrages pour espacer les éléments, ainsi que des ombres pour ajouter de la profondeur. 
    main {
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    margin-top: 10px;
}

section {
    margin-bottom: 20px;
}

h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

p {
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

a {
    color: #337ab7;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}
    • Ajoutez des styles CSS pour mettre en forme le pied de page (<footer>). Vous pouvez utiliser des marges et des rembourrages pour espacer les éléments, ainsi que des bordures pour ajouter une séparation entre les éléments.
    footer {
    background-color: #f8f8f8;
    border-top: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
}

footer p {
    margin: 0;
}
    • Testez votre page web en modifiant les propriétés CSS et en vérifiant l’apparence de la page dans différents navigateurs et tailles d’écran.

    Conclusion

    Ce TP vous a montré comment utiliser CSS pour mettre en forme une page web HTML. Vous avez appris comment appliquer des styles à différents éléments HTML pour modifier leur apparence, et comment utiliser des marges, des rembourrages, des bordures et des ombres.

    Published by Fadili