Kiel fari TTT-pagxojn

Helpelementoj kaj atributoj

En tiu cxi leciono vi lernos pri la jenaj elementoj:

  • div = bloko
  • span = parto de teksto
  • pre = antauxformatigita teksto

Vi ankaux lernos iom pri atributoj: lang, xml:lang, class, id kaj name.

Blokaj kaj neblokaj elementoj «

Gxenerale oni dividas la elementojn, kiuj aperas ene de body en du grupojn:

Blokaj elementoj = Elementoj, kiuj en normala prezentado formas blokon kun linirompo antauxe kaj linirompo poste. La tipa ekzemplo de bloka elemento estas p (alineo da teksto), sed blokaj elementoj estas ankaux h1, h2 ... h6 (titoloj), ul, ol, li (listoj) kaj hr (horizonatala streko).
Neblokaj elementoj = Elementoj, kiuj en normala prezentado estas parto de kuranta teksto, kaj kiuj ne kauxzas rompon de linio. Tiaj elementoj estas ekzemple em, strong (emfazo), a (ligo) kaj img (bildo).

En miaj aliaj pagxoj pri XHTML trovigxas tabelo de cxiuj XHTML-aj elementoj. Tiu tabelo montras por cxiu elemento, cxu gxi estas bloka aux nebloka (aux cxu tiu distingo ne estas sencohava aux trafa por la koncerna elemento). Se vi scivolemas, rigardu tiun tabelon.

div: Gxenerala bloka elemento

Foje oni bezonas indiki, ke parto de la pagxoenhavo konsistigas blokon, sen diri ion apartan pri tiu bloko. Tiam oni povas uzi la elementon div. Tiu elemento ne havas signifon krom tio, ke gxi asertas ke la enhavo formas blokon, kies diversaj partoj iamaniere kunapartenas.

<div>
  <p>Jen alineo kun teksto. Jen <em>grava teksto</em>.</p>
  <p>Jen alia alineo kun teksto.</p>
</div>

Tian “anoniman” elementon oni povas suficxe ofte bezoni. La elemento mem ne vere esprimas ion, sed oni povas aldoni al gxi diversajn atributojn, kiuj donas informojn. Jen ekzemploj:

lang, xml:lang Per lang-atributo oni povas diri, en kiu lingvo (homa lingvo) estas la teksto de la elementoenhavo. Ekz. lang="eo" diras, ke la teksto estas en Esperanto. Antauxe oni uzis por tio lang. Ekde XHTML 1.0 oni povas uzi xml:lang por la sama informo. Por ke ankaux malnovaj TTT-legiloj komprenu, oni uzu ambaux samtempe: lang="eo" xml:lang="eo".
class Per class-atributo oni metas elementon en certan “klason”. Ekz. class="speciala" diras, ke la elemento apartenas al la klaso “speciala”. Poste oni povas ekzemple per stilfolio proponi apartan prezentomanieron por cxiuj elementoj, kiuj apartenas al tiu klaso. La klasnomojn oni devas mem elpensi. En la leciono pri stilfolioj ni lernos, kiel oni povas uzi tiajn klasojn.
id Per id-atributo oni donas unikan nomon (identecon) al elemento. Ni jam vidis ekzemplon de id-atributo en la klarigoj pri ligiloj. Sed oni uzas id ankaux por aliaj aferoj, ekzemple por doni apartan stilon al certa unika elemento en pagxo. Pri tio ni lernos en la leciono pri stilfolioj. Kompreneble oni povas aldoni id-atributon ankaux sen tuj uzi gxin por io konkreta. Se cxiuj gravaj partoj de pagxo jam dekomence havas id-nomon, tio poste povos esti utila, ekz. se iu volos fari ligilon al certa loko en tiu pagxo.
name Ankaux per name-atributo oni donas nomon al elemento. name similas al id. Oni uzas name precipe en formularoj (pri kiuj ni lernos poste).

Atributoj cxiam skribigxas kiel nomo + egalsigno + valoro inter citiloj. Oni povas uzi duoblajn citilojn (“...”) aux unuoblajn (‘...’): nomo="valoro", nomo='valoro'.

Jen ekzemploj, kiel oni povas aldoni atributojn al div-elemento, kaj ankaux al elementoj ene de tiu div-bloko:

<div lang="eo" xml:lang="eo" class="grupo" id="bloko1">
  <p>Jen alineo kun teksto.</p>
  <p>La sekva vorto estas grava Angla vorto:
  <em lang="en" xml:lang="en">money</em>.</p>
