HTML ir CSS pradedantiems (Dalis 06): Sąrašai

HTML yra skirtingų sąrašų tipų. Pirmiausia yra sąrašai. Šio tipo sąrašuose atskiri sąrašo elementai yra aprūpinti sąrašo žyme /vadinamuoju kulkšnį/.

Sąrašai pradedami naudojant ul elementą. Atskiri sąrašo elementai pažymėti naudojant li elementą.

<p>Forumo naujienos</p>
<ul>
  <li>CSS nėra vykdomas toliau</li>
  <li>Holivudo stiliaus pristatymas iš 40-ųjų</li>
  <li>Iškylantysis CSS sąrašas</li>
  <li>PHP prisijungimas/atjungimas</li>
  <li>Mano mažas pristatymas - pradedantysis klauso patarimų!</li>
</ul>

Čia žvilgtelėjimas, kaip tai atrodo naršyklėje:

Prieš kiekvieną įrašą įterpiamas sąrašo žymuo. Kaip jis atrodo numatytai, nusprendžia naršyklės. Nors egzistuoja atributai, kuriuos galima naudoti norint paveikti sąrašų atvaizdavimą, šiuo metu jie turėtų būti vengiami. Vietoje jų naudojamos CSS savybės.

Sąrašai taip pat gali būti įdėti vienas į kitą. Pirmiausia pažiūrėkite į šią iliustraciją:

Sintaksė atrodo taip:

<ul>
  <li>Pamokos
    <ul>
      <li>2D</li>
      <li>3D</li>
      <li>Interneto puslapiai</li>
    </ul>
  </li>
  <li>Vaizdo treniruotės
    <ul>
      <li>3D</li>
      <li>Medijų kūrimas</li>
      <li>Interneto puslapiai</li>
    </ul>
  </li>
  <li>Patarimai</li>
  <li>Parduotuvės</li>
</ul>

Sąrašo elemento viduje gali būti papildomas sąrašas. Beje, tai nebūtina būtinai būtų sąrašas. Iš tikrųjų čia galima įtraukti ir kitus sąrašo tipus - kurie bus pristatyti šiame vadove.

<p>Forumo naujos temos</p>
<ul>
  <li>CSS nėra vykdomas
  <li>Holivudo stiliaus pristatymas iš 40-ųjų
  <li>Iškylantis CSS sąrašas
  <li>PHP prisijungimas/atjungimas
  <li>Mano mažas pristatymas - pradedantysis klauso patarimų!
</ul>

Numeruoti sąrašai

Be sąrašų, taip pat galima apibrėžti numeruotus sąrašus. Taip pat čia pradžioje yra paveikslėlis, kuris parodo, kas iš tikrųjų yra numeruoti sąrašai.

Kiekvienam sąrašo elementui priskiriamas nuoseklaus skaičius. Numeruoti sąrašai pradedami naudojant ol elementą.

Šis pavyzdys parodo, kaip naudoti šį elementą.

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>XML</li>
</ol>

Ką tik kaip sąrašuose, čia atskiros įrašai pažymimi naudojant li elementą.

Teoriškai galima šiuos sąrašus taip pat įdėti vienas į kitą.

<ol>
  <li>Pamokos
    <ol>
      <li>2D</li>
      <li>3D</li>
      <li>Interneto puslapiai</li>
    </ol>
  </li>
  <li>Vaizdo treniruotės
    <ol>
      <li>3D</li>
      <li>Medijų kūrimas</li>
      <li>Interneto puslapiai</li>
    </ol>
  </li>
  <li>Patarimai</li>
  <li>Parduotuvės</li>
</ol>

Tačiau naršyklės rezultatas yra nusivylęs.






1. Pamokos 2D

1.1 3D

1.2 Interneto puslapiai

2. Vaizdo treniruotės 3D
   
   2.1 Medijų kūrimas
   
   2.2 Interneto puslapiai
