diff --git a/R1.02/tp/tp2/correction/exercice1.html b/R1.02/tp/tp2/correction/exercice1.html new file mode 100644 index 0000000..b0af8a1 --- /dev/null +++ b/R1.02/tp/tp2/correction/exercice1.html @@ -0,0 +1,26 @@ + + + + + + + Exercice 1 + + + +

Première partie

+

Lorem ipsum dolor sit amet. Fugiat beatae aut fugiat dolores qui consequuntur perferendis et dolores repudiandae. Et ullam maxime sapiente veritatis quo consequatur ducimus. Cum dolor blanditiis Ut ullam ut voluptas neque ea fugiat amet! Et asperiores quam Qui dolor id illum ullam. Qui dolorem autem et soluta nostrum 33 galisum nostrum est exercitationem enim! Et harum animi non obcaecati fuga ut repellendus quas ea perspiciatis ducimus. Aut doloremque animi Et quia et saepe quaerat aut velit incidunt et perferendis voluptatem ex quia voluptas ea accusamus nostrum. Qui commodi laboriosam ad dicta galisum ut tempora unde et dolorem suscipit. Ut illum illum id dolor tempore ut quos voluptatem aut internos molestias quo adipisci ipsum. 33 expedita molestias aut iusto nihil aut nemo optio et cupiditate velit. Et cupiditate omnis ex explicabo fugit in voluptas ducimus et eaque quae et dolor odio aut consectetur rerum nam consequuntur quisquam.

Sed eaque quas sed vitae quae et dolor ratione sed rerum saepe rem sunt rerum.

Rem alias blanditiis Aut delectus quo modi velit a similique assumenda. At nobis natus et natus tenetur est quaerat dolor aut sequi harum sed dignissimos nihil. Ut iure unde et voluptatem enim cum consequatur totam rem veniam maxime ab exercitationem modi ut cumque magni! Eum illo aliquam et vitae earum eos sint mollitia. Non dolor natus est aperiam laudantium aut reiciendis incidunt quia fugit ad earum vero aut quasi rerum et corrupti quibusdam? Et molestiae itaque id voluptatem maxime qui velit fuga eum eius dolorum sit saepe iste id similique consectetur. Et consequatur autem et doloribus nemo quo minima consequatur qui repellendus voluptatum? Aut facilis quaerat ut omnis aperiam Ut eveniet sed neque maxime At voluptas molestiae a sapiente voluptas ex nulla amet. Eos sint ducimus est odit rerum vel dolorem itaque est suscipit architecto non veritatis sequi et voluptatum exercitationem. Vel esse nulla et exercitationem laudantium non assumenda nesciunt? Qui dicta quia vel magni pariatur sit ratione atque qui quia fugiat est eligendi quidem.

Quo repudiandae rerum ea doloribus nihil eos temporibus beatae ab libero nobis aut ullam voluptatem eos totam fuga sit velit sequi. Id consequatur nobis a quae possimus aut nesciunt temporibus! Et iure quod Qui eius sed quas molestias vel quod voluptas! Sit molestiae ipsam In expedita et voluptas sequi! Eos ducimus laudantium et quia reiciendis aut numquam quos sed necessitatibus omnis et exercitationem repudiandae? Ab totam odit aut expedita omnis sit praesentium aliquam est accusantium fugiat qui omnis qui illo dolorem. Sed expedita galisum ut officia reprehenderitet accusamus ad nemo placeat. Ut fugiat totam a facere quaerat et esse corrupti sed dolor pariatur in mollitia necessitatibus.

+

