E-kniha: HTML – tvorba jednoduchých internetových stránek -- 2., aktualizované a doplněné vydání – Slavoj Písek

5HTML – tvorba jednoduchých internetových stránek

Digitální fotografie – tisk, úprava a prohlížení v ACDSee

0bsah

Obsah

Úvod................................................................................................................9

Co naleznete uvnitř této knihy................................................................................................9

Co nenaleznete v této knize....................................................................................................9

Komu je kniha určena.............................................................................................................9

Příklady používané v knize...................................................................................................10

Používané typografické konvence.........................................................................................10

1. Dříve než začneme .....................................................................................11

1.1 Trocha historie nikoho nezabije.......................................................................................11

1.2 Co budete potřebovat.....................................................................................................11

1.3 Microsoft versus zbytek světa........................................................................................12

2. První webová stránka................................................................................14

2.1 Formátovací značky v HTML dokumentu..........................................................................14

2.2 Struktura HTML dokumentu............................................................................................15

2.3 Zobrazení stránky..........................................................................................................15

2.4 Hlavička jak má být.......................................................................................................16

Název stránky.........................................................................................................................................16

Metainformace........................................................................................................................................16

Co se ještě vejde do hlavičky....................................................................................................................17

2.5 Kompletní schéma HTML dokumentu ...............................................................................17

2.6 Komentáře ....................................................................................................................18

2.7 Zapamatujte si..............................................................................................................19

3. Tvorba stránek na plný plyn .......................................................................20

3.1 Nadpisy ........................................................................................................................20

3.2 Odstavce.......................................................................................................................21

3.3 Optické dělení dokumentu...............................................................................................24

3.4 Zarovnávání dokumentu.................................................................................................26

Zarovnání více odstavců současně.............................................................................................................27

3.5 Používání barev.............................................................................................................29

Změna barvy v celém dokumentu.............................................................................................................29

Jak lidsky přepočítat hodnotu barev.........................................................................................................31

Změna barvy části textu...........................................................................................................................32

3.6 Nastavení písma a jeho velikosti.....................................................................................33

Nastavení velikosti písma.........................................................................................................................33

Absolutní velikost písma...........................................................................................................................33

Relativní velikost.....................................................................................................................................34

Změna písma...........................................................................................................................................35

3.7 Formátování textu.........................................................................................................37

3.8 Zapamatujte si..............................................................................................................39 HTML – tvorba jednoduchých internetových stránek Obsah 4. Seznamte se se seznamy............................................................................41

4.1 Nečíslované seznamy.....................................................................................................41

4.2 Číslované seznamy.........................................................................................................43

4.3 Definiční seznamy..........................................................................................................44

4.4 Vnořené seznamy..........................................................................................................45

4.5 Zapamatujte si..............................................................................................................47

5. Pokročilé formátování textu .......................................................................48

5.1 Logické styly písma........................................................................................................48

5.2 Zobrazení zdrojových textů............................................................................................50

5.3 Zobrazení speciálních znaků............................................................................................50

5.4 Zapamatujte si..............................................................................................................53

6. Hypertextové odkazy.................................................................................54

6.1 HTML dokumenty a jejich URL.........................................................................................54

Absolutní URL..........................................................................................................................................55

Relativní URL...........................................................................................................................................55

6.2 Vkládání odkazů do dokumentů......................................................................................56

Používání relativních odkazů....................................................................................................................56

6.3 E-mailová adresa jako odkaz..........................................................................................57

6.4 Používání záložek..........................................................................................................57

6.5 Barevné provedení odkazů .............................................................................................58

6.6 Zapamatujte si..............................................................................................................58

7. Obrázky....................................................................................................59

7.1 Umístění obrázku na webovou stránku............................................................................59

7.2 Obrázky a text..............................................................................................................60

4.3 Obrázky obtékané textem..............................................................................................62

7.4 Kdo nemá rád obrázky?.................................................................................................64

7.5 Další atributy pro obrázky..............................................................................................64

Velikost obrázku......................................................................................................................................64

Odsazení obrázku od textu.......................................................................................................................64

Rámeček.................................................................................................................................................65

7.6 Animované obrázky.......................................................................................................65

7.7 Obrázky na pozadí.........................................................................................................65

7.8 Zásady správného používání obrázků..............................................................................65

7.9 Zapamatujte si..............................................................................................................66

8. Klikací mapy..............................................................................................67

