WWW Príklady: júla 2006

streda, júla 05, 2006

Usporiadaný zoznam

Preklady

eo: WWW Ekzemploj
en: WWW Examples

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:

Jar
Leto
Jeseň
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:

Jar
Leto
Jeseň
Zima

utorok, júla 04, 2006

Štýl (2)

Preklady

eo: Stilo (2)
en: Style (2)

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.

pondelok, júla 03, 2006

Štýl

Preklady

eo: Stilo
en: Style

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.

nedeľa, júla 02, 2006

Nadpis

Preklady

eo: Titolo
en: Heading

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.

sobota, júla 01, 2006

Odstavec

Preklady

eo: Alineo
en: Paragraph

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.

WWW Príklady

streda, júla 05, 2006

Usporiadaný zoznam

utorok, júla 04, 2006

Štýl (2)

pondelok, júla 03, 2006

Štýl

nedeľa, júla 02, 2006

Nadpis

sobota, júla 01, 2006

Odstavec

Author

Previous Posts

Archives