Lorem ipsum dolor sit amet. Fugiat beatae aut fugiat dolores qui consequuntur perferendis et dolores repudiandae. Et ullam maxime sapiente veritatis quo consequatur ducimus. Cum dolor blanditiis Ut ullam ut voluptas neque ea fugiat amet! Et asperiores quam Qui dolor id illum ullam. Qui dolorem autem et soluta nostrum 33 galisum nostrum est exercitationem enim! Et harum animi non obcaecati fuga ut repellendus quas ea perspiciatis ducimus. Aut doloremque animi Et quia et saepe quaerat aut velit incidunt et perferendis voluptatem ex quia voluptas ea accusamus nostrum. Qui commodi laboriosam ad dicta galisum ut tempora unde et dolorem suscipit. Ut illum illum id dolor tempore ut quos voluptatem aut internos molestias quo adipisci ipsum. 33 expedita molestias aut iusto nihil aut nemo optio et cupiditate velit. Et cupiditate omnis ex explicabo fugit in voluptas ducimus et eaque quae et dolor odio aut consectetur rerum nam consequuntur quisquam.

Sed eaque quas sed vitae quae et dolor ratione sed rerum saepe rem sunt rerum.

Rem alias blanditiis Aut delectus quo modi velit a similique assumenda. At nobis natus et natus tenetur est quaerat dolor aut sequi harum sed dignissimos nihil. Ut iure unde et voluptatem enim cum consequatur totam rem veniam maxime ab exercitationem modi ut cumque magni! Eum illo aliquam et vitae earum eos sint mollitia. Non dolor natus est aperiam laudantium aut reiciendis incidunt quia fugit ad earum vero aut quasi rerum et corrupti quibusdam? Et molestiae itaque id voluptatem maxime qui velit fuga eum eius dolorum sit saepe iste id similique consectetur. Et consequatur autem et doloribus nemo quo minima consequatur qui repellendus voluptatum? Aut facilis quaerat ut omnis aperiam Ut eveniet sed neque maxime At voluptas molestiae a sapiente voluptas ex nulla amet. Eos sint ducimus est odit rerum vel dolorem itaque est suscipit architecto non veritatis sequi et voluptatum exercitationem. Vel esse nulla et exercitationem laudantium non assumenda nesciunt? Qui dicta quia vel magni pariatur sit ratione atque qui quia fugiat est eligendi quidem.

Quo repudiandae rerum ea doloribus nihil eos temporibus beatae ab libero nobis aut ullam voluptatem eos totam fuga sit velit sequi. Id consequatur nobis a quae possimus aut nesciunt temporibus! Et iure quod Qui eius sed quas molestias vel quod voluptas! Sit molestiae ipsam In expedita et voluptas sequi! Eos ducimus laudantium et quia reiciendis aut numquam quos sed necessitatibus omnis et exercitationem repudiandae? Ab totam odit aut expedita omnis sit praesentium aliquam est accusantium fugiat qui omnis qui illo dolorem. Sed expedita galisum ut officia reprehenderitet accusamus ad nemo placeat. Ut fugiat totam a facere quaerat et esse corrupti sed dolor pariatur in mollitia necessitatibus.

+

Lorem ipsum dolor sit amet. Fugiat beatae aut fugiat dolores qui consequuntur perferendis et dolores repudiandae. Et ullam maxime sapiente veritatis quo consequatur ducimus. Cum dolor blanditiis Ut ullam ut voluptas neque ea fugiat amet! Et asperiores quam Qui dolor id illum ullam. Qui dolorem autem et soluta nostrum 33 galisum nostrum est exercitationem enim! Et harum animi non obcaecati fuga ut repellendus quas ea perspiciatis ducimus. Aut doloremque animi Et quia et saepe quaerat aut velit incidunt et perferendis voluptatem ex quia voluptas ea accusamus nostrum. Qui commodi laboriosam ad dicta galisum ut tempora unde et dolorem suscipit. Ut illum illum id dolor tempore ut quos voluptatem aut internos molestias quo adipisci ipsum. 33 expedita molestias aut iusto nihil aut nemo optio et cupiditate velit. Et cupiditate omnis ex explicabo fugit in voluptas ducimus et eaque quae et dolor odio aut consectetur rerum nam consequuntur quisquam.

Sed eaque quas sed vitae quae et dolor ratione sed rerum saepe rem sunt rerum.

