HTML transcript of initial version of II-1

This commit is contained in:
Lephenixnoir 2020-03-23 20:46:58 +01:00
parent 14c248b460
commit eb994a8cdf
Signed by untrusted user: Lephenixnoir
GPG Key ID: 1BBA026E13FC0495
2 changed files with 49 additions and 0 deletions

43
II-1.html Normal file
View File

@ -0,0 +1,43 @@
<h1>Afficher du texte</h1>
<p><i>Niveau : 1/3<br>
Temps : 10 minutes</i></p>
<p>Quoi de mieux pour commencer que de faire un programme qui affiche le nom du futur héros de ton jeu ainsi que son histoire&nbsp;?</p>
<p>Comme nous l'avons vu dans le chapitre précédent, rendez-vous dans l'éditeur de programme pour écrire tes premières lignes de code.</p>
<p>Pour qu'un programme affiche du texte, il suffit de le mettre entre guillemets. Ainsi, si tu veux que le programme affiche à l'écran le texte HELLO WORLD (classique dans le monde de la programmation), tu dois taper le code suivant dans l'éditeur puis appuyer sur [EXE] pour retourner à la ligne&nbsp;:</p>
<pre>"HELLO WORLD"</pre>
<p>Tu te demandes certainement comment écrire des lettres et où se trouvent les guillemets. L'image suivante devrait répondre à ces questions&nbsp;:</p>
<figure>
<center><img src="images/II-1/text-input.png"></center>
</figure>
<p>Si tu exécutes ton programme (rappelle-toi du chapitre précédent, il faut revenir à la liste des programmes en appuyant sur [EXIT], sélectionner le programme puis appuyer sur [EXE]), tu verras s'afficher HELLO WORLD sans les guillemets en haut à gauche de l'écran. Comme ceci&nbsp;:</p>
<figure>
<center><img src="images/II-1/execution.png"></center>
</figure>
<p>Tu peux expérimenter par toi-même en modifiant le texte comme tu le souhaite, le rallonger, en mettre plusieurs d'affilés sur plusieurs lignes etc. Tu remarqueras certainement que tu ne peux pas mettre plus de 21 caractères par ligne et que seules les 6 dernières lignes sont affichées. Chaque nouveau texte entre guillemet s'écrit et s'affiche sur une nouvelle ligne.</p>
<p>D'ailleurs, si tu ne l'as pas déjà découvert par toi-même, une petite astuce pour centrer le texte sur l'écran consiste à afficher des lignes vides, puis à ajouter des espaces avant le texte&nbsp;:</p>
<pre>""
""
""
" HELLO WORLD"</pre>
<p>Ce qui aura pour résultat&nbsp;:</p>
<figure>
<center><img src="images/II-1/centering.png"></center>
</figure>
<p>Tu as déjà tout ce qu'il te faut pour afficher sur première ligne le nom de ton héros et sur les suivantes le début de son histoire&nbsp;!</p>
<p>Avant de clore ce chapitre, il me semble opportun de te donner le moyen d'effacer l'écran. Bien sûr, si tu es malin, tu peux mettre plein de texte vide sur plusieurs lignes. Mais il y a plus simple/rapide/élégant : la fonction ClrText.</p>

View File

@ -9,3 +9,9 @@ figure img {
border-radius: 2px;
padding: 2px;
}
pre {
background: #e0e0e0;
border-radius: 2px;
padding: 4px 8px;
}