8.1 Vytváření klikacích map .................................................................................................67

8.2 Zapamatujte si..............................................................................................................70HTML – tvorba jednoduchých internetových stránek

Digitální fotografie – tisk, úprava a prohlížení v ACDSee

0bsah

9. Tabulky....................................................................................................71

9.1 Vytváření tabulek........................................................................................................71

Tabulky a rámečky................................................................................................................................72

9.2 Formátování tabulek ....................................................................................................72

Zarovnávání buněk...............................................................................................................................72

Slučování buněk....................................................................................................................................74

Svislé zarovnávání buněk......................................................................................................................75

9.3 Další užitečné atributy..................................................................................................76

Odsazení textu v buňkách......................................................................................................................76

Vzdálenost mezi buňkami......................................................................................................................77

9.4 Možnosti využití tabulek..............................................................................................77

Text ve sloupcích....................................................................................................................................77

Tabulky a obrázky.................................................................................................................................78

9.5 Zapamatujte si.............................................................................................................79

10. Rámy.......................................................................................................80

10.1 Tvorba rámů..............................................................................................................80

Definice rámu.....................................................................................................................................81

10.2 Hypertextové odkazy a rámy.....................................................................................82

10.3 Když rámy nechtějí fungovat.......................................................................................82

10.4 Praktická ukázka.......................................................................................................83

10.5 Zapamatujte si...........................................................................................................84

11. Kaskádové styly.......................................................................................85

11.1 Význam stylů.............................................................................................................85

11.2 Používání stylů..........................................................................................................86

Slučování definic.................................................................................................................................86

Třídy HTML značek..............................................................................................................................86

Výjimky z pravidel..............................................................................................................................89

Použití značky <SPAN>.......................................................................................................................90

Pseudotřídy.........................................................................................................................................91

Překrývání stylů..................................................................................................................................92

11.3 Jeden styl pro více dokumentů....................................................................................92

11.4 Co všechno styly umí..................................................................................................92

Písmo.................................................................................................................................................92

Velikost písma.....................................................................................................................................93

Formátování textu...............................................................................................................................93

Pozadí................................................................................................................................................93

Umístění a okraje................................................................................................................................95 HTML – tvorba jednoduchých internetových stránek

Obsah

11.5 Kaskádové styly druhé úrovně CSS2............................................................................99

Okraje a rámečky.................................................................................................................................99

Písmo...................................................................................................................................................99

Vizuální vlastnosti...............................................................................................................................100

Pseudotřídy podruhé..........................................................................................................................100

Další vlastnosti CSS2...........................................................................................................................100

12. Zveřejnění webových stránek..................................................................101

12.1 Stránka u poskytovale připojení.................................................................................101

12.2 Veřejné servery........................................................................................................102

12.3 Dejte o sobě vědět....................................................................................................104

Rejstřík........................................................................................................106

9HTML – tvorba jednoduchých internetových stránek

Digitální fotografie – tisk, úprava a prohlížení v ACDSee

Úvod

okamžiku, kdy se před lety poprvé

objevila myšlenka celosvětové po

čítačové sítě, dnes známé jako internet, jen málokdo si dokázal představit, jakou bude znamenat revoluci v mezilidské komunikaci. Od doby svého vniku změnil internet několikrát svou tvář tak, aby se stal co nejvíce přístupným nejširší veřejnosti. Možná, že jste i vy propadli kouzlu tohoto fenoménu přelomu dvacátého a jedenadvacátého století. Pokud se však nechcete spokojit pouze s úlohou pasivního uživatele a rádi byste začali vytvářet vlastní webové stránky, ale nevíte jak na to, pak čtěte dál. Co naleznete uvnitř této knihy Jak již její název napovídá, kniha je věnována popisu jazyka HTML, který je základním prostředkem při vytváření webových stránek pro internet. Po jejím přečtení budete schopni vytvářet vlastní stránky, které si co do kvality nijak nezadají s těmi, jež znáte z vašich toulek internetem. Velmi jednoduše a názorně jsou zde probrány všechny základní aspekty HTML. V prvních kapitolách se dozvíte něco o tom, co se vlastně skrývá pod tajemnou značkou HTML a jaký je význam tohoto jazyka při používání internetu. Dále se dozvíte, co všechno budete potřebovat k vytváření webových stránek. Po tomto nezbytném úvodu již následuje seznámení s vlastní tvorbou HTML dokumentů.

