Personnellement, je ne suis pas du tout fan des FPS, mais Doom c’est un classique et surtout l’un des premiers jeux vidéos auxquels j’ai joué sur PC (avec Prince of Persia). Alors, imaginez le voyage dans le temps que m’a fait faire la fondation Mozilla Firefox quand j’ai appris qu’ils avaient fait une version HTML5 du jeu. Certes ce n’est qu’une démo mais cela me suffit.

Je vous laisse en profiter, c’est par là. Ne vous inquiétez pas si vous avez un message de votre navigateur vous indiquant qu’il prend du temps à exécuter le javascript, laissez continuer le script. Cela ne devrait pas être très long.

À vos claviers !

Quand on est soucieux des normes W3C et de la compatibilité de son site sur tous les navigateurs, arrive à un moment ou un autre la question des vidéos et notamment celles des vidéos Youtube.

C’est bien connu la balise embed n’est pas valide mais tellement indispensable à Internet Explorer. Il suffit donc de la mettre en commentaires pour les autres navigateurs. Quand au code fourni par Youtube il va falloir le modifier quelque peu afin d’avoir un code valide.

Code fourni par Youtube

<object width="730" height="435">
<param name="movie" value="http://www.youtube.com/v/QAebNJitpNU?fs=1&amp;hl=fr_FR"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/QAebNJitpNU?fs=1&amp;hl=fr_FR" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="730" height="435"></embed>
</object>

Code valide et compatible avec Internet Explorer

<object type="application/x-shockwave-flash" style="width:730px;height:435px;" data="http://www.youtube.com/v/QAebNJitpNU?fs=1&amp;amp;hl=fr_FR">
<param name="movie" value="http://www.youtube.com/v/QAebNJitpNU?fs=1" />
<param name="allowFullScreen" value="true" />
<!--[if IE]><embed src="http://www.youtube.com/v/QAebNJitpNU?fs=1&amp;hl=fr_FR" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="730" height="435"></embed><![endif]-->
</object>

Apparu avec HTML5, la balise section représente une section générique de la page, un groupe thématique de contenus qui peut commencer par un titre. Par exemple une section peut représenter un groupe d’articles. Pour lui donner encore plus de sens on peut y placer un titre (h1 à h6), un header, un footer. D’autres balises peuvent bien sûr y être utilisées.

<section>
<h1>Titre de ma section</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec cursus tellus. Curabitur commodo quam id eros euismod bibendum. Quisque fringilla varius leo et semper. Fusce non ligula eros. Quisque et urna lorem, cursus vulputate ligula. Nunc vel ligula nulla. Praesent id neque nulla. Praesent a tincidunt odio.</p>
</section>

Attributs

Voir l’article sur les attributs globaux.

Devant les résultats du test HTML5 dont je vous parlais hier, certains navigateurs comme Opera ou Safari ont fortement protesté contre la publication de ces tests qui portent sur des versions betas quand ce ne sont pas des alphas. C’est vrai que dans l’absolu cela pose un problème de déficit d’image pour ces navigateurs et sur la toile une bribe d’information devient vérité révélée… De plus l’info a été reprise un peu partout et ça a fait boule de neige chez les blogueurs & Co. Le W3C s’est même excusé car apparemment les résultats de ces tests ne devaient pas être jetés à la vindicte populaire des blogueurs.

On a l’habitude de penser, quand on rédige, que l’internaute va faire un minimum d’effort pour lire et comprendre l’article dans sa totalité mais ce n’est que rarement le cas surtout si ce dernier fait comme moi qui quand un article ne passionne pas ne fait que le survoler quand il ne lit pas que le titre dans un agrégateur de flux RSS.

Si je m’en souviens la prochaine fois que je parlerai de tests de versions betas/alphas de navigateurs, je tâcherai de mettre un avertissement en gras souligné couleur rouge. Et si c’est en alpha je mettrai le tout en majuscule sur une taille de police de 227px. Pourquoi 227 ? Et pourquoi pas ?

Source : MacGeneration.

Le W3C vient de publier premiers tests officiels de conformité avec HTML5 et c’est Internet Explorer 9 qui est premier de la classe.

