GraSu Community

Înregistrează-te !
E rapid și ușor !
Scapi de reclame si vizualizezi tot conținutul forumului
Postezi mesajele tale
Primesti ajutor din partea comunității
(peste 1200 membri !!)

LINEUP ASII # Girls


Jucator 1
Jucator 2
Jucator 3
Jucator 4
Jucator 5
ASII # Girls
Adversar # Detalii
vs DW * #      
vs DsWW #      
vs gxGw #      
ASII # Girls
Adversar # Rezultat
vs R0k #      3-16
vs uSp #      16-6
vs neXt!LadiEs #      15-16
GraSu.LaLeagane.Ro

Redirecte GraSu


Lectia 6 ( Crearea listelor in html)

In jos

Lectia 6 ( Crearea listelor in html)

Mesaj Scris de Big.A la data de Sam Aug 01, 2009 11:07 pm

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
    si
. (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
  • . Ca sa intelegi mai bine sa vedem impreuna cum arata codul HTML pentru lista de mai sus.

    Cod:
     <HTML>
    <HEAD>
    <TITLE>Liste neordonate</TITLE>
    </HEAD>
    <BODY>
    <UL>Firma noastră vă oferă următoarele servicii:
    <LI>printare
    <LI>laminare
    <LI>îndosariere
    <LI>xerox
    <LI>tehnoredactare
    </UL>
    </BODY>
    </HTML>

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

    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:
    Cod:
    <UL TYPE=circle> Firma noastră vă oferă următoarele servicii:

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

    pentru patrate pline:
    Cod:
    <UL TYPE=square>Firma noastră vă oferă următoarele servicii:
    Salveaza pagina cu numele de liste3.html in directorul Pagini.

    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
      si
    , 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
  • .

    Iata codul pentru lista ordonata de mai sus:
    Cod:
    <HTML>
    <HEAD>
    <TITLE>Liste ordonate</TITLE>
    </HEAD>
    <BODY>
    <OL>Firma noastră vă oferă următoarele servicii:
    <LI>printare
    <LI>laminare
    <LI>îndosariere
    <LI>xerox
    <LI>tehnoredactare
    </OL>
    </BODY>
    </HTML>

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

    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:

    pentru litere mari:
    Cod:
    <OL TYPE=A>Firma noastră vă oferă următoarele servicii:

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

    pentru litere mici:
    Cod:
    <OL TYPE=a>Firma noastră vă oferă următoarele servicii:

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

    pentru cifre romane mici:
    Cod:
    <OL TYPE=i>Firma noastră vă oferă următoarele servicii:

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

    pentru cifre romane mari:
    Cod:
    <OL TYPE=I>Firma noastră vă oferă următoarele servicii:

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

    Pe langa atributul TYPE, pentru tag-ul
      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:
      Cod:
      <HTML>
      <HEAD>
      <TITLE>Liste ordonate</TITLE>
      </HEAD>
      <BODY>
      <OL TYPE=A START=4>În vacanţa de vară am vizitat următoarele oraşe:
      <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 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 Pitagora
      În orice triunghi dreptunghic suma pătratelor catetelor este egală cu pătratul ipotenuzei.
      Teorema catetei
      În orice triunghi dreptunghic pătratul catetei este egal cu produsul dintre ipotenuză şi proiecţia catetei pe ipotenuză.
      Teorema înălţimii
      În orice triunghi dreptunghic pătratul înălţimii este egal cu produsul proiecţiilor celor două catete pe ipotenuză.

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

      Codul listei de mai sus este urmatorul:
      Cod:
      <HTML>
      <HEAD>
      <TITLE>Liste definitii</TITLE>
      </HEAD>
      <BODY>
      <DL>
      <DT><B>Teorema lui Pitagora</B>
      <DD>În orice triunghi dreptunghic suma pătratelor catetelor este egală cu pătratul ipotenuzei.
      <DT><B>Teorema catetei</B>
      <DD>În orice triunghi dreptunghic pătratul catetei este egal cu produsul dintre ipotenuză şi proiecţia catetei pe ipotenuză.
      <DT><B>Teorema înălţimii</B>
      <DD>În orice triunghi dreptunghic pătratul înălţimii este egal cu produsul proiecţiilor celor două catete pe ipotenuză.
      </DL>
      </BODY>
      </HTML>
      Personalizarea listelor
      Daca vrei ca in loc de simbolurile folosite in mod prestabilit pentru elementele listelor sa fie afisate propriile imagini, in loc de tag-ul
    1. 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 cu numele de sageata.gif.
      Acum sa scriem codul unei pagini web ce va contine o lista cu persoanele din cadrul departamentului Contabilitate al unei firme:
      Cod:
      <HTML>
      <HEAD>
      <TITLE>Lista personal</TITLE>
      </HEAD>
      <BODY>
      <UL>Lista persoanelor care sunt angajate în cadrul departamentului CONTABILITATE:
      <BR><BR><IMG SRC="../Poze/sageata.gif">Gheorghe Maria
      <BR><BR><IMG SRC="../Poze/sageata.gif">Prodan Eugenia
      <BR><BR><IMG SRC="../Poze/sageata.gif">Matac Marian
      <BR><BR><IMG SRC="../Poze/sageata.gif">Neacşu Elena
      <BR><BR><IMG SRC="../Poze/sageata.gif">Ionescu Violeta
      <BR><BR><IMG SRC="../Poze/sageata.gif">Manea Cristina
      <BR><BR><IMG SRC="../Poze/sageata.gif">Ioniţă Laura
      <BR><BR><IMG SRC="../Poze/sageata.gif">Şerbănescu Mihaela
      <BR><BR><IMG SRC="../Poze/sageata.gif">Crăciun Dorina
      <BR><BR><IMG SRC="../Poze/sageata.gif">Neagu Emil
      </UL>
      </BODY>
      </HTML>
      Salveaza pagina in directorul Pagini cu numele de listapersonal.html.
  • avatar
    Big.A
    ♥ FAN ASII ♥


    Sus In jos

    Sus


     
    Permisiunile acestui forum:
    Nu puteti raspunde la subiectele acestui forum