Chapitre 1 : La période

C'était le meilleur des temps, c'était le pire des temps,
c'était l'âge de la sagesse, c'était l'âge de la folie,
c'était l'époque de la croyance, c'était l'époque de l'incrédulité,
c'était la saison de la Lumière, c'était la saison des Ténèbres,
...

(l'exemple est un extrait de A Tale of Two Cities de Charles Dickens)

L'article définit les sections indépendantes d'un document, d'une page ou d'un site. Cet élément peut être utilisé pour mettre en avant des actualités, des posts de forum, des articles de blog ou des commentaires, etc.

Matériel audio et vidéo

Le grand nombre de lecteurs multimédias écrits en Flash est la preuve que les développeurs préfèrent le plus souvent concevoir eux-mêmes leur interface, malgré le fait que dans la plupart des cas, les utilisateurs disposent des mêmes fonctionnalités (lecture, pause, retour en arrière et contrôle du volume) . Il est prévu qu'à l'avenir, ces fonctions soient prises en charge par les navigateurs eux-mêmes, ce qui offrira la possibilité de base d'intégrer des enregistrements audio et vidéo dans des pages Web, ainsi que la possibilité de manipuler ces éléments via l'API DOM.
Avec les nouvelles balises vidéo et audio, ce sera vraiment simple. La plupart des fonctions de leur API seront les mêmes, la seule différence étant l'accent mis sur la reproduction de matériel visuel et non visuel.

Remise des documents

Ci-dessous se trouve exemple le plus simple structure du document, composée d'un titre de page, d'un en-tête et d'un paragraphe de texte :

Un tel arbre contient l'élément title dans le conteneur head, ainsi que h1 et p dans le body .

La principale raison (et avantage) du choix du DOM pour définir le standard HTML 5 est que le langage lui-même peut alors être décrit indépendamment de la syntaxe. Il existe deux principaux types de syntaxe dans lesquels un document HTML peut être représenté : la sérialisation HTML (également connue sous le nom de HTML 5) et la sérialisation XML (ou XHTML 5).
La sérialisation HTML est basée sur la syntaxe HTML normale des versions antérieures (dérivée de SGML). Sa définition vise à mieux correspondre à la manière dont les navigateurs traitent réellement le HTML.

Exemple

Comme dans les versions précédentes de HTML, certaines balises restent facultatives et leur présence est automatiquement supposée.

La sérialisation XML utilise XML 1.0 et des espaces de noms tout comme XHTML 1.0.

Exemple

Ceci est un exemple de document HTML.

Contrairement à l'exemple précédent, l'attribut xmlns est présent ici, ainsi que la balise p fermante (dont la présence est requise dans le contexte XML). Pour déterminer la différence entre les sérialisations, les navigateurs utiliseront la valeur de type MIME. Tout document défini comme texte/html doit être conforme aux exigences de sérialisation HTML. Si le type MIME est application/xhtml+xml , les exigences de sérialisation XML doivent être satisfaites.

Le choix du type de sérialisation approprié appartient au webmaster, car Aucune des deux options possibles ne peut initialement être considérée comme préférable dans absolument tous les cas.

Avantages de l'utilisation de la sérialisation HTML :

• Rétrocompatibilité.
• Syntaxe bien connue des versions précédentes du standard HTML.
• Des règles syntaxiques « douces » qui pardonnent les erreurs mineures. Grâce à cela, les utilisateurs sont moins susceptibles de voir un message du navigateur indiquant que le document ne peut pas être affiché (même s'il contient effectivement des erreurs).
• Syntaxe pratique et concise dans laquelle vous pouvez omettre certaines balises et valeurs d'un certain nombre d'attributs.

Avantages de l'utilisation de la sérialisation XHTML :

• Les règles de syntaxe strictes de XML vous obligent à écrire un meilleur balisage, ce qui facilite souvent le travail ultérieur sur le contenu.
• Intégration avec d'autres normes basées sur XML (telles que SVG et MathML).
• Compatible avec moyens standards Traitement XML (souvent utilisé lors du traitement et de la publication de documents).

Promouvoir le développement de la norme

De l'auteur : Hypertext Markup Language ou simplement HTML est un langage standard pour la création de sites Web. Comme tout ce qui existe dans le monde de la technologie, le HTML a évolué très rapidement depuis son introduction à la fin des années 1980. Les débutants en programmation devraient apprendre dernière version langage – HTML5. Cependant, une compréhension approfondie de l’évolution du langage aidera les débutants et les professionnels à apprécier le passé, le présent et l’avenir du développement Web.

Bases HTML

Le code HTML indique au navigateur comment restituer le contenu. Le balisage représente la structure de base des pages. Pendant des décennies, HTML a été considéré comme une technologie fondamentale sur Internet, au même titre que CSS et JS. Les normes HTML et CSS sont régies par le World Wide Web Consortium.

Comme son nom l’indique, HTML ne peut pas être qualifié de langage de programmation. C'est un langage de balisage utilisé pour organiser les données sur Internet. Les documents HTML sont constitués d'éléments HTML représentés sous forme de balises. Les balises sont écrites entre crochets et divisent le contenu en catégories. Exemple simple Structures HTML avec le message "Hello World" ressemble à ceci :

Bonjour le monde

Les documents HTML sont téléchargés à partir de serveurs et indiquent au navigateur comment afficher le texte, les liens, les images et les formulaires interactifs.

Histoire du HTML

Les nouvelles versions de HTML visaient à rendre les technologies Internet plus accessibles, plutôt que de restituer les anciennes versions. Par exemple, en plus de nouvelles options de création de mises en page, HTML4 a amélioré le placement des éléments pour les utilisateurs malvoyants.

La dernière mise à jour majeure depuis les années 1990 visait à internationaliser le langage et à permettre aux programmeurs du monde entier d'améliorer plus facilement le HTML. Dans le cadre de cet effort, le jeu de caractères codés universels a été adopté comme codage HTML officiel. Cette décision a amélioré l'affichage des nombreux caractères et accents que l'on retrouve dans les langues et dialectes humains.

En conséquence, l’indexation des archives s’est améliorée, conduisant à une meilleure précision de la recherche. De plus, une typographie de très haute qualité est apparue. HTML4 a également donné aux concepteurs Web un contrôle supplémentaire sur la vitesse et l'ordre dans lesquels le contenu était rendu.

HTML ou HTML5 : l'évolution du développement Web

Internet est très différent aujourd’hui de ce qu’il était en 1999, lorsque la dernière mise à jour majeure de HTML 4.01 a été publiée. Il existe aujourd’hui des technologies que nous ne pouvions pas imaginer au tournant du siècle. Les smartphones, tablettes et autres appareils mobiles présentent de nouveaux défis pour les ingénieurs et les développeurs de logiciels. La mondialisation accélérée a fait de la normalisation des technologies Internet une priorité pour tous ceux qui ont un intérêt dans l’économie mondiale. La consommation mondiale d’Internet augmente d’année en année et les technologies utilisées devraient se développer de plus en plus vite.

Par conséquent, HTML5 a été implémenté pour résoudre ces problèmes et offrir une expérience plus fluide et plus cohérente aux utilisateurs et aux développeurs.

HTML est le fruit d'un effort commun Toile large Consortium ou W3C et groupe de travail sur la technologie des applications hypertextes Web ou WHATWG. En 2006, les organisations se sont associées pour réduire la dépendance aux plugins, améliorer la gestion des erreurs et remplacer les scripts par du balisage. En conséquence, HTML5 a grandement simplifié le processus de création d’applications Web.

Grâce au HTML5, les pages Web ont appris à stocker les données localement dans les navigateurs des utilisateurs, ce qui permet d'abandonner les cookies HTTP. Le contenu est livré plus rapidement et de manière plus sécurisée. HTML5 a également facilité la compatibilité entre navigateurs. Généralement, les navigateurs utilisaient divers plugins pour lire des fichiers multimédias. La prise en charge audio et vidéo intégrée élimine les problèmes de compatibilité. Les nouveaux attributs incluent des boutons de contrôle tels que la lecture, la pause et le volume.

Mise en œuvre progressive

HTML4 est un standard depuis 15 ans, c'est pourquoi de nombreux développeurs l'utilisent encore. Les navigateurs continueront à prendre en charge cette norme pendant encore longtemps. Les navigateurs plus anciens peuvent « ignorer » le nouveau code HTML5 lors du rendu du contenu. En fait, tous les navigateurs modernes prennent bien en charge la spécification HTML5 : Chrome, Firefox, Opera et Safari. HTML5 évolue constamment, c'est pourquoi les navigateurs ajoutent la prise en charge de nouvelles fonctionnalités dans les nouvelles versions. Heureusement pour nous, tous les principaux navigateurs ajoutent simultanément la prise en charge de nouvelles fonctionnalités dès leur sortie.

Vous pouvez tester la prise en charge de HTML5 par votre navigateur à l'aide de HTML5test.

La plupart des développeurs n'auront pas à réparer leurs anciens sites. Cependant, si vous associez votre avenir à la création de sites Web, vous devriez découvrir les avantages du HTML5 par rapport au HTML.

HTML ou HTML5 : quoi de neuf ?

Si le HTML a fonctionné pour tout le monde pendant plus d’une décennie, pourquoi a-t-il dû être mis à jour en 2014 ? La différence la plus significative entre les anciennes versions de HTML et HTML5 réside dans l'intégration de la vidéo et de l'audio dans les spécifications du langage. De plus, HTML5 inclut les mises à jour suivantes :

Les éléments obsolètes tels que le centre, la police et la grève ont été supprimés ;

des règles d'analyse améliorées l'ont rendu plus flexible et compatible ;

de nouveaux éléments vidéo, temps, navigation, section, progression, compteur, côté et canevas sont apparus ;

de nouveaux attributs pour les entrées, notamment l'e-mail, l'URL, les dates et les heures ;

de nouveaux attributs, notamment charset, async et ping ;

de nouvelles API avec mise en cache hors ligne et prise en charge du glisser-déposer, etc. ;

prise en charge des graphiques vectoriels sans programmes tiers tels que Silverlight ou Flash ;

La prise en charge de MathML a amélioré l'affichage des notations mathématiques ;

grâce à l'API JS Web Worker, JS peut désormais s'exécuter en arrière-plan ;

les attributs globaux comme tabindex, repeat et id peuvent désormais être appliqués à tous les éléments.

L'image ci-dessous montre les principales propriétés HTML5 réparties par catégorie.

Quels sont les avantages utilisateur du HTML5 par rapport au HTML ?

Nous avons abordé l'aspect technique du problème, mais quels avantages HTML5 apporte-t-il aux utilisateurs ordinaires ? Ci-dessous, j'ai compilé une liste de ces innovations que vous avez peut-être remarquées ou non :

Certaines données peuvent être stockées sur l'appareil de l'utilisateur, c'est-à-dire les applications peuvent fonctionner sans connexion Internet ;

Les pages Web peuvent afficher davantage de polices avec une gamme plus large de couleurs, d'ombrages et d'autres effets ;

les objets sur la page peuvent se déplacer avec le curseur ;

les médias interactifs tels que les jeux peuvent être lancés directement dans les navigateurs sans connecter de logiciels ou de plugins supplémentaires. L'audio et la vidéo ne nécessitent désormais plus de plugins ;

les navigateurs peuvent afficher des graphiques 3D interactifs en utilisant GPU ordinateur.

En éliminant le besoin de plugins tiers, HTML5 accélère la diffusion de contenu plus dynamique.

Quels sont les avantages du HTML5 par rapport au HTML pour les développeurs Web ?

L’objectif principal de HTML5 était de donner aux développeurs plus de flexibilité, ce qui conduirait à une expérience utilisateur plus immersive. HTML5 a été conçu dans plusieurs objectifs :

1. Même gestion des erreurs

Tous les navigateurs disposent d'analyseurs pour gérer les erreurs de syntaxe et de structure dans le code HTML. Jusqu'à récemment, les normes relatives à ce processus n'étaient prescrites nulle part.

Par conséquent, les développeurs de navigateurs ont dû tester les documents HTML avec des erreurs dans d'autres navigateurs pour procéder à une ingénierie inverse du processus de gestion des erreurs.

Dans la vie HTML, les erreurs sont inévitables. Selon Rebuildingtheweb, 90 % des pages contiennent des erreurs de codage. Un gestionnaire d'erreurs est simplement nécessaire au bon affichage des sites. En conséquence, la gestion des erreurs codées permet aux développeurs de navigateurs d’économiser beaucoup de temps et d’argent. Les avantages d’un algorithme d’analyse clairement défini ne peuvent être sous-estimés.

2. Prise en charge améliorée des propriétés pour les applications Web

Un autre objectif du HTML5 était de faire en sorte que les navigateurs agissent comme des plateformes d'applications. Les sites Web sont devenus beaucoup plus complexes, les développeurs ont donc appris à contourner les extensions de navigateur et d'autres technologies côté serveur. HTML5 vous permet de contrôler les performances du site. De nombreux hacks Flash et JS utilisés dans HTML4 ont été inclus dans la nouvelle spécification du langage. Ces changements offrent une expérience utilisateur plus fluide et plus rapide.

3. Sémantique des éléments améliorée

Les rôles sémantiques de certains éléments existants ont été améliorés, rendant le code plus intuitif. Les nouveaux éléments section, header, article et nav peuvent remplacer la plupart des balises div qui rendent plus difficile la recherche d'erreurs.

4. Prise en charge maximale des appareils mobiles

Appareils mobiles– un véritable casse-tête pour les développeurs Web. Leur prolifération au cours des dix dernières années a obligé à améliorer les standards HTML. Les utilisateurs souhaitent accéder aux applications Web de n'importe où, à tout moment et sur n'importe quel appareil. Les promoteurs ont été contraints de se soumettre aux demandes du marché. HTML5 simplifie la prise en charge mobile car il est adapté aux smartphones et aux tablettes.

Autres améliorations notables

Plusieurs années se sont écoulées depuis le lancement de HTML5, et plusieurs grandes entreprises ont migré leurs sites vers nouvelle norme. De nombreux développeurs partagent leurs opinions sur HTML et HTML5. Fonctionnalités les plus mentionnées :

1. Prise en charge des attributs de données personnalisés

Avant HTML5, ajouter des attributs personnalisés aux balises était risqué. En HTML4, les attributs personnalisés n'interféraient pas avec le rendu complet des pages, mais les documents les contenant n'étaient pas validés, entraînant un rendu en mode de compatibilité. L'attribut data-* a résolu ce problème.

L'attribut data-* peut être utilisé de plusieurs manières, mais son objectif principal est de stocker des informations supplémentaires sur les éléments. Les données sont stockées sous forme de simple chaîne. Les données utilisateur ont permis aux développeurs de créer des pages plus attrayantes sans avoir besoin d'Ajax et de technologies côté serveur.

2. Fini les cookies

Cela a déjà été dit, mais la prise en charge du stockage local des données a véritablement révolutionné le développement. Avant HTML5, le seul moyen de stocker de manière fiable les informations d’état consistait à utiliser des cookies. Les cookies peuvent stocker une quantité limitée de données et certains utilisateurs les désactivent par défaut. L'objet HTML5 localStorage vous permet de tromper la nature apatride du protocole HTTP.

L'objet localStorage appartient à l'espace de noms global de la fenêtre, ce qui signifie qu'il est accessible depuis n'importe où dans le script. Vous ne pouvez placer des chaînes que dans le stockage local, mais en utilisant les méthodes JSON.stringify() et JSON.parse(), vous pouvez facilement y envoyer toutes les nouvelles données. Il existe un autre objet sessionStorage qui vous permet de stocker des données jusqu'à ce que l'utilisateur ferme la fenêtre du navigateur.

3. Mise au point automatique sur les champs du formulaire

L'attribut autofocus permet aux développeurs de spécifier un champ qui recevra le focus après le chargement de la page. Dans un document, vous pouvez spécifier l'attribut de mise au point automatique pour un seul élément ; l'utilisateur peut remplacer la valeur en sélectionnant un autre champ. Par exemple, si vous ajoutez l'attribut de mise au point automatique au champ Nom de famille, comme indiqué dans la capture d'écran ci-dessous, une fois la page chargée, le champ Nom de famille est automatiquement mis en surbrillance.

4. Vous n'avez plus besoin de spécifier l'attribut type dans les balises de script et de lien

HTML5 suppose que les balises de script et de lien font référence à des scripts et des styles, ce qui signifie qu'il n'est pas nécessaire d'utiliser l'attribut type.

L'avenir du HTML et du HTML5

Une nouvelle génération de développeurs trouvera sans aucun doute de nouveaux avantages dans HTML5, et les réseaux sociaux contribueront au développement du langage. Le W3C a annoncé que les futures mises à jour de HTML5 donneront la priorité aux principes fondamentaux des applications tels que les outils de confidentialité. L'accent principal dans HTML5 était sur la définition de propriétés compatibles fiables, donc les propriétés peu fiables seront intégrées dans HTML 5.1. L'une des propositions les plus controversées concernait l'inclusion d'outils de gestion des droits numériques.

Début 2017, les développeurs web peuvent encore se débrouiller avec de bonnes connaissances ancien code HTML Caractéristiques. Cependant, si vous souhaitez poursuivre votre carrière et ne voulez pas apprendre le HTML5, vous ne ferez qu'empirer les choses. Il suffit de regarder la prise en charge intégrée de la vidéo et de l'audio par rapport à la version 4.1.

Quoi de neuf en HTML5 ? Différences entre HTML5 et HTML 4

La spécification HTML5 apporte de nombreux changements de différents niveaux et d'importance variable. Fondamentalement, les changements clés peuvent être divisés en 7 blocs :

a) Sémantique (signification sémantique des unités linguistiques)

HTML5 introduit un certain nombre de nouvelles balises sémantiques qui vous permettent d'organiser de manière plus significative la structure interne des pages Web. Cela inclut à la fois les balises de bloc telles que l'en-tête, le pied de page, l'article et les balises de balisage de texte telles que mark, ruby, details. Un certain nombre de balises HTML4 existantes ont été déclarées obsolètes, des balises individuelles ont changé de signification et les attributs ont subi certaines modifications.

b) Multimédia

