Podstránky a URL adresy

Keďže sme si povedali, že pužívanie IDE slúži hlavne na prehľad medzi všetkými súbormi, ktoré tvoria webstránku, práve v tejto kapitole si to ukážeme. Skúsime si spraviť webstránku, ktorá sa bude skladať z viacerých súborov a taktiež si ukážeme, ako môžeme definovať štýl (kód v jazyku CSS) tretím spôsobom a to v samostatnom súbore (nie v HEAD tagu ako predtým). Ešte predtým si ale zmeníme dve nastavenia nášho editora, ktoré sa nám zídu. Kliknite v menu na položku Sublime Text – Preferences – Settings User (Nastavenia – Nastavenia používateľa) a medzi množinové zátvorky vložte tento text:

"draw_white_space": "all",
 "translate_tabs_to_spaces": true

Uložte nastavenia – súbor a zavrite ho. Tieto nastavenia nám zapríčinia to, že v editore budeme mať zobrazené všetky medzery takou slabou bodkou, aby sme videli všetky znaky, ktoré sme zadali a taktiež po stlačení klávesy tab nám hodí automaticky 4 medzery a nie znak tabulátora, aby to bolo pre nás prehľadnejšie.

Vytvorme si v našom projekte (4-Projekt 1) ďaľší nový súbor (pravým na projekt – new file) a nazvyme ho page2.html (ctrl+S a zadáme názov). Vložme doňho podobný kód ako v prvej kapitole tejto sekcie a obsah (h1) zmeňme na text Toto je stranka 2. Skúste si ho otvoriť v prehliadači, mali by ste mať na jednej karte prehliadača otvorený súbor (stránku) index.html a na druhej page2.html. Náš projekt obsahuje dva súbory – dve webstránky. Všimnite si, že v adresovej lište (to kde píšeme URL adresy webstránok, napríklad www.google.sk) máme cestu k danému súboru na našom disku. Našou úlohou teraz je, aby sme na našej stránke spravili menu, ktoré bude obsahovať položky, pomocou ktorých sa budeme môcť v rámci jednej webstránky (jednej karty v prehliadači) prepínať medzi týmito dvomi súbormi. Skúste sa zamyslieť, či by ste to dokázali alebo aspoň tušíte, ako asi sa to dá s doteraz nadobudnutými vedomosťami. Nepotrebujeme vedieť nič nové, aby sa nám to podarilo.

