Différences entre versions de « Html5 »

De Didaquest
Aller à la navigationAller à la recherche
Ligne 128 : Ligne 128 :
 
* ruby, rt et rp : annotations relative au language [[ruby]].
 
* ruby, rt et rp : annotations relative au language [[ruby]].
  
 +
==== Quelques nouveaux attributs ====
  
 +
 +
* Pour la balise <a> :
 +
media : permet de spécifier pour quel média ou appareil il est optimisé.
 +
type : définit le MIME de la cible URL.
 +
 +
 +
* Pour la balise <area> :
 +
hreflang : spécifie le langage de l’url.
 +
media : permet de spécifier pour quel média ou appareil il est optimisé.
 +
rel : indique la relation entre le document courant et l'URL cible.
 +
type : définit le MIME de la cible URL.
 +
 +
 +
* Pour la balise <button> :
 +
 +
autofocus : indique que le bouton doit avoir le focus pendant le chargement de la page.
 +
form : spécifie à quel formulaire le bouton appartient.
 +
formaction : spécifie où envoyer le form-data quand un formulaire est soumis. Remplace l'attribut action du formulaire.
 +
formenctype : indique comment le form-data doit être encodé avant d’être envoyé à un serveur. Remplace l'attribut enctype du formulaire.
 +
formmethod : définit comment il faut envoyer le form-data.
 +
formnovalidate : si présent, indique que le formulaire ne doit pas être validé quand il est envoyé.
 +
formtarget : spécifie où ouvrir/exécuter l’action.
 +
 +
* Pour la balise <fieldset> :
 +
 +
name : définit le nom du fieldset.
 +
disabled : désactive le fieldset.
 +
form : définit le formulaire du fieldset.
 +
 +
* Pour la balise <form> :
 +
 +
autocomplete : autocomplétion.
 +
novalidate : si présent le formulaire n’est pas validé lorsqu’il est soumis.
 +
 +
* Pour la balise <input> :
 +
 +
autocomplete : autocomplétion.
 +
autofocus : définit le focus lors du chargement de la page.
 +
form : spécifie à quel formulaire le champ appartient.
 +
formaction : remplace l'attribut "action" du formulaire. Indique l'URL à laquelle envoyer les données du formulaire.
 +
formenctype : remplace l'attribut "enctype" du formulaire. Indique comment la forme-données doit être encodé avant d’être envoyé au serveur.
 +
formmethod : remplace l’attribut "method" du formulaire. Définit la méthode HTTP d'envoi des données à l'URL.
 +
formnovalidate : remplace l'attribut "novalidate" du formulaire. S'il est présent le champ de saisie ne devrait pas être validé lors de son envoi.
 +
formtarget : remplace l'attribut "target" du formulaire. Indique la fenêtre cible utilisée lorsque le formulaire est soumis.
 +
height : définit la hauteur.
 +
list : désigne un "datalist" contenant des options prédéfinies pour le champ de saisie.
 +
max : indique la valeur maximale du champ d'entrée.
 +
min : indique la valeur minimale du champ d'entrée.
 +
multiple : si présent, l’utilisateur peut entrer plusieurs valeurs.
 +
pattern : définit un motif.
 +
placeholder : un conseil pour aider les utilisateurs à remplir le champ de saisie.
 +
required : indique que la valeur du champ de saisie est nécessaire pour soumettre le formulaire.
 +
step : indique l’intervalle entre les valeurs.
 +
 +
==== Quelques nouveaux types : ====
 +
 +
 +
{| class="wikitable"
 +
|+ Texte de la légende
 +
|-
 +
! number !! search !! url
 +
|-
 +
| email || color || range
 +
|-
 +
| tel || time || week
 +
|-
 +
| month || date || datetime-local
 +
|}
 +
 +
Pour la balise <link> :
 +
 +
sizes : définit la taille, hauteur et largeur.
 +
Pour la balise <menu> :
 +
 +
label : label visible du menu.
 +
type : définit le type de menu à afficher. La valeur par défaut est « list ».
 +
Pour la balise <meta> :
 +
 +
charset : définit la table de caractères pour l'encodage de la page.
 +
Pour la balise <ol></ol> :
 +
 +
reversed : si présent, change l’ordre d’affichage.
 +
Pour la balise <script> :
 +
 +
async : définit si le script doit être exécuté de manière asynchrone ou pas.
 +
Pour la balise <select> :
 +
 +
autofocus : active le focus sur cet élément.
 +
form : définit un ou plusieurs formulaires pour le "select".
 +
Pour la balise <style> :
 +
 +
scoped : si présent, le style est appliqué uniquement sur le parent et les fils.
 +
Pour la balise <textarea> :
 +
 +
