Défi

Nous allons construire un site consacré au maître du contrepoint rigoureux, le compositeur Johann Sebastian Bach.

Question

Le site devra comporter les éléments suivants :

  • Un portrait de Bach (johann-sebastian-bach.jpg)

  • Une vidéo montrant un orgue d'église, le type d'instrument sur lequel Bach composait (orgue.mp4)

  • Un extrait sonore d'une composition (jesu-meine-freude-BWV-227.mp3)

  • Un PDF qui présente la partition du motet BWV 277 - Jesu, meine Freude (jesu-meine-freude-BWV-227.pdf)

  • Une iframe vers l'article Wikipédia du compositeur

orgue.mp4 [mp4]
jesu-meine-freude-BWV-227.mp3 [mp3]
jesu-meine-freude-BWV-227.pdf [pdf]

Indice

Solution

1
<!DOCTYPE html>
2
<html lang="fr">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
<title>Johann Sebastian Bach</title>
7
</head>
8
<body>
9
<header>
10
<img
11
src="johann-sebastian-bach.jpg"
12
alt="Johann Sebastian Bach portrait" />
13
<h1>Johann Sebastian Bach (1685 - 1750)</h1>
14
<h2>Le virtuose du contrepoint rigoureux</h2>
15
</header>
16
<section>
17
<h3>Bienvenue sur ce site réalisé pour parler du célèbre compositeur de Leipzig.</h3>
18
<p>À écouter pendant votre navigation, le motet <em>Jesu meine freude</em> exécuté par l'Orchestre Symphonique de Prague.</p>
19
<audio controls>
20
<source src="jesu-meine-freude-BWV-227.mp3" type="audio/mp3">
21
Il semble y avoir un problème avec votre navigateur, nous ne parvenons pas à lire l'extrait audio.
22
</audio>
23
24
<div>
25
<h3>Voici la partition du motet</h3>
26
<object width="900" height="506" data="jesu-meine-freude-BWV-227.pdf" type="application/pdf"></object>
27
</div>
28
29
<div>
30
<h3>Si vous souhaitez en apprendre un peu plus sur la vie de Bach, voici l'article Wikipedia !</h3>
31
<iframe width="900" height="506" src="https://fr.wikipedia.org/wiki/Jean-S%C3%A9bastien_Bach"></iframe>
32
</div>
33
34
<div>
35
<h3>Le métier de Bach</h3>
36
<p>Saviez-vous que pour payer ses factures, Bach jouait et réalisait des expertises d'orgues dans les églises ?</p>
37
<p>Des orgues comme celui-ci</p>
38
<video controls>
39
<source src="orgue.mp4" type="video/mp4">
40
Il semble y avoir un problème avec votre navigateur, nous ne parvenons pas à lire l'extrait vidéo.
41
</video>
42
</div>
43
</section>
44
</body>
45
</html>