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á v kó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č v okně 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ě a rozlišení, nastaveném na monitoru). Stejný odstavec textu může na různých počítačích zabrat různý počet řádků.

Z toho ovšem plyne určitá nepříjemnost, protože odsunutí textu doprava pomocí mezer nebo tabulátorů není možné a rozmí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 a odmítne dále pokračovat. Webové prohlížeče však žádnou chybu kódu neohlásí a pokusí 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. V jazyku HTML se rozlišují dva typy elementů:

■Párové elementy zahrnují nějaký obsah, především text. U těchto elementů je nutné vyznačit i konec 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í a v dokumentu 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ů k dispozici řadu atributů, kterým přiřadíme potřebnou hodnotu. Provedeme to pomocí rovnítka, za kterým následuje hodnota zapsaná v uvozovkách. Atribut i s hodnotou zapíšeme dovnitř elementu mezi znaky < >, od kódu elementu jej oddělíme mezerou.

Jeden element může obsahovat i více atributů, které od sebe oddělíme opět mezerou. Jestliže element obsahuje více atributů, můžeme je napsat v libovolné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 v elementu 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 i samotný element. Rozdělení elementu na dva řádky je vhodné zejména v případě, kdy obsahuje více atributů a jeho text je dlouhý.

Při interpretaci kódu zapsaného jazykem HTML webové prohlížeče zpravidla nerozlišují malá a velká písmena. Pro korektní zápis kódu však platí zásada, že počáteční i koncový 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 i s nekorektnostmi v zapsané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ě k stá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 s párovým a nepá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 a vytvář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 v elementech píšeme malými písmeny: kód elementu, názvy atributů a použité hodnoty.

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

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

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

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

Skutečnost, že webové prohlížeče ignorují přechody na nový řádek a prá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 v kó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 a za ní libovolný text včetně české diakritiky. Příklad:

<! Toto je komentář k webové 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 o způ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>. V této sekci jsou zapsány údaje určující způsob zobrazení webové stránky v prohlíž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 a její vztah k webovým vyhledavačům.

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

V sekci 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 v okně 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 v kapitole 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. V souč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é v tomto kódování.

■Kódování utf-8 se běžně používá v databázi My SQL. Toto kódování umožňuje větší výběr znaků než windows-1250 (například čínské nebo arabské znaky). Z tě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.

V elementu <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 v programu PSPad, vloží se do ní automaticky elementy <html>, <head> a <body>. Do hlavičky stránky se vloží ještě prázdný element <title> a dva 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í) a dá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 u webové stránky kódování češtiny, nestačí jen přepsat element <meta> v hlavičce stránky. Soubor HTML ještě musíme konvertovat do jiné kódové stránky. V programu PSPad je úprava kódování velmi jednoduchá: klepneme na příkaz Formát, v zobrazené nabídce označíme potřebné kódování a soubor uložíme.

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

1.Soubor s webovou stránkou otevřeme v Poznámkovém bloku. Při otvírání je nutné použít seznam Soubory typu a nastavit v něm volbu Všechny soubory.

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

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

4.V seznamu 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 s webovou stránkou uložen, musí vždy odpovídat kódování nastavenému v hlavič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 v prohlížeči a zkontrolovat, že je čeština v pořá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 o tvorbě 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ž u stylů a navíc je často obtížné udržet jednotný vzhled webu. Upravovat vzhled textu pomocí elementů HTML má proto smysl pouze tam, kde se jedná o výjimku a kde by se nevyplatilo vytvářet například pro odlišné písmo u tří slov nový styl.

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

2.2.1Odstavce

Většina textu na webové stránce je rozdělena do odstavců. Počátek a konec odstavce vyznačují párové elementy <p> a </p>. Koncový element odstavce </p> způsobí zalomení textu a dodatečnou svislou mezeru mezi odstavci. Tato dodatečná mezera za odstavcem se v různých prohlížečích interpretuje různě, v MS Internet Exploreru je o něco větší než v prohlíž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 k dodatečnému svislému odsazení na stránce.

Prohlížeče provádějí automatické svislé odsazení i u další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 a konec odstavce můžeme napsat na samostatný řádek nebo (u krátkých odstavců) do jednoho řádku společně s textem. 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 v tom, že odstavec končí tam, kde začíná odstavec následující. Platí to i pro řadu dalších elementů. Proto bude následující kód na stránce zobrazen správně, i když jeho zápis není korektní:

<p>

Text prvního odstavce

<p>

Text druhého odstavce

A nakonec 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 s nějakými pravidly, odstavci apod. a z celého textu prostě vytvořil jediný eintopf. Většina nyní užívaných prohlížečů se sice dokáže poprat i s takovýmto kódem, ale korektní způsob zápisu je jediná záruka, že bude webová stránka správně zobrazována i dalšími verzemi prohlížečů, které přijdou v budoucnosti.

