Kiel fari TTT-paĝojn

Bazaj elementoj

Finfine ni povas komenci lerni pli praktikajn aferojn: elementojn por strukturi la enhavon de paĝo.

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

Titoloj kaj alineoj «

Ni jam konatiĝis kun la markoj p kaj h1. Per p oni indikas, ke la enhavo estas ordinara alineo de teksto. Per h1 oni montras la ĉeftitolon de la paĝo.

Se oni aldonas la markojn h2, h3, h4, h5 kaj h6, oni havas jam sufiĉe bonajn ilojn por publikigi tute utilajn paĝojn.

h1 estas la unua nivelo de titolo. Subtitolon oni indikas per h2. Tio estas la dua nivelo. Poste, se estas subtitoloj de la subtitoloj, oni uzas h3, kaj tiel plu pri h4, h5 kaj h6. Oni devas nur trapensi mem la strukturon de la informoj, kaj uzi la h-markojn laŭe.

La TTT-legiloj kutime prezentas la h-markojn per granda grasa teksto. Plej granda estas h1, iom malpli granda estas h2 k.t.p. Sed oni ne uzu tiujn markojn nur por ekhavi grandan tekston. Oni uzu ilin por montri, ke temas pri titoloj de diversaj sekcioj de la enhavo.

Noto: Atentu pri la markoj h5 kaj h6. Multaj legiloj prezentas ilin per tre malgranda teksto, ofte per teksto pli malgranda ol la ordinara teksto de simplaj alineoj! Normale la unuaj kvar niveloj de titoloj sufiĉas.

Noto: En unu paĝo estu prefere nur unu h1-titolo, kaj prefere oni uzu la aliajn titolojn en strikta logika sekvo. Oni ne transsaltu nivelojn. Subsekcio de h1 havu h2-titolon, kaj nur se estas plia subsekcio de la subsekcio, tiu sekcio havu h3-titolon, k.t.p.

Ekzemplo

Jen ekzemplo de titoloj kaj alineoj. Atentu pri la strukturo de la subtitoloj kaj subsekcioj:

<h1>Gravaj aferoj</h1>

  <p>Tiu chi pagho temas pri gravaj aferoj.</p>

  <h2>Amo</h2>
    <p>Neniam forgesu, ke amo estas la plej grava
    afero en la vivo.</p>

  <h2>Sano</h2>
    <p>Ankau sano estas grava.
    Se oni ne estas sana, oni ne povas ami.</p>

  <h2>Mono</h2>
    <p>Kontraue al oftaj asertoj ankau mono estas
    grava. Sen mono oni havas problemojn.</p>

    <h3>Avantaghoj de mono</h3>
      <p>Se oni havas multe da mono, oni povas acheti
      aferojn, ekzemple medikamentojn, se oni
      farighas malsana.</p>

    <h3>Malavantaghoj de mono</h3>
      <p>Mono koruptas. Se oni ricevas tro da mono,
      oni eble farighas malbona homo.</p>

Noto: En la ekzemplo mi skribis la supersignajn literojn per la surogata H-sistemo. Poste ni lernos, kiel skribi verajn Esperantajn literojn en XHTML-paĝoj.

Mi ne skribis ĉi tie la enkondukajn formalaĵojn, nek la markojn por html, head, title kaj body. Tiujn vi aldonu mem. Prenu la ekzemplon, aldonu la mankantajn partojn (ne forgesu la finmarkojn por body kaj html!), konservu la tuton kiel dosieron, kaj rigardu per TTT-legilo. Se vi povas, ankaŭ kontrolu la kodon per validumilo.

Eble vi trovas, ke la paĝo aspektas iom simpla kaj eĉ teda. Ne zorgu pri tio nun. Poste ni lernos kelkajn bazajn manierojn plibeligi paĝon per CSS.

Emfazado «

Ne ĉio en paĝo estas same grava. Se iuj partoj de teksto estas pli gravaj ol aliaj, oni povas tion indiki per la markoj em kaj strong. La marko em (de la Angla “emphasis” = emfazo) aldonas emfazon. La marko strong (= forta) aldonas fortan emfazon. Ekzemple:

