Kiel fari TTT-paĝojn

Helpelementoj kaj atributoj

En tiu ĉi leciono vi lernos pri la jenaj elementoj:

  • div = bloko
  • span = parto de teksto
  • pre = antaŭformatigita teksto

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

Blokaj kaj neblokaj elementoj «

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

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

En miaj aliaj paĝoj pri XHTML troviĝas tabelo de ĉiuj XHTML-aj elementoj. Tiu tabelo montras por ĉiu elemento, ĉu ĝi estas bloka aŭ nebloka (aŭ ĉu tiu distingo ne estas sencohava aŭ trafa por la koncerna elemento). Se vi scivolemas, rigardu tiun tabelon.

div: Ĝenerala bloka elemento

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

Atributoj ĉiam skribiĝas kiel nomo + egalsigno + valoro inter citiloj. Oni povas uzi duoblajn citilojn (“...”) aŭ unuoblajn (‘...’): nomo="valoro", nomo='valoro'.

Jen ekzemploj, kiel oni povas aldoni atributojn al div-elemento, kaj ankaŭ 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. Ĝi 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 voĉlegiloj, kiuj devas uzi diversajn regulojn por legi la tekston depende de la lingvo. Legi Esperantan tekston laŭ la reguloj de ekzemple la Angla lingvo, ne estas tre bona ideo. Ankaŭ serĉrobotoj povas uzi la informojn pri lingvo, kiam ili faras indeksojn de la enhavo de TTT-paĝoj.

Noto: Normale estas plej bone doni la lingvon de la paĝo jam en la html-elemento. Tiu indiko poste validas aŭtomate por ĉiuj elementoj ene de html. Ili aŭtomate heredas tiun lingvoindikon de la html-elemento. Simile en la ĉi-antaŭa ekzemplo la p-elementoj heredas la lingvoindikon de la div-elemento, ĉar ili ambaŭ 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: Ĝenerala nebloka elemento

La elemento span estas simila al la elemento div, ĉar ankaŭ 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 aŭ alian sencohavan neblokan elementon.

Ekz. en la ĉi-antaŭa ekzemplo ni aldonis informon pri lingvo al em-elemento. Tiam ni diris, kaj ke la enhavo de tiu elemento estas grava (emfazita), kaj ke ĝi 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">vizaĝo</span>, ke ĉiu, kiu ŝin vidis,
povis pensi, ke li vidas la
<span class="ovorto">patrinon</span>.
</p>

En tiu teksto ĉiu O-vorto (vorto kun O-finaĵo) estas markita per span-elemento kun la klaso “ovorto”, kaj ĉiu A-vorto estas markita per span-elemento kun la klaso “avorto”. Poste oni povas ekzemple per stilfolio proponi, ke O-vortoj estu prezentataj per ruĝa teksto, kaj ke A-vortoj estu prezentataj per verda teksto.

pre: Antaŭformatigita teksto

La elemento pre estas aparta kaj escepta elemento. Ĝi ne esprimas ian signifon, sed estas uzata, kiam oni volas prezenti parton de teksto ĝuste tiel, kiel ĝi estas tajpita kun ĉiuj 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 larĝeco de la fenestro, kaj plej ofte ili uzas tiparon fikslarĝan por prezenti tiun tekston.

Jen ekzemplo de pre-elemento:

<pre>
	Tiu ĉi teksto estas antaŭformatigita
	kun linirompoj kaj blanksignoj, kiuj
	ne estas            ignorataj de la
	TTT-legilo. Antaŭ ĉiu linio estas tabo.
	Taboj tamen ne ĉiam funkcias tre bone en
	"pre"-elementoj.
</pre>

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

Al la sekva leciono