Tento návod není podrobným popisem HTML. Je určen všem, kteří se nechtějí pouštět do technických podrobností. Existuje řada úplnějších popisů HTML na Internetu. Pokud se o ně zajímáte, můžete začít zde.
Pokud však chcte svůj dokument vylepšit odkazy na jiné dokumenty, grafiku, odrážky, číslované seznamy a podobně, čtěte dále. Tento návod není dlouhý a pokud ho celý projdete, budete umět vytvořit mnohem lépe vyhlížející dokument. Pokud narazíte na nejasná místa, napište mi, abych je mohl opravit.
Jazyk HTML klade větší důraz než na vzhled dokumentů na jejich strukturu. Na rozdíl od HTML jsou Rich Text Format (RTF) a Postscript příklady formátovacích jazyků, které kladou větší důraz na vzhled dokumentu (např. typy písma a přesná poloha obrázků). Jazyk HTML klade důraz na strukturu dokumentu. S pomocí HTML můžete označit záhlaví, normální odstavce, seznamy (číslované i nečíslované) a položky jako adresy.
HTML je poměrně jednoduchou implementací Standard Generalized Markup Language (SGML). HTML je dostatečně jednoduchý a lze ho používat bez speciálního editoru HTML. Přesto jsou editory HTML užitečné, zvláště pokud pracujete s obsáhlými dokumenty, ale pro začátek je možné se bez nich obejít.
Obecně začínají příkazy HTML znakem < a končí znakem >. Příkazy většinou nerozlišují mezi malými a velkými písmeny a mají buď tvar "kontejner" nebo "separátor" (i když existují výjimky z těchto zobecnění). Kontejner má počáteční a ukončovací příkaz, které se vztahují na text, uložený mezi nimi. Příkladem kontejneru je příkaz pro název, který má tvar <title>název</title>. Příkladem separátoru je příkaz vložení řádkového zlomu (<br>).
Prázdný prostor, to je libovolný netisknutelný znak, je jazykem HTML ignorován. Pokud v dokumentu ponecháte prázdný řádek, obvykle není zobrazovačem zobrazen jako prázdný řádek, pokud nepoužijete příkaz "předformátování" HTML(<pre> a </pre>).
Nakonec je třeba říci, že všechny prvky typické pro normální dokument není možné zahrnout do HTML. Při konverzi některých dokumentů se můžete setkat s problémy. V současnosti používané verze HTML například nepodporují rovnice, podpora tabulek je poměrně novým rysem. Implementace mnoha rysů v různých zobrazovačích se může lišit, takže např. tabulky mohou vypadat různě podle toho, jaký zobrazovač použijete.
Tvůrci HTML se soustředili na možnost strukturování dokumentů jednoduchým, na použité platformě nezávislým způsobem. Výhodou tohoto přístupu je, že uživatelé většiny systémů, od Macintoshe po jednoduchý, neinteligentní terminál, mohou prohlížet dokumenty formátované s pomocí HTML a přitom dochází k poměrně malé ztrátě informace.
Někteří tvůrci stránek se snaží obejít HTML tak, že používají hodně grafiky nebo používají příkazy HTML tak, aby jejich dokument vypadal "dokonale" při použití určitého prohlížeče (např. Netscape nebo Mosaic). Často však je výsledkem to, že stejný dokument vypadá při použití jiného prohlížeče hrozně nebo je úplně nečitelný.
Považujeme za vhodnější použití obecných příkazů HTML. Pak bude mít k vašim dokumentům přístup daleko větší počet uživatelů a nebudete si muset dělat těžkou hlavu s tím, jak vaše dokumenty vypadají při použití prohlížečů, které nemáte k dispozici.
Na začátku dokumentu by měla být uvedena hlavička, která je obklopena přílazy <head> a </head>. V hlavičce mohou být uloženy různé informace, ale prakticky všechny jsou prohlížeči ignorovány. Vždy by měl být v hlavičce uveden název. Název (jak bylo uvedeno již dříve) je umístěn mezi příkazy <title> a </title>.
Název dokumentu se obvykle nezobrazuje jako část stránky, ale většina zobrazovačů ho zobrazí ve speciálním místě obrazovky (Netscape ho zobrazí v liště názvu). Název většina prohlížečů používá při ukládání "záložek," uživatele, takže by měl dobře popisovat obsah dokumentu a zároveň by měl být tak stručný, aby se vešel na jednu řádku.
"Tělo" dokumentu, to je ta část dokumentu, která je zobrazována, by mělo být obklopeno příkazy <body> a </body>.
Typický dokument by měl tedy vypadat následovně:
<html> <head> <title>Toto je název mého dokumentu</title> </head> <body> ....<p> ....<p> </body> </html>(Uvědomte si, že na prázdných znacích nezáleží, takže pokud chcete, můžete všechno napsat na jednu řádku.)
Většina prohlížečů rozlišuje alespoň čtyři úrovně záhlaví. HTML jich sice podporuje více, ale zde "rozlišením" rozumíme, že prohlížeč použije pro čtyři úrovně záhlaví různý styl. Záhlaví nižších úrovní nejsou dále rozlišena. Pokud potřebujete text dále členit, měli byste uvažovat o rozdělení dokumentu na více stránek.
Příkaz záhlaví má tvar <hX> a </hX>, kde X je úroveň záhlaví. Ve většině domukentů Web je první záhlaví kopií názvu dokumentu. Po přidání prvního záhlaví bude váš dokument vypadat následovně:
<html> <head> <title> Toto je název mého dokumentu </title> </head> <body> <h1> Toto je název mého dokumentu </h1> </body> </html>
Po přidání několika odstavců a záhlaví nižší úrovně bude náš dokument vypadat následovně:
<html> <head> <title> Toto je název mého dokumentu </title> </head> <body> <h1> Toto je název mého dokumentu </h1> <p> Vzorový odstavec. Tato konstrukce se vyskytuje ve většině dokumentů. </p> <h2>To je záhlaví úrovně 2</h2> <p>Skákal pes přes oves.</p> <p>Skákal pes přes oves.</p> </body> </html>
V případě uspořádaného seznamu jsou čísla položek vkládána prohlížečem. To má tu výhodu, že když chce autor vložit nebo vypustit položku seznamu, nemusí se starat o přečíslování. Uspořádaný seznam začíná příkazem <ol> a končí příkazem </ol>.
V neuspořádaném seznamu se pro označení položek seznamu používají odrážky, jejichž typ záleží na prohlížeči. Neuspořádaný seznam začíná příkazem <ul> a končí příkazem </ul>.
V obou typech seznamů jsou jednotlivé položky označeny příkazem <li>. Položky seznamu není třeba oddělovat příkazy <p>.
Seznamy je možné vkládat do sebe.
Dále je náš dokument s několika seznamy:
<html> <head> <title> Toto je název mého dokumentu </title> </head> <body> <h1> Toto je název mého dokumentu </h1> <p> Vzorový odstavec. Tato konstrukce se vyskytuje ve většině dokumentů. </p> <h2>To je záhlaví úrovně 2</h2> <p>Skákal pes přes oves.</p> Následuje uspořádaný seznam: <p> <ol> <li> první položka. <li> druhá položka. <li> třetí položka. </ol> <p> A to je neuspořádaný seznam:</p> <ul> <li> položka. <li> jiná položka. <li> a teď vložený seznam <ul> <li> vložená položka <li> další vložená položka </ul> <li> poslední položka </ul> <p>Skákal pes přes oves.</p> </body> </html>A takto bude dokument vypadat při prohlížení prohlížečem:
Následuje uspořádaný seznam:
Následuje jednoduchý definiční seznam:
<dl> <dt>První termín <dd>Definice prvního termínu. <dt>Druhý termín <dd>Text, který vysvětluje nebo rozšiřuje druhý termín. </dl>A takto bude seznam vypadat při prohlížení prohlížečem:
protokol://jméno_počítače[:port]/adresář/jméno_dokumentu
protokol je protokol Internetu, použitý pro dokument nebo zdroj. Pro Web to je v typickém případě "http", ale může být použit i jiný (např. ftp, gopher, telnet, atd.). jméno_počítače je jménem serveru, na kterém je dokument uložen (např. www.seznam.cz ). Úsek adresy ":port" je volitelný a je nutný pouze zehdy, pokud se ke zdroji přistupuje přes nestandardní číslo portu TCP. Standardní číslo portu pro HTTP je 80. Četné servery Web na Internetu používají nestandardní porty, např. port 8000. To platí i pro jiné protokoly. Pokud se chcete spojit se zdrojem gopher na jiném portu než 70 nebo se zdrojem telnet na jiném portu než 23, musíte uvést číslo použitého portu.
Význam složek URL adresář a jméno_dokumentu plyne z jejich názvů.
Nejsnadnějším způsobem získání URL pro dokument je jeho nalezení s pomocí prohledávače (Netscape, Mosaic apod.) a překopírování do vašeho dokumentu HTML. Používáte-li Netscape, můžete buď kopírovat text do okénka "Location" v horní části okna nebo kliknout na odkaz pravým tlačítkem myši a vybrat "copy link to clipboard."
<a href="URL">text odkazu</a>
URL se uvede v uvozovkách po "href=" a text odkazu (na který uživatel klikne, aby odkaz aktivoval) je uveden mezi > a </a>.
Náš dokument s několika odkazy může tedy vypadat následovně:
<html> <head> <title> Toto je název mého dokumentu </title> </head> <body> <h1> Toto je název mého dokumentu </h1> <p> To je vzorový odstavec. Tato konstrukce se vyskytuje ve většině dokumentů. Následuje odkaz vložený do dokumetu <a href="http://and.zcu.cz/~vacekj">zde </a>.</p> <h2> To je záhlaví úrovně 2</h2> <p> Skákal pes <a href="http://www.zdnet.com/pcweek/jumped.html>skákal</a>přes oves Skákal pes přes oves.</p> ...a tak dále...
Rozumné použití obrázků však dokument oživí. Často je nutné použít obrázků tehdy, pokud nemůže být informace zobrazena textově.
Chcete-li k dokumetu připojit obrázek, musíte ho nejdřív převést do formátu GIF. To je možné různými způsoby a zde nebudeme zacházet do podrobností.
Pokud si chcete usnadnit práci, uložte obrázky do stejného adresáře jako váš dokument. Je samozřejmě možné zobrazit obrázky ve formátu GIF, které jsou uloženy prakticky kdekoliv.
Příkaz HTML pro vložení obrázku na to místo v dokumentu, kde se příkaz nachází, má následující tvar:
<IMG SRC="jméno_obrázku.gif">
To je vše, co musíte udělat, chcete-li ve vašem dokumentu použít obrázek. Pokud je obrázek uložen ve stejném adresáři jako dokument, není třeba uvádět úplný URL (ale je to možné). Stejný postup je možné použít i pro normální odkazy (nejen odkazy na obrázky). Použití relativního URL může být poněkud rychlejší.
Můžete prohlížeči "navrhnout" ,aby obrázek určitým způsobem zarovnal s obklopujícím textem, a to s pomocí příkazu "align=". Možnosti jsou "top", "middle", nebo "bottom", a specifikují, kde se bude nacházet základna obrázku vzhledem k základně obklopujícího textu.
Dále je uvedeno několik příkladů:
<img align="top" src="bug.gif"> brouk. <img align="middle" src="snail.gif"> šnek. <img align="bottom" src="toad.gif"> žába.A takhle to bude vypadat:
brouk.
šnek.
žába.
Vyšší verse oblíbených prohlížečů Netscape Gold, Netscapre Communicator a Ineternet Explorer umožňují vytváření a editaci www-stránek. Jejich použití vám značně usnadní práci.
Programy řady Microsoft Office 97 umožňují uložení souborů vytvořených např. v programech Word a Excel jako souborů typu html. Při takovém uložení se provede příslušná konverze, ale je-li struktura souborů složitější, můžete se setkat s různými problémy.
Pro vytváření složitějších stránek, grafiky apod. existuje řada programů, z nichž některé lze stáhnout z Intrenetu. Popis práce s nimi přesahuje účel tohoto krátkého úvodu.
Copyright 1995, 1996 Eamonn Sullivan. Překlad a úprava Jiří Vacek, 1996
Poslední modifikace: 5. února 1999