diff options
Diffstat (limited to 'sem_3/SiteWeb')
31 files changed, 615 insertions, 0 deletions
diff --git a/sem_3/SiteWeb/index.html b/sem_3/SiteWeb/index.html new file mode 100644 index 0000000..370365f --- /dev/null +++ b/sem_3/SiteWeb/index.html @@ -0,0 +1,21 @@ + +<!DOCTYPE html> +<html lang="fr"> + <head> + <meta charset="utf-8"> + <title>Gaspard Coulet</title> + <link rel="stylesheet" href="./style.css"> + </head> + <body> + <h1 id="titre"> Site Web réalisé dans le cadre de l'enseignement de culture generale</br> outils de base en informatique</h1> + <div class="Cadre"> + <a class="lien" href="./tp1/index.html"><img class="image" alt="Image du premer site web realisé en TP" src="photo1.png">TP1</a> + <a class="lien" href="./tp2/index.html"><img class="image" src="photo2.png" alt="Image du second site web realisé en TP">TP2</a> + <a class="lien" href="./tp3/index.html"><img class="image" src="photo3.png" alt="Image d'une des page traitement de texte realisées en TP">TP3</a> + <a class="lien" href="./tp4/index.html"><img src="photo4.png" class="image" alt="Image des classeurs realisés en TP">TP4</a> + <a class="lien" href="./tp5/index.html"><img src="photo5.jpg" class="image" alt="Image du diapo realisée en TP">TP5</a> + </div> + <div class="Cadre"><p></p></div> + <footer> <p> Par : Gaspard Coulet</p><p> Contact : <a href="mailto:gaspard.coulet@etu.umontpellier.fr"> gaspard.coulet@etu.umontpellier.fr</p></footer> + </body> +</html> diff --git a/sem_3/SiteWeb/photo.png b/sem_3/SiteWeb/photo.png Binary files differnew file mode 100644 index 0000000..8ed1b43 --- /dev/null +++ b/sem_3/SiteWeb/photo.png diff --git a/sem_3/SiteWeb/photo1.png b/sem_3/SiteWeb/photo1.png Binary files differnew file mode 100644 index 0000000..394fd84 --- /dev/null +++ b/sem_3/SiteWeb/photo1.png diff --git a/sem_3/SiteWeb/photo2.png b/sem_3/SiteWeb/photo2.png Binary files differnew file mode 100644 index 0000000..87fdde8 --- /dev/null +++ b/sem_3/SiteWeb/photo2.png diff --git a/sem_3/SiteWeb/photo3.png b/sem_3/SiteWeb/photo3.png Binary files differnew file mode 100644 index 0000000..ddfefb7 --- /dev/null +++ b/sem_3/SiteWeb/photo3.png diff --git a/sem_3/SiteWeb/photo4.png b/sem_3/SiteWeb/photo4.png Binary files differnew file mode 100644 index 0000000..9bdcfa9 --- /dev/null +++ b/sem_3/SiteWeb/photo4.png diff --git a/sem_3/SiteWeb/photo5.jpg b/sem_3/SiteWeb/photo5.jpg Binary files differnew file mode 100644 index 0000000..53695c3 --- /dev/null +++ b/sem_3/SiteWeb/photo5.jpg diff --git a/sem_3/SiteWeb/photo5.png b/sem_3/SiteWeb/photo5.png Binary files differnew file mode 100644 index 0000000..21c1261 --- /dev/null +++ b/sem_3/SiteWeb/photo5.png diff --git a/sem_3/SiteWeb/style.css b/sem_3/SiteWeb/style.css new file mode 100644 index 0000000..afef246 --- /dev/null +++ b/sem_3/SiteWeb/style.css @@ -0,0 +1,103 @@ +html{ + height: 100%; +} +body { + background-color: rgb(100, 100, 100); + position: relative; + height: 100%; +} +.Cadre { + background-color: rgb(50,50,50); + border-radius: 10px; + width:75%; + text-align:left; + margin:auto; + margin-top: 2%; + padding:1% 1% 1% 1%; + color:White; +} +.image { + width: 97%; + margin-top : 2%; +} +footer { + text-align:left; + position: absolute; + color:White; + left:0; + width: 99.5%; + margin-top:2%; + background-color: rgb(30,30,30); + border-radius:10px; + padding-left:1%; +} +.lien { + display: inline-block; + width: 17%; + height: 98%; + text-align: center; + padding: auto; + margin: 1% 1% 1% 1%; + background-color: rgb(30,30,30); + border-radius: 5px; +} +.lientp1 { + display: inline-block; + width: 30%; + height: 98%; + text-align: center; + padding: auto; + margin: 1% 1% 1% 1%; + background-color: rgb(30,30,30); + border-radius: 5px; +} +.lientp2 { + display: inline-block; + width: 30%; + height: 98%; + text-align: center; + padding: auto; + margin: 1% 1% 1% 1%; + background-color: rgb(30,30,30); + border-radius: 5px; +} +.lientp3 { + display: inline-block; + width: 47%; + height: 98%; + text-align: center; + padding: auto; + margin: 1% 1% 1% 1%; + background-color: rgb(30,30,30); + border-radius: 5px; +} +.lientp4 { + display: inline-block; + width: 47%; + height: 98%; + text-align: center; + padding: auto; + margin: 1% 1% 1% 1%; + background-color: rgb(30,30,30); + border-radius: 5px; +} +.lientp5 { + display: inline-block; + width: 30%; + height: 98%; + text-align: center; + padding: auto; + margin: 1% 1% 1% 1%; + background-color: rgb(30,30,30); + border-radius: 5px; +} +#titre { + background-color:rgb(80,80,80); + border-radius: 10px; + margin:auto; + padding:1% 1% 1% 1%; + text-align: center; + width:66%; + color: White; + text-decoration:underline; +} diff --git a/sem_3/SiteWeb/tp1/Thumbs.db b/sem_3/SiteWeb/tp1/Thumbs.db Binary files differnew file mode 100644 index 0000000..8442228 --- /dev/null +++ b/sem_3/SiteWeb/tp1/Thumbs.db diff --git a/sem_3/SiteWeb/tp1/index.html b/sem_3/SiteWeb/tp1/index.html new file mode 100644 index 0000000..12209d4 --- /dev/null +++ b/sem_3/SiteWeb/tp1/index.html @@ -0,0 +1,43 @@ +<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="utf-8">
+ <title>Gaspard Coulet</title>
+ <link rel="stylesheet" href="../style.css">
+</head>
+<body>
+ <h1 id="titre"> TP1</h1>
+ <div class="Cadre">
+ <a class="lientp1" href="../index.html"><img class="image" alt="Image de l'acceuil" src="../photo.png">Acceuil</a>
+ <a class="lientp1" href="./pp.html" target = "_blank"><img class="image" alt="Image du premer site web realisé en TP1" src="../photo1.png">Site 1</a>
+ <a class="lientp1" href="./table.html" target = "_blank"><img class="image" src="./phototable.png" alt="Image du second site web realisé en TP1">Site tableau</a>
+ </div>
+ <div class="Cadre">
+ <h2> Notes et réponses aux questions :</h2><p>La commande tree affiche l'arborescence des fichiers du repertoire courant ( récursif ), avec le parametre
+ a, affiche aussi les fichiers cachés, avec le parametre d, affiche seulement les dossiers.</p>
+ <p>
+ La commande cd permet de se deplacer dans le systeme de fichier.
+ ".." est un raccourci pour acceder au repertoire parent dans l'arborescence.
+ Le parametre a de la commande ls permet d'afficher les fichiers cachés.
+ </p><p>
+ "for lettre in {a..e}; do for annee in {2010..2015}; do mkdir "archiveÂ-$lettre-Â$annee" ; done; done"
+ créée 25 dossiers nommés selon le type "archive-a-2010" jusqu'à "archive-e-2015".
+ </p><p>
+ Afin de trouver un fichier commencant par la lettre a et ne comprenant pas la lettre e, on utilisera la
+ commande : " ls | grep ^a | grep -v e"
+ </p><p>
+ Dans la commande "ls -a | more " affiche le contenu du repertoire courant ( fichier cachés compris )
+ de maniere a le lire ligne par ligne, c'est a ce derniers effet qu'est utile la seconde partie de la commande.
+ </p><p>
+ Dans un fichier html, la casse n'a aucune importance, le contenu de la balise title est en fait le titre de
+ l'onglet, les balises br sont des retours à la ligne, !... sont des commentaires, le © est le symbole
+ copyright, la suppression des balises fermantes html, body et head n'a aucune influence sur l'affichage de la page.</p><p>
+ La suppression des balises ouvrantes n'a pas plus d'effet.
+ En retirant la balise fermante h2, tout le texte suivant dans la page s'affiche comme le texte originellement
+ present entre les deux balises. Par ailleurs, en modifiant les dimensions de la fenetre, on remarque que
+ la page se reorganise dynamiquement.</p>
+
+ </p></div>
+ <footer> <p> Par : Gaspard Coulet</p><p> Contact : <a href="mailto:gaspard.coulet@etu.umontpellier.fr"> gaspard.coulet@etu.umontpellier.fr</p></footer>
+ </body>
+ </html>
diff --git a/sem_3/SiteWeb/tp1/photo1.jpg b/sem_3/SiteWeb/tp1/photo1.jpg Binary files differnew file mode 100644 index 0000000..fde363f --- /dev/null +++ b/sem_3/SiteWeb/tp1/photo1.jpg diff --git a/sem_3/SiteWeb/tp1/photo2.jpg b/sem_3/SiteWeb/tp1/photo2.jpg Binary files differnew file mode 100644 index 0000000..4bc54ba --- /dev/null +++ b/sem_3/SiteWeb/tp1/photo2.jpg diff --git a/sem_3/SiteWeb/tp1/phototable.png b/sem_3/SiteWeb/tp1/phototable.png Binary files differnew file mode 100644 index 0000000..4d84ed9 --- /dev/null +++ b/sem_3/SiteWeb/tp1/phototable.png diff --git a/sem_3/SiteWeb/tp1/pp.html b/sem_3/SiteWeb/tp1/pp.html new file mode 100644 index 0000000..0320eae --- /dev/null +++ b/sem_3/SiteWeb/tp1/pp.html @@ -0,0 +1,47 @@ +<html> + <head> +<title>Ceci est un test d'HLSE305 </title> +</head> + +<body bgcolor="000000" text="FFFFFF"> +<h2>Page Personnelle</h2> +<ul> +<li><a href="#p1"> Partie 1 </a></li> +<li><a href="#p2"> Partie 2 </a></li> +<li><a href="#p3"> Partie 3 </a></li> +<li><a href="#p4"> Partie 4 </a></li> +<li><a href="#p5"> Partie 5 </a></li> +</ul> + +<p> Pour le site de la fac, <a href="http://www.umontpellier.fr/"> Cliquez ici</a></p> +<p> Pour m'envoyer un mail, <a href="mailto:gaspard.coulet@etu.umontpellier.fr"> Cliquez ici</a></p> +<p> <a name="p1"> +Titre Principal +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus accumsan ultrices scelerisque. Integer laoreet aliquam nulla, ut lacinia enim tincidunt eu. Vestibulum egestas ligula turpis, et feugiat mi finibus id. Nunc ipsum lacus, finibus varius interdum consequat, vulputate sit amet nulla. Aliquam quis gravida sem. Sed elementum, nunc sed dictum consequat, dui nunc tempor velit, vel accumsan <a href="https://www.flickr.com/"><img src='./photo1.jpg' align="right" width="236" height="156" border="2"> </a>ex felis sed ipsum. Integer semper orci erat, vel pharetra ante sagittis nec. Proin volutpat interdum mi, sit amet suscipit ex mattis vitae. Nullam suscipit eget velit in ultrices. In pellentesque at lorem eu finibus. In vulputate egestas lorem, quis commodo nisl iaculis at. Aenean at velit mattis, volutpat tellus et, luctus lectus. Cras bibendum et nunc rutrum tincidunt. +</p> + +<p> <a name="p2"> +Titre secondaire +In quis egestas metus, nec malesuada orci. Quisque ac tempor odio. Pellentesque convallis malesuada bibendum. Aenean imperdiet rutrum ultricies. In leo urna, auctor vel elit quis, accumsan convallis augue. Maecenas non turpis lacinia, <em>malesuada dolor a</em>, imperdiet purus. Suspendisse condimentum tortor at consequat malesuada. +</p> +<p> <a name="p3"> +Titre secondaire +Quisque gravida dictum sagittis. Phasellus laoreet tellus ligula, fermentum porta dolor lobortis ac. Vestibulum eget porttitor magna. Duis lobortis mauris et justo pretium, laoreet viverra lorem pulvinar. Aenean sagittis ultrices fermentum. In hac habitasse platea dictumst. <strong>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sit amet nisi non lorem hendrerit dictum. Aenean tincidunt erat ac lacus commodo interdum sit amet et magna</strong>. Aenean eu nulla accumsan, vestibulum neque id, tincidunt velit. Aenean vel mi ipsum. Integer in augue justo. Aenean bibendum dignissim ligula. Suspendisse diam nisl, tincidunt vel nibh nec, tincidunt venenatis arcu. +</p> + +<p> <a name="p4"> +Titre secondaire +Nulla nec lorem vel felis finibus imperdiet. Donec congue eleifend quam, a pretium libero sagittis a. Donec vel libero vel risus dictum rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eros arcu, dignissim quis tellus vitae, cursus viverra metus. Duis efficitur, turpis nec rutrum fringilla, lacus sem viverra massa, a faucibus lectus diam non sapien. Nullam eget neque efficitur est tincidunt mattis eget at lacus. Duis eleifend eros neque, ac feugiat felis sodales nec. Aenean vitae nisi vulputate, malesuada velit eu, sagittis libero. Etiam volutpat vulputate quam ut tempus. Ut nec tempor dui. +</p> + +<p> <a name="p5"> +Titre secondaire +Cras vitae neque sapien. Ut lobortis ligula ac aliquam sagittis. Aliquam quis porttitor risus. Duis faucibus varius tellus, in tincidunt ipsum auctor a. Ut condimentum magna at dui faucibus, quis congue ipsum suscipit. Nam vitae suscipit erat, id maximus mauris. Etiam sollicitudin nunc justo, elementum porta elit dapibus id. Nullam nibh elit, fringilla eu nulla vitae, tincidunt posuere ex. Morbi congue elit id ligula accumsan blandit. Integer cursus vitae neque at sodales. Aenean quis ante magna. Mauris accumsan commodo purus, ac bibendum erat tempus quis. Mauris facilisis volutpat tellus, id volutpat lectus feugiat nec. <a href="https://www.flickr.com/"><img src="./photo2.jpg" align="bottom" width="400" height="265" border="2"></a> +</p> + + <p>[<stong>NH</strong><sub>4</sub>]<sup>+</sup></p> +<p> Page Composée par <cite>moi-même</cite>.<br/> +<p> +Vous pouvez m'écrire à cette adresse.</p> +<h6>©2015</h6> +</body></html> diff --git a/sem_3/SiteWeb/tp1/table.html b/sem_3/SiteWeb/tp1/table.html new file mode 100644 index 0000000..da726d2 --- /dev/null +++ b/sem_3/SiteWeb/tp1/table.html @@ -0,0 +1,49 @@ +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +</head> +<body> + + +<table bgcolor="wheat" bordercolor="#494949" border="3" align="center"> +<tr> +<th colspan="2" rowspan="3"> </th> +</tr> + +<tr> +<th colspan="2">Preferences</th> +</tr> +<tr> +<th> Kumquats frais </th> +<th> Kumquats au sirop </th> +</tr> +<tr> +<th rowspan="5" > Sexe </th> </tr> +<tr> +<td> Hommes de moins de 18 ans</td> +<td>45% </td> +<td> 55%</td> +</tr> + +<tr> +<td> Hommes de plus de 18 ans</td> +<td>51% </td> +<td>49% </td> +</tr> + +<tr> +<td>Femmes de moins de 18 ans </td> +<td>56% </td> +<td>44% </td> +</tr> + +<tr> +<td> Femmes de plus de 18 ans</td> +<td>63% </td> +<td> 37%</td> +</tr> + + +</table> + +</body> diff --git a/sem_3/SiteWeb/tp2/ImageCassoulet.jpg b/sem_3/SiteWeb/tp2/ImageCassoulet.jpg Binary files differnew file mode 100644 index 0000000..5dcc385 --- /dev/null +++ b/sem_3/SiteWeb/tp2/ImageCassoulet.jpg diff --git a/sem_3/SiteWeb/tp2/Thumbs.db b/sem_3/SiteWeb/tp2/Thumbs.db Binary files differnew file mode 100644 index 0000000..3088411 --- /dev/null +++ b/sem_3/SiteWeb/tp2/Thumbs.db diff --git a/sem_3/SiteWeb/tp2/base.css b/sem_3/SiteWeb/tp2/base.css new file mode 100644 index 0000000..dbfc7f4 --- /dev/null +++ b/sem_3/SiteWeb/tp2/base.css @@ -0,0 +1,21 @@ +body { + background-color:dimgray; +} +div.div1 { + background-color: #FF0000; + padding: 3px 5px 3px 5px; +} +div.div2 { + background-color: #00FF00; + padding: 3px 5px 3px 5px; +} +div.div3 { + background-color: #0000FF; + padding: 3px 5px 3px 5px; + border-style:solid; + border-width:2px; +} +div.div4 { + background-color: #007777; + padding: 3px 5px 3px 5px; +} diff --git a/sem_3/SiteWeb/tp2/base.html b/sem_3/SiteWeb/tp2/base.html new file mode 100644 index 0000000..9c49eff --- /dev/null +++ b/sem_3/SiteWeb/tp2/base.html @@ -0,0 +1,84 @@ +<html> + <head> + <link rel=stylesheet href=./base.css type=text/css> + </head> + <body> +<div class="div1"><p> + I <br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem +accusantium doloremque laudantium, +totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et +quasi architecto beatae vitae dicta sunt explicabo. + Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut +fugit, sed quia consequuntur magni dolores +eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, +qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, + sed quia non numquam eius modi tempora incidunt ut labore et dolore +magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, +quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi +ut aliquid ex ea commodi consequatur? Quis autem vel eum iure + reprehenderit qui in ea voluptate velit esse quam nihil molestiae +consequatur, vel illum qui dolorem eum +fugiat quo voluptas nulla pariatur?</p> +</div> + + +<div class="div2"><p> + II <br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem +accusantium doloremque laudantium, +totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et +quasi architecto beatae vitae dicta sunt explicabo. + Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut +fugit, sed quia consequuntur magni dolores +eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, +qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, + sed quia non numquam eius modi tempora incidunt ut labore et dolore +magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, +quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi +ut aliquid ex ea commodi consequatur? Quis autem vel eum iure + reprehenderit qui in ea voluptate velit esse quam nihil molestiae +consequatur, vel illum qui dolorem eum +fugiat quo voluptas nulla pariatur?</p> +</div> + +<div class="div3"><p> + III<br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem +accusantium doloremque laudantium, +totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et +quasi architecto beatae vitae dicta sunt explicabo. + Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut +fugit, sed quia consequuntur magni dolores +eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, +qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, + sed quia non numquam eius modi tempora incidunt ut labore et dolore +magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, +quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi +ut aliquid ex ea commodi consequatur? Quis autem vel eum iure + reprehenderit qui in ea voluptate velit esse quam nihil molestiae +consequatur, vel illum qui dolorem eum +fugiat quo voluptas nulla pariatur?</p> +</div> + +<div class="div4"><p> + IV<br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem +accusantium doloremque laudantium, +totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et +quasi architecto beatae vitae dicta sunt explicabo. + Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut +fugit, sed quia consequuntur magni dolores +eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, +qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, + sed quia non numquam eius modi tempora incidunt ut labore et dolore +magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, +quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi +ut aliquid ex ea commodi consequatur? Quis autem vel eum iure + reprehenderit qui in ea voluptate velit esse quam nihil molestiae +consequatur, vel illum qui dolorem eum +fugiat quo voluptas nulla pariatur?</p> +</div> + +</body> +</html> diff --git a/sem_3/SiteWeb/tp2/cassoulet.css b/sem_3/SiteWeb/tp2/cassoulet.css new file mode 100644 index 0000000..1c9c1a6 --- /dev/null +++ b/sem_3/SiteWeb/tp2/cassoulet.css @@ -0,0 +1,35 @@ +body { + background-color: #d3d3d3; +} + +ul { + background-color: #f5deb4; +} + +img { + float:right; +} + +table { + background-color: #ffa301; + margin-left: 33%; +} + +table tr th { + background-color: #fffe00; +} + +table caption { + background-color: #ffa301; +} + +li a { + color: darkgreen; +} + +p.note { + background-color: yellow; + margin-left:60px; + margin-right:60px; + font-size:x-small; +} diff --git a/sem_3/SiteWeb/tp2/cassoulet.html b/sem_3/SiteWeb/tp2/cassoulet.html new file mode 100644 index 0000000..821b788 --- /dev/null +++ b/sem_3/SiteWeb/tp2/cassoulet.html @@ -0,0 +1,84 @@ + +<HTML> +<Head> +<link rel=stylesheet href="./cassoulet.css" type=text/css> +</Head> +<body> + +<p> + + + + <h2>Cassoulet de Castelnaudary</h2> + +Pour 8 personnes - temps de cuisson 4h + + +<ul> + <li>800 g de haricots <a href="http://www.lingotdunord.com">lingots <a> ou mieux, de <a href="http://www.haricot-tarbais.com/">haricots tarbais</a>. + <li>800 g d'échine de porc + <li> 8 tranches de poitrine de porc + <li>200 g de couennes fraîches + <li>1 saucisson à l'ail + <li>2 cuillères de soupe de saindoux + <li>2 jarrets de porc salés + <li>250 g de tomates + <li>3 oignons piqués de clous de girofle + <li>200 g de carottes + <li>1 bouquet garni + <li>poivre concassé +</ul> +</p> + +<p> +<img src="cassoulet.jpg"> +Dans grand pot faire revenir avec du saindoux les tomates et la +poitrine de porc coupées en dés ainsi que les carottes +émincées. Déposer les haricots sur le roux + (tous les éléments au-dessus) dans le même pot, couvrir avec deux + litres d'eau, ajouter le bouquet garni, + l'ail, les oignons, les couennes, les jarrets dessalés et la + viande. Laisser mijoter deux heures à feu doux. + </p> + + <p> +Verser le tout dans une "cassole*", +ou un plat en terre creux et profond. Repartir la viande et adjoindre +le saucisson à l'ai coupé en tranches épaisses. +</p> + +<p> +Poser le plat dans un four très doux. Quand il est recouverte d'une + croûte dorée, appuyer + avec une spatule pour qu'elle s'enfonce dans les haricots + (recommencer six fois pendant + tout le cuisson). Cuire au four pour au moins deux heures. Cette + longue et minutieuse + préparation est essentielle pour la réussite d'un excellent + cassoulet. + </p> + + <p class="note"> + *Une "cassole" est un pot en terre d' <a href="http://www.issel.fr">Issel<a> dans laquelle on peut + mijoter et dorer. C'est l'origine du terme cassoulet. + +</p> + +</p> + +<table border> +<caption align=bottom> +L'apport nutritionnel du cassoulet pour 100g</caption> +<tr> +<th>Glucides</th> +<th>Lipides</th> +<th>Protides</th> +<tr> +<tr> +<td>45g</td> +<td>30g</td> +<td>25g</td> +<tr> +</table> +</body> +</HTML> diff --git a/sem_3/SiteWeb/tp2/cassoulet.jpg b/sem_3/SiteWeb/tp2/cassoulet.jpg Binary files differnew file mode 100644 index 0000000..f8a312d --- /dev/null +++ b/sem_3/SiteWeb/tp2/cassoulet.jpg diff --git a/sem_3/SiteWeb/tp2/index.html b/sem_3/SiteWeb/tp2/index.html new file mode 100644 index 0000000..3f1c656 --- /dev/null +++ b/sem_3/SiteWeb/tp2/index.html @@ -0,0 +1,65 @@ +<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="utf-8">
+ <title>Gaspard Coulet</title>
+ <link rel="stylesheet" href="../style.css">
+</head>
+<body>
+ <h1 id="titre"> TP2</h1>
+ <div class="Cadre">
+ <a class="lientp2" href="../index.html"><img class="image" alt="Image de l'acceuil" src="../photo.png">Acceuil</a>
+ <a class="lientp2" href="./base.html"target = "_blank"><img class="image" alt="Image du premer site web realisé en TP2" src="./photobase.png">Site Base</a>
+ <a class="lientp2" href="./cassoulet.html"target = "_blank"><img class="image" src="../photo2.png" alt="Image du second site web realisé en TP2">Site Cassoulet</a>
+ </div>
+ <div class="Cadre">
+ <h2> Notes et réponses aux questions :</h2><p>
+ Par défaut, une div html occupe de l'espace en fonction de son contenu, en l'occurence, la largeur est de
+ 100% de la page, et la hauteur est relative au nombre de ligne.</p><p>
+
+ Par défaut il n'y a pas de marge! Le décallage visible est du au padding du conteneur parent : ici body
+ qui lui a un padding par defaut de 8px, d'ailleurs, la notion de "par défaut" est absurde car elle dépend
+ du navigateur utilisé.</p><p>
+
+ On remarque que la largeur d'une bordure s'additionne avec le padding de la division.
+ </p><p>
+ En placant le texte contenu dans les div dans des balises p, on remarque qu'une marge se créée au dessus
+ et en dessous du texte, on peut même préciser que cette derniére fait 16 px.
+ </p><p>
+ Concernant la durée de vie des support de stockage, il apparait que le support le plus fiable est
+ le stockage flash.</p><p>
+
+ Parmis la liste de format fourni, seul le .jpg est un format compressé.
+
+ Parmis les formats d'archivage par defaut sur les sessions de la fac, les suivants permettent le verouillage :
+ .cbz; .ear; .war; .zip;
+ Ces 4 formats semblent permettre de protéger aussi la liste des fichiers.
+
+ La division en multiples petits fichiers peut permettre une plus grande sécurité lors des transfert par le reseau
+ ( une instabilitée du reseau risquant de couper le transfert, il est preferable de le faire morceau par
+ morceau, pour ne pas avoir à tout recommencer.
+ </p><p>
+ SAUVEGARDE
+ Sauvergarde incrementale :
+ "Méthode de backup se basant sur une sauvegarde complète, elle ne sert à sauvegarder que les fichiers modifiés depuis la dernière sauvegarde. Une sauvegarde incrémentielle copie donc uniquement les fichiers modifiés depuis la dernière sauvegarde complète ou incrémentielle et conserve les différentes versions d'un fichier.
+ Dès modification du ou des fichiers, l'attribut "archive" est positionné, devient "actif". C'est de cette façon que la sauvegarde incrémentale reconnait les fichiers modifiés pour les sauvegarder en réinitialisant du même coup cet attribut.
+ . Avantage : Comme une sauvegarde incrémentielle ne sauvegarde que les fichiers modifiés, elle constitue une protection rapide contre la perte de données. Elle nécessite également moins de ressources de stockage.
+ .Inconvénient : Chaque sauvegarde incrémentielle (entre deux sauvegardes complètes) doit être conservée car chacune d'elles se « construit » à partir de la précédente."
+ (<a href="http://www.infonitec.com/definition-informatique-telecom/definition-informatique-telecom.php?id=478"> reference</a> )
+ </p><p>
+ Synchronisation de supports : visiblement inexistant de google.
+ </p><p>
+ Gestion de version ( on est en france, s'il vous plait) :
+ "Lorsque vous travaillez sur un projet de code, vous allez régulièrement y apporter des modifications, et par moments ces modifications vont provoquer des bugs. Lorsque vous revenez sur votre projet après quelques jours ou même quelques heures, il peut être difficile de vous souvenir des dernières modifications que vous avez effectuées et de retrouver vos repères dans votre code.
+ Avec un logiciel de versioning comme Git, vous pouvez garder la trace de toutes les modifications faites sur votre code pour pouvoir vous y retrouver à tout moment. À chaque fois que vous faites une série de modifications (créer un fichier, supprimer un fichier, modifier un texte dans un fichier, etc.), vous allez pouvoir enregistrer ces modifs dans un commit."
+ ( <a href="http://openclassrooms.com">reference</a> )
+ </p><p>
+ Logiciel de sauvegarde incrémentielle : ex : Bacula.
+ Logiciel de gestion de version : Git.
+ </p><p>
+ Exemple de piratage d'information récent : <a href="https://techcrunch.com/2017/10/10/equifax-hack-included-nearly-11-million-us-drivers-licenses/"> ici</a>
+ </p>
+ </div>
+ <footer> <p> Par : Gaspard Coulet</p><p> Contact : <a href="mailto:gaspard.coulet@etu.umontpellier.fr"> gaspard.coulet@etu.umontpellier.fr</p></footer>
+ </body>
+ </html>
diff --git a/sem_3/SiteWeb/tp2/photobase.png b/sem_3/SiteWeb/tp2/photobase.png Binary files differnew file mode 100644 index 0000000..6ff1cfa --- /dev/null +++ b/sem_3/SiteWeb/tp2/photobase.png diff --git a/sem_3/SiteWeb/tp3/index.html b/sem_3/SiteWeb/tp3/index.html new file mode 100644 index 0000000..219adb4 --- /dev/null +++ b/sem_3/SiteWeb/tp3/index.html @@ -0,0 +1,25 @@ +<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="utf-8">
+ <title>Gaspard Coulet</title>
+ <link rel="stylesheet" href="../style.css">
+</head>
+<body>
+ <h1 id="titre"> TP3</h1>
+ <div class="Cadre">
+ <a class="lientp3" href="../index.html"><img class="image" alt="Image de l'acceuil" src="../photo.png">Acceuil</a>
+ <a class="lientp3" href="./texte.tar"><img class="image" alt="Images d'un fichier traitement de texte" src="../photo3.png">Télécharger les odt</a>
+ </div>
+ <div class="Cadre">
+ <h2> Notes et réponses aux questions : </h2>
+ <p> La touche Inser permet de basculer entre les modes "Insert" et "Overwrite", en Insert, on intercalle un caractere entre deux autres, là ou le mode Overwrite réécrit par dessus un caractère existant.</p>
+ <p> Le retour à la ligne via la touche "enter" simple créée un nouveau paragraphe, tandis que la combinaison "shift+enter" se contente de revenir a la ligne.</p>
+ <p> Un espace insécable entre 2 mots s'assure que le logiciel considère ces deux mots comme un seul, qui ne peut être separé par un retour a la ligne, par exemple.</p>
+ <p> Pour ne pas avoir un "canichene", il faut cocher l'option "mots entiers uniquement"</p>
+ <p> "respecter la casse" signifie respecter le 'taille' ( majuscule, minuscule) des lettres</p>
+ <p> Ancrer une image comme caractère sert à l'intégrer dans le texte comme un caractère</p>
+ </div>
+ <footer> <p> Par : Gaspard Coulet</p><p> Contact : <a href="mailto:gaspard.coulet@etu.umontpellier.fr"> gaspard.coulet@etu.umontpellier.fr</p></footer>
+ </body>
+ </html>
diff --git a/sem_3/SiteWeb/tp3/texte.tar b/sem_3/SiteWeb/tp3/texte.tar Binary files differnew file mode 100644 index 0000000..93630e3 --- /dev/null +++ b/sem_3/SiteWeb/tp3/texte.tar diff --git a/sem_3/SiteWeb/tp4/calc.tar b/sem_3/SiteWeb/tp4/calc.tar Binary files differnew file mode 100644 index 0000000..82117dd --- /dev/null +++ b/sem_3/SiteWeb/tp4/calc.tar diff --git a/sem_3/SiteWeb/tp4/index.html b/sem_3/SiteWeb/tp4/index.html new file mode 100644 index 0000000..c5f1b8d --- /dev/null +++ b/sem_3/SiteWeb/tp4/index.html @@ -0,0 +1,17 @@ +<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="utf-8">
+ <title>Gaspard Coulet</title>
+ <link rel="stylesheet" href="../style.css">
+</head>
+<body>
+ <h1 id="titre"> TP4</h1>
+ <div class="Cadre">
+ <a class="lientp4" href="../index.html"><img class="image" alt="Image de l'acceuil" src="../photo.png">Acceuil</a>
+ <a class="lientp4" href="./calc.tar"><img class="image" alt="Images d'un des classeurs réalisé" src="../photo4.png">Télécharger les ods</a>
+ </div>
+ <div class="Cadre"></div>
+ <footer> <p> Par : Gaspard Coulet</p><p> Contact : <a href="mailto:gaspard.coulet@etu.umontpellier.fr"> gaspard.coulet@etu.umontpellier.fr</p></footer>
+ </body>
+ </html>
diff --git a/sem_3/SiteWeb/tp5/exo1.odp b/sem_3/SiteWeb/tp5/exo1.odp Binary files differnew file mode 100644 index 0000000..daa852a --- /dev/null +++ b/sem_3/SiteWeb/tp5/exo1.odp diff --git a/sem_3/SiteWeb/tp5/index.html b/sem_3/SiteWeb/tp5/index.html new file mode 100644 index 0000000..6f22266 --- /dev/null +++ b/sem_3/SiteWeb/tp5/index.html @@ -0,0 +1,21 @@ +<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="utf-8">
+ <title>Gaspard Coulet</title>
+ <link rel="stylesheet" href="../style.css">
+</head>
+<body>
+ <h1 id="titre"> TP5</h1>
+ <div class="Cadre">
+ <a class="lientp5" href="../index.html"><img class="image" alt="Image de l'acceuil" src="../photo.png">Acceuil</a>
+ <a class="lientp5" href="./exo1.odp"><img class="image" alt="Image du diapo canard" src="../photo5.png">Télécharger l'odp</a>
+ <a class="lientp5" href="./gcoulet.odp"><img class="image" alt="Image du diapo perso à realiser" src="./photo.jpg">Télécharger l'odp</a>
+ </div>
+ <div class="Cadre"><p>Lorsque l'image est inserée en tant que lien, elle n'est pas copiée, on accede directement a
+ l'image sur le disque, dans ces conditions si l'image vient a changer de nom,
+ ou qu'un des dossiers parents de l'image change de nom, le lien est rompu.
+ </p></div>
+ <footer> <p> Par : Gaspard Coulet</p><p> Contact : <a href="mailto:gaspard.coulet@etu.umontpellier.fr"> gaspard.coulet@etu.umontpellier.fr</p></footer>
+ </body>
+ </html>
|
