Lectia 7- Crearea listelor in HTML

Liste neordonate(UL)
 
Inainte de a vorbii despre listele neordonate, sa vedem cum arata una:

Site-ul nostru va ofera:

  • Articole de promovare
  • Tutoriale
  • Stiri
  • Critici
  • Servicii web (advertoriale, linkuri, inscrieri in directoare)

Pentru a crea o lista neordonata, vom folosi perechea de taguri <ul> si </ul>. Denumirea acestor taguri vine de la unordoned list care se traduce prin lista neordonata. Fiecare element al listei trebuie introdus dupa tagul <li>. Ca sa intelegi mai bine, sa vedem cum arata codul HTML pentru lista de mai sus:

<html>
<head>
<title>Liste neordonate</title>
</head>
<body>
<ul>Site-ul nostru va ofera:
<li>Articole de promovare
<li>Tutoriale
<li>Stiri
<li>Critici
<li>Servicii web (advertoriale, linkuri, inscrieri in directoare)
</ul>
</body>
</html>
Salveaza pagina cu numele liste1.html in folderul 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 al listei. Acesta este folosit in mod implicit atunci cand folosim o lista dneordonata. Astfel prin atribuirea unei valori atributului TYPE, vom face ca elementele listei sa fie precedate de un patrat sau un cerc gol.
Pentru a vedea rezultatele, inlocuieste linia a 5-a din codul HTML de mai sus cu una din urmatoarele linii de cod: 
  • Pentru cercuri goale

<ul type=”circle”>Site-ul nostru va ofera:

Salveaza pagina cu numele de liste2.html in folderul Pagini. Pentru a vedea cum ar trebui sa arate pagina click aici

  • Pentru patrate pline

<ul type=”square”>Site-ul nostru va ofera:

Salveaza pagina cu numele de liste3.html in folderul Pagini. Pentru a vedea cum ar trebui sa arate pagina click aici

NU UITA: FOLOSIND COPY/PASTE NU VEI INVATA HTML. DECI PENTRU A INVATA HTML, SCRIE TU CODUL DE LA FIECARE EXEMPLU CU PUNCT CU GHILIMELE SI CU VIRGULA, APOI EXERSEAZA SI IL VEI INVATA!

Liste ordonate (OL)

Am vazut cum putem folosi listele neordonate in continutul unei pagini web. Lista urmatoare pastreaza continutul listei de mai sus insa, este o lista ordonata (ordered list). Sa vedem diferenta:

  1. Articole de promovare
  2. Tutoriale
  3. Stiri
  4. Critici
  5. Servicii web (advertoriale, linkuri, inscrieri in directoare)

Listele ordonate se formeaza cu ajutorul perechii de tag-uri <OL> si </OL>. Denumirea acestora vine din limba engleza ordered list  ceea ce inseamna lista ordonata. La fel ca si la listele neordonate, fiecare element va fi introdus de tag-ul <LI>

Iata codul pentru lista ordonata de mai sus:

<html>
<head>
<title>Liste ordonate</title>
</head>
<body>
<ol>Site-ul nostru va ofera:
<li>Articole de promovare
<li>Tutoriale
<li>Stiri
<li>Critici
<li>Servicii web (advertoriale, linkuri, inscrieri in directoare)
</ol>
</body>
</html>
Salveaza pagina cu numele de liste4.html in folderul 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 cifre arabe (1,2,3..). In loc de numere putem folosi si alte caractere Litere mari (A,B,C,D) Litere mici (a,b,c,d) cifre romane mari (I,II,II,IV) si cifre romane mici (i, ii,iii,iv). Pentru a folosi aceste caractere este de ajuns sa utilizam atributul TYPE cu paloarea potrivita.
Pentru a vedea rezultatele, inlocuieste linia a 6-a a codului HTML de mai sus cu una dintre urmatoarele linii:
A. Pentru litere mari:
<ol type=”A”>Site-ul nostru va ofera:
Salveaza pagina cu numele de liste5.html in folderul Pagini. Vezi rezultatul: click aici 
a. Pentru litere mici:
<ol type=”a”>Site-ul nostru va ofera:
Salveaza pagina cu numele de liste6.html in folderul Pagini. Vezi rezultatul: click aici 
i. Pentru cifre romane mici
<ol type=”i”>Site-ul nostru va ofera:
Salveaza pagina cu numele de liste7.html in folderul Pagini. Vezi rezultatul: click aici 
I. Pentru cifre romane mari:
<ol type=”I”>Site-ul nostru va ofera:
Salveaza pagina cu numele de liste8.html in folderul Pagini. Vezi rezultatul: click aici 
 
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 <LI> cu care introducem fiecare element al listei vom adauga imaginea dorita cu ajutorul tag-ului <IMG>.

Pentru a intelege mai bine sa luam un exemplu. Salveaza mai intai imaginea de mai jos in directorul Poze cu numele de sageata.gif (click dreapta pe imagine, din meniu alegi save image as:)

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

<HTML>
<HEAD>
<TITLE>Lista personal</TITLE>
</HEAD>
<BODY>
<UL>Lista persoanelor care sunt angajate in 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”>Neacsu 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”>Ionita Laura
<BR><BR><IMG SRC=”../Poze/sageata.gif”>Serbanescu Mihaela
<BR><BR><IMG SRC=”../Poze/sageata.gif”>Craciun Dorina
<BR><BR><IMG SRC=”../Poze/sageata.gif”>Neagu Emil
</UL>
</BODY>
</HTML>
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
 
 

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

  • Michael Schumacher
  • Jenson Button
  • Sebastian Vettel
  • Fernando Alonso
  • Lewis Hamilton
  • Mark Webber
  • Rubens Barrichello
  • Felipe Massa
  • Vitaly Petrov
  • Nico Rosberg

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

Salveaza imaginea cu numele f1.jpg in folderul Poze.

Creaza codul paginii si salveaza pagina cu numele formula1.html. Daca ai creat codul corect, pagina ar trebui sa arate astfel: click aici

 

Leave a Reply

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *