From 36a670a8713b1c7e317c2f7edb410f5dfa0f7d49 Mon Sep 17 00:00:00 2001 From: HORVILLE Ewen Date: Thu, 2 Dec 2021 21:35:26 +0100 Subject: [PATCH] HTML --- HTML/TP02/exercice1-bis.html | 19 ++++++++ HTML/TP02/exercice1.html | 36 +++++++++++++++ HTML/TP02/exercice2.html | 31 +++++++++++++ HTML/TP02/exercice3.html | 33 ++++++++++++++ HTML/TP02/exercice4-réponse.txt | 9 ++++ HTML/TP02/exercice4.css | 20 +++++++++ HTML/TP02/exercice4.html | 25 +++++++++++ HTML/TP02/exercice5.css | 23 ++++++++++ HTML/TP02/exercice5.html | 80 +++++++++++++++++++++++++++++++++ HTML/TP02/exercice6.css | 4 ++ HTML/TP02/exercice6.html | 17 +++++++ 11 files changed, 297 insertions(+) create mode 100644 HTML/TP02/exercice1-bis.html create mode 100644 HTML/TP02/exercice1.html create mode 100644 HTML/TP02/exercice2.html create mode 100644 HTML/TP02/exercice3.html create mode 100644 HTML/TP02/exercice4-réponse.txt create mode 100644 HTML/TP02/exercice4.css create mode 100644 HTML/TP02/exercice4.html create mode 100644 HTML/TP02/exercice5.css create mode 100644 HTML/TP02/exercice5.html create mode 100644 HTML/TP02/exercice6.css create mode 100644 HTML/TP02/exercice6.html diff --git a/HTML/TP02/exercice1-bis.html b/HTML/TP02/exercice1-bis.html new file mode 100644 index 0000000..b6d2f0f --- /dev/null +++ b/HTML/TP02/exercice1-bis.html @@ -0,0 +1,19 @@ + + + + Lorem Ipsum + + +

Mon deuxième article de blog

+

Ma première partie

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis, est sit amet pellentesque feugiat, tortor ex bibendum ante, non luctus mauris nisi eget leo. Vestibulum justo enim, imperdiet vitae fermentum nec, pellentesque vitae nisl. Pellentesque placerat risus non massa mattis dignissim. In non venenatis diam. Donec sit amet finibus arcu. Nunc elit enim, convallis ut ex ac, euismod congue risus. Suspendisse nibh lectus, facilisis eu commodo at, luctus at urna. Aenean laoreet elit sit amet rhoncus viverra. Sed porta purus a rutrum iaculis. Nunc commodo ex urna, ac faucibus odio posuere vitae. Nam pellentesque tellus eget risus pharetra imperdiet. Maecenas semper feugiat lectus sed rutrum. Cras imperdiet ligula eu ornare bibendum. Phasellus semper arcu quis ex viverra, nec pharetra nunc porttitor. Vivamus tempor tortor metus, vel ornare diam malesuada sit amet. In hac habitasse platea dictumst.

+ +

Nullam sollicitudin lectus eget vestibulum ullamcorper. Fusce non sagittis tortor, in aliquet quam. Nunc convallis lacinia risus id mollis. Praesent enim ex, consectetur et aliquet ac, commodo quis arcu. In faucibus posuere sollicitudin. Fusce ultricies mi sed aliquet ultricies. Cras tempor nunc diam, sed gravida nisl facilisis vitae. Morbi condimentum sodales ex, eu ultricies risus. Integer tincidunt orci ut felis tempus, eu ullamcorper urna imperdiet. Curabitur lectus ante, lobortis vitae pretium a, sodales non sapien. Duis mollis convallis mollis. Nunc pellentesque nisl vel justo placerat porta. Mauris commodo mauris sed felis sagittis, vel commodo diam dictum. Duis iaculis vel sapien eu volutpat. Quisque nec finibus augue.

+ +

Etiam posuere auctor diam eu hendrerit. Aenean vulputate lectus laoreet mi condimentum, eu iaculis ipsum scelerisque. Pellentesque porta nec odio fermentum sodales. Vestibulum id hendrerit sem, at viverra turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam tristique non turpis at auctor. Aenean mattis augue dui, sed sodales elit facilisis sed. Quisque finibus cursus dui. Duis rutrum lectus in ullamcorper lobortis. Ut interdum turpis eu tortor accumsan, at molestie velit tincidunt. Aliquam erat volutpat. Vestibulum convallis pharetra quam sagittis pellentesque. Maecenas euismod libero orci, ac laoreet felis laoreet in. Curabitur at dui neque.

