PHP 6 začínáme programovat

Transkript

1 PHP 6 začínáme programovat David Procházka Základy tvorby XHTML stránek s využitím PHP a databáze MySQL Zprovoznění Apache serveru pro lokální provoz PHP Profesionální programování zabezpečených webových projektů Objektový model PHP přinášející moderní programování Rady, tipy a triky pro efektivní použití PHP v XHTML stránkách

2

3 PHP 6 začínáme programovat David Procházka

4 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 a šíř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. PHP 6 začínáme programovat David Procházka Vydala Grada Publishing, a.s. U Průhonu 22, Praha 7 jako svou publikaci Odpovědný redaktor Pavel Němeček Sazba Tomáš Brejcha Počet stran 192 První vydání, Praha 2012 Grada Publishing, a.s., 2012 V knize použité názvy programových produktů, firem apod. mohou být ochrannými známkami nebo registrovanými ochrannými známkami příslušných vlastníků. Vytiskly Tiskárny Havlíčkův Brod, a. s. Husova ulice 1881, Havlíčkův Brod ISBN (tištěná verze) ISBN (elektronická verze ve formátu PDF) ISBN (elektronická verze ve formátu EPUB)

5 Obsah Úvod O autorovi Internet a základní pojmy 1.1 Několik slov o internetu Co je to internet Důležité mezníky ve vývoji internetu Internetový protokol TCP/IP Identifikace počítačů v internetu Protokol HTTP hypertext WWW a brouzdání Základní pojmy a zkratky Filosofie tvorby webových aplikací Jak postupovat při plánování projektu www stránek Nejčastější chyby, které pohřbí váš projekt Webhosting a FTP připojení Doména aneb adresa stránek Výběr webhostingu FTP protokol Zkušební bezplatný webhosting Struktura souborů a složek Základní typy souborů Rozdělení do složek Zásady a doporučení Software potřebný pro vytváření webových projektů HTML a PHP editory Grafické aplikace FTP klient Internetové prohlížeče Testovací programy Validita a internetové prohlížeče Validní vs. Invalidní kód K čemu slouží validace webu? Testujeme, zda jsou stránky validní Seznámení s technologiemi XHTML a CSS 2.1 Zdrojový kód HTML stránek ve značkách Značky neboli tagy Párové vs. nepárové značky Základní struktura HTML stránky Práce s textem Práce s odstavci Obsah 5

6 2.3.2 Zvýraznění písma Fonty a velikost písma Nadpisy Hypertextové odkazy Využití barevných palet Nastavení barev pro celou stránku Obrázky Základní umístění obrázku Zarovnání obrázku a textu Velikost obrázku Titulek obrázku a alternativní text Rámeček okolo obrázku Okraje okolo obrázku Než se pustíme do první vlastní stránky Praktická tvorba webové stránky 3.1 Co budeme potřebovat Příprava prostředí a programů Prostředí na pevném disku Internetové prohlížeče Editor HTML stránek Správce souborů s podporou FTP Začínáme tvořit Složky a soubory Založení soubor index.html, práce s hlavičkou Vložení a naformátování textů a odkazů Vložení obrázku fotografie Zpracování jednoduché tabulky Kontrola výsledků Vylepšujeme základní stránku Integrace CSS stylů do první stránky Úprava těla stránky pomocí CSS Změna formátu nadpisů Odkazy a jejich chování Úprava obrázku Úprava vložené tabulky Asociace stylu s určitým prvkem Výsledná první stránka včetně CSS stylu Index.html Styl.css PHP 6 začínáme programovat

7 4. 5. Seznámení s technologiemi PHP a MySQL 4.1 Základní informace o PHP Hlavní výhody použití PHP Nevýhody PHP Typické a vhodné PHP realizace Historie PHP a jeho vývoj do dnešní podoby Budoucnost se jmenuje PHP Využití Unicode Zrušené vlastnosti Zachované vlastnosti Novinky Neralizované ohlášené novinky Konfrontace s konkurencí ASP.NET Java Server Pages Python Perl Ruby on Rails Databázový systém MySQL Architektura MySQL Správa připojení a bezpečnost Optimalizace a vykonávání Datové úložiště Aplikace PhpMyAdmin a Adminer Srovnání MySQL s konkurencí Microsoft SQL Server Oracle Firebird Pět klíčových důvodů proč používat kombinaci PHP a MySQL Zázemí pro provoz vlastních PHP skriptů 5.1 Vývoj na vlastním počítači Instalace Vertigo Server Nastavení serveru Důležité informace o cestách pro Vertrigo Server Vývoj na webhostingu Jaké parametry sledovat při výběru webhostingu Přidaná hodnota webhostingu Způsob vývoje PHP a testování Obsah 7

8 6. 7. PHP a jeho zapojení do webu 6.1 PHP kód v HTML stránce Komentáře Proměnné v PHP Podmínky v PHP Výpis hodnot v PHP Metoda vkládání v PHP Metody odevzdávání: POST a GET v PHP Základy strukturálního PHP 7.1 Syntaktické vlastnosti PHP Ohraničení PHP kódu Středník jako prostředek k oddělení instrukcí Využíváme komentáře Základní práce s řetězci a proměnnými Echo aneb ozvěna programátora Spojení více řetězců Proměnné a datové typy Názvy proměnných Přetypování proměnných Výrazy, konstanty a operátory Výrazy a přiřazení Inkrementace a dekrementace Logické výrazy a operátory Operátory porovnání Pole Indexovaná asociativní pole Vícerozměrná pole Inicializace pole Využití polí Podmínky Příkaz IF Příkaz SWITCH Využití podmínek Cykly Cyklus s podmínkou na začátku Cyklus s podmínkou na konci Cyklus s řídící proměnnou Nekonečné smyčky Funkce Procedury vs. funkce Parametry funkcí a procedur Rozsah platnosti proměnných PHP 6 začínáme programovat

9 7.7.4 Vlastnosti funkcí Vnitřní funkce PHP Vložené soubory Serverové proměnné Propojení PHP a MySQL 8.1 Základní údaje o MySQL Připojení k MySQL z PHP Údaje vedoucí k přihlášení Základní syntaxe připojení Trvalá připojení do databáze Doporučená forma spojení Vícenásobná spojení Dotazování databáze a zpracování v PHP Získávání dat Vkládání dat Aktualizace dat Rušení dat Základy jazyka SQL Základní databázové pojmy Jazyky využívané nad databází Databázové struktury Příkazy jazyka DML Praktické ukázky řešení PHP skriptů 9.1 Datum a čas Zpracování formulářů Základní zpracování formuláře v PHP Formulář pro odeslání u Počítadlo návštěv Zobrazení náhodného obrázku Download a upload souboru na server Stahování souboru download Nahrávání souboru upload Výroba vlastního kalendáře Pokročilá práce s řetězci Vyříznutí části řetězce Odstranění prázdných znaků Určení počtu znaků Převod na ASCII Převod na jiné znaky Další funkce pro práci s řetězci Obsah 9

10 Objektové programování dynamického webu 10.1 Základy OOP ve spojení s PHP Dědičnost a viditelnost Statické metody a vlastnosti Speciální metody a klíčové slovo final Konstanty a operátory Objektové rozhraní Abstraktní třídy Kalendář objektově Typické řešené úlohy v PHP 11.1 Editor textu jako ve Wordu Hezký kalendář Efektivní zobrazení fotogalerie Upload obrázku s vytvořením náhledu Hromadný upload souborů Generování sestav pro MS Excel a v PDF Závěr Užitečné odkazy a zdroje Rejstřík PHP 6 začínáme programovat

11 Úvod K vývoji moderních webových stránek se v dnešní době využívají ponejvíce technologie XHTML a CSS. S těmito technologiemi si vystačíte pouze do doby, kdy vyvíjíte statické webové stránky. Pokud potřebujete zavést do stránek dynamiku nebo vytvořit funkční webovou aplikaci či webový portál, pak nutně potřebujete technologii, která vašim stránkám vdechne život. Jednou možností je sáhnout po platformě společnosti Microsoft v podobě stránek oživených technologií ASP.NET. Pro tuto technologii ale jen těžko seženete levný webhosting, a navíc budete potřebovat sofistikované vývojové nástroje s kompilací zdrojových kódů. Druhou možností je sáhnout po mnohem podporovanější platformě na bázi PHP. A právě o této masově využívané platformě pojednává tato publikace. Základní tvorba WWW stránek není programování v pravém slova smyslu, ale spíše kódování, tedy soupis obsahu stránky způsobem, který dokáže internetový prohlížeč jednoduše dekódovat. Ale pro programátora technologie PHP je zvládnutí skriptovacího jazyka (X)HTML s aplikací kaskádových CSS stylů naprostou nutností. Pomocí kombinace těchto dvou technologií jste schopni zpracovat prakticky jakékoli běžné webové stránky. Stránky lze poměrně snadno doplnit o JavaScript, který jim dodá vyšší dynamiku. Dalším logickým krokem je zapojení technologie PHP, která dokáže provádět výkonné operace nad daty a pracovat s databází. Stránky, které využívají tuto technologii, jsou nazývány dynamické, neboť se mohou co do obsahu v čase měnit, bez ohledu na to, jak je nastaven jejich vzhled. Tato publikace vás provede základními principy internetu a elementárními základy tvorby HTML stránek. Dále se bude publikace věnovat strukturálnímu i objektovému modelu programování v PHP se zapojením databáze MySQL Dozvíte se nejen informace o vývoji stránek, ale dostanete kompletní studijní materiál, který vás provede tvorbou webu, programováním základních aplikací a dá vám cenné informace z praxe. Při výkladu PHP kódu se pokouším neustále předvádět nové informace na příkladech, a preferuji tak v celé knize praktické příklady nad zbytečně obsáhlou teorií. Veškeré zdrojové kódy, uvedené v této knize, si můžete stáhnout z webových stránek nebo z adresy Díky tomu si vyzkoušíte všechny příklady bez náročného přepisování. Úvod 11

