načítání...
nákupní košík
Košík

je prázdný
a
b

E-kniha: Tvorba WWW stránek pro úplné začátečníky - Martin Domes

Tvorba WWW stránek pro úplné začátečníky

Elektronická kniha: Tvorba WWW stránek pro úplné začátečníky
Autor:

Už je nejvyšší čas vytvořit vlastní internetové stránky! Ať už chcete osobní stránky, blog či fotogalerii, nebo prezentovat svoji firmu, s knihou z edice Pro úplné začátečníky to ... (celý popis)
Titul je skladem - ke stažení ihned
Médium: e-kniha
Vaše cena s DPH:  149
+
-
5
bo za nákup

hodnoceni - 71%hodnoceni - 71%hodnoceni - 71%hodnoceni - 71%hodnoceni - 71% 83%   celkové hodnocení
3 hodnocení + 0 recenzí

Specifikace
Nakladatelství: » Computer press
Dostupné formáty
ke stažení:
PDF
Upozornění: většina e-knih je zabezpečena proti tisku
Médium: e-book
Počet stran: 246
Rozměr: 23 cm
Úprava: ilustrace
Vydání: Vyd. 1.
Jazyk: česky
ADOBE DRM: bez
ISBN: 978-80-251-2160-3
Ukázka: » zobrazit ukázku
Popis / resumé

Názorná příručka provází tvorbou www stránek za pomoci jazyka HTML. Výklad základních postupů pro začátečníky. Tvorba textů a odkazů, vkládání obrázků do stránky ap. Funkce a použití značkovacího jazyka HTML, tvorba stránek pomocí kaskádových stylů (CSS). Návody a postupy ke zdokonalení vědomostí pro pokročilé uživatele k vytvoření např. různých typů navigačních nabídek. Doplněno příklady k procvičení, které jsou dostupné ke stažení.

Popis nakladatele

Už je nejvyšší čas vytvořit vlastní internetové stránky! Ať už chcete osobní stránky, blog či fotogalerii, nebo prezentovat svoji firmu, s knihou z edice Pro úplné začátečníky to pro vás bude velmi snadné.

Zkušený autor vás v knize provede všemi kroky, které vás na cestě za vašimi vlastními internetovými stránkami čekají. To vše jednoduše, srozumitelně a bez zbytečných detailů. Autor vám doporučí nejlepší a nejrychlejší pracovní postup, poradí s řešením možných problémů. Na praktických cvičeních se budete postupně zdokonalovat až vytvoříte kompletní WWW stránky.

S knihou se mimo jiné naučíte:
- Vytvářet stránky ve speciálním editoru i v Poznámkovém bloku
- Použít značky jazyka HTML k vytvoření kostry stránky
- Formátovat texty na stránce, tvořit seznamy a tabulky
- Vkládat do stránky hypertextové odkazy a obrázky
- Vytvořit záhlaví stránky s logem a vkládat barevná pozadí
- Graficky zpracovat různé typy navigačních nabídek
- Tvořit dvousloupcové rozvržení (layout) stránky
- Pomocí CSS umísťovat části stránky dle svých požadavků
- Nahrát své stránky na Internet a zařídit, aby vás lidé našli (SEO)

Z adresy http://knihy.cpress.cz/k1622 si můžete stáhnout veškeré zdrojové materiály a kódy použité ve cvičeních v knize. Díky tomu máte možnost pracovat společně s autorem, takže dočtení této knihy budete mít konečně své vlastní WWW stránky!

Edice Pro úplné začátečníky:
- Zaměření na praktické využití
- Srozumitelný výklad krok za krokem
- Popis řešení možných problémů
- Vizuální propojení textů a obrázků

O autorovi:
Martin Domes je zkušený tvůrce WWW stránek a autor několika knih, např. Internet pro úplné začátečníky či Tvorba webových stránek Jednoduše, srozumitelně, názorně. Jako redaktor a šéfredaktor počítačové literatury nakladatelství Computer Press stojí za vznikem více než stovky počítačových knih. Je zároveň i tvůrcem inovované edice Pro úplné začátečníky.

Předmětná hesla
Zařazeno v kategoriích
Martin Domes - další tituly autora:
Recenze a komentáře k titulu
Zatím žádné recenze.


Ukázka / obsah
Přepis ukázky

Martin Domes

Tvorba WWW stránek

pro úplné začátečníky

Computer Press

Brno

2012


Tvorba WWW stránek pro úplné začátečníky

Martin Domes

Obálka: Martin Sodomka

Odpovědný redaktor: Hana Kostovičová

Technický redaktor: Jiří Matoušek

Objednávky knih:

http://knihy.cpress.cz

www.albatrosmedia.cz

eshop@albatrosmedia.cz

bezplatná linka 800 555 513

ISBN 978-80-251-2160-3

Vydalo nakladatelství Computer Press v Brně roku 2012 ve společnosti Albatros Media a. s. se sídlem

Na Pankráci 30, Praha 4. Číslo publikace 16 022.

© Albatros Media a. s. Všechna práva vyhrazena. Žádná část této publikace nesmí být kopírována

a rozmnožována za účelem rozšiřování v jakékoli formě či jakýmkoli způsobem bez písemného souhlasu

vydavatele.

Dotisk 1. vydání.


3

Obsah

Úvodem 11

Komu je kniha určena 11

Forma výkladu 12

Cvičení a příklady ke knize 12

Kapitola 1

Než se pustíme do práce 15

Internet, web, WWW – co to vlastně je? 15

Jak se tvoří internetové stránky 16

Co to je WWW stránka 17

Co jsou jazyky HTML a XHTML 18

Co umí a k čemu slouží jazyk CSS 19 Jak je to s internetovými prohlížeči 20

Standardy, standardy a zase standardy 20

Internet Explorer 21

Mozilla Firefox 22

Opera 23

Další prohlížeče 23 V čem budeme tvořit WWW stránky 24

Instalace editoru PSPad 25

Prostředí PSPadu 26

Práce s dokumenty v PSPadu 28

Kapitola 2

Začínáme tvořit WWW stránku pomocí HTML 31

Co to jsou značky a kam vkládat obsah WWW stránky 31

Značky, kam se podíváš 31

Vnořování značek a správný zápis 32

Kam vkládat obsah WWW stránky 32

OBSAH


4

První texty na stránce 34

Odstavce textu a nadpisy 34

Zvýraznění textu v odstavci 36

Ukončení řádku 37 Tvoříme seznamy 37

Neuspořádané (odrážkové) seznamy 38

Uspořádané (číslované) seznamy 38

Víceúrovňové seznamy 39 Používáme odkazy 41

K čemu jsou parametry 42

Adresa URL 42

Tvoříme první odkazy 42

Odkazujeme na další soubory na Internetu 44

E-mailová adresa jako odkaz 45

Odkazujeme na jiné místo na stejné stránce 46 Vkládáme obrázky do WWW stránky 47

Jaký obrázek lze použít na Internetu 48

Jak vložit obrázek do stránky 49

Popisek a titulek obrázku 50

Jak připravit obrázky pro webovou stránku 51

Náhledy fotografi í jako odkazy na větší snímek 55 Z čeho se skládá dokument jazyka (X)HTML 56

K čemu je DOCTYPE a jak jej používat 57

Základní kostra dokumentu (X)HTML 58

Hlavička stránky – titulek a správné české znaky 59

Titulek stránky 59

Nastavení znakové sady dokumentu 59

Další obsah hlavičky 60

Čím lze kód vhodně doplnit 60

Na mezerách v kódu nezáleží? 60

Komentáře ve zdrojovém kódu 60

Výplňový text 61

Kapitola 3

Jak na vzhled textů s kaskádovými styly 63

Co je třeba k formátování textů na stránce 63

Jak použít CSS pro změnu vzhledu prvků stránky 63

Jaké hodnoty CSS nabízí 65

Jak a kam zapisujeme kód CSS 66 Měníme podobu textů a odkazů na stránce 67

Jak na změnu typu písma 67

Rodiny písma a bezpečné určení písma pro WWW stránku 68

OBSAH


5

Jak změnit velikost textu 70

Kurziva, tučnost či podtržení pomocí CSS 72

Jak na změnu barvy textu 74

Upravujeme podobu nadpisů, odstavců a seznamů 76

Jak změnit výšku řádku 76

Zarovnání nadpisů a odstavců na stránce 77

Odsazení prvního řádku odstavce 79

