Domovní www stránka – druhá část základního kurzu tvorby domovní prezentace V minulém čísle jsme se naučili, jak napsat jednoduchou www prezentaci a vysvětlily jsme si co musíme udělat pro její umístění a spuštění na serveru.
Jak se říká „Opakování je matka moudrosti“ připomeneme si tagy (příkazy) html kódu:
<html>
</html> - deklarace html stránky, párový tag
<body>
</body> - deklarace těla stránky, párový tag
<title>
</title> - pojmenování našich stránek pro vyhledávače, párový znak
<table>
</table> - definice tabulky, párový znak
<tr>
</tr> - definice sloupce, párový znak
<td>
</td> - definice řádku, respektive buňky v řádku, párový tag
<a tref=“adresa“>
</a> - link na adresu, párový tag
<img src=“adresa obrázku> - vložení obrázku, nepárový tag
<br> - ukončení řádku
<font size=“+/-velikost v bodech“ color=“barva hexadecimálním kódu“>
</font> - definice velikosti a barvy písma, párový tag
Nyní vidíme, jak vypadají ty nejzákladnější tagy, a pustíme se do vlastní tvorby stránky.
/* poznámka */ - poznámka, není vidět v prohlížeči, zobrazuje se pouze ve zdrojovém kódu. V tomto dílu si ukážeme jak měnit barvy pozadí, jak vytvořit jednoduchou nabídku (menu) v boční sloupci a horní liště a zpestříme naši stránku prvkem, který se jmenuje I FRAME.
Víme, že jednoduché stránky jsou vytvořeny na základě tabulky.
Tato tabulka představuje matici kdy jednotlivé buňky jsou definicí umístění jednotlivých grafických prvků. Mnohdy však musíme řešit situaci, kdy potřebujeme sloučit několik buněk v řádku nebo sloupci. Toto sloučení je realizováno pomocí parametru colspan nebo rawspan umístěných v odpovídajících příkazech specifikujících daný řádek respektive sloupec.
Příklad:
Budeme definovat tabulku s třemi řádky a třemi sloupci.
Potřebujeme vytvořit prostor pro nabídku v levém sloupci sloučením všech tří buněk tohoto sloupce. Provedeme standardní definici tabulky a definice první buňky prvního sloupce bude vypadat následovně:
<td rowspan=“3“>
Následuje standardní definování ostatních buněk Celá tabulka bude mít zápis:
<table border=1>
<tr>
<td rowspan=3>levá buňka</td>
<td>prostřední buňka</td>
<td>pravá horní buňka
</tr>
<tr>
<!-- zde nic -->
<td>prostřední buňka</td>
<td>prostřední pravá buňka</td>
</tr>
<tr>
<!-- zde nic -->
<td>dolní prostřední buňka</td>
<td>dolní pravá buňka</td>
</tr>
</table>.
Potřebujeme vytvořit záhlaví v prvním řádku sloučením všech tří buněk do jedné. Provedeme standardní definici tabulky a definice první buňky prvního sloupce bude vypadat následovně:
<td colspan=“3“>
Všechny ostatní buňky budou mít již známý zápis.
Mnohdy nám však při tvorbě stránky jedna tabulka nestačí a to hlavně z důvodu nepřehlednosti zdrojového kódu v případech, kdy vznikne při našem návrhu tabulka s větším počtem řádků a sloupců. Tuto situaci můžeme vyřešit pomocí vnořených tabulek. Někteří tvůrci s tímto postupem příliš nesouhlasí, ale pokud do sebe nevnoříme více jak tři tabulky nedochází k žádným problémů při interpretaci různými prohlížeči a my získáme daleko větší přehled ve zdrojovém kódu.
Příklad:
Vytvoříme základní tabulku, která bude mít dva řádky a tři sloupce o různé šířce. Buňky prvního sloupce sloučíme do jedné – bude představovat záhlaví stránky. Do druhé buňky prvního sloupce vložíme tabulku, která nám pomůže vytvořit ve svých buňkách nabídku, druhá buňka druhého sloupce bude složit pro vkládání požadovaného textu a třetí buňka prvního sloupce bude opět osazena tabulkou, kdy do jejích jednotlivých buněk budeme vkládat zajímavé odkazy, nebo partnerská loga. POZN: Tuto situaci lze pochopitelně řešit i jinými způsoby, nám jde o ukázku vnořených tabulek.
Zdrojový kód naší výše popsané tabulky:
<table border=1 width="800"<
<tr>
<td colspan=3>Záhlaví naší stránky</td>
<!-- zde nic -->
<!-- zde nic -->
</tr>
<tr>
<td>
<table width="150">
<tr>
<td>
Nabídka 1
</td>
</tr>
<tr>
<td>
Nabídka 2
</td>
</tr>
<tr>
<td>
Nabídka 3
</td>
</tr>
<tr>
<td>
Nabídka 4
</td>
</tr>
</table>
</td>
<td width="500">
Prostor pro náš text a obrázky.
</td>
<td>
<table width="150">
<tr>
<td>
Link 1
</td>
</tr>
<tr>
<td>
Link 2
</td>
</tr>
<tr>
<td>
Link 3
</td>
</tr>
<tr>
<td>
Link 4
</td>
</tr>
</table>
</td>
</tr>
</table>
Jistě jste si všimli, že jsem definoval i celkovou šířku tabulky a tím i naší budoucí stránky hodnotou width=“800“ což 800 bodů v základním tagu tabulky a následně šířku dvou krajních sloupců na hodnotu 150 bodů v definici první a poslední buňky druhého řádku.
V prostředním sloupci pod záhlavím chceme zobrazovat náš text, ale chceme také, aby byl dostatečně přehledný. Tuto situaci vyřešíme vložením tak zvaného plovoucího rámu do buňky připravené pro text. Výhoda tohoto prvku je v tom, že jej můžeme umístit kamkoliv na stránce, můžeme mu přidělit jméno a díky tomu do něj směřovat jednotlivé linky.
Syntaxe tohoto prvku je:
<iframe src="uvodni_soubor.html" width="šířka v bodech nebo procentech" height="výška v bodech nebo procentech" name="název iframu" frameborder=“hranice v bodech“ scrolling="scrolování ano/ne"> Vytvoříme iframe, který se bude jmenovat texty, úvodní text bude v souboru texty.html a bude ve stejném adresáři jako stránka, která obsahuje náš iframe, bude mít šířku 500 bodů, výšku 100% a bude umožňovat scrolování v případě, že to bude potřeba a nebude mít ohraničení. Příkaz bude vypadat následovně:
<iframe src="texty.html" width="700" height="100%" name="texty" frameborder=0> Do tohoto prostoru budeme směřovat články, respektive texty z levé nabídky. Link bude mít tvar:
<a href="nabidka_1.html" target="texty"><b>Nabídka 1</b></a> Pro lepší zviditelnění je vlastní viditelný text ztučněn.
Nyní naše poznatky sloučíme dohromady v následujícím příkladu:
Máme stránku, která je definována tabulkou, která má tři sloupce a dva řádky. Buňky prvního řádku jsou sloučeny do jedné – záhlaví. Do první buňky druhého sloupce je vložena tabulka nabídka, následující buňka bude obsahovat iframe s úvodním textem a ta poslední zajímavé linky, pro příklad jsem zvolil stránku určenou pro vás jak zdroj informací www.pronasdum.cz:
Kód je následující:
<table border=1 width="800">
<tr>
<td colspan=3>Záhlaví naší stránky</td>
<!-- zde nic -->
<!-- zde nic -->
</tr>
<tr>
<td>
<table width="150">
<tr>
<td>
<a href="nabidka_1.html" target="texty"><b<Nabídka 1</b<</a>
</td>
</tr>
<tr>
<td>
<a href="nabidka_2.html" target="texty"><b<Nabídka 2<</b<</a>
</td>
</tr>
<tr>
<td>
<a href="nabidka_3.html" target="texty"><<b<Nabídka 3</b<</a>
</td>
</tr>
<tr>
<td>
<a href="nabidka_4.html" target="texty"><<b<Nabídka 4</b<</a>
</td>
</tr>
</table>
</td>
<td width="500">
<iframe src="texty.html" width="700" height="100%" name="texty" frameborder=0></iframe>
</td>
<td>
<table width="150">
<tr>
<td>
<a href="http://www.pronasdum.cz"> Pro náš dům </a>
</td>
</tr>
<tr>
<td>
<a href="http://www.pronasdum.cz"> Pro náš dům </a>
</td>
</tr>
<tr>
<td>
<a href="http://www.pronasdum.cz"> Pro náš dům </a>
</td>
</tr>
<tr>
<td>
<a href="http://www.pronasdum.cz"> Pro náš dům </a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Je pochopitelné, že musíme ještě vytvořit soubory, na které odkazujeme, aby nám vše fungovalo dle našich představ. Pro jednoduchost se budou jmenovat nabidka_1.html až nabidka_4.html a budou obsahovat část textu tohoto článku, který bude vložen tím nejjednodušším způsobem viz. Článek v posledním čísle loňského roku našeho bulletinu. Tyto soubory budou uloženy do stejného adresaře jako je náš ukázkový příklad. Výsledek je vidět na následujícím obrázku.
Dnes jsem vám ještě slíbil jak podbarvit celou tabulku a jak jednotlivé buňky.
Tato záležitost je velmi jednoduchá a k jejímu provedení použijeme paramtr, který přídáme do záhlaví celé tabulky nebo každé konkrétní buňky. Budeme chtít aby naše stránka z předcházejícího příkladu měla žluté záhlaví modrou nabídku, text byl podbarven světle zelenou a linky aby byly podbarveny opět modře. Celou tabulku podbarvíme světle zelenou následovně:
Do tagu definice přidáme parametr bgcolor=“barva“
<table border=1 width="800" bgcolor=“#99FF00“>
Stejným způsobem upravíme ty buňky, u kterých chceme mít barvu odlišnou od naší podkladové.
<td bgcolor=“blue“<
Tak a nyní asi téměř každý položí otázku. Jednou je do úvozovek vepsán sled číslic a písmen, podruhé název barvy. Vysvětlení je následující. Barvy můžeme zapisovat buď v hexadecimální podobě nebo v podobě jmenné u těch barev, které takovéto pojmenování mají. Jak názvy tak hexadecimální vyjádření poskytuje editor pspad, o kterém jsem psal v minulém čísle, nebo je možné nalézt tyto informace na internetu, případně do hexadecimálního tvaru přepočítat.U hexadecimálního zápisu musíme vždy předřadit mřížku! Naše stránka pak vypadá následovně:
Na obrázku vidíme, že vše je podle našich představ, Výhodou tohoto řešení je i to, že iframe zobrazuje různé naše soubory, které mohou mít různou podkladovou barvu. Takto můžeme různé stránky odlišit nejen zvýrazněním textu, ale také barvou podkladu. Myslím si, že dnes jsme si toho úkázaly poměrně hodně a tak si další úpravy necháme napříště. Budeme se věnovat zjemňování grafiky pomocí dalších parametrů a atributů tabulek, ukážeme si jak vložit a hlavně vytvořit jednoduché podkladové obrázky. Vytvoříme si opravdu první plně funkční stránku našeho domu.
Zdrojové kódy z dnešního článku můžete opět nalézt na www.pronasdum.cz .
Případné dotazy e-mailem. Všem, kteří se do tvorby stránky pustí přeji hodně pečlivosti, trpělivosti a zdaru.