Webstránka ako samostatný súbor

Doteraz sme si preberaný kód jazyka HTML skúšali v online simulátore. Simulátor fungoval tak, že v ľavom bloku sme písali kód v jazyku HTML a v pravom bloku sa zobrazoval tak, ako by sa mal zobraziť v prehliadači. Simulátor ako taký bola v podstate len tá časť napravo - blok, v ktorom sa zobrazoval výsledok. Ale čo vlastne simuloval? Simuloval všeobecné správanie sa ktoréhokoľvek prehliadača. Každá webová stránka napísaná v jazyku HTML je v podstate obyčajný jednoduchý textový súbor (text pretože kód – program – je len čistý text v danom jazyku alebo v ich kombináciách), ktorého prípona je .html (alebo aj .htm, namiesto .txt, .doc, .rtf a podobne). Aby sme skutočne vytvorili samostatnú vlastnú webstránku, musíme vytvoriť súbor, v ktorom bude jej celý kód a uložiť ho s príponou .html. Tento súbor potom stačí otvoriť v ktoromkoľvek prehliadači a výsledok sa nám zobrazí pred očami. Poďme si to ale vyskúšať sami, čo sme to vlastne doteraz robili. Aby sme sa chápali...to, čo budeme zapisovať do súboru, bude to isté, čo sme písali v ľavom bloku. A to, čo sme videli v pravom bloku (výsledok – result), budeme teraz vidieť v prehliadači. Poďme teda na to!

Otvorte si nejaký jednoduchý textový editor, v ktorom budeme náš program písať. V prostredí Windows napríklad poznámkový blok (Notepad), v Linuxe Gedit alebo v Macu TextEdit. Do nového dokumentu zložte iba tento text bez akéhokoľvek elementu:

Ahoj svet!

Následne tento súbor uložte napríklad ako index (použite toto meno súboru) a príponu dajte .html. Ak s tým máte problém, nevadí, uložte ako .txt a potom len premenujte natvrdo príponu na .html. Ak používate TextEdit v prostredí Mac OS X, v nastaveniach pred vytvorením súboru musíte mať zaškrtnutú voľbu ukladať čísty text (plain text). Následne kliknite na súbor dvakrát a mal by sa vám automaticky otvoriť vo vašom defaultnom prehliadači. Na obrazovke teraz vidíte už len výsledok vášho kódu, vašu webstránku. Ak sa vám súbor nespustí automaticky v prehliadači, dajte v prehliadači možnosť z menu súbor-otvoriť a nájdite váš súbor na disku (File-Open). Gratulujem, práve ste napísali sami vašu prvú ozajstnú webstránku, ktorú si prehliadate cez webový prehliadač! Takisto by ste sa k nej dostali aj cez internet (napríklad www.mojawebstranka.sk), keby bola niekde zavesená na internete – niekde na serveri (nebojte, aj to sa kus neskôr naučíme :-) ) a takto by ste ju videli. Milé však?

Keďže sme už pochopili, že každá webstránka je len obyčajný textový súbor, v ktorom sa nachádza kód, poďme si to dokázať, že to je naozaj tak. Len by som upozornil, aby ste teraz nemali množstvo súborov kade tade po počítači. Určite vám došlo, že všetky kódy (jednotlivé ukážky), ktoré sme sa doteraz naučili, môžete mať osobitne uložené v samostatných dokumentoch, môžete ich ale aj všetky vložiť do jedného súboru, jednotlivé ukážky si napríklad oddeliť nejakým nadpisom a uložiť a zobraziť a budete mať na jednej webstránke všetko, čo sme sa doteraz naučili ;-) Vráťme sa ale k zdrojovému kódu. Neviem, aký prehliadač používate, ale ja preferujem na učenie Firefox od Mozilly. Kľudne však môžete používať Chrome od Google, Internet Explorer od Microsoftu (toto osobne neodporúčam...), Operu alebo Safari (Mac). Teraz si zobrazíme zdrojový kód našej stránky, čiže ten kód (text), ktorý tvorí našu stránku, resp. ten kód, ktorý určuje to, ako naša stránka vyzerá a ako sa správa. Zdrojový kód sa zobrazí nasledovne:

Mozilla Firefox:
stlačte na klávesnici skratku CTRL + U na Windows (CMD + U na Mac OS X) alebo cez menu kliknite na položku Nástroje – Vývojár – Zdrojový kód (Tools – Web developer – Source code)

Google Chrome:
stlačte na klávesnici skratku CTRL + U na Windows (CMD + ALT + U na Mac OS X) alebo cez menu kliknite na položku Nastavenia – Viac nástrojov – Zobraziť kód (Tools – More tools – View source)

Opera:
stlačte na klávesnici skratku CTRL + U na Windows alebo cez menu kliknite na položku Nástroje – Vývojár – Zobraziť zdrojový kód (Developer – View page source)

Internet Explorer:
stlačte na klávesnici skratku CTRL + U na Windows alebo cez menu kliknite na položku Zobraziť – Zdroj (View – Source)

Safari:
stlačte na klávesnici skratku CMD + Option + U na Mac OS X alebo kliknite na prázdnu bielu plochu stránky pravým tlačidlom a vyberte možnosť Zobraziť zdrojový kód stránky (Show page source)

