Introduction to HTML5 and CSS3

<!-- Slide number: 15 --> # object HTMLParagraphElement Attributs : childNodes, children, className, currentStyle, dir, document, filters, id, innerHTML, innerText, lang, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, style, title, uniqueID, tagName …

Méthodes : getAttribute, getElementsByTagName, normalize, removeAttribute, setAttribute, appendChild, cloneNode, hasChildNodes, insertBefore, removeChild, removeNode, replaceChild

<!-- Slide number: 16 --> # XHTML XHTML = eXtensible HTML Version plus stricte, plus codifiée de HTML Créé en 2000 pour succéder au HTML puis abandonné en 2009 (ou plus exactement intégré dans le HTML5)

<!-- Slide number: 17 --> # L’éditeur de texte Pour coder en HTML ou en CSS, nous pouvons utiliser plusieurs outils : NotePad++ Komodo SublimeText Dreamweaver Microsoft Visual Studio …

<!-- Slide number: 18 --> # Fonctionnalités HTML5 Balises sémantiques Nouvelle API de sélection Nouveaux types de champs de saisie de formulaire Intégration Audio et Vidéo Graphiques(canvas et SVG) Drag & Drop Web storage API de communications Géolocalisation …

<!-- Slide number: 19 --> # Fonctionnalités CSS3 Des nouveaux sélecteurs CSS Les ombres et les coins arrondis Les transitions et les transformations Le contenu généré (:before et :after) Les Web Fonts Les Media Queries

<!-- Slide number: 20 --> # Respectez la sémantique ! Exemple d'un span inutile :

On doit utiliser la balise <strong> qui sert à indiquer l'importance !

Ceci est complètement absurde puisqu'il existe des balises faites spécialement pour les titres (<h1>, <h2>…). <span class="important"> <div class="titre">.

<!-- Slide number: 21 -->


<!-- Slide number: 22 --> # Nouvelles balises sémantiques <header> : en-tête de page ou de section <section> : section de contenu <article> : article de composition indépendante <nav> : liens de navigation <figure> : regroupement des images et de leur description <footer> : pied de page ou de section <aside> : un contenu à part (sans relation directe avec le contenu de la page). Exp: pub, etc.

<!-- Slide number: 23 -->


<!-- Slide number: 24 -->


<!-- Slide number: 25 --> # Nouvelles balises sémantiques Ces balises peuvent être imbriquées les unes dans les autres. Ainsi, une section peut avoir son propre en-tête.

Ces balises ne s'occupent pas de la mise en page. Elles servent seulement à indiquer à l'ordinateur le sens du texte qu'elles contiennent.

<!-- Slide number: 26 --> # Nouvelles balises sémantiques On pourrait très bien placer l'en-tête en bas de la page si on le souhaite.

À l'heure actuelle ces balises ont encore assez peu d'utilité Néanmoins, il est assez probable que, dans un futur proche, les ordinateurs commencent à tirer parti intelligemment de ces nouvelles balises.

<!-- Slide number: 27 --> # Nouvelles balises sémantiques Internet Explorer 8 et versions inférieures nécessitent un code JavaScript afin de créer au préalable ces éléments dans leur DOM sous peine de ne rien afficher du tout


 il suffira d'appeler un script externe dès le début de la page de manière spécifique à IE : <!-- [if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

<!-- Slide number: 28 --> # Nouvelles balises HTML <output> : résultat d’un calcul <details> : un contenu extensible <summary> : label for details

<meter> : % ou mesure dans un intervalle Utilisez des % ou des fractions ou les attributs min max value <progress max value> : l’accomplissement des tâches <figure> et <figcaption>

<!-- Slide number: 29 --> # Nouvelles balises HTML L’élément output représente le résultat d'un calcul ou d'une sortie produite par le navigateur ou le serveur. Il accepte comme attribut : for, name, et form. La valeur de l'attribut for de l'élément <output> reprend les valeurs des id de chaque champ <input> nécessaire au calcul. L'attribut form de l'<output> reprend la valeur de l'id du formulaire qui comprend les différents champs servant au calcul. Ce dernier point est important car l'élément output n'est pas forcément enfant d'un élément form.