Měníme odrážky a číslování seznamů 80

Neuspořádané seznamy 80

Uspořádané seznamy 81 Selektor následníka aneb Jak na změnu odrážek a číslování u víceúrovňového seznamu 82

Začneme víceúrovňovým seznamem 82

Selektor následníka 83

Kapitola 4

Měníme vzhled prvků stránky pomocí CSS 85

Rozměry, okraje a rámečky 85

Blokový model CSS 85

Nastavujeme šířku a výšku elementu 86

Nastavujeme rámeček elementu 88

Nastavujeme vnější a vnitřní okraje 90

Jak na vnitřní okraj 90

Jak na vnější okraj 92 Zarovnání stránky na střed obrazovky 94 Okraje u seznamů 96

Neuspořádané seznamy 96

Uspořádané seznamy 97

Barevná a obrázková pozadí 98

Jak na jednobarevná pozadí 99

Jak na obrázková pozadí 99

Obrázkové pozadí v několika krocích 100

Vlastnosti obrázku na pozadí 102

Povaha elementů a jak ji efektně využít 104

Jaké máme elementy 104

Měníme povahu elementů 105

Pojmenování bloků stránky a částí textů k formátování 106

Použití tříd CSS k přiřazení stylů 106

Použití identifi kátorů CSS k přiřazení stylů 108

Pojmenováváme volné bloky textů a částí stránky k formátování 109

Praktické využití elementu span 109

Praktické využití elementu div 110

OBSAH


6

Když se dva styly bijí aneb Jak CSS rozhoduje 111

Specifi čnost selektorů 112

Dědičnost vlastností 113

Pořadí přiřazování stylů – kaskáda 114

Kapitola 5

Tvoříme tabulky 117

Vytváříme kostru tabulky s údaji 117

Z čeho se tabulka skládá 117

Tvorba tabulky v několika krocích 118

Jak je to se sloupci tabulky 119

Prázdné buňky 121 Přidáváme záhlaví tabulky 121

Záhlaví tabulky v několika krocích 122

Spojení více buněk do jediné 123 Formátujeme tabulku a její části 124

Rozměry a okraje tabulky a buněk 124

Zarovnání obsahu buněk 126

Jak na barvy v tabulce 127

Upravujeme rámečky 129

Kapitola 6

Tvoříme layout a navigaci WWW stránek 131

Vytváříme externí šablonu stylů 131

K čemu je externí šablona stylů 131

Jak propojit dokument (X)HTML a externí šablonu 132

Jak efektivně využít komentáře v CSS 134 Typy umístění elementů na WWW stránce 135

Běžný tok dokumentu 135

Relativní umístění 136

Absolutní umístění 139

Plovoucí umístění 141

Jak umístit element do plovoucího umístění 141

Jak zastavit obtékání 143

Tvoříme layout WWW stránek 144

Základ pro tvorbu layoutu v dokumentu (X)HTML 145

Layout pomocí pevného a relativního umístění 147

Umístění záhlaví, navigační nabídky a obsahu stránky 148

Tvoříme zápatí stránky 150

OBSAH


7

Dvousloupcový layout pomocí plovoucího umístění 151

Umístění záhlaví, navigační nabídky a obsahu stránky 151

Tvoříme zápatí stránky 154

Tvorba navigační nabídky 155

Svislá navigační nabídka ve sloupci 156

Vytvoření odkazů navigační nabídky 156

Tvorba tlačítek 157

Na tlačítko se bude dát klepnout kdekoliv 159 Vodorovná navigační nabídka 160

Vytvoření odkazů navigační nabídky 160

Vytvoření vodorovné nabídky 162

Tipy pro vyladění vodorovné nabídky 164 Navigační nabídka jako záložky 165

Kapitola 7

Grafi cké ztvárnění WWW stránek a vizuální efekty 167

Vyladění stylů layoutu WWW stránek 167

Písmo a texty 168

Okraje 170

Odsazení textu od okraje sloupce 170

Okraje mezi elementy 171 Odkazy na stránce 172 Jak na zápatí stránky 174

Grafi ka WWW stránek 175

Jak tvořit grafi ku 175

Barvy pozadí 176

Jak na barvy pozadí 176

Pozadí sloupců 177 Záhlaví stránky a logo 179 Zakončení stránky v zápatí pomocí přechodu 181 Vyladění nadpisů a odkazů na stránce 182

Vyladění a grafi cké zpracování navigace 184

Grafi cká podoba navigační nabídky 184

Efekt překreslení 185

Efekt překreslení v navigační nabídce 185

Efekt překreslení u běžných odkazů 186 Označení odkazu v navigaci podle stránky, na níž se nacházíme 187 Jak na obrázková tlačítka v navigační nabídce 189 Grafi cké ztvárnění záložkové navigace 192

Jak na vyladění textových záložek 193

Jak na plastický vzhled záložek 195

OBSAH


8

Kapitola 8

Kontrola WWW stránek a jejich umístění na Internet 197

Kontrola a ověření zdrojového kódu 197

Kontrola zdrojového kódu (X)HTML 198

Kontrola stylů CSS 201

Kontrola funkčnosti odkazů 203 Když něco nefunguje aneb Jak na ladění kódu 204

Pravidlo 1: Testujeme v jednom, pak v dalších prohlížečích 204

Pravidlo 2: Validace vždy a všude 205

Pravidlo 3: Hledejte překlepy, chybné a chybějící části kódu 205

Pravidlo 4: Komentujte části kódu 206

Pravidlo 5: Názvy souborů raději malými písmeny 206

Pravidlo 6: Když kontrola selže, pusťme se do ladění 207 Nahráváme WWW stránky na Internet 208

Nahrání přes FTP 208

Nahrání přes webový formulář 210

Závěrem – a co dál? 211

Pokud se chcete dál zdokonalovat 211

Příloha 1

Tipy a triky pro tvorbu WWW stránek 213

Oddělení vzhledu a významu 213

Co tvoří význam 213

Co tvoří vzhled 214

Výsledek oddělení vzhledu a významu 214 Desatero tvorby WWW stránek 215

1. Úvodní strana 215

2. Pro jaké rozlišení web tvořit 216

3. Vzhled webu a typografi e textů 217

4. Strukturování informací 219

5. Snadná orientace 219

6. Aktuálnost a zpětná vazba 221

7. Správné a fungující odkazy 222

8. Korektní zobrazení ve více prohlížečích 223

9. Validní zdrojový kód a styly 224

10. Jak na přístupný web 224 SEO – optimalizace pro vyhledávače 225

Jak na klíčová slova 226

Jak na zpětné odkazy na naše stránky 227

Jak na správnou strukturu webu 228

OBSAH


9

Tvoříme texty pro WWW stránky – copywriting 229

Jak říct vyhledávači, aby navštívil naše stránky 229 Příloha 2 Jak na hosting a statistiky návštěvnosti 231

Pořizujeme hosting a doménu 231

Co to je hosting a doména 231

Výběr hostingu 231

Objednání hostingu a domény 233

Jak zjistím, jestli je doména volná 234

Jak na zajištění statistik návštěvnosti 235

Registrace 235

Vytvoření měřicího kódu 236

Vložení měřicího kódu do stránky 237

Sledování statistik 238

OBSAH



11

Úvodem

Kdo se dnes neprezentuje na Internetu, jako by snad ani neexistoval. Vytvořit si vlastní

stránky přitom není nic složitého. Stačí k tomu trocha cviku. Když chcete vytvořit osobní

či fi remní prezentaci, blog, fotogalerii nebo jiné WWW stránky, ale nevíte jak nato, tato

kniha je ta pravá.

Tvorba WWW stránek je velkou zábavou a stejně tak k tomu přistupuje i tato kniha. Snaží

se být praktická a zároveň se nezabývat tím, co čtenář nutně nepotřebuje. Výkladpostupuje od úplných základů a s každou kapitolou se budete postupně zdokonalovat. Začnetetexty na stránce a skončíte hotovou stránkou – včetně jejího grafi ckého ztvárnění.

Všechna cvičení a příklady popisované v knize jsou dostupné ke stažení v přehlednépodobě. Jak tyto příklady používat, popisuje podkapitola Cvičení a příklady ke knize.

Přeji vám hodně zábavy při tvorbě WWW stránek a spoustu spokojených uživatelů.

Komu je kniha určena

Q Pokud jste WWW stránky nikdy netvořili a nevíte, co to jsou jazyky HTML a CSS, a rádi

