Résumé du HTML 5
- balise d’ouverture + texte + balise de fermeture
- Ne contiennent pas de texte, n’ont pas de balise de fermeture
- Utilisées pour insérer un élément à un endroit précis de la page
- Une balise peut avoir des attributs avec ou sans valeurs
- <article> : pour indiquer que c’est l’article d’un blog ou d’un journal
- <section> : section de contenu – utilisé si l’on a plusieurs sections d’un document.
- <nav> : liens de navigation
- <header> : en-tête de la page
- <footer> : pied de page
- <aside> : lien indirect avec le sujet principal de la page
- <div> </div> : bloc de texte – généralement utilisé pour découper un document en bloc.
- <span> </span> : la balise est un conteneur en ligne.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> : h1 étant le niveau le titre le plus haut et h6 le sous-titre le plus bas
- <p></p> : paragraphe
- <br> : saut de ligne
- <hr> : ligne horizontale
<!– Ceci est un commentaire -->
- <q> : permet d'insérer dans un texte une courte citation sans créer un nouveau bloc de contenu.
- <blockquote> : permet de définir un bloc de citation relativement long.
- <cite> : permet de spécifier la source d'une citation.
- <u> - Texte souligné
- <b> - Texte en gras
- <strong> - Texte important
- <i> - Texte en italique
- <em> - Mettre l'accent sur le texte (emphase)
- <mark> - Texte marqué
- <small> - Texte plus petit
- <del> - Texte supprimé
- <ins> - Texte inséré
- <sub> - Texte d'indice (sous la ligne de base et généralement plus petit)
- <sup> - Texte en exposant
- <ul></ul> : : indique que c’est une liste non ordonnée
- <li></li>: définit les différents élements de la liste
- <ol></ol> : : : indique que c’est une liste ordonnée
- <li></li>: définit les différents élements de la liste
Lien vers une page Web
- Tableau se construit ligne par ligne
- Chaque ligne doit contenir la liste des cellules
- <table></table> : indique que ce qui suit est un tableau
- <caption></caption> : indique titre du tableau
- <tr></tr> : indique que c’est une ligne du tableau
- <th></th> : indique que c’est l’en-tête du tableau (1ère ligne du tableau)
- <td></td> : indique que c’est une cellule/case du tableau
- Division en 3 parties: en-tête, corps et pied du tableau
- <thead></thead> : indique que c’est l’en-tête du tableau
- <tbody></tbody>: : indique que c’est le corps tableau
- <tfoot></tfoot> : indique que c’est le pied du tableau
- <th></th> : indique que c’est l’en-tête du tableau (1ère ligne du tableau)
- <td></td> : indique que c’est une cellule/case du tableau
- Fusion Horizontale : fusion de colonnes en utilisant colspan
- Fusion Verticale; fusion de lignes en utilisant rowspan
- <img> : indique que l’on va insérer une image
- src : indique source de l’image (i.e. où se trouve l’image)
- alt : indique un texte alternatif pour décrire l’image
- height et width : hauteur et largeur de l’image
- La balise <figure> permet d'associer un élément (image, vidéo, diagramme, etc.)
- La légende de la figure utilise la balise <figcaption>
- <audio></audio> : indique l’insertion d’un élément de type audio
- Attribut de base : src : source de l’audio
- controls : indique qu’il faut la barre de défilement + boutons Lecture & Pause
- loop : indique de jouer le morceau audio en boucle
- autoplay : indique que le morceau audio démarrera dès le début
- <video></video> : indique l’insertion d’un élément de type video
- Attribut de base : src : source de la vidéo
- poster : indique l’image à afficher en attendant que la video soit chargée
- controls : indique qu’il faut la barre de défilement + boutons Lecture & Pause
- width : indique la largeur du lecteur vidéo si l’on veut la modifier
- height : indique la hauteur du lecteur vidéo si l’on veut la modifier
- loop : indique de jouer le morceau audio en boucle
- autoplay : indique que le morceau audio démarrera dès le début
- muted : indique au navigateur de jouer la vidéo en mode silencieux
- playsinline : spécifie de jouer la vidéo dans son cadre d’origine
Balise de base pour création d’un formulaire
- <form></form> : indique que l’on va insérer un formulaire
Attributs de base
- method : indique comment envoyer les informations
- GET (par défaut) stock les informations du formulaire dans l'URL après le symbole ?.
- POST envois les informations du formulaire dans la requête soumise à la page.
- action : indique l’adresse de la page ou du programme qui va traiter les informations.
Input text
- <input> : indique que l’on va créer une zone de texte
- <label></label> : indique le libellé de la zone de texte
Attributs pour zone de texte
- type : indique le type des informations saisies
- name : nom de la zone de texte
- id : identifiant de la zone de texte pour lier le label à la zone de texte
- for : aura la même valeur que id de la zone de texte pour lier le label
- readonly : champ en lecture seule
- required : le champ est requis
- minlength & maxlength : nombre limite de caractères
- value : valeur par défaut si l’on veut mettre une valeur initiale
- placeholder : explication/exemple concernant le contenu du champ
Input submit
Génère un bouton permettant de soumettre un formulaire.
Checkbox
Attributs pour les checkbox
- checked : permet de spécifier si l'option devrait être cochée ou non
- name : nom de la zone de texte
- disabled : permet d'afficher en lecture seule une boite à cochée
- value : valeur par défaut si l’on veut mettre une valeur initiale
Radio
Attributs pour les Radios
- checked : permet de spécifier si l'option devrait être cochée ou non
- name : nom de la zone de texte
- disabled : permet d'afficher en lecture seule une boite à cochée
- value : valeur par défaut si l’on veut mettre une valeur initiale
Select
Attributs pour les select
- multiple : permet la sélection de plusieurs options.
- name : nom de la zone de texte
- disabled : permet d'afficher en lecture seule une boite à cochée
- value : valeur par défaut si l’on veut mettre une valeur initiale
- selected : permet de spécifier si l'option devrait être sélectionnée.
Textarea
Attributs pour les textarea
- cols : définit la largeur de base du textarea.
- rows : définit la hauteur de base du textarea.
- type : indique le type des informations saisies
- name : nom de la zone de texte
- id : identifiant de la zone de texte pour lier le label à la zone de texte
- for : aura la même valeur que id de la zone de texte pour lier le label
- readonly : champ en lecture seule
- required : le champ est requis
- minlength & maxlength : nombre limite de caractères
- value : valeur par défaut si l’on veut mettre une valeur initiale
- placeholder : explication/exemple concernant le contenu du champ
Number
Attributs pour les number
- min & max : permettent de spécifier un nombre minimal et maximal à respecter.
- name : nom de la zone de texte
- disabled : permet d'afficher en lecture seule le champ number
- step : définit le saut entre chaque valeur.
Range
Attributs pour les range
- min & max : permettent de spécifier un nombre minimal et maximal à respecter.
- name : nom de la zone de texte
- disabled : permet d'afficher en lecture seule un widget range
- step : définit le saut entre chaque valeur.
Password
Tel
Attributs pour les number
- inputmode="decimal" : affichent un pavé numérique agrémenté des symboles +*# sur les appareils mobile afin de simplifier la vie de l'usager.
- disabled : permet d'afficher en lecture seule le champ de téléphone
Search
Date
Attributs pour les dates
- min & max : permettent de spécifier une date minimale et maximale à respecter.
- disabled : permet d'afficher en lecture seule un widget range
Time
Attributs pour time
- min & max : permettent de spécifier une heure minimale et maximale à respecter.
- disabled : permet d'afficher en lecture seule l'outil de sélection d'heure.
Color
Attributs pour color
- name : nom de référence lorsque le formulaire est soumis.
- value : code de la couleur par défaut.
- disabled :permet d'afficher en lecture seule l'outil de sélection de couleur.