Týden 1
1.1 Internet a jeho služby
Internet je systém mnoha propojených počítačových sítí po celém světě. Počítačovou sítí nazýváme systém komunikačních linek a počítačů, v němž pracují programy umožňující přenos informace (dat) mezi propojenými počítači. Internet je fyzicky vystavěn z menších počítačových sítí - lokálních (LAN), metropolitních (MAN) a globálních (WAN) počítačových sítí.
Samotný přenos informace mezi počítači v Internetu probíhá na základě jednotných pravidel defi- novaných standardními postupy a jazykem - komunikační protokoly. Počítače Internetu si v rámci daného protokolu vzájemně rozumí a stejně interpretují přenášenou informaci. Každá informační služba má v Internetu vlastní protokol. Komunikační protokoly, které se v Internetu používají, jsou sdruženy v jedné množině označované jako protokoly TCP/IP, která zahrnuje kolem 100 protokolů. Jsou to např. protokoly označované jako FTP, Telnet, SMTP, HTTP apod.
Počítače v síti Internet pracují buď jako servery, nebo jako klientské stroje (klienti). Jejich význam je zřejmý: servery své služby poskytují, klientské počítače tyto služby využívají.
1.1.1 Přehled základních informačních služeb Internetu
Elektronická pošta (e-mail)
Prostřednictvím elektronické pošty lze přijímat a odesílat elektronické dopisy, e-maily, prakticky po celém světě prostřednictvím Internetu.
WorldWideWeb (WWW)
Služba WWW umožňuje prostřednictvím Internetu vyhledávat, prohlížet, vytvářet a sdílet s ostat- ními uživateli tzv. hypertextové dokumenty.
Talk, IRC, ICQ, Chat
Tyto služby umožňují komunikaci mezi uživateli Internetu v reálném čase pomocí klávesnice a obra- zovky monitoru mezi vzdálenými počítači. V případě hlasové komunikace se jedná o Internetovou telefonii, ve spojení s přenosem obrazu pro dva a více účastníků pak o videokonference.
Přenos souborů FTP
Prostřednictvím služby FTP (File Transfer Protocol) lze přenášet počítačové soubory uložené kdeko- liv na Internetu na vlastní počítač nebo je naopak ukládat jinam. Služba FTP umožňuje jednoduchý přenos souborů po Internetu v režimu klient - server. I když vzhledem k bezpečnosti dat pracuje ob- vykle v režimu autorizovaného přístupu, existuje i možnost jejího anonymního provozu bez nutné registrace na veřejných FTP serverech. S rozvojem možností služby WWW a bezpečnostním rizikům
11 INTERNET A JEHO SLUŽBY, ÚVOD DO PROBLEMATIKY TVORBY WWW STRÁNEK
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.
WEBOVÉ TECHNOLOGIE 12
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čů
13 INTERNET A JEHO SLUŽBY, ÚVOD DO PROBLEMATIKY TVORBY WWW STRÁNEK
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.
WEBOVÉ TECHNOLOGIE 14
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:
15 INTERNET A JEHO SLUŽBY, ÚVOD DO PROBLEMATIKY TVORBY WWW STRÁNEK https://stag-mvso.zcu.cz/portal
Doménová adresa serveru je vlastně jeho přeložená IP adresa, které je pro lepší zapamatování přiděleno DNS serverem doménové jméno. Určitě se shodneme, že se lépe pamatuje URL ve tvaru
http://www.movz.upol.cz/ než http://158.194.63.8/
1.3 Vývoj značkovacích jazyků 1.3.1 Původ značkování
Počítače byly od samého počátku využívány pro přípravu a publikování textů. Značkování vzniklo v nakladatelstvích. U tradičních tiskových technologií je každý rukopis opatřen poznámkami pro sa- zeče, které určují vzhled dokumentu. Těmto ručně psaným poznámkám se říká typografické značky. Podobně funguje značkování v textových editorech a procesorech. Uživatel například určí font písma a jeho řez, a do výsledného dokumentu se automaticky přidá odpovídající speciální kód, aniž by se o něj musel uživatel jakkoli starat. Přenositelnost textů mezi různými textovými procesory je ale obecně velmi špatná, dokonce i dnes. I v rámci jednoho procesoru se objevují problémy: Přichá- zejí nové verze a používají různé formáty pro ukládání dat.
Proto se objevila potřeba vytvořit formát, který by umožňoval uložení textů v elektronické podobě a byl přitom nezávislý na hardwarové i softwarové platformě a byl dostatečně flexibilní. Zmíněná nezávislost nepřímo implikuje nutnost začít informace značkovat podle významu místo podle poža- dovaného vzhledu. Jako vhodné řešení se ukázalo použití tzv. značkovacího jazyka. Jednotlivé značky (markups) jsou vkládány přímo do textu dokumentu a mají svůj význam. Prvním takovým jazykem byl GenCode od Graphics Communications Association z konce 60. let 20. Století (3).
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)
17 INTERNET A JEHO SLUŽBY, ÚVOD DO PROBLEMATIKY TVORBY WWW STRÁNEK
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í
WEBOVÉ TECHNOLOGIE 18 syntaxe a možnost definovat vlastní značky, což je opět krokem ke značkování informací podle vý-
znamu.
Současnou verzí XHTML je 1.1, což je modulově pojatá původní verze. V principu jde o rozložení ce- lého standardu HTML 4.0 / XHTML 1.0 na několik základních skupin elementů, protože různá vý- stupní zařízení podporují různé skupiny elementů. Tato verze na rozdíl od verze původní již nepři- pouští žádné nedoporučené elementy – především jde o dědictví staršíchverzí HTML. S XHTML tedy sice přicházíme o značnou nenáročnost na psaní dokumentu, zároveň se nám však nemůže stát, že by se nějaký dokument v jednom prohlížeči zobrazil, a v jiném ne (2).
1.3.7 Zpracování požadavku na www stránku v síti Internet
Většina webových aktivit začíná na straně klienta, a to okamžikem, kdy uživatel spustí svůj webový prohlížeč. Tento prohlížeč ze všeho nejdříve načte dokument takzvané domovské stránky, která se může nacházet buďto na lokálním disku (u vás na počítači), nebo častěji na serveru některé ze sítí - (třeba Internetu www.seznam.cz).
Pokud je domovská stránka umístěna mimo vlastní počítač, musí se klientský prohlížeč nejprve „po- radit‘‘ se serverem systému pojmenování domén (se serverem DNS, Domain Name System) a pře- vést jméno serveru s dokumentem domovské stránky, např. www.seznam.cz, na jeho IP adresu; te- prve poté může odeslat tomuto serveru přes Internet příslušný požadavek.
Webový server stráví většinu svého času nasloucháním sítě a čekáním na požadavek, ve kterém je uvedena jeho vlastní jedinečná adresa. Jakmile se objeví takovýto požadavek, server odešle poža- dovaný dokument do prohlížeče žadatele. Zároveň server obvykle zaznamená jak požadavek, tak i jméno klientského počítače, požadovaný dokument a časový okamžik. Vrátíme se zpět do prohlí- žeče, kam mezitím dorazil vyžádaný dokument. Pokud je to textový soubor v prostém formátu ASCII, zobrazí jej většina prohlížečů také v prostém, textovém formátu.
Prohlížeče načítají ze serverů také binární soubory. Stažený binární soubor však prohlížeč obvykle uloží přímo na lokální disk, kde s ním uživatel může dále pracovat; pokud je ale na počítači nainsta- lován odpovídající pomocný program, případně speciální zásuvný (plug-in) software či applet, může se zvuk či videosoubor (filmový klip) zobrazit přímo, respektive se začne přímo přehrávat.
Ve většině případů prohlížeč dostane speciální dokument, který je zdánlivě prostým textovým sou- borem, ale ve skutečnosti obsahuje kromě textu také speciální označovací kódy, jimž se říká tagy (tags). To je dokument HTML, XHTML nebo XML; prohlížeč jej odpovídajícím způsobem zpracuje,
19 INTERNET A JEHO SLUŽBY, ÚVOD DO PROBLEMATIKY TVORBY WWW STRÁNEK text naformátuje podle informací definovaných tagy, a stáhne případné speciální, doplňující soubory, jako jsou například obrázky (5).
2.1 Jazyky a styly
Jak již bylo řečeno, pro vývoj webových stránek se používají značkovací jazyky, skriptovací jazyky a kaskádové styly. Značkovací jazyk HTML (HyperText Markup Language) vychází ze standardu SGML (Standard Generalized Markup Language). SGML je univerzální značkovací jazyk dán ISO standar- dem a umožňuje definovat různé typy značkovacích jazyků podle své syntaxe a pravidel. Značkovací jazyk je to proto, že na rozdíl od programovacích jazyků, kdy určité konstrukci klíčových slov rozumí kompilátor programu, zde pomocí značek se oznámí cíli, jak má daný úsek informací mezi značkami zobrazit. HTML je tedy jazyk, který definuje své značky, které mají význam pro internetový prohlížeč. Značky jsou definovány jako klíčová slova či zkratky z anglického jazyka, uzavřené mezi ostré zá- vorky.
Obr. 2.1: Syntaxe značkovacího jazyka
V praxi to znamená, že prohlížeč zobrazí informace mezi počáteční a koncovou značkou podle vý- znamu dané značky. Například značka <b> formátuje písmo tučně a proto vše mezi touto a koncovou značkou </b> zobrazí prohlížeč tučným písmem.
Dalšími jazyky, které pomáhají vyvíjet webové stránky, jsou skriptovací jazyky. Dělí se na klientské a serverové. Klientským skriptovacím jazykem je například javascript, který si blíže představíme v ka- pitole 12.
Mezi nezbytné nástroje pro vývoj webových stránek patří kaskádové styly. Dnešní moderní stránky se bez nich již neobejdou. Jejich posláním je oddělit vzhled od obsahu, což je právě nevýhodou znač- kovacích jazyků, kdy mícháme informační obsah s určením, jak se má interpretovat. Kaskádové styly naopak určují pouze vzhled a to na pokročilé úrovni. Kaskádové styly dokáží určit html elementům formát a zpřesnit jejich vlastnosti a oddělují tak tyto definice od vlastního informačního obsahu. Kaskádové styly budou obsahem šesté a sedmé kapitoly učebního textu.
23 STRUKTURA HTML KÓDU
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.
WEBOVÉ TECHNOLOGIE 24
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)
25 STRUKTURA HTML KÓDU
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;
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>;
3.1 Formátování textu
HTML jazyk se vyvíjí zhruba 20 let, přičemž jeho poslední verze HTML 4.01 se používá již jedno de- setiletí. Od prvních verzí se jazyk měnil a mnoho základních elementů se již nepoužívá, přestože jej prohlížeče dokáží interpretovat. S vývojem progresivních CSS stylů, které mnoho elementů a atri- butů nahradí ve funkčnosti, pohodlí a efektivitě, jsou některé elementy HTML již minulostí. Přesto však jsou elementy, bez kterých si formátování webových prvků nedokážeme představit. Tato kapi- tola přehledně v tabulce uvede seznam používaných elementů a upozorní na ty, které by již měli být nahrazeny modernějšími metodami použití.
Tab. 3.1 Elementy fyzického formátování; zdroj: (2)
Elementy se nedoporučují ze tří důvodů. Prvním důvodem je zastaralost uvedeného elementu. Ta- kový element nemusí být podporován prohlížeči a může dělat při zobrazení problémy. Takovým ele- mentem je například <font>, který nebyl do přehledu formátovacích tagů ani zařazen. Druhým dů- vodem pro nedoporučení používat elementy je pozbytí jejich významu při vývoji hypertextových dokumentů. Element <u> prohlížeč zobrazí podtrženě, avšak v hypertextových dokumentech bývají podtržené odkazy, ostatní podtržený text je matoucí. Třetím důvodem je nahrazení novějším ele- mentem či dokonce CSS stylem. Elementy <s> a <strike> nahrazujeme novým elementem <del> či CSS stylem text-decoration:line-through. Obdobně je tomu u blikajícího textu, ten nahrazujeme CSS stylem text-decoration:blink. Zakázané zalomení řádku <nobr> nahrazujeme stylem white- space:nowrap.
31 ZNAČKY HTML KÓDU PRO PRÁCI S TEXTEM Tab. 3.2 Elementy logického formátování
Logické formátování původně vymezovalo text dle jeho významu, nikoliv vzhledu. To znamená, že logicky členilo text bez fyzického formátování. Text se tak mohl členit na obsah, zkratky, citace, pro- měnné, termíny, výpisy kódu apod. S postupem času se formátování textu na webových stránkách vyvinulo tak, že i logické formátování sebou nese význam formátování fyzického.
Obr. 3.1: Zobrazení stránky se zdrojovým kódem – formátování textu pomocí elementů html
3.2 Seznamy
Seznamy jsou populární položkou každého textového editoru. Je zřejmé, že i informace na webo- vých stránkách je potřeba občas seřadit. K tomu obecně slouží číslované nebo odrážkové seznamy, přesně v takové podobě, jako je známe např. v Microsoft Wordu. Pro číslovaný seznam máme při- řazen termín uspořádaný seznam (angl. ordered list), ze kterého vychází název elementu <ol>, ekvi- valentem odrážkového seznamu je neuspořádaný seznam (angl. unordered list), ze kterého vychází název elementu <ul>. Pro položku seznamu (angl. list item) se používá element <li> .
Tab. 3.3: Elementy pro vytváření seznamu
Tab. 3.4: Atributy elementu <li>
33 ZNAČKY HTML KÓDU PRO PRÁCI S TEXTEM
Obr. 3.2: Zobrazení uspořádaného seznamu se zdrojovým kódem; zdroj: (2)
3.3 Nadpisy
Základní možností úpravy vzhledu zobrazovaného textu je odlišení nadpisu od zbývajícího textu. Kód HTML nabízí jednoduchou párovou značku <hn>...</hn>, kde n j číslice označující úroveň nadpisu. Definováno je šest úrovní, jednotlivé úrovně se liší velikostí písma, poslední šestá úroveň má defi- novánu velikost menší než je standardní velikost písma HTML dokumentu. Z tohoto důvodu i důvodu přehlednosti HTML dokumentu není vhodné využívat na jedné stránce všechny úrovně nadpisů, dvě až tři je obvykle více než dost.
Pomocí tagu <h1> vytváříme hlavní nadpis www stránky. (Pamatujte si, že TAG <h1> smí být v XHTML 1.0 na každé www stránce použit pouze jednou!)
Obr. 3.3: Ukázka html kódu s hlavním nadpisem a neuspořádaným seznamem