Curs Html


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
Clic pe tag-ul care creaza o lista ordonata numeric
<ul> <tr> <ol>
<ol>
  <li>List-1</li>
  <li>List-2</li>
</ol>
Care selector reprezinta ID-ul unui element in CSS
.nume #nume nume
#id {
  color: #0110fb;
}
Ce cod creaza un obiect in JavaScript?
{} [] new Date()
var obj = {"site": "CoursesWeb.net", "pr": 5};
alert(obj.site);
Indicati instructiunea prin care se verifica daca o conditie este True sau False
else if() switch()
$var = 8;
if($var == 8) echo $var;
Indicati timpul Prezent pentru verbul "to be" (a fi).
be were is
Now, it is here.
- Acum este aici.
Care este conjugarea la timpul prezent al verbului "divertirse" (a se distra) la forma "yo"?
te diviertas me divierto se divierta
Yo me divierto.
- Eu ma distrez.

S H A R E

Sharing Twitter

Last accessed pages

  1. Prezentul simplu - Exercitii si teste incepatori (70058)
  2. Comparative si superlative (3795)
  3. Teste spaniola - Tests y ejercicios de Español - Gramática (28686)
  4. Coduri pt culori (71980)
  5. Proverbe, expresii si zicatori (24410)

Popular pages this month

  1. Coduri pt culori (122)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (83)
  3. Curs HTML gratuit Tutoriale HTML5 (73)
  4. Exercitii engleza - English Tests and exercises - Grammar (39)
  5. Elemente principale HTML (39)