Commit fe3fa288 authored by Stéphane Bouvry's avatar Stéphane Bouvry
Browse files

Support de formation suite

parent ae92ccaf
...@@ -2,3 +2,4 @@ node_modules ...@@ -2,3 +2,4 @@ node_modules
dist dist
src/**/*.html src/**/*.html
**.*~ **.*~
.idea
var gulp = require('gulp'), var gulp = require('gulp'),
shell = require('gulp-shell'), shell = require('gulp-shell'),
sass = require('gulp-sass'),
fs = require('fs'),
exec = require('child_process').exec; exec = require('child_process').exec;
var src = './src/', var src = './src/',
articles = src +'articles/' articles = src + 'articles/';
gulp.task('default', function(){ gulp.task('articles', function () {
gulp.src(articles + '**/*.md', { read: false }) if (!fs.existsSync('dist/articles')) fs.mkdirSync('dist/articles');
.pipe(shell( gulp.src(articles + '**/*.md', {read: false})
['pandoc --template=./src/templates/unicaen.html --standalone <%= file.path %> -o <%= f(file.path) %>'], .pipe(shell(
{ ['pandoc --template=./src/templates/article.html --standalone <%= file.path %> -o <%= f(file.path) %>'],
templateData: { {
f: function(s){ templateData: {
return s.replace(/\.md/, '.html') f: function (s) {
return s.replace(/\.md/, '.html').replace(/src\//, 'dist/');
}
}
}
))
});
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('watch', function(){
gulp.watch('src/articles/**/*.md', ['default']); gulp.task('default', ['articles', 'slides', 'index', 'images', 'sass']);
gulp.watch('src/templates/unicaen.html', ['default']);
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']);
}) })
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
"gulp-shell": "^0.6.5" "gulp-shell": "^0.6.5"
}, },
"dependencies": { "dependencies": {
"gulp-md-docs": "^0.1.8" "gulp-md-docs": "^0.1.8",
"gulp-sass": "^4.0.1"
} }
} }
...@@ -47,7 +47,7 @@ de rendre le résultat plus 'visuel' */ ...@@ -47,7 +47,7 @@ de rendre le résultat plus 'visuel' */
``` ```
Ce qui donne : Ce qui donne :
![Rendu de base](../../images/css3-flexbox-rendu-001.png) ![Rendu de base](../images/css3-flexbox-rendu-001.png)
## Les bases ## Les bases
...@@ -62,7 +62,7 @@ Le modèle de boîte doit s'activer **sur l'élément conteneur** (celui qui con ...@@ -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 : La valeur `inline-flex` ajoute un compotement **inline** au conteneur :
...@@ -73,7 +73,7 @@ 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 : 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 ...@@ -107,7 +107,7 @@ A noter que la valeur `column-reverse` justify les éléments en bas du conteneu
height: 250px; 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` ### 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 ...@@ -121,7 +121,7 @@ La propriété `order` permet de modifier l'ordre d'affichage d'un élément sp
order: -1; 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. 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 : ...@@ -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 : 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. 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) ...@@ -155,7 +155,7 @@ La valeur `wrap` va autoriser la flexbox à ajouter des lignes (ou des colonnes)
flex-wrap: wrap; 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. 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 ...@@ -194,7 +194,7 @@ En mettant la valeur 1 à tout les éléments, la *flexbox* va recalculer la lar
flex-grow: 1; 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. 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 ...@@ -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 : 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 ...@@ -241,7 +241,7 @@ Pour observer le résultat avec un direction en colonne avec `flex-direction:col
flex-grow: 0; 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 ### Taille initale avec flex-basis
...@@ -263,7 +263,7 @@ Par exemple, nous pouvons indiquer comme largeur optimale 200px, et interdire le ...@@ -263,7 +263,7 @@ Par exemple, nous pouvons indiquer comme largeur optimale 200px, et interdire le
flex-basis: 200px; 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. 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 ...@@ -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` ### Forme compacte avec `flex`
...@@ -303,7 +303,7 @@ La propriété `justify-content` permet de définir la façon ton les éléments ...@@ -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 : 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 ##### flex-start
......
# 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)
# Utiliser HTML pour structurer l'information
...@@ -21,7 +21,7 @@ Cependant, les intégrateurs web s'autorisent un seuil de tolérance pour le cas ...@@ -21,7 +21,7 @@ Cependant, les intégrateurs web s'autorisent un seuil de tolérance pour le cas
### Compatibilité CSS2 /CSS3 ### 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. 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 ## Syntax CSS
...@@ -63,7 +63,7 @@ article { ...@@ -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. le sélécteur va permettre de *sélectionner* un ou plusieurs éléments sur lesquels vont s'appliquer la régle.
</div> </div>
<div class="col"> <div class="col">
![](../../images/regle-css-02.png) ![](../images/regle-css-02.png)
</div> </div>
</div> </div>
...@@ -75,7 +75,7 @@ article { ...@@ -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 : 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>
<div class="col"> <div class="col">
![](../../images/regle-css-03.png) ![](../images/regle-css-03.png)
</div> </div>
</div> </div>
...@@ -86,7 +86,7 @@ article { ...@@ -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. 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>
<div class="col"> <div class="col">
![](../../images/regle-css-04.png) ![](../images/regle-css-04.png)
</div> </div>
</div> </div>
...@@ -97,7 +97,7 @@ article { ...@@ -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` 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>
<div class="col"> <div class="col">
![](../../images/regle-css-05.png) ![](../images/regle-css-05.png)
</div> </div>
</div> </div>
......
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
## Page web, document HTML ## Page web, document HTML
### Document HTML
Le code HTML s'écrit dans des **fichiers HTML** ; Les fichiers HTML sont de simples fichiers texte. 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. 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). ...@@ -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. 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 : 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 ...@@ -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/ - **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/ - **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 : Créez un fichier `index.html` dans l'éditeur avec ce contenu :
...@@ -29,12 +31,16 @@ Bonjour Monde ! ...@@ -29,12 +31,16 @@ Bonjour Monde !
Utilisez le menu Fichier/ouvrir du navigateur pour afficher le fichier : 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> <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**. Le **code source** HTML permet de structurer les informations avec des **balises**.
...@@ -42,18 +48,18 @@ Les balises sont **toujours entourées de chevrons** ...@@ -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. 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 ouvrantes, ex: `<h1>`, `<p>`,
- Les balises fermantes, ex: `</h1>`, `</p>`, - Les balises fermantes, ex: `</h1>`, `</p>`,
- Les balises orphelines (ou auto-fermantes)ex: `<br />`, - 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 : 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. ...@@ -68,10 +74,10 @@ Les balises **ouvrantes** et **fermantes** permettent de délimiter du contenu.
</p> </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). 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 /> ...@@ -85,15 +91,15 @@ Texte avec un retour chariot<br />
Ce texte est à la ligne 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**. 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 ...@@ -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. 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). 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). 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 ...@@ -174,9 +180,81 @@ L'utilisation des commentaires est également pratique pour désactiver certaine
</body> </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>
```