Zdrojový kód stránky by sa vám mal zobraziť buď v novom okne alebo na novej karte. Pozrime sa teraz spolu na zdrojový kód našej stránky. Nemalo by tam byť nič iné, iba náš text. To je dôkaz toho, že našu stránku naozaj tvorí iba to, čo sa v našom zdrojovom kóde nachádza. Takto jednoducho si môžete pozrieť kód ktorejkoľvek stránky, ktorú si prezeráte, zatiaľ to ale ešte nerobte, niečo si vysvetlíme a potom sa na to pozrieme spolu. Doteraz sme písali čo už do simulátora alebo do textového súboru len kód, resp. text alebo tagy, ktoré sme sa učili. Súbor definujúci webstránku má však troška zložitejšiu (predpísanú) štruktúru, ktorý by sa mala dodržiavať. Doteraz sme sa tým zbytočne nezaťažovali, pretože ak si aj skúsite dať do súboru kód z nejakej ukážky, ktorý obsahuje tagy, napríklad tabuľku alebo čokoľvek iné, zobrazí sa v prehliadači správne (skúste si to). Ako sme si už povedali skorej, všetko, čo tvorí našu webstránku a všetko čo v sebe zahŕňa, je definované v jej zdrojovom kóde. Kód bežnej webstránky obsahuje stovky riadkov a sám si naťahuje, resp. používa viac externých súborov. Aby bol kód prehľadný a usporiadaný, má webstránka svoju vlastnú predpísanú štruktúru, podľa ktorej je jasné, kde sa čo zapisuje.

Poďme si teda ukázať základnú štruktúru zdrojového kódu webstránky. Každý súbor napísaný v jazyku HTML musí začínať so špeciálnym tagom, ktorý určuje, aký typ jazyka je použitý v tomto súbore. Jazyk HTML, ako všetko čo sa týka IT, sa neustále vyvíja a vylepšuje a tak vznikajú jeho nové verzie a štandardy. Aby prehliadač vedel, o ktorú verziu sa na danej stránke jedná (aby ju korektne zobrazil), je to špecifikované na začiatku dokumentu v tomto tagu. V čase písania týchto kapitol je aktuálne verzia jazyka HTML5. Pre špecifikovanie tejto verzie je nutné použiť na začiatku dokumentu deklaráciu typu jazyka <!DOCTYPE html>. S ostatnými typmi jazyka a príkladmi iných deklarácii sa na začiatku nejdeme zbytočne zaťažovať, pretože to pre vás zatiaľ nie je podstatné, dostaneme sa k tomu neskôr.

Za touto špecifikáciou nasleduje párový tag s názvom html, ktorý dáva najavo, že v jeho obsahu sa nachádza kód napísaný v jazyku HTML. Jeho vnútro (obsah) je ešte rozdelené na dve základné častí webstránky a to je hlavička (head) a telo (body). Nedajte sa pomýliť, tieto označenia hlavička a telo nemajú nič spoločné s tým, čo je na stránke ako hlavička a čo je jej obsahom, toto zatiaľ nemá spoločné nič s tým, ako stránka vyzerá. Obsahom tagu body je presne to, čo sme písali v simulátore v ľavom bloku, čiže kód samotnej webstránky (text, tagy, proste všetko...). V hlavičke sa definujú špeciálne parametre webstránky, ktoré si vysvetlíme neskôr. Špecifikujú sa tam napríklad špeciálne informácie, ktoré uľahčujú internetovým vyhľadávačom zaradiť danú webstránku (Google, Katalógy...), definuje sa tam zoznam externých súborov, ktoré sa stránka využíva a podobne. Na ukážku si ukážeme aspoň jeden tag, ktorý sa definuje v hlavičke, aby sme si ukázali dostatočnú ukážku základnej štruktúri. Tento párový tag má názov title (titulok/meno) a jeho obsahom býva zväčš nadpis celej webstránky. Tento nadpis sa zobrazuje v názve (v hlavičke) záložky karty v hornej časti webstránky v prehliadači. V nasledujúcej ukážke je vidieť základnú štruktúru webstránky, ako by mala vyzerať, kód si už neskúšajte v simulátore, ale vložte si ho do samostatného súboru. Všetko čo sme sa doteraz učili by ste mali teda písať do obsahu tagu body:

<!DOCTYPE html>
<html>
    <head>
        <title>Titulok - Nasa korektna webstranka</title>
    </head>

    <body>
        <h1>Takto to ma vyzerat!</h1>
        <p>Odteraz budeme vsetko pisat do obsahu tohto tagu.</p>
    </body>
</html>

Všimnite si v hlavičke záložky aktuálnej karty, že namiesto cesty k súboru (ako to bolo predtým, keď sme tag title nemali použitý) sa zobrazuje hodnota atribútu title. Všimnite si aj, že formátovanie kódu v súbore sa zobrazuje rovnako aj v zobrazenom zdrojovom kóde stránky. Takže prehľadnosť resp. odsadenie vyzerá krajšie a prehľadnejšie pre všetkých. Toto by nám na začiatok mohlo stačiť, pekné webstránky ideme vytvárať už teraz pomocou jazyka CSS. Poďme teda na to:)