Upozornění pro čtenáře a uživatele této knihy
Všechna práva vyhrazena. Žádná část této tištěné či elektronické knihy nesmí být reprodukována ani šířena v papírové, elektronické či jiné podobě bez předchozího písemného souhlasu nakladatele. Neoprávněné užití této knihy bude trestně stíháno.

Slavoj Písek

HTML

začínáme programovat – 4., aktualizované vydání

TIRÁŽ TIŠTĚNÉ PUBLIKACE:

Vydala Grada Publishing, a.s.
U Průhonu 22, 170 00  Praha 7
tel.: +420 234 264 401, fax: +420 234 264 400
www.grada.cz
jako svou 5413. publikaci

Odpovědná redaktorka Růžena Písková
Sazba Petr Somogyi
Počet stran 192
První vydání, Praha 2014

© Grada Publishing, a.s., 2014
Cover Photo © fotobanka allphoto

V knize použité názvy programových produktů, firem apod. mohou být ochrannými známkami nebo registrovanými ochrannými známkami příslušných vlastníků.

Vytisklo TISK CENTRUM s.r.o.
www.tiskcentrum.cz

ISBN 978-80-247-5059-0

ELEKTRONICKÉ PUBLIKACE:

E-knihu ve formátu EPUB vytvořil Petr Somogyi

ISBN 978-80-247-8957-6 (ve formátu PDF)
ISBN 978-80-247-8958-3 (ve formátu EPUB)

Úvod

Od chvíle, kdy se na internetu objevily první webové stránky, neuběhlo ještě ani čtvrt století, a dnes byste asi těžko hledali někoho, kdo o internetových stránkách plných textu, odkazů a grafiky alespoň neslyšel.

Předpokládám, že když jste sáhli po této příručce, máte jasnou představu o tom, jak webové stránky vypadají a jaké jsou jejich možnosti. Pokud se ale nechcete spokojit pouze s úlohou pasivního pozorovatele, ale chtěli byste začít vytvářet vlastní webové stránky, může vám být tato kniha dobrým pomocníkem.

Co naleznete uvnitř této knihy

Již z názvu je patrné, že se kniha věnuje popisu jazyka HTML, který je základním prostředkem k vytváření webových stránek. Po jejím přečtení budou čtenáři schopni vytvářet vlastní stránky, jež využívají všech možností jazyka HTML 4. Kromě toho jsou u každé kapitoly zmíněny novinky v prozatím nejnovější verzi tohoto jazyka, v HTML 5.

Celá kniha je rozdělena na dvě logické části. V té první jsou velmi jednoduše a názorně probrány všechny základní aspekty HTML.

Čtenář se zde dozví něco o tom, co se vlastně skrývá pod tajemnou značkou HTML a jaký je význam HTML při používání internetu. Dále je zde popsáno, co všechno bude čtenář potřebovat k vytváření webových stránek. Po tomto nezbytném úvodu již následuje seznámení s vlastní tvorbou HTML dokumentů. Vše je pochopitelně vysvětlováno postupně od jednodušších věcí ke složitějším. Výklad začíná prostým zobrazováním textu a pokračuje přes tvorbu odstavců a nadpisů až k formátování dokumentu a nastavování barev. V jednotlivých kapitolách se čtenáři naučí používat seznamy, obrázky, vkládat na stránky citace, hypertextové odkazy a tabulky. Nechybí ani kapitola věnovaná zobrazování několika dokumentů současně pomocí rámů. Zde také končí první část knihy.

V druhé části přijdou na řadu pokročilejší témata. Čtenáři se naučí používat kaskádové styly, vytvářet formuláře a programovat jednoduché CGI skripty pracující na serveru.

Celý výklad je provázen řadou názorných příkladů, na nichž si každý může prakticky vyzkoušet, jak vše funguje.

Komu je kniha určena

Kniha je určena hlavně začátečníkům, kteří se chtějí naučit základům vytváření 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.

