Labo1
Exercice 1
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exercice 1</title>
<meta charset="utf-8">
</head>
<body>
<h1>Lorem Ipsum</h1>
<h2>Paragraphe 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat ultrices sodales. Donec a ex magna.
In nibh nunc, malesuada eget semper vitae, venenatis sed nunc. Vestibulum luctus tincidunt elementum. Cras
tristique fermentum eros sed condimentum. Nunc lacinia nec enim et rutrum. Ut porta tempus libero, ac vulputate
arcu tristique eget. Cras porttitor auctor metus sit amet fermentum. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Etiam vitae odio faucibus, consectetur est sit amet, convallis dui.
</p>
<h2>Paragraphe 2</h2>
<p>
Ut sed ornare felis, vitae vehicula lorem. Duis egestas massa sit amet dolor placerat imperdiet. Nam auctor quam
vitae justo maximus suscipit. Maecenas blandit massa sit amet mauris pretium semper. Morbi at tellus vulputate,
iaculis est ac, maximus arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Donec mollis, dui at vulputate molestie, ipsum lectus tincidunt metus, vitae lobortis turpis justo vitae
ipsum. Maecenas cursus egestas mauris, vel consequat purus cursus a. Vestibulum tempus massa scelerisque,
venenatis odio at, tristique tellus. Maecenas porta tortor a arcu ultricies facilisis. Vestibulum elementum
ultrices sem a ultrices. Phasellus porttitor fermentum dolor et dapibus. Ut consectetur, justo vitae facilisis
ultrices, tellus neque molestie enim, ac blandit dolor massa sit amet lacus. Fusce eu lacinia diam.
</p>
<h2>Paragraphe 3</h2>
<p>
Vestibulum feugiat elementum turpis. Nam ut ante lobortis, pulvinar nulla sit amet, semper dui. Quisque a turpis
sed arcu malesuada vulputate vel in magna. Sed accumsan metus ut nunc luctus pretium. Vestibulum quis finibus
nunc, ut blandit ligula. Pellentesque arcu eros, sodales a mi vel, egestas pharetra urna. Aliquam sit amet nulla
quis purus hendrerit lacinia vel nec est. Curabitur at lectus quam. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia curae; Sed lectus est, maximus ut odio eget, rhoncus dapibus odio. Donec
sit amet nisl mauris.
</p>
<a href="www.google.com">Google</a>
<br>
<img alt="Lorem Ipsum" src="./lorem.png">
</body>
</html>Exercice 2
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exercice 1</title>
<meta charset="utf-8">
</head>
<body>
<h1>Lorem Ipsum</h1>
<h2>Paragraphe 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat ultrices sodales. Donec a ex magna.
In nibh nunc, malesuada eget semper vitae, venenatis sed nunc. Vestibulum luctus tincidunt elementum. Cras
tristique fermentum eros sed condimentum. Nunc lacinia nec enim et rutrum. Ut porta tempus libero, ac vulputate
arcu tristique eget. Cras porttitor auctor metus sit amet fermentum. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Etiam vitae odio faucibus, consectetur est sit amet, convallis dui.
</p>
<h2>Paragraphe 2</h2>
<p>
Ut sed ornare felis, vitae vehicula lorem. Duis egestas massa sit amet dolor placerat imperdiet. Nam auctor quam
vitae justo maximus suscipit. Maecenas blandit massa sit amet mauris pretium semper. Morbi at tellus vulputate,
iaculis est ac, maximus arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Donec mollis, dui at vulputate molestie, ipsum lectus tincidunt metus, vitae lobortis turpis justo vitae
ipsum. Maecenas cursus egestas mauris, vel consequat purus cursus a. Vestibulum tempus massa scelerisque,
venenatis odio at, tristique tellus. Maecenas porta tortor a arcu ultricies facilisis. Vestibulum elementum
ultrices sem a ultrices. Phasellus porttitor fermentum dolor et dapibus. Ut consectetur, justo vitae facilisis
ultrices, tellus neque molestie enim, ac blandit dolor massa sit amet lacus. Fusce eu lacinia diam.
</p>
<h2>Paragraphe 3</h2>
<p>
Vestibulum feugiat elementum turpis. Nam ut ante lobortis, pulvinar nulla sit amet, semper dui. Quisque a turpis
sed arcu malesuada vulputate vel in magna. Sed accumsan metus ut nunc luctus pretium. Vestibulum quis finibus
nunc, ut blandit ligula. Pellentesque arcu eros, sodales a mi vel, egestas pharetra urna. Aliquam sit amet nulla
quis purus hendrerit lacinia vel nec est. Curabitur at lectus quam. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia curae; Sed lectus est, maximus ut odio eget, rhoncus dapibus odio. Donec
sit amet nisl mauris.
</p>
<h3>Liste ordonnee</h3>
<ol>
<li>Premier element</li>
<li>Deuxième element</li>
<li>Troisième element</li>
<li>...</li>
</ol>
<h3>Et maintenant, une liste non ordonnee :</h3>
<ul>
<li>Un element</li>
<li>Autre element</li>
<li>Encore un autre element</li>
<li>...</li>
</ul>
</body>
</html>Exercice 3
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exercice 3</title>
<meta charset="utf8">
</head>
<body>
<a href="lab1-3-1.html"><img src="./galerie1.png" alt="gal1" width="100"></a>
<a href="lab1-3-2.html"><img src="./galerie2.png" alt="gal1" width="100"></a>
<a href="lab1-3-3.html"><img src="./galerie3.png" alt="gal1" width="100"></a>
<br>
<a href="lab1-3-4.html"><img src="./galerie4.png" alt="gal1" width="100"></a>
<a href="lab1-3-5.html"><img src="./galerie5.png" alt="gal1" width="100"></a>
<a href="lab1-3-6.html"><img src="./galerie6.png" alt="gal1" width="100"></a>
</body>
</html>Et le fichier lab1-3-1.html :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exercice 3</title>
<meta charset="utf8">
</head>
<body>
<img src="./galerie1.png" alt="gal1">
Image 1
</body>
</html>Exercice 4
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exercice 4</title>
<meta charset="utf8">
</head>
<body>
<img src="./galerie1.png" alt="gal1" width="100">
<button>galerie1</button>
<br>
<img src="./galerie2.png" alt="gal2" width="100">
<button>galerie2</button>
<br>
<img src="./galerie3.png" alt="gal3" width="100">
<button>galerie3</button>
<br>
<img src="./galerie4.png" alt="gal4" width="100">
<button>galerie4</button>
<br>
<img src="./galerie5.png" alt="gal5" width="100">
<button>galerie5</button>
<br>
<img src="./galerie6.png" alt="gal6" width="100">
<button>galerie6</button>
</body>
</html>Exercice 5
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exercice 4</title>
<meta charset="utf8">
</head>
<body>
<h6>Ordonnee</h6>
<ol>
<li>Premier element</li>
<li>Premier element</li>
<li>Premier element</li>
</ol>
<h6>Non Ordonnee</h6>
<ul>
<li>Premier element</li>
<li>Premier element</li>
<li>Premier element</li>
</ul>
<h6>Menu (semantique)</h6>
<menu>
<li>Premier element</li>
<li>Premier element</li>
<li>Premier element</li>
</menu>
<h6>Definitions</h6>
<dl>
<dt>Cafe</dt>
<dd>- boisson chaude noire</dd>
<dt>Lait</dt>
<dd>- boisson froide blanche</dd>
</dl>
</body>
</html>