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 atribut face ca optiunea din <select> sa fie selectata?

checked="checked" selected="selected" disabled="disabled"

<select name="a_name">
 <option value="val1">Optiune 1</option>
 <option value="val2" selected="selected">Optiune 2</option>
</select>

Care din aceste valori CSS creaza culoare gradient pentru fundal?

contain repeat-x linear-gradient

#id {
  background: linear-gradient(top left, #1f1, #fff, #11f);
}

Care cod creaza un array in JavaScript?

[] {} new Object()

var arr = [1, "CoursesWeb.net", "MarPlo.net"];
alert(arr[2]);

Indicati functia PHP folosita pentru redirect la alta pagina.

function() header() switch()

header("Location: http://coursesweb.net/");
exit;

Indicati articolul corect la cuvantul "garden" in propozitia: "... garden is a place with flowers".

An The A

The garden is a place with flowers.
- Gradina este un loc cu flori.

Indicati articolul corect pentru cuvantul: "jardín" (gradina)

la los el

El jardín es un lugar de flores.
- Gradina e un loc cu flori.