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

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.

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.

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.

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.

Friday, June 30, 2006

Signo-kodigo

Okazadas ofte, ke la retpaĝo montriĝas bone ĉe la komputilo de sia aŭtoro, sed kiam aliaj vizitantoj legas ĝin surrete la teksto fariĝas nelegebla. Anstataŭ supersignitaj literoj aperadas kvadratetoj, demandosignoj, aŭ tute misaj literoj. La kialo estas, ke aŭtoro en la paĝo ne specifis la kodigon (aŭ specifis ĝin malĝuste). Tiu ĉi eraro estas relative ofta, ĉar la aŭtoro mem ĝin ne rimarkos – iu alia devas atentigi ŝ/lin.

Kio estas la kodigo? Simplege dirite, laŭ teknika vidpunkto ĉiuj datumoj estas en komputilo stokitaj kiel numeroj (kaj ĉiuj numeroj estas stokitaj kiel unuoj kaj nuloj – sed pri tio ni hodiaŭ ne zorgos). Do ankaŭ literojn kaj aliajn signojn skribitajn en teksta redaktilo la komputilo memoras kiel numerojn; al ĉiu signo apartenas iu numero, ekzemple „A“ estos 65, „B“ estos 66,... kaj la teksta dosiero estas konservita al disko kiel sinsekvo de numeroj, poste estas ŝargita de disko kiel sinsekvo de numeroj; kaj ankaŭ tra interreto estas sendita kiel la sinsekvo de numeroj.

La problema parto estas, al kiu signo apartenas kiu numero. Pro historiaj kialoj ekzistas kelkaj malsamaj normoj. Ĉiu subtenas iun aron de signoj kaj apartenigas iel al ili numerojn. La 8-bitaj normoj celas uzi nur numerojn 0 ĝis 255 – kompreneble tio ne sufiĉas por ĉiuj literoj, do la unuopa normo nur subtenas literojn de kelkaj lingvoj. Ĉapelitaj literoj de Esperanto ne estas subtenataj fare de kodigoj de MS Windows. (Se vi skribos ĉapelitajn literojn en TXT dosiero kaj konservos ĝin, ili malaperos.) La „sud-Eŭropaj“ versioj de Linukso kutime uzas normon de ISO „ISO-8859-3“, subtenantan ĉapelitajn literojn.

Krom tio ekzistas normo Unikodo, celanta enhavi ĉiujn literojn de ĉiuj alfabetoj; unu el ĝiaj kodigoj estas „UTF-8“. Se vi konservos la tekstan dosieron en UTF-8, ĝi povas esti skribita en ajna lingvo. Do mi rezolute rekomendas uzi tiun ĉi kodigon.

Grave estas, ke la retumilo de la vizitanto de via paĝo sciu, en kiu kodigo la paĝo estis kreita. Hodiaŭaj retumilo kutime komprenas multajn kodigojn, kaj la uzanto povas elekti la ĝustan kodigon de la menuo. Sed se vi specifas la ĝustan kodigon en la paĝo mem, la vizitanto de devas elekti ion ajn, ĉar tio elektiĝos aŭtomate. Do se vi uzas la kodigon „ISO-8859-3“, bonvolu skribi en la kapo de la paĝo:

<meta equiv="Content-Type" content="text/html; charset=ISO-8859-3"/>

En MS Windows, se vi volas konservi la paĝon en la kodigo UTF-8, en programo Notilo (Notepad) elektu en menuo „Dosiero | Konservu kiel...“ kaj en la malsupra parto elektu „Kodigo: UTF-8“. Tion faru je la unua konservigo de la dosiero, poste la programo jam memoros tion. Kaj en la kapo de la paĝo skribu:

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

Thursday, June 29, 2006

Bonvenu al „WWW Ekzemploj“!

Tiu ĉi blogo temos pri kreado de retpaĝoj kaj aliaj rilatantaj aĵoj. Ekzemploj kaj klarigoj por la komencantoj, sed ankaŭ utilaj ideoj por la progresintoj.

Ĝia celo estas ebligi la ĵus-komencinton krei la retpaĝon kongruan kun la interretaj normoj; jen je kio eĉ multaj komerce faritaj retpaĝoj ne kapablas. Tamen mi pensas ke ankaŭ la retestro kelkjare sperta iam povus trovi tie ĉi la utilan ideeton aŭ ilon – kompreneble ne en ĉiu artikolo.

Oni tie ĉi trovos „magiajn vortojn“ kiel HTML, XHTML, CSS, JavaScript, PHP, kaj kelkajn aliajn. Se io ajn malklaras, bonvolu demandi en la diskuto sub la artikolo. Mi penos publikigi novajn artikolojn regule, prefere tage po unu artikolo; sed mi ne povas tion promesi.

Sufiĉas parol'. Ni rapide faru nian unuan retpaĝon. Bonvolu krei la tekstan dosieron enhavantan la sekvantan tekston; kaj konservi ĝin kiel ekzemple „testo.html“. Kaj malfermu ĝin en retumilo:

<!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>Mia unua retpagxo</title>
<style type="text/css">
h1 {
 color: blue;
}
</style>
</head>
<body>

<h1>Mia unua retpagxo</h1>
<p>Mi kreis tiun cxi retpagxon dum kelkaj sekundoj.</p>

</body>
</html>

Se ĉio sukcesis, la paĝo devus aspekti tiel ĉi:

Mia unua retpagxo

Mi kreis tiun cxi retpagxon dum kelkaj sekundoj.

Venonte ni parolos pri la signifo de la unuopaj markoj.