U čtenářů se nepředpokládají žádné předběžné speciální znalosti, pouze je nutné, aby každý, kdo chce číst tuto knihu, uměl pracovat s libovolným operačním systémem. Pro domácí použití je tímto systémem obvykle Windows. Ani jiné systémy ovšem nejsou vyloučené.

Dále je vhodné, aby čtenář ovládal obsluhu některého z internetových prohlížečů. 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 stránkách věnovaných této knize: http://www.slavojpisek.cz, odkud si je můžete zdarma stáhnout. Dále příklady můžete získat i na stránkách nakladatelství Grada (http://www.grada.cz). 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.

Poděkování

Na tomto místě bych rád poděkoval všem lidem, kteří nějakým způsobem přispěli ke vzniku této knihy. Obzvláště rád bych chtěl poděkovat panu Ing. Pavlu Baxovi za jeho podnětné připomínky a rady, díky nimž se podařilo výrazně zvýšit informační hodnotu použitých příkladů.

Nyní již nic nebrání tomu, abyste se vypravili do pestrého světa jazyka HTML a naučili se vytvářet webové stránky, které vám bude každý závidět. Přeji Vám při Vašem snažení mnoho úspěchů.

1.Dříve než začneme

V úvodní kapitole se dozvíte vše potřebné, co musí vědět začínající tvůrce webových stránek, dříve než se pustí do práce. Zmíníme se o tom, které nástroje budete potřebovat pro tvorbu příkladů uvedených v této knize, a pokusíme se vyřešit dilema, pro který prohlížeč se máte rozhodnout. V neposlední řadě si uděláme malý výlet do historie.

Dříve než se pustíme do vlastního vytváření webových stránek, musíme si povědět některé základní informace, bez nichž byste se daleko nedostali. Nejprve si uděláme jasno v tom, co budete potřebovat k práci.

1.1Bez čeho se neobejdeme

V první řadě to bude textový editor, ve kterém budete zapisovat zdrojový text dokumentu.

Editor kódu

Na editor vhodný pro tvorbu webových stránek nejsou kladeny žádné zvláštní požadavky, 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.

Jedním z takových editorů je například program PSPad, který je určen nejen pro tvůrce webových stránek v HTML, ale i pro programátory v mnoha programovacích jazycích. Editor se vyznačuje celou řadou pokročilých funkcí a propracovaným ovládáním. K jeho velkým přednostem patří také to, že je celý v češtině a pro autory stránek má připraveno několik opravdu praktických funkcí.

Na programu je navíc sympatická i cena. Je totiž šířen zcela zdarma, a proto pokud dosud žádný editor pro tvorbu stránek nemáte a nechcete se spokojit pouze se Zápisníkem, můžete si PSPad stáhnout ze stránek jeho autora na adrese http://www.pspad.com.

Rozhodnete-li se pro používání PSPadu, můžete si ze stránek http://www.slavojpisek.cz stáhnout spolu s příklady k této knize i soubor s projektem PSPadu, který rozděluje příklady do složek pojmenovaných číslem příslušné kapitoly a usnadňuje tak orientaci v příkladech.

Pro tvorbu webových stránek existují i komplexnější nástroje, než jsou jen obyčejné textové editory. Tyto programy 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.

Vývojáře webových stránek lze rozdělit do dvou skupin, jedni na tyto nástroje nedají dopustit, ti druzí je z duše nenávidí. Nepřísluší mi hodnotit ani jeden z těchto přístupů, ale naše kniha se používáním editorů v režimu WYSIWYG nezabývá.

Obrázek 1.1: PSPad je pokročilý editor html stránek

Prohlížeč webových stránek

Kromě textového editoru budete ještě potřebovat nějaký prohlížeč webových stránek, ve kterém si budete moci prohlédnout výsledek své práce.

Zde ale narážíme na věčný problém, pro který z mnoha dostupných prohlížečů se rozhodnout.

Microsoft vs. zbytek světa