byste podnikli první krůčky, tato publikace vás jimi nenásilnou a trpělivou formou

provede. Naučíte se vše od úplných základů, jako je tvorba textů a odkazů či vkládání

obrázků do stránky. Q WWW stránky jste zatím tvořili jen v různých editorech (např. Dreamweaver čiFrontPage), ale láká vás naučit se používat značkovací jazyk HTML a kaskádové styly (CSS).

V knize se mimo jiné na praktických ukázkách dozvíte, jak tyto jazyky fungují a jak se

jejich kód tvoří, abyste dosáhli kýženého výsledku či efektu. Q WWW stránky jste již dříve tvořili pomocí značkovacího jazyka HTML, ale chcete se

naučit tvořit stránky moderním způsobem pomocí kaskádových stylů (CSS). Naučíte

se vše od úplných základů CSS – jak fungují a jak prvky tohoto jazyka používat, abyste

vytvořili vzhled celé WWW stránky. Q Znáte základy HTML i CSS a víte, jak vytvořit WWW stránku, ale hledáte praktickou

učebnici, díky níž své vědomosti zdokonalíte. V knize naleznete řadu v praxivyužitelných návodů a postupů, díky nimž vytvoříte jak části stránek, tak celé layouty nebotřeba různé typy navigační nabídky.

ÚVODEM


12

S knihou se přístupnou formou naučíte všemu, co je třeba znát, abyste mohli sami

vytvořit svoje vlastní WWW stránky od prvních textů po konečné grafi cké zpracování

jednotlivých částí i celé stránky.

Forma výkladu

Kniha popisuje vše podstatné a důležité bez zabíhání do složitých detailů. Jednotlivénávody postupují krok za krokem a jsou doplněny informacemi o možných úskalích a jejich

okamžitém řešení. To vše doprovází vizuální propojení textu a obrázků.

Výklad nevyžaduje žádné předchozí znalosti. Postupuje od úplných základů a informace

v každé kapitole doplňuje. Všechny postupy si čtenář vyzkouší v praktických cvičeních.

Kniha používá několik speciálních odstavců, které doplňují text dalšími informacemi:

Poznámka – jde o rozšiřující informaci na okraj.

Tip – doplňuje výklad o zajímavou a prospěšnou informaci.

Důležité – informace, kterou byste si měli zapamatovat.

Řešení problému – v případě, že se v nějakém postupu může vyskytnout problém,

informace v tomto odstavci vysvětlí, jak jej řešit.

Cvičení a příklady ke knize

Celý balík všech cvičení z knihy si čtenáři mohou stáhnout z adresy http://knihy.cpress.cz/

k1622 – najdete je na záložce Soubory ke stažení. Celý balík kódů stáhněte a uložte do

počítače. Následně balík rozbalte pomocí některého archivačního programu (např.WinRAR – viz www.winrar.cz).

Po rozbalení se na disku vytvoří složka WWW_stranky, v níž naleznete soubory cvičení

uložené v jednotlivých složkách podle kapitol. K přehledu a zkoušení cvičení sloužípřehledné rozhraní (obrázek Ú.1), které spustíte poklepáním na soubor spustit.html v hlavní

složce. Dále se řiďte pokyny rozhraní.

Některá cvičení v kapitole 7 počítají s tím, že je čtenář bude provádět spolu s autoremknihy, a proto poskytují startovací dokumenty. V takovém případě ve složce najdete jakstartovací, tak fi nální dokument. Finální dokument má v názvu slovo hotovo – napříkladindexhotovo.html (obrázek Ú.2).

ÚVODEM


13

Obrázek Ú.1. Rozhraní ke cvičením

Obrázek Ú.2. Některé složky obsahují jak startovací, tak fi nální dokumenty

ÚVODEM



15

Kapitola 1

Než se pustíme do práce

Než se začneme zabývat samotnou tvorbou webových stránek od úplných základů, jetřeba se na chvíli zastavit a najít odpovědi na několik základních otázek. Jestliže jsmeúplnými začátečníky, získáme tak základní povědomí o tom, jak se vlastně tvoří webové stránky

a co se skrývá pod jejich povrchem. Určitě nás také bude zajímat, v jakém programuinternetové stránky vytvářet. A internetové stránky se určitě vytváří k tomu, aby se prohlížely –

a k prohlížení je nutný prohlížeč internetových stránek. Jenomže ten neexistuje jen jeden,

ale trh s prohlížeči je poměrně široký.

Proč se vlastně prohlížeči zabývat? Napsat internetové stránky pro jeden prohlížeč není

příliš složité, ale vytvořit je tak, aby se shodně zobrazovaly ve všech hlavních prohlížečích,

je už výzva, které se musí každý správný tvůrce WWW stránek (říkáme webdesignér)

postavit čelem. Jak je to s prohlížeči si ale povíme až později.

Internet, web, WWW – co to vlastně je?

Ještě než uděláme krok dále, bude dobré se zastavit u pojmů, jichž budeme v této knize

používat. A protože v nich uživatelé, a nejen uživatelé, často chybují, my si je vysvětlíte,

abychom si dobře rozuměli. Nečekejte ovšem žádnou nudnou historii Internetu. Všepěkně stručně a jasně bez zabíhání do detailů:

Q Pod pojmem Internet si možná nic fyzického nepředstavíme, prostě zapnemepočítač a ono to tam je. Internet je ovšem hmotná technologie. Jde o celosvětovou síť

propojených počítačů, jež spolu mohou vzájemně komunikovat. Náš počítač se k síti

Internet připojuje přes poskytovatele internetového připojení, respektive přes jeho

přístupový bod. Internet je tedy technologie, jež umožňuje propojit počítače mezi

sebou. Q We b je jedna ze služeb Internetu, díky níž můžeme na svých monitorech vidět textový

a obrazový obsah Internetu. Tento obsah je uložen ve speciálních počítačích, tzv.serverech, k nimž se připojujeme ve svém prohlížeči pomocí WWW adresy (např. www.

cpress.cz). A proč WWW? Q WWW je internetový protokol, jenž našemu počítači říká, že budeme využívatwebovou službu Internetu. WWW je totiž jednoduše zkratka Wo r l d Wi d e We b (česky

celosvětová síť). Díky adrese WWW budeme schopni zobrazit dokumenty uložené

1

INTERNET, WEB, WWW – CO TO VLASTNĚ JE?


KAPITOLA 1 · NEŽ SE PUSTÍME DO PRÁCE

16

na Internetu (rozuměj na serverech) – pokud jde o text kombinovaný s obrázky,říká

me jim stránky. Je to totiž stejné jako v knize – Internetem můžeme také listovat

podobně jako v knize.

A co bylo cílem tohoto výkladu? Jde o to, že tyto pojmy se často vzájemně zaměňují. My se

budeme zabývat internetovými stránkami neboli webovými stránkami neboli WWWstrán

kami – všechna tato slovní spojení mají stejný význam, a i když je zaměňujeme, máme na

mysli stále totéž. Více podobně zaměřených a vzájemně pomocí jedné navigační nabídky

provázaných stránek tvoří tzv. webové sídlo, které má konkrétní WWW adresu (např. www.

cpress.cz). Tomuto webovému sídlu zkráceně říkáme web. Pokud tedy mluvíme o webu,nemí

níme tím službu Internetu, díky níž se zobrazují jednotlivé stránky, ale mluvíme o webových

stránkách jednoho člověka, jedné fi rmy nebo zpravodajském portálu.

Vypadá to složitě? Určitě ne. V této knize se budeme věnovat tvorbě WWW stránek, které

budou dohromady tvořit onen web – například naše osobní stránky, stránky klubu nebo

fi remní stránky. Dozvíte se zde všechny nutné základy.

Jak se tvoří internetové stránky

Když máme jasno, o čem se budeme v této knize bavit, napadne vás jistě otázka, jak se

takové internetové stránky tvoří. Pokud máte představu, že budeme jen klepat myší asklá

elektronická

pošta

(E-MAIL)

FTP

IRC

TELNET

stránky

Web

stránky

stránky

stránky

INTERNET

Obrázek 1.1. Co se skrývá v Internetu


17

dat stránky jako skládačku, pak jste na špatné adrese. Tato kniha se nevěnuje ničemutako

vému, ale odhalí vám, jak prakticky tvořit internetové stránky psaním kódu, díky němuž

