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

3. Alegerea editorului HTML
4. Machetarea paginii
5. Elementele HTML
• Sectiunea HEAD
• Sectiunea BODY
6. Apleturi JAVA
2. Optimizarea paginii web
3. Publicarea pe internet a paginii web