Vzhledem k tomu, že 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 ve svém počítači nainstalován nějaký prohlížeč webových stránek. Mezi nejčastěji používané prohlížeče patří Internet Explorer, Mozilla Firefox nebo Google Chrome. Každý z nich má své nadšené zastánce i odpůrce, ale pokud se na ně díváte z pohledu uživatele, je celkem jedno, který z nich používáte. Pokud ale sami začnete vytvářet webové stránky, musíte si uvědomit, že jednotlivé prohlížeče se v mnohém odlišují.

Bohužel se přes veškeré normalizační snahy dosud nepodařilo zcela sjednotit interpretaci jazyka HTML ve všech dostupných prohlížečích. A tak navzdory standardu si softwarové firmy do svých programů přidávají různá „vylepšení“, která však podporují pouze ony samy. Pokud se tedy pokusíte zobrazit stránku určenou pro Internet Explorer ve Firefoxu, zjistíte, že stránka vypadá poněkud odlišně, než očekáváte. Stejně tak Internet Explorer si občas neporadí se stránkou, která se například v Chrome zobrazí bez problémů.

Proto si pamatujte, že než nějakou stránku umístíte na internet, měli byste zkontrolovat, jak bude zobrazena ve všech nejrozšířenějších prohlížečích.

Výše uvedené prohlížeče jsou sice v našich končinách nejrozšířenější, ale ani zdaleka nejsou jedinými, které se používají. Můžete vybírat z dalších prohlížečů, jako je třeba Opera, Safari i mnohé další. Smutné je, že každý z těchto prohlížečů má své „odchylky“ od standardu HTML.

Příklady v této knize budou vytvářeny v Internet Exploreru 10, ale jestliže patříte k lidem, kteří používají jiný prohlížeč, buďte bez obav. Vzhledem k tomu, že budeme probírat hlavně základy HTML a vystačíme si bez složitějších konstrukcí, budou všechny příklady jistě fungovat i ve všech ostatních prohlížečích. Pokud by měl nějaký prohlížeč s danou stránkou problémy, u příkladu na to upozorním.

Co ještě můžete potřebovat

Pokud máte k dispozici textový editor a prohlížeč stránek, máte prakticky vše potřebné, abyste mohli začít s tvorbou webových stránek. Chcete-li však spouštět stránky, které se dynamicky generují na webovém serveru, budete pochopitelně potřebovat nějaký webový server. Pokud se vám ale zdá, že se vytváření stránek začíná komplikovat dříve, než začalo, mohu vás uklidnit, protože webový server je nezbytně nutný pouze pro některé příklady v 10. kapitole. Mezi nejrozšířenější webové servery patří Apache pro Linux a IIS pro Windows.

1.2Bez čeho se obejdeme

Kromě uvedených nástrojů již nic víc k tvorbě HTML dokumentů opravdu nepotřebujete. Všimněte si, že nebyla vůbec řeč o způsobu připojení k internetu. To proto, že v první fázi vytváření webových stránek internet vůbec nepotř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. Internetové připojení budete potřebovat, teprve až budete chtít výsledky své práce publikovat na webu.

Pokud máte vše potřebné připraveno, můžete se již nyní těšit na druhou kapitolu, v níž vytvoříte svou první webovou stránku v HTML.

Dříve než se ale k tomu dostaneme, nebude od věci stručně připomenout nejdůležitější milníky, které se objevily při vývoji internetu a značkovacích jazyků HTML.

1.3Hypertext na internetu

HTML je hypertextový značkovací jazyk. Hypertext umožňuje propojit velké množství oddělených informací (textu, obrázků atd.), a vytvořit tak nové uspořádání pro existující informace. To znamená, že v jednom dokumentu mohou být vedle sebe umístěny informace z oddělených zdrojů. Podívejme se, jak vlastně hypertext vznikl.

Historie hypertextu

Koncepce hypertextu je stará více než šedesát let. V červenci 1945 napsal Vannevar Bush článek s názvem „As We May Think“ pro Atlantic Monthly. V něm popsal systém pro „prohlížení a pořizování poznámek z rozsáhlých textů a grafiky“.

V roce 1960 Theodor Colm Nelson poprvé použil termíny hypertext a hypermédia (spojení textu a multimédií). Napsal knihu Computer Lib/Dream Machines, která ovlivnila vývoj celosvětové pavučiny (World Wide Web).

Na konci 70. let představil Nelson projekt Xanadu, který vytvářel digitální knihovny a hypertextové nakladatelské systémy – další průkopnický projekt, který však nedošel naplnění.

Ačkoli univerzity a další instituce v průběhu 60. a 70. let experimentovaly s hypertextem, všeobecně byl tento trend v útlumu, dokud Apple v roce 1987 neuvedl na trh Hypercard a dokud Apple a Microsoft nevyvinuly podpůrné systémy pro Windows a Macintosh, pomocí nichž se uživatelé mohli přemisťovat z jednoho odkazu na druhý nebo otevírat „popisky“.

World Wide Web

Když se dnes řekne internet, většina lidí si představí právě World Wide Web neboli celosvětovou pavučinu obsahující miliony stránek s nejrůznějším obsahem. World Wide Web demonstruje skutečnou povahu hypertextu. Na webu se lze připojit na většinu stránek prostým poklepáním na jejich odkaz nebo napsáním jejich adresy, bez ohledu na to, na kterém serveru ve světě se tyto stránky nacházejí. Můžete kupříkladu zahájit relaci otevřením souboru v Kalifornii, pokračovat klepnutím na odkaz na dokument v Austrálii či v Japonsku, dále se připojit do Francie nebo Švédska a tak dále, dokud tímto způsobem neobkroužíte celý svět několikrát dokola během pár minut.

Přestože je dnes internet chápán hlavně jako World Wide Web, je web pouze jeho relativně novou částí. Na konci 80. let vyvinuli web výzkumníci z „Evropské laboratoře pro fyziku částic“ (CERN) ve Švýcarsku, aby si usnadnili práci. Chtěli po síti získat snadný přístup k dokumentům týkajícím se výzkumu. Mezi těmito výzkumníky byl i Tim Berners-Lee, který je považován za otce webu. Do roku 1990 představili textový prohlížeč a vyvinuli HTML a v roce 1991 zavedli web v rámci CERN. Roku 1992 představili web uživatelům internetu. Tím rozpoutali revoluci v jeho vývoji.

1.4HTML

HTML neboli HyperText Markup Language je značkovací jazyk, který je určen k vytváření dokumentů, obsahujících hypertextové odkazy a pokročilejší formátování.

Co HTML zvládne

HTML poskytuje elementy, pomocí nichž můžete vytvářet, formátovat nebo upravovat webové stránky následujícími způsoby:

■nastavit vzhled nebo velikost zvolenému textu, je možné použít tučné písmo nebo kurzívu;

■vložit do dokumentu obrázky všech tvarů a velikostí, používat obrázkové mapy, pomocí nichž se uživatel dostane na další stránky. Můžete také použít animace ve formátu GIF, což jsou série obrázků sloučených do jediného souboru;

■vytvořit formuláře, pomocí kterých vám uživatel pošle e-mail, odpoví na váš dotazník nebo si objedná zboží z vašeho on-line katalogu;

■vytvářet tabulky, které vám zajistí větší kontrolu nad dokumentem, jeho formátováním a srozumitelným obsahem;

■definovat barvy pozadí pro HTML dokument, celou tabulku, řádek tabulky, nebo dokonce pro jednotlivou buňku;

■vkládat odkazy na další sekce téhož dokumentu, na dokumenty na jiných stránkách, na audio a video soubory;

■používat rámy místo umístění jediné stránky na obrazovku. Rámy jsou panely, z nichž každý může samostatně zobrazit jiný HTML dokument. Můžete např. zobrazit dva malé statické rámy s nadpisem stránky a přehledným obsahem stránky, jehož jednotlivé položky se zobrazují ve třetím, větším rámu.

S čím si HTML neporadí

