Marcatori si numerotare

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

Elementele pentru marcatori si numerotare

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). Fara atributul "type" specificat in "<ul>" acestea prezintă un marcaj ca un bullet.

Mai jos puteti vedea exemplu.

<!DOCTYPE html> 
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ul>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ul>
</body>
</html>

- Sunt 3 tipuri de marcaje: disc, circle (cerc) si square (patrat)
- Tipul de marcaj care se doreste folosit se introduce cu proprietatea CSS: list-style-type in "style".
- Exemplu:

<!DOCTYPE html> 
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ul style="list-style-type: square;">
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ul>
</body>
</html>

Un alt element folosit pentru formarea listelor (ordonate numeric) este <ol>.

<!DOCTYPE html> 
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ol>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>
</body>
</html>

Sunt mai multe tipuri de numerotare care pot fi folosite. Acestea sunt controlate de atributul "type" care este adaugat in elementul <ol>, le puteti vetea mai jos:

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

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

<!DOCTYPE html> 
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ol type="a">
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>
- Alta lista, start 3, inversa:
<ol type="I" start="3" reversed>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>
</body>
</html>

Alte elemente pentru asezarea textului in pagina

Alte elemente pentru asezarea textului sunt: tag-ul <dl>, care cuprinde in el elementele <dt> si <dd>

- <dl> ... </dl> este folosit (impreuna cu "dt" si "dd") pentru definirea si incadrarea unei liste de definitii.
- <dt> ... </dt> Defineste elementul din lista. Fiecare tip de astfel de element trebuie precedad de unul sau mai multe elemente <dd> ... </dd>, folosite pentru descrierea elementului definit.

Aceste elemente ajuta pentru a da un aspect ordonat si placut textului si a putea face o separare mai buna a continutului.
In urmatorul exemplu puteti vedea cum se folosesc aceste elemente :

<!DOCTYPE html> 
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<dl>
<dt>HTML</dt>
 <dd> - Hyper Text Markup Language</dd>
 <dd> - Limbaj pentru pagini web</dd>
<dt>Dog</dt>
 <dd>dog = caine</dd>
 <dd>animal de casa</dd>
</dl>
</body>
</html>

Pentru o eficienta mai buna se pot combina elementele de marcaj si numerotare, introducand elementele <ul> si <ol> imbricate (unele in celelalte) impreuna cu elementele <li>
Exemplu:

<!DOCTYPE html> 
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ul type="square">
<li> List item 1 ... </li>
<li> List item 2 ...
 <ol type="a" start="3">
 <li> Alt List item ... </li>
 <li> Alt List item ... </li>
 </ol></li>
<li> List item 5 ... </li>
</ul>
</body>
</html>

- Observati ca tot ce contine "<ol> ... </ol>" este adaugat in cadrul unui "<li> </li>".

<<-Lucrul cu mai multe ..

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?

<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>

Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?

text-align clear float

.some_class {
  width: 30%;
  float: left;
}

Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.

Math.ceil(x) Math.abs(x) Math.floor(x)

var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12

Indicati functia PHP care returneaza numarul de caractere dintr-un sir.

mb_strlen() count() stristr()

$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29

Clic pe raspunsul potrivit la intrebarea: "When it happened?".

On the 7th of July 1996 It is a quarter to 5. Nice weather.

When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.

Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".

Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.

¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.