You are on page 1of 22

Universiteti 

Aleksander Moisiu Durres
Fakulteti i Teknologjise se Informacionit

Lenda: Programim Web 1
Tema: Listat. 

Pedagogu: Eda Tabaku


QELLIMI I LEKSIONIT
• Në këtë leksion studentët njihen me listat dhe tipet e listave.
HTML paraqet tre tipe listash: të renditura, të parenditura dhe
përcaktuese.

• Studentët duhet të jenë në gjendje të ndërtojnë të tre tipet e


listave si edhe ndërthurjen e listave të sipërpërmendura.

• HTML lejon vendosjen e imazheve në mënyrë që faqja të duket


më tërheqëse dhe profesionale. Gjatë kësaj pjese të leksionit
studentët duhet të dinë të vendosin një imazh në një Web page,
të përcaktojnë formatin dhe rezolucionin e duhur të imazhit.
Permbajta leksionit
• 1. Listat e renditura (ordered list).

• 2. Listat e parenditura (unordered list).

• 3. Listat përcaktuese (definition list).

• 4. Listat e ndërthuara.

• Imazhet ne Html
Cfarë janë listat ?
• Listat janë mjete që përdoren për të grupuar elementë të ngjashëm, që
japin informacion të së njëjtës kategorie.

• Njihen tre lloje listash:

1. Listat e renditura (ordered list).

2. Listat e parenditura (unordered list).

3. Listat përcaktuese (definition list).


Listat e renditura
(ordered list)
• Një listë quhet listë e renditur kur çdo element i saj është i
numëruar. Përdoret një listë e renditur atëherë kur rendi ose
prioriteti i elementëve është i rëndësishëm. Një listë e renditur ka
përpara saj një numër ose një gërmë. Lista e renditur fillon me tagun
(ordered list). Elementët e listës përdorin tagun (list). Çdo element i
listës vendoset midis tagut hapës dhe tagut mbyllës.

• Për të përcaktuar një listë të renditur ndiqen këto hapa:

1. Një listë e renditur fillon me tagun <ol>

2. Të gjithë elementët e listës fillojnë me tagun <li>

3. Të gjithë elementët e listës mbarojne me tagun </li>

4. Mbyllja e listës kryhet duke përdorur tagun </ol>


Struktura e përgjithshme
e një liste të renditur
është:
Sintaksa
• Shembull:

<html>

<body>

<ol>

<p>Fakultetet e UAMD</p>

<li>Fakulteti FB</li>
Outputi
<li>Fakulteti FSP</li>

<li>Fakulteti FE</li>

<li>Fakulteti FTI</li>

<li>Fakulteti FSHPJ</li>

</ol>

</body>
Atributet qe mund te
shoqerojne OL (1)
• Atributi type ­ përcakton stilin e numërimit të listës.

• Sintaksa type = “vlera”, ku vlera mund te jete: a, A, 1, I,I


etj.
Shembull
<html> • Outputi:
<body>
<ol type="a">
<p>Akronim i fjales HTML
eshte: </p>
<li>Hyper text Markup
Lang.</li>
<li>High text Multy Lang.</li>
<li>Hello text Made Lang.</li>
</ol>
</body>
</html> Detyre: Testoni perdorimin e atributit type duke i
dhene vlera te tjera.
Atributet që mund të
shoqërojnë OL (2)
• Atributi start ­ perdoret per te treguar fillimin e numerimit te elementeve te
listes. Shoqeron atributin type, përdor gjithmonë një vlerë numerike si vlere.

• Sintaksa:

Start = value

Shembull:

<html>

<body>

<ol type="i" start=2>

<p>Lista e lendeve qe zhvilloj diten e marte</p>

<li>Programim Web.1 </li>

<li>Anglisht</li>

<li>Baze te dhenash</li>

</ol>

</body>

</html>
Atributet që mund të
shoqerojnë OL (3)
• Atributi reversed – perdoret në rast se kërkohet që lista të jetë në
rendin zbritës përdoret reversed.

• Shembull
<html>
<body>
<h1>ol reversed </h1>
<ol reversed>
<li> Kafe </li>
<li> Caj </li>
<li> Qumesht </li>
</ol>
<p><strong>Note:</strong> The reversed attribute of the ol tag is
not supported in Edge prior version 79.</p>
</body>
</html>
Listat e parenditura
(unordered list)
• Një listë quhet listë e parenditur kur çdo element i saj nuk
përdor përpara një numër ose një gërmë. Elementët e listës së
parenditur nuk kanë prioritet në renditjen e tyre. Një listë e
parenditur ka përpara saj një simbol. Lista e parenditur fillon
me tagun <ul> (unordered list). Elementët e listës përdorin
tagun <li>(list). Çdo element i listës vendoset midis tagut hapës
<li> dhe tagut mbyllës </li>

