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>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce element HTML adauga continut flash SWF in pagina web?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Browser-ul dv. nu suporta SWF.
</object>
Care pseudo-clasa CSS adauga un stil la un camp input de formular cand e cursorul in el?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Clic pe instructiunea care transforma un sir JSON in obiect JavaScript.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicati functia PHP care poate crea sau scrie un fisier pe server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "Fisierul a fost creat";
else echo "Fisierul nu poate fi creat";
Cum se spune "al treilea" in engleza?
threeth third three
I planted the third tree.
- Am plantat al treilea pom.
Cum se spune "al treilea" in spaniola?
segundo tres tercero
Yo planté el tercero árbol.
- Am plantat al treilea pom.
Liste HTML - DL, DETAILS

Last accessed pages

  1. Instructiuni conditionale if, else, switch (8214)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (63047)
  3. Gradele de comparatie: comparative, superlative (17550)
  4. Cursuri Limba Franceza (3808)
  5. Cursuri limba engleza gratuite si lectii online (27632)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (1951)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1664)
  3. Trecutul simplu si continuu - Past Tense Simple and Continuous (1556)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1422)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1155)