jejího provozu význam služby FTP pomalu klesá, díky jejímu jednoduchému zprovoznění prakticky na libovolném počítači připojeném k Internetu je však stále užitečná. Základní klient služby FTP je součástí protokolu TCP/IP, takže pokud jej máme nainstalovaný lze službu FTP okamžitě používat.

 Vzdálený přístup Telnet
Prostřednictvím služby Telnet se můžeme připojit ke vzdálené LAN a chovat se jako její běžný uživa- tel. To je velmi příjemné, jsme-li např. v zahraničí. Pomocí Telnetu se můžeme připojit ke svému domovskému serveru a přečíst např. došlou elektronickou poštu. Můžeme jeho prostřednictvím rovněž využívat služeb katalogů mnohých knihoven v ČR i v celém světě.

Služba Telnet (Telecommunication Network) umožňuje připojení ke vzdálenému počítači nejen pro přenos souborů, jako je tomu u služby FTP, ale i pro další práci na tomto vzdáleném počítači (spouš- tění programů, zpracování elektronické pošty atd.), tedy obdobné služby, jaké nám poskytuje server v naší LAN. Telnet je obdobně jako FTP realizován dvojicí klient - server. Vzhledem k tomu, že posky- tuje širší služby, vyžaduje prakticky ve všech případech autorizovaný přístup - uživatel tedy musí mít na vzdáleném počítači svůj účet chráněný heslem.

1.2 Princip WWW stránek

Prvním významným krokem k rozšíření Internetu mezi nejširší veřejnost bylo zavedení služby World Wide Web, kterou dnes známe pod označením WWW. Tato přelomová služba vznikla roku 1989 ve Švýcarsku, v evropském centru pro jaderný výzkum CERN. Její vynálezce Tim Bernes Lee ji původně zamýšlel jako vnitropodnikový systém (5).

Komunikace počítače s internetovým prohlížečem na straně jedné a webovým serverem poskytují- cím výslednou webovou stránku na straně druhé probíhá v modelu klient/server. Tento model ko- munikace pracuje způsobem žádost/odpověď (request/response). V praxi to znamená, že klientský počítač zašle serverovému požadavek na informace. Serverový počítač klientovi odpoví a informace mu poskytne. Klientský počítač pak získané informace zobrazí v prohlížeči.

Obr. 1.1: Komunikace typu klient/server ; zdroj: http://178.248.252.60/~xsenj01/klient%20 -%20server.htm

1.2.1 Dostupné prohlížeče a nástroje pro tvorbu web stránek

Webové stránky se zobrazují v prohlížečích tzv. browserech, které umožňují http komunikaci s we- bovým serverem a přijatý kód zobrazují ve formě webových stránek. Mezi nejznámější internetové prohlížeče patří:

•   Internet Explorer od společnosti Microsoft

•   Mozilla Firefox

•   Opera

•   Google Chrome od společnosti Google

 Safari a další.

Obr. 1.2 Ikony nejznámějších prohlížečů

Právě pro výše uvedené skutečnosti již Internet Explorer není tak dominantním prohlížečem, který měl v minulosti podíl okolo 95 %. Dnes se stále více užívá prohlížeč Mozilla Firefox, ale i další, které máme zobrazeny na obrázku: Opera, Google Chrome a Safari.

V prvním odstavci této kapitoly jsme si definovali, v jakém programu můžeme stránky prohlížet, nyní nastal čas zodpovědět otázku, v jakém programu webové stránky vytvářet? Odpovědí na tuto otázku můžeme opět slyšet desítky. Rozhodujícím aspektem je právě naše pozice v roli tvůrce stránek. Zdro- jový kód stránek můžeme totiž psát i v obyčejném textovém editoru jako je notepad. Nebude to příliš pohodlné, ale jsou případy, kdy si s tímto editorem pohodlně vystačíme. Pro relevantní odpo- věď na otázku musíme vědět, zdali se tvorbou stránek hodláme věnovat dlouhodobě, profesionálně či amatérsky a jaké webové stránky budeme vytvářet. Mnohé editory jsou volně šiřitelné zdarma, naopak ty licencované nejsou levnou záležitostí, avšak ve svém instalačním balíku dokáží nabídnout profesionální funkce. Mezi volně šiřitelné editory patří velice oblíbený editor PSPad. Na opačném konci stojí například profesionální nástroj Dreamweaver společnosti Macromedia – dnes již Adobe. V našem předmětu se seznámíme i s Microsoftími produkty Visual Studio a převážně Microsoft Ex- pression Web, který je nástupcem bývalého nástroje Front Page z balíku Office této společnosti.

