Sortie au musée des Arts et Métiers

À partir de sarmate.

À partir de https://replit.com.

Exemples de fichiers html et css :

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Le titre de la page</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <div id="ban">
  Le titre dans la bannière
  </div>

<div id="corps">
  La partie dans laquelle on va écrire et inclure les photos.

<h1>Paragraphe 1</h1>
  <p>
  Le texte du premier paragraphe, blabla bla blabla. Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.
  <br />
  Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.

Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.

<br />

Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.
  </p>

<h1>Paragraphe 2</h1>
  <p>
  Le texte du deuxième paragraphe, blabla bla blabla. Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.
  <br />
  Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.

Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.
  </p>

<h1>Paragraphe 3</h1>
  <p>
  Le texte du troisième paragraphe, blabla bla blabla. Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.
  <br />
  Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.

</p>

</div>

</body>
</html>

​x
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Le titre de la page</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <div id="ban">
  Le titre dans la bannière
  </div>
​
  <div id="corps">
  La partie dans laquelle on va écrire et inclure les photos.
​
  <h1>Paragraphe 1</h1>
  <p>
  Le texte du premier paragraphe, blabla bla blabla. Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.
  <br />
  Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.
​
  <img src="samothrace.jpg" id="img01" />
​
  Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.
​
  <br />
​
  Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.
  </p>
​
  <h1>Paragraphe 2</h1>
  <p>
  Le texte du deuxième paragraphe, blabla bla blabla. Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.
  <br />
  Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.
​
  <img src="pythagore.png" id="img02" />
​
  Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.
  </p>
​
  <h1>Paragraphe 3</h1>
  <p>
  Le texte du troisième paragraphe, blabla bla blabla. Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.
  <br />
  Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.
​
​
  </p>
​
  </div>
​
​
  </div>
​
​
<!-- Pour ceux qui auraient besoin d'écrire des formules mathématiques------------------------------------------------------------------------>
​
​
​
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js" ></script>
<script>
renderMathInElement(
    document.body,
    {
        delimiters: [
            {left: "$$", right: "$$", display: true},
            {left: "$", right: "$", display: false}
        ]
    }
);
</script>
​
​
  </body>
</html>
​

style.css

xxxxxxxxxx
 
body{
  background-image: url('bg_01.jpg');
  background-repeat: no-repeat;
  background-position: fixed;
  background-size: cover;
  background-color: black;
}
​
#ban{
  position: fixed;
  top: 0px;
  left: 20px;
  right: 20px;
  height: 60px;
  line-height: 60px;
  color: white;
  text-align: center;
  font-size: 140%;
  background: rgba(0,0,0,1);
  
}
​
#corps{
    position: fixed;
    top: 70px;
    bottom: 30px;
    left: 20px;
    right:20px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 5px;
    overflow-y: auto;
}
​
#img01{
  width: 200px;
  display: block;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 20px;
  border-radius: 20px;
}
​
#img02{
  width: 300px;
  display: block;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 20px;
  border-radius: 20px;
}
​

Le résultat.