12 O autorovi David Procházka je vývojář specializovaných a průmyslových aplikací ve společnosti VÍTKOVICE IT SOLUTIONS a.s., která spadá do skupiny VÍTKOVICE MACHINERY GROUP. V rámci své pracovní náplně pracuje s databázemi Oracle, MSSQL, Firebird a MySQL. Dále spravuje holdingový intranet a webové prezentace více než čtyřiceti dceřiných společností holdingu. V poslední době se zabývá vedením týmu programátorů nad produktem Microsoft Sharepoint. Autor absolvoval řadu školení, je držitelem certifikátů a účastní se meetingů v oblasti databází a programování. Mimo tuto činnost je také autorem několika odborných publikací a stovek článků v IT magazínech a na internetu. 12 PHP 6 začínáme programovat

13 1. Internet a základní pojmy První kapitola této publikace shrnuje základní informace o internetu, jeho historii, vývoji a zejména o technologiích, které se v souvislosti s vytvářením dynamických webových aplikací nejčastěji skloňují. Dozvíte se v ní zejména základní standardy internetu a webových stránek. Nebudeme ale zabíhat do přílišných podrobností, které se základů tvorby netýkají. Tato kapitola je tedy jakýsi odrazový můstek pro zvládnutí vlastní tvorby webu. Dozvíte se zde, jak si můžete vytvořit testovací prostředí pro vývoj stránek, jak se stránky na internet umisťují a jak probíhá registrace vlastní WWW adresy. Ve druhé části kapitoly se dočtete také o nástrojích a programech, které jsou pro tvorbu stránek a PHP aplikací doporučené, a v neposlední řadě si stanovíme určité principy, které budeme v knize dodržovat. 1.1 Několik slov o internetu Internet je velmi rozsáhlá počítačová síť, jejíž hierarchie se řídí určitými pravidly. V minulosti byl výsadou akademických a vědeckých pracovníků, běžní uživatelé se k jeho obsahu dostali jen výjimečně. Dnes jej používají děti, studenti, rodiny, důchodci, prostě všichni, kteří chtějí informovat a být informováni. Nemalé procento uživatelů internetu tvoří lidé, kteří chtějí komunikovat, přičemž internet jim poskytuje levnou a pohodlnou cestu ke spojení s celým světem. Obrázek 1.1: Díky internetu jste spojeni s celým světem Co je to internet Internet je celosvětová počítačová síť, která spojuje jednotlivé menší sítě, pomocí sady protokolů zvaných IP (Internet Protocol). Pro upřesnění, protokolem je v počítačové terminologii myšlena soustava pravidel obvykle tedy norma komunikace. Název internet pochází z anglického jazyka, ze slova network (síť), podle něhož končily tradičně názvy amerických počítačových sítí například Arpanet, a mezinárodní (původně latinské) předpony inter (mezi), vyjadřující, že internet propojil a vstřebal různé starší, dílčí, specializované, proprietární a lokální sítě. Historie internetu je velice košatá a vydala by na samostatnou odbornou publikaci, proto se o ní zmíníme jen krátce. Počátky internetu započaly u myšlenky vytvoření počítačové sítě, která by spolehlivě propojila strategické, vojenské, vládní a akademické počítače tak, aby zároveň dokázala přežít jaderný úder či jiné hrozby. Zájmem tvůrců bylo také to, aby síť byla co nejméně zranitelná. Byla navržena bez hlavního Internet a základní pojmy 13

14 řídicího centra. Skládala se z řady vzájemně propojených uzlů rovnocenné důležitosti. Posílaná data se na dobu přenosu rozdělí na několik samostatných částí nazývaných pakety. Každý z paketů je vybaven údajem o adresátovi, a tvoří tak de facto autonomní zásilku, která cestuje k cíli samostatně, svou vlastní cestou, nezávisle na ostatních paketech. V případě zničení jedné z přenosových cest může paket bez problémů dojít k adresátovi alternativní cestou přes zbývající zachovalé uzly. A to je vlastně základ koncepce internetu, jak ji známe dodnes. Obrázek 1.2: Na internet se připojují lidé z různých končin Země Důležité mezníky ve vývoji internetu V období vývoje internetu od roku 1969 až po současnost docházelo k bouřlivému vývoji, technologickému postupu a aplikaci řady nových technologií. Uveďme si nyní výběr jen těch nejdůležitějších okamžiků vytvořena experimentální síť ARPANET, první pokusy s přepojováním uzlů 1972 Ray Tomlinson vyvíjí první ovou aplikaci 1980 experimentální provoz protokolu TCP/IP v síti ARPANET 1984 vyvinut DNS (Domain Name System) 1987 vzniká označení sítě jako internet 1990 končí ARPANET 1991 nasazení WWW (World Wide Web) v evropské laboratoři CERN 1994 internet přechází z rukou vědců do komerčního užití 1996 překonáno 55 milionů uživatelů na světě milionů uživatelů 2006 více než miliarda uživatelů Obrázek 1.3: Arpanet začínal v době sálových počítačů 14 PHP 6 začínáme programovat

15 1.1.3 Internetový protokol TCP/IP Protokolová struktura TCP/IP je definována jako sada protokolů pro komunikaci v počítačové síti, jež se využívá zejména na internetu, ale také v běžných počítačových sítích. Jde vlastně o komunikační protokol, což je množina pravidel, které určují podobu a význam jednotlivých zpráv při komunikaci. Vzhledem ke složitosti problémů je síťová komunikace rozdělena do tzv. vrstev, které znázorňují hierarchii činností. Výměna informací mezi vrstvami je přesně definována. Každá vrstva využívá služeb vrstvy nižší a poskytuje své služby vrstvě vyšší. Celkový význam zkratky TCP/IP je Transmission Control Protocol/Internet Protocol. Komunikace mezi stejnými vrstvami dvou různých systémů je řízena komunikačním protokolem za použití spojení vytvořeného sousední nižší vrstvou. Architektura umožňuje možnost výměny protokolů jedné vrstvy bez dopadu na ostatní. Architektura TCP/IP je členěna do čtyř vrstev (na rozdíl od referenčního modelu ISO/OSI se sedmi vrstvami): aplikační vrstva (application layer), transportní vrstva (transport layer), síťová vrstva (network layer) a vrstva síťového rozhraní (network interface). Obrázek 1.4: Sedm vrstev modelu ISO/OSI Protokol TCP TCP protokol (Transmission Control Protocol) je jeden ze základních ze sady protokolů internetu, typicky představuje transportní vrstvu komunikace. Použitím TCP protokolu mohou aplikace na počítačích zapojených do počítačové sítě vytvořit mezi sebou spojení, přes které lze přenášet data. Protokol garantuje spolehlivé doručování a doručování ve správném pořadí. TCP také rozlišuje data pro vícenásobné, současně běžící aplikace (například webový server a ový server) běžící na stejném počítači. TCP podporuje mnoho na internetu populárních aplikačních protokolů a aplikací, včetně WWW, elektronické pošty a SSH (Secure Shell). Protokol IP IP protokol (Internet Protocol) je datový protokol používaný pro přenos dat přes paketové sítě. Data se pomocí IP posílají síti po blocích nazývaných datagramy (jedná se o název pro datový paket specifický pro prostředí protokolu IP). Jednotlivé datagramy putují sítí zcela nezávisle, na začátku komunikace není potřeba navazovat spojení či jinak předpřipravovat cestu datům, přestože spolu třeba příslušné stroje nikdy předtím nekomunikovaly. IP protokol v doručování datagramů poskytuje nespolehlivou službu, označuje se také jako služba nejlepšího úsilí; tj. všechny stroje na trase se datagram snaží podle svých možností poslat blíže k cíli, ale nezaručují praktické doručení do cíle. Datagram vůbec nemusí dorazit, může být naopak doručen několikrát a IP protokol neručí ani za pořadí doručených datagramů Identifikace počítačů v internetu Kterékoli síťové rozhraní komunikující prostřednictvím protokolu IP má přiřazeno jednoznačný identifikátor, tzv. IP adresu. IP adresa je v rámci internetu zásadní věcí a je dobré vědět, co IP znamená. V každém datagramu je pak uvedena IP adresa odesilatele i příjemce. Na základě IP adresy příjemce pak každý počítač na trase provádí rozhodnutí, jakým směrem paket odeslat, tzv. směrování (routing). To mají na starosti zejména specializované stroje označované jako směrovače (routery). Pro snadnou orientaci byl zaveden systém pojmenování domén, tzv. DNS. Doménová jména se v tomto systému překládají na IP adresy a naopak. Použitelnost je mnohem lepší, uživatelé si nemusejí pamatovat dlouhá čísla, pamatují si názvy. Internet a základní pojmy 15

