streda, júla 05, 2006

Usporiadaný zoznam

Preklady

Ak chceme na stránke vymenovať niekoľko položiek, ktorých poradie v zozname je dôležité, použijeme značku „<ol>“ na ohraničenie celého zoznamu; jednotlivé položky budú ohraničené značkou „<li>“. Napríklad:

<p>Ročné obdobia:</p>
<ol>
<li>Jar</li>
<li>Leto</li>
<li>Jeseň</li>
<li>Zima</li>
</ol>

Ročné obdobia:

  1. Jar
  2. Leto
  3. Jeseň
  4. Zima

Štandardne sú položky označované číslami od 1. Môžeme si ale vybrať rôzne iné číslovacie systémy: armenian, cjk-ideographic, georgian, lower-greek, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha, lower-latin, upper-latin, lower-roman, upper-roman.

Zoznam ročných období číslovaný veľkými rímskymi číslicami bude vyzerať takto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ročné obdobia</title>
<style type="text/css">
ol.rocne_obdobia {
 list-style-type: upper-roman;
}
</style>
</head>
<body>

<p>Ročné obdobia:</p>
<ol class="rocne_obdobia">
<li>Jar</li>
<li>Leto</li>
<li>Jeseň</li>
<li>Zima</li>
</ol>

</body>
</html>

Ročné obdobia:

  1. Jar
  2. Leto
  3. Jeseň
  4. Zima

posted by Viliam Búr at 10:53 PM 1 comments

utorok, júla 04, 2006

Štýl (2)

Preklady

Grafické štýly môžeme zadať k jednotlivým značkám XHTML. Niekedy sa však stane, že chceme zadať štýl len pre nejakú časť odstavca, alebo naopak pre niekoľko odstavcov, hoci tomu v pôvodnom texte žiadna značka nezodpovedá. V takom prípade použijeme pomocné značky „<div>“ a „<span>“. Tieto značky samotné nič neznamenajú – ak ich pridáme do textu stránky, nič sa nezmení – ale možno k nim pridávať štýly. Použijeme ich vtedy, ak chceme zadať štýl pre nejakú časť stránky, na ktorú sa nevzťahuje žiadna značka XHTML. Značka „<div>“ môže obsahovať niekoľko odstavcov; značka „<span>“ naopak ohraničuje niekoľko slov v rámci jedného odstavca.

Príklad:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Rôzne štýly</title>
<style type="text/css">
div.zaramovany_text {
 border: 1px solid red;
}
span.modre_slova {
 color: blue;
 
}
</style>
</head>
<body>

<p>Nasledujúci text je v rámčeku.</p>
<div class="zaramovany_text">
<p>Páči sa mi
 <span class="modre_slova">rieka, more, oceán</span>.</p>
<p>Keď vidím slovo súvisiace
 s <span class="modre_slova">vodou</span>,
 musím ho napísať modrým písmom.</p>
</div>
<p>Toto bol umelecký text.</p>

</body>
</html>

Nasledujúci text je v rámčeku.

Páči sa mi rieka, more, oceán.

Keď vidím slovo súvisiace s vodou, musím ho napísať modrým písmom.

Toto bol umelecký text.

posted by Viliam Búr at 11:37 PM 0 comments

pondelok, júla 03, 2006

Štýl

Preklady

V hlavičke stránky XHTML možno pomocou jazyka CSS zadať grafické vlastnosti jednotlivých prvkov stránky. Štýl prvku sa zadáva ako vymenovanie niekoľkých vlastností. Napríklad ak chceme, aby všetky odstavce (teda všetky texty mezi značkami „<p>“) mali zelenú farbu a šikmé písmo, zadáme:

p {
 color: green;
 font-style: italic;
}

Odstavec potom napíšeme jednoducho takto:

<p>Tento odstavec je zelený a šikmý,
 tak ako všetky odstavce na tejto stránke.</p>

