Kiel fari TTT-pagxojn

Bazaj elementoj

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

En tiu cxi leciono vi lernos pri la jenaj elementoj:

Titoloj kaj alineoj «

Ni jam konatigxis kun la markoj p kaj h1. Per p oni indikas, ke la enhavo estas ordinara alineo de teksto. Per h1 oni montras la cxeftitolon de la pagxo.

Se oni aldonas la markojn h2, h3, h4, h5 kaj h6, oni havas jam suficxe bonajn ilojn por publikigi tute utilajn pagxojn.

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 lauxe.

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 suficxas.

Noto: En unu pagxo 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-pagxoj.

Mi ne skribis cxi tie la enkondukajn formalajxojn, 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, ankaux kontrolu la kodon per validumilo.

Eble vi trovas, ke la pagxo aspektas iom simpla kaj ecx teda. Ne zorgu pri tio nun. Poste ni lernos kelkajn bazajn manierojn plibeligi pagxon per CSS.

Emfazado «

Ne cxio en pagxo 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, antaux 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 cxiam. Tial estas grave uzi validumilon, kiu cxiam trovas cxiujn erarojn.

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

Versxajne vi trovas, ke la legilo prezentas em-elementojn per kursiva stilo, kaj ke gxi prezentas strong-elementojn per grasa stilo. Tio estas tre kutima, sed neniel deviga. Alia legilo eble elektas uzi substrekadon aux majusklojn aux specialajn kolorojn por prezenti la emfazon. Legilo por blinduloj eble elparolas la emfazatajn aferojn per pli lauxta vocxo aux simile.

Noto: Ekzistas ankaux la markoj i por kursiva stilo, kaj b por grasa stilo. Tiuj markoj signifas nur gxuste tion: kursivo kaj graso. Ili rilatas nur al la prezentado. Oni povas demandi sin, kian sencon havas tiuj elementoj por vocxlega 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 cxiuj elementoj. Per ili oni povas ligi unu pagxon al alia, aux unu parton de pagxo al alia parto de la sama pagxo, aux al certa parto de alia pagxo.

Ligilo al alia pagxo

Se oni volas, ke parto de la teksto estu ligilo, oni faru el gxi 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. Gxi konsistas kiel kutime el komenca marko (<a href="aliapagho.html">), enhavo (ligilo al alia pagxo) kaj finmarko (</a>), sed ene de la komenca marko estas io plia: href="aliapagho.html". Tio estas atributo, nome href-atributo. Gxi montras la adreson de pagxo, 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 pagxo. Sen la atributo href tia ligilo ne havas sencon.

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

Noto: Mi parolis cxi-antauxe pri alklakado de ligilo. Tiel oni plej ofte aktivigas ligilon en ordinaraj TTT-legiloj, sed oni ne nepre devas uzi muson kaj alklaki. Estas ankaux aliaj manieroj aktivigi ligilon. Ekzemple oni povas diversmaniere uzi la klavaron de la komputilo anstatauxe. Blindulo eble uzas vocxkomandon.

Kreu mem la pagxon “aliapagho.html” kaj konservu gxin kune kun la testopagxo 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 gxi a-elementon. Poste provu per TTT-legilo, cxu la ligilo funkcias.

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

Ligilo al loko en pagxo «

Oni ankaux povas ligi al certa loko ene de pagxo. Tiam oni devas krei celpunkton, t.n. ankron, ene de la pagxo. La plej facila, kaj principe plej bona maniero, estas aldoni id-atributon al iu elemento cxe la celpunkto, ekz.:

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

Se tiu loko trovigxas en la pagxo “aliapagho.html”, oni povas krei ligilon al gxi 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” aux “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 pagxo).

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

Ligilo al loko en la sama pagxo

Se la celpunkto, al kiu oni volas fari ligilon, trovigxas ene de la sama dokumento, oni skribu ligilon al gxi tiel cxi:

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

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

Eksperimentu iom pri ligiloj tien kaj reen inter viaj testopagxoj (vi ankaux povas krei novajn testopagxojn kun diversa enhavo). Faru ligilojn al certaj lokoj en la pagxoj, kaj testu. Rimarku, ke vi eble devas krei pagxojn kun suficxe multe da enhavo, kaj meti la celpunktojn cxe la fino de la pagxoj, por povi vidi, ke la legilo efektive saltas al tiu certa loko. Se la tuta enhavo de pagxo estas videbla en la fenestro, la TTT-legilo normale simple montras la tutan enhavon, kaj ne aparte indikas, ke gxi celis certan lokon en la pagxo.

Ofta eraro

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

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

Al la sekva leciono