Z výše uvedeného je vidět, že HTML má značně široké možnosti použití, ale na druhou stranu je tu i celá řada omezení, která mohou začínajícího tvůrce webových stránek nepříjemně překvapit. Abyste od tvorby HTML nebo od této knihy neměli přehnaná očekávání, je třeba si uvědomit, že pro vytvoření některých funkcí, kterými dnes běžně webové stránky disponují, se samotným HTML nevystačíte:

■V HTML není možné vytvořit ověřování uživatele.

■HTML je určeno pro dokumenty se statickým obsahem. To znamená, že nelze vytvářet dokumenty, jejichž obsah by se automaticky měnil.

■Pomocí HTML nelze vytvářet dynamicky se měnící nabídky, vysouvací menu ani nic podobného.

Jestliže budete na své stránce něco podobného používat, budete muset kromě HTML sáhnout ještě po nějaké další webové technologii.

Historie HTML

HTML prošlo za svůj krátký život několika fázemi. První verze HTML, 1.0, se objevila v roce 1990 a neoficiální verze HTML+ byla představena ve druhé polovině roku 1993. Rysy HTML+ zahrnovaly formuláře, tabulky a obrázky s popiskem, ale neobsahovaly formátování odstavců ani úpravy textu. HTML+ obsahovalo 78 elementů, z nichž mnohé již dnes v HTML nenajdeme. Mnohé zastaralé elementy definovaly komponenty dokumentů, např. výpisky, poznámky a podtitulky.

HTML 2.0, uvedené na trh v roce 1994, bylo první verzí, která měla formální specifikaci a stala se oficiálním standardem. Tato verze obsahovala 49 elementů.

V březnu 1995 se objevilo HTML 3.0. Zde byly představeny tabulky, možnost obtékání obrázků textem a matematické elementy. Dále zde bylo k dispozici formátování, znovu se objevil element NOTE, který byl součástí HTML+, ale z HTML 2.0 se vytratil. V této verzi také přibyly atributy elementu FORM. Avšak životnost HTML 3.0 a mnoha jeho prvků vypršela a dnes již nejsou podporovány.

V květnu 1996 bylo uvedeno na trh HTML 3.2, které se považuje za pravého nástupce HTML 2.0 (jinými slovy obchází HTML 3.0). HTML 3.2 přidalo 19 nových prvků, zachovalo tabulky a atributy pro obtékání textu z HTML 3.0 a zapracovalo četná rozšíření pro Netscape.

HTML verzi 4.0 se během jejího vývoje přezdívalo Cougar. Přidala podporu prvku OBJECT, který má velký význam pro vkládání obrázků a multimédií. Dále HTML 4.0 podporuje kaskádové styly, úpravy formulářů a tabulek, skriptování na straně klienta, internacionalizaci (tj. rozpoznání jazyků, které obsahují zvláštní znaky v abecedě nebo se čtou zprava doleva) a další zvláštní znaky pro matematické operace a profesionální publikování.

V současné době se pracuje na specifikaci pro HTML 5.0. Její konečná podoba by měla být schválena do konce roku 2014. Verze HTML 5.1 by pak měla být hotová v roce 2016. K  nejdůležitějším novinkám patří přidání několika nových elementů a zjednodušení zápisu některých stávajících. Kromě toho by měla přibýt možnost přehrávat multimédia přímo ve webovém prohlížeči a mnoho dalších vylepšení. Přestože se zatím stále ještě jedná o návrh specifikace, nejčastěji používané prohlížeče s podporou některých novinek z HTML 5.0 počítají již dnes.

2.První webová stránka

V této kapitole se konečně pustíme do vlastního vytváření webových stránek. Ukážeme si, z čeho se skládá HTML dokument, a seznámíme se s významem HTML značek.

Po obecných informacích z minulé kapitoly je nejvyšší čas začít se věnovat něčemu konkrétnějšímu. Proto hned 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.

Pozor na to, že některé textové editory automaticky připojují k vytvořeným souborům příponu TXT.