Rem alias blanditiis Aut delectus quo modi velit a similique assumenda. At nobis natus et natus tenetur est quaerat dolor aut sequi harum sed dignissimos nihil. Ut iure unde et voluptatem enim cum consequatur totam rem veniam maxime ab exercitationem modi ut cumque magni! Eum illo aliquam et vitae earum eos sint mollitia. Non dolor natus est aperiam laudantium aut reiciendis incidunt quia fugit ad earum vero aut quasi rerum et corrupti quibusdam? Et molestiae itaque id voluptatem maxime qui velit fuga eum eius dolorum sit saepe iste id similique consectetur. Et consequatur autem et doloribus nemo quo minima consequatur qui repellendus voluptatum? Aut facilis quaerat ut omnis aperiam Ut eveniet sed neque maxime At voluptas molestiae a sapiente voluptas ex nulla amet. Eos sint ducimus est odit rerum vel dolorem itaque est suscipit architecto non veritatis sequi et voluptatum exercitationem. Vel esse nulla et exercitationem laudantium non assumenda nesciunt? Qui dicta quia vel magni pariatur sit ratione atque qui quia fugiat est eligendi quidem.

Quo repudiandae rerum ea doloribus nihil eos temporibus beatae ab libero nobis aut ullam voluptatem eos totam fuga sit velit sequi. Id consequatur nobis a quae possimus aut nesciunt temporibus! Et iure quod Qui eius sed quas molestias vel quod voluptas! Sit molestiae ipsam In expedita et voluptas sequi! Eos ducimus laudantium et quia reiciendis aut numquam quos sed necessitatibus omnis et exercitationem repudiandae? Ab totam odit aut expedita omnis sit praesentium aliquam est accusantium fugiat qui omnis qui illo dolorem. Sed expedita galisum ut officia reprehenderitet accusamus ad nemo placeat. Ut fugiat totam a facere quaerat et esse corrupti sed dolor pariatur in mollitia necessitatibus.

+ +

Deuxième partie

+ +

Lorem ipsum dolor sit amet. Fugiat beatae aut fugiat dolores qui consequuntur perferendis et dolores repudiandae. Et ullam maxime sapiente veritatis quo consequatur ducimus. Cum dolor blanditiis Ut ullam ut voluptas neque ea fugiat amet! Et asperiores quam Qui dolor id illum ullam. Qui dolorem autem et soluta nostrum 33 galisum nostrum est exercitationem enim! Et harum animi non obcaecati fuga ut repellendus quas ea perspiciatis ducimus. Aut doloremque animi Et quia et saepe quaerat aut velit incidunt et perferendis voluptatem ex quia voluptas ea accusamus nostrum. Qui commodi laboriosam ad dicta galisum ut tempora unde et dolorem suscipit. Ut illum illum id dolor tempore ut quos voluptatem aut internos molestias quo adipisci ipsum. 33 expedita molestias aut iusto nihil aut nemo optio et cupiditate velit. Et cupiditate omnis ex explicabo fugit in voluptas ducimus et eaque quae et dolor odio aut consectetur rerum nam consequuntur quisquam.

Sed eaque quas sed vitae quae et dolor ratione sed rerum saepe rem sunt rerum.

Rem alias blanditiis Aut delectus quo modi velit a similique assumenda. At nobis natus et natus tenetur est quaerat dolor aut sequi harum sed dignissimos nihil. Ut iure unde et voluptatem enim cum consequatur totam rem veniam maxime ab exercitationem modi ut cumque magni! Eum illo aliquam et vitae earum eos sint mollitia. Non dolor natus est aperiam laudantium aut reiciendis incidunt quia fugit ad earum vero aut quasi rerum et corrupti quibusdam? Et molestiae itaque id voluptatem maxime qui velit fuga eum eius dolorum sit saepe iste id similique consectetur. Et consequatur autem et doloribus nemo quo minima consequatur qui repellendus voluptatum? Aut facilis quaerat ut omnis aperiam Ut eveniet sed neque maxime At voluptas molestiae a sapiente voluptas ex nulla amet. Eos sint ducimus est odit rerum vel dolorem itaque est suscipit architecto non veritatis sequi et voluptatum exercitationem. Vel esse nulla et exercitationem laudantium non assumenda nesciunt? Qui dicta quia vel magni pariatur sit ratione atque qui quia fugiat est eligendi quidem.

