OBSAH Obsah.......................................................................................................................................... 4 1. Úvod ....................................................................................................................................... 7 1.1 Princip webových stránek ................................................................................................ 7 1.1.1 WWW stránka ........................................................................................................... 7 1.2 Historie XHTML.............................................................................................................. 9 1.3 Obecně o XHTML ......................................................................................................... 10 1.4 XHTML editory ............................................................................................................. 12 1.4.1 Wysiwyg editory ..................................................................................................... 12 1.4.2 Strukturní editory .................................................................................................... 12 2. XHTML................................................................................................................................ 13 2.1 Struktura XHTML dokumentu....................................................................................... 13 2.1.1 Vysvětlení částí kódu .............................................................................................. 13 2.2 Formátování textu .......................................................................................................... 15 2.2.1 Základní formátování .............................................................................................. 15 2.2.2 Bez formátování ...................................................................................................... 16 2.2.3 Elementy určující konkrétní význam textu ............................................................. 16 2.2.3.1 Kurzíva ............................................................................................................. 16 2.2.3.2 Tučně................................................................................................................ 16 2.2.3.3 Písmo s pevnou šířkou znaků ........................................................................... 17 2.2.3.4 Nijak nezvýrazněný text................................................................................... 17 2.2.4 Citace....................................................................................................................... 17 2.2.5 Elementy pro zápis vzorců ...................................................................................... 17 2.2.6 Změny v dokumentu................................................................................................ 18 2.3 Hypertextové odkazy...................................................................................................... 19 2.3.1 Relativní a absolutní................................................................................................ 19 2.3.2 Cesta ........................................................................................................................ 19 2.3.3 Záložky.................................................................................................................... 19 2.3.4 Popisky .................................................................................................................... 20 2.4 Obrázky .......................................................................................................................... 21 2.4.1 Povinné atributy ...................................................................................................... 21 2.4.2 Obrázek jako odkaz................................................................................................. 21 2.4.3 Popisky .................................................................................................................... 21 2.4.4 Rozměry .................................................................................................................. 22 2.5 Tabulky........................................................................................................................... 23 2.5.1 Jednoduchá tabulka ................................................................................................. 23 2.5.2 složitější tabulky...................................................................................................... 24 2.5.3 slučování buněk....................................................................................................... 25 2.6 Seznamy a výčty............................................................................................................. 26 2.6.1 Rozdíl ...................................................................................................................... 26 2.6.2 Seznamy .................................................................................................................. 26 2.6.3 Výčty ....................................................................................................................... 27 2.6.4 Možnosti kombinace ............................................................................................... 27 2.7 Formuláře ....................................................................................................................... 29 2.7.1 Funkce formulářů .................................................................................................... 29 2.7.2 Formuláře pro zadávání textu.................................................................................. 29 2.7.3 Vysunovací nabídky ve formulářích ....................................................................... 32 2.7.4 Logické členění formulářů ...................................................................................... 33 2.8 Element <meta /> ........................................................................................................... 35 4

2.8.1 Nejdůležitější a nejpoužívanější <meta /> elementy............................................... 35 2.9 Ostatní ............................................................................................................................ 36 2.9.1 Znakové entity......................................................................................................... 36 2.9.2 kontejnery................................................................................................................ 36 2.9.3 komentáře ................................................................................................................ 36 3.CSS........................................................................................................................................ 37 3.1 Úvod do CSS.................................................................................................................. 37 3.1.1 Vývoj....................................................................................................................... 37 3.1.4 Zápis CSS................................................................................................................ 37 3.1.4.1 Přímý zápis....................................................................................................... 37 3.1.4.2 Zápis do hlavičky dokumentu .......................................................................... 37 3.1.4.3 Využití externího souboru................................................................................ 38 3.1.5 Nadřazenost............................................................................................................. 38 3.1.6 Hromadná deklarace................................................................................................ 38 3.1.7 Třídy a identifikátory .............................................................................................. 39 3.1.8 Pseudotřídy.............................................................................................................. 40 3.1.9 Hromadná deklarace................................................................................................ 40 3.2 Vlastnosti písma ............................................................................................................. 41 3.2.1 font-family............................................................................................................... 41 3.2.2 font-style.................................................................................................................. 41 3.2.3 Font-variant ............................................................................................................. 41 3.2.4 Font-weight ............................................................................................................. 42 3.2.5 Font-size .................................................................................................................. 42 3.2.6 Line-height .............................................................................................................. 43 3.2.7 Font.......................................................................................................................... 43 3.3 Barvy a pozadí................................................................................................................ 44 3.3.1 Color........................................................................................................................ 44 3.3.2 Background-color.................................................................................................... 44 3.3.3 Background-image .................................................................................................. 44 3.3.4 Background-repeat .................................................................................................. 45 3.3.5 Background-position ............................................................................................... 45 3.3.6 Background-attachment .......................................................................................... 46 3.3.7 Background ............................................................................................................. 46 3.4 Další úprava textu........................................................................................................... 47 3.4.1 Word-spacing .......................................................................................................... 47 3.4.2 Letter-spacing.......................................................................................................... 47 3.4.3 Text-decoration ....................................................................................................... 47 3.4.4 Vertical-align........................................................................................................... 48 3.3.5 Text-transform......................................................................................................... 48 3.3.6 Text-align ................................................................................................................ 48 3.3.7 Text-ident ................................................................................................................ 49 3.5 Vlastnosti zobrazení ....................................................................................................... 50 3.5.1 Border-color ............................................................................................................ 50 3.5.2 Border-width ........................................................................................................... 50 3.5.3 Border-style............................................................................................................. 51 3.5.4 Margin ..................................................................................................................... 51 3.5.5 Padding.................................................................................................................... 52 3.5.6 Height ...................................................................................................................... 52 3.5.7 Width....................................................................................................................... 52 3.6 Pozicování ...................................................................................................................... 53

5

3.6.1 Float......................................................................................................................... 53 3.6.2 Clear ........................................................................................................................ 53 3.6.3 Position.................................................................................................................... 53 3.6.4 Umístění .................................................................................................................. 53 3.6.5 Visibility.................................................................................................................. 54 3.6.6 Overflow.................................................................................................................. 54 3.7 Jednotky a barvy CSS .................................................................................................... 55 3.7.1 Jednotky .................................................................................................................. 55 3.7.2 Barvy ....................................................................................................................... 55 4. PHP....................................................................................................................................... 57 4.1 Úvod do PHP.................................................................................................................. 57 4.1.1 Historie PHP............................................................................................................ 57 4.1.2 Princip PHP ............................................................................................................. 57 4.1.3 Co je potřeba?.......................................................................................................... 57 4.2 Základy syntaxe.............................................................................................................. 59 4.2.1 Zápis do dokumentu ................................................................................................ 59 4.2.2 Komentáře ............................................................................................................... 59 4.2.3 Proměnné................................................................................................................. 59 4.3 Příkaz echo ..................................................................................................................... 61 4.3.1 Znakové entity......................................................................................................... 61 4.3.2 Spojování řetězců .................................................................................................... 62 4.4 Pole................................................................................................................................. 63 4.5 Operátory........................................................................................................................ 64 4.5.1 Logické operátory ................................................................................................... 64 4.5.2 Porovnávací operátory............................................................................................. 64 4.5.3 Inkrementace ........................................................................................................... 64 4.6 Podmínky ....................................................................................................................... 65 4.6.1 If .............................................................................................................................. 65 4.6.2 Switch...................................................................................................................... 66 4.7 Cykly .............................................................................................................................. 67 4.7.1 Cyklus for................................................................................................................ 67 4.7.2 While ....................................................................................................................... 67 4.8 Funkce a procedury ........................................................................................................ 68 4.8.1 Procedury ................................................................................................................ 68 4.8.2 Funkce ..................................................................................................................... 68 4.8.3 Funkce s parametrem .............................................................................................. 69 4.9 Zpracování formulářů..................................................................................................... 70 5. Závěr..................................................................................................................................... 72 6. Použitá literatura a jiné zdroje.............................................................................................. 73 Weby ................................................................................................................................ 73 Knihy................................................................................................................................ 73 7. Ostatní .................................................................................................................................. 74 7.1 Slovníček pojmů............................................................................................................. 74 7.2 Moje Webovky............................................................................................................... 75

6

