<h1 id="introduction-au-html">Introduction au HTML</h1>
<p>Vous vous demandez sûrement ce qu'est un template.</p>
<p>Un template est un fichier que vous pouvez réutiliser afin de présenter des informations différentes sous un seul et même format. Par exemple, vous pourriez avoir envie d'utiliser un template pour écrire une lettre : bien que son contenu varie ou qu'elle puisse être adressée à des personnes différentes, sa forme reste la même.</p>
<p>Le format d'un template Django est décrit grâce à un langage qui s'appelle HTML (c'est le même HTML que celui dont nous parlions dans le chapitre un, <strong>Comment fonctionne l'Internet</strong>).</p>
<h2 id="quest-ce-que-le-html-">Qu'est-ce que le HTML ?</h2>
<p>HTML est un code qui est interprété par votre navigateur (Chrome, Firefox ou Safari) et qui permet d'afficher une page web à l'utilisateur.</p>
<p>L'abréviation HTML signifie « HyperText Markup Language ». <strong>HyperText</strong> signifie que c'est un type de texte qui supporte les hyperliens entre les pages. <strong>Markup</strong> signifie que nous avons pris un document et que nous avons balisé le code pour signifier (ici, au navigateur) comment il faut interpréter la page. Le code HTML est construit à l'aide de <strong>balises</strong>, chacune commençant par <code><</code> et finissant par <code>></code>. Ces balises représentent des <strong>éléments</strong> markup.</p>
<h2 id="votre-premier-template-">Votre premier template !</h2>
<p>Créer un template signifie créer un fichier template. Et oui, encore des fichiers ! Vous aviez déjà probablement remarqué que tout tourne autour des fichiers.</p>
<p>Les templates sont sauvegardés dans le dossier <code>blog/templates/blog</code>. Tout d'abord, créons un dossier appelé <code>templates</code> à l'intérieur du dossier de notre blog. Ensuite, créez un autre dossier appelé <code>blog</code> à l'intérieur de votre dossier templates :</p>
<pre><code>blog
└───templates
└───blog
</code></pre><p>Vous pourriez vous demander pourquoi nous avons besoin de deux dossiers portant tous les deux le nom <code>blog</code>. Comme vous le découvrirez plus tard, c'est une convention de nommage qui va nous faciliter la vie quand les choses vont commencer à devenir compliquées.</p>
<p>Et maintenant, créez un fichier <code>post_list.html</code> (laisser le vide pour le moment) dans le dossier <code>templates/blog/blog</code>.</p>
<p>Allons regarder à quoi ressemble notre site maintenant : <a href="http://127.0.0.1:8000/" target="_blank">http://127.0.0.1:8000/</a></p>
<blockquote>
<p>Si vous avez encore l'erreur <code>TemplateDoesNotExist</code>, essayez de redémarrer votre serveur. Allez sur votre ligne de commande et arrêtez votre server en appuyant simultanément sur Ctrl+C (les touches Control et C de votre clavier). Vous pouvez le relancer en tapant la commande <code>python manage.py runserver</code>.</p>
</blockquote>
<p><img src="images/step1.png" alt="Figure 11.1"></p>
<p>Et voilà, il n'y a plus d'erreurs ! Bravo :) Cependant, notre site ne peut rien faire d'autre pour le moment qu'afficher une page blanche. La faute à notre template que nous avons laissé vide. Allons corriger ça.</p>
<p>Ouvrez le nouveau fichier dans l’éditeur de code et ajoutez le morceau suivant :</p>
<p></p><p class="code-label">blog/templates/blog/post_list.html</p><p></p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Hi there!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>It works!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
</code></pre>
<p>Alors, à quoi ressemble notre site web maintenant ? Allons le découvrir : <a href="http://127.0.0.1:8000/" target="_blank">http://127.0.0.1:8000/</a></p>
<p><img src="images/step3.png" alt="Figure 11.2"></p>
<p>Ça marche ! Bon boulot :)</p>
<ul>
<li>La balise la plus élémentaire, <code><html></code>, figure toujours au début de n'importe quelle page web tandis que <code></html></code> est toujours située à la fin. Comme vous pouvez le constater, l'intégralité du contenu de notre page web est située entre la balise de départ, <code><html></code>, et la balise fermante, <code></html></code></li>
<li><code><p></code> est la balise pour les éléments de type paragraphe. <code></p></code> permet de fermer chaque paragraphe.</li>
</ul>
<h2 id="head-et-body">Head et body</h2>
<p>Chaque page HTML est divisée en deux éléments : <strong>head</strong> (entête) et <strong>body</strong> (corps.</p>
<ul>
<li><p><strong>head</strong> est un élément qui contient des informations sur le document : son contenu ne s'affichera pas à l'écran.</p>
</li>
<li><p><strong>body</strong> est un élément qui contient tout le reste. Son contenu s'affichera à l'écran et constituera notre page web.</p>
</li>
</ul>
<p>Nous utilisons <code><head></code> pour transmettre la configuration de la page au navigateur tandis que <code><body></code> l'informe sur le contenu de la page.</p>
<p>Par exemple, vous pouvez donner un titre à votre page web en utilisant l'élément titre dans le <code><head></code> :</p>
<p></p><p class="code-label">blog/templates/blog/post_list.html</p><p></p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>Ola's blog<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Hi there!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>It works!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
</code></pre>
<p>Sauvegardez votre fichier et actualisez la page.</p>
<p><img src="images/step4.png" alt="Figure 11.3"></p>
<p>Vous avez vu comment le navigateur a compris que « Le Blog d'Ola » est le titre de votre page ? Il a interprété <code><title>Le blog d'Ola</title></code> et a placé ce texte dans la barre de titre de votre navigateur (c'est ce titre qui va être aussi utilisé lorsque vous créez un marque-page, etc.).</p>
<p>Vous avez aussi probablement remarqué que chaque balise ouvrante possède sa <em>balise fermante</em>, composée d'un <code>/</code>, est qu'elles <em>encadrent</em> les différents éléments. Cela signifie que vous ne pouvez pas fermer une balise si celles imbriquées à l'intérieur de celle-ci n'ont pas été fermées.</p>
<p>Pensez à lorsque vous mettez des choses à l'intérieur de boîtes. Vous avez une grosse boîte, <code><html></html></code>; à l'intérieur de celle-ci, on trouve une plus petite boîte, <code><body></body></code>, qui contient elle-même d'autres petites boîtes, <code><p></p></code>.</p>
<p>Essayez de vous rappeler de cet exemple lorsque vous utilisez les balises <em>fermantes</em> et que vous avez des éléments <em>imbriqués</em>. Si vous ne suivez pas ces règles, votre navigateur risque de ne pas être capable d'interpréter votre code correctement et votre page web sera mal affichée.</p>
<h2 id="personnaliser-votre-template">Personnaliser votre template</h2>
<p>Et si nous en profitions pour nous amuser un peu ? Essayons de personnaliser notre template ! Voici quelques balises que vous pouvez utiliser :</p>
<ul>
<li><code><h1>Titre 1</h1></code> pour vos titres les plus importants</li>
<li><code><h2>Titre 2</h2></code> pour les sous-titres</li>
<li><code><h3>Titre 3</h3></code> ... et ainsi de suite jusqu'à <code><h6></code></li>
<li><code><p>Un paragraphe contenant du texte</p></code></li>
<li><code><em>texte</em></code> permet de mettre l'accent sur une partie du texte</li>
<li><code><strong>texte</strong></code> permet de mettre encore plus l'accent sur une partie de texte</li>
<li><code><br></code> permet d'insérer un saut de ligne (vous ne pouvez rien mettre à l'intérieur d'un élément br et il n'y a pas de balise fermante)</li>
<li><code><a href="https://djangogirls.org">link</a></code> permet de créer un lien</li>
<li><code><ul><li>premier item</li><li>second item</li></ul></code> permet de créer des listes, comme celle que nous sommes en train de faire !</li>
<li><code><div></div></code> permet de créer une section au sein de la page</li>
</ul>
<p>Voici un exemple d’un modèle complet, copiez et collez-le dans <code>blog/templates/blog/post_list.html</code> :</p>
<p></p><p class="code-label">blog/templates/blog/post_list.html</p><p></p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>Django Girls blog<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h1</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/"</span>></span>Django Girls Blog<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>published: 14.06.2014, 12:14<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h2</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>My first post<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>published: 14.06.2014, 12:14<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h2</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>></span>Mon second post<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
</code></pre>
<p>Nous avons créé trois sections à l'aide de <code>div</code>.</p>
<ul>
<li>Le premier <code>div</code> contient le titre de notre blogpost - c'est à la fois un titre et un lien</li>
<li>Les deux autres <code>div</code> contiennent nos posts avec leur date de publication, un titre de post <code>h2</code> qui est cliquable ainsi que deux <code>p</code>s (paragraphe) de texte : un pour la date et l'autre pour notre post.</li>
</ul>
<p>Ce qui nous donne :</p>
<p><img src="images/step6.png" alt="Figure 11.4"></p>
<p>Yaaay ! Pour l'instant, notre template nous permet seulement d'afficher les <strong>mêmes informations</strong> alors que nous disions précédemment qu'il doit nous permettre d'afficher des informations <strong>différentes</strong> utilisant le <strong>même format</strong>.</p>
<p>Ce qu'on aimerait pouvoir faire maintenant, c'est d'afficher les posts que nous avons créés précédemment dans l'interface d'administration de Django. Penchons-nous là dessus.</p>
<h2 id="une-dernière-chose--déployer-">Une dernière chose : déployer !</h2>
<p>Ne serait-il pas génial de pouvoir voir tous ces changements en ligne ? Hop, déployons à nouveau !</p>
<h3 id="commiter-et-pusher-votre-code-sur-github">Commiter et pusher votre code sur GitHub</h3>
<p>Tout d'abord, allons voir quels sont les fichiers qui ont changé depuis notre dernier déploiement (lancez ces commandes dans votre console locale et non celle de PythonAnywhere) :</p>
<p></p><p class="code-label">command-line</p><p></p>
<pre><code>$ git status
</code></pre><p>Assurez-vous d'être dans le dossier <code>djangogirls</code>. Voici la commande qui permet de dire à <code>git</code> d'inclure tout les changements qui ont eu lieu dans ce dossier :</p>
<p></p><p class="code-label">command-line</p><p></p>
<pre><code>$ git add --all .
</code></pre><blockquote class="clearfix alert alert-info"><strong class="fa fa-2x fa-edit"></strong>
<p> <code>--all</code> signifie que <code>git</code> va aussi voir si vous avez supprimé des fichiers (par défaut, il ne s'intéresse qu'aux nouveaux fichiers ou à ceux modifiés). Essayez de vous rappeler du chapitre 3 : <code>.</code> permet de désigner le dossier courant.</p>
</blockquote>
<p>Avant que nous puissions uploader nos fichiers, regardons ce que <code>git</code> à l'intention de faire (tous les fichiers que <code>git</code> va uploader vont apparaître en vert) :</p>
<p></p><p class="code-label">command-line</p><p></p>
<pre><code>$ git status
</code></pre><p>On y est presque : nous devons maintenant lui dire de sauvegarder ces changements dans son historique. Nous allons y ajouter un "message de commit" qui nous permettra de décrire ce qui a été changé. Vous pouvez mettre ce que vous voulez dans un message de commit. Généralement, il est préférable de mettre quelque chose d'utile qui vous permettra de vous souvenir plus tard de ce que vous avez fait.</p>
<p></p><p class="code-label">command-line</p><p></p>
<pre><code>$ git commit -m "Modification du HTML du site"
</code></pre><blockquote class="clearfix alert alert-info"><strong class="fa fa-2x fa-edit"></strong>
<p> N'oubliez pas d'utiliser de doubles guillemets autour de votre message de commit.</p>
</blockquote>
<p>Une fois que nous avons fait cela, nous pouvons mettre en ligne (pusher) nos modifications sur GitHub :</p>
<p></p><p class="code-label">command-line</p><p></p>
<pre><code>$ git push
</code></pre><h3 id="puller-les-modifications-sur-pythonanywhere-et-recharger-son-appli-web">Puller les modifications sur PythonAnywhere et recharger son appli web</h3>
<ul>
<li>Allez sur la page des <a href="https://www.pythonanywhere.com/consoles/" target="_blank">consoles de PythonAnywhere</a>. Retournez dans votre <strong>console Bash</strong> ou ouvrez-en une nouvelle puis tapez la commande suivante :</li>
</ul>
<p></p><p class="code-label">PythonAnywhere command-line</p><p></p>
<pre><code>$ cd ~/<your-pythonanywhere-domain>.pythonanywhere.com
$ git pull
[...]
</code></pre><p>N’oubliez pas de remplacer <code><your-pythonanywhere-domain></code> avec votre propre sous-domaine PythonAnywhere, sans les chevrons. Votre nom de sous-domaine est normalement votre nom d'utilisateur PythonAnywhere, mais dans certains cas, il peut être un peu différent (par exemple si votre nom d'utilisateur contient des lettres capitales). Donc, si cette commande ne fonctionne pas, utilisez la commande <code>ls</code> (lister fichiers) pour trouver votre sous-domaine/nom de dossier, puis <code>cd</code> jusque là.</p>
<p>Maintenant, vous voyez votre code en train d'être téléchargé. Si vous voulez vérifier que le nouveau code est arrivé sur PythonAnywhere, vous pouvez aller sur la page <strong>"Files"</strong> et y retrouver les fichiers (vous pouvez naviguer dans les différentes pages de PythonAnywhere depuis le menu).</p>
<ul>
<li>Pour finir, n'oubliez pas de recharger votre application web : onglet <a href="https://www.pythonanywhere.com/web_app_setup/" target="_blank">Web</a> puis cliquez sur le bouton <strong>Reload</strong>.</li>
</ul>
<p>Retournez sur votre site en cliquant sur l'adresse en haut de la page : normalement, vous devriez voir la dernière version. Si ce n'est pas le cas, ce n'est pas grave : n'hésitez pas à demander de l'aider à votre coach. :)</p>