Pochopitelně, že vše je vysvětlováno po

stupně od zobrazování textu, přes tvorbu

odstavců a nadpisů, až k formátování do

kumentu a nastavování barev.

V jednotlivých kapitolách se naučíte po

užívat seznamy, obrázky, vkládat na své

stránky citace, hypertextové odkazy a ta

bulky.

Po základech přijde řada i na některá

pokročilejší témata. Naučíte se používat

kaskádové styly, pomocí rámů budete

umět zobrazit několik dokumentů sou

časně apod.

V poslední kapitole se dozvíte, jak umístit

stránku na internet a jak o ní dát vědět

celému světu.

Co nenaleznete v této knize

Vzhledem k omezenému rozsahu knihy

v ní nenajdete pojednání věnované vy

tváření stránek na straně serveru. Rovněž

byste zde marně hledali návod pro psaní

skriptů v některém ze skriptovacích jazy

ků a tvorbu dynamických stránek.

Zklamán bude i ten, kdo hledá knihu,

která by ho naučila pracovat s některými

editory určenými pro tvorbu webových

stránek, jako je například FrontPage od

Microsoftu.

Komu je kniha určena

Kniha je určena naprostým začátečníkům,

kteří se chtějí naučit základům vytváření Úvod V HTML – tvorba jednoduchých internetových stránek Úvod webových stránek, a neví, jak začít. O tom, že knihu může používat naprosto každý, nejlépe svědčí fakt, že se nepředpokládá žádná předběžná znalost programování ani jazyka HTML. Jediné, co čtenář musí umět, dříve než začne číst první kapitolu, je pracovat s libovolným operačním systémem a s některým webovým prohlížečem. O tom, který je nejvhodnější, budeme hovořit hned v první kapitole. Příklady používané v knize Celý výklad je provázen řadou názorných příkladů, na kterých si můžete prakticky vyzkoušet, jak vše funguje. Pokud se vám nechce příklady z knihy přepisovat, jsou pro vás k dispozici na adrese http://www.slavojpisek.cz, odkud si je můžete zdarma stáhnout. Příklady jsou zkomprimovány do souboru ve formátu ZIP a pojmenovány podle čísla kapitoly a pořadí příkladu v knize. Pokud byste měli se stažením souboru nebo s přístupem na stránku nějaké problémy, napište mi o tom na adresu slavek@slavojpisek.cz. Na stejnou adresu můžete posílat i všechny své připomínky, názory a dotazy. Používané typografické konvence V celém textu jsou použity následující typografické konvence, usnadňující orientaci v textu:

• Kurzíva je použita k označení ná

zvů firem, softwaru, názvů odkazů

apod.

Poznámka, která není nezbytná k pochope

ní dané problematiky, ale týká se tématu

a prozrazuje další souvislosti.

Poznámka

Přehled naleznete vždy na začátku kapi

toly. Dozvíte se v něm, o čem bude v ka

pitole řeč.

Přehled

Varování označuje text, který vás upozorňuje na

něco, na co byste si měli dát pozor, co vás může

nepříjemně překvapit nebo co by vám mohlo způ

sobit problémy.

Upozornění

V tipech naleznete informace, které vám

usnadní práci nebo s jejich mocí můžete

snadno dosáhnout efektních výsledků.

Tip

• Tučné písmo označuje názvy na

bídek, příkazů, ovládacích prvků

dialogů, jména souborů a složek.

• Tímto fontem jsou v textu zvýraz

něny formátovací značky.

• Symbol lomené šipky (9 ) je po užit

všude tam, kde navazuje řádek na

předchozí, a je tedy nutné jej při zá

pisu psát bez odskočení na řádek

nový, přestože v knize jsme museli

z důvodu omezení místem tyto řádky

rozdělit na dva.

V textu se budete také často setkávat se

zvýrazněnými odstavci označenými iko

nou, která bude charakterizovat druh

informace v daném odstavci:

11HTML – tvorba jednoduchých internetových stránek

Digitální fotografie – tisk, úprava a prohlížení v ACDSee

1. Dříve než začneme

