Scribd
Încărcați
4 vizualizări67 pagini

C2 Web

Încărcat de

Crina Oliana
Drepturi de autor
© All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
4 vizualizări67 pagini

C2 Web

Încărcat de

Crina Oliana
Drepturi de autor
© All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd

Universitatea “Constantin Brâncuşi” din Târgu-Jiu

TEHNOLOGII WEB
copyright@[Link]

Curs 2

Limbajul HTML
(partea II)

06.04.2017 Tehnologii Web 2


copyright@[Link]

Aspecte generale ale HTML


Atribute HTML
 Elementele HTML pot avea atribute:
1. Atribute obligatorii
2. Atribute opţionale
 Atributele furnizează informaţii suplimentare despre
un anumit element HTML
 Atributele sunt specificate în eticheta de start a unui
element HTML
 Atributele sunt specificate prin intermediul perechii
nume/valoare:
nume="valoare“
Exemplu: <p align="left">Acest paragraf este aliniat la
stanga.</p>
06.04.2017 Tehnologii Web 3
copyright@[Link]

Aspecte generale ale HTML


Atribute HTML (continuare)
Reguli XHTML, XML şi versiuni viitoare de HTML

1. Toate elementele HTML trebuie închise

2. Elementele vide se închid prin adăugarea


semnului “/” în eticheta de start (exemplu: <br>
se scrie corect <br/>

3. Etichetele HTML sunt scrise cu minuscule, deşi ele


nu sunt “case sensitive”
06.04.2017 Tehnologii Web 4
copyright@[Link]

Aspecte generale ale HTML

Etichete(tag-uri) de bază Semnificatie


<html> Specifica un document de tip HTML

<body> Specifica corpul unui document HTML


Specifica titlul unei secţiuni din
<h1> to <h6> document
<p> Specifica un paragraf

<br /> Specifica trecerea la linie nouă

<!--...--> Specifica un comentariu

06.04.2017 Tehnologii Web 5


copyright@[Link]

Aspecte generale ale HTML

Elemente de tip informatie Semnificatie


Defineşte informaţii despre
<head> documentul HTML
<title> Defineşte titlul documentului
Defineşte informaţii despre
<meta> documentul HTML
Defineşte adresa predefinită sau ţinta
<base> predefinită pentru toate legăturile din
pagină

Specifica legatura catre fisierul CSS


<link> (care defineste stilurile de formatare)

06.04.2017 Tehnologii Web 6


copyright@[Link]

Limbajul HTML (partea II)


3. Inserarea imaginilor
4. Inserarea legăturilor în documente HTML
4.1. Elementul a
4.2. Elementul link
4.3. Elementul base
5. Liste
5.1. Lista ordonată
5.2. Lista neordonată
5.3. Lista de tip definiţie
5.4. Utilizari speciale ale listelor

06.04.2017 Tehnologii Web 7


copyright@[Link]

3. Inserarea imaginilor
Imaginile sunt stocate in fisiere cu diverse formate.
Formatele acceptate de browsere pentru fisierele imagine sunt:
• GIF (Graphics Interchange Format) cu extensia .gif
• JpEG (Joint photographic Experts Group) cu extensia .jpeg sau .jpg
• XpM (X pixMap) cu extensia .xmp
• XBM (X BitMap) cu extensia .xbm
• BMp (BitMap) cu extensia .bmp (numai cu Internet Explorer)
• TIFF (Tagged Image File Format) cu extensia .tif sau .tiff
• PNG (Portable Network Graphic) cu extensia .png

Cele mai raspandite formate sunt:


– GIF (8 biti pentru o culoare, 256 culori posibile) si
– JPEG (24 biti pentru o culoare, 16777216 de culori posibile).

06.04.2017 Tehnologii Web 8


copyright@[Link]

3. Inserarea imaginilor
Adresa URL a unei imagini
URL ("Uniform Resourse Locator") =
identificator unic al resursei este un standard
folosit in identificarea unica a unei resurse in
Internet.
Toate imaginile cu care vom lucra vor avea
adresa URL exprimata in functie de directorul
ce contine documentul HTML care face
referire la imagine.

06.04.2017 Tehnologii Web 9


copyright@[Link]

3. Inserarea imaginilor
URL concatenează trei elemente:

1. Serviciul (protocolul) Internet utilizat pentru


accesarea resursei

2. Identificatorul calculatorului care stochează


resursa (host-ul sau gazda)

3. Identificatorul resursei (fişierului) pe


calculatorul gazdă (server)
06.04.2017 Tehnologii Web 10
copyright@[Link]

3. Inserarea imaginilor
1. Serviciul (protocolul) Internet utilizat pentru
accesarea resursei
Există mai multe metode (protocoale) de acces la
informaţia stocată pe un calculator conectat la Internet
şi respectiv mai mulţi identificatori de servicii
(protocoale):
a) http:// protocolul de transfer bazat pe hipertext
(Hyper Text Transfer Protocol)
b) ftp:// protocolul de transfer de fişiere (File Transfer
Protocol)
c) file:// pentru accesul la fişierele stocate pe
calculatorul local
06.04.2017 Tehnologii Web 11
copyright@[Link]