se samotné stránky mohou zobrazit, říkáme vykreslit, v prohlížeči.

Pokud nám je povědomé slovo programování, máme základní představu o tom, čemu se

budeme v této knize věnovat. Jenomže o programování v pravém slova smyslu nepůjde.

Jak to? WWW stránky se totiž v základu vytváří tzv. značkováním.

Nepředstavujme si ovšem nic záludného, opravdu budeme psát kód stránek tak, žebude

me psát značky (anglicky tag). Značkování se ve skutečnosti neříká, webdesignéři totiž

používají mnohem vznešenější výraz – kódování. Zní to lépe, že?

Pomocí značek řekneme prohlížeči: tady bude odstavec a tady nadpis. To samotné by ale

nestačilo. Prohlížeči také musíme říct, jaký typ písma má použít k jeho vykreslení, jakou

velikost, barvu a tak dále. K tomu už nebudeme používat značky, ale tzv. styly. Styly pak

defi nujeme pomocí šablony, v níž napíšeme, že odstavec má mít takovou barvu, takovépís

mo a takovou velikost textu. Vytvoříme tak styl pro daný odstavec.

A to je celé? Ano i ne. Značky a styly jsou základní kameny tvorby WWW stránek. Kto

mu všemu ale budeme potřebovat ještě grafi cký editor, v němž si třeba připravímeobráz

ky, fotografi e a další grafi ku, kterou budeme chtít v našich WWW stránkách použít. Toho

se v knize též dotkneme, ale nyní tuto záležitost odsuňme stranou.

Co to je WWW stránka

Nadpis této části podkapitoly je vlastně také otázkou. Víme, že máme nějaké značky aně

kam zapisujeme nějaké styly a díky nim se pak v prohlížeči zobrazí WWW stránka. Ale

co je to ta samotná stránka a kam se zapisují tyto značky a styly? To je ona otázka a zde je

odpověď.

Obrázek 1.2. Vlevo kód se značkami tvořící WWW stránky, vpravo šablona se styly pro tyto značky

JAK SE TVOŘÍ INTERNETOVÉ STRÁNKY


KAPITOLA 1 · NEŽ SE PUSTÍME DO PRÁCE

18

WWW stránka není nic jiného než obyčejný textový dokument. Ovšem nikoliv textový

dokument Wordu, ten totiž text formátuje, ale textový dokument s čistýmneformátovaným textem (bez tučností, kurzivy či různých velikostí písma). Takový čistý textovýdokument můžeme vytvořit třeba v Poznámkovém bloku, jenž je součástí Windows.

Shrnuto a podtrženo: WWW stránka je textový soubor, do něhož zapisujeme značky,popisujeme styly a vkládáme textový obsah stránky. Obrázky a další grafi ka jsou uloženy ve

svých vlastních souborech (například fotografi e) a z našeho textového souboru s kódem na

ně pouze pomocí speciální značky odkazujeme (prohlížeči říkáme: na tomto místě zobraz

tento soubor s obrázkem, který je uložený tady). Co jsou jazyky HTML a XHTML

Od poměrně obecné definice toho, čím se tvoří WWW stránky, přejdeme kekonkrétním technologiím, jež ke stavbě stránek použijeme. Nejdříve jsme si řekli něco málo

o značkách a o tom podivném značkování, jemuž vlastně říkáme kódování. Také jsme

trochu naťukli, že budeme tvořit jakýsi kód se značkami, jímž řekneme prohlížeči, že

tohle je odstavec a tohle nadpis. Tyto značky definuje tzv. značkovací jazyk –konkrétně HTML.

Poznámka: HTML je zkratkou pro Hypertext Markup Language, česky hypertextový značkovací jazyk.

Je to jazyk, jenž se skládá ze značek a jehož smyslem je umožnit zobrazení textového a obrazového

obsahu stránek a propojit jednotlivé stránky mezi sebou pomocí tzv. odkazů. O tom až dále.

Jazyk HTML byl vytvořen k tomu, aby dal obsahu WWW stránky (tedy jejím textům adalším prvkům) smysl. Pomocí něj jednoduše označíme text, který má být nadpisem, běžným

odstavcem nebo bodovým výčtem a podobně. Taktéž můžeme označit část textu vodstavci a říct mu: na tato slova kladu důraz.

Platí, že pomocí jazyka HTML vytváříme logickou (významovou) strukturu dokumentu –

podobně jako v této knize máme nadpisy, odstavce textu, speciální odstavce a další textové

a jiné prvky. HTML ovšem nevytváří vzhled textu, neříká prohlížeči nic o velikosti textu,

typu písma či jeho barvě. Prohlížeči pomocí různých značek jazyka HTML pouzeřekneme: tohle je nadpis a tohle odstavec.

Pořád se věnujeme HTML, ale co onen jazyk XHTML? Co ten s tím má společného? Je to

jednoduché, XHTML je moderním bratrem HTML. Vychází z něj a v mnohém hozjednodušuje. Cílem XHTML bylo vytvořit jazyk vycházející z HTML, ale s přísnějšími pravidly.

Nebojme se ale, tato pravidla jsou pro nás přínosem.

XHTML vznikl jako odpověď na praktiky webdesignérů prováděné s jazykem HTML.

Začal se používat také k určení vzhledu částí stránky (pomocí značek se pak defi novaltřeObrázek 1.3. Značky jazyka (X)HTML dávají obsahu WWW stránky smysl


19

ba typ písma či jeho velikost). Jak jsme si ale řekli, HTML nikdy k určení vzhledučehoko

liv sloužit neměl. Proto vznikl jazyk XHTML s přísnějšími pravidly a s cílem jasně vymezit

rozdíl mezi strukturou WWW stránky (značkami) a jeho vzhledem (styly, jež se vytváří

v jiném než značkovacím jazyce).

Poznámka: XHTML je zkratkou Extensible Hypertext Markup Language, česky rozšířitelný hypertex

tový značkovací jazyk. Bere si to lepší z HTML (značky a podobně) a kombinuje to s přísnými pravidly

značkovacího jazyka XML (Extensible Markup Language, česky rozšiřitelný značkovací jazyk; je jazykem

určeným pro značkování dat k dalšímu, například databázovému, zpracování). XHTML je navržen tak,

aby jej bylo možné použít pouze k dodání smyslu (významu) částem WWW stránky, nikoli k určení jejich

vzhledu.

V této knize se budeme věnovat jazyku XHTML, ale protože v základu (rozuměj znač

kami) jsou tyto jazyky stejné, můžeme je bez problémů zaměňovat. Pokud tedy mluvíme

o značkách jazyka HTML, mluvíme také o značkách jazyka XHTML. Pokud budeme vté

to knize hovořit o pravidlech a syntaxi zápisu značek, budeme vždy hovořit o pravidlech

jazyka XHTML (mnoho z nich, především těch základních, ovšem bude platit beze změn

i pro jazyk HTML). Nedělejme tedy nyní mezi oběma jazyky žádný rozdíl, protože pro nás

zatím neexistuje.

Co umí a k čemu slouží jazyk CSS

Možná nám není zkratka CSS povědomá, ale je více než pravděpodobné, že jsme vespoji

tosti s tvorbou WWW stránek zaznamenali slovní spojení kaskádové styly. Ano, kaskádové

styly je český překlad zkratky CSS. Jazyk CSS není značkovacím jazykem, ale jazykemsty

lovacím. Jeho úkolem je dodat styl, tedy vzhled, částem WWW stránky, které jsme označili

pomocí značek jazyka HTML (XHTML). Prohlížeči tak řekneme: obsahu této značkypři

děl tento typ písma, tuto velikost a barvu textu. A prohlížeč to udělá, neboť tak jako rozumí

jazyku HTML, tak rozumí i jazyku CSS.

Poznámka: CSS je zkratkou Cascading Style Sheets, česky šablony kaskádových stylů (zkráceněkaská

dové styly). Byl vyvinut později než HTML s cílem vymýtit z jazyka HTML jakékoli prezentační, tedyvzhle

dové prvky. CSS samotný poskytuje vše podstatné pro určení vhledu kterékoli části WWW stránky.

Zastavme se jen velmi krátce u slova kaskádové v názvu kaskádových stylů. Ne, nebudeme

si nyní vysvětlovat nic složitějšího než to, že toto slovo má velmi silný význam v rámcicelé

