125 lines
2.5 KiB
Markdown
125 lines
2.5 KiB
Markdown
|
## 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"/> -->
|
||
|
|
<!-- ``` -->
|