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

Ce atribut indica faptul ca un camp de formular trebuie completat?

required="required" autofocus="autofocus" placeholder="text"

<input type="text" name="name1" required="required" />

Ce metoda CSS misoreaza sau mareste dimensiunile unui element (inclusiv continutul)?

translate() scale() skew()

#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}

Click pe metoda obiectului Date care returneaza ziua din luna.

setDate() getMonth() getDate()

var rightnow = new Date();
var day = rightnow.getDate();
alert(day);

Ce functie este folosita pentru a incarca un fisier pe server?

is_file() move_uploaded_file() fopen()

if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "Fisierul a fost incarcat";
}

Cum se spune in engleza expresia: "Ploua cu galeata"?

rain cats and dogs rain buckets quiet rain

In Bucharest it`s raining cats and dogs.
- In Bucuresti ploua cu galeata.

Cum se spune in spaniola expresia: "Ploua cu galeata"?

llover cubo llover a cántaros lluvia tranquila

En Madrid está lloviendo a cántaros.
- In Madrid ploua cu galeata.