Ces tests ne couvrent qu’une partie des fonctionnalités de HTML5 : attributes, audio, canvas, getElementsByClassName, foreigncontent, video et xhtml5. Et les versions des navigateurs qui ont participé aux tests sont : Internet Explorer Platform Preview 6, Google Chrome 7.0.517.41 beta, Firefox 4 Beta 6, Opera 11.00 alpha (build 1029) et Safari Version 5.0.2 (6533.18.5).

Ces résultats démontrent les efforts de Microsoft matière de HTML 5. Et oui, on ne peut toujours en dire que du mal de Big Billou. Mais il faut tout de même noter que HTML5 et CSS3 ce n’est pas la même chose et qu’en matière de CSS3 IE9 pour le moment ne s’est pas mis totalement au pas. Chassez le naturel, il revient au galop.

Rappelons aussi que même si certains sites (irresponsables comme… Web-Petit) utilisent déjà HTML5, ce-dernier ne devrait être estampillé « mettable/portable en production » par le W3C d’ici deux à trois.

Sources : Generation-NT, W3C, Image.

Cet article recense la liste des attributs globaux HTML. Ce sont les attributs applicables à tous les éléments HTML.

acesskey

L’attribut accesskey sert à définir des raccourcis clavier afin d’activer un élément ou de lui donner le focus. Par exemple : un raccourci présents sur beaucoup de sites qui ont un moteur de recherche global comme… Web-Petit bien sûr qui utilise la touche F comme raccourci. À partir de Mozilla Firefox, Il faut faire la combinaison de touches : Alt+Shift+F (petite gymnastique digitale ).

<form action="" method="get"><input type="text" name="champ" accesskey="Z"></form>

class

L’attribut class permet de regrouper plusieurs éléments afin de leur appliquer un style commun (css). Un élément peut d’ailleurs avoir plusieurs classes.

<ul>
<li class="vert italique">vert & italique</li>
<li class="italique gras">italique & gras</li>
<li class="vert gras">vert & gras</li>
</ul>

.vert { color:green; }
.italique { font-style:italic; }
.gras { font-weight:bold; }

id

L’attribut id permet de donner un identifiant à un élément. Il peut être utilisé par CSS afin d’y appliquer un style ou encore dans des traitements Javascript. Il constitue une ancre dans la page.

<ul>
<li id="gras">vert & italique</li>
<li id="italique">italique & gras</li>
<li id="barre">vert & gras</li>
</ul>

#barre { text-decoration:line-through; }
#italique { font-style:italic; }
#gras { font-weight:bold; }

contenteditable

L’attribut contenteditable permet de définir si un élément peut être modifié ou pas.

<p contenteditable="true">Le contenu de ce paragraphe peut être modifié. Lâchez vous !</p>

dir

L’attribut dir permet de définir le sens de lecture d’un élement. Il peut pendre comme valeur ltr (left to right = de gauche à droite) qui est la valeur par défaut ou rtl (right to lefft = de droite à gauche).

<p dir="rtl"> إتش‌تي‌إم‌إل </p>

hidden

L’attribut hidden permet de dire au navigateur si un élément est visible ou pas. Il peut prendre comme valeur true ou false.

<ul>
<li hidden="true">Élément de liste invisible</li>
<li hidden="false">Élément de liste visible</li>
</ul>

lang

L’attribut lang permet de définir la langue d’un élément. En général, on l’utilise quand on veut insérer du contenu dans une langue différente de la langue de document HTML courant.

<ul>
<li lang="en">hello</li>
<li lang="de">hallo</li>
<li lang="it">ciao</li>
</ul>

spellcheck

L’attribut spellcheck permet de dire au navigateur si vous voulez ou non que le correcteur orthographique soit appliqué sur un élément. Bien entendu, il faut que votre navigateur intègre un correcteur orthographique et que vous n’ayez pas désactivé pas celui-ci.

<form action="" method="get">
<input type="text" name="corrige" spellcheck="true" value="Nimportnawak koi j'rakonte !" />
<input type="text" name="non-corrige" spellcheck="false" value="Nimportnawak koi j'rakonte !" />
</form>

style

L’attribut style permet d’appliquer un style CSS sur un élément.