Quo repudiandae rerum ea doloribus nihil eos temporibus beatae ab libero nobis aut ullam voluptatem eos totam fuga sit velit sequi. Id consequatur nobis a quae possimus aut nesciunt temporibus! Et iure quod Qui eius sed quas molestias vel quod voluptas! Sit molestiae ipsam In expedita et voluptas sequi! Eos ducimus laudantium et quia reiciendis aut numquam quos sed necessitatibus omnis et exercitationem repudiandae? Ab totam odit aut expedita omnis sit praesentium aliquam est accusantium fugiat qui omnis qui illo dolorem. Sed expedita galisum ut officia reprehenderitet accusamus ad nemo placeat. Ut fugiat totam a facere quaerat et esse corrupti sed dolor pariatur in mollitia necessitatibus.

+

Lorem ipsum dolor sit amet. Fugiat beatae aut fugiat dolores qui consequuntur perferendis et dolores repudiandae. Et ullam maxime sapiente veritatis quo consequatur ducimus. Cum dolor blanditiis Ut ullam ut voluptas neque ea fugiat amet! Et asperiores quam Qui dolor id illum ullam. Qui dolorem autem et soluta nostrum 33 galisum nostrum est exercitationem enim! Et harum animi non obcaecati fuga ut repellendus quas ea perspiciatis ducimus. Aut doloremque animi Et quia et saepe quaerat aut velit incidunt et perferendis voluptatem ex quia voluptas ea accusamus nostrum. Qui commodi laboriosam ad dicta galisum ut tempora unde et dolorem suscipit. Ut illum illum id dolor tempore ut quos voluptatem aut internos molestias quo adipisci ipsum. 33 expedita molestias aut iusto nihil aut nemo optio et cupiditate velit. Et cupiditate omnis ex explicabo fugit in voluptas ducimus et eaque quae et dolor odio aut consectetur rerum nam consequuntur quisquam.

Sed eaque quas sed vitae quae et dolor ratione sed rerum saepe rem sunt rerum.

Rem alias blanditiis Aut delectus quo modi velit a similique assumenda. At nobis natus et natus tenetur est quaerat dolor aut sequi harum sed dignissimos nihil. Ut iure unde et voluptatem enim cum consequatur totam rem veniam maxime ab exercitationem modi ut cumque magni! Eum illo aliquam et vitae earum eos sint mollitia. Non dolor natus est aperiam laudantium aut reiciendis incidunt quia fugit ad earum vero aut quasi rerum et corrupti quibusdam? Et molestiae itaque id voluptatem maxime qui velit fuga eum eius dolorum sit saepe iste id similique consectetur. Et consequatur autem et doloribus nemo quo minima consequatur qui repellendus voluptatum? Aut facilis quaerat ut omnis aperiam Ut eveniet sed neque maxime At voluptas molestiae a sapiente voluptas ex nulla amet. Eos sint ducimus est odit rerum vel dolorem itaque est suscipit architecto non veritatis sequi et voluptatum exercitationem. Vel esse nulla et exercitationem laudantium non assumenda nesciunt? Qui dicta quia vel magni pariatur sit ratione atque qui quia fugiat est eligendi quidem.

Quo repudiandae rerum ea doloribus nihil eos temporibus beatae ab libero nobis aut ullam voluptatem eos totam fuga sit velit sequi. Id consequatur nobis a quae possimus aut nesciunt temporibus! Et iure quod Qui eius sed quas molestias vel quod voluptas! Sit molestiae ipsam In expedita et voluptas sequi! Eos ducimus laudantium et quia reiciendis aut numquam quos sed necessitatibus omnis et exercitationem repudiandae? Ab totam odit aut expedita omnis sit praesentium aliquam est accusantium fugiat qui omnis qui illo dolorem. Sed expedita galisum ut officia reprehenderitet accusamus ad nemo placeat. Ut fugiat totam a facere quaerat et esse corrupti sed dolor pariatur in mollitia necessitatibus.

+

Lorem ipsum dolor sit amet. Fugiat beatae aut fugiat dolores qui consequuntur perferendis et dolores repudiandae. Et ullam maxime sapiente veritatis quo consequatur ducimus. Cum dolor blanditiis Ut ullam ut voluptas neque ea fugiat amet! Et asperiores quam Qui dolor id illum ullam. Qui dolorem autem et soluta nostrum 33 galisum nostrum est exercitationem enim! Et harum animi non obcaecati fuga ut repellendus quas ea perspiciatis ducimus. Aut doloremque animi Et quia et saepe quaerat aut velit incidunt et perferendis voluptatem ex quia voluptas ea accusamus nostrum. Qui commodi laboriosam ad dicta galisum ut tempora unde et dolorem suscipit. Ut illum illum id dolor tempore ut quos voluptatem aut internos molestias quo adipisci ipsum. 33 expedita molestias aut iusto nihil aut nemo optio et cupiditate velit. Et cupiditate omnis ex explicabo fugit in voluptas ducimus et eaque quae et dolor odio aut consectetur rerum nam consequuntur quisquam.

Sed eaque quas sed vitae quae et dolor ratione sed rerum saepe rem sunt rerum.

Rem alias blanditiis Aut delectus quo modi velit a similique assumenda. At nobis natus et natus tenetur est quaerat dolor aut sequi harum sed dignissimos nihil. Ut iure unde et voluptatem enim cum consequatur totam rem veniam maxime ab exercitationem modi ut cumque magni! Eum illo aliquam et vitae earum eos sint mollitia. Non dolor natus est aperiam laudantium aut reiciendis incidunt quia fugit ad earum vero aut quasi rerum et corrupti quibusdam? Et molestiae itaque id voluptatem maxime qui velit fuga eum eius dolorum sit saepe iste id similique consectetur. Et consequatur autem et doloribus nemo quo minima consequatur qui repellendus voluptatum? Aut facilis quaerat ut omnis aperiam Ut eveniet sed neque maxime At voluptas molestiae a sapiente voluptas ex nulla amet. Eos sint ducimus est odit rerum vel dolorem itaque est suscipit architecto non veritatis sequi et voluptatum exercitationem. Vel esse nulla et exercitationem laudantium non assumenda nesciunt? Qui dicta quia vel magni pariatur sit ratione atque qui quia fugiat est eligendi quidem.

Quo repudiandae rerum ea doloribus nihil eos temporibus beatae ab libero nobis aut ullam voluptatem eos totam fuga sit velit sequi. Id consequatur nobis a quae possimus aut nesciunt temporibus! Et iure quod Qui eius sed quas molestias vel quod voluptas! Sit molestiae ipsam In expedita et voluptas sequi! Eos ducimus laudantium et quia reiciendis aut numquam quos sed necessitatibus omnis et exercitationem repudiandae? Ab totam odit aut expedita omnis sit praesentium aliquam est accusantium fugiat qui omnis qui illo dolorem. Sed expedita galisum ut officia reprehenderitet accusamus ad nemo placeat. Ut fugiat totam a facere quaerat et esse corrupti sed dolor pariatur in mollitia necessitatibus.