16 Domény Domény jsou vlastně IP adresy převedené na text. Jméno počítače se skládá z domén oddělených tečkou, např. Doména nejvyšší úrovně je vpravo (cz), doména druhé úrovně je vlevo od ní (volny), určuje název organizace, 3. úroveň určuje název počítače v rámci organizace apod. Doména první úrovně určuje skupinu podle země nebo kategorie (cz Česká republika, us USA, com komerční organizace, edu vzdělávací instituce, gov vládní stránky, mil vojenské stránky atd.). Obrázek 1.5: Zápis www adresy do prohlížeče internetu Různé verze IP adres Každý počítač připojený k internetu má svoji IP adresu. Donedávna platilo, že IP adresa je 32bitové číslo a že se uvádí jako čtyři desítková čísla v rozmezí oddělená tečkou např Tato informace je stále pravdivá, ale jelikož postupem času došlo k vyčerpání adresního rozsahu, který tvořil počet 2 32 = , bylo nutno zavést další verzi IP protokolu. Prvotní a stále využívaná verze má označení IPv4, novější pak IPv6. Tato verze má kromě jiného adresy 128bitové, které poskytují větší adresní prostor než 32bitové adresy v IPv4. V praxi je užití modernizované verze IP protokolu méně praktické, protože adresy obsahují také šestnáctkové hodnoty typická IP adresa je tak v IPv6 například takováto 2001:0db8:0:0:0:0:1428:57ab. Obrázek 1.6: IP adresa identifikuje každý jednotlivý počítač v internetu MAC adresa síťové karty Drtivá většina počítačů je do internetu připojena pomocí síťové karty. Je to zařízení, do kterého zapojíte síťový (UTP) kabel z modemu nebo směrovače. Každá síťová karta má tzv. MAC adresu. MAC adresa (z anglického Media Access Control ) je jedinečný identifikátor síťového zařízení, který používají různé protokoly druhé (spojové) vrstvy OSI. Je přiřazována síťové kartě bezprostředně při její výrobě a je jakýmsi jedinečným rodným číslem. MAC adresa přidělená výrobcem je vždy 16 PHP 6 začínáme programovat

17 celosvětově jedinečná. Z hlediska přidělování je rozdělena na dvě poloviny. O první polovinu musí výrobce požádat centrálního správce adresního prostoru a je u všech karet daného výrobce stejná (či alespoň velké skupiny karet, velcí výrobci mají k dispozici několik hodnot pro první polovinu). Výrobce pak každé vyrobené kartě či zařízení přiřazuje jedinečnou hodnotu druhé poloviny adresy. MAC adresa může mít třeba takovýto tvar: FE. Obrázek 1.7: Serverová síťová karta s jedinečnou MAC adresou Protokol HTTP hypertext HTTP (Hyper Text Transfer Protocol) je internetový protokol určený původně pro výměnu hypertextových dokumentů ve formátu HTML (HyperText Markup Language). Tento protokol je spolu s elektronickou poštou tím nejvíce používaným a zasloužil se o obrovský rozmach internetu v posledních letech. HTTP používá jako některé další aplikace tzv. jednotný lokátor prostředků URL (Uniform Resource Locator), který specifikuje jednoznačné umístění nějakého zdroje v internetu. K protokolu HTTP existuje také jeho bezpečnější verze označovaná jako HTTPS, která umožňuje přenášená data šifrovat, a tím chránit před odposlechem či jiným narušením. Protokol funguje způsobem dotaz-odpověď. Uživatel (pomocí programu, obvykle internetového prohlížeče) pošle serveru dotaz ve formě čistého textu, obsahujícího označení požadovaného dokumentu, informace o schopnostech prohlížeče apod. Server poté odpoví pomocí několika řádků textu popisujících výsledek dotazu (zda se dokument podařilo najít, jakého typu dokument je atd.), za kterými následují data samotného požadovaného dokumentu WWW a brouzdání World Wide Web (WWW, také pouze zkráceně web), ve volném překladu celosvětová pavučina, je označení pro aplikace internetového protokolu HTTP. Je tím myšlena soustava propojených hypertextových dokumentů. V češtině se slovo web často používá nejen pro označení celosvětové sítě dokumentů, ale také pro označení jednotlivé soustavy dokumentů dostupných na tomtéž webovém serveru nebo na téže internetové doméně nejnižšího stupně (internetové stránce). Dokumenty umístěné na počítačových serverech jsou adresovány pomocí URL, jehož součástí je i doména a jméno počítače. Název naprosté většiny těchto serverů začíná zkratkou WWW, i když je možné používat libovolné jméno vyhovující pravidlům URL. Protokol HTTP je dnes již používán i pro přenos jiných dokumentů, než jen souborů ve tvaru HTML a výraz World Wide Web se postupně stává pro laickou veřejnost synonymem pro internetové aplikace. Internet a základní pojmy 17

18 * Obrázek 1.8: Okno webového prohlížeče při procházení webu 1.2 Základní pojmy a zkratky V předchozí části knihy jsme si řekli o základech internetu. Ty ale povětšinou lidé, kteří chtějí tvořit dynamické webové stránky a aplikace, alespoň rámcově znají. Nyní je čas přejít od slov k činům, a přesunout se tak blíže k problematice vytváření PHP skriptů. Začněme pojmy, se kterými se v průběhu tvorby můžete setkat. Pojmy jsou seřazeny podle abecedy. AJAX AJAX (Asynchronous JavaScript and XML) je označení pro sadu technologií určenou k vývoji interaktivních webových aplikací, které mění obsah svých stránek bez nutnosti jejich znovu načítání. Na rozdíl od klasických webových aplikací poskytují uživatelsky příjemnější prostředí, ale vyžadují použití moderních webových prohlížečů. Mezi výhody patří odstranění nutnosti znovunačtení a překreslení celé stránky při každé operaci, které jsou nutné u klasického modelu WWW stránek. Pokud například uživatel klepne na tlačítko pro udělení hlasu v nějaké anketě, celá stránka se musí znovu načíst ze serveru, třebaže se na ní jen například aktualizují výsledky hlasování a veškerý zbytek obsahu zůstává stejný. Apache Apache HTTP Server je softwarový webový server. Využívá se u většině webhostingů, kde provozovatel deklaruje podporu technologie PHP. Apache můžete mít nainstalován také na svém počítači. Díky jeho přítomnosti v operačním systému budete moci ladit a testovat své stránky s prvky HTML a PHP kódu. Pokud budete ladit dynamické webové stránky na vlastním počítači, pak budete vlastní instanci Apache serveru potřebovat. V další části knihy si ukážeme, jak na to. Obrázek 1.9: Trojlístek technologií souvisejících s provozem PHP ASP ASP (Active Server Pages) je skriptovací platforma společnosti Microsoft, primárně určená pro dynamické zpracování webových stránek na straně serveru. Dalo by se říci, že šlo v jisté době o konku- 18 PHP 6 začínáme programovat

19 renci technologie PHP, ale celý projekt se příliš neujal. Dnes jde prakticky o mrtvou technologii, kterou nemá valnějšího smyslu se zabývat. Její nástupce, ASP.NET, lze chápat jako širší a komplexnější technologii, která se od ASP v mnoha ohledech fundamentálně liší. ASP.NET ASP.NET je součást.net Frameworku pro tvorbu webových aplikací a služeb. Je nástupcem technologie ASP. Ačkoli název ASP.NET je odvozen od starší technologie pro vývoj webů ASP, obě technologie jsou velmi odlišné. ASP.NET je založen na CLR (Common Language Runtime), který je sdílen všemi aplikacemi postavenými na.net Frameworku. Programátoři tak mohou realizovat své projekty v jakémkoli jazyce podporujícím CLR, např. Visual Basic.NET, JScript.NET, C#, Managed C++, ale i mutace Perlu, Pythonu a další. Aplikace založené na ASP.NET jsou také rychlejší, neboť jsou předkompilovány do jednoho či několika málo DLL souborů, na rozdíl od ryze skriptovacích jazyků, kde jsou stránky při každém přístupu znovu a znovu parsovány. Pro zvládnutí této technologie je nutné být pokročilým vývojářem webů a mít alespoň elementární znalosti vyšších programovacích jazyků. CSS Kaskádové styly, neboli Cascading Style Sheets se zkratkou CSS, je jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. Hlavním smyslem je umožnit návrhářům oddělit vzhled dokumentu od jeho struktury a obsahu. Původně to měl umožnit už jazyk HTML, ale v důsledku nedostatečných standardů a konkurenčního boje výrobců prohlížečů se vyvinul jinak. Starší verze HTML obsahují celou řadu elementů, které nepopisují obsah a strukturu dokumentu, ale i způsob jeho zobrazení. Z hlediska zpracování dokumentů a vyhledávání informací není takový vývoj žádoucí. Doména (internetová) Internetová doména (doménové jméno) je jednoznačné jméno (identifikátor) počítače nebo počítačové sítě, které jsou připojené do internetu. Příkladem doménového jména je Doménové jméno je tvořeno posloupností několika částí oddělených tečkami. Části mezi tečkami jsou také někdy číslovány (odzadu), takže např. cz je doména 1. úrovně, grada.cz je doména 2. úrovně atd. Cena domény na internetu se liší dle oblasti a poskytovatele. Například za běžnou doménu CZ zaplatíte zhruba 250 Kč. Pokud chcete svou prezentaci kupříkladu na adrese cz, pak budete potřebovat nejen doménu (adresu), ale také webhosting (viz níže). Domény i webhosting si můžete objednat u mnoha českých hostingových společností. FTP FTP (File Transfer Protocol) je v informatice protokol pro přenos souborů mezi počítači pomocí počítačové sítě. V případě webových stránek se FTP využívá ke zkopírování hotových webových stránek na webhosting. Abyste mohli stránky na webhostingový server kopírovat skrze FTP, budete potřebovat specializovanou aplikaci, FTP klient. Funkci FTP připojení v sobě obsahují i souborové manažery, například Total Commaner. HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na internetu. Je charakterizován množinou značek (tzv. tagů) a jejich atributů definovaných pro danou verzi. Mezi značky se uzavírají části textu dokumentu a tím se určuje význam (sémantika) obsaženého textu. Názvy jednotlivých značek se uzavírají mezi úhlové závorky < a >. Část dokumentu tvořená otevírací značkou, nějakým obsahem a odpovídající ukončovací značkou tvoří tzv. element (prvek) dokumentu. Například <strong> je otevírací značka pro zvýraznění textu a <strong>červená Karkulka</strong> je element obsahující zvýrazněný text (tučné písmo). Součástí obsahu elementu mohou být další vnořené elementy. Internet a základní pojmy 19