<p style="font-style:italic;color:maroon;">Texte en italique de couleur bordeaux.<p>

tabindex

L’attribut tabindex permet de modifier l’ordre naturel de parcours d’un document, sa valeur doit être de type numérique entier. Par exemple, en tabulant les éléments pour lesquels tabindex a été renseigné recevront le focus en premier, dans l’ordre croissant de valeur.

<form action="" method="get">
<input type="text" name="text1" value="1" tabindex="1" />
<input type="text" name="text3" value="3" tabindex="3" />
<input type="text" name="text2" value="2" tabindex="2" />
</form>

title

L’attribut title permet de définir un texte d’infobulle qui apparaîtra lors du passage de la souris sur un élément.

<abbr title="Read The Fucking Manual">RTFM</abbr>

draggable

L’attribut draggable permet de définir si un élément peut être déplacé ou pas. On ne va pas ici entrer dans les détails mais cet attribut permet de glisser/déposer des éléments.

<p style="height:40px;width:40px;background:blue;" draggable="true"></p>

contextmenu

L’attribut contextmenu permet de lier un élément à un menu via l’id de ce dernier. Les menus (balise menu) permettent de créer, selon le type, des menus contextuels ou des barre d’outils. N’ayant pas de navigateur qui supporte cette fonctionnalité à l’heure où j’écris ces lignes je vous ai remis l’exemple donné par le W3C.

<form name="npc">
 <label>Character name: <input name=char type=text contextmenu=namemenu required></label>
 <menu type="toolbar" id=namemenu>
  <command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
  <command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
 </menu>
</form>

Dans le chapitre précédent nous avons vu entre autres comment structurer son texte avec les balises de paragraphes et les titres, dans celui-ci nous allons approfondir le sujet.

Les listes

Il existe plusieurs types de listes : les listes non ordonnées, les liste ordonnées et les listes de définitions.

Les listes non ordonnées (ul)

Les listes non ordonnées aussi appelées listes à puces servent comme leur nom l’indique à lister des éléments de contenu sans ordre particulier. Chaque élément de la liste est placé dans une balise double li.

<ul>
  <li>Pommes,</li>
  <li>Bananes,</li>
  <li>Poires,</li>
  <li>Oranges.</li>
</ul>

Les listes ordonnées (ol)

Les listes ordonnées servent comme leur nom l’indique à lister des éléments de contenu dans un ordre particulier. Chaque élément de la liste est placé dans une balise double li.

<ol>
  <li>Bananes,</li>
  <li>Oranges,</li>
  <li>Poires,</li>
  <li>Pommes.</li>
</ol>

Les listes de définitions (dl)

Les listes de définitions comme leur nom l’indique servent à lister des définitions. Chaque terme à définir est placé dans une balise double dt et chaque définition dans une balise double dd.

<dl>
  <dt>Football</dt>
  <dd>Sport de gentilshommes pratiqué par des brutes.</dd>
  <dt>Rugby</dt>
  <dd>Sport de brutes pratiqué par des gentilshommes.</dd>
</dl>

Mise en valeur

Les éléments strong et em permettent de mettre le texte en valeur. Contrairement à ce que beaucoup croient, ils ne servent pas à mettre le texte en gras ou en italique. C’est juste que c’est leur comportement par défaut en CSS. Mais le réel intérêt de ces éléments concerne le référencement, c’est qu’ils permettent de signifier que le contenu placé dans ces éléments est important, aux moteurs de recherches, par exemple.

Mettre un peu en valeur (em)

L’élément em permet de mettre du texte un peu en valeur. Par défaut le contenu de cet éléméent est affiché en italique mais il est bien sûr possible de modifier ce comportement en CSS.

<p>Dans cette exemple, le mot <em>italique</em> est en est mis un peu en valeur.</p>

Mettre très en valeur (strong)

La balise strong permet de mettre du texte très en valeur. Par défaut le contenu de cette balise est affiché en gras mais il est bien sûr possible de modifier ce comportement en CSS.

<p>Dans cette exemple, le mot <strong>gras</strong> est en est mis très en valeur.</p>

Citation

Citation au sein d’un bloc (q)