+ + diff --git a/R1.02/tp/tp2/correction/exercice2.html b/R1.02/tp/tp2/correction/exercice2.html new file mode 100644 index 0000000..8d775ce --- /dev/null +++ b/R1.02/tp/tp2/correction/exercice2.html @@ -0,0 +1,83 @@ + + + + + Exercice 2 + + + + + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + + + + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + diff --git a/R1.02/tp/tp2/correction/exercice3.html b/R1.02/tp/tp2/correction/exercice3.html new file mode 100644 index 0000000..e20fbf4 --- /dev/null +++ b/R1.02/tp/tp2/correction/exercice3.html @@ -0,0 +1,85 @@ + + + + + Exercice 3 + + + + + + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + + + + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + + diff --git a/R1.02/tp/tp2/correction/exercice4.html b/R1.02/tp/tp2/correction/exercice4.html new file mode 100644 index 0000000..7a6851d --- /dev/null +++ b/R1.02/tp/tp2/correction/exercice4.html @@ -0,0 +1,53 @@ + + + + + + Exercice 4 + + + +

Emoticons

+ +

+ Emoticons are textual portrayals of a writer's moods or facial + expressions in the form of icons. Originally, these icons + consisted of ASCII art. +

+ +

+ Emoticons can generally be divided into two groups: Western (mainly + from America and Europe) or horizontal; Eastern or vertical (mainly + from east Asia). +

+ +

Western

+ +

+ Western style emoticons are mostly written from left to right as + though the head is rotated counter-clockwise 90 degrees. +

+ + + +

Eastern

+ +

+ Eastern emoticons generally are not rotated sideways. They first + arose in Japan, where they are referred to as kaomoji. +

+ + + + diff --git a/R1.02/tp/tp2/correction/exercice5.html b/R1.02/tp/tp2/correction/exercice5.html new file mode 100644 index 0000000..4b7e8a2 --- /dev/null +++ b/R1.02/tp/tp2/correction/exercice5.html @@ -0,0 +1,85 @@ + + + + + Exercice 5 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Orbites des planètes du Système solaire
PlanèteDistance moyenne (UA)Exentricité Inclinaison  (°)Période de révolution (an)
Mercure0,387098930,20570,241
Venus0,723331990,0073,40,615
Terre10,01701
Mars1,523662310,0941,91,881
Jupiter5,203363010,0491,311,862
Saturne9,60,0572,529,452
Uranus2872,50,897,830,589
Neptune4495,11,828,359,8
+ + diff --git a/R1.02/tp/tp2/correction/exercice6.html b/R1.02/tp/tp2/correction/exercice6.html new file mode 100644 index 0000000..4ac5224 --- /dev/null +++ b/R1.02/tp/tp2/correction/exercice6.html @@ -0,0 +1,20 @@ + + + + + + Exercice 6 + + + + + + + + + + + +
+ + diff --git a/R1.02/tp/tp2/correction/style4.css b/R1.02/tp/tp2/correction/style4.css new file mode 100644 index 0000000..ae629ba --- /dev/null +++ b/R1.02/tp/tp2/correction/style4.css @@ -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; +} + diff --git a/R1.02/tp/tp2/correction/style5.css b/R1.02/tp/tp2/correction/style5.css new file mode 100644 index 0000000..34c07f5 --- /dev/null +++ b/R1.02/tp/tp2/correction/style5.css @@ -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; +} + diff --git a/R1.02/tp/tp2/correction/style6.css b/R1.02/tp/tp2/correction/style6.css new file mode 100644 index 0000000..a54f611 --- /dev/null +++ b/R1.02/tp/tp2/correction/style6.css @@ -0,0 +1,9 @@ +table { + border-collapse: collapse; +} +td { + border:1px solid black; + width:50px; + height:50px; +} + diff --git a/R1.02/tp/tp3/README.md b/R1.02/tp/tp3/README.md new file mode 100644 index 0000000..96debd8 --- /dev/null +++ b/R1.02/tp/tp3/README.md @@ -0,0 +1,129 @@ +# TP CSS +> Vous trouverez une correction du tp1 [ici](../tp1/correction). +> Vous trouverez une correction du tp2 [ici](../tp2/correction). +> Vous trouverez une correction du tp3 [ici](../tp3/correction). + + + +## Exercice 1 : stylisation d'une liste + +Soit le code [html](src/exercice1.html) suivant + +```html +

