Kniha: HTML5 a CSS3 -- Názorný průvodce tvorbou WWW stránek – Elizabeth Castro; Bruce Hyslop

2

Práce se soubory

webových

stránek

Než začnete psát své elementy a atributy v ja

zyce HTML, měli byste vědět, jak vytvářet své

soubory, do nichž budete tento kód psát. V té

to kapitole se  naučíte vytvářet, upravovat

a  ukládat soubory svých webových stránek.

Rovněž se dozvíte, jak naplánovat své webové

stránky a uspořádat obsah.

Pokud už se nemůžete dočkat samotného vý

voje a víte, jak vytvářet soubory, můžete pře

skočit ke kapitole 3, „Základní struktura  do

kumentu HTML.“

Plánování webových

stránek

Ačkoliv se můžeme vrhnout do vývoje webo

vých stránek po hlavě, je dobrý nápad poza

stavit se, zamyslet se a naplánovat své webové

stránky (viz obrázek 2.1). Tímto způsobem si

stanovíme směr vývoje a později nebude mu

set tolik přestavovat.

Webové stránky plánujeme následovně:

 Zamyslíme se nad tím, proč vlastně vytvá

říme tyto webové stránky. Čeho chceme

dosáhnout?

 Kdo budou naši návštěvníci? Jak bychom

jim mohli přizpůsobit obsah?

 Kolik stránek potřebujeme? Jaké uspořá

dání upřednostňujeme? Chceme, aby ná

vštěvníci procházeli obsah v  určitém

pořadí, nebo budou moct jednoduše proz

kou mat jakoukoliv část obsahu?

 Nakreslíme si návrh našich webových

stránek na papír.

 Vymyslíme jednoduchá výstižná jmé

na pro naše stránky, obrázky a jiné externí

soubory (více informací lze najít v  části

„Jména  souborů“ v  kapitole 1, „Stavební

kameny webových stránek“).

Obrázek 2.1. Nakreslíme si strukturu webových stránek na  papír

a  popřemýšlíme, co by jednotlivé stránky měly obsahovat. To nám

pomůže navrhnout správné uspořádání

Domovská

stránka

O nás

Novinky

Archiv

Nabídka

práce

Pro

společnosti

Historie

společnosti

Pro

domov

Produkty

Kniha K2036.indb 41Kniha K2036.indb 41 1.11.2012 12:34:381.11.2012 12:34:38

42

Kapitola 2

Vytvoření nové webové stránky

