cursuri cursuri cursuri cursuri cursuri cursuri
cursuri
cursuri
cursuri
Cursuri    Tutoriale    Teste    Jocuri
 
 
cursuri Am uitat utilizatorul cursuri Am uitat parola
cursuri online Cursuri online
Cursuri online gratuite
cursuri online Tutoriale
Cum sa faci orice
cursuri online Teste online
Testeaza-ti cunostintele
cursuri online Revista
Aboneaza-te gratuit
cursuri online Jocuri
Jocuri educative
cursuri online Inregistreaza-te
Intra in comunitate
eCursuri » Cursuri online » Tehnologia informatiei » HTML pe intelesul tuturor » Lectia 7
Crearea listelor in HTML
67380 afisari
In aceasta lectie vei invata cum poti folosi listele in pagina ta web. Listele pe care le poti crea cu ajutorul limbajului HTML sunt de urmatoarele tipuri: liste neordonate, liste ordonate si liste de definitii. Sa le luam pe rand.

Liste neordonate (UL)

Inainte de vorbi despre listele neordonate sa vedem, mai intai, cum arata una:
    Firma noastra va ofera urmatoarele servicii:
  • printare
  • printare
  • indosariere
  • xerox
  • tehnoredactare
Pentru a putea face o lista neordonata trebuie sa folosim tag-urile <UL> si </UL> (denumirea acestor tag-uri vine de la "unordered list" care inseamna in limba engleza lista neordonata). Fiecare element al listei trebuie introdus de tag-ul <LI>. Ca sa intelegi mai bine sa vedem impreuna cum arata codul HTML pentru lista de mai sus:
<HTML>
<HEAD>
<TITLE>Liste neordonate</TITLE>
</HEAD>
<BODY>
<UL>Firma noastra va ofera urmatoarele servicii:
<LI>printare
<LI>laminare
<LI>indosariere
<LI>xerox
<LI>tehnoredactare</UL>
</BODY>
</HTML>

Salveaza pagina cu numele de liste1.html in directorul Pagini. Pentru a vedea cum ar trebui sa arate aceasta pagina: click aici

Cu ajutorul atributului TYPE, putem schimba cercul plin din fata fiecarui element. Acesta este folosit in mod implicit atunci cand folosim o lista neordonata. Astfel, prin atribuirea unei valori atributului TYPE, vom putea face ca elementele listei sa fie precedate de un patrat sau de un cerc gol.

Pentru a vedea rezultatele, inlocuieste linia a 6-a din codul HTML de mai sus cu una din urmatoarele linii de cod:
  • pentru cercuri goale:
    <UL TYPE=circle>Firma noastra va ofera urmatoarele servicii:

    Salveaza pagina cu numele de liste2.html in directorul Pagini. Vezi rezultatul: click aici

  • pentru patrate pline:
    <UL TYPE=square>Firma noastra va ofera urmatoarele servicii:

    Salveaza pagina cu numele de liste3.html in directorul Pagini. Vezi rezultatul: click aici
Nu uita! Pentru a invata limbajul HTML trebuie sa scrii codul de la fiecare exemplu si sa vezi daca obtii aceleasi rezultate ca cele din cadrul cursului.

Liste ordonate (OL)

Am vazut cum putem folosi listele neordonate in cadrul paginilor web. Lista urmatoare pastreaza continutul celei de mai sus insa este o lista ordonata (ordered list). Sa vedem diferenta:
    Firma noastra va ofera urmatoarele servicii:
  1. printare
  2. printare
  3. indosariere
  4. xerox
  5. tehnoredactare
Listele ordonate se formeaza cu ajutorul tag-urilor <OL> si </OL>, denumirea acestora venind din limba engleza "ordered list" care inseamna lista ordonata. La fel ca si la listele neordonate, fiecare element trebuie introdus de tag-ul <LI>.

Iata codul pentru lista ordonata de mai sus:
<HTML>
<HEAD>
<TITLE>Liste ordonate</TITLE>
</HEAD>
<BODY>
<OL>Firma noastra va ofera urmatoarele servicii:
<LI>printare
<LI>laminare
<LI>indosariere
<LI>xerox
<LI>tehnoredactare</OL>
</BODY>
</HTML>

