une correction du tp4
This commit is contained in:
parent
76d7e6f925
commit
6692425602
80
R1.02/tp/tp4/correction/pantheon.html
Normal file
80
R1.02/tp/tp4/correction/pantheon.html
Normal 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
132
R1.02/tp/tp4/correction/style.css
Normal 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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user