Liste HTML - UL, OL

Liste ordonate - OL

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>.

- <ul> este elementul de început si dupa scrierea listei se incheie cu </ul>.
- Majoritatea elementelor pentru marcatori si numerotare sunt compuse din unu sau mai multe elemente <li> ... </li> (list element). In mod implicvit, acestea prezintă un marcaj ca un bullet.

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>.

type='1' - stil: 1, 2, 3, ...
type='a' - stil: a, b, c, ...
type='i' - stil: i, ii, iii, ...
type='I' - stil: I, II, III, ...

- 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>.

<<-Formatare text in pagina .. -- Liste HTML - DL, ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care meta tag se foloseste pentru scurta descriere a paginii?

<meta name="description" content="70-160 caractere ce descriu continutul paginii" />

Ce proprietate CSS opreste efectul dat de "float"?

clear text-align position

#some_id {
  clear: both;
}

Clic pe metoda ce creaza un array cu toate elementele din pagina cu un anumit nume de tag.

getElementsByName() getElementById() getElementsByTagName()

var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);

Indicati functia PHP ce returneaza numarul de elemente dintr-un array.

is_[) count() strlen()

$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4

Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "I live (happy)".

happly happily hapily

I live happily.
- Traiesc fericit (in mod fericit).

Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "Vivo (feliz)".

felizamente felizmente felices

Vivo felizmente.
- Traiesc fericit (cu fericire).