Html5

De Didaquest
Aller à la navigationAller à la recherche


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...
Html5-logo.png

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</h4> </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.


(+)


HTML5 et autres languages

Il est imératif de rappeler que HTML5 sert à structurer des pages Web mais ne permet guerre de les mettre en forme, ni d'y ajouter du contenu dynamique. Pour ce faire, les développeurs Web font recours à CSS3 pour ajouter des feuilles de styles, à JavaScript pour écrire les scripts, à PHP pour le web dynamique avec les bases de données, ainsi que d'autres framework pour le Web mobile et les applications...

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...

Quelques nouveaux types

nouveaux types : datetime, datetime-local, date, month, week, time, tel, number, range, email, url, search, color

HTML5 et les API

HTML5 introduit de nouvelles API qui aident à créer des applications web et qui proposent de nouveaux éléments pour les applications :

  • dessin 2D introduite avec la balise canvas,
  • les vidéos et des sons qui peuvent désormais être joués avec les balises vidéo et audio,
  • applications hors-lignes,
  • édition en combinaison avec le nouvel attribut dit contenteditable,
  • glisser-déposer en combinaison avec l'attribut dit draggable,
  • accès à l'historique de navigation et aux pages d'ajouter cette fonction d'historique de navigation
  • des API tierces peuvent être intégrées, telles que WebGL du Khronos Group permettant d'ajouter aux pages du contenu 3D.

More-didaquest.png Html5 - Historique (+)


Définition graphique


Ing-connaissance.png Carte conceptuelle : Développement Web
Ing-connaissance.png Didactique.info : Développement Web



Emblem-important-blue.svg

  • Balises Sémantiques HTML5

  • 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


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



Puce-didaquest.png Exemples, applications, utilisations

  • Le développement web est une discipline qui consiste, par l’usage de langages de programmation web, à créer des sites web ou des applications web ou mobile destinés à être publiés sur des serveurs.
  • Le métier de développeur web demande de savoir manier des outils tels que les CMS ou les frameworks comme Bootstrap ou bien le framework Symfony par exemple, et maîtriser des langages tels que le HTML et CSS, le JavaScript ou bien le PHP.
Symphony

(+)


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