Université Claude Bernard Lyon 1

Introduction à HTML 5

logo HTML5

MIF38 - Programmation Web avancée et mobile

Contenu de l'UE

Historique de la spécification HTML 5 (1/2)

Historique de la spécification HTML 5 (2/2)

Condition pour publier la recommandation HTML5

Principes de développement

Les différentes syntaxes

Ce qui change en HTML 5

Nouveaux éléments et attributs

Semantic HTML5 page Layout
Exemple de positionnement des balises sémantiques (source : codeproject.com)

Nouveaux éléments et attributs

<section>

« The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. »
WHAT WG

Exemples

  • Chapitres, parties numérotées d'un document
  • pages à onglets dans une boîte de dialogue à onglets

La page d'accueil d'un site Web pourrait être divisée en sections pour une introduction, des articles de presse et les informations de contact.

Nouveaux éléments et attributs

<article>

« The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. »
WHAT WG

Exemples

  • un article de magazine ou de journal, une entrée de blog
  • un post sur un forum, un commentaire soumis par un utilisateur
  • tout autre élément de contenu indépendant.

Nouveaux éléments et attributs

<nav>

Contient un menu

<hgroup>

Permet de grouper des titres et des sous-titres (supprimé)

<aside>

  • Contenu en rapport avec le sujet principal mais pas indispensable à sa compréhension

  • Exemples

    • un article de magazine ou de journal, une entrée de blog
    • un post sur un forum, un commentaire soumis par un utilisateur
    • tout autre élément de contenu indépendant

Nouveaux éléments et attributs

<header>

  • Bloc d'en-tête

  • Valable pour un article ou une section

<footer>

Bloc de pied de page / section

Nouveaux éléments et attributs

<figure>

  • Figure : image, vidéo...

  • À utiliser dans un article ou une section

<figcaption>

Légende associée à une figure

Nouveaux éléments et attributs

Au final, comment savoir quel élément choisir ?

HTML5 Element FlowChart
Un algorithme pour savoir quel élément choisir (HTML5doctor.com).

Attributs data-*

Microformats et Microdata

Objectif : rajouter de la sémantique aux éléments HTML

Web Applications

Web Applications

Nouvelles API JavaScript

Rappels JavaScript

Philosophie du langage

→ Langage très permissif ("assembleur du Web")


N'hésitez pas à

Rappels JavaScript

Closures

function makeFunc() {
  var name = "Mozilla";
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc();

Source : MDN (en) ou MDN (fr)

Rappels JavaScript

Function factory

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

Source : MDN (en) ou MDN (fr)

Rappels JavaScript

Corollaire

<html>
...
<body>
...
<script>
(function() {
	var toto = 12;
	console.log(toto);
})();
</script>
</body>
</html>

Web Applications

API JavaScript d'extension DOM

Extension de l'interface HTMLDocument

  • Nouvelle méthode getElementsByClassName()

  • Standardisation de l'attribut innerHTMLau niveau du document

  • Gestion du focus : attribut activeElement et méthode hasFocus()

Extension de l'interface HTMLElement

  • Méthode getElementsByClassName() : s'applique au sous-arbre d'un élément

  • Standardisation de l'attribut innerHTML (en HTML et en XML pour tous les navigateurs...)

  • Manipulation des classes CSS : attribut classList renvoie une liste de classNames modifiables (méthodes contains(), add(), remove(), toggle())

  • Manipulation des liens et relations : attribut relList renvoie une liste de rel pour les éléments a, area et link

Source : Editors Draft du W3C

Mobile Web Applications

Références à consulter sur HTML5

Références fortement recommandées sur JavaScript

Conclusion

← →
#