3. Inserarea imaginilor
2. Identificatorul calculatorului care stochează
resursa (host-ul sau gazda) este format din:

nume_calculator.domeniu_internet

unde domeniu_internet reprezintă o ramură din


structura arborescentă a internetului.
Exemple:
[Link]
[Link]
[Link]
06.04.2017 Tehnologii Web 12
copyright@[Link]

3. Inserarea imaginilor
3. Identificatorul resursei (fişierului) pe
calculatorul gazdă (server)
Acesta se compune din:
 / - reprezintă directorul rădăcină
 Cale_relativa / - reprezintă calea relativă spre
directorul în care se găseşte fişierul destinaţie
 Nume_fişier - numele fişierului destinaţie
 #nume_ancoră - numele unei ancore definite în
fişierul destinaţie prin <a name=“nume_ancoră”>.
Acest ultim termen este corect pentru metoda de acces
[Link]
06.04.2017 Tehnologii Web 13
copyright@[Link]

3. Inserarea imaginilor
3. Identificatorul resursei (fişierului) pe
calculatorul gazdă (server) - continuare
Exemplu:
[Link]
unde:
 http:// - specifică protocolul utilizat
 [Link] – specifică sistemul numit www
din domeniul [Link]
 /adrian/[Link] – reprezintă calea relativă spre
fişier
 #ancora1 – reprezintă o ancoră în fişierul destinaţie
începând cu care se va afişa pagina în browser
06.04.2017 Tehnologii Web 14
copyright@[Link]

3. Inserarea imaginilor

Inserarea imaginilor se poate face cu


ajutorul urmatoarelor tag-uri:
1. <img> - Defineşte o imagine
2. <map> - Defineşte harta unei imagini
3. <area> - Defineşte o zonă în cadrul hărţii unei
imagini

06.04.2017 Tehnologii Web 15


copyright@[Link]

3. Inserarea imaginilor
Elementul img se utilizează pentru a ataşa unei
pagini o imagine.

Forma generală a acestui element este:

<img atribute>
Atributele sunt:
1. SRC - identifică fişierul care conţine imaginea
respectivă (de tip .jpg, .gif etc.).

06.04.2017 Tehnologii Web 16


copyright@[Link]

