Scribd
Importer
80 vues4 pages

TP1 CSS

Transféré par

yamina ghobni

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.

Droits d'auteur :

© All Rights Reserved
Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
Télécharger au format pdf ou txt

TP1 CSS

Transféré par

yamina ghobni
80 vues4 pages
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.

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é ?

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.

Droits d'auteur :

© All Rights Reserved
Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
Télécharger au format pdf ou txt
80 vues4 pages

TP1 CSS

Transféré par

yamina ghobni
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.

Droits d'auteur :

© All Rights Reserved
Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
Télécharger au format pdf ou txt
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