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.

Marek Laurenčík

Tvorba www stránek v HTML a CSS

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

Spoluautor Michal Bureš
Odpovědný redaktor Petr Somogyi
Sazba Petr Somogyi
Formát ePub Štěpán Böhm
Ikony Freepik (www.flaticon.com)
Počet stran 224
První vydání, Praha 2019
Vytiskly Tiskárny Havlíčkův Brod, a. s.

© Grada Publishing, a.s., 2019
Cover Design © Grada Publishing, a. s., 2019
Cover Photo © Depositphotos/fraeje

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

ISBN 978-80-271-2559-3 (ePub)
ISBN 978-80-271-2946-1 (pdf )
ISBN 978-80-271-2241-7 (print)

Předmluva

Tato kniha pojednává o tvorbě webových stránek. V současné době zahrnuje tato práce činnosti z několika oblastí. Doba, kdy tvůrci webových stránek stačilo ovládat jazyk HTML a práci s kaskádovými styly, již patří minulosti. Moderní přístup ke tvorbě webu vyžaduje využití databáze, což vyžaduje ovládání základů jazyka SQL. Pro spojení databáze s webovou stránkou ovšem musíte ovládat aspoň základy jazyka PHP, pro tvorbu dynamických webových stránek se tvůrce zase neobejde bez základů dalšího programovacího jazyka – Javascriptu.

Jedná se o značně širokou oblast témat, jejíž jednotlivé složky jsou mnohdy uváděny odděleně. Cílem této knihy je představit základy všech pěti oblastí využívaných při tvorbě webových stránek: jsou to jazyk HTML, kaskádové styly CSS, práce s databází My SQL a základy jazyka SQL, úvod do dvou uvedených programovacích jazyků: Javascriptu a PHP. Přitom je samozřejmě kladen důraz i na jejich vzájemné souvislosti.

Rozsah knihy samozřejmě neumožňuje podat u všech pěti oblastí látku do hloubky. Týká se to zejména posledních dvou kapitol zabývajících se programováním. To však ani nebylo naším cílem. Studijního materiálu o Javascriptu a PHP je k dispozici poměrně dost a tato kniha by měla posloužit jak pro zvládnutí základních a nejčastěji používaných programovacích postupů, tak se stát dostačujícím úvodem pro seznámení se s pokročilými programovacími postupy.

Kniha je určena především pro čtenáře, kteří s tvorbou webových stránek začínají, a měla by jim umožnit od začátku přistupovat k této práci v plné komplexnosti. Užitečná může být i pro všechny, kdo již s webovými stránkami nějaké zkušenosti mají a chtěli by si své znalosti rozšířit a prohloubit.

V knize jsme použili následující typografické konvence:

■Kód HTML, stylů CSS a jazyků SQL, Javascript a PHP je psán neproporčním písmem.

■Příkazy v programech a názvy adresářů jsou zvýrazněny tučně.

■Názvy kláves jsou odlišeny pomocí KAPITÁLEK.

Ať se Vám daří!

Autoři

1Úvod

Celosvětová internetová síť propojuje dva základní druhy počítačů:

■servery, které uchovávají a nabízejí dokumenty s informacemi,

■klienty, které tyto dokumenty přejímají, zobrazují a nabízejí uživatelům.

Internet byl od počátku vyvíjen jako prostředek zcela nezávislý na počítačovém vybavení na straně klienta, internetové dokumenty proto mohou obsahovat pouze text. Všechny obrázky, fotografie a další grafické objekty musí být uloženy v samostatných souborech a internetový dokument se na tyto soubory odvolá pomocí odkazů.

Zobrazování internetového dokumentu na straně klienta zajistí webový prohlížeč. Jedním z nich je Microsoft Internet Explorer, který je součástí operačního systému Windows. Jiné často používané prohlížeče (Firefox, Google Chrome, Edge, Opera apod.) lze bezplatně nainstalovat z řady webů.

Správné zobrazení internetového dokumentu v prohlížeči zajistí řídicí příkazy pro práci prohlížeče, které se píší v jazyku HTML (Hypertext Markup Language). Takto vytvořený dokument má příponu HTM nebo HTML. Soubor typu HTML se často označuje také jako webová stránka. Součástí každého souboru HTML je rovněž formátování zobrazovaného textu. To je možné provést dvěma způsoby:

■údaje o vzhledu písma, odstavce apod. zapsat přímo pomocí příkazů jazyka HTML,

■zapsat informace o formátování odděleně pomocí nástroje zvaného „styly“ a v jazyku HTML se na vytvořené styly odvolávat.

Současným trendem při tvorbě webových stránek je přesouvat co nejvíce formátovacích informací do stylů.

Kromě jazyka HTML se k tvorbě webových stránek často používají programovací jazyky JavaScript a PHP. JavaScript provádí kód na straně klienta a umožňuje oživit webové stránky dynamickými efekty. Jazyk PHP obsahuje nástroje pro webové stránky, prováděné na straně serveru. Prostředky jazyka PHP umožňují například měnit obsah webové stránky podle různých podmínek, odesílat e-mailové zprávy a komunikovat s databází, v níž jsou uchovány informace pro tvorbu webových stránek.

1.1Soubory tvořící webové stránky

Pojmem „webové stránky“ nebo „web“ se označuje série dokumentů od jednoho autora nebo firmy, nabízených veřejnosti na straně serveru. Každý web obsahuje zpravidla následující soubory:

■Soubor s názvem index. Jedná se o úvodní stránku celého webu, která se při připojení na web zobrazí každému návštěvníkovi jako první. Soubor index musí být umístěn v kořenovém adresáři, který obsahuje publikované webové stránky.

■Další soubory, tvořící vlastní webové stránky.

■Obrázky a další grafické soubory.

■Soubory typu PDF, které lze prohlížet pomocí programu Acrobat Reader.

■Soubory typu CSS: tyto soubory nemají vlastní obsah, ale obsahují definice použitých stylů. Použitím souborů CSS dosáhneme toho, aby byl vzhled celého webu jednotný.

■Podle potřeby mohou webové stránky obsahovat také dokumenty Wordu, sešity Excelu nebo jiné soubory, které jsou zpravidla určeny ke stažení ze serveru do počítače na straně klienta.

1.2Postup při tvorbě webových stránek

