Jsi 1286096. návštěvník.
Tento den 61.
|
|
Svátek |
Dnes má svátek
Jiří.
Redakce Tarsicia
blahopřeje.
|
|
Doporučujeme |
|
|
|
 HTML - Lekce 3.
Co dokáže počítač
 V minulých lekcích jsme se seznámili se základními zásadami jazyka HTML i tvorby internetových stránek. Předpokládám, že ti, co mají o tuto problematiku hlubší zájem, navštívili různé stránky o HTML, popřípadě si pořídili nějakou příručku.
Nyní tedy umíme vytvořit jednoduchou webovou stránku, formátovat text, vzájemně propojit stránky odkazy. Zvídavější jistě pronikli i k obrázkům, tvorbě tabulek, vkládání CSS stylů či jednoduchých tabulek.
V této lekci se proto nebudeme tolik zabývat jednotlivými tagy. Jejich popis si najděte ve své příručce (nebo třeba na www.jakpsatweb.cz/html). Předpokládám však, že jste tyto záležitosti již prozkoumali.
Tvoříme web
Nyní se tedy můžeme pustit do vlastní tvorby webu. Základní zásady jsme si popsali v první lekci (o čem budeme psát, kdo se bude starat o správu…). Řekněme, že chceme vytvořit jednoduché stránky našeho sdružení ministrantů. Vezmeme si do ruku tužku a papír a načrtneme si základní schéma webu – např. Kdo jsme, Akce, Rady, Odkazy atd.
Je dobré, aby všechny stránky měly podobný vzhled – to nám aspoň usnadní práci. Vytvoříme si nejprve základní (úvodní) stránku. Nejsem grafik, ale asi vám nemusím říkat, že na pozadí jsou vhodné světlé (pastelové) barvy, naopak text by měl být kontrastní (černá je klasika). Ladit by měly také odkazy a nadpisy. Výběr barvy vám může usnadnit pomůcka Kapátko (Eye Dropper, viz http://eyedropper.inetia.com).
Rovněž u volby písma platí střídmost. Písmo, které máte nainstalované vy, nemusí mít uživatel třeba na druhém konci světa. Vyskytují se rovněž problémy s češtinou, i když se předpokládá, že ten, kdo čte české stránky, má nainstalovanou českou znakovou sadu. Standardní kódování je Středoevropské jazyky (ISO), nazývané též Latin 2. Někdy se také používá „obyčejné“ kódování Windows. Kódování specifikujete vložením tohoto tagu:
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-2"> do hlavičky. Můžeme zadat klidně více druhů písma, jako poslední definici dáme tzv. generické písmo (celý tag může vypadat např. takto:
<font face=“Verdana,Tahoma,sans-serif“>. Prohlížeč tedy zobrazí Verdanu, pokud není na počítači, použije Tahomu, a pokud ani v tomto případě neuspěje, vybere standardní bezpatkové písmo (což je většinou Tahoma, ale přece jenom…).
Základní struktura stránky
Asi jste si všimli, že hodně stránek má podobné schéma. Nahoře bývá logo stránek, v pravé části jsou v úzkém pruhu přehledně uspořádány odkazy, zbylý prostor vyplňuje vlastní text stránky. Tak to můžete vidět třeba na webu Tarsicia.
Způsobů, jak toho docílit, je více. Každý má své výhody i nevýhody. Pro náš „menší“ web bude možná zpočátku stačit, když celá stránka bude jedna velká tabulka (pokud počítáme, že budeme často měnit obsah, je lepší použít rámy, ale pro ty už není v této lekci místo). Schéma stránky může vypadat třeba takto:
|
Záhlaví stránky
|
odkaz
odkaz
odkaz
|
hlavní obsah stránky:
nadpisy,
obrázky,
texty…
|
Abyste to neměli pro začátek tak těžké, připravili jsme pro vás tuto základní kostru stránky (vložíme do sekce <body>):
<table border="0" width="100%">
<tr>
<td colspan="2">Záhlaví stránky</td>
</tr>
<tr>
<td valign="top" width="100%">odkazy</td>
<td valign="top">hlavní text</td>
</tr>
</table>
Všimněte si, že u tabulky je definován parametr widht=100%. To zajišťuje, aby tabulka byla široká přes celou stránku bez ohledu na její šířku. Zkuste si to! U druhé buňky (s odkazy) je definována pevná šířka 160 pixelů. A ta poslední buňka se přizpůsobí tomu, co na ní zbyde. Do definice buňky (před ukončení tagu <td>) můžeme vepsat třeba bgcolor="#FFFFCC", čímž určíme podkladovou barvu buňky.
Web tvoří více stránek
!Oprava! V tištěné verzi kurzu jsme uvedli, že šířku 100% má první buňka. Není to pravda, šířku 100% má celá tabulka!
Nyní naplníme jednotlivé buňky obsahem. S tím vám asi nebudu muset radit (pokud by přece jenom byl nějaký problém, pište e-maily na html@tarsicius.cz). Pohrejte si s tím. Hlavně s prvními dvěma buňkami, protože ty budou na všech stránkách stejné.Úvodní stránka se standatně jmenuje index nebo default (s příponou htm, html, php popř. jinou). Pokud jsme s vzhledem spokojeni, jednoduše stránku nakopírujeme v rámci dané složky (např. na akce.htm, kdojsme.htm, odkazy.htm). Teď si pohrajeme z každou stránku zvlášť, zejména s tím, aby byly funkční odkazy. Pokud máme stránku s odkazy na jiné weby, je dobré pravidelně kontrolovat jejich funkčnost (autora těchto stránek vyrozumět, popř. požádat o povolení odkaz zveřejnit).
Prostor, vymezený této lekci, je naplněn. Setkáme se opět za dva měsíce. Mezitím si můžete se svými stránkami hrát, zkoušet je vylepšit, dávat je číst druhým a zkoumat jejich reakce. V případě nejasností se můžete obrátit na náš web, kde najdete kontaktní formulář.
Čtvrtou lekcí náš počítačový seriál o tvorbě www stránek končí. Věříme, že vás zaujal (to poznáme podle spousty nově vzniklých webů – dejte nám o nich vědět!). Očekáváme vaše náměty, o čem má časopis Tarsicius dále psát!
|
|
