Différences entre versions de « Html5 »

De Didaquest
Aller à la navigationAller à la recherche
Ligne 129 : Ligne 129 :
  
 
==== Quelques nouveaux attributs ====
 
==== Quelques nouveaux attributs ====
 +
* Pour la balise <a> : media, type.
 +
* Pour la balise <area> : hreflang, media, rel, type.
 +
* Pour la balise <button> : autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget.
 +
* Pour la balise <fieldset> : name, disabled, form.
 +
* Pour la balise <form> : autocomplete, novalidate.
 +
* Pour la balise <input> : autocomplete, autofocus, form...
  
−
 
−
* 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:31


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, type.
  • Pour la balise <area> : hreflang, media, rel, type.
  • Pour la balise <button> : autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget.
  • Pour la balise <fieldset> : name, disabled, form.
  • Pour la balise <form> : autocomplete, novalidate.
  • Pour la balise <input> : autocomplete, autofocus, form...

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=85893 »