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
Ce atribut e folosit in tag-ul <img> pentru adresa imaginii?
href src rel
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Care din aceste coduri CSS ascunde elementul in pagina?
display: none; display: inline; position: relative;
#id {
  display: none;
}
Ce instructiune opreste executia lui while() sau for() ?
continue prompt() break
for(var i = 0; i< 8; i++) {
  if(i > 1) break;
  alert(i);
}
Indicati functia utilizata pentru a crea constante.
define() include() defined()
define("CONSTANT_NAME", "value");
echo CONSTANT_NAME;
Care este forma de plural a substativului "class" (clasa)?
classes clases clasis
This school has three classes.
- Scoala asta are trei clase.
Care este pluralul substativului "voz" (voce)?
vose voze voces
Escuché dos voces.
- Am auzit doua voci.
Liste HTML - DL, DETAILS

Last accessed pages

  1. Verbe frazale din limba Engleza (23934)
  2. Colorare text (387)
  3. Articolul din limba engleza - The article (39705)
  4. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (139131)
  5. Tag-urile iframe si object (1663)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (5269)
  2. Curs HTML gratuit Tutoriale HTML5 (4337)
  3. Curs si Tutoriale JavaScript (3551)
  4. Prezentul simplu si continuu - Present Tense Simple and Continuous (3476)
  5. Curs PHP MySQL, Tutoriale si Scripturi PHP (3386)