Příklad volně dostupných editrorů HTML

•   PSPad Editor - http://www.pspad.com/cz/

•   HTML Kit - http://www.chami.com/html-kit/

•   HTML Editor - http://editor.2b.cz/

•   Dynamic HTML Editor - http://www.dynamic-html-editor.com/en/home.asp

•   Golden HTML Editor - http://www.golden-html.com/

•   CofeeCup Html Editor 2008 - http://www.coffeecup.com/

•   1Site Lite - http://www.visualvision.com/software/1site_e.html?1site

•   Hypertext Builder - http://www.paksoft-productions.com/hb/hb1.asp

•   AceHtml - http://software.visicommedia.com/en/products/acehtmlfreeware/

•   Webster - http://www.dwn.cz/webster (4)

  A mnoho dalších, záměrně neuvádím čísla verzí programů, neboť editory se neustále zdokonalují. Jejich web adresy výrobců by však měly zůstat stále stejné.

  WWW je služba internetu, celosvětová pavučina, která propojuje systém hypertextových doku- mentů napsaných podle určitých pravidel a umožňuje jejich přenos. K tvorbě dokumentů pro WWW (www stránek) je nutná existence vývojového nástroje, který umožňuje formátovat text, vložení hy- pertextových odkazů, obrázků, zvukových stop atp. To vše má na starosti od svého vzniku v roce 1991 značkovací jazyk www stránek, jazyk HTML.

  Pozn: Hypertextové dokumenty – dokumenty obsahující hypertextové odkazy umožňující vzájemné propojení těchto dokumentů do funkčního celku.

1.2.2 HTTP

V prostředí sítě internet pracují počítače buď jako servery nebo jako klienti. Server poskytuje služby klientům, klienti služeb serveru využívají. V rámci služby WWW hovoříme konkrétně o webovém (HTTP) serveru. Tyto servery slouží jako uložiště www stránek a zpracovávají požadavky, které k nim vyšlou uživatelé prostřednictvím internetových prohlížečů. Klient musí serveru zaslat požadavek prostřednictvím určitých pravidel. Jestliže server požadavku rozumí, je schopen ho zpracovat a dokáže podle akce uživatele odpovědět, zašle klientovi opět dle zmíněných pravidel příslušnou odpověď (např. www stránku, dokument ke stažení atd.) (viz následující obrázek). Pravidla této ko- munikace určuje internetový protokol HTTP (Hypertext Transfer Protocol).

HTTPS - Bezpečnější varianta protokolu, která umožňuje přenášená data šifrovat a tím chránit před odposlechem či jiným narušením.