Niekedy však nechceme, aby mali zelenú farbu všetky odstavce, ale iba niektoré vybrané. V takom prípade dané odstavce označíme vymysleným slovom, napríklad „lesne_pismo“. V štýle zadáme, že sa zelenou farbou majú zobraziť len odstavce typu „lesne_pismo“. (V názve typu sa nesmú nachádzať dĺžne a mäkčene, ani medzery, atď.)

p.lesne_pismo {
 color: green;
}

Vybrané odstavce označíme pomocou parametra „class“:

<p>Toto je obyčajný odstavec.</p>
<p class="lesne_pismo">Toto je zelený odstavec.</p>
<p>Ďalší obyčajný odstavec.</p>
<p class="lesne_pismo">Ďalší zelený odstavec.</p>

Môžeme dokonca zadať, že všetky odstavce majú nejakú vlastnosť, len vybrané odstavce ju majú inú. Napríklad všetky odstavce budú šikmým písmom, len odstavce typu „lesne_pismo“ budú zelenou farbou a rovným písmom:

p {
 font-style: italic;
}
p.lesne_pismo {
 color: green;
 font-style: normal;
}

Príklad:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Farebné odstavce</title>
<style type="text/css">
p {
 font-style: italic;
}
p.lesne_pismo {
 color: green;
 font-style: normal;
}
</style>
</head>
<body>

<p>Toto je obyčajný odstavec.</p>
<p class="lesne_pismo">Toto je zelený odstavec.</p>
<p>Ďalší obyčajný odstavec.</p>
<p class="lesne_pismo">Ďalší zelený odstavec.</p>

</body>
</html>

Toto je obyčajný odstavec.

Toto je zelený odstavec.

Ďalší obyčajný odstavec.

Ďalší zelený odstavec.

posted by Viliam Búr at 9:35 PM 0 comments

nedeľa, júla 02, 2006

Nadpis

Preklady

Nadpisy sa v jazyku XHTML píšu podobne ako odstavce, ale namiesto značiek „<p>“ a „</p>“ sú ohraničené značkami „<h1>“ a „</h1>“, alebo „<h2>“ a „</h2>“,... až po „<h6>“ a „</h6>“. Jednotlivé čísla označujú nadpisy a podnadpisy; napríklad nadpis kapitoly je „h1“ a nadpis podkapitoly je „h2“.

<h1>Domáce zvieratá</h1>

<h2>Pes</h2>

<p>Pes je najlepší priateľ človeka.</p>

<h2>Mačka</h2>

<p>Mačka chytá myši.</p>

Okrem toho možno nastaviť názov stránky pomocou značky „<title>“ v hlavičke stránky. Tento názov sa nezobrazuje v texte stránky, ale navrchu internetového prezerača, prípadne v jeho záložke. Ak si uložíte stránku do zoznamu obľúbených stránok, bude označená týmto názvom.

<title>Domáce zvieratá -- Encyklopédia zvierat</title>

Názov stránky a hlavný nadpis sú dve nezávislé informácie, hoci mnohokrát je logické použiť rovnaký text (obidvoje popisuje, čo sa nachádza na stránke). Názov stránky sa zobrazuje len v hlavičke prezerača, ale nie v samotnej stránke. Hlavný nadpis sa zase zobrazuje len na stránke.

Nadpisy jednotlivých úrovní sa zvyčajne zobrazujú rôznymi veľkosťami písma. Hlavný nadpis musí byť vždy „h1“ - je chybou použiť namiesto neho značku pre podnadpis len preto, že chceme menšie písmo. Veľkosť písma jednotlivých nadpisov a podnadpisov môžeme nastaviť takto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Domáce zvieratá -- Encyklopédia zvierat</title>
<style type="text/css">
h1 {
 font-size: 18pt;
}
h2 {
 font-size: 14pt;
}
p {
 font-size: 12pt;
}
</style>
</head>
<body>

<h1>Domáce zvieratá</h1>

<h2>Pes</h2>

<p>Pes je najlepší priateľ človeka.</p>

<h2>Mačka</h2>

<p>Mačka chytá myši.</p>

</body>
</html>