+ +

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris vehicula ex eu odio efficitur, in rutrum arcu pulvinar. Donec blandit semper est a suscipit. Quisque maximus felis a elit tempor, vitae ultrices quam laoreet. In in luctus mauris, ut tincidunt nulla. Sed a ipsum fringilla, tincidunt tortor ac, porttitor sapien. Quisque ultrices dignissim dui, ut congue nisi pharetra sit amet. Morbi id feugiat mi, non bibendum lorem. Donec mauris augue, vulputate non nisi non, ultricies faucibus magna. Nam in eleifend magna. Phasellus ac odio pulvinar, dictum ipsum id, tempus turpis. Vestibulum id nibh risus.

+ +

Duis sollicitudin mollis sollicitudin. Vestibulum consequat maximus eros et efficitur. Nulla porttitor blandit nisl aliquam tincidunt. Duis gravida id lacus eu condimentum. Pellentesque faucibus varius erat vitae blandit. Etiam efficitur dolor in velit hendrerit, id elementum arcu rutrum. Vivamus fermentum justo quis felis sagittis pharetra. Proin lacus dui, sollicitudin tempor augue a, suscipit suscipit purus. Ut sit amet euismod lorem. Sed sit amet dignissim dolor. Integer at neque consequat, varius metus vitae, rhoncus massa.

+ + \ No newline at end of file diff --git a/HTML/TP02/exercice1.html b/HTML/TP02/exercice1.html new file mode 100644 index 0000000..99f9c77 --- /dev/null +++ b/HTML/TP02/exercice1.html @@ -0,0 +1,36 @@ + + + + Lorem Ipsum + + + Partie 1 +
+ Partie 2 +
+ Partie 3 + +

Mon article de blog

+

Ma première partie

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis, est sit amet pellentesque feugiat, tortor ex bibendum ante, non luctus mauris nisi eget leo. Vestibulum justo enim, imperdiet vitae fermentum nec, pellentesque vitae nisl. Pellentesque placerat risus non massa mattis dignissim. In non venenatis diam. Donec sit amet finibus arcu. Nunc elit enim, convallis ut ex ac, euismod congue risus. Suspendisse nibh lectus, facilisis eu commodo at, luctus at urna. Aenean laoreet elit sit amet rhoncus viverra. Sed porta purus a rutrum iaculis. Nunc commodo ex urna, ac faucibus odio posuere vitae. Nam pellentesque tellus eget risus pharetra imperdiet. Maecenas semper feugiat lectus sed rutrum. Cras imperdiet ligula eu ornare bibendum. Phasellus semper arcu quis ex viverra, nec pharetra nunc porttitor. Vivamus tempor tortor metus, vel ornare diam malesuada sit amet. In hac habitasse platea dictumst.

+ +

Nullam sollicitudin lectus eget vestibulum ullamcorper. Fusce non sagittis tortor, in aliquet quam. Nunc convallis lacinia risus id mollis. Praesent enim ex, consectetur et aliquet ac, commodo quis arcu. In faucibus posuere sollicitudin. Fusce ultricies mi sed aliquet ultricies. Cras tempor nunc diam, sed gravida nisl facilisis vitae. Morbi condimentum sodales ex, eu ultricies risus. Integer tincidunt orci ut felis tempus, eu ullamcorper urna imperdiet. Curabitur lectus ante, lobortis vitae pretium a, sodales non sapien. Duis mollis convallis mollis. Nunc pellentesque nisl vel justo placerat porta. Mauris commodo mauris sed felis sagittis, vel commodo diam dictum. Duis iaculis vel sapien eu volutpat. Quisque nec finibus augue.

+ +

Etiam posuere auctor diam eu hendrerit. Aenean vulputate lectus laoreet mi condimentum, eu iaculis ipsum scelerisque. Pellentesque porta nec odio fermentum sodales. Vestibulum id hendrerit sem, at viverra turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam tristique non turpis at auctor. Aenean mattis augue dui, sed sodales elit facilisis sed. Quisque finibus cursus dui. Duis rutrum lectus in ullamcorper lobortis. Ut interdum turpis eu tortor accumsan, at molestie velit tincidunt. Aliquam erat volutpat. Vestibulum convallis pharetra quam sagittis pellentesque. Maecenas euismod libero orci, ac laoreet felis laoreet in. Curabitur at dui neque.

