Scribd
Upload
14 views

CSS Introduction

The document outlines an upcoming training course on web development and multimedia that will take place on October 23rd and last 4 hours. It includes 2 hours of introduction to CSS and 2 hours of HTML and CSS evaluation exercises. It then provides the code for 3 exercises - a shopping website, repeating the shopping website code with additional styles, and an HTML resume page with styles.

Uploaded by

Yazid Smaal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

CSS Introduction

The document outlines an upcoming training course on web development and multimedia that will take place on October 23rd and last 4 hours. It includes 2 hours of introduction to CSS and 2 hours of HTML and CSS evaluation exercises. It then provides the code for 3 exercises - a shopping website, repeating the shopping website code with additional styles, and an HTML resume page with styles.

Uploaded by

Yazid Smaal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

22/10, 22:06

23 octobre 2023
Spécialité : développeur web et multimédia
Module : Méthodologie de conception et
développement des applications web
Durée : 4h
Cours : 2h Introduction au CSS
Évaluation : 2h HTML et CSS

Exercices 1

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Shopping Online</title>
<style>
body {
font-family: Arial, sans-serif;
22/10, 22:06

background-color: #f9f9f9;
padding: 20px;
}

h1 {
text-align: center;
margin-bottom: 30px;
}

.product {
display: flex;
align-items: center;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}

.product img {
width: 150px;
margin-right: 10px;
}
22/10, 22:06

.product .details {
flex-grow: 1;
}

table {
width: 100%;
margin-bottom: 20px;
}

table th,
table td {
padding: 10px;
text-align: left;
}

table th {
background-color: #f1f1f1;
}

.events {
margin-bottom: 20px;
}
22/10, 22:06

.events h2 {
margin-bottom: 10px;
}

form {
margin-bottom: 20px;
}

form input,
form button {
margin-bottom: 10px;
}

footer {
text-align: center;
margin-top: 50px;
color: #666;
}

</style>
</head>
22/10, 22:06

<body>
<h1>Shopping Online</h1>

<div>
<h2>Products</h2>

<div class="product">
<img src="cosmetic1.jpg" alt="Cosmetic 1">
<div class="details">
<h3>Product 1</h3>
<p>Price: $20</p>
</div>
</div>

<div class="product">
<img src="cosmetic2.jpg" alt="Cosmetic 2">
<div class="details">
<h3>Product 2</h3>
<p>Price: $25</p>
</div>
</div>
22/10, 22:06

<div class="product">
<img src="cosmetic3.jpg" alt="Cosmetic 3">
<div class="details">
<h3>Product 3</h3>
<p>Price: $30</p>
</div>
</div>
</div>

<h2>Best-selling Products</h2>

<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Product 1</td>
<td>$20</td>
</tr>
<tr>
22/10, 22:06

<td>Product 2</td>
<td>$25</td>
</tr>
<tr>
<td>Product 3</td>
<td>$30</td>
</tr>
</table>

<div class="events">
<h2>Events</h2>
<p>Stay tuned for our upcoming events and
discounts!</p>
</div>

<h2>Subscribe to our Newsletter</h2>

<form>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<button type="submit">Subscribe</button>
</form>
22/10, 22:06

<footer>
&copy; Madame Smaâl - All rights reserved.
</footer>
</body>

</html>

Exercices 2

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Shopping Online</title>
<style>
body {
font-family: Arial, sans-serif;
22/10, 22:06

background-color: #f9f9f9;
padding: 20px;
}

h1 {
text-align: center;
margin-bottom: 30px;
}

.product {
display: flex;
align-items: center;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}

.product img {
width: 150px;
margin-right: 10px;
}
22/10, 22:06

.product .details {
flex-grow: 1;
}

table {
width: 100%;
margin-bottom: 20px;
}

table th,
table td {
padding: 10px;
text-align: left;
}

table th {
background-color: #f1f1f1;
}

.events {
margin-bottom: 20px;
}
22/10, 22:06

.events h2 {
margin-bottom: 10px;
}

form {
margin-bottom: 20px;
}

form input,
form button {
margin-bottom: 10px;
}

footer {
text-align: center;
margin-top: 50px;
color: #666;
}

</style>
</head>
22/10, 22:06

<body>
<h1>Shopping Online</h1>

<div>
<h2>Products</h2>

<div class="product">
<img src="cosmetic1.jpg" alt="Cosmetic 1">
<div class="details">
<h3>Product 1</h3>
<p>Price: $20</p>
</div>
</div>

<div class="product">
<img src="cosmetic2.jpg" alt="Cosmetic 2">
<div class="details">
<h3>Product 2</h3>
<p>Price: $25</p>
</div>
</div>
22/10, 22:06

<div class="product">
<img src="cosmetic3.jpg" alt="Cosmetic 3">
<div class="details">
<h3>Product 3</h3>
<p>Price: $30</p>
</div>
</div>
</div>

<h2>Best-selling Products</h2>

<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Product 1</td>
<td>$20</td>
</tr>
<tr>
22/10, 22:06

<td>Product 2</td>
<td>$25</td>
</tr>
<tr>
<td>Product 3</td>
<td>$30</td>
</tr>
</table>

<div class="events">
<h2>Events</h2>
<p>Stay tuned for our upcoming events and
discounts!</p>
</div>

<h2>Subscribe to our Newsletter</h2>

<form>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<button type="submit">Subscribe</button>
</form>
22/10, 22:06

<footer>
&copy; Madame Smaâl - All rights reserved.
</footer>
</body>

</html>

Exercice 3

<!DOCTYPE html>
<html>

<head>
<title>Mon CV</title>
<style>
/* Styles CSS */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
22/10, 22:06

h1 {
color: #333;
text-align: center;
}

h2 {
color: #555;
margin-top: 30px;
}

p{
color: #777;
margin-bottom: 10px;
}

ul {
list-style-type: disc;
}

footer {
font-size: 12px;
22/10, 22:06

color: #999;
text-align: center;
margin-top: 50px;
}
</style>
</head>

<body>
<h1>Mon CV</h1>

<h2>Informations personnelles</h2>
<p>Nom : Votre Nom</p>
<p>Adresse : Votre Adresse</p>
<p>Téléphone : Votre Téléphone</p>
<p>Email : Votre Email</p>

<h2>Expérience professionnelle</h2>
<p>Entreprise A - Poste, Date de début - Date de
fin</p>
<p>Responsabilités et réalisations dans cette
entreprise.</p>
22/10, 22:06

<h2>Formation</h2>
<p>Diplôme A - Nom de l'établissement, Date de
début - Date de fin</p>
<p>Description de la formation.</p>

<h2>Compétences</h2>
<ul>
<li>Compétence 1</li>
<li>Compétence 2</li>
<li>Compétence 3</li>
</ul>

<h2>Projets</h2>
<ul>
<li>Projet 1 - Description du projet</li>
<li>Projet 2 - Description du projet</li>
<li>Projet 3 - Description du projet</li>
</ul>

<footer>
&copy; Copyright développeur web et
multimédia
22/10, 22:06

<script>
document.write(new Date().getFullYear())
</script>
- Tout droit réservé.
</footer>
</body>

</html>

You might also like