20 Obrázek 1.10: FTP připojení v programu Total Commander JavaScript JavaScript je multiplatformní, objektově orientovaný skriptovací jazyk, který se zpravidla používá jako interpretovaný programovací jazyk pro WWW stránky, často vkládaný přímo do HTML kódu stránky. Jsou jím obvykle ovládány různé interaktivní prvky tlačítka, textová políčka, formuláře nebo tvořeny animace a efekty obrázků. Jeho syntaxe patří do rodiny jazyků C/C++/Java. Slovo Java je však součástí jeho názvu pouze z marketingových důvodů a s programovacím jazykem Java jej vedle názvu spojuje jen podobná syntaxe. Javascript lze nejlépe co do syntaxe připodobnit k PHP. Novější podobou Javascriptu je asynchronní Javascript, nazývaný AJAX (viz výše). MySQL databáze MySQL je multiplatformní databáze. Komunikace s ní probíhá jak už název napovídá pomocí jazyka SQL. Podobně jako u ostatních SQL databází se jedná o dialekt tohoto jazyka s některými rozšířeními. V rámci programování dynamických webových stránek jde o nejpoužívanější databázový systém na světě. Většina webhostingů podporujících jazyk PHP nabízí také databázi MySQL, kterou lze právě s PHP snadno propojit do podoby dynamické webové aplikace. Stejně jako server Apache, také databázi MySQL můžete provozovat na vlastním počítači a simulovat si tak webové prostředí. V další části knihy si ukážeme, kterak si databázi nainstalujete na lokální počítač. Obrázek 1.11: Správa MySQL databáze v PhpMyAdmin PHP PHP (původně Personal Home Page, nyní obvykle rekurzivně Hypertext Preprocessor) je skriptovací programovací jazyk, určený především pro programování dynamických internetových stránek. Nejčastěji se začleňuje přímo do struktury jazyka HTML, XHTML či XML, což lze využít při tvorbě webových aplikací. PHP lze použít i k tvorbě konzolových a desktopových aplikací. PHP je vedle ASP 20 PHP 6 začínáme programovat

21 jedním ze dvou nejrozšířenějších skriptovacích jazyků pro web. Oblíbeným se stal především díky jednoduchosti použití, bohaté zásobě funkcí, a tomu, že kombinuje vlastnosti více programovacích jazyků a nechává tak vývojáři částečnou svobodu v syntaxi. Tag Tag je označení pro kódovou značku HTML nebo XHTML jazyka. Tag je obvykle ohraničen znaky < a >. Pomocí tagů lze například stanovit základní oddíly stránky, vymezit formátování textu (ne v XHTML, tam je potřeba využít CSS) apod. S tagy v nejrůznější podobě se blíže setkáte u tvorby sebejednodušší WWW stránky. Typické příklady tagů: <a>, <img>, <head>, <body> apod. Webhosting Webhosting je pronájem prostoru pro webové stránky na cizím serveru. Pronajímatel serveru bývá označován jako poskytovatel webhostingu (webového prostoru). Díky webhostingu si můžete své webové stránky umístit na internet, aniž byste museli mít vlastní server. Ceny za webhosting se pohybují od pár korun až po několik tisíc za měsíc. Existuje i bezplatná varianta, tzv. freehosting. Freehosting obvykle nezahrnuje žádné záruky ohledně funkčnosti, má omezenou technickou podporu. Často je s freehostingem spojeno umisťování reklamy na stránkách. Webhosting je pouze samotné umístění stránek na serveru poskytovatele. Aby se uživatelé internetu ke stránkám dostali, je potřeba mít zaregistrovánu doménu (např. s názvem společnosti). Alternativně lze u některých firem zdarma využít domény 3. řádu, například vasejmeno.poskytovatel.cz. V případě vyšších nároků na rychlost, spolehlivost a na podporované služby a technologie je dalším krokem serverhosting, kdy je zákazníkovi pronajímán celý server. XHTML XHTML (zkratka anglického extensible hypertext markup language rozšiřitelný hypertextový značkovací jazyk ) je značkovací jazyk pro tvorbu hypertextových dokumentů v prostředí WWW vyvinutý W3C. Původně se předpokládalo, že se stane nástupcem jazyka HTML, jehož vývoj byl verzí 4.01 ukončen. V roce 2007 však došlo k založení pracovní skupiny, která má za cíl vytvořit novou verzi HTML, která ponese označení HTML 5 a její XML variantu XHTML 5. Vedle toho paralelně pokračuje i vývoj XHTML Filosofie tvorby webových aplikací Nezkušení autoři webových aplikací a dynamických stránek dělají často velkou chybu, když k vývoji přistupují zbrkle, nepromyslí si celý projekt a vrhají se překotně na různé části tvůrčí činnosti. Z vlastní zkušenosti vás chci varovat před chybami, které mohou hned na začátku pohřbít váš projekt, aniž byste napsali jedinou webovou stránku Jak postupovat při plánování projektu www stránek Nejdůležitější ze všeho je před započetím jakékoli práce hodně přemýšlet, vše si sepsat a zvážit, a až poté začít s realizací. 1. Nejprve si stanovte cíl svého snažení. Některé cíle mohou znít jednoduše, ale problematika projektů bývá složitější, než to na první pohled vypadá. 2. Stanovte si, jaké technologie pro realizaci využijete a jak by mělo vypadat vypracování jednotlivých kroků. 3. Nezačínejte tvorbu jen a pouze od vzhledu a od výsledného efektu. Webové stránky mají dobrý základ v rozvržení souborové struktury, provázanosti jednotlivých částí a jednoduché změně grafiky pomocí CSS stylů. 4. Pokud je to možné, konzultujte vývoj, vzhled a chování webu s osobou, která má v této problematice přehled poslouchejte názory druhých. Internet a základní pojmy 21

22 5. Dbejte dodržování validity a testujte stránky vždy v několika prohlížečích na několika počítačích, ideálně i takových, které mají jiný operační systém než Windows. 6. Zvažte možnost vytvoření mobilní verze stránek. Prohlížení webových stránek z mobilu či tabletu je dnes zcela běžné. 7. Propagujete-li svůj web či produktové stránky, je nesmírně důležité dodržet zásady SEO pro snadnou indexaci stránek vyhledávači. Můžete také využít marketing velkých vyhledávačů pro zviditelnění svého obsahu Nejčastější chyby, které pohřbí váš projekt Nelze samozřejmě popsat všechny chyby, které lze při přípravě webových stránek udělat, existují ale určité typické okruhy pochybení, kterým se lze vyhnout. Přehnané ideály. Není nic horšího, než jít do vývoje webového projektu srdcem. Pokud tedy máte neomezené množství času a tvůrčí energie, pak je to možná cesta dobrá, ale v dnešní době se často stane, že v důsledku absence času se obrovský projekt může zvrhnout v nikdy nedokončené dílo. Svůj nápad konzultujte s ostatními vývojáři ještě před jeho započetím. Je vhodné si o svých záměrech promluvit také s běžnými uživateli internetu, kteří na celou tvorbu mohou mít odlišný názor než profesionálové. Rozhodně si nedávejte velké cíle na začátku tvorby. Pokud jsem ještě nezačal vytvářet ani jednoduché stránky, je holý nesmysl doufat, že zvládnu e-shop, vlastní redakční systém, sociální síť nebo zpravodajský portál. Přínos projektu. Existují projekty, které budete mít chuť realizovat, protože by vám zjednodušily práci. Není ale jisté, zda o danou službu nebo webovou aplikaci budou mít zájem i další uživatelé. Je také možné, že podobná nebo ještě lepší služba již existuje a vy tak skončíte se svým projektem jako chudý příbuzný. Technologické zázemí. Přemýšlejte, zda máte pro daný projekt vhodné technologické zázemí. Například velké projekty jen těžko zprovozníte na bezplatném webhostingu. K takovým je potřeba vlastní nebo pronajatý server na páteřní síti. One man show. Pokud tvoříte daný projekt sami, je nutné zvážit, zda na něj máte. Někdy je lepší přivzít k projektu dalšího vývojáře. Zde je ale nutná naprostá souhra, respekt a spolehlivost týmu. Omezená funkčnost. Řadu dobrých projektů pohřbila taková malichernost, jako omezená funkčnost. V souvislosti s webem je zejména důležité, ať je vaše aplikace bezpečná, neobtěžuje uživatele desítkami reklamních bannerů a ať funguje ve všech standardních prohlížečích. Pokud tyto podmínky nesplníte, pak se vystavujete riziku odlivu uživatelů. Špatná dostupnost. Tento bod má hodně společného s výběrem webhostingu. Ne vždy je nejlevnější hosting ideálním řešením. Může mít výpadky, špatně interpretovat skriptovací jazyky serveru apod. Také ovšem neplatí, že by předražený webhosting vždy poskytl extrémní přidanou hodnotu. Grafický paskvil. V neposlední řadě jde také o grafiku. Sólový vývojář webových stránek musí být nejen analytik či programátor, ale také grafik. Jednoduchá grafika realizovaná v Malování nadchne asi jen přívržence obsahové části. Ale i ty může odradit. Na moderních stránkách se vyskytuje mnoho grafických prvků, obrázků, ikon, bannerů a animací. 1.4 Webhosting a FTP připojení Pro zprovoznění vlastních webových projektů v internetu budete potřebovat několik málo věcí. Jednak jde o doménu, tedy nějakou internetovou adresu, kterou uživatelé zadají do prohlížeče, když se budou chtít na vaše stránky dostat. Dále bude zapotřebí webhosting, kam skripty (coby soubory) uložíte. Ono samotné uložení stránek na webhosting se nejčastěji děje pomocí FTP připojení, takže v neposlední řadě budete muset nainstalovat FTP aplikaci, takzvaného klienta. 22 PHP 6 začínáme programovat

