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
Solution
1
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>