Dizenjimi I Faqes Nepermjet Tabelave PDF

Universiteti
Aleksandër Moisiu Durrës
Fakulteti i Teknologjisë së Informacionit
Lënda: Programim Web 1
Tema: Dizenjimi i Faqes Nëpërmjet Tabelave
Pedagogu: Eda Tabaku

QELLIMI I LEKSIONIT
• Një mënyrë për të dizenjuar një faqe Web është përdorimi i

tabelave. Gjatë këtij leksioni studentët njihen me Layoutet dhe si të
dizenjojnë nëpërmjet tabelave.
• Ushtrime.
Dizenjimi i faqes nëpërmjet
tabelave
• Tabelat në website janë përdorur për dy arsye :
1. Për të organizuar dhe shfaqur informacionin në formën e një tabele, kur një gjë
e tillë është e nevojshme.
2. Për të krijuar layoutet e një faqe duke përdorur tabelat e fshehura.
• Përdorimi i tabelave për të ndarë një faqe në seksione të ndryshme është një mjet
shumë i fuqishëm. Kryesishtë në lidhje me layoutet, tabelat përdoren për të kryer
funksionet e mëposhtme:
• Për të ndarë faqen në seksione të ndryshme
• Për të krijuar menu, zakonishtë përdoret një ngjyrë për pjesën header dhe një
tjetër për rreshtin tjetër ku gjenden linket.
• Për të shtuar fusha formash interactive. P.sh opsionin e kërkimit. Krijohen
header të cilët ngakohen më shpejt.
• Pozicionim më i lehtë i imazheve të cilat janë ndarë në copa të vogla.
• Një menyrë më e lehtë për ta shfaqur tekstin në kolona
Page layout te thjeshte
Figura 1 Figura 2
Rregullat qe ndiqen per te
krijuar layoutin e nje faqe
web
• Perdorni width="100%" per tu siguruar qe nje tabele do te ze gjithe
hapesiren horizontale.
• Perdorni style="width:xx%" per te gjitha qelizat ne nje rresht te

selektuar ne menyre qe gjeresia e kolonave te ndjek nje dizajn
proporcional.
• Perdorni atributet border="0", cellpadding="0", dhe cellspacing="0" per

tu siguruar qe skica juaj eshte e padukshme.
• Perdorni valign="top" ne menyre qe permbajtja ne qelizat e nje rreshti

te tabeles te vendoset ne skajin e siperm te rreshtit.
• Perdorni tabela te nderfutura per te dizenjuar nje layout.

Rregullat qe ndiqen per te
krijuar layoutin e nje faqe
web
• Sheno fillimin e pjeseve te ndryshme duke perfshire
komente ne HTML si,
< !– Top Banner Begin >
< !– Top Banner End>
< !– Content Begin >
< !– Content End >

Shembull, Layout i Faqes Html
<html >
<head>
<title>HTML Table Layout</title>
</head>
<body >
<table style="width:100%; border=0; font:14px Arial;">
<tr>
<td colspan="2" style="padding:10px 20px; background‐color:blue;">
<h1 style="font‐size:24px; color:red"> Website i Lendes Programim Web </h1>
</td>
</tr>
<tr style="height:725px;">
<td style="width:20%; padding:20px; background‐color:grey; vertical‐align: top;">
<ul style="list‐style:none; padding:0px; line‐height:24px;">
<li><a href="#" style="color:white;">Home</a></li>
<li><a href="#" style="color:white;">About</a></li>
<li><a href="#" style="color:white;">Contact</a></li>
</ul>
</td>
<td style="padding:20px; background‐color:white; vertical‐align:top;">
<h2>Miresevini ne website e Lendes Programim Web 1</h2>
<p>Ketu do te mesojme si te krijojme nje faqe web...</p>
</td>
</tr>
<tr>
<td colspan="2" style="padding:5px; background‐color:blue; text‐align:center;">
<p style="font‐size:14px; color:white">copyright © Stundetet e Uamd 2020</p>
</td>
</tr>
</table>
</body>
</html>
<html >
Shembull 2
<head>
<title>HTML Table Layout 2</title>
</head>
<body >
<table style="width:100%; border=0; cellpadding=0 cellspacing=0;">
<tr>
<td >
<h1 style="fontsize:34px; color:red"> Emri i Kompanise, Logo, Emri i Faqes </h1>
</td>
</tr>
<tr style="height:30px;">
<td style="width:100%; backgroundcolor:yellow; ">
</td>
</tr>
<td style="width:100%; padding:20px; backgroundcolor:grey; verticalalign: center; textalign: right; fontsize:24px">
<a href="#" style="color:white;"> Home </a>
<a href="#" style="color:white;"> Rreth Nesh </a>
<a href="#" style="color:white;"> Kontakt </a>
</td>
</tr>
<td style="width:100%; backgroundcolor:WHITE; ">
<pre>
<h3> PERMBLEDHJE DHE REZULTATET E TE NXENIT </h3>

