Bonjour à tous !

Aujourd'hui, je vous propose un tutoriel pour créer un site en html5/css3.

Quoi ? ça existe déjà ça ?

Eh oui, le html5 et le css3 sont les nouvelles versions de langages pour créer un site web(ou autre). Pour plus d'informations cliquez-ici.

Qu'est-ce que c'est ? Devrais-je tout réapprendre ?

Eh bien figurez-vous que non !
En effet, le html5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu pour représenter les pages web). Il spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C en mars 2007 après avoir été initié par le WHATWG. Les deux organisations travaillent en parallèle sur le même document afin de maintenir une version unique de la technologie. Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de la spécification en 2014, et encourage les développeurs Web à utiliser HTML 5 dès maintenant. C'est donc le futur du web.
Alors que le css3 (Cascading Style Sheets 3 : feuilles de style en cascade 3) fait également son apparition, il s'agit d'un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000. Par ailleurs, un concurrent participe également à son développement, il s'agit de WHATWG afin d'obtenir une version unique en son genre et qui définit bien de la nouveauté ^^.
Ne vous inquiétez pas, je mettrais quelque rappel par-ci par-là pour vous aider. ^^ Mais en tout cas, une chose est sur, lancez-vous !

Voici les nouvelles images définissant html5/css3:


Enfin bref, si nous passions au véritable tutoriel ^^ Mais avant, quelques téléchargements/mise à jour/mise au point s'imposent ^^

Le sommaire du tutoriel:
- Le matériel nécessaire
- Introduction

Les services que nous vous proposons:

- approfondir ses connaissances
- dégradé en css
- template boilerplate
- multiples ressources

Veuillez télécharger tout d'abord un éditeur de texte et au moins 1/2 navigateurs web (à jour !!!) ainsi qu'un hébergement avec bien évidemment le ftp.

Je vous propose comme éditeurs de textes:

- Pour Mac OS X :
ou tout simplement
- Pour windows :
ou tout simplement

Pour les télécharger:
- smultron
- notepad++

Je vous propose comme navigateurs web:



Pour les télécharger:
- safari
- firefox
- internet explorer
- opera
- google chrome

ps: pour vérifier, si votre navigateur est à jour ou plutôt est compatible avec les nouvelles fonctionnalités que propose html5, veuillez cliquez ici.

Je vous propose comme ftp:



Pour les télécharger:
- filezilla

De plus, vous pourrez toujours tester votre page html5/css3 sur w3c validator:
- Pour html5
- Pour css3

Maintenant, passons au cours, si vous voulez bien

Introduction

Qu'est-ce le HTML5 ?

HTML5 sera le nouveau standard pour HTML, XHTML et le DOM HTML.
La version précédente de HTML est venu en 1999. Le web a beaucoup changé depuis.
HTML5 est encore un travail en cours. Cependant, la plupart des navigateurs modernes le soutiennent.

Comment HTML5 a débuté ?

HTML5 est une coopération entre le World Wide Web Consortium (W3C) et le Web Hypertext Application Technology Working Group (WHATWG).
WHATWG a été de travailler avec des formulaires Web et des applications, et le W3C a travaillé avec XHTML 2.0. En 2006, ils ont décidé de coopérer et de créer une nouvelle version du langage HTML.

Qu'est-ce que le W3C ? A quoi sert-il ?

Le W3C, World Wide Web Consortium, dirigé par Tim Berners-Lee, est un organisme international qui développe des standards pour le Web afin que les gens puissent communiquer efficacement à travers Internet.
Il est composé d'une équipe fixe (environ 70 personnes) et des membres (plus de 450 organisations). Les membres délèguent des ingénieurs au sein du W3C et participent ainsi à l'élaboration des spécifications techniques pour les technologies du Web.
Les spécifications déjà élaborées, il y en a une cinquantaine (HTML, XML, CSS, SVG, WAI...), sont accessibles au public sur le site de W3C. Il en est de même pour les compte-rendus des développements en cours.

Quelques règles pour HTML5 ont été établis:

-> Les nouvelles fonctionnalités devraient être fondées sur HTML, CSS, DOM et JavaScript
-> Réduire le besoin de plugins externes (comme Flash)
-> Meilleure gestion des erreurs
-> Plus balisage pour remplacer les scripts
-> HTML5 devrait être indépendant du périphérique
-> Le processus de développement doit être visible pour le public
-> De nouvelles fonctionnalités

Certaines des caractéristiques les plus intéressantes nouvelles en HTML5:

-> L'élément canvas pour le dessin
-> La vidéo et éléments audio pour la lecture multimédia
-> Meilleur support pour le stockage hors-ligne locale
-> Éléments nouveaux contenus spécifiques, comme l'article, footer, header, nav, l'article
-> Les contrôles de formulaire Nouveau, comme un calendrier, date, heure, email, url, rechercher
-> Le support du navigateur

Tout d'abord, html5 et css3 possède plusieurs avantages comme de nouveautés.

En effet, maintenant pour le doctype, il ne suffit plus que d'utiliser:

Code:

<!DOCTYPE html>

Mais ce n'est qu'un exemple basique des transformations acquises dans cette nouvelle version. En voici le code d'une page web de base:

Code:

<!DOCTYPE html> // définit le doctype
<html lang="fr"> // définit le début de la page et en quelle langue (par défault fr)

    <head> // début du haut de la page contenant toutes les balises meta, styles, scripts...
        <meta charset="UTF-8" /> // balise meta pour définir le charset (par défault utf-8)
        <title>Accueil</title> // balise title pour indiquer un titre
        <link rel="stylesheet" href="style.css" /> // balise link pour importer le css (mise en page de la page)
   </head> // fermeture du haut de la page
   
   <body> // début du corps de la page contenant tout ce que vous voulez
   
   </body> // fin du corps de la page
   
</html> // fin de la page html

Cependant, comme vous vous en doutiez (vous ne le saviez pas ? Eh bin maintenant vous le savez ^^) les balises div font très mauvaise impression chez de nombreux codeurs/programmeurs/développeurs, heureusement, de nouvelles balises sont venues pour remplacer celle-ci,
ce sont les balises header, footer, nav, aside, article, section,... qu'on peut utiliser comme ceci:

Code:

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

    <head>
        <meta charset="UTF-8" />
        <title>Accueil</title>
        <link rel="stylesheet" href="style.css" />
   </head>
   
   <body>
   
   <header>
   <nav>
   </nav>
   </header>
   
   <section>
   <figure>
   </figure>
   <article>
   </article>
   <article>
   </article>
   <article>
   </article>
   </section>
   
   <aside>
   <article>
   </article>
   <article>
   </article>
   <article>
   </article>
   </aside>
   
   <section>
   <div>
   </div>
   <div>
   </div>
   </section>
   
   <footer>
   </footer>
   
   </body>
   
</html>

Ce qui nous donne ceci (enfin pas tout à fait, il faut bien évidemment un peu de css pour la mise en page) :


Voici les différents tags que propose html5:

Code:

<!-->
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command>
<datalist>
<dd>
<del>
<details>
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> - <h6>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<keygen>
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark>
<menu>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>
<xmp>

Comme vous l'avez remarqué, certains de ces tags existaient déjà auparavant dans les anciennes versions.

Utilisation des commentaires conditionnels pour ie:

Code:

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
 <!--[if lte IE8]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 <!--[if lte IE 7]>
 <script src="js/IE8.js" type="text/javascript"></script><![endif]-->