1.1 Trocha historie nikoho nezabije Parafráze známé písničky v nadpisu této kapitoly dává tušit, že výlet do světa HTML začne malým ohlédnutím do minulosti. Dnes se tomu již nechce věřit, ale původně měl internet sloužit pouze armádě, případně NASA a několika málo dalším vyvoleným institucím. Z toho je zřejmé, že v jeho počátcích si tvůrci internetu nedělali velké starosti s uživatelským rozhraním. Teprve později, když se myšlenka celosvětové sítě usídlila ve vědeckých kruzích a na půdě univerzit, začal se postupně vyvíjet internet v podobě, v jaké ho známe dnes. Prvním výrazným krokem k rozšíření internetu mezi nejširší veřejnost bylo zavedení služby World Wide Web, pro kterou se vžilo známé označení WWW. Jedná se o informační systém, který v sobě spojuje text, grafiku, hypertextové odkazy a další prvky. World Wide Web vznikl na přelomu osmdesátých a devadesátých let minulého století a vytvořili jej vědci zabývající se fyzikou vysokých energií, aby mohli výsledky své práce sdílet se svými kolegy na celém světě.

Vznikl tedy systém dokumentů, které jsou

pomocí odkazů propojeny do jediné ve

liké „pavučiny“, jejíž jemná vlákna se

během krátké doby dostala doslova do

všech koutů světa.

K tvorbě dokumentů pro WWW bylo

nutné vytvořit vývojový nástroj, který by

umožnil formátovat text, vkládat do textu

odkazy atd. Proto se v roce 1991 objevila

první verze jazyka HTML (HyperText Mar

kup Language). Tento jazyk slouží k popi

su toho, co má být na stránce umístěno

a jak má stránka vypadat.

Objevily se první prohlížeče webových

dokumentů, které podporovaly právě

HTML, a tak se tento jazyk mohl začít

rychle vyvíjet. Postupně vzniklo několik

verzí, v nichž se sjednocovaly požadavky

uživatelů a možnosti dostupných prohlí

žečů. Poslední verze HTML má označení

HTML 4.01.

1.2 Co budete potřebovat

Nezbytný úvod máme šťastně za sebou

a vy byste se jistě rádi pustili do práce.

Ovšem stále ještě nevíte, co k tomu bu

dete potřebovat.

V první řadě to bude textový editor, ve

kterém budete zapisovat zdrojový text

HTML dokumentu. Na takový editor ne

jsou kladeny žádné zvláštní požadavky, 1. Dříve než začneme

V první kapitole najdete všechny informace,

které potřebujete k tomu, abyste mohli za

čít vytvářet webové stránky. Dozvíte se, co

vlastně znamená slovo HTML, jaký prohlížeč

budete potřebovat a mnoho dalšího.

Přehled

Vznikl tedy systém dokumentů, které jsou

Odtud pochází i název systému. Web je

anglický výraz pro pavučinu a World Wide

lze přeložit jako celosvětový.

Poznámka

12 HTML – tvorba jednoduchých internetových stránek

1. Dříve než začneme s jedinou výjimkou. Editor nesmí do psaného textu vkládat žádné vlastní znaky. K tomuto účelu docela dobře poslouží i obyčejný Zápisník Windows. Znám i takové tvůrce stránek, kteří jsou ochotni dát ruku do ohně za to, že tento jednoduchý program je tím nejlepším, co lze najít. To pochopitelně není ani zdaleka pravda, protože na internetu existuje velké množství výkonnějších editorů, které jsou určeny přímo pro psaní v HTML a nabízejí mnoho prostředků pro usnadnění práce. Pokud žádný takový editor nemáte a nechcete se spokojit pouze se Zápisníkem, můžete si jeden velmi pěkný a výkonný HTML editor stáhnout z adresy http:// www.pspad.com. Pro tvorbu webových stránek existují i komplexní nástroje, které umožňují vytváření HTML kódu v režimu WYSIWYG (What You See Is What You Get, čili dostaneš to, co vidíš). To znamená, že uživatel vytváří a formátuje stránku bez jakékoli znalosti HTML, pouze pomocí nástrojů nabízených editorem. Ten nakonec sám vygeneruje výsledný kód. Nejrozšířenějším WYSIWYG editorem je zřejmě Microsoft FrontPage. Vývojáře webových stránek lze rozdělit do dvou skupin, jedni na tyto nástroje nedají dopustit, a ti druzí je z duše nenávidí. Nepřísluší mi hodnotit ani jeden z těchto přístupů, ale tato kniha se používáním editorů v režimu WYSIWYG nezabývá.

Kromě textového editoru budete ještě

