CSS a XHTML
tvorba dokonalých WWW stránek krok za krokem – 2., aktualizované vydání

David Procházka

Vydala Grada Publishing, a.s.

U Průhonu 22, Praha 7

jako svou 4561. publikaci

Odpovědný redaktor Pavel Němeček

Sazba Tomáš Brejcha

První vydání, Praha 2011

© Grada Publishing, a.s., 2011

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

ISBN 978-80-247-3897-0 (tištěná verze)

ISBN 978-80-247-7127-4 (elektronická verze ve formátu PDF)

ISBN 978-80-247-7128-1 (elektronická verze ve formátu EPUB)

Úvod

Vytváření webových stránek je činnost, která byla ještě donedávna výsadou IT profesionálů a programátorů. Nedá se říci, že jde o činnost triviální a zcela snadnou. S rozvíjející se počítačovou gramotností uživatelů internetu lze ale konstatovat, že zvládnutí tvorby webu je v možnostech většiny pokročilých uživatelů výpočetní techniky. Základní tvorba WWW stránek totiž 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.

Základem je zvládnutí skriptovacího jazyka (X)HTML s aplikací kaskádových CSS stylů. 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 krokem je zapojení technologie PHP, která dokáže provádět výkonné operace nad daty, pracovat s databází a 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 v úvodu seznámí se základními principy internetu. Není možné začít vyvíjet webové stránky bez alespoň elementární znalosti fungování internetu, určitých protokolů a pojmů. Dále se bude publikace věnovat prostředkům a programům, které pro vývoj stránek budete potřebovat, a plynule přejde na základní pojmy z (X)HTML jazyka. Tyto znalosti budou dále prohlubovány a budou k nim přidány i pojmy z oblasti kaskádových CSS stylů, základů JavaScriptu či PHP.

Dozvíte se nejen informace o vývoji stránek, ale dostanete kompletní studijní materiál, který vás provede tvorbou webu, umístěním stránek na internetu, laděním v různých internetových prohlížečích, a navede vás na navazující oblasti, pomocí kterých budete moci v případě zájmu ve studiu vývoje webových stránek pokračovat.

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.

1.

Úvod do tvorby WWWstránek

První kapitola knihy je určena všem čtenářům, kteří se vývojem webových stránek doposud vůbec nezabývali. Mohli bychom se sice vrhnout přímo do vývoje webu, ale pro snadnější orientaci ve zbytku knihy je tato kapitola nezbytností. Dozvíte se vní zejména základní standardy internetu awebový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, jak si můžete vytvořit testovací prostředí pro vývoj stránek, jak se stránky na internet umisťují ajak probíhá registrace vlastní WWW adresy. Vdruhé části kapitoly se dočtete také onástrojích aprogramech, které jsou pro tvorbu stránek doporučené, avneposlední řadě si stanovíme určité principy, které budeme vknize dodržovat.

1.1 Několik slov ointernetu

Internet je velmi rozsáhlá počítačová síť, jejíž hierarchie se řídí určitými pravidly. Vminulosti byl výsadou akademických avědeckých pracovníků, běžní uživatelé se kjeho obsahu dostali jen výjimečně. Dnes jej používají děti, studenti, rodiny, důchodci, prostě všichni, kteří chtějí informovat abýt informováni. Nemalé procento uživatelů internetu tvoří lidé, kteří chtějí komunikovat, přičemž internet jim poskytuje levnou apohodlnou cestu ke spojení scelým světem.

1.1.1 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 vpočítačové terminologii myšlena soustava pravidel– obvykle tedy norma komunikace. Název internet pochází zanglické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 Arpa-net, amezinárodní (původně latinské) předpony inter (mezi), vyjadřující, že internet propojil avstřebal různé starší, dílčí, specializované, proprietální alokální sítě.