HTML5 ajoute la prise en charge native du contenu multimédia (audio et vidéo) directement dans le balisage HMTL – avec l'API associée pour la gestion.

c) Graphiques

Travailler avec des graphiques côté client est devenu sensiblement plus facile. L'élément canevas et une API JavaScript spéciale pour travailler avec lui ont été ajoutés au HTML5. Canvas est une « surface » dynamique sur laquelle vous pouvez dessiner par programme. HTML5 inclut également officiellement la balise svg, qui vous permet d'implémenter des graphiques vectoriels décrits par le standard Web correspondant SVG (Scalable Vector Graphics).

d) Formulaires Web

Nouveaux éléments de formulaire Web : types et attributs qui vous permettent d'étendre les capacités des formulaires traditionnels avec des outils intégrés sans utiliser de bibliothèques supplémentaires - des astuces dans le champ de saisie (espace réservé) et la validation des valeurs saisies aux éléments spéciaux pour saisir des dates et des couleurs.

e) API JavaScript.

HTML5 inclut de nouvelles fonctionnalités pour déplacer des objets (Drag & Drop), travailler avec l'historique des transitions (API History), ainsi qu'un certain nombre de petites choses, telles que la possibilité de rendre le contenu modifiable directement à l'emplacement actuel à l'aide des attributs Content Editable. .