Tip: Nepřežeňte to s  fází plánování. V  určité chvíli musíte také začít psát obsah a zdrojový kód. Tip: Pokud web moc neznáte, zkuste po něm chvíli jen tak brouzdat, abyste zjistili, jaké máte možnosti. Možná byste měli začít s webovými stránkami své konkurence. Tip: Bývá běžné (ale nikoliv nezbytné) navrhnout strukturu složek svých webových stránek tak, jak jste si uspořádali kategorie na papíře (viz obrázek 2.1). Více informací najdete v části „Uspořádání souborů.“ Tip: V  článku „A  Checklist for Content Work“ od Erin Kissaneové (http://www.alistapart.com/articles/a-checklist-for-content-work/) získáte představu, jak můžete postupovat při tvorbě obsahu svých webových stránek. Jedná se o ukázku z její knihy, ve které pojednává o strategii tvorby obsahu. Tip: Kniha „The Principles of Beautiful Web Design“ od Jasona Beairda (vydána nakladatelstvím SitePoint roku 2010) by vás mohla zaujmout, pokud nejste návrháři nebo teprve začínáte v oblasti návrhu, a  přitom vás zajímá, jak navrhnout atraktivní a  efektivní webové stránky. Vytvoření nové webové stránky K tvorbě webové stránky nepotřebujeme žádné speciální nástroje. Můžeme používat jakýkoliv textový editor, a to dokonce program Poznámkový blok (viz obrázky 2.2 a  2.4), jenž je součástí operačního systému Windows, nebo program TextWrangler (viz obrázky 2.2 a  2.3), který lze stáhnout zdarma pro operační systém OS  X (http://www.barebones.com/products/ textwrangler/). Poznámka: Operační systém OS X nabízí editor TextEdit, ale v některých verzích tohoto systému obsahuje chybu, která ztěžuje práci se soubory HTML. Novou webovou stránku vytvoříme takto: 1. Otevřeme si libovolný textový editor. 2. Vybereme položku Soubor/Nový, čímž

vytvoříme nový prázdný dokument (viz

obrázek 2.2).

3. Začneme vytvářet obsah stránky HTML,

jak popisuje tato kniha  počínaje kapito

lou  3, „Základní struktura  dokumentu

HTML.“

4. Uložíme náš soubor. Jak postupovat, si

předvedeme v části „Ukládáme naši webo

vou stránku.“

Obrázek 2.2. Otevřeme si svůj textový editor. Napíšeme kód jazy

ka  HTML do prázdného dokumentu, který se  objeví, nebo vybereme

položku Soubor/Nový. Přesný název položky nabídky se  může mírně

lišit. U nástroje TextWrangler se jedná o položku File/New/Text Docu

ment. Nahoře se  zobrazuje snímek z  textového editoru TextWrangler,

zatímco dole lze spatřit snímek nástroje Poznámkový blok

Obrázek 2.3. V  operačním systému OS  X může editor TextWrangler

napsat kód jazyka HTML místo nás. Níže si uvedeme tipy na editory pro

tento operační systém, které mají dokonalejší funkce pro psaní kódu

Kniha K2036.indb 42Kniha K2036.indb 42 1.11.2012 12:34:381.11.2012 12:34:38

43

Práce se soubory webových stránek

Ukládáme naši

webovou stránku

Obrázek 2.4. Poznámkový blok je základní program operačního systému Windows umožňující vytvářet stránky HTML. K dispozici je také řada jiných editorů, jak si ukážeme v následujících tipech Tip: Existuje spousta  textových editorů pro operační systémy Windows a OS X, které jsou vhodné pro psaní kódu jazyka HTML (a jazyka CSS). Mezi jejich běžné funkce patří automatické dokončování kódu a  nápověda, což umožňuje psát kód přesněji a  rychleji. Rovněž zvýrazňují zdrojový kód, abychom snadněji rozeznali elementy jazyka  HTML od  textového obsahu. Takových funkcí, z  nichž nástroj Poznámkový blok nenabízí ani jednu, poskytují celou řadu. K  dispozici jsou jak editory zdarma, tak ty placené, které si většinou zaslouží investici, a navíc je možné si je před koupí vyzkoušet. Tip: Mezi oblíbené editory pro systém OS  X patří BBEdit (http://www. barebones.com/products/bbedit/), Coda (http://www.panic.com/coda/), Espresso (http://macrabbit.com/espresso/), Sublime Text (http://www. sublimetext.com/) a TextMate (http://macromates.com/). Editor TextWrangler se běžně označuje jako „BBEdit Lite.“ Nejoblíbenějším z těchto editorů je TextMate. Editor SublimeText je také k  dispozici na  operační systém Windows, stejně tak E Text Editor (http://www.e-texteditor. com/), Notepad++ (http://notepad-plus-plus.org/) a  spousta  dalších. Vyhledáte-li vyhledávačem výraz „editor HTML“ najdete další editory. Tip: Pokud používáte některý z  výše uvedených editorů, princip vytváření nového souboru zůstává stejný. Pro editaci existující stránky vyberte položku Soubor/Otevřít ve svém zvoleném textovém editoru a  označte soubor (více informací je možné najít v  části „Editace webových stránek“). Ve zbytku této knihy se dozvíte, jak přidat vlastní kód jazyků HTML a CSS, aby stránka vypadala tak, jak potřebujete. Tip: Nepoužívejte textové procesory (například aplikaci Word od společnosti Microsoft) pro tvorbu stránek HTML. Můžou totiž do vašich souborů přidat nechtěné znaky a kód přestane fungovat.

Ukládáme naši

webovou stránku

Webové stránky vytváříme s pomocí textové

ho editoru, ale jsou určené pro zobrazení

mnoha  webovými prohlížeči na  mnoha  plat

formách. Aby byly dostupné všude, musíme

své webové stránky uložit ve formátu prostého

textu; tzn. bez zbytečného formátování, které

můžou přidávat textové procesory.

Aby webové prohlížeče (a servery) rozpoznaly

webové stránky a věděly, že mají interpretovat

jejich kód, soubory webových stránek musí

mít příponu .html (případně .htm). Tímto pří

stupem rovněž na první pohled odlišíme pro

sté textové soubory od webových stránek. Ač

koliv je možné používat obě přípony, lepším

řešením je přípona .html.

Ikona  webových stránek odpovídá výchozímu

webovému prohlížeči našeho operačního sys

tému, a  ne editoru, v  němž jsme tyto stránky

napsali (viz obrázek 2.5). Když poklepáme

na soubor webové stránky, otevře se ve webo

vém prohlížeči, ale nikoliv v textovém editoru.

To je skvělé pro testování webových stránek

v prohlížeči, ale přináší to krok navíc při editaci

webových stránek (více informací se  nachází

v části „Editace webových stránek“).

Obrázek 2.5. Sešit aplikace Excel má příponu .xlsx a lze ho rozpoznat

na  základě ikony této aplikace (nahoře). Pokud na  něj poklepáme,

otevře se  v  aplikaci Excel. Soubor webové stránky má příponu .html

nebo .htm a ikonu výchozího webového prohlížeče (v tomto případě

prohlížeče Firefox) nezávisle na  tom, v  jakém textovém editoru ho

vytvoříme. Jestliže na  něho poklepáme, otevře se  výchozí webový

prohlížeč (ne textový editor)

Kniha K2036.indb 43Kniha K2036.indb 43 1.11.2012 12:34:381.11.2012 12:34:38

44

Kapitola 2

Ukládáme naši webovou stránku

Pro shrnutí – když ukládáme soubor webové stránky, musíme jej uložit ve formátu prostého textu a  přiřadit mu příponu .html nebo .htm. Webovou stránku uložíme následovně: 1. Jakmile vytvoříme webovou stránku, vy

bereme ve svém textovém editoru položku

Soubor/Uložit jako (viz obrázek 2.6).

2. Objeví se dialogové okno, v němž musíme

nastavit formát prostého textu (název

se může lišit program od programu).

3. Našemu textovému dokumentu přidělíme

příponu .html (lepší varianta) nebo .htm.

Toto je velmi důležitý krok.

4. Vybereme složku, do které chceme uložit

naši webovou stránku.

5. Klepneme na tlačítko Uložit (viz obrázky

2.7 a 2.8).

Obrázek 2.6. V textovém editoru vybereme položku Soubor/Uložit jako. Obrázek 2.7. V nástroji Poznámkový blok si pojmenujeme náš soubor a přidáme mu příponu .html nebo .html, vybereme položku Textové dokumenty (*.txt) z  rozevíracího seznamu Uložit jako typ a před klepnutím na tlačítko Uložit se ujistíme, že jsme vybrali kódování UTF-8. V  různých textových editorech se  můžou tyto možnosti nastavení lišit, ale budou velmi podobné

Obrázek 2.8. V nástroji TextWrangler pojmenujeme náš soubor a vy

bereme umístění, kam bychom ho chtěli uložit. Tento nástroj stan

dardně vybírá kódování UTF-8, ale můžeme si vybrat také alternativní

kódování.

Tip: Nezáleží na tom, jestli používáte příponu .html nebo .htm, třeba

že přípona .html je vhodnější. Ať už si vyberete jakkoliv, držte se své

volby, protože když budete používat jedinou příponu, snadněji si za

pamatujete adresy URL.

Tip: Některé textové editory v  operačním systému Windows můžou

přidávat svou vlastní výchozí příponu k vašemu jménu souboru, přes

tože jste již za jméno doplnili příponu .html nebo .htm (to by se ne

mělo týkat editorů určených přímo pro editaci stránek HTML). Váš

soubor pojmenovaný kupříkladu webova-stranka.html.txt by se  ne

zobrazoval ve  webovém prohlížeči správně. Situace je o  to horší, že

operační systém Windows obvykle skrývá přípony souborů, takže

problém není možné na  první pohled rozpoznat. Existují dvě řešení.

Prvním z nich je uzavřít jméno souboru do uvozovek při jeho prvním

ukládání. To by mělo zabránit přidání nadbytečné přípony. Druhým

řešením je sdělit systému Windows, aby zobrazoval přípony souborů

(viz obrázek 2.9). Díky tomu byste měli postřehnout nadbytečnou

příponu a odstranit ji ze jména souboru.

Kniha K2036.indb 44Kniha K2036.indb 44 1.11.2012 12:34:381.11.2012 12:34:38

45

Práce se soubory webových stránek

Definujeme výchozí

a domovskou stránku

Obrázek 2.9. V  nástroji Průzkumník Windows vybereme položku Nástroje/Možnosti složky, čímž zobrazíme dialogové okno, které se může mírně lišit v závislosti na verzi systému Windows. Klepneme na kartu Zobrazení a ve zde nalezeném seznamu vyhledáme položku Skrýt příponu souborů známých typů. Ujistíme se, že příslušné pole je odškrtnuté, aby se zobrazovaly přípony souborů Tip: Jakmile zvolíte formát prostého textu, váš soubor se  obvykle uloží s výchozí znakovou sadou operačního systému. Kdybyste chtěli jinou znakovou sadu, musíte si ji vybrat. Nejlepší volbou je znaková sada  UTF-8. Pokud váš textový editor nabízí možnost typu UTF-8 BOM nebo něco podobného, zvolte ji. V  opačném případě vyberte možnost UTF-8. V  některých případech nepřidává textový editor značku BOM pro sadu UTF-8, přestože tuto skutečnost přímo nezmiňuje. Pokud se chcete dozvědět o značce BOM nějaké informace, najdete je na adrese http://cs.wikipedia.org/wiki/UTF-8#BOM. Obrázek 2.10. Spousta  textových editorů nám dovoluje vybrat si znakovou sadu, abychom mohli používat písmena  a  symboly téměř ze  všech světových jazyků. Ve většině případů je nejlepší možností znaková sada  UTF-8. Měli bychom upřednostňovat možnost UTF-8 no BOM, pokud ji náš editor nabízí. V  opačném případě se  musíme spokojit s  možností UTF-8. Některé editory mají tuto možnost jako výchozí (například zde zobrazený editor TextWrangler)

Definujeme výchozí

a domovskou stránku

Většina  webových serverů poskytuje systém

pro rozpoznávání výchozí stránky v  každé

složce, a to na základě jména souboru. Ve vět

šině případů se výchozí stránkou stává soubor

index.html (viz obrázek 2.11). Pokud tento

soubor neexistuje, webové servery obvykle

hledají alternativu v  podobě souboru index.

htm nebo default.htm. Jestliže náš návštěvník

zadá do panelu adresy adresu URL s názvem

složky, ale bez jména souboru, zobrazí se vý

chozí soubor (viz obrázek 2.12).

Obrázek 2.11. Pokud chceme označit soubor jako výchozí stránku

dané složky, uložíme ho pod jménem index.html

Obrázek 2.12. Když návštěvníci píší cestu ke složce, ale neuvedou

jméno souboru, zobrazí se  výchozí stránka. V  tomto příkladu jsme

napsali adresu http://www.jakpsatweb.cz/html/. Kdybychom napsali

adresu http://www.jakpsatweb.cz/html/index.html, načetla  by

se stejná stránka

Výchozí stránka (tradičně index.html) nachá

zející se  v  kořenové složce našich webových

stránek se  nazývá domovská stránka. Tato

stránka se zobrazí, když uživatel uvede jen na

ši doménu bez jakýchkoliv dalších informací:

http://www.nase-domena.cz.

Kniha K2036.indb 45Kniha K2036.indb 45 1.11.2012 12:34:391.11.2012 12:34:39

46

Kapitola 2

Editace webových stránek

Stejným způsobem můžeme vytvořit výchozí stránku pro každou složku svých webových stránek. Kupříkladu výchozí stránka pro složky /produkty/ a /o-nas/ se  rovněž může jmenovat index.html, ale každá z nich bude ve své vlastní složce. Návštěvníci obvykle přistupují k těmto částem z domovské stránky nebo prostřednictvím nabídky, kterou zobrazíme na všech stránkách. Specifikace výchozí stránky složky nebo domovské stránky Uložíme si svůj soubor pod názvem index. html (návod lze najít v  části „Ukládáme naši webovou stránku“) do požadované složky. Pokud soubor index.html nefunguje jako výchozí stránka  na  serveru, na  němž máte uložené své webové stránky, a přitom jste postupovali podle rad z  kapitoly 21, „Publikování stránek na  webu,“ konzultujte tento problém se svým poskytovatelem hostingových služeb. Tip: Jestliže nemáte výchozí stránku uvnitř každé složky, některé servery můžou zobrazovat kompletní obsah složky, což můžete chtít ukazovat návštěvníkům, ale také nemusíte. Pokud chcete ochránit tento obsah před zvědavými návštěvníky, vytvořte výchozí stránku v každé složce, nebo změňte konfiguraci serveru tak, aby skrýval seznam souborů a podsložek. Skrývání obsahu je vhodné zejména pro složky s prostředky; například složky s obrázky, médii, šablonami stylů a skripty jazyka JavaScriptu. Můžete se zeptat svého poskytovatele hostingových služeb, jak byste měli postupovat.

Editace webových

stránek

Protože webovou stránku nejčastěji prohlíží

me webovým prohlížečem, když na ni pokle

páme, otevře se webový prohlížeč zobrazující

tuto stránku. Když chceme editovat webovou

stránku, musíme ji ručně otevřít v  textovém

editoru.

Webové stránky editujeme tímto způsobem:

1. Otevřeme si textový editor.

2. Vybereme položku Soubor/Otevřít.

3. Vyhledáme složku, která obsahuje poža

dovaný soubor.

4. Pokud se náš soubor v příslušné složce ne

zobrazuje, zkusíme vybrat položku Všech

ny soubory (nebo podobnou položku; viz

obrázky 2.13 a 2.14). Skutečné jméno této

položky a  její umístění se  může lišit pro

gram od programu a platforma od platfor

my.

5. Klepneme na  tlačítko Otevřít. Tím jsme

přichystali náš soubor k editaci.

Obrázek 2.13. Některé textové editory v  operačním systému Win

dows (kupříkladu Poznámkový blok) nevidí soubory HTML automa

ticky. Musíme vybrat položku Všechny soubory, abychom zobrazili

soubory se všemi příponami

Kniha K2036.indb 46Kniha K2036.indb 46 1.11.2012 12:34:401.11.2012 12:34:40

47

Práce se soubory webových stránek

Uspořádání souborů

Obrázek 2.14. Až zobrazíme soubory se všemi příponami, můžeme si

zvolit požadovaný soubor a otevřít ho klepnutím na tlačítko Otevřít

Obrázek 2.15. V operačním systému Windows můžeme rovněž klep

nout pravým tlačítkem na ikonu dokumentu a z kontextové nabídky

vybrat položku Otevřít v programu a v ní příslušný textový editor.

V operačním systému OS X postupujeme stejně

Tip: Když upravíme již dříve uložený dokument, můžeme změny ulo

žit jednoduše klepnutím na  položku Soubor/Uložit, aniž bychom

se  museli už starat o  formát souboru (popisovaný v  části „Ukládáme

naši webovou stránku“).

Uspořádání souborů Předtím než budeme mít spoustu souborů, měli bychom se  rozmyslet, kam je budeme vkládat. Běžné (nikoliv však nutné) je vytvářet složku pro každou hlavní část webových stránek. Tento postup umožňuje seskupovat související stránky HTML dohromady. Své soubory uspořádáme následujícím způsobem: 1. Vytvoříme si ústřední složku, do níž budeme

ukládat veškerý materiál dostupný na našich

webových stránkách. V operačním systému

OS  X vybereme položku Soubor/Nová

složka (viz obrázek 2.16). V operačním sys

tému Windows klepneme pravým tlačítkem

myši na plochu nebo v nástroji Průzkumník

Windows a následně vybereme položku No

vý/Složka  z  kontextové nabídky (viz obrá

zek 2.17). Novou složku pojmenujeme. 2. Vytvoříme podsložky s ohledem na struktu

ru svých webových stránek (viz obrázky 2.16

a 2.18). Můžeme se kupříkladu rozhodnout

vytvořit samostatnou složku pro každou část

webových stránek, a  to včetně případných

podsložek. 3. Dobrým zvykem je vytvářet složku pro ob

rázky uvnitř kořenové složky webových

stránek a potom do ní případně přidat pod

složky, abychom své obrázky rozdělili podle

sekcí nebo jiných kritérií. Alternativní pří

stup spočívá v  tvorbě složky pojmenované

například prostredky, kterou rozdělíme

na  podsložky s  názvy kupříkladu obrazky,

videa, sablony-stylu apod. (Více informací

o šablonách stylů je k dispozici v kapitole 7,

„Stavební kameny kaskádových stylů.“)

Kniha K2036.indb 47Kniha K2036.indb 47 1.11.2012 12:34:401.11.2012 12:34:40

48

Kapitola 2

Prohlížení stránek v prohlížeči

Obrázek 2.16. V systému OS X vybereme položku New Folder a po

jmenujeme si svou složku. Potom vytvoříme samostatnou složku pro

každou část webových stránek

Obrázek 2.17. V  operačním systému Windows klepneme pravým

tlačítkem myši na plochu nebo v nástroji Průzkumník Windows a po

tom vybereme položku Nový/Složka z kontextové nabídky

Obrázek 2.18. Bude-li to žádoucí, můžeme rozdělit novou složku

na podsložky

Tip: Používejte krátká popisná jména  pro své soubory a  složky. Slova  v  názvech oddělujte nejlépe spojovníky, a  ne mezerami. Všechna písmena by měla být malá, aby bylo snadnější zapisovat vaše adresy URL. Více informací o  správném pojmenování souborů najdete v  části „Jména  souborů“ v  kapitole 1, „Stavební kameny webových stránek.“ Prohlížení stránek v prohlížeči Jakmile vytvoříte stránku, určitě se  budete chtít podívat, jak vypadá ve webovém prohlížeči. Jelikož nemůžete předvídat, jaký webový prohlížeč budou používat vaši návštěvníci, měli byste si prohlédnout svou stránku v  několika  webových prohlížečích. Ne všechny prohlížeče totiž zobrazují stránky stejně. Stránku si zobrazíme ve  webovém prohlížeči takto: 1. Otevřeme webový prohlížeč. 2. V  závislosti na  spuštěném webovém pro

hlížeči vybereme položku Soubor/Ote

vřít, Soubor/Otevřít soubor nebo Sou

bor/Otevřít stránku (viz obrázek 2.19). 3. Objeví se dialogové okno, v němž vyhledáme

příslušnou složku na svém počítači, označíme

požadovanou stránku a klepneme na tlačítko

Otevřít (viz obrázek 2.20). Vybraná strán

ka se zobrazí ve webovém prohlížeči (viz ob

rázek 2.21) stejným způsobem, jako bychom

ji publikovali na  webový server (podrobněji

se  na  téma  publikování zaměříme v  kapitole

21, „Publikování stránek na  webu“). Tento

postup se může lišit prohlížeč od prohlížeče.

Kniha K2036.indb 48Kniha K2036.indb 48 1.11.2012 12:34:401.11.2012 12:34:40

49

Práce se soubory webových stránek

Nechte se inspirovat od jiných

Obrázek 2.19. Z nabídky prohlížeče (v tomto případě prohlížeče Firefox) vybereme položku Soubor/Otevřít soubor. V  prohlížeči Internet Explorer plní stejnou funkci položka Soubor/Otevřít Obrázek 2.20. Označíme soubor, jejž chceme otevřít, a  klepneme na tlačítko Otevřít Obrázek 2.21. Daná stránka  se  otevře ve  webovém prohlížeči. Důkladně ji zkontrolujeme, abychom se  přesvědčili, že vše postupuje podle našeho plánu

Tip: Většinou postačí poklepat na  ikonu stránky, a  tím ji otevřeme

ve webovém prohlížeči. Pokud už máme webový prohlížeč otevřený,

můžeme také přesunout ikonu stránky do okna prohlížeče. To je čas

tokrát nejjednodušší způsob otevírání stránky ve webovém prohlížeči,

když si na tento způsob zvykneme.

Tip: Některé moderní webové prohlížeče nemají položku Soubor/

Otevřít ve své nabídce. V tomto případě můžeme zkusit výše popsa

nou metodu přesouvání ikony.

Tip: Pokud se  naše webová stránka  neobjevuje v  dialogovém okně

pro otevření souboru, měli bychom se  přesvědčit, zda  jsme ji uložili

v textovém formátu a přidělili jí příponu .htm nebo .html (více infor

mací lze najít v části „Ukládání naší webové stránky“).

Tip: Nemusíme zavírat dokument v textovém editoru, než ho zobrazí

me ve  webovém prohlížeči, ale samozřejmě ho musíme uložit. Když

změníme stránku v  textovém editoru potom, co jsme ji otevřeli

ve webovém prohlížeči, uložíme stránku v editoru znovu a ve webo

vém prohlížeči klepneme na  tlačítko pro obnovení stránky. Tímto

způsobem se  změny projeví rovněž ve  webovém prohlížeči. Mohli

bychom také postupovat podle návodu na zobrazení stránky ve webo

vém prohlížeči, ale to by bylo zbytečně zdlouhavé.

Tip: Naši návštěvníci neuvidí obsah webových stránek, dokud je ne

publikujeme na webový server (o tom si povíme v kapitole 21, „Publi

kování stránek na webu“).

Nechte se inspirovat

od jiných

Nejjednodušším způsobem, jak se zdokonalit

v jazyce HTML, je prohlédnout si stránky, kte

ré navrhli a  vytvořili jiní vývojáři. Kód jazy

ka  HTML je možné snadno prohlížet a  učit

se  z  něj. Neměli bychom však zapomínat, že

textový obsah, grafické prvky, hudba, videa,

šablony stylů a  jiné externí soubory obvykle

podléhají autorskému právu. Hlavní princip

spočívá v tom, že se necháme cizími stránka

mi pouze inspirovat, ale potom vytvoříme své

vlastní se svým vlastním obsahem.

Kniha K2036.indb 49Kniha K2036.indb 49 1.11.2012 12:34:411.11.2012 12:34:41

50

Kapitola 2

Nechte se inspirovat od jiných

Prohlížení zdrojového kódu stránek jiných vývojářů: 1. Otevřeme webovou stránku v libovolném

prohlížeči.

2. Vybereme položku Zobrazit zdrojový

kód (nebo podobnou položku u  přísluš

ného prohlížeče; viz obrázky 2.22 a 2.23).

Po klepnutí na  ni se  objeví zdrojový kód

jazyka HTML (viz obrázek 2.24).

3. Případně si můžeme stránku uložit pro

pozdější studium.

Obrázek 2.22. Všechny webové prohlížeče na desktopových počítačích mají v nabídce položku, která nám umožňuje prohlížet si zdrojový kód aktuální stránky. Přesný název této položky závisí na konkrétním prohlížeči (například v prohlížeči Chrome se jmenuje Nástroje/Zobrazit zdrojový kód) Obrázek 2.23. Převážná část webových prohlížečů rovněž dovoluje klepnout pravým tlačítkem myši do stránky, následkem čehož zobrazí kontextovou nabídku s  položkou Zobrazit zdrojový kód stránky (nebo podobnou). To je mnohdy nejjednodušší způsob prohlížení zdrojového kódu, protože může být poměrně obtížné hledat tuto položku ve struktuře hlavní nabídky

Obrázek 2.24. Moderní webové prohlížeče zobrazují zdrojový kód

na  nové kartě (jako na  tomto obrázku) nebo v  novém okně, kdežto

starší prohlížeče můžou otevřít nastavený textový editor. Barevné

zvýraznění odlišuje obsah od elementů, atributů a jejich hodnot. Tato

funkce se označuje termínem zvýrazňování syntaxe. Vlevo uvede

ná čísla řádků nejsou součástí daného kódu jazyka HTML, a ne všech

ny webové prohlížeče je zobrazují. Jedná se pouze o pomocné infor

mace, které prohlížeč Chrome zobrazuje na  své kartě se  zdrojovým

kódem stránky

Prohlížení kódu jiných vývojářů

pomocí vývojářských nástrojů

Alternativně můžeme kód stránky prohlížet

s  pomocí vývojářských nástrojů webového

prohlížeče. Každý webový prohlížeč má své

vlastní nástroje, ale všechny mají některé spo

lečné funkce.

Tyto nástroje nabízejí interaktivnější zkoumá

ní zdrojového kódu. Můžeme zkoumat kód

jazyka  HTML a  CSS  pro konkrétní části

webové stránky, editovat ho přímo v prohlíže

či a okamžitě pozorovat výsledky změn. Navíc

můžeme tyto nástroje používat na jakýchkoliv

stránkách, ne jen na  těch našich. Změny

v  nich provedené jsou dočasné; tyto nástroje

totiž nijak nezapisují do skutečných souborů

načtené stránky. To je užitečné pro učení, pro

tože můžeme zjistit, jak vývojáři dosáhli urči

tého efektu nebo si jen tak hrát s kódem a sle

Kniha K2036.indb 50Kniha K2036.indb 50 1.11.2012 12:34:411.11.2012 12:34:41

51

Práce se soubory webových stránek

Nechte se inspirovat od jiných

dovat, co se stane, aniž bychom se museli bát, že něco pokazíme. Více informací o  vývojářských nástrojích v moderních i starších prohlížečích si uvedeme v  kapitole 20, „Testování a  ladění webových stránek.“ Tip: Neexistuje žádné pravidlo, které by diktovalo, kdo smí umístit webové stránky na web. To je právě na webu úžasné – jedná se o otevřené médium s  malými vstupními bariérami. Na  webu nepublikují jen experti, ale také naprostí nováčci. Na tuto skutečnost byste neměli zapomínat, když studujete kód jiných webových stránek. Pokud nějaký kód nevypadá pěkně, neměli byste se  jím řídit jen proto, že jeho autor publikoval své webové stránky na webu, a vy ne. Můžete narazit na  spoustu stránek, z  nichž lze pochytit dobré postupy, ale také na celou řadu těch, které (slušně řečeno) nejsou ideální. Nezapomínejte tedy kriticky hodnotit a občas nahlédněte do této knihy nebo jiných zdrojů, pokud si nebudete jistí vhodností určité techniky.

Tip: Z  okna  (karty) se  zdrojovým kódem můžete kód zkopírovat

a vložit ho do svého textového editoru. Potom už jenom uložíte da

ný soubor.

Tip: Zdrojový kód webové stránky, a  to dokonce včetně dostupných

prostředků, můžete uložit ve  většině webových prohlížečů výběrem

položky Soubor/Uložit jako (nebo Soubor/Uložit stránku jako).

Webový prohlížeč ale může v  tomto případě přepsat některé části

zdrojového kódu, takže nebude odpovídat originálu zcela přesně jako

při postupu podle předchozího tipu.

Tip: Jak prohlížet kód jazyka  CSS  dané webové stránky se  dozvíte

v kapitole 8, „Práce s kaskádovými styly.“

Kniha K2036.indb 51Kniha K2036.indb 51 1.11.2012 12:34:411.11.2012 12:34:41