L’élément q permet d’insérer une citation dans un élément de type bloc. Par défaut dans Mozilla, le texte est mis entre guillemets.

<p>Comme le disait si bien Lavoisier : <q>Rien ne se perd, rien ne se crée, tout se transforme.</q></p>

Bloc de citation (blockquote)

L’élément blockquote permet d’insérer une citation sous forme d’un bloc. L’attribut cite permet de renseigner l’URL de la citation.

<blockquote cite="http://fr.wikipedia.org/wiki/HTML5">HTML5 (HyperText Markup Language 5) est la dernière révision du principal langage du web, HTML. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5.</blockquote>

Le titre d’une référence (cite)

Avant HTML 5, l’élément cite permettait de citer le nom d’une personne. Mais dans HTML 5 ce n’est plus l’usage qui lui est destiné. Il convient maintenant de l’utiliser pour citer uniquement les titres de travaux (livre, poème, essai, jeu, film, etc…)

<p>Je sais que ce n'est pas très original pour un geek, mais je suis un grand fan du film <cite>le Seigneur des Anneaux</cite>.</p>

Abréviation

L’élément abbr permet d’insérer une abréviation ou un acronyme. La balise acronym n’existe plus en HTML 5. L’attribut title permet de renseigner ce que signifie l’abréviation ou l’acronyme.

<p>Je suis trop <abbr title="Mort de rire">MDR</abbr>, <abbr title="Laugh out loud">LOL</abbr>.</p>

Exposant et indice

Bon là je crois que l’exemple parlera de lui-même.

<p>Terme général d'une suite géométrique : U<sub>n</sub> = aq<sup>n-n<sub>0</sub></sup></p>

← Article précédent

On a vu notre première page HTML, nous allons maintenant commencer à remplir cette page car vide elle ne nous sert pas à grand chose

Structurer son texte

Même si dans l’absolu on peut s’en passer il est tout de même important de placer son texte dans des éléments HTML. Ce afin de structurer son texte car c’est le but même du HTML et cela permettra également de pouvoir lui appliquer une feuille de style (CSS) plus facilement.

Les paragraphes

C’est la balise de base pour intégrer votre texte, il suffit juste de mettre tout ça entre les balises ‹p›…‹/p›.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vehicula, diam semper venenatis tincidunt, sapien risus vulputate velit, id porta nulla nunc eu dui. Nullam fermentum urna vel velit blandit ac varius neque scelerisque. Aenean non suscipit nulla. In pellentesque pretium eros, vitae vehicula quam luctus eu.</p>

Les titres

Il y a 6 niveaux de titre allant de ‹h1›…‹/h1› à ‹h6›…‹/h6›

<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>

Les liens

On peut avoir besoin de rediriger un internaute vers une autre page du site, un autre site internet, une ancre dans la page ou encore faire un lien vers une image ou un autre fichier. Pour cela rien de bien compliqué, il suffit de renseigner dans l’attribut href à l’aide de la cible du lien.

<a href="http://www.google.fr">Google</a>
<a href="http://www.web-petit.com/tutoriels">Tutoriels</a> ou <a href="/tutoriels">Tutoriels</a>
<a href="/wp-content/themes/wp-v2/images/ressource-32.png">Image ressources</a>

Les images

Pour mettre un peu de gaieté dans votre page vous pouvez décider d’y intégrer des images. L’attribut src permet de renseigner l’emplacement de l’image. L’attribut alt permet d’afficher un texte de remplacement au cas où l’image ne peut pas être chargé, par exemple si l’attribut src est mal renseigné. L’attribut alt est très important en terme d’accessibilité. Veillez à toujours le renseigner avec une description de l’image. C’est d’abord indispensable dans la validation W3C de votre page. Mais cela permet également aux personnes déficientes visuelles de savoir ce que représente l’image.

<img src="/wp-content/themes/wp-v2/images/ressource-32.png" alt="Ressources" />
<img src="" alt="Tutoriels" />

L’ élément HTML de type block hr permet de créer une ligne de séparation horizontale.

<hr />

Attributs

Attribut : class

Permet de spécifier la classe css à utiliser sur la séparation.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius.
<hr class="separation" />
Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

