Skip to content
Snippets Groups Projects
Commit 00e31bf9 authored by Stéphane Bouvry's avatar Stéphane Bouvry
Browse files

Contenu Base HTML

parent 685b91c9
No related branches found
No related tags found
No related merge requests found
Pipeline #2257 failed
Showing
with 3075 additions and 0 deletions
# 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)
- [Modèle de boîte](integration-web/modele-de-boite.html)
- [Mise en page avec les **Flexbox**](integration-web/css3-flexbox.html)
## UI
## Développement PHP
# Comprendre les FLEXBOX
Les **flexbox** sont un dispositif de mise en page introduit avec le *CSS3* pour faciliter l'organisation des contenus. Ils remplacent avantageusement les mécanismes basés sur `float` utilisés en **CSS2**.
## préambule
Voice le code de base que nous allons faire évoluer tout au long de l'article :
```html
<!-- Code CSS -->
<div class="conteneur">
<div class="element orange">A</div>
<div class="element jaune">B</div>
<div class="element cyan">C</div>
<div class="element rouge">D</div>
<div class="element vert">E</div>
</div>
```
```css
/**** MISE en PAGE ****/
.conteneur {
/* Y'aura du code ici... */
}
.element {
/* ... et là */
}
/**** MISE en FORME ****/
/* Cette partie sert uniquement à gérer l'apparence afin
de rendre le résultat plus 'visuel' */
.conteneur {
background: purple;
padding: 1em;
}
.elem {
font-size: 2em;
}
.orange { background: orange; }
.jaune { background: yellow; }
.cyan { background: cyan; }
.rouge { background: red; }
.vert { background: green; }
```
Ce qui donne :
![Rendu de base](../../images/css3-flexbox-rendu-001.png)
## Les bases
### flex et inline-flex
Le modèle de boîte doit s'activer **sur l'élément conteneur** (celui qui contient les éléments à mettre en page), en renseignant la valeur `display` avec les valeurs `flex` ou `inline-flex` .
```css
/**** MISE en PAGE ****/
.conteneur {
display: flex;
}
```
![Rendu avec la valeur flex](../../images/css3-flexbox-rendu-002.png)
La valeur `inline-flex` ajoute un compotement **inline** au conteneur :
```css
/**** MISE en PAGE ****/
.conteneur {
display: inline-flex;
}
```
![Rendu avec la valeur flex](../../images/css3-flexbox-rendu-003.png)
L'activation des *flexbox* se déclenche en utilisant les valeurs :
* `flex` : le conteneur se comporte comme un **block**
* `inline-flex` : le conteneur se comporte comme un élément **inline**
### Gérer la direction avec `flex-direction`
La propriété `flex-direction` permet de fixer le comportement général des éléments dans le conteneur. par défaut, les éléments s'affichent en ligne (valeur `row`).
```css
/**** MISE en PAGE ****/
.conteneur {
display: inline-flex;
flex-direction: row;
}
```
Les valeurs disponibles sont :
* `row` *(par défaut)* Le conteneur se comporte comme une ligne d'éléments alignés à gauche dans le sens de la lecture,
* `row-reverse` Les éléments sont alignés à droite et sont inversés
* `column` Le conteneur se comporte comme une colonne, les éléments sont affichés de haut en bas
* `column-reverse` Idem, mais les éléments sont inversés
A noter que la valeur `column-reverse` justify les éléments en bas du conteneur. Vous pouvez le vérifier en appliquant arbitrairement une hauteur à ce dernier : `height: 250px`
```css
/**** MISE en PAGE ****/
.conteneur {
display: flex;
flex-direction: column-reverse;
height: 250px;
}
```
![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-004.png)
### Réorganiser les éléments avec `order`
La propriété `order` permet de modifier l'ordre d'affichage d'un élément spécifique. Par défaut, cette valeur est fixée à 0, mais elle peut être modifié sur chaque éléments pour réorganiser l'enchainement des éléments dans le conteneur.
```css
.conteneur {
display: flex;
}
.rouge {
order: -1;
}
```
![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.
### Emballage des éléments avec `flex-wrap`
Dans notre exemple, les éléments ont assez de place pour tenir dans le conteneur car ils comportent peu de contenu. Mais il faut garder à l'esprit que la règle **le contenu l'emporte** s'applique également aux flexbox :
Ajouter un peu de contenu dans les éléments HTML :
```html
<div class="conteneur">
<div class="element orange">ORANGE</div>
<div class="element jaune">JAUNE</div>
<div class="element cyan">CYAN</div>
<div class="element rouge">ROUGE</div>
<div class="element vert">VERT</div>
</div>
```
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)
La propriétés `flex-wrap` (*nowrap*, `wrap`, `wrap-reverse`) va forcer la *flexbox* à adapter l'embalage.
La valeur `wrap` va autoriser la flexbox à ajouter des lignes (ou des colonnes) pour garantir l'affichage du contenu :
```css
.conteneur {
display: flex;
flex-wrap: wrap;
}
```
![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-007.png)
La valeur wrap-reverse inverse la disposition des lignes.
A noter que `flex-wrap` ne semble pas donner de résultat si `flex-direction` est réglé sur `column`. Mais il a bien un effet, pour l'observer, ajouter une hauteur au conteneur :
```css
.conteneur {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 7em;
}
```
## Gérer la taille des éléments
La taille des éléments d'un flexbox s'ajuste avec 3 propriétés :
* `flex-grow` : Agrandissement
* `flex-shrink` : Contraction
* `flex-basis` : Taille optimale
* `flex` : Forme compacte de ces 3 propriétés
### Élargir les éléments avec `flex-grow`
La propriété `flex-grow` permet, au sein d'un item, de définir la façon dont la taille de l'élément peut être élargi. Par défaut, `flex-grow` est fixé à 0, donc les éléments ne s'élargissent, leurs taille maximum correspond à leur taille initiale.
En mettant la valeur 1 à tout les éléments, la *flexbox* va recalculer la largeur des éléments en équilibrant leur occupation (tous à la même taille) pour occuper toute la largeur disponible dans le conteneur :
```css
.conteneur {
display: flex;
}
.element {
flex-grow: 1;
}
```
![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.
Vous pouvez ensuite jouer avec la valeur de `flex-grow` (qui doit être un entier strictement positif) pour répartir la distribution de l'espace disponible différement en fonction de l'élément :
```css
.conteneur {
display: flex;
}
.element {
flex-grow: 1;
}
.orange {
/* orange sera 3 fois plus grand que les autres */
flex-grow: 3;
}
.vert {
/* Vert n'est pas autorisé à grandir */
flex-grow: 0;
}
```
![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 :
```css
.conteneur {
display: flex;
flex-direction: column;
height: 350px;
}
.element {
flex-grow: 1;
}
.orange {
flex-grow: 3;
}
.vert {
flex-grow: 0;
}
```
![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-010.png)
### Taille initale avec flex-basis
Par défaut, la taille des éléments est établie en fonction du contenu. la propriété `flex-basis` permet de définir la taille initiale d'un élément avant que l'espace disponible soit redistribué entre les éléments.
Par exemple, nous pouvons indiquer comme largeur optimale 200px, et interdire le bloc orange de grandir en fixant `flex-grow` à 0 :
```css
.conteneur {
display: flex;
}
.element {
flex-grow: 1;
}
.orange {
flex-grow: 0;
/* Taille initiale de 200 */
flex-basis: 200px;
}
```
![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.
### Contraction avec `flex-shrink`
La propriétés `flex-shrink`permet quand à elle de configurer le rétrécissement des éléments (C'est la même mécanique de `flex-grow`, mais ).
```css
.conteneur {
display: flex;
}
.element {
flex-grow: 1;
}
/* Orange ne peut pas rétécir ou s'agrandir.
Sa taille est de 200px */
.orange {
flex-shrink: 0;
flex-grow: 0;
flex-basis: 200px;
}
```
![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-012.png)
### Forme compacte avec `flex`
TODO
## Alignement et positionnement des éléments
### Justification et alignement
#### `Alignement dans l'axe principal : justify-content`
La propriété `justify-content` permet de définir la façon ton les éléments vont s'aligner le long de l'axe principal (Axe horizontal).
Petit récap des valeurs possibles :
![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-013.png)
##### flex-start
Les éléments sont alignés au début de la *flexbox* ; à gauche ou en haut selon la valeur de `flex-direction`. C'est le réglage par défaut.
```css
.conteneur {
display: flex;
justify-content: flex-start;
}
```
##### flex-end
Les éléments sont alignés à la fin de la *flexbox* ; à droite ou en bas selon la valeur de `flex-direction`
```css
.conteneur {
display: flex;
justify-content: flex-end;
}
```
##### center
Les éléments sont alignés à la fin de la *flexbox* ; à droite ou en bas selon la valeur de `flex-direction`
```css
.conteneur {
display: flex;
justify-content: center;
}
```
\ No newline at end of file
# CSS : Le modèle de boîte
Une des clefs pour maîtriser la mise en page avec CSS, c'est de bien comprendre le **modèle de boîte**.
##
# Positionnement CSS
# Débuter en HTML (Votre première page web)
## Page web, 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.
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
Pour faire du HTML, il faut un éditeur de texte, pour débuter voici quelques éditeurs très performants :
- **Sublim Text** (Presque payant) Un des plus populaire chez les développeurs web
- **Notepad++** Très utilisé sous Windows
- **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
Créez un fichier `index.html` dans l'éditeur avec ce contenu :
```
Bonjour Monde !
```
Utilisez le menu Fichier/ouvrir du navigateur pour afficher le fichier :
![Résulat](../../images/html-bonjour-monde.png)
<div class="info">Même rudimentaire, nous avons une page web</div>
## HTML
Le **code source** HTML permet de structurer les informations avec des **balises**.
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)
## Types de balises
On distingues différentes formes 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
Les balises **ouvrantes** et **fermantes** permettent de délimiter du contenu. C'est le cas le plus répandu :
```html
<h1>Ce contenu sera un titre</h1>
<p>
Ce contenu sera un paragraphe,
avec
<strong>
ce texte en gras
</strong>
</p>
```
![Résultat](../../images/balises-ouvrantes-fermantes.svg)
## 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).
Plutôt que de les ouvrir et de le refermer, sans qu'elles ne délimitent aucun contenu ex :`<balise></balise>`, on utilise une syntaxe raccourci : `<balise />`
```html
<!-- Liseré horizontal -->
<hr />
Texte avec un retour chariot<br />
Ce texte est à la ligne
```
![Balises autofermantes](../../images/balise-auto-fermante.svg)
## Récapitulatif
![Récapitulatif](../../images/balise-recap.svg)
## 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**.
```html
<body>
<h1>Bonjour monde !</h1>
<p>
Ceci est ma première page<br/>
elle contient du
<strong>HTML</strong> !
</p>
</body>
```
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
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)
## Commentaires
Un code source HTML peut devenir rapidement dense et atteindre plusieurs centaines de ligne(on écrit beaucoup de code).
Les **commentaires** sont très utilisés pour permettre aux intégrateurs d'annoter le code source sans que ce commentaire apparaisse dans le rendu final.
Un commentaire débute par la séquence `<!--` et se termine avec `-->`
```html
<body>
<!-- Titre de la page -->
<header>
<h1>Bonjour monde !</h1>
</header>
<!-- Menu principale -->
<nav>
<a href="#">Accueil</a>
<a href="gallery.html">Galerie</a>
</nav>
<!-- Contenu -->
<p>Contenu de la page</p>
<!-- Pied de page -->
<footer>
Credit © Unicaen.fr
</footer>
</body>
```
L'utilisation des commentaires est également pratique pour désactiver certaines parties du code.
```html
<body>
<!-- Titre de la page -->
<header>
<h1>Bonjour monde !</h1>
</header>
<!-- Menu principale (désactivé) -->
<!--
<nav>
<a href="#">Accueil</a>
<a href="gallery.html">Galerie</a>
</nav>
-->
<!-- Contenu -->
<p>Contenu de la page</p>
<!-- Pied de page -->
<footer>
Credit © Unicaen.fr
</footer>
</body>
```
## Validation
Vous pouvez tester la validité d'un code HTML en utilisant le [Validateur W3C](http://validator.w3.org/)
![Validateur W3C](../../images/validator.jpg)
# Technologies du web
La création de contenu pour le web est l'aggrégat d'un **ensemble de technologies** que l'usage profane regroupe généralement sous le terme **technologies HTML/Web**.
## HTML
Le HTML est une technologie utilisée pour :
- Créer des documents web (pages HTML)
- Structurer les interfaces web (Webapp)
Le HTML est un langage :
- Description de contenu par **balise**
- Conçu pour être facile à utiliser/partager
- **Sémantique** (Il sert à structurer une informations - pas à la mise en forme)
<div class="info">
HTML n'est généralement pas considéré comme un **langage de programmation**. Il est en effet purement descriptif et ne propose aucun mécanisme logique.
</div>
## Petite histoire
### 1990
**Tim Berners** pose les bases du web :
- Premier navigateur,
- le protocole HTTP (pour l'accès aux document HTML),
- et le langage HTML
Le terme de **World Wide Web** est déjà consacré.
![Tim Berners Lee](../../images/berners.jpg)
### 1993
Le **Web** s'étend à la communauté scientifique et se popularise grâce à **NCSA Mosaic**, un navigateur capable d'afficher... des images.
![Le navigateur NCSA Mosaic](../../images/ncsa-mosaic.jpg)
### 1994-1996
**Netscape navigator** popularise le web hors des universités en permettant de réaliser les premiers sites *visuels*.
- Fondation du **W3C** (World Wide Web Consortium)
- Apparition d'**Internet Explorer**
- 1995/96 : Spécification de HTML 2.0 est publiée.
Cette période voit également s'affronter les éditeurs de navigateur Netscape et Explorer dans ce qu'on appelle **Le guerre des navigateurs**. Ces derniers n'hesitant pas à prendre de grandes liberté quand au rendu et aux fonctionnalités HTML/CSS
![Le navigateur NCSA Mosaic](../../images/disquette-netscape-navigator.jpg)
### 1997/2000 : Normalisation
**HTML 3.2** Syntètise les améliorations apportées par netscape et Internet explorer, en vu de normaliser les usages des 2 navigateurs.
**HTML 4** sort dans la foulée. Arrivée en force des **style CSS** et des scripts (Javascript). Le W3C arrive à imposer ce standard
La production de contenu Web se professionnalise
![W3C](../../images/w3c.png)
### 2000/2008 : Web 2.0
Le **XHTML** s'impose dans l'usage professionnel, il est la version **strict** de HTML 4. Il scèle une bonne fois pour toute la sacro-sainte séparation du contenu (XHTML) et de la forme (CSS).
La production de site web se professionnalise, les métiers d'**intégrateur web** / **Webdesigner** sont reconnus comme des disciplines hautement technique et plus seulement comme des activités complémentaires à des domaines plus générale (Designers / Informaticiens).
### Maintenant
**XHTML 2**, une nouvelle norme développée depuis plusieurs années a été définitivement abandonné ; rejetée par la communauté avant même d'être publié.
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**.
![Web sémantique](../../images/semantic.svg)
## Le World Wide Web
La transmission et l'accès aux contenus du web est déterminé par 3 choses :
- Le **navigateur web**
- Le protocole HTTP/S
- Le langage HTML
### Le navigateur
![Répartition des navigateurs en Décembre 2013 - source : http://gs.statcounter.com/](../../images/navigateurs.png)
### Le protocole HTTP
![Le protocole HTTP](../../images/http.png)
# Intégration web
- Introduction : Les technologies du web
- HTML5
* Création de page web
* Syntaxe et règle
* Structurer l'information
* Gestion de site : Lien, images et contenu externe
- CSS3
* Intégration CSS
* Syntaxe, sélecteurs et régles
* Mise en forme du texte
* Mise en page 1 : Le modèle de boîtes
* Mise en forme des boites (bases)
* Mise en forme et habillage des boites avancés
* Mise en page (Flexbox)
* Mise en page avancé (Positionnement libre)
* Mise en page avancé (Le responsive design)
src/images/apache.png

101 KiB

src/images/arbo-site.png

41.1 KiB

src/images/arbo.png

25.2 KiB

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="395.92764"
height="592.76556"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="balise-auto-fermante.svg">
<defs
id="defs4">
<marker
inkscape:stockid="Arrow1Lstart"
orient="auto"
refY="0.0"
refX="0.0"
id="Arrow1Lstart"
style="overflow:visible">
<path
id="path3974"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt"
transform="scale(0.8) translate(12.5,0)" />
</marker>
<marker
inkscape:stockid="Arrow1Lstart"
orient="auto"
refY="0"
refX="0"
id="Arrow1Lstart-0"
style="overflow:visible">
<path
inkscape:connector-curvature="0"
id="path3974-1"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
transform="matrix(0.8,0,0,0.8,10,0)" />
</marker>
<marker
inkscape:stockid="Arrow1Lstart"
orient="auto"
refY="0"
refX="0"
id="Arrow1Lstart-1"
style="overflow:visible">
<path
inkscape:connector-curvature="0"
id="path3974-6"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
transform="matrix(0.8,0,0,0.8,10,0)" />
</marker>
<marker
inkscape:stockid="Arrow1Lstart"
orient="auto"
refY="0"
refX="0"
id="Arrow1Lstart-4"
style="overflow:visible">
<path
inkscape:connector-curvature="0"
id="path3974-3"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
transform="matrix(0.8,0,0,0.8,10,0)" />
</marker>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.98994949"
inkscape:cx="274.40829"
inkscape:cy="322.64716"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1366"
inkscape:window-height="726"
inkscape:window-x="0"
inkscape:window-y="22"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Calque 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-3.4647569,-459.55082)">
<rect
style="color:#000000;fill:#bcd35f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="rect4878"
width="366.68539"
height="185.86807"
x="18.617044"
y="491.68683" />
<g
id="g3259"
transform="translate(-22.223356,-1.0101525)">
<rect
transform="matrix(0.98299389,-0.18363825,0.18363825,0.98299389,0,0)"
y="540.02924"
x="-76.478012"
height="102.02541"
width="70.710678"
id="rect4778"
style="color:#000000;fill:#66ff00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<text
transform="scale(0.67732583,1.4763943)"
sodipodi:linespacing="125%"
id="text2987"
y="425.87204"
x="63.571552"
style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
xml:space="preserve"><tspan
y="425.87204"
x="63.571552"
id="tspan2989"
sodipodi:role="line">&lt;</tspan></text>
</g>
<g
id="g3264"
transform="translate(-20.203051,-2.0203051)">
<rect
y="543.59039"
x="93.36834"
height="81.822357"
width="216.17264"
id="rect4822"
style="color:#000000;fill:#99ff55;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<text
sodipodi:linespacing="125%"
id="text2991"
y="608.24017"
x="98.41909"
style="font-size:72px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
xml:space="preserve"><tspan
y="608.24017"
x="98.41909"
id="tspan2993"
sodipodi:role="line">balise</tspan></text>
</g>
<g
id="g3253"
transform="translate(21.213204,-1.0101525)">
<rect
transform="matrix(0.99379275,0.11124734,-0.11124734,0.99379275,0,0)"
y="496.2417"
x="361.77499"
height="102.02541"
width="70.710678"
id="rect4778-6"
style="color:#000000;fill:#66ff00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<text
transform="matrix(-0.67679882,-0.02671382,0.05822917,-1.4752456,0,0)"
sodipodi:linespacing="125%"
id="text2987-9"
y="-358.10562"
x="-564.633"
style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
xml:space="preserve"><tspan
y="-358.10562"
x="-564.633"
id="tspan2989-8"
sodipodi:role="line">&lt;<tspan
id="tspan3011"
style="font-weight:bold;-inkscape-font-specification:Sans Bold" /></tspan></text>
</g>
<path
style="fill:none;stroke:#000000;stroke-width:0.96337235px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:url(#Arrow1Lstart);marker-mid:none;marker-end:none"
d="m 312.01818,533.4579 c 1.50895,-17.12861 10.72367,-50.47155 -44.01858,-57.54263"
id="path3020-2-4"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#bcd35f;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
x="22.65765"
y="482.59546"
id="text4880"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4882"
x="22.65765"
y="482.59546">Balise auto-fermante</tspan></text>
<rect
style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="rect3087"
width="319.28571"
height="197.14285"
x="44.893326"
y="-970.17352"
transform="scale(1,-1)" />
<rect
style="color:#000000;fill:#ff6600;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="rect4999"
width="38.385799"
height="94.954346"
x="290.34808"
y="535.11829" />
<text
xml:space="preserve"
style="font-size:73.93717957px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
x="346.46625"
y="529.00372"
id="text2987-3-7"
sodipodi:linespacing="125%"
transform="scale(0.86559965,1.1552685)"><tspan
sodipodi:role="line"
id="tspan2989-9-5"
x="346.46625"
y="529.00372">/</tspan></text>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="800"
height="592.76556"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="balise-recap.svg">
<defs
id="defs4">
<marker
inkscape:stockid="Arrow1Lstart"
orient="auto"
refY="0"
refX="0"
id="Arrow1Lstart"
style="overflow:visible">
<path
id="path3974"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
transform="matrix(0.8,0,0,0.8,10,0)"
inkscape:connector-curvature="0" />
</marker>
<marker
inkscape:stockid="Arrow1Lstart"
orient="auto"
refY="0"
refX="0"
id="Arrow1Lstart-0"
style="overflow:visible">
<path
inkscape:connector-curvature="0"
id="path3974-1"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
transform="matrix(0.8,0,0,0.8,10,0)" />
</marker>
<marker
inkscape:stockid="Arrow1Lstart"
orient="auto"
refY="0"
refX="0"
id="Arrow1Lstart-1"
style="overflow:visible">
<path
inkscape:connector-curvature="0"
id="path3974-6"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
transform="matrix(0.8,0,0,0.8,10,0)" />
</marker>
<marker
inkscape:stockid="Arrow1Lstart"
orient="auto"
refY="0"
refX="0"
id="Arrow1Lstart-4"
style="overflow:visible">
<path
inkscape:connector-curvature="0"
id="path3974-3"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
transform="matrix(0.8,0,0,0.8,10,0)" />
</marker>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.98994949"
inkscape:cx="502.31722"
inkscape:cy="313.56713"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1366"
inkscape:window-height="726"
inkscape:window-x="0"
inkscape:window-y="22"
inkscape:window-maximized="1"
showguides="true"
inkscape:guide-bbox="true" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Calque 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-3.4647569,-459.55082)">
<rect
style="color:#000000;fill:#99ff55;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="rect4822-4"
width="389.91888"
height="362.64478"
x="9.0206032"
y="542.21094" />
<text
xml:space="preserve"
style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
x="18.83005"
y="433.13693"
id="text2987"
sodipodi:linespacing="125%"
transform="scale(0.67732583,1.4763943)"><tspan
sodipodi:role="line"
id="tspan2989"
x="18.83005"
y="433.13693">&lt;</tspan></text>
<text
xml:space="preserve"
style="font-size:72px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
x="68.11451"
y="618.96606"
id="text2991"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan2993"
x="68.11451"
y="618.96606">balise</tspan></text>
<text
xml:space="preserve"
style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
x="-520.5509"
y="-366.17444"
id="text2987-9"
sodipodi:linespacing="125%"
transform="matrix(-0.67679882,-0.02671382,0.05822917,-1.4752456,0,0)"><tspan
sodipodi:role="line"
id="tspan2989-8"
x="-520.5509"
y="-366.17444">&lt;</tspan></text>
<text
xml:space="preserve"
style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
x="12.418597"
y="615.83002"
id="text2987-3"
sodipodi:linespacing="125%"
transform="scale(0.67732583,1.4763943)"><tspan
sodipodi:role="line"
id="tspan2989-9"
x="12.418597"
y="615.83002">&lt;</tspan></text>
<text
xml:space="preserve"
style="font-size:72px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
x="89.832771"
y="887.68304"
id="text2991-6"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan2993-4"
x="89.832771"
y="887.68304">balise</tspan></text>
<text
xml:space="preserve"
style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
x="-566.63"
y="-546.12115"
id="text2987-9-3"
sodipodi:linespacing="125%"
transform="matrix(-0.67679882,-0.02671382,0.05822917,-1.4752456,0,0)"><tspan
sodipodi:role="line"
id="tspan2989-8-0"
x="-566.63"
y="-546.12115">&lt;</tspan></text>
<text
xml:space="preserve"
style="font-size:73.93717957px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
x="74.555862"
y="770.8576"
id="text2987-3-7"
sodipodi:linespacing="125%"
transform="scale(0.86559965,1.1552685)"><tspan
sodipodi:role="line"
id="tspan2989-9-5"
x="74.555862"
y="770.8576">/</tspan></text>
<text
xml:space="preserve"
style="font-size:36px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
x="17.606895"
y="495.72232"
id="text3050"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan3052"
x="17.606895"
y="495.72232">Cas N°1 : </tspan></text>
<g
id="g3345"
transform="translate(-55.55839,-6.467017)">
<rect
y="649.2655"
x="129.73383"
height="169.70563"
width="306.07623"
id="rect3334"
style="color:#000000;fill:#666666;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<text
sodipodi:linespacing="125%"
id="text3054"
y="714.92542"
x="151.95718"
style="font-size:48px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Sans"
xml:space="preserve"><tspan
y="714.92542"
x="151.95718"
id="tspan3056"
sodipodi:role="line">Délimite </tspan><tspan
id="tspan3058"
y="774.92542"
x="151.95718"
sodipodi:role="line">un contenu</tspan></text>
</g>
<rect
style="color:#000000;fill:#ffb380;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="rect4822-4-1"
width="341.43155"
height="340.42142"
x="437.83035"
y="558.95581" />
<g
id="g3453"
transform="translate(0,140)">
<text
transform="scale(0.67732583,1.4763943)"
sodipodi:linespacing="125%"
id="text2987-3-8"
y="413.29153"
x="645.51086"
style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
xml:space="preserve"><tspan
y="413.29153"
x="645.51086"
id="tspan2989-9-8"
sodipodi:role="line">&lt;</tspan></text>
<text
sodipodi:linespacing="125%"
id="text2991-6-2"
y="588.65631"
x="488.64255"
style="font-size:72px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
xml:space="preserve"><tspan
y="588.65631"
x="488.64255"
id="tspan2993-4-3"
sodipodi:role="line">balise</tspan></text>
<text
transform="matrix(-0.67679882,-0.02671382,0.05822917,-1.4752456,0,0)"
sodipodi:linespacing="125%"
id="text2987-9-3-7"
y="-332.28516"
x="-1181.8176"
style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
xml:space="preserve"><tspan
y="-332.28516"
x="-1181.8176"
id="tspan2989-8-0-6"
sodipodi:role="line">&lt;</tspan></text>
<text
transform="scale(0.86559965,1.1552685)"
sodipodi:linespacing="125%"
id="text2987-3-7-6"
y="512.02014"
x="812.55273"
style="font-size:73.93717957px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
xml:space="preserve"><tspan
y="512.02014"
x="812.55273"
id="tspan2989-9-5-3"
sodipodi:role="line">/</tspan></text>
</g>
<text
xml:space="preserve"
style="font-size:36px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
x="583.91425"
y="502.88895"
id="text3050-9"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan3052-7"
x="583.91425"
y="502.88895">Cas N°2 : </tspan></text>
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
x="21.25927"
y="519.05139"
id="text3050-97"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan3052-4"
x="21.25927"
y="519.05139">Balise ouvrante/fermante </tspan></text>
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
x="534.35449"
y="525.62579"
id="text3050-97-3"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan3052-4-0"
x="534.35449"
y="525.62579">Balise auto-fermante </tspan></text>
<text
xml:space="preserve"
style="font-size:32px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
x="32.759178"
y="945.24023"
id="text3505"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan3507"
x="32.759178"
y="945.24023">! tous autre cas est une <tspan
style="font-size:32px;font-weight:bold;fill:#d40000;-inkscape-font-specification:Sans Bold"
id="tspan3509">erreur de syntaxe</tspan></tspan></text>
</g>
</svg>
This diff is collapsed.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="395.92764"
height="592.76556"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="balises-ouvrantes-fermantes.svg">
<defs
id="defs4">
<marker
inkscape:stockid="Arrow1Lstart"
orient="auto"
refY="0.0"
refX="0.0"
id="Arrow1Lstart"
style="overflow:visible">
<path
id="path3974"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt"
transform="scale(0.8) translate(12.5,0)" />
</marker>
<marker
inkscape:stockid="Arrow1Lstart"
orient="auto"
refY="0"
refX="0"
id="Arrow1Lstart-0"
style="overflow:visible">
<path
inkscape:connector-curvature="0"
id="path3974-1"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
transform="matrix(0.8,0,0,0.8,10,0)" />
</marker>
<marker
inkscape:stockid="Arrow1Lstart"
orient="auto"
refY="0"
refX="0"
id="Arrow1Lstart-1"
style="overflow:visible">
<path
inkscape:connector-curvature="0"
id="path3974-6"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
transform="matrix(0.8,0,0,0.8,10,0)" />
</marker>
<marker
inkscape:stockid="Arrow1Lstart"
orient="auto"
refY="0"
refX="0"
id="Arrow1Lstart-4"
style="overflow:visible">
<path
inkscape:connector-curvature="0"
id="path3974-3"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
transform="matrix(0.8,0,0,0.8,10,0)" />
</marker>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.98994949"
inkscape:cx="117.4491"
inkscape:cy="326.69911"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1366"
inkscape:window-height="726"
inkscape:window-x="0"
inkscape:window-y="22"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Calque 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-3.4647569,-459.55082)">
<rect
style="color:#000000;fill:#bcd35f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="rect4878"
width="366.68539"
height="206.07112"
x="18.617044"
y="491.68683" />
<rect
style="color:#000000;fill:#66ff00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="rect4778"
width="70.710678"
height="102.02541"
x="-76.110733"
y="538.06323"
transform="matrix(0.98299389,-0.18363825,0.18363825,0.98299389,0,0)" />
<text
xml:space="preserve"
style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
x="63.571552"
y="424.5174"
id="text2987"
sodipodi:linespacing="125%"
transform="scale(0.67732583,1.4763943)"><tspan
sodipodi:role="line"
id="tspan2989"
x="63.571552"
y="424.5174">&lt;</tspan></text>
<rect
style="color:#000000;fill:#66ff00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="rect4778-6"
width="70.710678"
height="102.02541"
x="361.55249"
y="494.25409"
transform="matrix(0.99379275,0.11124734,-0.11124734,0.99379275,0,0)" />
<rect
style="color:#000000;fill:#99ff55;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="rect4822"
width="216.17264"
height="81.822357"
x="93.36834"
y="541.59039" />
<text
xml:space="preserve"
style="font-size:72px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
x="98.41909"
y="606.24017"
id="text2991"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan2993"
x="98.41909"
y="606.24017">balise</tspan></text>
<text
xml:space="preserve"
style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
x="-564.51654"
y="-356.75201"
id="text2987-9"
sodipodi:linespacing="125%"
transform="matrix(-0.67679882,-0.02671382,0.05822917,-1.4752456,0,0)"><tspan
sodipodi:role="line"
id="tspan2989-8"
x="-564.51654"
y="-356.75201">&lt;</tspan></text>
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#bcd35f;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
x="22.65765"
y="482.59546"
id="text4880"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4882"
x="22.65765"
y="482.59546">Balise ouvrante</tspan></text>
<rect
style="color:#000000;fill:#bcd35f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="rect4878-1"
width="366.68539"
height="206.07112"
x="19.12212"
y="738.18048" />
<g
id="g4994"
transform="translate(1.0101525,11.111678)">
<rect
transform="matrix(0.98299389,-0.18363825,0.18363825,0.98299389,0,0)"
y="774.44708"
x="-140.10304"
height="83.338806"
width="57.759563"
id="rect4778-9"
style="color:#000000;fill:#66ff00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<text
transform="scale(0.67732583,1.4763943)"
sodipodi:linespacing="125%"
id="text2987-3"
y="586.68445"
x="13.909976"
style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
xml:space="preserve"><tspan
y="586.68445"
x="13.909976"
id="tspan2989-9"
sodipodi:role="line">&lt;</tspan></text>
</g>
<rect
style="color:#000000;fill:#66ff00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="rect4778-6-8"
width="70.710678"
height="102.02541"
x="399.17786"
y="735.02606"
transform="matrix(0.99379275,0.11124734,-0.11124734,0.99379275,0,0)" />
<rect
style="color:#000000;fill:#ff6600;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="rect4999"
width="38.385799"
height="94.954346"
x="67.10437"
y="781.59546" />
<rect
style="color:#000000;fill:#99ff55;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.79999995;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="rect4822-4"
width="216.17264"
height="81.822357"
x="107.00538"
y="786.06378" />
<text
xml:space="preserve"
style="font-size:72px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
x="103.97491"
y="848.69324"
id="text2991-6"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan2993-4"
x="103.97491"
y="848.69324">balise</tspan></text>
<text
xml:space="preserve"
style="font-size:94.48923492px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
x="-594.34052"
y="-521.24426"
id="text2987-9-3"
sodipodi:linespacing="125%"
transform="matrix(-0.67679882,-0.02671382,0.05822917,-1.4752456,0,0)"><tspan
sodipodi:role="line"
id="tspan2989-8-0"
x="-594.34052"
y="-521.24426">&lt;</tspan></text>
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#bcd35f;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
x="23.162708"
y="729.08911"
id="text4880-3"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4882-8"
x="23.162708"
y="729.08911">Balise fermante</tspan></text>
<text
xml:space="preserve"
style="font-size:73.93717956999999785px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
x="88.559814"
y="742.35425"
id="text2987-3-7"
sodipodi:linespacing="125%"
transform="scale(0.86559965,1.1552685)"><tspan
sodipodi:role="line"
id="tspan2989-9-5"
x="88.559814"
y="742.35425">/</tspan></text>
<text
xml:space="preserve"
style="font-size:16px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
x="29.728725"
y="916.95593"
id="text5001"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan5003"
x="29.728725"
y="916.95593">La présence du <tspan
style="font-size:16px;font-weight:bold"
id="tspan5007">/ </tspan>avant le nom de la balise </tspan><tspan
sodipodi:role="line"
x="29.728725"
y="936.95593"
id="tspan5005">indique qu'il s'agit d'une <tspan
style="font-size:16px;font-weight:bold"
id="tspan5009">balise fermante</tspan></tspan></text>
<path
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:url(#Arrow1Lstart-4)"
d="m 92.934034,407.90765 c 42.426406,3.03046 59.598996,32.32488 59.598996,32.32488"
id="path5011"
inkscape:connector-curvature="0"
transform="translate(3.4647569,459.55082)" />
</g>
</svg>
src/images/berners.jpg

29 KiB

src/images/browser-empty.png

12.1 KiB

src/images/chemins-relatifs-01.png

23.8 KiB

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="275.31299"
height="368.16553"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="chemins-relatifs-03.svg"
inkscape:export-filename="/home/jacksay/Web/Jacksay/jacksay/web/images/illustrations/chemins-relatifs-01.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<defs
id="defs4">
<marker
inkscape:stockid="Arrow1Lend"
orient="auto"
refY="0"
refX="0"
id="Arrow1Lend"
style="overflow:visible">
<path
id="path4062"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
transform="matrix(-0.8,0,0,-0.8,-10,0)"
inkscape:connector-curvature="0" />
</marker>
<marker
inkscape:stockid="Arrow1Lend"
orient="auto"
refY="0"
refX="0"
id="Arrow1Lend-0"
style="overflow:visible">
<path
inkscape:connector-curvature="0"
id="path4062-5"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
transform="matrix(-0.8,0,0,-0.8,-10,0)" />
</marker>
<marker
inkscape:stockid="Arrow1Lend"
orient="auto"
refY="0"
refX="0"
id="Arrow1Lend-2"
style="overflow:visible">
<path
inkscape:connector-curvature="0"
id="path4062-4"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
transform="matrix(-0.8,0,0,-0.8,-10,0)" />
</marker>
<marker
inkscape:stockid="Arrow1Lend"
orient="auto"
refY="0"
refX="0"
id="Arrow1Lend-3"
style="overflow:visible">
<path
inkscape:connector-curvature="0"
id="path4062-6"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
transform="matrix(-0.8,0,0,-0.8,-10,0)" />
</marker>
<marker
inkscape:stockid="Arrow1Lend"
orient="auto"
refY="0"
refX="0"
id="Arrow1Lend-9"
style="overflow:visible">
<path
id="path4062-7"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
transform="matrix(-0.8,0,0,-0.8,-10,0)"
inkscape:connector-curvature="0" />
</marker>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.98994949"
inkscape:cx="197.32067"
inkscape:cy="172.96961"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1366"
inkscape:window-height="726"
inkscape:window-x="0"
inkscape:window-y="22"
inkscape:window-maximized="1"
fit-margin-top="10"
fit-margin-left="10"
fit-margin-right="10"
fit-margin-bottom="10" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Calque 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-15.25,-620.59338)">
<rect
style="color:#000000;fill:#eef4d7;fill-opacity:1;fill-rule:nonzero;stroke:#dde9af;stroke-width:1.75820291;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="rect3033"
width="246.71902"
height="209.34335"
x="26.143068"
y="651.21075" />
<g
id="g3035"
transform="translate(0,160)">
<image
width="32"
height="32"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAA8RJREFU
WIXtl81rnFUUxn/n3HdmUhOoU7UtpeQLVASh0kTBlRRUlIjUvSiCC6Vx5T/gyk0WIlTalQtFoX5A
lXZp46J+YD80atPWGDszTtLGTJLJTJJmZu57r4t3MplJJomRKdn0Wb+c5znPee659xXvPTsJ3VH2
uwIAAYJLx4+cNtgB7xzQLBOCqBISnOkbHH4JsK0SEAC7DHbg0BsfgrXgZQOZhpETr70A7AKKrRTQ
5p0DaylffRePqTLWIyTR9Qq2tMzl958siDQRuQlEDSHB2b7B4aOscS+osTmL1zhIDOoJPOBDXClH
37FP12vbkt1DEGPkxKsDNHEvWCWyoAHIqqaoAIBSyX0L0+eaEGxC7j1CSPyht4nyRdvGAigjoiDa
pKqCmJWqDcyisokGHzXmF6p1138a1Iq5CqjZQMB6iEYnY2mmwOaRCDHZK4gI77z8SO+z/fs644Em
+gfPfQ/4Ogcsohp1u4UAUUGNkro8xmzmJs2P7kprHuE3xCgvPpH8QaggKBePHznbPzh8tC4DYeQA
CiI0NVZAEMQo6UvXoVKif/AjcHZTEY3wEIsxcvL1AWDX6gh8BcQgYhBjIluFdW6ICKmfruFtSOeh
bsrXh9h4ga2Fw7R3wZ7nyRfLF4B43QhCVA1qYqQujpK7MYE0Lars6dxH12M9OOdBTTVfWwjwgLdo
Ry+58QtcyS5+DYSNGQgM85M57PIij7/5HrhwjQMCKHbyFM5H00X/63XiwIPec5DC36c49sHvnwHL
QU27D1ETMDc5TbL7UXxlCTt1moZQroxETDUn24Egif2E5ZDZ7Ng00T4orzqg0SLKZ6Y4cPhpWJ4A
jVfP/1qq7a7DKkXbXnLjPzOanvsYKAEuqGoD8dyeXyDRESex+wB24Q/ExGnNjR3lQxMPUMyeZ+iL
8U+AZajfhBqS+ytLsvthEIe4QrSa/2e3jXBILImzFQqTN0qjmeI/RA5UBYiAQPFWjt6n+qE8E21E
adV7xaGJJLPpq2SmF88QdR/WBIgIfimPLZVpu38/fmkKaVn3RHViHeQz5/nuWv5Lqt3XBCDCws1J
dh/sAu/x3K7a3wp4JGgHF1KcSDH0+diPVOdfEyCqzKTS3NfzILCIBq3sHoi1M5/5k1v50jfAInWP
ktoI8qkM3c8NQKkAQXvryAFiHcxn0vyaWviKqPva2hRg7y8nnxlXfIezFhc9HFoKEcGhhb63hg8D
WeoyIMC9QA+QpKW+N8ADeSANzAG1LgWIAe1A/A6Rr6BMNP/KHebZHuTuz+lOC/gX/29g6TEI7HMA
AAAASUVORK5CYII=
"
id="image2993"
x="45.619324"
y="663.61591" />
<text
sodipodi:linespacing="125%"
id="text3029"
y="685.67682"
x="80.812202"
style="font-size:16px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#445016;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
xml:space="preserve"><tspan
y="685.67682"
x="80.812202"
id="tspan3031"
sodipodi:role="line"
style="font-weight:normal;-inkscape-font-specification:Sans">cours</tspan></text>
</g>
<g
id="g3164"
transform="translate(-369.71583,-51.51778)">
<image
width="32"
height="32"
xlink:href="data:image/png;base64,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
"
id="image3004"
x="412.30466"
y="720.18445" />
<text
sodipodi:linespacing="125%"
id="text3029-8"
y="742.24536"
x="447.61737"
style="font-size:16px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#445016;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
xml:space="preserve"><tspan
y="742.24536"
x="447.61737"
id="tspan3031-0"
sodipodi:role="line"
style="font-weight:bold;-inkscape-font-specification:Sans Bold">index.html</tspan></text>
</g>
<g
id="g3164-2"
transform="translate(-369.17467,-13.335048)">
<image
width="32"
height="32"
xlink:href="data:image/png;base64,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 "
id="image3004-2"
x="412.30466"
y="720.18445" />
<text
sodipodi:linespacing="125%"
id="text3029-8-4"
y="742.24536"
x="447.61737"
style="font-size:16px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#445016;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
xml:space="preserve"><tspan
y="742.24536"
x="447.61737"
id="tspan3031-0-5"
sodipodi:role="line"
style="font-weight:normal;-inkscape-font-specification:Sans"><tspan
style="font-weight:bold;-inkscape-font-specification:Sans Bold"
id="tspan4676">annexes.html</tspan></tspan></text>
</g>
<text
xml:space="preserve"
style="font-size:14px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#89a02c;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
x="20.203051"
y="640.21997"
id="text4632"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4634"
x="20.203051"
y="640.21997">Même niveau dans l'arborescence</tspan></text>
<g
id="g3164-2-5"
transform="translate(-369.17467,26.664949)">
<image
width="32"
height="32"
xlink:href="data:image/png;base64,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 "
id="image3004-2-3"
x="412.30466"
y="720.18445" />
<text
sodipodi:linespacing="125%"
id="text3029-8-4-7"
y="742.24536"
x="447.61737"
style="font-size:16px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#445016;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
xml:space="preserve"><tspan
y="742.24536"
x="447.61737"
id="tspan3031-0-5-2"
sodipodi:role="line"
style="font-weight:normal;-inkscape-font-specification:Sans"><tspan
style="font-weight:bold;-inkscape-font-specification:Sans Bold"
id="tspan4676-4">glossaire.html</tspan></tspan></text>
</g>
<g
id="g3199"
transform="translate(-346.07502,-109.06011)">
<image
width="32"
height="32"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAA/FJREFU WIXFl89rnEUYxz/PM++7mzUpTYKHVqwh0GMRCrVXIcdqxEsPnopiPfkPqD14UPDmUfBie6kieGjB eDEHBSHgIdSI0oIQDbaBxPxottl99913Hg8zm91sdpMt2ZIHhn2Z2Xme73yf7zwzI2bGSVrS+hCR 9OpnP6w1mv504f0zC+hUSdS+/+7D198EmknH2GjW9Ke//ugKjQIwQIYYOforOXjr07nXgAqw0wmg VHjPc8DCv5AK6BABeIPcYOYliAyPdAOgJYeywq3fVkkVQLAuKgSLSxrccg/XXj7TGUegQwOdljhI FKZfOEMBNIEijjkgsfA7EEHxT389XCVxPWL1BKBgCKogHq7be0zyKwAbvMJX8uUemCPjS2gtv93W owsSATMBhXfy60zmS5CPQz7OZL7E2413MQdOg9PDmpO4IAt+n4IBUAcTjQWQyY71lpj0C+gYON+x AqGdky6JqPZnoCeAlvpTB+RFyINEFZgH70k1TNZWcAV79AFk9+DcHOIAH4ciA712Ve8UxAllhS29 DPku5Hlsu2zpZUpKAKGQJmAPb+C37+KzFezvN0hoizk5hIEDXZ6QWzBGBO6cvcmWuwD1NaivseUu cOfsTUYkAEgTSFNobHxDYRUKXyGvPUAaD0hdG4RFv901trcGJAAoK+QCd6duUUT6nIVtqBY0og42 lz8nL0YQBDDMl6iv32by/MdYM1BvDChCIebKwgrFQ2rtIiXEbaUh+MriVRrVRdSNBX0gYI7Hq7fJ qn9w7uK3qA/+VA7Wjr4MGBEA7eD7gAo4Bzv//YwrPY/6iDrK3/uUbP0nSrFiPRUDzsUJUSE9T2wJ OS2o4PM6kkREAEWBNesYlRC0pQF3kIEDImwhNZTU0b/FbXhp5j6uPE0t22Zqfpep+V1q2TauPM2l mftoFKuhe8z2ZaB1AqsCMkopDcWm351FBMppmVev/IgbhXvzUwDMXluheAK+Gea66E9bKe0HYK8z gbHlF/lz4iL+EAAIQfmqaGWEvBbc/b40i6/VwQf1qcLY8iJJsnkwVi+/TkD0FI2sDKYcJK4HFQiN xyGjWhPIShG5gHhET+EGPgsEECXLmhHAAJYXyI3zAGTVBhQdoMWD6OCHUciTp/akhogOdvfodxgJ mHkM3/P+0BdAllfZ3H4UABzTzDxZXj0aQEts3uCL9zeGfictYjXsFHVPBgCasaoOE4EcpYG9q5OA H2ZwAGlXvU4g+wAk2s738TPf3zrj7ANQSqjOfjI3Vnjfv/gcw0TCy8jqW78Q94m03oYiMg5MAxMM N/vd1gTWgX+AnU4AKTAKlJ5hcAgrrwM1oImZcZIvZDnp5/n/bot0vZjNRyQAAAAASUVORK5CYII= "
id="image3026"
x="389.0712"
y="894.9408" />
<text
sodipodi:linespacing="125%"
id="text3029-8-1"
y="917.00177"
x="425.89844"
style="font-size:16px;font-style:normal;font-weight:bold;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#445016;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans Bold"
xml:space="preserve"><tspan
y="917.00177"
x="425.89844"
id="tspan3031-0-8"
sodipodi:role="line"
style="font-weight:bold;-inkscape-font-specification:Sans Bold">logo.jpg</tspan></text>
</g>
</g>
</svg>
src/images/chemins-relatifs-02.png

29.4 KiB

This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment