Kiel fari TTT-pagxojn

Formalajxoj

En la enkonduka leciono ni havis ekzemplon de simpla XHTML-pagxo, sed kiel mi skribis tie, la kodo ne estis tute kompleta. La XHTML-normo postulas, ke oni enkonduku la dokumenton per kelkaj pliaj formalajxoj. Bonsxance oni ne bezonas tre multe kompreni la detalojn de tiuj formalajxoj. Oni povas ilin simple kopii sxablone. Tial vi ne bezonas perfekte kompreni cxiujn detalojn en tiu cxi leciono. Plej gravas la praktika ekzemplo.

Sendube vi senpacience volas lerni pli da elementoj por povi fari pli komplikajn pagxojn kun interesa enhavo. Sed unue necesas ekkonatigxi kun la formalajxoj. Se oni lernas pri ili dekomence, oni havas malpli da problemoj poste.

Deklaro pri dokumentotipo

XHTML-dokumento devas komencigxi per deklaro pri la dokumentotipo. Se la dokumento uzas XHTML-on, oni deklaru jene:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Tiu deklaro aperu komence de la dokumento, antaux la html-elemento. Kopiu gxin gxuste. Atentu pri majuskloj kaj minuskloj.

Rimarku, ke la dokumentotipa deklaro ne estas ordinara XHTML-elemento. Gxi ne havas komencmarkon kaj finmarkon. Gxi estas tute alispeca afero.

Noto: Vere ekzistas tri variantoj de XHTML 1.0: Strikta (“Strict”), Transira (“Transitional”) kaj Kadrara (“Frameset”). La montrita deklaro estas por la Strikta varianto. La aliajn variantojn mi ne traktos en tiu cxi kurso, precipe cxar ili laux mi ne estas uzindaj.

Noto: Oni povas antaux la deklaro pri dokumentotipo meti alian deklaron: XML-deklaron (= XML-a procesinstrukcio). Sed tia deklaro ne estas deviga, se oni uzas Unikodon (pli pri signokodoj aperos en posta leciono). Se vi volas vidi, kiel aspektas XML-deklaro, vi povas rigardi mian alian pagxaron pri XHTML.

Deklaro pri nomspaco

Krome oni aldonu ene de la komencmarko de la html-elemento indikon pri t.n. nomspaco (kio tio efektive estas, oni apenaux bezonas scii). Gxi aspektu jene:

<html xmlns="http://www.w3.org/1999/xhtml">

Deklaro pri signokodo «

Oni devas ankaux iel anonci, kian signokodon oni uzis. Ni uzos por cxiuj pagxoj de tiu cxi kurso la signokodon UTF-8 (varianto de Unikodo). Se pagxo estas publikigita sur servilo, la informon pri signokodo sendu prefere la servilo mem, sed se tio ne okazas, oni povas anonci la signokodon en la XHTML-pagxo. Tiam oni aldonas t.n. meta-elementon en la head-elemento. Jene:

<head>
  <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8" />
  <title>Mia unua TTT-pagho</title>
</head>

Noto: Eble vi rimarkas, ke la meta-elemento aspektas iom alie ol la ekzemploj de elementoj, kiujn ni jam vidis. Gxi estas t.n. “malplena” elemento. Gxi konsistas el nur unu marko, kiu estas samtempe komenca kaj fina. Ni lernos pli pri malplenaj elementoj poste.

Kompleta pagxo en XHTML 1.0 Strikta

Jen finfine, post aldono de la necesaj formalajxoj, nia ekzemplo de simpla XHTML-kodo aspektas jene:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type"
      content="text/html; charset=utf-8" />
    <title>Mia unua TTT-pagho</title>
  </head>
  <body>

    <h1>Jen la cheftitolo.</h1>

    <p>Jen iom da teksto.</p>

    <p>Jen dua alineo kun teksto.</p>

  </body>
</html>

Por kio utilas la formalajxoj?

Oni povas demandi sin, por kio utilas tiuj formalajxoj. Ni jam vidis, ke TTT-legilo akceptas la kodon ankaux en la pli simpla formo.

Nu, la reguloj diras, ke estu tiuj formalajxoj, kaj prefere oni sekvu la regulojn. Sed estas ankaux almenaux tri praktikaj kialoj aldoni cxiujn formalajxojn:

Sercxiloj kaj legosignoj «

Tre grava estas la title-elemento kaj gxia enhavo. Sercxoservoj kiel ekz. Google tre atentas la enhavon de title. Tial indas elekti signifoplenan kaj tauxgan tekston por title. Krome, kiam homoj faras legosignon en TTT-legilo, ofte uzigxas auxtomate la enhavo de title kiel nomo de la legosigno. title do enhavu mallongan kaj trafan titolon de la pagxo. (Ekz. “Mia hejmpagxo” aux “Bonvenon!” diras tre malmulte al sercxilo, kaj malbone funkcias kiel nomo de legosigno.)

Validumado «

Kiam oni skribas XHTML-kodon, oni foje faras erarojn. Por facile trovi la erarojn kaj fari la kodon senerara (valida), oni povas uzi specialan programon nomatan validumilo. Per tia programo oni validumas kodon. Tio signifas, ke oni kontrolas, cxu la kodo sekvas la regulojn de XHTML. Sed ekzistas diversaj marklingvoj, kaj diversaj versioj de (X)HTML. Per la deklaro de dokumentotipo oni informas la validumilon, kiun lingvon kaj version oni intencis sekvi. Pagxo sen tia deklaro ne estas validumebla.

Oni povas instali validumilon en sian propran komputilon, sed tio estas iom komplika afero. Pli facile estas uzi iun el la validumaj servoj en la reto. La plej fama estas la (Anglalingva) validumilo de W3C (la organizo, kiu decidas la regulojn pri XHTML, CSS k.t.p.):

http://validator.w3.org - por pagxoj jam publikigitaj sur reta servilo
http://validator.w3.org/file-upload.html - por nepublikigitaj pagxoj, kiujn oni havas sur la propra disko

Ekde nun alkutimigxu cxiam kontroli cxiujn viajn pagxojn, ankaux simplajn testojn, per validumilo. Komence povas esti iom malfacile kompreni la erarmesagxojn de validumilo, sed post iom da praktikado validumilo farigxas gravega helpilo. Komencu tuj! Kopiu nian simplan ekzemplon, kun cxiuj formalajxoj. Konservu gxin kiel dosieron, kaj validumu gxin.

Lauxnorma prezentado

Antauxe la TTT-legiloj tute ignoris la dokumentotipan deklaron de pagxo. Sed la nuntempaj legiloj kondutas alie. Tiuj legiloj atentas la deklaron, aux la mankon de deklaro, kaj decidas lauxe, kiel prezenti la pagxojn. Ili tiam elektas inter du prezentomodoj: Kaprica modo (“Quirks mode”), kaj Strikta modo (“Strict mode”).

En la kaprica modo la legiloj imitas la prezentokapricojn (erarojn) de malnovaj legiloj. En la strikta modo la legiloj provas strikte sekvi la regulojn pri XHTML kaj CSS.

Se vi sekvos la ekzemplojn cxi tie, la legiloj uzos la striktan modon. Tio estas rekomendinda. Se vi tute forlasos la formalajxojn, tiaj legiloj anstatauxe uzos la kaprican modon.

Noto: La kaprica modo estas nur por malnovaj pagxoj, kiuj estas verkitaj tiel, ke ili funkciu bone en malnovaj kaj eraroplenaj legiloj. Modernaj legiloj farigxas pli kaj pli striktaj kaj lauxnormaj, kaj novaj pagxoj estu farataj por bone funkcii en ili, kaj en estontaj legiloj. Eble en estontaj legiloj ne plu estos kaprica modo, kaj eble eraroplenaj pagxoj estonte tute ne plu funkcios. Tial oni neniam intence skribu novajn pagxojn tiel, ke uzigxu la kaprica modo.

Noto: Estas multe da komplikajxoj pri tiu tuta afero de modsxaltado, sed se vi sekvas la ekzemplojn en tiu cxi kurso, uzante cxiam XHTML-on 1.0 Strikta, kaj se vi cxiam ellasas la XML-deklaron, viaj pagxoj ricevos la striktan prezentomodon, kaj vi ne bezonos zorgi pri la komplikajxoj.

Al la sekva leciono