Scrigroup - Documente si articole

     

 
HomeDocumenteUploadResurseAlte limbi doc
 
AccessAdobe photoshopAlgoritmiAutocadBaze de dateCC sharp
CalculatoareCorel drawDot netExcelFox proFrontpageHardware
HtmlInternetJavaLinuxMatlabMs dosPascal
PhpPower pointRetele calculatoareSqlTutorialsWebdesignWindows
WordXml


Liste si referinte - <dl>, <ol>, <li>

html



+ Font mai mare | - Font mai mic



Liste si referinte



1 Liste

HTML 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)

1.1 Liste de tip definitie

Unul 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)

<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>

Poti vizualiza exemplul de mai sus in browserul tau aici.

1.2 Liste neordonate

Sunt introduse de marcajele:

  • <ul></ul> - lista neordonata (unordered list)
  • <li> - element lista

<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>

Poti vizualiza exemplul de mai sus in browserul tau aici.

Atributul square precizeaza tipul maracatorului

1.3 Liste ordonate

Sunt introduse de marcajele:

  • <ol></ol> - lista ordonata (ordered list)
  • <li> - element lista

<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>

Poti vizualiza exemplul de mai sus in browserul tau aici.

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.
  1. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online
  2. Realizeaza o pagina HTML (folosind NotePad) care sa includa toate tipurile de liste. Valideaza pagina la adresa https://validator.w3.org/

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.

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.

Exemplul urmator arata formatarea documentului:

<a href='pagina.html'>Aici</a> este un link !

Referintele pot fi absolute

(ex. <a href='https://www.domeniu.ro/pagina.html'>https://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 https://www.hostx.ro/director/pagina.html si o referinta relativa catre paginahtml, browserul va construi referinta https://www.hostx.ro/director/paginahtml in momentul in care paginahtml 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.)

Acest exemplu evidentieaza efectele marcajelor mentionate mai sus.

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>

1 Ancore

Pana 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.

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 !

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>

Acest exemplu evidentieaza efectele marcajelor mentionate mai sus.

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>
  1. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online
  2. Realizeaza o pagina HTML (folosind NotePad) pe baza unui text existent, care sa includa ancore. Folosind pagina realizata la exercitiul precedent (liste) si insereaza linkuri catre ancorele create.

Politica de confidentialitate | Termeni si conditii de utilizare



DISTRIBUIE DOCUMENTUL

Comentarii


Vizualizari: 1803
Importanta: rank

Comenteaza documentul:

Te rugam sa te autentifici sau sa iti faci cont pentru a putea comenta

Creaza cont nou

Termeni si conditii de utilizare | Contact
© SCRIGROUP 2024 . All rights reserved