348 lines
5.8 KiB
Plaintext
348 lines
5.8 KiB
Plaintext
----- TP03 -----
|
|
|
|
1.
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
|
<title>CEastwood</title>
|
|
<style>
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
}
|
|
|
|
li {
|
|
wid
|
|
th: 500px;
|
|
padding-block-end: 50px;
|
|
margin-bottom: 5px;
|
|
padding-left: 10px;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
li:nth-child(even) {
|
|
color: white;
|
|
font-style: normal;
|
|
background-color: grey;
|
|
}
|
|
|
|
li:nth-child(odd) {
|
|
background-color: lightgrey;
|
|
font-style: italic;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Mes films préférés de Clint Eastwood</h1>
|
|
<ul>
|
|
<li>Gran Torino (2008)</li>
|
|
<li>Impitoyable (1992)</li>
|
|
<li>Mystic River (2003)</li>
|
|
<li>Sur la route de Madison (1995)</li>
|
|
<li>Lettres d'Iwo Jima (2006)</li>
|
|
<li>L'Échange (2008)</li>
|
|
<li>Josey Wales hors-la-loi (1976)</li>
|
|
<li>Breezy (1973)</li>
|
|
</ul>
|
|
</body>
|
|
</html>
|
|
|
|
2.
|
|
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Exercice 2</title>
|
|
<style>
|
|
main {
|
|
position: relative;
|
|
width: 300px;
|
|
height: 300px;
|
|
border-style: solid;
|
|
background-color: yellow;
|
|
color: red;
|
|
border-width: 6px;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
header {
|
|
position: relative;
|
|
width:75px;
|
|
height:75px;
|
|
left: 60px;
|
|
top: 80px;
|
|
background-color: red;
|
|
border-radius:50px;
|
|
}
|
|
|
|
section {
|
|
position: relative;
|
|
width:75px;
|
|
height:75px;
|
|
left: 165px;
|
|
top: 7px;
|
|
background-color: red;
|
|
border-radius:50px;
|
|
}
|
|
|
|
aside {
|
|
position: relative;
|
|
width:200px;
|
|
height:50px;
|
|
left: 50px;
|
|
top: 50px;
|
|
background-color: red;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header></header>
|
|
<section></section>
|
|
<aside></aside>
|
|
<footer></footer>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
3.
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Exercice 3</title>
|
|
<style>
|
|
|
|
ul {
|
|
width: 400px;
|
|
list-style-type: none;
|
|
border: solid;
|
|
border-width: 1px;
|
|
}
|
|
|
|
li {
|
|
position: relative;
|
|
display: inline;
|
|
}
|
|
|
|
img {
|
|
margin-top: 3px;
|
|
width: 100px;
|
|
height: 50px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<ul>
|
|
<li><a href="https://developer.mozilla.org/docs/Web/HTML"><img src="html.png"></a></li>
|
|
<li><a href="https://developer.mozilla.org/docs/Web/CSS"><img src="css.png"></a></li>
|
|
<li><a href="https://developer.mozilla.org/docs/Web/Javascript"><img src="javascript.png"></a></li>
|
|
</ul>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
4.
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
|
<link rel="stylesheet" href="style4.css">
|
|
<title>Document</title>
|
|
<style>
|
|
|
|
@media screen and (max-width:640px) {
|
|
nav {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
text-align: center;
|
|
padding:0;
|
|
}
|
|
li {
|
|
list-style-type: none;
|
|
list-style-position: inside;
|
|
display: inline-block;
|
|
margin-right: 2em;
|
|
font-size : 2em;
|
|
}
|
|
li:last-child{
|
|
margin-right:0;
|
|
|
|
}
|
|
article {
|
|
text-align: justify;
|
|
border : 1px solid grey;
|
|
padding : 1em;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="/">Home</a></li>
|
|
<li><a href="/">About</a></li>
|
|
<li><a href="/">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<article>
|
|
<header>
|
|
<h1>Article title 1</h1>
|
|
</header>
|
|
<section>
|
|
<img src="https://picsum.photos/300/200" alt="">
|
|
<p>lorem ipsum</p>
|
|
</section>
|
|
</article>
|
|
<article>
|
|
<header>
|
|
<h1>Article title 2</h1>
|
|
</header>
|
|
<section>
|
|
<img src="https://picsum.photos/300/200" alt="">
|
|
<p>lorem ipsum</p>
|
|
</section>
|
|
</article>
|
|
<article>
|
|
<header>
|
|
<h1>Article title 3</h1>
|
|
</header>
|
|
<section>
|
|
<img src="https://picsum.photos/300/200" alt="">
|
|
<p>lorem ipsum</p>
|
|
</section>
|
|
</article>
|
|
<article>
|
|
<header>
|
|
<h1>Article title 3</h1>
|
|
</header>
|
|
<section>
|
|
<img src="https://picsum.photos/300/200" alt="">
|
|
<p>lorem ipsum</p>
|
|
</section>
|
|
</article>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
5.
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
|
<link rel="stylesheet" href="style4.css">
|
|
<title>Document</title>
|
|
<style>
|
|
|
|
@media screen and (max-width:640px) {
|
|
nav {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
text-align: center;
|
|
padding:0;
|
|
}
|
|
li {
|
|
list-style-type: none;
|
|
list-style-position: inside;
|
|
display: inline-block;
|
|
margin-right: 2em;
|
|
font-size : 2em;
|
|
}
|
|
li:last-child{
|
|
margin-right:0;
|
|
|
|
}
|
|
article {
|
|
border:solid;
|
|
border-size:1px;
|
|
border-color: grey;
|
|
margin: 40px;
|
|
float: left;
|
|
text-align: justify;
|
|
border : 1px solid grey;
|
|
padding : 1em;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="/">Home</a></li>
|
|
<li><a href="/">About</a></li>
|
|
<li><a href="/">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<article>
|
|
<header>
|
|
<h1>Article title 1</h1>
|
|
</header>
|
|
<section>
|
|
<img src="https://picsum.photos/300/200" alt="">
|
|
<p>lorem ipsum</p>
|
|
</section>
|
|
</article>
|
|
<article>
|
|
<header>
|
|
<h1>Article title 2</h1>
|
|
</header>
|
|
<section>
|
|
<img src="https://picsum.photos/300/200" alt="">
|
|
<p>lorem ipsum</p>
|
|
</section>
|
|
</article>
|
|
<article>
|
|
<header>
|
|
<h1>Article title 3</h1>
|
|
</header>
|
|
<section>
|
|
<img src="https://picsum.photos/300/200" alt="">
|
|
<p>lorem ipsum</p>
|
|
</section>
|
|
</article>
|
|
<article>
|
|
<header>
|
|
<h1>Article title 3</h1>
|
|
</header>
|
|
<section>
|
|
<img src="https://picsum.photos/300/200" alt="">
|
|
<p>lorem ipsum</p>
|
|
</section>
|
|
</article>
|
|
</main>
|
|
</body>
|
|
</html>
|