Sunteți pe pagina 1din 11

Lecia 2: Liste si referinte

2.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. 2. 3. liste de tip definitie liste ordonate (numerotate) liste neordonate (marcate)

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

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

2.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 Realizeaza o pagina HTML (folosind NotePad) care sa includa toate tipurile de liste. Valideaza pagina la adresa http://validator.w3.org/

2.

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.

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="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.) 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>


2.2.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. 2.

Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online 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.

Lecia 3: Ima gini si sun ete

3.1 De ce imagini ?
In principal, utilizarea imaginilor (pozelor) in cadrul paginilor HTML are ca scop imbunatatirea modului de transmitere a mesajului catre utilizatori. Imagineaza-ti cum ar arata Academia Online fara imagini ! O pagina in care imaginile sunt combinate cu textul poate transmite un mesaj mult mai bine decat o pagina care contine doar text. Selectarea imaginilor care vor fi utilizate este foarte importanta; cateva imagini care "clipesc" nu sunt suficiente pentru a face o pagina atractiva.

3.2 Ce trebuie sa stiu despre imagini ?


Inainte de a introduce o imagine intr-un document HTML este necesar sa iti pui cateva intrebari:

imaginea aceasta da "valoare" paginii mele? o dupa cum spuneam mai sus, simpla inserare in pagina a unor imagini care nu au nici o legatura cu mesajul transmis in pagina nu este suficienta. Faptul ca o imagine sau mai multe "arata bine" nu este suficient pentru a face o pagina atractiva. pot sa "imprumut" imaginea? o voi incepe prin a spune ca NU exista imagini fara copyright (drepturi de autor). Exista imagini care sunt oferite gratuit sau cu consimtamantul autorului (proprietarului), insa majoritatea sunt oferite contra cost (din motive lesne de inteles). Desi in cazul siturilor personale(non-profit) este improbabil sa verifice cineva provenienta imaginilor, in cazul siturilor comerciale riscul de a fi dat in judecata (chiar si in Romania) este real. o nu te baza pe faptul ca nu stii provenienta imaginii. In fata legii "nu stiu" nu este valabil. Responsabilitatea in a determina cui ii apartine imaginea respectiva iti apartine in intregime. ce dimensiunea are imaginea? o pentru utilizatorii care folosesc conexiuni dial-up, paginile care contin imagini de dimensiuni mari (> 25-30 k) se vor incarca in browser foarte greu. Multi se vor plictisi asteptand incarcarea paginii si vor abandona vizualizarea paginii. culorile sunt "portabile"? o o problema importanta este modul de afisare a culorilor pe diferite computere, sisteme de operare sau browsere. Sunt convins ca nu ai vrea ca fundalul rosu al unei imagini afisate in browserul tau sa arate roz pe un Mac, spre exemplu. Pentru a elimina aceasta problema au fost stabilite anumite culori care arata la fel indiferent de computer, sistem de operare, etc. Poti vedea aceasta lista impreuna cu codurile lor in format hexa aici. ce format de imagine sa folosesc? o Exista foarte multe formate de fisiere grafice (psd, png, jpg, pcx, bmp, gif, wmf, etc.). Doar cateva sunt universal recunoscute de browsere: GIF - GRAPHICS INTERCHANGE FORMAT - este un format de compresie fara pierdere de calitate. JPG - format introdus de JOINT PHOTOGRAPHIC EXPERT GROUP - este un format de compresie cu pierdere de calitate. Atentie insa: prin salvarea repetata a unei imagini, ea va pierde din calitate, devenind in final inutilizabila. PNG - PORTABLE NETWORK GRAPHIC - este un format de compresie fara pierdere de calitate. Are in general dimensiuni mai mari decat primele doua formate mentionate.

3.3 Cum se introduce o imagine intr-o pagina HTML?


Introducerea unei imagini intr-o pagina HTML se face prin marcajul <img>

<html> <head> <title>Pagina mea</title> </head> <body> <img src="imagine.gif"> </body> </html>
Atributul src specifica locatia imaginii. Alaturi de src, marcajul <img> are urmatoarele atribute:

alt - specifica un text alternativ pentru cazul in care imaginea nu poate fi afisata. Este important si

Lecia 4: Ta bel e

Prezentarea datelor sub forma de tabele prezinta avantaje din punct de vedere al claritatii si sistematizarii. Marcajele HTML dedicate formatarii tabelelor permit operatiuni asemanatoare celor din procesoarele de texte (ex. MS Word). Definirea unui tabel in HTML se face folosind perechea de marcaje <table>...</table>. Prin intermediul acestei perechi de marcaje se definesc atribute valabile pentru intregul tabel. Majoritatea acestor atribute pot fi insa redefinite pentru anumite celule ale tabelului.