Výsledná stránka sa zobrazí takto. (Nadpis okna webového prezerača bude „Domáce zvieratá -- Encyklopédia zvierat“).

Domáce zvieratá

Pes

Pes je najlepší priateľ človeka.

Mačka

Mačka chytá myši.

posted by Viliam Búr at 11:48 PM 0 comments

sobota, júla 01, 2006

Odstavec

Preklady

Odstavec je niekoľko riadkov textu, niekoľko viet tvoriacich jeden celok. Zároveň je to asi najčastejšie používaná značka jazyka XHTML. Ak na úvod a záver stránky skopírujeme úvodné a záverečné značky, na vytvorenie jednoduchej textovej stránky ani viac nepotrebujeme.

Začiatok odstavca je označený značkou „<p>“, koniec odstavca značkou „</p>“. Text napísaný medzi tým bude zarovnaný do jedného odstavca na výslednej stránke. Šírka odstavca sa prispôsobí šírke okna webového prezerača a veľkosti písma – takže čo bude mať jeden návštevník stránky zobrazené na tri riadky, môžu byť u iného napríklad dva alebo štyri. Nie je teda dôležité, kde urobíme pri písaní textu koniec riadku; dôležité je iba umiestnenie značiek „<p>“ a „</p>“.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Jednoduchá textová stránka</title>
</head>
<body>

<p>Toto je prvý odstavec.
Aj táto veta je v prvom odstavci.
Táto tiež.</p>

<p>Nie je
    dôležité,
  kde urobíte koniec riadku. Nenechajte sa obmedzovať.
Mimochodom, toto je druhý odstavec.</p> <p>A toto tretí.</p>

</body>
</html>

Nezabudnite v hlavičke stránky uviesť správne kódovanie. Výsledná stránka bude vyzerať asi takto:

Toto je prvý odstavec. Aj táto veta je v prvom odstavci. Táto tiež.

Nie je dôležité, kde urobíte koniec riadku. Nenechajte sa obmedzovať. Mimochodom, toto je druhý odstavec.

A toto tretí.

Vyskúšajte si zväčšovať a zmenšovať okno webového prezerača, a sledujte, ako sa text v odstavcoch prispôsobuje veľkosti okna. Paráda, nie?

Možno takáto stránka vyzerá až príliš jednoducho; chýbajú jej farby, obrázky a rôzne ozdoby. Ale pamätajte si, že text je základom stránky (ak nerobíte galériu obrazov alebo niečo podobné); najťažšie je vymyslieť, čo presne chcete napísať, a napísať to. Grafiku možno pridať aj neskôr.

posted by Viliam Búr at 4:38 PM 0 comments

piatok, júna 30, 2006

Kódovanie znakov

Preklady

Občas sa stáva, že sa webová stránka správne zobrazuje na autorovom počítači, kde bola vytvorená, ale keď si ju cez internet čítajú iní návštevníci, text sa stane nečitateľným. Namiesto písmen s diakritikou sa objavujú štvorčeky, otázniky, alebo celkom iné písmená. Príčinou je, že autor na stránke nezadal kódovanie (alebo ho zadal nesprávne). Táto chyba je pomerne častá, pretože sám autor si ju zvyčajne nevšimne – musí ho na to upozorniť niekto druhý.

Čo je to kódovanie? Zjednodušene povedané, z technického hľadiska sú v počítači všetky údaje uložené ako čísla (a všetky čísla sú uložené ako jednotky a nuly – ale týmto sa dnes nebudeme zaoberať). Takže aj písmená a iné znaky napísané v textovom editore si počítač pamätá ako čísla; každému znaku priradí nejaké číslo, napríklad „A“ bude 65, „B“ bude 66,... a tak textový súbor uloží na disk ako postupnosť čísel, a potom ho zase z disku ako postupnosť čísel prečíta a zobrazí príslišné písmená; aj cez internet ho pošle ako postupnosť čísel.

