HTML v příkladech

1

První stránka

 
Obsah

Rejstřík

Hledat

Dopis autorovi

...příklad pro první část...

Seriál, do jehož prvního dílu jste se právě začetli, se bude zabývat otázkami publikování prostřednictvím World-Wide Web. Jestliže jste někdy v životě slyšeli o Internetu, pravděpodobně znáte WWW. Tato služba v současnosti vévodí Síti sítí a nic nenasvědčuje tomu, že by se ze svého trůnu nechala brzy sesadit. Brouzdat stránkami WWW není žádné velké umění, což je jedna z vlastností, kterými to Web mezi uživateli vyhrál. My se budeme věnovat tématice, která už tak jednoduchá není - vytvářením stránek pro WWW.

Podobných seriálů vychází, vycházelo a nejspíš i bude vycházet stále větší a větší množství. Abychom ten náš poněkud odlišili, rozhodli jsme se pozměnit formu, ve které vám chceme vytváření stránek představit. Jak název napovídá, budeme tak činit na základě příkladů. Do každé části zahrneme ukázkovou stránku (její zdrojový text a výslednou podobu), na které předvedeme účinky konstrukcí, kterým se daná část bude věnovat.

Dnes máme na programu začátek nejzačátkovatější - úvodní rozhlédnutí. Bude zaměřeno především na seznámení se základy jazyka HyperText Markup Language (HTML), ve kterém jsou stránky zapisovány.

Základní myšlenkou všech jazyků kategorie "markup language" je, že vycházejí z čistého textového souboru. Ten obsahuje jak vlastní text, který chceme sdělit čtenáři, tak příkazy ovlivňující jeho vzhled a strukturu. Jsou zapisovány prostřednictvím určitých speciálních znakových řetězců, kterým byl v daném jazyce přiřazen jistý význam. Markup language jazyky nedbají na tvar zdrojového textu. Konec řádku v nich má zpravidla stejný význam jako mezera.

Zmíněné vlastnosti má i HTML. Příkazům se zde říká značky a zapisují se mezi znaky "menší než" a "větší než" - například <EM> zahájí zvýrazňovaný text. Ve jménech značek se nerozlišují malá písmena od velkých. Pokud se rozhodnete vytvářet své stránky ručně, doporučuji stanovit si jednotný způsob zápisu a ten dodržovat. My budeme pro značky používat velká písmena, aby se dostatečně odlišily od okolního textu.

Řada značek je párových. To znamená, že se vyskytují ve dvojicích - jedna vždy zahajuje a druhá ukončuje danou konstrukci. Jejich účinek se vztahuje na text, který je uzavřen mezi zahajující a ukončující značkou. Obě značky v páru mají shodné jméno, v ukončující značce mu však předchází znak "lomítko". Například

raz <EM>dva tři</EM> čtyři
signalizuje, že prostřední dvě slova mají být zvýrazněna (zpravidla pro ně bude použita kurzíva).

A teď přijde velmi důležitá informace: HTML soubor interpretuje klient WWW. Tento program musí vykonávat dvě základní funkce. Musí se spojit se serverem a získat od něj zdrojový text stránky (tato úloha klienta je celkem obvyklá a setkáte se s ní i v jiných službách). Když se tohle podaří, musí získaný text analyzovat, zformátovat a předložit výslednou podobu uživateli. Praktický důsledek: vzhled stránky závisí výlučně a jedině na klientovi. Stejná stránka může vypadat velmi odlišně, bude-li prohlížena dvěma různými klienty.

My budeme pro své ukázky používat Netscape Navigator, což je nejrozšířenější Web klient současného Internetu. Ovšem softwarový Goliáš Microsoft se již rozhlíží, jak by se tomu mrňavému chlapíkovi s prakem dostal na kobylku. Jak úspěšně bude Netscape odolávat Internet Exploreru, podporovanému obávanou marketingovou mašinou, ukáže teprve čas. Faktem je, že pro konstrukce v našem seriálu jsou rozdíly obou programů (přesněji jejich třetích verzí) zanedbatelné.

Dost povídání, přikročme k příkladu. Na přiložených obrázcích vidíte, jak vypadá zdrojový text ukázkové stránky a jak dopadne jeho zobrazení Netscape Navigatorem. Poslouží nám k předvedení tří věcí: jak vypadá stránka, jak se v ní vymezují odstavce a jak se pracuje s písmy.

Struktura stránky

WWW stránka má předepsánu pevnou formu, kterou by měla dodržovat. Vypadá následovně:
<HTML>
<HEAD>
   
záhlaví stránky
</HEAD>
<BODY>
   
vlastní zobrazený text
</BODY>
</HTML>
Vidíte, že je celá uzavřena do párové značky <HTML>. Uvnitř se pak dělí na dvě části. Záhlaví (obklopené značkou <HEAD>) obsahuje především informace popisující některé vlastnosti stránky - jak se jmenuje, kde je umístěna a podobně. Většinou se tato část omezí na prostou značku <TITLE>, určující titulek (čili nadpis okna) dokumentu. Párová značka <BODY> pak obkličuje tělo stránky. To bude hlavním cílem našeho snažení, protože tvoří viditelný obsah, který bude zobrazen uživateli.

Dle definice HTML jsou klienti povinni obejít se i bez značek, které jsme před chvilkou poznali. Vřele však doporučujeme, abyste na svých stránkách dodržovali popsanou strukturu. Je to asi jako s městskou dopravou - autobus vás sveze i bez lístku, ale slušný člověk něco takového používá jen v případě nejvyšší nouze.

Odstavce a spol.

HTML, jakožto pravověrný markup language, ignoruje tvar zdrojového textu stránky. Konce řádků, konce odstavců - to vše mu musí být řečeno zcela polopaticky vhodnými značkami. Ty nejzákladnější uvádí tabulka 1.

