diff options
Diffstat (limited to 'fr-fr')
-rw-r--r-- | fr-fr/css-fr.html.markdown | 221 | ||||
-rw-r--r-- | fr-fr/haskell.html.markdown | 2 | ||||
-rw-r--r-- | fr-fr/lua-fr.html.markdown | 2 | ||||
-rw-r--r-- | fr-fr/scala.html.markdown | 5 | ||||
-rw-r--r-- | fr-fr/xml-fr.html.markdown | 128 |
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> +``` |