Stručný návod pro přípravu dokumentů Web

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.

Obsah

Základy

Pokud chcete z existujícího dokumentu připravit dokument ve formátu web, není to obtížné.
  1. Konvertujte dokument do textového formátu
  2. Na začátku souboru napište "<html><head><title>" a pak napište název dokumentu. Ukončete název znaky "</title></head><body>".
  3. Na začátku řádku se záhlavím napište "<h1>" a ukončete záhlaví znaky "</h1>".
  4. Pokud chcete použít záhlaví druhé úrovně, vložte ho mezi "<h2>" a "</h2>"
  5. Pokud chcete použít záhlaví třetí úrovně, vložte ho mezi "<h3>" a "</h3>"
  6. Na konci každého odstavce (kromě již označených záhlaví) uveďte "<p>"
  7. Pokud chcete odlišit úsek textu, uveďte před ním "<i>" a za ním "</i>". Takto označený úsek textu se bude zobrazovat kurzívou. Text vložený mezi "<b>" a "</b>" se bude zobrazovat tučně.
  8. Na konci uveďte </body></html>
Tím jste hotovi. Nezabývali jsme se řadou technických detailů, ale takto upravený dokument se bude většinou prohlížečů správně zobrazovat.

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.

Co je HTML?

Hypertext Markup Language (HTML) je jazyk, používaný při vytváření dokumentů pro World Wide Web. I když většina zobrazovačů zobrazí jakýkoliv dokument, který má formát jednoduchého textového souboru, přináší použití HTML určité výhody. Pokud se dokumenty HTML čtou aplikačními programy, speciálně vyvinutými pro Web (které se obvykle nazývají prohlížeče), mohou v nich být obsaženy příkazy pro formátování, grafika a odkazy na další dokumenty.

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.

Stručně o filosofii HTML

Při užívání HTML je třeba si zvyknout na poněkud odlišný způsob práce, zvláště pokud jste zvyklí na výraznou kontrolu vzhledu stránky (např. při publikování). Při použití Web může uživatel nebo čtenář určovat vzhled stránky mnohem více, než při tradičním způsobu práce.

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.

Hlavička

Každý dokument HTML by měl začínat tím, že je označen jako takový. Přísně řečeno to není nutné, ale je to dobrý zvyk. Provedete to uvedením příkazu <html> na samém začátku dokumentu. Poslední položkou dokumentu pak je ukončovací </html>.

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

Tělo

Úrovně záhlaví

HTML se nejlépe hodí pro dokumenty s takovou strukturou, která obsahuje záhlaví tří úrovní a seznamy. Doporučuje se, aby "úrovně" záhlaví odrážely strukturu dokumentu. První záhlaví by tedy mělo být záhlaví "úrovně 1" (zanedlouho se dozvíte, jak to udělat). Podřazené záhlaví by mělo být "úrovně 2," a tak dále.

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>

Odstavce

Normální odstavce jsou odděleny příkazem <p>. Jde o jeden z příkazů, který obvykle nemá tvar kontejneru, i když je to v novějších verzích HTML možné a pak mohou odstavce začíbat příkazem <p> a končit </p>. Ve většině dokumentů se používá <p> jako separátor, ale odstavce se zobrazí správně, i když se použije tvar kontejneru <p>-------</p>.

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>

Seznamy

V HTML existují tři typy seznamů: uspořádaný, neuspořádaný a speciální, tak zvaný definiční seznam.

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:

  1. první položka.
  2. druhá položka.
  3. třetí položka.
A to je neuspořádaný seznam:

Definiční seznamy

Definiční seznam je velice flexibilním seznamem, který je užitečnější, než jeho název naznačuje. Je užitečný tehdy, když je položka doprovázena vysvětlujícím textem. Každá položka seznamu má dvě části, termín (označený příkazem <dt>) a definici (pro kterou s epoužívá příkaz <dd>). Seznam začíná příkazem <dl> a končí příkazem </dl>.

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:
První termín
Definice prvního termínu.
Druhý termín
Text, který vysvětluje nebo rozšiřuje druhý termín.

Odkazy

Odkazy jsou tím, čím je dokument Web jedinečný. Některé kroky, potřebné pro vytvoření odkazu, jsou poněkud složitější. Nejsložitější částí odkazu je URL, což je ukazatel na zdroj, na který se odkazujete.

URL

URL (Universal Resource Locator) je adresou dokumentu nebo zdroje. Obvykle má následující tvar:

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

Umisťování odkazů v dokumentech HTML

Příkaz HTML pro uvedení odkazu v dokumentu má tvar:

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

Obrázky

Jednou z předností web je možnost vytváření a sdílení graficky dobře zpracovaných dokumentů v různých platformách. Měli byste však postupovat rozvážně. I když používáte vysokokapacitní přenosové trasy, je pro některé uživatele zavádění obrázků příliš pomalé a pak často zobrazování obrázků vyřadí.

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ší.

Volby pro obrázky

V příkazu IMG můžete použít volitelný argument.

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.

Jak dál

V tomto dokumentu jsou uvedeny základy. Abyste se naučili více, používejte vestavěnou volbu prohlížeče "view source" pro zobrazení příkazů HTML vašich oblíbených stránek. Neradíme vám, abyste přímo vykrádali dokumenty, ale abyste prostudovali použité formátovací příkazy a pokusili se použít podobných postupů ve vašich dokumentech.

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

Domácí stránka


Poslední modifikace: 5. února 1999