HTML contine cateva tag-uri utile pentru asezarea continutului sub forma de liste. Prin acestea textul este mai usor de citit si evidentiat.


Liste neordonate - UL

Un element des folosit in formarea listelor (neordonate) este <ul>.


Mai jos puteti vedea exemplu.
<h4>Exemplu liste UL</h4>

<ul>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ul>
- Sunt 3 tipuri de marcatori: disc, circle (cerc) si square (patrat)
- Tipul care se doreste folosit se introduce cu proprietatea CSS: list-style-type in style.
- Exemplu:
<h4>Exemplu liste UL square</h4>

<ul style='list-style-type: square;'>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ul>

Liste ordonate - OL

Un alt element folosit pentru formarea listelor este <ol>. Acesta afiseaza listele ordonate numeric.

<h4>Exemplu liste OL</h4>

<ol>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>

Tipuri de liste OL

Sunt mai multe tipuri de numerotare care pot fi folosite. Acestea pot fi controlate cu atributul type care se adauga in tag-ul <ol>.

- Exemplu:
<h4>Exemplu liste OL cu type</h4>

<ol type='a'>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol><br>

- Alta lista, type='I':
<ol type='I'>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>

Atributul start si reversed

Se poate specifica numarul de inceput al numerotarii printr-o valoare data atributului: start.
Numerotarea se poate inversa aplicand atributul: reversed

- Exemplu:
<h4>Exemplu liste OL cu start si reversed</h4>

OL cu start='3'
<ol start='3'>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol><br>

- Alta lista: type='i', start='3' si reversed:
<ol type='i' start='3' reversed>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>
• Elementele <li> sunt de tip bloc, in ele se pot adauga alte tag-uri de tip bloc (<p>, </div>, <pre>, etc.) sau chiar alte liste <ul> sau </ol>.
- Exemplu cu paragraf si liste imbricate.
<h4>Exemplu liste imbricate</h4>

<ol>
 <li><p>Acesta e un paragraph<br>
 O noua linie...</p></li>
 <li>Tutorial HTML:
 <ul type='square'>
 <li>Lista UL imbricata.</li>
 <li>Alta lista imbricata.</li>
 </ul>
 </li>
 <li>Rabdare cu Iubire, si invers.</li>
</ol>

Observati ca tot continutul din elementul imbricat <ul> ... </ul> este adaugat in cadrul unui <li> </li>.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut e folosit in tag-ul <img> pentru adresa imaginii?
href src rel
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Care din aceste coduri CSS ascunde elementul in pagina?
display: none; display: inline; position: relative;
#id {
  display: none;
}
Ce instructiune opreste executia lui while() sau for() ?
continue prompt() break
for(var i = 0; i< 8; i++) {
  if(i > 1) break;
  alert(i);
}
Indicati functia utilizata pentru a crea constante.
define() include() defined()
define("CONSTANT_NAME", "value");
echo CONSTANT_NAME;
Care este forma de plural a substativului "class" (clasa)?
classes clases clasis
This school has three classes.
- Scoala asta are trei clase.
Care este pluralul substativului "voz" (voce)?
vose voze voces
Escuché dos voces.
- Am auzit doua voci.
Liste HTML - UL, OL

Last accessed pages

  1. Gradele de comparatie: comparative, superlative (19564)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (48017)
  3. Curs PHP MySQL, Tutoriale si Scripturi PHP (22125)
  4. Pronumele relativ 1 (387)
  5. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (81098)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (7853)
  2. Curs HTML gratuit Tutoriale HTML5 (6524)
  3. Curs si Tutoriale JavaScript (5681)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (5539)
  5. Curs CSS Online Tutoriale CSS3 (5397)