potřebovat nějaký prohlížeč webových

stránek, ve kterém si budete moci pro

hlédnout výsledek své práce.

Nic víc k tvorbě HTML dokumentů oprav

du nepotřebujete. Všimněte si, že nebyla

vůbec řeč o způsobu připojení k inter

netu. To proto, že v první fázi vytváření

webových stránek internet vůbec nepo

třebujete. Stránky mohou být uloženy na

pevném disku vašeho počítače, odkud

mohou být načteny prohlížečem. Pro

to nehrozí, že by vaše experimentování

s tvorbou internetových stránek bylo

násilně přerušeno závratnou výškou účtu

za telefon.

1.3 Microsoft versus zbytek světa

Pokud se chcete naučit používat jazyk

HTML, lze předpokládat, že již nějakou

dobu internet používáte. A jistě máte na

svém počítači nainstalován nějaký prohlí

žeč webových stránek. V současné době

patří mezi nejčastěji používané prohlížeče

Microsoft Internet Explorer, Opera a Fire

fox. Každý z těchto programů má své

nadšené zastánce a odpůrce, kteří jsou

ochotni kdykoli vytáhnout do svaté vál

ky na podporu svého favorita. Jestliže se

na celou problematiku díváte z pohledu

uživatele, je celkem jedno, který prohlí

žeč používáte. Jakmile však začnete sami

vytvářet webové stránky, musíte si uvě

domit, že mezi jednotlivými prohlížeči je

celá řada rozdílů.

Bohužel se přes veškeré normalizační

snahy dosud nepodařilo zcela sjednotit

interpretaci jazyka HTML ve všech do

stupných prohlížečích. A tak navzdory

standardu si softwarové firmy do svých

programů přidávají různá „vylepšení“,

Skalní odpůrci editorů podporujících režim

WYSIWYG je někdy hanlivě nazývají WY

SIWYNG editory. To je zkratka, která zna

mená What You See Is What You Never Get

(Nikdy nedostaneš, co vidíš).

Poznámka

13HTML – tvorba jednoduchých internetových stránek

Digitální fotografie – tisk, úprava a prohlížení v ACDSee

1. Dříve než začneme

která však podporují pouze ony samy.

Pokud se tedy pokusíte zobrazit stránku

určenou pro Microsoft Internet Explorer

například ve Firefoxu, zjistíte, že stránka

vypadá poněkud odlišně, než očekáváte.

Co se týče příkladů, které v této knize

budeme vytvářet, je zcela lhostejné, jaký

prohlížeč používáte. Budeme se totiž vě

novat jen základům HTML, které všechny

prohlížeče zvládnou bez problémů.

Až se tedy rozhodnete, který z prohlížečů

je vašemu srdci nejbližší, můžete se těšit

na další kapitolu, ve které poprvé vytvo

říte webovou stránku.

Proto si pamatujte, než nějakou stránku

umístíte na internet (jak na to, se dozvíte

v poslední kapitole), měli byste zkontro

lovat, jak bude zobrazena ve všech nej

rozšířenějších prohlížečích. Uvedené prohlížeče však nejsou jedinými, které se používají. Existuje celá řada dalších programů na prohlížení webových stránek. K těm nejznámějším patří například Sea Monkey, Netscape Navigator, Safari nebo Avant Browser.

Poznámka

14 HTML – tvorba jednoduchých internetových stránek

2. První webová stránka Protože obecných informací již zaznělo až dost, je nejvyšší čas věnovat se těm konkrétnějším. A proto bez zbytečných průtahů přejdeme k vytvoření první, zatím velmi jednoduché, stránky. Protože dokumenty HTML jsou zvláštním typem textových souborů, budete k jejich vytváření potřebovat textový editor, který má vlastnosti popsané v minulé kapitole. Vytvořte prázdný textový dokument a uložte jej pod názvem prvni.html. Nyní je vše připraveno a můžeme se podívat, jak takový HTML dokument vypadá.

2.1 Formátovací značky v HTML

dokumentu

HTML dokument se od obyčejného tex

tového dokumentu liší tím, že kromě

vlastního obsahu stránky obsahuje navíc

informace o vzhledu a formátování strán

ky, které jsou určené pro prohlížeč. Tyto

informace se prohlížeči předávají pomocí

značek uzavřených mezi znaky < > –

např: <HTML>.

K většině HTML značek existuje protěj šek,

