monnerat/web_2024
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

une correction du tp4

Browse Source
This commit is contained in:
Denis Monnerat 2024-12-17 08:54:43 +01:00
parent 76d7e6f925
commit 6692425602
2 changed files with 212 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
R1.02/tp/tp4/correction/pantheon.html Normal file
View File

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1,witdh=device-width">
<title>TP mise en page avec le css</title>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<header>
<h2 class="titre">Mon Panthéon</h2>
<nav>
<ul>
<li><a href="#">Informaticiens</a></li>
<li><a href="#">Mathématiciens</a></li>
<li><a href="#">Sportifs</a></li>
<li><a href="#">Musiciens</a></li>
</ul>
</nav>
</header>
<section class="informaticien">
<h2>Les informaticiens</h2>
<article>
<img alt="Ritchie" src="http://upload.wikimedia.org/wikipedia/commons/e/e6/Dennis_Ritchie.jpg">
<h3>Dennis <br>Ritchie</h3>
<p class='date'><small>9 septembre 1941 - 12 octobre 2011</small></p><p>Nationalité : américaine</p>
</article>
<article>
<img alt="linus torvalds" src="http://upload.wikimedia.org/wikipedia/commons/7/71/Linus_Torvalds_cropped.jpeg">
<h3>Linus <br>Torvalds</h3><p class='date'><small>28 décembre 1969 - </small></p>
<p>Nationalité : finlandaise</p>
</article>
<article>
<img alt="Pascal" src="http://upload.wikimedia.org/wikipedia/commons/7/79/Blaise_pascal.jpg">
<h3>Blaise <br>Pascal</h3>
<p class='date'><small>19 juin 1623 - 19 août 1662</small></p>
<p>Nationalité : française</p>
</article>
<article>
<img alt="turing" src="https://upload.wikimedia.org/wikipedia/commons/e/ea/Alan_Turing_%281912-1954%29_in_1936_at_Princeton_University_%28b%26w%29.jpg">
<h3>Alan <br>Turing</h3><p class='date'><small>23 juin 1912 - 7 juin 1954</small></p>
<p>Nationalité : britannique</p>
</article>
</section>
<aside>
<p>
<em>Dennis MacAlistair Ritchie</em>, né le 9 septembre 1941 à Bronxville dans
l'État de New York et trouvé mort le 12 octobre 20111 à Berkeley Heights dans le New Jersey, est
un des pionniers de l'informatique moderne, inventeur du langage C et
codéveloppeur de Unix. Il est parfois désigné par dmr, son adresse électronique aux Laboratoires Bell.
</p>
<p>
<em>Linus Benedict Torvalds</em>, né le 28 décembre 1969 à Helsinki en Finlande, est un informaticien
américano-finlandais1. Il est connu pour avoir créé en 1991 le noyau Linux
dont il continue à diriger le développement. Il en est considéré comme le « dictateur bienveillant ».
</p>
<p>
<em>Blaise Pascal</em>, né le 19 juin 1623 à Clairmont (aujourd'hui Clermont-Ferrand) en
Auvergne et mort le 19 août 1662 à Paris, est un mathématicien, physicien, inventeur, philosophe,
moraliste et théologien français. Il invente, à 19 ans, la calculatrice mécanique.
</p>
<p>
<em>Alan Mathison Turing </em>est un mathématicien, cryptologue et informaticien britannique. Il
est l'auteur de l'article fondateur de la science informatique1 qui
allait donner le coup d'envoi à la création des calculateurs universels programmables (ordinateurs). Il
y présente sa machine de Turing et les concepts modernes de programmation et de programme.
</p>
</aside>
<footer>
<p class="gauche">
<a href="mailto:monnerat@u-pec.fr">Envoyer un mail</a>
</p>
<p class="droite">
<a href="#">Revenir à la page d'accueil</a>
</p>
</footer>
</body>
</html>

132
R1.02/tp/tp4/correction/style.css Normal file
View File

@ -0,0 +1,132 @@
html{
margin:0px;
padding:0px;
height:100vh;
}
body
{
display:grid;
min-height:100vh;
max-width:80%;
margin:auto;
font-family: Helvetica, Arial,sans-serif;
font-size:1rem;
height:100%;
margin-bottom:0px;
grid-template-columns : 2fr 1fr;
grid-template-rows : auto 1fr auto;
/* align-items:stretch;*/
}
header {
grid-column: 1 / span 2;
}
section h2{
flex-basis:100%;
text-align:center;
}
h2.titre
{
text-align:center;
background-color: #eeeeee;
padding:1rem;
margin-top:2rem;
margin-bottom:2rem;
}
nav {
margin:3rem;
margin-bottom:3.5rem;
}
nav ul
{
list-style-type: none;
padding : 5px;
text-align:center;
font-size:1.2rem;
display:flex;
justify-content:center;
}
nav ul li
{
margin-left :1rem ;
margin-right:1rem;
}
footer a,nav ul a
{
color: #3B81BE;
text-decoration:none;
border-bottom: 1px dashed #666666;
}
em{
font-weight:bold;
}
.informaticien article
{
flex:1 40%;
padding:1em;
border : 1px solid #eeeeee;
margin : 5px;
text-align:left;
}
.informaticien article img
{
float :right;
width : 125px;
height:125px;
padding:10px;
box-shadow: 10px 10px 5px #656565;
}
.date
{
font-size : 1rem;
}
section.informaticien
{
display:flex;
justify-content:space-around;
flex-wrap:wrap;
align-self:stretch;
grid-column : 1 ;
}
aside
{
padding-left:1.5rem;
border-left : 1px solid #eeeeee;
margin:0px;
grid-column : 2;
/*align-self:center;*/
}
aside p
{
font-size:0.9rem;
text-align:justify;
}
aside p::before
{
content:">>";
color: #3B81BE;
}
footer
{
grid-column : span 2;
padding-top:10px;
border-top:1px solid #eeeeee;
margin:0px;
display:flex;
justify-content:space-between;
}