forked from monnerat/web_2025
Compare commits
47 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 186b3839f0 | |||
| 9b8aed62a7 | |||
| 0df1e71aeb | |||
| dae058c2d4 | |||
| 657bfa1cba | |||
| 62899046bf | |||
| bd3bd96e15 | |||
| d70e783828 | |||
| be8b700896 | |||
| 3faf918ccc | |||
| f65b0c9155 | |||
| 7270567d8e | |||
| 720901218d | |||
| 6a36d1a457 | |||
| f86c52ff0e | |||
| c5f880e4f9 | |||
| 8951724e20 | |||
| b757e0ae78 | |||
| 9c3a22382f | |||
| 262e763b45 | |||
| 504b4e87ec | |||
| 9710d1a6cf | |||
| 9435b22b2e | |||
| 27e2827b05 | |||
| d5cee8b330 | |||
| fadbcd4e0c | |||
| c63eed3d29 | |||
| 608690826d | |||
| b91e297d36 | |||
| d2995f7848 | |||
| 7fad694f60 | |||
| ca0f63e88f | |||
| 0b182a924f | |||
| e37fb0cf2f | |||
| 0ede3e0e0e | |||
| b2e08e37e7 | |||
| 12eb2aeff6 | |||
| 148696e062 | |||
| f468b0b2e0 | |||
| 37bdfcc48e | |||
| f059288f99 | |||
| 2ccce12589 | |||
| 0ad7edafdf | |||
| 75865cd076 | |||
| 7d81beb8bb | |||
| 68ca62927e | |||
| 96ffe9b4be |
@@ -21,6 +21,8 @@ de site statique sur un serveur et l'ergonomie d'interface.
|
|||||||
| 1 : 03/11 - 07/11 | [WEB-HTML](./cours/html.pdf) | |
|
| 1 : 03/11 - 07/11 | [WEB-HTML](./cours/html.pdf) | |
|
||||||
| 2 : 10/11 - 14/11 | [CSS](./cours/css.pdf) | [tp1 html](./tp/tp1) ([correction](./tp/tp1/correction))|
|
| 2 : 10/11 - 14/11 | [CSS](./cours/css.pdf) | [tp1 html](./tp/tp1) ([correction](./tp/tp1/correction))|
|
||||||
| 3 : 17/11 - 21/11 | [CSS](./cours/css.pdf) | [tp2 html-css](./tp/tp2) |
|
| 3 : 17/11 - 21/11 | [CSS](./cours/css.pdf) | [tp2 html-css](./tp/tp2) |
|
||||||
|
| 4 : 24/11 - 28/11 | [JS](./cours/js.pdf) | [tp3 css](./tp/tp3) |
|
||||||
|
| 5 : 01/12 - 05/12 | [JS](./cours/js.pdf) | [tp4 css](./tp/tp4) |
|
||||||
|
|
||||||
## Serveur http(s) de l'iut
|
## Serveur http(s) de l'iut
|
||||||
|
|
||||||
|
|||||||
BIN
R1.02/ds/2024.pdf
Normal file
BIN
R1.02/ds/2024.pdf
Normal file
Binary file not shown.
76
R1.02/sae/README.md
Normal file
76
R1.02/sae/README.md
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
# SAE S1.05-S1-06
|
||||||
|
> [Groupes](./groupes.md)
|
||||||
|
|
||||||
|
#### Sujet
|
||||||
|
Vous devez coder le site de l'entreprise que vous avez créée (cf partie EGOD/COM).
|
||||||
|
Votre site devra être accessible depuis le serveur http(s) de l'iut `dwarves.iut-fbleau.fr`.
|
||||||
|
|
||||||
|
Il donnera lieu à une note en DEV et en COM. Seront jugés :
|
||||||
|
|
||||||
|
- la technique,
|
||||||
|
- l'ergonomie,
|
||||||
|
- le contenu.
|
||||||
|
|
||||||
|
> Envoyez-moi un mail <a href="mailto:monnerat@u-pec.fr">monnerat@u-pec.fr</a>, avec comme sujet [SAEWEB]
|
||||||
|
> contenant :
|
||||||
|
> - l'url précise de votre site sur le serveur de l'iut.
|
||||||
|
> - l'url de votre dépot git associé, contenant les sources et le rapport demandé.
|
||||||
|
> - tous les noms d'étudiants faisant partie du groupe.
|
||||||
|
|
||||||
|
**Vérifiez [ici](./Groupes.md) que votre mail a été pris en compte.**
|
||||||
|
|
||||||
|
#### Exigences minimales
|
||||||
|
|
||||||
|
Votre site doit :
|
||||||
|
|
||||||
|
- contenir au moins 4 pages, dont une page de contact avec un formulaire.
|
||||||
|
- utiliser les éléments de structuration appropriés.
|
||||||
|
- être validé sur [http://validator.w3.org/](http://validator.w3.org/) (tous les sites seront vérifiés avec cet outil de validation).
|
||||||
|
- utiliser un format d'image adapté: png, jpg, svg.
|
||||||
|
- s'adapter (significativement) au format ordinateur de bureau, **et** téléphone portable (mode portrait).
|
||||||
|
à l'aide des media-queries/container-queries.
|
||||||
|
- proposer un mode "eco-responsable" ([RGESN](https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/))
|
||||||
|
- contenir les CVs des créateurs de l'entreprise pouvant être imprimer à partir de la **version HTML** (media print).
|
||||||
|
- utiliser des feuilles de styles structurées (cf cours).
|
||||||
|
- contenir les mentions légales.
|
||||||
|
- contenir un plan du site.
|
||||||
|
- **bonus** : un rapport d'audit de votre site avec l'outil [Ara](https://ara.numerique.gouv.fr/), conforme au RGAA (référentiel
|
||||||
|
général d'amélioration de l'accessibilité).
|
||||||
|
|
||||||
|
> L'utilisation de **CMS**, **framework** ou d'un **template** est **interdite**.
|
||||||
|
|
||||||
|
> Le plagiat est sanctionné d'un 0.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### Utilisations de librairie JavaScript
|
||||||
|
|
||||||
|
L'utilisation de librairies est autorisée. Il sera demandé en plus du code
|
||||||
|
source et d'une URL fonctionnelle pour validater votre travail, un rapport détaillant:
|
||||||
|
|
||||||
|
- le choix de la(es) librairie(s) : pourquoi avoir utilisé telle librairie ?
|
||||||
|
- la mise en place de la dépendance : comment charge-t-on la librairie JavaScript ?
|
||||||
|
- le fonctionnement de la librairie : comment la librairie interagit avec votre code ?
|
||||||
|
- le lien vers les sources de la librairie
|
||||||
|
|
||||||
|
L'idée de ce rapport est de montrer que vous avez compris (le code et comment la librairie
|
||||||
|
intéragit avec votre page) ce que vous ajouter dans votre projet et surtout que
|
||||||
|
vous savez expliquer les choix que vous faites... C'est ce qu'on vous demandera en entreprise.
|
||||||
|
|
||||||
|
> L'absence de rapport sera sanctionné.
|
||||||
|
|
||||||
|
#### Conseils
|
||||||
|
|
||||||
|
- Respecter les exigences minimales.
|
||||||
|
- Soigner l'aspect, l'ergonomie, l'accessibilté et la convivialité (look and feel) de votre site.
|
||||||
|
- Le point d'entrée de votre site est **index.html**. Diviser le contenu à l'aide de répertoires (img, css, js, etc.).
|
||||||
|
|
||||||
|
#### Attendus et dates
|
||||||
|
|
||||||
|
Votre travail est à rendre au plus tard le **vendredi 16 janvier**
|
||||||
|
(1 jour de retard : -1 point; 2 jours = 0/20)
|
||||||
|
|
||||||
|
Il vous est demandé :
|
||||||
|
- le site web.
|
||||||
|
- un dépot git avec les sources, et le rapport (si besoin).
|
||||||
|
|
||||||
35
R1.02/sae/groupes.md
Normal file
35
R1.02/sae/groupes.md
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
# Groupes SAÉ
|
||||||
|
- Alves-Le DU Tiago / De Jesus Oliveira Abel / CHABOT Nicolas
|
||||||
|
- Nassim Salah / Adrien Payen / Danoushe Vasante
|
||||||
|
- Roux-Serret Margot / Ji Kejia / Sougoumarane Vijina
|
||||||
|
- Catalin CUGUT / Mohamed Barka / Sayhan Pierre-Louis
|
||||||
|
- Juan Anton-Lemoine / Theo trenier / Mathis Moogin
|
||||||
|
- Julie Picart, Lisa Zouba, Lauren Mawana Braz
|
||||||
|
- Romain OLIVIER / Hugo DICK
|
||||||
|
- GONCALVES DO CARMO Lucas / CHAOUCH Mahdi / BELABED Rayan
|
||||||
|
- Amine ABBAZ / Ildevert NKOUKA
|
||||||
|
- Charlotte Saunier / Maryam Addoun
|
||||||
|
- Mehdy Ouissi / Tomas Blanchard / Mathis Vitard
|
||||||
|
- PINEAU / PASQUAZZO / ETIEVANT
|
||||||
|
- Aelig Bedouet / Alexandre Queudot / Kylian Spor
|
||||||
|
- MERIGOT Antoine / SLIMANI Tajeddine / DUCOURE Ibrahim
|
||||||
|
- GILLET Noa / GUINET Djibril / SALVIA Tim
|
||||||
|
- Anthony LIROT / Dylan SOYER
|
||||||
|
- Emile Ta / Imad Mokhtari / Anthony Millerioux / Johan Garnier
|
||||||
|
- Matéo POUGET / Nathan LAUNAY / Ender PRADAT-DE CAROLIS
|
||||||
|
- Fabien SELON / Michaellah LAHIKOA / Koutoub Khan KADARALY
|
||||||
|
- Clement JACKSON GONZALEZ / Rayane MOUHIB / Dayann Sidiqui
|
||||||
|
- Jossé Maël / Jihad Ghandri / Jdoudi Abderrahmane
|
||||||
|
- Antoine BERNARD / Antoine MERCIER / Mathias PLACIDE CONTRERAS
|
||||||
|
- Amrouchi Youssef / Maël Hamon / Baptiste Lecointre
|
||||||
|
- Bradney LELIEVRE / Arif MOHAMED
|
||||||
|
- Salgeiro da silva / Pelini / Janicot
|
||||||
|
- Kenzo BONNET, Bryan Benhamou, Toni LAURENT
|
||||||
|
- Mohamed Ouissi / Jabrail Mustaev / Talbi Sofiane
|
||||||
|
- Aktas / Gobe / Tafok
|
||||||
|
- CHARRIERE Nicolas / BODOL Mathis / TCHISSAFOU Yann-sulivane
|
||||||
|
- Matie BAMBA
|
||||||
|
- Colombani Loïc / Badio Ousmane
|
||||||
|
- Adrien Jackson-Gonzalez / Gomez / Dimambu-Bola
|
||||||
|
- Fabien SELON / Michaëllah LAHIKOA / Qoutoub Khan KADARALY
|
||||||
|
- Kelyan Pierre-Louis / Jordan Arstil / Matheo Salavin-Moura / Evan Giloppé
|
||||||
@@ -1,5 +1,7 @@
|
|||||||
> Vous trouverez une correction du tp1 [ici](../tp1/correction).
|
> Vous trouverez une correction du tp1 [ici](../tp1/correction).
|
||||||
|
|
||||||
|
> Vous trouverez une correction du tp2 [ici](../tp2/correction).
|
||||||
|
|
||||||
# TP HTML/CSS
|
# TP HTML/CSS
|
||||||
|
|
||||||
- partie 1 : [html](#liens)
|
- partie 1 : [html](#liens)
|
||||||
|
|||||||
105
R1.02/tp/tp2/correction/exercice1.html
Normal file
105
R1.02/tp/tp2/correction/exercice1.html
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Laws of Cartoon Physics</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
width : 960px;
|
||||||
|
margin:auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>
|
||||||
|
<cite>Laws of Cartoon Physics</cite>
|
||||||
|
by Mark O'Donnell
|
||||||
|
</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#law-1">Law 1</a></li>
|
||||||
|
<li><a href="#law-2">Law 2</a></li>
|
||||||
|
<li><a href="#law-3">Law 3</a></li>
|
||||||
|
<li><a href="#law-4">Law 4</a></li>
|
||||||
|
<li><a href="#law-5">Law 5</a></li>
|
||||||
|
<li><a href="#law-6">Law 6</a></li>
|
||||||
|
<li><a href="#law-7">Law 7</a></li>
|
||||||
|
<li><a href="#law-8">Law 8</a></li>
|
||||||
|
<li><a href="#law-9">Law 9</a></li>
|
||||||
|
<li><a href="#law-10">Law 10</a></li>
|
||||||
|
<li><a href="#law-11">Law 11</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<h2 id="law-1">Cartoon Law I (<a href="#">top</a>)</h2>
|
||||||
|
<p>
|
||||||
|
Any body suspended in space will remain suspended in space until made aware of
|
||||||
|
its situation. A character steps off a cliff but remains in midair until looking
|
||||||
|
down, then the familiar principle of 16 feet per second squared takes over.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 id="law-2">Cartoon Law II (<a href="#">top</a>)</h2>
|
||||||
|
<p>
|
||||||
|
A body passing through solid matter will leave a perforation conforming to its
|
||||||
|
perimeter called the silhouette of passage.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 id="law-3">Cartoon Law III (<a href="#">top</a>)</h2>
|
||||||
|
<p>
|
||||||
|
The time required for an object to fall 20 stories is greater than or equal to
|
||||||
|
the time it takes for whoever knocked it off the ledge to spiral down 20 flights
|
||||||
|
to attempt to capture it unbroken. Such an object is inevitably priceless; the
|
||||||
|
attempt to capture it, inevitably unsuccessful.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 id="law-4">Cartoon Law IV (<a href="#">top</a>)</h2>
|
||||||
|
<p>
|
||||||
|
All principles of gravity are negated by fear.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 id="law-5">Cartoon Law V (<a href="#">top</a>)</h2>
|
||||||
|
<p>
|
||||||
|
Psychic forces are sufficient in most bodies for a shock to propel them directly
|
||||||
|
away from the ground. A spooky noise or an adversary's signature sound will
|
||||||
|
introduce motion upward, usually to the cradle of a chandelier, a treetop or the
|
||||||
|
crest of a flagpole.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 id="law-6">Cartoon Law VI (<a href="#">top</a>)</h2>
|
||||||
|
<p>
|
||||||
|
The feet of a running character or the wheels of a speeding auto need never
|
||||||
|
touch the ground, ergo fleeing turns to flight.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 id="law-7">Cartoon Law VII (<a href="#">top</a>)</h2>
|
||||||
|
<p>
|
||||||
|
As speed increases, objects can be in several places at once.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 id="law-8">Cartoon Law VIII (<a href="#">top</a>)</h2>
|
||||||
|
<p>
|
||||||
|
A painted tunnel entrance may or may not be traversable
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 id="law-9">Cartoon Law IX (<a href="#">top</a>)</h2>
|
||||||
|
<p>
|
||||||
|
Certain bodies can pass through a solid wall painted to resemble tunnel
|
||||||
|
entrances; others cannot. ... Whoever paints an entrance on a wall's surface to
|
||||||
|
trick an opponent will be unable to pursue him into this theoretical space. The
|
||||||
|
painter is flattened against the wall when he attempts to follow into the
|
||||||
|
painting. This is ultimately a problem of art, not science.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 id="law-10">Cartoon Law X (<a href="#">top</a>)</h2>
|
||||||
|
<p>
|
||||||
|
Any violent rearrangement of feline matter is impermanent. Cartoon cats can be
|
||||||
|
sliced, splayed, accordion-pleated, spindled or disassembled, but they cannot be
|
||||||
|
destroyed. After a few moments of blinking self-pity, they reinflate, elongate,
|
||||||
|
snap back or solidify.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 id="law-11">Cartoon Law XI (<a href="#">top</a>)</h2>
|
||||||
|
<p>
|
||||||
|
Everything falls faster than an anvil.
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
83
R1.02/tp/tp2/correction/exercice2.html
Normal file
83
R1.02/tp/tp2/correction/exercice2.html
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Exercice 2</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<form method="POST" action="https://dwarves.iut-fbleau.fr/requete.php">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="lastname">Nom : </label>
|
||||||
|
<input type="text" name="lastname" id="lastname" placeholder="ex: Dupont" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="firstname">Prénom : </label>
|
||||||
|
<input type="text" name="firstname" id="firstname" placeholder="ex: Jean-Paul" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="birthdate">Date de naissance : </label>
|
||||||
|
<input type="date" name="birthdate" id="birthdate">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="email">Adresse email : </label>
|
||||||
|
<input type="email" name="email" id="email" placeholder="ex: jean-paul.dupont@gmail.com" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="postcode">Code postal : </label>
|
||||||
|
<input type="number" name="postcode" id="postcode" placeholder="ex: 75000" min="5" max="99999" required>
|
||||||
|
<!--
|
||||||
|
Validation d'un code postal avec une expression régulière
|
||||||
|
<input type="text" name="postcode" id="postcode" placeholder="ex: 75000" pattern="(?:[0-8]\d|9[0-8])\d{3}">
|
||||||
|
-->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="phonenumber">N° Télephone portable : </label>
|
||||||
|
<input type="text" name="phonenumber" id="phonenumber" placeholder="ex: 0655664488" pattern="^(\+33|0)[6-7](\d\d){4}$" required>
|
||||||
|
<!-- Il n'y a pas d'attribut pour afficher un message d'erreur personnalisé, c'est pour cela qu'il y a JavaScript -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input type="radio" name="gender" id="femme" value="Madame" required>
|
||||||
|
<label for="femme">Femme </label>
|
||||||
|
<input type="radio" name="gender" id="homme" value="Monsieur" required>
|
||||||
|
<label for="homme">Homme </label>
|
||||||
|
<input type="radio" name="gender" id="autre" value="Autre" required>
|
||||||
|
<label for="autre">Autre </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="semester">Semestre : </label>
|
||||||
|
<select name="semester" id="semester" size="4" required>
|
||||||
|
<option value="Semestre 1">Semestre 1</option>
|
||||||
|
<option value="Semestre 2" selected>Semestre 2</option>
|
||||||
|
<option value="Semestre 3">Semestre 3</option>
|
||||||
|
<option value="Semestre 4">Semestre 4</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="niveau">Niveau en HTML (entre 0 et 10) : </label>
|
||||||
|
<input type="range" name="niveau" id="niveau" min="0" max="10" value="5">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="message">Message : </label>
|
||||||
|
<textarea name="message" id="message" required></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input type="submit" value="Envoyer">
|
||||||
|
<input type="reset" value="Remettre à zéro">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
85
R1.02/tp/tp2/correction/exercice3.html
Normal file
85
R1.02/tp/tp2/correction/exercice3.html
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Exercice 3</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
||||||
|
<meta charset="utf-8">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<form method="POST" action="https://dwarves.iut-fbleau.fr/requete.php">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="lastname">Nom : </label>
|
||||||
|
<input type="text" name="lastname" id="lastname" placeholder="ex: Dupont" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="firstname">Prénom : </label>
|
||||||
|
<input type="text" name="firstname" id="firstname" placeholder="ex: Jean-Paul" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="birthdate">Date de naissance : </label>
|
||||||
|
<input type="date" name="birthdate" id="birthdate">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="email">Adresse email : </label>
|
||||||
|
<input type="email" name="email" id="email" placeholder="ex: jean-paul.dupont@gmail.com" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="postcode">Code postal : </label>
|
||||||
|
<input type="number" name="postcode" id="postcode" placeholder="ex: 75000" min="5" max="99999" required>
|
||||||
|
<!--
|
||||||
|
Validation d'un code postal avec une expression régulière
|
||||||
|
<input type="text" name="postcode" id="postcode" placeholder="ex: 75000" pattern="(?:[0-8]\d|9[0-8])\d{3}">
|
||||||
|
-->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="phonenumber">N° Télephone portable : </label>
|
||||||
|
<input type="text" name="phonenumber" id="phonenumber" placeholder="ex: 0655664488" pattern="^(\+33|0)[6-7](\d\d){4}$" required>
|
||||||
|
<!-- Il n'y a pas d'attribut pour afficher un message d'erreur personnalisé, c'est pour cela qu'il y a JavaScript -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input type="radio" name="gender" id="femme" value="Madame" required>
|
||||||
|
<label for="femme">Femme </label>
|
||||||
|
<input type="radio" name="gender" id="homme" value="Monsieur" required>
|
||||||
|
<label for="homme">Homme </label>
|
||||||
|
<input type="radio" name="gender" id="autre" value="Autre" required>
|
||||||
|
<label for="autre">Autre </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="semester">Semestre : </label>
|
||||||
|
<select name="semester" id="semester" size="4" required>
|
||||||
|
<option value="Semestre 1">Semestre 1</option>
|
||||||
|
<option value="Semestre 2" selected>Semestre 2</option>
|
||||||
|
<option value="Semestre 3">Semestre 3</option>
|
||||||
|
<option value="Semestre 4">Semestre 4</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="niveau">Niveau en HTML (entre 0 et 10) : </label>
|
||||||
|
<input type="range" name="niveau" id="niveau" min="0" max="10" value="5">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="message">Message : </label>
|
||||||
|
<textarea name="message" id="message" required></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input type="submit" value="Envoyer">
|
||||||
|
<input type="reset" value="Remettre à zéro">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
53
R1.02/tp/tp2/correction/exercice4.html
Normal file
53
R1.02/tp/tp2/correction/exercice4.html
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
||||||
|
<title>Exercice 4</title>
|
||||||
|
<link rel="stylesheet" href="./style4.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Emoticons</h1>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Emoticons are textual portrayals of a writer's moods or facial
|
||||||
|
expressions in the form of icons. Originally, these icons
|
||||||
|
consisted of ASCII art.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Emoticons can generally be divided into two groups: Western (mainly
|
||||||
|
from America and Europe) or horizontal; Eastern or vertical (mainly
|
||||||
|
from east Asia).
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>Western</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Western style emoticons are mostly written from left to right as
|
||||||
|
though the head is rotated counter-clockwise 90 degrees.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Smiley: <span>:‑) :-></span></li>
|
||||||
|
<li>Tongue-tied: <span>:‑&</span></li>
|
||||||
|
<li>Broken heart: <span><\3</span></li>
|
||||||
|
<li>Rose: <span>@}->--</span></li>
|
||||||
|
<li>Fish: <span>><(((*></span></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Eastern</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Eastern emoticons generally are not rotated sideways. They first
|
||||||
|
arose in Japan, where they are referred to as kaomoji.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Troubled: <span>(>_<)</span></li>
|
||||||
|
<li>Sad: <span>("_")</span></li>
|
||||||
|
<li>Cat: <span>(=^·^=)</span></li>
|
||||||
|
<li>Headphones: <span>((d[-_-]b))</span></li>
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
85
R1.02/tp/tp2/correction/exercice5.html
Normal file
85
R1.02/tp/tp2/correction/exercice5.html
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Exercice 5</title>
|
||||||
|
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
||||||
|
<link rel="stylesheet" href="./style5.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<table>
|
||||||
|
<caption>Orbites des planètes du Système solaire</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Planète</th>
|
||||||
|
<th>Distance moyenne (UA)</th>
|
||||||
|
<th>Exentricité </th><th>Inclinaison (°)</th>
|
||||||
|
<th>Période de révolution (an)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Mercure</td>
|
||||||
|
<td>0,38709893</td>
|
||||||
|
<td>0,205</td>
|
||||||
|
<td>7</td>
|
||||||
|
<td>0,241</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>Venus</td>
|
||||||
|
<td>0,72333199</td>
|
||||||
|
<td>0,007</td>
|
||||||
|
<td>3,4</td>
|
||||||
|
<td>0,615</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Terre</td>
|
||||||
|
<td>1</td>
|
||||||
|
<td>0,017</td>
|
||||||
|
<td>0</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Mars</td>
|
||||||
|
<td>1,52366231</td>
|
||||||
|
<td>0,094</td>
|
||||||
|
<td>1,9</td>
|
||||||
|
<td>1,881</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>Jupiter</td>
|
||||||
|
<td>5,20336301</td>
|
||||||
|
<td>0,049</td>
|
||||||
|
<td>1,3</td>
|
||||||
|
<td>11,862</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Saturne</td>
|
||||||
|
<td>9,6</td>
|
||||||
|
<td>0,057</td>
|
||||||
|
<td>2,5</td>
|
||||||
|
<td>29,452</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Uranus</td>
|
||||||
|
<td>2872,5</td>
|
||||||
|
<td>0,8</td>
|
||||||
|
<td>97,8</td>
|
||||||
|
<td>30,589</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>Neptune</td>
|
||||||
|
<td>4495,1</td>
|
||||||
|
<td>1,8</td>
|
||||||
|
<td>28,3</td>
|
||||||
|
<td>59,8</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
20
R1.02/tp/tp2/correction/exercice6.html
Normal file
20
R1.02/tp/tp2/correction/exercice6.html
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
||||||
|
<title>Exercice 6</title>
|
||||||
|
<link rel="stylesheet" href="./style6.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr><td rowspan="5"></td><td colspan="3"></td><td rowspan="4"></td></tr>
|
||||||
|
<tr><td rowspan="3"></td><td></td><td rowspan="2"></td></tr>
|
||||||
|
<tr><td></td></tr>
|
||||||
|
<tr><td colspan="2"></td></tr>
|
||||||
|
<tr><td colspan="4"></td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
21
R1.02/tp/tp2/correction/style4.css
Normal file
21
R1.02/tp/tp2/correction/style4.css
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
body {
|
||||||
|
font-family:sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-variant:small-caps;
|
||||||
|
text-decoration : underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
background-color:#aaaaaa;
|
||||||
|
padding : 10px;
|
||||||
|
font-style:italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-family: monospace;
|
||||||
|
font-weight:bold;
|
||||||
|
color : #aa4512;
|
||||||
|
}
|
||||||
|
|
||||||
26
R1.02/tp/tp2/correction/style5.css
Normal file
26
R1.02/tp/tp2/correction/style5.css
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
table {
|
||||||
|
font-family: sans-serif;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin : auto;
|
||||||
|
width:700px;
|
||||||
|
}
|
||||||
|
table caption {
|
||||||
|
|
||||||
|
font-weight: bold;
|
||||||
|
font-variant: small-caps;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
border-bottom: 3px solid black;
|
||||||
|
border-top: 3px solid black;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: bold;
|
||||||
|
font-variant: small-caps;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
border-bottom: 1px solid lightgray;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
9
R1.02/tp/tp2/correction/style6.css
Normal file
9
R1.02/tp/tp2/correction/style6.css
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
border:1px solid black;
|
||||||
|
width:50px;
|
||||||
|
height:50px;
|
||||||
|
}
|
||||||
|
|
||||||
181
R1.02/tp/tp3/README.md
Normal file
181
R1.02/tp/tp3/README.md
Normal file
@@ -0,0 +1,181 @@
|
|||||||
|
# TP CSS
|
||||||
|
|
||||||
|
> Vous trouverez une correction du tp1 [ici](../tp1/correction).
|
||||||
|
|
||||||
|
> Vous trouverez une correction du tp2 [ici](../tp2/correction).
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Exercice 1 : stylisation d'une liste
|
||||||
|
|
||||||
|
Soit le code [html](src/exercice1.html) suivant
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>Mes films préférés de Clint Eastwood</h1>
|
||||||
|
<ul>
|
||||||
|
<li>Gran Torino (2008)</li>
|
||||||
|
<li>Impitoyable (1992)</li>
|
||||||
|
<li>Mystic River (2003)</li>
|
||||||
|
<li>Sur la route de Madison (1995)</li>
|
||||||
|
<li>Lettres d'Iwo Jima (2006)</li>
|
||||||
|
<li>L'Échange (2008)</li>
|
||||||
|
<li>Josey Wales hors-la-loi (1976)</li>
|
||||||
|
<li>Breezy (1973)</li>
|
||||||
|
</ul>
|
||||||
|
```
|
||||||
|
|
||||||
|
Donnez une feuille de style pour obtenir la mise en page suivante ;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> Propriétés css utiles :
|
||||||
|
> - `list-style-type` : contrôle l'apparence de la puce d'un élément de liste.
|
||||||
|
> - `padding`, `margin` : espace intérieur et extérieur
|
||||||
|
> - `background-color` : couleur de fond
|
||||||
|
> - `font-style` : italique, oblique ou normal
|
||||||
|
>
|
||||||
|
> Pseudo-classes utiles :
|
||||||
|
> - `nth-child` : nth-child(an+b) permet de selctionner les éléments en fonction de leur position.
|
||||||
|
|
||||||
|
## Exercice 2 : positionnement des boîtes avec la propriété `position`.
|
||||||
|
|
||||||
|
Soit le code [html](./src/exercice2.html) suivant :
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Exercice 2</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<header></header>
|
||||||
|
<section></section>
|
||||||
|
<footer></footer>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
Donnez une feuille de style pour obtenir la mise en page suivante :
|
||||||
|
|
||||||
|
|
||||||
|
> Propriétés utiles
|
||||||
|
> - `position` : static, relative, absolute, fixed, sticky
|
||||||
|
> - `top`, `bottom`, `right`, `left` : coordonnées de l'élément. Attention, pour le
|
||||||
|
> positionnement absolu, les **coordonnées s'entendent par rapport au premier ascendant en position relative,
|
||||||
|
> le body s'il n'y en a pas**.
|
||||||
|
> - `ẁidth` et `height` : largeur et hauteur.
|
||||||
|
> - `border-radius` et `border` : arrondi des coins, et bordure.
|
||||||
|
|
||||||
|
## Exercice 3
|
||||||
|
Soit le code [html](src/exercice3.html) suivant :
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Pulp fiction</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: serif;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Uuummmm, this is a tasty burger!</h1>
|
||||||
|
<p>
|
||||||
|
Yeah, I like animals better than people sometimes...
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Especially dogs.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>We happy?</h2>
|
||||||
|
<p>
|
||||||
|
Dogs are the best.
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
And the good thing about dogs...
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
is they got different dogs for different people.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Give me... Raoul.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Right, Omar? Give me Raoul.
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
En utilsant les selecteurs contextuels (`E F`,`E + F`, `E > F`, `E ~ F`), donnez des règles de styles pour obtenir la
|
||||||
|
mise en forme suivante :
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Exercice 4 : selection à l'aide d'attributs.
|
||||||
|
Soit le code [html](src/exercice4.html) suivant
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Exercice 3</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://developer.mozilla.org/docs/Web/HTML">HTML</a></li>
|
||||||
|
<li><a href="https://developer.mozilla.org/docs/Web/CSS">CSS</a></li>
|
||||||
|
<li><a href="https://developer.mozilla.org/docs/Web/Javascript">JS</a></li>
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
Donnez une feuille de style pour obtenir la mise en page suivante :
|
||||||
|
|
||||||
|
|
||||||
|
Vous pouvez utiliser les images suivantes :
|
||||||
|
- [html](https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-plain.svg)
|
||||||
|
- [css](https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-plain.svg)
|
||||||
|
- [javascript](https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-plain.svg)
|
||||||
|
|
||||||
|
> On peut selectionner un élément en utilisant la valeur d'un attribut. Par exemple :
|
||||||
|
> ```css
|
||||||
|
> a[href*="toto"]
|
||||||
|
> ```
|
||||||
|
> selectionne les liens dont l'url cible contient "toto".
|
||||||
|
> Propriétés utiles :
|
||||||
|
> - `background-image` : permet de définir une image comme arrière plan.
|
||||||
|
> - `display` : permet de définir le rendu d'un élément. On pourra utiliser ici les boîtes flexibles (`flex`).
|
||||||
|
> - `font-size` : contrôle la taille de la fonte.
|
||||||
|
|
||||||
|
## Exercice 5 : media queries
|
||||||
|
Soit le code [html](src/exercice5.html) et sa feuille de [style](src/style5.css).
|
||||||
|
|
||||||
|
Lorsque la largeur de l'écran est inférieur à `640px`, le menu n'est plus affiché.
|
||||||
|
|
||||||
|
> Utilisez une requête media `@media`.
|
||||||
|
|
||||||
|
## Exercice 6 : mise en page avec la propriété `float`
|
||||||
|
On reprend le source précédent.
|
||||||
|
|
||||||
|
À l'aide de la propriété `float`, affichez les articles sur 2 colonnes avec une bordure de 1px grise et
|
||||||
|
une marge entre les articles de 40px.
|
||||||
|
|
||||||
|
> Vous aurez besoin d'utiliser la propriété `width` que vous pouvez utiliser avec la fonction CSS `calc()` pour le calcul,
|
||||||
|
> exemple:
|
||||||
|
> ```css
|
||||||
|
> width: calc(100px + 2*20px)
|
||||||
|
> ```
|
||||||
|
> Penser quand vous cherchez la bonne largeur (+/- 50%), qu'il faut prendre en compte la taille de marge et des bordures. Vous pouvez utiliser
|
||||||
|
> la propriété `box-sizing`.
|
||||||
|
|
||||||
|
Ajoutez une requête media pour que les articles s'affichent à nouveau verticalement lorsque la taille de l'écran est en dessous de 720px.
|
||||||
21
R1.02/tp/tp3/correction/css/style1.css
Normal file
21
R1.02/tp/tp3/correction/css/style1.css
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
ul {
|
||||||
|
width : 50%;
|
||||||
|
max-width : 700px;
|
||||||
|
margin:auto;
|
||||||
|
border : 1px solid black;
|
||||||
|
padding : 0;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
padding : 0.25rem;
|
||||||
|
margin : 0.25rem;
|
||||||
|
}
|
||||||
|
li:nth-child(2n){
|
||||||
|
background-color : #888888;
|
||||||
|
color : rgb(255,255,255);
|
||||||
|
|
||||||
|
}
|
||||||
|
li:nth-child(2n+1){
|
||||||
|
background-color : #dddddd;
|
||||||
|
font-style:italic;
|
||||||
|
}
|
||||||
46
R1.02/tp/tp3/correction/css/style2.css
Normal file
46
R1.02/tp/tp3/correction/css/style2.css
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
main {
|
||||||
|
--main-height : 400px;
|
||||||
|
--main-width : 400px;
|
||||||
|
position : relative;
|
||||||
|
width : var(--main-width);
|
||||||
|
height : var(--main-height);;
|
||||||
|
background-color : yellow;
|
||||||
|
border-radius : 10px;
|
||||||
|
border: 4px solid red;
|
||||||
|
margin:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
position : absolute ;
|
||||||
|
top : calc(var(--main-height) / 4 );
|
||||||
|
right:calc(var(--main-width) / 5);
|
||||||
|
width : calc(var(--main-height) / 4);
|
||||||
|
height : calc(var(--main-height) / 4);
|
||||||
|
height : calc(var(--main-height) / 4);
|
||||||
|
border-radius : calc(var(--main-height) / 4);
|
||||||
|
background-color : red;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
position : absolute ;
|
||||||
|
top : calc(var(--main-height) / 4 );
|
||||||
|
left:calc(var(--main-width) / 5);
|
||||||
|
width : calc(var(--main-height) / 4);
|
||||||
|
height : calc(var(--main-height) / 4);
|
||||||
|
height : calc(var(--main-height) / 4);
|
||||||
|
border-radius : calc(var(--main-height) / 4);
|
||||||
|
|
||||||
|
background-color : red;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
position : absolute;
|
||||||
|
bottom : calc(var(--main-height) / 8 );
|
||||||
|
--tmp-left : calc(var(--main-width) / 5);
|
||||||
|
left : var(--tmp-left);
|
||||||
|
height : calc(var(--main-height) / 6);
|
||||||
|
width : calc(var(--tmp-left) * 3 );
|
||||||
|
background-color : red;
|
||||||
|
border-radius : calc(var(--main-height) / 6) calc(var(--main-height) / 6) 0px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
20
R1.02/tp/tp3/correction/css/style3.css
Normal file
20
R1.02/tp/tp3/correction/css/style3.css
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
body {
|
||||||
|
font-family: serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 + p {
|
||||||
|
font-variant: small-caps;
|
||||||
|
}
|
||||||
|
|
||||||
|
article p {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
article > p {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
article ~ p {
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
28
R1.02/tp/tp3/correction/css/style4.css
Normal file
28
R1.02/tp/tp3/correction/css/style4.css
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
ul {
|
||||||
|
padding : 1em;
|
||||||
|
text-align:center;
|
||||||
|
border : 1px solid grey;
|
||||||
|
display : flex;
|
||||||
|
justify-content:space-around;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
list-style-type : none;
|
||||||
|
display : flex;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
li > a {
|
||||||
|
height:10rem;
|
||||||
|
width:10rem;
|
||||||
|
font-size : 0px;
|
||||||
|
|
||||||
|
}
|
||||||
|
li > a[href*="HTML"] {
|
||||||
|
background-image: url(https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-plain.svg);
|
||||||
|
}
|
||||||
|
li > a[href*="CSS"] {
|
||||||
|
background-image: url(https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-plain.svg);
|
||||||
|
}
|
||||||
|
li > a[href*="Javascript"] {
|
||||||
|
background-image: url(https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-plain.svg);
|
||||||
|
}
|
||||||
51
R1.02/tp/tp3/correction/css/style5.css
Normal file
51
R1.02/tp/tp3/correction/css/style5.css
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
/* media query pour le menu */
|
||||||
|
@media screen and (max-width: 640px){
|
||||||
|
nav {
|
||||||
|
display : none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
padding:0;
|
||||||
|
display:flex;
|
||||||
|
list-style-type: none;
|
||||||
|
justify-content:center;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
margin-right: 2em;
|
||||||
|
font-size : 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
ul {
|
||||||
|
text-align: center;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
list-style-position: inside;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 2em;
|
||||||
|
font-size : 2em;
|
||||||
|
}
|
||||||
|
li:last-child{
|
||||||
|
margin-right:0;
|
||||||
|
}*/
|
||||||
|
main{
|
||||||
|
display : flex;
|
||||||
|
flex-direction : row;
|
||||||
|
flex-wrap : wrap;
|
||||||
|
justify-content : center;
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
box-sizing : border-box;
|
||||||
|
margin: 2em;
|
||||||
|
flex-basis : 40%;
|
||||||
|
min-width:300px;
|
||||||
|
text-align: justify;
|
||||||
|
border : 1px solid grey;
|
||||||
|
padding : 1em;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width : 90%;
|
||||||
|
}
|
||||||
40
R1.02/tp/tp3/correction/css/style6.css
Normal file
40
R1.02/tp/tp3/correction/css/style6.css
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
/* media query pour le menu */
|
||||||
|
@media screen and (max-width: 640px){
|
||||||
|
nav {
|
||||||
|
display : none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
padding:0;
|
||||||
|
display:flex;
|
||||||
|
list-style-type: none;
|
||||||
|
justify-content:center;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
margin-right: 2em;
|
||||||
|
font-size : 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
main{
|
||||||
|
display : grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-gap : 1rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
article:first-child{
|
||||||
|
grid-column : 1 / span 2;
|
||||||
|
|
||||||
|
}
|
||||||
|
article {
|
||||||
|
box-sizing : border-box;
|
||||||
|
margin: 2em;
|
||||||
|
min-width:300px;
|
||||||
|
text-align: justify;
|
||||||
|
border : 1px solid grey;
|
||||||
|
padding : 1em;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width : 90%;
|
||||||
|
}
|
||||||
25
R1.02/tp/tp3/correction/ex1.html
Normal file
25
R1.02/tp/tp3/correction/ex1.html
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
||||||
|
<link rel="stylesheet" href="./css/style1.css">
|
||||||
|
<title>CEastwood</title>
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Mes films préférés de Clint Eastwood</h1>
|
||||||
|
<ul>
|
||||||
|
<li>Gran Torino (2008)</li>
|
||||||
|
<li>Impitoyable (1992)</li>
|
||||||
|
<li>Mystic River (2003)</li>
|
||||||
|
<li>Sur la route de Madison (1995)</li>
|
||||||
|
<li>Lettres d'Iwo Jima (2006)</li>
|
||||||
|
<li>L'Échange (2008)</li>
|
||||||
|
<li>Josey Wales hors-la-loi (1976)</li>
|
||||||
|
<li>Breezy (1973)</li>
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
18
R1.02/tp/tp3/correction/ex2.html
Normal file
18
R1.02/tp/tp3/correction/ex2.html
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Smiley</title>
|
||||||
|
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
||||||
|
<link rel="stylesheet" href="./css/style2.css">
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<header></header>
|
||||||
|
<section></section>
|
||||||
|
<footer></footer>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
40
R1.02/tp/tp3/correction/ex3.html
Normal file
40
R1.02/tp/tp3/correction/ex3.html
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Pulp fiction</title>
|
||||||
|
<link rel="stylesheet" href="css/style3.css" type="text/css" media="screen">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Uuummmm, this is a tasty burger!</h1>
|
||||||
|
<p>
|
||||||
|
Yeah, I like animals better than people sometimes...
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Especially dogs.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>We happy?</h2>
|
||||||
|
<p>
|
||||||
|
Dogs are the best.
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
And the good thing about dogs...
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
is they got different dogs for different people.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Give me... Raoul.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Right, Omar? Give me Raoul.
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
17
R1.02/tp/tp3/correction/ex4.html
Normal file
17
R1.02/tp/tp3/correction/ex4.html
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
||||||
|
<link rel="stylesheet" href="./css/style4.css">
|
||||||
|
|
||||||
|
<title>Liste</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://developer.mozilla.org/docs/Web/HTML">HTML</a></li>
|
||||||
|
<li><a href="https://developer.mozilla.org/docs/Web/CSS">CSS</a></li>
|
||||||
|
<li><a href="https://developer.mozilla.org/docs/Web/Javascript">JS</a></li>
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
59
R1.02/tp/tp3/correction/ex5_flex.html
Normal file
59
R1.02/tp/tp3/correction/ex5_flex.html
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
||||||
|
<link rel="stylesheet" href="./css/style5.css">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/">Home</a></li>
|
||||||
|
<li><a href="/">About</a></li>
|
||||||
|
<li><a href="/">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>Article title 1</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<img src="https://picsum.photos/300/200" alt="">
|
||||||
|
<p>lorem ipsum</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>Article title 2</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<img src="https://picsum.photos/300/200" alt="">
|
||||||
|
<p>lorem ipsum</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>Article title 3</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<img src="https://picsum.photos/300/200" alt="">
|
||||||
|
<p>lorem ipsum</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>Article title 3</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<img src="https://picsum.photos/300/200" alt="">
|
||||||
|
<p>lorem ipsum</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
59
R1.02/tp/tp3/correction/ex6_grid.html
Normal file
59
R1.02/tp/tp3/correction/ex6_grid.html
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
||||||
|
<link rel="stylesheet" href="./css/style6.css">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/">Home</a></li>
|
||||||
|
<li><a href="/">About</a></li>
|
||||||
|
<li><a href="/">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>Article title 1</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<img src="https://picsum.photos/300/200" alt="">
|
||||||
|
<p>lorem ipsum</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>Article title 2</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<img src="https://picsum.photos/300/200" alt="">
|
||||||
|
<p>lorem ipsum</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>Article title 3</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<img src="https://picsum.photos/300/200" alt="">
|
||||||
|
<p>lorem ipsum</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>Article title 3</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<img src="https://picsum.photos/300/200" alt="">
|
||||||
|
<p>lorem ipsum</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
R1.02/tp/tp3/img/eastwood.png
Normal file
BIN
R1.02/tp/tp3/img/eastwood.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
R1.02/tp/tp3/img/exo3.png
Normal file
BIN
R1.02/tp/tp3/img/exo3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
R1.02/tp/tp3/img/smiley.png
Normal file
BIN
R1.02/tp/tp3/img/smiley.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
R1.02/tp/tp3/img/web_stack.png
Normal file
BIN
R1.02/tp/tp3/img/web_stack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
23
R1.02/tp/tp3/src/exercice1.html
Normal file
23
R1.02/tp/tp3/src/exercice1.html
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
||||||
|
<title>CEastwood</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Mes films préférés de Clint Eastwood</h1>
|
||||||
|
<ul>
|
||||||
|
<li>Gran Torino (2008)</li>
|
||||||
|
<li>Impitoyable (1992)</li>
|
||||||
|
<li>Mystic River (2003)</li>
|
||||||
|
<li>Sur la route de Madison (1995)</li>
|
||||||
|
<li>Lettres d'Iwo Jima (2006)</li>
|
||||||
|
<li>L'Échange (2008)</li>
|
||||||
|
<li>Josey Wales hors-la-loi (1976)</li>
|
||||||
|
<li>Breezy (1973)</li>
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
14
R1.02/tp/tp3/src/exercice2.html
Normal file
14
R1.02/tp/tp3/src/exercice2.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Exercice 2</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<header></header>
|
||||||
|
<section></section>
|
||||||
|
<footer></footer>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
43
R1.02/tp/tp3/src/exercice3.html
Normal file
43
R1.02/tp/tp3/src/exercice3.html
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Pulp fiction</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: serif;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Uuummmm, this is a tasty burger!</h1>
|
||||||
|
<p>
|
||||||
|
Yeah, I like animals better than people sometimes...
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Especially dogs.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>We happy?</h2>
|
||||||
|
<p>
|
||||||
|
Dogs are the best.
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
And the good thing about dogs...
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
is they got different dogs for different people.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Give me... Raoul.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Right, Omar? Give me Raoul.
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
14
R1.02/tp/tp3/src/exercice4.html
Normal file
14
R1.02/tp/tp3/src/exercice4.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Exercice 3</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://developer.mozilla.org/docs/Web/HTML">HTML</a></li>
|
||||||
|
<li><a href="https://developer.mozilla.org/docs/Web/CSS">CSS</a></li>
|
||||||
|
<li><a href="https://developer.mozilla.org/docs/Web/Javascript">JS</a></li>
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
60
R1.02/tp/tp3/src/exercice5.html
Normal file
60
R1.02/tp/tp3/src/exercice5.html
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
||||||
|
<link rel="stylesheet" href="style5.css">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/">Home</a></li>
|
||||||
|
<li><a href="/">About</a></li>
|
||||||
|
<li><a href="/">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>Article title 1</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<img src="https://picsum.photos/300/200" alt="">
|
||||||
|
<p>lorem ipsum</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>Article title 2</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<img src="https://picsum.photos/300/200" alt="">
|
||||||
|
<p>lorem ipsum</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>Article title 3</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<img src="https://picsum.photos/300/200" alt="">
|
||||||
|
<p>lorem ipsum</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>Article title 3</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<img src="https://picsum.photos/300/200" alt="">
|
||||||
|
<p>lorem ipsum</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
21
R1.02/tp/tp3/src/style5.css
Normal file
21
R1.02/tp/tp3/src/style5.css
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
ul {
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
list-style-position: inside;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 2em;
|
||||||
|
font-size : 2em;
|
||||||
|
}
|
||||||
|
li:last-child{
|
||||||
|
margin-right:0;
|
||||||
|
|
||||||
|
}
|
||||||
|
article {
|
||||||
|
text-align: justify;
|
||||||
|
border : 1px solid grey;
|
||||||
|
padding : 1em;
|
||||||
|
}
|
||||||
59
R1.02/tp/tp4/README.md
Normal file
59
R1.02/tp/tp4/README.md
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
# TP CSS - mise en page d'un site
|
||||||
|
|
||||||
|
> Une [correction](./correction)
|
||||||
|
|
||||||
|
> 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).
|
||||||
|
|
||||||
|
> Un exemple de [générateur de grille css](https://cssgrid-generator.netlify.app/)
|
||||||
|
|
||||||
|
## 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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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 ;)
|
||||||
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>
|
||||||
147
R1.02/tp/tp4/correction/style.css
Normal file
147
R1.02/tp/tp4/correction/style.css
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
html{
|
||||||
|
|
||||||
|
margin:0px;
|
||||||
|
padding:0px;
|
||||||
|
height:100vh;
|
||||||
|
font-size:20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
container-type: inline-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.informaticien article img
|
||||||
|
{
|
||||||
|
width : 125px;
|
||||||
|
height:125px;
|
||||||
|
padding:10px;
|
||||||
|
box-shadow: 10px 10px 5px #656565;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@container (min-width:400px)
|
||||||
|
{
|
||||||
|
.informaticien article img
|
||||||
|
{
|
||||||
|
float :right;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.date
|
||||||
|
{
|
||||||
|
font-size : 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.informaticien
|
||||||
|
{
|
||||||
|
display:flex;
|
||||||
|
justify-content:space-around;
|
||||||
|
flex-wrap:wrap;
|
||||||
|
/* align-self:stretch;*/
|
||||||
|
/* align-content : space-around;*/
|
||||||
|
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;
|
||||||
|
}
|
||||||
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 |
80
R1.02/tp/tp4/src/pantheon.html
Normal file
80
R1.02/tp/tp4/src/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>
|
||||||
|
<main>
|
||||||
|
<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>
|
||||||
|
<strong>Dennis MacAlistair Ritchie</strong>, 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>
|
||||||
|
<strong>Linus Benedict Torvalds</strong>, 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>
|
||||||
|
<strong>Blaise Pascal</strong>, 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>
|
||||||
|
<strong>Alan Mathison Turing</strong>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>
|
||||||
|
</main>
|
||||||
|
<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>
|
||||||
9
R4.01_R4.A.10/README.md
Normal file
9
R4.01_R4.A.10/README.md
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
## Ressources R4.01 + R4.A.10
|
||||||
|
|
||||||
|
#### Semaine 1
|
||||||
|
[Compléments de javascript](cours/jscomp.pdf) javascript, [tp1](./td_tp/tp1)
|
||||||
|
|
||||||
|
#### Semaine 2
|
||||||
|
[DOM](cours/dom.pdf), [tp2](./td_tp/tp2), [tpmvc](td_tp/tp2mvc)
|
||||||
|
|
||||||
|
|
||||||
BIN
R4.01_R4.A.10/cours/dom.pdf
Normal file
BIN
R4.01_R4.A.10/cours/dom.pdf
Normal file
Binary file not shown.
BIN
R4.01_R4.A.10/cours/jscomp.pdf
Normal file
BIN
R4.01_R4.A.10/cours/jscomp.pdf
Normal file
Binary file not shown.
207
R4.01_R4.A.10/td_tp/tp1/README.md
Normal file
207
R4.01_R4.A.10/td_tp/tp1/README.md
Normal file
@@ -0,0 +1,207 @@
|
|||||||
|
# TP javascript : bases du langages.
|
||||||
|
Un peu [d'aide](./aide.md).
|
||||||
|
> - seance 1 : [révisions](#p1)
|
||||||
|
> - seance 2 : [forEach, filter, map, reduce, etc.](#p2)
|
||||||
|
|
||||||
|
### <a name="p1"></a> Séance 1
|
||||||
|
#### Ex1 : fourmi de Langton
|
||||||
|
Une fourmi, assimilable à un petit automate, se promène sur une grille de points colorés;
|
||||||
|
pour commencer, tous les points sont blancs.
|
||||||
|
- la fourmi est initialement placée au centre de la grille. Elle se déplace dans les quatre directions cardinales. Initialement, elle va vers l'est.
|
||||||
|
- A chaque pas, elle se déplace d'une case dans sa direction. Son parcours est dicté par les deux règles suivantes :
|
||||||
|
- Si la case atteinte est noire, elle la repeint en blanc, et tourne de 90° à gauche.
|
||||||
|
- Si la case est blanche, elle la repeint en noire, et tourne de 90° à droite.
|
||||||
|
- Elle continue son chemin en suivant ces règles.
|
||||||
|
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
_Les 9 premiers pas de la fourmi_<br>
|
||||||
|
<img src="./img/fourmi.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
Vous disposez de [sources](./src/langton) que vous allez compléter. En particulier, il y a 2 modules :
|
||||||
|
|
||||||
|
>- une classe **Ant** qui représente l'univers : la fourmi, et les tuiles sur lesquelles elle se déplace.
|
||||||
|
>- une fonction **render** qui gére l'affichage graphique.
|
||||||
|
|
||||||
|
|
||||||
|
- La fourmi a une position sur la grille, ainsi qu'une direction. La direction sera codée par un entier (angle 0,90,180 ou 270).
|
||||||
|
- Les tuiles sont repréntées par un tableau à 2 dimensions. Chaque tuile a 2 valeurs possibles (0 ou 1).
|
||||||
|
|
||||||
|
|
||||||
|
1. Complétez le code de la classe `Ant`.
|
||||||
|
2. Complétez le code de `app.js`.
|
||||||
|
3. Ajoutez un bouton/lien qui permet de réinitialiser la simulation.
|
||||||
|
4. Dissociez, en terme de classe/structure, la fourmi de la grille sur laquelle elle évolue, et modifiez le
|
||||||
|
code en conséquence.
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img src="./img/langton.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
#### Ex2 : fourmi de Langton
|
||||||
|
On peut complexifier et généraliser la fourmi précédente, et les règles d'évolution de l'automate correspondant : la fourmi, et les tuiles peuvent avoir
|
||||||
|
un nombre quelconque d'états. Les règles de l'automate sont alors décrites par une table de transition.
|
||||||
|
|
||||||
|
Exemple 1 : on donne la table de transition suivante (T désigne la tuile, a la fourmi) à 2 états pour la fourmi, et 2 états pour les tuiles.
|
||||||
|
|
||||||
|
|
||||||
|
| | T: 0 | T: 1 |
|
||||||
|
|------|-----------|-----------|
|
||||||
|
| a: 0 | (1,0,1) | (0,90,1) |
|
||||||
|
| a: 1 | (0,-90,1) | (1,0,1) |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Chaque triplet représente (Ant State Change, Ant Direction Change, Tile State Change). Ainsi,
|
||||||
|
|
||||||
|
- (1,90,0) => on incrémente 1 à l'état de la fourmi, 90 à sa direction, et 0 à l'état de la tuile.
|
||||||
|
- (0,-90,1) => on incrémente 0 à l'état de la fourmi, -90 à sa direction, et 1 à l'état de la tuile.
|
||||||
|
|
||||||
|
Les incrémentations se font modulo le nombre d'états possibles.
|
||||||
|
|
||||||
|
Avec cet automate, on obtient la figure :
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img src="./img/langton1.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
Par commodité, on note la table de transition précédente simplement :
|
||||||
|
|
||||||
|
```
|
||||||
|
(1,0,1) (0,90,1)
|
||||||
|
(0,-90,1) (1,0,1)
|
||||||
|
```
|
||||||
|
|
||||||
|
1. Modifiez le code de l'exercice 1 de manière à pouvoir simuler l'automate ci-dessus. Votre solution doit pouvoir permettre une simulation quelconque.
|
||||||
|
Quelle est la table correspondante à la fourmi de la première partie du tp ?
|
||||||
|
2. Testez avec
|
||||||
|
```
|
||||||
|
(1,90,0) (0,-90,1)
|
||||||
|
(0,-90,1) (1,90,1)
|
||||||
|
```
|
||||||
|
<div align="center">
|
||||||
|
<img src="./img/langton2.png">
|
||||||
|
</div>
|
||||||
|
3. Testez avec
|
||||||
|
|
||||||
|
```
|
||||||
|
(1, 0, 1) (0, 90, 0)
|
||||||
|
(0, -90, 1) (1, 0, 1)
|
||||||
|
```
|
||||||
|
|
||||||
|
### <a name="p2"></a> Séance 2
|
||||||
|
#### Ex1
|
||||||
|
|
||||||
|
Soit le tableau d'objets suivant :
|
||||||
|
```js
|
||||||
|
let customers = [
|
||||||
|
{
|
||||||
|
'id': 1,
|
||||||
|
'f_name': 'Abby',
|
||||||
|
'l_name': 'Thomas',
|
||||||
|
'gender': 'M',
|
||||||
|
'married': true,
|
||||||
|
'age': 32,
|
||||||
|
'expense': 500,
|
||||||
|
'purchased': ['Shampoo', 'Toys', 'Book']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id': 2,
|
||||||
|
'f_name': 'Jerry',
|
||||||
|
'l_name': 'Tom',
|
||||||
|
'gender': 'M',
|
||||||
|
'married': true,
|
||||||
|
'age': 64,
|
||||||
|
'expense': 100,
|
||||||
|
'purchased': ['Stick', 'Blade']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id': 3,
|
||||||
|
'f_name': 'Dianna',
|
||||||
|
'l_name': 'Cherry',
|
||||||
|
'gender': 'F',
|
||||||
|
'married': true,
|
||||||
|
'age': 22,
|
||||||
|
'expense': 1500,
|
||||||
|
'purchased': ['Lipstik', 'Nail Polish', 'Bag', 'Book']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id': 4,
|
||||||
|
'f_name': 'Dev',
|
||||||
|
'l_name': 'Currian',
|
||||||
|
'gender': 'M',
|
||||||
|
'married': true,
|
||||||
|
'age': 82,
|
||||||
|
'expense': 90,
|
||||||
|
'purchased': ['Book']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id': 5,
|
||||||
|
'f_name': 'Maria',
|
||||||
|
'l_name': 'Gomes',
|
||||||
|
'gender': 'F',
|
||||||
|
'married': false,
|
||||||
|
'age': 7,
|
||||||
|
'expense': 300,
|
||||||
|
'purchased': ['Toys']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id': 6,
|
||||||
|
'f_name': 'Homer',
|
||||||
|
'l_name': 'Simpson',
|
||||||
|
'gender': 'M',
|
||||||
|
'married': true,
|
||||||
|
'age': 39,
|
||||||
|
'expense': 500,
|
||||||
|
'purchased': ['Book']
|
||||||
|
}
|
||||||
|
];
|
||||||
|
```
|
||||||
|
|
||||||
|
En utilisant les fonctions/méthodes `forEach, filter, map, reduce, some, every, find`, donnez ou calculez :
|
||||||
|
1. un tableau des client séniors (dont l'âge est plus de 60 ans).
|
||||||
|
2. un tableau où chaque client possède un nouvel attribut `full_name`.
|
||||||
|
3. s'il y a un client de moins de 10 ans.
|
||||||
|
4. le nombre d'acheteurs de livres.
|
||||||
|
5. la somme totale d'argent dépensé par les clients marriés.
|
||||||
|
6. Pour chaque produit, la liste (`id`) des acheteurs.
|
||||||
|
|
||||||
|
#### Ex2
|
||||||
|
Ecrire une fonction qui calcule tous les nombres premiers inférieurs à une valeur entière `n` donnée,
|
||||||
|
en utilisant le [crible d'Erastosthène](https://fr.wikipedia.org/wiki/Crible_d%27%C3%89ratosth%C3%A8ne).
|
||||||
|
|
||||||
|
Le version du crible est volontairement "mal écrite" en terme de performance :
|
||||||
|
|
||||||
|
```js
|
||||||
|
let eratosthene1 = n => {
|
||||||
|
let numbers = Array.from({length : n - 2}, (v,k) => k + 2);
|
||||||
|
let p ,primes = [];
|
||||||
|
|
||||||
|
while(numbers.length){
|
||||||
|
[p,...numbers] = numbers;
|
||||||
|
numbers = numbers.filter( k => k%p != 0);
|
||||||
|
primes = [...primes,p];
|
||||||
|
}
|
||||||
|
return primes;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. Expliquez précisément ce code. Testez et dites pourquoi qu'il n'est pas efficace.
|
||||||
|
2. Écrivez une version plus efficace et comparer les temps de calcul. Vous pourrez compléter le code suivant :
|
||||||
|
|
||||||
|
```js
|
||||||
|
let eratosthene = n => {
|
||||||
|
|
||||||
|
let primes = [];
|
||||||
|
let filterArray = []; // tableau qui permet
|
||||||
|
// de cribler les multiples des nombres
|
||||||
|
// premiers
|
||||||
|
|
||||||
|
for(let i = 2; i <= n; i++){
|
||||||
|
// TODO
|
||||||
|
}
|
||||||
|
return primes;
|
||||||
|
}
|
||||||
|
```
|
||||||
115
R4.01_R4.A.10/td_tp/tp1/aide.md
Normal file
115
R4.01_R4.A.10/td_tp/tp1/aide.md
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
#### Élement d'un document
|
||||||
|
|
||||||
|
```js
|
||||||
|
|
||||||
|
let x = document.getElementById(MOVE_VAL_ID)
|
||||||
|
let images = document.querySelectorAll('img')
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Changer le contenu texte d'un élément
|
||||||
|
```js
|
||||||
|
document.getElementById('message').textContent = "hello world !"
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Nombre aléatoire
|
||||||
|
|
||||||
|
```js
|
||||||
|
let r=Math.random();
|
||||||
|
if (r<0.5)
|
||||||
|
console.log("Face");
|
||||||
|
else
|
||||||
|
console.log("Pile");
|
||||||
|
```
|
||||||
|
#### Timers
|
||||||
|
|
||||||
|
```js
|
||||||
|
setTimeout(()=>console.log("3 secondes écoulées"),3000);
|
||||||
|
|
||||||
|
let i = setInterval(
|
||||||
|
() => {
|
||||||
|
let d = (new Date()).toLocaleTimeString();
|
||||||
|
document.getElementById("time").innerText = d;
|
||||||
|
},
|
||||||
|
1000)
|
||||||
|
|
||||||
|
setTimeout(()=>clearInterval(i),10000);
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Réponse à un événement
|
||||||
|
```js
|
||||||
|
// inline DOM 0
|
||||||
|
img.onclick = function(){ console.log("clicked !")}
|
||||||
|
|
||||||
|
// DOM >= 2
|
||||||
|
img.addEventListener("click",()=>console.log("clicked"));
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
#### Itération d'un tableau
|
||||||
|
|
||||||
|
```js
|
||||||
|
let a = [1,2,3];
|
||||||
|
|
||||||
|
// forEach
|
||||||
|
a.forEach( elem => console.log(elem));
|
||||||
|
|
||||||
|
// for ... of
|
||||||
|
// valable pour tous les itérables
|
||||||
|
// Array, Map, Set, String, etc.
|
||||||
|
|
||||||
|
for (let elem of a){
|
||||||
|
console.log(elem);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
#### Tri d'un tableau
|
||||||
|
|
||||||
|
```js
|
||||||
|
const activities = [
|
||||||
|
{ title: 'Hiking', date: new Date('2019-06-28') },
|
||||||
|
{ title: 'Shopping', date: new Date('2019-06-10') },
|
||||||
|
{ title: 'Trekking', date: new Date('2019-06-22') }
|
||||||
|
]
|
||||||
|
|
||||||
|
const sortedActivities = activities.sort((a, b) => b.date - a.date);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Itération d'un tableau avec map, filter, reduce et find.
|
||||||
|
|
||||||
|
```js
|
||||||
|
// map
|
||||||
|
const items = ['a', 'b', 'c']
|
||||||
|
const newArray = items.map((item) => performSomething(item))
|
||||||
|
const newArray = items.map(performSomething)
|
||||||
|
|
||||||
|
// find
|
||||||
|
const items = [
|
||||||
|
{ name: 'a', content: { /* ... */ }},
|
||||||
|
{ name: 'b', content: { /* ... */ }},
|
||||||
|
{ name: 'c', content: { /* ... */ }}
|
||||||
|
]
|
||||||
|
const b = items.find((item) => item.name === 'b')
|
||||||
|
|
||||||
|
//reduce
|
||||||
|
const items = [
|
||||||
|
{ name: 'a', content: { value: 1 }},
|
||||||
|
{ name: 'b', content: { value: 2 }},
|
||||||
|
{ name: 'c', content: { value: 3 }}
|
||||||
|
]
|
||||||
|
|
||||||
|
const count = items.reduce((result, elem ) => result + elem.content.value, 0)
|
||||||
|
// en decomposant l'objet !
|
||||||
|
const count = items.reduce((result, { content: { value } }) => result + value, 0)
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Division d'une chaîne de caractères avec split
|
||||||
|
```js
|
||||||
|
const str = 'a,b,c,d,e'
|
||||||
|
const l = str.split(',')
|
||||||
|
|
||||||
|
// l = [ "a","b","c","d","e"]
|
||||||
|
```
|
||||||
BIN
R4.01_R4.A.10/td_tp/tp1/img/fourmi.png
Normal file
BIN
R4.01_R4.A.10/td_tp/tp1/img/fourmi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
R4.01_R4.A.10/td_tp/tp1/img/langton.png
Normal file
BIN
R4.01_R4.A.10/td_tp/tp1/img/langton.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
R4.01_R4.A.10/td_tp/tp1/img/langton1.png
Normal file
BIN
R4.01_R4.A.10/td_tp/tp1/img/langton1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user