Tvorba webových stránek má zpravidla následující fáze:

■Příprava obsahu stránek (tedy textů, obrázků, tabulek apod.).

■Návrh rozvržení webu a jeho logiky.

■Tvorba úvodní stránky (index) a ostatních stránek včetně programového kódu.

■Příprava souborů se styly (CSS) pro jednotné formátování webu.

Pro přípravu webových stránek budeme potřebovat následující programové vybavení:

■Program pro editaci souborů HTML. Protože se jedná o textové soubory, můžete je vytvářet i v Poznámkovém bloku. Lepší je však použít některý z editoru HTML, které barevně odlišují jednotlivé části kódu – práce s nimi je pohodlnější. Mezi často používané programy tohoto druhu patří například program PsPad (je k dispozici v češtině a bezplatně na webech jako Stahuj, Kopretina apod.).

■Program pro práci s grafickými soubory. Můžeme použít libovolný z programů, jež umožňují úpravu obrázků: změnu rozměrů, změnu typu souboru (přípony), zesvětlení obrázku.

■Několik webových prohlížečů. Kód HTML není ve všech webových prohlížečích interpretován zcela stejně. Totéž platí i pro styly. Výsledkem je, že jeden a týž soubor může mít v různých prohlížečích poněkud odlišný vzhled. Největší rozdíly jsou mezi MS Internet Exporerem a ostatními prohlížeči, avšak ani další často používané prohlížeče nefungují ve všem zcela stejně. Proto je nutné připravované webové stránky vyzkoušet v různých prohlížečích (například Google Chrome, FireFox, Opera, Edge atd.).

1.3Struktura webu a názvy souborů

Tvorbu webu a jeho zkoušení provádíme zpravidla nejprve na lokálním počítači. Vytvářený web umístíme do samostatného adresáře. Aby byla jeho struktura přehledná, je vhodné využívat podsložky (umístíme do nich napříkald obrázky, soubory PDF, soubory stylů CSS či další soubory). Na webovém serveru potom vytvoříme přesně stejnou strukturu.

Webové servery využívají operační systém Unix, který používá odlišná pravidla než operační systém Windows:

■nepřipouští názvy s českou diakritikou, mezerami, čárkami a podobnými znaky,

■v názvech rozlišuje malá a velká písmena,

■při zápisu cest k souborům se používá obyčejné (nikoliv zpětné) lomítko.

Všechny názvy souborů a podsložek v adresáři s webem proto upravíme, aby obsahovaly jen:

■malá písmena abecedy bez písmen s háčky a čárkami,

■číslice,

■pomlčku a podtržítko.

Tyto zásady je nutné důsledně dodržovat i při přípravě webu na lokálním disku. Jejich nedodržení může vést k tomu, že například odkaz na špatně pojmenovaný obrázek bude na lokálním disku fungovat, ale na webovém serveru již nikoliv.

1.4Publikování webu

Vytvořené webové stránky je třeba zpřístupnit veřejnosti. Provedeme to ve třech krocích:

1.Registrace domény – tímto krokem si zarezervujeme jedinečný název, pod nímž budou webové stránky nabízeny uživatelům. Poslední část názvu (přípona) může být národní (cz) nebo mezinárodní (eu, com apod.). Registraci domén provedeme pomocí internetu, cena za doménu se pohybuje řádově ve stovkách korun za rok.

2.Objednání webhostingu – jedná se o pronájem diskové plochy na webovém serveru, který zpřístupní webové stránky ostatním uživatelům. Pronájem provedeme opět pomocí internetu, a to bezplatně, nebo za poplatek. Bezplatný webhosting nabízí méně služeb než placený (například využívání databáze je omezené).

3.Překopírování webových stránek a dalších potřebných souborů na webový server – tento přenos se provede pomocí protokolu FTP (File Transfer Protocol) a je podrobně popsán dále.

1.5Kopírování souborů na webový server

Pro kopírování potřebných souborů na webový server využijeme internet, spuštěný pod protokolem FTP. Na rozdíl od běžně používaného protokolu HTTP neumožňuje soubory na webovém serveru prohlížet, umožňuje však s nimi pracovat obdobným způsobem jako programy Průzkumník nebo Tento počítač (tedy soubory kopírovat, mazat, vytvářet nové složky apod.).

Obrázek 1.1 Přihlašovací okno v protokolu FTP

Pro přístup na webový server, kde budou umístěny vytvořené webové stránky, potřebujeme adresu webového serveru, přihlašovací jméno a heslo. Tyto informace sděluje provozovatel webového serveru po objednání webhostingu, zpravidla je pošle e-mailem.

Při práci s webovým serverem postupujeme takto:

1.Spustíme program Tento počítač.