3. Inserarea imaginilor
• În această etapă învăţăm să creăm paginile pe
propriul calculator, fără a fi conectaţi la internet.
• Prin urmare, fişierul care conţine imaginea se va
găsi într-un folder oarecare (în exemplul
următor el se găseşte în acelaşi folder în care
găsim şi fisierul cu extensia .html (cel care
conţine pagina).
• Din acest motiv, sursa nu conţine şi calea, dar,
dacă este cazul, calea poate fi conţinută.

06.04.2017 Tehnologii Web 17


copyright@[Link]

3. Inserarea imaginilor
2. ALIGN - tipul de aliniere - reţine una din valorile de
mai jos şi specifică browser-ului modul în care va
alinia imaginea în raport cu textul:
Right, Left, Top, Middle, Bottom
Fie fişierul text de mai jos (scris în Notepad).
• Observăm că am scris un prim paragraf care nu
conţine nici o imagine.
• Apoi, am scris un paragraf care, la început, conţine
o imagine apoi text.
• În final, avem un paragraf numai cu text.

06.04.2017 Tehnologii Web 18


3. Inserarea imaginilor
Exemplu:
<p> Un paragraf asezat inaintea imaginii</p>
<p> <img src=“[Link]” align=“right”>
Se observă cum se aliniează imaginii în al doilea paragraf </p>
<p> alt text este scris pentru a evidentia alinierea !!</p>

• Right – dacă ALIGN reţine această


valoare, imaginea se aliniază în
dreapta, iar textul care urmează
este scris în locul rămas.

06.04.2017 Tehnologii Web 19


3. Inserarea imaginilor

• Top – numai primul rând al


textului este scris în
dreapta imaginii, în partea
de sus.

• Apoi, textul continuă după


imagine, ocupând întreaga
lăţime a ecranului.

06.04.2017 Tehnologii Web 20


3. Inserarea imaginilor

• Left – dacă ALIGN reţine


această valoare, imaginea
se aliniază în stânga, iar
textul care urmează este
scris în locul rămas.

06.04.2017 Tehnologii Web 21


3. Inserarea imaginilor

• Middle – numai primul rând al


textului este scris în dreapta
imaginii, la jumătatea înălţimii
ei.

• Apoi, textul continuă după


imagine, ocupând întreaga
lăţime a ecranului.

06.04.2017 Tehnologii Web 22


3. Inserarea imaginilor

• Bottom – numai primul


rând al textului este scris
în dreapta imaginii, în
partea de jos.

• Apoi, textul continua


dupa imagine, ocupand
intreaga latime a
ecranului.

06.04.2017 Tehnologii Web 23


3. Inserarea imaginilor
3. alt="nume" - există posibilitatea ca imaginea să nu
se poată încărca.
• pentru astfel de situaţii este folosit parametrul ALT,
unde nume conţine un text (alternativ) care va fi
afişat în locul imaginii.
• Exemplu:
• Fie tag-ul img următor şi presupunem că imaginea nu
se afişează.
<img src=”[Link]” alt =”Mihai ”>
lată ce apare:

06.04.2017 Tehnologii Web 24


3. Inserarea imaginilor
4. height="numar pixeli" - înălţimea imaginii.
5. width="numar pixeli" - lăţimea imaginii.
6. border ="nr_pixeli" - Opţional, imaginea poate fi înconjurată de un chenar.

<img src=[Link]"> <img src="[Link]" border=5>


7. hspace="nr_pixeli"- determină distanţa minimă care separă imaginea de
celelalte obiecte pe orizontală.
8. vspace="nr_pixeli"- determină distanţa minimă care separa imaginea de
celelalte obiecte pe verticală.

06.04.2017 Tehnologii Web 25


3. Inserarea imaginilor
<map> - defineşte harta unei imagini
• Atribut obligatoriu:
– name – indică numele hărţii unei imagini
• Nu are atribute opţionale
• Atribute de tip eveniment acceptate:
– onclick, ondblclick, onmousedown, onmousemove,
onmouseout, onmouseover, onmouseup, onkeydown,
onkeypress, onkeyup

06.04.2017 Tehnologii Web 26


3. Inserarea imaginilor
<map name="harta">
<area href="[Link]" alt="Curs"
shape=rect coords="6,116,97,184">
<area href="[Link]" alt="Laboratoare"
shape=circle coords="251,143,47">
<area href="[Link]" alt="Contact"
shape=poly coords="150,217,190,257,150,297,110,257">
</map>

<img src="imag_senz.gif" alt="Harta imagine" border=0


width=300 height=300 usemap="#harta">

06.04.2017 Tehnologii Web 27


3. Inserarea imaginilor
<area> - defineşte o zonă în cadrul hărţii unei imagini
• Este inclus întotdeauna într-un element de tip <map>
• Atribut obligatoriu:
– alt – specifică textul ce va fi afişat pentru zona respectiva în cazul în care imaginea
nu poate fi încărcată
• Atribute opţionale:
– shape – default, rect, circle, poly
– coords – coordonatele zonei
– href – adresa URL a documentului ce va fi încărcat la acţionarea în zona respectivă
– target – _blank, _parent, _self, _top, nohref
• Atribute de tip eveniment acceptate:
– onblur, onclick, ondblclick, onfocus, onmousedown, onmousemove,
onmouseout, onmouseover, onmouseup, onkeydown, onkeypress,
onkeyup

06.04.2017 Tehnologii Web 28


copyright@[Link]

Limbajul HTML (partea II)


3. Inserarea imaginilor
4. Inserarea legăturilor în documente HTML
4.1. Elementul a
4.2. Elementul link
4.3. Elementul base
5. Liste
5.1. Lista ordonată
5.2. Lista neordonată
5.3. Lista de tip definiţie
5.4. Utilizari speciale ale listelor

06.04.2017 Tehnologii Web 29


copyright@[Link]

4. Inserarea legăturilor în documente


HTML
• Principala caracteristică a hipertextelor o
constituie utilizarea legăturilor (links).

• Un link este o conexiune către o altă resursă


Web (un alt hipertext sau o imagine, o
secvenţă video sau audio, un program etc.),
resursă care poate fi accesată din fereastra
browser-ului printr-un simplu clic.

06.04.2017 Tehnologii Web 30


copyright@[Link]

4. Inserarea legăturilor în documente


HTML
Limbajul HTML conţine multiple elemente prin
intermediul cărora se poate crea o legătură către
resurse Web:
1. img (creează o legătură către o imagine)
2. link (specifică legături către resurse utile)
3. a (creează o legătură către o resursă Web într-un
document HTML)
4. applet (creează o legătură către un program
executabil pe calculatorul utilizatorului)

06.04.2017 Tehnologii Web 31


copyright@[Link]

Limbajul HTML (partea II)


3. Inserarea imaginilor
4. Inserarea legăturilor în documente HTML
4.1. Elementul a
4.2. Elementul link
4.3. Elementul base
5. Liste
5.1. Lista ordonată
5.2. Lista neordonată
5.3. Lista de tip definiţie
5.4. Utilizari speciale ale listelor

06.04.2017 Tehnologii Web 32


copyright@[Link]

4.1. Elementul A
• pentru a insera un link într-un document HTML
se utilizează elementul a (anchor - ancoră).
• Textul cuprins între eticheta de început <a> şi
cea de sfârşit </a> va apărea evidenţiat în
fereastra browser-ului:
– subliniat, colorat în funcţie de valorile
atributelor link, Vlink, Alink sau în funcţie
de modul de configurare a browser-ului.

06.04.2017 Tehnologii Web 33


copyright@[Link]

4.1. Elementul a
Atributele specifice elementului a sunt: href = URL
specifică adresa resursei la care se face legătura.
name = şir-de-caractere

asociază un nume ancorei curente, astfel încât să poată


constitui ţinta unui alt link.
Numele trebuie să fie unic în cadrul documentului.
title = şir-de-caractere

asociază un nume resursei la care se face legătura.


Browser-ul va putea afişa titlul resursei când utilizatorul
deplasează mouse-ul deasupra legăturii.
06.04.2017 Tehnologii Web 34
4.1. Elementul a
Exemplu 1:
Descriere
Informaţii suplimentare in <a href="cap5. htm" > Capitolul 5
- Inserarea legaturilor in documente HTML </a>.

Efect

În acest exemplu a fost creat un link către documentul


HTML [Link].
Observaţi că adresa resursei ţintă a fost specificată
relativ la locaţia curentă.

06.04.2017 Tehnologii Web 35


4.1. Elementul a
Exemplu 2:
Descriere <a name="ucb" href="[Link]
title="Universitate"> Universitatea "Constantin
Brancusi" Targu-Jiu </a>

Efect

În acest exemplu, adresa resursei destinaţie (pagina


Web a Universitatii „Constantin Brancusi” din Targu-Jiu)
a fost specificată în mod absolut.
Această ancoră a fost denumită ucb.

06.04.2017 Tehnologii Web 36


4.1. Elementul A
Exemplu 3:
<a name="început"></a>
Descriere ....
<a href="#Inceput">Ia-o de la început!</a>

Efect

 În exemplul de mai sus am definit o ancoră vidă, pe care am


denumit-o început.
 La sfârşitul documentului am inserat o legătură către ancora
început, care permite utilizatorului să revină în poziţia acestei
ancore.
 Observaţi că în acest ultim caz, pentru specificarea adresei am
utilizat caracterul #, urmat de numele ancorei.
06.04.2017 Tehnologii Web 37
4.1. Elementul A
Exemplu 4:
<a href="[Link]#Link"> Curs Limbajul HTML
Descriere (partea II) Cap. Legaturi in documente HTML.</a>

Efect

 În acest exemplu am definit o legătură către documentul


HTML [Link].
 Prin activarea acestei legături se va deschide în fereastra
browser-ului documentul [Link], la ancora denumită Link.
 Observaţi că pentru a specifica drept ţintă o ancoră dintr-un
alt document se utilizează notaţia: adresă#nume-ancora.

06.04.2017 Tehnologii Web 38


copyright@[Link]

4.1. Elementul A
Exercitiu:
Creaţi o legătură astfel încât acţionând printr-un
clic pe numele unei persoane să îi puteţi scrie un
mesaj e-mail.

Solutie:
 protocolul care permite trimiterea unui mesaj e-mail
dintr-un program de navigare se numeşte mailto.
 prin urmare, URL-ul destinaţie constă din
mailto: adresă-destinatar.

06.04.2017 Tehnologii Web 39


copyright@[Link]

Limbajul HTML (partea II)


3. Inserarea imaginilor
4. Inserarea legăturilor în documente HTML
4.1. Elementul a
4.2. Elementul link
4.3. Elementul base
5. Liste
5.1. Lista ordonată
5.2. Lista neordonată
5.3. Lista de tip definiţie
5.4. Utilizari speciale ale listelor

06.04.2017 Tehnologii Web 40


copyright@[Link]

4.2. Elementul link


• Ca şi elementul a, elementul link permite
specificarea unor legături către alte documente.
• Spre deosebire de a, elementul link poate fi
plasat numai în antetul documentului (în
secţiunea head), deci prin urmare
corespunzător acestui element nu se afişează
nimic în pagina vizualizată de către browser.
• Din punct de vedere sintactic, elementul link
admite aceleaşi atribute ca şi elementul a, dar
nu admite etichetă de sfârşit.
06.04.2017 Tehnologii Web 41
copyright@[Link]

4.2. Elementul link


 prin utilizarea elementului link pot fi furnizate diferite
informaţii, cum ar fi informaţii despre autor, informaţii
despre versiunile anterioare ale documentului sau
versiuni în alte limbi etc.
 Este interpretat de marea majoritate a navigatoarelor
doar pentru a defini legături cu fisiere de stiluri
Exemplu:
<HEAD>
<TITLE> Capitolul 7 </TITLE>
<link TITLE = "Adrian Runceanu" HREF = "[Link]/ing">
<link TITLE = "previous Version" KREF = "../last/[Link]">
<link rel="stylesheet" type="text/css" href="[Link]" />
</HEAD>
06.04.2017 Tehnologii Web 42
copyright@[Link]

Limbajul HTML (partea II)


3. Inserarea imaginilor
4. Inserarea legăturilor în documente HTML
4.1. Elementul a
4.2. Elementul link
4.3. Elementul base
5. Liste
5.1. Lista ordonată
5.2. Lista neordonată
5.3. Lista de tip definiţie
5.4. Utilizari speciale ale listelor

06.04.2017 Tehnologii Web 43


copyright@[Link]

4.3. Elementul base


• Specificarea adreselor resurselor Web la care se
creează legături în documente HTML se poate
face:
1. în mod absolut
2. în mod relativ
• În cazul specificării relative a adreselor, se
consideră implicit că adresa de bază este locaţia
curentă.
• prin intermediul elementului base există
posibilitatea de a specifica explicit adresa de
bază a URL-urilor specificate în mod relativ.
06.04.2017 Tehnologii Web 44
copyright@[Link]

4.3. Elementul base


<base href=URL>

• Valoarea atributului URL al etichetei <base>


trebuie să fie o adresă specificată în mod
absolut.
• Observaţi că elementul base nu admite
etichetă de sfârşit.
• Dacă apare, elementul base trebuie plasat în
antetul documentului HTML.

06.04.2017 Tehnologii Web 45


copyright@[Link]

4.3. Elementul base


Exemplu:

<HTML>
<HEAD>
<TITLE> Cuprins </TITLE>
<base HREF="[Link]
</HEAD>
<BODY>
...
<A HKEF="curs/[Link]"> Capitolul 1 </A>
...
</BODY>
</HTML>
În exemplu am definit adresa de bază [Link]
prin urmare, prin activarea legăturii Capitolul 1, browser-ul va încărca
documentul de la adresa [Link]

06.04.2017 Tehnologii Web 46


copyright@[Link]

Limbajul HTML (partea II)


3. Inserarea imaginilor
4. Inserarea legăturilor în documente HTML
4.1. Elementul a
4.2. Elementul link
4.3. Elementul base
5. Liste
5.1. Lista ordonată
5.2. Lista neordonată
5.3. Lista de tip definiţie
5.4. Utilizari speciale ale listelor

06.04.2017 Tehnologii Web 47


[Link]
În HTML exista posibilitatea ca anumite
enunţuri să fie numerotate sau marcate într-un
anumit fel.
O astfel de organizare poartă numele de listă.
În HTML se pot descrie trei tipuri de liste:
1. liste ordonate, în care elementele sunt
numerotate
2. liste neordonate, în care elementele sunt
marcate de asa natura încât nu se sugerează o
anumită ordine a lor
3. liste de tip definitie
06.04.2017 Tehnologii Web 48
[Link]
Mai jos puteţi observa cele trei tipuri de liste:
1. Oraş • Oraş Oraş
2. Comună • Comună Zeci de mii de familii de oameni
3. Sat • Sat Comună
Câteva mii de familii de oameni
Sat

Câteva sute de familii de oameni

Lista Lista
Lista de tip definiţie
ordonată neordonată

06.04.2017 Tehnologii Web 49


copyright@[Link]

Limbajul HTML (partea II)


3. Inserarea imaginilor
4. Inserarea legăturilor în documente HTML
4.1. Elementul a
4.2. Elementul link
4.3. Elementul base
5. Liste
5.1. Lista ordonată
5.2. Lista neordonată
5.3. Lista de tip definiţie
5.4. Utilizari speciale ale listelor

06.04.2017 Tehnologii Web 50


5.1. Lista ordonată
1. Elementul OL (Ordered Lists) creează o listă ordonată.
Elementele listei sunt trecute între tag-urile <OL> şi </OL>.
2. Elementul LI (List Item) descrie un element al listei.
• Tag-ul obligatoriu este cel de început <LI>, iar cel de sfârşit
este facultativ: </LI>.
• Elementul OL are atributul type. Valorile pe care le poate
lua acest atribut, sunt:
<OL type = a>
<OL type = i>
<OL type = A>
<OL type = l>
<OL type = 1>
06.04.2017 Tehnologii Web 51
5.1. Lista ordonată
Exemplu:
<p> primul exemplu de lista : </p>
<ol>
<li> Sectia de Automatica si Informatica Aplicata;</li>
<li> Sectia de Enegetica; </li>
<li> Sectia de Mecanica; </li>
<li> Sectia de Ingineria Mediului; </li>
</ol>

Efect:

06.04.2017 Tehnologii Web 52


copyright@[Link]

Limbajul HTML (partea II)


3. Inserarea imaginilor
4. Inserarea legăturilor în documente HTML
4.1. Elementul a
4.2. Elementul link
4.3. Elementul base
5. Liste
5.1. Lista ordonată
5.2. Lista neordonată
5.3. Lista de tip definiţie
5.4. Utilizari speciale ale listelor

06.04.2017 Tehnologii Web 53


5.2. Lista neordonată
• Elementul UL (Unordered Lists) descrie o listă
neordonată.
• Elementele listei sunt cuprinse între tag-urile
<UL> şi </UL>.
• Elementul UL are atributul type.
• Valorile pe care le poate lua acest atribut,
sunt:
<UL type = cyrcle>
<UL type = disc>
<UL type = square>
06.04.2017 Tehnologii Web 54
5.2. Lista neordonată
<p> Tipuri de calculatoare: </p>
Exemplu: <ul>
<li> IBM; </li>
<li> COMPAQ; </li>
<li> APPLE; </li>
<li> SUN; </li>
</ul>

Efect:

Tehnologii Web 55
5.2. Lista neordonată
Se pot construi si liste imbricate: Efect:

<ol type = I >


<li> Exemplul 1 </li>
<ul type=disc>
<li> Varianta A </li>
<li> Varianta B </li>
<li> Varianta C </li>
<li> Varianta D </li>
</ul>
<li> Exemplul 2 </li>
<ul type=square>
<li> Varianta A </li>
<li> Varianta B </li>
<li> Varianta C </li>
<li> Varianta D </li>
</ul>
</ol>

Tehnologii Web 56
copyright@[Link]

Limbajul HTML (partea II)


3. Inserarea imaginilor
4. Inserarea legăturilor în documente HTML
4.1. Elementul a
4.2. Elementul link
4.3. Elementul base
5. Liste
5.1. Lista ordonată
5.2. Lista neordonată
5.3. Lista de tip definiţie
5.4. Utilizari speciale ale listelor

06.04.2017 Tehnologii Web 57


5.3. Lista de tip definiţie
1. Elementul DL (Definition Lists) are rolul de a
descrie o listă de definiţii.
El foloseşte tag-urile <DL> </DL>.
2. Elementul DT (Definition Term) defineşte
termenul din listă care trebuie descris.
El utilizează tag-ul <DT>.
3. Elementul DD (Definition Description) are
rolul de a reţine descrierea termenului.
El utilizează tag-ul <DD>.

06.04.2017 Tehnologii Web 58


5.3. Lista de tip definiţie
<DL>
Exemplu: <DT> HTML <DD> limbaj de descriere a datelor
<DT> CSS <DD> Limbaj de descriere a stilurilor
paginilor web
<DT> PHP <DD> Limbaj de scripting
<DT> MySQL <DD> Limbaj de interogare a bazelor
de date
</DL>
Efect:

06.04.2017 Tehnologii Web 59


copyright@[Link]

Limbajul HTML (partea II)


3. Inserarea imaginilor
4. Inserarea legăturilor în documente HTML
4.1. Elementul a
4.2. Elementul link
4.3. Elementul base
5. Liste
5.1. Lista ordonată
5.2. Lista neordonată
5.3. Lista de tip definiţie
5.4. Utilizari speciale ale listelor

06.04.2017 Tehnologii Web 60


copyright@[Link]

5.4. Utilizari speciale ale listelor


Daca intr-o lista, in loc de elementele acesteia introduse prin <li>,
se insereaza un bloc de text, aceasta va fi indentat (la fel ca
elementele unui paragraf).
<html>
<head><title>liste_exemplu</title></head>
<body>
<h1>Un bloc de text indentat</h1><hr>
<ol> Un bloc de text indentat. Un bloc de text
indentat. Un bloc de text indentat. Un bloc de text indentat.
Un bloc de text indentat. Un bloc de text indentat. Un bloc
de text indentat. Un bloc de text indentat. Un bloc de text
indentat.
</ol>
</body>
</html>
06.04.2017 Tehnologii Web 61
copyright@[Link]

5.4. Utilizari speciale ale listelor

06.04.2017 Tehnologii Web 62


copyright@[Link]

5.4. Utilizari speciale ale listelor


In exemplul urmator lista de definitii are itemii <dt> si <dd> multipli.
<html>
<head><title>liste_exemplu</title></head>
<body>
<h1 align="center">O lista de definitii speciala</h1><hr>
<dl>program
<dt><b>Luni</b>
<dt><b>Marti</b>
<dt><b>Miercuri</b>
<dd><i>Ora 9.00.</i>Inscriere
<dd><i>Ora 11.00.</i>Audieri
<dd><i>Ora 13.30.</i>Raspunsuri
</dl>
</body>
</html>
06.04.2017 Tehnologii Web 63
copyright@[Link]

5.4. Utilizari speciale ale listelor

06.04.2017 Tehnologii Web 64


copyright@[Link]

5.4. Utilizari speciale ale listelor


Ultimul exemplu este o lista neordonata personalizata care utilizeaza
pe post de elemente imagini si texte.
<html>
<head><title>liste_exemplu</title></head>
<body>
<h1>O lista personalizata</h1><hr>
<ul>Tipuri de masini Volkswagen sunt:<br>
<li> <img src="images/[Link]">Golf<br> </li>
<li> <img src="images/[Link]">Jetta<br> </li>
<li> <img src="images/[Link]">Passat<br> </li>
<li> <img src="images/[Link]">Bora<br> </li>
<li> <img src="images/[Link]">Corrado<br> </li>
<li> <img src="images/[Link]">Transporter<br></li>
</ul>
</body>
</html>

06.04.2017 Tehnologii Web 65


copyright@[Link]

5.4. Utilizari speciale ale listelor

06.04.2017 Tehnologii Web 66


copyright@[Link]

Întrebări?

06.04.2017 Tehnologii Web 67

S-ar putea să vă placă și