Historie internetu je velice košatá avydala by na samostatnou odbornou publikaci, proto se oní zmíníme jen krátce. Počátky internetu započaly umyšlenky vytvoření počítačové sítě, která by spolehlivě propojila strategické, vojenské, vládní aakademické 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 ří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ý zpaketů je vybaven údajem oadresátovi, atvoří tak de facto autonomní zásilku, která cestuje kcíli samostatně, svou vlastní cestou, nezávisle na ostatních paketech. Vpřípadě zničení jedné zpřenosových cest může paket bez problémů dojít kadresátovi alternativní cestou– přes zbývající zachovalé uzly. Ato je vlastně základ koncepce internetu, jak ji známe dodnes.

Obrázek 1.1: Internet vám přinese informační zdroj až do obýváku

1.1.2 Důležité mezníky ve vývoji internetu

Vobdobí vývoje internetu od roku 1969 až po současnost docházelo kbouřlivému vývoji, technologickému postupu aaplikaci řady nových technologií. Uveďme si nyní výběr jen těch nejdůležitějších okamžiků.

1969– vytvořena experimentální síť ARPANET, první pokusy spřepojováním uzlů

1972– Ray Tomlinson vyvíjí první e-mailovou aplikaci

1980– experimentální provoz protokolu TCP/IP vsí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) vevropské laboratoři CERN

1994– internet přechází zrukou vědců do komerčního užití

1996– překonáno 55 milionů uživatelů na světě

2000– 250 milionů uživatelů

2006– více než miliarda uživatelů

1.1.3 Internetový protokol TCP/IP

Protokolová struktura TCP/IP je definována jako sada protokolů pro komunikaci vpočítačové síti, jež se využívá zejména na internetu, ale také vběžných počítačových sítích. Jde vlastně okomunikační protokol, což je množina pravidel, které určují podobu avý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žší aposkytuje 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) avrstva síťového rozhraní (network interface).

