tp4
This commit is contained in:
parent
e53f464564
commit
4d8de6bb20
56
R1.02/tp/tp4/README.md
Normal file
56
R1.02/tp/tp4/README.md
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
# TP CSS - mise en page d'un site
|
||||||
|
|
||||||
|
> Vous pouvez utiliser l'inspecteur dans les outils développeur pour modifier du code CSS directement dans le navigateur.
|
||||||
|
|
||||||
|
> Vous pouvez utiliser [des aides](https://developer.mozilla.org/fr/docs/Web/CSS/Reference) pour trouver les propriétés CSS.
|
||||||
|
|
||||||
|
> Un peu d'aide pour les [grilles css](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) et [css tricks](https://css-tricks.com/snippets/css/complete-guide-grid/).
|
||||||
|
|
||||||
|
> Un peu d'aide pour les [flexbox](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) et [css tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
|
||||||
|
|
||||||
|
> Une vidéo si vous voulez utiliser les css grid [css grid](https://www.youtube.com/watch?v=KOvGeFUHAC0).
|
||||||
|
|
||||||
|
## Exercice
|
||||||
|
|
||||||
|
On veut réaliser un site qui regroupe des personnes importantes de divers domaines, pour obtenir la présentation suivante. Nous allons écrire l'HTML, puis réaliser progressivement les CSS correspondantes.
|
||||||
|
|
||||||
|
<style>img{display:block;margin:auto;}</style>
|
||||||
|
|
||||||
|
|
||||||
|
1. ~~Écrire l'HTML nécessaire pour coder cette page (sans utiliser de tableau). On se limitera à deux informaticiens.~~
|
||||||
|
Si vous êtes en retard sur les tp, vous pouvez récupérer une version [html](src/pantheon.html).
|
||||||
|
|
||||||
|
> La page fait 960px de large [pour votre culture](https://webdevdesigner.com/q/why-width-960px-88380/)
|
||||||
|
>
|
||||||
|
> Les photos:
|
||||||
|
> - http://upload.wikimedia.org/wikipedia/commons/e/e6/Dennis_Ritchie.jpg
|
||||||
|
> - http://upload.wikimedia.org/wikipedia/commons/7/71/Linus_Torvalds_cropped.jpeg
|
||||||
|
> - http://upload.wikimedia.org/wikipedia/commons/7/79/Blaise_pascal.jpg
|
||||||
|
> - https://upload.wikimedia.org/wikipedia/commons/1/17/Alan_Turing_%281912-1954%29_in_1936_at_Princeton_University.jpg
|
||||||
|
>
|
||||||
|
> Les couleurs :
|
||||||
|
> - bleu : `#08c`.
|
||||||
|
> - gris : `#EFEFEF`.
|
||||||
|
> - ombre : `#555`.
|
||||||
|
|
||||||
|
> On utilisera les balises htm5 d'organisation d'un site : `header`, `nav`, `footer`, `section`, `aside`, etc.
|
||||||
|
> Pour la mise en page des éléments, il y a évidemment plusieurs solutions. `float` et `display:inline-block` peuvent être utiles.
|
||||||
|
> On peut aussi utiliser le module css de boîtes flexibles (flexbox).
|
||||||
|
> On peut utiliser le module css de grilles (grid).
|
||||||
|
|
||||||
|
2. Réaliser la mise en page telle que sur l'image en haut de page. Vous pouvez ajouter des attributs (`class` et `id`) dans votre
|
||||||
|
source html.
|
||||||
|
|
||||||
|
> Commencer de haut en bas et de gauche à droite. Il faut garder au maximum une logique dans la mise en page et la réaliser étape par étape.
|
||||||
|
> Par exemple :
|
||||||
|
> - mise en page du titre de la page
|
||||||
|
> - mise en page du menu
|
||||||
|
> - mise en page sur 2 colonnes du contenu principal
|
||||||
|
> - mise en page de la colonne de droite
|
||||||
|
> - mise en page du titre de la colonne de gauche
|
||||||
|
> - mise en page des images des personnalités
|
||||||
|
> - mise en page des vignettes
|
||||||
|
> - mise en page du pied de page
|
||||||
|
> - petit correctif pour la mise en page globale
|
||||||
|
|
||||||
|
Bon courage ;)
|
||||||
BIN
R1.02/tp/tp4/img/tp4.png
Normal file
BIN
R1.02/tp/tp4/img/tp4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
82
R1.02/tp/tp4/src/pantheon.html
Normal file
82
R1.02/tp/tp4/src/pantheon.html
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
<!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>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>
|
||||||
|
<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><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><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><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/a/a1/Alan_Turing_Aged_16.jpg">
|
||||||
|
<h3>Alan <br>Turing</h3>
|
||||||
|
<p><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>
|
||||||
|
<a href="mailto:monnerat@u-pec.fr">Envoyer un mail</a>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a href="#">Revenir à la page d'accueil</a>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user