Salveaza pagina cu numele de liste4.html in directorul Pagini. Pentru a vedea cum ar trebui sa arate aceasta pagina: click aici

Ca si in cazul listelor neordonate, si la listele ordonate, atributul TYPE are o valoare implicita, asa cum am vazut in exemplul de mai sus: numerele. In loc de numere putem folosi si alte caractere. Pentru a folosi aceste caractere este de ajuns sa utilizam atributul TYPE cu valoarea potrivita.

Pentru a vedea rezultatele, inlocuieste linia a 6-a din codul HTML de mai sus cu una din urmatoarele linii de cod:
  1. pentru litere mari:
    <OL TYPE=A>Firma noastra va ofera urmatoarele servicii:

    Salveaza pagina cu numele de liste5.html in directorul Pagini. Vezi rezultatul: click aici

  2. pentru litere mici:
    <OL TYPE=a>Firma noastra va ofera urmatoarele servicii:

    Salveaza pagina cu numele de liste6.html in directorul Pagini. Vezi rezultatul: click aici

  3. pentru cifre romane mici:
    <OL TYPE=i>Firma noastra va ofera urmatoarele servicii:

    Salveaza pagina cu numele de liste7.html in directorul Pagini. Vezi rezultatul: click aici

  4. pentru cifre romane mari:
    <OL TYPE=I>Firma noastra va ofera urmatoarele servicii:

    Salveaza pagina cu numele de liste8.html in directorul Pagini. Vezi rezultatul: click aici
Pe langa atributul TYPE, pentru tag-ul <OL> mai putem folosi si atributul START. Acest atribut este folosit atunci cand vrem sa schimbam valoarea initiala, de exemplu daca vrem sa incepem de la 4, in cazul numerelor, sau de la D, in cazul literelor mari, etc. Forma generala a acestui atribut este START=n, unde n este un numar natural. Sa vedem un exemplu:
<HTML>
<HEAD>
<TITLE>Liste ordonate</TITLE>
</HEAD>
<BODY>
<OL TYPE=A START=4>In vacanta de vara am vizitat urmatoarele orase:
<LI>Roma
<LI>Viena
<LI>Londra
<LI>Paris
<LI>Praga
</OL>
</BODY>
</HTML>

Codul de mai sus va afisa in cadrul browser-ului urmatoarea lista ordonata: click aici

Liste de definitii (DL)

Pentru a citi continuarea lectiei trebuie sa fii membru eCursuri.ro

Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
« Crearea legaturilor in HTML Tabele in HTML »
32 comentarii
roeseby 31 august 2011, 11:53 1
frumoasa explicatia, pe intelesul nostru.
  6    Raspunde
Lucian.Iordache 02 septembrie 2011, 06:39 2
@roeseby: multumesc frumos, ma bucur ca iti place si ca iti este util acest curs
  4    Raspunde
vladbz21 26 mai 2012, 15:34 3
@Lucian.Iordache: am si eu o rugaminte pt tn Lucian.Iordache. Ajuta-ma si pe mine sa fac de la pct 8 de la exercitiu pana la final pt k am nevoie pt nota la scoala. ajuta-ma cat mai repede posibil...
  -1    Raspunde
Lucian.Iordache 26 mai 2012, 17:44 4
@vladbz21: Salut, nu am inteles exact ce anume te intereseaza.
  0    Raspunde
vladbz21 26 mai 2012, 22:33 5
@Lucian.Iordache: ajuta-ma te rog sa fak exervitiul de la punctul 7....pls
  0    Raspunde
Lucian.Iordache 26 mai 2012, 23:18 6
@vladbz21: Pai ai codurile cu tot ce trebuie. Da click pe linkurile click aici, apoi asa cum am spus si in curs, dupa ce ai deschis pagina, alege din meniul View, optiunea Page Source (in functie de browser pot sa difere denumirile). Poti da si copy paste la cod.
  -1    Raspunde