<p>Mono <em>koruptas</em>. Se oni ricevas tro da
mono, oni eble farighas
<strong>malbona homo</strong>.</p>

Jen pli komplika ekzemplo. Tie parto de la teksto estas indikita kiel em, kaj la lasta parto de tiu em-elemento estas strong:

<p>Se oni ricevas tro da mono, <em>oni eble
farighas <strong>malbona homo</strong></em>.</p>

Rimarku tie tre gravan aferon: La strong-elemento estas parto de la em-elemento. Tial la finmarko de strong devas aperi ene de la em-elemento, antaŭ ol aperas la finmarko de em. Estus tute erare skribi jene: Se oni ricevas tro da mono, <em>oni eble farighas <strong>malbona homo</em></strong>. La komencaj kaj finaj markoj de la elementoj devas aperi en logika ordo. La TTT-legiloj plej ofte toleras tiajn erarojn, sed ne ĉiam. Tial estas grave uzi validumilon, kiu ĉiam trovas ĉiujn erarojn.

Aldonu emfazon per em kaj strong al kelkaj vortoj en la testopaĝo pri “Gravaj aferoj”. Rigardu la rezulton per TTT-legilo.

Verŝajne vi trovas, ke la legilo prezentas em-elementojn per kursiva stilo, kaj ke ĝi prezentas strong-elementojn per grasa stilo. Tio estas tre kutima, sed neniel deviga. Alia legilo eble elektas uzi substrekadon aŭ majusklojn aŭ specialajn kolorojn por prezenti la emfazon. Legilo por blinduloj eble elparolas la emfazatajn aferojn per pli laŭta voĉo aŭ simile.

Noto: Ekzistas ankaŭ la markoj i por kursiva stilo, kaj b por grasa stilo. Tiuj markoj signifas nur ĝuste tion: kursivo kaj graso. Ili rilatas nur al la prezentado. Oni povas demandi sin, kian sencon havas tiuj elementoj por voĉlega TTT-legilo, kaj kian sencon ili havas por indeksa roboto en la reto. Oni uzu tiujn markojn nur en esceptegaj okazoj, kiam fakte temas rekte pri la tipografiaj rimedoj kursivo kaj graso.

Ligiloj «

Ligiloj estas eble la plej gravaj el ĉiuj elementoj. Per ili oni povas ligi unu paĝon al alia, aŭ unu parton de paĝo al alia parto de la sama paĝo, aŭ al certa parto de alia paĝo.

Ligilo al alia paĝo

Se oni volas, ke parto de la teksto estu ligilo, oni faru el ĝi a-elementon:

<p>Jen iom da teksto. 
Jen <a href="aliapagho.html">ligilo al alia 
pagho</a>. Jen pli da teksto.</p>

Kiel vi vidas, a-elemento estas pli komplika ol la aliaj elementoj, kiujn ni jam lernis. Ĝi konsistas kiel kutime el komenca marko (<a href="aliapagho.html">), enhavo (ligilo al alia paĝo) kaj finmarko (</a>), sed ene de la komenca marko estas io plia: href="aliapagho.html". Tio estas atributo, nome href-atributo. Ĝi montras la adreson de paĝo, al kiu oni volas fari ligilon. Se oni alklakas la tekston de la a-elemento en TTT-legilo, la TTT-legilo saltas al tiu alia paĝo. Sen la atributo href tia ligilo ne havas sencon.

Noto: Ankaŭ aliaj XHTML-elementoj povas havi diversajn atributojn, kiujn oni ĉiam metas ene de la komenca marko. Atributoj esprimas tre diversajn aferojn. Atributo ĉiam aspektas principe jene nomo="valoro". Ni lernos pliajn atributojn poste.

