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

Care tag HTML5 adauga o aplicatie externa (SWF, PDF) in pagina web?

<embed src="flash_game.swf" width="450" height="350" />

Ce pseudo-element adauga un anume stil la prima linie de text din element?

:first-letter :before :first-line

#id:first-line {
  font-weight: bold;
  color: blue;
}

Clic pe proprietatea obiectului window care preia sau seteaza adresa URL a paginii curente.

window.location window.self window.status

var url = window.location;
alert(url);

Indicati functia PHP care preia continutul unui fisier sau pagina si-l adauga intr-un sir.

fopen() file_put_contents() file_get_contents()

$homepage = file_get_contents("http://www.marplo.net/");
echo $homepage;

Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?

seven - eight ten - six three - five

This fruit has seven or eight seeds.
- Acest fruct are sapte sau opt seminte.