Partagez | 
 

 A la découverte de HTML 5 !

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar

Chou'

Doyenne

Bons Points (BP) : 929
MessageSujet: A la découverte de HTML 5 !   Lun 7 Avr - 21:56

HTML5



Hyper Text Markup Language. Et 5, pour sa cinquième version.
Tout d'abord, il faut noter que Html5 n'est pas un nouveau langage web, il s'agit de la suite de la norme Html4.01 qui elle, a plus de 10ans déjà !
Nous allons voir dans ce topic comment Html5 vient marquer un tournant dans le langage Html. Html5, c'est avant tout une organisation plus claire pour vos pages. Ceci a donc donné naissance à une multitude de nouveautés. Quiconque à l'heure d'aujourd'hui parlera du langage Html évoquera la version 5 de celui-ci !
Il faut cependant noter que des éléments du Html5, ne sont pas interprétés par certains navigateurs. Ceci est le cas pour les formulaires par exemple.

Le Doctype


Le Doctype, dans un document HTML, assure la bonne interprétation de la version HTML et la déclaration de celui-ci.

En HTML 4, nous avions :
Code:
<!DOCTYPE HTML PUBLIC  "type_de_HTML"  "adresse_de_DTD">

Un exemple :
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
*"DTD":"document type declaration". Ceci sert à indiquer à quelle règle d'écriture obéit le code d'une page HTML ou XHTML.

En HTML5 le doctype à déclarer est :
Code:
<!DOCTYPE html>

Rien de plus, rien de moins ! Impressionnant, non?
Contrairement aux autres versions Html, le DOCTYPE que peu de gens connaissaient par coeur, a été raccourci ! Cette modification n'engendra en aucun cas des problèmes d'interprétation par la suite car tout a été prévu !


Les nouvelles balises html5



L’HTML5 détient également un ensemble de nouvelles balises. Celles-ci ont pour but de donner plus de sens à nos pages web.
Par exemple, au lieu d’utiliser une "div" avec un id=”header”, nous pouvons utiliser tout simplement la balise "header" (voir ci-dessous). Parmi ces balises sémantiques nous trouvons :

Code:
<header></header>
L’en-tête comprenant le plus souvent une bannière ou un champ de recherche par exemple.

Code:
<nav> Accueil Présentation Contact</nav>
L'espace de navigation en différentes parties du site (un menu par exemple).

Code:
<aside></aside>
Une zone secondaire non liée au contenu principal de la page. Une navigation secondaire, une citation ou encore une publicité.

Code:
<article></article> 
Une portion de la page qui garde un sens même séparée de l’ensemble de la page (comme un article de blog par exemple). Un article dans un article correspond à une citation.

Code:
<section></section>

Une portion de la page qui ne garde pas le même sens que l'ensemble de la page. Ceci peut correspondre à des chapitres par exemple. Des sections peuvent contenir plusieurs articles.

Attention à ne pas confondre les balises "article" et "section" !

Code:
<footer>copyright</footer>
Le pied-de-page comprenant généralement le copyright, les Conditions générales de vente et les Conditions générales d'utilisation.

Code:
<embed src="helloworld.swf"/>
La balise définit un conteneur pour une application externe ou un contenu interactif (flash par exemple). Cette balise est auto-fermante. "/>"

En gros, voici la construction de votre page :

Les Formulaires


Pour les formulaires, les choses se précisent. Effectivement, Html5 nous donne la possibilité de préciser la nature des "input".
Nous avons 6 principaux input ayant vu le jour :
email, search, tel, datetime, range*, color.

Voici un exemple :
Le formulaire peut bien évidemment être personnalisé via un fichier Css.


*range : jauge de mesure, de progression ou de "balance". "Slider" dans l'exemple ci-dessus.
Petit rappel, la liste des input correspondent au type. Voici un exemple :
Code:
<input type="color" name="couleur" value="">


Html5, c'est aussi de nouveaux attributs


autofocus : cet attribut place le curseur dans le champ demandé.
Se présente comme ci-contre :



placeholder : vous pouvez faire apparaître une chaîne de caractères ou un texte d’information sur le champ. Ce texte disparaît dès que l'utilisateur place le curseur dans le champ. Plus besoin de javascript ! Pour les dates, il y a un petit calendrier sur la droite de l'input.

Suivez les instructions afin de tester les champs par vous-même ci-dessus :
Ecrivez ici

Entrez un mot de passe

"Range" : faites glisser le curseur

"Color" : cliquez sur la couleur

autocomplete : une autocomplétion à la manière d'AJAX comme les suggestions de mot ou d'expression lorsque les premières lettres sont écrites dans le champ.
Exemple d'autocomplétion sur la section de recherche "Google"

Attention, comme j'ai pu le signaler dans la présentation du sujet, il y a certains éléments qui ne passent pas sous tous les navigateurs ; placeholder par exemple.

Les balises multimédia : vidéo - audio


Il existe deux grandes balises multimédia très simples d'utilisation dans cette version html. Il s'agit d'une balise "video" et d'une autre audio. Ces balises nous dispensent des plugins classiques de notre navigateur ! Génial, non?
Dans un premier temps, nous allons voir la balise "video". Le minimum requis est IE9 sinon, la balise n'est pas reconnue.
Nous avons donc :
Code:
<video src="http://mavideo.ogg" controls>
  Votre navigateur ne gère pas l'élément <code>video</code>.
</video>

Qui donne un lecteur vidéo comme celui-ci :

Remarque : il est toujours bien d'utiliser plusieurs formats pour la vidéo car tous les navigateurs ne reconnaissent pas les uns et les autres...
Pour se faire, nous ajoutons une balise source comme ceci :
Code:
<video controls>
  <source src="mavideo.ogg" type="video/ogg">
  <source src="mavideo.mp4">
  Votre navigateur ne gère pas l'élément <code>video</code>.
</video>

Les codecs vidéo : WebM, Ogg Theora et H.264 (mp4).
Les codecs audio : Ogg, mp3, WAV et AAC.

Nous pouvons mettre des sous-titres à la vidéo.
En voici le code :
Code:
 <track src="soustitres.vtt">

Dans un second temps, nous aurons une balise "audio". Tout comme la balise "video" vue précédemment, le minimum requis est Ie9.
Il est conseillé de mettre plusieurs formats de fichier audio.
Exemple :
Code:
<audio controls autoplay loop>
 <source src="monfichieraudio.mp3" />
 <source src="monfichieraudio.ogg" />
 Votre navigateur ne supporte pas la balise HTML5 audio !
 <!-- Cette phrase ne sera affichée que si le navigateur est incompatible -->
</audio>

Le lecteur audio :

Les formats utilisés de codecs sont ogg, mp3, AAC et WAV comme nous avons pu le voir dans "video".

Remarque sur le tuto :
il a été dit à plusieurs reprises que les éléments ne passaient pas sous certains navigateurs. Vous ai-je menti? Oui...et non ! Vous avez un code pour palier à la majorité de vos soucis de compatibilité html5 - IE. Le voici :
Code:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
___________________


Merci Askip, M-Animals, Soihra, Elu', Bunny, Agn', Cheshire, .Søma, Mewyn :$:
 
Ex-pseudo : Couette - Choubidou
 

A la découverte de HTML 5 !

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Annulée] Demande une page HTML
» [résolu] Lien dans image survolée vers page html
» besion d'aide language html lecteur de musique !! (Résolu)
» Xhtml/css: integrer une video avec html
» fond noir qui n'apparait pas en html résolu

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
Sauter vers:  
Espace Admin du site

©2008-2016 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants