Scribd
Importer
107 vues4 pages

TP1 CSS

Ce document décrit un travail pratique pour créer une mise en page de site web simple avec HTML et CSS. Le document contient les codes HTML et CSS nécessaires pour structurer le contenu, la navigation, le contenu principal et la mise en forme.

Transféré par

yamina ghobni
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
107 vues4 pages

TP1 CSS

Ce document décrit un travail pratique pour créer une mise en page de site web simple avec HTML et CSS. Le document contient les codes HTML et CSS nécessaires pour structurer le contenu, la navigation, le contenu principal et la mise en forme.

Transféré par

yamina ghobni
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 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