Obr 3.1: Komunikace klient/web server (zdroj: Webový server. http://cs.wikipedia.org/wiki/Webov%C3%BD_ser-ver#mediaviewer/Soubor:Webserver.jpg)

1.2.3 URL

URL, celým názvem Uniform Resource Locator („jednotný lokátor zdrojů“) je řetězec znaků s defi- novanou strukturou, který slouží k přesné specifikaci umístění zdrojů informací (ve smyslu doku- ment nebo služba) na Internetu. URL definuje doménovou adresu serveru, umístění zdroje na ser- veru a protokol, kterým je možné zdroj zpřístupnit.

Příklad URL:

1.3.2 Jazyk SGML

Ve stejné době, kdy vznikl GenCode, definovala komise ANSI1 svůj standard založený na jazyku GML (Generalized Mark-up Language – zobecněný značkovací jazyk). Následně se obě organizace spojily a vytvořily společný standard, který byl v prosinci 1986 akceptován jako standard ISO 8879 – SGML (Standard Generalized Mark-up Language).

Nejedná se o značkovací jazyk sám o sobě, ale o metajazyk sloužící k definování různých značkova- cích jazyků. Data zapsaná pomocí SGML jsou strojově modifikovatelná do libovolného formátu. Na bouřlivě se rozvíjejícím Internetu však SGML nemohl obstát. Je totiž komplikovaný na implementaci a obsahuje velkou spoustu rysů, které jsou zřídkakdy využity. Tato skutečnost má za následek, že software pro práci s tímto jazykem je složitý a nestabilní, přičemž drtivá většina tohoto software kompletní specifikaci SGML stejně nedokáže vyhovět.

1.3.3 Jazyk HTML

Asi nejznámější aplikací SGML je jazyk HTML (Hypertext Markup Language), který se používá pro tvorbu webových stránek. Jazyk HTML si získal velkou oblibu díky své jednoduchosti, která byla v os- trém kontrastu s komplexností SGML. Ukázalo se však, že pevně daná skupina značek, které HTML používá, už nestačí. Pro účely vyhledávání a vůbec efektivnější výměny dat by bylo lepší mít možnos t použít vlastní značky, které by přesně vymezily význam textu (3).

1.3.4 W3C a normy

World Wide Web Consortium (W3C) je mezinárodní konsorcium, jehož členové společně s veřej- ností vyvíjejí webové standardy pro World Wide Web. Cílem konsorcia je „Rozvíjet World Wide Web do jeho plného potenciálu vývojem protokolů a směrnic, které zajistí dlouhodobý růst Webu“ (1). W3C se také zabývá vzděláním a přístupností, vyvíjí software a nabízí otevřenou diskuzi o Webu pro- střednictvím fóra. Konsorciu předsedá jeho zakladatel Tim Berners-Lee, tvůrce služby Webu a pri- mární autor specifikací URL (Uniform Resource Locator), HTTP (HyperText Transfer Protocol) a HTML (HyperText Markup Language) - základních pilířů Webu.

1 1ANSI je americká instituce, která vyvíjí americké průmyslové standardy ve shodě s mezinárodními standardy ISO (International Standard Organization)

Mnoho formálních norem, další technické specifikace a software definuje operace různých aspektů World Wide Webu, Internetu a serverů pro výměnu informací. Mnoho z těchto dokumentů je prací World Wide Web Consortium (W3C).

•   Doporučení pro značkovací jazyk, hlavně HTML a XHTML od W3C. Definují strukturu a in- terpretaci hypertextových dokumentů.

•   Doporučení pro styly, především CSS od W3C.

•   Normy pro ECMAScript (obvykle forma JavaScriptu).

•   Doporučení pro Document Object Model (DOM) od W3C (1).

1.3.5 Jazyk XML

Standard SGML je velmi komplexní a jeho úplná impelmentace velice náročná. Přitom během deseti let používání SGML se ukázalo, že se v praxi používá pouze část jeho možností. Tato nejdůležitější podmnožina SGML proto byla vybrána jako novy jazyk, který dovede Web do třetího tisíciletí. Správně již tušíte, že novy jazyk dostal jméno XML (eXtensible Markup Language). Jedná se o pod- množinu SGML, která si zachovává možnost definování vlastních značek pro pro jednotlivé skupiny dokumentů. Narozdíl od SGML je mnoho parametrů předem určeno a nelze je měnit (maximalni délka názvů značek, použité oddělovače a speciální znaky atd. XML už rovnou počítá s podporou všech možných jazyků, takže není tak úzce svázáno s angličtinou jako většina předchozích počítačo- vých technologií. Syntaxe zápisu dokumentů v XML oproti SGML poměrně přísná, což umožni mno- hem snazší a levnější vývoj aplikaci, které umožňují s tímto jazykem pracovat (3).

1.3.6 Jazyk XHTML

U HTML se v poslední době začíná objevovat další nedostatek – příliš velká volnost syntaxe. Zatímco webové prohlížeče jsou poměrně robustní a spoustu chybných výrazů dokáží zkorigovat, existují a vyvíjejí se další zařízení pro přístup k Internetu (WebTV, organizéry, mobilní telefony, herní kon- zole), jejichž schopnosti jsou velmi rozdílné. V mnoha případech pak nemají výpočetní potenciál po- třebný ke kontrole kódu. Taková zařízení proto vyžadují, aby byl kód syntakticky správný a ověřený.

Toho lze s XML docílit snadno. Samo konsorcium W3C ale uvádí, že nevěří tomu, že by se právě XML stal hlavním nástrojem pro tvorbu WWW stránek. Ač se dá na rozdíl od SGML na Webu použít velice dobře, oproti HTML je pořád příliš složitý.

Proto W3C vytvořila kompromisní řešení – jazyk XHTML (eXtensible HyperText Mark-up Language). Jeho základem je HTML 4.01 definovaný jako aplikace XML. V praxi to znamená hlavně zpřísnění

2.2 Základy jazyka XHTML
Tato studijní opora je v příslušných příkladech a rozborech dále věnována jazyku XHTML, protože:

•   v současnosti stále nejužívanější jazyk tvorby www stránek,

•   vychází z množiny pravidel definovaných XML,

•   oproti HTML 4.1 má jednodušší a přehlednější zápis,

•   podporuje menší množství značek, je lépe zapamatovatelný,

•   je základem pro (X)HTML 5.

  Obr. 2.2: Zdrojový kód naší první webové stránky; zdroj: (4)

  K napsaní kódu stránek, které budeme v prvních kapitolách vysvětlovat, nám postačí i editor Note- pad.

  Je také možné editovat zdrojový kód html stránky, který budeme ihned prohlížet ve webovém pro- hlížeči. Zdrojový kód nám umožní prohlédnout každý typ prohlížeče. Musíme zvolit z nabídkové lišty prohlížeče MENU – ZOBRAZIT – ZDROJOVÝ KÓD.

2.2.1 Kostra stránky
Každá www stránka začíná a končí tagem <html> (viz Obr. 2.2). Je to tzv. kořenový tag. Každá www

stránka obsahuje dvě logické části:

 Hlavička dokumentu – tag <head>. Informace, které jsou uvozeny počáteční a koncovou značkou tagu <head>, jsou určeny pro potřeby internetového prohlížeče a uživatel se s nimi až na dvě výjimky vizuálně nesetká. Uvozují se zde například tzv. META tagy o kterých se dozvíte více později. Důležitou součástí hlavičky je také tag <title>. Obsah tagu <title> se zobrazí v záhlaví internetového prohlížeče jako titulek stránky.

 Tělo dokumentu – <body>. Vše co je uvozeno počáteční a koncovou značku tagu <body> se zobrazí jako obsah www stránky v internetovém prohlížeči. V našem prvním příkladu to byl vlastně jen jeden text odstavce, Moje první www stránka. Pro potřeby zvýraznění slova „první“ jsme použili TAG k tomu určený, TAG <strong>.

2.2.2 TAGY
Základní struktura dokumentu (X)HTML je tvořena TAGY – základními značkami jazyka.

Značkám příslušného jazyka, které popisují a formátují text, tabulky, obrázky atp. do kýžené podoby říkáme TAGY. Tyto se zapisují do ostrých závorek < > a jsou definovány příslušným jazykem, tj. mají různý význam. Jednoduše řečeno, značkují obsah www stránky a říkají mu, jak se má ve výsledku v internetovém prohlížeči zobrazit.

Každý TAG v jazyce XHTML má svou počáteční a koncovou značku. To je specifikum pro XHTML. Například na Obr. 2.2 si popíšeme TAG <p>, který označuje v těle www stránky text v odstavci.

<p> Moje první www stránka </p>
Koncová značka daného TAGU se liší pouze přidáním lomítka. Vše co leží mezi počáteční a koncovou

značkou daného TAGU je jeho obsahem a zobrazí se nám ve výsledku v internetovém prohlížeči (4).

2.2.3 Zásady a konvence jazyka XHTML

•   Všechny TAGY se zapisují malými písmeny.

•   Všechny TAGY jsou ukončené (mají svou koncovou značku).

•   TAGY mohou být zároveň obsahem jiného TAGU (vnořování). Jak jsme např. viděli obsahem tagu <head> je tag <title>. Nebo obsahem tagu <body> je tag <p>.

•   TAGY se nesmí křížit (tj. nesmí docházet k míchání pořadí koncových značek při vnořování) – viz následující ukázka:

  Obr. 2.3: Ukázky tagů; zdroj: (4)

Zápis hlavních TAGŮ www stránek se většinou provádí pro větší přehlednost pod sebe. Jednotlivé TAGY se odsazují tabulátorem od levého okraje tak, aby jejich počáteční a koncová značka měla stejné levé odsazení, a aby tato vzdálenost u jednotlivých TAGŮ rostla s jejich vnořením pod TAGY nadřazené (podobě jako ve stromovém výpisu adresáře). Nicméně není to povinná zásada a je na vás, jak budete zápis provádět. Já doporučuji uvedený způsob – viz Obr. 2.2.

Obr. 2.4: Odsazení tagů; zdroj: (4)

Hlavním (kořenovým) je TAG <html>. Jeho počáteční a koncová značka má nulové odsazení. Tagy <head> a <body> jsou již tagy vnořené a mají tak určité odsazení. Jelikož jsou oba na logicky stejné úrovni (mají téhož rodiče), mají stejnou vzdálenost od levého okraje. Tagy <title> a <p> jsou opět tagy vnořené a mají proto opět o něco větší odsazení. Jelikož oba uvozují pouze krátký text, umístili jsme jejich počáteční a koncovou značku na stejný řádek.

Je opravdu prakticky jedno jak si to vyřešíte – hlavní je, aby se tagy nikdy nekřížily a abyste se v zápisu poté znovu vyznali. V dalších příkladech se ale budeme snažit dodržovat uvedenou kon- venci.

Pamatujte si:

Fyzické rozmístění textu ve zdrojové části www stránky (ve zdrojovém kódu) nemá žádný vliv na její výslednou vizuální podobu v internetovém prohlížeči. Podobu ovlivňují pouze jednotlivé TAGY a pří- slušné styly CSS (o nich později – viz kap. 6).

Čili v internetovém prohlížeči budou úplně stejně zobrazeny následující dva zápisy zdrojového kódu:

<p>Moje <strong>první</strong> www stránka</p> <p>Moje

<strong>první</strong> www stránka</p>

2.2.4 Atributy HTML elementů

HTML elementy mohou ve své definici používat buďto pouze název elementu v ostrých závorkách (viz podkapitoly výše) nebo můžeme použít atributy elementů, které danému elementu určí ještě dodatečné vlastnosti. Těmito vlastnostmi bývá zarovnávání, velikost, barva a mnoho dalších. Syntaxi použití atributů html elementů vidíme na následujícím obrázku.

Obr. 2.5: Syntaxe použití atributů html elementu; Zdroj: (3)

Barvy v HTML stránkách

V html dokumentech můžeme používat barvy pro běžné písmo, nadpisy, pozadí stránky, odstíny bu- něk tabulky a další prvky. Barvy jsou vyjádřeny ve formátu RGB (RedGreenBlue) pomocí hexadeci- málního kódu nebo přímo čísel odstínu od 0 do 255. Při použití hexadecimálního kódu použijeme před číselným vyjádřením barvy znak #.

Obr. 2.6: Příklad nastavení barev; Zdroj: (3)

Přes množství barev (16 777 216 možných barevných odstínů), které nám RGB zobrazení nabízí, musíme být obezřetní a použití barev uvážit. Webová stránka musí být barevně vyvážená, nejsou vhodné ostré a kontrastní barvy. Stránka je především určena uživatelům, kteří v ní hledají užitečné infor- mace, a proto by je barvy neměly rušit či dokonce odradit.

Pro základní barvy nemusíme používat číselný rgb nebo hexadecimální kód. Základní barvy mají svá jména, samozřejmě v anglickém jazyce. Jména těchto barev můžeme používat přímo v atributech html elementů. Na následujícím obrázku vidíme pro základních 16 barev jejich název, odstín i kó- dové označení.

Obr. 2.7: 16 barev, které můžeme použít jmenným označením v HTML dokumentech; Zdroj: (3)

Hlavička HTML dokumentu

Hlavička HTML dokumentu je nezbytnou částí každé stránky. Je uvozena elementy <head></head>.

Mezi těmito elementy se může nacházet pouze několik elementů, přesto jsou některé z nich nepo- stradatelnými a budeme je pravidelně používat. Elementy nacházející se v hlavičce jsou:

<title>, <link>, <base>, <meta>, <style>,<script> a jejich párové ukončení.

Nejznámějším elementem hlavičky je element title definující název stránky. Nepodceňujme tento element, je důležitý pro vyhledávače, které tyto stránky třídí, ale hlavně pro samotného čtenáře webových stránek. S elementem link se setkáme při tvorbě externích souborů s kaskádovými styly. Tímto elementem soubor s kaskádovým stylem přilinkujeme do našeho dokumentu. Neuvádím zde ukázku, protože se CSS stylům budeme věnovat v dalších kapitolách, kde bude probrán rovněž ele- ment style. Důležitým elementem hlavičky je tag meta, který popisuje pomocí svých atributů obsah stránky, klíčové slovo pro vyhledávání autora stránek a znakovou sadu, ve které se bude zobrazovat informační obsah webové stránky. Element skript budeme rovněž probírat v jiné kapitole. Na ob- rázku 2.8 vidíme zdrojový kód hlavičky HTML stránky s příslušnými elementy.

Obr. 2.8: HTML hlavička s elementy <title>,<meta>,<style>,<script>; Zdroj: (3)