Liste HTML - DL, DETAILS

DETAILS - Liste tip acordeon

Elemente HTML <dl> si <details> ajuta la crearea de liste cu aspect ordonat si placut, cu o separare mai buna a continutului.

Liste de definitii - DL

Elementul HTML <dl> ... </dl> este folosit impreuna cu <dt> si <dd> pentru definirea si incadrarea unei liste de definitii.
- Tag-ul <dt> ... </dt> defineste elementul din lista care va avea definitii. Acesta va fi precedad de unul sau mai multe elemente <dd> ... </dd>, folosite pentru descrierea elementului definit.

In urmatorul exemplu puteti vedea cum se folosesc aceste elemente:

<h4>Exemplu cu DL</h4>

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

DETAILS - Liste tip acordeon

Tag-ul HTML <details> specifica un cadru cu detalii pe care utilizatorul il poate deschide si inchide dupa cum vrea.
Acest element poate fi folosit pentru a crea liste interactive pe care utilizatorul le poate deschide si inchide (ca un efect tip acordeon).
Tag-ul <details> e un element de tip bloc, poate sa contina orice tip de continut si tag-uri HTML.

- Examplu:

<h4>Exemplu cu tag-ul details</h4>

<details>
<p>Acesta e un paragraf adaugat in tag-ul details.</p>
<img src='javascript/imgs/smile_gift.png' width='125' height='110' alt='Smile'/>
</details>

In tag-ul <details> se poatea adauga un tag <summary> care specifica partea vizibila pe care se poate da clic ca sa se deschida si inchida 'details'.

<h4>Exemplu cu details si summary</h4>

<details>
<summary>Clic pentru a vedea detaliile</summary>
<blockquote>
Daruieste Pace si Bucurie, vei primi Fericire.<br>
Iarta(-te), multumeste si iubeste, primesti ce si cum daruiesti.
</blockquote>
<img src='javascript/imgs/smile_gift.png' width='125' height='110' alt='Smile'/>
</details>

Tag-ul <details> poate sa contina atributele standard (id, class, style) si atributul open.
Cand atributul open e adaugat, face elementul details vizibil (deschis).

- Exemplu cu doua <details>, primul are atributul open.

<h4>Exemplu cu details open</h4>

<details open>
<summary>Astazi este</summary>
<blockquote>
Mereu, o zi minunata.<br>
Prima zi din restul vietii tale.
</blockquote>
</details>
<details>
<summary>Cerinte Sistem</summary>
<p>O minte linistita, inima curata, suflet iubitor.</p>
<img src='javascript/imgs/smile_gift.png' width='125' height='110' alt='Smile'/>
</details>

<<-Liste HTML - UL, .. -- Adaugare imagini in pagina->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tip de <input> creaza un camp de text care trebuie sa contina doar numere?

type="text" type="number" type="date"

<input type="number" name="points" min="5" max="80" />

Ce proprietate CSS permite modificarea transparentei unui element?

font-style opacity color

#id {
  filter:alpha(opacity=40);    /* for IE */
  opacity:0.4;
}

Clic pe functia care formateaza un numar la o anumita lungime de caractere.

toPrecision() exp() toFixed()

var num = 12.84567;
alert( num.toPrecision(3) );       // 12.8

Ce functie aranjeaza aleator elementele dintr-un array?

natsort() shuffle() sort()

$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
shuffle($lang);
var_export($lang);     // array (0=>"coursesweb.net", 1=>"PHP", 2=>"JavaScript")

Indicati Superlativul cuvantului "good" (bun).

better best goodest

She is the best in our class.
- Ea este cea mai buna din clasa noastra.

Care este Superlativul cuvantului "bueno" (bun)?

el mejor más bueno muy bueno

Él es el mejor en nuestra clase.
- El este cel mai bun din clasa noastra.