vladbz21 27 mai 2012, 10:01 7
@Lucian.Iordache: mersi mult lucian...raman dator.
  -1    Raspunde
Danyh 01 septembrie 2011, 17:39 8
Salut, am rescris si eu codul cu cele invatate pana aici la "probleme matematica" mi-a dat acelasi rezultat desi am folosit eticheta
    in loc de
      .
  -7    Raspunde
Danyh 01 septembrie 2011, 17:40 9
* UL in loc de OL
  -6    Raspunde
Lucian.Iordache 01 septembrie 2011, 23:01 10
@Danyh: Salut, da-mi pe email: contact@ecursuri.ro exemplul tau, sa vedem exact
  0    Raspunde
nemernic 12 septembrie 2011, 21:06 11
salut.am si eu o intrebare...cum fac sa am si eu ceva de genul http://www.probleme.ro sau orice altceva ca sa poata sa intre si alti ca mie imi apare asa:file://localhost/C:/Users/.....html oricum super tare cursul ;)
  -6    Raspunde
Lucian.Iordache 13 septembrie 2011, 03:21 12
@nemernic: Salut. Trebuie publicat undeva online (acum il ai fisierele respective doar pe calculatorul tau). Cel mai bine cauti pe net gazduire gratuita si prin intermediul unui admin vei putea sa publici paginile lucrate de tine.
  -5    Raspunde
nemernic 13 septembrie 2011, 18:58 13
ok.multumesc ;)
  -5    Raspunde
hookjohny 02 octombrie 2011, 18:10 14
Este un curs minunat, am ajuns pînă aici pas cu pas. Nici nu am ştiut că voi prinde atît de uşor limbajul HTML (la sigur .....pînă ce îl voi cunoaşte bine....va trebui să muncesc din greu).... mi-aţi aprins un foc în inimă să studiez acest compartiment - webdesigner - să nu fi dat de aşa explicaţii clare, nici nu ştiu dacă aş mai fi studiat aşa ceva.... Mulţumesc mult, tuturora care şi-au pus toată dragostea în explica cu atîta măiestrie cursul acesta.
  -4    Raspunde
Lucian.Iordache 15 octombrie 2011, 04:10 15
@hookjohny: Multumim si noi pentru cuvintele frumoase :) Ma bucur ca ti-a fost si iti este util acest curs. Asta a fost si scopul, sa ajute cat mai multi incepatori sa inteleaga limbajul HTML.
  -4    Raspunde
hookjohny 02 octombrie 2011, 18:12 16
Dacă aveţi posibilitatea dezvoltaţi cursul acesta şi mai departe ca să fie împărţit pe nivele, începător, mediu şi avansat.
  -6    Raspunde
Lucian.Iordache 15 octombrie 2011, 04:11 17
@hookjohny: Cred ca pe viitor vom incerca la sectiunea de tutoriale sa facem cateva legate de limbajul HTML.
  -3    Raspunde
ovidiub 01 noiembrie 2011, 01:13 18
am ajuns pana la "barem de notare", am facut primul rand de sub barem, si nu reusesc sa asez corect codul
    pentru a face acele patratele pline.
    Astept un raspuns, multumesc.
  -3    Raspunde
Lucian.Iordache 08 noiembrie 2011, 02:12 19
@ovidiub: Da-mi mai multe detalii Ovidiu. Ce anume nu reusesti? Ai pus codul exact ca in curs si nu apar patratele pline?
  -1    Raspunde
alinahodoroaba 02 noiembrie 2011, 09:05 20
ar fi indicata o asa tema la fiecare lectie!!! felicitari !!
  1    Raspunde
ovidiub 08 noiembrie 2011, 10:29 21
referitor la exercitiul 2; am ajuns la "barem de notare", am facut punctul 1 si cerintele le-am asezat una sub alta, dar nu imi apar patratelele pline.
multumesc
  -5    Raspunde
Xsky 16 decembrie 2011, 16:21 22
In legatura cu exercitiul 2 nu inteleg cei acel semn de intrebare in romb si cum se noteaza..:D
  0    Raspunde
