diff --git a/1NSI/01_Web_HTML_CSS/exercises.tex b/1NSI/01_Web_HTML_CSS/exercises.tex index b0f08d6..6fe2542 100644 --- a/1NSI/01_Web_HTML_CSS/exercises.tex +++ b/1NSI/01_Web_HTML_CSS/exercises.tex @@ -7,7 +7,7 @@ \end{exercise} \begin{exercise}[subtitle={Écrire des pages HTML}, step={1}, origin={Ma tête}, topics={ Web HTML}, tags={ Web }] - En vous basant sur les documents reproduire chacun des exemples ci-dessous en partant de la \texttt{page\_blanche.html}. + En vous basant sur les documents pdf, reproduire chacun des exemples ci-dessous en partant de la \texttt{page\_blanche.html}. \begin{multicols}{2} \begin{enumerate} \item header et paragraphes @@ -31,3 +31,19 @@ \end{exercise} % ---- CSS +\begin{exercise}[subtitle={Modifier une feuille de style CSS}, step={2}, origin={Ma tête}, topics={ Web HTML}, tags={ Web }] + \begin{enumerate} + \item Copier tous les fichiers du dossier \texttt{page\_CSS} puis modifier uniquement le fichier \texttt{style.css} pour que la page ressemble au rendu du pdf. + \item Trouver la ligne de la page HTML qui permet d'importer le fichier \texttt{style.css}. + \item Expliquer comment marche une feuille de style CSS. + \end{enumerate} +\end{exercise} + +\begin{exercise}[subtitle={}, step={2}, origin={Ma tête}, topics={ Web HTML}, tags={ Web }] + En vous basant sur les documents pdf, reproduire chacun des exemples ci-dessous en partant de la \texttt{page\_style.html}. + \begin{enumerate} + \item Sélection par balises + \item Sélection par les sélecteurs + \item Mise en page + \end{enumerate} +\end{exercise} diff --git a/1NSI/01_Web_HTML_CSS/page_CSS/220px-Richard_Stallman_2005_(chrys).jpg b/1NSI/01_Web_HTML_CSS/page_CSS/220px-Richard_Stallman_2005_(chrys).jpg new file mode 100644 index 0000000..763e3e8 Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/page_CSS/220px-Richard_Stallman_2005_(chrys).jpg differ diff --git a/1NSI/01_Web_HTML_CSS/page_CSS/page_CSS.html b/1NSI/01_Web_HTML_CSS/page_CSS/page_CSS.html new file mode 100644 index 0000000..e91fb2e --- /dev/null +++ b/1NSI/01_Web_HTML_CSS/page_CSS/page_CSS.html @@ -0,0 +1,87 @@ + + + + + + + + Un exemple de page web en HTML5 + + + + +

Page de présentation pour le CSS

+
+

Des paragraphes

+ +

Un paragraphe.

+ +

Un deuxième paragraphe. + Il n'y a pas de saut de ligne.

+ +

Un troisième paragraphe.
Avec un saut de ligne.

+ +

Un mot en gras, en italique.

+
+ +
+

Une liste :

+ + +
+ +
+

Une table :

+ + + + + + + + + + + + + + + + + + + + + + + +
Courant (A)Tension (V)Puissance (W)
1,05,05,0
2,015,030,0
3,020,060,0
+
+ + + +
+

Richard Stallman

+

Une photo de Richard Stallman (située sur le site web de Wikipédia).