e) Nouveau DOCTYPE

La balise DOCTYPE est un élément clé des pages web qui prétendent être conformes aux standards : sans elle, le code ne passera pas le validateur. DOCTYPE est également important pour que la page s'affiche et fonctionne correctement dans les navigateurs conformes aux normes.

Il y avait 3 types d'éléments en HTML 4:

• 1. Stricte
• 2. Transition
• 3. Avec cadres (Frameset)

Souvent, choisir l'un ou l'autre élément DOCTYPE était assez difficile. Dans HTML5 DOCTYPE il n'y en a qu'un, il s'écrit ainsi :

Cette entrée courte remplace la forme plus ancienne et plus longue :

"http://www.w3.org/TR/html4/strict.dtd">

g) Syntaxe

HTML 5 aura deux syntaxes : HTML et XML « personnalisées ». La syntaxe HTML définit des règles d'analyse détaillées (y compris la « gestion des erreurs »).

La syntaxe XML est compatible avec les documents XHTML1 et ses implémentations. Pour utiliser cette syntaxe, le type MIME (MultiPurpose Internet Mail Extensions) doit être déclaré comme type XML et les éléments doivent être construits selon la spécification XML.

Figure 2 – Propriétés HTML5 de base

Envoyer votre bon travail dans la base de connaissances est simple. Utilisez le formulaire ci-dessous

