HTML 101/Lekce 6

Kurz: HTML 101

<<< 5. Entity

6. Umístění souborů

7. Odkazy >>>

V předchozí lekci jsme řekli, co jsou entity a k čemu se používají. V této probereme něco, co je absolutní nutností znát - cesty k souborům.

Webové stránky jsou totiž jen zřídka izolovanými HTLM dokumenty - valná většina z nich odkazuje na jiné stránky anebo obsahuje obrázky a jiná multimédia. Na tyto věci je ale nutné nějak odkázat - například audio soubory samy o sobě součástí HTML dokumentů nejsou, stejně jako obrázky a fonty. HTML dokumenty jsou přece pouze textem.

Cesty souborů

Na soubory se z HTML dokumentů odkazuje cestami souborů (filepaths) (nebo také adresami). Jejich použití si v této lekci ukážeme na elementu <a> a jeho atributu href; element slouží k tvorbě odkazů a probereme ho v následující lekci. Cesty souborů se dělí na dva typy:

• Absolutní
• Relativní

Absolutní

Absolutní cesta odkazuje na soubor celou URL adresou, ke které lze přistupovat odkudkoliv. Většinou se používají k odkazování na externí soubory či stránky:

<a href="https://example.com">Absolutní odkaz</a>

<a href="https://cs.wikiversity.org/wiki/HTML_101/Lekce_6">Wikiverzita, HTML 101, Lekce 6</a>

<!-- Odkaz na současnou lekci (právě na ní jste!) -->

Relativní

Relativní cesta odkazuje na soubor na základě jeho umístění vzhledem k dokumentu, odkud se odkazuje. V příkladě níže element <a> odkazuje na soubor index.html, který se nachází ve stejné složce.

<a href="index.html">Relativní odkaz</a>

Zápis relativních adres

Cesty souborů se dají zapsat čtyřmi způsoby, z nich tři jsou závislé na umístění souboru, na který chceme odkázat.

Tato sekce není omezena jen na HTML a je platná u většiny současných programovacích jazyků.

Ve stejné složce

Složka 1
    └ Složka 2
        └ <tento kód>
        └ index.html

Pokud se soubor nachází ve stejné složce, stačí napsat jen jeho název.

<a href="index.html">'index.html' se nachází ve stejné složce, jako soubor s tímto kódem</a>

V podřazené složce

Složka 1
    └ <tento kód>
    └ Složka 2
        └ index.html

Jestliže se soubor nachází o jednu či více úrovní níž, musí se před jeho název napsat názvy složek, ve kterých se nachází, a to od složky, která se nachází na stejné úrovni jako místo, odkud odkazujete. Název každé složky a vašeho souboru musí být odděleny lomítkem.

<a href="Složka 2/index.html">'index.html' se o jednu úroveň níž ve složce 'Složka 2'</a>

V nadřazené složce

Složka 1
    └ index.html
    └ Složka 2
        └ <tento kód>

Na soubor nacházející se v nadřazeném adresáři lze odkázat tak, že se před jeho název napíše dvě tečky a lomítko. To vás umístí o úroveň výš.

<a href="../index.html">'index.html' se o jednu úroveň výš, přímo ve složce 'Složka 1'</a>

../ můžete za sebe napsat vícekrát a odkazovat tak výš, než jen o jednu úroveň.

Složka 1
    └ index.html
    └ Složka 2
        └ Složka 3
            └ Složka 4
                └ <tento kód>

<a href="../../../index.html">'index.html' se nachází o tři úrovně výš</a>

Také můžete za ../ psát názvy složek. To je užitečné, pokud se váš soubor nenachází přímo v nadřazených složkách, nýbrž ve složce, která jim je podřazená.

Složka 1
    └ Složka 2
        └ Složka 3
            └ Složka 4
                └ <tento kód>
    └ Složka A
        └ Složka B
            └ index.html

<a href="../../../Složka A/Složka B/index.html">'index.html' se nachází ve složce 'Složka B', která je podřazená složce 'Složka 1'. Té je podřazený soubor s tímto kód.</a>

Kdekoliv v kořenové složce

Web
    └ Složka 1
        └ Složka 2
            └ Složka 3
                └ <tento kód>
    └ Složka A
        └ Složka B
            └ index.html

Každá web má nějakou kořenovou (root) složku, ve které se nachází všechny jeho soubory. Pokud chcete na jakýkoliv z nich odkázat, stačí vám úplně na začátek cesty souboru napsat tečku a lomítko (./), což vás vrátí do kořenové složky. Odtud potom můžete rozepsat celou adresu.

<a href="./Složka A/Složka B/index.html">'index.html' se nachází ve složce 'Složka B', která je podřazená složce 'Složka A'. Ta se nachází v kořenovém adresáři webu.</a>

Tento způsob vám nebude zatím užitečný, protože vyžaduje nastavení webového serveru (např. přes Apache).

Příští lekce

V příští lekci se podíváme na odkazy a jeden z nejdůležitějších elementů v HTML - <a>.

Externí odkazy

• jakpsatweb.cz - Lekce na stejné téma