23 1.4.1 Doména aneb adresa stránek Adresa vašich stránek závisí do značné míry na tom, co si zaplatíte. Pokud chcete zatím jen zkoušet vývoj webových stránek a chcete nějakou zkušební adresu, pak je ideální zvolit nějakou bezplatnou doménu třetí úrovně, která může mít například takovouto podobu: Pokud ale víte, že chcete doménu druhé řádu, tedy lepší adresu, pak si můžete zaplatit například adresu Kromě koncovky CZ může mít samo sebou doména i jiné názvy, jako kupříkladu COM, ORG, EU, INFO, BIZ apod. Průměrná cena ročního poplatku za registraci a správu internetové domény činí zhruba 250 Kč. Dostupnost vámi požadovaného názvu domény druhé úrovně si můžete vyzkoušet u některého poskytovatele webhostingu, například na této adrese: forpsi.com/domain. Doménu i webhosting lze objednat samostatně jakožto oddělené služby. Toto řešení je ale vhodné spíše pro IT profesionály, neboť zakoupená adresa se musí správně nasměrovat na webhosting, jinak nebudou stránky korektně fungovat. Pokud se na ono směrování příliš necítíte, pak je lepší zakoupit doménu druhé úrovně současně i s hostingem u jednoho poskytovatele, který nasměrování a správnou funkci zajistí Výběr webhostingu Na českém trhu existují desítky či stovky firem, které webhosting nabízí. Porovnávat lze podle ceny, ale nejlépe, když si srovnáte parametry jednotlivých hostingů a nabízených služeb. Kromě toho je občas vhodné prohledat diskusní fóra (k tomu postačí Google) a pročíst si názory uživatelů, jak jsou spokojeni s danou službou. Není totiž opravdu vhodné volit nejlevnější nebo nejdražší variantu. Co by měl základní webhosting splňovat? 1. Měl by podporovat nejen technologie, které potřebujete při spuštění webových stránek, ale také technologie, které byste mohli potřebovat následně. Samozřejmostí je podpora HTML stránek, určitě vybírejte jen hostingy s podporou skriptovacího jazyka PHP. To je dobrý technologický základ. Nejlépe je, když je v ceně hostingu již od začátku také MySQL databáze. 2. Pro rozsáhlé projekty je důležitý také poskytovaný prostor. Na jednoduché stránky vám musí bohatě postačit 50 MB prostoru, chcete-li ale složitější stránky s objemným obsahem (např. video), tak je vhodnější sáhnout po několika GB alternativě. Hodláte-li hostovat objemné dynamické stránky, pak se zajímejte také o prostor, jenž má vyhrazena MySQL databáze. 3. Ač v dnešní době již asi nenarazíte na webhosting bez FTP připojení, dejte si pro jistotu pozor na fakt, zda webhosting podporuje plnohodnotné FTP. Některé, zejména bezplatné webhostingy podporovaly tzv. WebFTP, což rozhodně není ideální cesta k umisťování a správě HTML souborů. 4. Pokud chcete mít k hostingu také ové schránky, pak se u provozovatele zajímejte, zda je tato služba v ceně, nebo se za jednotlivé schránky připlácí. Pokud již budete využívat například adresu pak je ideální mít ové adresy ve tvaru info@firma.cz apod. 5. Sledujte, jaké garance a dostupnost poskytovatel zajišťuje. Za dlouhodobý výpadek by měl mít zodpovědnost. Také si prostudujte, na jakou technickou podporu máte nárok. Malé a obvykle levnější hostingy například nenabízí možnost telefonické konzultace, jen ovou cestou. To je ale pro rychlé vyřešení technického problému nedostačující FTP protokol Vzhledem k tomu, že je File Transfer Protocol (FTP) prakticky nejrozšířenějším protokolem pro kopírování souborů na webový server, je důležité vlastnit některý z programů spadajících do kategorie FTP klient. FTP klient umožňuje manipulaci se soubory, které tvoří obsah webu. Lze s ním provádět Internet a základní pojmy 23

24 veškeré možné operace se soubory na webu, tj. přenos souborů na server, vytváření adresářů na serveru, mazání souborů a adresářů na serveru. FTP klient poskytuje naprostou kontrolu nad obsahem webu. Doporučení FTP klienti Total Commander. Pravděpodobně nejoblíbenější a nejrozšířenější souborový manažer, který vyniká širokým spektrem funkcí, ale stále si zachovává přehlednost, jednoduchost a rychlost. Ideální pomocník nejen coby souborový správce, ale také jako FTP klient v jednom. Program lze zdarma využívat po dobu 30 dnů, licence stojí cca 700 Kč a v ceně jsou všechny budoucí vydané aktualizace programu. Web: FileZilla. Tento bezplatný FTP klient nabízí základní funkce, ale není složitý a má velmi jednoduché ovládání. FileZilla patří do kategorie open source, distribuovaný pod GNU General Public Licencí, je tedy volně šiřitelný. Jeho binární soubory jsou dostupné pro operační systémy Windows, Linux a Mac OS X. Samozřejmostí je podpora přenosů FTP, SFTP a FTPS (FTP přes SSL/TLS). Web: WinSCP. WinSCP je český volně šiřitelný FTP a SCP (Secure Copy) klient pro Windows používající SSH. Jeho hlavním účelem je bezpečné kopírování souborů mezi lokálním a vzdáleným počítačem. Mimo této základní funkce umožňuje WinSCP provádět některé další operace se soubory. Ovládání WinSCP je založeno principu Norton Commanderu, v levém panelu se zobrazuje lokální složka a v pravém vzdálený adresář. Vzhled seznamu souborů je stejný jako v Průzkumníku Windows. Web: Zkušební bezplatný webhosting Najít v dnešní době kvalitní placený hosting pro vlastní web je velice obtížné. Najít solidní hosting zdarma je skoro nemožné. Přesto se pokusím srovnat několik projektů, které nabízejí zajímavé hostovací služby pro vaše webové stránky. Pokud nahlédneme trochu do minulosti, pak můžeme zavzpomínat na doby, kdy hosting webových stránek patřil ke zbožnému přání a nedostupnému snu zejména pro běžné uživatele, dnes bychom asi řekli pro bloggery. Kromě toho, že byl hosting drahý, obvykle bez podpory skriptovacích jazyků a databáze, také ceny doménových jmen se počítaly na tisícikoruny. Dnes, kdy lze doménu s různou koncovkou získat do tří stokorun, je situace jiná i na poli s hostingem. Do českých předražených vod internetu, kde mnoho uživatelů raději hostovalo v zahraničí, vstoupili menší poskytovatelé webového prostoru a udělali v rámci konkurenčního boje pořádný vítr v cenících velkých webhostingových společností. Příkladem za všechny může být Banan nebo Ebola. Ač je na tyto nízkonákladové hostingy občas slyšet kritika, můžeme jejich autorům poděkovat. Nebýt těchto projektů, asi by byl hosting webů stále zbytečně předražený. Endora: Maximum služeb za 0 Kč Freehosting Endora byl od samého začátku navržen tak, aby jako první v ČR nabídl služby, za které se běžně platí, zcela zdarma. Nabízí solidní 2 GB prostoru pro FTP úložiště a databáze pro neomezené množství domén. Veškeré nastavení se provádí velmi snadno přes přehlednou webovou administraci. K dispozici jsou připraveny i videonávody. Asi největší výhodou tohoto hostingu je možnost spravovat více domén na jeden uživatelský účet. Pokud tedy vytváříte web pěti různým zákazníkům, můžete je všechny spravovat pomocí jednotného rozhraní. Na každý web tak máte 2 GB. Dohromady tedy dostanete na pět webů celkem 10 GB prostoru. Na každý web může být navázána jak doména druhého řádu, tak doména třetího řádu, kterou vám Endora poskytne zdarma. Hosting podporuje technologie PHP, MySQL (včetně PhpMyAdmin), dále umožňuje spouštět skripty pomocí služby CRON. Velkou předností je možnost nainstalovat redakční 24 PHP 6 začínáme programovat

25 systémy Wordpress, Joomla, Drupal apod. pomocí jediného klepnutí v administraci. Zprovoznit tyto systémy je často nelehké, ale v podání tohoto hostingu jde o otázku několika vteřin. Obrázek 1.12: Administrace služeb Endora Free webhosting Endora funguje ze sponzorských darů, na oplátku na každý web do patičky automaticky umisťuje pět sponzorovaných odkazů. Provozovatel se dušuje, že tyto odkazy nijak neomezují váš projekt, neodkazují totiž na pochybné nebo závadné stránky. Dále je možnost ovlivnit umístění i grafiku těchto sponzorovaných odkazů. Nově nabízí provozovatel placený webhosting, kde za cca 15 Kč měsíčně dostanete 5 GB prostoru pro každou doménu a vaše weby budou zbaveny zmíněných reklamních odkazů. Web: IC.CZ: Dostačuje na základní projekty Projekt Endora je poměrně nový, ale IC.CZ funguje již řadu let. Zdarma vám webhoster nabízí 250 MB prostoru, PHP, MySQL, CRON, přehlednou administraci a další služby. Na základní a méně náročné projekty je tento hosting jako dělaný. Buď si můžete zvolit webovou adresu třetí úrovně z nabízených variant, nebo za dvě stokoruny zaregistrovat doménu druhého řádu, která bude na váš freehosting přímo nasměrována. Freehosting má v záhlaví úzkou lištu se sponzorskými odkazy, jejíž barvu si můžete nastavit dle libosti. Provozovatelé nabízejí také placenou variantu hostingu, která má zhruba desetkrát větší prostor pro vaše stránky a pro databázi, je rychlejší, zálohovaná a dokonce k hostingu můžete dostat doménu druhého řádu zcela zdarma. Cena tohoto programu je 600 Kč na rok. Web: Obrázek 1.13: Registrace služeb IC.cz Internet a základní pojmy 25