danylux 05 mai 2012, 01:39 23
Este foarte bun cursul ma ajuta enorm doar ca nu inteleg termeniiastai care se uzeaza aici , eu as dori sa imi explicatimai pe inteles cum fac cum creez saitul daca eu il am pe bucati salvat adica mai multe pagini html multumesc astept raspuns
  1    Raspunde
Misterhup 17 octombrie 2012, 10:17 24
Este super cursul! Invat foarte usor si repede limbajul HTML, desi am doar 13 ani. Imi este foarte folositor si pun pariu ca va ramane la fel si in viitor.
  0    Raspunde
alex.florin.96 13 februarie 2013, 13:09 25
am reusit sa fac problema mate,dar la ultima parte cand este "1.punctul a:3p - 1p",in loc sa imi apara de la capatul randului imi apare ca la <ul> putin mai distant si liniile de la primele randuri imi apar distante fatza de scris,puteti sa ma ajutati si pe mine?
  -1    Raspunde
oxygam81 14 septembrie 2013, 18:44 26
am facut exercitiul cu formula, dar in loc de imagine masinei, imi posteaza o imagine cu x, semn ca nu imi recunoaste imaginea. cum se poate remedia?
  -1    Raspunde
dejeme 23 ianuarie 2014, 16:02 27
Am reusit problema dar nu din prima. Unele lucruri le-am scris din minte dar la altele a trebuit sa mai trag putin cu ochiul prin lectiile precedente. In orice caz, foarte de ajutor cursul iar exercitiile au fost superbe. Intr-adevar simti ca ai muncit nu doar ai invatat lectia.
Multumesc Lucian.Iordache si echipei eCursuri. Sunteti buni ;)
  0    Raspunde
NicoNicoleta 31 mai 2014, 20:24 28
Cum pot schimba culoarea la lista.. adica sa nu apara negru, ca nu reusesc. Sa fie patratelele pline, albe, de exemplu.
  0    Raspunde
Misterio92 10 iulie 2014, 21:09 29
Foarte bun acest curs,l-am parcurs pas cu pas si pot spune ca mi-am insusit niste cunostiinte,mai ramane doar sa continui; multumesc mult si spor :)
  0    Raspunde
dan.grig 19 august 2014, 19:18 30
munca depusa trebuie apreciata la adevarata ei valoare. ma inclin ... Nu am mai scris cod de vreo 12 ani dar intr-o dupa amiaza am reusit chiar sa vad despre ce este vorba in HTML. O singura observatie, un cod un pic mai "ordonat" cred ca ar face si mai usoara intelegerea.
  0    Raspunde
LupStudent 01 decembrie 2014, 07:30 31
Superb! multumim frumos.
  0    Raspunde
pasika 24 februarie 2015, 12:20 32
felicitari ptr acest curs!ptr,noi incepatorii este un mare castig, ptr. voi cei care ati facut posibil acest studiu motivatia sa continuati cu orice din domeniu .Sunteti adevarati profesori!!!
  0    Raspunde
Adauga comentariu

Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro

Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
Publicitate
Cuprinsul cursului
1. Structura unui document HTML
2. Despre atribute HTML
3. Despre culori HTML
4. Formatarea textului in HTML
5. Adaugarea imaginilor in paginile HTML
6. Crearea legaturilor in HTML
7. Crearea listelor in HTML
8. Tabele in HTML
9. Folosirea cadrelor intr-o pagina web
10. Crearea formularelor folosind HTML
11. Realizarea unui site in HTML
Cursuri noi Top cursuri
Curs de legislatie rutiera
7 lectii online
Excel prin exemple
10 lectii online
Windows XP prin exemple
10 lectii online
Infiintarea unei firme
6 lectii online
Gramatica limbii engleze
27 lectii online
Introducere in e-Business
25 lectii online
Curs de Machiaj
13 lectii online
Curs de Fashion
17 lectii online
Curs de Barman
10 lectii online
HTML pe intelesul tuturor
11 lectii online
cursuri
Copyright © 2005-2011 - eCursuri.ro - toate drepturile rezervate - E-mail: contact@ecursuri.ro Cursuri și certificări GDPR