Nyní je vše připraveno a můžeme začít vytvářet skutečnou webovou stránku.

2.1Formátovací značky v HTML dokumentu

HTML dokument se od obyčejného textového dokumentu liší tím, že kromě vlastního obsahu stránky zahrnuje navíc informace o vzhledu a formátování stránky, které do textu dokumentu nepatří a jsou určené pouze 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ě značek v HTML existuje jejich protějšek, který ukončuje jejich platnost. Ukončovací 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 (nebo také elementy) a jejich používání tvoří základ tvorby webový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>. S touto značkou se setkáme později, ale již teď si můžeme prozradit, že vkládá do HTML dokumentu vodorovnou čáru přes celou šířku dokumentu. Pokud si ale přejete mít čáru širokou pouze 20 pixelů, můžete značku <hr> doplnit atributem nastavujícím šířku čáry: <hr width="20">. Narazí-li prohlížeč na takto rozšířenou 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 budete často setkávat.

2.2Struktura 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, tvořenou speciálními formátovacími značkami. 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í verzí </html>. Celý zdrojový text vytvářené stránky je tedy umístěn mezi tyto dvě značky.

Neméně 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 sice na stránce nezobrazuje, ale přesto by se na ni nemělo zapomínat. Jsou v ní totiž umístěny některé důležité informace. Například 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. Je ohraničeno značkami <body> a </body>. Mezi ně je možné zapsat text, který se zobrazí na stránce.

Zdrojový text první stránky bude vypadat takto:

<html>

<head>

</head>

<body>

První WWW stránka vytvořená v HTML je na světě!

</body>

</html>

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 + . (>).

Malá a velká písmena v HTML

HTML je z hlediska zápisu formátovacích značek velice tolerantní, a proto je možné formátovací značky zapisovat velkými i malými písmeny. To znamená, že ať napíšete <HTML> nebo <html>, jedná se vždy o tutéž značku. Dokonce 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 držet se ho. A který je ten správný? To nelze jednoznačně určit, protože oba způsoby mají své výhody i nevýhody.

Konečné rozhodnutí je však opravdu jen a jen na vás. V této knize budu pro formátovací značky v HTML používat malá písmena, protože jsem na tento zápis zvyklý a používá se přeci jen o něco častěji.

Až budete mít stránku napsanou, uložte ji na disk do souboru s nějakým příhodným názvem a s příponou html.

Obrázek 2.1: Tak to je ona, naše první stránka

2.3Zobrazení 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 Windows poklepete myší na její jméno. Měl by se otevřít prohlížeč a v něm se zobrazí požadovaná stránka. 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 dialogové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. Pokud tomu tak není a stránka vypadá jinak, udělali jste někde chybu a musíte znovu otevřít zdrojový text stránky v editoru a opravit všechny překlepy. Potom je nutné soubor znovu uložit a stránku znovu načíst pomocí tlačítka Aktualizovat (Obnovit).

2.4Nezapomínejte na hlavičku

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.

Název stránky

První informace, která je v každé hlavičce obsažena, je název stránky. 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 její obsah, použité kódování, 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ávajících konkrétní druh informace.  Například popis stránky se do hlavičky dokumentu přidá takto:

<meta name="description" content = "první stránka vytvořená jako ukázka pro začínající tvůrce webových stránek v HTML">

Atribut name udává typ informace (description = popis) a atribut content pak vlastní informaci. Pomocí tohoto atributu lze tedy snadno do hlavičky přidat klíčová slova. V našem případě bude značka <meta> vypadat 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, webové stránky, HTML">

Obdobným způsobem můžete na stránku vložit informace o jménu autora. Stačí do hlavičky vložit následující řádek:

<meta name="author" content="Slavoj Písek">

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čů. 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:

<head>

<title>První stránka</title>

<meta name="description" content = "první stránka vytvořená jako

ukázka pro začínající tvůrce webových stránek v HTML">

<meta name = "keywords" content = "ukázka, stránka, začínající tvůrci,

