Ci-dessous, les différences entre deux révisions de la page.
html [2016/02/16 15:43] 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 html> | ||
- | <!-- Commentaires --> | ||
- | |||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | |||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | |||
- | </ | ||
- | |||
- | |||
- | ===== Structure de base d'une page HTML ===== | ||
- | |||
- | <code html> | ||
- | < | ||
- | < | ||
- | < | ||
- | <!-- 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 ===== | ||
- | <code html> | ||
- | < | ||
- | < | ||
- | < | ||
- | </ul> | ||
- | |||
- | < | ||
- | < | ||
- | < | ||
- | </ol> | ||
- | </ | ||
- | |||
- | ==== Liste de définition ==== | ||
- | <code html> | ||
- | < | ||
- | < | ||
- | < | ||
- | </dl> | ||
- | </ | ||
- | |||
- | (ça ressemble à une liste sans puce, ça existe mais j'ai jamais vu en vrai) | ||
- | |||
- | ===== Liens ===== | ||
- | <code html> | ||
- | <a href=" | ||
- | <a href="# | ||
- | <a href=" | ||
- | <a .. target=" | ||
- | <a href=" | ||
- | <a .. title=" | ||
- | |||
- | <h1 id=" | ||
- | </ | ||
- | |||
- | |||
- | ===== Image ===== | ||
- | < | ||
- | <img src=" | ||
- | image en miniature cliquable, imbriquer les balises: | ||
- | <a href=" | ||
- | </ | ||
- | |||
- | |||
- | ===== Figure (citations...) ===== | ||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | |||
- | ===== Structure de la page ===== | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | <ul> | ||
- | < | ||
- | .. | ||
- | </ | ||
- | </ | ||
- | < | ||
- | < | ||
- | .. | ||
- | </ | ||
- | < | ||
- | < | ||
- | </ | ||
- | |||
- | ===== Tableaux ===== | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | <tr> | ||
- | .. | ||
- | </ | ||
- | </ | ||
- | < | ||
- | < | ||
- | < | ||
- | <td colspan=" | ||
- | <td rowspan=" | ||
- | </ | ||
- | |||
- | ===== Les formulaires ===== | ||
- | < | ||
- | < | ||
- | < | ||
- | ... | ||
- | </p> | ||
- | </ | ||
- | <form method=""> | ||
- | method=" | ||
- | method=" | ||
- | <form action=""> | ||
- | </ | ||
- | |||
- | ==== Zone de texte à 1 ligne ==== | ||
- | < | ||
- | <input type=" | ||
- | <input type=" | ||
- | <form ..> | ||
- | <p> | ||
- | < | ||
- | </p> | ||
- | </ | ||
- | <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 | ||
- | <input type=" | ||
- | <input type=" | ||
- | <input type=" | ||
- | <input type=" | ||
- | value="" | ||
- | </ | ||
- | |||
- | ==== Auto-validation ==== | ||
- | < | ||
- | < | ||
- | <select name=' | ||
- | <option selected> | ||
- | < | ||
- | < | ||
- | </ | ||
- | < | ||
- | </ | ||
- | </ | ||