Kameň úrazu je práve v tom, že ktorý znak zodpovedá ktorému číslu. Z historických dôvodov existuje niekoľko rôznych noriem. Každá berie určitú skupinu znakov a nejako im prideľuje čísla. Takzvané 8-bitové normy sa snažia používať len čísla od 0 do 255 – do toho sa samozrejme nemôžu zmestiť všetky znaky, takže daná norma vždy zahŕňa len znaky pre niekoľko jazykov. Slovenský MS Windows štandardne ukladá textové súbory v kódovaní „windows-1250“. (Ak používate anglický, je to „windows-1252“ a niektoré znaky s diakritikou sa pri uložení stratia.) Na Linuxoch sa zase zvyčajne používajú štandardy ISO, na slovenských „ISO-8859-2“ a na anglických „ISO-8859-1“.

Okrem toho existuje štandard Unicode, ktorý sa snaží zahrnúť všetky znaky všetkých abecied; jedným z jeho kódovaní je „UTF-8“. Ak uložíte textový súbor v kódovaní UTF-8, môže byť písaný v hocijakom jazyku. Takže rozhodne odporúčam používať toto kódovanie.

Dôležité však je, aby webový prezerač návštevníka vašej stránky vedel, v akom kódovaní bola vytvorená. Dnešné webové prezerače zvyčajne poznajú mnoho kódovaní, a používateľ si môže správne kódovanie zvoliť v menu. Ak však správne kódovanie uvediete v stránke, návštevník nič nastavovať nemusí, pretože sa mu to správne nastaví samo. Ak teda používate kódovanie „windows-1250“, uvádzajte v hlavičke stránky:

<meta equiv="Content-Type" content="text/html; charset=windows-1250"/>

Ak chcete stránku uložiť v kódovaní UTF-8, v programe Poznámkový blok (Notepad) vyberte v menu „Súbor | Uložiť ako...“ a v dolnom riadku vyberte „Kódovanie: UTF-8“. Toto urobte pri prvom uložení súboru, neskôr si to už program bude pamätať. A v hlavičke stránky uveďte:

<meta equiv="Content-Type" content="text/html; charset=UTF-8"/>

posted by Viliam Búr at 10:14 PM 0 comments

štvrtok, júna 29, 2006

Vitajte na stránke „WWW príklady“!

Preklady

Tento blog bude o vytváraní webových stránok a rôznych veciach s tým spojených. Príklady a vysvetlenia pre začiatočníkov, ale aj užitočné tipy z praxe pre pokročilých.

Úplný začiatočník by si podľa neho mal vedieť vyrobiť webovú stránku v súlade s internetovými štandardmi; čo je latka, ktorú nespĺňajú mnohé komerčne robené weby. Na druhej strane si myslím, že aj webmajster s niekoľkoročnou praxou tu občas nájde nejaký šikovný trik alebo užitočnú pomôcku – samozrejme zďaleka nie v každom článku.

Budú sa tu často vyskytovať „čarovné slovíčka“ ako HTML, XHTML, CSS, JavaScript, PHP, a niektoré ďalšie. Keby čokoľvek nebolo jasné, opýtajte sa v diskusii pod článkom. Budem sa snažiť zverejňovať nové články pravidelne, pokiaľ možno jeden denne; ale nič nesľubujem.

Dosť bolo rečí. Spravme si rýchlo prvú webovú stránku. Do textového súboru skopírujte nasledujúci text, a potom ho uložte pod názvom napríklad „pokus.html“. A otvorte v internetovom prezerači:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="sk" lang="sk">
<head>
<meta equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Moja prva stranka</title>
<style type="text/css">
h1 {
 color: blue;
}
</style>
</head>
<body>

<h1>Moja prva stranka</h1>
<p>Tuto webovu stranku som si vytvoril za niekolko sekund.</p>

</body>
</html>

Ak sa všetko podarilo, výsledná stránka by mohla vyzerať asi takto:

Moja prva stranka

Tuto webovu stranku som si vytvoril za niekolko sekund.

O význame jednotlivých značiek až niekedy nabudúce.

posted by Viliam Búr at 7:16 PM 0 comments