Les étudiants, étudiants diplômés, jeunes scientifiques qui utilisent la base de connaissances dans leurs études et leur travail vous en seront très reconnaissants.

Documents similaires

L'histoire du HTML5. Différences entre HTML5 et les versions précédentes. Analyse comparative des avantages et des inconvénients. Exemples de sites russes sur HTML5. Vitesse de travail accrue. Technologie de stockage Web. Capacités structurelles de HTML5. Comparaison des navigateurs populaires.

travail de cours, ajouté le 23/10/2013


HTML5 est le langage de structuration et de présentation du contenu du World Wide Web et constitue la technologie de base utilisée sur Internet. Création d'une application Web utilisant la technologie Asp.net MVC 3 et le langage de balisage Web HTML5. Composition de la plateforme MVC.

travail de cours, ajouté le 25/05/2012


Genres et formats de multimédia. Spécificités d'Internet en tant que plateforme médiatique. Méthodes de création et de distribution de contenu multimédia. Développement de contenu pour un portail Internet multimédia sur les sports extrêmes urbains : audience, catégories, etc.

thèse, ajoutée le 20/08/2017


Formation et structure, la relation des principaux éléments du site pédagogique "HTML5&CSS3" pour fournir aux utilisateurs des informations sur les dernières technologies de l'industrie du Web et enseigner des compétences pratiques dans leur application. Élaboration d'un manuel d'utilisation.

travail de cours, ajouté le 17/06/2014


Concept Web 2.0. Langage de balisage HTML5. Outils de création d'applications Web. Langage d'analyse et de conception d'objets UML. Mise en place du remplissage et des tests de la boutique en ligne développée. Formatage du contenu des pages Web.

thèse, ajoutée le 05/06/2016


Recherche sur les capacités et les domaines d'utilisation du langage de programmation JavaScript. Analyse comparative des langages de programmation JavaScript et PHP. Développement d'une application Web interactive à l'aide de l'exemple d'un test sur le thème "Programmation en Delphi".

travaux pratiques, ajouté le 04/02/2015


Caractéristiques comparatives, capacités et fonctions des langages de programmation JavaScript et PHP. Principaux domaines de leur utilisation. Développement d'une application Web interactive utilisant JavaScript à l'aide de l'exemple d'un test sur le thème "Programmation en Delphi".

travail de cours, ajouté le 01/07/2014


Développement et mise en œuvre pratique d'une formation multimédia dans la discipline "NEC ASOIU". Analyse des propriétés du LMS MOODLE modifié et de sa capacité à fournir du support et à structurer le contenu. L'efficacité de l'approche de formation des cours.

thèse, ajoutée le 21/05/2009