L'Aide Mémoire Informatisé du petit Luc

Outils pour utilisateurs

Outils du site

Piste:
html

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision 		Révision précédente
html [2016/02/23 12:49]
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 : ''<balise attribut="paramètre">'' Des **attributs** peuvent apporter des précisions sur la balise, ils se trouvent entre les chevrons : ''<balise attribut="paramètre">''
  
-<code html>+<code html5>
 <!-- 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.
  
-<code html>+<code html5>
 <!DOCTYPE html> <!DOCTYPE html>
 <html> <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 !
-<code html>+<code html5>
 <ul> Liste non ordonnée <ul> Liste non ordonnée
  <li>...</li>  <li>...</li>
Ligne 73: Ligne 73:
  
 ==== Liste de définition ==== ==== Liste de définition ====
-<code html>+<code html5>
 <dl> délimiter la liste <dl> délimiter la liste
    <dt>terme</dt> délimiter un terme    <dt>terme</dt> délimiter un terme
Ligne 84: Ligne 84:
 ===== Liens ===== ===== Liens =====
 Un lien sert à naviguer d'une page à l'autre Un lien sert à naviguer d'une page à l'autre
-<code html>+<code html5>
 <a href="lien">...</a> lien vers une autre page <a href="lien">...</a> lien vers une autre page
 <a href="#lien">...</a> lien vers ancre <a href="#lien">...</a> lien vers ancre
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
-<code html>+ 
 +<code html5>
 <!-- insertion d'une image --> <!-- insertion d'une image -->
 <img src="lien" alt="texte alternatif si pb affichage" />  <img src="lien" alt="texte alternatif si pb affichage" />
Ligne 109: Ligne 110:
 ===== Figure (citations, légende...) ===== ===== Figure (citations, légende...) =====
 Permet d'associer une légende à une image (web sémantique, on dit que ce qui suit est la légende de l'image, il ne s'agit pas juste de le mettre en forme, bien aligné...) Permet d'associer une légende à une image (web sémantique, on dit que ce qui suit est la légende de l'image, il ne s'agit pas juste de le mettre en forme, bien aligné...)
-<code html>+ 
 +<code html5>
 <figure>  <figure>
    <img ... />                  image affichée    <img ... />                  image affichée
Ligne 120: Ligne 122:
 ce sont des blocs. ce sont des blocs.
  
-<code html>+<code html5>
 <header> <header>
     <!-- définit une zone entête de la page -->     <!-- définit une zone entête de la page -->
Ligne 156: Ligne 158:
  
 ===== Tableaux ===== ===== Tableaux =====
-<code> +Un tableau est contruit/décrit ligne par ligne 
-<table> contruction d'un tableau, se contruit ligne par ligne + 
- <caption>..</caption> indique le titre du tableau +<code html5> 
- <tr> début nouvelle ligne +<table> 
- <th>...</th> entête des colonnes  + 
- <th>...</th> +    <caption>TITRE DU TABLEAU</caption> 
- </tr> +     
- <tr> début nouvelle ligne +    <tr>    <!-- début nouvelle ligne --> 
- <td>...</td> contient une cellule +        <th>Entête colonne 1</th>  
- <td>...</td> + <th>Entête colonne 1</th> 
- </tr> fin ligne +    </tr>   <!-- fin ligne --> 
- <tr> +     
- .. +    <tr> 
- </tr>+ <td>contenu première cellule</td> 
 + <td>etc..</td> 
 +    </tr> 
 + 
 +    <!-- etc... --> 
 </table> </table>
-<thead>...</thead> définit une entête de tableau + 
-<tbody>...</tbody> définit le corps du tableau +<thead>...</thead> définit une entête de tableau 
-<tfoot>...</tfoot> définit le pied du tableau +<tbody>...</tbody> définit le corps du tableau 
-<td colspan="2"> permet la fusion de deux cellules horizontalement (cellules de 2 cases de largeur) +<tfoot>...</tfoot> définit le pied du tableau 
-<td rowspan="3"> permet la fusion de plusieurs cellules verticalement+<td colspan="2"> permet la fusion de deux cellules horizontalement (cellules de 2 cases de largeur) 
 +<td rowspan="3"> permet la fusion de plusieurs cellules verticalement 
 </code> </code>
  
 ===== Les formulaires ===== ===== Les formulaires =====
-<code> +Le concept de formulaire répond au besoin de l'utilisateur (client) d'envoyer des données au serveur, par exemple dans le cas d'un sondage. 
-<form> délimite le contenu d'un formulaire + 
- <p> il doit obligatoirement contenir une balise <p> si on veut écrire du texte +==== La balise form ==== 
- ... +Elle délimite le formulaire : 
- </p>+ 
 +<code html5> 
 + 
 +<form  
 +   method="" indique comment les données vont être envoyées 
 +   method="get" 255 carac max, par l'adresse http 
 +   method="post" ne transite pas par la barre d'adresse 
 +    
 +   action=""> indique l'adresse de la page qui se chargera de traiter les informations 
 +   <!-- contenu du formulaire -->
 </form> </form>