26 Webzdarma: Neurazí, neoslní Tato služba funguje na internetu již také mnoho let. Provozovatel na svém webu nabízí MB prostoru podle toho, jaký typ reklamy si na webu necháte líbit (reklamní pás odkazů nebo banner). Kromě FTP účtu lze využít technologie PHP a MySQL, zdarma zaregistrovat doménu třetí úrovně nebo využívat ovou schránku o velikosti 50 MB. Služba jako taková je vhodná na statické nenáročné prezentace, i když provozovatel uvádí možnost využít a instalovat redakční systémy, zkušenosti uživatelů jsou trpké gigantické produkty jako Joomla fungují na tomto webhostingu poměrně pomalu. Web: ASPone: Pro nadšence do technologie ASP.NET Bezplatný hosting pro skriptovací jazyk ASP.NET takříkajíc abys pohledal. Existují ale možnosti, jak testovat tuto technologii bezplatně. Webhosting ASPone nabízí zdarma 40 MB pro váš projekt včetně možnosti využití databáze MS SQL a dalších technologií společnosti Microsoft. ASPone je jako jediný ASP.NET 3.5 freehosting zdarma, jenž nabízí všem uživatelům možnost vyzkoušet si nový Windows Server Zajímavé je, že i u bezplatných účtů je možné využít technickou podporu nebo obnovu dat ze záloh po dobu jednoho měsíce. Web: Shrnutí Vybrat dobrý bezplatný hosting je skutečně složité. Věřte ale, že mnohem těžší je vybrat dobrý hosting placený. U bezplatného jej vyzkoušíte a maximálně svůj web přesunete jinam. U placeného obvykle zaplatíte cenu na rok dopředu a jste tak s poskytovatelem hostingu svázáni. 1.5 Struktura souborů a složek Webové stránky v XHTML nebo PHP či obvykle v kombinaci obou technologií nejsou ničím jiným než skupinou souborů. Soubory, které tvoří webové stránky lze rozdělit do několika základních skupin Základní typy souborů HTML soubory. Tyto soubory obsahují základ webových stránek, tedy (X)HTML kód, který dokáže internetový prohlížeč zobrazit jako webovou stránku. Příponou souborů obvykle bývá koncovka HTML nebo HTM. Úvodní stránka se označuje index.html resp. index.htm. PHP soubory. Pokud je web tvořen kombinací HTML kódu a PHP skriptu, pak jsou všechny soubory webových stránek obvykle označeny koncovkou PHP. Úvodní stránka je v tomto případě index. php. CSS soubory. Tyto soubory definují kaskádové styly. Na jednoduchém webu si obvykle vystačíme s jediným souborem, který má koncovku CSS. Obrázky. Webové stránky obsahují obvykle různé typy obrázků. Může jít o grafické prvky návrhu stránky, bannery, tlačítka, fotogalerie apod. Obrázky, které se na webu používají, by měly být ideálně ve formátech JPG, GIF nebo PNG. Javascript. Kód Javascriptu může být zahrnut přímo v HTML nebo PHP souborech, obvykle je ale výhodnější umístit všechny skripty (funkce) do jediného souboru. Poté se můžete z různých stránek odvolávat na jeden soubor s Javascriptem a pokud dojde k nějaké změně, provádíte ji na jednom místě v jediném souboru a nejste nuceni editovat desítky souborů. Soubory s Javascriptem mají obvykle koncovku JS. 26 PHP 6 začínáme programovat

27 1.5.2 Rozdělení do složek Prvním a zlatým pravidlem je, že není ideální všechny soubory dávat do jediné složky, tedy na jedno místo. Do kořenové složky webových stránek je u jednodušších webů v HTML vhodné umístit soubory webových stránek. Ostatní soubory je velice vhodné umístit do složek, tak abyste měli lepší přehled. Příklad souborové struktury jednoduchého webu [images] [js] [gallery] [styles] fotogalerie.html index.html o_me.html Výše uvedený příklad obsahuje čtyři adresáře. Do images bychom umístili grafiku webu mimo fotografií. Do složky js bychom dali javascript. Složku gallery bychom využili k ukládání fotografií a složka styles by obsahovala CSS styly. Následují tři HTML soubory základní index.html a dvě podstránky. U stránek kombinujících HTML a PHP bychom mohli strukturu dále rozšířit. Příklad struktury webu kombinovaného s PHP [administrator] [images] [includes] [js] [gallery] [styles] fotogalerie.php index.php o_me.php Struktura vzorové prezentace v PHP se liší o několik detailů. Webové stránky mají koncovku PHP. Složka administrator obsahuje například administrační rozhraní webu pro jeho dynamickou úpravu (redakční systém). Složka includes obsahuje vkládané soubory (hlavička webu, pata, připojení do databáze, PHP funkce apod.) Zásady a doporučení V této části jsme se dozvěděli, že webové stránky obsahují kromě hypertextových dokumentů také obrázky, CSS styly, případně prakticky jakékoli soubory určené pro stahování (download). Také jsme si ukázali, jak by mohla vypadat adresářová struktura jednoduchého webu. Nyní vše doplníme o zásady, které není radno při práci se soubory WWW prezentace porušovat. Jména souborů a adresářů volte kratší, bez mezer (možno nahradit znakem _) a bez diakritiky či speciálních znaků. Jelikož jsou internetové prezentace velmi často umístěny na serverech s operačními systémy, jejichž souborový systém rozlišuje velká a malá písmena v názvech (Unix, Linux) doporučuje se používat pouze malá písmena (například oblíbený FTP klient Total Commander má implicitně zapnutou volbu převodu na malá písmena při přenášení souborů na server). Odkazy na soubory v rámci prezentace uložené na jednom serveru (u offline verze na jednom disku) je vhodné zapisovat relativně výchozím adresářem je vždy adresář, kde je uložen soubor, Internet a základní pojmy 27

28 ze kterého odkazujeme. Pouze odkazy na jiný server (u offline verze na jiném disku) se zapisují úplnou (absolutní) specifikací. Tím zajistíme snadnou přenositelnost celé prezentace na jiný server (u offline verze na jiný disk). Výchozí (vstupní) soubor prezentace má (podle typu serveru) předdefinované jméno. Nejčastěji je to index.html (index.htm nebo index.php). Obrázky upravte vždy na takový rozměr, jaký přesně budete potřebovat. Pokud využijete přímo fotku z fotoaparátu, pak bude její načítání trvat zbytečně dlouho a pokud obrázek zmenšíte přímo v HTML kódu stránky, pak se můžete smířit s jeho deformací nebo ztrátou kvality. 1.6 Software potřebný pro vytváření webových projektů Teoreticky vzato by vám k vytváření webových stránek mohl stačit základní textový editor. Pokud ale vytvářením webů myslíme také grafický návrh, umístění stránek na FTP server a otestování v prohlížečích, pak se s textovým editorem zdaleka nelze spokojit. Navíc, není textový editor jako textový editor. Základní skupiny potřebných programů Editor HTML stránek s podporou PHP (textový editor); FTP klient; grafické aplikace; internetové prohlížeče; testovací software HTML a PHP editory Editor HTML stránek je základním prostředkem pro vytváření webových stránek. Editory lze rozdělit na dvě hlavní skupiny WYSIWYG editory a strukturální editory. První skupinou se nemá smysl zabývat. Jde o editory pro naprosté začátečníky. My se při tvorbě PHP projektů budeme muset držet strukturálních multi-jazykových editorů. My se ale nadále budeme zásadně věnovat příkladům v HTML a PHP kódu, proto je nutností mít nainstalován některý ze strukturálních editorů. Takže podle definice je HTML editor softwarová aplikace pro vytváření webových stránek. HTML stránka jako taková může být napsána prakticky v libovolném textovém editoru, ale právě HTML editory poskytují řadu podpůrných nástrojů a funkcí, které tvorbu usnadňují a zrychlují. Mezi tyto funkce patří například kontrola syntaxe, automatické doplňování kódu či nástroje na správu celého webu. + mnoho funkcí v jediném a rychlém editoru + zvýraznění syntaxe řady jazyků (i v kombinaci) + kontrola validity, řada testovacích funkčností složitější obsluha, nutnost znalosti HTML a PHP kódu Doporučený editor Za léta praxe ve vytváření HTML stránek a PHP kódu se mi osvědčil jeden významný, bezplatný, český HTML editor, který svou kvalitou a poměrem cena/výkon naprosto zastiňuje cokoli jiného. Jmenuje se PSPad a naleznete jej na webových stránkách Jde o velmi zajímavý editor určený programátorům nejrůznějších programovacích jazyků. Program neobsahuje nekonečnou řadu zbytečných funkcí, které většina z nás stejně nikdy nevyužije a soustředí spíše na jednoduchost, přehlednost a rychlost. Nejzajímavější pro mne byla funkce šablony, která umožňuje definovat určitou část programové kódu (či něčeho obdobného) pod definovaný příkaz a při programování tento kód rychle vyvolat. Pro započetí používání této funkce a nadefinování příslušných bloků kódu je nutno si pročíst nápovědu, která je velmi pěkně zpracována. V poslední verzi byla 28 PHP 6 začínáme programovat

