Scribd
Upload
71 views

Tp1: Html5/Css3: (Corrigé)

The document contains the code for 4 HTML/CSS exercises: 1. A basic page layout with header, navigation, article sections, and footer. 2. A table displaying fruit prices from different origins. 3. A responsive hotel booking form with input fields for guest details. 4. Code to draw shapes on a canvas element, including filling a rectangle for the background and clearing a small rectangle.

Uploaded by

Yosra Yarmani
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
71 views

Tp1: Html5/Css3: (Corrigé)

The document contains the code for 4 HTML/CSS exercises: 1. A basic page layout with header, navigation, article sections, and footer. 2. A table displaying fruit prices from different origins. 3. A responsive hotel booking form with input fields for guest details. 4. Code to draw shapes on a canvas element, including filling a rectangle for the background and clearing a small rectangle.

Uploaded by

Yosra Yarmani
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/ 13

TP1 : HTML5/CSS3

(Corrigé)

EXERCICE1

<!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="style.css">
<title>Exercice1</title>
</head>
<body>
<div id="container">
<header>
<h1>Header</h1>
</header>
<nav>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>
<div class="row">
<section class="left">
<article>
<h2>TITLE HEADING</h2>
<h5>Title description, Janvier 01, 2022</h5>
<div class="img" style="height:100px;">Image</div>
<p>Some text..</p>
</article>
<article>
<h2>TITLE HEADING</h2>
<h5>Title description, Janvier 01, 2022</h5>
<div class="img" style="height:100px;">Image</div>
<p>Some text..</p>
</article>
</section>
<section class="right">
<article>
<h2>About Me</h2>
<div class="img" style="height:60px;">Image</div>
<p>Some text..</p>
</article>
<article>
<h2>Popular Post</h2>
<div class="img">Image</div><br>
<div class="img">Image</div><br>

1
<div class="img">Image</div>
</article>
</section>
</div>
<footer>
<h5>&copy; L2CS</h5>
</footer>
</div>
</body>
</html>

@font-face {
font-family:"Raleway" ;
src:url("../font/Raleway-Regular.ttf")
}
* {
box-sizing: border-box;
}
body {
font-family: "Raleway";
}
#container {
padding: 0;
margin: 0;
border: 3px gray solid;
}
header,footer {
background-color: grey;
color: #fff;
text-align: center;
}
header {
padding: 40px;
}
footer {
padding: 10px;
}
/*Menu*/
nav {
display: flex;
justify-content: center;
}
nav a {
color: #000;
padding: 10px 20px;
text-decoration: none;
margin: 5px;
}
nav>a:hover {
cursor: pointer;
font-weight: bold;
border-bottom: 1px solid #000;

2
}
.row {
display: flex;
}
section.left {
flex: 70%;
}
section.right {
flex: 30%;
}
article {
background-color: white;
padding: 15px;
}
article>div.img {
background-color: #aaa;
width: 100%;
padding: 10px;
}
@media screen and (max-width: 768px) and (max-width: 450px){
.row , nav
{
flex-direction:column;
}
}
EXERCICE2

<!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="style.css">
<title>Exercice2</title>
</head>
<body>
<table summary="Le prix imaginaire de certaines fruits sur le marché">
<caption>Prix des fruits </caption>
<tr>
<td></td>
<th scope="col">Origine</th>
<th scope="col">Prix</th>
</tr>
<tr>
<th scope="row">Kiwi</th>
<td>France</td>
<td>30&euro;</td>
</tr>
<tr>
<th scope="row">Pastèque</th>
<td>taiwan</td>
<td>17&euro;</td>

3
</tr>
<tr>
<th scope="row">Papaye</th>
<td>Romanie</td>
<td>1.3&euro;</td>
</tr>
<tr>
<th scope="row">Melon</th>
<td>France</td>
<td>12&euro;</td>
</tr>
<tr>
<th scope="row">Pomme</th>
<td>Tunis</td>
<td>3&euro;</td>
</tr>
</table>
</body>
</html>

@font-face {
font-family:"Raleway" ;
src:url("../font/Raleway-Regular.ttf")
}
* {
box-sizing: border-box;
}
body {
font-family: "Raleway";
}
table {
width:25em;
border-collapse:separate;
border-spacing:1px;
caption-side:bottom;
}
caption {
color:#555;
font-style:italic;
padding:10px;
border-bottom: 1px solid #ccc;
}
td,th {
padding:6px 12px;
}
th {
text-align:left;
}
tr:nth-child(odd) {
background:#eee;
}
tr:nth-child(even) {

4
background:#ddd;
}
table td:empty {
background:#fff;
}
table tr+tr:hover {
background:#777;
color:white;
cursor: pointer;
}
EXERCICE3

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Responsive Formulaire</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form class="myform" oninput="result.value=parseInt(a.value)* parseFloat(b.value)">
<div class="row">
<h1><span></span>Reservation Hôtel</h1>
<hr>
</div>
<div class="row">
<div class="col-25">
<label for="">Fullname</label>
</div>
<div class="col-75">
<input type="text" placeholder="Your name and surname.." required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="">Bithday</label>
</div>
<div class="col-75">
<input type="date" max="2099-01-01" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="">Website</label>
</div>
<div class="col-75">
<input type="url" placeholder="www.example.com" required>
</div>
</div>
<div class="row">