<table [border=n] [frame=above|below|border|box|hsides|vsides|lhs|rhs|void] [rules=none|groups|rows|cols|all] [width=abs|rel] [height=abs|rel] [bgcolor="#rrggbb"] [bordercolor="#rrggbb"] [bordercolorlight="#rrggbb"] [bordercolordark="#rrggbb"] [background="URL-imagine"] [cellspacing=n] [cellpadding=n] [align=left|center|right] [valign=top|middle|bottom] [summary="sumar"]> ... </table>

Semnificatiile atributelor marcajului <table> sunt:

border - specifica grosimea chenarului tabelului. Daca are valoarea 0 sau atributul lipseste, tabelul nu va avea chenar. frame - defineste modul de afisare a chenarului exterior. Functioneaza in prezenta atributului "border". Atributul frame poate avea urmatoarele valori: o above - afiseaza latura superioara a chenarului; o below - afiseaza latura inferioara a chenarului; o border - afiseaza chenarul complet; o box - afiseaza chenarul complet (la fel ca si border); o hsides - afiseaza partile inferioara, respectiv superioara ale chenarului; o vsides - afiseaza partile laterale (stanga, dreapta) ale chenarului; o lhs - afiseaza latura stanga a chenarului; o rhs - afiseaza latura dreapta a chenarului; o void - fara bordura exterioara. rules - defineste modul de afisare a chenarului interior dintre celulele tabelului. Functioneaza in prezenta atributului "border". Atributul rules poate avea urmatoarele valori: o none - nu se afiseaza chenar interior; o groups - afiseaza chenar intre grupurile de celule definite de thead, tbody, colgroup, col, tfoot; o rows - afiseaza chenar ntre linii; o cols - afiseaza chenar ntre coloane; o all - afiseaza chenar intre toate celule interioare. width, height - specifica latimea, respectiv inaltimea tabelului. In cazul in care valorile specificate nu sunt suficiente pentru afisarea continutului celulelor, valorile vor fi modificate automat de catre browser astfel incat tot continutul sa fie afisat. Valorile se pot exprima absolut, in pixeli, sau relativ la latimea ecranului (width), respectiv la inaltimea ecranului (height). Trebuie mentionat ca atributul "height" nu face parte din specificatiile HTML. Este recomandat sa lasi browserul sa calculeze valoarea pentru "height" in functie de continutul tabelului. bgcolor - specifica culoarea pentru fundalul tabelului. bordercolor - specifica culoarea chenarului. bordercolorlight, bordercolordark - sunt atribute utilizate pentru a crea un efect 3D asupra chenarului. Este recomandata folosirea de culori complementare pentru a obtine efectul scontat. Sunt extensii Microsoft. background - URL-ul imaginii care va fi utilizata ca fundal al tabelului. In cazul in care dimensiunile imaginii sunt mai mici decat cele ale tabelului, ea va fi repetata astfel incat sa acopere intregul fundal al tabelului. Este extensie Microsoft. cellspacing - specifica distanta dintre celule.

Lecia 5: Ca dr e

Incepand cu Netscape Navigator 2, autorii paginilor HTML au posibilitatea de a imparti fereastra browserului in cadre, fiecare cadru afisand un document HTML diferit. Foarte rapid, cadrele au castigat popularitate, fiind adoptate de Internet Explorer, iar mai tarziu incluse in specificatiile HTML 4. Cadrele ofera autorilor de pagini HTML posibilitatea de a pastra vizibila o parte a informatiei, in timp ce o alta parte a informatiei este derulata (scroll) sau inlocuita. Avantaje:

dimensiunea (KB) mai mica a fiecarui cadru in parte, comparativ cu cazul in care ar fi existat o singura pagina, determina un timp de incarcare mai redus.

Dezavantaje:

unele motoare de cautare nu indexeaza siturile realizate cu cadre autorul trebuie sa tina evidenta unui numar mare de pagini HTML exista unele browsere care nu pot afisa pagini realizate cu cadre este dificil de printat intreaga pagina

Cadrele sunt introduse prin perechea de marcaje <frameset>...</frameset>, respectiv marcajul <frame>. Frameset defineste modul de impartire al ferestrei (spatiul alocat fiecarui cadru in parte).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Un document cu cadre</title> </head> <frameset cols="30%, 70%"> <frameset rows="200, 200"> <frame src="continut_cadru1.html"> <frame src="continut_cadru2.html"> </frameset> <frame src="continut_cadru3.html"> <noframes> <p>Acest document contine: <ul> <li><a href="continut_cadru1.html">continut</a> <li><img src="continut_cadru2.html" alt="imagine"> <li><a href="continut_cadru3.html">continut</a> </ul> </noframes> </frameset> </html>
Asa cum se vede mai sus, pentru a imparti un cadru in doua sau mai multe cadre, se folosesc marcaje frameset imbricate. Poti vizualiza exemplul de mai sus in browserul tau, aici.

<frameset [border=n] [bordercolor=#rrggbb] [cols=x,y,..] [rows=x,y,..] ... </frameset>