Support de formation suite

.gitignore

@@ -2,3 +2,4 @@ node_modules
 dist
 src/**/*.html
 **.*~
+.idea

gulpfile.js

 var gulp = require('gulp'),
     shell = require('gulp-shell'),
+    sass = require('gulp-sass'),
+    fs = require('fs'),
     exec = require('child_process').exec;
 
 
 var src = './src/',
-    articles = src +'articles/'
+    articles = src + 'articles/';
 
-gulp.task('default', function(){
+gulp.task('articles', function () {
+    if (!fs.existsSync('dist/articles')) fs.mkdirSync('dist/articles');
     gulp.src(articles + '**/*.md', {read: false})
         .pipe(shell(
-      ['pandoc --template=./src/templates/unicaen.html --standalone <%= file.path %> -o <%= f(file.path) %>'],
+            ['pandoc --template=./src/templates/article.html --standalone <%= file.path %> -o <%= f(file.path) %>'],
             {
                 templateData: {
                     f: function (s) {
-            return s.replace(/\.md/, '.html')
+                        return s.replace(/\.md/, '.html').replace(/src\//, 'dist/');
                     }
                 }
             }
         ))
 });
 
-gulp.task('watch', function(){
-  gulp.watch('src/articles/**/*.md', ['default']);
-  gulp.watch('src/templates/unicaen.html', ['default']);
+gulp.task('images', function () {
+    gulp.src('src/images/**.*')
+        .pipe(gulp.dest('dist/images'))
+});
+
+gulp.task('slides', function () {
+  if (!fs.existsSync('dist/slides')) fs.mkdirSync('dist/slides');
+  gulp.src('./src/slides/*.md', {read: false})
+      .pipe(shell(
+          ['pandoc --variable revealjs-url="../libs/reveal.js" --template=src/templates/slide.html --standalone --section-divs --variable theme="simple" --variable transition="default" -s -i -t revealjs <%= file.path %> -o <%= f(file.path) %>'],
+          {
+              templateData: {
+                  f: function (s) {
+                      return s.replace(/\.md/, '.html').replace(/src\//, 'dist/');
+                  }
+              }
+          }
+      ))
+  //pandoc -t revealjs -s -o myslides.html myslides.md -V revealjs-url=http://lab.hakim.se/reveal-js
+});
+
+gulp.task('index', function () {
+    gulp.src('src/*.md', {read: false})
+        .pipe(shell(
+            ['pandoc --template=./src/templates/index.html --standalone <%= file.path %> -o <%= f(file.path) %>'],
+            {
+                templateData: {
+                    f: function (s) {
+                        return s.replace(/\.md/, '.html').replace(/src\//, 'dist/');
+                    }
+                }
+            }
+        ))
+});
+
+
+gulp.task('sass', function () {
+    gulp.src('src/styles/**/*.scss')
+    //.pipe(cached('sass'))
+        .pipe(sass())
+        .pipe(gulp.dest('dist/styles'));
+});
+
+
+gulp.task('default', ['articles', 'slides', 'index', 'images', 'sass']);
+
+gulp.task('watch', ['default'], function () {
+    gulp.watch('src/slides/*.md', ['slides']);
+    gulp.watch('src/templates/slide.html', ['slides']);
+    gulp.watch('src/index.md', ['index']);
+    gulp.watch('src/templates/index.html', ['index']);
+    gulp.watch('src/articles/*.md', ['articles']);
+    gulp.watch('src/templates/article.html', ['articles']);
+    gulp.watch('src/styles/*.scss', ['sass']);
+    gulp.watch('src/images/*.*', ['images']);
 })

package.json

@@ -14,6 +14,7 @@
     "gulp-shell": "^0.6.5"
   },
   "dependencies": {
-    "gulp-md-docs": "^0.1.8"
+    "gulp-md-docs": "^0.1.8",
+    "gulp-sass": "^4.0.1"
   }
 }

src/articles/integration-web/css3-flexbox.md → src/articles/css3-flexbox.md

@@ -47,7 +47,7 @@ de rendre le résultat plus 'visuel'  */
 ```
 
 Ce qui donne :
-![Rendu de base](../../images/css3-flexbox-rendu-001.png)
+![Rendu de base](../images/css3-flexbox-rendu-001.png)
 
 ## Les bases
 
@@ -62,7 +62,7 @@ Le modèle de boîte doit s'activer **sur l'élément conteneur** (celui qui con
 }
 ```
 
-![Rendu avec la valeur flex](../../images/css3-flexbox-rendu-002.png)
+![Rendu avec la valeur flex](../images/css3-flexbox-rendu-002.png)
 
 La valeur `inline-flex` ajoute un compotement **inline** au conteneur : 
 
@@ -73,7 +73,7 @@ La valeur `inline-flex` ajoute un compotement **inline** au conteneur :
 }
 ```
 
-![Rendu avec la valeur flex](../../images/css3-flexbox-rendu-003.png)
+![Rendu avec la valeur flex](../images/css3-flexbox-rendu-003.png)
 
 L'activation des *flexbox* se déclenche en utilisant les valeurs :
 
@@ -107,7 +107,7 @@ A noter que la valeur `column-reverse` justify les éléments en bas du conteneu
   height: 250px;
 }
 ```
-![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-004.png)
+![Rendu de column-reverse avec une hauteur fixée](../images/css3-flexbox-rendu-004.png)
 
 ### Réorganiser les éléments avec `order`
 
@@ -121,7 +121,7 @@ La propriété `order` permet de modifier l'ordre d'affichage d'un élément sp
     order: -1;
 }
 ```
-![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-005.png)
+![Rendu de column-reverse avec une hauteur fixée](../images/css3-flexbox-rendu-005.png)
 
 Vous pouvez ainsi complètement modifier la disposition des éléments dans le conteneur.
 
@@ -143,7 +143,7 @@ Ajouter un peu de contenu dans les éléments HTML :
 
 Puis réduisez la largeur de la fenêtre en largeur, vous verrez le contenu disparaître vers la droite : 
 
-![Sans flex-wrap, le contenu dépasse sur la droite](../../images/css3-flexbox-rendu-006.png)
+![Sans flex-wrap, le contenu dépasse sur la droite](../images/css3-flexbox-rendu-006.png)
 
 La propriétés `flex-wrap` (*nowrap*, `wrap`, `wrap-reverse`) va forcer la *flexbox* à adapter l'embalage.
 
@@ -155,7 +155,7 @@ La valeur `wrap` va autoriser la flexbox à ajouter des lignes (ou des colonnes)
   flex-wrap: wrap;
 }
 ```
-![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-007.png)
+![Rendu de column-reverse avec une hauteur fixée](../images/css3-flexbox-rendu-007.png)
 
 La valeur wrap-reverse inverse la disposition des lignes.
 
@@ -194,7 +194,7 @@ En mettant la valeur 1 à tout les éléments, la *flexbox* va recalculer la lar
   flex-grow: 1;
 }
 ```
-![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-008.png)
+![Rendu de column-reverse avec une hauteur fixée](../images/css3-flexbox-rendu-008.png)
 
 En jouant sur la largeur de la fenêtre, vous verrez la largeur des éléments s'adapter en fonction de l'espace disponible. Vous pouvez constater que la largeur est identique pour chaques éléments, peut importe son contenu.
 
@@ -218,7 +218,7 @@ Vous pouvez ensuite jouer avec la valeur de `flex-grow` (qui doit être un entie
 }
 ```
 
-![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-009.png)
+![Rendu de column-reverse avec une hauteur fixée](../images/css3-flexbox-rendu-009.png)
 
 Pour observer le résultat avec un direction en colonne avec `flex-direction:column`, pensez à ajouter une hauteur au conteneur : 
 
@@ -241,7 +241,7 @@ Pour observer le résultat avec un direction en colonne avec `flex-direction:col
   flex-grow: 0;
 }
 ```
-![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-010.png)
+![Rendu de column-reverse avec une hauteur fixée](../images/css3-flexbox-rendu-010.png)
 
 ### Taille initale avec flex-basis
 
@@ -263,7 +263,7 @@ Par exemple, nous pouvons indiquer comme largeur optimale 200px, et interdire le
     flex-basis: 200px;
 }
 ```
-![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-011.png)
+![Rendu de column-reverse avec une hauteur fixée](../images/css3-flexbox-rendu-011.png)
 
 En jouant sur la largeur de la fenêtre, vous constaterez que la zone orange peut rétrécir, mais ne dépasse pas les 200 pixels en largeur lorsque l'on élargi la fenêtre.
 
@@ -287,7 +287,7 @@ La propriétés `flex-shrink`permet quand à elle de configurer le rétrécissem
 }
 ```
 
-![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-012.png)
+![Rendu de column-reverse avec une hauteur fixée](../images/css3-flexbox-rendu-012.png)
 
 ### Forme compacte avec `flex`
 
@@ -303,7 +303,7 @@ La propriété `justify-content` permet de définir la façon ton les éléments
 
 Petit récap des valeurs possibles : 
 
-![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-013.png)
+![Rendu de column-reverse avec une hauteur fixée](../images/css3-flexbox-rendu-013.png)
 
 ##### flex-start
 

src/articles/index.md

-# Note de développement
-
-## Intégration web
-
- - [Présentation des technologies du web](integration-web/presentation-html5.html)
- - [Première page web](integration-web/premiere-page-web.html)
- - [Structurer du contenu avec HTML](integration-web/structurer-avec-html.html)
- - [Les bases du CSS](integration-web/introduction-au-css.html)
- - [Mise en forme CSS](integration-web/mise-en-forme-css.html)
- - [Modèle de boîte](integration-web/modele-de-boite.html)
- - [Mise en page avec FLOAT](integration-web/mise-en-page-float.html)
- - [Mise en page avec les **Flexbox**](integration-web/css3-flexbox.html)
- - [Design réactif : Responsive Design](integration-web/responsive-design.html)

src/articles/integration-web/structurer-avec-html.md

-# Utiliser HTML pour structurer l'information

src/articles/integration-web/introduction-au-css.md → src/articles/introduction-au-css.md

@@ -21,7 +21,7 @@ Cependant, les intégrateurs web s'autorisent un seuil de tolérance pour le cas
 ### Compatibilité CSS2 /CSS3
 
 Le **CSS2** et le **CSS3** sont parfaitement compatibles, en effet, le CSS3 se contente d'introduire uniquement de nouvelles propriétés dédiées à la mise en forme et quelques sélecteurs.
-<!--  ![Logo CSS](../../images/css3.svg) -->
+<!--  ![Logo CSS](../images/css3.svg) -->
 
 
 ## Syntax CSS
@@ -63,7 +63,7 @@ article {
   le sélécteur va permettre de *sélectionner* un ou plusieurs éléments sur lesquels vont s'appliquer la régle.
 </div>
 <div class="col">
-  ![](../../images/regle-css-02.png)
+  ![](../images/regle-css-02.png)
 </div>
 </div>
 
@@ -75,7 +75,7 @@ article {
   Une régle peut contenir plusieurs déclarations, elles sont regrouper dans le **bloc de déclaration** qu'on peut facilement identifié car il est entouré d'accolade :
 </div>
 <div class="col">
-  ![](../../images/regle-css-03.png)
+  ![](../images/regle-css-03.png)
 </div>
 </div>
 
@@ -86,7 +86,7 @@ article {
   Une déclaration décrit une mise en forme à appliquer. Les déclarations sont séparées par des point-virgules. Par convention, on place une déclaration par ligne et l'on met un point-virgule à la dernière même si elle est facultative.
 </div>
 <div class="col">
-  ![](../../images/regle-css-04.png)
+  ![](../images/regle-css-04.png)
 </div>
 </div>
 
@@ -97,7 +97,7 @@ article {
   Une déclaration se compose d'une **propriété** et d'une **valeur** séparées par **deux point**. Chaque déclaration se termine par **un point-virgule**. Une déclaration est toujours sous la forme `propriété: valeurs`
 </div>
 <div class="col">
-  ![](../../images/regle-css-05.png)
+  ![](../images/regle-css-05.png)
 </div>
 </div>
 

src/articles/integration-web/premiere-page-web.md → src/articles/premiere-page-web.md

@@ -2,6 +2,8 @@
 
 ## Page web, document HTML
 
+### Document HTML
+
 Le code HTML s'écrit dans des **fichiers HTML** ; Les fichiers HTML sont de simples fichiers texte.
 
 N'importe quel éditeur de texte suffit pour éditer du HTML.
@@ -10,7 +12,7 @@ Par convention, on utilise l'extention `*.html` (ou `*.htm` pour les puristes).
 
 Pour tester le résultat, il suffit de l'ouvrir dans un navigateur.
 
-## Editeur
+### Rédiger du code HTML
 
 Pour faire du HTML, il faut un éditeur de texte, pour débuter voici quelques éditeurs très performants :
 
@@ -19,7 +21,7 @@ Pour faire du HTML, il faut un éditeur de texte, pour débuter voici quelques
  - **Bracket** Très pratique pour débuter (coloration du code, aperçu en directe) http://brackets.io/
  - **Atom** Un éditeur léger et efficace https://atom.io/
 
-## Premier contenu
+### Premier contenu
 
 Créez un fichier `index.html` dans l'éditeur avec ce contenu :
 
@@ -29,12 +31,16 @@ Bonjour Monde !
 
 Utilisez le menu Fichier/ouvrir du navigateur pour afficher le fichier :
 
-![Résulat](../../images/html-bonjour-monde.png)
+![Résulat](../images/html-bonjour-monde.png)
 
 <div class="info">Même rudimentaire, nous avons une page web</div>
 
 
-## HTML
+
+## Syntaxe HTML
+
+
+### Balise
 
 Le **code source** HTML permet de structurer les informations avec des **balises**.
 
@@ -42,18 +48,18 @@ Les balises sont **toujours entourées de chevrons**
 
 Dans 99% des cas, un nom de balise est écrit en minuscule et ne contient pas de caractères accentués, ni espaces.
 
-![Résulat](../../images/balise.svg)
+![Résulat](../images/balise.svg)
 
 
-## Types de balises
+### Types de balises
 
-On distingues différentes formes de balises :
+On distingues 3 différents types de balises :
 
  - Les balises ouvrantes, ex: `<h1>`, `<p>`,
  - Les balises fermantes, ex: `</h1>`, `</p>`,
  - Les balises orphelines (ou auto-fermantes)ex: `<br />`,
 
-## Balises ouvrantes et fermantes
+### Balises ouvrantes et fermantes
 
 Les balises **ouvrantes** et **fermantes** permettent de délimiter du contenu. C'est le cas le plus répandu :
 
@@ -68,10 +74,10 @@ Les balises **ouvrantes** et **fermantes** permettent de délimiter du contenu.
 </p>
 ```
 
-![Résultat](../../images/balises-ouvrantes-fermantes.svg)
+![Résultat](../images/balises-ouvrantes-fermantes.svg)
 
 
-## Balises auto-fermantes
+### Balises auto-fermantes
 
 Certaines balises ne délimitent aucune information, elles sont utilisées pour indiquer la présence d'un contenu spécifique (présence d'une image par exemple).
 
@@ -85,15 +91,15 @@ Texte avec un retour chariot<br />
 Ce texte est à la ligne
 ```
 
-![Balises autofermantes](../../images/balise-auto-fermante.svg)
+![Balises autofermantes](../images/balise-auto-fermante.svg)
 
-## Récapitulatif
+### Récapitulatif
 
-![Récapitulatif](../../images/balise-recap.svg)
+![Récapitulatif](../images/balise-recap.svg)
 
 
 
-## Imbrication
+### Imbrication
 
 Nous venons de voir que les balises sont utilisées pour **délimiter du contenu**, dans les exemples précédents, le contenu été uniquement du contenu texte, mais généralement, le contenu est souvent un aggrégat de texte contenant lui-même des balises, pouvant à son tour contenir des balises. (à la manière de poupées russes). Ce formalisme est appelé **l'imbrication**.
 
@@ -110,13 +116,13 @@ Nous venons de voir que les balises sont utilisées pour **délimiter du contenu
 
 L'imbrication respecte la règle : **Première ouverte, dernière fermée**. Less balises qui *se croisent* ou qui ne sont pas refermée peuvent provoquer des erreurs d'interprétation.
 
-## Arbre DOM
+### Arbre DOM
 
 De part sa nature, l'imbrication peut être représenté sous la forme d'un arbre, on parle de l'arbre DOM (Document Object Model).
 
-![L'arbre DOM](../../images/html-imbrication.png)
+![L'arbre DOM](../images/html-imbrication.png)
 
-## Commentaires
+### Commentaires
 
 Un code source HTML peut devenir rapidement dense et atteindre plusieurs centaines de ligne(on écrit beaucoup de code).
 
@@ -174,9 +180,81 @@ L'utilisation des commentaires est également pratique pour désactiver certaine
 </body>
 ```
 
+### Attributs de balise
+
+Les attributs de balise permettent d'indiquer des informations au navigateur.
+                    
+                                       
+Exemple : La balise `<img />` est utilisée pour afficher 
+des image, Seule elle n'a aucun interêt. L'attribut `src="URL"` 
+indique l'emplacement de l'image : 
+
+```html
+<img src="http://goo.gl/GzaoyV" />
+```
+
+<div class="info">  
+Les attributes n'apparaissent que dans les
+balises ouvrantes et les
+balises auto-fermantes.
+</div>
+
+### Syntaxe des attributs
+
+La syntaxe des attributs est toujours la même : 
+
+```html
+<balise attribut1="Valeur entre guillemets">
+```
+
+
+On peut cumuler les attributs en les séparant avec au moins un espace : 
+
+```html
+<img alt="Illustration Hi-Tech" src="http://goo.gl/GzaoyV" />
+```
+
+On peut également utiliser les retours à la ligne pour gagner en clarté : 
+
+```html
+<img alt="Illustration Hi-Tech" 
+    src="http://goo.gl/GzaoyV" 
+    width="1280"
+    height="760"
+ />
+```
+
+## Document HTML standard
+
+Les documents HTML sont standardisés pour permettre au navigateur de correctement interpréter le code.
+
+### Structure d'un document HTML (minimale)
+
+Voici la structure d'un document HTML
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Titre de la page</title>
+    </head>
+    <body>
+        Corps de la page
+    </body>
+</html>
+```
+
+ - La balise `<html>` encadre le document (c'est le noeud racine)
+ - Le `<head>` va contenir des métas informations à l'attention du navigateur
+ - Le `<body>` contiend la partie *visible* de la page
+
+<div class="info">
+Le prologue `<!DOCTYPE html>` n'est pas une balise, il indique au navigateur la norme du document (ici HTML5).
+</div>
 
-## Validation
+### Validation
 
 Vous pouvez tester la validité d'un code HTML en utilisant le [Validateur W3C](http://validator.w3.org/)
 
-![Validateur W3C](../../images/validator.jpg)
+![Validateur W3C](../images/validator.jpg)

src/articles/integration-web/presentation-html5.md → src/articles/presentation-html5.md

@@ -35,7 +35,7 @@ Afin de répondre au besoin d'échange d'information au CERN, **Tim Berners** po
 Il rends sa création publique, gratuite et ouverte. L'une des première page web était un tutoriel pour apprendre à créer des pages web...
 </div>
 <div class="col">
-![Tim Berners Lee](../../images/berners.jpg)
+![Tim Berners Lee](../images/berners.jpg)
 </div>
 </div>
 
@@ -45,7 +45,7 @@ Il rends sa création publique, gratuite et ouverte. L'une des première page we
 
 <div class="cols">
 <div class="col">
-  ![Le navigateur NCSA Mosaic](../../images/ncsa-mosaic.jpg)
+  ![Le navigateur NCSA Mosaic](../images/ncsa-mosaic.jpg)
 </div>
 <div class="col">
   Le **Web** s'étend à la communauté scientifique. Les universités sont *connectées* entre pour échanger les connaissances et les rendre accessible.
@@ -66,7 +66,7 @@ Il rends sa création publique, gratuite et ouverte. L'une des première page we
  - 1995/96 : Spécification de HTML 2.0 est publiée.
 </div>
 <div class="col">
-  ![Netscape navigator](../../images/disquette-netscape-navigator.jpg)
+  ![Netscape navigator](../images/disquette-netscape-navigator.jpg)
 </div>
 </div>
 
@@ -84,7 +84,7 @@ Cette période voit également s'affronter les éditeurs de navigateur Netscape
 La production de contenu Web se professionnalise
 </div>
 <div class="col">
-  ![W3C](../../images/w3c.png)
+  ![W3C](../images/w3c.png)
 </div>
 </div>
 
@@ -109,7 +109,7 @@ Le **XHTML 2**, une nouvelle norme développée depuis plusieurs années a été
 Le **HTML5** et le **CSS3**, encore en brouillon, sont déjà largement adoptés par les principaux navigateurs (Firefox, Chrome, Edge). Imposant définitivement l'aire du **Web Sémantique**.
 </div>
 <div class="col">
-  ![Web sémantique](../../images/semantic.svg)
+  ![Web sémantique](../images/semantic.svg)
 </div>
 </div>
 
@@ -126,7 +126,7 @@ La transmission et l'accès aux contenus du web est déterminé par 3 choses :
 
 Le navigateur est un logiciel **client** qui va permettre de consulter des documents web. Nous reviendrons sur ce point, mais il faut retenir que le navigateur **interprète** le code source d'une page web avant de l'afficher, il peut donc arriver que le rendu d'un contenu varie entre 2 navigateurs.
 
-![Répartition des navigateurs en 2018 - source : http://gs.statcounter.com/](../../images/navigateurs.png)
+![Répartition des navigateurs en 2018 - source : http://gs.statcounter.com/](../images/navigateurs.png)
 
 Généralement, les intégrateurs web s'assure d'un fonctionnement idéale sur les principaux navigateurs dans les version récentes (1 à 2 ans), puis s'assure d'un fonctionnement optimal sur des versions plus anciennes et les navigateurs moins présents sur le marché.
 
@@ -136,8 +136,10 @@ Tous les systèmes informatiques utilisent des **protocoles de communications**
 
 Ce protocole est un protocole **client / serveur**. Le client c'est le navigateur, et le serveur sera une application serveur (généralement sur internet, mais pas que).
 
-![Le protocole HTTP](../../images/http.png)
+![Le protocole HTTP](../images/http.png)
 
 ### Le langage HTML
 
-Voir cours suivant
+Voir cours suivant [Débuter en HTML](./premiere-page-web.html)
+
+

src/articles/structure-html.md

+# Structurer du contenu avec HTML
+
+## Balises textuelle
+
+Les balises qui suivent sont affichées avec une certaine mise en forme dans le navigateur, par exemple la balise `<strong>` est affiché en gras. MAIS ce *confort* ne doit pas être retenu lors du choix des balises car l'apparence sera géré par le CSS par la suite.
+
+Donc utiliser ces balises pour la valeur **sémantique** uniquement.
+
+### Bloc
+
+ - `<h1>`,`<h2>`,`<h3>`, `<h4>`, `<h5>`, `<h6>` : Titres
+ - `<p>` : Paragraphes
+ - `<blockquote>` : Bloc de citation
+ - `<pre>` : Préformatté (un truc de développeur)
+ - `<address>` : Pour... les adresses
+
+
+### Texte
+
+ - `<em>` : Emphase
+ - `<strong>` : Important
+ - `<abbr>` : Abbréviation
+ - `<acronym>` : Acronyme
+ - `<i>` : Terme technique
+ - `<q>` : Citation en ligne
+ - `<code>` : Du code
+
+### Autres
+
+ `<figure>` : Encadre une illustration (fonction souvent avec `<img />` et `<figcaption>`)
+
+```html
+<figure>
+    <img src="guernica.jpg" alt="Guernica">
+    <figcaption>Guernica - Pablo Picasso - 1937</figcaption>
+</figure>
+```
+
+
+
+## Balise *structurante*
+
+Ces balises sont utilisées pour hiérarchiser les informations et fournir une structure **sémantique**.
+
+### ARTICLE
+
+Délimite un contenu auto-suffisant (pas forcement un article au sens journalistique).
+
+En théorie, le contenu d'une balise article doit pouvoir être réutilisé tel quel.
+
+Exemple : Dans un site d'actualité, une liste d'articles sera une serie de balise article.
+
+```html
+<body>
+    <h1>Liste des artilces</h1>
+    <article>
+        <h2>Article 1</h2>
+        <p>Texte</p>
+    </article>
+    <article>
+        <h2>Article 1</h2>
+        <p>Texte</p>
+    </article>
+</body>
+```
+
+### SECTION
+
+La balise `<section>` permet de regrouper des contenus qui ont un thème communs.
+
+```html
+<h1>Liste des artilces</h1>
+<section>
+    <h2>Peinture</h2>
+    <article>
+        <h2>Jean-Michel Basquiat</h2>
+        <p>Texte</p>
+    </article>
+    <article>
+        <h2>Francis Bacon</h2>
+        <p>Texte</p>
+    </article>
+</section>
+
+<section>
+    <h2>Musique</h2>
+    ...
+</section>
+```
+
+### HEADER
+
+Elle délimite un contenu qui va introduire la suite : titre, résumés, métas informations (date de publication, auteur, mots clefs).
+
+```html
+<body>
+    <header>
+        <h1>Titre du site</h1>
+        <h2>Accroche</h2>
+        <p>prambule</p>
+    </header>
+    <section>
+        <header>
+            <h2>Titre</h2>
+        </header>
+    </section>
+</body>
+```
+
+### FOOTER
+
+Délimite un contenu qui va conclure : Pied de page
+
+```html
+<body>
+    <header>
+        <h1>Titre du site</h1>
+    </header>
+    <section>
+        <header>
+            <h2>Titre</h2>
+        </header>
+    </section>
+    <footer>
+        Pied de page
+    </footer>
+</body>
+```
+
+### NAV
+
+La balise `<nav>` permet de délimiter un contenu qui va permettre la navigation.
+
+Cette navigation doit être relative à l'emplacement de la balise (Table des matière d'un article, sommaire d'une section, menu d'un site, etc...).
+
+```html
+<body>
+    <header>
+        <h1>Titre du site</h1>
+        <h2>Accroche</h2>
+    </header>
+    <nav>
+        <a href="accueil.html">Actualités</a>
+        <a href="peintures.html">Peinture</a>
+        <a href="litterature.html">Littérature</a>
+    </nav>
+</body>
+```
+
+### ASIDE
+
+> Il délimite un contenu tanganciellement relatif au contenu auquel il est attaché, sans que le contenu soit dépendant de l'aside pour être compris
+
+On l'utilise généralement sur le site entier (body) ou un  article pour délimiter une information complémentaire. Ex : Citation, glossaire dans un article. Liste de liens dans un site
+
+```html
+<article>
+    <h1>Titre</h1>
+    <p>HTML et CSS</p>
+    <aside>
+        <h3>Glossaire</h3>
+        <dl>
+            <dt>CSS</dt>
+            <dd>Cascading Style Sheet</dd>
+            <dt>HTML</dt>
+            <dd>HyperText Markup Language</dd>
+        </dl>
+    </aside>
+</article>
+```
+
+## Attributes communs
+
+Voici la liste des attributs communs à toutes le balises (et souvent facultatifs) : </p>
+
+| Attribut  | Description
+|-----------|-----------------------------------------------------------------
+| `class`   | Permet d'assigner une ou plusieurs classes CSS à l'éléments
+| `id`      | Fixe l'identifiant (unique) de l'élément.
+| `style`   | Définit une "CSS en ligne"
+| `title`   | Description complémentaire (affiche une info-bulle)
+| `lang`    | Précise la langue utilisée dans le contenu (si différente de celle du document)
+
+
+## Balises neutres
+
+Ces balises n'ont pas fonction sématique, elles sont (très) utilisées par les intégrateurs pour structurer la page pour la mettre en forme (délimiter des colonnes, des zones)
+
+ - `<div>` : Zone type bloc
+ - `<span>` : Contenu texte (dans le flux)

src/examples/demo.css

+html {
+    height: 100%;
+}
+body {
+    width: 100%;
+    height: 100%;
+    min-height: 100%;
+    margin: 0;
+    padding: .2em 2em;
+    line-height: 1.2em;
+    overflow: hidden;
+    background: #edf1f2; /* Old browsers */
+    background: -moz-linear-gradient(top,  #edf1f2 0%, #d1d7ff 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#edf1f2), color-stop(100%,#d1d7ff)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #edf1f2 0%,#d1d7ff 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #edf1f2 0%,#d1d7ff 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #edf1f2 0%,#d1d7ff 100%); /* IE10+ */
+    background: linear-gradient(to bottom,  #edf1f2 0%,#d1d7ff 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf1f2', endColorstr='#d1d7ff',GradientType=0 ); /* IE6-9 */
+    /*background: #edf1f2; /* Old browsers */
+    color: #3f4854;
+    font-family: "Helvetica Neue", "Ubuntu", Arial, sans-serif;
+    font-size: 12px;
+    text-shadow: 1px -1px 1px rgba(255,255,255,.3), -1px 1px 1px rgba(0,0,0,.3);
+}
+
+h1, h2, h3, h4, h5, h6, ul, li {
+    padding: 0;
+    margin: 0;
+    font-weight: normal;
+}
+label {
+    width: 33%;
+    display: inline-block;
+}
+#container {
+    max-width: 750px;
+    margin: 0 auto;
+}
+
+#container > footer {
+    font-size: .9em;
+    text-align: center;
+}
+
+.box {
+    border-radius: 4px;
+    margin:1%;
+    padding: 1%;
+    box-shadow: 0 0 8px rgba(0,0,0,.3);
+    background: #f2f6f9; /* Old browsers */
+    background: -moz-linear-gradient(top,  #f2f6f9 0%, #ffffff 74%, #dee2e5 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f6f9), color-stop(74%,#ffffff), color-stop(100%,#dee2e5)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #f2f6f9 0%,#ffffff 74%,#dee2e5 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #f2f6f9 0%,#ffffff 74%,#dee2e5 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #f2f6f9 0%,#ffffff 74%,#dee2e5 100%); /* IE10+ */
+    background: linear-gradient(to bottom,  #f2f6f9 0%,#ffffff 74%,#dee2e5 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f9', endColorstr='#dee2e5',GradientType=0 ); /* IE6-9 */
+}
+.box header h2 {
+    line-height: 24px;
+    color: #000;
+}
+
+[class*="icon-"]{
+    padding-left: 18px;
+    background-position: left center;
+    background-repeat: no-repeat;
+}
+.icon-cog { background-image: 	url('../../images/fatcow/cog.png'); }
+.icon-help { background-image: 	url('../../images/fatcow/help.png'); }
+.icon-css3 { background-image: 	url('../../images/fatcow/css_3.png'); }
+.icon-html5 { background-image: url('../../images/fatcow/html_5.png'); }
+.icon-brick { background-image: url('../../images/fatcow/brick.png'); }
+
+.box header {
+    border-bottom: dotted thin #a4b4bf;
+}
+.row {
+    width: 100%;
+    display: table;
+    border-spacing: 10px;
+}
+pre {
+    background: #fff;
+    border: solid thin #d1d7ff;
+    padding: 6px 8px;
+    box-shadow: -2px 2px 4px rgba(0,0,0,.1);
+}
+.row > * {
+    display: table-cell;
+    margin: 2% !important;
+    
+}
+.clearer {
+    clear: both;
+}