P5 - procvičování T: posunut na 12. 5. -> nahrajte na Endoru

Složitější struktura webu a cestyOdkazy, obrázky, link na stylopis - vše je nutné uvádět společně se správnou cestou k souborům: relativní v rámci webu:

Úkol prodejna

Stáhněte si web prodejna.

Rozbalte jej ze zipu.

Struktura webu má podsložky obr, ovoce, zelenina. Ve složce ovoce je ještě složka jablka.

Pokuste se dotvořit podle poznámek v souborech správně odkazy, linky a nechejte zobrazovat obrázky.

Otevřu si soubor -> v PsPadu si můžete otevřít celý projekt prodejna.ppr, nebo upravovat jen jednotlivé soubory.
U souboru najdu poznámku v kódu - zelený text
Pod to požedované napíšu tag (tagy)
Uložím
Prohlídnu v prohlížeči.

Stylopisy

Web má 2 hotové stylopisy. Liší se obrázkem na pozadí:

prodejna.css použitím u souborů, kde mám nahoře obrázky ovoce a zeleniny
prodejnax.css je bez obrázku a používá se u souborů jablka.html, mrkev.html,... kde je zapotřebí mít obrázek jednoho ovoce/zeleniny

Link na stylopis musím vložit do každého souboru do hlavičky:

kde cesta/soubor - jsou vždy jiné - závislé na tom, který soubor chci použít a kde se nachází soubor, do kterého link vkládám.

Soubor je ve stejné složce: href='stylopis.css' (v našem webu jsou to soubory v kořenové složce webu)
Soubor je v podsložce (a ke stylopisu musím "vylézt nahoru" do nadřezené složky) href='../stylopis.css' (v našem webu jsou to soubory ve složkách ovoce a zelenina
Soubor je zanořený ještě v další podsložce (každá úroveň znamená "šplhání nahoru" tj ../) href='../../stylopis.css' (pro 2 úrovně - v našem webu jsou to soubory ve složce jablka)

Startovací soubor webu index.html:

- link na stylopis prodejna.css
- odkazy v tabulkovém menu na soubory
- Akce odkaz na akční zboží - soubor akce.html a obrázek akce.jpg ze složky obr šířka 100px

soubor akce.html

- - - link na stylopis prodejna.css

- odkaz na Prodejnu - soubor index.html a obrázek oz.jpg ze složky obr šířka 100px

Soubor jablka.html (analogicky mrkev.html)

- - - - link na stylopis prodejnax.css (bez obrázku na pozadí)
        soubor jablka je ve složce ovoce, ke stylopisu musím o úroveň výš, cesta tedy bude href='../prodejnax.css'

- obrázek jablko.jpg ze složky obr
- obrázek je ve složce obr, která je na stejné úrovni se složkou ovoce, ve které je html soubor jablka.html. Nejprve musím o úroveň výš (../) a pak do složky obr -> cesta bude tedy nahoru a do obr -> src='../obr/jablko.jpg'
- Ceník odrůd - odkaz na Ceník odrůd soubor odrudycenik.html a obrázek odrudy.jpg(šířka 100px) ze oba složky jablka.
- Složka jablka je podsložkou složky ovoce, kde je soubor, ze kterého dělám odkaz, takže cesta bude href='jablka/cenikodrud.html' případně pro obrázek src='jablka/odrudy.jpg'
- Akce - odkaz na akční zboží soubor akce.html a obrázek akce.jpg ze složky obr šířka 100px
- Soubor jablka.html, ze kterého odkaz dělám, je v podsložce ovoce, ze které musím nejprve o úroveň výš (../), abych se dostal k souboru akce.html href='../akce.html'
- Obrázek akce.jpg (košík) je navíc ještě ve složce obr, takže cesta je nejprve nahoru (../), pak do obr a pak teprve jméno souboru. src='../obr/akce.jpg'
- Proč jíst jablka - odkaz na prospěšnost jablek pro zdraví soubor zdravi.html ze složky jablka a obrázek jablko.jpg ze složky obr šířka 100px
- Cesta k souboru zdravi.html vede "dolů" do složky jablka href='jablka/zdravi.html'
- Obrázek jablko.jpg je stále ve složce obr, takže cesta je nejprve nahoru (../), pak do obr a pak teprve jméno souboru. src='../obr/jablko.jpg'

obdobně upravíme i soubor mrkev.html

Soubor odrudycenik.html

- link na stylopis prodejna.css cesta vede nahoru přes 2 složky ../../prodejna.css
- stejně tak odkaz na index.html a obrázek oz.jpg ve složce obr src='../../obr/oz.jpg'

volitelně - práce se záložkami - soubor zdravi.html

Záložky v textech pomáhají v pohybu obzvláště v dlouhých dokumentech vkládají se pomocí tagu <a> a pojmenovávají se jménem v atributu name, tedy:

přičemž může být tag prázdný a není na stránce vidět,

nebo může obsahovat text např.:

<a name="z2">záložka z2</a>

Odkaz na záložku pak vypadá:

<a href = "cesta/soubor.html#z1"> na záložku v jiném souboru.</a>

Page updated

Google Sites

Report abuse