</div>

La tuta div-bloko do estas en Esperanto. Gxi apartenas al la klaso “grupo”, kaj havas la unikan identigilon “bloko1”. Ene de la bloko estas tamen em-elemento, kiu ne estas en Esperanto, sed en la Angla lingvo. Tiu elemento havas apartajn atributojn lang kaj xml:lang, kiu indikas la Anglan lingvon per ties mallongigo en.

Noto: Informoj pri la homa lingvo de la teksto povas esti necesaj por vocxlegiloj, kiuj devas uzi diversajn regulojn por legi la tekston depende de la lingvo. Legi Esperantan tekston laux la reguloj de ekzemple la Angla lingvo, ne estas tre bona ideo. Ankaux sercxrobotoj povas uzi la informojn pri lingvo, kiam ili faras indeksojn de la enhavo de TTT-pagxoj.

Noto: Normale estas plej bone doni la lingvon de la pagxo jam en la html-elemento. Tiu indiko poste validas auxtomate por cxiuj elementoj ene de html. Ili auxtomate heredas tiun lingvoindikon de la html-elemento. Simile en la cxi-antauxa ekzemplo la p-elementoj heredas la lingvoindikon de la div-elemento, cxar ili ambaux estas parto de la div-elemento. La em-elemento - la sola parto de la dua p-elemento, kiu ne estas en Esperanto - bezonas apartan indikon pri la Angla lingvo.

span: Gxenerala nebloka elemento

La elemento span estas simila al la elemento div, cxar ankaux span ne havas per si mem ian signifon. Oni uzas span, kiam oni bezonas per atributo diri ion pri parto de teksto, sed ne havas kialon por uzi ekzemple em, strong, a aux alian sencohavan neblokan elementon.

Ekz. en la cxi-antauxa ekzemplo ni aldonis informon pri lingvo al em-elemento. Tiam ni diris, kaj ke la enhavo de tiu elemento estas grava (emfazita), kaj ke gxi estas en la Angla. Se ni volas diri nur, ke la enhavo estas en la Angla, ni ne povas uzi em. Se ni havas nenion alian por diri, ol ke la enhavo estas en la Angla, ni povas skribi jene:

<span lang="en" xml:lang="en">money</span>

Jen ekzemplo de span-elementoj kun class-atributoj:

<p>
Unu <span class="ovorto">vidvino</span> havis du 
<span class="ovorto">filinojn</span>. La pli <span
class="avorto">maljuna</span> estis tiel <span
class="avorto">simila</span> al la <span
class="ovorto">patrino</span> per sia <span
class="ovorto">karaktero</span> kaj <span
class="ovorto">vizagxo</span>, ke cxiu, kiu sxin vidis,
povis pensi, ke li vidas la
<span class="ovorto">patrinon</span>.
</p>

En tiu teksto cxiu O-vorto (vorto kun O-finajxo) estas markita per span-elemento kun la klaso “ovorto”, kaj cxiu A-vorto estas markita per span-elemento kun la klaso “avorto”. Poste oni povas ekzemple per stilfolio proponi, ke O-vortoj estu prezentataj per rugxa teksto, kaj ke A-vortoj estu prezentataj per verda teksto.

pre: Antauxformatigita teksto

La elemento pre estas aparta kaj escepta elemento. Gxi ne esprimas ian signifon, sed estas uzata, kiam oni volas prezenti parton de teksto gxuste tiel, kiel gxi estas tajpita kun cxiuj spacosignoj, linirompoj, taboj k.s.

pre do estas escepto al la principo, ke TTT-legiloj ignoru blanksignojn. Ene de pre tiaj signoj ja gravas. Krome la TTT-legiloj (normale) ne adaptas la tekston ene de pre-elemento al la largxeco de la fenestro, kaj plej ofte ili uzas tiparon fikslargxan por prezenti tiun tekston.

Jen ekzemplo de pre-elemento:

<pre>
	Tiu cxi teksto estas antauxformatigita
	kun linirompoj kaj blanksignoj, kiuj
	ne estas            ignorataj de la
	TTT-legilo. Antaux cxiu linio estas tabo.
	Taboj tamen ne cxiam funkcias tre bone en
	"pre"-elementoj.
</pre>

Faru mem XHTML-pagxon kun pre-elemento, kaj testu la prezenton en TTT-legilo.

Al la sekva leciono