-<form method=""> inique comment les données vont être envoyées +
-method="get" 255 carac max, par l'adresse http +
-method="post" ne transite pas par la barre d'adresse +
-<form action=""> indique l'adresse de la page qui se chargera de traiter les informations+
 </code> </code>
  
 ==== Zone de texte à 1 ligne ==== ==== Zone de texte à 1 ligne ====
-<code> +La balise ''input'' permet à l'utilisateur de renseigner une information, par exemple de type texte : 
-<input type="text" /> zone de texte à une ligne + 
-<input type="text" name=".." /> donne un nom à cette zone de texte, pour etre exploitée par php +<code html5> 
-<form ..> <label> permet d'accoler une étiquette à notre champ de saisie + 
- <p> +<form> 
- <label>Votre pseudo</label> : <input /> + 
- </p>+    <input type="text" /> zone de texte à une ligne 
 +    <input type="text" name=".." /> donne un nom à cette zone de texte, pour être exploitée par php 
 + 
 +    <label>Etiquette collée à notre champ de saisielabel><input type="text" /> 
 +     
 +    <label for="x">for pointe sur id pour relier étiquette et champ de saisie</label> 
 +    ... 
 +    <input name="bla" id="x" /> 
 +    
 </form> </form>
-<label for="x">..</label><input name="bla" id="x" /> for pointant sur id permet de lier l'étiquette et la zone de saisie + 
-attribut de la balise <input /> : +<input  
-size="10" taille de l'écriture dans le champ +    size="10" taille de l'écriture dans le champ 
-maxlength="" limite la taille maxi du champ +    maxlength="" limite la taille maxi du champ en nbre de caractères 
-value="pré-remplissage" +    value="pré-remplissage" 
-placeholder="préremplissage qui disparait"+    placeholder="préremplissage qui disparait" 
 +/> 
 </code> </code>
  
 ==== Zone de texte multilignes ==== ==== Zone de texte multilignes ====
-<code> +<code html5> 
-<textarea></textarea> on peut mettre en les balises du texte par défaut (pas besoin de value)+ 
 +<textarea> 
 +on peut mettre du texte par défaut (pas besoin de value) 
 +</textarea> 
 </code> </code>
  
 ==== Types de texte particuliers ==== ==== Types de texte particuliers ====
-<code> +<code html5> 
-<input /> +<input  
-type="password" les caractères saisis ne sont pas visibles +    type="password" les caractères saisis ne sont pas visibles 
-type="email" indique au navigateur qu'une adresse mail doit être renseignée (forme, clavier spécifique sur mobile..) +    type="email" indique au navigateur qu'une adresse mail doit être renseignée (forme, clavier spécifique sur mobile..) 
-type="url" +    type="url" 
-type="tel" +    type="tel" 
-type="number" affichera des petites flèches sur le coté de la case +    type="number" affichera des petites flèches sur le coté de la case 
-min="" valable si type="number" +        min="" valable si type="number" 
-max="" valable si type="number" +        max="" valable si type="number" 
-type="range" renvoi un type numérique sélectionnable à l'aide d'un curseur +    type="range" renvoi un type numérique sélectionnable à l'aide d'un curseur 
-type="color" permet de saisir une couleur +    type="color" permet de saisir une couleur dans une belle palette 
-type="date/time/week/month/datetime" +    type="date/time/week/month/datetime" 
-type="search"+    type="search" 
 +/>
 </code> </code>
  
 ==== Eléments d'option - choix ==== ==== Eléments d'option - choix ====
-<code> +<code html5> 
-<input type="checkbox" /> case à cocher + 
-checked attribut qui signifie que la case est par défaut cochée <input type="checkbox" name="" checked/> +<!-- case à cocher : --> 
-<input type="radio"/> choix unique parmi plusieurs cases à cocher, +<input  
-il est nécessaire que tous les choix aient le même nom (name="") pour que le navigateur sache parmi quels champs de saisie le choix unique doit être fait +    type="checkbox"  
-Il faut aussi mettre un champ value différent pour que php sache quelle valeur a été choisie +    name="case1" 
-<select name="" id=""> crée une liste déroulante permettant de selectionner un valeur parmi une liste définie par les balises <option> +    checked attribut qui signifie que la case est par défaut cochée 
- <option value="">..</option> +/> 
- <option value="" selected>..</option> selected permet de choisir la valeur par défaut+ 
 +<!-- choix unique parmi plusieurs cases à cocher --> 
 +<input 
 +    type="radio" 
 +    name="nomIdentique"         il est nécessaire que tous les choix aient le même nom 
 +    value="unique"              Il faut un champ value différent pour que php sache quelle valeur a été choisie 
 +/> 
 + 
 +<!-- liste déroulante pour sélectionner une valeur parmi une liste définie --> 
 +<select name="" id=""> 
 +    <option value="">OPTION 1</option> 
 +    <option value="" selected>OPTION 2</option>     selected permet de choisir la valeur par défaut
 </select> </select>
 <select> <select>
