tp1
This commit is contained in:
parent
6c34562f85
commit
5b633f66cd
@ -19,6 +19,7 @@ de site statique sur un serveur et l'ergonomie d'interface.
|
|||||||
| Semaine | Cours | TP |
|
| Semaine | Cours | TP |
|
||||||
| -------------------- | ------------------------------------------------ | ----------------------- |
|
| -------------------- | ------------------------------------------------ | ----------------------- |
|
||||||
| 1 : 11/11 - 15/11 | [HTML](./cours/html.pdf) | |
|
| 1 : 11/11 - 15/11 | [HTML](./cours/html.pdf) | |
|
||||||
|
| 2 : 18/11 - 22/11 | [CSS](./cours/css.pdf) | [tp1 html](./tp/tp1)|
|
||||||
|
|
||||||
## Serveur http(s) de l'iut
|
## Serveur http(s) de l'iut
|
||||||
|
|
||||||
|
|||||||
256
R1.02/tp/tp1/README.md
Normal file
256
R1.02/tp/tp1/README.md
Normal file
@ -0,0 +1,256 @@
|
|||||||
|
# TP HTML
|
||||||
|
<!-- Une **correction** [ici](./correction). -->
|
||||||
|
|
||||||
|
> Vous validerez *toutes* vos pages avec le service de [validation](http://validator.w3.org/) du W3C.
|
||||||
|
|
||||||
|
> Vous pouvez utiliser [des aides](https://websitesetup.org/wp-content/uploads/2019/10/WSU-HTML-Cheat-Sheet.pdf) pour trouver les balises HTML.
|
||||||
|
> La [référence](https://developer.mozilla.org/fr/docs/Web/HTML/Element) des éléments HTML (Mozilla Developer Network).
|
||||||
|
|
||||||
|
> Une [aide](./aide.md) pour le tp.
|
||||||
|
## Correction de la syntaxe, et validation
|
||||||
|
### Exercice 0
|
||||||
|
Corrigez le code HTML suivant en utilisant le validateur du W3C :
|
||||||
|
```html
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en"
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>My first HTML5 <strong>document</h1></strong>
|
||||||
|
|
||||||
|
<p lang="fra">HTML5 est vraiment super !</p>
|
||||||
|
|
||||||
|
<input type="checkbox>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
Remarque : comme vous le constaterez avec l'exercice précédent, la balise fermante de
|
||||||
|
certains éléments est optionnelle. Pour plus de détails, vous pouvez consulter la liste des
|
||||||
|
[balises optionnelles](http://www.w3.org/TR/html5/syntax.html#optional-tags) sur le site du W3C.
|
||||||
|
|
||||||
|
Je vous conseille de les fermer **systématiquement**.
|
||||||
|
## Texte
|
||||||
|
### Exercice 1
|
||||||
|
|
||||||
|
Écrivez une page html pour **structurer le contenu** suivant :
|
||||||
|
|
||||||
|
```
|
||||||
|
Le W3C
|
||||||
|
|
||||||
|
Le W3C est un consortium créé le 1er octobre 1994 par Tim Berners-Lee, principal
|
||||||
|
inventeur du World Wide Web en 1989, pour promouvoir la compatibilité et donc
|
||||||
|
la normalisation des technologies du World Wide Web. Avant le W3C, c'était l'IETF,
|
||||||
|
un autre organisme important de l'Internet, qui était en charge de cette mission.
|
||||||
|
|
||||||
|
Le W3C a par exemple standardisé les technologies HTML et XML.
|
||||||
|
```
|
||||||
|
|
||||||
|
Utilisez notamment les balises d'annotations suivantes : `<abbr>`, `<time>`, `<sup>`, `<em>`.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Exercice 2
|
||||||
|
La syntaxe du langage HTML s'appuie sur un certain nombre de caractères appelés caractères réservés. Par exemple, les caractères
|
||||||
|
`<` et `>` sont utilisés pour insérer la balise d'un élément HTML.
|
||||||
|
|
||||||
|
Afin d'utiliser ces caractères réservés dans le corps de votre document Web et de les voir s'afficher dans la fenêtre du navigateur,
|
||||||
|
il convient de les remplacer par leur entité HTML. Une entité HTML est définie par une suite de lettres ou un nombre,
|
||||||
|
précédée du caractère `&` et suivie de `;`.
|
||||||
|
Certaines de ces entités sont listées dans le tableau ci-dessous.
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Affichage</th>
|
||||||
|
<th>Description</th>
|
||||||
|
<th>Nom de l'entité</th>
|
||||||
|
<th>Code de l'entité</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td> </td>
|
||||||
|
<td>espace insécable</td>
|
||||||
|
<td><code>&nbsp;</code></td>
|
||||||
|
<td><code>&#160;</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><</td>
|
||||||
|
<td>plus petit</td>
|
||||||
|
<td><code>&lt;</code></td>
|
||||||
|
<td><code>&#60;</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>></td>
|
||||||
|
<td>plus grand</td>
|
||||||
|
<td><code>&gt;</code></td>
|
||||||
|
<td><code>&#62;</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>&</td>
|
||||||
|
<td>esperluette</td>
|
||||||
|
<td><code>&amp;</code></td>
|
||||||
|
<td><code>&#38;</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>"</td>
|
||||||
|
<td>guillemet</td>
|
||||||
|
<td><code>&quot;</code></td>
|
||||||
|
<td><code>&#34;</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>€</td>
|
||||||
|
<td>euro</td>
|
||||||
|
<td><code>&euro;</code></td>
|
||||||
|
<td><code>&#8364;</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>©</td>
|
||||||
|
<td>copyright</td>
|
||||||
|
<td><code>&copy;</code></td>
|
||||||
|
<td><code>&#169;</code></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
Pour accéder à la liste exhaustive des toutes les entités HTML, vous pouvez consulter le Character Entity Reference Chart du W3C.
|
||||||
|
|
||||||
|
Écrivez une page qui structure le contenu suivant (hierachisez les titres, utilisez des paragraphes).
|
||||||
|
|
||||||
|
```
|
||||||
|
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))
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Listes
|
||||||
|
### Exercice 3
|
||||||
|
|
||||||
|
Écrivez une page contenant une liste de liens vers vos sites préférés (quatre ou cinq), avec le nom du site et une brève description de ce que l'on peut y trouver. Cette liste sera mise en forme à l'aide :
|
||||||
|
- D'une liste numéroté (balise ol)
|
||||||
|
- D'une liste non numéroté (balise ul)
|
||||||
|
- D'une liste de définition (balise dl)
|
||||||
|
|
||||||
|
Chaque lien devra s'ouvrir dans un autre onglet.
|
||||||
|
|
||||||
|
Configurez votre navigateur pour que l'affichage utilise l'encodage Unicode (UTF-8). Votre page ne doit pas être affectée. Si elle l'est, corrigez-la.
|
||||||
|
|
||||||
|
## Tableaux
|
||||||
|
### Exercice 4
|
||||||
|
Écrivez une page qui structure sous forme d'une table html le contenu du fichier csv
|
||||||
|
suivant :
|
||||||
|
|
||||||
|
|
||||||
|
```csv
|
||||||
|
Orbites des planètes du Système solaire
|
||||||
|
Planète;Distance moyenne (UA);Exentricité ;Inclinaison (°);Période de révolution (an)
|
||||||
|
Venus;0,72333199;0,007;3,4;0,615
|
||||||
|
Jupiter;5,20336301;0,049;1,3;11,862
|
||||||
|
Mars;1,52366231;0,094;1,9;1,881
|
||||||
|
Saturne;9,6;0,057;2,5;29,452
|
||||||
|
Mercure;0,38709893;0,205;7;0,241
|
||||||
|
Neptune;4495,1;1,8;28,3;59,8
|
||||||
|
Terre;1;0,017;0;1
|
||||||
|
Uranus;2872,5;0,8;97,8;30,589
|
||||||
|
```
|
||||||
|
|
||||||
|
Vous rajouterez une colonne avec une "image" de chaque planète.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
>Vous trouverez les images sur http://upload.wikimedia.org
|
||||||
|
|
||||||
|
>Utilisez avantageusement les possiblités de formatages de votre éditeur de texte, ou
|
||||||
|
> la commande `sed` pour transformer le csv en html ou encore ce [programme](./src/csv2html.c) C.
|
||||||
|
|
||||||
|
|
||||||
|
## Images
|
||||||
|
### Exercice 5
|
||||||
|
Voici une image représentant les couches utilisées dans le développement WEB.
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img src="./img/html_css_js.png">
|
||||||
|
<figcaption>
|
||||||
|
Par CaptainT7 — Travail personnel, CC BY-SA 4.0, <a href="https://commons.wikimedia.org/w/index.php?curid=111841231">lien</a>.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
Ecrire une page html qui affiche cette image. Les zones HTML, CSS et JS sont cliquables, et doivent ouvrir un
|
||||||
|
nouvel onglet vers :
|
||||||
|
- HTML : https://developer.mozilla.org/docs/Web/HTML
|
||||||
|
- CSS : https://developer.mozilla.org/docs/Web/CSS
|
||||||
|
- JS : https://developer.mozilla.org/docs/Web/JavaScript
|
||||||
|
|
||||||
|
> - L'attribut `usemap` d'une image permet de préciser une carte (map) décrivant des zones d'une image cliquable.
|
||||||
|
> - La balise `map` permet de décrire des zones (sous forme de rectangles, circles, polygones) cliquables d'une image . Un exemple
|
||||||
|
> ```html
|
||||||
|
> <img src="planets.gif" width="145" height="126" alt="Planets"
|
||||||
|
> usemap="#planetmap">
|
||||||
|
>
|
||||||
|
> <map name="planetmap">
|
||||||
|
> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
|
||||||
|
> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
|
||||||
|
> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
|
||||||
|
> </map>```
|
||||||
|
> - Vous pouvez facilement (graphiquement) générer une map avec Gimp (filtre->Web->Image cliquable)
|
||||||
|
|
||||||
|
## Bonus
|
||||||
|
### Exercice 6
|
||||||
|
Ecrire un script shell qui permet de formater le contenu d'un repertoire en html, sous forme d'une table indiquant pour chaque entrée, le nom, les droits, la taille et la date de dernier accès correspondants. La commande
|
||||||
|
|
||||||
|
```bash
|
||||||
|
./dir2html.sh dir dir.html
|
||||||
|
```
|
||||||
|
produira le fichier `dir.html` contenant les entrées du répertoire `dir`, avec le rendu suivant :
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
>**Aides**
|
||||||
|
>- Comment faire pour écrire dans un fichier depuis un script bash ?
|
||||||
|
>- Pour récupèrer la liste des entrées en bash :
|
||||||
|
> ```bash
|
||||||
|
> l=$(ls dir)
|
||||||
|
> ```
|
||||||
|
>- Pour itérer les éléments d'une liste en bash :
|
||||||
|
> ```bash
|
||||||
|
> for i in $l;
|
||||||
|
> do
|
||||||
|
> ...
|
||||||
|
> done
|
||||||
|
> ```
|
||||||
|
>- Pour obtenir et formater les informations sur chaque entrée, vous pouvez utiliser la commande `stat`, en adaptant
|
||||||
|
> sa sortie à vos besoins.
|
||||||
|
>- Les icones de fichier  et de répertoire  se trouvent dans le répertoire [img](./img).
|
||||||
|
>
|
||||||
|
|
||||||
124
R1.02/tp/tp1/aide.md
Normal file
124
R1.02/tp/tp1/aide.md
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
## Aides
|
||||||
|
|
||||||
|
Vous trouverez quelques exemples d'utilisations de balises HTML.
|
||||||
|
|
||||||
|
### Structure d'un fichier HTML
|
||||||
|
```html
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="description" content="ma première page">
|
||||||
|
<meta name="keywords" content="html,but info Fontainebleau, ressource R1.02">
|
||||||
|
<meta name="author" content="Denis Monnerat">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Bonjour</h1>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Les listes
|
||||||
|
[Plus de détails sur les listes](https://www.w3schools.com/html/html_lists.asp)
|
||||||
|
###### Liste à puces
|
||||||
|
```html
|
||||||
|
<ul>
|
||||||
|
<li>Coffee</li>
|
||||||
|
<li>Tea</li>
|
||||||
|
<li>Milk</li>
|
||||||
|
</ul>
|
||||||
|
```
|
||||||
|
<details>
|
||||||
|
<summary>Exemple</summary>
|
||||||
|
<ul>
|
||||||
|
<li>Coffee</li>
|
||||||
|
<li>Tea</li>
|
||||||
|
<li>Milk</li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
###### Liste ordonnée
|
||||||
|
```html
|
||||||
|
<ol>
|
||||||
|
<li>Coffee</li>
|
||||||
|
<li>Tea</li>
|
||||||
|
<li>Milk</li>
|
||||||
|
</ol>
|
||||||
|
```
|
||||||
|
<details>
|
||||||
|
<summary>Exemple</summary>
|
||||||
|
<ol>
|
||||||
|
<li>Coffee</li>
|
||||||
|
<li>Tea</li>
|
||||||
|
<li>Milk</li>
|
||||||
|
</ol>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
### Les tables
|
||||||
|
[Plus de détails sur les tables](https://www.w3schools.com/html/html_tables.asp)
|
||||||
|
```html
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>Firstname</th>
|
||||||
|
<th>Lastname</th>
|
||||||
|
<th>Age</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jill</td>
|
||||||
|
<td>Smith</td>
|
||||||
|
<td>50</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Eve</td>
|
||||||
|
<td>Jackson</td>
|
||||||
|
<td>94</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
<details>
|
||||||
|
<summary>Exemple</summary>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>Firstname</th>
|
||||||
|
<th>Lastname</th>
|
||||||
|
<th>Age</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jill</td>
|
||||||
|
<td>Smith</td>
|
||||||
|
<td>50</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Eve</td>
|
||||||
|
<td>Jackson</td>
|
||||||
|
<td>94</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<!-- ### Les formulaires -->
|
||||||
|
<!-- [Plus de détails sur les tables](https://www.w3schools.com/html/html_forms.asp) -->
|
||||||
|
|
||||||
|
<!-- Il existe plusieurs type de champs: -->
|
||||||
|
<!-- - La balise input accepte plusieurs [types](https://www.w3schools.com/tags/att_input_type.asp) -->
|
||||||
|
<!-- - La balise [textarea](https://www.w3schools.com/tags/tag_textarea.asp) pour les zones de textes multilignes. -->
|
||||||
|
|
||||||
|
<!-- Il est aussi possible de [valider](https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire) des formulaires HTML sans utilisation de JavaScript. -->
|
||||||
|
|
||||||
|
<!-- ###### Balise form -->
|
||||||
|
<!-- ```html -->
|
||||||
|
<!-- <form action="URL" method="POST|GET"> -->
|
||||||
|
<!-- </form> -->
|
||||||
|
<!-- ``` -->
|
||||||
|
|
||||||
|
<!-- ###### Balise input -->
|
||||||
|
<!-- ```html -->
|
||||||
|
<!-- <input name="nom" id="nom" type="text"/> -->
|
||||||
|
<!-- ``` -->
|
||||||
|
|
||||||
|
<!-- ###### Boutons -->
|
||||||
|
<!-- ```html -->
|
||||||
|
<!-- <input type="submit" value="Envoyer"/> -->
|
||||||
|
<!-- <input type="reset" value="Reset"/> -->
|
||||||
|
<!-- ``` -->
|
||||||
BIN
R1.02/tp/tp1/img/file.png
Normal file
BIN
R1.02/tp/tp1/img/file.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 422 B |
BIN
R1.02/tp/tp1/img/file1.png
Normal file
BIN
R1.02/tp/tp1/img/file1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 264 B |
BIN
R1.02/tp/tp1/img/folder.png
Normal file
BIN
R1.02/tp/tp1/img/folder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 331 B |
BIN
R1.02/tp/tp1/img/gallerie.png
Normal file
BIN
R1.02/tp/tp1/img/gallerie.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
R1.02/tp/tp1/img/html_css_js.png
Normal file
BIN
R1.02/tp/tp1/img/html_css_js.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
R1.02/tp/tp1/img/iut.png
Normal file
BIN
R1.02/tp/tp1/img/iut.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 992 KiB |
BIN
R1.02/tp/tp1/img/planetes.png
Normal file
BIN
R1.02/tp/tp1/img/planetes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
R1.02/tp/tp1/img/rep.png
Normal file
BIN
R1.02/tp/tp1/img/rep.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
R1.02/tp/tp1/img/tab.png
Normal file
BIN
R1.02/tp/tp1/img/tab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
25
R1.02/tp/tp1/src/csv2html.c
Normal file
25
R1.02/tp/tp1/src/csv2html.c
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
#include <stdio.h>
|
||||||
|
|
||||||
|
/* csv2html < file.csv > file.html */
|
||||||
|
|
||||||
|
int main(int argc, char *argv[])
|
||||||
|
{
|
||||||
|
int s;
|
||||||
|
|
||||||
|
printf("<table>\n<tr><td>");
|
||||||
|
|
||||||
|
while ((s = getchar()) != EOF) {
|
||||||
|
switch(s) {
|
||||||
|
case '\n': printf("</td></tr>\n<tr><td>"); break;
|
||||||
|
case ';': printf("</td><td>"); break;
|
||||||
|
case '<': printf("<"); break;
|
||||||
|
case '>': printf(">"); break;
|
||||||
|
case '&': printf("&"); break;
|
||||||
|
default: putchar(s);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
puts("</td></tr>\n</table>");
|
||||||
|
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user