Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
html [2016/02/16 15:50] luc |
html [2018/10/13 20:32] (Version actuelle) |
||
---|---|---|---|
Ligne 21: | Ligne 21: | ||
Des **attributs** peuvent apporter des précisions sur la balise, ils se trouvent entre les chevrons : ''< | Des **attributs** peuvent apporter des précisions sur la balise, ils se trouvent entre les chevrons : ''< | ||
- | < | + | < |
<!-- Commentaires --> | <!-- Commentaires --> | ||
Ligne 41: | Ligne 41: | ||
C'est le minimum syndical pour que les navigateurs comprennent qu'il s'agit d'une page en HTML. | C'est le minimum syndical pour que les navigateurs comprennent qu'il s'agit d'une page en HTML. | ||
- | < | + | < |
< | < | ||
< | < | ||
Ligne 60: | Ligne 60: | ||
===== Listes ===== | ===== Listes ===== | ||
Une liste sert à présenter une information de manière structurée... sous forme de liste ! | Une liste sert à présenter une information de manière structurée... sous forme de liste ! | ||
- | < | + | < |
< | < | ||
< | < | ||
Ligne 73: | Ligne 73: | ||
==== Liste de définition ==== | ==== Liste de définition ==== | ||
- | < | + | < |
< | < | ||
< | < | ||
Ligne 84: | Ligne 84: | ||
===== Liens ===== | ===== Liens ===== | ||
Un lien sert à naviguer d'une page à l' | Un lien sert à naviguer d'une page à l' | ||
- | < | + | < |
<a href=" | <a href=" | ||
<a href="# | <a href="# | ||
Ligne 98: | Ligne 98: | ||
===== Image ===== | ===== Image ===== | ||
Pour afficher une image au sein de la page web | Pour afficher une image au sein de la page web | ||
- | < | + | |
+ | < | ||
<!-- insertion d'une image --> | <!-- insertion d'une image --> | ||
<img src=" | <img src=" | ||
Ligne 109: | Ligne 110: | ||
===== Figure (citations, légende...) ===== | ===== Figure (citations, légende...) ===== | ||
Permet d' | Permet d' | ||
- | < | + | |
+ | < | ||
< | < | ||
< | < | ||
Ligne 117: | Ligne 119: | ||
===== Structure de la page ===== | ===== Structure de la page ===== | ||
- | < | + | Ces balises servent à structurer la page d'un point de vue sémantique. D'un point de vue mise en page, |
- | < | + | ce sont des blocs. |
- | <footer>...</footer> définit une zone de pied de page | + | |
- | < | + | < |
- | < | + | < |
- | < | + | |
- | .. | + | </header> |
- | </ | + | |
- | </ | + | < |
- | < | + | < |
- | < | + | </ |
+ | |||
+ | <nav> | ||
+ | < | ||
+ | <!-- par exemple | ||
+ | < | ||
+ | < | ||
.. | .. | ||
+ | </ul> | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <!-- regroupe le contenu par thématique --> | ||
+ | < | ||
+ | < | ||
</ | </ | ||
- | < | + | |
- | <article>..</ | + | < |
+ | | ||
+ | comme ça se fait dans bcp d' | ||
+ | </aside> | ||
+ | |||
+ | <article> | ||
+ | < | ||
+ | </ | ||
</ | </ | ||
===== Tableaux ===== | ===== Tableaux ===== | ||
- | < | + | Un tableau est contruit/ |
- | < | + | |
- | < | + | < |
- | < | + | < |
- | <th>...</ | + | |
- | <th>...</ | + | |
- | </ | + | |
- | < | + | |
- | <td>...</ | + | <th>Entête colonne 1</ |
- | <td>...</ | + | <th>Entête colonne 1</ |
- | </ | + | </tr> < |
- | <tr> | + | |
- | .. | + | |
- | </tr> | + | <td>contenu première cellule</ |
+ | <td>etc..</ | ||
+ | </ | ||
+ | |||
+ | | ||
</ | </ | ||
- | < | + | |
- | < | + | < |
- | < | + | < |
- | <td colspan=" | + | < |
- | <td rowspan=" | + | <td colspan=" |
+ | <td rowspan=" | ||
</ | </ | ||
===== Les formulaires ===== | ===== Les formulaires ===== | ||
- | < | + | Le concept de formulaire répond au besoin de l' |
- | < | + | |
- | <p> il doit obligatoirement contenir une balise | + | ==== La balise form ==== |
- | ... | + | Elle délimite le formulaire |
- | </p> | + | |
+ | <code html5> | ||
+ | |||
+ | <form | ||
+ | method="" | ||
+ | method=" | ||
+ | | ||
+ | |||
+ | | ||
+ | <!-- contenu du formulaire --> | ||
</ | </ | ||
- | <form method=""> | + | |
- | method=" | + | |
- | method=" | + | |
- | <form action=""> | + | |
</ | </ | ||
==== Zone de texte à 1 ligne ==== | ==== Zone de texte à 1 ligne ==== | ||
- | < | + | La balise '' |
- | <input type=" | + | |
- | <input type=" | + | < |
- | <form ..> < | + | |
- | <p> | + | < |
- | < | + | |
- | </p> | + | |
+ | <input type=" | ||
+ | |||
+ | | ||
+ | |||
+ | | ||
+ | ... | ||
+ | | ||
+ | |||
</ | </ | ||
- | <label for=" | + | |
- | attribut de la balise | + | <input |
- | size=" | + | size=" |
- | maxlength="" | + | maxlength="" |
- | value=" | + | value=" |
- | placeholder=" | + | placeholder=" |
+ | /> | ||
</ | </ | ||
==== Zone de texte multilignes ==== | ==== Zone de texte multilignes ==== | ||
- | < | + | < |
- | < | + | |
+ | < | ||
+ | on peut mettre du texte par défaut (pas besoin de value) | ||
+ | </ | ||
</ | </ | ||
==== Types de texte particuliers ==== | ==== Types de texte particuliers ==== | ||
- | < | + | < |
- | < | + | <input |
- | type=" | + | type=" |
- | type=" | + | type=" |
- | type=" | + | type=" |
- | type=" | + | type=" |
- | type=" | + | type=" |
- | min="" | + | min="" |
- | max="" | + | max="" |
- | type=" | + | type=" |
- | type=" | + | type=" |
- | type=" | + | type=" |
- | type=" | + | type=" |
+ | /> | ||
</ | </ | ||
==== Eléments d' | ==== Eléments d' | ||
- | < | + | < |
- | <input type=" | + | |
- | checked attribut qui signifie que la case est par défaut cochée | + | <!-- case à cocher : --> |
- | <input type=" | + | < |
- | il est nécessaire que tous les choix aient le même nom (name="" | + | |
- | Il faut aussi mettre | + | |
- | <select name="" | + | |
- | <option value=""> | + | /> |
- | <option value="" | + | |
+ | <!-- choix unique parmi plusieurs cases à cocher | ||
+ | <input | ||
+ | type=" | ||
+ | name=" | ||
+ | value="unique" | ||
+ | /> | ||
+ | |||
+ | <!-- liste déroulante pour sélectionner une valeur parmi une liste définie --> | ||
+ | <select name="" | ||
+ | <option value=""> | ||
+ | <option value="" | ||
</ | </ | ||
< | < | ||
- | < | + | < |
+ | < | ||
< | < | ||
< | < | ||
</ | </ | ||
- | <optgroup> | + | <!-- les groupes ne peuvent pas être sélectionnés |
- | ... | + | |
- | </ | + | |
</ | </ | ||
+ | |||
</ | </ | ||
==== Envoi de fichiers ==== | ==== Envoi de fichiers ==== | ||
- | il suffit de rajouter | + | C'est une méthode simple à l'ergonomie simple. On peut faire plus de nos jours en définissant des zones " |
- | <input type=" | + | <code html5> |
+ | < | ||
+ | <input type=" | ||
+ | </ | ||
+ | </code> | ||
==== Mise en page de formulaires ==== | ==== Mise en page de formulaires ==== | ||
- | < | + | < |
- | < | + | < |
- | < | + | |
- | ... | + | < |
- | </fieldset> | + | < |
- | <input autofocus/> | + | |
- | <input requiered/> | + | <!-- sélectionne automatiquement un champ --> |
+ | <input autofocus/> | ||
+ | |||
+ | <!-- rend le champ obligatoire, | ||
+ | <input requiered/> | ||
+ | |||
+ | </ | ||
+ | </ | ||
</ | </ | ||
==== Validation ==== | ==== Validation ==== | ||
- | <code | + | La validation d'un formulaire déclenche l' |
- | <input type=" | + | < |
- | <input type="reset"/> | + | <form> |
- | <input type="image" src=""/> | + | < |
- | <input type="button" /> bouton générique, | + | <input type="submit"/> |
- | value="" | + | |
+ | < | ||
+ | <input type="reset"/> | ||
+ | |||
+ | < | ||
+ | <input type="image" src=""/> | ||
+ | |||
+ | < | ||
+ | < | ||
+ | |||
+ | <!-- attribut qui permet de modifier le texte à l' | ||
+ | value=" | ||
+ | |||
+ | </ | ||
</ | </ | ||
==== Auto-validation ==== | ==== Auto-validation ==== | ||
- | < | + | < |
< | < | ||
- | <select name=' | + | |
- | <option selected> | + | <!-- onchange est un event de html5, il execute le script contenu entre guillemet --> |
- | < | + | |
- | < | + | <option selected> |
- | </ | + | < |
- | <noscript>< | + | < |
+ | </ | ||
+ | |||
+ | | ||
+ | < | ||
+ | |||
</ | </ | ||
</ | </ | ||