miercuri, 12 octombrie 2011

Activitatea nr.5: 17.10 - 21.10

Tema nr.3: HTML – elemente avansate

Unitatea de invatare:
Instrumente de lucru pentru crearea site-urilor Web

Tipul lectiei: Dobandire de noi cunostinte

Notiuni generale

Limbajul HTML le permite utilizatorilor sa foloseasca diverse mecanisme pentru prezentarea informatiilor sub forma listelor.
Listele reprezinta succesiuni de elemente, fiecare element fiind evidentiat printr-un numar sau printr-un marcaj, avand rolul de a atrage atentia asupra unor idei din text. Fiecare lista poate contine unul sau mai multe elemente.
        In functie de elementele continute, listele sunt de trei tipuri:
  • liste ordonate
  • liste neordonate
  • liste de definitii

Listele ordonate

Intr-o lista ordonata elementele sunt numerotate automat de browser. Tag-ul ce marcheaza inceputul unei liste ordonate este <OL>. Folosirea tag-ului de inchidere </OL> este obligatorie.
Elementele listei sunt marcate de tag-ul <LI>. Folosirea tag-ului de inchidere </LI> este optionala.

Fie urmatorul cod HTML:
<OL>
<LI>primul element</LI>
<LI>al doilea element</LI>
<LI>al treilea element</LI>
</OL>
avand ca rezultat afisarea listei in aceasta forma:
1.    primul element
2.    al doilea element
3.    al treilea element
Atributele specifice acestui element sunt:
Atribut
Valoare
Descriere
start
numar sau litera
Precizeaza valoarea cu care va incepe numerotarea.
type
A
a
I
i
1
Sunt folosite simboluri alfabetice majuscule
Sunt folosite simboluri alfabetice minuscule
Sunt folosite simboluri numerice romane majuscule
Sunt folosite simboluri numerice romane minuscule
Sunt folosite simboluri numerice arabe

Listele neordonate

Intr-o lista neordonata elementele sunt marcate prin simboluri similare cu Bullets din Microsoft Word, simbolul implicit fiind ● “disc”. Tag-ul ce marcheaza inceputul unei liste ordonate este <UL>. Folosirea tag-ului de inchidere </UL> este obligatorie.
La fel ca si la listele ordonate, elementele listei sunt marcate de tag-ul <LI>.
Fie urmatorul cod HTML:<UL>
<LI>primul element</LI>
<LI>al doilea element</LI>
<LI>al treilea element</LI>
</UL>
având ca rezultat afisarea listei in aceasta forma:
  • primul element
  • al doilea element
  • al treilea element
Atributele specifice acestui element sunt:
Atribut
Valoare
Descriere
type
disc
square
circle
Sunt folosite simboluri de tip disc
Sunt folosite simboluri de tip patrat
Sunt folosite simboluri de tip cerc

Listele de definitii

Listele de definitii sunt putin diferite de celelalte doua tipuri, intrucat fiecare termen al listei se compune din doua elemente: Termenul Definitiei si Descrierea Definitiei.
Tag-ul ce marcheaza inceputul unei liste de definitii este <DL>. Folosirea tag-ului de inchidere </DL> este obligatorie.
Tag-ul ce marcheaza termenul definitiei este <DT>. Folosirea tag-ului de inchidere </DT> este optionala.
Tag-ul ce marcheaza descrierea definitiei este <DD>. Folosirea tag-ului de inchidere </DD> este optionala.

Fie urmatorul cod HTML:
<DL>
<DT>HTML</DT>
<DD>Hyper Text Markup Language</DD>
<DT>WWW</DT>
<DD>World Wide Web!</DD>
</DL>
avand ca rezultat afisarea listei in aceasta forma:
HTML
Hyper Text Markup Language
WWW
World Wide Web!
        Dupa cum se poate observa, descrierea definitiei este aliniata mai interior, tocmai pentru a sublinia caracterul relatiei de subordonarea existent fata de termenul definitiei.

Listele imbricate

Uneori este necesar sa folosim anumite tipuri de liste în interiorul altora. Impreuna, acestea formeaza listele imbricate. In astfel de cazuri, lista interioara nu mai trebuie sa fie delimitata de tag-ul <LI>.

Fie urmatorul cod HTML:
<OL type="I">
          <LI>Introducere
          <OL TYPE="1">
                   <LI>Cuvant înainte
                   <LI>Notiuni generale
          </OL>
          <LI>Realizarea unei pagini web
          <OL TYPE="1" START="3">
                   <LI>Alegerea editorului HTML
                   <LI>Machetarea paginii
                   <LI>Elementele HTML
                   <UL TYPE="circle">
                             <LI>Sectiunea HEAD
                             <LI>Sectiunea BODY
                   </UL>
                   <LI>Apleturi JAVA
          </OL>
          <LI>Optimizarea paginii web
          <LI>Publicarea pe internet a paginii web
</OL>
avand ca rezultat afisarea listei în aceasta forma:
  1. Introducere
    1. Cuvant înainte
    2. Notiuni generale
  2. Realizarea unei pagini web
    1. Alegerea editorului HTML
    2. Machetarea paginii
    3. Elementele HTML
      • Sectiunea HEAD
      • Sectiunea BODY
    4. Apleturi JAVA
  1. Optimizarea paginii web
  2. Publicarea pe internet a paginii web

13 comentarii:

  1. cum utilizam atributele specifice listelor?(type-disk,square,circle)?

    RăspundețiȘtergere
  2. ai mai sus cum sa ulilizezi atributele secifice listelor

    RăspundețiȘtergere
  3. @applet:Un applet reprezinta un program Java
    ce gestioneaza o suprafata de afisare
    ce poate fi inclusa ıntr-o pagina Web.

    RăspundețiȘtergere
  4. Buna seara! Are ceva daca nu sunt scrise primele lectii in ordine?

    RăspundețiȘtergere
  5. Lectia cu liste este interesanta si usurel de retinut

    RăspundețiȘtergere
  6. Denisa la intrebarea cum utilizam atributele specifice listelor?(type-disk,square,circle)? este cred clar aceste valori se dau bulinelor ca si forma:

    .Sectiunea HEAD
    .Sectiunea BODY

    RăspundețiȘtergere
  7. Cred ca exemplele date de dna profesoara sunt cat se poate de clare.

    RăspundețiȘtergere
  8. Da sunt foarte clare numa ca trb sa le si aplicam ...

    RăspundețiȘtergere
  9. O lectie frumoasa si exemple destul de clare.

    RăspundețiȘtergere
  10. acum regret ca nu am invatat in clasele 9-10

    RăspundețiȘtergere