[CODE][HTML]Le code, c'est cool !
+8
Monkey D Kurama
Dada Kaboom
Und3r
Dada
Mayoua
Tsubasaki
Samael
Gear 2nd
12 participants
Forum One Piece, Fairy Tail, Dragon Ball, Nanatsu no Tazai, Naruto... :: 
Général :: Discussions générales :: Tutoriels
Page 1 sur 2
Page 1 sur 2 • 1, 2 
![[CODE][HTML]Le code, c'est cool ! Empty](https://2img.net/i/empty.gif)
[CODE][HTML]Le code, c'est cool !
par Gear 2nd Jeu 14 Aoû - 23:25
Bien le bonjour à tous ! Voici un petit tuto que je voulais écrire depuis un petit moment, je remercie d’ailleurs Mayou pour m’en avoir redonné l’envie avec le sien.
Bon tout d’abord, la majorité vont flipper en voyant le mot "code" et vont aller imaginer des trucs méga compliqués (pardonnez-moi, vous tous à qui j’ai mis des codes incompréhensibles de 5 lignes sur la chatbox).
Cela n’est pas du tout l’objet de ce tutoriel, car nous n’allons pas parler de code au sens mathématique du terme, mais plutôt au sens structurel.
Sachez que vous tous qui lisez ce tutoriel, si vous êtes un tant soit peu habitué au forum, vous êtes déjà des codeurs.
J’écris en jaune, c’est marrant !
J’écris en jaune, c’est marrant !
"Mon dieu mais qu’est-ce que tu nous as écrit là
"
Eh bien c’est très simple. Sachez que ces deux codes renvoient exactement la même chose. Le premier, que vous utilisez tout le temps sur le forum, est appelé BB Code. Il s’agit en fait d’une version simplifiée du deuxième, qui est lui, du HTML.
Le HTML, vous avez dû le croiser quelque part. Bon en fait, vous le croisez à chaque instant de navigation, allons donc expliquer de quoi ça s’agit !
Etant donné que vous êtes habitué au BB Code, partons de là. Imaginez une part de melon. On est d’accord, vous ne mangez pas la peau, pas vrai ? (Ou alors vous êtes bizarre ) Eh bien nous sommes d’accord, un melon épluché, c’est bien plus facile à manger, pas vrai ? Eh ben ici c’est pareil. Le BB Code est un melon épluché, tandis que le HTML, c’est le melon de base. Le HTML est donc la base de tout affichage sur le web, et le BB Code n’est qu’une manière simplifiée, par exemple pour vous autres forumeurs, d’afficher du HTML.
Il faut tout bien comprendre qu’en termes d’affichage (parlons de balises plutôt), tout est HTML. Le BB Code est du HTML, mais le HTML n’est pas du BB Code, vous comprenez ?
Bon. Maintenant que je vous ai probablement un peu perdu dans mes exemples à la noix, passons rapidement à une phase pratique.
Ce code affichera une image, dont l’URL aura été mise entre les balises.
![[CODE][HTML]Le code, c'est cool ! Boule1](https://2img.net/h/webarranco.fr/image/boule1.png)
Ici, pareil qu’au-dessus avec mon texte en jaune, vous avez deux manières d’écrire la même chose, en BB Code, et en HTML.
Pour le BB Code, il est suffisant de mettre l’URL de l’image entre deux balises [img], alors que le HTML est déjà un poil plus complexe, puisqu’en plus de mettre des balises![]()
(Notez que les balises en HTML sont faites de < et > et non de [ et ]). Nous allons rapidement décomposer la chose. On peut voir que l’attribut de l’image dans laquelle est inséré l’URL est "src". Pour vous amis anglophones, vous aurez deviné que cela signifie, "source". La source de l’image est donc l’url que vous lui passez, quoi de plus logique ?
Maintenant, passons à une question que vous vous posez probablement. "Si jamais le BB Code est 2 fois plus simple et rapide à utiliser que le HTML, pour j’utiliserai le HTML ?"
C’est une bonne question, jeune internaute féru de questions et avide de savoir ! Eh bien le BB Code n’est qu’une structure de HTML. Cela signifie qu’il n’est supporté que par très peu d’endroits (les forums par exemple), qu’il est extrêmement limité. C’est simplement rendre accessible une infime partie de l’univers du codage à tout le monde. Ce tuto est là en vérité pour vous permettre d’aller plus loin dans l’univers du codage, si vous le souhaitez. Souvenez-vous simplement que le HTML est une norme du web, depuis bien des années déjà.
C’est parti, maintenant que la parlotte a été mise en place, passons au vif du sujet, les balises et leur mise en place. Avant tout, vous avez surement une dernière question : "Mais pourquoi j’apprendrais le HTML ? Je vois pas pourquoi je m’en servirais honnêtement, et en fait ce truc c’est utilité zéro !"
Eh bien la réponse est simplement que vous êtes curieux ! D’un point de vue personnel, la découverte du HTML m’a réellement ébloui, moi qui n’avais jamais codé auparavant. Dites-vous qu’il est possible de tout, absolument tout faire. Vous pourrez créer des sites, aussi beau que vous en voyez sur le net, vous pourrez dire : « C’est moi qui ai fait ce site » et en avoir la fierté si vous voulez, vous pourrez grâce à ce moyen diffuser un contenu qui vous importe particulièrement.
Si par exemple vous avez toujours eu envie de faire votre site de manga personnel, un site de présentation, un site sur les voitures, un site sur une cause qui est importante pour vous, eh bien sachez que vous aurez à apprendre et à aimer le HTML, si bien sûr vous souhaitez quelque chose d’un tant soit peu personnalisé. Car il existe bien le système de blog ou autre, mais vous savez comme moi à quel point ce système est limité. Alors créer son propre site, y’a pas à dire, ça envoie du lourd et genre vraiment sévère !
Ma déclaration d’amour au HTML étant terminée (bon c’est faux, je l’ai à peine commencé mais elle se poursuivra au fur et à mesure de ce tuto), entrons donc (pour la deuxième fois je crois, logique…) dans le vif du sujet.
Commencez-donc par créer un document .txt que vous appellerez par exemple index.txt (le index est de manière générale une norme, mais ne vous souciez pas de la façon dont vous l’appelez, cela importe très peu.)
Changez ensuite l’extension de votre fichier .txt par .html. Vous aurez donc un index.html à la place d’un index.txt.
Ouvrez donc ce fichier à l’aide du bloc note, et écrivez-y ceci :
Voyez en direct la page que produit ce code
Félicitations, vous avez créé votre première page HTML
Si vous voulez voir le résultat, il vous suffit d’ouvrir votre fichier HTML avec cette fois-ci, votre navigateur (peu importe lequel, prenez votre préféré)
Bon, vous avez écrit du code, voir même peut être copié-collé (pas bien
), mais soyons franc, vous n’avez pas compris grand-chose. Nous allons donc décortiquer celui-ci, les crevettes n’ont qu’à bien se tenir !
Ici, l’élément inconnu, c’est ce "p". Eh bien sachez très simplement que p signifie paragraphe. C’est de cette balise que allez entourer un texte. On utilise en général cette balise pour entourer, bah... Un paragraphe
Ici ce n’était donc pas un paragraphe que nous avons entourer, mais en tant que débutants, il vaut mieux que vous commenciez dès maintenant à entourer tous vos textes de cette manière.
Le second élément inconnu était
Premièrement, n’oubliez jamais l’espace entre le br et le /. Ensuite, que fais-donc cette balise ? C’est très simple, elle est ici pour dire "sauter une ligne". Lorsque vous voulez aérer vos textes ou quoique ce soit, utilisez cette balise autant que vous le voulez, vous pouvez en mettre plusieurs à la suite pour sauter plusieurs lignes
Ensuite, la dernière inconnue de cette équation :
Bon, vous aurez très probablement compris même sans mon aide ce que fait cette balise. i comme... Italique ! Eh oui, cette balise met bien en italique, tout comme la balise [i] que vous connaissez, au final ce sont les mêmes.
Plus difficile maintenant. Gardez la page que vous avez écrite telle quelle. Vous allez dans le même dossier que votre "index.html", créez un deuxième fichier identique au premier. Au final, vous allez copier-coller votre premier fichier HTML. Appelez le index2.html.
Ensuite, éditez cet index 2. Changer dans le paragraphe le mot "première" par "seconde".
C’est fait ? Très bien. Revenez sur la première page, et écrivez ceci :
Voyez en direct la page que produit ce code
Ensuite, vous n’avez plus qu’à ouvrir votre index.html dans votre navigateur et voir le résultat. Qu’est-ce qui a changé ? Eh bien vous voilà avec un joli lien tout moche ! Cliquez-dessus, et vous devriez vous retrouvé sur votre index2.html, avec "seconde page" et non "première page" d’écrit !
(Si vous n’avez pas l’effet escompté, il doit y avoir un erreur dans votre code. Relisez le tuto, refaites le, et vous devriez trouver votre erreur. Si ce n’est pas le cas, postez dans ce topic votre problème )
Pour terminer ce chapitre d'introduction, vous avez une première page qui redirige vers la seconde, c'est bien ! Essayer de faire cela dans les deux sens, à savoir que la deuxième page redirige également vers la première, je suis sûr que vous pouvez y arriver
Voyez en direct ce que vous devez faire
La suite de ce tuto, qui parlera des autres possibilités de choses à faire (Nous avons vu ici les paragraphes, les images, les liens) parlera un peu plus des différentes choses que l'on peut faire en HTML, et sa conceptualisation (faites pas gaffe à ce mot compliqué) avant d'attaquer le CSS, qui va nous permettre de rendre notre page un peu moins moche (des couleurs, des tailles, des ombres, des dégradés...)
A bientôt, j'espère que cette courte introduction vous aura plu et vous aura donné envie de voir la suite
PS: Si vous avez des critiques, quelles qu'elles soient, merci de les partager, je prends le négatif et le positif !
Bon tout d’abord, la majorité vont flipper en voyant le mot "code" et vont aller imaginer des trucs méga compliqués (pardonnez-moi, vous tous à qui j’ai mis des codes incompréhensibles de 5 lignes sur la chatbox).
Cela n’est pas du tout l’objet de ce tutoriel, car nous n’allons pas parler de code au sens mathématique du terme, mais plutôt au sens structurel.
Sachez que vous tous qui lisez ce tutoriel, si vous êtes un tant soit peu habitué au forum, vous êtes déjà des codeurs.
- Code:
[color=yellow]J’écris en jaune, c’est marrant ![/color]
J’écris en jaune, c’est marrant !
- Code:
<span style= « color :yellow ; »> J’écris en jaune, c’est marrant !</span>
J’écris en jaune, c’est marrant !
"Mon dieu mais qu’est-ce que tu nous as écrit là
"Eh bien c’est très simple. Sachez que ces deux codes renvoient exactement la même chose. Le premier, que vous utilisez tout le temps sur le forum, est appelé BB Code. Il s’agit en fait d’une version simplifiée du deuxième, qui est lui, du HTML.
Le HTML, vous avez dû le croiser quelque part. Bon en fait, vous le croisez à chaque instant de navigation, allons donc expliquer de quoi ça s’agit !
Etant donné que vous êtes habitué au BB Code, partons de là. Imaginez une part de melon. On est d’accord, vous ne mangez pas la peau, pas vrai ? (Ou alors vous êtes bizarre
) Eh bien nous sommes d’accord, un melon épluché, c’est bien plus facile à manger, pas vrai ? Eh ben ici c’est pareil. Le BB Code est un melon épluché, tandis que le HTML, c’est le melon de base. Le HTML est donc la base de tout affichage sur le web, et le BB Code n’est qu’une manière simplifiée, par exemple pour vous autres forumeurs, d’afficher du HTML.Il faut tout bien comprendre qu’en termes d’affichage (parlons de balises plutôt), tout est HTML. Le BB Code est du HTML, mais le HTML n’est pas du BB Code, vous comprenez ?
Bon. Maintenant que je vous ai probablement un peu perdu dans mes exemples à la noix, passons rapidement à une phase pratique.
- Code:
[img]http://webarranco.fr/img/boule1.png[/img]
Ce code affichera une image, dont l’URL aura été mise entre les balises.
- Code:
<img src="http://webarranco.fr/image/boule1.png"></img>
Ici, pareil qu’au-dessus avec mon texte en jaune, vous avez deux manières d’écrire la même chose, en BB Code, et en HTML.
Pour le BB Code, il est suffisant de mettre l’URL de l’image entre deux balises [img], alors que le HTML est déjà un poil plus complexe, puisqu’en plus de mettre des balises
Maintenant, passons à une question que vous vous posez probablement. "Si jamais le BB Code est 2 fois plus simple et rapide à utiliser que le HTML, pour j’utiliserai le HTML ?"
C’est une bonne question, jeune internaute féru de questions et avide de savoir ! Eh bien le BB Code n’est qu’une structure de HTML. Cela signifie qu’il n’est supporté que par très peu d’endroits (les forums par exemple), qu’il est extrêmement limité. C’est simplement rendre accessible une infime partie de l’univers du codage à tout le monde. Ce tuto est là en vérité pour vous permettre d’aller plus loin dans l’univers du codage, si vous le souhaitez. Souvenez-vous simplement que le HTML est une norme du web, depuis bien des années déjà.
Premier codage en HTML
C’est parti, maintenant que la parlotte a été mise en place, passons au vif du sujet, les balises et leur mise en place. Avant tout, vous avez surement une dernière question : "Mais pourquoi j’apprendrais le HTML ? Je vois pas pourquoi je m’en servirais honnêtement, et en fait ce truc c’est utilité zéro !"
Eh bien la réponse est simplement que vous êtes curieux ! D’un point de vue personnel, la découverte du HTML m’a réellement ébloui, moi qui n’avais jamais codé auparavant. Dites-vous qu’il est possible de tout, absolument tout faire. Vous pourrez créer des sites, aussi beau que vous en voyez sur le net, vous pourrez dire : « C’est moi qui ai fait ce site » et en avoir la fierté si vous voulez, vous pourrez grâce à ce moyen diffuser un contenu qui vous importe particulièrement.
Si par exemple vous avez toujours eu envie de faire votre site de manga personnel, un site de présentation, un site sur les voitures, un site sur une cause qui est importante pour vous, eh bien sachez que vous aurez à apprendre et à aimer le HTML, si bien sûr vous souhaitez quelque chose d’un tant soit peu personnalisé. Car il existe bien le système de blog ou autre, mais vous savez comme moi à quel point ce système est limité. Alors créer son propre site, y’a pas à dire, ça envoie du lourd et genre vraiment sévère !
Ma déclaration d’amour au HTML étant terminée (bon c’est faux, je l’ai à peine commencé mais elle se poursuivra au fur et à mesure de ce tuto), entrons donc (pour la deuxième fois je crois, logique…) dans le vif du sujet.
Commencez-donc par créer un document .txt que vous appellerez par exemple index.txt (le index est de manière générale une norme, mais ne vous souciez pas de la façon dont vous l’appelez, cela importe très peu.)
Changez ensuite l’extension de votre fichier .txt par .html. Vous aurez donc un index.html à la place d’un index.txt.
Ouvrez donc ce fichier à l’aide du bloc note, et écrivez-y ceci :
- Code:
<p>Voici ma première page HTML !</p>
<br />
<i>Bon c’est pas forcément ma première en fait, mais je suis content quand même.</i>
Voyez en direct la page que produit ce code
Félicitations, vous avez créé votre première page HTML
Si vous voulez voir le résultat, il vous suffit d’ouvrir votre fichier HTML avec cette fois-ci, votre navigateur (peu importe lequel, prenez votre préféré)
Bon, vous avez écrit du code, voir même peut être copié-collé (pas bien
), mais soyons franc, vous n’avez pas compris grand-chose. Nous allons donc décortiquer celui-ci, les crevettes n’ont qu’à bien se tenir !- Code:
<p>Voici ma première page HTML !</p>
Ici, l’élément inconnu, c’est ce "p". Eh bien sachez très simplement que p signifie paragraphe. C’est de cette balise que allez entourer un texte. On utilise en général cette balise pour entourer, bah... Un paragraphe
Ici ce n’était donc pas un paragraphe que nous avons entourer, mais en tant que débutants, il vaut mieux que vous commenciez dès maintenant à entourer tous vos textes de cette manière.
Le second élément inconnu était
- Code:
<br />
Premièrement, n’oubliez jamais l’espace entre le br et le /. Ensuite, que fais-donc cette balise ? C’est très simple, elle est ici pour dire "sauter une ligne". Lorsque vous voulez aérer vos textes ou quoique ce soit, utilisez cette balise autant que vous le voulez, vous pouvez en mettre plusieurs à la suite pour sauter plusieurs lignes
Ensuite, la dernière inconnue de cette équation :
- Code:
<i>Bon c’est pas forcément ma première en fait, mais je suis content quand même.</i>
Bon, vous aurez très probablement compris même sans mon aide ce que fait cette balise. i comme... Italique ! Eh oui, cette balise met bien en italique, tout comme la balise [i] que vous connaissez, au final ce sont les mêmes.
Plus difficile maintenant. Gardez la page que vous avez écrite telle quelle. Vous allez dans le même dossier que votre "index.html", créez un deuxième fichier identique au premier. Au final, vous allez copier-coller votre premier fichier HTML. Appelez le index2.html.
Ensuite, éditez cet index 2. Changer dans le paragraphe le mot "première" par "seconde".
C’est fait ? Très bien. Revenez sur la première page, et écrivez ceci :
- Code:
<a href="index2.html">Lien vers ma seconde page</a>
Voyez en direct la page que produit ce code
Ensuite, vous n’avez plus qu’à ouvrir votre index.html dans votre navigateur et voir le résultat. Qu’est-ce qui a changé ? Eh bien vous voilà avec un joli lien tout moche ! Cliquez-dessus, et vous devriez vous retrouvé sur votre index2.html, avec "seconde page" et non "première page" d’écrit !
(Si vous n’avez pas l’effet escompté, il doit y avoir un erreur dans votre code. Relisez le tuto, refaites le, et vous devriez trouver votre erreur. Si ce n’est pas le cas, postez dans ce topic votre problème
)Pour terminer ce chapitre d'introduction, vous avez une première page qui redirige vers la seconde, c'est bien ! Essayer de faire cela dans les deux sens, à savoir que la deuxième page redirige également vers la première, je suis sûr que vous pouvez y arriver
Voyez en direct ce que vous devez faire
La suite de ce tuto, qui parlera des autres possibilités de choses à faire (Nous avons vu ici les paragraphes, les images, les liens) parlera un peu plus des différentes choses que l'on peut faire en HTML, et sa conceptualisation (faites pas gaffe à ce mot compliqué) avant d'attaquer le CSS, qui va nous permettre de rendre notre page un peu moins moche (des couleurs, des tailles, des ombres, des dégradés...)
A bientôt, j'espère que cette courte introduction vous aura plu et vous aura donné envie de voir la suite
PS: Si vous avez des critiques, quelles qu'elles soient, merci de les partager, je prends le négatif et le positif !
Dernière édition par Gear 2nd le Mer 26 Avr - 21:24, édité 4 fois
Gear 2nd- La vitesse divine
-
Nombre de messages : 4858
Age : 30
Groupe :
Date d'inscription : 20/02/2010 -
Re: [CODE][HTML]Le code, c'est cool !
par Samael Ven 15 Aoû - 1:29
Pas mal Gear !
J'ai toujours entendu parler du HTML sans vraiment savoir de quoi il s'agissait et comme je ne suis pas si curieux que tu sembles le penser, je ne m'étais jamais penché sur le sujet.
Donc j'ai trouvé ton tuto vraiment intéressant. Tu ne feras sans doute jamais de moi un grand codeur, mais tu as réussi à étoffer ma culture. Je trouve que ton tuto est bien réalisé, car il est très clair, ce qui est la principale qualité qu'on lui demande. Même moi qui n'y connait rien, j'ai (à peu près) tout compris.
Donc merci pour ce tuto et je lirais certainement les suivants si tu en fais.
J'ai toujours entendu parler du HTML sans vraiment savoir de quoi il s'agissait et comme je ne suis pas si curieux que tu sembles le penser, je ne m'étais jamais penché sur le sujet.
Donc j'ai trouvé ton tuto vraiment intéressant. Tu ne feras sans doute jamais de moi un grand codeur, mais tu as réussi à étoffer ma culture. Je trouve que ton tuto est bien réalisé, car il est très clair, ce qui est la principale qualité qu'on lui demande. Même moi qui n'y connait rien, j'ai (à peu près) tout compris.
Donc merci pour ce tuto et je lirais certainement les suivants si tu en fais.
Samael- Coléoptère
-
Nombre de messages : 4195
Age : 33
Groupe :
Date d'inscription : 03/10/2009
Re: [CODE][HTML]Le code, c'est cool !
par Tsubasaki Ven 15 Aoû - 10:37
Voir ton tuto m'a donné envie de m'y remettre tiens, c'est drôle ce qu'on peut faire avec un codage aussi simple 
Tsubasaki- Ange perverse
-
Nombre de messages : 21454
Age : 40
Groupe :
Date d'inscription : 21/10/2008
Re: [CODE][HTML]Le code, c'est cool !
par Mayoua Lun 18 Aoû - 2:28
Wow ! J'adore !
ça a l'air méga cool !
C'est aussi très bien expliqué, merci Gearou !
Tout ce que je veux, c'est une suite !
Mayoua- Mini-Démon
-
Nombre de messages : 3460
Age : 25
Groupe :
Date d'inscription : 20/06/2012
Re: [CODE][HTML]Le code, c'est cool !
par Dada Lun 18 Aoû - 7:30
Très bien expliqué ! 
J'ai une fois voulu habiller un post rpg avec un code HTML (avec les div et tout), mais j'y suis pas arrivé. Le code s'affichait très bien dans le navigateur, mais sur le forum et dans un post le résultat n'était pas vraiment comme je pouvais le voir dans le navigateur. J'avais surement fait une erreur.
J'espère qu'il y a une solution et que tu l'expliqueras également. ^^
J'ai une fois voulu habiller un post rpg avec un code HTML (avec les div et tout), mais j'y suis pas arrivé. Le code s'affichait très bien dans le navigateur, mais sur le forum et dans un post le résultat n'était pas vraiment comme je pouvais le voir dans le navigateur. J'avais surement fait une erreur.
J'espère qu'il y a une solution et que tu l'expliqueras également. ^^
Dada- Vastolorde
-
Nombre de messages : 2334
Age : 32
Groupe :
Date d'inscription : 11/11/2010
Re: [CODE][HTML]Le code, c'est cool !
par Und3r Lun 18 Aoû - 17:41
Je rejoins les autres, ton tuto est agréable Gear.
Pour l'instant je maitrise mais je lirai la suite avec plaisir.
Pour l'instant je maitrise mais je lirai la suite avec plaisir.
Und3r- Vastolorde
-
Nombre de messages : 2105
Age : 21
Groupe :
Date d'inscription : 19/02/2013
Re: [CODE][HTML]Le code, c'est cool !
par Gear 2nd Lun 18 Aoû - 22:29
Bonjour à tous
Déjà, merci beaucoup pour vos commentaires, ça me fait plaisir et c'est extrêmement motivant pour faire une suite
Avant de continuer ce tutoriel, je souhaite simplement rappeller qu'il s'agit ici d'une découverte qui se fera surtout selon mon point de vue, et non d'un apprentissage. Je pense que si certains veulent donner suite à mes tutos et se mettre plus sérieusement au HTML, ils seront très bien servis par l'excellent et complet tuto d'OpenClassrooms sur le HTML5
Ceci étant dit, continuons donc ce tuto, et attaquons sans plus attendre la structure du HTML
Vous avez probablement déjà entendu parler du concept de "div" en HTML, par exemple dans le post de Dada au-dessus, mais sans comprendre vraiment le concept qui se cachait derrière.
Il faut savoir que la structure d'une page HTML se fait selon un système d’emboîtement. Ne paniquez pas, c'est très facile à comprendre, ça marche exactement de la même façon que les poupées russes.
Une div est donc une boîte qui va s’emboîter dans une autre, puis dans une autre, puis dans une autre, etc...
Je vous ai fais un petit exemple concret pour que vous compreniez : Cliquer sur ce lien pour le voir
Les jolies couleurs
Vous pouvez donc apercevoir 4 couleurs différentes, ce qui signifie, 4 boites.
La première, la boîte rouge, englobe le tout. On voit bien que toutes les autres boites sont à l'intérieur de la rouge. Ensuite, la boite verte est à l'intérieur de la rouge. Pour finir, les boites bleue et jaune sont à l'intérieur de la verte, en étant cependant côte à côte.
Comme vous l'avez compris, ce système de boite est très très important à comprendre, vous ne pourrez jamais coder quelque chose de fonctionnel sans l'avoir pleinement saisi
Pour bien faire rentrer le concept, nous allons pas à pas faire un tuto pratique de la chose, en construisant, hum je ne sais pas... Un post de forum tiens !
Avant toute chose, n'oubliez pas de recréer une page html. Appellez-la par exemple "post.html".
Tout d'abord, le plus important, on créé notre div globale.
Ne faites pas attention à l'attribut "class" de la div, gardez simplement à l'esprit que nous allons mettre une "class" à toutes nos divs en fonction de leur utilité (vu qu'ici c'est la boite qui englobe toutes les autres, on va l’appeler "post", donc class="post").
Ceci fait, c'est le moment de tailler dans le gras ! (Désolé pour les végétariens qui liront ce tuto). Nous allons mettre en place la liste des éléments nécessaires à un post :
Si on arrive à faire tout ça, c'est déjà très bien !
Voilà donc ce que ça pourrait donner (je vous fourni intentionnellement une image pour que vous recopiez le code vous-même, car copier-coller est réellement un frein à l'apprentissage
)
Si vous avez recopié ce code, vous vous êtes rendu compte d'une chose... Il n'affiche rien ! Non non, il n'y pas d'erreur, c'est juste que l'architecture s'est bien mise en place, mais qu'il n'y a encore aucun contenu sur la page !
Nous allons donc écrire diverses choses au hasard, ce qui par exemple peut donner :
Voir en direct le résultat du code
On peut remarquer plusieurs choses. Tout d'abord, la page n'a aucun style. Elle se contente d'afficher du texte noir sur fond blanc avec une police très laide, ainsi que l'image qu'on lui a dit d'afficher. Rien n'est placé dans la page, et pour l'instant c'est tout à fait normal. Mais au moins, on a bien tous nos éléments qui sont là.
Second problème, on peut voir que les caractères spéciaux (les accents etc...) ne sont pas écrits et à la place, on a un vieux truc bizarre. En fait c'est très simple. Nous n'avons pas spécifié dans quelle "langue" nous voulions notre page. Alors forcément, le navigateur ne comprend rien du tout. Nous allons donc lui donner une langue, qu'on appelle plutôt encodage, qui sera universelle et qui va prendre nos accents et les afficher sans broncher.
Note: Le terme d'encodage se retrouve dans tout le domaine du multimédia. Une vidéo MP4 par exemple est encodée en MPEG4, c'est pour ça que vous pourrez parfois avoir des problèmes de compatibilités entre différents supports (Lecteurs DVD, Télé, PC). Sachez qu'une image, une video, un site web, tout subit un encodage. Dans le cadre de notre tuto sur le HTML, on peut comparer ça à une langue
Pour encoder notre page de façon claire, précise, et de sorte à ce qu'elle ne nous embête plus, nous allons écrire :
Voir en direct le résultat bien encodé
Comme vous pouvez le voir, c'est tout beau
On a donc supprimé les problèmes d'accent, et rendu le texte parfaitement traduit. Désormais, nous avons le corps de la page.
QUOI ???? ENCORE UN NOUVEAU LANGAGE !!??
Eeh ouais ! Mais il n'y a pas de soucis à se faire, sachez qu'en vérité, le HTML et le CSS sont complémentaires et presque indissociables. Vous ne verrez jamais une page HTML sans CSS (ou alors le CSS a crashé). J'aime souvent à dire que le HTML ressemble pour une page au squelette d'un corps humain (big up à Mayou la sadique
) tandis que le CSS lui, c'est le reste qui habille ce corps, la peau, toussa...
Donc au final, un squelette est toujours nécessaire, et l'habillage arrive avec. Voici dès maintenant un exemple.
Vous allez créer une page "styles.css" de la même manière que votre page HTML. En gros, vous créez un nouveau fichier .txt dont vous allez changer l'extension en .css. Souvenez vous bien que tout est question d'extension, .html, .css, .txt...
Une fois votre fichier "styles.css" créé, écrivez-y ceci à l'intérieur :
Si vous trouvez ça bizarre que ça soit écrit sur plusieurs lignes, sachez que c'est normal, c'est juste une habitude des codeurs qui aiment bien avoir leurs codes aérés. On s'y retrouve bien mieux dans un code aéré je trouve, et je vous souhaite de le faire également, c'est une bonne habitude à prendre. Mais ne vous en faites pas, vous pouvez également écrire cela :
Vous aurez exactement le même résultat.
Ensuite, dans votre page post.html qui contient votre page de forum, vous allez ajouter :
Vous avez beaucoup d'informations d'un coup, mais ne vous en faites pas, nous reviendrons sur chacune point par point. Une fois que vous avez écrit ça en dessous de votre balise meta, vous avez un code qui ressemble à ceci :
Note: Pour ceux qui se demandent pourquoi mon code est coloré et pas le votre, c'est simple, en tant que codeur j'utilise un logiciel particulier. A votre niveau, contentez-vous du bloc-notes pour l'instant, et vous passerez à la colorisation syntaxique sur le prochain tuto
Cela étant dit, actualisez votre page. Vous avez normalement quelque chose comme ça : Lien de la page avec le CSS
C'est tout bleuuu
Bon et tout moche, on va pas se mentir, c'est très laid
Premièrement, regardez la balise que l'on a rajouté dans le HTML. Vous pouvez deviner à quoi elle sert, pas vrai ? En fait, il s'agit d'une balise qui effectue un lien, une liaison (link = lien en anglais) avec autre chose. Ici donc, nous effectuons une liaison entre notre page HTML, et notre fichier CSS.
Cela étant -à peu près- clair, passons au CSS une bonne fois pour toutes !
Le CSS est un langage qui utilise un système de sélection. Je vais vous poster une question très simple. Je veux que seul mon titre du message ait un fond bleu. Comment je fais ? C'est simple, on effectue une sélection ! Sur l'exemple actuel, vous pouvez voir que nous avons mis un fond bleu (background: blue; ) à toutes les div, donc à toutes les boites. Il est donc logique que le fond bleu soit partout.
Vous voyez donc qu'en mettant un fond bleu pour une div, on ne peut pas sélectionner la div que l'on souhaite. Vu que l'on a spécifié le fond bleu pour les div de manière générale, celui-ci va se mettre derrière TOUTES les div de la page. Cela n'est bien évidemment pas ce que l'on souhaite. C'est là qu'entrent en piste les class HTML.
Et là, EUREKA ! Vous vous souvenez avoir vu le mot class quelque part non ? Mais si rooh, regardez !
Nous avons donné la class "titre" à notre titre. La class "date" à notre date, etc... Nous n'avons pas fait cela pour rien, au contraire ! Ainsi, nous pouvons sans problème sélectionner nos éléments de manière totalement indépendante ! Essayons de mettre le fond bleu uniquement sur le titre.
Voir le résultat du titre avec fond bleu
Comme vous pouvez le voir, nous avons bien mis le fond bleu uniquement pour le titre cette fois, les autres sont peinards. Qu'est ce qui s'est passé ? Nous avons enlevé la sélection des div, et nous avons mis une sélection de la classe "titre". En fait, le point (".") rajouté devant "titre" signifique qu'il s'agit de la sélection d'une class. Avec ".titre", on sélectionne donc la class "titre". C'est donc pour ça que nous avons un titre avec un fond bleu.
Maintenant, vous devez commencez à voir un peu comment on peut s'amuser avec le CSS. Je vais construire une petite page sympa en vous donnant un peu de code, mais l'idéal serait que vous en fassiez une différente, en regardant un peu ce que j'utilise.
Je sais, vous avez halluciné en voyant ce code. Malheureusement, je vous ai expliqué la théorie et le principe. Vous avez des explications à côté de chaque ligne, c'est à vous de faire des tests au fur et à mesure maintenant ! Encore une fois, n'hésitez pas à poster votre moindre problème sur ce topic
Résultat de l'avalanche de code
Voici la fin de ce second tutoriel, la prochaine fois, du CSS un peu plus avancé, et on terminera la mise en page de notre post !
A toute, et encore une fois, n'hésitez pas à commenter en bien et en mal
Déjà, merci beaucoup pour vos commentaires, ça me fait plaisir et c'est extrêmement motivant pour faire une suite
Avant de continuer ce tutoriel, je souhaite simplement rappeller qu'il s'agit ici d'une découverte qui se fera surtout selon mon point de vue, et non d'un apprentissage. Je pense que si certains veulent donner suite à mes tutos et se mettre plus sérieusement au HTML, ils seront très bien servis par l'excellent et complet tuto d'OpenClassrooms sur le HTML5
Ceci étant dit, continuons donc ce tuto, et attaquons sans plus attendre la structure du HTML
Vous avez probablement déjà entendu parler du concept de "div" en HTML, par exemple dans le post de Dada au-dessus, mais sans comprendre vraiment le concept qui se cachait derrière.
Il faut savoir que la structure d'une page HTML se fait selon un système d’emboîtement. Ne paniquez pas, c'est très facile à comprendre, ça marche exactement de la même façon que les poupées russes.
Une div est donc une boîte qui va s’emboîter dans une autre, puis dans une autre, puis dans une autre, etc...
Je vous ai fais un petit exemple concret pour que vous compreniez : Cliquer sur ce lien pour le voir
Les jolies couleurs
Vous pouvez donc apercevoir 4 couleurs différentes, ce qui signifie, 4 boites.
La première, la boîte rouge, englobe le tout. On voit bien que toutes les autres boites sont à l'intérieur de la rouge. Ensuite, la boite verte est à l'intérieur de la rouge. Pour finir, les boites bleue et jaune sont à l'intérieur de la verte, en étant cependant côte à côte.
- Il faut retenir de tout ça que :
- Le HTML est un langage structuré
- Le HTML se construit par une imbrication de différentes boites dans la page
- Gardez à l'esprit que chaque boite est une personne dans un arbre généalogique, c'est beaucoup plus simple à comprendre ainsi
- Chaque boite a des éléments parents (la div rouge est le parent des toutes les autres divs, tandis que la div verte est la parent des divs bleues et jaunes).
- Lorsqu'on parle de div, on parle de boite
Comme vous l'avez compris, ce système de boite est très très important à comprendre, vous ne pourrez jamais coder quelque chose de fonctionnel sans l'avoir pleinement saisi
Pour bien faire rentrer le concept, nous allons pas à pas faire un tuto pratique de la chose, en construisant, hum je ne sais pas... Un post de forum tiens !
Avant toute chose, n'oubliez pas de recréer une page html. Appellez-la par exemple "post.html".
Tout d'abord, le plus important, on créé notre div globale.
Ne faites pas attention à l'attribut "class" de la div, gardez simplement à l'esprit que nous allons mettre une "class" à toutes nos divs en fonction de leur utilité (vu qu'ici c'est la boite qui englobe toutes les autres, on va l’appeler "post", donc class="post").
Ceci fait, c'est le moment de tailler dans le gras ! (Désolé pour les végétariens qui liront ce tuto). Nous allons mettre en place la liste des éléments nécessaires à un post :
- Un titre
- Une date
- Un pseudo
- Un avatar
- Un message
Si on arrive à faire tout ça, c'est déjà très bien !
Voilà donc ce que ça pourrait donner (je vous fourni intentionnellement une image pour que vous recopiez le code vous-même, car copier-coller est réellement un frein à l'apprentissage
)Si vous avez recopié ce code, vous vous êtes rendu compte d'une chose... Il n'affiche rien ! Non non, il n'y pas d'erreur, c'est juste que l'architecture s'est bien mise en place, mais qu'il n'y a encore aucun contenu sur la page !
Nous allons donc écrire diverses choses au hasard, ce qui par exemple peut donner :
Voir en direct le résultat du code
On peut remarquer plusieurs choses. Tout d'abord, la page n'a aucun style. Elle se contente d'afficher du texte noir sur fond blanc avec une police très laide, ainsi que l'image qu'on lui a dit d'afficher. Rien n'est placé dans la page, et pour l'instant c'est tout à fait normal. Mais au moins, on a bien tous nos éléments qui sont là.
Second problème, on peut voir que les caractères spéciaux (les accents etc...) ne sont pas écrits et à la place, on a un vieux truc bizarre. En fait c'est très simple. Nous n'avons pas spécifié dans quelle "langue" nous voulions notre page. Alors forcément, le navigateur ne comprend rien du tout. Nous allons donc lui donner une langue, qu'on appelle plutôt encodage, qui sera universelle et qui va prendre nos accents et les afficher sans broncher.
Note: Le terme d'encodage se retrouve dans tout le domaine du multimédia. Une vidéo MP4 par exemple est encodée en MPEG4, c'est pour ça que vous pourrez parfois avoir des problèmes de compatibilités entre différents supports (Lecteurs DVD, Télé, PC). Sachez qu'une image, une video, un site web, tout subit un encodage. Dans le cadre de notre tuto sur le HTML, on peut comparer ça à une langue
Pour encoder notre page de façon claire, précise, et de sorte à ce qu'elle ne nous embête plus, nous allons écrire :
Voir en direct le résultat bien encodé
Comme vous pouvez le voir, c'est tout beau
On a donc supprimé les problèmes d'accent, et rendu le texte parfaitement traduit. Désormais, nous avons le corps de la page.
Le CSS, que la couleur soit !
QUOI ???? ENCORE UN NOUVEAU LANGAGE !!??
Eeh ouais ! Mais il n'y a pas de soucis à se faire, sachez qu'en vérité, le HTML et le CSS sont complémentaires et presque indissociables. Vous ne verrez jamais une page HTML sans CSS (ou alors le CSS a crashé). J'aime souvent à dire que le HTML ressemble pour une page au squelette d'un corps humain (big up à Mayou la sadique
) tandis que le CSS lui, c'est le reste qui habille ce corps, la peau, toussa...Donc au final, un squelette est toujours nécessaire, et l'habillage arrive avec. Voici dès maintenant un exemple.
Vous allez créer une page "styles.css" de la même manière que votre page HTML. En gros, vous créez un nouveau fichier .txt dont vous allez changer l'extension en .css. Souvenez vous bien que tout est question d'extension, .html, .css, .txt...
Une fois votre fichier "styles.css" créé, écrivez-y ceci à l'intérieur :
Si vous trouvez ça bizarre que ça soit écrit sur plusieurs lignes, sachez que c'est normal, c'est juste une habitude des codeurs qui aiment bien avoir leurs codes aérés. On s'y retrouve bien mieux dans un code aéré je trouve, et je vous souhaite de le faire également, c'est une bonne habitude à prendre. Mais ne vous en faites pas, vous pouvez également écrire cela :
Vous aurez exactement le même résultat.
Ensuite, dans votre page post.html qui contient votre page de forum, vous allez ajouter :
Vous avez beaucoup d'informations d'un coup, mais ne vous en faites pas, nous reviendrons sur chacune point par point. Une fois que vous avez écrit ça en dessous de votre balise meta, vous avez un code qui ressemble à ceci :
Note: Pour ceux qui se demandent pourquoi mon code est coloré et pas le votre, c'est simple, en tant que codeur j'utilise un logiciel particulier. A votre niveau, contentez-vous du bloc-notes pour l'instant, et vous passerez à la colorisation syntaxique sur le prochain tuto
Cela étant dit, actualisez votre page. Vous avez normalement quelque chose comme ça : Lien de la page avec le CSS
C'est tout bleuuu
Bon et tout moche, on va pas se mentir, c'est très laid
Premièrement, regardez la balise que l'on a rajouté dans le HTML. Vous pouvez deviner à quoi elle sert, pas vrai ? En fait, il s'agit d'une balise qui effectue un lien, une liaison (link = lien en anglais) avec autre chose. Ici donc, nous effectuons une liaison entre notre page HTML, et notre fichier CSS.
Cela étant -à peu près- clair, passons au CSS une bonne fois pour toutes !
Le CSS est un langage qui utilise un système de sélection. Je vais vous poster une question très simple. Je veux que seul mon titre du message ait un fond bleu. Comment je fais ? C'est simple, on effectue une sélection ! Sur l'exemple actuel, vous pouvez voir que nous avons mis un fond bleu (background: blue; ) à toutes les div, donc à toutes les boites. Il est donc logique que le fond bleu soit partout.
Vous voyez donc qu'en mettant un fond bleu pour une div, on ne peut pas sélectionner la div que l'on souhaite. Vu que l'on a spécifié le fond bleu pour les div de manière générale, celui-ci va se mettre derrière TOUTES les div de la page. Cela n'est bien évidemment pas ce que l'on souhaite. C'est là qu'entrent en piste les class HTML.
Les Class
Et là, EUREKA ! Vous vous souvenez avoir vu le mot class quelque part non ? Mais si rooh, regardez !
Nous avons donné la class "titre" à notre titre. La class "date" à notre date, etc... Nous n'avons pas fait cela pour rien, au contraire ! Ainsi, nous pouvons sans problème sélectionner nos éléments de manière totalement indépendante ! Essayons de mettre le fond bleu uniquement sur le titre.
Voir le résultat du titre avec fond bleu
Comme vous pouvez le voir, nous avons bien mis le fond bleu uniquement pour le titre cette fois, les autres sont peinards. Qu'est ce qui s'est passé ? Nous avons enlevé la sélection des div, et nous avons mis une sélection de la classe "titre". En fait, le point (".") rajouté devant "titre" signifique qu'il s'agit de la sélection d'une class. Avec ".titre", on sélectionne donc la class "titre". C'est donc pour ça que nous avons un titre avec un fond bleu.
Maintenant, vous devez commencez à voir un peu comment on peut s'amuser avec le CSS. Je vais construire une petite page sympa en vous donnant un peu de code, mais l'idéal serait que vous en fassiez une différente, en regardant un peu ce que j'utilise.
- Spoiler:
Je sais, vous avez halluciné en voyant ce code. Malheureusement, je vous ai expliqué la théorie et le principe. Vous avez des explications à côté de chaque ligne, c'est à vous de faire des tests au fur et à mesure maintenant ! Encore une fois, n'hésitez pas à poster votre moindre problème sur ce topic
Résultat de l'avalanche de code
Voici la fin de ce second tutoriel, la prochaine fois, du CSS un peu plus avancé, et on terminera la mise en page de notre post !
A toute, et encore une fois, n'hésitez pas à commenter en bien et en mal
Dernière édition par Gear 2nd le Sam 5 Mar - 13:33, édité 3 fois
Gear 2nd- La vitesse divine
-
Nombre de messages : 4858
Age : 30
Groupe :
Date d'inscription : 20/02/2010 -
Re: [CODE][HTML]Le code, c'est cool !
par Dada Kaboom Lun 18 Aoû - 22:39
Super long mais très complet depuis que tu l'as fait je les lu en 3, 4 parties :hypnose:
Mais au moins voilà je suis quelque peu calé sur le sujet
Une petite question pour toi : Quel est la différence entre le Javascript et HTML ?
Mais au moins voilà je suis quelque peu calé sur le sujet
Une petite question pour toi : Quel est la différence entre le Javascript et HTML ?
Dada Kaboom- Maître Pokemon
-
Nombre de messages : 3165
Age : 29
Groupe :
Date d'inscription : 25/10/2011
Re: [CODE][HTML]Le code, c'est cool !
par Gear 2nd Lun 18 Aoû - 22:53
Comme je l'ai dit, le HTML est donc un langage dit de balisage, ou encore de description. Il va donc servir au corps de la page
Le HTML va générer de manière générale les éléments que tu vois sur la page, sans aucun style, aucune couleur, aucun effet visuel, juste des blocs que tu va aligner à ta sauce et que tu va imbriquer.
Le Javascript est totalement différent puisqu'il s'agit d'un langage dit "de programmation". C'est un langage de code au sens mathématique du terme.
Il va te permettre de modeler l'HTML comme tu le souhaite, de créer du HTML de manière dynamique même. Il va te permettre de faire des effets sur ta page, d'assurer une fluidité par exemple, de récupérer des informations, d'en insérer dans la page sans avoir à la réactualiser.
Les possibilités du Javascript sont réellement énormes, et on peut pas vraiment le décrire. Mais sache que le HTML va présenter ta page, la construire, et que le Javascript va la modeler pour en faire réellement ce que tu veux avec toutes tes fantaisies
Le HTML va générer de manière générale les éléments que tu vois sur la page, sans aucun style, aucune couleur, aucun effet visuel, juste des blocs que tu va aligner à ta sauce et que tu va imbriquer.
Le Javascript est totalement différent puisqu'il s'agit d'un langage dit "de programmation". C'est un langage de code au sens mathématique du terme.
Il va te permettre de modeler l'HTML comme tu le souhaite, de créer du HTML de manière dynamique même. Il va te permettre de faire des effets sur ta page, d'assurer une fluidité par exemple, de récupérer des informations, d'en insérer dans la page sans avoir à la réactualiser.
Les possibilités du Javascript sont réellement énormes, et on peut pas vraiment le décrire. Mais sache que le HTML va présenter ta page, la construire, et que le Javascript va la modeler pour en faire réellement ce que tu veux avec toutes tes fantaisies
Gear 2nd- La vitesse divine
-
Nombre de messages : 4858
Age : 30
Groupe :
Date d'inscription : 20/02/2010 -
Re: [CODE][HTML]Le code, c'est cool !
par Monkey D Kurama Ven 7 Nov - 12:13
Salut Gear !
J'ai lu tout ton tuto et j'ai bien sûr fait une magnifique page web
http://hpics.li/75a01c5
Bon après j'ai eu quelque chose de bizarre avec l'encodage. Lorsqu'il n'y est pas il n'y a aucun problème (Le lien au dessus il n'y est pas) mais dès que je le mets les caractères spéciaux ne sont plus affichés normalement. Tu sais ce que ça peut être ?
Voici le doc html
Voici le rendu
Enfin, ceci dit magnifique tuto. Super clair, super facile à suivre et super bien structuré. En un mot : Suuuuuuuuper
Merci à toi, je ferai sûrement la suite lorsque tu la posteras .
J'ai lu tout ton tuto et j'ai bien sûr fait une magnifique page web
http://hpics.li/75a01c5
Bon après j'ai eu quelque chose de bizarre avec l'encodage. Lorsqu'il n'y est pas il n'y a aucun problème (Le lien au dessus il n'y est pas) mais dès que je le mets les caractères spéciaux ne sont plus affichés normalement. Tu sais ce que ça peut être ?
Voici le doc html
Voici le rendu
Enfin, ceci dit magnifique tuto. Super clair, super facile à suivre et super bien structuré. En un mot : Suuuuuuuuper
Merci à toi, je ferai sûrement la suite lorsque tu la posteras .
Monkey D Kurama- Flemmard émérite
-
Nombre de messages : 1333
Age : 29
Groupe :
Date d'inscription : 21/06/2012
Re: [CODE][HTML]Le code, c'est cool !
par daoudienforce Ven 7 Nov - 18:53
Pinkfloyd: Essaye en mettant ta balise meta ainsi que le link dans la balise head
Exemple:
Exemple:
- Spoiler:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Blabla</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
...
...
</body>
</html>
daoudienforce- Gardien Vongola
-
Nombre de messages : 623
Age : 30
Groupe :
Date d'inscription : 25/12/2011 -
Re: [CODE][HTML]Le code, c'est cool !
par Gear 2nd Ven 7 Nov - 19:10
Effectivement c'est totalement ma faute 
Je n'ai pas parlé des balises html, head et body par peur de perdre les utilisateurs avec des informations supplémentaires.
Dans la partie suivante du tuto je vous expliquerai cette nomenclature plus en détail
Ce qu'il faut savoir, c'est qu'un document HTML bien structuré commence toujours par:
Ensuite, un document html, même s'il marche sans cela, doit en général se trouve totalement entre des balises html.
Ensuite et pour finir rapidement, la balise html, qui est le corps de la page, possède deux enfants qui vont nous servir.
Le head (littéralement, l'entête), va contenir le title de la page (Le titre que vous voyez en haut dans les onglets), ainsi que la balise link qui lie la feuille de style à la page, ainsi que les balises meta.
Le body (littéralement, le corps) va être affublé de tout le code HTML qui va s'afficher sur la page.
La nomenclature de daoudienforce est donc très bonne !
En gros, tout le code que tu as écrit Kura, à part la balise link et meta, va se trouver dans le body
Merci à toi daoudien !
Je n'ai pas parlé des balises html, head et body par peur de perdre les utilisateurs avec des informations supplémentaires.
Dans la partie suivante du tuto je vous expliquerai cette nomenclature plus en détail
Ce qu'il faut savoir, c'est qu'un document HTML bien structuré commence toujours par:
- Code:
<!DOCTYPE HTML>
Ensuite, un document html, même s'il marche sans cela, doit en général se trouve totalement entre des balises html.
- Code:
<html>
</html>
Ensuite et pour finir rapidement, la balise html, qui est le corps de la page, possède deux enfants qui vont nous servir.
- Code:
<head>
</head>
<body>
</body>
Le head (littéralement, l'entête), va contenir le title de la page (Le titre que vous voyez en haut dans les onglets), ainsi que la balise link qui lie la feuille de style à la page, ainsi que les balises meta.
Le body (littéralement, le corps) va être affublé de tout le code HTML qui va s'afficher sur la page.
La nomenclature de daoudienforce est donc très bonne !
En gros, tout le code que tu as écrit Kura, à part la balise link et meta, va se trouver dans le body
Merci à toi daoudien !
Gear 2nd- La vitesse divine
-
Nombre de messages : 4858
Age : 30
Groupe :
Date d'inscription : 20/02/2010 -
Re: [CODE][HTML]Le code, c'est cool !
par Gear 2nd Sam 7 Fév - 14:07
Salut à tous
Ca fait un moment que j'ai pas continué ce tuto, il est temps de reprendre !
Nous avons vu en premier lieu les bases du HTML, puis en second lieu les bases du CSS.
J'ai hésité à continuer à approfondir ces langages, mais au final je ne le ferais que si certains d'entre vous le demande ou en ressentent le besoin. Par ailleurs, le but de ce tutoriel est avant tout de s'initier au code, non d'aller très loin dans son apprentissage
Je vous conseille le site très bien réalisé d'OpenClassrooms pour vraiment approfondir tout ça : http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3
Nous allons donc aujourd'hui voir...
Pour certains (beaucoup je pense), le concept de Javascript est un mystère total, ou bien un lointain souvenir entendu quelque part. Et c'est tant mieux, car je vais partir de zéro pour essayer de vous l'expliquer au mieux
Si tout ça n'est pas très clair dans vos esprits, je vous invite à repasser sur les tutos précédents pour bien saisir
De manière générale, le Javascript est un langage qui se révèle plus complexe que les 2 autres, et qui s'apprend toujours après ! Vous avez donc de la chance
AVANT DE COMMENCER !
Vous devez commencer à en avoir marre d'utiliser votre bloc-notes pour écrire du code, c'est vraiment pas pratique à partir d'un certain moment.
Je vous présente Notepad++, un éditeur de texte, comme Word, Office, ou le Bloc Notes, mais spécialisé pour coloriser les pages de code
Ce n'est pas l'éditeur que j'utilise, mais il est parfait pour les débutants ! Vous pouvez le télécharger sur la Page Officielle de Notepad++
C'est très facile à utiliser, vous avez simplement à ouvrir vos fichiers avec ça
A partir de maintenant, c'est du sérieux, je vous présente JQuery.
Vous allez m'en vouloir, mais on ne va pas apprendre le Javascript pur ici.
"
Tu nous avait dit qu'on allait l'apprendre, l'arnaque !!!"
Calmez-vous, calmez-vous, je ne fais que jouer sur les mots
En fait, JQuery est ce qu'on appelle une librairie,Javascript. C'est à dire qu'il va vous simplifier la vie ! Tout comme le BBCode vous simplifie la vie pour écrire du HTML (voir première partir du tuto). Il y a d'autres caractéristiques, mais pour le moment, vous n'avez pas besoin d'en savoir plus
Première chose à faire, copiez-coller ceci dans votre body
Voici le code à copier-coller :
"Qu'est ce que c'est que ce truc ? "
Voilà JQuery ! Vous allez lier un fichier Javascript qui contient la librairie, tout comme vous avez lié votre CSS dans le tuto précédent !
C'est en ayant lié ce script à votre page que vous allez pouvoir commencer à coder ! On va démarrer avec une nouvelle page.
Voilà, avec ça, on a une page basique HTML. On a un bouton, une structure normale, et le script de JQuery qui est importé dans la page. Il nous reste plus qu'à commencer à coder
Avant toute chose, il faut savoir que tout code Javascript se trouve dans une balise script.
Essayer de copier-coller cela en dessous de la balise script qui importe JQuery, puis rechargez votre page.
Voir en direct ce que produit le code
MAGIE
Vous devriez voir une petite pop-up vous dire bonjour, c'est cool hein ?
C'est tout simplement ce alert('bonjour'); qui a fait ça. Vous avez ouvert une pop-up dans votre page qui vous dit bonjour ! Et ça, c'est cool !
Ceci est une des fonctions de Javascript les plus basiques. Seulement il y a un problème : On aimerait que cette pop-up n'apparaisse qu'après avoir cliqué sur le bouton mais là, elle apparaît directement. L'idéal serait de dire au Javascript : "Dès que j'ai cliqué sur le bouton, tu m'affiche la pop-up !"
C'est très simple à réaliser, même si cela demande une nomenclature particulière. Nous allons créer une fonction qui va écouter le clic.
Bon, ça fait beaucoup de code. On va décomposer ça, ne vous inquiétez pas.
Parlons un peu du Javascript. Il s'agit d'un langage de programmation. Il est donc différent des deux langages que vous avez vu ici. Il éxécute des instructions et en ce sens, il se rapproche plus de l’algorithmique et de la logique humaine. Vous allez donner des instructions à l'ordinateur, et lui, il va les exécuter, c'est tout simple
La seule chose qui va être difficile, c'est de parler à l'ordinateur en utilisant un langage qu'il va comprendre, le Javascript ! Voici le même code, commenté cette fois :
Et voilà, c'est très simple au final quand on l'explique de façon logique
Voilà ce que l'on écrit à l'ordinateur avec le code et c'est ainsi qu'il l'interprète.
Voir en direct ce que produit le code
Et voilà donc, nous avons réussi à faire apparaître la pop-up qui dit bonjour après avoir cliqué sur le bouton
Ce qui est important lorsque l'on fait des fonctions avec JQuery, c'est de respecter la façon d'écrire. Ici, les deux fonctions sont écrites de la même façon, et c'est important de respecter ça, sinon votre code ne marchera pas.
On ouvre la fonction avec la première ligne de celle-ci, puis on la ferme avec "});". C'est le code qui se trouve à l'intérieur qui va être exécuté. On parle des instructions qui se trouvent dans la fonction.
La première fonction que vous voyez, celle de $(document).ready(function() {}); est celle qui va contenir TOUT notre code javascript. Pour la simple et bonne raison que vu que nous utilisons JQuery pour écrire du code, nous allons ATTENDRE que celui-ci soit bien chargé pour pouvoir exécuter le code. C'est ce que signifie ce ready.
Vous suivez toujours?
Maintenant que vous avez compris ça, on va essayer quelque chose de plus, demander un pseudo à l'utilisateur pour pouvoir lui dire bonjour avec son prénom.
Les instructions sont donc : Demander à l'utilisateur son prénom lorsqu'il arrive sur la page. Ensuite, il clique sur le bouton, et la pop up lui dit bonjour !
Voilà à quoi ressemble code pour faire ça :
Voir en direct ce que produit le code
Et voilà, maintenant, on a bien notre pop-up qui donne l'impression de parler à l'utilisateur !
Alors, d'où vient ce "var" ? Il s'agit du diminutif de variable. Pour ceux à qui ce concept ne parle pas, une variable est un peu comme une boite vide. Ici, j'ai créé une variable prenom. J'ai donc une petit boite que j'appelle prenom, qui va ensuite contenir le pseudo rempli par l'utilisateur. On parle ici d'affectation de variable, c'est à dire qu'on donne à notre variable une valeur, qui est ici le pseudo rentré par l'utilisateur
Le concept de variables et de fonctions est le plus basique et le plus commun des langages de programmation, pas seulement le Javascript ! Le Java, le C, le PHP, tous ces langages fonctionnent de cette manière (avec beaucoup d'autres choses, certes).
Pour résumer:
- Avec Javascript, on va créer des fonctions, qui ne sont rien d'autres qu'une suite d'instruction écrites pour parler à la machine, qui elle, va interpréter ces instructions pour comprendre de que vous voulez lui faire faire !
- Ces fonctions peuvent s'imbriquer entre elles, ce qui va simplement conduire à des instructions plus longues et plus précises.
- Les variables sont des petites boites qu'on créé comme on veut, et dans lesquelles on va mettre des valeurs, et du texte.
Maintenant, nous entrons dans une nouvelle étape de la programmation, qui est probablement la plus utilisée au monde : Les conditions.
C'est une condition sine qua non (nécessaire) pour programmer quoique ce soit, et vous allez très rapidement comprendre pour quoi.
Voir en direct ce que produit le code
Alors, cela fait encore une fois pas mal de code inconnu, mais ne vous en faites pas, on va l'expliquer.
Cela dit, vous avez déjà les explications commentées du code. Première chose pour ceux qui se demanderaient ce que j'ai fait en HTML, il s'agit d'une liste déroulante, comme vous en voyez souvent sur les sites où vous allez. Elle se fait à l'aide de la balise select.
Si j'ai pris cette balise pour montrer mon exemple, c'est parce que l'on peut choisir l'option que l'on souhaite dans la liste. Ici, on veut savoir si la personne déclare être un homme ou une femme.
En JQuery, notre fonction change va donc s'occuper de ça. Elle va servir à repérer lorsque l'utilisateur choisira l'un des choix.
Une fois ceci fait, OH ! Magie ! Si il a choisi homme, on lui dira qu'il est un homme et si non, on lui dira qu'il est une femme !
C'est là que notre if { } else { } prend tout son sens. Littéralement, cela signifierait "Si blablabla... exécute moi ça ! Sinon, exécute moi plutôt ça !
Ici donc, on cherche la valeur (que l'on a renseigné dans nos balises options en HTML) qui va nous être donné par l'utilisateur grâce à la fonction change.
Grâce à ce que l'on récupère, on peut décider si l'on va afficher ceci, ou afficher cela. On est totalement libre d'afficher ce que l'on veut, qu'on essaye en général de mettre en conformité avec ce que l'on souhaite (ici, dire à la personne qu'elle est une femme si c'est l'option qu'elle a choisie).
Ce n'est pas plus compliqué que ça
Mais imaginez donc à quel point cela peut être pratique au quotidien ! Prenons un exemple basique de jeu vidéo Pokémon sur Gameboy.
Lorsque le personnage va à gauche, l'image de celui-ci est différente de lorsqu'il va en bas non ? EH BAH OUI !
Et la chose qui fait ça n'est pas magique, elle est codée ! "Si le joueur va en bas, je veux l'image du personnage qui va vers le bas, si le personnage va à gauche, je veux l'image du personnage qui va à gauche..."
Un autre exemple, Lorsque dans Pokémon, on peut répondre "Oui" ou "Non" à une question. La réponse change en fonction de ce que l'on dit ! Tout ça est donc géré par des conditions !!
Mais ne vous croyez pas encore prêt à coder un jeu jeunes padawans, votre heure viendra, mais patientez
Maintenant que les conditions n'ont plus de secret pour vous, nous allons passez aux boucles !!
"Aux boucles ? Comme dans les cheveux ?"
Ouais... Non. (Bon, je fais ce que je peux pour rendre cet article intéressant, la tentative d'humour en fais partie).
Les boucles sont un moyen de répéter une action, un nombre de fois défini :
Voir en direct ce que produit le code
Le code devrait être suffisamment commenté pour vous aiguillé sur le principe d'une boucle. En anglais, "while" signifie "tant que". Cela veut dire que tant que la condition ne sera pas remplie, nous allons continuer à effectuer l'action qui se trouve à l'intérieur, plutôt pratique comme fonction non ?
Ici, la fonction JQuery .append() nous permet d'insérer du HTML dans la div ayant la classe "boucle". Donc, tant que i est inférieur à 10, nous ré effectuons cette fonction.
i = 0 au départ. Puis à la fin de la première boucle, i = 1. Puis i =2, et ainsi de suite...
Nous exécutons donc une action un nombre de fois défini ! Et c'est ça qui est super !
Toujours en reprenant l'exemple de Pokémon, voyez la chose suivante :
"Tant que le joueur appuie sur le bouton haut et qu'il ne rencontre pas d'obstacle, il continue à marcher".
Dans votre tête, c'est logique. Mais maintenant que vous y réfléchissez de plus près, quelqu'un a codé cette fonction ! Sinon vous vous retrouveriez à passer à travers les murs ! (Bon, c'est parfois ce qui arrive lors des bugs)
Voyez où je veux en venir. Avec les fonctions, les variables, les conditions, et les boucles, on peut déjà imaginer des scénarios intéressants à mettre en place, n'est ce pas ? Nous allons donc tenter de combiner le tout ici, dans un petit fonction marrante !
Voir le résultat de la Coda Bomba
Bon, je me doute bien que ce code peut vous paraître très compliqué car après tout, vous avez saisi les bases, mais les mettre bout à bout n'a absolument rien à voir. Cependant, c'est là que c'est à vous de jouer
C'est seulement et uniquement en vous exerçant, en essayant de créer quelque chose vous-même et avec vos idées, que vous pourrez avancer dans la compréhension puis, pourquoi pas, la maîtrise d'un langage.
J'ai essayé de clarifier un maximum mon code avec des commentaires ici et là, mais globalement, en testant le code sur la page web, vous comprenez ce que l'on a essayé de faire.
Si vous avez la moindre question ou la moindre chose incomprise ou que j'aurais pu mal expliquer (c'est totalement possible), n'hésitez surtout pas à le demander à la suite de ce post, car après tout c'est avec des erreurs et surtout des questions que l'on apprend
Ensuite, si certains d'entre vous éprouvent l'envie d'aller plus loin que ce que nous avons fait, parce qu'ils ont bien compris, ou bien parce qu'ils veulent faire quelque chose de plus complet, j'ai volontairement laissé des choses qui peuvent être améliorées
- Le CSS ! La page ne comporte aucun style et est très moche, pourquoi pas lui donner un peu de couleur et de classe avec tout ce que vous savez du CSS
- Les Réponses Oui et Non ! Lorsque l'utilisateur répond à une question, quoiqu'il réponse, on ne lui dit pas s'il a bon ou pas, et forcément, ça serait plus sympa si on pouvait lui donner la réponse !
- Plein d'autres choses de votre invention
C'est la fin de ce tutoriel consacré au Javascript !
Peut-être que je continuerai une prochaine fois pour consolider un peu les bases que vous avez acquises en HTML/CSS/Javascript, mais pour l'instant et si vous vous intéressez au code, exercez-vous, recherchez ici et là sur Google pour apprendre de nouvelles choses, et encore une fois, un MP, une question ici, je réponds à tout ce que vous auriez envie de savoir, donc n'hésitez surtout pas
Bye les jeunes, en espérant que ce tutoriel soit assez clair et vous ai plu
PS : Comme vous ne pouvez pas encore mettre sur Internet vos tentatives ou réalisations pour que tout le monde les voient, si vous voulez, je peut les mettre sur mon serveur en ligne. Ainsi, vous pourrez les voir, les montrer, et les partager en direct d'Internet en donnant l'URL à vos amis
Ca fait un moment que j'ai pas continué ce tuto, il est temps de reprendre !
Nous avons vu en premier lieu les bases du HTML, puis en second lieu les bases du CSS.
J'ai hésité à continuer à approfondir ces langages, mais au final je ne le ferais que si certains d'entre vous le demande ou en ressentent le besoin. Par ailleurs, le but de ce tutoriel est avant tout de s'initier au code, non d'aller très loin dans son apprentissage
Je vous conseille le site très bien réalisé d'OpenClassrooms pour vraiment approfondir tout ça : http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3
Nous allons donc aujourd'hui voir...
Le Javascript et la gestion des évènements
Pour certains (beaucoup je pense), le concept de Javascript est un mystère total, ou bien un lointain souvenir entendu quelque part. Et c'est tant mieux, car je vais partir de zéro pour essayer de vous l'expliquer au mieux
- Un rapide rappel pour tout le monde :
- Le HTML est le squelette d'une page. Il est composé par des balises (p pour les paragraphes, img pour les images...).
- A ces balises, on peut mettre des classes pour les reconnaître, comme div class="maSuperDiv"
- Des balises peuvent servir de "boîtes" et en englober d'autres
- Le CSS est le moyen de styliser une page. Mettre de la couleur, aligner le texte, donner une largeur à une boîte, etc...
- Le CSS fonctionne par sélecteurs, c'est à dire qu'on va sélectionner l'élément qui a la classe "maSuperDiv", ou bien simplement toutes les balises div
Si tout ça n'est pas très clair dans vos esprits, je vous invite à repasser sur les tutos précédents pour bien saisir
De manière générale, le Javascript est un langage qui se révèle plus complexe que les 2 autres, et qui s'apprend toujours après ! Vous avez donc de la chance
AVANT DE COMMENCER !
Vous devez commencer à en avoir marre d'utiliser votre bloc-notes pour écrire du code, c'est vraiment pas pratique à partir d'un certain moment.
Je vous présente Notepad++, un éditeur de texte, comme Word, Office, ou le Bloc Notes, mais spécialisé pour coloriser les pages de code
Ce n'est pas l'éditeur que j'utilise, mais il est parfait pour les débutants ! Vous pouvez le télécharger sur la Page Officielle de Notepad++
C'est très facile à utiliser, vous avez simplement à ouvrir vos fichiers avec ça
JQuery, votre première librairie
A partir de maintenant, c'est du sérieux, je vous présente JQuery.
Vous allez m'en vouloir, mais on ne va pas apprendre le Javascript pur ici.
"
Tu nous avait dit qu'on allait l'apprendre, l'arnaque !!!"Calmez-vous, calmez-vous, je ne fais que jouer sur les mots
En fait, JQuery est ce qu'on appelle une librairie,Javascript. C'est à dire qu'il va vous simplifier la vie ! Tout comme le BBCode vous simplifie la vie pour écrire du HTML (voir première partir du tuto). Il y a d'autres caractéristiques, mais pour le moment, vous n'avez pas besoin d'en savoir plus
Première chose à faire, copiez-coller ceci dans votre body
Voici le code à copier-coller :
- Code:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
"Qu'est ce que c'est que ce truc ?
"Voilà JQuery ! Vous allez lier un fichier Javascript qui contient la librairie, tout comme vous avez lié votre CSS dans le tuto précédent !
C'est en ayant lié ce script à votre page que vous allez pouvoir commencer à coder ! On va démarrer avec une nouvelle page.
Voilà, avec ça, on a une page basique HTML. On a un bouton, une structure normale, et le script de JQuery qui est importé dans la page. Il nous reste plus qu'à commencer à coder
Avant toute chose, il faut savoir que tout code Javascript se trouve dans une balise script.
- Code:
<script>alert('bonjour');/script>
Essayer de copier-coller cela en dessous de la balise script qui importe JQuery, puis rechargez votre page.
Voir en direct ce que produit le code
MAGIE
Vous devriez voir une petite pop-up vous dire bonjour, c'est cool hein ?
C'est tout simplement ce alert('bonjour'); qui a fait ça. Vous avez ouvert une pop-up dans votre page qui vous dit bonjour ! Et ça, c'est cool !
Ceci est une des fonctions de Javascript les plus basiques. Seulement il y a un problème : On aimerait que cette pop-up n'apparaisse qu'après avoir cliqué sur le bouton mais là, elle apparaît directement. L'idéal serait de dire au Javascript : "Dès que j'ai cliqué sur le bouton, tu m'affiche la pop-up !"
C'est très simple à réaliser, même si cela demande une nomenclature particulière. Nous allons créer une fonction qui va écouter le clic.
Bon, ça fait beaucoup de code. On va décomposer ça, ne vous inquiétez pas.
Parlons un peu du Javascript. Il s'agit d'un langage de programmation. Il est donc différent des deux langages que vous avez vu ici. Il éxécute des instructions et en ce sens, il se rapproche plus de l’algorithmique et de la logique humaine. Vous allez donner des instructions à l'ordinateur, et lui, il va les exécuter, c'est tout simple
La seule chose qui va être difficile, c'est de parler à l'ordinateur en utilisant un langage qu'il va comprendre, le Javascript ! Voici le même code, commenté cette fois :
Et voilà, c'est très simple au final quand on l'explique de façon logique
Voilà ce que l'on écrit à l'ordinateur avec le code et c'est ainsi qu'il l'interprète.
Voir en direct ce que produit le code
Et voilà donc, nous avons réussi à faire apparaître la pop-up qui dit bonjour après avoir cliqué sur le bouton
Les fonctions et les variables
Ce qui est important lorsque l'on fait des fonctions avec JQuery, c'est de respecter la façon d'écrire. Ici, les deux fonctions sont écrites de la même façon, et c'est important de respecter ça, sinon votre code ne marchera pas.
On ouvre la fonction avec la première ligne de celle-ci, puis on la ferme avec "});". C'est le code qui se trouve à l'intérieur qui va être exécuté. On parle des instructions qui se trouvent dans la fonction.
La première fonction que vous voyez, celle de $(document).ready(function() {}); est celle qui va contenir TOUT notre code javascript. Pour la simple et bonne raison que vu que nous utilisons JQuery pour écrire du code, nous allons ATTENDRE que celui-ci soit bien chargé pour pouvoir exécuter le code. C'est ce que signifie ce ready.
Vous suivez toujours?
Maintenant que vous avez compris ça, on va essayer quelque chose de plus, demander un pseudo à l'utilisateur pour pouvoir lui dire bonjour avec son prénom.
Les instructions sont donc : Demander à l'utilisateur son prénom lorsqu'il arrive sur la page. Ensuite, il clique sur le bouton, et la pop up lui dit bonjour !
Voilà à quoi ressemble code pour faire ça :
Voir en direct ce que produit le code
Et voilà, maintenant, on a bien notre pop-up qui donne l'impression de parler à l'utilisateur !
Alors, d'où vient ce "var" ? Il s'agit du diminutif de variable. Pour ceux à qui ce concept ne parle pas, une variable est un peu comme une boite vide. Ici, j'ai créé une variable prenom. J'ai donc une petit boite que j'appelle prenom, qui va ensuite contenir le pseudo rempli par l'utilisateur. On parle ici d'affectation de variable, c'est à dire qu'on donne à notre variable une valeur, qui est ici le pseudo rentré par l'utilisateur
Le concept de variables et de fonctions est le plus basique et le plus commun des langages de programmation, pas seulement le Javascript ! Le Java, le C, le PHP, tous ces langages fonctionnent de cette manière (avec beaucoup d'autres choses, certes).
Pour résumer:
- Avec Javascript, on va créer des fonctions, qui ne sont rien d'autres qu'une suite d'instruction écrites pour parler à la machine, qui elle, va interpréter ces instructions pour comprendre de que vous voulez lui faire faire !
- Ces fonctions peuvent s'imbriquer entre elles, ce qui va simplement conduire à des instructions plus longues et plus précises.
- Les variables sont des petites boites qu'on créé comme on veut, et dans lesquelles on va mettre des valeurs, et du texte.
Les conditions et les boucles
Maintenant, nous entrons dans une nouvelle étape de la programmation, qui est probablement la plus utilisée au monde : Les conditions.
C'est une condition sine qua non (nécessaire) pour programmer quoique ce soit, et vous allez très rapidement comprendre pour quoi.
Voir en direct ce que produit le code
Alors, cela fait encore une fois pas mal de code inconnu, mais ne vous en faites pas, on va l'expliquer.
Cela dit, vous avez déjà les explications commentées du code. Première chose pour ceux qui se demanderaient ce que j'ai fait en HTML, il s'agit d'une liste déroulante, comme vous en voyez souvent sur les sites où vous allez. Elle se fait à l'aide de la balise select.
Si j'ai pris cette balise pour montrer mon exemple, c'est parce que l'on peut choisir l'option que l'on souhaite dans la liste. Ici, on veut savoir si la personne déclare être un homme ou une femme.
En JQuery, notre fonction change va donc s'occuper de ça. Elle va servir à repérer lorsque l'utilisateur choisira l'un des choix.
Une fois ceci fait, OH ! Magie ! Si il a choisi homme, on lui dira qu'il est un homme et si non, on lui dira qu'il est une femme !
C'est là que notre if { } else { } prend tout son sens. Littéralement, cela signifierait "Si blablabla... exécute moi ça ! Sinon, exécute moi plutôt ça !
Ici donc, on cherche la valeur (que l'on a renseigné dans nos balises options en HTML) qui va nous être donné par l'utilisateur grâce à la fonction change.
Grâce à ce que l'on récupère, on peut décider si l'on va afficher ceci, ou afficher cela. On est totalement libre d'afficher ce que l'on veut, qu'on essaye en général de mettre en conformité avec ce que l'on souhaite (ici, dire à la personne qu'elle est une femme si c'est l'option qu'elle a choisie).
Ce n'est pas plus compliqué que ça
Mais imaginez donc à quel point cela peut être pratique au quotidien ! Prenons un exemple basique de jeu vidéo Pokémon sur Gameboy.
Lorsque le personnage va à gauche, l'image de celui-ci est différente de lorsqu'il va en bas non ? EH BAH OUI !
Et la chose qui fait ça n'est pas magique, elle est codée ! "Si le joueur va en bas, je veux l'image du personnage qui va vers le bas, si le personnage va à gauche, je veux l'image du personnage qui va à gauche..."
Un autre exemple, Lorsque dans Pokémon, on peut répondre "Oui" ou "Non" à une question. La réponse change en fonction de ce que l'on dit ! Tout ça est donc géré par des conditions !!
Mais ne vous croyez pas encore prêt à coder un jeu jeunes padawans, votre heure viendra, mais patientez
Maintenant que les conditions n'ont plus de secret pour vous, nous allons passez aux boucles !!
"Aux boucles ? Comme dans les cheveux ?"
Ouais... Non. (Bon, je fais ce que je peux pour rendre cet article intéressant, la tentative d'humour en fais partie).
Les boucles sont un moyen de répéter une action, un nombre de fois défini :
Voir en direct ce que produit le code
Le code devrait être suffisamment commenté pour vous aiguillé sur le principe d'une boucle. En anglais, "while" signifie "tant que". Cela veut dire que tant que la condition ne sera pas remplie, nous allons continuer à effectuer l'action qui se trouve à l'intérieur, plutôt pratique comme fonction non ?
Ici, la fonction JQuery .append() nous permet d'insérer du HTML dans la div ayant la classe "boucle". Donc, tant que i est inférieur à 10, nous ré effectuons cette fonction.
i = 0 au départ. Puis à la fin de la première boucle, i = 1. Puis i =2, et ainsi de suite...
Nous exécutons donc une action un nombre de fois défini ! Et c'est ça qui est super !
Toujours en reprenant l'exemple de Pokémon, voyez la chose suivante :
"Tant que le joueur appuie sur le bouton haut et qu'il ne rencontre pas d'obstacle, il continue à marcher".
Dans votre tête, c'est logique. Mais maintenant que vous y réfléchissez de plus près, quelqu'un a codé cette fonction ! Sinon vous vous retrouveriez à passer à travers les murs ! (Bon, c'est parfois ce qui arrive lors des bugs)
Voyez où je veux en venir. Avec les fonctions, les variables, les conditions, et les boucles, on peut déjà imaginer des scénarios intéressants à mettre en place, n'est ce pas ? Nous allons donc tenter de combiner le tout ici, dans un petit fonction marrante !
- Spoiler:
Voir le résultat de la Coda Bomba
Bon, je me doute bien que ce code peut vous paraître très compliqué car après tout, vous avez saisi les bases, mais les mettre bout à bout n'a absolument rien à voir. Cependant, c'est là que c'est à vous de jouer
C'est seulement et uniquement en vous exerçant, en essayant de créer quelque chose vous-même et avec vos idées, que vous pourrez avancer dans la compréhension puis, pourquoi pas, la maîtrise d'un langage.
J'ai essayé de clarifier un maximum mon code avec des commentaires ici et là, mais globalement, en testant le code sur la page web, vous comprenez ce que l'on a essayé de faire.
Si vous avez la moindre question ou la moindre chose incomprise ou que j'aurais pu mal expliquer (c'est totalement possible), n'hésitez surtout pas à le demander à la suite de ce post, car après tout c'est avec des erreurs et surtout des questions que l'on apprend
Ensuite, si certains d'entre vous éprouvent l'envie d'aller plus loin que ce que nous avons fait, parce qu'ils ont bien compris, ou bien parce qu'ils veulent faire quelque chose de plus complet, j'ai volontairement laissé des choses qui peuvent être améliorées
- Le CSS ! La page ne comporte aucun style et est très moche, pourquoi pas lui donner un peu de couleur et de classe avec tout ce que vous savez du CSS
- Les Réponses Oui et Non ! Lorsque l'utilisateur répond à une question, quoiqu'il réponse, on ne lui dit pas s'il a bon ou pas, et forcément, ça serait plus sympa si on pouvait lui donner la réponse !
- Plein d'autres choses de votre invention
C'est la fin de ce tutoriel consacré au Javascript !
Peut-être que je continuerai une prochaine fois pour consolider un peu les bases que vous avez acquises en HTML/CSS/Javascript, mais pour l'instant et si vous vous intéressez au code, exercez-vous, recherchez ici et là sur Google pour apprendre de nouvelles choses, et encore une fois, un MP, une question ici, je réponds à tout ce que vous auriez envie de savoir, donc n'hésitez surtout pas
Bye les jeunes, en espérant que ce tutoriel soit assez clair et vous ai plu
PS : Comme vous ne pouvez pas encore mettre sur Internet vos tentatives ou réalisations pour que tout le monde les voient, si vous voulez, je peut les mettre sur mon serveur en ligne. Ainsi, vous pourrez les voir, les montrer, et les partager en direct d'Internet en donnant l'URL à vos amis
Dernière édition par Gear 2nd le Sam 5 Mar - 13:37, édité 1 fois
Gear 2nd- La vitesse divine
-
Nombre de messages : 4858
Age : 30
Groupe :
Date d'inscription : 20/02/2010 -
Re: [CODE][HTML]Le code, c'est cool !
par Raleygh 009 Sam 7 Fév - 15:46
Excellent tuto. C'est clair, y a des exemple. C'est décrit étape par étape pour nous les noobs.
Tu semble prendre beaucoup de plaisir à le faire, ca se voit et amplifie la qualité du tuto.
Bref, continue c'est très intéressant autant pour les noob, comme moi, qui en apprennent un peu sur ce monde magique de l'informatique, que pour les gens qui veulent si mettre sérieusement.
Tu semble prendre beaucoup de plaisir à le faire, ca se voit et amplifie la qualité du tuto.
Bref, continue c'est très intéressant autant pour les noob, comme moi, qui en apprennent un peu sur ce monde magique de l'informatique, que pour les gens qui veulent si mettre sérieusement.
Raleygh 009- Yonkou
-
Nombre de messages : 4321
Age : 34
Groupe :
Date d'inscription : 20/12/2011
Re: [CODE][HTML]Le code, c'est cool !
par pikel999 Lun 23 Fév - 18:20
Merci pour le tuto Gear, c’est très instructif. Sinon, j'ai quelques questions pour parfaire ma compréhension.
_ Y a’t-il d’autres encodages qu’on peut utiliser hormis le [ charset="utf-8" ] ?
_ Les classes se placent automatiquement les uns au dessus des l’autres, comment on fait pour placer une classe à coté d’une autre ?
_ Dans la pop-up qui lance le bonjour, j’ai essayé de placer le lien d’une image, mais ça n’a pas marché. On ne peut pas placer une image après un " alert " ou c’est moi qui mal codé le truc ?
_ J'ai remarqué que le JavaScript fait appel à un fichier prédéfini qui est sur internet pour lui donner la réplique (fonctionner), comment on fait pour placer ce fichier dans un serveur mien, et faire appel à lui quand je veux ? Et peut-on ajouter d’autres fonctionnalités au JavaScript, en modifiant ce "jquery" avant de l’héberger ?
_ Y a’t-il d’autres encodages qu’on peut utiliser hormis le [ charset="utf-8" ] ?
_ Les classes se placent automatiquement les uns au dessus des l’autres, comment on fait pour placer une classe à coté d’une autre ?
_ Dans la pop-up qui lance le bonjour, j’ai essayé de placer le lien d’une image, mais ça n’a pas marché. On ne peut pas placer une image après un " alert " ou c’est moi qui mal codé le truc ?
_ J'ai remarqué que le JavaScript fait appel à un fichier prédéfini qui est sur internet pour lui donner la réplique (fonctionner), comment on fait pour placer ce fichier dans un serveur mien, et faire appel à lui quand je veux ? Et peut-on ajouter d’autres fonctionnalités au JavaScript, en modifiant ce "jquery" avant de l’héberger ?
pikel999- Coloriste Addict
-
Nombre de messages : 2516
Age : 34
Groupe :
Date d'inscription : 12/12/2011
Re: [CODE][HTML]Le code, c'est cool !
par Gear 2nd Mar 24 Mar - 20:38
Hello Pikel ! Pardonne moi je n'avais pas vu ton post ^^'
- Oui il y a d'autres encodages que l'UTF-8, il y en a d'ailleurs un très très grand nombre (ISO, latin_swedish...) mais depuis quelques années l'UTF-8 est l'encodage général, tout simplement parce que c'est lui qui englobe le plus de caractères quelles que soient les langues
- Si j'ai bien compris ta question, tu veux donner deux classes à une même div ? C'est très simple, ça s'écrit ainsi
- Non les alert ne sont prévus que pour afficher du texte. Pour demander une confirmation, tu a la fonction confirm(); Si ensuite tu veux placer du contenu différent dans une popup, tu va devoir la créer toi-même en html et css
- Dans le tuto, je vous fais appeller JQuery depuis le site qui l'héberge de base pour ne pas vous perdre, mais personnellement je l'appelle en local JQuery n'est rien de plus qu'un fichier Javascript, du texte. Tu le télécharge comme n'importe quel fichier, et tu l'appelle avec un chemin relatif du genre
Désolé pour le retard et n'hésite pas si tu as d'autres questions !
- Oui il y a d'autres encodages que l'UTF-8, il y en a d'ailleurs un très très grand nombre (ISO, latin_swedish...) mais depuis quelques années l'UTF-8 est l'encodage général, tout simplement parce que c'est lui qui englobe le plus de caractères quelles que soient les langues
- Si j'ai bien compris ta question, tu veux donner deux classes à une même div ? C'est très simple, ça s'écrit ainsi
- Code:
<div class=" maClasseUn maClasseDeux">contenu de ma div</div>
- Non les alert ne sont prévus que pour afficher du texte. Pour demander une confirmation, tu a la fonction confirm(); Si ensuite tu veux placer du contenu différent dans une popup, tu va devoir la créer toi-même en html et css
- Dans le tuto, je vous fais appeller JQuery depuis le site qui l'héberge de base pour ne pas vous perdre, mais personnellement je l'appelle en local
JQuery n'est rien de plus qu'un fichier Javascript, du texte. Tu le télécharge comme n'importe quel fichier, et tu l'appelle avec un chemin relatif du genre - Code:
<script src="js/jquery.js"></script>
Désolé pour le retard et n'hésite pas si tu as d'autres questions !
Dernière édition par Gear 2nd le Ven 19 Juin - 14:17, édité 1 fois
Gear 2nd- La vitesse divine
-
Nombre de messages : 4858
Age : 30
Groupe :
Date d'inscription : 20/02/2010 -
Re: [CODE][HTML]Le code, c'est cool !
par daoudienforce Mar 24 Mar - 21:43
Très beau tuto, j'en apprend des choses en te lisant (Pour attribuer 2 classes )
Merci de partager ton savoir
Ps: j'ai pas encore fini le js mais ça ne va pas tarder (En cours on fait tout nous même, donc pas de librairie)
Et une petite question, la syntaxe que tu as utilisé pour le js, elle est globale ou c'est la librairie jq ?
(Je ne sais pas si tu m'a compris
)
)Merci de partager ton savoir
Ps: j'ai pas encore fini le js mais ça ne va pas tarder (En cours on fait tout nous même, donc pas de librairie)
Et une petite question, la syntaxe que tu as utilisé pour le js, elle est globale ou c'est la librairie jq ?
(Je ne sais pas si tu m'a compris
)
daoudienforce- Gardien Vongola
-
Nombre de messages : 623
Age : 30
Groupe :
Date d'inscription : 25/12/2011 -
Re: [CODE][HTML]Le code, c'est cool !
par Gear 2nd Mar 24 Mar - 22:17
Merci daoudien
Pour ta question, ça dépend.Mes appels de fonctions et de sélection des éléments ont été fait par JQuery. C'est très simple, le symbole de JQuery est le dollar : "$".
Si tu vois du dollar, y'a des chances que ce soit du JQuery
Le Javascript natif dans mon code se traduit par les :
Le reste c'est du JQuery
Tu peux toujours aller voir la documentation de JQuery pour t'informer, elle contient toutes les fonctions de la librairie
https://www.google.fr/search?q=api.jquery&oq=api.jquery&aqs=chrome..69i57.4827j0j7&sourceid=chrome&es_sm=93&ie=UTF-8
Pour ta question, ça dépend.Mes appels de fonctions et de sélection des éléments ont été fait par JQuery. C'est très simple, le symbole de JQuery est le dollar : "$".
Si tu vois du dollar, y'a des chances que ce soit du JQuery
Le Javascript natif dans mon code se traduit par les :
- Code:
if(), else(), alert(), var
Le reste c'est du JQuery
Tu peux toujours aller voir la documentation de JQuery pour t'informer, elle contient toutes les fonctions de la librairie
https://www.google.fr/search?q=api.jquery&oq=api.jquery&aqs=chrome..69i57.4827j0j7&sourceid=chrome&es_sm=93&ie=UTF-8
Gear 2nd- La vitesse divine
-
Nombre de messages : 4858
Age : 30
Groupe :
Date d'inscription : 20/02/2010 -
Re: [CODE][HTML]Le code, c'est cool !
par Lucifer Sam 20 Juin - 13:55
Saluuut !
J'étais en train de faire ton tuto tranquille, et là j'arrive au Javascript... Le début ça passe à l'aise sauf qu'une fois arrivé aux boucles... CATASTROPHE !
Pour une raison que j'ignore ça ne marche pas, j'ai vérifié plusieurs fois le code que tu as mis, et celui que j'ai mais rien à faire.... ( et sur l'exemple que tu as donné, ça ne marche pas non plus.. )
Donc voilà voilà, aurais tu une idée d'où vient le problème ?
J'étais en train de faire ton tuto tranquille, et là j'arrive au Javascript... Le début ça passe à l'aise sauf qu'une fois arrivé aux boucles... CATASTROPHE !
Pour une raison que j'ignore ça ne marche pas, j'ai vérifié plusieurs fois le code que tu as mis, et celui que j'ai mais rien à faire.... ( et sur l'exemple que tu as donné, ça ne marche pas non plus.. )
Donc voilà voilà, aurais tu une idée d'où vient le problème ?
Lucifer- Dragon Slayer
-
Nombre de messages : 407
Age : 28
Groupe :
Date d'inscription : 29/07/2009
Re: [CODE][HTML]Le code, c'est cool !
par Gear 2nd Sam 20 Juin - 16:08
Alors déjà si tu pouvais me donner ton code ca serait cool
Ensuite va sur ta page, fais un clic droit puis -> Inspecter l'élément (sous Chrome) puis va dans l'onglet "Console" tout à droite.
C'est la façon de débugger du Javascript en fait. Si tu as une erreur elle va apparaitre ici. Essaye soit de débugger ton code avec ça, soit tu m'envoie ce qui est marqué dans cette console
Ensuite va sur ta page, fais un clic droit puis -> Inspecter l'élément (sous Chrome) puis va dans l'onglet "Console" tout à droite.
C'est la façon de débugger du Javascript en fait. Si tu as une erreur elle va apparaitre ici. Essaye soit de débugger ton code avec ça, soit tu m'envoie ce qui est marqué dans cette console
Gear 2nd- La vitesse divine
-
Nombre de messages : 4858
Age : 30
Groupe :
Date d'inscription : 20/02/2010 -
Re: [CODE][HTML]Le code, c'est cool !
par Lucifer Dim 21 Juin - 23:33
Donc, j'ai fait inspecter l'élément et j'ai regardé dans "Console" sauf qu'il y a rien d'écrit, donc il ne devrait pas y avoir d'erreur ^^
Ensuite pour le code :
Dis moi si tu trouves quelque chose d'anormal x)
Ensuite pour le code :
- Spoiler:
- Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Premier test de Javascript</title>
</head>
<body>
<Button class="bouton_boucle"> Faire apparaitre 10 fois une phrase</button>
<div class="boucle"></div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function() {
$('.button_boucle').click(function() {
var i = 0;
while(i < 10) {
$('.boucle').append('<div>Et encore une fois !</div>');
i= i + 1;
}
});
});
<script>
</body>
</html>
Dis moi si tu trouves quelque chose d'anormal x)
Lucifer- Dragon Slayer
-
Nombre de messages : 407
Age : 28
Groupe :
Date d'inscription : 29/07/2009
Re: [CODE][HTML]Le code, c'est cool !
par Gear 2nd Lun 22 Juin - 10:29
Yo Luci ! Alors oui, il y a 3 erreurs dans ton code
- Pour la balise servant à créer le bouton, tu as mis une majuscule à Button. Alors que c'est button
- Ensuite ta balise script qui contient ton code Javascript n'est pas fermée Tu vois quand tu ferme une balise tu met un slash, comme pour la balise button ou les autres donc il faut que ce soit /script dans ta balise de fermeture et non pas script tout seul.
- Pour finir, regarde bien, la class de ta balise button est bouton_boucle mais dans ton appel JQuery tu fais $('.button_boucle'). Tu vois le hic ? bouton_boucle et button_boucle ne sont pas la même chose
Ce sont des erreurs d'innatention plutôt normal pour un débutant je dirais donc tu n'as pas à t'en faire N'hésites pas à bien repasser sur ton code, mais c'est vrai que tu n'avais pas forcément les bons outils peut-être pour ça
N'hésite pas à télécharger Notepad++ sur le net qui est un éditeur de texte à colorisation syntaxique (avec ça par exemple tu aurais pu voir que la balise de fermeture du script était mal colorée donc mal fermée )
J'espère que ça t'as bien aidé et que tu réussira à faire fonctionner ton code comme prévu
- Pour la balise servant à créer le bouton, tu as mis une majuscule à Button. Alors que c'est button
- Ensuite ta balise script qui contient ton code Javascript n'est pas fermée
Tu vois quand tu ferme une balise tu met un slash, comme pour la balise button ou les autres donc il faut que ce soit /script dans ta balise de fermeture et non pas script tout seul.- Pour finir, regarde bien, la class de ta balise button est bouton_boucle mais dans ton appel JQuery tu fais $('.button_boucle'). Tu vois le hic ? bouton_boucle et button_boucle ne sont pas la même chose
Ce sont des erreurs d'innatention plutôt normal pour un débutant je dirais donc tu n'as pas à t'en faire
N'hésites pas à bien repasser sur ton code, mais c'est vrai que tu n'avais pas forcément les bons outils peut-être pour ça N'hésite pas à télécharger Notepad++ sur le net qui est un éditeur de texte à colorisation syntaxique (avec ça par exemple tu aurais pu voir que la balise de fermeture du script était mal colorée donc mal fermée
)J'espère que ça t'as bien aidé et que tu réussira à faire fonctionner ton code comme prévu
Gear 2nd- La vitesse divine
-
Nombre de messages : 4858
Age : 30
Groupe :
Date d'inscription : 20/02/2010 -
Re: [CODE][HTML]Le code, c'est cool !
par Lucifer Lun 22 Juin - 10:42
Ha oui en effet xD
Ouais je le fais toujours sur bloc note là x)
Je vais de ce pas installer Notepad++ !!
( et il y a pas d'autre erreur, ça fonctionne \o/ )
Edit Gear : Top !
EDIT : C'est encore moi !
Donc là j'ai tenté de faire ce que tu as fait avec toutes les questions, mais il y a un problème quand je réponds à une question, que je sélectionne "oui" ou "non" et que je veux faire une autre question les réponses disparaissent ! Pourtant le "show" est mis comme sur ton code :/
Je te mets juste le "script" parce que le reste ça fonctionne !
Ouais je le fais toujours sur bloc note là x)
Je vais de ce pas installer Notepad++ !!
( et il y a pas d'autre erreur, ça fonctionne \o/ )
Edit Gear : Top !
EDIT : C'est encore moi !
Donc là j'ai tenté de faire ce que tu as fait avec toutes les questions, mais il y a un problème quand je réponds à une question, que je sélectionne "oui" ou "non" et que je veux faire une autre question les réponses disparaissent ! Pourtant le "show" est mis comme sur ton code :/
Je te mets juste le "script" parce que le reste ça fonctionne !
- Code:
<script>
$(document).ready(function() {
var numero_question = 0;
var question_1= 0;
var question_2= 0;
var question_3= 0;
$('.response_question').hide();
$('.numero_question').change(function() {
numero_question = $('.numero_question').val();
});
$('.bouton_question').click(function() {
$('.information').empty();
if(question_1 == 1 && question_2 == 1 && question_3 ==1) {
$('.information').append("Vous avez répondu à toutes les questions ! <br />");
} else {
$('.response_question').show();
if(numero_question == 0) {
$('.information').append("Vous n'avez pas choisi de question !");
} else {
if(numero_question == 1) {
$('.information').append("Question 1 : Saviez vous que Caractroc n'aimait pas faire du troc ? ");
question_1 = 1;
} else if(numero_question ==2) {
$('.information').append("Question 2: Ondine aime t-elle les pokémon eau ?");
question_2 = 1;
} else if(numero_question == 3) {
$('.information').append("Question 3: 1+1 est-il égal à 2 ?");
question_3 = 1;
}
}
}
});
$('.reponse_question .button_reponse_question').click(function() {
$('.reponse_question').hide();
$('.information').empty();
$('option[value='+numero_question+']').remove();
$('option[value=0]').attr('selected', 'selected');
});
});
</script>
Lucifer- Dragon Slayer
-
Nombre de messages : 407
Age : 28
Groupe :
Date d'inscription : 29/07/2009
Re: [CODE][HTML]Le code, c'est cool !
par Gear 2nd Mar 23 Juin - 14:32
Je pense que la div qui entoure les bouton oui et non a la class reponse_question et que tes appels Javascript font appel à ".response_question" non ?
response != reponse
(l'un est en anglais l'autre en français)
response != reponse
(l'un est en anglais l'autre en français)
Gear 2nd- La vitesse divine
-
Nombre de messages : 4858
Age : 30
Groupe :
Date d'inscription : 20/02/2010 -
Re: [CODE][HTML]Le code, c'est cool !
par Lucifer Mar 23 Juin - 14:35
Tu sais que je t'aime toi ? :/
Ouais c'était le probleme, foutu erreur d'inattention
Mais du coup, c'est cool ! Là je vais voir pour faire mes propres trucs en combinant avec le css etc
Ouais c'était le probleme, foutu erreur d'inattention
Mais du coup, c'est cool ! Là je vais voir pour faire mes propres trucs en combinant avec le css etc
Lucifer- Dragon Slayer
-
Nombre de messages : 407
Age : 28
Groupe :
Date d'inscription : 29/07/2009
Page 1 sur 2 • 1, 2
Sujets similaires» code:
» Code geass
» ◄ HTML & CSS | Tutoriel | Menu ►
» Code: Présentation
» Code Ami/Gamertag/Pseudo PSN
» Code geass
» ◄ HTML & CSS | Tutoriel | Menu ►
» Code: Présentation
» Code Ami/Gamertag/Pseudo PSN
Forum One Piece, Fairy Tail, Dragon Ball, Nanatsu no Tazai, Naruto... :: Général :: Discussions générales :: Tutoriels
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum