Wednesday, July 05, 2006

Ordigita listo

Tradukoj

Se ni volas listi kelkajn erojn en la paĝo, kaj se ilia ordo gravas, ni povas uzi markon „<ol>“ por marki la tutan liston, kaj markojn „<li>“ por marki la unuopajn erojn. Ekzemple:

<p>Sezonoj:</p>
<ol>
<li>Printempo</li>
<li>Somero</li>
<li>Aŭtuno</li>
<li>Vintro</li>
</ol>

Sezonoj:

  1. Printempo
  2. Somero
  3. Aŭtuno
  4. Vintro

Defaŭlte la eroj estas numeritaj per numeroj ekde 1. Sed ni povas elekti kelkajn aliajn numer-sistemojn: armenian, cjk-ideographic, georgian, lower-greek, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha, lower-latin, upper-latin, lower-roman, upper-roman.

La listo de sezonoj numerita per majusklaj romaaj numeroj aspektos tiel ĉ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" xml:lang="eo" lang="eo">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sezonoj</title>
<style type="text/css">
ol.sezonoj {
 list-style-type: upper-roman;
}
</style>
</head>
<body>

<p>Sezonoj:</p>
<ol class="sezonoj">
<li>Printempo</li>
<li>Somero</li>
<li>Aŭtuno</li>
<li>Vintro</li>
</ol>

</body>
</html>

Sezonoj:

  1. Printempo
  2. Somero
  3. Aŭtuno
  4. Vintro

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

Tuesday, July 04, 2006

Stilo (2)

Tradukoj

Ni povas specifi grafikajn stilojn por unuopaj XHTML markoj. Sed foje okazas, ke ni volas specifi la stilon nur por la parto de iu alineo, aŭ male, por kelkaj alineoj; sed neniu marko en la originala teksto markas tion. Tiukaze no povas uzi helpajn markojn „<div>“ kaj „<span>“. Tiuj ĉi markoj sole signifas nenion – se ni aldonas ilin al la teksto de la paĝo, nenio ŝanĝos – sed ni povas al ili aldoni stilojn. Ni uzos ilin por specifi la stilon por la parto de paĝo sen speciala XHTML marko. La marko „<div>“ povas enhavi kelkajn alineojn; la marko „<span>“ povas male enhavi kelkajn vortojn ene unu alineo.

La ekzemplo:

<!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="eo" lang="eo">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Diversaj stiloj</title>
<style type="text/css">
div.teksto_en_kadro {
 border: 1px solid red;
}
span.bluaj_vortoj {
 color: blue;
 
}
</style>
</head>
<body>

<p>La sekvanta teksto estas en la kadro.</p>
<div class="teksto_en_kadro">
<p>Plaĉas al mi
 <span class="bluaj_vortoj">rivero, maro, oceano</span>.</p>
<p>Se mi vidas la vorton rilatantan
 al <span class="bluaj_vortoj">akvo</span>,
 mi devas skribi ĝin per blua koloro.</p>
</div>
<p>Tiu ĉi estis arta teksto.</p>

</body>
</html>

La sekvanta teksto estas en la kadro.

Se mi vidas la vorton rilatantan rivero, maro, oceano.

Whenever I see a word related to al akvo, mi devas skribi ĝin per blua koloro.

Tiu ĉi estis arta teksto.

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

Monday, July 03, 2006

Stilo

Tradukoj

En la kapo de la XHTML paĝo ni povas specifi la grafikajn ecojn de unuopaj eroj uzante la stil-lingvon CSS. La stilo estas aro de kelkaj ecoj. Se ni ekzemple volas, ke ĉiuj alineoj (do ĉiuj tekstoj inter markoj „<p>“) havu verdan koloron kaj kursivon, ni skribu:

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

Kaj la alineon ni simple skribas tiel ĉi:

<p>Jen la verda kursiva alineo,
 samkiel ĉiuj aliaj alineoj en tiu ĉi paĝo.</p>

Sed ni foje ne volas verdigi ĉiujn alineojn, nur kelkajn elektitajn. Tiukaze ni marku la elektitajn alineojn per iu nomo, ekzemple „arbaraj_literoj“. Kaj en la stilo ni specifas, ke ĉiuj alineoj de tipo „arbaraj_literoj“ havu la verdan koloron. (La nomo de la tipo ne povas enhavi ĉapelitajn literojn, spacojn, ktp.)

p.arbaraj_literoj {
 color: green;
}

La elektitajn alineojn ni marku per la eco „class“:

<p>Jen normala alineo.</p>
<p class="arbaraj_literoj">Jen verda alineo.</p>
<p>Jen plua normala alineo .</p>
<p class="arbaraj_literoj">Jen plua verda alineo.</p>

Ni eĉ povas specifi, ke ĉiuj alineoj havu ian econ, kaj la elektitaj havu la alian. Ekzemple ĉiuj alineoj estu kursivaj, nur la alineoj de tipo „arbaraj_literoj“ estus verdaj kaj ne-kursivaj:

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

Ekzemple:

<!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="eo" lang="eo">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Koloraj alineoj</title>
<style type="text/css">
p {
 font-style: italic;
}
p. arbaraj_literoj {
 color: green;
 font-style: normal;
}
</style>
</head>
<body>

<p>Jen normala alineo.</p>
<p class="arbaraj_literoj">Jen verda alineo.</p>
<p>Jen plua normala alineo.</p>
<p class="arbaraj_literoj">Jen plua verda alineo.</p>

</body>
</html>

Jen normala alineo.

Jen verda alineo.

Jen plua normala alineo.

Jen plua verda alineo.

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

Sunday, July 02, 2006

Titolo

Tradukoj

La titolojn oni en la lingvo XHTML skribas simile al alineoj, nur anstataŭ ol markoj „<p>“ kaj „</p>“ ili estas markitaj per „<h1>“ kaj „</h1>“, aŭ „<h2>“ kaj „</h2>“,... ĝis „<h6>“ kaj „</h6>“. Unuopaj numeroj markigas titolojn kaj subtitolojn; ekzemple la titolo de la ĉapitro estas „h1“ kaj titolo de la subĉapitro estas „h2“.

<h1>Hejmaj bestoj</h1>

<h2>Hundo</h2>

<p>Hundo estas la plej bona amiko de homo.</p>

<h2>Kato</h2>

<p>Kato ĉasas musojn.</p>

Kaj la titolon de la paĝo oni povas specifi per marko „<title>“ en la kapo de la paĝo. Tiu ĉi titolo ne aperas en la teksto de la paĝo, sed en la supro de la retumilo, aŭ en ĝia langeto. Se vi aldonas la paĝon al la listo de la plej ŝatataj paĝoj, ĝi uzos tiun titolon.

<title>Hejmaj bestoj – Plena Ilustrita Bestaro</title>

La titolo de la paĝo kaj la titolo de la ĉapitro estas du sendependaj informoj, kvankam ofte estas logike uzi la saman tekston (ambaŭ priskribas la enhavon de la paĝo). La titolo de la paĝo montriĝas nur en la supro de la retumilo, ne en la paĝo mem. La titolo de la ĉapitro aperas nur en la paĝo.

La unuopaj niveloj de la titoloj kutime bildiĝas per malsamaj grandoj de la tiparo. La ĉefa titolo devas ĉiam esti „h1“ - estas erare uzi anstataŭ ĝi la markon por subtitolo nur por bildigi malpli grandan tiparon. La grandon de la tiparo de unuopaj titoloj kaj subtitoloj oni povad agordi tiel ĉ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" xml:lang="eo" lang="eo">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hejmaj bestoj – Plena Ilustrita Bestaro</title>
<style type="text/css">
h1 {
 font-size: 18pt;
}
h2 {
 font-size: 14pt;
}
p {
 font-size: 12pt;
}
</style>
</head>
<body>

<h1>Hejmaj bestoj</h1>

<h2>Hundo</h2>

<p>Hundo estas la plej bona amiko de homo.</p>

<h2>Kato</h2>

<p>Kato ĉasas musojn.</p>

</body>
</html>

La rezulta paĝo bildigas tiel ĉi. (La titolo de la fenestro de retumilo estos „Hejmaj bestoj – Plena Ilustrita Bestaro“).

Hejmaj bestoj

Hundo

Hundo estas la plej bona amiko de homo.

Kato

Kato ĉasas musojn.

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

Saturday, July 01, 2006

Alineo

Tradukoj

Alineo estas la aro de linioj de teksto; kelkaj frazoj kunigitaj laŭsence. Ankaŭ ĝi estas verŝajne la plej ofte uzata marko de la lingvo XHTML. Se al komenco kaj fino de paĝo ni kopias la komencajn kaj finajn markojn, por krei la simplan tekstan paĝon nenio plu estas necesa.

La komenco de la alineo estas markita per „<p>“, la fino de la alineo estas markita per „</p>“. La teksto skribita intere estos laŭliniigita al unu alineo sur la rezulta paĝo. La larĝo de la alineo dependos de la larĝo de fenestro de retumilo kaj grando de tiparo – do kion unu vizitanto de la paĝo vidos kiel tri liniojn, alia povas vidi ekzemple kiel du aŭ tri. Ne gravas kie ni skribante la tekston finos la linion; gravas nur kie estas markoj „<p>“ kaj „</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" lang="eo" lang="eo">
<head>
<meta equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>La simpla tekstpaĝo</title>
</head>
<body>

<p>Jen unua alineo.
Tiu ĉi frazo estas ankaŭ en la unua alineo.
Tiu ĉi same.</p>

<p>Ne
    gravas,
  kie vi finos la linion. Ne zorgu pri tio.
Preterdire, jen la dua alineo.</p> <p>Kaj la tria.</p>

</body>
</html>

Ne forgesu en la kapo de paĝo specifi ĝustan signokodigon. La rezulta paĝo aspektos tiel ĉi:

Jen unua alineo. Tiu ĉi frazo estas ankaŭ en la unua alineo. Tiu ĉi same.

Ne gravas, kie vi finos la linion. Ne zorgu pri tio. Preterdire, jen la dua alineo.

Kaj la tria.

Provu ŝanĝadi la larĝon de la retumilo kaj rigardu, kiel la teksto en la alineoj agordiĝas laŭ la larĝo de la fenestro. Ĉarme, ĉu ne?

Tia paĝo ja povas aspekti tro simple; mankas al ĝi la koloroj, bildoj, kaj aliaj belaĵoj. Sed memoru, ke la teksto estas la fundamento de la paĝo (krom se vi faras bild-galerion aŭ ion similan); plej malfacilas pripensi kion skribi, kaj skribi tion. Pri aspekto oni povas zorgi poste.

posted by Viliam Búr at 4:26 PM 3 comments