<!-- Slide number: 30 --> # Nouvelles balises HTML L’élément output - exemple <form oninput="x.value=a.value"> <input type="text" id="a">

<output name="x" for="a"></output> </form>

<!-- Slide number: 31 --> # Nouvelles balises HTML L’élément progress indique la progression d'une tâche au cours du temps, sans que l'on ne s'attache à une valeur précise mais plutôt à un pourcentage. Par exemple débutant à zéro et avançant jusqu'à atteindre les 100% Il est souvent utilisé en conjonction avec JavaScript pour afficher la progression d'une tâche <progress id="avancement" value="40" max="100“ > </progress>



<!-- Slide number: 32 --> # Nouvelles balises HTML L’élément meter représente une jauge mesurant une valeur comprise entre un minimum et un maximum, soit dans un intervalle établi, Ainsi les valeurs négatives peuvent être utilisées, contrairement à <progress> Son usage est principalement destiné à indiquer un état, stable ou évoluant au cours du temps | Attribut | Valeurs | Rôle | | --- | --- | --- | | name | texte | Nom clé de la paire clé/valeur à la soumission du formualire | | value | nombre à virgule flottante | Valeur de la jauge | | max | nombre à virgule flottante | Limite maximale de l'intervalle | | min | nombre à virgule flottante | Limite minimale de l'intervalle | | low | nombre à virgule flottante | Limite haut du segment de l'intervalle qualifié de "bas" | | high | nombre à virgule flottante | Limite basse du segment de l'intervalle qualifié de "haut" | | optimum | nombre à virgule flottante | Point optimal de position dans l'intervalle |

<!-- Slide number: 33 --> # Nouvelles balises HTML L’élément meter - exemples <p>Nombre de personnes inscrites : <meter min="0" max="100" value="50">50 places</meter> </p> <p>Espace utilisé dans votre webmail : <meter low="1000" high="6500" max="7500" value="6985">6 985 Mo</meter> </p>


<!-- Slide number: 34 --> # Nouvelles balises HTML L’élément details permet de baliser un contenu quelconque (texte, image, listes, tableaux, formulaires, etc) ayant pour rôle d'apporter une information ou des détails supplémentaires. Le navigateur pourra masquer ces informations par défaut, et les déployer à la demande de l'utilisateur. Une icône pourra indiquer l'état de l'élément : déployé (visible) ou compacté : seul le résumé reste visible. Ce résumé, assimilable à un titre ou une légende, est apporté par <summary> L’attribut open spécifie la visibilité initiale de l'élément (visible ou non à l'utilisateur)

<!-- Slide number: 35 --> # Nouvelles balises HTML L’élément details - exemple <details open> <summary>Caractéristiques techniques</summary> <table> <tr> <th>Nom</th> <th>Détails</th> </tr> <tr> <td>Matière</td> <td>Inox alimentaire</td> </tr> <tr> <td>Dimensions</td> <td>140x120 mm, hauteur 30 mm</td> </tr> </table> </details>



<!-- Slide number: 36 --> # Nouvelles balises HTML L’élément datalist Permet de lier une liste de choix à un élément input Il fournit des fonctionnalités d'auto-complétion ou d'auto-suggestion, dans un formulaire classique ou un champ de recherche

 <input list="pays" type="text" id="monPays" placeholder="Choisir votre pays" size="30" />

<datalist id="pays"> <option value="Tunisie"> <option value="Algérie"> <option value="France"> <option value="USA"> </datalist>

<!-- Slide number: 37 --> # Figure et Figcaption Eléments créés pour marquer sémantiquement du contenu (images, audio, vidéo…) Utiliser l’élément figure (type block) pour envelopper du contenu qui sert à la compréhension. Figcaption = accoler une légende au contenu.

<!-- Slide number: 38 --> # Les formulaires Principalement utilisés pour recueillir des données à propos de vos utilisateurs. Limites de HTML : on ne peut pas traiter les données issues d’un formulaire en HTML ni les stocker.

