Table des matières
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”>
<!-- 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
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.
<!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>
Listes
Une liste sert à présenter une information de manière structurée… sous forme de liste !
<ul> Liste non ordonnée <li>...</li> <li>...</li> </ul> <ol> Liste ordonnée (numérotée..) <li>...</li> <li>...</li> </ol>
Liste de définition
<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>
(ç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
<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
Image
Pour afficher une image au sein de la page web
<!-- 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>
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é…)
<figure> <img ... /> image affichée <figcaption>..</figcaption> légende de l'image affichée </figure>
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.
<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>
Tableaux
Un tableau est contruit/décrit ligne par ligne
<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
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 :
<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>
Zone de texte à 1 ligne
La balise input permet à l'utilisateur de renseigner une information, par exemple de type texte :
<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" />
Zone de texte multilignes
Types de texte particuliers
<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" />
Eléments d'option - choix
<!-- 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>
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.
<form enctype="multipart/form-data"> <input type="file" /> </form>
Mise en page de formulaires
<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>
Validation
La validation d'un formulaire déclenche l'envoi des informations vers le serveur pour traitement.
<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>
Auto-validation
<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>