Différences entre versions de « Html5 »

De Didaquest
Aller à la navigationAller à la recherche
Ligne 47 : Ligne 47 :
 
=== C'est quoi HTML5? ===
 
=== C'est quoi HTML5? ===
  
−
* HTML5, sortie en octobre 2014, est la dernière révision du HTML .
+
* 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.
+
* 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 décrit la structure d'une page Web.
 
* Il se compose d'une série d'éléments.
 
* Il se compose d'une série d'éléments.
Ligne 56 : Ligne 56 :
  
 
* 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 :
 
* 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 :
−
                 < tagname > Le contenu < /tagname >
+
                 < balise > Le contenu < /balise >
  
 
* Exemples de certains éléments HTML :
 
* Exemples de certains éléments HTML :
−
< h1 > Ma première rubrique < /h1 >
+
< h1 > Mon premier Titre< /h1 >
 
< p > Mon premier paragraphe. < /p >
 
< p > Mon premier paragraphe. < /p >
  
Ligne 72 : Ligne 72 :
 
<body>
 
<body>
 
     <header> <h1>Titre de Niveau 1</h1> </header>  
 
     <header> <h1>Titre de Niveau 1</h1> </header>  
−
     <nav><a href=" ">lien1</a></nav>
+
     <nav><a href="https://didaquest.org/wiki/Accueil">lien1</a></nav>
 
     <section>  
 
     <section>  
 
         <article>  
 
         <article>  
Ligne 84 : Ligne 84 :
 
==== Le Doctype ====
 
==== 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.
+
* 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.
  
  
Ligne 94 : Ligne 94 :
 
|Typologie= <!------------------------------------ Ne pas Modifier  -->
 
|Typologie= <!------------------------------------ Ne pas Modifier  -->
 
<!-- ****************** Commercez les modifications ****************-->
 
<!-- ****************** Commercez les modifications ****************-->
 +
 
=== Les apports du HTML5 ===
 
=== 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.
+
* 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 l'audio et la vidéo,
 
* L'intégration de dessin en 2D par les canvas,
 
* L'intégration de dessin en 2D par les canvas,
Ligne 103 : Ligne 104 :
 
* Autres options reliés avec les feuilles de style CSS3: possibilité de dimensionner une image de fond, possibilité de réaliser des animations.
 
* 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 sur le travail en cours d’exécution.
 +
time : définit une date ou une heure, ou les deux. Cette balise a été abandonnée en octobre 2011 en faveur de la balise data7 avant d'être réintroduite8.
 +
canvas : utilisé pour afficher des éléments graphiques, il faut utiliser un script pour l’animer.
 +
command : définit un bouton. Cette balise est uniquement supportée par Internet Explorer 9. Il n'est donc pas recommandé de l'utiliser9,10[source insuffisante].
 +
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é).
 +
output : représente le résultat d’un calcul.
 +
ruby, rt et rp : annotations ruby.
  
  

Version du 1 juin 2022 à 16:11


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 sur le travail en cours d’exécution.

time : définit une date ou une heure, ou les deux. Cette balise a été abandonnée en octobre 2011 en faveur de la balise data7 avant d'être réintroduite8. canvas : utilisé pour afficher des éléments graphiques, il faut utiliser un script pour l’animer. command : définit un bouton. Cette balise est uniquement supportée par Internet Explorer 9. Il n'est donc pas recommandé de l'utiliser9,10[source insuffisante]. 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é). output : représente le résultat d’un calcul. ruby, rt et rp : annotations ruby.


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, juin, 2024
  • ..................
  • ..................


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