- <optgroup label="Europe"> permet de grouper des options (alinéa pour les options contenues+ <optgroup label="Europe"> 
 +            <!-- permet de grouper des options -->
  <option>..</option>  <option>..</option>
  <option>..</option>  <option>..</option>
  </optgroup>  </optgroup>
- <optgroup> les groupes ne peuvent pas être sélectionnés + <!-- les groupes ne peuvent pas être sélectionnés -->
- ... +
- </optgroup>+
 </select> </select>
 +
 </code> </code>
  
 ==== Envoi de fichiers ==== ==== Envoi de fichiers ====
-il suffit de rajouter l'attribut enctype="multipart/form-data" à la balise <form>, puis +C'est une méthode simple à l'ergonomie simple. On peut faire plus de nos jours en définissant des zones "draggable" (= où on peut glisser-déposer), il y a plein de snippets sur github. 
-<input type="file" />+<code html5> 
 +<form enctype="multipart/form-data"> 
 +    <input type="file" /> 
 +</form> 
 +</code>
  
 ==== Mise en page de formulaires ==== ==== Mise en page de formulaires ====
-<code> +<code html5> 
-<fieldset> permet de regrouper les différentes zones de saisie +<form> 
- <legend>..</legend> avec un titre +    <fieldset> 
- ... +    <!-- permet de regrouper les différentes zones de saisie (sémantiquement, mais aussi avec un joli cadre) --> 
-</fieldset> +        <legend>Un titre pour mon fieldset</legend> 
-<input autofocus/> sélectionne automatiquement un champ +     
-<input requiered/> rend un champ obligatoire+        <!-- sélectionne automatiquement un champ --> 
 +        <input autofocus/> 
 +         
 +        <!-- rend le champ obligatoire, on ne pourra pas submit s'il n'est pas rempli --> 
 +        <input requiered/> 
 +         
 +    </fieldset> 
 +</form>
 </code> </code>
  
 ==== Validation ==== ==== Validation ====
-<code +La validation d'un formulaire déclenche l'envoi des informations vers le serveur pour traitement. 
-<input type="submit"/> bouton de validation et d'envoi du formulaire +<code html5> 
-<input type="reset"/> réinitialise le formulaire +<form> 
-<input type="image" src=""/> equivalent à submit, mais avec une image dont l'url est indiquée par src +    <!-- bouton de validation standard --> 
-<input type="button" /> bouton générique, nécessite javascript pour effectuer une action sur la page +    <input type="submit"/> 
-value="" permet de modifier le texte à l'intérieur du bouton+     
 +    <!-- réinitialise le formulaire --> 
 +    <input type="reset"/> 
 +     
 +    <!-- equivalent à submit, mais avec une image dont l'url est indiquée par src --> 
 +    <input type="image" src=""/> 
 +     
 +    <!-- bouton générique, nécessite javascript pour effectuer une action sur la page --> 
 +    <input type="button" /> 
 +     
 +    <!-- attribut qui permet de modifier le texte à l'intérieur du bouton de type button ou submit ou .. -->  
 +        value="message personnalisé" 
 + 
 +</form>
 </code> </code>
  
 ==== Auto-validation ==== ==== Auto-validation ====
-<code>+<code html5>
 <form> <form>
-<select name='myfield' onchange='this.form.submit()'> onchange est un event de html5, il execute le script contenu entre guillemet + 
-  <option selected>Milk</option> +    <!-- onchange est un event de html5, il execute le script contenu entre guillemet --> 
-  <option>Coffee</option> +    <select name='myfield' onchange='this.form.submit()'> 
-  <option>Tea</option> +        <option selected>Milk</option> 
-</select> +        <option>Coffee</option> 
-<noscript><input type="submit" value="Submit"></noscript> la balise <noscript>..</noscript> cache ce qui est contenu si les scripts sont activés, sinon les affiche+        <option>Tea</option> 
 +    </select> 
 +     
 +    <!-- la balise <noscript>..</noscript> cache ce qui est contenu si les scripts sont activés, sinon les affiche --> 
 +    <noscript><input type="submit" value="Submit"></noscript>  
 +   
 </form> </form>
 </code> </code>
  
html.1456231781.txt.gz · Dernière modification: 2018/10/13 20:32 (modification externe)

Outils de la page

Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki