Crearea Listelor in HTML

5
9/14/13 Crearea listelor in HTML www.ecursuri.ro/cursuri-online/crearea-listelor-in-html-print.html 1/5 Crearea listelor in HTML 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)

description

ok

Transcript of Crearea Listelor in HTML

  • 9/14/13 Crearea listelor in HTML

    www.ecursuri.ro/cursuri-online/crearea-listelor-in-html-print.html 1/5

    Crearea listelor in HTML

    In aceasta lectie vei invata cum poti folosi listele in pagina ta web. Listele pe care le poti crea cu ajutorul limbajuluiHTML 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:printareprintareindosarierexeroxtehnoredactare

    Pentru a putea face o lista neordonata trebuie sa folosim tag-urile si (denumirea acestor tag-uri vinede la "unordered list" care inseamna in limba engleza lista neordonata). Fiecare element al listei trebuie introdusde tag-ul . Ca sa intelegi mai bine sa vedem impreuna cum arata codul HTML pentru lista de mai sus:

    Liste neordonate

    Firma noastra va ofera urmatoarele servicii:printarelaminareindosarierexeroxtehnoredactare

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

    Cu ajutorul atributului TYPE, putem schimba cercul plin din fata fiecarui element. Acesta este folosit in modimplicit atunci cand folosim o lista neordonata. Astfel, prin atribuirea unei valori atributului TYPE, vom putea faceca 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:

    Firma noastra va ofera urmatoarele servicii:

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

    pentru patrate pline:

    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 aceleasirezultate ca cele din cadrul cursului.

    Liste ordonate (OL)

  • 9/14/13 Crearea listelor in HTML

    www.ecursuri.ro/cursuri-online/crearea-listelor-in-html-print.html 2/5

    Am vazut cum putem folosi listele neordonate in cadrul paginilor web. Lista urmatoare pastreaza continutul celeide mai sus insa este o lista ordonata (ordered list). Sa vedem diferenta:

    Firma noastra va ofera urmatoarele servicii:1. printare2. printare3. indosariere4. xerox5. tehnoredactare

    Listele ordonate se formeaza cu ajutorul tag-urilor si , denumirea acestora venind din limba engleza"ordered list" care inseamna lista ordonata. La fel ca si la listele neordonate, fiecare element trebuie introdus detag-ul .

    Iata codul pentru lista ordonata de mai sus:

    Liste ordonate

    Firma noastra va ofera urmatoarele servicii:printarelaminareindosarierexeroxtehnoredactare

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

    Ca si in cazul listelor neordonate, si la listele ordonate, atributul TYPE are o valoare implicita, asa cum am vazut inexemplul de mai sus: numerele. In loc de numere putem folosi si alte caractere. Pentru a folosi aceste caractereeste 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:

    A. pentru litere mari:

    Firma noastra va ofera urmatoarele servicii:

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

    b. pentru litere mici:

    Firma noastra va ofera urmatoarele servicii:

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

    iii. pentru cifre romane mici:

    Firma noastra va ofera urmatoarele servicii:

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

    IV. pentru cifre romane mari:

  • 9/14/13 Crearea listelor in HTML

    www.ecursuri.ro/cursuri-online/crearea-listelor-in-html-print.html 3/5

    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 mai putem folosi si atributul START. Acest atribut este folosit atuncicand vrem sa schimbam valoarea initiala, de exemplu daca vrem sa incepem de la 4, in cazul numerelor, sau de laD, in cazul literelor mari, etc. Forma generala a acestui atribut este START=n, unde n este un numar natural. Savedem un exemplu:

    Liste ordonate

    In vacanta de vara am vizitat urmatoarele orase:RomaVienaLondraParisPraga

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

    Liste de definitii (DL)Pentru a forma liste de definitii trebuie sa folosesti tag-urile si (denumirea lor vine de la "definition list"= lista de definitii).

    Iata cum arata o lista de definitii:

    Teorema lui PitagoraIn orice triunghi dreptunghic suma patratelor catetelor este egala cu patratul ipotenuzei.

    Teorema cateteiIn orice triunghi dreptunghic patratul catetei este egal cu produsul dintre ipotenuza si proiectia catetei peipotenuza.

    Teorema inaltimiiIn orice triunghi dreptunghic patratul inaltimii este egal cu produsul proiectiilor celor doua catete peipotenuza.

    Fiecare element al unei liste de definitii va trebui introdus de tag-ul (Definition Term), iar apoi fiecare definitieva fi precedata de tag-ul (Definition Definition).

    Codul listei de mai sus este urmatorul:

    Liste definitii

    Teorema lui PitagoraIn orice triunghi dreptunghic suma patratelor catetelor este egala cu patratul ipotenuzei.Teorema cateteiIn orice triunghi dreptunghic patratul catetei este egal cu produsul dintre ipotenuza si proiectia catetei peipotenuza.Teorema inaltimii

  • 9/14/13 Crearea listelor in HTML

    www.ecursuri.ro/cursuri-online/crearea-listelor-in-html-print.html 4/5

    In orice triunghi dreptunghic patratul inaltimii este egal cu produsul proiectiilor celor doua catete peipotenuza.

    Salveaza pagina cu numele de liste10.html in folderul Pagini. Vezi cum arata aceasta pagina: click aici

    Personalizarea listelorDaca vrei ca in loc de simbolurile folosite in mod prestabilit pentru elementele listelor sa fie afisate propriile imagini,in loc de tag-ul cu care introducem fiecare element al listei vom adauga imaginea dorita cu ajutorul tag-ului.

    Pentru a intelege mai bine sa luam un exemplu. Salveaza mai intai imaginea de mai jos in directorul Poze cunumele de sageata.gif (click pe imagine si din pagina care se deschide click dreapta pe imagine, iar apoialege din meniul care apare optiunea Save Image As):

    Acum sa scriem codul unei pagini web ce va contine o lista cu persoanele din cadrul departamentului Contabilitateal unei firme:

    Lista personal

    Lista persoanelor care sunt angajate in cadrul departamentului CONTABILITATE:Gheorghe MariaProdan EugeniaMatac MarianNeacsu ElenaIonescu VioletaManea CristinaIonita LauraSerbanescu MihaelaCraciun DorinaNeagu Emil

    Salveaza pagina in directorul Pagini cu numele de listapersonal.html.

    Daca totul a iesit asa cum trebuie pagina ta ar trebui sa arate astfel: click aici

    Exercitii1. Scrie codul HTML al unei pagini web care sa contina urmatoarea lista:

    Michael SchumacherJenson ButtonSebastian VettelFernando AlonsoLewis HamiltonMark WebberRubens BarrichelloFelipe MassaVitaly Petrov

  • 9/14/13 Crearea listelor in HTML

    www.ecursuri.ro/cursuri-online/crearea-listelor-in-html-print.html 5/5

    Nico Rosberg

    In loc de semnul din fata fiecarui pilot foloseste urmatoarea imagine:

    Salveaza imaginea cu numele f1.jpg, in directorul Poze (click pe imagine si din pagina care se deschide clickdreapta pe imagine, iar apoi alege din meniul care apare optiunea Save Image As).

    Salveaza pagina HTML in directorul Pagini, cu numele formula1.html. Pagina ta ar trebui sa arate astfel: clickaici

    2. Folosind notiunile invatate pana acum, incearca sa scrii codul urmatoarei pagini HTML, pe care salveaz-o cunumele exmate.html: click aici

    Pentru a te verifica, dupa ce ai deschis pagina, alege din meniul View, optiunea Page Source (in functie debrowser pot sa difere denumirile)