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 tag e folosit pentru a adauga liste cu definitii in element <dl>?

<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>

Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?

display position visibility

#id {
  visibility: hidden;
}

Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.

onclick onmouseover onfocus

document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}

Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.

$_SESSION $_GET $_REQUEST

if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}

Care din urmatoarele cuvinte reprezinta un Verb?

lighting believe path

I believe in my path.
- Eu cred in calea mea.