1- Tout d'abord, il va falloir créer un site web. Pour cela le langage html s'impose. Mais html n'est pas un langage de code, il s'agit de texte descriptif brut. Choisir une application d'éditeur de texte. Ici, l'application choisie est application jedit, exécutable soit à l'aide du Terminal, soit à l'aide de l'onglet applications. C'est dans cette éditeur que va figurer tout ce qui sera sur le site. Mais attention : l'écrire simplement ne va pas donner l'apparence souhaitée. Mais attention : écrire simplement ne va pas donner l'apparence souhaitée (Tester en écrivant par exemple  : GÉREZ VOS TÂCHES sur la première ligne et gérez votre temps sur la deuxième. Enregistrer le fichier, le renommer en terminant par .html exemple : gestaches.html. Aller à l'endroit où le document a été enregistré, trouver gestaches.html et double cliquer : on se rend compte que la forme voulue n'est pas ce qui est donné. Il va donc s'agir d'insérer des balises. Les balises servent à indiquer à l'appareil la façon dont il doit afficher les données qu'on lui donne, selon une règle relativement simple mais qui peut tout fausser si elle elle n'est pas respectée : toute balise qui s'ouvre se referme. ( Un exemple fictif de balise : <titre>Hello, world!</titre>)

<!DOCTYPE html> Seule balise qui ne se refermera pas, elle indique au navigateur qu'il s'agit d'une page html

<html> La balise la plus importante, elle ouvre et ferme l'entier du corps de la page <head> Contiendra les informations sur le document et la façon il va être codé <title>Gérez vos tâches</title> Ce titre sera celui qui s'affichera sur l'onglet dans le navigateur. Seulement, si on jette un coup d'oeil à la page telle qu'elle est actuellement, (enregistrer, double-cliquer sur le document gestaches.html) il est possible que le titre présente des petits aléas. Ce problème vient du fait que l'encodage n'est pas précisé. On va alors ajouter, à la ligne au-dessus de <title>, une balise d'encodage(1) : <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head>

2 - Maintenant, pour que gestâches puisse savoir quand la tâche doit être effectuée, il faut que le site connaisse l'heure du serveur. Pour cela, insérer les fonctions(2) suivantes dans <head>, en premier élément de la balise ouvrante : @@<div id="div_horloge"></div>

<script type="text/javascript">

window.onload=function() {

 horloge('div_horloge');

};




function horloge(el) {



 if(typeof el=="string") { el = document.getElementById(el); }
 function actualiser() {
   var date = new Date();
   var str = date.getHours();
   str += ':'+(date.getMinutes()<10?'0':'')+date.getMinutes();
   str += ':'+(date.getSeconds()<10?'0':'')+date.getSeconds();
   el.innerHTML = str;
 }
 actualiser(); 
 setInterval(actualiser,1000);



}
</script>@@




3 - Pour écrire la tâche à faire, on a besoin d'un espace où l'écrire. On ouvre d'abord la balise
<body>
Qui va contenir le corps du texte. Tout ce qui figure dans cette balise se retrouve sur la page.
@@<p>



       <label for="tâche">Tâche 1 :</label>
       <input type="text" name="tâche" id="tâche" size="30" maxlength="10" />
   </p>@@



Case à remplir
@@<label for="heure">Heure : </label>
<input type="datetime-local"/>@@
Date et heure de la tâche
(Si une simple zone de saisie de texte apparaît, vérifier sur http://caniuse.com/#feat=input-datetime que le navigateur accepte la fonction datetime. Si non, voir ici https://code.tutsplus.com/tutorials/quick-tip-create-cross-browser-datepickers-in-minutes--net-20236)
@@<label>



 <input type="checkbox" id="cbox1" value="checkbox1">
 Tâche faite!



</label>@@
La checkbox qui permet de valider la tâche.
On répète autant de fois que souhaité l'étape 3, toujours à l'intérieur de la balise <body>
</body>
</html>




Pour conclure, il s'agit d'une très minime esquisse de tout ce qui est possible de faire avec html. Un bon moyen de l'améliorer est de le gérer avec CSS, qui permettrait de le rendre attractif visuellement, ou de mettre en place un système d'alarme qui se déclencherait au moment où la tâche doit être effectuée.







(1):
(2):