Úvod do HTML

Môžno sa pýtaš, čo jej šablóna?

Šablóna je súbor, ktorý môžeme znova opakovane použiť, aby sme prezentovali nové informácie v konzistentnom formáte - šablónu môžeš použiť napríklad ako pomôcku pri písaní listu, pretože aj napriek tomu, že každý list môže obsahovať rozdielnu správu a byť adresovaný inej osobe, bude mať rovnaký formát.

Formát Django šablóny je popísaný v jazyku nazývanom HTML (to je to HTML, ktoré sme spomenuli v prvej kapitole Ako funguje Internet).

Čo je HTML?

HTML je kód, ktorý je interpretovaný tvojím webovým prehliadačom - ako napríklad Chrome, Firefox alebo Safari - aby tak zobrazil užívateľom webové stránky.

HTML znamená "HyperText Markup Language". HyperText znamená, že sa jedná o typ textu, ktorý podporuje hypertextové odkazy medzi stránkami. Markup znamená, že sme vzali dokument a označili ho kódom aby sme niečomu povedali (v tomto prípade prehliadaču) ako interpretovať stránku. HTML kód je budovaný pomocou tagov, ktoré začínajú znakom < a končia znakom >. Tieto tagy reprezentujú značkovacie (Markup) elementy.

Tvoja prvá šablóna!

Vytvorenie šablóny znamená vytvorenie súboru šablóny. Všetko je súbor, však? To si si asi už všimla.

Šablóny sú uložené v zložke blog/templates/blog. Takže najprv vytvor v zložke blogu zložku s názvom templates. Potom vytvor ďalšiu zložku s názvom blog v zložke templates:

blog
└───templates
    └───blog

(Možno sa pýtaš prečo potrebujeme dve zložky s menom blog - ako neskôr zistíš, je to len užitočna konvencia, ktorá ti uľahčí život keď sa veci začnú komplikovať.)

A teraz vytvor súbor post_list.html (zatiaľ ho ponechaj prázdny) v zložke blog/templates/blog.

Pozri sa, ako momentálne vyzerá tvoja stránka: http://127.0.0.1:8000/

Pokiaľ stále vidíš chybu TemplateDoesNotExist, skús vyreštartovať svoj server. Choď do príkazového riadku, zastav server stlačením Ctrl+C (stlač naraz tlačidlá Control a C) a spusti ho znova pomocou príkazu python manage.py runserver.

Žiadne ďalšie chyby! Gratulujeme :) Avšak tvoja stránka zatiaľ neukazuje nič, okrem prázdnej stránky, pretože tvoja šablóna je taktiež prázdna. To musíme opraviť.

Pridaj nasledujúci kód do tvojho súboru šablóny:

{% filename %}blog/templates/blog/post_list.html{% endfilename %}

<html>
    <p>Hi there!</p>
    <p>It works!</p>
</html>

Takže ako momentálne vyzerá tvoja stránka? To môžeš zistiť kliknutím na: http://127.0.0.1:8000/

Funguje to! Dobrá práca :)

Najzákladnejší tag, <html>, je vždy na začiatku každej webovej stránky a </html> je vždy na jej konci. Ako môžeš vidieť, celý obsah stránky sa nachádza medzi začínajúcim tagom <html> a uzatvárajúcim tagom </html>
<p> je tag pre element odstavca; </p> uzatvára každý odstavec

Head a body

Každá HTML stránka je taktiež rozdelená do dvoch elementov: head a body.

head je element, ktorý obsahuje informácie o dokumente, ktoré nie sú zobrazené na obrazovke.
body je element, ktorý obsahuje všetko ostatné zobrazené ako časť webovej stránky.

<head> používame, aby sme povedali prehliadaču o konfigurácii stránky a <body> aby sme mu povedali, čo na stránke je.

Napríklad môžeš dať stránke titulok pomocou title elementu v hlavičke <head> takto:

{% filename %}blog/templates/blog/post_list.html{% endfilename %}