1. ÚVOD 1.1 PRINCIP WEBOVÝCH STRÁNEK WWW (z angl. world wide web) je služba, která umožňuje především způsob multimediální prezentace. Celý princip spočívá v tom, že někde na vzdáleném serveru je umístěná webová stránka, kterou si uživatel stáhne do svého počítače a webový prohlížeč mu jí zobrazí.

1.1.1 WWW STRÁNKA Webová stránka, kterou si uživatel stáhne ze serveru ovšem nevypadá tak, jak se zobrazí v prohlížeči. Je to totiž jen pouhý text, neboli zdrojový kód stránky a přiložené soubory (obrázky, hudba...) a teprve prohlížeč ji interpretuje v podobě, kterou uživatel vidí. Například kód této stránky:

vypadá následovně: <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<meta http-equiv="content-language" content="cs" />

Zde je nějaký text

7

Poté, co takovýto kód dorazí do prohlížeče, si ho prohlížeč přeloží a pak teprve zobrazí kompletní webovou stránku. Pokud je stránka uložena na pevném disku, funguje pochopitelně i offline. Když chcete zjistit kód nějaké konkrétní stránky, máte dvě možnosti: • •

buď můžete stránku otevřít v nějakém textovém editoru (např. ve Windows standardně Poznámkový blok) nebo (pro Internet Explorer) můžete otevřít stránku ve webovém prohlížeči a najít si nahoře na liště zobrazit > zdrojový kód - otevře se textový dokument s kódem stránky. Ve Firefoxu je to ještě jednodušší - stačí použít klávesovou zkratku Ctrl+U

Pokud chci nějakou webovou stránku vytvořit, stačí do textového editoru (Poznámkový blok, Writer...) napsat kód stránky a uložit soubor s příponou .html nebo .htm (používají se obě varianty). Webový prohlížeč pak bude tento text automaticky chápat jako webovou stránku. Další možností je využití nějakého XHTML editoru - programu určeného přímo pro tvorbu stránek. Nově vytvořená stránka se samozřejmě může jmenovat jakkoli. Pokud ale stránky umístíte na server, tak se uživateli po zadání adresy zobrazí automaticky stránka s názvem index.html (některé servery hlásí chybu, pokud neexistuje). To platí v případě, že zadaná adresa nebude obsahovat i konkrétní stránku - jako například: www.něco.cz/odkazy.htm.

8