ho názvu. Jazyk CSS totiž pracuje kaskádovitě a dokáže jednotlivé vlastnosti (například typ

písma) přelévat z jedné značky na další. Nyní nám bude stačit vědět, že je kaskáda opravdu

důležitá a že se jí budeme věnovat dále v knize ve chvíli, kdy na to přijde čas.

Podstatou tedy zůstává to, co jsme si řekli už u stručného popisu jazyka HTML. CSS slouží

k přidělení vzhledu, zatímco jazyk (X)HTML slouží pouze k určení významu částí webové

stránky. Dodržování tohoto striktního rozdělení vede k přehlednému kódu, s nímž jera

dost pracovat. Na jednom místě totiž budeme mít textový obsah stránky a na jiném,oddě

JAK SE TVOŘÍ INTERNETOVÉ STRÁNKY


KAPITOLA 1 · NEŽ SE PUSTÍME DO PRÁCE

20

leném, místě budeme mít seznam vzhledů (stylů) těchto částí stránky. Toho se budeme při

tvorbě WWW stránek v této knize držet.

Obrázek 1.4. Kaskádové styly dodávají vzhled obsahu WWW stránek označenému pomocí značek Jak je to s internetovými prohlížeči

Jestliže se právě chystáte přeskočit tuto kapitolu, zadržte! Téma prohlížečů je v případě

WWW stránek extrémně důležité a nelze ho podceňovat, a to ani (a zvláště tehdy) pokud

jste úplnými začátečníky. Pokud bychom totiž vytvářeli WWW stránky pouze pro jeden

prohlížeč, ať už by to byl například nejrozšířenější Internet Explorer, přijdeme, například

u fi remních stránek, pravděpodobně o část klientů s jiným prohlížečem. A věřte mi, je jich

hodně. Standardy, standardy a zase standardy

Neděsme se. Nebudeme si zde vykládat o žádných technických standardech, to by bylo příliš

nudné. Jsou ovšem podstatou problému s prohlížeči. Jazyky HTML, XHTML a CSS vychází

z obecně přijatých standardů, které defi nuje společnost W3C. V ní pracuje tým odborníků,

kteří určují standardy, podle nichž mají jednotlivé jazyky chápat samotné prohlížeče. Jetřeba říct, že tahle značka určuje odstavec a že vlastnost určující velikost textu se jmenuje takto.

Tento hotový a přijatý standard pak převezmou programátoři webového prohlížeče a vloží

jej do něj. Výsledkem je, že prohlížeč jazykům (X)HTML a CSS rozumí.

Poznámka: W3C je zkratkou Word Wide Web Consortium. Jde o společnost založenou v 90. letechminulého století za účelem standardizace prostředí Internetu. Jejím cílem je zajistit společný vývojtechnologií Internetu a jejich správné přijetí internetovými prohlížeči. Proto společnost na vývoji významně

spolupracuje také s tvůrci internetových prohlížečů.

Aktuálními platnými standardy jsou tyto verze jazyků:

Q HTML 4.01

Q XHTML 1.0

Q CSS 2

Tip: Jestliže jste zdatní v angličtině, podrobné informace k jednotlivým specifi kacím najdete nanásledujících adresách: HTML na www.w3.org/TR/html401/, XHTML na www.w3.org/TR/xhtml1/ a CSS na

www.w3.org/TR/CSS2/.


21

A v čem je tedy onen zakopaný pes? Problém je v tom, že ne každý prohlížeč přijatéstandardy vykládá správně. Tento problém platí zvláště pro starší prohlížeče, bohužel mimo

jiné také pro stále rozšířený Internet Explorer 6 (je součástí Windows XP). Každýprohlížeč na trhu tak implementuje (zahrnuje) specifi kace zmíněných standardů trochu odlišně.

Výsledkem pak může být jiné, nebo dokonce chybné vykreslení (zobrazení) WWWstránky v různých prohlížečích.

Jaké jsou podíly prohlížečů na trhu, zobrazuje následující tabulka:

prohlížeč podíl

Internet Explorer 7 32 %

Internet Explorer 6 27 %

Internet Explorer 5.5 a 5 <1 %

Mozilla Firefox 34 %

Opera 5 % Zdroj: Toplist, 2.6.2008 Podíl prohlížeče Internet Explorer je zhruba dvoutřetinový oproti třetinovému podílu Firefoxu. Světové statistiky udávají podíly méně dramatické: asi 73 % pro všechny verze Internet Exploreru a asi 19 % pro Firefox. Skutečný podíl Firefoxu bude tedy o několikprocent nižší, ale to už není podstatné. Podívejme se na to, jak jednotlivé prohlížeče (a jejich verze) dodržují standardy.

Internet Explorer

Tento nejrozšířenější prohlížeč, jenž je součástí operačních systémů Windows, je dlouhodobě

kritizován ze nedodržování standardů společnosti W3C. Problémem byla vždy předevšímspecifi kace CSS 2. Chybově se v tomto ohledu chovají především pětkové verze prohlížeče, ale ani

verze 6 se nemá čím chlubit. Spoustu chyb opravila až sedmá verze, která přišla s WindowsVista a kterou uživatelé Windows XP mohli získat s aktualizacemi nebo s třetím servisnímbalíčkem. Sedmá verze Internet Exploreru zobrazuje stránky dle standardu CSS obstojně.

Vzhledem k tomu, že je v současnosti stále velký počet uživatelů šesté verze, je třebavytvářené stránky kontrolovat také v tomto prohlížeči. Tento prohlížeč však v žádném případě

není vhodný jako hlavní vývojový prohlížeč, v němž budete vytvořené stránky průběžně

kontrolovat na prvním místě. V mnoha ohledech se totiž jeho názor na CSS liší, byťdrobně, od standardu společnosti W3C.

Tip: Pokud chcete mít na svém počítači více verzí Internet Exploreru, stáhněte si jednoduchý instalátor

z adresy www.tredosoft.com/Multiple_IE. Pokud budete chtít na Windows Vista nainstalovat starší verzi Internet Exploreru, pak budete muset sáhnout po simulátoru virtuálního počítače, programuVirtual Server (ke stažení na adrese technet.microsoft.com/cs-cz/bb738033.aspx) od společnosti Microsoft

a následně spustit virtuální počítač s Windows XP (obraz systému lze stáhnout na adrese www.microsoft.

com/downloads, kde do vyhledávacího pole napište Internet Explorer Application Compatibility VPC

Image). Jiným způsobem se k šesté verzi Internet Exploreru na Windows Vista nedostanete.

JAK JE TO S INTERNETOVÝMI PROHLÍŽEČI


KAPITOLA 1 · NEŽ SE PUSTÍME DO PRÁCE

22

Obrázek 1.5. Prohlížeč Internet Explorer 7 Mozilla Firefox

Tento velmi oblíbený internetový prohlížeč podporuje CSS velmi dobře a striktně podle

standardů. Prakticky platí, že pokud se vám stránky ve Firefoxu zobrazí, jak jste zamýšleli,

pak jste vše provedli správně. Firefox je vhodný jako hlavní vývojový prohlížeč, takže při

tvorbě stránek je průběžně prohlížejte právě v tomto prohlížeči.

Firefox prošel vývojem několika verzí, nicméně od verze 1.6 obsahuje funkci automatické

aktualizace, takže není třeba stránky prohlížet v jiné než aktuálně nejnovější stabilníverObrázek 1.6. Prohlížeč Mozilla Firefox 3 (s nestandardním vzhledem)


23

zi, neboť je pravděpodobné, že u všech uživatelů v poměrně krátké době po vydání novější

verze proběhne aktualizace.

V době psaní této publikace byla nejnovější verze 3.0.

Tip: Prohlížeč Mozilla Firefox si můžete stáhnout na adrese fi refox.czilla.cz. Protože se prohlížečprůběžně aktualizuje, není třeba jej přeinstalovávat. Opera

Opera je prohlížečem s poměrně malým zastoupením, ale s o to věrnější základnou svých

uživatelů. Je mu přisuzována vlastnost nejrychlejšího prohlížeče, což je možná uživatelsky zajímavé, ale z pozice webdesignéra to není nejpodstatnější. Podstatné je, že Opera je

v přijímání webových standardů společnosti W3C ze všech prohlížečů nejdále. Specifi kaci

CSS 2 zvládá přesně a téměř bez jakýchkoli odchylek. Pokud tedy budete chtít Operu zvolit

jako svůj hlavní prohlížeč, jen do toho. Problémem by mohla být snad jen menší základna