Poďme sa nad tým spolu zamyslieť. Prvá vec, ktorú musíme vyriešiť je, čo by malo predstavovať položku v menu, ktorý element – tag jazyka HTML. Ak si spomeniete na kapitolu o zoznamoch alebo na ukážky, kedy sme sa pomocou niečoho preklikli na iné webové stránky, nenapadne vás nič iné, ako to, že položka v menu bude odkaz – tag a. Tento tag sme používali vždy, keď sme sa chceli na niečo prekliknúť, či to bola webstránka alebo obrázok. Do jeho atribútu href sme zadali URL adresu či už webstránky (napríklad http://www.google.sk) alebo obrázka. Tieto webstránky/obrázky boli však dostupné cez internet, to znamená, že sú uložené niekde na serveri, ktorý je pripojený k internetu a pomocou ich URL adries sa k nim vieme dostať. My sa ale chceme odkazovať na webstránku, ktorú máme uloženú len v našom počítači (page2). A práve tú url adresu, ktorá sa zobrazuje v adresovej lište prehliadača, kde ju máme otvorenú, použijeme na preklik na túto stránku do atribútu href. To teda svedčí o tom, že v atribúte href nemusí byť len http://nieco, ale že tam kľudne môže byť hocijaká URL adresa, aj takzvaná lokálna (lokál – náš počítač, lokálna adresa – adresuje na niečo lokálne, čiže na niečo uložené v našom počítači).

Poďme si teda spraviť niečo ako menu a naše dva súbory spojíme do jednej spoločnej stránky. Budeme mať teda hlavnú stránku (index.html), v ktorej bude menu s dvomi položkami, pomocou ktorých sa budeme vedieť prepnúť na prvú stránku (index) a na našu druhú stránku – na jej odstránku (page2.html). Ak máte chuť, skúste si to spraviť sami, či by ste to už dokázali. Ak nie, nevadí, ideme to spraviť spolu. Otvorme si v editore stránku index.html. Na tejto stránke si chceme spraviť menu s dvomi polžokami, takže tam jednoducho umiestnime dva odkazy. Hodnoty href atribútov budú predstavovať url adresy stránok index.html a page2.html tak, ako ich vidíte v adresovej lište prehliadača. Tento istý kód – dva odkazy, potom skopírujeme aj do stránky page2.html. Ak ste sa spýtali, prečo to isté skopírujeme aj tam, tak odpoveď je jasná. Ak máme menu na prvej stránke (index) a preklikneme sa pomocou položky z menu na druhú stránku (page2), tak sa nám v prehliadači zobrazí obsah tejto stránky. Kód tejto stránky zatiaľ neobsahuje žiadne menu – prekliky naspäť, takže by sme sa nevedeli pomocou stránky dostať späť na hlavnú stránku (index). Kódy našich súborov by mohli teda vyzerať nasledovne:

index.html :

<h1>Vitajte na domovskej stranke!</h1>
<a href="file:///Users/NusixMacBook/Work/2016%20-%20My%20Project/Coding/4-Projekt1/index.html">Domov</a>
<a href="file:///Users/NusixMacBook/Work/2016%20-%20My%20Project/Coding/4-Projekt1/page2.html">Stranka 2</a>
<h2>Odkazy s kratsou url adresou</h2>
<a href="index.html">Domov</a>
<a href="page2.html">Stranka 2</a>

page2.html :

<h1>Vitajte na stranke 2!</h1>
<a href="file:///Users/NusixMacBook/Work/2016%20-%20My%20Project/Coding/4-Projekt1/index.html">Domov</a>
<a href="file:///Users/NusixMacBook/Work/2016%20-%20My%20Project/Coding/4-Projekt1/page2.html">Stranka 2</a>
<h2>Odkazy s kratsou url adresou</h2>
<a href="index.html">Domov</a>
<a href="page2.html">Stranka 2</a>

Ako vidíte, na začiatku sa zobrazí stránka index.html s textom vitajte na domovskej stránke. Pod týmto nadpisom sa nachádzajú dva odkazy. Po kliknutí na odkaz domov sa dostaneme na stránku index, takže sa nám aktuálna stránka refreshne. Po kliknutí na druhý odkaz – Stranka 2, sa dostaneme na našu stránku 2. Aby sme si overili, že máme naozaj zobrazený súbor page2.html, môžeme si skontrolovať url adresu v adresovej lište prehliadača, že sa zmenila, jej koniec by mal mať page2.html a taktiež text nadpisu by sa mal zmeniť na vitajte na stranke 2. Na tejto stránke sa opäť nachádza rovnaké menu, pomocou ktorého sa vieme vrátiť naspäť na domovskú stránku. Poďme si ale rozobrať kód našej ukážky.

Najprv chcem upozorniť, že hodnoty atribútu href prvých dvoch odkazov budú vo vašom prípade pravdepodobne odlišné od týchto. Vy máte iné názvy súborov, adresárov a štruktúru na disku, takže vaša url adresa k našim dvom stránkam bude iná ako naša. Tie adresy sa budú rovnať vašej adrese stránky v prehliadači. My máme tieto stránky uložené na našom počítači, ktorý má iný operačný systém, ktorý má inú cestu (url adresu) k daným súborom. Koniec týchto URL adries by sme však mali mať rovnaký, ak máme nazvný adresár a jeho stránky rovnako (4-Projekt1/index.html). Tento typ URL adresy, ktorý sme použili, sa nazýva absolútny (absolute URL address). Absolútny preto, pretože obsahuje celú – kompletnú adresu. Tá sa skladá zo špecifikácie koreňového – základného miesta na začiatku, či sa jedná o web (internet) – http:// alebo či sa jedná o lokálny súbor (váš počítač) file:/// a následne cestou ku konkrétnemu súboru tak, ako je uložený na danom mieste (na disku).

Okrem tejto adresy existuje aj druhý typ URL adresy a ten sa nazýva relatívny (relative URL address). Ten sa líši od absolútnej od toho, že nešpecifikujeme celú cestu, ale zadávame len cestu od aktuálneho miesta, kde sa práve nachádzame. Naša aktuálna lokácia je miesto na disku, na ktorom je uložený súbor, v ktorom ideme túto adresu použiť. Pozrite sa na href atribút dvoch odkazov po nadpise h2. Ako vidíte, je tam použitý iba názov našich súborov a nie je pred tým špecifikovaná cesta. Je to preto, pretože aj súbor index aj page2 sa nachádza v adresári 4-Projekt1, takže si to môžeme predstaviť, že momentálne máme adresu nastavenú až k tomuto adresáru. Ak by sme mali napríklad v adresári 4-Projekt1 adresár s názvom podstránky a v ňom by sme mali súbor page3.html, relatívna url adresa by k tomuto súboru napríklad v súbore index.html vyzerala /podstranky/page3.html. Ako by sme ale špecifikovali adresu v tom súbore page3.html na súbor index.html, ktorý sa nenachádza v tom istom adresári ako page3.html ale o adresár vyššie? Pre príkaz o adresár vyššie sa používajú dve bodky, takže hodnota href atribútu by v tom prípade bola ../index.html. Dve bodky by znamenali choj o adresár vyššie, takže z adresára podstranky by sa nastavil vyššie na 4-Projekt1 a tam sa už nachádza súbor index.html. K použitiu týchto adries sa budeme dostávať počas nasledujúcich kapitol, takže si to ešte precvičíme.

Možno ste pochopili, aký má význam používanie relatívnych adries. Na jednej strane nemusíme zadávať dlhé a neprehľadné adresy a na druhej strane je to praktické. Ak by som my teraz skopíroval náš adresár 4-Projekt1 niekomu na iný počítač a mali by som použité absolútne URL adresy v odkazoch v menu, ako sme to spravili v prvom prípade, nefungovali by, pretože na tom druhom počítači by boli iné názvy adresárov na počítači. Ak by som ale použil relatívne URL adresy, kde sa nešpecifikuje začiatok URL adresy, ale iba cieľ od našeho základného adresára (4-Projekt1), odkazy by fungovali kdekoľvek.