webové stránky, HTML">

<meta name="author" content="Slavoj Písek">

</head>

Jak se změna hlavičky projeví ve výsledné stránce, vidíte na následujícím obrázku. 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.

Obrázek 2.2: Pomocí hlavičky lze upravit text v záhlaví okna

Kódování stránky

Na základě předchozí ukázky byste se mohli domnívat, že metainformace jsou naprosto zbytečné, protože na vzhled stránky nemají žádný vliv. Neplatí to však vždy. Dalším důležitým údajem, který by neměl mezi metainformacemi chybět, je použité kódování dokumentu. Jestliže totiž nějaký dokument obsahuje znaky s diakritikou, případně nějaké další znaky z jiných jazyků (azbuka, čínština apod.), je potřeba prohlížeči říct, jakou znakovou sadu (kódování) má pro jejich zobrazení použít. Většina editorů ve Windows používá jako základní kódování CP-1250. Jestliže informaci o použitém kódování v hlavičce dokumentu neuvedete, může se stát, že prohlížeč zobrazí znaky s diakritikou nečitelně.

Jestliže prohlížeč nemá informaci o použitém kódování, pokusí se je určit automaticky. Přestože se mu to často i podaří, v žádném případě byste na to neměli spoléhat.

Řádek s metainformacemi o použitém kódování může vypadat například takto:

<meta http-equiv="content-type" content="text/html;

charset=windows-1250">

Atribut http-equiv říká, že v hodnotě atributu content je definován typ dokumentu. V tomto případě se jedná o textový dokument s HTML kódem a použité kódování je CP-1250. Ovšem právě toto kódování je poněkud problematické. Ve Windows sice funguje bezvadně, ale některé jiné systémy, na kterých byste chtěli danou stránku prohlížet, si s ním nemusí poradit. Proto je daleko lepší použít univerzální kódování UTF-8, které bude spolehlivě fungovat na všech platformách.

Lépe je tedy použít následující řádek:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Když upravenou stránku znovu zobrazíte, bude prohlížeč vědět, jaké kódování má použít. Ovšem je třeba dát pozor, aby v něm dokument byl skutečně uložen. Jinak dopadnete, přesně jak je vidět na obrázku 2.3. Sice jsme správně uvedli, že si přejeme použít kódování UTF-8, ale dokument je stále uložen v původním kódování (pokud používáte Windows, je to pravděpodobně kódování CP-1250).

Obrázek 2.3: Údaj uvedený v metainformacích neodpovídá skutečnému kódování

Oprava je celkem snadná, stačí v textovém editoru změnit použité kódování a stránku znovu uložit. V PSPadu se kódování pohodlně změní v nabídce Formát, kde si pohodlně vyberete požadovanou hodnotu. To, jaké kódování je v daném dokumentu použito, se také zobrazuje ve stavovém řádku programu, jak je to vidět na obrázku 2.4.

Obrázek 2.4: Kódování lze nastavit pomocí nabídky Formát a zkontrolovat ve stavovém řádku

Potom, co změníte kódování na UTF-8 a stránku obnovíte, bude se již zobrazovat správně.

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ě dokumentu obsahujícího skripty se ještě do hlavičky umísťují definice jednotlivých funkcí používaných ve skriptech.

2.5Typ HTML dokumentu

Pokud shrneme všechno, co jsme si až dosud řekli, získáme jistou šablonu, která je stejná pro všechny stránky. Ovšem v této šabloně by neměl chybět ještě jeden řádek, o němž dosud nebyla řeč. Jedná se o informaci, ve které verzi jazyka HTML byla stránka napsána. K tomuto zápisu se používá poměrně komplikovaná 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ů.

Tento řádek v podstatě říká prohlížeči, jaká se na stránce používá definice typu dokumentu (DTD).

Vzhledem k výše uvedenému je možné říct, že každá správně napsaná stránka má mít tento základ:

<!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>

