Ci-dessous, les différences entre deux révisions de la page.
html [2016/02/24 09:26] luc |
html [2018/10/13 20:32] |
||
---|---|---|---|
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é/ | ||
- | * pour l' | ||
- | * 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, | ||
- | |||
- | Il existe une multitude de langage de programmation pour gérer/ | ||
- | |||
- | |||
- | |||
- | ===== Balises de base ===== | ||
- | |||
- | Le HTML est composé de **balises** ''< | ||
- | |||
- | Des **attributs** peuvent apporter des précisions sur la balise, ils se trouvent entre les chevrons : ''< | ||
- | |||
- | <code html5> | ||
- | <!-- Commentaires --> | ||
- | |||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | |||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | |||
- | </ | ||
- | |||
- | |||
- | ===== 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> | ||
- | < | ||
- | < | ||
- | < | ||
- | <!-- En-tête de la page, contient des méta-données non affichées --> | ||
- | <meta charset=" | ||
- | < | ||
- | | ||
- | </ | ||
- | < | ||
- | <!-- Corps de la page, ce contenu sera affiché --> | ||
- | | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | |||
- | ===== Listes ===== | ||
- | Une liste sert à présenter une information de manière structurée... sous forme de liste ! | ||
- | <code html5> | ||
- | < | ||
- | < | ||
- | < | ||
- | </ul> | ||
- | |||
- | < | ||
- | < | ||
- | < | ||
- | </ol> | ||
- | </ | ||
- | |||
- | ==== Liste de définition ==== | ||
- | <code html5> | ||
- | < | ||
- | < | ||
- | < | ||
- | </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' | ||
- | <code html5> | ||
- | <a href=" | ||
- | <a href="# | ||
- | <a href=" | ||
- | <a .. target=" | ||
- | <a href=" | ||
- | <a .. title=" | ||
- | |||
- | <h1 id=" | ||
- | </ | ||
- | |||
- | |||
- | ===== Image ===== | ||
- | Pour afficher une image au sein de la page web | ||
- | |||
- | <code html5> | ||
- | <!-- insertion d'une image --> | ||
- | <img src=" | ||
- | |||
- | <!-- pour une image cliquable, imbriquer les balises : --> | ||
- | <a href=" | ||
- | </ | ||
- | |||
- | |||
- | ===== Figure (citations, légende...) ===== | ||
- | Permet d' | ||
- | |||
- | <code html5> | ||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | </ | ||
- | |||
- | ===== 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> | ||
- | < | ||
- | <!-- définit une zone entête de la page --> | ||
- | </ | ||
- | |||
- | < | ||
- | <!-- définit une zone de pied de page --> | ||
- | </ | ||
- | |||
- | <nav> | ||
- | <!-- regroupe les liens de navigations --> | ||
- | <!-- par exemple via une liste : --> | ||
- | <ul> | ||
- | < | ||
- | .. | ||
- | </ul> | ||
- | </ | ||
- | |||
- | < | ||
- | <!-- regroupe le contenu par thématique --> | ||
- | < | ||
- | < | ||
- | </ | ||
- | |||
- | < | ||
- | <!-- permet de mettre en évidence des informations complémentaires | ||
- | comme ça se fait dans bcp d' | ||
- | </ | ||
- | |||
- | < | ||
- | <!-- contient une portion autonome, par ex un article de blog --> | ||
- | </ | ||
- | |||
- | </ | ||
- | |||
- | ===== Tableaux ===== | ||
- | Un tableau est contruit/ | ||
- | |||
- | <code html5> | ||
- | < | ||
- | |||
- | < | ||
- | | ||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | | ||
- | <tr> | ||
- | < | ||
- | < | ||
- | </tr> | ||
- | |||
- | <!-- etc... --> | ||
- | |||
- | </ | ||
- | |||
- | < | ||
- | < | ||
- | < | ||
- | <td colspan=" | ||
- | <td rowspan=" | ||
- | |||
- | </ | ||
- | |||
- | ===== Les formulaires ===== | ||
- | Le concept de formulaire répond au besoin de l' | ||
- | |||
- | ==== La balise form ==== | ||
- | Elle délimite le formulaire : | ||
- | |||
- | <code html5> | ||
- | |||
- | < | ||
- | | ||
- | | ||
- | | ||
- | | ||
- | |||
- | </ | ||
- | |||
- | </ | ||
- | |||
- | ==== Zone de texte à 1 ligne ==== | ||
- | La balise '' | ||
- | |||
- | <code html5> | ||
- | |||
- | < | ||
- | |||
- | <input type=" | ||
- | <input type=" | ||
- | |||
- | < | ||
- | < | ||
- | |||
- | <label for=" | ||
- | |||
- | attribut de la balise <input /> : | ||
- | size=" | ||
- | maxlength="" | ||
- | value=" | ||
- | placeholder=" | ||
- | </ | ||
- | |||
- | </ | ||
- | |||
- | ==== Zone de texte multilignes ==== | ||
- | < | ||
- | < | ||
- | </ | ||
- | |||
- | ==== Types de texte particuliers ==== | ||
- | < | ||
- | <input /> | ||
- | type=" | ||
- | type=" | ||
- | type=" | ||
- | type=" | ||
- | type=" | ||
- | min="" | ||
- | max="" | ||
- | type=" | ||
- | type=" | ||
- | type=" | ||
- | type=" | ||
- | </ | ||
- | |||
- | ==== Eléments d' | ||
- | < | ||
- | <input type=" | ||
- | checked attribut qui signifie que la case est par défaut cochée <input type=" | ||
- | <input type=" | ||
- | il est nécessaire que tous les choix aient le même nom (name="" | ||
- | Il faut aussi mettre un champ value différent pour que php sache quelle valeur a été choisie | ||
- | <select name="" | ||
- | <option value=""> | ||
- | <option value="" | ||
- | </ | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | < | ||
- | ... | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | ==== Envoi de fichiers ==== | ||
- | il suffit de rajouter l' | ||
- | <input type=" | ||
- | |||
- | ==== Mise en page de formulaires ==== | ||
- | < | ||
- | < | ||
- | < | ||
- | ... | ||
- | </ | ||
- | <input autofocus/> | ||
- | <input requiered/> | ||
- | </ | ||
- | |||
- | ==== Validation ==== | ||
- | <code html5> | ||
- | <input type=" | ||
- | <input type=" | ||
- | <input type=" | ||
- | <input type=" | ||
- | value="" | ||
- | </ | ||
- | |||
- | ==== Auto-validation ==== | ||
- | < | ||
- | < | ||
- | <select name=' | ||
- | <option selected> | ||
- | < | ||
- | < | ||
- | </ | ||
- | < | ||
- | </ | ||
- | </ | ||