Kursi eshte i ndare ne dy seksione, sipas dy grupeve, perkatesisht 7 dhe 8 javoresh.
Ne grupin e pare eshte menduar te merren njohuri rreth HTML. HTML (Hyper Text Markup Language)
eshte gjuha e programimit per te ndertuar nje faqe Web ne internet.
Grupi i dyte ka njohuri per CSS dhe JS si nje baze e domosdoshme per zhvillimin e internetit. CSS (Cascading Style Sheet)
eshte nje mekanizem qe perdoret per vendosjen e stileve ne nje dokument Web, siç jane: fontet, ngjyrat, etj.
JS (JavaScript) eshte nje gjuhe e shkruar, interpretuar dhe perdorur kryesisht ne Web per te bere faqen e internetit interaktive dhe dinamike.
<h3>OBJEKTIVAT:</h3>
Objektivat e kursit perfshijne njohjen me HTML, CSS dhe JS.
Studentet do te jene ne gjendje te dizenjojne nje faqe Web, duke perfshire te gjithe elementet baze te HTML (paragrafet, titujt, listat, tabelat,
linket, imazhet, format etj) si dhe stilet e elementeve. Gjithashtu studentet do te jene ne gjendje te kuptojne dhe te aplikojne konceptet themelore
te programimit ne JS per te shtuar funksionalitete ne faqen e internetit.
<h3>KONCEPTET THEMELORE: </h3>
1. HTML HyperText Markup Language
2. CSS Cascading Style Sheets
3. JS JavaScript
</pre>
</td>
</tr>
<tr>
<td style="width:100%; background
color:yellow; ">
</td>
</tr>
<tr>
<td style="padding:5px; background
color:blue; textalign:center;">
<p style="fontsize:14px;
color:white">copyright &copy; Stundetet e Uamd
2020</p>
</td>
</tr>
</table>
</body>
Ndërfutja e tabelave
• Një tabelë mund të vendoset brenda një tabele tjerër.
Gjithçka që duhet të bëhet është të mbyllet një tabelë në
një element td të një tabele tjetër.
header
m per mba1 jtja1
en 1
u
per mba2 jtja2
2
Tabela 1
per mba3 jtja3

