Kiel fari TTT-paĝojn

Formalaĵoj

En la enkonduka leciono ni havis ekzemplon de simpla XHTML-paĝo, sed kiel mi skribis tie, la kodo ne estis tute kompleta. La XHTML-normo postulas, ke oni enkonduku la dokumenton per kelkaj pliaj formalaĵoj. Bonŝance oni ne bezonas tre multe kompreni la detalojn de tiuj formalaĵoj. Oni povas ilin simple kopii ŝablone. Tial vi ne bezonas perfekte kompreni ĉiujn detalojn en tiu ĉi leciono. Plej gravas la praktika ekzemplo.

Sendube vi senpacience volas lerni pli da elementoj por povi fari pli komplikajn paĝojn kun interesa enhavo. Sed unue necesas ekkonatiĝi kun la formalaĵoj. Se oni lernas pri ili dekomence, oni havas malpli da problemoj poste.

Deklaro pri dokumentotipo

XHTML-dokumento devas komenciĝi 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, antaŭ la html-elemento. Kopiu ĝin ĝuste. Atentu pri majuskloj kaj minuskloj.

Rimarku, ke la dokumentotipa deklaro ne estas ordinara XHTML-elemento. Ĝi ne havas komencmarkon kaj finmarkon. Ĝi 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 ĉi kurso, precipe ĉar ili laŭ mi ne estas uzindaj.

Noto: Oni povas antaŭ 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 paĝaron 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 apenaŭ bezonas scii). Ĝi aspektu jene:

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

Deklaro pri signokodo «

Oni devas ankaŭ iel anonci, kian signokodon oni uzis. Ni uzos por ĉiuj paĝoj de tiu ĉi kurso la signokodon UTF-8 (varianto de Unikodo). Se paĝo 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-paĝo. 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. Ĝi estas t.n. “malplena” elemento. Ĝi konsistas el nur unu marko, kiu estas samtempe komenca kaj fina. Ni lernos pli pri malplenaj elementoj poste.

Kompleta paĝo en XHTML 1.0 Strikta

Jen finfine, post aldono de la necesaj formalaĵoj, 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 formalaĵoj?

Oni povas demandi sin, por kio utilas tiuj formalaĵoj. Ni jam vidis, ke TTT-legilo akceptas la kodon ankaŭ en la pli simpla formo.

Nu, la reguloj diras, ke estu tiuj formalaĵoj, kaj prefere oni sekvu la regulojn. Sed estas ankaŭ almenaŭ tri praktikaj kialoj aldoni ĉiujn formalaĵojn:

Serĉiloj kaj legosignoj «

Tre grava estas la title-elemento kaj ĝia enhavo. Serĉoservoj kiel ekz. Google tre atentas la enhavon de title. Tial indas elekti signifoplenan kaj taŭgan tekston por title. Krome, kiam homoj faras legosignon en TTT-legilo, ofte uziĝas aŭtomate la enhavo de title kiel nomo de la legosigno. title do enhavu mallongan kaj trafan titolon de la paĝo. (Ekz. “Mia hejmpaĝo” aŭ “Bonvenon!” diras tre malmulte al serĉilo, 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, ĉu 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. Paĝo 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 paĝoj jam publikigitaj sur reta servilo
http://validator.w3.org/file-upload.html - por nepublikigitaj paĝoj, kiujn oni havas sur la propra disko

Ekde nun alkutimiĝu ĉiam kontroli ĉiujn viajn paĝojn, ankaŭ simplajn testojn, per validumilo. Komence povas esti iom malfacile kompreni la erarmesaĝojn de validumilo, sed post iom da praktikado validumilo fariĝas gravega helpilo. Komencu tuj! Kopiu nian simplan ekzemplon, kun ĉiuj formalaĵoj. Konservu ĝin kiel dosieron, kaj validumu ĝin.

Laŭnorma prezentado

Antaŭe la TTT-legiloj tute ignoris la dokumentotipan deklaron de paĝo. Sed la nuntempaj legiloj kondutas alie. Tiuj legiloj atentas la deklaron, aŭ la mankon de deklaro, kaj decidas laŭe, kiel prezenti la paĝojn. 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 ĉi tie, la legiloj uzos la striktan modon. Tio estas rekomendinda. Se vi tute forlasos la formalaĵojn, tiaj legiloj anstataŭe uzos la kaprican modon.

Noto: La kaprica modo estas nur por malnovaj paĝoj, kiuj estas verkitaj tiel, ke ili funkciu bone en malnovaj kaj eraroplenaj legiloj. Modernaj legiloj fariĝas pli kaj pli striktaj kaj laŭnormaj, kaj novaj paĝoj estu farataj por bone funkcii en ili, kaj en estontaj legiloj. Eble en estontaj legiloj ne plu estos kaprica modo, kaj eble eraroplenaj paĝoj estonte tute ne plu funkcios. Tial oni neniam intence skribu novajn paĝojn tiel, ke uziĝu la kaprica modo.

Noto: Estas multe da komplikaĵoj pri tiu tuta afero de modŝaltado, sed se vi sekvas la ekzemplojn en tiu ĉi kurso, uzante ĉiam XHTML-on 1.0 Strikta, kaj se vi ĉiam ellasas la XML-deklaron, viaj paĝoj ricevos la striktan prezentomodon, kaj vi ne bezonos zorgi pri la komplikaĵoj.

Al la sekva leciono