3. Patarimai
4. Parduotuvės
   
   Toks dalykas su grynu HTML nėra įmanomas. Iš tikrųjų reikia pasitelkti CSS, kad turinys būtų automatiškai numeruojamas pagal tokį schemą.
   
   

Apibrėžtų sąrašų

Kitas sąrašų tipas yra vadinamieji apibrėžti sąrašai. Taip pat čia pirmiausia pateikiama pavyzdžio, kaip šis sąrašas iš tikrųjų atrodo naršyklėje:

<dl>
   <dt>AM</dt>
      <dd>AM - Oro paštas</dd>
      <dd>AM - Oro maršalas</dd>
      <dd>AM - Amberg</dd>
      <dd>AM - Amerikis</dd>
      <dd>AM - Amsteten</dd>
   <dt>AN</dt>
      <dd>AN - vardijamas aukščiau</dd>
      <dd>AN - Prieigos mazgas</dd>
      <dd>AN - Ancona</dd>
</dl>

Bei Definitionslisten hat man es immer mit drei Elementen zu tun. Eingeleitet werden die Listen durch das dl-Element. Das ist also die äußere Struktur. Der zu definierende Ausdruck wird durch ein dt-Element gekennzeichnet. Das ist im Endeffekt der Definitionsbegriff. Die Definitionsbeschreibung wiederum wird über das dd-Element angegeben.

Eine Verschachtelung von Definitionslisten ist übrigens ebenfalls möglich. Das funktioniert dann genauso, wie das bei den anderen Listenvarianten gezeigt wurde.

Wie die Definitionslisten standardmäßig aussehen, wird wieder durch die Browser bestimmt. Letztendlich könnt ihr dann aber über CSS das gewünschte Layout selbst festlegen.

In früheren HTML-Versionen gab es übrigens noch Menü- und Verzeichnislisten. Verwendet wurden dafür die beiden Elemente menu und dir. Das dir-Element ist in HTML5 nicht mehr enthalten. Anders sieht es mit menu aus. Dieses Element wurde neu implementiert und soll künftig für Kontextmenüs und Toolbars verwendet werden können. Hier ein Beispiel dafür, wie sich das W3C eine typische menu-Anwendung vorstellt:

<menu type="toolbar">
 <li>
  <menu label="Failas">
   <button type="button" onclick="fnew()">Naujas...</button>
   <button type="button" onclick="fopen()">Atidaryti...</button>
   <button type="button" onclick="fsave()">Išsaugoti</button>
   <button type="button" onclick="fsaveas()">Išsaugoti kaip...</button>
  </menu>
 </li>
 <li>
  <menu label="Redaguoti">
   <button type="button" onclick="ecopy()">Kopijuoti</button>
   <button type="button" onclick="ecut()">Kirpti</button>
   <button type="button" onclick="epaste()">Įdėti</button>
  </menu>
 </li>
 <li>
  <menu label="Pagalba">
   <li><a href="pagalba.html">Pagalba</a></li>
   <li><a href="apie.html">Apie</a></li>
  </menu>
 </li>
</menu>

Momentan wird das in dieser Form allerdings noch von keinem Browser unterstützt.





Daher sollte menu zum jetzigen Zeitpunkt auch noch nicht eingesetzt werden.

Listen gestalten

Ein Hinweis noch zu den Listen. Auf vielen Webseiten wird für die Gestaltung von Listen auf entsprechende HTML-Attribute gesetzt. So kann man beispielsweise über <ul type="square"> dafür sorgen, dass vor den Einträgen der Aufzählungslisten Rechtecke angezeigt werden.





Ebenso lässt sich für nummerierte Listen die Art der Nummerierung festlegen.

<ol type="A">

Hier gilt aber, dass man eben nicht alles einsetzen sollte, was angeboten wird. Besser geeignet sind die entsprechenden CSS-Eigenschaften. Ihr solltet diese also tatsächlich nutzen, um die Listen euren Wünschen gemäß anzupassen. Ausführliche Informationen zu CSS folgen im Rahmen dieser Reihe.