Pour taper du code, donc pour taper du texte, il te faudra choisir un éditeur de texte.

« Oui mais moi j’ai acheté Word?! C’est bon? »

C’est très bien pour faire ta lettre de résiliation chez EDF, ou faire un courrier quelconque, mais surtout pas pour taper du code!!

Un logiciel comme Word, Page( sous mac), open-office, pour ne citer qu’eux, te proposent des possibilités de mise en page, de mettre des titres, des marges, d’insérer des images, des tableaux. Cela permet de faire des pages uniquement statique, pour le plus souvent être imprimées sur du papier ou en pdf. Mais ça, tu le savais déjà, je ne t’apprends rien.

Ce sont des logiciels WYSIWYG. Alors non, je ne me suis pas endormi sur mon clavier, ça signifie: What You See Is What You Get! Toujours Pas? Cela veut dire, « Ce que tu vois c’est ce que tu obtiens ».  Un éditeur de texte aussi, tu me diras, si tu tapes n’importe quoi, tu obtiens n’importe quoi, c’est très vrai, mais c’est pas l’objectif non plus. Un éditeur de texte va juste contenir du texte, des balises, etc, mais le visuel du texte qu’on aura saisi, ne sera pas ce que l’on veut, (normalement…).Il faudra ensuite que le navigateur (Google, Firefox, Opéra, …) traduise les balises et affiche ce qu’il a traduit. Nous verrons cela plus tard, revenons aux éditeurs de texte…

Bloc note / et Edit

Alors là, tu dois te dire, « ok , mais alors c’est quoi? je trouve ça où? ça coûte combien? ».

En fait, tu as déjà ce qu’il faut. Si tu utilises Windows, tu dois avoir bloc note, qui est un éditeur qui permet de taper des kilomètres de ligne de texte. Sous Mac, il y a le même type de logiciel qui s’appelle TextEdit.

Ces deux logiciels, dont tu te servais uniquement pour comprendre comment installer le crack du dernier jeux à la mode dans les années 2000(les plus jeunes ne comprendrons pas la blague…), vont te permettre de taper tes premières ligne de code.

En effet, ils ne proposent aucun outil de formatage du texte (pas de titre, pas de liste, pas d’image, bref uniquement ce qui est inscrit sur les touches de ton clavier.

Voici donc pour exemple le code du projet saisi dans TextEdit (oui je suis sous Mac, façon de parler, bien sûr…):

code-hml-textedit

Cliques sur l’image pour l’agrandir.

Tu vas enfin vraiment pouvoir te servir de ce logiciel qui ne te servais à rien jusque là mais que tu as payé dans ta licence windows, ouf, ça va rentabiliser l’achat! Donc c’est super, mais il y a beaucoup mieux!

Les éditeurs de texte

Tu as sans doute remarqué si tu l’as vu, que dans le projet Codepen (je te remets le lien ici), le code était en couleur, et le texte destiné à être lu par l’utilisateur était en blanc.

code-html-sublim-text

Cliques sur l’image pour l’agrandir.

Et bien les éditeurs de textes dont je vais te parler font tout cela. Ils reconnaissent les balises HTML, ce qui rend la lecture du code beaucoup plus simple! En revanche, pour qu’ils la reconnaissent, il faut que tu te créé un document enregistré en .html. Si tu ne fais pas ça, tu auras juste bloc note avec un fond noir… Je me suis fais un peu avoir avec ça la première fois. Idem, lorsqu’on fera du CSS, il te faudra créer un fichier .css, du javascript, un .js, etc.

Pour ma part, j’ai assez peu travaillé avec TextEdit, puisque dans les cours d’Openclassrooms, Mathieu Nebra travaille avec un éditeur de texte.

Voici les éditeurs les plus utilisés et gratuit à ma connaissance, mais il en existe surement plein d’autre:

Pour ma part j’utilise SublimText et j’en suis très content. Je compte tester Atom d’ici peu, je te dirai alors ce que je préfère. Je sais que chacun propose des tas de plug-in et extension pour coder plus vite notamment. Je connais juste un plug-in sur SublimText qui s’appelle Emmet, qui permet de taper le code plus vite, et surtout , qui pense à refermer les balises… j’en parlerais surement dans un prochain article.

En attendant, amuse-toi bien avec les éditeurs de texte et dans tes premiers pas dans le code. Tu vas voir que taper du code sur un fond noir et avec des balises de couleur, c’est presque MATRIX… j’ai dit presque!

 

A+

Guillaume