• Për të përcaktuar një listë të parenditur ndiqen këto hapa:

1. Një listë e parenditur fillon me tagun <ul> .

2. Të gjithë elementët e listës fillojnë me tagun <li>.

3. Mbyllja e listës kryhet duke përdorur tagun </ul> .


Struktura e përgjithshme e
një liste të pa renditur është:
• Shembull: • Sintaksa
<html>
<body>
<ul>
<p>Fakultetet e UAMD</p>
<li>Fakulteti FB</li>
<li>Fakulteti FSP</li>
<li>Fakulteti FE</li>
<li>Fakulteti FTI</li>
<li>Fakulteti FSHPJ</li>
</ul>
</body>
</html>
Atributet që mund të
shoqerojnë UL (1)
• Atributi type.

• Sintaksa: type = value


Shembull
<html>
<body>
<h1>Lista e lendeve te semestrit te
dyte</h1>
<ul type="square">
<li>Matematike</li>
<li>Programim Web </li>
<li>Programim Java</li>
<li> Anglisht</li>
</ul>
</body>
</html>
Listat përcaktuese (definition
list)
Një listë përcaktuese përdoret për të treguar termat dhe përkufizimet e tyre. 
Pra, janë lista të përbëra nga grupi i termave dhe përkufizimi i tyre, përcaktojnë
terminologjinë. Një listë përcaktuese fillon me tagun  <dl>
(definition list). Termat e listës përdorin tagun  <dt> (definition term). Përcaktimi
i përkufizimit të termit përdor tagun <dd> (definition list definition).

Për të përcaktuar një listë përcaktuese ndiqen këto hapa:

1. Një listë përcaktuese fillon me tagun  <dl>
2. Të gjithë termat e listës fillojnë me tagun <dt>
3. Përcaktimi i përkufizimit të termave fillon me tagun <dd>
4. Mbyllja e listës kryhet duke përdorur tagun </dl>
Struktura e përgjithshme e
një liste përcaktuese është:
• Shembull:

<html>

<body>

<h1>Permbajta e lendes Programim Web nga l1­l4</h1>

<dl>

<dt>Leksioni 1</dt>

<dd>Hyrje ne HTML. Bazat e HTML. Struktura e pergjithshme e dokumenteve HTML.</dd>

<dt>Leksioni 2</dt>

<dd>Teksi (Fontet, paragrafet, bold, italic, line breaks, horizontal line etj.). Linket. </dd>

<dt>Leksioni 3</dt>

<dd>Listat</dd>

<dt>Leksioni 4 </dt>

<dd>Tabelat.</dd>

</dl>

</body>

</html>
Listat e ndërthurura
• Shembull
• Listat e ndërthurura janë <html>
ato lista të cilat janë <body>
<h2>Liste e nderthurur / Orari</h2>
koombinim i listave të <ol type="1">
<li>E Hene</li>
renditura, të parenditura <ul>
dhe përcaktuese. <li>Programim Web</li>
<li>Matematike </li>
<li>Anglisht</li>
</ul>
<li>E Marte</li>
<ul>
<li>Baze te dhenash</li>
<li>Programim ne Java</li>
</ul>
<li>E merkure</li>
<ul>
<li>Rrjeta</li>
<li>Hyrje ne Programim </li>
</ul>
<li>E Enjte </li>
<ul>
<li>Pushim</li>
</ul>
<li>E Premte </li>
<ul>
<li>Programim ne C++</li>
</ul>
</ol>
</body>
</html>
Imazhet ne Html
• Nje Image ne Html percaktohet nepermjet tagut <img>

• Sintaksa:

<img src = “url” alt= “emri qe i japim imazhit” width =“ nr pixelave”


height= “ nr pixelave”>

Ku src (burimi ose rruga për tek fajla), alt (teksti alternativ), width
dhe height (përmasat të figurës) janë atribute.

• Shembull

<img src = “html.jpg” alt= “logo e web­it” width =“100” height=


“200”>
Shembull
<html>
<body>
<img src ="uamd.jpg" alt= "logo e Uamd"
width ="200" height= "200">
<ol>
<p>Fakultetet e UAMD</p>
<li>Fakulteti FB</li>
<li>Fakulteti FSP</li>
<li>Fakulteti FE</li>
<li>Fakulteti FTI</li>
<li>Fakulteti FSHPJ</li>
</ol>
</body>
</html>
Detyre
• Ndertoni 4 ushtrime ne html, ku te ilustroni perdorimin e tipeve te
ndryshme te listave, perdorini fontet per te stilizuar elementet e
listes.
PYETJE
Fund

Falemiderit

Email: e.tabaku@hotmail.com

You might also like