Noto: Mi parolis ĉi-antaŭe pri alklakado de ligilo. Tiel oni plej ofte aktivigas ligilon en ordinaraj TTT-legiloj, sed oni ne nepre devas uzi muson kaj alklaki. Estas ankaŭ aliaj manieroj aktivigi ligilon. Ekzemple oni povas diversmaniere uzi la klavaron de la komputilo anstataŭe. Blindulo eble uzas voĉkomandon.

Kreu mem la paĝon “aliapagho.html” kaj konservu ĝin kune kun la testopaĝo pri “Gravaj aferoj”. Provu fari en “Gravaj aferoj” ligilon al “aliapagho.html”. Elektu mem iun parton el la teksto de “Gravaj aferoj”, kaj faru el ĝi a-elementon. Poste provu per TTT-legilo, ĉu la ligilo funkcias.

Se vi volas, aldonu ligilon ankaŭ ene de “aliapagho.html”. Tiu ligilo konduku reen al la paĝo “Gravaj aferoj”. Tiu ekzerco eble estas pli malfacila. Pripensu bone, kion vi skribu ene de la href-atributo.

Ligilo al loko en paĝo «

Oni ankaŭ povas ligi al certa loko ene de paĝo. Tiam oni devas krei celpunkton, t.n. ankron, ene de la paĝo. La plej facila, kaj principe plej bona maniero, estas aldoni id-atributon al iu elemento ĉe la celpunkto, ekz.:

<h3 id="interesa">Interesa loko</h3>

Se tiu loko troviĝas en la paĝo “aliapagho.html”, oni povas krei ligilon al ĝi jene:

<p>Jen <a href="aliapagho.html#interesa">ligilo
al interesa loko en alia pagho</a>.</p>

Oni do fine de la adreso aldonas la signon #, kaj poste skribas tiun nomon, kiun oni uzis en la id-atributo de la celoloko.

Por tiaj id-nomoj validas la jenaj reguloj:

  • La unua signo devas esti unu el la literoj “A-Z” aŭ “a-z” (aliaj signoj, ekz. ciferoj, ne rajtas komenci tian nomon).
  • La postaj signoj povas esti literoj (“A-Z, a-z”), ciferoj (“0-9”), ligostreko (“-”), substreko (“_”), dupunkto (“:”) kaj punkto (“.”).
  • id-nomo devas esti unika en la dokumento (oni ne rajtas uzi la saman nomon pli ol unu fojon en la sama paĝo).

Kompreneble estas bone uzi, kiom eble, ian sencohavan vorton, kiu rilatas al la enhavo.

Ligilo al loko en la sama paĝo

Se la celpunkto, al kiu oni volas fari ligilon, troviĝas ene de la sama dokumento, oni skribu ligilon al ĝi tiel ĉi:

<p>Jen <a href="#interesa">ligilo al interesa
loko en la sama pagho</a>.</p>

En tiu href-atributo ne estas nomo de iu paĝo, sed nur la nomo de celo. Tiam la TTT-legilo scias, ke la celo estas ie en tiu paĝo, kiun ĝi jam montras, kaj povas salti al tiu loko.

Eksperimentu iom pri ligiloj tien kaj reen inter viaj testopaĝoj (vi ankaŭ povas krei novajn testopaĝojn kun diversa enhavo). Faru ligilojn al certaj lokoj en la paĝoj, kaj testu. Rimarku, ke vi eble devas krei paĝojn kun sufiĉe multe da enhavo, kaj meti la celpunktojn ĉe la fino de la paĝoj, por povi vidi, ke la legilo efektive saltas al tiu certa loko. Se la tuta enhavo de paĝo estas videbla en la fenestro, la TTT-legilo normale simple montras la tutan enhavon, kaj ne aparte indikas, ke ĝi celis certan lokon en la paĝo.

Ofta eraro

Atentu pri la #-signo. Uzu ĝin en href-atributo de ligilo, kiam vi celas certan lokon en paĝo, sed ne uzu tiun signon en id-atributo. Do ne skribu jene: <a id="#interesa">Interesa loko</a>.

La ĝusta formo estas: <a id="interesa">Interesa loko</a>

Al la sekva leciono