summaryrefslogtreecommitdiffhomepage
path: root/fr-fr
diff options
context:
space:
mode:
Diffstat (limited to 'fr-fr')
-rw-r--r--fr-fr/HTML-fr.html.markdown115
-rw-r--r--fr-fr/css-fr.html.markdown8
-rw-r--r--fr-fr/markdown.html.markdown2
3 files changed, 120 insertions, 5 deletions
diff --git a/fr-fr/HTML-fr.html.markdown b/fr-fr/HTML-fr.html.markdown
new file mode 100644
index 00000000..fdde9107
--- /dev/null
+++ b/fr-fr/HTML-fr.html.markdown
@@ -0,0 +1,115 @@
+---
+language: html
+filename: learnhtml-fr.html
+contributors:
+ - ["Christophe THOMAS", "https://github.com/WinChris"]
+lang: fr-fr
+---
+HTML signifie HyperText Markup Language.
+C'est un langage (format de fichiers) qui permet d'écrire des pages internet.
+C’est un langage de balisage, il nous permet d'écrire des pages HTML au moyen de balises (Markup, en anglais).
+Les fichiers HTML sont en réalité de simple fichier texte.
+Qu'est-ce que le balisage ? C'est une façon de hiérarchiser ses données en les entourant par une balise ouvrante et une balise fermante.
+Ce balisage sert à donner une signification au texte ainsi entouré.
+Comme tous les autres langages, HTML a plusieurs versions. Ici, nous allons parlons de HTML5.
+
+**NOTE :** Vous pouvez tester les différentes balises que nous allons voir au fur et à mesure du tutoriel sur des sites comme [codepen](http://codepen.io/pen/) afin de voir les résultats, comprendre, et vous familiariser avec le langage.
+Cet article porte principalement sur la syntaxe et quelques astuces.
+
+
+```HTML
+<!-- Les commentaires sont entouré comme cette ligne! -->
+
+<!-- #################### Les balises #################### -->
+
+<!-- Voici un exemple de fichier HTML que nous allons analyser -->
+<!-- Venez voir ce que ça donne -->
+
+<!doctype html>
+ <html>
+ <head>
+ <title>Mon Site</title>
+ </head>
+ <body>
+ <h1>Hello, world!</h1>
+ <a href = "http://codepen.io/anon/pen/xwjLbZ">Venez voir ce que ça donne</a>
+ <p>Ceci est un paragraphe</p>
+ <p>Ceci est un autre paragraphe</p>
+ <ul>
+ <li>Ceci est un item d'une liste non ordonnée (liste à puces)</li>
+ <li>Ceci est un autre item</li>
+ <li>Et ceci est le dernier item de la liste</li>
+ </ul>
+ </body>
+ </html>
+
+<!-- Un fichier HTML débute toujours par indiquer au navigateur que notre page est faite en HTML -->
+
+<!doctype html>
+
+<!-- Après ça on commence par ouvrir une balise <html> -->
+<html>
+</html>
+<!-- Et puis on la referme à la fin du fichier avec </html> -->
+<!-- après cette balise de fin, plus rien ne doit apparaître. -->
+
+<!-- À l'intérieur (entre la balise ouvrant et fermante <html></html>), on trouve : -->
+
+<!-- Un entête (<head> en anglais ; il faut le refermer avec </head>) -->
+<!-- L'entête contient des descriptions et informations annexes qui ne sont pas affichées : se sont les métadonnées -->
+
+<head>
+ <title>Mon Site</title><!-- La balise <title> permet d'indiquer au navigateur le titre à afficher dans la barre de l'onglet de la fenêtre -->
+</head>
+
+<!-- Après la balise <head>, on trouve la balise <body> -->
+<!-- Pour le moment, rien n'est encore affiché dans la fenêtre du navigateur. -->
+<!-- Il faut ensuite remplir le corps (balise <body>) avec du contenu -->
+
+<body>
+ <h1>Hello, world!</h1> <!-- La balise h1 permet de structurer le texte, c'est un titre -->
+ <!-- Il exite différents sous-titres à <h1> qui sont hiérarchisés du plus important (h2) au plus précis (h6) -->
+ <a href = "http://codepen.io/anon/pen/xwjLbZ">Venez voir ce que ça donne</a> <!-- Lien vers la source cible indiqué dans href="" -->
+ <p>Ceci est un paragraphe </p> <!-- La balise <p> permet d'inclure du texte à la page html -->
+ <p>Ceci est un autre paragraphe</p>
+ <ul> <!-- La balise <ul> permet d'introduire une liste à puces -->
+ <!-- Si on souhaite une liste ordonnée : <ol> liste numérotée, 1. pour le premier élément, 2. pour le second, etc -->
+ <li>Ceci est un item d'une liste non ordonnée (liste à puces)</li>
+ <li>Ceci est un autre item</li>
+ <li>Et ceci est le dernier item de la liste</li>
+ </ul>
+</body>
+
+<!-- Voilà comment créer un fichier HTML simple -->
+
+<!-- Mais il est possible d'ajouter encore des balises plus spécifiques -->
+
+<!-- Pour insérer une image -->
+<img src="http://i.imgur.com/XWG0O.gif"/> <!-- On indique la source de l'image dans src="" -->
+<!-- La source peut-être un URL ou encore la destination d'un fichier de votre ordinateur -->
+
+<!-- Il est possible de réaliser des tableaux également -->
+
+<table> <!-- On ouvre la balise <table> -->
+ <tr> <!-- <tr> permet de créer une ligne -->
+ <th>First Header</th> <!-- <th> permet de créer un titre au tableau -->
+ <th>Second Header</th>
+ </tr>
+ <tr>
+ <td>Première ligne, première cellule</td> <!-- <td> permet de créer une cellule -->
+ <td>Première ligne, deuxième cellule</td>
+ </tr>
+ <tr>
+ <td>Deuxième ligne, première cellule</td>
+ <td>Deuxième ligne, deuxième cellule</td>
+ </tr>
+</table>
+
+## Utilisation
+
+Le HTML s'écrit dans des fichiers `.html`.
+
+## En savoir plus
+
+* [Tutoriel HTML](http://slaout.linux62.org/html_css/html.html)
+* [W3School](http://www.w3schools.com/html/html_intro.asp)
diff --git a/fr-fr/css-fr.html.markdown b/fr-fr/css-fr.html.markdown
index bdab9715..35673c47 100644
--- a/fr-fr/css-fr.html.markdown
+++ b/fr-fr/css-fr.html.markdown
@@ -8,7 +8,7 @@ translators:
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,
+Au début du web, il n'y avait pas d'élements visuels, simplement du texte pur. 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.
@@ -16,8 +16,8 @@ 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.
+Comme tous les autres langages, CSS a plusieurs versions. Ici, nous allons parler 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 navigateurs.
**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.
@@ -33,7 +33,7 @@ Cet article porte principalement sur la syntaxe et quelques astuces.
/* 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
+/* Le sélecteur sert à cibler un élément du HTML
Vous pouvez cibler tous les éléments d'une page! */
* { color:red; }
diff --git a/fr-fr/markdown.html.markdown b/fr-fr/markdown.html.markdown
index e5e7c73a..66f0efbe 100644
--- a/fr-fr/markdown.html.markdown
+++ b/fr-fr/markdown.html.markdown
@@ -2,7 +2,7 @@
language: markdown
contributors:
- ["Andrei Curelaru", "http://www.infinidad.fr"]
-filename: markdown.md
+filename: markdown-fr.md
lang: fr-fr
---