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


More-didaquest.png Traductions


Puce-didaquest.png Définition

Domaine, Discipline, Thématique


More-didaquest.png Justification


Définition écrite


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

  • insérer un lien vers une feuille de style CSS3 nommée style.css:
    <link href="style.css" rel="stylesheet">
  • insérer un lien vers fichier de script JavaScript:
     <script src="script.js"></script> 


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






Puce-didaquest.png Concepts ou notions associés


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



Puce-didaquest.png Exemples, applications, utilisations

Site Web
  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.
Web Mobile


   Le développement web incité à 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 y compris le HTML et CSS en premier lieu, le JavaScript ou bien le PHP.
Symphony


 Parmi les plateformes qui utilisent le développement Web pour la création des applications mobiles hybrides: Ionic
framework Ionic

(+)


Puce-didaquest.png Erreurs ou confusions éventuelles



Puce-didaquest.png Questions possibles



Puce-didaquest.png Liaisons enseignements et programmes

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



Aides et astuces



Education: Autres liens, sites ou portails




Puce-didaquest.png Bibliographie