Tp1: Html5/Css3: (Corrigé)

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>
</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>
<p>Some text..</p>
</article>
</section>
<section class="right">
<article>
<h2>About Me</h2>
<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>© 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 name="viewport" content="width=device-width, initial-scale=1.0">
<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€</td>
</tr>
<tr>
<th scope="row">Pastèque</th>
<td>taiwan</td>
<td>17€</td>
3
</tr>
<tr>
<th scope="row">Papaye</th>
<td>Romanie</td>
<td>1.3€</td>
</tr>
<tr>
<th scope="row">Melon</th>
<td>France</td>
<td>12€</td>
</tr>
<tr>
<th scope="row">Pomme</th>
<td>Tunis</td>
<td>3€</td>
</tr>
</table>
</body>
</html>
@font-face {
}
* {
}
body {
}
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">
<title>Responsive Formulaire</title>
</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>
<input type="text" placeholder="Your name and surname.." required>
</div>
</div>
<div class="row">
<label for="">Bithday</label>
</div>
<input type="date" max="2099-01-01" required>
</div>
</div>
<div class="row">
<label for="">Website</label>
</div>
<input type="url" placeholder="www.example.com" required>
</div>
</div>
<div class="row">
5
<label for="">Courriel</label>
</div>
<input type="email" placeholder="name@example.com" required>
</div>
</div>
<div class="row">
<label for="">Subject</label>
</div>
<textarea placeholder="Write something.." style="height:200px"
required></textarea>
</div>
</div>
<div class="row">
<label for="">Country</label>
</div>
<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">
<label for="">Nights</label>
</div>
<input type="number" name="a" placeholder="number of nights" min="1"
max="30" required>
</div>
</div>
<div class="row">
<label for=""></label>
</div>
6
<input type="text" value="0" name="b" placeholder="price per night"
required>
</div>
</div>
<div class="row">
<label for="">Total</label>
</div>
<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 {
}
* {
}
body {
}
.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>
<style>
* {
}
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>
<style>
* {
}
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>
<title>Responsive Formulaire</title>
</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

Tp1: Html5/Css3: (Corrigé)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tp1: Html5/Css3: (Corrigé)

Uploaded by

Copyright:

Available Formats

TP1 : HTML5/CSS3

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

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

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

You might also like