29 přidána možnost definice vlastních klávesových zkratek pro určité příkazy, což je velmi oblíbená funkce. Program podporuje přes 30 různých prostředí (PHP, HTML, XML, ASP, SQL, Python, apod.). Hlavní funkce a výhody programu PSPad: bezplatný, jednoduše instalovatelný; široká podpora různých prostředí; velice podrobné funkce na práci s textem (záměny, nahrazování apod.); plná podpora různých kódování; práce s více soubory současně na záložkách; předpřipravené šablony; podrobné a speciální funkce pro práci s HTML kódem (komprese, validace); vlastní HTML prohlížeč s testováním dle rozlišení. Obrázek 1.14: Program PSPad editor Grafické aplikace Ve firmách zabývajících se vytvářením webových stránek je obvykle k dispozici samostatný grafik a programátoři HTML kódu se tak nemusejí zabývat grafikou. Pokud s HTML začínáte, budete muset být dílem také grafikem. Budete ale potřebovat jen několik málo typů aplikací. Pro začátek si vystačíte s nějakým základním editorem obrázků, ideálně s all-in-one řešením, které vám dovolí obrázky prohlížet, upravovat, tvořit, měnit, bude podporovat efekty, ořez a důležité obrázkové formáty. Ideálním příkladem je bezplatný IrfanView. Lépe se mi ale osvědčil český software Zoner Photo Studio, který můžete kromě webu využít jako primární editor fotografií a obrázků včetně podpory formátu RAW. Program stojí od jedné do dvou tisícovek v závislosti na verzi FTP klient O FTP klientech jsme již všechny důležité informace napsali. Vřele doporučuji využívat program Total Commander a to nejen jako výborný FTP klient, ale také jako správce souborů. Zkušební verzi si můžete stáhnout na stránce a plná verze stojí necelou tisícovku. Za tyto peníze ale máte předplaceny doživotní aktualizace programu. Internet a základní pojmy 29

30 1.6.4 Internetové prohlížeče Je velice důležité testovat vytvořené webové stránky ve všech internetových prohlížečích, které lze považovat jako majoritní. Je totiž možné, že se některé prvky (i přes dodržení validity stránek) nebudou v některém prohlížeči zobrazovat korektně. Určitě bychom měli webové stránky testovat minimálně v tomto kvartetu programů: Internet Explorer; Mozilla Firefox; Google Chrome; Opera. Kromě tohoto je dobré odladit webové stránky také pro solidní zobrazení na přenosných zařízeních. Řada lidí dnes využívá chytré telefony či tablety jako prohlížeč internetových stránek Testovací programy Na internetu lze sehnat řadu testovacích programů. Minimálně je dobré využívat aplikaci IE Tester, která simuluje zobrazení stránek ve starších verzích prohlížeče Internet Explorer. Dále lze sáhnout po ladících doplňcích pro prohlížeče. Nejvíce je jich dostupných pro Mozilla Firefox. Osobně ale využívám integrovaný doplněk v prohlížeči Opera, který se nazývá Opera Dragonfly. Dokáže odladit HTML, svázat jednotlivé elementy s CSS stylem a zkontrolovat průběh JavaScriptu. 1.7 Validita a internetové prohlížeče Validita charakterizuje, zda je stránka v pořádku. Logicky, pokud není stránka validní, pak je de facto invalidní. Validace je pak opravování chyb v zdrojovém kódu WWW stránky. Pokud bude web obsahovat mnoho chyb je možné, že se v některém prohlížeči bude zobrazovat špatně. Ještě horší je, pokud se vám web ukazuje v každém prohlížeči jinak. Proto je tu validace webu. Pomocí webových nástrojů opravíte všechny chyby v kódu a tím docílíte správného zobrazení vaší WWW stránky Validní vs. Invalidní kód Nejprve si uveďme základní a velmi jednoduchý příklad kódu, který je validní a také kódu, který validní není. Validní verze <div> <p>validní příklad</p> </div> Invalidní verze <div> <p>invalidní příklad</div> </p> Validní příklad je napsán správně. Všechny tagy jsou ukončeny postupně. Invalidní příklad je špatně. V tomto příkladu máme otevřené DIV a v něm se nachází P, který není uzavřen. Je uzavřen až za tagem DIV, a proto ho prohlížeč již nevidí ukončovací značka P je na tomto místě k ničemu K čemu slouží validace webu? Validní kód je zcela přehlednější, příjemnější, a dokonce se i rychleji načítá. Proto se vyplatí validovat web. Po opravení všech chyb je dobré zhlédnou svojí stránku v několika nejpoužívanějších 30 PHP 6 začínáme programovat

31 prohlížečích. Pokud máte web správně napsaný, měl by se zobrazovat ve všech prohlížečích stejně. A to je také nesmírná výhoda validace, proto je validování důležité. Pokud se web v prohlížečích nezobrazuje správně a je validní, bude chyba na straně prohlížeče. Jediné, co v této situaci můžeme udělat, je chybu nahlásit nebo doufat, že v nové verzi prohlížeče tato chyba již nenastane. Důležité je, snažit se psát stránky rovnou validní. Po dokončení webu jej validátorem pouze zkontrolovat a opravit nalezené chyby. Nikdo není dokonalý a překlepnout se může každý. Validace také urychluje načítání stránek, protože s nevalidním webem má prohlížeč více práce. Závěrem si položme otázku. Má opravdu význam validovat web? Ano! Má. Pokud chcete, aby váš web vypadal profesionálně a načítal se co nejrychleji. Až se na web podívá profesionál, bude mu jasné, že právě tenhle web nedělal žádný amatér Testujeme, zda jsou stránky validní Stačí navštívit některou stránku, které jsou uvedené níže a zkontrolovat svůj web. Existují také různé doplňky do prohlížečů, které validátor integrují do vašeho prohlížeče. V mé oblíbené Opeře lze pomocí krkolomné klávesové zkratky Shift+Ctrl+Alt+U spustit přímo validaci aktuálně načtené webové stránky. Odkazy na validátory Oficiální validátor Český validátor Internet a základní pojmy 31

32

33 2. Seznámení s technologiemi XHTML a CSS V první kapitole jsme se společně seznámili se základy internetu, webových stránek, nejrůznějších technologií i s důležitými pojmy. Pokud internet používáte aktivně, pak vám alespoň část zmíněných pojmů byla minimálně okrajově známá. Druhá kapitola se již věnuje blíže vývoji webových stránek. Seznámí vás se způsobem, kterak je zapisován HTML kód. Tato část knihy je důležitá zejména coby úvod k PHP technologii. Znalost tvorby webových stránek je totiž pro programátora PHP kódu základním stavebním kamenem. 2.1 Zdrojový kód HTML stránek ve značkách Každý programovací jazyk má svůj zdrojový text vytvořený programátorem. Stejně tak HTML má svůj zdrojový text, který popisuje grafickou podobu stránky v prohlížeči. Jako každý jazyk i HTML má svoji přesnou syntaxi, kterou je nutno dodržovat, ovšem zároveň je velice přizpůsobivý. I když se dopustíte nějakých chyb, dokáže většinou prohlížeč zobrazit prakticky celou stránku tak, jak vypadat má. Více než tři čtvrtiny stránek na internetu nemají zcela správnou syntaxi, a přesto jsou zobrazeny správně. Tato flexibilita prohlížečů je dána rychlým vývojem HTML, prohlížeč tedy přímo předpokládá, že se setká s nesprávnou syntaxí, jako je vynechání značky, špatné formátování, chybějící uvozovky u hodnot parametrů apod. Zdrojový text HTML má vždy pouze textový formát ASCII, který má příponu HTM nebo HTML. V tomto textovém formátu je také interpretován prohlížečem podoba ASCII je tedy finální a není dále kompilována do žádného binárního souboru, jako EXE, DLL nebo COM. Toto je zásadní rozdíl od klasických programovacích jazyků, kdy se program musí před použitím zkompilovat. Všechny ostatní součásti stránky, jako obrázky, zvuky, videoklipy nebo jakékoli jiné binární soubory, nejsou umístěny ve zdrojovém kódu HTML, ale v externích souborech, na něž ze zdrojového textu odkazujete Značky neboli tagy Veškeré příkazy, v HTML nazývané značky (dříve se používalo názvu tag), jsou uzavřeny ve špičatých závorkách <> včetně všech svých parametrů, které značku ovlivňují. Všechno ostatní, co se mimo tyto značky nachází, je text, který prohlížeč zobrazí. HTML používá párové a nepárové značky, kdy párové mají vliv na určitou část dokumentu, např. na text (kurziva, tučnost, zarovnání apod.) jeho první část se nachází před danými prvky a druhá za nimi, což přesně vymezuje část, na niž má mít tato párová značka vliv. Nepárová značka naopak má vliv sama na sebe, definuje v HTML nějaký prvek, například obrázek, nebo má vztah k celému dokumentu. Seznámení s technologiemi XHTML a CSS 33

