summaryrefslogtreecommitdiffhomepage
path: root/fr-fr
diff options
context:
space:
mode:
Diffstat (limited to 'fr-fr')
-rw-r--r--fr-fr/css-fr.html.markdown221
-rw-r--r--fr-fr/haskell.html.markdown2
-rw-r--r--fr-fr/lua-fr.html.markdown2
-rw-r--r--fr-fr/scala.html.markdown5
-rw-r--r--fr-fr/xml-fr.html.markdown128
5 files changed, 353 insertions, 5 deletions
diff --git a/fr-fr/css-fr.html.markdown b/fr-fr/css-fr.html.markdown
new file mode 100644
index 00000000..bdab9715
--- /dev/null
+++ b/fr-fr/css-fr.html.markdown
@@ -0,0 +1,221 @@
+---
+language: css
+contributors:
+ - ["Mohammad Valipour", "https://github.com/mvalipour"]
+ - ["Marco Scannadinari", "https://github.com/marcoms"]
+translators:
+ - ["@prrrnd", "https://github.com/prrrnd"]
+lang: fr-fr
+---
+
+Au début du web, il n'y avait pas d'élements visuels, simplement du texte pure. Mais avec le dévelopement des navigateurs,
+des pages avec du contenu visuel sont arrivées.
+CSS est le langage standard qui existe et permet de garder une séparation entre
+le contenu (HTML) et le style d'une page web.
+
+En résumé, CSS fournit une syntaxe qui vous permet de cibler des élements présents
+sur une page HTML afin de leur donner des propriétés visuelles différentes.
+
+Comme tous les autres langages, CSS a plusieurs versions. Ici, nous allons parlons de CSS2.0
+qui n'est pas le plus récent, mais qui reste le plus utilisé et le plus compatible avec les différents navigateur.
+
+**NOTE :** Vous pouvez tester les effets visuels que vous ajoutez au fur et à mesure du tutoriel sur des sites comme [dabblet](http://dabblet.com/) afin de voir les résultats, comprendre, et vous familiariser avec le langage.
+Cet article porte principalement sur la syntaxe et quelques astuces.
+
+
+```css
+/* Les commentaires sont entourés par slash-étoile, comme cette ligne! */
+
+/* ####################
+ ## SÉLECTEURS
+ ####################*/
+
+/* Généralement, la première déclaration en CSS est très simple */
+selecteur { propriete: valeur; /* autres proprietés...*/ }
+
+/* Le sélécteur sert à cibler un élément du HTML
+
+Vous pouvez cibler tous les éléments d'une page! */
+* { color:red; }
+
+/*
+Voici un élément dans notre HTML :
+
+<div class='une-classe classe2' id='unId' attr='valeur' />
+*/
+
+/* Vous pouvez le cibler par une classe */
+.une-classe { }
+
+/* ou par deux */
+.une-classe.classe2 { }
+
+/* ou par son type */
+div { }
+
+/* ou son id */
+#unId { }
+
+/* ou par le fait qu'il a un attribut */
+[attr] { font-size:smaller; }
+
+/* ou que l'attribut a une valeur spécifique */
+[attr='valeur'] { font-size:smaller; }
+
+/* commence avec une valeur */
+[attr^='val'] { font-size:smaller; }
+
+/* termine avec une valeur */
+[attr$='eur'] { font-size:smaller; }
+
+/* contient une valeur */
+[attr~='leu'] { font-size:smaller; }
+
+
+/* Ce qu'il faut bien comprendre, c'est que vous pouvez combiner ceci -- Il ne doit pas y avoir
+d'espaces entre. */
+div.une-classe[attr$='eu'] { }
+
+/* Vous pouvez aussi cibler un élément par son parent. */
+
+/* Un élément qui est en enfant direct */
+div.un-parent > .enfant {}
+
+/* Cela cible aussi les .enfants plus profonds dans la structure HTML */
+div.un-parent .enfants {}
+
+/* Attention : le même sélecteur sans espace a un autre sens. */
+div.un-parent.classe {}
+
+/* Vous pouvez cibler un élément basé sur un enfant de même parent */
+.je-suis-avant + .cet-element { }
+
+/* ou n'importe quel enfant de même parent avec celui ci */
+.je-suis-tout-avant ~ .cet-element {}
+
+/* Il y a des pseudo-classes qui permettent de cibler un élément
+basé sur le comportement, en plus de la structure de la page */
+
+/* élément avec le curseur au-dessus */
+:hover {}
+
+/* lien visité */
+:visited {}
+
+/* lien non visité */
+:link {}
+
+/* élément avec le focus */
+:focus {}
+
+
+/* ####################
+ ## PROPRIÉTÉS
+ ####################*/
+
+selecteur {
+
+ /* Units */
+ width: 50%; /* pourcentage */
+ font-size: 2em; /* taille de la police multipliée par X */
+ width: 200px; /* pixels */
+ font-size: 20pt; /* points */
+ width: 5cm; /* centimetres */
+ width: 50mm; /* millimetres */
+ width: 5in; /* pouces */
+
+ /* Couleurs */
+ background-color: #F6E; /* court hex */
+ background-color: #F262E2; /* long hex */
+ background-color: tomato; /* couleur nommée */
+ background-color: rgb(255, 255, 255); /* rouge, vert, bleu */
+ background-color: rgb(10%, 20%, 50%); /* rouge, vert, bleu en pourcent */
+ background-color: rgba(255, 0, 0, 0.3); /* rouge, vert, bleu avec transparence */
+
+ /* Images */
+ background-image: url(/chemin-vers-image/image.jpg);
+
+ /* Polices */
+ font-family: Arial;
+ font-family: "Courier New"; /* Si espace, entre guillemets */
+ font-family: "Courier New", Trebuchet, Arial; /* Si la première n'est pas trouvée, la deuxième est utilisée, etc... */
+}
+
+```
+
+## Utilisation
+
+Le CSS s'écrit dans des fichiers `.css`.
+
+```xml
+<!-- Vous devez inclure le CSS dans la balise <head> : -->
+<link rel='stylesheet' type='text/css' href='chemin/style.css' />
+
+<!-- Vous pouvez inclure du CSS dans le HTML directement, mais ce n'est vraiment pas recommandé. -->
+<style>
+ selecteur { propriete:valeur; }
+</style>
+
+<!-- ou directement sur l'élément HTML.
+PS : à ne pas faire. -->
+<div style='propriete:valeur;'>
+</div>
+
+```
+
+## Priorités
+
+Comme on vient de le voir, un élément peut être ciblé par plus qu'un seul sélecteur
+et une même propriété peut être définie plusieurs fois.
+Dans ces cas, une des propriétés devient prioritaire.
+
+Voici du code CSS :
+
+```css
+/*A*/
+p.classe1[attr='valeur']
+
+/*B*/
+p.classe1 {}
+
+/*C*/
+p.classe2 {}
+
+/*D*/
+p {}
+
+/*E*/
+p { propriete: valeur !important; }
+
+```
+
+et le code HTML:
+
+```xml
+<p style='/*F*/ propriete:valeur;' class='classe1 classe2' attr='valeur'>
+</p>
+```
+
+Les priorités de style sont :
+Attention, les priorités s'appliquent aux **propriétés**, pas aux blocs entiers.
+
+* `E` a la priorité grâce à `!important`.
+* `F` vient ensuite, car le code se trouve directement dans le HTML.
+* `A` vient ensuite, car il est le plus spécifique.
+ plus spécifique veut dire, celui qui cible le plus l'élément
+* `C` vient ensuite. Il est aussi spécifique que `B`, mais est écrit après.
+* Puis `B`
+* Et enfin `D`.
+
+## Compatibilité
+
+La plupart des fonctionnalités de CSS2 (et de plus en plus CSS3) sont compatibles
+avec tous les navigateurs. Mais il est important de vérifier la compatibilité.
+
+[QuirksMode CSS](http://www.quirksmode.org/css/) est une très bonne source pour cela.
+
+## En savoir plus (en anglais)
+
+* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)
+* [QuirksMode CSS](http://www.quirksmode.org/css/)
+* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)
diff --git a/fr-fr/haskell.html.markdown b/fr-fr/haskell.html.markdown
index 989db1d5..d9d3151f 100644
--- a/fr-fr/haskell.html.markdown
+++ b/fr-fr/haskell.html.markdown
@@ -1,5 +1,5 @@
---
-language: haskell
+language: Haskell
contributors:
- ["Adit Bhargava", "http://adit.io"]
translators:
diff --git a/fr-fr/lua-fr.html.markdown b/fr-fr/lua-fr.html.markdown
index 922d6ebc..b4e2a161 100644
--- a/fr-fr/lua-fr.html.markdown
+++ b/fr-fr/lua-fr.html.markdown
@@ -1,5 +1,5 @@
---
-language: lua
+language: Lua
filename: learnlua-fr.lua
contributors:
- ["Tyler Neylon", "http://tylerneylon.com/"]
diff --git a/fr-fr/scala.html.markdown b/fr-fr/scala.html.markdown
index da562138..a43edf16 100644
--- a/fr-fr/scala.html.markdown
+++ b/fr-fr/scala.html.markdown
@@ -1,12 +1,11 @@
---
language: Scala
-filename: learnscala.scala
contributors:
- ["George Petrov", "http://github.com/petrovg"]
- ["Dominic Bou-Samra", "http://dbousamra.github.com"]
translators:
- - ["Anne-Catherine Dehier", "https://github.com/spellart"]
-filename: learn.scala
+ - ["Anne-Catherine Dehier", "https://github.com/spellart"]
+filename: learnscala-fr.scala
lang: fr-fr
---
diff --git a/fr-fr/xml-fr.html.markdown b/fr-fr/xml-fr.html.markdown
new file mode 100644
index 00000000..ed5f55ff
--- /dev/null
+++ b/fr-fr/xml-fr.html.markdown
@@ -0,0 +1,128 @@
+---
+language: xml
+contributors:
+ - ["João Farias", "https://github.com/JoaoGFarias"]
+translators:
+ - ["Geoffrey Liu", "https://github.com/g-liu"]
+filename: learnxml-fr.xml
+lang: fr-fr
+---
+
+XML est un langage de balisage conçu pour stocker et transporter les informations.
+
+Contrairement à HTML, XML ne spécifie pas comment afficher ou formater les informations, juste comment les porter.
+
+* La syntaxe XML
+
+```xml
+<!-- Les commentaires en XML ressemblent ceci -->
+
+<?xml version="1.0" encoding="UTF-8"?>
+<librairie>
+ <livre categorie="CUISINE">
+ <titre lang="en">Everyday Italian</titre>
+ <auteur>Giada De Laurentiis</auteur>
+ <an>2005</an>
+ <prix>30.00</prix>
+ </livre>
+ <livre categorie="ENFANTS">
+ <titre lang="en">Harry Potter</titre>
+ <auteur>J. K. Rowling</auteur>
+ <an>2005</an>
+ <prix>29.99</prix>
+ </livre>
+ <livre categorie="WEB">
+ <titre lang="en">Learning XML</titre>
+ <auteur>Erik T. Ray</auteur>
+ <an>2003</an>
+ <prix>39.95</prix>
+ </livre>
+</librairie>
+
+<!-- Ce qui suit est un fichier XML typique.
+ Il commence par une déclaration, qui informe certaines métadonnées (en option).
+
+XML utilise une structure arborescente. Ci-dessus, le nœud racine est «librairie», qui a
+   trois nœuds enfants, qui sont appelés «livres». Ces nœuds ont plus de nœuds enfants, et ainsi de suite ...
+
+On crée les nœuds avec des balises d'ouverture / fermeture, et les enfants sont les nœuds juste entre
+   les balises d'ouverture et de fermeture. -->
+
+
+<!-- XML porte deux types d'informations:
+ 1 - Les attributs -> les métadonnées sur un nœud.
+ Habituellement, l'analyseur XML utilise cette information pour bien stocker les données.
+ 2 - Les éléments -> les informations pures.
+ C'est ce que l'analyseur retrouvera du fichier XML.
+ Les éléments apparaissent entre les balises d'ouverture et de fermeture, sans parenthèses. -->
+
+
+<!-- Ci-dessous, un élément avec deux attributs -->
+<fichier type="gif" id="4293">ordinateur.gif</fichier>
+
+
+```
+
+* Un document bien formaté & le validation
+
+Un document XML est bien formaté s'il est syntaxiquement correct.
+Cependant, il est possible d'injecter plus de contraintes dans le document,
+en utilisant les définitions de documents, tels que les schémas DTD et XML.
+
+Un document XML qui suit une définition de document est dit valide,
+en ce qui concerne ce document.
+
+Avec cet outil, vous pouvez vérifier les données XML en dehors de la logique de l'application.
+
+```xml
+
+<!-- Ci-dessous, vous pouvez voir une version simplifiée du document de librairie,
+   avec l'addition de définition DTD. -->
+
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE note SYSTEM "Librairie.dtd">
+<librairie>
+ <livre categorie="CUISINE">
+ <titre>Everyday Italian</titre>
+ <prix>30.00</prix>
+ </livre>
+</librairie>
+
+<!-- Cette DTD pourrait être quelque chose comme: -->
+
+<!DOCTYPE note
+[
+<!ELEMENT librairie (livre+)>
+<!ELEMENT livre (titre,prix)>
+<!ATTLIST livre categorie CDATA "Littérature">
+<!ELEMENT titre (#PCDATA)>
+<!ELEMENT prix (#PCDATA)>
+]>
+
+<!-- La DTD commence par une déclaration.
+   Après, le nœud racine est déclaré, qui exige un ou plusieurs nœuds enfants.
+   Chaque «livre» doit contenir exactement un «titre» et «prix» et un attribut
+   appelé «catégorie», avec «littérature» comme valeur par défaut.
+   Les nœuds de «titre» et «prix» contiennent des informations de caractère analysés
+ (Anglais: «parsed character data») -->
+
+<!-- La DTD pourrait être déclarée dans le fichier XML lui-même -->
+
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!DOCTYPE note
+[
+<!ELEMENT librairie (livre+)>
+<!ELEMENT livre (titre,prix)>
+<!ATTLIST livre categorie CDATA "Littérature">
+<!ELEMENT titre (#PCDATA)>
+<!ELEMENT prix (#PCDATA)>
+]>
+
+<librairie>
+ <livre categorie="CUISINE">
+ <titre>Everyday Italian</titre>
+ <prix>30.00</prix>
+ </livre>
+</librairie>
+```