Version du 2 juin 2022 à 23:55

Autres Fiches Conceptuelles

Posez une Question

(+)

Votre Publicité sur le Réseau

Traduction

Html5 (Français) / HTML5 (Anglais) / HTML5 برمجة الواب (Arabe)

(+)

Traductions

Définition

Domaine, Discipline, Thématique

(+)

Informatique / Développement Web / Développement Mobile / Design graphique Web / Programmation / Web Sémantique / Indexation Web / Commerce électronique /

Justification

Définition écrite

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

Html5 - Historique (+)

Définition graphique

Carte conceptuelle : Développement Web
Didactique.info : Développement Web

Balises Sémantiques HTML5
Structuration Sémantique HTML5 CSS3
Fichier:Canvas.png

Le canvas HTML5
HTML5 JavaScript API Géolocalisation
Objet SVG
vignette
Video HTML5

{{{AutresMedias}}}

Concepts ou notions associés

(+)

Informatique / Programmation / Application Mobile / Design graphique / Feuilles de style CSS3 / Web dynamique / Base de données / Data Science / Serveur / Framework / CMS / Ionic / Symphony / PHP / RUBY / Microsoft ActiveX / Applets Java / Plugins / Server-Sent Events SSE / XHTML /

Html5 - Glossaire / (+)

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

(+)

Erreurs ou confusions éventuelles

Confusion entre Web dynamique - Web statique
Confusion entre fonctionnalités HTML5 - fonctionnalités CSS3
Confusion entre fonctionnalités HTML5 - fonctionnalités JavaScript

Erreurs fréquentes:

Le HTML5 permet de mettre en forme les pages Web.
Le HTML5 permet de créer un site Web dynamique.
On ne peut pas ajouter des objets médias ou graphiques dans une page Web.
Le HTML5 permet de faire des calculs.
Erreurs de syntaxe:

    * ajouter balise fermante aux balises orphelines.
    * choisir un attribut erroné par exemple src avec la balise <a> au lieu de l'attribut href.

(+)

Questions possibles

(+)

Liaisons enseignements et programmes

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

Le développement Web avec HTML5 et les autres languages qui y sont associés est toujours en vogue, malgré l'émergence de plusieurs autres frameworks et languages de programmation, et son apprentissage offre un atout majeur pour le développement des sites Web de tous types et les applications mobiles.
L'apprentissage de HTML5 induit forcément à l'apprentissage de CSS3 et JavaScript qui le complètent.
Le design graphique contribue dans l'amélioration de l'apprentissage et de la réalisation des sites Web avec HTML5.
L'enseignement du HTML5 impose une pédagogie active, par projet, par exemple.

(+)

Aides et astuces

Forcez-vous à déclarer toute vos variables VBA. Cela peut paraître contraignant, mais finalement il n’y a que des avantages :

Les erreurs seront plus facilement identifiées,
Le code sera plus propre chacune des variables étant clairement définies,
Votre macro VBA sera plus facilement modifiable et adaptable.

Ils existent deux solutions vous obligeant de déclarer toutes les variables :

Option Explicit
Option Explicit par défaut : Une autre astuce VBA est de rendre cette mention par défaut. Pour ce faire, il suffit dans la fenêtre de l’éditeur, d’ouvrir le menu options (barre des menus / outils) puis de cocher la case Déclaration des variables obligatoire. La commande sera ensuite automatiquement intégrée à vos modules.

Mettre à jour l’écran

Pour rendre vos macros un peu plus rapides, utilisez la commande ci-dessous. Grâce à elle, vous ne verrez plus chaques actions de votre macro et votre écran restera fix.
Inscrivez ce bout de code au début de votre macro ou de votre module pour qu’il fonctionne: Application.ScreenUpdating = False

Les calculs automatiques

Si votre macro VBA va modifier des données qui sont utilisées par des formules, Excel va effectuer les calculs de vos cellules en même temps que la macro tourne.
Pour éviter à votre ordinateur de tout faire en même temps et donc de ralentir, inscrivez les deux mentions ci-dessous. La 1ère désactive les calculs automatiques et la seconde les réactive.

Application.Calculation = xlCalculationManual 'inscrire au début de votre code.
Application.Calculation = xlCalculationAutomatic 'inscrire à la fin de votre macro.

Education: Autres liens, sites ou portails

Bibliographie

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

https://www.w3schools.com/
https://www.freecodecamp.org/
https://developer.mozilla.org/fr/docs/Web/HTML
https://html5-tutorial.net/
Liste des balises https://jaetheme.com/balises-html5/
Objets SVG https://tutorial.techaltum.com/html5-svg.html
Objets Canvas https://tutorial.techaltum.com/html5-canvas.html
HTML5 Geolocation API https://www.dotnetcurry.com/html5/1194/html5-geo-location-api

Donnez votre avis sur les fiches conceptuelles

@@ Ligne 323 : / Ligne 323 : @@
 <!-- ****************** Commercez les modifications **************************  -->
-* Le développement Web avec HTML5 et les autres languages qui y sont associés est toujours en vogue, malgré l'émergence de plusieurs autres framwork et language de programmation, et son apprentissage offre un atout majeur pour l développement Web et les applications Web mobiles.
+* Le développement Web avec HTML5 et les autres languages qui y sont associés est toujours en vogue, malgré l'émergence de plusieurs autres frameworks et languages de programmation, et son apprentissage offre un atout majeur pour le développement des sites Web de tous types et les applications mobiles.
 * L'apprentissage de HTML5 induit forcément à l'apprentissage de CSS3 et JavaScript qui le complètent.
-* Le design graphique contribue dans l'amélioration et de l'apprentissage, et de la réalisation des sites Web avec HTML5.
+* Le design graphique contribue dans l'amélioration de l'apprentissage et de la réalisation des sites Web avec HTML5.
 * L'enseignement du HTML5 impose une pédagogie active, par projet, par exemple.
 *

Différences entre versions de « Html5 »

Version du 2 juin 2022 à 23:55

Sommaire

Traduction

Définition

Domaine, Discipline, Thématique

Définition écrite

C'est quoi HTML5?

Les éléments du HTML5

Exemple de page HTML5 simple

Le Doctype

HTML5 et autres languages

Les apports du HTML5

Les nouveaux éléments de HTML5

Quelques nouveaux attributs

Quelques nouveaux types

HTML5 et les API

Définition graphique

Concepts ou notions associés

Exemples, applications, utilisations

Erreurs ou confusions éventuelles

Questions possibles

Liaisons enseignements et programmes

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

Aides et astuces

Education: Autres liens, sites ou portails

Bibliographie

Menu de navigation

Actions des pages

Actions des pages

Outils personnels

Navigation

Rechercher

Outils

Imprimer / exporter