Lectia 2: Liste si referinte2.1 ListeHTML
ofera mai multe mecanisme pentru specificarea listelor de informatii.
Exista 3 tipuri de liste, fiecare tip trebuie sa includa cel putin un
element:
1. Liste de tip definitie
2. Liste ordonate (numerotate)
3. Liste neordonate (marcate)
2.1.1 Liste de tip definitieUnul
dintre cele mai obisnuite elemente in paginile HTML este un set de
definitii, referinte sau indexuri. Un exemplu concret il reprezinta
glosarele; cuvintele sunt listate alfabetic, insotite de definitiile
termenilor respectivi.
Lista de tip definitie este introdusa de marcajele:
•
<dl>...</dl> - lista definitii (definition list)
•
<dt> - termenul definit (definition term)
•
<dd> - definitie (definition)
Exemplu:Code:
<html> <head> <title>Lista de tip definitie</title> </head> <body> <dl> <dt>Applet Java <dd>Aplicatie Java inclusa intr-un document HTML <dt>Cookie <dd>Mecanism de comunicare intre client si server <dt>Domeniu <dd>Nume unic prin care se identifica un site pe Internet </dl> </body> </html> |
2.1.2 Liste neordonateSunt introduse de marcajele:
•
<ul>...</ul> - lista neordonata (unordered list)
•
<li> - element lista
Exemplu:Code:
<html> <head> <title>Lista neordonata</title> </head> <body> <p>In HTML sunt disponibile 3 tipuri de liste:</p> <ul type="square"> <li>liste de tip definitie <li>liste neordonate <li>liste ordonate </ul> </body> </html> |
Atributul square precizeaza tipul maracatorului
2.1.3 Liste ordonateSunt introduse de marcajele:
•
<ol>...</ol> - lista ordonata (ordered list)
•
<li> - element lista
Exemplu:Code:
<html> <head> <title>Lista ordonata</title> </head> <body> <p>In HTML sunt disponibile 3 tipuri de liste: <ol start="2"> <li>liste de tip definitie <li>liste neordonate <li>liste ordonate </ol> </body> </html> |
Atributul
start seteaza numarul de inceput pentru primul element al listei ordonate.
Diferenta
dintre listele ordonate si cele neordonate consta in inlocuirea
punctelor din enumerare cu numere. Vizualizand in browser exemplele
mentionate anterior, vei intelege diferentele in modul de afisare a
fiecarui tip de lista.
2.2 Referinte (link-uri)Marcajul
HTML principal pentru introducerea referintelor catre alte pagini HTML
sau catre elemente din cadrul aceleiasi pagini web este <
a>. El trebuie sa contina atribute, in caz contrar neafectand formatarea documentului.
Code:
Exemplul urmator nu va afecta formatarea documentului: <a>Aici</a> ar trebui sa fie un link ! |
Pentru a activa linkul de mai sus vom adauga atributul
href.
Code:
Exemplul urmator arata formatarea documentului: <a href="pagina.html">Aici</a> este un link ! |
Referintele pot fi
absolute (ex.
<a href="http://www.domeniu.ro/pagina.html">http://www.domeniu.ro/pagina.html<a> sau
relative (ex.
<a href="pagina.html">pagina.html<a>).
Referintele
relative sunt folosite in interiorul siturilor. Ele functioneaza pe
baza faptului ca browserul adauga automat numele domeniului la fiecare
referinta (presupunand ca exista o pagina la adresa
http://www.hostx.ro/director/pagina.html si o referinta relativa catre pagina2.html, browserul va construi referinta
http://www.hostx.ro/director/pagina2.html in momentul in care pagina2.html este solicitata)
Referintele
absolute le vei folosi atunci cand vrei sa trimiti utilizatorul pe un
alt site (domeniu); pot fi folosite si in interiorul unui site, insa va
implica un efort mai mare in scrierea paginilor (pe scurt, ai mai mult
de tastat), iar in cazul in care muti situl pe un alt domeniu vei fi
nevoit sa re-editezi toate referintele.
Referintele pot fi catre
pagini html, dar si catre alte tipuri de fisiere (imagini, fisiere
audio, video, documente in alte formate, etc.)
Exemplu:Code:
Presupunem ca ai un site cu urmatoare structura de directoare: /director1 /director2
Pentru a apela o pagina HTML aflata in director2 dintr-o pagina aflata in director1 voi folosi urmatoarea secventa: <a href="../director2/pagina.html">Un link oarecare</a> Pentru a apela o pagina HTML aflata in director1 dintr-o pagina aflata in radacina (nivelul superior al sitului) voi folosi urmatoarea secventa: <a href="director1/pagina.html">Un link oarecare</a> |
2.2.1 AncorePana
acum am prezentat modul de realizare a referintelor externe, catre alte
pagini sau catre alte situri. Ce se intampla insa in cazul in care avem
un document de dimensiuni mari si vrem sa introducem referinte catre
anumite sectiuni ale sale? Solutia consta in utilizarea ancorelor.
!!! De Retinut !!!Code:
Ancorele asigura usurinta in navigare in paginile de dimensiuni mari. O ancora are urmatorul format <a name="nume_ancora">...</a> Numele ancorelor nu poate contine spatii si trebuie sa fie unic in pagina respectiva ! |
!!! De Retinut !!!Code:
In exemplul urmator vei vedea o greseala posibila in atribuirea numelui ancorelor: <a name="xxx">...</a> <a name="XXX">...</a> In HTML xxx si XXX inseamna acelasi lucru! |
Odata
definita ancora trebuie definita si legatura activa catre ancora
respectiva. Ea va fi o referinta hypertext in formatul urmator:
<a href="#nume_ancora">Link catre ancora</a>Trebuie retinut ca exista posibilitatea de a crea referinte catre ancore aflate in documente externe:
<a href="pagina.htm#nume_ancora">Link catre ancora externa</a>_______________________________________
...:::Only God Can Judge Me:::...