Există diferite tipuri de liste în HTML. În primul rând, avem liste de tip bullet. În acest tip de listă, fiecare element al listei este echipat cu un simbol de marcator, numit Bullet.
Listele de tip bullet sunt introduse folosind elementul ul. Elementele individuale ale listei sunt marcate cu elementul li.
<p>Teme actuale din forum</p> <ul> <li>CSS nu este mai departe executat</li> <li>Sallon de expoziție Stil Hollywood anii 40</li> <li>Listă pliabilă CSS</li> <li>PHP conectare/deconectare</li> <li>Sallonul meu mic - Sfaturi de la începători!</li> </ul>
Uitați-vă la rezultatul în browser aici:
Înainte de fiecare mesaj se introduce un marcator. Aspectul său prestabilit este decis de browser. Deși există atribute cu care se poate influența aspectul listelor, acestea ar trebui să nu mai fie folosite. În schimb, intervin proprietățile CSS.
Listele tip bullet pot fi de asemenea înglobate. Uitați-vă mai întâi la imaginea următoare:
Aici devine clar ce presupune o astfel de înglobare.
Sintaxa este următoarea:
<ul>
<li>Tutoriale
<ul>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ul>
</li>
<li>Videotrenuri
<ul>
<li>3D</li>
<li>Design multimedia</li>
<li>Web</li>
</ul>
</li>
<li>Sfaturi</li>
<li>Magazine</li>
</ul>
În cadrul unui element de listă poate fi așezată o altă listă. În acest caz, însă, nu trebuie neapărat să fie o listă de tip bullet. De fapt, pot fi adăugate și alte tipuri de liste - care vor fi prezentate în acest tutorial.
În HTML5, nu este obligatoriu să folosiți eticheta de închidere </li>. Din motive de lizibilitate, eu totuși mereu o închid. Corect din punct de vedere sintactic ar fi ceva precum:
<p>Subiectele actuale din forum</p> <ul> <li>CSS nu este executat mai departe <li>Sallon de expoziție Stil Hollywood anii 40 <li>Listă pliabilă CSS <li>PHP conectare/deconectare <li>Sallonul meu mic - Sfaturi de la începători! </ul>
Liste numerotate
Pe lângă listele de tip bullet, se pot defini și liste numerotate. De asemenea, mai întâi o imagine, care arată ce presupun de fapt aceste liste numerotate.
Deci, înaintea elementelor listei sunt adăugate cifre consecutive. Listele numerotate sunt introduse de elementul ol.
Exemplul următor arată cum se folosește acest element.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
Așa cum este cazul cu liste de tip bullet, și aici elementele individuale sunt marcate cu elementul li.
Teoretic, listele de tip bullet pot fi și ele înglobate.
<ol>
<li>Tutoriale
<ol>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ol>
</li>
<li>Videotrenuri
<ol>
<li>3D</li>
<li>Design multimedia</li>
<li>Web</li>
</ol>
</li>
<li>Sfaturi</li>
<li>Magazine</li>
</ol>Însă rezultatul în browser este decepționant.
Prin urmare, nu se obține o numerotare conform unui astfel de schemă:
1. Tutoriale 2D
1.1 3D
1.2 Web
- Videotrenuri 3D
2.1 Design multimedia
2.2 Web - Sfaturi
- Magazine
Așa ceva nu este posibil cu HTML pur și simplu. De fapt, este necesar să se recurgă la CSS pentru a număra automat conținutul conform unei astfel de scheme.
Liste de definiții
Un alt tip de listă sunt listele de definiții. Iată un exemplu pentru a vedea cum arată acest tip de listă în final în browser:
Principalul domeniu de aplicare pentru listele de definiții sunt glosarele. Iată sintaxa care a condus la rezultatul arătat anterior:
<dl> <dt>AM</dt> <dd>AM - Air Mail</dd> <dd>AM - Air Marshal</dd> <dd>AM - Amberg</dd> <dd>AM - Americium</dd> <dd>AM - Amstetten</dd> <dt>AN</dt> <dd>AN - above named</dd> <dd>AN - Access Node</dd> <dd>AN - Ancona</dd> </dl>
În cadrul listelor definite se lucrează întotdeauna cu trei elemente. Liste sunt introduse de elementul dl. Acesta este structura exterioară. Expresia de definit este marcată de un element dt. Acesta este practic termenul definit. Descrierea definițiilor este furnizată via elementul dd.
De asemenea, încorporarea listelor definite este de asemenea posibilă. Acest lucru funcționează exact ca celelalte tipuri de liste prezentate anterior.
Cum arată listele definite în mod implicit este, din nou, determinat de browser. În cele din urmă, puteți defini aspectul dorit printr-un CSS.
În versiunile anterioare de HTML, existau de asemenea liste de meniu și de director. Pentru acestea erau utilizate cele două elemente menu și dir. Elementul dir nu mai este inclus în HTML5. Situația este diferită pentru menu. Acest element a fost reimplementat și ar trebui să poată fi utilizat pentru meniuri contextuale și bare de instrumente în viitor. Iată un exemplu pentru cum W3C își imaginează o aplicație menu tipică:
<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="fnew()">Nou...</button> <button type="button" onclick="fopen()">Deschide...</button> <button type="button" onclick="fsave()">Salvează</button> <button type="button" onclick="fsaveas()">Salvează ca...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="ecopy()">Copiază</button> <button type="button" onclick="ecut()">Taie</button> <button type="button" onclick="epaste()">Lipește</button> </menu> </li> <li> <menu label="Ajutor"> <li><a href="ajutor.html">Ajutor</a></li> <li><a href="despre.html">Despre</a></li> </menu> </li> </menu>
În acest moment, acest lucru nu este încă suportat de niciun browser.
Prin urmare, menu nu ar trebui să fie încă utilizat la acest moment.
Crearea de liste
Un sfat cu privire la listele. Pe multe site-uri, pentru a formata listele, se bazează pe atributele HTML corespunzătoare. De exemplu, puteți utiliza <ul type="square"> pentru a afișa dreptunghiuri înaintea elementelor din liste neordonate.
De asemenea, pentru liste numerotate, se poate stabili tipul de numerotare.
<ol type="A">
Totuși, este important să nu se utilizeze tot ceea ce este oferit. Mai potrivite sunt proprietățile CSS corespunzătoare. Ar trebui să le utilizați cu adevărat pentru a ajusta listele conform preferințelor dvs. Informații detaliate despre CSS vor fi prezentate în această serie.
