Základy HTML/XHTML
Info: obsah těchto stránek byl vytvořen v roce 2018, takže některé informace již jsou zastaralé, i když všeobecné základy jsou stále platné
Rámečky
Rámečky umožňují okno prohlížeče rozdělit do několika nezávyslých oken - rámečků, přičemž v každém okně je možné zobrazit jiný dokument. Pokud v dokumentu existuje odkaz, může se obsah odkazu zobrazit v témže okně (rámečku) nebo v jiném okně (rámečku) nebo i v okně bez rámečků.
POZOR! Dokument s rámečky má jinou strukturu než základní dokument HTML. Obsahuje jen tagy, které popisují rámečky - <frameset>, <frame> a <noframes> - počet řádků a sloupců s rámečky (obdoba tabulky). Tag <iframe>, tzv. plovoucí rámeček, je speciální a je jej možné použít přímo v dokumentu HTML.
Rozvržení rámečku
Rozvržení rámečku je podobné jako u tabulky. Pomocí tagu <frameset> se uspořádají rámečky do řádků a sloupců. Při tom se může stanovit jejich absolutní nebo relativní velikost.
Tag FRAMESET
Slouží k definici celé skupiny rámečků a určení jejich ohraničení, mezer, rozměrů apod. Je možné jej vnořovat. Tag nahrazuje v dokumentu tag <body>. V dokumentu s rámečky nesmí být jiný obsah než záhlaví <head> a <frameset>.
<![CDATA[
<frameset>
další tag <frameset> nebo tag <frame>
</frameset>
<frameset cols="150,650">
<frameset rows="20,*,20">
* tag má povinný atribut a to cols nebo rows
cols - definuje počet a velikost sloupců
rows - definuje počet a velikost řádků
velikost (šířka) může být absolutní (px) = 150
nebo relativní (%) = 30%
nebo zbylý prostor = *
nebo jeho násobky = 3*
* atribut zakazují změnu rozměru rámečku uživatelem
noresize
* atribut zakazující nebo povolují zobrazení ohraničení okolo rámečků
jeho hodnota je různá dle prohlížeče
frameborder="yes" (NN)
frameborder="no" (NN)
frameborder="1" (IE)
frameborder="0" (IE)
* atribut definující šířku ohraničení (jen IE a NE)
border="5" - ohraničení okolo rámečků bude mít šířku 5px, implicitně 1px
* atribut pro definování šířky ohraničení (jen IE a NE)
framespacing="5" - ohraničení okolo bude 5 px
* atribut pro nastavení barvy ohraničení (jen IE a NE)
bordercolor="#FFFFFF" - barva bílá
* další atributy
class - třída stylu
style - přímo vložený styl
title - označení
id - označení, použitelné jako odkaz ve skriptech
title - označení
událostní atributy typu on...
]]>
Tag FRAME
Tag slouží k definici obsahu rámečku, který se zobrazí při prvotním zobrazení. Musí být vždy uvnitř tagu <farmeset>. Zapisuje se po sloupcích zleva do prava a řádcích zhora dolů.
<![CDATA[
<frame>
<frame src="obsah-aaa.html" name="aaa">
* atribut pro určení obsahu rámečku
src="obsah-aaa.html" - v rámečku se zobrazí dokument "obsah-aaa.html"
* atribut definující jméno rámečku
name="aaa" - rámeček se jménem "aaa",
odkaz na něj pak bude <a href="stranky.html" target="aaa">
* atribut zakazují možnost změny rozměrů rámečku uživatelem
noresize
* atribut definují zobrazení posuvníků v rámečku
scrolling="auto" - implicitně, pokud je rámeček menší
než objem zobrazovaných dat, je zobrazen posuvník, jinak ne
scrolling="yes" - posuvníky budou vždy zobrazeny
scrolling="no" - posuvníky nebudou zobrazeny
* atributy definující prostor mezi okrajem rámečku a obsahem
marginheight="10" - horní a dolní okraj bude 10px, iplicitně 1px
marginwidth="10" - levý a pravý okraj bude 10px, iplicitně 1px
* atribut zapínající/vypínající ohraničení okolo rámečku (IE/NE)
frameborder="yes" (NN)
frameborder="no" (NN)
frameborder="1" (IE)
frameborder="0" (IE)
* atribut pro nastavení barvy ohraničení (jen IE a NE)
bordercolor="#FFFFFF" - barva bílá
* atribut pro titulek/název rámečku
title="libovolny text"
* atribut pro popis (dlouhý) rámečku uložený v jiném dokumetu HTML
longdesc="http://www.adresa.cz/popis_ramecku.html"
]]>
Tag NOFRAMES
Dokumen s rámečky nemá tělo, tag <body> a proto obsah je pro prohlížeče, které nepodporují rámečky neviditelný - nic se nezobrazí. Tag <nofarmes> musí být zapsán v hlavním tagu <frameset>, před jeho koncovou značkou. Obsahem tagu <nofarmes> může být normální obsah těla dokumentu obsažený v tagu <body>. Většinou se tento tag využívá k zobrazení textu, že na stránce jsou použity rámečky a případným odkazem na stránky bez rámečků.
<![CDATA[
<frameset>
...
<noframes>
<body>
obsah dokumentu
</body>
</noframes>
</frameset>
nebo
<frameset>
...
<noframes>
obsah dokumentu
</noframes>
</frameset>
]]>
Příklad použití rámečků
<![CDATA[
<frameset rows="50,*" border="0" frameborder="0">
<frame name="hlavicka" src="hlavicka.html" scrolling="no" noresize frameborder="no">
<frameset rows="*,20">
<frameset cols="150,*">
<frame name="menu" src="menu.html" scrolling="no" frameborder="no">
<frame name="obsah" src="obsah.html" frameborder="no">
</frameset>
<frame name="paticka" src="paticka.html" scrolling="no" frameborder="no">
</frameset>
<noframes>
<body>
<p>Omlouváme se, ale tento dokument je možné zobrazit
jen v prohlížeči podporujícím rámečky.</p>
<p>Pokud je nemáte, můžete se podívat
na <a href="obsah.html">Obsah</a>
a tak si prohlédnout jednotlivé stránky.</p>
</body>
</noframes>
</frameset>
]]>
V příkladu je okno rozděleno do čtyř rámečků a je definováno, že se okraje nemají vykreslovat. Přičemž tři mají pevnou velikost, zakaz požití posuvníky a změnu rozměrů uživatelem. Největší rámeček, je definován tak, že má využít celý zbylý prostor a mají se v něm případně zobrazit posuvníky.
Tag IFRAME
Umožňuje vložit rámeček přímo do těla HTML dokumentu. Definuje obdélnikovou plochu, v níž se zobrazí samostatný dokument s definovanými posuvníky a ohraničením.
<![CDATA[
<iframe>
text pro uživatela prohlížečů, které nepodporují rámečky
</iframe>
* atribut definující obsah rámečku
src="stranka.html" - v rámečku bude zobrazen obsah dokumentu "stranka.html"
* atribut definující šířku a výšku rámečku
height="200" - výška 200px, implicitně 150px
width="500" - šířka 500px, implicitně 300px
* atribut definující umístění rámečku vzhledem k okolnímu textu (jako u <table>)
align="top" - zarovnání rámečku s horní hranou řádku
align="middle" - zarovnání rámečku na střed řádku
align="bottom" - zarovnání rámečku se spodní hranou řádku
align="left" - text obtéká rámeček v pravo
align="right" - text obtéká rámeček v levo
align="center" - rámeček bude uprostřed, text bude jen nahoře a dole
* dále používá stejné atributy jako <frame>
]]>
Příklad použití
<![CDATA[
<iframe src="index.html" name="vlozeny_ramecek" frameborder="yes"
align="center" width="90%" height="300" vspace="10" hspace="10">
<p>Protože Váš prohlížeč nepodporuje přímo vložené rámečky,
prohlédněte si <a href="index.html" target="_blank">dokument</a>
po kliknutí na něj ve zvláštním okně.</p>
</iframe>
]]>
Pojmenovaný rámeček a okno jako cíl
Pokud v tagu <frame> použijeme atribut name nebo id, je možné použít takto označený rámeček, jako jméno v atributu target v tagu <a> a tím směrovat zobrazení dokumentu do příslučného okna. Pokud jméno zadané v atributu target neexistuje, prohlížeč zobrazí nové okno s tímto jménem.
Např.
<![CDATA[
<h3>Obsah</h3>
<ul type="square">
<li><a href="uvod.html" target="zobraz">Úvod</a></li>
<li><a href="kap1.html" target="zobraz">Kapitola 1</a></li>
<li><a href="kap2.html" target="zobraz">Kapitola 2</a></li>
<li><a href="zaver.html" target="zobraz">Závěr</a></li>
</ul>
]]>
V souboru s rámečky potom bude:
<![CDATA[
<frameset cols="150,*">
<frame name="obsah" src="obsah.html">
<frame name="zobraz" src="uvod.html">
</frameset>
]]>
A po kliknutí na některý z odkazů v obsahu se zobrazí příslušný dokument v rámečku s názvem "zobraz".
Tag BASE
Tag slouží k definování názvu cíle pro všechny odkazy v dokumentu.
Předchozí příklad s využitím tagu <base>.
<![CDATA[
<head>
<title>Obsah stránek</title>
<base target="zobraz">
</head>
<body>
<h3>Obsah</h3>
<ul type="square">
<li><a href="uvod.html">Úvod</a></li>
<li><a href="kap1.html">Kapitola 1</a></li>
<li><a href="kap2.html">Kapitola 2</a></li>
<li><a href="zaver.html">Závěr</a></li>
</ul>
</body>
]]>