autofocus : focus l’élément textarea.
 +
dirname : indique le nom du textarea.
 +
form : définit une ou plusieurs formulaires pour le textarea.
 +
maxlength : nombre maximum de caractères.
 +
placeholder : définit une astuce pour aider l’utilisateur.
 +
required : indique que la valeur du champ de saisie est nécessaire.
 +
wrap : définit comment le texte est affiché dans le textarea.
 +
Ainsi que les attributs globaux qui s'appliquent à toutes les balises :
 +
 +
contenteditable
 +
contextmenu
 +
data-*
 +
draggable
 +
hidden
 +
on* (gestionnaires d'événements)
 +
spellcheck
  
 
}}<!-- ******** Fin Fiche Didactique Définition ******************* -->
 
}}<!-- ******** Fin Fiche Didactique Définition ******************* -->

Version du 1 juin 2022 à 14:23


Autres Fiches Conceptuelles
Posez une Question


(+)

Target Icon.pngVotre Publicité sur le Réseau Target Icon.png

Puce-didaquest.png Traduction

Emblem-important-blue.svg

Html5 (Français) / HTML5 (Anglais) / HTML5 (Arabe)

(+)


More-didaquest.png Traductions


Puce-didaquest.png Définition

Domaine, Discipline, Thématique


More-didaquest.png Justification


Définition écrite

Emblem-important-blue.svg

C'est quoi HTML5?

  • HTML5, sortie en octobre 2014, est la dernière révision du HTML .
  • HTML (Hyper Text Markup Language) est le langage de balisage standard pour la création des pages Web depuis 1993.
  • Il décrit la structure d'une page Web.
  • Il se compose d'une série d'éléments.
  • Les éléments indiquent au navigateur quoi afficher comme contenu : titre, division, paragraphe, image , tableau...

Les éléments du HTML5

  • Tout comme les versions précédentes de HTML, l'élément HTML5 est toute l'instruction allant de la balise de début à la balise de fin :
                < balise > Le contenu < /balise >
  • Exemples de certains éléments HTML :

< h1 > Mon premier Titre< /h1 > < p > Mon premier paragraphe. < /p >

Exemple de page HTML5 simple

<!DOCTYPE html>

<html>
<head>
  <title>Titre de la page</title>
</head>
<body>
    <header> <h1>Titre de Niveau 1</h1> </header> 
    <nav><a href="https://didaquest.org/wiki/Accueil">lien1</a></nav>
    <section> 
        <article> 
         <p>paragraphe</p>
        </article>
     </section>
     <footer> <h4>pied de page</4'> </footer>
</body>
</html>

Le Doctype

  • Tout comme les pages HTML ou XHTML, les documents HTML5 nécessitent une déclaration indiquant au navigateur le type du document et la méthode standard de rendu: dans le cas de HTML5, l'instruction <!DOCTYPE html> » au début de tout document joue ce rôle.


(+)


Les apports du HTML5

  • La structuration sémantique des pages Web: plusieurs balises sont désormais utilisées pour structurer les éléments de la page Web suivant des rôles précis, ce qui favoriserait une meilleure indexation par les crawlers des moteurs de recherche.
  • L'intégration de l'audio et la vidéo,
  • L'intégration de dessin en 2D par les canvas,
  • La prise en charge des formats des objets vectoriels SVG.
  • L'intégration de nouveaux types pour les objets des formulaires: les dates, les couleurs, les E-mails...
  • Autres options reliés avec les feuilles de style CSS3: possibilité de dimensionner une image de fond, possibilité de réaliser des animations.

Les nouveaux éléments de HTML5

  • main : utilisé une seule fois, il définit le contenu principal de la page.
  • section : déliminte les sections du document: les chapitres, en-têtes, pieds de page.
  • article : partie indépendante de la page.
  • aside : partie indépendante de la page, bannière par exemple.
  • header : définit souvent l'entête visible de la page.
  • footer : définit le pied de page, d'un article ou un document.
  • nav : comprend souvent les liens de navigation.
  • figure : définit des images, des diagrammes, des photos, du code, etc.
  • figcaption : légende de la balise <figure>.
  • audio : pour insérer un fichier son ou des streaming.
  • video : permet d’insérer un contenu vidéo en streaming.
  • track : permet d’insérer un sous-titre (au format WebVTT) à une vidéo affichée avec la balise vidéo.
  • embed : définit un contenu incorporé, comme un plug in.
  • mark : définit un texte marqué.
  • meter : permet d’utiliser les mesures avec un minimum et maximum connus, pour afficher une jauge.
  • progress : définit une barre de progression.
  • time : définit une date ou une heure ou les deux
  • canvas : affiche des éléments graphiques, il faut utiliser un script JavaScript pour l’animer.
  • details : précise les détails supplémentaires qui peuvent être masqués ou affichés sur demande.
  • keygen : permet de générer une clé sécurisée.
  • output : représente le résultat d’un calcul.
  • ruby, rt et rp : annotations relative au language ruby.

