Sortie mathématique au Louvre
La numération mésopotamienne
Une tablette astrologique
Tablette d'inverses
L'heptagone régulier
Les frises
Pavages du plan
Sphère céleste
Symétrie du cercle et de l'hexagone
Exemples de fichiers html et css pour faire l'exposé à partir de
https://replit.com
:
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. <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
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
.