34 2.1.2 Párové vs. nepárové značky Párová značka tedy obecně vypadá takto: <značka> kód HTML, na nějž má mít značka vliv </značka> kdežto nepárová takto: <značka> Tyto znalosti můžeme aplikovat na ucelený příklad <IMG SRC="logo.gif" ALIGN="left"> <FONT SIZE="3" COLOR="black"> Vítejte na stránkách společnosti Firma, s.r.o. </FONT> <BR><BR> <FONT SIZE="2"> <I>Společnost Firma se zabývá výrobou nábytku.</i> </FONT> Na výše uvedeném příkladu vytrženém z kontextu stránky jsou jak značky nepárové (IMG a BR), tak značky párové (FONT a I). Zjednodušeně lze tedy říci, že celý zdrojový text HTML se skládá z párových a nepárových značek a textu, který je umístěn mimo tyto značky, tedy mimo špičaté závorky. Na příkladu také vidíte kód zapsaný v HTML, pro srovnání se podívejte, jak by vypadal ve validním XHTML, pakliže by obsahoval i další důležité prvky stránky (hlavička a pata dokumentu). <img src="logo.gif" align="left" alt=""> <h1> Vítejte na stránkách společnosti firma, s.r.o. </h1> <br /><br /> <div> <em>společnost firma se zabývá výrobou nábytku.</em> </div> Správně by v XHTML měly být dále nahrazeny některé textové prvky jinými, formátování textu by mělo být realizováno CSS styly a některé značky a parametry by validací asi neprošly vůbec. 2.2 Základní struktura HTML stránky Struktura HTML dokumentu by se měla vždy dodržovat a její základní strukturu vidíte na přiloženém příkladu. Zmíněné části by rozhodně neměly v dokumentu chybět, i když se dají najít stránky, kde určité části nejsou uvedeny, což ale nebrání jejich správnému zobrazování. Pokud se tedy chystáte vytvořit webovou stránku, dbejte, aby výchozí stav byl takovýto: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//CZ"> <HTML> <HEAD> <TITLE></TITLE> 34 PHP 6 začínáme programovat

35 <META> </HEAD> <BODY> </BODY> </HTML> Nyní se na jednotlivé části výše uvedeného příkladu podíváme podrobněji, tak, abyste lépe pochopili, jakou funkci jednotlivé značky mají. Dlužno dodat, že zde zobrazená ukázková stránka je vlastně stránkou prázdnou, bez obsahu. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//CZ"> Označuje typ dokumentu. Výše uvedený příklad říká prohlížeči, že se jedná o dokument HTML, že použitá verze jazyka HTML je 4.0 a že dokument obsahuje české znaky. <HTML> Párová značka, která označuje začátek HTML dokumentu. <HEAD> Důležitá HTML značka tvořící hlavičku HTML dokumentu. Údaje, které jsou zde uvedeny, se v samotné webové stránce (kromě TITLE) nezobrazují, ale můžou obsahovat důležité informace, týkající se samotného obsahu stránky, autora, odkazů na CSS styly apod. <TITLE>Název stránky</title> Titulek stránky. Mezi tento párový tag se píše název stránky, který se objeví v horní liště prohlížeče. <META> Nepovinná součást webové stránky. Metatagy slouží pouze ke sdělování různých informací o dokumentu, jako je například kódovaní dokumentu, klíčová slova dokumentu apod. </HEAD> Konec hlavičky dokumentu <BODY> Tato část slouží k zobrazení samotného obsahu stránky tedy vše, co je tedy vidět v prohlížeči text, obrázky, tabulky, menu apod. Samotná značka <BODY> má několik parametrů. </BODY> Konec zobrazovaného obsahu stránky. To, co následuje za touto značkou, se již ve stránce nezobrazuje. </HTML> Konec souboru ve formátu HTML. Výše jsme si uvedli a probrali základní příklad prázdné HTML stránky, nyní tento příklad rozšíříme o kódování, některé parametry značky <BODY> a také o odkaz vedoucí na stránky vydavatelství GRADA. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//CZ"> <HTML> <HEAD> <TITLE>Základní stránky s odkazem</title> Seznámení s technologiemi XHTML a CSS 35

36 <META http-equiv="content-type" content="text/html; charset=windows-1250"> </HEAD> <body BGCOLOR="YELLOW" vlink="red" alink="red" link="red"> <a href=" stránky vydavatelství GRADA.</a> </BODY> </HTML> 2.3 Práce s textem Základním prvkem, kterým se publikují data na internetu, je text. K jeho zobrazení není potřeba žádné zvláštní značky, za text se tedy považuje cokoli, co není součástí žádné značky (parametry, hodnoty) uvnitř sekce <BODY></BODY>. Protože prohlížeč nerozlišuje, zda ve zdrojovém kódu stisknete mezi jednotlivými slovy klávesu Enter a tak vlastně odsunete zbytek textu za klávesou Enter na další řádek, používá se pro oddělení řádku značka BR. Není párová a má jednorázový účinek odsune následující text na další řádek. Stejně jako odřádkování klávesou Enter ve zdrojovém kódu nemá vliv na formátování zobrazovaného textu v prohlížeči, nemá na něj vliv ani vícenásobná mezera. Ta je totiž prohlížečem vždy interpretována jako jediná. Proto se pro pevnou mezeru musí použít speciální značka,, přičemž je nutné dodržet tuto syntaxi včetně středníku, jinak nedosáhnete kýženého efektu. <BODY> Text uveden bez odstavců se příliš nepoužívá.<br> <BR> Třeba jen proto, že jeho formátování je obtížné. </BODY> Práce s odstavci Pro definici odstavců je nepohodlné používat značky BR. Proto HTML definuje další dvojici užitečných značek, za jejichž pomoci je celý tento úkon podstatně jednodušší a hlavně zdrojový text se stává čitelnějším. První z nich je DIV, druhou pak P. Obě jsou párové a ve svém těle definují odstavec. To znamená, že další text začne na novém řádku. Rozdíl mezi oběma značkami je ten, že P navíc vynechá jeden prázdný řádek to proto, že HTML nepoužívá pro rozlišení odstavce odsazení jeho prvního řádku. Obě značky mají také jeden důležitý parametr, který definuje zarovnání odstavce v textu: ALIGN. Jeho hodnoty jsou následující: left pro zarovnání odstavce doleva (je nastaveno jako implicitní); right pro zarovnání odstavce doprava; center pro zarovnání odstavce na střed, vycentrování. <P align="left">první odstavec textu je zarovnán vlevo.</p> <P align="right">druhý odstavec textu je zarovnán vpravo.</p> <DIV>Odstavec realizovaný pomocí tagu DIV.</DIV> Zde bych rád uvedl ještě jednu zajímavou párovou značku, která vystředí veškerý obsah, který uzavírá, CENTER. Má tedy vliv jak na text, tak na tabulky nebo obrázky jde tedy o univerzální způsob, jak dostat daný objekt do středu okna prohlížeče. <CENTER> Prvky mezi těmito značkami budou zarovnány doprostřed. </CENTER> 36 PHP 6 začínáme programovat

37 Mezi značky pro definici odstavce patří také tzv. citace. Ta daný text odřádkuje, tj. vynechá před ním prázdný řádek, a provede jeho odsazení o tabulátor. Pro lepší představu vyzkoušejte do těla stránky umístit tento text: <P>Nyní bude následovat citace:</p> <BLOCKQUOTE>Citovaný text</blockquote> Zvýraznění písma Každé písmo v HTML, které použijete, může mít v rámci zdůraznění několik zvýrazňujících prvků. Každý z nich má svoji vlastní značku, která má vliv na veškerý text nacházející se uvnitř těchto značek. Samozřejmostí je kombinace tzn. písmo může být jak podtržené, tak tučné a skloněné. Pro tyto základní efekty nabízí tedy HTML tyto značky: B tučné písmo; I kurziva; U podtržené písmo; STRIKE přeškrtnuté písmo; BIG ohraničuje písmo, které bude o jeden bod větší než standardní; SMALL ohraničuje písmo, které bude o jeden bod menší než standardní; SUB dolní index; SUP horní index. <P> Písmo bez zvýraznění<br> <B>Tučné písmo</b><br> <BIG>Zvětšené písmo</big><br> Rozloha pozemku je <U>1500 m²</u> </P> Obrázek 2.1: Různé zobrazení řezu písma Fonty a velikost písma V textu se navíc nemusíte omezovat pouze na změnu řezu písma, lze zaměnit dokonce i celý font za jiný, a to včetně jeho velikosti. Vynikající vlastností je možnost zadávat velikost písma i relativně, vzhledem k velikosti aktuálně definované. Pokud je například aktuální velikost fontu 2 (standardní nastavení, odpovídá zhruba velikosti 10 ve Wordu), lze ji změnit pouhým přičtením nebo odečtením požadovaného čísla. Seznámení s technologiemi XHTML a CSS 37

38 Font písma a jeho vlastnosti se definují značkou FONT, která má tyto parametry: SIZE="velikost" Velikost zvoleného písma od 1 do 7. Pokud zadáte před velikostí znaménko + (plus) nebo (minus), změníte velikost písma vzhledem k aktuální tak, že se zadaná hodnota přičte (popř. odečte) od této velikosti. FACE="písmo" Název písma, který bude použit. Toto písmo musí být v seznamu nainstalovaných písem a musí být zadán jeho přesný celý název; pokud jej zadáte špatně, bude použito písma standardního (Times New Roman, Arial). COLOR="barva" Definuje barvu písma. <FONT color="blue">modrý text.</font> <FONT size="4">zvětšený font textu.</font> <FONT face="tahoma"><b>tučné písmo Tahoma.</B></FONT> Obrázek 2.2: Práce s fonty Nadpisy V HTML je k dispozici šest úrovní nadpisů, každý se svou specifickou značkou, v níž je přímo definovaná úroveň velikosti nadpisu: H1, H2,, H6 přičemž značka H1 zobrazí největší nadpis, jehož velikost se plynule zmenšuje až k H6. Stejně jako u normálního textu můžete nadpis zarovnat doleva, doprava a na střed, a to stejným parametrem ALIGN a stejnou syntaxí. Každý parametr ALIGN má vliv pouze na ten nadpis, v jehož značce byl umístěn a jeho platnost jím také končí. <H1>Velký nadpis</h1> <H2>Menší nadpis</h2> <H3>Ještě menší nadpis</h3> Obrázek 2.3: Různé druhy nadpisů 38 PHP 6 začínáme programovat