5
<div class="col-25">
<label for="">Courriel</label>
</div>
<div class="col-75">
<input type="email" placeholder="[email protected]" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="">Subject</label>
</div>
<div class="col-75">
<textarea placeholder="Write something.." style="height:200px"
required></textarea>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="">Country</label>
</div>
<div class="col-75">
<select id="">
<optgroup label="Afrique">
<option>Tunisia</option>
<option>Morocco</option>
<option>Algeria</option>
</optgroup>
<optgroup label="Europe">
<option>France</option>
<option>Belgium</option>
<option>Italy</option>
</optgroup>
<optgroup label="America">
<option>Panama</option>
<option>Cuba</option>
<option>Mexico</option>
</optgroup>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="">Nights</label>
</div>
<div class="col-75">
<input type="number" name="a" placeholder="number of nights" min="1"
max="30" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for=""></label>
</div>

6
<div class="col-75">
<input type="text" value="0" name="b" placeholder="price per night"
required>
</div>
</div>

<div class="row">
<div class="col-25">
<label for="">Total</label>
</div>
<div class="col-75">
<output name="result">0</output>
</div>
</div>

<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</div>
</body>
</html>

@font-face {
font-family:"Raleway" ;
src:url("../font/Raleway-Regular.ttf")
}
* {
box-sizing: border-box;
}
body {
font-family: "Raleway";
}
.container {
width:80%;
border-radius: 5px;
background-color: #f2f2f2;
padding: 16px;
margin:10px auto;
}
.row::after {
content: "";
display: table;
clear: both;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;

7
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
h1 {
font-variant: small-caps;
margin: 10px 0px 10px 0px;
}
h1 span {
display: inline-block;
width: 20px;
height: 20px;
border: 5px solid red;
border-radius: 50%;
margin-right: 10px;
}
hr {
border: 4px solid #fff;
}
label {
padding: 12px 12px 12px 0; /*TRBL*/
display: inline-block;
}
input[type=text], select,
textarea,input[type=date],input[type=url],input[type=email],input[type=number],output {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: none;
display:block;
outline:none;
}
output {
background: #fff;
}
button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.7;
}
button:hover {
opacity:1;
}
.cancelbtn {
background-color: #f44336;

8
}
.cancelbtn, .signupbtn {
float: left;
width: 50%;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
@media screen and (max-width: 450px) , (max-width: 800px) {
.col-25, .col-75 ,.cancelbtn, .signupbtn{
width: 100%;
margin-top: 0;
}
}
EXERCICE4

<canvas id="dessin" width="400" height="400" ></canvas>


<script>
var canvas = document.getElementById('dessin');
var ctx = canvas.getContext('2d');
// Fond
ctx.fillStyle = "red";
ctx.fillRect(0,0,400,400);
ctx.clearRect(150,50,100,300);
ctx.clearRect(50,150,300,100);
</script>

<canvas id="dessin" width="400" height="400" style="outline:2px solid;"></canvas>


<script>
var canvas = document.getElementById('dessin');
var ctx = canvas.getContext('2d');
// Fond
ctx.fillStyle = "olivedrab";
ctx.fillRect(50,50,300,300);
// Bouche
ctx.fillStyle = "pink";
ctx.fillRect(100,250,200,50);
// Yeux
ctx.fillStyle = "powderblue";
ctx.fillRect(100,100,50,50);
ctx.fillRect(250,100,50,50);
</script>

<canvas id="dessin" width="200" height="200" style="outline:2px solid;"></canvas>


<script>
var monCanvas = document.getElementById('dessin');
var ctx = monCanvas.getContext('2d');
ctx.lineWidth='5';

9
ctx.strokeStyle = "coral";
ctx.fillStyle = "bisque";

ctx.beginPath();
ctx.arc(100,100,100,0,2 * Math.PI);
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.fillStyle="#c00";
ctx.arc(75,75,10,0,2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(125,75,10,0,2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.strokeStyle = "red";
ctx.arc(100,100,50,0,Math.PI);
ctx.stroke();
</script>
EXERCICE5

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
font-size: 17px;
}
.container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.container img {vertical-align: middle;}
.container .content {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0); /* Fallback color */
background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
color: #f1f1f1;
width: 100%;
padding: 20px;
}
</style>
</head>

10
<body>
<div class="container">
<img src="notebook.jpg" alt="Notebook" style="width:100%;">
<div class="content">
<h1>Heading</h1>
<p>Some Text ...</p>
</div>
</div>
</body>
</html>
EXERCICE6

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover {
background: #ddd;
color: black;

11
}
</style>
</head>
<body>
<video autoplay loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div class="content">
<h1>Heading</h1>
<p>Some Text ...</p>
<button id="myBtn" onclick="myFunction()">Pause</button>
</div>
<script>
var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}
</script>
</body>
</html>

EXERCICE7

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Responsive Formulaire</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slider">
<div class="slider-content">
<img src="image-1.jpg"><img src="image-2.jpg"><img src="image-3.jpg">
</div>
</div>
</body>
</html>

* {box-sizing: border-box;}
.slider {
width: 900px;

12
height: 400px;
overflow: hidden;
margin:40px auto;
}
.slider-content {
width: 2700px;
height: 400px;
position: relative;
animation-name: slider;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes slider {
0% {
left: 0px;
}
20% {
left: 0px;
}
25% {
left: -900px;
}
70% {
left: -900px;
}
75% {
left: -1800px;
}
100% {
left: -1800px;
}
}

13

You might also like