1.2 HISTORIE XHTML Značkovací jazyk HTML (HyperText Markup Language) vznikl původně pouze pro potřeby vědců, jako jednoduchý vývěskový systém. Postupem času se ale ukázalo, že jeho možnosti jsou mnohem širší. První veřejně vydanou verzí jazyka HTML bylo HTML 2.0 vydané IETF (internetovou standardizační organizací v roce 1995. Ovšem protože HTML vznikalo původně pro vědce, je tato specifikace dosti strohá, co se týče grafických prvků a designu. Postupem času ale vznikla potřeba publikované texty nějak graficky zvýraznit. Proto byla uvolněna verze HTML 3.2. Tu již vydalo W3C (světové webové konsorcium). Předposlední verzí je HTML 4.0. Zde se počítá s kompletním oddělením obsahu od formy, takže veškerý vzhled by se měl definovat pomocí CSS. Aby W3C usnadnilo přechod na normu HTML 4.0, rozdělilo ji na: • • •

HTML 4.0 Strict - striktně dodržuje všechna pravidla HTML 4.0. HTML 4.0 Transitional - přechodová norma. Využívá všech novinek HTML 4.0 ale navíc ještě podporuje zavrhnuté prvky z HTML 3.2. HTML 4.0 Frameset - je totožná s HTML 4.0 Transitional, jen navíc obsahuje ještě definici rámů.

Specifikace HTML 4.0 byla později revidována, byly opraveny některé chyby a stala se z ní specifikace HTML 4.01. Další specifikace již nenese název HTML, ale XHTML (eXtensible HyperText Markup Language - rozšiřitelný hypertextový značkovací jazyk). První verze XHTML 1.0 je totožná s HTML 4.01, jen je rozšířena o obecná pravidla jazyka XHTML. Stejně jako HTML 4.01 se dělí na: • • •

XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset

Myšlenkou XHTML je tvorba dokumentů pro různá výstupní zařízení. Tato rozličná zařízení ovšem nemohou podporovat všechny vlastnosti jazyka. Proto byly definovány různé podmnožiny. Ty bylo třeba definovat a standardizovat, proto vznikla specifikace Modularization of XHTML. Tato specifikace rozděluje všechny prvky XHTML 1.0 do modulů, ze kterých se následně skládají značkovací jazyky. Z těchto jazyků zatím W3C uznalo XHTML 1.1 a XHTML Basic (k použití hlavně na mobilních telefonech, PDA a podobně). V této práci se budu zabývat konkrétně specifikací XHTML 1.0 Strict.

9

1.3 OBECNĚ O XHTML Teď by asi bylo dobré, vyjasnit některé pojmy co se týče kódu. Vezměme si nějaký příklad:

První pokus

Celý řádek uvedený v příkladu se nazývá element. Ten se skládá z otevírací části (otevíracího tagu), obsahu elementu a uzavírací části (uzavíracího tagu).

je otevírací tag. Tím začíná nějaká konkrétní oblast (zde konkrétně odstavec). Tagy slouží

pouze jako informace pro prohlížeč - na stránce se tedy nezobrazí. "první pokus" je obsah elementu. Ten se na stránce zobrazí. Jeho formátování určují právě tagy, ve kterých je uzavřen.

neboli uzavírací tag ukončuje element. Je vlastně totožný s tagem otevíracím, jen

obsahuje navíc zpětné lomítko. Pokud do sebe vnořujeme více elementů, není je možné křížit mezi sebou. Přitom nezáleží na tom, který element bude vnější a který vnitřní - viz. Příklad:

- toto je špatně - toto je dobře

Zkrátka pokud se nějaký element nachází uvnitř jiného elementu, musí se tam nacházet celý, tedy jeho otevírací část, obsah i uzavírací část. Zatímco v HTML na tom nezáleželo, v XHTML je třeba psát vše kromě obsahu elementu malými písmeny. V XHTML existují také elementy, které nemají povolen žádný obsah. Například element pro vytvoření oddělovací čáry, přechod na novou řádku a podobně. Tyto elementy mohou obsahovat jen otevírací a uzavírací část. Tedy:



Tento zápis je sice správný, ale zbytečně dlouhý. Proto se užívá zkrácená verze:


Ta je podle specifikace také správně, ale některé starší prohlížeče to neberou. Problém se vyřeší přidáním mezery před zpětné lomítko:


Tyto entity, nazývané nepárové tagy, v HTML neměly uzavírací část. Ta je ale XHTML povinná, proto se používá takovýto zápis.

10

Atributy (též parametry) určují další vlastnosti elementu. Nachází se v otevírací části elementu, oddělené od jména elementu a od dalších atributů mezerou. Atribut obsahuje jméno atributu, znak "=" a hodnotu atributu v uvozovkách nebo apostrofech. Příklad:

Obsah elementu

Obsah elementu

Obsah elementu

Jeden element může mít více atributů. U nich nezáleží na pořadí.

11

1.4 XHTML EDITORY XHTML editory jsou programy, pomocí nichž můžete vytvářet webové stránky. Obecně se dělí na dva druhy: • •

wysiwyg editory strukturní editory

1.4.1 WYSIWYG EDITORY Název je zkratkou anglického "What you see is what you get", tedy česky "co vidíš, to dostaneš". Jsou určeny především pro uživatele, kteří se tvorbou webových prezentací nechtějí zabývat moc do hloubky. Autor tam pouze vloží text, který si přeje na stránky umístit a pomocí uživatelského rozhraní si nastaví jednoduchý vzhled stránky. Editor si veškerý XHTML kód vygeneruje sám a autor se nemusí o nic starat. Ovšem kvalita takto udělaných stránek nebývá nijak valná (to se týká optimalizace, validity a podobných aspektů - nikoliv obsahu). Pokud se tedy chcete zabývat tvorbou stránek trochu víc, je používání pouze nějakého wysiwyg editoru nemyslitelné. Nemluvě o tom, že implementace nástrojů jako CSS, JavaScript nebo PHP bývá v těchto editorech většinou dost náročná. Ovšem na druhou stranu se tyto editory dají dobře využít například při obarvování částí textu.

1.4.2 STRUKTURNÍ EDITORY Tak tady už je to trochu o něčem jiném. Především pokud chcete dělat stránky ve strukturním editoru, potřebujete umět alespoň XHTML. Ovšem pokud to zvládáte, lze pak využít úplně všechny možnosti, jaké jazyk XHTML nabízí a nemusíte se omezovat jen na to, co vám wysiwyg editor dovolí. Navíc spousta strukturních editorů si umí "domýšlet" tagy které píšete a samy vám je doplní. Takže stačí napsat jen začátek a on si doplní celý tag. V případě že je párový, dopíše někdy i jeho zakončující protějšek. Další šikovnou vlastností je obarvování kódu pro lepší přehlednost (to umí třeba i Firefox, když si necháte zobrazit Zdrojový kód).

12

2. XHTML 2.1 STRUKTURA XHTML DOKUMENTU Nejjednodušší validní (a bez problémů fungující) XHTML dokument může vypadat třeba takto: <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="cs" />

Plnohodnotný XHTML dokument

Jen pro úplnost, jak se stránka zobrazí v prohlížeči.

2.1.1 VYSVĚTLENÍ ČÁSTÍ KÓDU

XML deklarace. Řádek obsahuje informaci o verzi XHTML a kódování dokumentu. Pokud je dokument v kódování UTF-8 nebo UTF-16, může se tento řádek vynechat, ale vždy je lepší ho tam mít.

1.0

Strict//EN"

Doctype, neboli Definice Typu Dokumentu (Document Type Definition - DTD). Udává verzi použitého XHTML. O jednotlivých verzích jsem se zmiňoval v kapitole o historii XHTML. Zápisy doctype pro jednotlivé verze jsou: •



-pro striktní XHTML

•



-pro přechodové XHTML

13

•



-pro XHTML s podporou rámů DTD udává verzi použitého XHTML, aby prohlížeč věděl, jak má k dokumentu přistupovat.

Párový tag, musí povonně obsahovat entity a . V obou atributech se udává jazyk používaný v dokumentu. Správně je podle specifikace xml:lang . Atribut lang je zde pouze kvůli zpětné kompatibilitě se staršími prohlížeči.

Je také párový a musí povinně obsahovat element

Tento element obsahuje titulek stránky a je povinný. Například:

Zobrazí titulek stránky:



Značí samotné tělo dokumentu (tedy veškerý obsah, který se uživateli zobrazí – texty, obrázky…).

Jen pro úplnost - element obsahující odstavec.

14

2.2 FORMÁTOVÁNÍ TEXTU 2.2.1 ZÁKLADNÍ FORMÁTOVÁNÍ

znamená nadpis první úrovně. Obsah této entity je automaticky tučně a písmem o velikosti 24 pixelů. Nadpisy (angl. heading) usnadňují formátování dokumentu a orientaci v něm. Je jich celkem šest stupňů (tedy

až

).

(nadpis první úrovně) je nejvýše a měl by se v textu vyskytovat pouze jednou. Příklad toho, jak by mohla vypadat struktura nadpisů v dokumentu:

automobily

Škoda

Superb

Roomster

Peguot

206

207

(tato ukázka slouží pouze k bližšímu pochopení principu nadpisů, v praxi by se na podobný výčet použily seznamy) Samozřejmě, že to co umí nadpisy (po vizuální stránce) lze udělat i bez nich, ale je to zbytečně složitější. Nelze pak využít snadného formátování pomocí CSS a je to podle specifikace nesprávné. Výchozí formátování nadpisů: tag

stupeň písma 6 5 4 3 2 1

výchozí velikost 24px 18 -19px 16px 13px 10px 9px

využití Hlavní nadpis stránky Podnadpisy, názvy kapitol Mezinadpisy Důležitější odstavce Žádné rozumné použití Nejde ani pořádně přečíst

Uvedené hodnoty jsou pouze výchozí a dají se samozřejmě upravit pomocí CSS.

je odstavec. Ten ovšem nevypadá jako klasický český odstavec, protože chybí odsazení prvního řádku a po ukončení odstavce následuje vertikální mezera. Text je tak vlastně rozdělen do bloků, což usnadňuje orientaci v dokumentu. Navíc dlouhý souvislý blok textu zpravidla spoustu potenciálních čtenářů odradí.


Tato entita bez povoleného obsahu značí zalomení řádku neboli enter (
z angl. brake). Když totiž zalomíte řádek v samotném kódu, tak se to na stránce nijak neprojeví (ale na druhou stranu to není špatné pro vaší orientaci v kódu). Na rozdíl od odstavce

, entita 15


jen zalomí řádek a pokračuje hned na dalším. Neudělá vertikální mezeru jako

odstavec.

Možnosti: Jedna Dvě Tři

Se na stránce vůbec neprojeví. Prohlížeč ignoruje všechny entery, a taky více mezer za sebou chápe pořád jen jako jednu. Pro enter se tedy použije tag
a pro mezeru (pokud zrovna potřebujete víc mezer za sebou) existuje speciální znak (znaková entita)   (pozor na ten středník, ten tam musí být).

2.2.2 BEZ FORMÁTOVÁNÍ <pre>

Element, který zachovává původní formátování zdroje. Neplatí zde tedy pravidlo o ignorování konců řádků a nahrazování více mezer jedinou. Tato vlastnost lze nastavit i v kaskádových stylech.

2.2.3 ELEMENTY URČUJÍCÍ KONKRÉTNÍ VÝZNAM TEXTU Následuje souhrn elementů, které definují nějakou specifickou část textu. Rozdělil jsem je do skupin, podle toho jak se většinou zobrazují (pokud to není upraveno pomocí CSS). 2.2.3.1 Kurzíva <em>

Vyznačuje zvýraznění (emphasis).

Obsahem tohoto elementu je pojem nebo definice (definition).

Označuje proměnnou.

Tento element označuje citovaný zdroj, odkaz na další zdroje nebo citaci. Poměrně se vžil zvyk uzavírat do něj jména osob, organizací apod. 2.2.3.2 Tučně <strong>

16

Má být ještě důraznější zvýraznění než <em>. Obsah je tučně. 2.2.3.3 Písmo s pevnou šířkou znaků (pokud nevíte co si pod tím představit, podívejte se na ukázky zdrojového kódu kdekoliv na těchto stránkách)

Používá se k označení počítačového nebo programového kódu. <samp>

Vyznačuje vzorový výstup programů, skriptů apod.

Indikuje text, který má být zadán uživatelem. 2.2.3.4 Nijak nezvýrazněný text

Označuje zkratku (abbreviation), jejíž plné znění by se alespoň při prvním výskytu v dokumentu mělo nacházet v jeho atributu title. Například: SPŠE

Tento element se používá k uzavírání zkratkových slov. Ty se narozdíl od zkratek vyslovují většinou jako jedno slovo, a ne po jednotlivých písmenech. Pravidla pro použití atributu ... <style type="text/css"> h1 { color: blue; }

Styl se zapíše přímo do hlavičky dokumentu a bude podle něho vypadat celá stránka. V uvedeném případě budou veškeré nadpisy první úrovně modré.

37

3.1.4.3 Využití externího souboru Ovšem v případě, že se rozhodnete změnit celkový vzhled stránek, museli by jste v každé stránce změnit styl. Pokud máte jen nějaké osobní stránky tak to ještě není takový problém, ale v případě rozsáhlejší webové prezentace by to byla práce na dlouhé zimní večery. Tomu se dá předejít využitím externího CSS souboru. Princip spočívá v tom, že provedete zápis stylu stejně jako při zápisu do hlavičky dokumentu, ale celý soubor uložíte pod názvem *.css a v každé stránce se na něj odkážete. Změna souboru se pak automaticky projeví u všech stránek využívajících tento styl. Externí soubor např. styl.css pak může vypadat takto: h1 { color: blue; }

Pak už stačí jen uvést do hlavičky dokumentu řádek, který na externí stylopis odkazuje:

Při tomto zápisu budou modré nadpisy první úrovně ve všech dokumentech, které využívají soubor styl.css.

3.1.5 NADŘAZENOST U CSS platí také určitá hierarchie. Když mám například v hlavičce dokumentu nadefinováno že všechny odstavce budou červené: <style type="text/css"> p { color: red; }

a přesto chci mít jeden odstavec modrý, udělám to pomocí přímého zápisu stylu:

Modrý odstavec

Platí zde pravidlo, že přímý zápis má v případě konfliktu nastavených hodnot přednost před zápisem do hlavičky stránky a ten je zas nad externím stylopisem. Přímý zápis má tedy největší prioritu.

3.1.6 HROMADNÁ DEKLARACE CSS může také využívat hromadnou deklaraci: h1, h2, h3 { color: green; }

To znamená, že nadpisy první, druhé a třetí úrovně budou zelené.

38

Pochopitelně lze také k jednomu elementu přiřadit více hodnot h1 { color: green; font-weight: bold; }

Nadpisy první úrovně budou zelené a tučně.

3.1.7 TŘÍDY A IDENTIFIKÁTORY Další možností CSS je nadefinovat si vlastní třídy: .zelena { color: green; }

".zelena" je třída, kterou jsem si sám nadefinoval v hlavičce stránky nebo v externím stylopisu. Název třídy musí vždy začínat tečkou.

Tento odstavec je zelený

Nepovinný atribut class (angl. třída) určuje podle jaké třídy bude element formátován. Šikovné je, že lze třídy kombinovat:

Tento odstavec je zelený a vpravo

V případě, že by obě třídy obsahovaly stejný element ale s různými hodnotami, bude platit ta která je dříve nadeklarovaná. Něco podobného jako třídy jsou identifikátory. Fungují prakticky stejně jako třídy, jen s tím rozdílem, že v jednom dokumentu se může každý identifikátor objevit jen jednou (využívají se zejména ve skriptech). Deklarace identifikátorů se odlišuje tím, že před název se místo tečky píše křížek (#): #hlavni { color: green; }

K elementu se třída přiřadí pomocí atributu id:

Nadpis

39

3.1.8 PSEUDOTŘÍDY Ještě zde existují pseudotřídy (jen u elementu ). Pokud ve stylopisu zapíši vlastnost pro element , bude ho to ovlivňovat kdykoliv beze změny. Pseudotřídy umožňují rozlišit různé "stavy" odkazu a nastavit mu v různých situacích různé vlastnosti. Jednotlivé pseudotřídy elementu jsou: Pseudotřída a:active a:hover a:link a:visited

Vysvětlení právě vybraný odkaz odkaz na který nejedete myší dosud nenavštívený odkaz navštívený odkaz

a:hover { color: red }

Při najetí myší bude odkaz červený.

3.1.9 HROMADNÁ DEKLARACE Další výhodou CSS je dědičnost. To znamená, že pokud do kontejneru

, který má nastavenou barvu textu na červenou, vložím odstavec

, bude i jeho písmo červené. Odstavec tuto vlastnost zdědí od svého rodičovského prvku.

40

3.2 VLASTNOSTI PÍSMA 3.2.1 FONT-FAMILY Určuje druh písma. Hodnota je písmo, kterým chceme aby se text zobrazil. To se zapisuje jménem (Arial, Times New Roman). Problém nastane pokud uživatel námi definované písmo nemá nainstalované u sebe v počítači. Proto je dobré uvést písem více – pokud počítač písmo zná, použije ho, pokud ne, zkusí použít další v pořadí. Jako výchozí je nastaveno Times New Roman. body { font-family: "Times New Roman", Garamond, serif ; }

V tomto případě vypíše počítač text písmem Times New Roman , jestliže ho nemá nainstalované tak písmem Garamond a pokud nemá ani to, použije jakékoli jiné patkové (serif) písmo. Do uvozovek se dávají jen hodnoty, které obsahují mezeru. Přehled kategorií písem: druh písma sans-serif serif monospace fantasy cursive

popis bezpatkové písmo patkové písmo psací stroj ozdobné písmo ručně psané písmo

příklad písma Arial, Helvetica, Verdana... Times New Roman, Garamond... Courier, Monaco... Stencil, Western... Mistral, Zapf Chancery...

3.2.2 FONT-STYLE p { font-style: italic; }

Určuje styl písma hodnota normal italic oblique

popis normální písmo kurzíva (totéž jako <em>) uměle skloněné písmo (taky kurzíva)

ukázka ukázka ukázka ukázka

3.2.3 FONT-VARIANT p { font-variant: small-caps; }

Napíše text kapitálkami. Má pouze 2 hodnoty: normal – normální písmo a small-caps – kapitálky: UKÁZKA KAPITÁLEK

41

3.2.4 FONT-WEIGHT p { font-weight: bold; }

Definuje tučnost písma. Možností je spousta ale v praxi stejně stačí jen hodnoty normal a bold. Přehled hodnoty normal bold 100 400 700 900 násobky 100 od 100 do 900 bolder lighter

tučnost písma písmo nebude tučné písmo bude tučné co nejslabší, nejméně tučné písmo normální písmo písmo bude tučné jako je bold písmo bude nejtučnější, co to jde různé stupně tučnosti o něco tučnější, než by bylo, kdyby se to nezadalo totéž co bolder , ale naopak

3.2.5 FONT-SIZE p { font-size: xx-small; }

Nastaví velikost písma. Zde jsou tři typy hodnot. Asi nejjednodušší jsou hodnoty smaller a larger. Ty značí, že dané písmo bude o stupeň větší (larger) nebo menší (smaller) než písmo ostatní (běžně 16 pixelů). Další možností je použít klíčové slovo: klíčové slovo xx-small x-small small medium large x-large xx-large bez zadání

odpovídá stupni písma 1 2 3 4 5 6 7 4

velikost v pixelech 9 px 10 px 13 px 16 px 18 px 24 px 30 px 16 px

Poslední variantou je zadat velikost písma přesně v nějakých jednotkách.

42

3.2.6 LINE-HEIGHT p { line-height: 200%; }

Nastaví řádkování – vzdálenost mezi jednotlivými řádky textu (odborně proklad): hodnoty normal délka procento číslo

výška řádku výška řádku bude normální - tak vysoká, jak je nejvyšší prvek na řádku výška řádku nastavená napevno, nejčastěji v pixelech procento normální výšky, např. line-height: 150% násobek normální výšky, např. line-height: 1.5

3.2.7 FONT Tato vlastnost je shrnutím všech předchozích. Obsahuje tedy font-style, font-variant, font-weight, font-size, line-height a font family. Jednotlivé údaje se oddělují mezerou (jen před line-height je nutné napsat zpětné lomítko "/")a musí se zadávat přesně v tomto pořadí. Pokud nějakou hodnotu změnit nechci, může se vynechat. Pouze lineheight nefunguje pokud není nastaveno font-size. Příklad zápisu: p { font: italic small-caps bold 12pt/150% "Arial ce", Heveltica, sans-serif ; }

V tomto případě bude text psán kurzívou, kapitálkami, tučně, bude mít velikost 12 bodů, řádkování 150% a prohlížeč použije písmo Arial, popřípadě Heveltica a pokud ani jedno z nich nemá uživatel nainstalováno, tak nějaké jiné bezpatkové.

43

3.3 BARVY A POZADÍ 3.3.1 COLOR p { color: #669933; }

Pomocí této CSS vlastnosti lze obarvit téměř cokoliv. Možnosti zápisu barev mají samostatnou kapitolu, takže to pouze shrnu: způsob zápisu název barvy #rrggbb #rgb rgb(r,g,b) rgb(r%,g%,b%)

příklad (obarvení načerveno) color: red; color: ff0000; color: f00; color: rgb(255,0,); color: rgb(100%,0%,0%);

3.3.2 BACKGROUND-COLOR p { background-color: green; }

Nastaví barvu pozadí libovolného prvku. Je možné použít buď hodnotu transparent pro průhledné pozadí nebo jakýkoliv z výše uvedených zápisů barvy.

3.3.3 BACKGROUND-IMAGE Umožňuje umístit na pozadí prvku obrázek, který se bude neustále opakovat. Je vhodné zároveň s ním uvádět i barvu pozadí, pro případ, že by se obrázek nenačetl. Možné hodnoty: hodnota popis none výchozí nastavení – pozadí bez obrázku url("cesta/obrazek.gif") pozadí s obrázkem "obrazek.gif" Příklad zápisu: body { background-color: black; background-image: url(./obrazky/logo.png); }

44

3.3.4 BACKGROUND-REPEAT p { background-repeat: repeat-x; }

Nastaví možnosti opakování obrázku na pozadí: hodnoty repeat no-repeat repeat-x repeat-y

způsob opakování pozadí pozadí se opakuje, až vyplní celý prostor prvku (výchozí hodnota) pozadí se neopakuje, vykreslí se pouze jednou pozadí se opakuje v ose x, tj. horizontálně; na výšku se vykreslí jednou pozadí se opakuje v ose y, tj. vertikálně; na šířku se vykreslí jen jednou

3.3.5 BACKGROUND-POSITION p { background-position: 50px 50px; }

Umístí obrázkové pozadí kamkoliv v daném prvku. Je dobré zároveň zakázat opakování pozadí, protože jinak docílíte pouze posunutí neustále se opakujícího obrázku. Možnosti zápisu: •

"procento" nebo "procento procento" Pokud se uvede pouze jedna hodnota, bude použita pro horizontální směr. Ve vertikálním se automaticky nastaví 50%. V případě uvedení obou hodnot určuje první horizontální směr a druhá směr vertikální.

•

"vzdálenost" nebo "vzdálenost vzdálenost" Funguje to stejně jako procenta, jen se zadává vzdálenost v pixelech. Pokud je zadána pouze jedna hodnota, vertikální směr se automaticky nastaví na 50%. Vzdálenosti v pixelech a procentech jdou kombinovat.

•

slovo top center bottom left center right

poslední možností je použití klíčových slov: překlad nahoru na střed dolů doleva na střed doprava

druh zarovnání vertikální vertikální vertikální horizontální horizontální horizontální

Opět lze vertikální a horizontální zarovnání kombinovat (top left, center bottom... ). Nezáleží na tom, zda uvedete jako první zarovnání vertikální nebo horizontální.

45

3.3.6 BACKGROUND-ATTACHMENT p { background-attachment: fixed; }

Umožní ukotvit pozadí. To znamená, že při scrollování se pozadí neposouvá, ale na rozdíl od obsahu prvku zůstane na místě. Tato vlastnost může nabývat pouze dvou hodnot: scroll – výchozí hodnota, pozadí se posouvá fixed – pozadí se napevno ukotví a neposouvá se

3.3.7 BACKGROUND Umožňuje zkrácený zápis všech vlastností týkajících se pozadí, a to v tomto pořadí: background-color, background-image, background-repeat, background-position a background-attachment. Stejně jako u vlastnosti font se jednotlivé hodnoty oddělují mezerou a libovolnou hodnotu je možno vynechat. Příklad: p { background: red url("obrazky/hory.gif") no-repeat top center fixed; }

V příkladu bude pozadí červené a přes něj obrázek hory.gif, který se nebude opakovat a bude napevno uchycen nahoře, uprostřed odstavce.

46

3.4 DALŠÍ ÚPRAVA TEXTU 3.4.1 WORD-SPACING p { word-spacing: 10px; }

Tato vlastnost nastaví velikost mezer mezi slovy. Zadat se může buďto normal (výchozí hodnota) nebo vzdálenost v jakýchkoliv jednotkách podporovaných CSS. Tato vzdálenost může být i záporná.

3.4.2 LETTER-SPACING p { letter-spacing: 10px; }

Jedná se vlastně o to samé jako u předchozí vlastnosti word-spacing. Jen místo mezer mezi slovy nastavuje mezery mezi písmeny. Možné hodnoty jsou totožné jako u word-spacing tedy normal a nebo vzdálenost .

3.4.3 TEXT-DECORATION p { text-decoration: underline; }

Jak se dá podle názvu snadno odvodit, nastavuje tato vlastnost dekoraci textu. Možné hodnoty jsou tyto: hodnoty none underline overline line-through blink

přikrášlení textu žádné podtržení nadtržení přeškrtnutí blikání

ukázka formátovaný text formátovaný text formátovaný text nemá smysl v tištěném dokumentu

Hodnota none je zde vhodná pro odstranění podtržení u odkazů.

47

3.4.4 VERTICAL-ALIGN p { vertical-align: sub; }

Určuje vertikální (svislé) zarovnání: hodnoty baseline sub super top text-top middle bottom text-bottom procento

popis prvek leží na účaří řádku (výchozí nastavení) dolní index (nezmenšený) horní index (nezmenšený) co nejvýše – podle nejvyššího elementu na řádce horní okraj prvku lícuje s horním okrajem řádku střed prvku na střed řádku co nejníže podle nejnižšího elementu na řádce spodek prvku lícuje se spodkem řádku procento výšky prvku lícuje s procentem výšky řádku

Vypadá to dost složitě, ale hodnoty sub, super a případně ještě procenta v praxi bohatě postačí. Ukázkový text text text text sub text text super text text text

3.3.5 TEXT-TRANSFORM p { text-transform: capitalize; }

Jedná se o převod textu na velká nebo malá písmena. hodnoty none capitalize uppercase lowercase

převedení velikosti písmen nic se nepřevádí (výchozí hodnota) první písmena všech slov budou velká všechna písmena se převedou na velká všechna písmena se převedou na malá

3.3.6 TEXT-ALIGN Vlastnost určená k zarovnání textu. p { text-align: center; }

hodnoty left center right justify

zarovnání bloku textu zarovnání doleva (výchozí hodnota) zarovnání na střed zarovnání napravo zarovnání do bloku

48

100%

text text text.

justify (zarovnání do bloku) je vhodné používat jen v širších sloupcích textu, protože

prohlížeče nepodporují dělení slov a proto pak mezi nimi vznikají nehezké velké mezery.

3.3.7 TEXT-IDENT p { text-ident: 1em; }

Definuje odsazení prvního řádku textu o určitou vzdálenost. Dají se zde použít dva typy hodnot: velikost (v jednotkách podporovaných CSS pro absolutní odsazení prvního řádku) nebo procenta (pro relativní odsazení prvního řádku). Pomocí této vlastnosti a vlastnosti margin se dá vytvořit "český" odstavec.

49

3.5 VLASTNOSTI ZOBRAZENÍ 3.5.1 BORDER-COLOR p { border-bottom-color: #CC0033; }

Nastaví barvu rámečku. Je zde možno použít tři hodnoty: hodnoty barva transparent inherit

barva rámečku nastavená barva průhledný rámeček zděděná barva rámečku

border-color nastaví barvu celého rámečku. Pokud je potřeba obarvit pouze nějakou jeho část, použijí se další varianty této vlastnosti:

varianta border-left-color border-right-color border-top-color border-bottom-color

popis obarvení levého okraje rámečku obarvení pravého okraje rámečku obarvení horního okraje rámečku obarvení dolního okraje rámečku

3.5.2 BORDER-WIDTH p { border-top-width: 3px; }

Určuje šířku rámečku: hodnoty pixely nebo jiný rozměr kromě procent 0px thin medium thick

šířka rámečku šířka rámečku v pixelech (nebo jiných jednotkách) rámeček tam nebude slabý rámeček středně silný rámeček (výchozí nastavení) tlustý rámeček

Tato vlastnost ovlivní celý rámeček. Pokud je potřeba změnit jen jeho část, použijí se opět další varianty vlastnosti: varianta border-left-width border-right- width border-top- width border-bottom- width

popis ohraničení levého okraje rámečku ohraničení pravého okraje rámečku ohraničení horního okraje rámečku ohraničení dolního okraje rámečku

50

3.5.3 BORDER-STYLE .popis { border-style: dotted; }

Vlastnost definuje styl rámečku: hodnoty druh rámečku příklad solid plný border-style: solid dotted tečkovaný border-style: dotted dashed

čárkovaný

border-style: dashed

double

dvojitý

border-style: double

groove

příkop

border-style: groove

ridge

val

border-style: ridge

inset

dolík

border-style: inset

outset

návrší

none

žádný

border-style: outset border-style: none

I zde pro formátování části rámečku existují další varianty této vlastnosti: varianta border-left-style border-right-style border-top-style border-bottom-style

popis styl ohraničení levého okraje rámečku styl ohraničení pravého okraje rámečku styl ohraničení horního okraje rámečku styl ohraničení dolního okraje rámečku

3.5.4 MARGIN .popis { margin-left: 10px; }

Tato vlastnost definuje vnější okraj prvku. hodnoty délka procento auto

vnější okraj vzdálenost mezi případným rámečkem a okolním dokumentem tatáž vzdálenost vypočítaná z rozměrů omezujícího nadřazeného prvku automatické nastavení okrajů tak, aby protilehlé byly stejné (nefunguje v IE v quirk módu)

51

Pokud je potřeba nastavit margin jen u části prvku, použijí se opět modifikace: varianta margin-left margin-right margin-top margin-bottom

popis velikost levého okraje rámečku velikost pravého okraje rámečku velikost horního okraje rámečku velikost dolního okraje rámečku

3.5.5 PADDING .popis { padding: 1em; }

Je to prakticky totéž jako margin, jen namísto vnějšího určuje okraj vnitřní. Jeho hodnota je tedy velikost mezery mezi rámečkem (border) a obsahem prvku. Možnosti hodnot a zápisu jsou totožné jako u vlastnosti margin.

3.5.6 HEIGHT .popis { height: 400px; }

Určuje výšku prvku. hodnoty délka procento auto

výška prvku zadaná výška prvku procento z výšky nadřazeného prvku výška je přirozená

3.5.7 WIDTH Nastaví šířku prvku. Možnosti zápisu jsou stejné jako u vlastnosti height.

52

3.6 POZICOVÁNÍ 3.6.1 FLOAT .popis { float: right; }

Tato vlastnost nastaví obtékání prvku na stránce. hodnoty none right left

způsob obtékání prvku prvek nebude obtékán (výchozí hodnota) prvek bude umístěn k pravému okraji, následující text ho bude obtékat vlevo totéž, ale k levému okraji

3.6.2 CLEAR .popis { clear: both; }

Zakazuje obtékání u některých prvků: hodnoty none both left right

neobtékané prvky plovoucí prvky jsou obtékané prvek se vykreslí až pod všemi plovoucími prvky prvek čeká na obtékané elementy přiražené doleva prvek čeká na obtékané elementy přiražené doprava

3.6.3 POSITION .popis { position: relative; }

Určuje, zda bude prvek na stránce umístěn absolutně nebo relativně. Absolutní umístění znamená vypočítání pozice objektu vzhledem k okrajům dokumentu, relativní umístění je umístění vzhledem k pozici, kde by byl objekt normálně vykreslen. hodnoty absolute relative static

způsob výpočtu umístění prvek bude vyjmut z toku dokumentu a umístěn na určitých souřadnicích prvek bude posunut ze svého normálního umístění prvek je umístěn normálně v dokumentu

3.6.4 UMÍSTĚNÍ .popis { left: 20px; }

Pokud je u prvku nastavena vlastnost position: absolute; nebo position: relative;, určí se pomocí vlastností left a top, kde bude umístěn. V obou případech se zadává hodnota v jednotkách podporovaných CSS nebo v procentech. left značí vzdálenost prvku od levého okraje, top od horního okraje.

53

3.6.5 VISIBILITY .schovano { visibility: hidden; }

Určuje zda bude prvek na stránce viditelný. Pokud viditelný není, zůstane po něm na stránce prázdné místo. hodnoty viditelnost prvku visible normálně viditelný hidden neviditelný, ale zabere místo

3.6.6 OVERFLOW .text { overflow: scroll; }

Pokud se do boxu (např.

s pevně nastavenými rozměry) nevejde všechen jeho obsah, určí tato vlastnost, co se s ním stane. hodnoty visible auto scroll hidden

zacházení s přetečeným obsahem nechá se přetékat a je vidět nenechá se přetékat, je-li potřeba, zobrazí se rolovací lišta nenechá se přetékat, rolovací lišta se zobrazí vždy, i když není potřeba nenechá se přetékat, co se nevejde se nezobrazí, žádná rolovací lišta

54

3.7 JEDNOTKY A BARVY CSS 3.7.1 JEDNOTKY V CSS lze používat hned několik druhů jednotek. Zde je jejich přehled: Absolutní jednotky jednotka význam px pixel, obrazovkový bod pt typografický bod (jako ve Wordu) mm milimetr in palec

příklad velikost písma příkladu 12px dvanáct pixelů (obrazovkových bodů) 9pt devět typografických bodů (na Windows 12px) 5mm pět milimetrů .5in půl palce

Relativní jednotky jednotka význam em šířka písmena "M" (tzv. čtverčík) % procento ex výška písmena "X"

příklad 1.5em 80% 1.5ex

velikost písma příkladu jeden a půl normální velkosti osmdesát procent normální velikosti jeden a půl normální velkosti

V praxi se ale používají z absolutních jednotek většinou jen pixely a z relativních procenta a čtverčíky (em).

3.7.2 BARVY Barvy se v CSS dají zadávat několika různými způsoby: způsob zápisu Jménem v angličtině

zříklad: červené písmo color: red;

poznámka Existuje mnoho pojmenovaných barev, ale v praxi se moc nepoužívají. color: rgb 100%,0%,0%); rgb znamená Red, Green, Blue (červená, zelená, modrá) color: rgb(255,0,0);

Procentuálním RGB zápisem Desetinným RGB zápisem Šestnáctkovým RGB zápisem Zkráceným šestnáctkovým RGB zápisem

color: #ff0000;

Tento způsob je nejjistější, nejpoužívanější a nejlepší. Jen v případě, že se všechny dvojice cifer shodují

color: #f00;

Pojmenovaných barev jsou desítky ale doporučuje se používat jen 16 základních z Windows, protože ne všechny prohlížeče by právě vámi vybranou barvu musely znát.

55

Jsou praktické, protože název barvy se pamatuje mnohem lépe než její RGB zápis ale stejně se to moc nepoužívá. RGB model využívá toho, že všechny barvy jdou získat pouze složením tří základních barevných světel – červené (Red), zelené (Green) a modré (Blue) – ostatně toho se využívá i u monitorů a obrazovek. Zápis RGB tedy značí, jak moc je tam která barva zastoupena a z toho se získá barva výsledná. Například modrá barva se zapíše takto: rgb (0%,0%,100%)

Zatímco žlutá, která se vytvoří smíchání červeného a zeleného světla má zápis: rgb (100%,100%,0%)

RGB zápis barvy tedy udává zastoupení jednotlivých barev. Může být zapsán procentuelně a nebo pomocí poměru jednotlivých barev. Ten se zapisuje v desítkové (0-255) nebo v šestnáctkové (00-ff) soustavě. V šestnáctkové soustavě lze ještě využít tzv. zkráceného zápisu – ovšem jen v případě, že jsou všechny dvojice cifer stejné: např. #ff5511 lze zkrátit na #f51.

56

4. PHP 4.1 ÚVOD DO PHP 4.1.1 HISTORIE PHP Skriptovací jazyk PHP vzniknul v roce 1994. Tehdy jistý pan Rasmus Lerdorf chtěl vytvořit program pro počítání přístupů na jeho web. Po několika úpravách bylo vydáno Personal Home Page Tools - zkráceně PHP. Dále se tento projekt roku 1995 spojil s jiným projektem téhož autora a vzniklo PHP/FI 2.0. Roku 1998 bylo vydáno PHP 3.0. Tato verze již fungovala i pod Windows a byla hojně rozšířena. Jednalo se o plnohodnotný nástroj pro tvorbu webu. Následovala verze 4, která se na některých serverech stále ještě používá. Pracuje na jádru Zend. V současnosti se využívá PHP verze 5. Ne všude, protože spousta autorů je pochopitelně líná svůj čtyřkový kód přepsat do pětkového. PHP 5 pracuje na jádru Zend II a má již kvalitní podporu objektově orientovaného programování.

4.1.2 PRINCIP PHP Webové skripty slouží k tvorbě dynamických webových prezentací. Dělíme je na klientské skripty a serverové skripty. Klientské skripty běží na samotné webové stránce. Prohlížeč, který stránku stáhne, tento skript pak spustí při splnění nějaké události (kliknutí na tlačítko, načtení dokumentu...). Nevýhodou je, že prohlížeč tyto skripty musí podporovat. Nejčastěji používaným zástupcem je JavaScript. Serverové skripty běží na serveru a prohlížeč s nimi vůbec nepřijde do styku (není zde tedy nutná podpora prohlížečů). Po zaslání dotazu na stránku tento dotaz skript vyhodnotí, stránku na serveru sestaví podle požadavků a zpět odešle již jen čistý XHTML kód.

4.1.3 CO JE POTŘEBA? Chceme-li si vyzkoušet PHP doma v počítači, potřebujeme nějaký HTTP server a instalaci požadované verze PHP. Jako server se nejčastěji využívá server Apache (je to sesterský projekt PHP a je freeware). Použitá verze PHP záleží na vás, ale doporučil bych PHP 5, protože je nejnovější, ale zároveň již zaběhlá a bez chyb, které se novému produktu nikdy nevyhnou. Nejjednodušší je pořízení nějakého instalačního balíčku, který obsahuje jak Apache a PHP, tak databázi, se kterými PHP hojně spolupracuje. Já osobně používám VertrigoServ, http://www.sourceforge.net/...

který

57

je

volně

ke

stažení

na

adrese:

Potěší, že narozdíl od konkurenčního ASP (Active Server Pages) od Microsoftu, je vše, co se točí kolem PHP, feeware. Když ale hotovou webovou stránku s PHP otevřete normálně jako soubor, PHP nefunguje a skript se zobrazí se jako obsah stránky. Pokud chcete aby PHP normálně fungovalo, je třeba aby běžel Apache server a stránka se nesmí otevírat jako soubor. Musí být uložena v localhost, jehož umístění se různí podle instalace Apache. Pokud využijete avizovaného VertrigoServ, přesuňte všechny svoje projekty s PHP do c:\Program Files\VertrigoServ\www\*.*. Přes prohlížeč se na ně pak dostanete z http://localhost/*.*.

58

4.2 ZÁKLADY SYNTAXE 4.2.1 ZÁPIS DO DOKUMENTU Kód PHP jde zapsat přímo do stránky XHTML nebo může být celá stránka čistě PHP, na které se pak nějaká jiná stránka odkazuje. Takový dokument ale musí mít příponu *.php, a to i v případě, že je to z větší části spíše XHTML dokument. PHP kód se ve stránce odděluje znaky . Často se také užívá zkrácená podoba . To sice není úplně správně, ale funguje to a nejsou s tím problémy.

Tato stránka je částečně generována pomocí

Příkaz echo zobrazí (vytiskne) svůj obsah. Když se podávíte do zdrojového kódu, je tam pouze text "jazyka PHP." - veškeré operace se tedy provedou na serveru a do prohlížeče dorazí již hotová stránka. K PHP kódu se uživatel nedostane. Jednotlivé příkazy se oddělují středníkem:

4.2.2 KOMENTÁŘE Jako v každém jazyce, tak i v PHP jsou nepostradatelné komentáře. Ty mohou být buď jednořádkové, kde konec řádku v kódu ukončí komentář, nebo víceřádkové. Jednořádkový komentář // text komentáře

Víceřádkový komentář /* První řádka komentáře Druhá řádka komentáře */

Opět se doporučuje komentáře hojně používat, aby jste se v obsáhlejších projektech neztratili.

4.2.3 PROMĚNNÉ Práce s proměnnými je zde velmi jednoduchá. Žádné proměnné se totiž nemusí deklarovat, ani se nemusí udávat jejich typ. To všechno si program vyřeší sám, když do nějaké proměnné přiřadíme určitý obsah. 59

Přesto, že se o to nemusíme starat, i zde fungují základní typy proměnných. Jsou to integer, real (float), string a boolean. Každá proměnná je jedinečná a musí začínat znakem $ (dolar). Následovat může libovolné písmeno a-z nebo podtržítko. Pozor, PHP je citlivé na malá a velká písmena. Přiřazení hodnoty do proměnné se provede pomocí rovnítka (=). Příklad:

60

4.3 PŘÍKAZ ECHO Nejzákladnější příkaz, který vás bude provázet celým PHP je echo. Ten vypíše nějaký text do dokumentu. Text, který chcete vypsat, se musí zapsat do uvozovek.

4.3.1 ZNAKOVÉ ENTITY Stejně jako v XHTML jsou i zde speciální znaky (středník, uvozovky...), které nejdou zobrazit normálně, protože mají speciální význam. Ty se zapisují pomocí tzv. escape sekvencí. Sekvence \n \" \r \t \\ \$

Význam Nový řádek Uvozovky Návrat vozíku Tabulátor Zpětné lomítko Dolar

Veškerý text, který takto pomocí PHP zapíšete, se pak zobrazí ve zdrojovém kódu dokumentu. Například

Se sice v kódu zobrazí takto: první řádka druhá řádka

Ale v prohlížeči je text pořád na jedné řádce, protože chybí element
. Dostat se tam dá takto: \n druhá řádka"; ?>

Obsah proměnné vypíšete jednoduše:

61

4.3.2 SPOJOVÁNÍ ŘETĚZCŮ Spojování řetězců se v PHP neprovádí pomocí znaménka +, ale pomocí tečky.

62

4.4 POLE I PHP umí pracovat s poli. Hodnoty se dají do pole zapsat několika způsoby.

nebo kratším zápisem

Pozor, pole se číslují od nuly. Pole mohou být i dvojrozměrná a jako indexy není nutné uvádět čísla. Našel jsem na to jeden příklad s šachovnicí.

63

4.5 OPERÁTORY Každý programovací jazyk má zápis logických operátorů trochu jiný. Proto zde uvádím operátory použitelné v PHP.

4.5.1 LOGICKÉ OPERÁTORY Operátor ! and && or || xor

Význam Negace Logický součin Logický součin Logický součet Logický součet Exkluzivní OR

Pravda když True když bylo False a naopak Jsou obě hodnoty pravdivé Jsou obě hodnoty pravdivé Je alespoň jedna hodnota pravdivá Je alespoň jedna hodnota pravdivá Je právě jedna hodnota pravdivá

4.5.2 POROVNÁVACÍ OPERÁTORY Operátor < > <= >= == <> !=

Význam Je menší Je větší Je menší nebo rovno Je větší nebo rovno Rovná se Nerovná se Nerovná se

4.5.3 INKREMENTACE PHP umí ještě jednu šikovnou věc, o které bych se v této kapitole chtěl zmínit. Nazývá se inkrementace. Pokud mám proměnnou a chci její hodnotu zvýšit o jeden, mám dvě možnosti, jak to udělat.

64

4.6 PODMÍNKY 4.6.1 IF Jako snad v každém programovacím jazyce, tak i v PHP existují podmínky. Ty slouží většinou k větvení kódu. Zápis je jednoduchý:

Podmínka, která musí být splněna se uvádí do závorky za klíčové slovo if. Pokud je proměnná typu boolean, lze zápis zkrátit.

Složené závorky obsahují veškerý kód, který se provede při splnění podmínky. Jejich využití není jen u příkazu if, ale všude, kde je potřeba označit část kódu. Při nesplnění podmínky, se buďto nic nestane, nebo je na řadě případný kód za příkazem else.

65

Poslední možností je příkaz elseif. Jak z názvu vyplývá, nastane v situaci, kdy není splněná předchozí podmínka if a zároveň je splněná další podmínka.

// neplatí předchozí a zároveň platí stávající

4.6.2 SWITCH Pokud je podmínek více, dají se nahradit příkazem switch. Takto vypadá předchozí (a trochu pozměněný) příklad přepsaný pomocí něho.

default je výchozí hodnota, která nastane, pokud neplatí ani jedna z podmínek.

66

4.7 CYKLY 4.7.1 CYKLUS FOR Nejjednodušším cyklem, který se vyskytuje snad ve všech programovacích jazycích, je cyklus for. Jedná se o tzv. cyklus s parametrem, u kterého je předem určeno, kolikrát se bude opakovat. "; } ?>

Funguje to tak, že se nejprve před během celé smyčky přiřadí nějaká hodnota proměnné $i ($i=1). Následně se vyhodnotí podmínka ($i<=5), která když platí, tak proběhne obsah smyčky. Jako poslední máme zvýšení hodnoty $i o jedna ($i++), které proběhne až po dokončení obsahu smyčky. Pokud i nadále platí podmínka ($i<=5), smyčka pokračuje; pokud ne tak se ukončí.

4.7.2 WHILE Další možností je smyčka s podmínkou na začátku, která se zapíše jako while (česky dokud). Takto by vypadal předchozí příklad řešený pomocí ní: "; $i++; } ?>

Obsah smyčky se provádí to té doby, dokud platí udaná podmínka. Cyklus while se dá přepsat tak, že bude mít podmínku na konci. Moc se to ale nevyužívá. "; $i++; } while ($i<5) // podmínka je na konci ?>

Změna je v tom, že obsah smyčky se nejprve provede a až potom kontroluje podmínku. Jednou tedy proběhne i v případě, že podmínka nikdy nemůže platit.

67

4.8 FUNKCE A PROCEDURY Pokud máte na stránce část kódu, která se tam vyskytuje vícekrát, byla by otročina jí tam neustále kopírovat. Proto existují funkce a procedury, které stačí jednou nadeklarovat a pak je můžete kdykoliv zavolat podle potřeby.

4.8.1 PROCEDURY Například:

Pokud pak chci kdekoliv na stránce vypsat 5 hvězdiček, stačí jednoduše zavolat proceduru hvezdicky:

pozn.: Závorky za názvem funkce slouží k předávání parametrů. Nezáleží na pořadí, takže můžeme funkci klidně zavolat ještě dřív, než je definována v celku. Kvůli přehlednosti to ale stejně moc lidí nedělá. Rozdíl mezi procedurou a funkcí je ten, že procedura pouze provede kód, který obsahuje, zatímco funkce navíc ještě vrací nějakou hodnotu. hvezdicky z příkladu jsou tedy procedura. Obojí, funkce i procedury, se ale v PHP zapisují klíčovým slovem function.

4.8.2 FUNKCE

Klíčové slovo return udává hodnotu, kterou funkce vrátí. Každá funkce může vracet pouze jednu hodnotu.

68

Funkce se pak klidně dá začlenit do ostatního textu.

4.8.3 FUNKCE S PARAMETREM Pokud chceme (a že většinou chceme) aby například funkce secti sčítala libovolná čísla, která jí program předá, je třeba přiřadit jí parametry. Pro ně je určena ta závorka za funkcí.

Pozor, funkce pracují jen s proměnnými které jim předáme v parametru. Nelze proto odkázat na proměnnou uvedenou jinde v kódu. To jde obejít jedině když použijeme u požadované proměnné klíčové slovo global. Tohle tedy bude fungovat:

69

4.9 ZPRACOVÁNÍ FORMULÁŘŮ Protože webové stránky jsou interaktivní záležitost, jednoznačně k PHP patří i formuláře. Díky nim může uživatel zadávat nějaká vstupní data, se kterými pak PHP skript pracuje. Asi nejjednodužší je udělat si dvě stránky. První bude čisté XHTML s formulářem a druhá bude obsahovat PHP skript, který odeslané informace zpracuje. První stránka (formular.htm) obsahuje takovýto formulář:

Co jste měli dnes k obědu:

Jako hodnota atributu action je nastavena stránka, na kterou se zadané informace odešlou (zde stránka zpracuj.php). Druhá stránka (zpracuj.php):

Proměnná $_REQUEST je asociativní pole, které obsahuje všechna odeslaná data. Namísto toho lze ještě použít pole $_POST a $_GET, která rozlišují data podle metody odeslání. T

Tento příklad lze ještě přepracovat tak, aby se využívala jen jediná stránka, která bude odkazovat sama na sebe. Ta musí být pochopitelně uložena jako PHP. Kód by pak vypadal následovně:

Co jste měli dnes k obědu:

70

Vysvětlení je jednoduché. Funkce empty zjistí, zda je prázdná proměnná $_REQUEST. Pokud ano, nebyl ještě formulář odeslán, a proto ho zobrazíme. Když je proměnná naplněna, nemá již smysl vypisovat formulář, ale rovnou zobrazíme výstup PHP, které zpracovalo odeslané informace. Z uživatelského hlediska bude vše vypadat stejně, jako předchozí varianta.

71

5. ZÁVĚR Dle mého názoru je webová prezentace jeden z nejefektivnějších a zároveň nejlevnějších způsobů reklamy. Přitom udělat jednoduchý web není takový problém, jak to může na první pohled vypadat. Myslím, že toto stále se vyvíjející téma má jistou budoucnost a určitě se vyplatí, vědět o něm něco víc. Proto se jsem se snažil, aby mohla být moje práce použita i pro studijní účely.

72

6. POUŽITÁ LITERATURA A JINÉ ZDROJE WEBY www.jakpsatweb.cz Perfektní web o tvorbě stránek. Zabývá se HTML, CSS, JavaScriptem a spoustou dalších věcí. Vše je psáno hezky polopaticky a proto je to nejlepší způsob jak s webem začít. Vřele doporučuji. www.linuxsoft.cz Jak název napovídá, zabývají se tyto stránky především Linuxem. Mimo to se tam dá ale najít třeba skvělý seriál o PHP od Petra Zajíce nebo jiný seriál o MySQL. www.jaknaweb.com Spousta odkazů na články zabývající se webovou tvorbou. Odkazuje i na jiné servery. www.interval.cz Další server o webu. Našel jsem zde bezva seriál o XHTML od Martina Snížka.

KNIHY Kučera Miroslav. CSS – úvod do kaskádových stylů. Mobil media a.s. 2002 Gröpl Tomáš. HTML, CSS a JavaScript – referenční příručka. BEN – technická literatura, Praha 2002.

73

7. OSTATNÍ 7.1 SLOVNÍČEK POJMŮ Ampersand Anglický výraz pro znak "&" (and – česky a) Atribut Součást elementu. Většinou bývá nepovinná, ale není to pravidlo. Udává doplňující informace (konkrétní vlastnosti) o elementu. Například: Atribut src udává cestu k obrázku a atribut alt obsahuje alternativní text. Bílá místa (v kódu) – mezery a tabulátory. Je jedno, kolik jich tam je, protože tabulátory prohlížeč ignoruje a více mezer za sebou nahradí mezerou jedinou. Slouží tedy jen pro lepší orientaci při tvorbě nebo editaci stránky. Blokový prvek Element, chápaný jako blokový může obsahovat další blokové i inline prvky. Následující prvky jsou automaticky na další řádce. Browser (prohlížeč) viz. Interpret XHTML CSS Neboli Cascading Style Sheets (česky kaskádové styly), je soubor metod pro vizuální úpravu webových prezentací. Element Část XHTML dokumentu. Začíná otevíracím tagem, následuje obsah elementu (nějaký text) a pak je uzavírací tag. Z jednotlivých elementů se skládá celá stránka. Příklad elementu:

První odstavec

HTTP hlavička Informace o dokumentu, významné pouze pro prohlížeč. V kódu stránky se nezobrazují. Inline prvek Element, který může obsahovat pouze jiné inline prvky. Následující elementy začínají na stejné řádce. Interpret XHTML Program, který načte zdrojový kód webové stránky, přeloží ho do grafické podoby (vyhodnotí ho) a zobrazí (interpretuje). Často se používá výraz prohlížeč. PHP Neboli "Personal Home Page" je programovací jazyk určený pro tvorbu dynamických webových prezentací.

74

Skript Malý program, který je součástí jiného většího celku (stránek). Většinou běží někde na pozadí a uživatel o něm ani neví. Serverový skript běží na serveru a k uživateli dorazí jen čisté XHTML. Například PHP, ASP. Klientský skript se stáhne spolu se stránkou a probíhá v prohlížeči. Pomocí něho se dají udělat například vysouvací menu a podobně. Nejrozšířenější je JavaScript. Tag Část elementu. Může se jednat buď o otevírací část elementu (

) nebo o uzavírací část elementu (

) XHTML eXtensible HyperText Markup Language (rozšiřitelný hypertextový značkovací jazyk) je jazyk určený pro tvorbu webových dokumentů. Znaková Entita Protože v jazyce XHTML jsou znaky, které pro něj mají specifický význam, nelze je uvést rovnou jako obsah dokumentu. Proto existují znakové entity, které tyto prvky v dokumentu nahrazují, a za které si prohlížeč následně dosadí správné znaky. Jejich přehled je v kapitole o znakových entitách.

7.2 MOJE WEBOVKY Tato práce je ochuzena o spoustu interaktivních příkladů. Pokud máte zájem o opravdu plnohodnotný přehled tvorby webu, podívejte se na http://mw.unas.cz. Tento textový dokument je pouze zkopírovaný a protříděný obsah zmíněné adresy.

75