2.Do adresní řádku zapíšeme adresu webového serveru včetně protokolu (například ftp://www.server.cz).

3.V zobrazeném okně vyplníme přihlašovací jméno a heslo.

4.Klepneme na tlačítko Přihlásit se.

V okně programu Tento počítač se zobrazí přidělená plocha na webovém serveru.

Pohodlnější práci s protokolem FTP nabízejí některé programy pro práci se soubory, napříkald Total Commander. Z internetu si můžeme bezplatně stáhnout i programy určené přímo pro práci s protokolem FTP, například program FileZilla.

2Tvorba kódu HTML

Webová stránka, zapsaná vkódu HTML, se skládá ze dvou částí: textů, které budou na webové stránce zobrazeny, ařídicích příkazů jazyka HTML, označovaných jako elementy (někdy se také používá název tagy).

Při tvorbě webové stránky si je třeba uvědomit, že všechny texty, které do webové stránky zapíšeme, slouží pouze jako informace pro webový prohlížeč. Způsob, jak prohlížeč vokně webové stránky zobrazí, můžeme ovlivnit jedině použitím některého elementu jazyka HTML. Při zobrazování zapsaného textu platí tato pravidla:1

■Prohlížeč ignoruje všechny přechody na nový řádek, tedy znaky ENTER.

■Prohlížeč nezobrazí prázdné řádky.

■Mezera je chápána jako oddělovač mezi slovy, nikoliv jako znak. Několik mezer se tedy zobrazí jako jediná mezera.

■Tabulátory se interpretují jako jedna mezera.

Tyto zásady jsou pochopitelné, protože prohlížeč musí zobrazovaný text přizpůsobit počítači, na kterém se webové stránky spustí (tedy grafické kartě arozlišení, nastaveném na monitoru). Stejný odstavec textu může na různých počítačích zabrat různý počet řádků.

Ztoho ovšem plyne určitá nepříjemnost, protože odsunutí textu doprava pomocí mezer nebo tabulátorů není možné arozmístění textu na stránce musíme provést zcela jinými prostředky.

Co se stane, pokud se při psaní kódu HTML dopustíme chyby? Většina programovacích jazyků včetně jazyka PHP se chybnému zápisu vzepře, ohlásí chybu aodmítne dále pokračovat. Webové prohlížeče však žádnou chybu kódu neohlásí apokusí se stránku za každou cenu zobrazit. Výsledek může být ovšem poněkud podivný. Musíme si zkrátka zvyknout na to, že se při tvorbě webových stránek naplno uplatňuje stará moudrost „programátor dělá, co umí, počítač si dělá, co chce“.

2.1Elementy jazyka HTML

Elementy jazyka HTML se uzavírají do znaků < a>, mezi které napíšeme identifikační kód zvoleného elementu. Vjazyku HTML se rozlišují dva typy elementů:

■Párové elementy zahrnují nějaký obsah, především text. Utěchto elementů je nutné vyznačit ikonec jejich platnosti. Provedeme to pomocí koncového elementu, který se zapíše stejně jako počáteční element, ale před kód elementu zapíšeme lomítko.

■Nepárové elementy obsah nezahrnují avdokumentu HTML stojí samostatně, bez koncového elementu.

Uřady elementů je zapotřebí uvést další informace, potřebné pro jeho správnou funkci. Proto má většina elementů kdispozici řadu atributů, kterým přiřadíme potřebnou hodnotu. Provedeme to pomocí rovnítka, za kterým následuje hodnota zapsaná vuvozovkách. Atribut ishodnotou zapíšeme dovnitř elementu mezi znaky < >, od kódu elementu jej oddělíme mezerou.

Jeden element může obsahovat ivíce atributů, které od sebe oddělíme opět mezerou. Jestliže element obsahuje více atributů, můžeme je napsat vlibovolném pořadí. Na prvním místě mezi znaky < > však musí být vždy kód elementu.

Řada atributů má některou možnou hodnotu definovánu jako výchozí. Pokud tento atribut velementu vynecháme, použije se tato výchozí hodnota.

Jak jsme si uvedli, webové prohlížeče ignorují všechny přechody na nový řádek. Proto můžeme elementy psát na samostatnou řádku nebo do jedné řádky společně se zahrnutým textem. Na dva řádky je možné rozdělit isamotný element. Rozdělení elementu na dva řádky je vhodné zejména vpřípadě, kdy obsahuje více atributů ajeho text je dlouhý.

Při interpretaci kódu zapsaného jazykem HTML webové prohlížeče zpravidla nerozlišují malá avelká písmena. Pro korektní zápis kódu však platí zásada, že počáteční ikoncový element by měl být napsán stejně, tedy buď malými, nebo velkými písmeny.

Webové prohlížeče se zpravidla dokážou vyrovnat isnekorektnostmi vzapsaném kódu. Na to bychom však neměli hřešit. Vývoj webových prohlížečů sice směřuje na jedné straně kstálé širším možnostem, ale na druhé straně se mohou zvyšovat požadavky prohlížečů na korektnost zapsaného kódu.

Obecný tvar kódu HTML spárovým anepárovým elementem tedy vypadá takto:

<element1 atribut="hodnota">

Vnořený text

</element1>

<element2 atribut1="hodnota1" atribut2="hodnota2">

Párové elementy je možné do sebe vnořovat avytvářet tak hierarchii do více úrovní. Přitom musíme důsledně dbát na to, aby se vnoření nekřížilo. Element, který otevřeme jako první, musíme vždy uzavřít jako poslední.

Obrázek 2.1 Vnořování elementů

Při psaní kódu HTML je vhodné dodržovat tyto zásady:

■Všechny texty velementech píšeme malými písmeny: kód elementu, názvy atributů apoužité hodnoty.

■Všechny párové elementy je nutné důsledně uzavírat.

■Všechny atributy, uvedené velementech, by měly mít hodnotu.

■Hodnoty atributů (včetně hodnot číselných) zapisujeme do uvozovek.

Jestliže vprogramu PSPad klepneme do párového elementu, barevně se zvýrazní astejnou barvou se zvýrazní iodpovídající koncový element (pokud už na stránce existuje). Totéž platí ipři klepnutí do koncového elementu.

Skutečnost, že webové prohlížeče ignorují přechody na nový řádek aprázdné řádky nezobrazí, umožňuje oddělit jednotlivé části kódu stránky prázdným řádkrm, takže se zvýší její přehlednost.

Pro lepší orientaci vkódu je možné použít komentář. Komentář je tvořen nepárovým elementem, jehož prvním znakem je vykřičník, poté následuje mezera aza ní libovolný text včetně české diakritiky. Příklad:

<!Toto je komentář kwebové stránce>.

2.1.1Struktura souboru HTML

Veškerý obsah webové stránky je uzavřen mezi elementy <html> a</html>. Ostatní elementy musí být do tohoto elementu vnořené. Element <html> může obsahovat atribut lang, což vyjadřuje jazyk webové stránky. Hodnotami atributu mohou být například "cs" (čeština) nebo "en" (angličtina). Tento atribut však není nutný, daleko důležitější je údaj ozpůsobu, jak je na stránce kódována čeština.

Obrázek 2.2 Struktura webové stránky

Mezi elementy <html> a</html> jsou vnořeny dvě sekce webové stránky:

■Hlavička stránky je uzavřena mezi elementy <head> a</head>. Vtéto sekci jsou zapsány údaje určující způsob zobrazení webové stránky vprohlížeči (například kódování češtiny nebo definice stylů). Sekce dále může obsahovat další informace, které určují chování webové stránky ajejí vztah kwebovým vyhledavačům.

■Tělo stránky je uzavřeno mezi elementy <body> a</body>. Vtěle stránky je zapsán vlastní obsah, zobrazovaný prohlížečem.

Vsekci head jsou nejčastěji obsaženy tyto elementy:

■Párový element <title> a</title> pro zadání titulku webové stránky. Titulek se zobrazí jako nadpis vokně nebo na záložce prohlížeče.

■Elementy definující styly pro formátování webové stránky (struktura těchto elementů bude podrobně popsána vkapitole věnované stylům).

■Nepárové elementy <meta>, které definují další vlastnosti webové stránky.

Nejdůležitějším použitím elementu <meta> je určení způsobu, jak je kódována čeština na stránce. Vsoučasné době se používají především dvě možnosti:

■Kódování windows-1250 využívají programy balíku MS Office. Webovou stránku můžeme vytvořit také vtomto kódování.

■Kódování utf-8 se běžně používá vdatabázi My SQL. Toto kódování umožňuje větší výběr znaků než windows-1250 (například čínské nebo arabské znaky). Ztěchto důvodů se při tvorbě webových stránek zpravidla používá kódování utf-8. Je univerzální, textový soubor však zabírá více místa.

Velementu <meta> určuje kódování stránky atribut charset, hodnotou je označení názvu kódové stránky, například:

<meta charset="utf-8">

Pokud vytvoříme novou webovou stránku vprogramu PSPad, vloží se do ní automaticky elementy <html>, <head> a<body>. Do hlavičky stránky se vloží ještě prázdný element <title> adva elementy <meta>:

<meta http-equiv="content-type" content="text/html; charset=windows-1250">

nebo

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

(podle toho, jakou kódovou stránku použije program jako výchozí) adále element:

<meta name="generator" content="PSPad editor, www.pspad.com">

První element <meta> můžeme ponechat ve vložené podobě nebo použít zjednodušenou verzi, uvedenou výše. Druhý element <meta> jen popisuje způsob, jak byla stránka vytvořena. Na funkčnost stránky nemá vliv, lze jej tedy vymazat.

Pokud potřebujeme změnit uwebové stránky kódování češtiny, nestačí jen přepsat element <meta> vhlavičce stránky. Soubor HTML ještě musíme konvertovat do jiné kódové stránky. Vprogramu PSPad je úprava kódování velmi jednoduchá: klepneme na příkaz Formát, vzobrazené nabídce označíme potřebné kódování asoubor uložíme.

Úpravu kódování můžeme provést ipomocí programu Poznámkový blok:

1.Soubor swebovou stránkou otevřeme vPoznámkovém bloku. Při otvírání je nutné použít seznam Soubory typu anastavit vněm volbu Všechny soubory.

2.Použijeme příkaz Soubor → Uložit jako.

3.Vseznamu Uložit jako typ vybereme možnost Všechny soubory.

4.Vseznamu Kódování vybereme potřebnou kódovou stránku. Seznam nabízí možnosti UTF-8 nebo ANSI (což znamená kódování windows-1250).

5.Klepneme na tlačítko Uložit.

6.Potvrdíme přepis souboru.

Kódování, ve kterém je soubor swebovou stránkou uložen, musí vždy odpovídat kódování nastavenému vhlavičce stránky. Pokud tomu tak není, prohlížeč zobrazí špatně písmena sčeskou diakritikou. Po změně kódování stránky je záhodno stránku otevřít vprohlížeči azkontrolovat, že je čeština vpořádku.

Další elementy <meta> se používají především pro kvalitní zpracování webu ve vyhledávačích, jako je například Google nebo Seznam. Zvyšuje se tím návštěvnost webu. Element <meta> má pak dva atributy:

■Atribut name určuje typ informace.

■Atribut content obsahuje vlastní informaci.

Nejčastěji se používají tyto hodnoty:

■name ="description", atribut content obsahuje stručný popis stránek.

■name ="keywords", atribut content obsahuje seznam klíčových slov oddělených mezerami.

■name ="robots", do atributu content zapíšeme hodnotu"all,follow". Tímto nastavením stránky zajistíme, že programy pro automatické vyhledávání webových stránek, které jsou součástí velkých internetových portálů (například Seznam nebo Google), zpracují nejen vlastní obsah stránky, ale také všechny odkazy na další stránky, jež tato webová stránka obsahuje.

Jako příklad si uveďme, jak by mohla vypadat část hlavičky webové stránky, která bude popisovat tuto knížku (ve skutečném webu by za element <meta> přišly ještě elementy pro definici stylů, které budou stránku formátovat):

<head>

<meta charset="utf-8">

<meta name="keywords" content="html css mysql javaskript php">

<meta name="robots" content="all,follow">

<title>Kniha otvorbě webových stránek</title>

</head>

2.2Tvorba textu

Velká část formátování webových stránek se zpravidla provádí pomocí stylů. Jazyk HTML také obsahuje možnosti formátování, jsou však podstatně omezenější než ustylů anavíc je často obtížné udržet jednotný vzhled webu. Upravovat vzhled textu pomocí elementů HTML má proto smysl pouze tam, kde se jedná ovýjimku akde by se nevyplatilo vytvářet například pro odlišné písmo utří slov nový styl.

Vtéto části knihy se proto budeme věnovat především obsahu webových stránek, jejich vzhled budeme řešit vté následující.

2.2.1Odstavce

Většina textu na webové stránce je rozdělena do odstavců. Počátek akonec odstavce vyznačují párové elementy <p> a</p>. Koncový element odstavce </p> způsobí zalomení textu adodatečnou svislou mezeru mezi odstavci. Tato dodatečná mezera za odstavcem se vrůzných prohlížečích interpretuje různě, vMS Internet Exploreru je oněco větší než vprohlížečích Google Chrome nebo FireFox.

Kromě odstavce můžeme text napsat do nadpisu, seznamu nebo tabulky, což zajistí další elementy. Hladký text mimo odstavec by se však ve správně zapsané stránce neměl vyskytovat.

Uvnitř odstavce je možné provést zalomení řádku nepárovým elementem <br> (break). Za řádkem, zalomeným uvnitř odstavce, se nepřidá žádná dodatečná mezera. Jeden nebo více elementů <br> můžeme použít kdodatečnému svislému odsazení na stránce.

Prohlížeče provádějí automatické svislé odsazení iudalších elementů, jako jsou nadpisy nebo seznamy. Výjimkou jsou tabulky. Jestliže chceme na stránce vytvořit dvě tabulky bezprostředně za sebou, oddělíme je od sebe použitím elementů <br>.

Elementy pro začátek akonec odstavce můžeme napsat na samostatný řádek nebo (ukrátkých odstavců) do jednoho řádku společně stextem. Každý odstavec by měl být ukončen koncovým elementem </p>.

Toto je správný způsob zápisu:

<p>

Text prvního odstavce

</p>

<p>

Text druhého odstavce

</p>

Element <p> má svou logiku vtom, že odstavec končí tam, kde začíná odstavec následující. Platí to ipro řadu dalších elementů. Proto bude následující kód na stránce zobrazen správně, ikdyž jeho zápis není korektní:

<p>

Text prvního odstavce

<p>

Text druhého odstavce

Anakonec příklad, jak by kód webové stránky rozhodně vypadat neměl:

Text prvního odstavce

<br><br>

Text druhého odstavce

Zde si „webmaster“ vůbec nelámal hlavu snějakými pravidly, odstavci apod. azcelého textu prostě vytvořil jediný eintopf. Většina nyní užívaných prohlížečů se sice dokáže poprat istakovýmto kódem, ale korektní způsob zápisu je jediná záruka, že bude webová stránka správně zobrazována idalšími verzemi prohlížečů, které přijdou vbudoucnosti.

Zarovnání textu vodstavci provádí atribut align, který má čtyři možné hodnoty:

■Hodnota left (výchozí) – text je zarovnán doleva.

■Hodnota right – text je zarovnán doprava.

■Hodnota center – text je zarovnán na střed.

■Hodnota justify – text je zarovnán do bloku. Prohlížeč takto zarovnaný odstavec upraví tak, aby byly všechny řádky stejně dlouhé.

Jednotné zarovnání delšího úseku textu můžeme provést pomocí párového elementu <div>. Tento element slouží koznačení úseku textu, text uvnitř se upraví podle atributů, které vtomto elementu použijeme – můžeme například zarovnat stejným způsobem několik odstavců najednou. Element <div> se používá především kformátování stránky pomocí stylů, což je tématem další kapitoly.

Jednotlivé části webové stránky je možné uzavřít do elementů <header>, <footer>, <article>, <aside>, <section> a<nav>. Na stránce se neprojeví, fungují obdobně jako element <div>. Tyto elementy se opět používají kformátování stránky pomocí stylů.

2.2.2Pevná mezera adalší entity

Protože webové prohlížeče chápou mezeru jako oddělovač, předložky k, s, vnebo zse mohou ocitnout na konci řádku. Obdobně může dojít knežádoucímu rozdělení například upeněžních částek soddělenými tisíci. Vtextovém editoru Word se tento problém řeší pomocí pevné mezery. Jazyk HTML ktomu používá obdobný prostředek, který se nazývá entita. Entita je určena pro vložení pevné mezery adalších speciálních znaků do textu. Je složena ze znaku &, za kterým následuje čtyřpísmenný kód astředník.

Pevná mezera má tvar &nbsp; dalšími často používanými entitami jsou například &euro; pro znak eura, &deg; pro stupeň a&ndash; pro delší pomlčku. Seznam nejčastěji používaných entit je uveden vnásledující tabulce.

Tabulka 2.1 Nejpoužívanější entity

Zápis

Vzhled

Český název entity

Zápis

Vzhled

Český název entity

&nbsp;

nedělitelná mezera

&larr;

←

šipka vlevo

&euro;

€

euro

&uarr;

↑

šipka nahoru

&cent;

¢

cent

&rarr;

→

šipka doprava

&pound;

£

libra

&darr;

↓

šipka dolů

&sect;

§

paragraf

&harr;

↔

oboustranná šipka

&copy;

©

copyright

&sum;

∑

celkový součet

&reg;

®

registrovaná značka

&infin;

∞

nekonečno

&trade;

™

obchodní značka

&ne;

≠

nerovnost

&deg;

°

stupeň

&le;

≤

menší nebo rovno

&plusmn;

±

plus minus

&ge;

≥

větší nebo rovno

&micro;

µ

mikro

&loz;

◊

kosočtverec

&para;

¶

znak odstavce

&quot;

"

rovné uvozovky

&frac14;

¼

čtvrtina

&tilde;

˜

vlnka, tilda

&frac12;

½

polovina

&ndash;

–

kratší pomlčka

&frac34;

¾

tři čtvrtiny

&mdash;

—

pomlčka

&times;

×

krát

&ldquo;

“

levé horní uvozovky

&divide;

÷

děleno

&rdquo;

”

horní pravé uvozovky

&alpha;

α

alfa

&bdquo;

„

levé dolní uvozovky

&beta;

β

beta

&dagger;

†

křížek

&gamma;

γ

gama

&Dagger;

‡

dvojkřížek

&delta;

δ

delta

&permil;

‰

promile

&epsilon;

ε

epsilon

&szlig;

ß

německé tvrdé S

&pi;

π

pí

&bull;

•

puntík

&omega;

ω

omega

&hellip;

…

tři tečky

Do webové stránky můžeme umístit několik entit bezprostředně za sebou. Například série několika pevných mezer provede odsunutí dalšího textu více vpravo. Příklad:

<p>

Velkopopovický Kozel 11&deg; je kdostání v&nbsp;restauraci Na Mýtince za cenu 0,95&nbsp;&euro;.

</p>

Ventitách se rozlišují malá avelká písmena.

2.2.3Rozklikávací text

Část textu (iněkolik odstavců) můžeme na webové stránce vytvořit jako rozklikávací. Po načtení stránky je zobrazen pouze titulek textu, celý text zobrazíme klepnutím na nadpis adalším klepnutím text opět skryjeme.

Rozklikávací text se vytvoří párovým elementem <details>. Do tohoto elementu můžeme vnořit libovolný text včetně několika odstavců. Nadpis rozklikávaného obsahu vytvoříme párovým elementem <summary>, který vložíme do elementu <details> na začátek nebo na konec. Pokud element <summary> chybí, nadpisem je standardní text (včeských Windows text „Podrobnosti“).

Rozklikávací text podporují například prohlížeče Google, Firefox, Opera, nikoliv však MS Internet Explorer verze 11 nebo Edge.

2.2.4Změna vzhledu písma

Odlišný typ písma tvoří tyto párové elementy:

■<strong> nebo <b> – tučné písmo,

■<em> – nebo <i> – šikmé písmo,

■<ins> – nebo <u> – podtržený text,

■<del> – přeškrtnutý text,

■<small> – zmenšené písmo textu,

■<sup> – horní index,

■<sub> – dolní index.

Horní adolní index způsobí posunutí textu nahoru nebo dolů aponěkud zmenší velikost písma.

Barvu písma nastaví párový element <font>. Element má atribut color, jako hodnotu použijeme anglický název barvy. Tento způsob nastavení barvy písma se používá spíše výjimečně, pokud chceme zvýraznit určitou část textu odlišnou barvou. Pro určení barvy písma nebo pozadí se běžně používají styly, popsané vnásledující části. Tam se seznámíme isdalšími způsoby nastavení barev, které nabízejí větší možnosti než anglické názvy.

Všechny elementy určující vzhled stránky můžeme vnořovat do sebe. Jednotlivé efekty se pak zkombinují, například vnoření elementů <strong> a<em> vytvoří tučné šikmé písmo. Nezáleží na tom, který element je použit jako první, musíme však dbát na správné vnoření elementů do sebe (tedy počáteční akoncové elementy se nesmí křížit), například:

<font color="red"><strong><em>

Tento text se zobrazí červeně, tučnou kurzívou

<em><strong></font>

Párový element <mark> zvýrazní označený text žlutým pozadím.

2.2.5Nadpisy

Nadpisy na webové stránce vytvoříme párovými elementy <h1>, <h2> až <h6>. Čím je nižší číslo velementu, tím je vyšší úroveň nadpisu atomu odpovídá také velikost písma. Element <h1> použijeme pro hlavní nadpis celé stránky. Text nadpisu je automaticky tučným písmem. Konec nadpisu automaticky vytvoří zalomení textu adodatečnou mezeru za nadpisem, obdobně jako uelementu <p>.

Texty nadpisů využívají internetové vyhledavače jako Google nebo Seznam. Nadpis nejvyšší úrovně má ve vyhledávání stránek nejvyšší prioritu. Proto je potřeba volit text nadpisů dostatečně výstižný.

Elementy pro nadpis mají atribut align, který použijeme například pro vycentrování nadpisu. Dovnitř elementu můžeme vnořit některý zelementů pro úpravu písma (kromě elementu <strong>, jehož použití unadpisu nemá smysl). Příklad:

<h1 align="center"><font color="blue"><em>

Tvorba webových stránek vHTML, CSS aPHP

</em></font></h1>

Skupinu nadpisů umístěných na webové stránce bezprostředně za sebou (například nadpis první adruhé úrovně) můžeme uzavřít do párového element <hgroup>. Tento element se na stránce uplatní při použití stylů.

2.2.6Kopírování textu zWordu

Text určený pro tvorbu webové stránku je často napřed vytvořen ve Wordu. Vtomto případě není nutné psát text znovu ado editoru HTML jej můžeme přenést pomocí schránky. Přitom je třeba dodržovat tyto zásady:

■Text každého odstavce se vloží vpodobě dlouhého řádku. Před aza řádek vložíme elementy <p> a</p>. Pro lepší přehled je vhodné delší odstavec rozdělit klávesou ENTER na více řádků.

■Nadpisy se vloží jako samostatné řádky. Elementy <h1> atd. je nutné křádku připsat.

■Text se přenese bez formátování. Zvýraznění některých částí písma je proto nutné vytvořit znovu. Totéž platí ipro číslované aodrážkové seznamy (viz dále).

■Kopírovaný text nesmí ve Wordu obsahovat dělení slov. Rozdělení slova se do kódu HTML vloží jako pomlčka, kterou by bylo nutné ručně vymazat. Automatické dělení slov je proto třeba vypnout (na kartě Rozložení stránky). Pokud text obsahuje volitelná rozdělení, je potřeba je ztextu vymazat.

Tabulka 2.2 Hlavní elementy pro tvorbu textu

Element

Párový

Význam

Atributy ahodnoty

<p>

ano

odstavec

align – zarovnání (left,
right, center, justify)

<br>

ne

zalomení řádku

<div>

ano

úsek stránky

align

<h1> až <h6>

ano

nadpis

align

<hgroup>

ano

skupina nadpisů

<strong>

ano

tučně písmo

<em>

ano

kurziva

<ins>

ano

podtržené písmo

<del>

ano

přeškrtnuté písmo

<sup>

ano

horní index

<sub>

ano

spodní index

<font>

ano

barva písma

color – anglický název barvy

<mark>

ano

žluté pozadí textu

<details>

ano

rozklikávací text

<summary>

ano

nadpis rozklikávacího textu

2.3Tvorba seznamů

Na webových stránkách se velice často vyskytují texty členěné do seznamů. Jazyk HTML umožňuje vytvářet seznamy tří typů:

■seznamy sodrážkami – bez vyznačení pořadí,

■číslované seznamy – svyznačením pořadí,

■definiční seznamy – jedná se oodlišný typ seznamů, který svým vzhledem připomíná hesla ve slovnících nebo encyklopediích.

2.3.1Seznamy sodrážkami

Pro tvorbu seznamu sodrážkami je určen párový element <ul> (unorganized list). Jednotlivé body seznamu jsou uzavřeny do párového elementu <li>. Celý seznam je na stránce odsunut trochu doprava. Za jednotlivými body se vytvoří zalomení řádku, ale bez dodatečné mezery. Za seznamem jako celkem se však dodatečná mezera vytvoří. Proto je na stránce možné vytvořit dva seznamy bezprostředně za sebou.

Odlišný typ písma můžeme useznamu nastavit tak, že do potřebného elementu uzavřeme celý seznam, nebo element pro nastavení písma vnoříme do elementu <li>.

Element <ul> má atribut type, určující vzhled odrážek:

■Hodnota disc (výchozí hodnota) – plné kolečko.

■Hodnota circle – prázdné kolečko.

■Hodnota square – plný čtvereček.

Například seznam

•Praha,

•Brno,

•Ostrava.

by na webové stránce vytvořil kód

<ul type="circle">

<li>Praha,</li>

<li>Brno,</li>

<li>Ostrava.</li>

</ul>

Atribut type je možné použít ivatributu <li> anastavit tak ujednotlivých bodů různý typ odrážek. Jestliže použijeme atribut type vobou elementech <ul> i<li>, hodnota velementu <li> má přednost.

2.3.2Číslované seznamy

Číslovaný seznam vytvoříme pomocí elementu <ol> (organized list), pro tvorbu jednotlivých bodů je určen element <li>. Vzhled seznamu je stejný jako useznamu sodrážkami, tedy seznam je posunut doprava. Za jednotlivými body není dodatečné odsazení, za celým seznamem se odsazení vytvoří.

Při dodatečném přidávání nebo odstraňování bodů vseznamu se jednotlivé body automaticky přečíslují.

Element <ol> má dva atributy. Atribut typ určuje tvar číslování:

■Hodnota 1 (výchozí) – číslování arabskými čísly.

■Hodnota a– body jsou označeny malými písmeny a, b, c…

■Hodnota A– body jsou označeny velkými písmeny A, B, C…

■Hodnota i– body jsou očíslovány malými římskými čísly.

■Hodnota I– body jsou očíslovány velkými římskými čísly.

Za čísly nebo písmeny se vždy přidá tečka.

Atribut start určuje číslo prvního bodu, useznamu spísmeny pořadí prvního písmena vabecedě. Seznam:

B.Praha,

C.Brno,

D.Ostrava.

vytvoříme kódem:

<ol type="A" start="2">

<li>Praha,</li>

<li>Brno,</li>

<li>Ostrava.</li>

</ol>

Atribut type je možné použít také uelementu <li>, hodnota atributu má opět přednost před hodnotou uvedenou velementu <ol>. Je tedy možné uněkterých bodů nastavit jiný typ číslování, nebo dokonce uněkterého bodu číslování zrušit apřidat odrážku.2

2.3.3Víceúrovňové seznamy

Číslované seznamy aseznamy sodrážkami můžeme vnořovat do sebe avytvářet tak seznamy do více úrovní. Vnořený seznam je na stránce odsunut více doprava oproti bodům vseznamu první úrovně. Uvnořených seznamů nastavíme jiný tvar odrážek nebo jiný typ číslování. Také je možné do číslovaného seznamu vnořit seznam sodrážkami.

Jako první příklad si uveďme víceúrovňový seznam:

1.Praha:

a.Smíchov

b.Vinohrady

2.Brno:

a.Královo Pole

b.Špilberk

aodpovídající kód:

<ol>

<li>Praha:</li>

<ol type="a">

<li>Smíchov</li>

<li>Vinohrady</li>

</ol>

<li>Brno:</li>

<ol type="a">

<li>Královo Pole</li>

<li>Špilberk</li>

</ol>

</ol>

Seznam sodrážkami ve druhé úrovni bychom vytvořili obdobným kódem, pouze uvnořeného seznamu použijeme element <ul>.

Webové prohlížeče ignorují mezery zapsané před elementem <li>. Uvíceúrovňových seznamů je proto výhodné odsadit jednotlivé úrovně kódu více doprava, aby byl kód seznamu přehlednější.

2.3.4Kopírování seznamu zWordu

Když ve Wordu označíme text seznamu, zvýrazní se pouze texty jednotlivých bodů, nikoliv číslování nebo odrážky. Po zkopírování textu do schránky avložení do webové stránky se ale přenesou iodrážky nebo číslování.

Při úpravě seznamu zkopírovaného zWordu proto musíme staré číslování nebo odrážky vymazat anahradit je odpovídajícími elementy pro tvorbu seznamu.

2.3.5Definiční seznamy

Definiční seznamy jsou tvořeny elementem <dl> (definition list). Uvnitř definičního seznamu mohou být body dvou typů:

■Bod tvořený elementem <dt> není odsazen aje určen pro označení hesla.

■Bod tvořený elementem <dd> je odsazen doprava aje určen pro vlastní obsah hesla.

Definiční seznam, vytvořený kódem

<dl>

<dt>Označení hesla</dt>

<dd>Vlastní obsah hesla</dd>

</dl>

bude mít na webové stránce podobu dvou řádků textu, kde bude druhý řádek odsazen více doprava.

Výsledný definiční seznam není příliš úhledný. Jestliže potřebujeme na stránce vytvořit sérii dvojic název hesla – obsah hesla, je výhodnější použít tabulku. Definiční seznam obsahující pouze elementy <dd> však můžeme využít ktvorbě několika řádků odsazeného textu bez dodatečné mezery za jednotlivými řádky. Pokud na začátek každého bodu vložíme vhodný znak nebo entitu, můžeme vytvořit odrážkový seznam sjiným typem odrážky, než umožňuje element <ul>. Například seznam, který využívá jako odrážky pomlčky, bychom vytvořili kódem:

<dl>

<dd>&ndash; Praha</dd>

<dd>&ndash; Brno</dd>

<dd>&ndash; Ostrava</dd>

</dl>

Tabulka 2.3 Elementy pro tvorbu seznamů

Element

Párový

Význam

Atributy ahodnoty

<ul>

ano

seznam sodrážkami

type – odrážka (disc, circle, square)

<ol>

ano

číslovaný seznam

type – typ číslování (1, a, A, i, I)

start – počátek seznamu

<li>

ano

bod vseznamu

type – podle typu seznamu

<dl>

ano

definiční seznam

<dd>

ano

neodsazený bod

<dt>

ano

odsazený bod

2.4Obrázky, multimédia agrafické efekty

Prakticky všechny webové stránky obsahují nějaké obrázky. Protože soubor HTML je ve své podstatě textový anemůže obsahovat žádnou grafiku, všechny obrázky musí být na webovém serveru uloženy vsamostatných souborech.

Vpravidlech jazyka HTML není určen žádný formát pro zobrazení obrázků. Pro webové stránky se používají především formáty JPG nebo JPEG aPNG pro fotografie aformát GIF pro kreslené, případně animované obrázky. Obrázky jiných typů (například TIF nebo BMP) je vhodné do uvedených formátů konvertovat pomocí některého programu pro úpravu obrázků. Obrázky umístíme zpravidla do samostatné složky.

Soubor sobrázkem můžeme na webové stránce umístit čtyřmi způsoby:

■Do samostatného odstavce (obrázek je na stránce mimo text).

■Do odstavce spolu stextem (utohoto umístění můžeme nastavit způsob, jak je obrázek obtékán textem).

■Do elementu <figure> (tento element je speciálně určen pro umístění obrázků).

■Obrázek je umístěn pod textem afunguje jako tapeta celé webové stránky nebo některé její části.

Vtéto části se seznámíme sprvním, druhým atřetím způsobem. Umístění obrázku pod text je nutno řešit pomocí stylů.

2.4.1Obrázek vsamostatném odstavci

Tento způsob vložení obrázku je nejjednodušší. Obsahem odstavce není text, ale element pro vložení obrázku. Obrázek bude na stránce umístěn mimo text aautomaticky zarovnán doleva. Pro vycentrování obrázku zapíšeme do elementu <p> atribut align shodnotou "center", hodnota "right" umístí obrázek kpravému okraji okna prohlížeče.

Odkaz na soubor sobrázkem provede nepárový element <img>. Základním atributem tohoto elementu je src. Hodnota atributu je textový řetězec obsahující název souboru sobrázkem (včetně přípony aumístění souboru). Protože operační systém Unix, který se používaná na webových serverech, rozlišuje malá avelká písmena, měly by názvy obrázků asložek, ve kterých jsou obrázky umístěny, obsahovat pouze malá písmena.

Cesta kobrázku je prohlížečem interpretována relativně vůči umístění webové stránky, kde se odkaz na obrázek nalézá. Pokud jsou oba soubory vjednom umístění, postačí název souboru sobrázkem, pro vyznačení adresáře oúroveň výš použijeme dvě tečky. Vzadání cesty je třeba zapsat obyčejná, nikoliv zpětná lomítka.

Hodnota atributu src může mít tři nebo čtyři varianty:

■src ="obrazek.jpg" – obrázek awebová stránka jsou ve stejném umístění.

■src ="obrazky/obrazek.jpg" – složka sobrázky tvoří podadresář složky, ve které je umístěna webová stránka.

■src ="../obrazek.jpg" – obrázek je umístěn ve složce, která je nadřazená umístění webové stránky.

■src ="../obrazky/obrazek.jpg" – složka sobrázky asložka, ve které je umístěna webová stránka, jsou umístěny paralelně vedle sebe.

Obrázek 2.3 Adresování souboru sobrázkem

Element <img> má ještě další atributy:

■Atribut alt je alternativní text obrázku. Hodnotou je textový řetězec. Jestliže obrázek není možné zobrazit, vněkterých prohlížečích (například MS Explorer) se na místě obrázku objeví obdélníček skřížkem atext atributu se zobrazí vedle obdélníčku.

■Atribut border je určen pro orámování obrázku. Hodnotou je síla orámování vobrazovkových bodech (pixelech), rámeček má černou barvu.

■Atributy width aheight určují šířku nebo výšku obrázku. Zpravidla stačí zadat pouze jeden ztěchto atributů, protože současné prohlížeče automaticky dopočítají hodnotu druhého atributu tak, aby byl vobrázku zachován správný poměr výšky ašířky.

Hodnoty atributů width aheight můžeme zadat vprocentech nebo pixelech. Hodnota vprocentech se však nevztahuje kpůvodní velikosti obrázku, ale znamená procenta velikosti okna prohlížeče. Hodnota vpixelech umožňuje zmenšit nebo zvětšit obrázek, avšak překreslení obrázků přímo na stránce může výrazně zpomalit jejich zobrazení vprohlížeči. Proto je použití těchto atributů poněkud diskutabilní. Zpravidla je výhodnější upravit rozměry obrázku vhodným programem aobrázek uložit do nového souboru.

2.4.2Umístění obrázku do odstavce stextem

Pro umístění obrázku přímo do textu zapíšeme element <img> do jednoho odstavce spolu stextem, nejčastěji na začátek odstavce. Velementu <img> použijeme další atribut align, který určuje polohu textu vůči obrázku. Vatributu align uvnitř elementu <img> můžeme použít následující hodnoty:

■bottom (výchozí hodnota) – první řádek textu je na spodku obrázku, další řádky textu jsou za obrázkem.

■top – první řádek textu je na horní hraně obrázku, další řádky textu jsou za obrázkem.

■center – první řádek textu je na středu výšky obrázku, další řádky textu jsou za obrázkem.

■left – text obtéká obrázek zprava.

■right – text obtéká obrázek zleva.

Obrázek 2.4 Obtékání obrázku textem

Použití atributu align velementu <img> má smysl pouze tehdy, je-li obrázek umístěn vjednom odstavci společně stextem. Jestliže má být obrázek umístěn mimo text, nesmíme tento atribut velementu <img> použít. Použití tohoto atributu způsobí obtečení obrázku textem, který za obrázkem následuje.

2.4.3Obrázek velementu <figure>

2.4.4Videoklipy

2.4.5Audio (zvukový klip)

2.4.6Vodorovná čára

2.4.7Běžící nápis

ne

ne

2.5Hypertextové odkazy

2.5.1Odkaz na jinou stránku ve stejném webu

2.5.2Odkaz na obrázek

2.5.3Odkaz na jiný soubor

2.5.4Odkaz na videoklip

2.5.5Odkaz na adresu elektronické pošty

2.5.6Odkaz na jiný web

2.5.7Práce se záložkami

2.5.8Hypertextový odkaz zobrázku

2.5.9Obrázková mapa

2.5.10Odkaz vrámečku

2.6Tvorba tabulek

2.6.1Struktura tabulky

2.6.2Orámování aumístění tabulky

2.6.3Výška ašířka

2.6.4Písmo

2.6.5Vodorovné asvislé zarovnání

2.6.6Nadpis tabulky

2.6.7Barvy rámečků apozadí

2.6.8Slučování buněk

2.6.9Rozšířené možnosti orámování vtabulce

2.6.10Formátování celého sloupce

2.7Formuláře pro zadávání dat

2.7.1Element pro tvorbu formuláře

2.7.2Tvorba příkazových tlačítek

2.7.3Popisky

2.7.4Textová políčka

2.7.5Volby

2.7.6Výběr pomocí tlačítka

2.7.7Textové okénko

2.7.8Seznamy

2.7.9Skupina prvků