Quelques nouveaux attributs

  • Pour la balise <a> :

media : permet de spécifier pour quel média ou appareil il est optimisé. type : définit le MIME de la cible URL.


  • Pour la balise <area> :

hreflang : spécifie le langage de l’url. media : permet de spécifier pour quel média ou appareil il est optimisé. rel : indique la relation entre le document courant et l'URL cible. type : définit le MIME de la cible URL.


  • Pour la balise <button> :

autofocus : indique que le bouton doit avoir le focus pendant le chargement de la page. form : spécifie à quel formulaire le bouton appartient. formaction : spécifie où envoyer le form-data quand un formulaire est soumis. Remplace l'attribut action du formulaire. formenctype : indique comment le form-data doit être encodé avant d’être envoyé à un serveur. Remplace l'attribut enctype du formulaire. formmethod : définit comment il faut envoyer le form-data. formnovalidate : si présent, indique que le formulaire ne doit pas être validé quand il est envoyé. formtarget : spécifie où ouvrir/exécuter l’action.

  • Pour la balise <fieldset> :

name : définit le nom du fieldset. disabled : désactive le fieldset. form : définit le formulaire du fieldset.

  • Pour la balise <form> :

autocomplete : autocomplétion. novalidate : si présent le formulaire n’est pas validé lorsqu’il est soumis.

  • Pour la balise <input> :

autocomplete : autocomplétion. autofocus : définit le focus lors du chargement de la page. form : spécifie à quel formulaire le champ appartient. formaction : remplace l'attribut "action" du formulaire. Indique l'URL à laquelle envoyer les données du formulaire. formenctype : remplace l'attribut "enctype" du formulaire. Indique comment la forme-données doit être encodé avant d’être envoyé au serveur. formmethod : remplace l’attribut "method" du formulaire. Définit la méthode HTTP d'envoi des données à l'URL. formnovalidate : remplace l'attribut "novalidate" du formulaire. S'il est présent le champ de saisie ne devrait pas être validé lors de son envoi. formtarget : remplace l'attribut "target" du formulaire. Indique la fenêtre cible utilisée lorsque le formulaire est soumis. height : définit la hauteur. list : désigne un "datalist" contenant des options prédéfinies pour le champ de saisie. max : indique la valeur maximale du champ d'entrée. min : indique la valeur minimale du champ d'entrée. multiple : si présent, l’utilisateur peut entrer plusieurs valeurs. pattern : définit un motif. placeholder : un conseil pour aider les utilisateurs à remplir le champ de saisie. required : indique que la valeur du champ de saisie est nécessaire pour soumettre le formulaire. step : indique l’intervalle entre les valeurs.

Quelques nouveaux types :

{


More-didaquest.png Html5 - Historique (+)


Définition graphique

Emblem-important-blue.svg

  • Titre de Votre Image 1

  • Titre de Votre Image 2

  • Titre de Votre Image 3


Emblem-important-blue.svg


Emblem-important-blue.svg

{{{AutresMedias}}}


Puce-didaquest.png Concepts ou notions associés

Emblem-important-blue.svg

(+)


More-didaquest.png Html5 - Glossaire / (+)



Puce-didaquest.png Exemples, applications, utilisations

  • ...............................................................................

................................................................................ ................................................................................ ................................................................................

  • ...............................................................................

................................................................................ ................................................................................ ................................................................................


(+)



Puce-didaquest.png Erreurs ou confusions éventuelles

Emblem-important-blue.svg

(+)



Puce-didaquest.png Questions possibles



Puce-didaquest.png Liaisons enseignements et programmes

Idées ou Réflexions liées à son enseignement

Emblem-important-blue.svg
  • ..................
  • .................
  • ..................
  • .................

(+)



Aides et astuces

Emblem-important-blue.svg
  • ..................
  • .................
  • ..................
  • .................



Education: Autres liens, sites ou portails

Emblem-important-blue.svg
  • ..................
  • ..................
  • ..................




Puce-didaquest.png Bibliographie

Emblem-important-blue.svg

Pour citer cette page: ([1]) 

ABROUGUI, M & al, 2022. Html5. In Didaquest [en ligne]. <http:www.didaquest.org/wiki/Html5>, consulté le 24, novembre, 2024
  • ..................
  • ..................


Récupérée de « https://didaquest.org/w/index.php?title=Html5&oldid=85892 »