3
footer
Tabela 2
Shembull Nested Table
• Te ndertohet layout si ne figure:
<html >
<head>
<title>HTML Nested Table </title>
</head>
<body >
<table style="width:100%; border:0; cellpadding:0 cellspacing:0;">
<tr>
<td colspan="2" style="width:100%; backgroundcolor:grey; textalign:center; height:50px">
<h3> header </h3>
</td>
</tr>
<tr>
<td style="width:20%; backgroundcolor:blue; height:900px; verticalalign:top">
<h3> menu </h3>
</td >
<td style="width:80%; backgroundcolor:white; height:900px">
<table border="0" style="width:100%; cellpadding:0 cellspacing:0; verticalalign:top" >
<tr style="height:300px; verticalalign:top">
<td style="backgroundcolor:yellow;"> per1 </td>
<td style="backgroundcolor:green;"> mba1 </td>
<td style="backgroundcolor:orange;"> jtja1 </td>
</tr>
<td style="backgroundcolor:maroonon;"> per2 </td>
<td style="backgroundcolor:violet;"> mba2 </td>
<td style="backgroundcolor:aqua;"> jtja2 </td>
</tr>
<td style="backgroundcolor:pink;"> per3 </td>
<td style="backgroundcolor:teal;"> mba3 </td>
<td style="backgroundcolor:brown;"> jtja3 </td>
</tr>
</table>
</td>
</tr>
<tr >
<h3> footer </h3>
</td>
</tr>
</table>
</body>
</html>
Shembull 3
• Te ndertohet layout si me poshte:
<html >
<head>
<title>HTML Nested Table </title>
</head>
<body margin="0">
<table style="width:80%; border:0; cellpadding:0 cellspacing:0;" align="center">
<tr>
<td colspan="2" style="width:80%; backgroundcolor:grey; textalign:center; height:50px ">
<h3> DEGA SISTEME INFORMACIONI </h3>
</td>
</tr>
<tr>
<td style="width:20%; backgroundcolor:blue; height:900px; verticalalign:top">
<h3> menu </h3>
<ul style="liststyle:none; padding:0px; lineheight:24px;">
<li><a href="Table Layout nested table 2.html" style="color:white;">Home</a></li>
<li><a href="about.html" style="color:white;">About</a></li>
<li><a href="#" style="color:white;">Contact</a></li>
</ul>
</td >
<td style="width:60%; backgroundcolor:white; verticalalign:top; height:900px; textalign:justify">
<h2> SISTEME INFORMACIONI </h2>
Dega Sisteme Informacioni (SI) mbulon një fushë të re, me perspektivë dhe në zhvillim jo vetëm në Shqipëri por dhe në botë.
Studentët e SI përgatiten me dijen e duhur për ndërtimin dhe implementimin e zgjidhjeve efektive teknologjike për përmbushjen
e nevojave të ndryshme për informacion dhe për mbështetje në vendimarrje në aspekte të ndryshme menaxheriale, organizacion
si dhe në atë sociale.
Misioni i këtij programi studimi është përgatitja e të diplomuarve me njohurinë dhe aftësitë e nevojshme për praktika të suksess
në fushën e Sistemeve të Informacionit.
Ky mision lidhet direkt me artin dhe shkencën e menaxhimi të Informacionit në të gjitha aplikimet e mundshme.
Studentët mësojnë se si të procesojnë nevojën për informacion, se si të dizenjojnë Sistemet e duhura të Informacionit dhe se si të
vlerësojnë ato aktualet.
Trendi i edukimit sot po fokusohet me shpejtësi drejt programeve që mësojnë njohuritë teknike të kombinuara me njohuri mbi fu
e organizatave.
Rëndësia e Teknologjisë dhe Sistemeve të Informacionit në organizata, si dhe nevoja aktuale për profesionistë të aftë dhe të mirë
këtë fushë është pika lidhëse e kurrikulës së degës për ti prezantuar studentët me njohuritë e plota dhe të nevojshme mbi Sistem
Informacionit.
</td>
</tr>
<tr >
<h3> footer </h3>
</td>
</tr>
</table>
</body>
</html>
Detyra • Ndertoni layoutin e meposhtem:
PYETJE
Fund
Falemiderit
Email: e.tabaku@hotmail.com

Dizenjimi I Faqes Nepermjet Tabelave PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dizenjimi I Faqes Nepermjet Tabelave PDF

Uploaded by

Copyright:

Available Formats

Universiteti

Pedagogu: Eda Tabaku

• Një mënyrë për të dizenjuar një faqe Web është përdorimi i

• Perdorni style="width:xx%" per te gjitha qelizat ne nje rresht te

• Perdorni atributet border="0", cellpadding="0", dhe cellspacing="0" per

• Perdorni valign="top" ne menyre qe permbajtja ne qelizat e nje rreshti

• Perdorni tabela te nderfutura per te dizenjuar nje layout.

< !– Top Banner Begin >

< !– Top Banner End>

< !– Content Begin >

< !– Content End >

<h3> PERMBLEDHJE DHE REZULTATET E TE NXENIT </h3>

per mba3 jtja3

You might also like

Dizenjimi I Faqes Nepermjet Tabelave PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dizenjimi I Faqes Nepermjet Tabelave PDF

Uploaded by

Copyright:

Available Formats

Universiteti

Pedagogu: Eda Tabaku

• Një mënyrë për të dizenjuar një faqe Web është përdorimi i

• Perdorni style="width:xx%" per te gjitha qelizat ne nje rresht te

• Perdorni atributet border="0", cellpadding="0", dhe cellspacing="0" per

• Perdorni valign="top" ne menyre qe permbajtja ne qelizat e nje rreshti

• Perdorni tabela te nderfutura per te dizenjuar nje layout.

< !– Top Banner Begin ­­>

< !– Top Banner End­­>

< !– Content Begin ­­>

< !– Content End ­­>

<h3> PERMBLEDHJE DHE REZULTATET E TE NXENIT </h3>

per mba3 jtja3

You might also like

< !– Top Banner Begin >

< !– Top Banner End>

< !– Content Begin >

< !– Content End >