V případě, že nechcete, aby byly vaše stránky zařazeny do internetových vyhledávačů, a jsou určeny například jen pro umístění na místní síti, je možné některé metainformace vynechat, nikdy by vám však zde neměla chybět informace o použitém kódování.

Změny v HTML 5

V nejnovější verzi HTML došlo k mnoha zjednodušením. Některá z nich se týkají právě hlavičky dokumentu.

Například hned první řádek s typem dokumentu je v HTML 5 mnohem jednodušší. Stačí napsat jen:

<!DOCTYPE html>

Stejně tak údaje o použité znakové sadě se zapisují daleko přehledněji:

Místo již zmiňovaného řádku:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Stačí nově napsat jen:

<meta charset="UTF-8">

Kromě toho lze ještě do tagu <html> doplnit, v jakém jazyce je dokument napsán a jaké zarovnávání písma se používá. Pro češtinu, v níž se píše zleva doprava, by to vypadalo takto:

<html lang="cs" dir="ltr">

Celá předchozí stránka by v HTML 5 vypadala takto:

<!DOCTYPE html>

<html lang="cs" dir="ltr">

<head>

<title>První stránka</title>

<meta charset="UTF-8">

<meta name="description" content = "první stránka vytvořená jako ukázka

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

<meta name = "keywords" content = "ukázka, stránka, začínající tvůrci,

WWW stránky, HTML">

<meta name="author" content="Slavoj Písek">

</head>

<body>

První WWW stránka vytvořená v HTML 5 je na světě!

</body>

</html>

2.6Komentáře

Velmi důležitou součást zdrojového kódu HTML stránky představují komentáře. To jsou části kódu, které na vzhled stánky nemají žádný vliv a po zobrazení stránky se o nich ani nedozvíte. Přesto však nejsou zbytečné, protože umožňují autorovi stránky zapsat si poznámky přímo do HTML dokumentu.

Obrázek 2.5: Komentáře prohlížeč zcela ignoruje

Do komentářů si můžete například poznamenat, který obrázek ještě chcete na stránku umístit nebo co máte koupit cestou domů v supermarketu. 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.

Pokud tedy chcete nějaký text ukrýt před prohlížečem a označit ho jako komentář, stačí jej uzavřít mezi značky <!-- a -->. Příklad použití komentářů v HTML dokumentu může vypadat takto:

<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 ale vidět, a proto pozor na její obsah.

</body>

Na obrázku 2.5 můžete vidět, že stránka po zobrazení vypadá tak, jako kdyby v ní komentář vůbec nebyl.

3.Formátování textu

V této kapitole se dozvíte mnoho užitečných informací o tom, jak formátovat text na svých stránkách. Naučíte se vytvářet nadpisy, členit text do odstavců a měnit formát písma, jeho velikost, barvu atd.

V minulé kapitole jsme vytvořili první webovou stránku pomocí jazyka HTML. Ovšem tato stránka byla tak jednoduchá, že jen těžko mohla někoho zaujmout. Proto se v této kapitole zaměříme na to, jak ji vylepšit.

Jestliže má být text na stránce přehledný, musí být rozčleněn na části a každá část by měla být opatřena nadpisem. A proto začneme právě zde.

3.1Nadpisy

Nadpisy jsou výrazným členicím prvkem v textu, a proto není divu, že mají v HTML značnou podporu. Vložení nadpisu na webovou stránku je velice jednoduché. Stačí napsat text nadpisu a vložit jej mezi značky <h1> a </h1>, například takto:

<h1>Text nadpisu</h1>

Jméno značky je odvozeno od anglického slova „header“ (nadpis). Jednička ve značce dává tušit, že existuje ještě značka <h2>, případně <h3> atd. V HTML jsou totiž definovány nadpisy různých úrovní. A právě číslo umístěné u značky určuje úroveň nadpisu. Těchto úrovní může být až šest.

Vážení čtenáři, právě jste dočetli ukázku z knihy HTML.
Pokud se Vám líbila, celou knihu si můžete zakoupit v našem e-shopu.