který ukončuje jejich platnost. Ukončova

cí značku poznáte snadno podle lomítka

před názvem značky – </HTML>.

Formátovacím značkám se často říká tagy

a jejich používání tvoří základ tvorby we

bových stránek v jazyce HTML.

U některých značek je možné mezi jméno

značky a znak > vložit doplňující atribut,

který upřesňuje význam značky. Význam

atributů lépe pochopíte na příkladu znač

ky <HR>. Tato značka vkládá do HTML

dokumentu vodorovnou čáru přes celou

šířku dokumentu. Přejete-li si ale mít čáru

širokou pouze 20 pixelů, může te značku

<HR> doplnit atributem nastavujícím šířku

čáry: <HR WIDTH="20">. Narazí-li prohlí

žeč na takovouto značku, vykreslí čáru

přesné délky.

Používání atributů je v HTML velmi časté

a i v této knize se s nimi setkáte v hoj

né míře. 2. První webová stránka Protože obecných informací již zaznělo

V této kapitole již konečně vytvoříte svou

první webovou stránku. Dozvíte se, jaké

náležitosti musí mít každý HTML dokument,

a seznámíte se s významem HTML značek.

Přehled

Pozor na to, že některé textové editory auto

maticky připojují k vytvořeným souborům

příponu TXT.

Tip

Nyní je vše připraveno a můžeme se podí

Protože některé operační systémy nepod

porují názvy souborů, které mají příponu

složenou ze čtyř znaků, je možné ukládat

webové stránky také s příponou HTM. Běž

né prohlížeče bez problémů rozeznávají obě

přípony.

Tip

15HTML – tvorba jednoduchých internetových stránek

Digitální fotografie – tisk, úprava a prohlížení v ACDSee

2. První webová stránka

2.2 Struktura HTML dokumentu Nejen použití značek dělá z obyčejného textu HTML dokument. Každá webová stránka musí mít pevně stanovenou strukturu, která je tvořena použitím speciálních formátovacích značek. Nejdříve je nutné prohlížeči sdělit, kde začíná a kde končí zdrojový text zobrazované stránky. Proto každý HTML dokument začíná značkou <HTML> a končí její ukončovací alternativou </HTML> . Celý zdrojový text vytvářené stránky je tedy umístěn mezi tyto dvě značky. Další důležitou součástí každého HTML dokumentu je hlavička. Ta je umístěna mezi značky <HEAD> a </HEAD> . Obsah hlavičky se na stránce nezobrazuje, ale jsou v ní umístěny některé důležité informace jako název stránky, popis jejího obsahu, definice stylů a mnoho dalšího. Hlavičku zatím necháme stranou, vrátíme se k ní ještě na konci kapitoly. Nyní nás totiž čeká to hlavní – vlastní obsah stránky, tedy její tělo. To je ohraničeno značkami <BODY> a </BODY>. Mezi ně je možné zapsat text, který se zobrazí na stránce. Když to nyní dáme všechno dohromady, bude zdrojový text první stránky vypadat takto: <HTML> <HEAD> </HEAD> <BODY>

Naše první WWW stránka je na světě!

</BODY> </HTML> Nyní tento text napište do nového dokumentu a uložte jej.

2.3 Zobrazení stránky

Když je stránka napsaná a uložená, mů

žete spustit prohlížeč a prohlédnout si

výsledek své práce. Stránku zobrazíte

tak, že v Průzkumníku poklepete myší

na její jméno. Měl by se otevřít prohlížeč

a v něm se zobrazí požadovaná strán

ka. Pokud se tak nestane, musíte otevřít

prohlížeč ručně a zadat z nabídky příkaz

Soubor → Otevřít → Procházet.... V dia

logovém okně, které se otevře, vyhledejte

požadovaný soubor a stiskněte OK.

V tuto chvíli byste měli vidět svou stránku

tak, jak naznačuje obrázek na následující

stránce. Pokud tomu tak není a stránka

vypadá jinak, udělali jste někde chybu

a musíte znovu otevřít zdrojový text strán

ky v editoru a opravit všechny překle

py. Potom je nutné soubor znovu uložit

a stránku znovu načíst pomocí tlačítka

Aktualizovat (Obnovit).

Pamatujte si, že formátovací značky je mož

né psát jak malými, tak i velkými písmeny.

To znamená, že ať napíšete <HTML> nebo

