Práce se soubory a složkami

00:00:00

Proč je důležité rozumět souborům a složkám?

Web není jen jeden soubor – je to celá sada souborů, které spolu spolupracují. HTML soubory, CSS styly, obrázky, skripty – to vše musí být správně pojmenované a uložené na správném místě. Pokud soubor najdeš, ale odkaz na něj napíšeš špatně, prohlížeč ho nenajde a stránka se zobrazí rozbitá. Proto je práce se soubory a složkami jedna ze základních dovedností každého webového tvůrce.

Jak vypadá struktura webového projektu?

Jednoduchý web může mít třeba tuto strukturu:

mujweb/
			├── index.html
			├── o-mne.html
			├── css/
			│   └── styl.css
			└── obrazky/
				└── foto.jpg

Hlavní složka projektu se obvykle jmenuje podle webu. Uvnitř jsou HTML soubory a podsložky pro CSS, obrázky, JavaScript a další. Toto uspořádání není povinné, ale je přehledné a osvědčené.

Jak správně pojmenovávat soubory?

Názvy souborů a složek na webu mají svá pravidla. Špatně pojmenovaný soubor může fungovat na tvém počítači, ale selhat na serveru. Dodržuj tato pravidla:

  • Pouze malá písmena. Servery na Linuxu rozlišují velká a malá písmena – soubor Foto.jpg a foto.jpg jsou pro ně dva různé soubory.
  • Žádné mezery. Místo mezery použij pomlčku nebo podtržítko – například o-mne.html nebo o_mne.html.
  • Žádná diakritika. Háčky a čárky v názvech souborů způsobují problémy na různých systémech a v URL adresách. Piš bez nich – kontakt.html, ne kontakt.html s háčky.
  • Krátké a výstižné názvy. Název by měl napovědět, co soubor obsahuje – cenik.html je lepší než stranka3.html.

Relativní a absolutní cesty

Kdykoli v HTML odkazuješ na jiný soubor – obrázek, CSS, jinou stránku – musíš zadat cestu k tomuto souboru. Existují dva typy cest:

Absolutní cesta začíná od kořene webu nebo obsahuje celou URL adresu:

<img src="https://mujweb.cz/obrazky/foto.jpg">

Relativní cesta vychází z umístění aktuálního souboru. Je kratší a přenositelná – funguje i na lokálním počítači bez připojení k internetu:

<img src="obrazky/foto.jpg">

Pro pohyb ve složkách platí tato pravidla:

  • obrazky/foto.jpg – soubor je ve složce obrazky, která je ve stejné složce jako aktuální HTML soubor
  • ../foto.jpg – dvě tečky znamenají „jdi o složku výš", soubor je tedy v nadřazené složce
  • ../../foto.jpg – jdi o dvě složky výš

Speciální soubor index.html

Soubor s názvem index.html má zvláštní význam. Když někdo zadá do prohlížeče adresu složky nebo webu bez konkrétního souboru – například https://mujweb.cz/ – server automaticky otevře soubor index.html z dané složky. Proto se hlavní stránka webu vždy jmenuje index.html.

Práce na lokálním počítači

Web tvoříš nejdříve na svém počítači – to se nazývá lokální vývoj. Soubory ukládáš do běžné složky, otevíráš je v editoru a výsledek kontroluješ v prohlížeči. Stačí soubor .html přetáhnout do okna prohlížeče nebo ho otevřít přes menu Soubor → Otevřít.

Lokální soubory se otevírají přes adresu začínající file:/// – například file:///Users/zdenek/mujweb/index.html. To je normální a v pořádku. Na server soubory nahraješ až tehdy, kdy jsou hotové – k tomu slouží FTP klient, o kterém si povíme v samostatné lekci.

Tip od Zdeňka

Zdeněk radí: Hned od začátku si zvykni na pořádek ve složkách. Já mám každou sekci webu ve vlastní podsložce a všechny soubory pojmenované podle stejného vzoru. Když pak hledám konkrétní soubor s VoiceOverem, vím přesně, kde je – neprocházím desítky souborů pojmenovaných stranka1, stranka2 a podobně. Dobrá struktura ti ušetří hodiny práce.