<html>
    <head>
        <title>Ola's blog</title>
    </head>
    <body>
        <p>Hi there!</p>
        <p>It works!</p>
    </body>
</html>

Ulož súbor a znova načítaj svoju stránku.

Všimni si ako prehliadač rozumie, že "Ola's blog" je titulok tvojej stránky? Interpretuje <title>Ola's blog</title> a vkladá text ako názov záložky (tento názov bude použitý aj keď si stránku uložíš do záložky a tak ďalej).

Pravdepodobne si taktiež všimneš, že každý začínajúci tag má svoj uzatvárajúci tag obsahujúci /, a že elementy sú vnorené (tj. nemôžeš daný tag zatvoriť, kým nie sú taktiež zatvorené všetky tagy, ktoré sú v jeho vnútri).

Je to ako vkladať veci do krabice. Máš jednú veľkú krabicu, <html></html>; vo vnútri je <body></body>, a tá obsahuje menšie krabice: <p></p>.

Musíš dodržovať pravidlá uzatvárania tagov a vnorenia elementov - pokiaľ ich nebudeš dodržovať, prehliadač nemusí správne interpretovať tagy a tvoja stránka bude zobrazená nesprávne.

Uprav svoju šablónu

Môžeš sa trocha pohrať s tým, že budeš upravovať svoju šablónu! Tu je zopár užitočných tagov:

<h1>Hlavný nádpis</h1> - pre tvoj najdôležitejší nádpis
<h2>Podnádpis</h2> pre nádpis na nižšej úrovni
<h3>Pod-podnádpis</h3>.. a tak ďalej až do <h6>
<p>Odsek textu</p>
<em>text</em> zdôrazňuje tvoj text
<strong>text</strong> zvýrazňuje tvoj text o čosi viac
<br> vkladá nový riadok (do br nemôžeš nič vložiť a nemá uzatvárací tag)
<a href="https://djangogirls.org">link</a> vytvára odkaz
<ul><li>prvá položka</li><li>druhá položka</li></ul> vytvára zoznam ako tento!
<div></div> definuje sekciu stránky

Tu je príklad úplnej šablóny, skopíruj ho do súboru blog/templates/blog/post_list.html:

{% filename %}blog/templates/blog/post_list.html{% endfilename %}

<html>
    <head>
        <title>Django Girls blog</title>
    </head>
    <body>
        <div>
            <h1><a href="/">Django Girls Blog</a></h1>
        </div>

        <div>
            <p>published: 14.06.2014, 12:14</p>
            <h2><a href="">My first post</a></h2>
            <p>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.</p>
        </div>

        <div>
            <p>published: 14.06.2014, 12:14</p>
            <h2><a href="">My second post</a></h2>
            <p>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.</p>
        </div>
    </body>
</html>

Vytvorili sme tri div sekcie.

Prvá div sekcia obsahuje titulok nášho blogu - je to nádpis a odkaz
Ďalšie dva div elementy obsahujú príspevky blogu s časom publikovania, h2 nádpisom príspevku, na ktorý sa dá kliknúť a dva p (odstavce) textu, jeden pre dátum a druhý pre náš príspevok.

Výsledok je nasledovný:

Jupí! Ale zatiaľ naša šablóna zobrazila len presne rovnaké informácie - kým pred chvíľou sme hovorili, že nám šablóny dovoľujú zobrazovať rozdielne informácie v rovnakom formáte.

To čo v skutočnosti chceme spraviť je zobraziť reálne príspevky pridané v Django admin rozhraní - a to je to, čo teraz spravíme.

Ešte jedna vec: nasaďte to!

Bolo by skvelé, ak by sme všetky tieto veci mohli vidieť naživo na Internete, že? Spravme ďalšie PythonAnywhere nasadenie:

Commitni a pošli svoj kód na GitHub

Najprv sa pozrime, ktoré súbory sa zmenili od posledného nasadenia (tieto príkazy spusti lokálne, nie na PythonAnywhere):