<html>, jedná se vždy o tutéž značku. Dokon

ce je možné napsat značku takto: <HtMl>,

aniž by to mělo sebemenší vliv na výslednou

funkčnost stránky. Je však výhodné zvolit si

jeden způsob, a toho se držet. Praxe uka

zuje, že nejvhodnější je používání velkých

písmen, protože takové značky se nejsnáze

oddělí od okolního textu.

Poznámka

Pokud používáte českou klávesnici, můžete

mít problémy s psaním znaků < a >, které

zde zdánlivě chybí. Prozradím vám, že je lze

psát s použitím kombinace kláves (pravý)

ALT + ? (<) a (pravý) ALT + . (>).

Tip

+

16 HTML – tvorba jednoduchých internetových stránek

2. První webová stránka 2.4 Hlavička jak má být Stránka se sice zobrazila, ale ještě ani zdaleka není hotová. To proto, že jsme v touze po co nejrychlejším výsledku nepěkně ošidili hlavičku dokumentu a nechali ji zcela prázdnou. Je pochopitelné, že to tak nemůžeme nechat, a proto musíme vše rychle napravit. Název stránky První informací, která je v každé hlavičce obsažena, je název stránky. Tento název je umístěn mezi značky <TITLE> a </TITLE>. Jako název stránky je možné použít libovolný text. Neplatí pro něj žádné zvláštní omezení, jen se doporučuje, že by neměl být delší než 60 až 64 znaků. To proto, že název stránky se zobrazuje v záhlaví okna prohlížeče, a pokud by byl příliš dlouhý, nevešel by se tam celý. Dále by měla hlavička obsahovat základní informace o stránce. Například co je jejím obsahem, seznam klíčových slov, jméno autora apod. Těmto informacím se říká metainformace.

Metainformace

Metainformace se vkládají do dokumentu

pomocí značky <META>, která je doplně

na o skupinu pomocných atributů udáva

jících konkrétní druh informace.

Například popis stránky se do hlavičky

dokumentu přidá takto:

Atribut NAME udává typ informace (descrip

tion = popis) a atribut CONTENT pak vlastní

informaci. Má-li tedy hlavička obsahovat

klíčová slova, bude značka <META> vypa

dat následovně (pro ty z vás, kdo neumí

anglicky, připomínám, že keywords jsou

klíčová slova.):

<META NAME="keywords"

CONTENT="ukázka, stránka, začínající

tvůrci, WWW stránky">

Jak přidat informace o jméně autora, již

jistě tušíte:

<META NAME="description"

CONTENT = "první pokusná stránka

vytvořená jako ukázka

pro začínající tvůrce

WWW stránek">

<META NAME="author"

CONTENT="Slavoj Písek">7HTML – tvorba jednoduchých internetových stránek

Digitální fotografie – tisk, úprava a prohlížení v ACDSee

2. První webová stránka

Měli byste vědět, že používání metainformací není nijak povinné, ale měli byste je používat, zejména pokud se chystáte své stránky zařadit do některého z internetových vyhledávačů (viz kapitola 12). Tyto vyhledávací stroje využívají při vyhledávání právě metainformace. Správná hlavička předchozí stránky bude tedy vypadat takto: Jak se změna hlavičky projeví ve výsledné stránce, vidíte na obrázku výše. Zejména si pozorně všimněte záhlaví okna, protože v něm se zobrazí název stránky. Ostatní části hlavičky se na vzhledu neprojeví vůbec.

Co se ještě vejde do hlavičky

Název stránky a metainformace není to

jediné, co můžete v hlavičce dokumentu

najít. Později si ukážeme, že do ní mohou

být uloženy definice kaskádových stylů,

nastavení základních barev a adres.

Při tvorbě dokumentů obsahujících scripty

se do jejich hlavičky umísťují definice jed

notlivých funkcí používaných ve scriptech.

2.5 Kompletní schéma HTML

dokumentu

Pokud shrneme všechno, co jsme si až

dosud řekli, získáme jistou šablonu, kte

rá je stejná pro všechny stránky. Ovšem

v této šabloně by neměl chybět ještě je

den řádek, o kterém dosud nebyla řeč.

Jedná se o informaci, v jaké verzi jazyka

HTML byla stránka napsána. K tomuto

zápisu se používá poměrně kompliko<HEAD> <TITLE>První stránka</TITLE>

<META NAME="description" CONTENT="první pokusná stránka vytvořená jako ukázka