uživatelů – proto obvykle dostane přednost Firefox.

V době psaní této publikace byla na světě verze 9.5. V době, kdy knihu čtete vy, už bude na

světě jistě novější verze.

Tip: Prohlížeč Opera můžete stáhnout na adrese www.opera.com/download/. Českou podporuprohlížeči najdete na adrese www.operacesky.net.

Obrázek 1.7. Prohlížeč Opera 9.5 Další prohlížeče

Prohlížečů je samozřejmě podstatně více, než jsme si popsali, ale proč se jimi zatěžovat,

když mají poměrně malý podíl. Zároveň platí, že další vyspělé prohlížeče často vychází

JAK JE TO S INTERNETOVÝMI PROHLÍŽEČI


KAPITOLA 1 · NEŽ SE PUSTÍME DO PRÁCE

24

z jádra, které používá pro vykreslování WWW stránek například prohlížeč Firefox (jádro

se nazývá Gecko). Pokud se tedy stránky zobrazí správně ve Firefoxu, znamená to, že se

zobrazují správně i v podobných prohlížečích.

V této knize se dalším prohlížečům věnovat nebudeme, neboť to nebude pro naši práci podstatné. Vystačíme si se třemi u nás nejpoužívanějšími a vzájemně odlišnými prohlížeči.

V čem budeme tvořit WWW stránky

Jak už jsme si řekli dříve v této kapitole, tato kniha se věnuje tvorbě WWW stránekpsaním kódu, nikoli skládáním částí grafi ky. I to lze, ale k tomuto účelu jsou zde jiné knihy.

My se budeme učit tvořit WWW stránky způsobem, jenž nám zajistí maximální kontrolu

nad výsledkem našeho úsilí.

K tvorbě WWW stránek existují dva typy programů, jež nám dobře poslouží:

Q Editory WYSIWYG – tato tajemná zkratka znamená What You See IS What You Get,

česky co vidíš, to dostaneš. Takovéto editory fungují v grafi ckém módu a umožňujítvorbu WWW stránek jednoduše výběrem a stavěním prvků v grafi ckém rozhraní. Ihned

tak vidíme, co se bude na webové stránce zobrazovat. Výhodou je, že nemusíme znát

kódování, které jsme si popisovali. Nevyžaduje se tedy znalost jazyků HTML a CSS.

Nevýhodou je, že tento kód na základě našich instrukcí tvoří onen editor. To ovšem

znamená, že nad kódem máme jen velmi malou kontrolu, a proto tyto editory v této

knize nedoporučuji. Mezi nejznámější editory tohoto typu patří Adobe Dreamweaver,

Microsoft FrontPage a jeho novější bratr Microsoft Expression Web. Q Strukturní editory – to jsou vlastně obyčejné textové editory, v nichž píšeme kód, ale

poskytují nástroje, díky nimž je tvorba kódu snadnější a automatizovaná. Jsou velmi vhodným doplňkem a velmi dobře je při tvorbě WWW stránek využijeme.Výsledek kódu si pak musíme zkontrolovat v internetovém prohlížeči. Jako strukturníeditor může fungovat i Adobe DreamWeaver, který mimo grafi ckého WYSIWYG režimu

obsahuje také čistě strukturní režim, v němž vidíme a píšeme pouze kód. Nevýhodou je, že tento program je placený. V této knize si budeme doporučovat neplacený

soft ware. Nejlepším a ve světě známým českým editorem je PSPad. Zvolit ale můžeme

samozřejmě jakýkoli jiný editor, který najdeme a stáhneme například na adrese www.

gigamania.cz. Výklad v této knize je naprosto nezávislý na jakémkoli editoru, který si zvolíme, je to tedy pouze na nás. WWW stránky lze zcela běžně tvořit také v obyčejném textovém editoru, jako je třeba Poznámkový blok, jenž je součástí Windows. Důležité: Kód nikdy nepište v textových procesorech jako je Word, neboť soubor s WWW stránkou vyžaduje uložení jako čistý text bez formátování.


25

Instalace editoru PSPad

Podívejme se nyní na to, kde stáhnout PSPad

a jak jej nainstalovat do svého počítače. Svou

pouť v tomto případě začneme na adrese www.

pspad.cz. Na stránce následujeme odkaz v levé

navigační nabídce s názvem Stažení PSPadu

a na načtené stránce klepneme na odkazInstalátor, pomocí něhož stáhneme PSPad do svého počítače.

Po stažení spusťme samotnou instalaci:

1. V prvním okně instalátoru klepněme na tlačítko Další.

2. Zatrhneme volbu, v níž souhlasíme s licenčními podmínkami, a pokračujeme pomocí

tlačítka Další. 3. Pokud budeme chtít PSPad nainstalovat do specifi ckého umístění, použijeme tlačítko

Procházet. Instalovat je ale možné do výchozího adresáře. Pokračujeme stiskemtlačítka Další. 4. V dalším okně můžeme v roletce zvolit typ instalace. Lze nechat zvolenou plnouinstalaci nebo pomocí volby Uživatelská postupně zatrhnout součásti PSPadu, které chceme

nainstalovat. Pokračujeme tlačítkem Další. 5. V dalším okně zvolíme název, pod nímž se bude PSPad zobrazovat na ploše a v nabídce

Start. Pokračujme tlačítkem Další.

Obrázek 1.9. Výběr součástí k instalaci PSPadu

Obrázek 1.8. Stažení PSPadu

V ČEM BUDEME TVOŘIT WWW STRÁNKY


KAPITOLA 1 · NEŽ SE PUSTÍME DO PRÁCE

26

6. V posledním okně před instalací je možné zatrhnutím či zrušením zatržení volitzpůsob fungování PSPadu. Ponechme volby ve výchozím nastavení, jak ukazuje obrázek

1.10, a pokračujme stiskem tlačítka Další. 7. Editor se nainstaluje, jakmile stiskneme tlačítko Instalovat. Po instalaci stisknemetlačítko Dokončit.

Prostředí PSPadu

Po dokončení instalace PSPad spusťme, abychom se seznámili s jeho prostředím a ovládáním. Jak zobrazuje obrázek 1.11, okno PSPadu se v základu neliší od jiných programů.

Najdeme zde jak textové nabídky s nejrůznějšími základními i pokročilými nástroji, tak

Obrázek 1.10. Volby instalace PSPadu

Obrázek 1.11. Okno PSPadu


27

panel nástrojů s ikonami, jež nám nejdůležitější nástroje okamžitě zpřístupňují. Pokudvšemu hned nerozumíme, není třeba propadat panice, neboť na všechno přijde čas. Cobudeme v PSPadu či jiném editoru používat, je jen na nás. Tato kniha se nebude věnovat jeho

ovládání, neboť věřím, že na to přijdete sami. Nicméně čas od času si ukážeme, jak tukterou věc udělat jednodušeji pomocí nástrojů PSPadu.

Nejpodstatnější částí je samotné obsahové okno, nyní s bílou nepopsanou plochou.Právě sem budeme zapisovat kód, jímž budeme tvořit WWW stránku. Zkusme sem cokoliv

napsat, abychom si program trochu osahali. Jak vidíme, do okna můžeme psát stejně jako

v jakémkoli jiném textovém editoru.

V levém panelu nalezneme rychle přístupné záložky s následujícím obsahem:

Q První záložka zleva obsahuje naše projekty. Klepnutím pravým tlačítkem na Novýprojekt a volbou Nastavení projektu v místní nabídce můžeme zvolit výchozí složku, do

níž se budou všechny soubory zvoleného projektu ukládat. Tyto projekty ale využívat

nemusíme, hodí se zvláště v případě, kdy vytváříme více webů. Tip: Součástí balíku kódů je i celý projekt se všemi cvičeními k této knize v PSPadu. Lze ho otevřítjednoduše: v nabídce Projekt klepněte na příkaz Otevřít projekt, najděte složku s kódy a v hlavní složce otevřete projekt PSPadu, jehož soubor se jmenuje WWW stránky PÚZ.ppr. Kódy všech cvičení takbudete mít hned po ruce. Q Druhá záložka obsahuje adresářovou strukturunašeho počítače. Zde lze otevřít složku, do níž ukládáme

soubory s našimi WWW stránkami. Tuto složku si

můžeme vytvořit kdekoliv v počítači pomocí Průzkumníka Windows. Na záložce pak složku pouze

nalistujeme a poklepáním na soubor WWW stránky