Obrázek 1.2: Model 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í adoruč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 aemailový server) běžící na stejném počítači. TCP podporuje mnoho na internetu populárních aplikačních protokolů aaplikací, včetně WWW, elektronické pošty aSSH (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 oná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 vdoruč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 kcí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 aIP protokol neručí ani za pořadí doručených datagramů.

1.1.4 Identifikace počítačů vinternetu

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 vrámci internetu zásadní věcí aje dobré vědět, co IP znamená. Vkaždém datagramu je pak uvedena IP adresa odesilatele ipří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 vtomto systému překládají na IP adresy anaopak. Použitelnost je mnohem lepší, uživatelé si nemusejí pamatovat dlouhá čísla, pamatují si názvy.

Domény

Domény jsou vlastně IP adresy převedené na text. Jméno počítače se skládá zdomén oddělených tečkou, např. http://mail.volny.cz . 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 vrá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.).

Různé verze IP adres

Každý počítač připojený kinternetu má svoji IP adresu. Donedávna platilo, že IP adresa je 32bitové číslo aže se uvádí jako čtyři desítková čísla vrozmezí 0– 255 oddělená tečkou– např. 192.168.1.1. Tato informace je stále pravdivá, ale jelikož postupem času došlo kvyčerpání adresního rozsahu, který tvořil počet 2 32 = 4294967296, bylo nutno zavést další verzi IP protokolu. Prvotní astá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 vIPv4. Vpraxi je užití modernizované verze IP protokolu méně praktické, protože adresy obsahují také šestnáctkové hodnoty– typická IP adresa je tak vIPv6 například takováto– 2001:0db8:0:0:0:0:1428:57ab.

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 zmodemu nebo směrovače. Každá síťová karta má tzv. MAC adresu. MAC adresa (zanglické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ě aje jakýmsi jedinečným rodným číslem. MAC adresa přidělená výrobcem je vždy celosvětově jedinečná. Zhlediska přidělování je rozdělena na dvě poloviny. Oprvní polovinu musí výrobce požádat centrálního správce adresního prostoru aje uvšech karet daného výrobce stejná (či alespoň velké skupiny karet, velcí výrobci mají kdispozici 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: 00-11-09-95-26-FE.

Obrázek 1.3: Serverová síťová karta

1.1.5 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 selektronickou poštou tím nejvíce používaným azasloužil se oobrovský rozmach internetu vposlední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 vinternetu. Kprotokolu HTTP existuje také jeho bezpečnější verze označovaná jako HTTPS, která umožňuje přenášená data šifrovat, atí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 oschopnostech 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.

1.1.6 WWW abrouzdá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 idoména ajméno počítače. Název naprosté většiny těchto serverů začíná zkratkou WWW, ikdyž je možné používat libovolné jméno vyhovující pravidlům URL. Protokol HTTP je dnes již používán ipro přenos jiných dokumentů, než jen souborů ve tvaru HTML avýraz World Wide Web se postupně stává pro laickou veřejnost synonymem pro internetové aplikace.

1.2 Základní pojmy azkratky

Vpředchozí části knihy jsme si řekli ozákladech internetu. Ty ale povětšinou lidé, kteří chtějí tvořit webové stránky, alespoň rámcově znají. Nyní je čas přejít od slov kčinům, apřesunout se tak blíže kproblematice vytváření webových stránek. Začněme pojmy, se kterými se vprůběhu tvorby můžete setkat. Níže uvedené pojmy jsem se řadil dle abecedy avyskytují se zde jak základní pojmy internetu, tak pojmy dotýkající se WWW stránek, technologií atechnických norem.

AJAX

AJAX (Asynchronous JavaScript and XML) je označení pro sadu technologií určenou kvývoji interaktivních webových aplikací, které mění obsah svých stránek bez nutnosti jejich znovunačí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í apřekreslení celé stránky při každé operaci, které jsou nutné uklasického modelu WWW stránek. Pokud například uživatel klepne na tlačítko pro udělení hlasu vně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í aveškerý zbytek obsahu zůstává stejný.

Obrázek 1.4: Ajax je hojně využíván například ve freemailu Gmail

Apache

Apache HTTP Server je softwarový webový server. Využívá se uvě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 voperačním systému budete moci ladit atestovat své stránky sprvky HTML aPHP kódu.

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 vjisté době okonkurenci technologie PHP, ale celý projekt se příliš neujal. Dnes jde prakticky omrtvou technologii, kterou nemá valnějšího smyslu se zabývat. Její nástupce, ASP.NET, lze chápat jako širší akomplexnější technologii, která se od ASP vmnoha ohledech fundamentálně liší.

ASP.NET

ASP.NET je součást .NET Frameworku pro tvorbu webových aplikací asluž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 vjakémkoli jazyce podporujícím CLR, např. Visual Basic.NET, JScript.NET, C#, Managed C++, ale imutace Perlu, Pythonu adalší. 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 aznovu parsovány. Pro zvládnutí této technologie je nutné být pokročilým vývojářem webů amí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 vjazycích HTML, XHTML nebo XML. Hlavním smyslem je umožnit návrhářům oddělit vzhled dokumentu od jeho struktury aobsahu. Původně to měl umožnit už jazyk HTML, ale vdůsledku nedostatečných standardů akonkurenčního boje výrobců prohlížečů se vyvinul jinak. Starší verze HTML obsahují celou řadu elementů, které nepopisují obsah astrukturu dokumentu, ale izpůsob jeho zobrazení. Zhlediska zpracování dokumentů avyhledá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 www.grada.cz . 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 aposkytovatele. Například za běžnou doménu CZ zaplatíte zhruba 250 Kč. Pokud chcete svou prezentaci kupříkladu na adrese www.mojeadresa.cz , pak budete potřebovat nejen doménu (adresu), ale také webhosting (viz níže). Domény iwebhosting si můžete objednat umnoha českých hostingových společností.

Favicon

Favicon je nejčastěji ikona ovelikosti 16×16 pixelů umístěná vkořenové složce webu pod názvem favicon.ico . Favikona se nejčastěji zobrazuje vadresním řádku prohlížeče, na panelu se stránkou avnabídce záložek– oblíbených položek. Starší Internet Explorer zobrazoval ikonu pouze ustránek uložených do záložek. Novější verze aalternativní prohlížeče pak ikonu zobrazují ihned po načtení webových stránek.

FTP

FTP (File Transfer Protocol) je vinformatice protokol pro přenos souborů mezi počítači pomocí počítačové sítě. Vpří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í vsobě obsahují isouborové manažery, například Total Commaner.

Obrázek 1.5: Oblíbeným FTP klientem je Total Commander

HTML

HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním zjazyků pro vytváření stránek vsystému World Wide Web, který umožňuje publikaci dokumentů na internetu. Je charakterizován množinou značek (tzv. tagů) ajejich atributů definovaných pro danou verzi. Mezi značky se uzavírají části textu dokumentu, atí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 aodpoví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.

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 aefekty obrázků. Jeho syntaxe patří do rodiny jazyků C/C++/Java. Slovo Java je však součástí jeho názvu pouze zmarketingových důvodů asprogramovacím jazykem Java jej vedle názvu spojuje jen podobná syntaxe. Javascript lze nejlépe co do syntaxe připodobnit kPHP. Novější podobou Javascriptu je asynchronní Javascript, nazývaný AJAX (viz výše).

MySQL databáze

MySQL je multiplatformní databáze. Komunikace sní probíhá– jak už název napovídá– pomocí jazyka SQL. Podobně jako uostatních SQL databází se jedná odialekt tohoto jazyka sněkterými rozšířeními. Vrámci programování dynamických webových stránek jde onejpouží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ě sPHP snadno propojit do podoby dynamické webové aplikace.

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 iktvorbě konzolových adesktopových aplikací. PHP je vedle ASP 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í, atomu, že kombinuje vlastnosti více programovacích jazyků, anechává tak vývojáři částečnou svobodu vsyntaxi.

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 vXHTML, tam je potřeba využít CSS) apod. Stagy vnejrůznější podobě se blíže setkáte utvorby 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 ibezplatná varianta, tzv. freehosting. Freehosting obvykle nezahrnuje žádné záruky ohledně funkčnosti, má omezenou technickou podporu. Často je sfreehostingem 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ř. snázvem společnosti). Alternativně lze uněkterých firem zdarma využít domény 3. řádu, například vasejmeno.poskytovatel.cz . Vpřípadě vyšších nároků na rychlost, spolehlivost ana podporované služby atechnologie 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ů vprostř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. Vroce 2007 však došlo kzaložení pracovní skupiny, která má za cíl vytvořit novou verzi HTML, která ponese označení HTML 5 ajejí XML variantu XHTML 5. Vedle toho paralelně pokračuje ivývoj XHTML 2.0.

HTML vs. XHTML– rozdíly

■ VXHTML na rozdíl od HTML musí být všechny tagy ukončené ato včetně nepárových, jako jsou <meta>, <link>, <br>, <hr> nebo <img>. Zápis může mít více podob. Buď použijeme klasické (avalidní) <img></img> nebo zkrácené <img/> nebo mírně upravené <img />. První způsob se nedoporučuje používat, zasíláme-li XHTML dokument stypem text/html. Druhý způsob, bez mezery, se nedoporučuje používat kvůli postarším prohlížečům, které by vtakovém případě mohly vynechat poslední atribut, je-li nějaký uvedený.

■ VXHTML na rozdíl od HTML musí být všechny tagy ajejich atributy zapsány malými písmeny, ato ztoho důvodu, že jsou takto deklarované vodkazované DTD (Document Type Definition) aX(HT)ML je case sensitive, tedy záleží na velikosti písem. Pokud bychom si deklarovali vlastní DTD, můžeme směle používat ivelká písmena.

■ Všechny hodnoty atributů musí být uzavřeny do uvozovek.

■ Dokument musí začínat XML deklarací. Její použití není povinné, pokud je dokument kódován vUTF-8 nebo pokud určujeme kódování vyšší protokolem (http například).

■ Pokud potřebujeme pracovat srámy, můžeme deklarovat XTHML 1.0 Frameset apro jednotlivé stránky XHTML 1.0 Transitional.

■ XHTML dokument bychom měli zasílat sjiným MIME typem než klasické HTML dokumenty.

■ Další rozdíly již nejsou natolik důležité ačasté.

1.3 Filosofie tvorby webových stánek

Nezkušení autoři webových stánek dělají často velkou chybu, když kvývoji přistupují zbrkle, nepromyslí si celý projekt avrhají se překotně na různé části tvůrčí činnosti. Zvlastní 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. Ktvorbě je nutné přistupovat zodpovědně asorientací na cíl. Sám jsem zpracoval několik úspěšných projektů, ale také řadu, které kvůli chybám při realizaci nebyly nikdy dokončeny. Vývoj webových stránek aaplikací lze přirovnat kjakémukoli projektu, který musí být důsledně zanalyzován ještě před začátkem tvorby.

1.3.1 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 azvážit, aaž poté začít srealizací.

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 ajak by mělo vypadat vypracování jednotlivých kroků.

3. Nezačínejte tvorbu jen apouze od vzhledu aod výsledného efektu. Webové stránky mají dobrý základ vrozvržení souborové struktury, provázanosti jednotlivých částí ajednoduché změně grafiky pomocí CSS stylů.

4. Pokud je to možné, konzultujte vývoj, vzhled achování webu sosobou, která má vtéto problematice přehled– poslouchejte názory druhých.

5. Dbejte dodržování validity atestujte stránky vždy vněkolika prohlížečích na několika počítačích, ideálně itakový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 zmobilu č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.

1.3.2 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 atvůrčí energie, pak je to možná cesta dobrá, ale vdnešní době se často stane, že vdůsledku absence času se obrovský projekt může zvrhnout vnikdy nedokončené dílo. Svůj nápad konzultujte sostatními vývojáři ještě před jeho započetím. Je vhodné si osvých záměrech promluvit také sběž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 odanou službu nebo webovou aplikaci budou mít zájem idalší uživatelé. Je také možné, že podobná nebo ještě lepší služba již existuje, avy 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. Ktakový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 kprojektu dalšího vývojáře. Zde je ale nutná naprostá souhra, respekt aspolehlivost týmu.

Omezená funkčnost. Řadu dobrých projektů pohřbila taková malichernost, jako omezená funkčnost. Vsouvislosti swebem je zejména důležité, ať je vaše aplikace bezpečná, neobtěžuje uživatele desítkami reklamních bannerů aať 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 svý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.

1.4 Webhosting aFTP připojení

1.4.1 Doména aneb adresa stránek

Obrázek 1.6: Volné adresy CZ můžete rychle zaregistrovat také na webu www.kvapem.cz

1.4.2 Výběr webhostingu

Co by měl základní webhosting splňovat?

Obrázek 1.7: WebFTP není klasické FTP

1.4.3 FTP protokol

Doporučení FTP klienti

Web: www.totalcmd.com

Web: http://www.filezilla.cz

Web: http://winscp.net/eng/docs/lang:cs

Obrázek 1.8: Prostředí programu WinSCP

1.4.4 Zkušební bezplatný webhosting

Endora: Maximum služeb za 0 Kč

Obrázek 1.9: Administrace služeb Endora je velmi přehledná

Web: www.endora.cz

IC.CZ: Dostačuje na základní projekty

Web: www.ic.cz

Webzdarma: Neurazí, neoslní

Web: www.webzdarma.cz

ASPone: Pro nadšence do technologie ASP.NET

Web: www.aspone.cz

Shrnutí

1.5 Struktura souborů asložek

1.5.1 Základní typy souborů

1.5.2 Rozdělení do složek

Příklad souborové struktury jednoduchého webu

…

[images]

[js]

[gallery]

[styles]

fotogalerie.html

index.html

o_me.html

Příklad struktury webu kombinovaného sPHP

…

[images]

[js]

1.5.3 Zásady adoporučení

1.6 Software potřebný pro vytváření webu

Základní skupiny potřebných programů

1.6.1 HTML editory

WYSIWYG editory

Strukturní editory

Doporučený editor

Obrázek 1.10: Projekt vPSPad Editoru

1.6.2 Grafické aplikace

Prohlížeč aeditor obrázků

Program na tvorbu ikon

1.6.3 FTP klient

1.6.4 Internetové prohlížeče

1.6.5 Testovací programy

1.7 Validita ainternetové prohlížeče

1.7.1 Validní vs. Invalidní kód

1.7.2 Kčemu slouží validace webu?

1.7.3 Testujeme, zda jsou stránky validní

Odkazy na validátory