Zarovnání textu v odstavci 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ží k označení úseku textu, text uvnitř se upraví podle atributů, které v tomto elementu použijeme – můžeme například zarovnat stejným způsobem několik odstavců najednou. Element <div> se používá především k formá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í k formátování stránky pomocí stylů.

2.2.2Pevná mezera a další entity

Protože webové prohlížeče chápou mezeru jako oddělovač, předložky k, s, v nebo z se mohou ocitnout na konci řádku. Obdobně může dojít k nežádoucímu rozdělení například u peněžních částek s oddělenými tisíci. V textovém editoru Word se tento problém řeší pomocí pevné mezery. Jazyk HTML k tomu používá obdobný prostředek, který se nazývá entita. Entita je určena pro vložení pevné mezery a dalších speciálních znaků do textu. Je složena ze znaku &, za kterým následuje čtyřpísmenný kód a stř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 v ná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 k dostání v&nbsp;restauraci Na Mýtince za cenu 0,95&nbsp;&euro;.

</p>

V entitách se rozlišují malá a velká písmena.

2.2.3Rozklikávací text

Část textu (i ně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 a další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í a dolní index způsobí posunutí textu nahoru nebo dolů a poně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é v následující části. Tam se seznámíme i s další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í a koncové 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 v elementu, tím je vyšší úroveň nadpisu a tomu 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 a dodatečnou mezeru za nadpisem, obdobně jako u elementu <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ý z elementů pro úpravu písma (kromě elementu <strong>, jehož použití u nadpisu nemá smysl). Příklad:

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

Tvorba webových stránek v HTML, CSS a PHP

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

Skupinu nadpisů umístěných na webové stránce bezprostředně za sebou (například nadpis první a druhé ú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 z Wordu

Text určený pro tvorbu webové stránku je často napřed vytvořen ve Wordu. V tomto případě není nutné psát text znovu a do 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ží v podobě dlouhého řádku. Před a za řá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í i pro číslované a odráž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 z textu vymazat.

Tabulka 2.2 Hlavní elementy pro tvorbu textu

Element

Párový

Význam

Atributy a hodnoty

<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 s odrážkami – bez vyznačení pořadí,

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

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

2.3.1Seznamy s odrážkami

Pro tvorbu seznamu s odráž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 u seznamu 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 i v atributu <li> a nastavit tak u jednotlivých bodů různý typ odrážek. Jestliže použijeme atribut type v obou elementech <ul> i <li>, hodnota v elementu <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 u seznamu s odráž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ů v seznamu 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, u seznamu s písmeny pořadí prvního písmena v abecedě. 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é u elementu <li>, hodnota atributu má opět přednost před hodnotou uvedenou v elementu <ol>. Je tedy možné u některých bodů nastavit jiný typ číslování, nebo dokonce u některého bodu číslování zrušit a přidat odrážku.[2]

2.3.3Víceúrovňové seznamy

Číslované seznamy a seznamy s odrážkami můžeme vnořovat do sebe a vytvářet tak seznamy do více úrovní. Vnořený seznam je na stránce odsunut více doprava oproti bodům v seznamu první úrovně. U vnoř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 s odráž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

a odpoví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 s odrážkami ve druhé úrovni bychom vytvořili obdobným kódem, pouze u vnořeného seznamu použijeme element <ul>.

Webové prohlížeče ignorují mezery zapsané před elementem <li>. U ví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 z Wordu

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 a vložení do webové stránky se ale přenesou i odrážky nebo číslování.

Při úpravě seznamu zkopírovaného z Wordu proto musíme staré číslování nebo odrážky vymazat a nahradit 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 a je určen pro označení hesla.

■Bod tvořený elementem <dd> je odsazen doprava a je 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 k tvorbě 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 s jiný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 a hodnoty

<ul>

ano

seznam s odráž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 v seznamu

type – podle typu seznamu

<dl>

ano

definiční seznam

<dd>

ano

neodsazený bod

<dt>

ano

odsazený bod

2.4Obrázky, multimédia a grafické efekty

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

V pravidlech 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 a PNG pro fotografie a formá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 s obrá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 s textem (u tohoto 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 a funguje jako tapeta celé webové stránky nebo některé její části.

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

2.4.1Obrázek v samostatné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 a automaticky zarovnán doleva. Pro vycentrování obrázku zapíšeme do elementu <p> atribut align s hodnotou "center", hodnota "right" umístí obrázek k pravému okraji okna prohlížeče.

Odkaz na soubor s obrá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 s obrázkem (včetně přípony a umístění souboru). Protože operační systém Unix, který se používaná na webových serverech, rozlišuje malá a velká písmena, měly by názvy obrázků a složek, ve kterých jsou obrázky umístěny, obsahovat pouze malá písmena.

Cesta k obrá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 v jednom umístění, postačí název souboru s obrázkem, pro vyznačení adresáře o úroveň výš použijeme dvě tečky. V zadání cesty je třeba zapsat obyčejná, nikoliv zpětná lomítka.

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