jej otevřeme do PSPadu. Vybraný dokument s WWW stránkou lze otevřít do PSPadu také tak, že v Průzkumníku Windows: 1. Pravým tlačítkem klepneme na soubor WWW

stránky. 2. V místní pokračujeme na nabídku PSPad. 3. A zde klepneme na příkaz PSPad. Řešení problému: Jestliže v místní nabídce souboru nemáte příkaz PSPad, pak jste při instalaci zrušili zatržení volby Zaregistrovat PSPad do kontextového menu průzkumníka. Nevadí, neboť to můžete napravit. V PSPadu otevřete nabídku Nastavení a zvolte příkaz Nastavení programu. V levé nabídce zvolte skupinu Integrace do systému a zatrhněte volbu Integrovat do kontextové nabídky průzkumníka.

Obrázek 1.12. Rychlý přístup kjakékoli složce a souborům v levém

panelu PSPadu

V ČEM BUDEME TVOŘIT WWW STRÁNKY


KAPITOLA 1 · NEŽ SE PUSTÍME DO PRÁCE

28

Jak sami brzo zjistíme, hlavní výhodou PSPadu je to, že dokáže barevně odlišit části kódu,

a proto se v něm budeme snadněji orientovat. Kód sice můžeme psát v Poznámkovémbloku, ale tam o přehlednosti nemůže být řeč. Práce s dokumenty v PSPadu

Protože je PSPad velmi vhodným pomocníkem

při psaní kódu, je dobré jej využít také k zakládání nových dokumentů a k práci s více dokumenty v programu. Mezi nimi lze přepínat, vyhledávat

a podobně.

Založení nového dokumentu s WWW stránkou:

1. V nabídce Soubor klepneme na příkaz Nový.

2. V dialogu Nový soubor zvolme záložku Podle

šablony.

3. Najdeme kategorii XHTML a klepneme na ni.

4. Klepnutím vyberme šablonu XHTML 1.0 Strict

win-1250 a stiskneme OK.

Poznámka: Význam jednotlivých zkratek v šabloně je

následující: XHTML 1.0 Strict je verze standardu a win-1250

je kódování znaků pro střední Evropu, tedy pro český jazyk

(zároveň jde o kódování Windows).

Tip: Nabídku šablon pro založení nového dokumentu můžete též rychle vyvolat, pokud poklepete na

panel se záložkami.

Obrázek 1.13. Otevíráme soubor s WWW stránkou z Průzkumníka Windows do PSPadu

Obrázek 1.14. Zakládáme novou WWW

stránku ze šablony


29

Přepínání mezi otevřenými dokumenty. Nezabývejme se nyní tím, co se objeví v nově

založeném dokumentu jazyka XHTML, ale zkusme si založit více nových dokumentů. Jak

si můžeme všimnout, skládají se do záložek. Klepnutím na záložku se do dokumentupřeneme.

Uložení dokumentu. Jestliže budeme chtít práci v jakémkoli otevřeném dokumentu

uložit, je nejrychlejší cestou klávesová zkratka Ctrl + S. Použít můžeme také ikonu diskety

na panelu nástrojů.

Zavření dokumentu. Pokud budeme chtít jeden nebo více dokumentů zobrazených na

záložkách zavřít, pak postupujeme takto:

1. Na záložku dokumentu klepneme pravým

tlačítkem. 2. V místní nabídce zvolíme příkaz podle

toho, co chceme provést:

Q Zavřít – zavře aktuálně otevřenýdokument.

Q Zavřít mimo aktuální – zavře všechny

dokumenty mimo aktuálnězobrazeného.

Q Zavřít vše – zavře všechny otevřené

dokumenty.

Obrázek 1.15. Zavíráme otevřené dokumenty

V ČEM BUDEME TVOŘIT WWW STRÁNKY



31

Kapitola 2

Začínáme tvořit WWW stránku

pomocí HTML

Začínáme, držme si klobouky. Během této kapitoly už budeme mít první výsledky svépráce na monitoru. Pravda, nebude to možná nic moc, ale první WWW stránku vytvoříme

se vším všudy, co má taková stránka mít. Především je třeba říct, že se nebudeme zabývat vzhledem textu na stránce ani jinými prvky stránky, ale provedeme pouze svoje první

značkování, tedy označení různých textů na stránce pomocí značek, čímž jim přidělíme

skutečný význam ve formě odstavců, nadpisů, odrážkových seznamů a podobně. A co víc

– vytvoříme také odkazy, díky nimž propojíme více stránek dohromady, a také se naučíme

do textu vkládat obrázky.

Začněme tím, že si spustíme PSPad nebo jiný editor, v němž založíme nový dokument pro

naši WWW stránku. Zatím se nebudeme zabývat tím, co nám PSPad vytvořil za kód.Vzáětí si vysvětlíme, co to jsou značky jazyka (X)HTML a jak s nimi zacházet.

Poznámka: Založení dokumentu v PSPadu jsem popisoval na straně 28. Co to jsou značky a kam vkládat obsah WWW stránky

Jakmile máme vytvořený dokument XHTML v PSPadu nebo jiném editoru, vysvětlíme si,

co vlastně vidíme. Protože každý můžeme mít obsah dokumentu trochu odlišný,vysvětlíme si vše velmi univerzálně. Podrobněji o struktuře dokumentu jazyka (X)HTML až na

straně 56. Značky, kam se podíváš

Jak už jsme si v kapitole 1 pověděli, dokument jazyka (X)HTML se skládá především ze

značek. Značka označuje část obsahu dokumentu, čímž mu dává význam. Říkáme tímprohlížeči například: toto je odstavec. Značka se zapisuje párově, existují tedy dvě varianty:

Q Značka otevírací – říkáme prohlížeči, kde označená oblast začíná.

Q Značka uzavírací – říkáme prohlížeči, že tady označená oblast končí.

2

CO TO JSOU ZNAČKY A KAM VKLÁDAT OBSAH WWW STRÁNKY


KAPITOLA 2 · ZAČÍNÁME TVOŘIT WWW STRÁNKU POMOCÍ HTML

32

Obecný zápis (místo slova značka bude třeba použít název značky) vypadá následovně:

<značka>

Obsah značky

</značka> Jak vidíme, značku uzavíráme do ostrých závorek (napíšeme ji pomocí kláves vpravo od klávesy s písmenem M), přičemž uzavírací značku doplňujeme lomítkem před jejím názvem. Vše, co je uzavřeno mezi obě varianty značky, je obsahem značky. Aby to nebylo tak jednoduché, existují také značky nepárové. Jejich zápis vypadá následovně:

<značka /> Nepárová značka se také zapisuje do ostrých závorek, ale za názvem značky uvnitř závorek následuje prázdná mezera jednoho znaku a lomítko. Jak si můžeme všimnout a jak nám asi došlo, nepárová značka žádný obsah nemá, neboť jej není kam uzavřít. Účel těchto značek je zkrátka jiný a poznáme ho dále v této kapitole. Poznámka: Prázdnou mezeru za značkou nevyžadují nové prohlížeče, těm velmi starým by ale takový zápis dělal potíže, neboť neznají specifi kaci jazyka XHTML. Přesto se ustálilo mezeru stále u nepárové značky zapisovat.

Vnořování značek a správný zápis

Řekněme, že budeme chtít pomocí značky označit odstavec textu, ale v tom odstavci dálebudeme chtít označit ještě nějaké slovo, například proto, abychom ho zvýraznili oproti běžnémutextu odstavce. Pak mluvíme o tzv. vnořování značek do sebe. Podívejme se, jak by to vypadalo:

<značka1>

Veškerý tento text je obsahem značky1, ale do ní je možné vnořit další značku.

<značka2>Tento text</značka2> je obsahem jak značky1, tak značky2.

</značka1> Jak je vidět na uvedeném obecném příkladu, značka2 je vnořená do značky1 a obsah značky2 je také obsahem značky1. I když to vypadá banálně, ve vnořování můžeme velmi snadno udělat chybu, a to když první značku uzavřeme dříve než vnořenou druhou značku.Vypadalo by to takto:

<značka1>Tento text patří do značky 1, <značka2>ale také do značky2. </značka1>

