Kiel fari TTT-paghojn

Helpelementoj kaj atributoj

En tiu chi leciono vi lernos pri la jenaj elementoj:

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

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

Blokaj kaj neblokaj elementoj «

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

Blokaj elementoj = Elementoj, kiuj en normala prezentado formas blokon kun linirompo antaue kaj linirompo poste. La tipa ekzemplo de bloka elemento estas p (alineo da teksto), sed blokaj elementoj estas ankau 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 kauzas rompon de linio. Tiaj elementoj estas ekzemple em, strong (emfazo), a (ligo) kaj img (bildo).

En miaj aliaj paghoj pri XHTML trovighas tabelo de chiuj XHTML-aj elementoj. Tiu tabelo montras por chiu elemento, chu ghi estas bloka au nebloka (au chu tiu distingo ne estas sencohava au trafa por la koncerna elemento). Se vi scivolemas, rigardu tiun tabelon.

div: Ghenerala bloka elemento

Foje oni bezonas indiki, ke parto de la paghoenhavo konsistigas blokon, sen diri ion apartan pri tiu bloko. Tiam oni povas uzi la elementon div. Tiu elemento ne havas signifon krom tio, ke ghi 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 sufiche ofte bezoni. La elemento mem ne vere esprimas ion, sed oni povas aldoni al ghi 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. Antaue oni uzis por tio lang. Ekde XHTML 1.0 oni povas uzi xml:lang por la sama informo. Por ke ankau malnovaj TTT-legiloj komprenu, oni uzu ambau 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 chiuj 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 ankau por aliaj aferoj, ekzemple por doni apartan stilon al certa unika elemento en pagho. Pri tio ni lernos en la leciono pri stilfolioj. Kompreneble oni povas aldoni id-atributon ankau sen tuj uzi ghin por io konkreta. Se chiuj gravaj partoj de pagho jam dekomence havas id-nomon, tio poste povos esti utila, ekz. se iu volos fari ligilon al certa loko en tiu pagho.
name Ankau per name-atributo oni donas nomon al elemento. name similas al id. Oni uzas name precipe en formularoj (pri kiuj ni lernos poste).

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

Jen ekzemploj, kiel oni povas aldoni atributojn al div-elemento, kaj ankau 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. Ghi 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 vochlegiloj, kiuj devas uzi diversajn regulojn por legi la tekston depende de la lingvo. Legi Esperantan tekston lau la reguloj de ekzemple la Angla lingvo, ne estas tre bona ideo. Ankau serchrobotoj povas uzi la informojn pri lingvo, kiam ili faras indeksojn de la enhavo de TTT-paghoj.

Noto: Normale estas plej bone doni la lingvon de la pagho jam en la html-elemento. Tiu indiko poste validas automate por chiuj elementoj ene de html. Ili automate heredas tiun lingvoindikon de la html-elemento. Simile en la chi-antaua ekzemplo la p-elementoj heredas la lingvoindikon de la div-elemento, char ili ambau 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: Ghenerala nebloka elemento

La elemento span estas simila al la elemento div, char ankau 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 au alian sencohavan neblokan elementon.

Ekz. en la chi-antaua ekzemplo ni aldonis informon pri lingvo al em-elemento. Tiam ni diris, kaj ke la enhavo de tiu elemento estas grava (emfazita), kaj ke ghi 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">vizagho</span>, ke chiu, kiu shin vidis,
povis pensi, ke li vidas la
<span class="ovorto">patrinon</span>.
</p>

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

pre: Antauformatigita teksto

La elemento pre estas aparta kaj escepta elemento. Ghi ne esprimas ian signifon, sed estas uzata, kiam oni volas prezenti parton de teksto ghuste tiel, kiel ghi estas tajpita kun chiuj 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 largheco de la fenestro, kaj plej ofte ili uzas tiparon fikslarghan por prezenti tiun tekston.

Jen ekzemplo de pre-elemento:

<pre>
	Tiu chi teksto estas antauformatigita
	kun linirompoj kaj blanksignoj, kiuj
	ne estas            ignorataj de la
	TTT-legilo. Antau chiu linio estas tabo.
	Taboj tamen ne chiam funkcias tre bone en
	"pre"-elementoj.
</pre>

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

Al la sekva leciono