Kiel fari TTT-paghojn

Bazaj elementoj

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

En tiu chi leciono vi lernos pri la jenaj elementoj:

Titoloj kaj alineoj «

Ni jam konatighis kun la markoj p kaj h1. Per p oni indikas, ke la enhavo estas ordinara alineo de teksto. Per h1 oni montras la cheftitolon de la pagho.

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

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

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

Noto: En unu pagho 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-paghoj.

Mi ne skribis chi tie la enkondukajn formalajhojn, 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, ankau kontrolu la kodon per validumilo.

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

Emfazado «

Ne chio en pagho 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, antau 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 chiam. Tial estas grave uzi validumilon, kiu chiam trovas chiujn erarojn.

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

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

Noto: Ekzistas ankau la markoj i por kursiva stilo, kaj b por grasa stilo. Tiuj markoj signifas nur ghuste tion: kursivo kaj graso. Ili rilatas nur al la prezentado. Oni povas demandi sin, kian sencon havas tiuj elementoj por vochlega 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 chiuj elementoj. Per ili oni povas ligi unu paghon al alia, au unu parton de pagho al alia parto de la sama pagho, au al certa parto de alia pagho.

Ligilo al alia pagho

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

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

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

Kreu mem la paghon “aliapagho.html” kaj konservu ghin kune kun la testopagho 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 ghi a-elementon. Poste provu per TTT-legilo, chu la ligilo funkcias.

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

Ligilo al loko en pagho «

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

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

Se tiu loko trovighas en la pagho “aliapagho.html”, oni povas krei ligilon al ghi 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” au “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 pagho).

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

Ligilo al loko en la sama pagho

Se la celpunkto, al kiu oni volas fari ligilon, trovighas ene de la sama dokumento, oni skribu ligilon al ghi tiel chi:

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

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

Eksperimentu iom pri ligiloj tien kaj reen inter viaj testopaghoj (vi ankau povas krei novajn testopaghojn kun diversa enhavo). Faru ligilojn al certaj lokoj en la paghoj, kaj testu. Rimarku, ke vi eble devas krei paghojn kun sufiche multe da enhavo, kaj meti la celpunktojn che la fino de la paghoj, por povi vidi, ke la legilo efektive saltas al tiu certa loko. Se la tuta enhavo de pagho estas videbla en la fenestro, la TTT-legilo normale simple montras la tutan enhavon, kaj ne aparte indikas, ke ghi celis certan lokon en la pagho.

Ofta eraro

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

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

Al la sekva leciono