Kiel fari TTT-paĝojn

Listoj

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

  • ul = listo
  • li = ero de listo
  • ol = numerita listo

ul: Listo «

Tre ofta enhavo de dokumento estas listo de iaj aferoj. En XHTML oni uzas por listoj la elementon ul (ul = “unordered list” = neordigita listo). La tuta listo estas ul-elemento, kaj ĉiu ero de la listo estas li-elemento (li = “list item” = “listero”). Ekz.:

<ul>

  <li>Ero de la listo</li>

  <li>Alia ero de la listo</li>

  <li>Ankorau unu ero de la listo</li>

  <li>La lasta ero de la listo</li>

</ul>

Rimarku, ke ul-elemento rajtas enhavi nur li-elementojn. Ĉio, kio troviĝas rekte ene de ul-elemento devas esti li-elemento. Sed ene de ĉiu li-elemento, oni povas meti tre diversajn aferojn: simplan tekston, p-elementojn, titolojn... kaj ankaŭ aliajn listojn!

Listoj ene de listoj

Tre ofte oni havas pli kompleksajn listojn kun subniveloj, kiuj mem estas listoj. Estas sufiĉe facile krei tiajn kompleksajn listojn, sed oni devas iom atenti. Oni devas memori, ke ĉiu ul-elemento ne rajtas enhavi ion alian ol li-elementoj.

Jen ekzemplo de tia kompleksa listo. Studu ĝin zorge. Precipe atentu, kie komenciĝas, kaj kie finiĝas, ĉiu li-elemento:

<h2>Mia kolekto de Esperantolibroj</h2>

<ul>

  <li>Vortaroj

    <ul>
      <li>Plena Vortaro</li>
      <li>Plena Ilustrita Vortaro</li>
      <li>La Nova Plena Ilustrita Vortaro</li>
    </ul>

  </li>

  <li>Romanoj

    <ul>
      <li>Metropoliteno, Varankin</li>
      <li>La Mastro de l’ Ringoj, Tolkien
        <ul>
          <li>La Kunularo de l’ Ringo</li>
          <li>La Du Turegoj</li>
          <li>La Reveno de la Regho</li>
        </ul>
      </li>
      <li>Junuloj en Torento, Engholm</li>
    </ul>

  </li>

  <li>Gramatikoj

    <ul>
      <li>Plena Analiza Gramatiko</li>
      <li>Plena Manlibro de Esperanta Gramatiko</li>
      <li>La Tuta Esperanto</li>
    </ul>

  </li>

</ul>

Aldonu mem la mankantajn partojn de la kodo (formalaĵoj, body, head...), kaj faru el tiu ekzemplo kompletan XHTML-paĝon. Rigardu la rezulton en TTT-legilo. Verŝajne la TTT-legilo aldonas antaŭ ĉiu li-elemento ian markilon (buleton, cirkleton...). Rimarku, ke ĝi (verŝajne) aŭtomate uzas diversajn markilojn por diversaj niveloj de la listo.

ol: Numerita listo «

La elemento ol estas tre simila al ul. Ankaŭ ol enhavas li-elementojn. La sola diferenco estas, ke la li-elementoj aŭtomate ricevas numerojn antaŭ si. ol = “ordered list” = ordigita (numerita) listo. Jen ekzemplo:

<ol>
  <li>Ero de la listo</li>
  <li>Alia ero de la listo</li>
  <li>Ankorau unu ero de la listo</li>
  <li>La lasta ero de la listo</li>
</ol>

Verŝajne via TTT-legilo prezentas tian liston proksimume jene:

1. Ero de la listo
2. Alia ero de la listo
3. Ankorau unu ero de la listo
4. La lasta ero de la listo

Krom la aŭtomata aldono de numeroj, ne estas diferenco inter ul kaj ol. Vi povas provi ŝanĝi iujn el la ul al ol en la testopaĝo kun la kompleksa listo, kiun vi ĵus faris. Memoru ŝanĝi kaj la komencan markon, kaj la finan markon.

Al la sekva leciono