Séance du 24 septembre. Fin du HTML.
This commit is contained in:
Avrillon Samy
parent
93ce5bcbeb
commit
3b6ab5e8ba
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,5 +1,6 @@
|
|||||||
*.pdf
|
*.pdf
|
||||||
a.out
|
a.out
|
||||||
test.html
|
test.html
|
||||||
|
test2.html
|
||||||
test.c
|
test.c
|
||||||
fichier1.txt
|
fichier1.txt
|
||||||
|
|||||||
48
HTML5.md
Normal file
48
HTML5.md
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
HTML 5
|
||||||
|
=
|
||||||
|
|
||||||
|
### Exercice 1
|
||||||
|
1. Un chemin absolu est un chemin pouvant être compris sans connaître le chemin du programme actuel, ou le chemin de la page actuellement chargée. Toute l'URL doit être spécifiée, par exemple `https://bernard.com.de/superadresse`
|
||||||
|
|
||||||
|
Un chemin relatif s'exprime relativement au chemin du programme actuel. Par exemple, le chemin relatif `imgs/photo.png` pointera le fichier `https://bernard.com.de/imgs/photo.png` si il est lu depuis la page `https://bernard.com.de/superadresse`, et vers le fichier `https://bernard.com.de/section/imgs/photo.png` si il est lu depuis la page `https://bernard.com.de/section/index.php`
|
||||||
|
|
||||||
|
2. Entre les pages d'un même site web, il faut privilégier les liens relatifs, plus robustes aux changements de noms de domaine, et aux multiples noms de domaine (une page hébergée sous `https://bernard.com.de` et sous `https://bernard.com`.
|
||||||
|
|
||||||
|
### Exercice 2
|
||||||
|
Les liens vers d'autres pages web sont ajoutés à l'aide des balises `a` avec l'argument `href` correspondant à la destination du lien. Le contenu de la balise sera la zone/texte affiché et cliquable. Par exemple:
|
||||||
|
|
||||||
|
```
|
||||||
|
<a href="https://bernard.com.de/index.php">Le site de bernard !</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Exercice 3
|
||||||
|
Une ancre est un lien pointant vers une zone spécifique d'une page. Par exemple, l'URL `https://bernard.com.de/index.php#nbp` ouvrira la page `index.php` rendant visible la balise avec `id=nbp`.
|
||||||
|
|
||||||
|
|
||||||
|
### Exercice 4
|
||||||
|
|
||||||
|
page1.html:
|
||||||
|
```
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head></head>
|
||||||
|
<body>
|
||||||
|
Les cours de PROJ1, c'est bien !
|
||||||
|
<img src="https://www.pokepedia.fr/images/c/cd/Rondoudou-RFVF.png" alt="Artwork du pokémon Rondoudou"/>
|
||||||
|
<br/>
|
||||||
|
<a href="test2.html">Cliquez pour réveler le meilleur des pokémons (un indice est sur cette page)</a>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
test2.html:
|
||||||
|
```
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head></head>
|
||||||
|
<body>
|
||||||
|
Le meilleur des pokemon c'est ????? RONDOUDOU BIEN SUR !
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
27
HTML6.md
Normal file
27
HTML6.md
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
HTML 6
|
||||||
|
=
|
||||||
|
|
||||||
|
### Exercice 1
|
||||||
|
1. Pour une liste ordonée, il faut utiliser la balise `<ol>` (pour ordered list)
|
||||||
|
2. Pour y mettre des éléments, il faut utiliser la balise `<li>`
|
||||||
|
|
||||||
|
### Exercice 2
|
||||||
|
1. Pour une liste non ordonée, il faut utiliser la balise `<ul>` (pour unordered list)
|
||||||
|
2. Pour y mettre des éléments, il faut encore utiliser la balise `<li>`
|
||||||
|
|
||||||
|
### Exercice 3
|
||||||
|
1. Une liste de définitions est une liste de couple (terme,definition) où chaque définition est associée au terme.
|
||||||
|
2. La liste est créée grâce à la balise `<dl>` (pour definition list)
|
||||||
|
3. Et les éléments sont dans des balises `<dt>` pour les termes, et `<dd>` pour les définitions.
|
||||||
|
|
||||||
|
### Exercice 4
|
||||||
|
1. Le type de numérotation peut être changé grâce à l'attribut `type`, qui peut prendre les valeurs suivantes (les caractères en gras sont les valeurs à rentrer dans le champ):
|
||||||
|
- **a**,b,c,d,...
|
||||||
|
- **A**,B,C,D,...
|
||||||
|
- **i**,ii,iii,iv,v,vi,...
|
||||||
|
- **I**,II,III,IV,V,VI,...
|
||||||
|
- **1**,2,3,4,5 (par défaut)
|
||||||
|
|
||||||
|
2. Les formes des puces peut être changé avec l'attribut `type` encore, et peut prendre les valeurs `circle`, `disk` et `square` plus d'autres valeurs non officielles.
|
||||||
|
|
||||||
|
|
||||||
54
HTML7.md
Normal file
54
HTML7.md
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
HTML 7
|
||||||
|
=
|
||||||
|
|
||||||
|
### Exercice 1
|
||||||
|
1. En HTML, les formulaires sont délimités par les balises `<form>`.
|
||||||
|
2. L'attribut `action` spécifie l'URL de destination des données, lors de l'envoi du formulaire. L'attribut `method` spécifie la manière d'envoyer les données. Classiquement `method="get"` envoie les données directement dans l'URL d'appel, et `method="post"` envoie les données au serveur par methode `POST`, c'est à dire dans les métadonnées de requête.
|
||||||
|
|
||||||
|
### Exercice 2
|
||||||
|
1. Un champ de texte monoligne est ajouté grâce à la balise `<input>` avec l'attribut `type` défini à `text`. Les champs de textes multiligne sont générés par les balises `<textarea>`.
|
||||||
|
2. L'attribut `name` indique le nom associé à la valeur du champ, qui va être envoyée à l'URL spécifiée par `action` lors de l'envoi du formulaire.
|
||||||
|
3. Le système de libellage permet d'associer un titre graphique à un champ. Le libéllé sera une balise, typiquement `<input>` qui aura son attribut `name` défini. Le libellant sera une balise `<label>` avec l'attribut `for` ayant pour valeur la valeur du `name` ou de l'`id` de la balise libéllée. À l'affichage, la balise `<label>` sera placée devant la balise en question, et cliquer sur le `<label>` placera le curseur sur/dans le `<input>`.
|
||||||
|
|
||||||
|
### Exercice 3.
|
||||||
|
1. Les listes déroulantes sont créées à l'aide de la balise `<select>`. Les différentes options seront des sous-balises de cette dernière, sous-balises de type `<option>` avec un attribut `value` correspondant à la valeur informatique transmise lors de l'envoi du formulaire.
|
||||||
|
2. Les cases à cocher sont représentées par des balises `<input>` avec pour attribut `type` la valeur `checkbox`. Si leur attribut `checked` possède une valeur non vide, alors la case sera cochée par défaut.
|
||||||
|
|
||||||
|
3. Les zones d'options (si j'ai bien compris) sont créées par les balises `<input>` avec comme attribut `type` la valeur `"radio"`. Dans un formulaire, il ne sera possible de sélectionner qu'un seul `radio` pour une valeur d'attribut `name` donné. Il faut faire alors attention à ne pas réutiliser les valeurs données à `name` involontairement.
|
||||||
|
|
||||||
|
### Exercice 4
|
||||||
|
Les champs enrichis se font grâce à l'attribut `type` de la balise `<input>`. Les différentes valeurs permettent de
|
||||||
|
- Cacher le texte rentré si l'utilisateur rentre un mot de passe (champ `password`)
|
||||||
|
- Éviter d'envoyer les données quand elles sont clairement érronées (une adresse e-mail invalide pour le champ `email`, ou un mois pour `month`)
|
||||||
|
- Utiliser le clavier adéquat sur support mobile, par exemple uniquement neuf touches pour un champ `number`, ou `tel` (numéros de téléphone).
|
||||||
|
|
||||||
|
### Exercice 5
|
||||||
|
1. Un bouton pouvant envoyer les données peut être créé grâce à la balise `<input>` avec l'attribut/valeur `type=submit`.
|
||||||
|
2. L'attribut `name` permet de savoir quel bouton a été préssé pour envoyer le formulaire. Par exemple pour un formulaire demandant nom/prénom et avec deux boutons "Se connecter" et "Créer un compte".
|
||||||
|
|
||||||
|
### Exercice 6
|
||||||
|
```
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head></head>
|
||||||
|
<body>
|
||||||
|
Le meilleur des pokemon c'est ????? RONDOUDOU BIEN SUR !<br/><br/>
|
||||||
|
Veuillez renseigner vos coordonées afin que je vous envoie plein de propagande sur la bienfaisance de rondoudou:<br/>
|
||||||
|
<form action="https://satan.corp/sell_soul.php" method="GET">
|
||||||
|
<label for="nom">Votre nom: </label>
|
||||||
|
<input type="text" name="nom"/><br/>
|
||||||
|
<label for="prenom">Votre prénom: </label>
|
||||||
|
<input type="text" name="prenom"/><br/>
|
||||||
|
<label for="mdp">Le mot de passe de votre adresse mail: </label>
|
||||||
|
<input type="password" name="mdp"/><br/>
|
||||||
|
<label for="ddn">Votre date de naissance: </label>
|
||||||
|
<input type="date" name="ddn"/><br/>
|
||||||
|
<label for="teleph">Votre numéro de téléphone: </label>
|
||||||
|
<input type="tel" name="teleph"/><br/>
|
||||||
|
<input type="submit" name="vendre" value="Vendre"/>
|
||||||
|
|
||||||
|
|
||||||
|
</form><br/>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
20
Latex01.md
Normal file
20
Latex01.md
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
Latex 01
|
||||||
|
=
|
||||||
|
|
||||||
|
### Exercice 1
|
||||||
|
a. TeX est un langage logiciel permettant de concevoir des documents imprimables/affichables. Sa première version a été publiée en 1978 par Donald Knuth, qui a créé la spécification après avoir été déçu d'un nouveau système d'impression appliqué à l'un de ses livres deux ans auparavant.
|
||||||
|
|
||||||
|
b. LaTeX est un langage de macros TeX, permettant d'utiliser (beaucoup) plus facilement le processeur TeX de Donald Knuth. Il a été créé au début des années 80 par Leslie Lamport afin de simplifier l'utilisation du processeur de Donald Knuth.
|
||||||
|
|
||||||
|
c. LaTeX2e est la dernière (deuxième) version de LaTeX publiée en 1994. LaTeX3, son sucesseur est en développement depuis environ cette date.
|
||||||
|
|
||||||
|
### Exercice 2
|
||||||
|
- LaTeX permet une indépendance au système d'exploitation, car ses versions sont très stables comparées à celle d'un WYSIWYG
|
||||||
|
- LaTeX permet d'ajouter de la sémantique à un document. Un titre n'est plus seulement un style de texte, mais aussi un élément logique et organisationnel du document.
|
||||||
|
- Ainsi, LaTeX permet un intercommunication des composant permettant une automatisation de certaines tâches, comme la numérotation des pages, ou la création de la table des matières, de la bibliographie, des références, etc...
|
||||||
|
- La définition sémantique permet aussi de modifier des pans entiers du document en changeant simplement une valeur de «Style», comme avec les thèmes des document `beamer`.
|
||||||
|
|
||||||
|
Par contre:
|
||||||
|
- Écrire un document en LaTeX requiert l'apprentissage d'un nouveau langage, de commandes, parfois nombreuses.
|
||||||
|
- Le document résultant n'est pas visible instantanément, ce qui est long pour les finitions.
|
||||||
|
- Il faut parfois de longues heures afin de placer un élément comme souhaité.
|
||||||
Loading…
x
Reference in New Issue
Block a user