<!-- Slide number: 39 --> # Les formulaires Structure générale : <form action="" method="post"> …. une suite de champs …. <input > <label> …….

</form>

<!-- Slide number: 40 --> # Les formulaires INPUT <input type= "valeur" /> Exemples <input type="text" name="login" id="login"> <input type="password" name="mdp" id="mdp">

<!-- Slide number: 41 --> # Les formulaires les Web Forms ou HTML5 Forms | Types standards | | --- | | Button | | Checkbox | | File | | Hidden | | Image | | Password | | Radio | | Reset | | text | | Nouveaux Types HTML5 | | --- | | Color | | Date | | Datetime | | Email | | Month | | Number | | Range | | Search | | Tel | | Time | | url | | Week |

<!-- Slide number: 42 --> # HTML5 Forms Champ de type tel Il s'agit d'une déclinaison d'un champ de type text Il n'y a donc pas de pattern précis qui vérifierait si au moins un chiffre est renseigné. sur certains navigateurs de SmartPhone, l'entrée du numéro de téléphone est facilitée par le basculement à un clavier de type numérique. Champ de type URL Il s'agit d'une déclinaison d'un champ de type text le navigateur attend cette fois un format bien spécifique devant respect un pattern de type url. Tous les types d'URL sont admis (ftp://, mailto:, http://, etc.).

<!-- Slide number: 43 --> # HTML5 Forms Champ de type email Il s'agit d'une déclinaison d'un champ de type text Il est équivalent au type url, seul le format attendu change. Ce champ attend au minium un caractère (caractère non accentué comprenant les séparateurs tiret ou underscore) suivi d'un @ suivi à son tour d'un caractère. Champ de type search Ce type de champ est interprété différemment en fonction des navigateurs. Seul Webkit lui confère des fonctions supplémentaires par rapport au champ text classique


<!-- Slide number: 44 --> # HTML5 Forms

 Champ de type date vous permet d'activer une aide au remplissage (type datepicker) présente uniquement sur quelques navigateurs et différente de l'un à l'autre. Les attributs min et max peuvent être appliqués sur ce type de champ pour offrir un intervalle précis de dates <input type="date" max="2015-12-31" min="2015-01-01 " />

<!-- Slide number: 45 --> # HTML5 Forms Champ de type time permet de renseigner une heure, avec plus ou moins de précision. Les attributs min et max peuvent être appliqués L’attribut step permet d’ajouter un pas

 Champ de type datetime est une combinaison des deux type date et time. Il permet de renseigner une date et une heure précise dans un même champ (visuel)

<!-- Slide number: 46 --> # HTML5 Forms Champ de type month permet de renseigner un mois dans une année. La liste des attributs compatibles reste la même que pour le type date. Le format attendu correspond à cette syntaxe : aaaa-mm (ex: 2015-01). Champ de type week permet de renseigner une semaine dans une année. Il attend un format de type 2015W05 qui correspond à l'année et au numéro de semaine dans celle-ci.

<!-- Slide number: 47 --> # HTML5 Forms Champ de type number permet de renseigner une valeur numérique. Lorsque ce type de champ est pris en charge par le navigateur, celui-ci renvoie la valeur numérique renseignée dans ce champ. Si un autre type de contenu est renseigné, aucune valeur n'est retournée à la soumission du formulaire. Les attributs value, step, min et max peuvent être utilisés

 Champ de type range Ce champ propose un contenu évalué approximatif. par défaut la valeur la plus basse est 0, la plus haute 100 Ce type de champ retourne une valeur numérique qui correspond à la position du curseur. Les attributs value, step, min et max peuvent être utilisés



<!-- Slide number: 48 --> # HTML5 Forms Champ de type color permet de transformer le champ pour sélectionner un code couleur dans une palette. N’est pas compatible avec tous les navigateurs



<!-- Slide number: 49 --> # Les attributs HTML5 placeholder disabled required autocomplete autofocus list