pro začínající tvůrce WWW stránek">

<META NAME="keywords" CONTENT="ukázka, stránka, začínající tvůrci, WWW stránky">

<META NAME="author" CONTENT="Slavoj Písek"> </HEAD> HTML – tvorba jednoduchých internetových stránek 2. První webová stránka vaná značka: <!DOCTYPE HTML PUBLIC ↵"-//W3C//DTD HTML 4.01 Transitional// ↵EN">. Z této značky můžete vyčíst, že se jedná o dokument HTML, napsaný pomocí verze HTML 4. Použitím tohoto řádku máte jistotu, že vaši stránku bude možné zpracovávat různými nástroji pro strojové zpracování dokumentů. Vzhledem k výše uvedenému je možné říct, že každá správně napsaná stránka má mít tento základ: V případě, že vaše stránky nejsou zařazeny do internetových vyhledávačů, je možné metainformace vynechat, nebo naopak přidat některé další, týkající se kódování stránek a podobně.

2.6 Komentáře

Velmi důležitou součástí zdrojového kódu

HTML stránky představují komentáře. Jsou

to části kódu, které na vzhled stánky ne

mají žádný vliv a po zobrazení stránky

se o nich ani nedozvíte. Přesto však ne

jsou zbytečné, protože umožňují autoro

vi stránky zapsat si poznámky přímo do

HTML dokumentu.

Do komentářů si můžete například po

znamenat, který obrázek ještě chcete na

stránku umístit nebo co máte koupit ces

tou domů v samoobsluze. Je to jen na

vás. V každém případě jsou komentáře

významným pomocníkem a jejich význam

oceníte ve chvíli, kdy zjistíte, že během

jediného okamžiku můžete ukrýt celý blok

textu, aniž byste ho museli z dokumentu

vymazat. Stačí jej označit jako komentář

a stránka se chová tak, jako by tam nikdy

nebyl. A stejně tak odstraněním označení

komentářů vše vrátíte okamžitě do pů

vodního stavu.

Chcete-li tedy nějaký text ukrýt před

prohlížečem a označit jej jako komen

tář, stačí jej uzavřít mezi značky <!--

a -->. Příklad použití komentářů v HTML

dokumentu může vypadat takto: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>Jméno stránky</TITLE>

<META NAME="description" CONTENT="Popis stránky">

</HEAD> <BODY>

tělo stránky

</BODY> </HTML>

Jestliže jste se k psaní stránek rozhodli po

užívat editor PSPad, o němž byla zmínka

v první kapitole, máte výhodu, neboť tento

editor umí automaticky generovat správnou

kostru HTML dokumentu v každém nově vy

tvořeném souboru. Proto nebudete muset

stále opisovat řádky stejné pro všechny

dokumenty. To oceníte zejména v případě

prvního řádku.

Tip

19HTML – tvorba jednoduchých internetových stránek

Digitální fotografie – tisk, úprava a prohlížení v ACDSee

2. První webová stránka

Na následujícím obrázku můžete vidět,

že stránka po zobrazení vypadá tak, jako

kdyby v ní komentář vůbec nebyl.

2.7 Zapamatujte si

Protože se v průběhu knihy setkáte s vel

kým množstvím HTML značek a moh

lo by se snadno stát, že po nějaké

době zapomenete, jaký má určitá

značka význam, bude každá kapito

la končit přehlednou tabulkou, kde

budou všechny značky a jejich atri

buty pěkně pohromadě. A níže je

hned první.

Počáteční značka Ukončovací značka Význam

<HTML> </HTML>

Značka ohraničuje HTML dokument.

<HEAD> </HEAD>

Hlavička dokumentu.

<BODY> </BODY>

Tělo dokumentu.

<TITLE> </TITLE>

Název stránky (zobrazí se v záhlaví okna

prohlížeče).

<META> –

Značka obsahuje metainformace.

NAME –

Atribut udává název metainformace.

CONTENT –

Atribut, který udává vlastní obsah metain

formace.

<!-- -->

Značka ohraničující komentář.

<BODY>

Tento text je na stránce vidět.

<!-- Toto je komentář, který prohlížeč ignoruje, a proto ho nikdo nevidí. Může

v něm být tedy napsáno cokoli. -->

Tahle věta už je zase vidět, proto pozor na její obsah.

</BODY>

Tabulka 2.1