A tento text by měl patřit už jen značce2, ale ve skutečnosti to je chyba.</značka2> Výše uvedený příklad prakticky ukazuje tzv. křížení značek. Takovýto zápis je zcelachybný a pravděpodobně povede ke zcela špatnému vykreslení webové stránky v prohlížeči. Samozřejmě záleží na okolnostech. Pamatujme si tedy, že značky je třeba uzavírat vopačném pořadí, než je otevíráme: otevření značky1 ¬ otevření značky2 ¬ uzavření značky2 ¬ uzavření značky1

Kam vkládat obsah WWW stránky

Dříve než se pustíme do praktické tvorby WWW stránky, musíme si povědět o tom, kam

textový a další obsah, který se zobrazí v prohlížeči, vlastně v dokumentu jazyka XHTML


33

patří. Jestliže jsme si založili novou stránku v některém editoru, pak máme již několik nám

nyní nesrozumitelných značek v dokumentu vložených.

Dokument HTML je uzavřen v elementu html, tedy mezi párové značky <html> a </html>.

Před tímto elementem a v něm se vyskytují další značky, jimž zatím nerozumíme a ani se jimi

nyní zabývat nemusíme – strukturu dokumentu si popíšeme až na straně 56. Nás bude nyní

zajímat především to, kam zapisovat obsah a značky v rámci výuky v této kapitole.

Pamatujme si, že vše, co se má zobrazit v okně prohlížeče, patří mezi značky <body>

a </body>. Více naznačuje obrázek 2.1, jenž zobrazuje dokument založený dle šablony

popsané v kapitole 1 (strana 28) v PSPadu.

Obrázek 2.1. Dokument založený v PSPadu – obsah vkládáme do značky body

Řešení problému: Jestliže stránku nevytváříte v PSPadu, ale třeba v Poznámkovém bloku, pakvytvořte stránku tak, že do prázdného textového dokumentu vložíte otevírací značku <html>, za niotevírací značku <body>, poté uzavírací značku </body> a za ni uzavírací značku </html>. Dokument uložte

s koncovkou html – například stranka.html – jako čistý text.

Značka body, česky tělo,

označuje hlavní část dokumentu XHTML, opravdu

tedy jeho tělo. Vše, co sem

zapíšeme, se zobrazí v prohlížeči. Postupujme tedytakto:

1. Do elementu body napišme nějaký text. 2. Dokument uložíme (naříklad Soubor ¬ Uložit). 3. Zvolme svou složku anázev souboru zapišme

CO TO JSOU ZNAČKY A KAM VKLÁDAT OBSAH WWW STRÁNKY

Obrázek 2.2. Ukládáme dokument HTML


KAPITOLA 2 · ZAČÍNÁME TVOŘIT WWW STRÁNKU POMOCÍ HTML

34

včetně správné koncovky. Dokumenty jazyka HTML mají koncovky html. Názevsouboru by tedy mohl vypadat takto: stranka.html. 4. Stiskneme tlačítko Uložit. Jakmile máme stránku uloženou v souboru, poklepejme na ni třeba v Průzkumníkovi Windows či v nějakém souborovém manažeru (např. Total Commanderu), a stránka se otevře ve výchozím internetovém prohlížeči. Pokud ji budeme chtít otevřít v jiném prohlížeči, pak budeme muset na soubor klepnout pravým tlačítkem a v místní nabídce zvolit příkaz Otevřít v programu. Výsledek si můžeme prohlédnout na obrázku 2.3. Obrázek 2.3. Vše, co zapíšeme do značky body, se zobrazí v prohlížeči Když jsme dokončili tuto tak trochu teoretickou pasáž, vrhněme se už raději na skutečné značky a tvorbu naší první webové stránky.

První texty na stránce

První text na stránce už vlastně máme za sebou. Ale tento text jsme neumístili do žádné značky, která by prohlížeči sdělila cokoliv o jeho významu. Prohlížeč neví, jestli má jít

o nadpis, odstavec či něco jiného. S tím je třeba něco udělat.

Odstavce textu a nadpisy

Začněme tím, že na stránce vytvoříme nadpis a pod ním odstavec textu. Postup budenásledující (vysvětlení bude následovat):

1. Mezi značky <body> vložme značky <h1> .

2. Mezi tyto značky napišme náš nadpis.

3. Za značkou </h1> stiskněme Enter a zapišme značky pro odstavec <p>

.

4. Mezi tyto značky zapišme text odstavce.

Celý kód může vypadat třeba takto:

<body>

<h1>Můj první nadpis

<p>Toto je můj první odstavec na mé první WWW stránce.

</body>


35

Dokument uložme a spusťme

v prohlížeči. Obrázek 2.4zachycuje výsledek. Bylo tojednoduché, že?

A nyní slibované vysvětlení. Každý prvek v dokumentu HTML se nazývá element.

A elementem odstavce je p

(zkratka anglického slovaparagraph, česky odstavec). Element

p je určený k označení odstavce a má k dispozici dvě párové

značky – <p> a </p>. Vše mezi těmito značkami je obsah elementu p a s tímto obsahem

pracuje prohlížeč. Prohlížeč ví, že jde o odstavec textu, neboť text jsme umístili doelementu p.

Důležité: Běžně se pojem značka a element zaměňuje a vlastně o moc nejde, takže jestli budete chtít

tyto pojmy zaměnit, nevadí. Hlavně když si budeme rozumět.

A nyní k nadpisu. Jazyk HTML nabízí 6 úrovní nadpisů. A proč? I v této knize totiž máme

nadpis kapitoly, poté nižší úroveň – nadpis podkapitoly, a ještě nižší úroveň nadpisu –nadis části podkapitoly. Obecný zápis elementu nadpis zní:

hX kde h je element nadpisu a X je číslo od 1 do 6

Element h (anglicky headline, česky nadpis)

tedy může ve svých šesti úrovních vypadattakto: h1, h2, h3, h4, h5 nebo h6. Podívejme se na

praktický příklad:

<body>

<h1>Nadpis 1. úrovně

<p>Zcela běžný odstavec textu pod

nadpisem první úrovně.</p>

<h2>Nadpis 2. úrovně

<p>Zcela běžný odstavec textu pod

nadpisem druhé úrovně.</p>

<h3>Nadpis 3. úrovně

<p>Zcela běžný odstavec textu pod

nadpisem třetí úrovně.</p>

...

</body> Kód by mohl pokračovat dalšími úrovněmi. Jak vše vypadá v prohlížeči, ukazuje obrázek 2.5.

Obrázek 2.4. Náš první nadpis a odstavec textu

Obrázek 2.5. Nadpisy více úrovní jazyka HTML

PRVNÍ TEXTY NA STRÁNCE


KAPITOLA 2 · ZAČÍNÁME TVOŘIT WWW STRÁNKU POMOCÍ HTML

36

Po pohledu na obrázek 2.5 vás možná napadne otázka – tedy napadne vás, pokud jstepřečetli kapitolu 1, v níž jsme se bavili o tom, že jazyk HTML neslouží k určení vzhledu textu ani

jiného obsahu stránky. Ano, to je pravda. Nicméně prohlížeče v sobě mají zabudované jisté

základní styly jednotlivých elementů jazyka HTML, takže i bez toho, abychom jim pomocí

jazyka CSS jakýkoli styl přidělovali, vykreslí tyto elementy se základním vzhledem.

Nutno podotknout, že v každém prohlížeči je tento základní vzhled trochu odlišný. My se

nyní vzhledem nezabývejme, neboť k tomu slouží CSS a k němu se dostaneme později.

Zvýraznění textu v odstavci

Dříve v této kapitole, když jsme si ukazovali nebezpečí kříženého zápisu značek, jsme si

ukazovali tuto modelovou situaci na příkladu, kdy chceme zdůraznit nějaké slovo nebo

slova v odstavci. Nyní se podíváme na elementy, díky nimž můžete slovům přidat nějaký

význam:

Q strong (česky silný) – používá se k vyzvednutí důležitých částí věty

Q em (zkratka z anglického emphasize, česky zvýraznění) – slouží ke zvýraznění částí textu

Q cite (česky citovat) – element určený k vyznačení citací v textu

Q code (česky kód) – element k označení výpisu kódu

Q ins (zkratka anglického inserted, česky vloženo) – označuje vložený text

Q del (zkratka anglického deleted, česky vy



       
Knihkupectví Knihy.ABZ.cz - online prodej | ABZ Knihy, a.s.
ABZ knihy, a.s.
 
 
 

Knihy.ABZ.cz - knihkupectví online -  © 2004-2018 - ABZ ABZ knihy, a.s. TOPlist