Tabulka 1: Členění textu
<P> nový odstavec (Paragraph)
<BR> nový řádek (line BReak)
<HR> vodorovná čára (Horizontal Rule)

Každý odstavec je třeba zahájit značkou <P>. Zcela formálně ji lze používat také jako párovou, kdy na začátku odstavce stojí <P> a na jeho konci </P>. Znám však jen několik málo excentrických editorů, které používají <P> tímto způsobem. Mezi normálními lidmi (včetně autorů HTML) je s <P> zacházeno jako se značkou nepárovou.

Chcete-li ukončit stávající řádek a další text umístit na začátek následujícího, poslouží vám značka <BR>. U většiny klientů se její chování podobá <P>. Na rozdíl od něj však nevynechává svislou mezeru, která bývá vkládána před nový odstavec.

Potřebujete-li nutně mezi částmi textu vynechat větší svislou mezeru, můžete použít sekvenci značek <BR><BR><BR>... Typografický fajnšmekr by sice takový postup ohodnotil také sekvencí "Brrrrr!", leč HTML nic elegantnějšího nenabízí.

Pro výrazné oddělení po sobě jdoucích odstavců poslouží vodorovná čára přes celou šířku textu, vytvořená značkou <HR>. Osvědčila se zejména ve společnosti dvou <P>: <P><HR><P>. Bez nich bývá okolní text k čáře nehezky přilepen.

Vraťme se ještě ke značce <P>, na které si předvedeme další významný prvek HTML. Je jím atribut, který umožňuje ovlivnit chování značky. Zapisuje se za její jméno, oddělen mezerou. Zpravidla ve tvaru

atribut="hodnota"
Je-li hodnotou číslo nebo jeden z předem pevně daných řetězců, lze uvozovky vynechat. Pro každou značku je definováno, jaké má atributy, jaké jsou jejich významy a implicitní hodnoty. Pro značku <P> je zajímavý atribut ALIGN, určující způsob zarovnání odstavce. Přípustné hodnoty jsou LEFT (na prapor vlevo, implicitní hodnota), RIGHT (na prapor vpravo) a CENTER (centrováno na střed). Efekty, kterých lze tímto atributem dosáhnout, jsou patrné z příkladu.

Na účinky atributu ALIGN se bohužel nedá spolehnout. Byl totiž zaveden až v novější verzi jazyka HTML, konkrétně ve verzi 3. HTML prošel a prochází jistým vývojem. Ten je zčásti organizovaný (oficiálně se o něj stará WWW konsorcium) a zčásti živelný (řada firem, produkujících klienty, si prostě přidává nově vymyšlené značky). Za současný standard lze považovat verzi 2.0, která je definována v RFC 1866.

Již více než rok se pracuje na její následnici. Vyústění těchto snah nese v současné době číslo 3.2 a je stále ještě ve stádiu zrodu. Řada klientů však již v současné době podporuje značky a atributy, které se mají stát součástí této nové verze. Jejich použití je však třeba vždy dobře zvážit - zda text příliš neutrpí, pokud je uživatelův klient nebude podporovat. Naštěstí je definováno, že neznámé značky a atributy klient musí ignorovat. Konstrukce pocházející z HTML 3 tudíž méně progresivního klienta nevyvedou z míry, jen v něm nebudou fungovat tak, jak očekáváte.

Písmo

Možnost měnit vzhled písma je u moderních systémů pro práci s textem neodmyslitelná. Jak je na tom WWW? Kolik a jaká písma umí? Odpověď zní: těžko říct. Vzpomeňme na hlavního hrdinu formátování stránky - WWW klienta. Pracuje-li v textovém režimu, bude nabídka písem chudičká. Ačkoli jazyk HTML nabízí řadu příkazů pro změny použitého písma, výsledek je bez záruky. Stojí a padá se schopnostmi klienta.

Právě z tohoto důvodu se doporučuje dávat při práci s písmem přednost tak zvanému logickému vyznačování (viz tabulka 2). Jeho prostřednictvím říkáte: tento text má být zvýrazněn, tento text je ukázkou klávesnicového vstupu. Necháváte přitom na klientovi, aby posoudil, jak nejlépe dosáhnout kýženého efektu. Předpokládá se, že jeho autor byl natolik při smyslech, aby navrhl vzájemně ladící způsoby pro vyznačení těchto prvků.

Tabulka 2: Logické vyznačování
<EM> zvýraznění (EMphasize)
<STRONG> silné zvýraznění (STRONG emphasize)
<CITE> citace
<CODE> ukázka zdrojového kódu
<SAMP> řetězec ukázkových znaků (SAMPle string)
<KBD> vstup z klávesnice (KeyBoarD input)
<VAR> jméno proměnné (VARiable)

Všechny značky jsou párové a ovlivňují text, který je uvnitř páru. Kromě nich existuje ještě druhá skupina značek, ovlivňujících písmo. Umožňují fyzické vyznačení, při kterém výslovně požadujete "pro tento text použij kurzívu". Je samozřejmě otázkou, co s obdobným požadavkem provede textový klient, který kurzívu prostě nemá v nabídce. Souhrn značek pro fyzické vyznačení najdete v tabulce 3. Hvězdičkami jsou označeny značky, zavedené až v HTML 3.

Tabulka 3: Fyzické vyznačování
<B> tučné (Bold)
<I> kurzíva (Italics)
<TT> neproporcionální (TypewriTer)
<U> podtržené (Underscore), nepříliš podporováno
<BIG> velké*
<SMALL> malé*
<SUB> dolní index*
<SUP> horní index*



Pavel Satrapa
Článek byl otištěn v časopise
Softwarové noviny číslo 8/96
 
<--- --->