Mes films préférés de Clint Eastwood

+ +``` + +Donnez une feuille de style pour obtenir la mise en page suivante ; + +![eastwood](./img/eastwood.png) + +> 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 + + + + + Exercice 2 + + +
+
+
+ + +
+ + +``` +Donnez une feuille de style pour obtenir la mise en page suivante : +![eastwood](./img/smiley.png) + +> 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 : selection à l'aide d'attributs. +Soit le code [html](src/exercice3.html) suivant +```html + + + + + Exercice 3 + + + + + +``` +Donnez une feuille de style pour obtenir la mise en page suivante : +![stack](./img/web_stack.png) + +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 (bloc ou en ligne) +> - `font-size` : contrôle la taille de la fonte. +> - `text-align`, `vertical-align` : contrôle l'alignement horizontal et vertical des éléments inline. + +## Exercice 4 : media queries +Soit le code [html](src/exercice4.html) et sa feuille de [style](src/style4.css). + +Lorsque la largeur de l'écran est inférieur à `640px`, le menu n'est plus affiché. + +> Utilisez une requête media `@media`. + +## Exercice 5 : 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. diff --git a/R1.02/tp/tp3/img/eastwood.png b/R1.02/tp/tp3/img/eastwood.png new file mode 100644 index 0000000..3a1ff45 Binary files /dev/null and b/R1.02/tp/tp3/img/eastwood.png differ diff --git a/R1.02/tp/tp3/img/smiley.png b/R1.02/tp/tp3/img/smiley.png new file mode 100644 index 0000000..8e56184 Binary files /dev/null and b/R1.02/tp/tp3/img/smiley.png differ diff --git a/R1.02/tp/tp3/img/web_stack.png b/R1.02/tp/tp3/img/web_stack.png new file mode 100644 index 0000000..58436d1 Binary files /dev/null and b/R1.02/tp/tp3/img/web_stack.png differ diff --git a/R1.02/tp/tp3/src/exercice1.html b/R1.02/tp/tp3/src/exercice1.html new file mode 100644 index 0000000..5be8589 --- /dev/null +++ b/R1.02/tp/tp3/src/exercice1.html @@ -0,0 +1,23 @@ + + + + + + CEastwood + + + +

Mes films préférés de Clint Eastwood

+ + + + diff --git a/R1.02/tp/tp3/src/exercice2.html b/R1.02/tp/tp3/src/exercice2.html new file mode 100644 index 0000000..dc7e3af --- /dev/null +++ b/R1.02/tp/tp3/src/exercice2.html @@ -0,0 +1,15 @@ + + + + + Exercice 2 + + +
+
+
+ + +
+ + diff --git a/R1.02/tp/tp3/src/exercice3.html b/R1.02/tp/tp3/src/exercice3.html new file mode 100644 index 0000000..15feafa --- /dev/null +++ b/R1.02/tp/tp3/src/exercice3.html @@ -0,0 +1,14 @@ + + + + + Exercice 3 + + + + + diff --git a/R1.02/tp/tp3/src/exercice4.html b/R1.02/tp/tp3/src/exercice4.html new file mode 100644 index 0000000..21a28e6 --- /dev/null +++ b/R1.02/tp/tp3/src/exercice4.html @@ -0,0 +1,60 @@ + + + + + + + + Document + + + +
+ +
+
+
+
+

Article title 1

+
+
+ +

lorem ipsum

+
+
+
+
+

Article title 2

+
+
+ +

lorem ipsum

+
+
+
+
+

Article title 3

+
+
+ +

lorem ipsum

+
+
+
+
+

Article title 3

+
+
+ +

lorem ipsum

+
+
+
+ + diff --git a/R1.02/tp/tp3/src/style4.css b/R1.02/tp/tp3/src/style4.css new file mode 100644 index 0000000..b97f333 --- /dev/null +++ b/R1.02/tp/tp3/src/style4.css @@ -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; +}