+ +

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris vehicula ex eu odio efficitur, in rutrum arcu pulvinar. Donec blandit semper est a suscipit. Quisque maximus felis a elit tempor, vitae ultrices quam laoreet. In in luctus mauris, ut tincidunt nulla. Sed a ipsum fringilla, tincidunt tortor ac, porttitor sapien. Quisque ultrices dignissim dui, ut congue nisi pharetra sit amet. Morbi id feugiat mi, non bibendum lorem. Donec mauris augue, vulputate non nisi non, ultricies faucibus magna. Nam in eleifend magna. Phasellus ac odio pulvinar, dictum ipsum id, tempus turpis. Vestibulum id nibh risus.

+ +

Duis sollicitudin mollis sollicitudin. Vestibulum consequat maximus eros et efficitur. Nulla porttitor blandit nisl aliquam tincidunt. Duis gravida id lacus eu condimentum. Pellentesque faucibus varius erat vitae blandit. Etiam efficitur dolor in velit hendrerit, id elementum arcu rutrum. Vivamus fermentum justo quis felis sagittis pharetra. Proin lacus dui, sollicitudin tempor augue a, suscipit suscipit purus. Ut sit amet euismod lorem. Sed sit amet dignissim dolor. Integer at neque consequat, varius metus vitae, rhoncus massa.

+ +

Ma deuxième partie

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis, est sit amet pellentesque feugiat, tortor ex bibendum ante, non luctus mauris nisi eget leo. Vestibulum justo enim, imperdiet vitae fermentum nec, pellentesque vitae nisl. Pellentesque placerat risus non massa mattis dignissim. In non venenatis diam. Donec sit amet finibus arcu. Nunc elit enim, convallis ut ex ac, euismod congue risus. Suspendisse nibh lectus, facilisis eu commodo at, luctus at urna. Aenean laoreet elit sit amet rhoncus viverra. Sed porta purus a rutrum iaculis. Nunc commodo ex urna, ac faucibus odio posuere vitae. Nam pellentesque tellus eget risus pharetra imperdiet. Maecenas semper feugiat lectus sed rutrum. Cras imperdiet ligula eu ornare bibendum. Phasellus semper arcu quis ex viverra, nec pharetra nunc porttitor. Vivamus tempor tortor metus, vel ornare diam malesuada sit amet. In hac habitasse platea dictumst.

+ +

Nullam sollicitudin lectus eget vestibulum ullamcorper. Fusce non sagittis tortor, in aliquet quam. Nunc convallis lacinia risus id mollis. Praesent enim ex, consectetur et aliquet ac, commodo quis arcu. In faucibus posuere sollicitudin. Fusce ultricies mi sed aliquet ultricies. Cras tempor nunc diam, sed gravida nisl facilisis vitae. Morbi condimentum sodales ex, eu ultricies risus. Integer tincidunt orci ut felis tempus, eu ullamcorper urna imperdiet. Curabitur lectus ante, lobortis vitae pretium a, sodales non sapien. Duis mollis convallis mollis. Nunc pellentesque nisl vel justo placerat porta. Mauris commodo mauris sed felis sagittis, vel commodo diam dictum. Duis iaculis vel sapien eu volutpat. Quisque nec finibus augue.

+ +

Etiam posuere auctor diam eu hendrerit. Aenean vulputate lectus laoreet mi condimentum, eu iaculis ipsum scelerisque. Pellentesque porta nec odio fermentum sodales. Vestibulum id hendrerit sem, at viverra turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam tristique non turpis at auctor. Aenean mattis augue dui, sed sodales elit facilisis sed. Quisque finibus cursus dui. Duis rutrum lectus in ullamcorper lobortis. Ut interdum turpis eu tortor accumsan, at molestie velit tincidunt. Aliquam erat volutpat. Vestibulum convallis pharetra quam sagittis pellentesque. Maecenas euismod libero orci, ac laoreet felis laoreet in. Curabitur at dui neque.

+ +

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris vehicula ex eu odio efficitur, in rutrum arcu pulvinar. Donec blandit semper est a suscipit. Quisque maximus felis a elit tempor, vitae ultrices quam laoreet. In in luctus mauris, ut tincidunt nulla. Sed a ipsum fringilla, tincidunt tortor ac, porttitor sapien. Quisque ultrices dignissim dui, ut congue nisi pharetra sit amet. Morbi id feugiat mi, non bibendum lorem. Donec mauris augue, vulputate non nisi non, ultricies faucibus magna. Nam in eleifend magna. Phasellus ac odio pulvinar, dictum ipsum id, tempus turpis. Vestibulum id nibh risus.

+ +