.separation{
border:3px double chocolate;
padding:5px;
}

Attribut : id

Permet de spécifier l’identifiant css à utiliser sur la séparation.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius.
<hr id="separation" />
Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

#separation{
border:3px double green;
padding:5px;
margin-bottom:5px;
}

Attribut : style

Permet d’appliquer un style à la séparation directement dans le html, sans avoir besoin d’une feuille de style.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius.
<hr style="border:3px double orange; padding: 5px; margin-bottom:5px;" />
Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

Attribut : title

Permet de mettre une infobulle sur le corps de la page HTML.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius.
<hr title="separation" style="border:3px double brown; padding: 5px; margin-bottom:5px;" />
Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

Attribut : dir

Permet de spécifier le sens d’écriture du texte au côté de la séparation. Elle prend 2 valeurs :
- ltr : Left To Right : de gauche à droite(valeur par défaut).
- rtl : Right To Left : de droite à gauche.

<p dir="rtl">قبل هو أهّل وبولندا. ويعزى الحروب مع دون, عام كل قررت تسمّى الشتوية. جوزيف مدينة بريطانيا-فرنسا حدة في, فصل وجهان واُسدل بمباركة بـ. بها عل أعلنت واندونيسيا،, الى</p>
<hr dir="rtl" />
<p dir="rtl"> حاملات الأمريكي، قد, معركة المدنيون بـ أخر.</p>

Attribut : lang

Permet de spécifier la langue à l’intérieur du texte entourant la ligne horizontale.

A person with Ubuntu is open and available to others, affirming of others, does not feel threatened that others are able and good, for he or she has a proper self-assurance that comes from knowing that he or she belongs in a greater whole
<hr lang="en" />
and is diminished when others are humiliated or diminished, when others are tortured or oppressed.

Tout comme ses prédécesseurs HTML 5 est un langage de balisage c’est à dire qu’on utilise des balises qui ont des valeurs sémantiques pour annoncer des éléments. Une balise est délimitée par des chevrons ouvrants (‹) et fermants (›).

<balise>

Les balises peuvent être simples ou doubles (=paires), dans ce cas la deuxième commencera par un slash /.

<balise>

<balise></balise>

Voici une page HTML 5 vide.

<!DOCTYPE html>
<html lang="fr"> 

  <head> 

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Titre</title>

  </head>

  <body>

    <!-- Ici il y aura le contenu de votre page. -->

  </body>

<html>

Le type de document (DOCTYPE)

Ceux qui ont travaillé avec les doctype d’autres versions de HTML ou de XHTML que HTML 5 savent combien cette déclaration est simple. Il ne faut pas se le cacher, la plupart d’entre nous étaient incapables de déclarer de tête un document en XHTML 1.0 Strict par exemple. Voyez vous-même :

DOCTYPE HTML 5

<!DOCTYPE html>

DOCTYPE HTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

L’élement html

<html lang="fr"></html>

‹html› indique au navigateur l’endroit où votre document HTML commence et ‹/html› l’endroit où il se temine. L’attribut lang permet de spécifier la langue du document HTML mais il n’est pas obligatoire. L’attribut lang peut être appliqué sur tous les autres éléments HTML.

L’élement head

<head></head>

L’élément head contient tous les en-têtes envoyés au navigateur comme :

• Le type de contenu de la page :

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

• Le titre de la page :

  <title>Titre</title>

De nombreuses autres informations peuvent être spécifiées dans l’élément head, ce sera l’objet d’autres chapitres.

L’élément body

<body></body>

L’élément body constitue le corps de votre page HTML. On y trouvera à l’intérieur tout le contenu affiché à l’utilisateur.

Les commentaires

<!-- Ceci est un commentaire -->

Les commentaires permettent d’ajouter de l’information à un morceau de code. Cette information ne sera visible que dans le code source de la page. En aucun cas il ne sera affiché au visiteur de la page HTML.

Conseil : Même si on l’oublie vite quand on est penché sur son code, il est important d’y intégrer des commentaires un tant soit peu. Non seulement cela pourrait servir si quelqu’un d’autre doit lire votre code mais vous pourrez également vous repérez dans votre code 6 mois, 1 an, 5 ans… plus tard.