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/16 15:34]
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 39: Ligne 39:
 ===== Structure de base d'une page HTML ===== ===== Structure de base d'une page HTML =====
  
-<code html>+C'est le minimum syndical pour que les navigateurs comprennent qu'il s'agit d'une page en HTML. 
 + 
 +<code html5>
 <!DOCTYPE html> <!DOCTYPE html>
 <html> <html>
     <head>     <head>
-        <!-- En-tête de la page -->+        <!-- En-tête de la page, contient des méta-données non affichées -->
         <meta charset="utf-8" />         <meta charset="utf-8" />
         <title>Titre</title>         <title>Titre</title>
 +        
     </head>     </head>
     <body>     <body>
-        <!-- Corps de la page -->+        <!-- Corps de la page, ce contenu sera affiché --> 
 +        
     </body>     </body>
 </html> </html>
Ligne 55: Ligne 59:
  
 ===== Listes ===== ===== Listes =====
-<code html>+Une liste sert à présenter une information de manière structurée... sous forme de liste ! 
 +<code html5>
 <ul> Liste non ordonnée <ul> Liste non ordonnée
  <li>...</li>  <li>...</li>
Ligne 68: 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 78: Ligne 83:
  
 ===== Liens ===== ===== Liens =====
-<code html>+Un lien sert à naviguer d'une page à l'autre 
 +<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 91: Ligne 97:
  
 ===== Image ===== ===== Image =====
-<code> +Pour afficher une image au sein de la page web 
-<img src="lien" alt="texte alternatif" /> insertion d'une image + 
-image en miniature cliquable, imbriquer les balises:+<code html5> 
 +<!-- insertion d'une image --> 
 +<img src="lien" alt="texte alternatif si pb affichage" />  
 + 
 +<!-- pour une image cliquable, imbriquer les balises : -->
 <a href="imageHauteResolution"><img src="aperçu" alt="description" /></a> <a href="imageHauteResolution"><img src="aperçu" alt="description" /></a>
 </code> </code>
  
  
-===== Figure (citations...) ===== +===== Figure (citations, légende...) ===== 
-<code> +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é...) 
-<figure>...</figure> élement qui enrichit le texte (citation, image ...) + 
-<figcaption>..</figcaption> légende+<code html5> 
 +<figure>  
 +   <img ... />                  image affichée 
 +   <figcaption>..</figcaption> légende de l'image affichée 
 +</figure>
 </code> </code>
  
 ===== Structure de la page ===== ===== Structure de la page =====
-<code> +Ces balises servent à structurer la page d'un point de vue sémantique. D'un point de vue mise en page, 
-<header>...</header> définit une zone entête de la page +ce sont des blocs. 
-<footer>...</footer> définit une zone de pied de page + 
-<nav> regroupe les liens de navigations (à gauche ? exemple Amazon) +<code html5> 
- <ul> +<header> 
- <li><a href="">..</a></li> +    <!-- définit une zone entête de la page --> 
- .. +</header> 
- </ul> + 
-</nav> +<footer> 
-<section> regroupe le contenu par thématique (au centre des pages d'accueil free...) +    <!-- définit une zone de pied de page --> 
- <h1>...</h1>+</footer> 
 + 
 +<nav> 
 +    <!-- regroupe les liens de navigations --> 
 +    <!-- par exemple via une liste : --> 
 +    <ul> 
 +        <li><a href="">..</a></li>
  ..  ..
 +    </ul>
 +</nav>
 +
 +<section>
 +    <!-- regroupe le contenu par thématique -->
 +    <h1>...</h1>
 +    <p>..</p>
 </section> </section>
-<aside>...</aside> contient des informations complémentaires (ex wikipédia) + 
-<article>..</article> contient une portion autonome, par ex un article de blog+<aside> 
 +    <!-- permet de mettre en évidence des informations complémentaires 
 +         comme ça se fait dans bcp d'articles / magazines --> 
 +</aside> 
 +  
 +<article> 
 +    <!-- contient une portion autonome, par ex un article de blog --> 
 +</article> 
 </code> </code>
  
 ===== 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.1455636855.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