Accueil 
Bienvenue.
Si vous trouvez une article intéressante, vous pouvez participer à sa diffusion en utilisant les boutons de partage situés ci-dessous.
HTML 5, une révolution en évolution !
Vous trouvez peut-être que j'exagère en parlant de la version HTML 5 comme d'une révolution et vous avez bien raison, mais elle est surement en évolution. Pour le moment, ne prenez rien pour acquis. Comme cette version continue à évoluer, certains éléments et propriétés vont surement être ajoutés ou modifiés.
C'est le cas par exemple de la balise <aside> qui a passablement évolué. Sa définition a suggéré qu'elle devrait être utilisée pour le contenu indirectement lié aux contenus qui l'entourent, tels que des liens connexes, des glossaires etc. Il ne semble pas être un élément approprié pour la tenue de contenus secondaires liés au site dans son ensemble comme un menu sur le coté. Contester par les développeurs, <aside> est maintenant acceptable pour les contenus secondaires lorsqu'ils ne sont pas imbriqués dans l'élément <article>.
Il faut donc vérifier régulièrement le rendu et apporter les modifications le cas échéant et surtout, se tenir au courant des dernières nouvelles de l'évolution du HTML 5 et du CSS 3.
Pour profiter pleinement de ce tutoriel, il faut évidemment que votre navigateur supporte les versions HTML 5 et CSS 3. Je vous suggère la dernière version de Mozila Firefox
qui offre un rendu optimal pour ces versions.
L'HTML 5 est une évolution des versions HTML 4.01 et de XHTML 1.0, c'est-à-dire que presque tout ce que vous savez faire en HTML et XHTML reste valide. Même chose pour le CSS. Si vous ne connaissez pas, je vous conseille de suivre le tutoriel du Concepteur qui constitue un bon point de départ.
Dans cette version HTML, les blogues, les forums ou autres contenu d'une source externe sont optimisés et franchement mieux adaptés. Par exemple, il arrive souvent que la page "index", la page d'accueil, contienne
des articles. Ces articles sont régulièrement mis à jour avec le nom de l'éditorialiste, une date, un contenu, des photos etc. La version XHTML 5 optimise grandement insertions ponctuelles d'articles sur votre site.
Le tutoriel sera donc expressément conçu pour la présentation de la page d’accueil de votre site étape par étape.
HTML 5 et CSS 3
Dans ce tutoriel, nous associons HTML 5 et le CSS 3 parce que ses versions sont les dernières et non parce qu'ils doivent forcément être utilisé ensemble. En effet, vous pouvez très bien utiliser une feuille de style CSS 3 avec les versions HTML 4 et XHTML 1.0 et inversement, votre page HTML 5 peut être associé à une page CSS 2.1.
CSS 3
Les propriétés de base de la version CSS 3 ne sont guère différentes de la version 2.1, mais offre plusieurs autres propriétés intéressantes comme les coins arrondis pour les conteneurs, ombre porté pour plusieurs éléments y compris pour le texte et même l'opacité des calques et des arrières plans qui enrichisse le rendu. Présentement, le point fort de cette version est la possibilité de personnaliser la police de caractères et l'ajout de fichier multimédia sans l'utilisation de flash.
Gardez à l'esprit que les internautes n'ont pas tous un navigateur à jour ce qui peut causer des problèmes de rendu. Je vous suggère donc de faire une refonte de votre site s'il est personnel. Pour un site commercial, il est préférable de conserver une version compatible avec le plus grand nombre de navigateur possible. Le CSS 3 causes moins de problèmes puisque les paramètres inconnus sont ignoré. Par exemple, remarquez comment la compatibilité est assurée pour les bordures entre les lignes 37 à 42 :
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
body{
color:#000;
font-size:.9em;
font-family:Arial, Helvetica, sans-serif;
background-color:#ffffff;
border:1px solid #888; /* Pour toutes les versions */
border-radius:10px; /* Pour Explorer 9, Firefox 4, Opera 10.5 */
-moz-border-radius:10px; /* Pour Firefox 3.5 */
box-shadow:5px 5px #888; /* Pour Explorer 9, Firefox 4, Opera 10.5 */
-moz-box-shadow:5px 5px #888; /* Pour Firefox 3.5 */
-webkit-box-shadow:5px 5px #888; /* Pour Safari 3.0, Chrome 1.0 */
width:900px;
min-height:800px;
margin:10px auto;
padding:0
}
|
Si un navigateur ne supporte pas les propriétés "radius" ou "shadow", elles sont ignoré. Il n'y aura qu'une simple bordure (ligne 37).
HTML 5 et W3C
Vous pouvez d'ores et déjà valider une page HTML 5 sur le site de W3C. De manière générale, on peut dire que l’HTML5 est beaucoup plus léger et laxiste sur l’écriture des balises. Un document HTML5 sera valide W3C même si vous écrivez vos balises en majuscules, ou si vous n’écrivez pas le / de fermeture d’une balise auto-fermante telle que <img />. La philosophie est donc à présent de laisser chacun adopter le style de code qu’il préfère. Dommage, mais il ne tient qu’à nous de conserver les bonnes pratiques adoptées grâce à l’XHTML 1.0.
Le sigle officiel pour la version HTML 5 publié par le W3C et réalisé par les designers de OCUPOP (ang). Le Capitaine America peut aller se rhabiller.
La technologie du "langage" web évolue graçe au W3C, mais principalement grâce à une collaboration non officielle des différents développeurs de navigateurs web. Ayant pour but le développement de nouvelles technologies destinées à faciliter l'écriture et le déploiement d'application à travers le Web, le WHATWG (Web Hypertext Application Technology Working Group) est constitué principalement de développeurs des navigateurs tels que Mozilla, Opera ou Apple.
La validation de votre site est aussi importante que les versions précédentes. Elle assure une plus grande compatibilité entre les navigateurs et surtout vers les petits navigateurs des appareils mobiles utilisés pour naviguer sur internet.
Compatibilité des navigateurs.
Comme toujours, le navigateur de Microsoft, Internet Explorer 6 est un vrais casse tête pour les nouveaux concepteurs, mais comme ce navigateur est dépassé depuis bon nombre d'années, je vous suggère de ne plus en tenir compte. Seulement 2% des internautes l'utilisent encore et ils sont surement habitués à voir des pages et des fonctions mal interprétées. La version 7 d'Explorer est sur le point de connaître le même sort. La version 8 est plus problématique puisqu'elle est rependue et très utilisée dans le monde. Ces pourquoi je recommande une version CSS pour Explorer 7 et 8. La version 9 d'Explorer intègre, ou presque, la version HTML 5 et CSS 3.
Internet Explorer n'est pas le seul navigateur à causer des problèmes s'il n'ait pas à jour. Gardez à l'esprit que les versions HTML 5 et CSS 3 sont pour les navigateurs de dernière génération.
Le DOCTYPE.
La version HTML 5 a sa propre déclaration DOCTYPE et elle est réduite à son minimum.
1
2
3
4
5
6
|
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
|
Fini le temps où il fallait insérer la déclaration DOCTYPE par copier-coller. Nous allons donc débuter ce tutoriel par une page toute simple à télécharger.
Ajouter ce site à vos favoris