Duis sollicitudin mollis sollicitudin. Vestibulum consequat maximus eros et efficitur. Nulla porttitor blandit nisl aliquam tincidunt. Duis gravida id lacus eu condimentum. Pellentesque faucibus varius erat vitae blandit. Etiam efficitur dolor in velit hendrerit, id elementum arcu rutrum. Vivamus fermentum justo quis felis sagittis pharetra. Proin lacus dui, sollicitudin tempor augue a, suscipit suscipit purus. Ut sit amet euismod lorem. Sed sit amet dignissim dolor. Integer at neque consequat, varius metus vitae, rhoncus massa.

+ + \ No newline at end of file diff --git a/HTML/TP02/exercice2.html b/HTML/TP02/exercice2.html new file mode 100644 index 0000000..195506a --- /dev/null +++ b/HTML/TP02/exercice2.html @@ -0,0 +1,31 @@ + + + + Formulaire + + +

Formulaire

+
+
+
+
+
+
+
+ + + +
+
+
+

+ +
+ + \ No newline at end of file diff --git a/HTML/TP02/exercice3.html b/HTML/TP02/exercice3.html new file mode 100644 index 0000000..e968918 --- /dev/null +++ b/HTML/TP02/exercice3.html @@ -0,0 +1,33 @@ + + + + Formulaire + + +

Formulaire

+
+
+
+
+
+
+
+ + + +
+
+
+

+ +
+ + \ No newline at end of file diff --git a/HTML/TP02/exercice4-réponse.txt b/HTML/TP02/exercice4-réponse.txt new file mode 100644 index 0000000..fb0742d --- /dev/null +++ b/HTML/TP02/exercice4-réponse.txt @@ -0,0 +1,9 @@ +Le code CSS change le style par défaut des éléments suivants : + + * Tous les éléments de texte inclus dans body auront comme police : "sans-serif" + + * Les titres h1 seront en plus d'être en "sans-serif", en petites majuscules. + + * Les titres h2 auront une couleur d'arrière plan de #aaaaaa, une marge de 10 pixels et seront en italique. + + * Les éléments span seront en monospace gras et auront comme couleur (pas d'arrière plan) #aa4512. \ No newline at end of file diff --git a/HTML/TP02/exercice4.css b/HTML/TP02/exercice4.css new file mode 100644 index 0000000..713648d --- /dev/null +++ b/HTML/TP02/exercice4.css @@ -0,0 +1,20 @@ +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; +} \ No newline at end of file diff --git a/HTML/TP02/exercice4.html b/HTML/TP02/exercice4.html new file mode 100644 index 0000000..41674d3 --- /dev/null +++ b/HTML/TP02/exercice4.html @@ -0,0 +1,25 @@ + + + + Emoticons + + + +

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.

+ +

Smiley: :‑) :->
Tongue-tied: :‑&
Broken heart: <\3
Rose: @}->--
Fish: ><(((*>

+ +

Eastern

+

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

+ +

Troubled: (>_<)
Sad: ("_")
Cat: (=^·^=)
Headphones: ((d[-_-]b))

+ + \ No newline at end of file diff --git a/HTML/TP02/exercice5.css b/HTML/TP02/exercice5.css new file mode 100644 index 0000000..78fee57 --- /dev/null +++ b/HTML/TP02/exercice5.css @@ -0,0 +1,23 @@ +body { + font-family: sans-serif; +} + +h1 { + font-size: 15px; + font-variant: small-caps; +} + +thead { + border-color: #000000; +} + +th { + font-size: 15px; + font-variant: small-caps; + border-top: 2px solid rgb(0, 0, 0); + border-bottom: 2px solid rgb(0, 0, 0); +} + +td { + border-bottom: 1px solid rgb(190,190,190); +} \ No newline at end of file diff --git a/HTML/TP02/exercice5.html b/HTML/TP02/exercice5.html new file mode 100644 index 0000000..d1f5a38 --- /dev/null +++ b/HTML/TP02/exercice5.html @@ -0,0 +1,80 @@ + + + + + Le Système Solaire + + + +

Les 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
+ + \ No newline at end of file diff --git a/HTML/TP02/exercice6.css b/HTML/TP02/exercice6.css new file mode 100644 index 0000000..19d3ce3 --- /dev/null +++ b/HTML/TP02/exercice6.css @@ -0,0 +1,4 @@ +td { + border: 1px solid rgb(0, 0, 0); + +} \ No newline at end of file diff --git a/HTML/TP02/exercice6.html b/HTML/TP02/exercice6.html new file mode 100644 index 0000000..6af667d --- /dev/null +++ b/HTML/TP02/exercice6.html @@ -0,0 +1,17 @@ + + + + Tableau + + + + + + + + +
+ +
+ + \ No newline at end of file