L'aide mémoire du petit Louc

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édentesRévision précédente
Prochaine révision		Révision précédente
html [2016/02/23 13:03] – luchtml [2018/10/13 20:32] (Version actuelle) – modification externe 127.0.0.1
Ligne 1: Ligne 1:
 +====== HTML ======
 +
 +Le HTML à partir de zéro. Du moins une bonne cheatsheet pour les distraits.
 +
 +C'est le langage à la base des pages web, il est descriptif : c'est à dire qu'il décrit le contenu dans la page et comment le mettre en forme à l'aide de **balises**.
 +
 +De nos jours, le HTML est manipulé/complété par des technologies complémentaires :
 +  * pour l'enrichir, par exemple le [[css]] pour la mise en page
 +  * ou le modifier, pour avoir des pages dynamiques [[javascript]]
 +  * ou encore le générer automatiquement pour personnaliser les pages, par exemple via un script [[php]]
 +Côté génération, souvent on crée des **modèles** écrits dans un metalangage comme le [[twig]] qui sera compilé par un programme [[php]] en HMTL qui sera envoyé au navigateur web client.
 +
 +Il existe une multitude de langage de programmation pour gérer/créer des sites web, et souvent on utilise des **Framework** pour faciliter / structurer / accélerer le développement du sites web. Mais au final, on a toujours une page en HTML, d'où l'importance d'en avoir des notions. 
 +
 +
 +
 +===== Balises de base =====
 +
 +Le HTML est composé de **balises** ''<ouvrante>'' et ''</fermante>'', ce qui est contenu entre une balise ouvrante et fermante est en général du texte qui sera affiché.
 +
 +Des **attributs** peuvent apporter des précisions sur la balise, ils se trouvent entre les chevrons : ''<balise attribut="paramètre">''
 +
 +<code html5>
 +<!-- Commentaires -->
 +
 +<div>...</div>          balise qui ne sert à rien, à recevoir des attributs
 +<h1>...</h1>         Titre de niveau 1 (possible jusqu'à 6)
 +<p>...</p>         paragraphe
 +</br> retour à la ligne
 +
 +<em>...</em> mettre un peu en valeur
 +<strong>...</strong> mettre en valeur = important
 +<mark>...</mark> marquer une portion de texte
 +<span>...</span> balise qui ne sert à rien, à recevoir des attributs
 +
 +</code>
 +
 +
 +===== Structure de base d'une page HTML =====
 +
 +C'est le minimum syndical pour que les navigateurs comprennent qu'il s'agit d'une page en HTML.
 +
 +<code html5>
 +<!DOCTYPE html>
 +<html>
 +    <head>
 +        <!-- En-tête de la page, contient des méta-données non affichées -->
 +        <meta charset="utf-8" />
 +        <title>Titre</title>
 +        
 +    </head>
 +    <body>
 +        <!-- Corps de la page, ce contenu sera affiché -->
 +        
 +    </body>
 +</html>
 +</code>
 +
 +
 +===== Listes =====
 +Une liste sert à présenter une information de manière structurée... sous forme de liste !
 +<code html5>
 +<ul> Liste non ordonnée
 + <li>...</li>
 + <li>...</li>
 +</ul>
 +
 +<ol> Liste ordonnée (numérotée..)
 + <li>...</li>
 + <li>...</li>
 +</ol>
 +</code>
 +
 +==== Liste de définition ====
 +<code html5>
 +<dl> délimiter la liste
 +   <dt>terme</dt> délimiter un terme
 +   <dd>définition du terme</dd> délimiter la définition de ce terme
 +</dl>
 +</code>
 +
 +(ça ressemble à une liste sans puce, ça existe mais j'ai jamais vu en vrai)
 +
 +===== Liens =====
 +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 ancre
 +<a href="page#ancre">...</a>    lien vers une ancre dans une autre page
 +<a .. target="_blank">..</a> attribut pour forcer l'ouverture d'une nouvelle page
 +<a href="fichier.zip">..</a> lance le téléchargement du fichier si non html
 +<a .. title="titre">..</a> permet d'afficher une infobulle au survol du lien
 +
 +<h1 id="ancre">..</h1> attribut id pour définir une ancre
 +</code>
 +
 +
 +===== Image =====
 +Pour afficher une image au sein de la page web
 +
 +<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>
 +</code>
 +
 +
 +===== 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é...)
 +
 +<code html5>
 +<figure>
 +   <img ... />                  image affichée
 +   <figcaption>..</figcaption> légende de l'image affichée
 +</figure>
 +</code>
 +
 +===== 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.
 +
 +<code html5>
 +<header>
 +    <!-- définit une zone entête de la page -->
 +</header>
 +
 +<footer>
 +    <!-- définit une zone de pied de page -->
 +</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>
 +
 +<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>
 +
 +===== Tableaux =====
 +Un tableau est contruit/décrit ligne par ligne
 +
 +<code html5>
 +<table>
 +
 +    <caption>TITRE DU TABLEAU</caption>
 +    
 +    <tr>    <!-- début nouvelle ligne -->
 +        <th>Entête colonne 1</th>
 + <th>Entête colonne 1</th>
 +    </tr>   <!-- fin ligne -->
 +    
 +    <tr>
 + <td>contenu première cellule</td>
 + <td>etc..</td>
 +    </tr>
 +
 +    <!-- etc... -->
 +
 +</table>
 +
 +<thead>...</thead> définit une entête de tableau
 +<tbody>...</tbody> définit le corps du tableau
 +<tfoot>...</tfoot> définit le pied du tableau
 +<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>
 +
 +===== Les formulaires =====
 +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.
 +
 +==== La balise form ====
 +Elle délimite le formulaire :
 +
 +<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>
 +
 +</code>
 +
 +==== Zone de texte à 1 ligne ====
 +La balise ''input'' permet à l'utilisateur de renseigner une information, par exemple de type texte :
 +
 +<code html5>
 +
 +<form>
 +
 +    <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>
 +
 +<input 
 +    size="10" taille de l'écriture dans le champ
 +    maxlength="" limite la taille maxi du champ en nbre de caractères
 +    value="pré-remplissage"
 +    placeholder="préremplissage qui disparait"
 +/>
 +
 +</code>
 +
 +==== Zone de texte multilignes ====
 +<code html5>
 +
 +<textarea>
 +on peut mettre du texte par défaut (pas besoin de value)
 +</textarea>
 +
 +</code>
 +
 +==== Types de texte particuliers ====
 +<code html5>
 +<input 
 +    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="url"
 +    type="tel"
 +    type="number" affichera des petites flèches sur le coté de la case
 +        min="" valable si type="number"
 +        max="" valable si type="number"
 +    type="range" renvoi un type numérique sélectionnable à l'aide d'un curseur
 +    type="color" permet de saisir une couleur dans une belle palette
 +    type="date/time/week/month/datetime"
 +    type="search"
 +/>
 +</code>
 +
 +==== Eléments d'option - choix ====
 +<code html5>
 +
 +<!-- case à cocher : -->
 +<input 
 +    type="checkbox" 
 +    name="case1"
 +    checked attribut qui signifie que la case est par défaut cochée
 +/>
 +
 +<!-- 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>
 + <optgroup label="Europe">
 +            <!-- permet de grouper des options -->
 + <option>..</option>
 + <option>..</option>
 + </optgroup>
 + <!-- les groupes ne peuvent pas être sélectionnés -->
 +</select>
 +
 +</code>
 +
 +==== Envoi de fichiers ====
 +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.
 +<code html5>
 +<form enctype="multipart/form-data">
 +    <input type="file" />
 +</form>
 +</code>
 +
 +==== Mise en page de formulaires ====
 +<code html5>
 +<form>
 +    <fieldset>
 +    <!-- permet de regrouper les différentes zones de saisie (sémantiquement, mais aussi avec un joli cadre) -->
 +        <legend>Un titre pour mon fieldset</legend>
 +    
 +        <!-- 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>
 +
 +==== Validation ====
 +La validation d'un formulaire déclenche l'envoi des informations vers le serveur pour traitement.
 +<code html5>
 +<form>
 +    <!-- bouton de validation standard -->
 +    <input type="submit"/>
 +    
 +    <!-- 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>
 +
 +==== Auto-validation ====
 +<code html5>
 +<form>
 +
 +    <!-- onchange est un event de html5, il execute le script contenu entre guillemet -->
 +    <select name='myfield' onchange='this.form.submit()'>
 +        <option selected>Milk</option>
 +        <option>Coffee</option>
 +        <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>
 +</code>