+ +
+ + + + diff --git a/1NSI/01_Web_HTML_CSS/page_CSS/page_CSS_mod.pdf b/1NSI/01_Web_HTML_CSS/page_CSS/page_CSS_mod.pdf new file mode 100644 index 0000000..3972688 Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/page_CSS/page_CSS_mod.pdf differ diff --git a/1NSI/01_Web_HTML_CSS/page_CSS/style.css b/1NSI/01_Web_HTML_CSS/page_CSS/style.css new file mode 100644 index 0000000..53ced1d --- /dev/null +++ b/1NSI/01_Web_HTML_CSS/page_CSS/style.css @@ -0,0 +1,39 @@ +body { + text-align: center; +} + +a { + color: red; + border: 2px solid black; +} + +li { + display: inline; +} + +table { + border: 3px solid blue; +} + +.balise { + background-color: lightblue; + text-align: left; + width: 33%; + margin-left: auto; + margin-right: auto; + color: green; +} + +#link { + background-color: lightgrey; +} + +#richard { + color: lightgrey; + background-image: url("./220px-Richard_Stallman_2005_(chrys).jpg"); + background-color: #cccccc; /* Used if the image is unavailable */ + height: 500px; /* You must set a specified height */ + background-position: center; /* Center the image */ + background-repeat: no-repeat; /* Do not repeat the image */ + background-size: cover; +} diff --git a/1NSI/01_Web_HTML_CSS/plan_de_travail.pdf b/1NSI/01_Web_HTML_CSS/plan_de_travail.pdf index 2023ca3..d9e414d 100644 Binary files a/1NSI/01_Web_HTML_CSS/plan_de_travail.pdf and b/1NSI/01_Web_HTML_CSS/plan_de_travail.pdf differ diff --git a/1NSI/01_Web_HTML_CSS/plan_de_travail.tex b/1NSI/01_Web_HTML_CSS/plan_de_travail.tex index 00f8366..1b4b386 100644 --- a/1NSI/01_Web_HTML_CSS/plan_de_travail.tex +++ b/1NSI/01_Web_HTML_CSS/plan_de_travail.tex @@ -4,7 +4,7 @@ \author{Benjamin Bertrand} \title{Web HTML CSS - Plan de travail} \tribe{1NSI} -\date{juillet 2022} +\date{Septembre 2022} \pagestyle{empty} @@ -38,6 +38,10 @@ Ordre des étapes à respecter \listsectionexercises +\section{CSS} + +\listsectionexercises + \pagebreak diff --git a/1NSI/01_Web_HTML_CSS/reprodution_css/assets/brutal-helm.png b/1NSI/01_Web_HTML_CSS/reprodution_css/assets/brutal-helm.png new file mode 100644 index 0000000..fa00882 Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/reprodution_css/assets/brutal-helm.png differ diff --git a/1NSI/01_Web_HTML_CSS/reprodution_css/assets/crossbow.png b/1NSI/01_Web_HTML_CSS/reprodution_css/assets/crossbow.png new file mode 100644 index 0000000..c4bd6be Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/reprodution_css/assets/crossbow.png differ diff --git a/1NSI/01_Web_HTML_CSS/reprodution_css/assets/flame.png b/1NSI/01_Web_HTML_CSS/reprodution_css/assets/flame.png new file mode 100644 index 0000000..1737a0b Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/reprodution_css/assets/flame.png differ diff --git a/1NSI/01_Web_HTML_CSS/reprodution_css/assets/mite-alt.png b/1NSI/01_Web_HTML_CSS/reprodution_css/assets/mite-alt.png new file mode 100644 index 0000000..957f2ab Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/reprodution_css/assets/mite-alt.png differ diff --git a/1NSI/01_Web_HTML_CSS/reprodution_css/assets/spider-alt.png b/1NSI/01_Web_HTML_CSS/reprodution_css/assets/spider-alt.png new file mode 100644 index 0000000..8bcc703 Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/reprodution_css/assets/spider-alt.png differ diff --git a/1NSI/01_Web_HTML_CSS/reprodution_css/assets/spider-face.png b/1NSI/01_Web_HTML_CSS/reprodution_css/assets/spider-face.png new file mode 100644 index 0000000..382aa23 Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/reprodution_css/assets/spider-face.png differ diff --git a/1NSI/01_Web_HTML_CSS/reprodution_css/page_style.html b/1NSI/01_Web_HTML_CSS/reprodution_css/page_style.html new file mode 100644 index 0000000..18b3af3 --- /dev/null +++ b/1NSI/01_Web_HTML_CSS/reprodution_css/page_style.html @@ -0,0 +1,62 @@ + + + + + + Une belle page + + + +
+

Une belle page

+
+
+

Première partie

+

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

+

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

+
+ +
+

Deuxième partie

+

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

+
+ spider + spider face + mite-alt +
+
+ + +
+

Troisième partie

+ +
+ +
+

Quatrième partie

+ +
+ Flame + Crossbow + helm +
+
+ + + + + diff --git a/1NSI/01_Web_HTML_CSS/solutions/page_CSS/220px-Richard_Stallman_2005_(chrys).jpg b/1NSI/01_Web_HTML_CSS/solutions/page_CSS/220px-Richard_Stallman_2005_(chrys).jpg new file mode 100644 index 0000000..763e3e8 Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/solutions/page_CSS/220px-Richard_Stallman_2005_(chrys).jpg differ diff --git a/1NSI/01_Web_HTML_CSS/solutions/page_CSS/page_CSS.html b/1NSI/01_Web_HTML_CSS/solutions/page_CSS/page_CSS.html new file mode 100644 index 0000000..e91fb2e --- /dev/null +++ b/1NSI/01_Web_HTML_CSS/solutions/page_CSS/page_CSS.html @@ -0,0 +1,87 @@ + + + + + + + + Un exemple de page web en HTML5 + + + + +

Page de présentation pour le CSS

+
+

Des paragraphes

+ +

Un paragraphe.

+ +

Un deuxième paragraphe. + Il n'y a pas de saut de ligne.

+ +

Un troisième paragraphe.
Avec un saut de ligne.

+ +

Un mot en gras, en italique.

+
+ +
+

Une liste :

+ + +
+ +
+

Une table :

+ + + + + + + + + + + + + + + + + + + + + + + +
Courant (A)Tension (V)Puissance (W)
1,05,05,0
2,015,030,0
3,020,060,0
+
+ + + +
+

Richard Stallman

+

Une photo de Richard Stallman (située sur le site web de Wikipédia).

+ +
+ + + + diff --git a/1NSI/01_Web_HTML_CSS/solutions/page_CSS/style.css b/1NSI/01_Web_HTML_CSS/solutions/page_CSS/style.css new file mode 100644 index 0000000..77cd052 --- /dev/null +++ b/1NSI/01_Web_HTML_CSS/solutions/page_CSS/style.css @@ -0,0 +1,46 @@ +body { + text-align: center; +} + +a { + color: green; +} + +li { + display: inline; +} + +table { + border: 1px solid black; +} + +.balise { + background-color: lightgray; + text-align: left; + width: 50%; + margin-left: auto; + margin-right: auto; + color: darkgrey; +} + +#link { + background-color: lightgrey; +} + +h1 { + color: lightgrey; + background-image: url("./220px-Richard_Stallman_2005_(chrys).jpg"); + background-color: #cccccc; /* Used if the image is unavailable */ + height: 300px; /* You must set a specified height */ + background-position: center; /* Center the image */ + background-repeat: no-repeat; /* Do not repeat the image */ + background-size: cover; +} + +h2 { + color: black; +} + +#richard { + display: none; +} diff --git a/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/assets/brutal-helm.png b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/assets/brutal-helm.png new file mode 100644 index 0000000..fa00882 Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/assets/brutal-helm.png differ diff --git a/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/assets/crossbow.png b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/assets/crossbow.png new file mode 100644 index 0000000..c4bd6be Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/assets/crossbow.png differ diff --git a/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/assets/flame.png b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/assets/flame.png new file mode 100644 index 0000000..1737a0b Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/assets/flame.png differ diff --git a/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/assets/mite-alt.png b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/assets/mite-alt.png new file mode 100644 index 0000000..957f2ab Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/assets/mite-alt.png differ diff --git a/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/assets/spider-alt.png b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/assets/spider-alt.png new file mode 100644 index 0000000..8bcc703 Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/assets/spider-alt.png differ diff --git a/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/assets/spider-face.png b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/assets/spider-face.png new file mode 100644 index 0000000..382aa23 Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/assets/spider-face.png differ diff --git a/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/page_style.html b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/page_style.html new file mode 100644 index 0000000..0284427 --- /dev/null +++ b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/page_style.html @@ -0,0 +1,63 @@ + + + + + + + Une belle page + + +
+

Une belle page

+
+ +
+

Première partie

+

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

+

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

+
+ +
+

Deuxième partie

+

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

+
+ spider + spider face + mite-alt +
+
+ + +
+

Troisième partie

+ +
+ +
+

Quatrième partie

+ +
+ Flame + Crossbow + helm +
+
+ + + + + diff --git a/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/page_style_balise.html b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/page_style_balise.html new file mode 100644 index 0000000..264ced2 --- /dev/null +++ b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/page_style_balise.html @@ -0,0 +1,63 @@ + + + + + + + Une belle page + + +
+

Une belle page

+
+ +
+

Première partie

+

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

+

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

+
+ +
+

Deuxième partie

+

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

+
+ spider + spider face + mite-alt +
+
+ + +
+

Troisième partie

+ +
+ +
+

Quatrième partie

+ +
+ Flame + Crossbow + helm +
+
+ + + + + diff --git a/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/page_style_selecteurs.html b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/page_style_selecteurs.html new file mode 100644 index 0000000..c1601ee --- /dev/null +++ b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/page_style_selecteurs.html @@ -0,0 +1,63 @@ + + + + + + + Une belle page + + +
+

Une belle page

+
+ +
+

Première partie

+

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

+

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

+
+ +
+

Deuxième partie

+

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

+
+ spider + spider face + mite-alt +
+
+ + +
+

Troisième partie

+ +
+ +
+

Quatrième partie

+ +
+ Flame + Crossbow + helm +
+
+ + + + + diff --git a/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/style_balise.css b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/style_balise.css new file mode 100644 index 0000000..4d28ba9 --- /dev/null +++ b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/style_balise.css @@ -0,0 +1,23 @@ +nav { + background-color: red; +} + +header { + background-color: yellow; +} + +section { + background-color: blue; +} + +footer { + background-color: green; +} + +section { + text-align: center; +} + +img { + width: 100px; +} diff --git a/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/style_selecteurs.css b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/style_selecteurs.css new file mode 100644 index 0000000..9307c97 --- /dev/null +++ b/1NSI/01_Web_HTML_CSS/solutions/reprodution_css/style_selecteurs.css @@ -0,0 +1,24 @@ +#section1 { + color: blue; +} + +#section2 { + color: green; +} + +#section3 { + color: red; +} + +#section4 { + color: yellow; +} + +.images { + background-color: blue; + text-align: center; +} + +img { + height: 200px; +}