Většina textů bývá strukturována do kapitol, podkapitol, na články, odstavce atd. HTML obsahuje konstrukce pro vytváření jejich hlaviček. Jsou vymezeny značkami <Hn> a </Hn>. Text mezi těmito značkami je formátován jako nadpis (hlavička) příslušné části dokumentu. K dispozici je šest úrovní hlaviček (přípustné hodnoty n tedy jsou 1 až 6), přičemž hlavička první úrovně (<H1>) je největší. V reálných dokumentech se setkáte se členěním nanejvýš <H3>. Značky <Hn> by se neměly vyskytovat v těle jiných značek, výjimkou je jen značka <DIV>, kterou je naopak doporučeno používat ve spolupráci s hlavičkami.
Anotace z jiných publikací či souborů (toto formátování je vhodné kdykoli chcete část textu odlišit od jeho okolí - např. příklady či cvičení) se uzavřou mezi značky <BLOCKQUOTE> a </BLOCKQUOTE>. Text mezi nimi bude zobrazen na užších řádcích s velkými okraji. Některé prohlížeče pro něj navíc používají kurzívu.
HTML se dokáže vzdát svých formátovacích ambicí, pokud mu sdělíte, že zpracovávaný text již je uspořádán tak, jak má být. Zobrazování předformátovaného textu se řídí zcela jinými pravidly, než je v HTML běžně zvykem. Jsou dodržovány mezery i konce řádku. Naproti tomu je zakázáno používat v předformátovaném textu značky pro členění či formátování. Zkrátka se očekává, že text již je v té podobě, ve které má být zobrazen. Zvýrazňování a odkazy jsou uvnitř povoleny. Předformátovaný text je vymezen značkami <PRE> a </PRE>. Bývá zpravidla zobrazován písmem s pevnou šířkou znaku. Nejčastěji se používá pro ukázky zdrojových textů programu, konfiguračních souborů a podobně.
Poměrně pestrou kapitolu HTML tvoří seznamy. Je podporováno několik druhů, které se navzájem liší svým určením i vzhledem při zobrazení.
Seznam definic (Definition List) obsahuje vždy nadpis položky (zahájený značkou <DT>) a popisný text k ní (zahájený značkou <DD>). Celý seznam je uzavřen mezi značky <DL> a </DL>.
Pro seznam, jehož jednotlivé položky jsou číslovány (Ordered List), používejte dvojici <OL> a </OL>. Naproti tomu nečíslovaný seznam (Unordered List) je uzavřen mezi <UL> a </UL>. Jednotlivé položky jsou u těchto seznamů zahájeny značkou <LI>.
Všechna tato označení můžete do sebe vnořovat do téměř libovolného počtu úrovní.
Je-li seznam složen jen z krátkých položek, bývá v terminologii HTML označen za adresář. V tom případě se pro něj používají značky <DIR> a </DIR>. Podobně zde jsou jednotlivé položky zahájeny značkou <LI>.
Menu (které je do značné míry podobné adresáři) se uzavírá mezi <MENU> a </MENU>.
Příklad neuspořádaného seznamu (další příklady jsou uvedeny v příloze, mnoho jich lze najít v literatuře, např. [2]:
Nas vyrobek je
<UL>
<LI>mimoradne vykonny
<LI>elegantniho designu
<LI>spolehlivy
<LI>ekologicky
</UL>
Při prohlížení této pasáže WWW stránky pak klient zobrazí tento seznam následovně:
Nas vyrobek je
• mimoradne vykonny
• elegantniho designu
• spolehlivy
• ekologicky
Příklad vnoření několika číslovaných seznamů:
<OL>
<LI>Uvod
<LI>Obsah
<OL>
<LI>Prvni cast
<LI>Druha cast
</OL>
<LI>Zaver
<OL>
<LI>Doslov
<LI>Obsah
</OL>
</OL>
Výsledek pak vypadá následovně:
1.Uvod
2.Obsah
1.Prvni cast
2.Druha cast
3.Zaver
1.Doslov
2.Obsah
Tento prvek, který nebyl začleněn do žádné výše uvedené skupiny vypadá následovně:
<!-- tady je nějaký komentář -->
Mezi znaky <! a > se může vyskytovat libovolný počet vlastních komentářů, které musí začínat dvojicí pomlček --.
Právě bez možností provádět odkazy by nebyl WWW, to co opravdu je. Možnost hypertextových dokumentů využíváme sice také v různých nápovědách (HELPech), ale přiznejme si - WWW je přece jen našemu srdci bližší (nebo spíše očím) než nějaká nápověda.
Uvědomme si, že odkaz tvoří nerozlučná dvojice:
- viditelný prvek textu (slovo, věta, ale také obrázek),
- směrník, určující cíl odkazu (co má být zobrazeno, jestliže se uživatel rozhodne následovat tento odkaz).
V HTML se pro určení cíle používá URL. Do textu vložíte odkaz pomocí párové značky <A>, zvané také ukotvení. Její tvar je následující:
<A HREF="URL">viditelný text</A>
Text, uzavřený mezi značky <A> a </A> je součástí dokumentu. Tento text bývá zpravidla klienty odlišen a to obvykle podtržením a barvou textu. Cíl odkazu je specifikován prostřednictvím atributu HREF. Pokud bude URL obsahovat některý z rizikových znaků (apostrof, uvozovky), musí se tento znak patřičně zakódovat. Pokud je cílový soubor umístěn na vašem počítači, musíte definovat cestu v hierarchii vašich adresářů např.:
<A HREF="D:/info/texty/text.htm">odkaz na text</A>
Pokud je cílový soubor umístěn ve stejném adresáři jako stránka, ze které se odkazujete, stačí zapsat jen název souboru.
Odkazy na části stránek umožňují v HTML dokumentu odkazovat na pouhou část dokumentu a to tak, že na místo lokátoru připojíme #ČástDokumentu. Nejdříve však musíme v dané části dokumentu naznačit, že (si) chceme “odskočit” na toto místo:
<A NAME="jméno">viditelný text</A>
V HTML
verze 3 by měl atribut NAME zvolna vymizet. Nová verze jej sice
obsahuje, ale měla by se dát přednost atributu ID. K zavedení
návěští nebude nutno vkládat <A>.
Např. místo zápisu
<A NAME="msdos">MS-DOS</A>
se použije zápis
<ID="msdos">MS-DOS
Odkaz nemusí vést jen k souboru, obsahujícímu jinou stránku. Můžete se odkázat prakticky na cokoli - animaci, zvukový záznam, ...
K tomu, abyste mohli zařadit do WWW dokumentu obrázek, musíte jej nejdříve převést do formátu GIF nebo JPG. Doporučuje se dávat přednost formátu GIF, neboť opět ne všichni klienti podporují formát JPG. Navíc ve formátu GIF můžete vytvářet řadu speciálních efektů, jako je průhledné pozadí, prokládané řádky, animace atd.
Zařazení obrázku do dokumentu provedete jednoduchým příkazem: <IMG>
Tato značka je nepárová a umožňuje použít následující atributy:
SRC="URL" URL obrázku, který má být vložen do textu,
ALING= zarovnání vůči okolí. Tento atribut má následující možné parametry:
TOP horní okraj,
MIDDLE střed,
BOTTOM spodní okraj,
LEFT vlevo obtékaný text*,
RIGHT vpravo obtékaný text*,
ALT="text" klient, který nemůže zobrazit obrázek napíše místo něj tento text,
ISMAP= vyznačuje tzv. klikací obrázek,
WIDTH= požadovaná šířka obrázku*,
HEIGHT= požadovaná výška obrázku*.
* tyto atributy zavádí až HTML verze 3.
Pokud však chcete ukončit obtékání obrázku dříve (pokud je text krátký a nepokryje celou výšku obrázku), nabízí HTML atribut CLEAR, kterým dosáhnete toho, že další text bude pokračovat až za obtékanými obrázky.
Tato základní informace Vám umožní práci s obrázky v HTML dokumentu. Jejich tvorbou (ať už si jej sami nakreslíte nebo provedete digitalizaci nějaké fotografie) se v tomto textu zabývat nebudeme.
Vzhledem ke stále větší a větší zahlcenosti linek si pořádně rozmyslete, jak velký obrázek chcete do textu umístit. Ideálem je obrázek o velikosti několika málo KB. S narůstající velikostí obrázku roste také doba načítání WWW stránky a tím také nervozita návštěvníka stránky (ze zkušeností víme, že nejpozději po deseti sekundách ho to přestane bavit).
Proto pokud chcete do dokumentu umístit nějaký větší “kousek”, doporučujeme použít tzv. náhled - zmenšeninu Vašeho obrázku, která bude sloužit jako odkaz na původní obrázek.
Zápis bude vypadat následovně :
<A HREF="stul.gif"><IMG SRC="stolecek.gif"></A>
Vzhledem k názvům obou obrázků, je patrné, který z nich je v původní velikosti a který je oním náhledem.
Pokročilejší metody formátování
V této kapitole budou popsány další možnosti, které můžete použít při formátování textu. Využívají však nestandardní označení a proto je ne všechny prohlížeče dokáží aplikovat.
Pokud chcete vystředit na stránce části textu nebo obrázky, použijte následující prvek:
<CENTER>centrovaný text</CENTER>
Pro zarovnání k levému či pravému okraji pak slouží příkazy ALING=LEFT, resp. ALING=RIGHT
např.
< IMGSCR=”obrazek.gif” ALING=LEFT>
Pokud pak nebudete chtít, aby text obrázek obtékal, umístěte před začátek textu <BR CLEAR=LEFT>,text se pak začne psát až od levého okraje stránky. Místo LEFT, také můžete podobně použít parametry RIGHT, ALL.
Základní barva pozadí je obvykle šedá, ale my dokážeme toto implicitní nastavení změnit zadáním vhodných parametrů přímo na stránce.
Můžeme
nastavit libovolnou barvu pro následující prvky stránky:
pozadí - BGCOLOR
běžný text - TEXT
text odkazu - LINK
použitý odkaz - VLINK
Barvu prvku pak nastavíme pomocí číselného vyjádření barvy v kódu RGB, např.: BGCOLOR=”#FFFFFF”. Pro nejčastější barvy můžeme použít jejich anglické názvy, např. BGCOLOR=”red”, LINK=”blue” V tomto případě se jedná o barvu bílou. Údaje o barvách platí pro celou stránku a zapisují se hned na její začátek k označení BODY. Např.:
<BODY BGCOLOR=”00FFFF” TEXT=”FF0000” LINK=”00FF00” VLINK=”0000FF”>
Pozadím
stránky může být i obrázek ve formátu JPEG nebo GIF a prohlížeč
jej pak opakuje na stránce tolikrát, kolikrát se tam vejde. Předpis
zapíšeme podobně jako barvy k označení BODY:
<BODY
BACKGROUND=”pozadi.gif”>
Než se pustíme do popisu dalšího rozsáhlého nástroje jazyka HTML, vraťme se ještě k záhlaví dokumentu. Víme, že se skrývá mezi značkami <HEAD> a </HEAD>. Projdeme si alespoň ty základní prvky:
TITLE - o tomto prvku, jsme se již zmiňovali. Slouží především jako záložka (bookmark) a jde o jedinou povinnou část záhlaví.
ISINDEX - určuje, že tento dokument je spojen s programem (CGI skriptem) a pro klienta z toho vyplývají jisté povinnosti.
LINK - odkazuje na jiný dokument. Používá se obvykle pro vyjádření autorství, odkazy na staré nebo novější verze dokumentu.
META - umožňuje zadávat metainformace o dokumentu vyjádřené pomocí identifikátoru NAME a přidružené hodnoty určené atributem CONTENT. Např.:
<meta name =”Author” content=”Me Jmeno”>
Bez tabulek se asi obejdeme jen ztěží. Verze HTML 2 je sice nenabízí, ale v současné době je již podporuje řada klientů, takže je klidně (nebo spíše téměř klidně) můžete použít na své stránce. Původní návrh tabulek v HTML verze 3 byl celkem jednoduchý, ale návrh z konce října 1995 je o poznání komplikovanější, což zase určitě způsobí problémy některým klientům. Proto se seznámíme především s původním návrhem pro tvorbu tabulek.
Tabulka je vyznačena párovými značkami <TABLE>...</TABLE>. Každý řádek je zahájen značkou <TR>. Každá buňka začíná značkou <TD>. Obě značky (<TR>,<TD>) lze ukončit párovou značkou (</TR> resp. </TD>), ale není to nutné.
Takto bychom mohli sestavit jednoduchou tabulku, ale můžeme ji dále vylepšovat:
Pokud
chceme mít v tabulce tradiční rámečky a oddělovací čáry,
vložíme je do tabulky pomocí atributu BORDER, popř. můžeme
zadat i číselnou hodnotu. Např.:
<TABLE BORDER> popř. <TABLE BORDER=5>
Záhlaví tabulky (tedy jakési odlišení názvů řádků) můžeme provést známým způsobem - pomocí <STRONG >...</STRONG>, nebo pomocí HTML 3 značkou <TH>.
Zarovnání textu v buňkách umožňuje atribut ALING s nabízenými hodnotami LEFT, CENTER, RIGHT, JUSTIFY (v MS WORD známe toto zarovnání jako zarovnání do bloku), CHAR (zarovnávají se pod sebe první výskyty nějakého znaku).
Atributem VALIGN lze předepsat, jak bude zarovnán text v buňkách ve svislém směru. Přípustné hodnoty jsou TOP, MIDDLE, BOTTOM a BASELINE.
Nadpis tabulky zajistíme párovými značkami <CAPTION>...</CAPTION>, které by měly být zařazeny mezi <TABLE> a prvním <TR>.
Nepravidelnosti v tabulce provedeme pomocí atributu ROWSPAN=číslo resp. COLSPAN=číslo, přidaných k příslušným značkám <TD> resp. <TH>. První atribut udává počet řádků, do kterých má buňka zasáhnout, druhý udává počet sloupců. Nesmíme zapomenout, že takováto buňka se stává součástí následujících řádků (sloupců) a musíme tedy vynechat buňku v místě, kde zasahuje jiná buňka.
Ukážeme si příklad použití těchto příkazů na ukázkové tabulce:
<TABLE BORDER>
<CAPTION> Prodane kusy zbozi A a B </CAPTION>
<TR><TH ROWSPAN=2>Mesic <TH COLSPAN=2>Prodej zbozi
<TR> <TH>A <TH>B
<TR ALIGN=RIGHT><TD ALIGN=LEFT>Leden
<TD>865 <TD>16
<TR ALIGN=RIGHT><TD ALIGN=LEFT>Unor
<TD>917 <TD>8
<TR ALIGN=RIGHT><TD ALIGN=LEFT>Brezen
<TD>1036 <TD>18
</TABLE>
Tabulka pak bude vypadat následovně:
| Prodej zbozi | ||
A |
B | |
| Leden | 865 |
16 |
| Unor | 917 |
8 |
| Brezen | 1036 |
18 |
Dalším nestandardním rozšířením jazyka se staly tzv. obrázkové mapy. Jde vlastně o obrázek nebo jeho části, které slouží jako odkazy na odpovídající HTML dokumenty. Existují dva druhy těchto “klikacích map”.
Prvním typem jsou obrázkové mapy, jejichž činnost je závislá na WWW serveru a patřičném obsluhujícím programu - CGI skriptu. Tento způsob práce obrázkových map však díky nutnosti obsluhy CGI skriptem způsobuje velké zatížení serveru. Proto se objevil druhý typ těchto obrázkových map a to tzv. klientské obrázkové mapy. Podporují je dva v současné době nejvíce rozšíření klienti - Netscape Navigator a MS Explorer.
Tvorbu těchto map si můžete usnadnit buď pomocí programu MapEdit, nebo můžete použít následující postup:
Do dokumentu vložíte obrázek a definujete klientovi, že se k němu váže určitá definice kliky:
<IMGSRC=”obrazek.gif” USEMAP=”#jmeno kliky”>
Dále definujeme plochy pro jednotlivé odkazy. Tato definice mapy může být uvedena kdekoli na stránce:
<MAP NAME=” jmeno kliky”>
<AREA SHAPE=”tvar” COORDS=”souradnice” HREF=”Cilove URL” ALT=”popis”>
</MAP>
Parametr ALT slouží opět pro klienty pracující pouze v textovém režimu.
Použitelné
tvary oblastí jsou:
kruh:
<AREA
SHAPE=”CIRCLE” COORDS=”x-střed, y-střed,
poloměr” HREF=”URL”>
čtyřúhelník:
<AREA
SHAPE=”RECT” COORDS=”levá, horní, pravá, dolní” HREF=”URL”>
polygon:
<AREA SHAPE=”POLYGON” COORDS=”x1, y1,...xN, yN ” HREF=”URL”>
Ukázka jednoduché “klikací mapy” či též “obrázku s klikou”:
<IMGSRC=”mapa.gif”
USEMAP=”#plan”>
<MAP NAME=”plan”>
<AREA SHAPE=”CIRCLE” COORDS=”63,65,60” HREF=”odkaz1.htm”>
<AREA SHAPE=”RECT” COORDS=”255,8,361,111” HREF=” odkaz2.htm”>
<AREA SHAPE=”POLYGON” COORDS=”182,1,117,115,255,115” HREF=” odkaz3.htm”>
</MAP>
Určitě
se někdy setkáte s případem, kdy budete chtít umístit na
své stránce svoji zpáteční adresu a určitě k tomu budete
chtít využít elektronickou poštu. HTML vám nabízí způsob, jak
vám usnadnit tuto práci, aniž by pak potenciální pisatel musel
složitě vytvářet a odesílat zprávu pro vás pomocí jeho
e-mailového software.
Pomocí příkazu MAILTO docílíte toho, že ťuknutí na tento odkaz zobrazí vstupní okno e-mailového programu, do kterého pak může potenciální pisatel zapsat svoji zprávu a odeslat ji.
Zápis vypadá takto:
<A HREF=”mailto:jmeno@domena”>adresa, ktera bude videt na strance</A>
Po aktivaci tohoto odkazu se otevře okno programu vaší elektronické pošty s předvyplněnou adresou a vám nezbývá, než jen napsat zprávu a zmáčknou tlačítko k odeslání.
Tento prvek HTML dokumentu může sloužit pro komunikaci formou dotazovacího formuláře a umožňuje tak získat potřebné informace od čtenáře stránky (pokud ovšem bude chtít). Ke každému formuláři však musí existovat obslužný CGI skript, který dokáže tyto informace zpracovat.
Základní formulářovou značkou je párová <FORM> a </FORM>, která obklopuje celý formulář. Mezi těmito značkami se mohou vyskytovat rozličné prvky HTML dokumentu. Formuláře však nelze do sebe vnořovat.
Nejdůležitějšími parametry jsou ACTION a METHOD. ACTION určuje metodu, kterou klient použije pro odeslání dat. Může to být GET nebo POST (pro rozsáhlejší formuláře). Parametr ACTION určuje, který CGI skript se má použít pro vyhodnocení formuláře.
Většina polí je pak realizována značkou <INPUT>, jejíž atribut TYPE rozlišuje druh pole.
formulářových polí jsou následující:
Jednoduchý text:
<INPUT TYPE=TEXT MAXLENGHT=n>
kde atribut maxlenght udává max. možnou délku zadaného textu
Vypínač:
<INPUT TYPE=CHECKBOX NAME=”jméno” VALUE=”hodnota”>
Toto pole má dvě hodnoty - zapnuto a vypnuto. Jestliže je při odeslání formuláře políčko zaškrtnuto, pak klient vloží do odeslaných informací dvojici jméno = hodnota
Přepínač:
<INPUT TYPE=RADIO NAME=”jméno” VALUE=”hodnota”>
Jde o skupinu hodnot z nichž právě jedna může být zatržena. Atributy jsou stejné jako u typu CHECKBOX, kde však může být těchto políček (použijeme-li více CHECKBOXů) zatrženo několik.
Tlačítko pro odeslání:
<INPUT TYPE=SUBMIT VALUE=”nápis na tlačítku”>
Aktivací tohoto pole dáme pokyn klientovi k odeslání formuláře.
Tlačítko pro reset:
<INPUT TYPE=RESET VALUE=”nápis na tlačítku”>
Aktivací tohoto pole dáme klientovi pokyn k vrácení implicitních hodnot všem polím formuláře.
Další typy polí jsou použity v ukázce na konci této příručky.
Netscape verze 2.0 přišel s novinkou, která představuje nemalý zásah do HTML. Tento perspektivní prvek se však zřejmě brzy stane standardem.
Je to rozdělení okna prohlížeče na několik zcela nezávislých podoken, v nichž mohou být zcela různé samostatné dokumenty.
Rámce nahrazují značku BODY, místo této značky je dokument uzavřen mezi značky <frameset> a </frameset>. Parametry pak určují, na kolik samostatných rámců bude okno prohlížeče rozděleno a jak budou velké. Rámce se mohou vytvářet horizontálně nebo vertikálně. Mohou se libovolně vnořovat do sebe, čímž můžeme docílit libovolné uspořádání stránky. Velikost rámců se definuje atributem ROWS= nebo COLS= s výčtem údajů oddělených čárkami.
Jsou-li to pouze čísla, jde o absolutní rozměr v pixelech, jsou-li údaje v procentech, rozdělí se okno prohlížeče v příslušném poměru. Použijeme-li místo údaje hvězdičku *, přizpůsobí se rozměr okna dané situaci. Např.: COLS=100,* se vytvoří dva rámce vedle sebe, levý se šířkou 100 pixelů, pravý se doplní dle situace. Napíšeme-li COLS5=50%,* vzniknou opět dva rámce vedle sebe, tentokrát bude levý zabírat vždy 50% šířky okna prohlížeče, pravý se opět doplní. Podobně můžeme zapsat ROWS=50,* čímž se vytvoří dva vodorovné rámce nad sebou, horní s výškou 50 pixelů, dolní se patřičně přizpůsobí.
Pod definicí rozměrů pak uvedeme výčet rámů, kde každý je uveden označením <FRAME> a atributy, z nichž je nejdůležitější odkaz na dokument, který bude v tomto rámu zobrazen při načtení stránky. Např.:
<FRAME SRC=”obsah.htm”>
kde obsah.htm je normální stránka se všemi prvky, které jsme si ukázali.
Tímto bychom mohli kapitolu o rámcích ukončit, ale nesmíme zapomenout na prohlížeče, které rámce nepodporují. Ty by z této stránky neměly vůbec nic. Proto do kódu stránky uvedeme ještě část, která definuje dokument pro tyto prohlížeče. Tuto část napíšeme mezi značky: <NOFRAMES>...</NOFRAMES>.
Takže hlavní stránka může vypadat následovně:
<HTML>
<HEAD>
<TITLE>Firma s.r.o.</TITLE>
</HEAD>
<FRAMESET ROWS=”100,*”>
<FRAME SRC=”nadpis.htm”>
<FRAME SRC=”home.htm”>
</FRAMESET>
<NOFRAMES>Tohle je WWW stranka firmy
<H1>BlaBlaBla</H1>
...
</NOFRAMES>
</HTML>
V Netscape 2.0 můžeme také definovat, do kterého okna se má otevřít dokument, na který se chceme podívat pomocí příslušného odkazu. Musíme ale nejdříve pojmenovat okno, do kterého chceme tento dokument zobrazit a to pomocí atributu NAME. Pak teprve můžeme k patřičnému odkazu přidat atribut TARGET=”cílové okno”. Takže předchozí ukázku můžeme rozšířit:
<HTML>
...
<FRAMESET ROWS=”100,*”>
<FRAME SRC=”nadpis.htm”>
<FRAME NAME=”hlavni” SRC=”home.htm”>
</FRAMESET>
<NOFRAMES>
...
</NOFRAMES>
</HTML>
V dokumentu nadpis.htm pak můžeme uvést odkazy na další stránky, které se pak místo do rámu, ze kterého byly vyvolány (implicitní volba), zobrazí do rámu s atributem NAME=”hlavni”.
Dokument nadpis.htm pak bude vypadat třeba následovně:
<HTML>
<HEAD>
<TITLE>Nadpis</TITLE>
</HEAD>
<BODY BGCOLOR=”#0000FF”>
...
<A HREF=”kap1.html” TARGET=”hlavni”><IMG SRC=”1.gif”>
</A><P>
<A HREF=”kap2.html” TARGET=”hlavni”><IMG SRC=”2.gif”>
</A><P>
...
</BODY>
</HTML>
Na obdobném principu je založen přístup použitý v ukázkách na konci příručky, kdy po kliknutí na odkazu je požadovaný dokument zobrazen do nově otevřeného browseru.