SlideShare a Scribd company logo
1 of 150
Gjimnazi “ Gjon Buzuku “
Prizren
Ismail Kuksi
GJUHA PROGRAMUESE
HTML+CSS
Prizren, 2017
- 2 -
PARATHËNIE
Skripta është shkruar si një përmbledhje e ligjëratave të mbajtura nga lënda e
Teknologjisë së Informacionit dhe e Komunikimit për klasat e 12-ta në Gjimnazin “ Gjon
Buzuku “ në Prizren, gjithashtu është i përshtatur planprogramit mësimor të përcaktuar nga
MASHT-i për nxënësit e klasës së XII nga lënda TIK-12. Skripta gjithashtu, është dedikuar
për nxënësit si material(literaturë) për të plotësuar ligjratat nga kjo lëndë.
Në këtë skriptë përfshihet të mësuarit e HTML-së dhe CSS-së, si dhe ushtrime
praktike për dizajnimin e ueb faqes ose të ueb sajtit.
Skripta është dedikuar për përdoruesit fillestarët dhe të nivelit mesatar në dizajnimin e
ueb sajtit, si dhe për ata që kurrë nuk kanë hapur një editor për dizajnimin e një ueb faqes,
gjithashtu skripta mund të jetë e përshtatshme edhe për përdoruesit të cilët nuk merren me ueb
dizajn, por ndonjëherë kanë nevojë të prezentojnë ndonjë përmbajtje reklamuese në Internet
përmes HTML ose CSS-së.
Ne këtë skriptë lexuesi do të mësojë etiketat si dhe atributet e tyre në
dizajnimin e strukturës dhe përmbajtjes të ueb faqes me anë të gjuhës programuese HTML
dhe CSS, si dhe menaxhimin e vetë strukturës të ueb faqes.
Pas kalimit e gjithë përmbajtjes së skriptës përdoruesi do të ketë njohuri për të
kuptuar dhe për të bërë vetë një ueb faqe ose një ueb sajt.
Autori
Msc. Ismail Kuksi
Për korrespondencë:
e-mail: ismailkuksi@gmail.com
- 3 -
PËRMBAJTJA
1. HYRJE NE GJUHËN PROGRAMUESE HTML .....................................- 5 -
1.1 KRIJIMI NJË DOKUMENTI NË HTML...................................................................- 6 -
1.2 SINTAKSA E ELEMENTEVE NË HTML ................................................................- 8 -
1.3 STRUKTURA E NJË PROGRAMI NË HTML .........................................................- 9 -
1.4 SHKRIMI I HTML PROGRAMIT ...........................................................................- 11 -
1.5 ETIKETAT (TAG-S) NË GJUHËN PROGRAMUESE HTML...............................- 13 -
1.6 KRYETITULLI I UEB FAQES ..............................................................................- 14 -
1.7 NGJYROSJA E PRAPAVIJËS SË UEB FAQES.....................................................- 15 -
1.8 HTML STILET.........................................................................................................- 19 -
1.8.1 HTML Text Color.................................................................................................- 19 -
1.8.2 HTML Text Fonts .................................................................................................- 20 -
1.8.3 HTML Text Size ....................................................................................................- 20 -
1.8.4 HTML Text Alignment.........................................................................................- 21 -
1.9 KODI BURIMOR I PROGRAMIT TË SHKRUAR NË HTML ..............................- 22 -
2. INSERTIMI DHE FORMATIZIMI I TEKSTIT NË UEB FAQE............- 24 -
2.1 SHTIMI I PARAGRAFIT DHE THYERJA E TEKSTIT .......................................- 24 -
2.2 RRAFSHIMI I TEKSTIT– ATRIBUTI ALIGN.......................................................- 26 -
2.3 LLOJI I FONTIT NË TEKST DHE ATRIBUTET E TIJ .........................................- 26 -
2.4 STILET E TEKSTIT ................................................................................................- 29 -
2.5 TEKSTET SI CITATE NË HTML..........................................................................- 32 -
3. INSERTIMI I VIJËS HORIZONTALE NË UEB FAQE .......................- 35 -
4. TEKSTE TË LISTUARA.....................................................................- 37 -
4.1 LISTA TË PA NUMËRUARA .................................................................................- 37 -
4.2 LISTA TË NUMËRUARA .......................................................................................- 38 -
4.3 NDARJET BRENDA LISTAVE ..............................................................................- 40 -
4.4 LISTA TË DEFINUAR.............................................................................................- 41 -
5. TABELAT NË UEB FAQE .................................................................- 44 -
5.1 KRIJIMI I TABELËS...............................................................................................- 44 -
5.2 ATRIBUTET E TABELAVE....................................................................................- 46 -
6. INSERTIMI I LINK-UT NË UEB FAQE.............................................- 52 -
6.3 LINK-U PËR KRIJIMIN E NJË BOOKMARK-U NË NJË UEB FAQE ................- 54 -
6.4 LINK-U PËR NJË E-MAIL ADRESE NË UEB FAQE ...........................................- 54 -
6.6 LINKU PËR TË HAPUR NJË FOTOGRAFI NË UEB FAQE................................- 56 -
7. INSERTIMI I FOTOGRAFISË NË UEB FAQE....................................- 58 -
8. INSERTIMI I MULTIMEDIAVE NË UEB FAQE ................................- 62 -
8.1 INSERTIMI I NJË VIDEO FAJLI ............................................................................- 62 -
- 4 -
8.2 INSERTIMI I NJË AUDIO FAJLI............................................................................- 63 -
9. KRIJIMI I KORNIZAVE (FRAME) NË UEB FAQE ...........................- 69 -
10. KRIJIMI I FORMULARËVE (FORM) NË UEB FAQE......................- 74 -
11. PËRMBLEDHJE ...............................................................................- 84 -
12. HTML STILET – CSS........................................................................- 87 -
12.1 STRUKTURA DHE SINTAKSA E GJUHËS CSS...............................................- 89 -
12.2 SELEKTORËT DHE DEKLARATAT...................................................................- 90 -
12.3 LIDHJA E CSS STILIT NË HTML KOD .............................................................- 91 -
12.4 SELEKTORËT NË CSS.........................................................................................- 97 -
12.5 KOMENTET NË CSS ..........................................................................................- 102 -
12.6 PRAPAVIJA NË CSS (BACKGROUND) ..........................................................- 103 -
12.6.1 Shkurtimi i shënimit të karakeristikave të prapavijës –( background - shorthand
property)........................................................................................................................- 107 -
12.7 DIV dhe SPAN elementet në HTML dhe CSS ....................................................- 108 -
13. FORMATIMI I TEKSTIT NË CSS ...................................................- 110 -
13.1 NGJYRA E TEKSTIT...........................................................................................- 110 -
13.2 STILET E FONTIT NË CSS .................................................................................- 111 -
13.3 MADHËSIA E SHKRONJAVE TË FONTIT NË CSS ........................................- 112 -
13.4 PESHA DHE STILI I SHKRIMIT NË CSS.........................................................- 114 -
13.5 RRAFSHIMI I TEKSTIT, HAPËSIRA NË MES SHKRONJAVE DHE
RRESHTAVE, SHTYRJA DHE LARTËSIA E RRESHTAVE TË TEKSTI ..............- 116 -
13.6 SHKRONJAT E MËDHA DHE TË VOGLA NË CSS ........................................- 119 -
13.7 FORMA E SHKURTËR E DEKLARIMIT TË VETIVE(ATRIBUTEVE) TË
TEKSTIT ME VETËM NJË KOMANDË ....................................................................- 121 -
13.8 KUFIZIMI I PARAGRAFIT ME TEKST (BOX MODEL) NË CSS..................- 123 -
14. FORMATIMI I TEKSTEVE TË LISTUARA NË CSS.......................- 129 -
15. FORMATIMI I TABELAVE NË CSS...............................................- 133 -
16. FORMATIMI I LINKËVE NË CSS ..................................................- 135 -
17. FORMATIMI I FOTOGRAFISË NË CSS ........................................- 139 -
18. FORMATIMI I FORMULARIT(FORMS) NË CSS...........................- 141 -
LITERATURA.......................................................................................- 147 -
- 5 -
1. HYRJE NE GJUHËN PROGRAMUESEHTML
Gjatë njëzet viteve të fundit, ueb faqet në Internet janë bërë shumë të përhapur dhe
janë mediumet kryesor të komunikimit, së pari përmes kompjuterit personal, dhe pastaj edhe
nga telefonat mobil. Ndryshe nga mediat konvencionale, ueb faqet ofrojnë mundësinë e
publikimit të përmbajtjes për secilin përdorues, me një pagesë të papërfillshme ose me asnjë
shpenzim financiar.
HTML ( HyperText Markup Language ) është një gjuhë e thjeshtë programuese që
bazohet në kode për të përshkruar një ueb faqe. HTML përdoret për të krijuar dokumente me
strukturë HyperText. Një dokument HyperText përmban informacion që është i ndërlidhurn
me dokumente të tjera, duke na lejuar ne të kalojmë nga njëri dokument në tjetrin duke
shfrytëzuar të njëjtin aplikacion që po përdornim për të parë dokumentin fillestar.
Programi i shkruar në HTML është një ueb dokument(fajl) që ndryshe quhet Web
Page (ueb faqe), nëse janë më shumë ueb faqe të lidhura mes veti, quhet Web Site (uebsajt).
Programet(kodet) të shkruara me anë të gjuhës HTML paraqesin një standard për shfaqjen e
dokumenteve përmes një browseri (shfletuesi) në Internet.
Faqet HTML janë thjeshtë fajlla tekstuale të cilët përmbajnë udhëzime se si do të
shfaqet ueb faqja në shfletues të Internetit. Për përshkrimin e elementeve në ueb faqe
shfrytëzohen ETIKETA-t (ang. TAG-s). Grumbulli i këtyre HTML etiketave në dokumente
interpretohen dhe shfaqen nga shfletues (browser) të ndryshëm, si p.sh. Internet Explorer,
Google Chrom apo Firefox.
Një program i thjeshtë i shkruar me kodin HTML duket:
<!DOCTYPE html>
<html>
<body>
<h1>Programimi në HTML</h1>
<p>Hyper Text Markup Language</p>
</body>
</html>
Me zhvillimin e rrjetit të Internetit ka ardhë deri te rritja e përdorimit të Ueb Site-ve,
që ka shtyrë zhvillimin më të hovëshëm të dizajnimit të ueb faqeve. Këto ueb faqe janë të
lidhura në mes veti me tekste të quajtur – Hypertekst. Hipertekstet në të vërtet janë një
bashkësi e faqeve të përmbledhura në një databazë, të lidhur mes veti me vegëza të quajtur
- 6 -
Link ose Hyperlink, dhe të cilët janë të vendosura në çdo faqe të ueb dokumentit. Me
klikimin në këto linqe kalohet drejtëpërdrejtë në leximin e faqes përkatëse të lidhur me faqen
ku është linku.
HTML ueb faqet janë fajlla teksti të zakonshëm që mund të shkruhen në çfarëdo editor
teksti si psh, NotPad, WordPad, TextEdit etj. Dhe pastaj të ruhen me formatin ose
prapashtesën .html.
Në vend të këtyre editorëve të thjeshtë mund të përdorim edhe editorë vizual për
krijimin e ueb faqeve sikurse që janë: Macromedia Dreamweaver ose Microsoft
Frontpage. Editorët vizual të ueb faqeve quhen edhe WYSIWYG editor.
(What You See Is What You Get). Me WYSIWYG editorë nuk keni nevojë shumë të mësoni
HTML, por çdonjëri që dëshiron të merret seriozisht me ueb dizajn duhet patjetër të njohë
mirë gjuhën programuese HTML, sepse HTML është baza e çdo ueb faqeje dhe gjithçka fillon
prej saj.
Kur të përvetësoni bazat e gjuhës programuese HTML dhe CSS atëherë mund të
kaloni në mësimin e një gjuhe programuese më të lartë si p.sh. JavaScript ose PHP për
dizajnimin e ueb faqeve dinamike më të avancuara, që inkoroptohen në HTML.
1.1 KRIJIMI NJË DOKUMENTI NË HTML
Për krijimin e një ueb faqes, krejt çka na nevojitet praktikisht i kemi të instaluar në
kompjuter së bashku me Sistemin Operativ. Për të shkruar programin në HTML na duhet një
editor të thjeshtë teksti si psh. Notepad (PC) ose TextEdit (Mac). Për të
egzekutuar(interpretuar) programin e shkruar si tekst në Notepad na duhet një ueb
shfletues(Browser). Qëllimi i një ueb shfletuesi (të tilla siç janë Google Chrome, Internet
Explorer, Firefox, Safari dhe Opera) është për të lexuar HTML dokumentet dhe për të
shfaqur ose treguar ato si ueb faqe.
Google Chrome Internet Explorer Firefox Safari Opera
Shfletuesit nuk tregojnë HTML etiketat, por përdorin etiketat për t'u
treguar/shfaqur përmbajtjen e HTML dokumentit si ueb faqe për përdoruesit. Duhet të kemi
parasysh se shfletuesit të ndryshëm interpretojnë në mënyra të ndryshme HTML etiketat p.sh
dokumenti i shkruar në HTML si më lartë kur hapet me browser duket:
- 7 -
Nëse më parë nuk keni përdorur Notepad-in, atëherë atë mund të gjeni në menynë
(Start→Accessories→Notepad). Së fundi na duhet edhe një prej programeve për përpunimin
e grafikës si p.sh. CorelDraw dhe një prej programeve për përpunimin e fotografisë si p.sh
Photoshop për të na mundësuar të krijohen dhe të shikohen fajllat grafik dhe imazhet të cilat
do të vendosim në ueb prezantim.
HTML dokumentet siç thamë edhe më parë janë të përpiluar nga shumë elemente të
përshkruara me Etiketa (Tags) të cilët kontrollojnë çdo element-objekt që duket në ueb faqe.
Një etiketë në të vërtet është një komandë që tregon shfletuesit se çka të krijonë, si të krijon
dhe në çfarë mënyre të shfaqë elementin-objektin në shfletues (browser). Etiketat për kodim
në HTML zakonisht quhen - HTML etiketa.
o HTML etiketat si p.sh.etiketa <html> përbëhen nga fjala kyçe (emrat e etiketave) të
rrethuara me kllapa kënd ose simbole si ‘<‘ dhe ‘>‘,
o HTML etiketat sikurse që është etiketa <b> dhe </ b> shkruhen normalisht në çifte,
o Etiketa e parë në fillim të elementit është etiketa e fillimit (fillor), ndërsa etiketa e dytë
në fund të elementit është etiketë e përfundimit ose (fundor),
o Etiketa fundore është shkruar njejtë si etiketa fillore <etiketa> por me një vijë të
pjerrët / (back-slash) përpara etiketës si </etiketa>si psh.
o < emri i etiketës> përmbajtja e elementit-objektit </emri i etiketës>
HTML etiketat mund të shkruhen me shkronja të vogla ose të mëdha, kjo nuk
ka ndikim te komanda, por për të ruajtur esteticitetin nuk preferohet të shkruhen me shkronja
të përziera, zakonisht më së shpeshti praktikojmë që etiketat t’i shkruajmë me shkroja të vogla
gjatë gjithë dokumentit. Disa verzione e Gjuhës Programuese HTML që nga ditët e para të
Internetit janë:
- 8 -
1.2 SINTAKSA E ELEMENTEVE NË HTML
Për të qenë sa më i suksesshëm në shkrimin dhe përpilimin e një HTML dokumenti t’i
japim disa rregulla sintaksore dhe sematike të cilat duhet në mënyrë të përpiktë të përdorim,
për të mos pas probleme më vonë gjatë ekzekutimit të programit. Çdo ueb faqe përbëhet nga
shumë objekte ose elemente që përshkruhen me "HTML Etiketa" dhe "HTML Elemente". Një
HTML element përshkruhet në mes të etiketës fillore dhe asaj fundore, duke përfshirë edhe
vetë etiketën së bashku me atributet e tij. Një HTML element është definuar si p.sh:
<p> Ky është një paragraf </p>
Etiketat duhet të përmbahen këtyre rregullave:
o Një element në HTML fillon me një etiketë e hapjes në fillim të dokumentit.
o Një element në HTML përfundon me një etiketë të mbylljes në fund të dokumentit.
o Përmbajtja e çdo elementi është në mes të etiketës fillore dhe fundore.
o Disa prej elementeve në HTML kanë përmbajtje të zbrazët.
o Elementet e zbrazëta janë të mbyllura në etiketën e fillimit.
o Elementet në HTML etiketa mund të kenë edhe atributet e tyre.
o Atributet sigurojë informata shtesë në lidhje me një element.
o Atributet janë të vendosur gjithmonë në etiketën fillore.
o Atributet e etiketës shtohen me emër dhe vlerë.
o Vlerat e atributeve duhet të jenë gjithmonë të mbyllura me thonjëza.
o Thonjëzat e dyfishta janë më të zakonshme, por edhe thonjëzat e vetme janë të lejuara
gjithashtu.
o Komentet mund të futen në dokumentin HTML për ta bërë atë më të lexueshëm dhe të
kuptueshëm. Komentet janë të injoruar nga shfletuesët dhe nuk shfaqen në ueb faqe.
Atributet e HTML-së shfrytëzohen për zgjerimin e veprimit të etiketave. Kemi lloje të
ndryshme të atributeve:
Verzionet Viti
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013
- 9 -
o Class - atributet ose ID atributi
o Name - atributet
o Href - atributet
o Src - atributet
o Value - atributet
o Stil - atributet
o Align - atributet
o Valign - atributet
Çdo HTML dokument fillon me etiketën <html> e cila njofton shfletuesin që fajlli i
posa filluar për lexim është një HTML dokument, dhe si i tillë duhet të tregohet në shfletues.
Në fund të HTML dokumentit vendoset etiketa fundore </html> me të cilën përfundon
HTML dokumenti. Çdo etiketë për shtimin e një elementi në ueb dokument fillon me kodin
brenda shenjave < > (etiketa fillore), dhe mbaron me kodin e njëjtë brenda shenjave < > por
duke shtuar edhe vijën e pjerrët / përpara kodit brenda shenjave </ > (etiketa fundore). Disa
HTML elemente mund të shfaqin përmbajtjen me korrektësi edhe në qoftë se ju keni harruar
etketën fundorë si psh.
<p> Ky është një paragraf
Shembulli i më sipërm punon në shumë browser pa problem, sepse etiketa fundore
konsiderohet e nënkuptuar. Por çdo herë mos u mbështeteni në këtë, shumë HTML elemente
do të japin rezultate të papritura ose gabime në qoftë se ju harroni të mbydhni elementin me
etiketën fundore.
1.3 STRUKTURA E NJË PROGRAMI NË HTML
Në fillim të çdo dokumenti në HTML 5.0 vendoset një koment (deklaratë)
<!DOCTYPE>. Deklarata <!DOCTYPE> ndihmon shfletuesit për të shfaqur një ueb faqe në
mënyrë të saktë. Ka shumë lloje të dokumenteve në Internet, një shfletues mund të shfaq
100% në mënyrë korrekte një faqe e HTML-së dokumentit, nëse ajo e di llojin dhe versionin e
përdorur të HTML-së. Deklarata <! DOCTYPE> është mbështetur nga të gjithë shfletuesit
browser-ët kryesore si:
Etiketa <DOCTYPE!> nuk ka një etiketë fundor. Gjithashtu shkrimi i etiketës
<DOCTYPE!> ose <doctype!> nuk është e ndjeshme në shkronjat e vogla apo të mëdha.
Gjithmon shtoni deklarimin <!DOCTYPE> në HTML dokumente, ashtu që shfletuesi të di
- 10 -
se çfarë lloji të dokumentit e presin. Në HTML5 deklarimi shkruhet: <!DOCTYPE html>.
Çdo HTML dokument përbëhet prej dy pjese:
o ballina(ang. Head) dhe
o trupi (ang. Body),
Pjesa e ballinës së dokumentit fillon me etiketën <head> dhe mbaron me </head>,
ndërsa pjesa e trupit të dokumentit fillon me etiketën <body> dhe mbaron me </body>.
Tekstin që shkruani në mes të etiketave <head> dhe </head> tregohet në pjesën e sipërme të
HTML dokumentit, në dritaren e shfletuesit të juaj, dhe zakonisht shfrytëzohet për të dhënë
kryetitullin e uebsajtit që dizajnohet.
Brenda etiketave të hederit të dokumentit vendoset etiketa e titullit të dokumentit (ueb
faqes) në mes të etiketave: <title> dhe </title>. Titulli i dokumentit tregohet në shiritin e
titullit të dritares së shfletuesit. Etiketa <title> përcakton titullin e dokumentit dhe është e
nevojshme në të gjitha HTML / XHTML dokumentet. Etiketa<title>:
o përcakton një titull në shiritin e tiullit të browser-it (shfletuesit),
o siguron një titull për ueb faqen, kur ajo është shtuar në të preferuarat,
o tregon një titull për ueb faqe, në rezultatet e kërkimit te makina kërkuese.
Komentet mund të insertohen në HTML programe për të bërë ate më të lexueshëm dhe
më të kuptueshëm. Komenti nga ana e browserit nuk merret parasysh dhe nuk shfaqen në ueb
faqe. Komentet në HTML dokument shkruhen në këtë formë:
<! - - Komenti ... - - >
Rezultati pas hapjes në shfletues, duket:
- 11 -
Struktura themelore eueb faqes, përbëhet nga këto etiketa:
Etiketa Përshkrimi
<html>
</html>
Etiketa fillore dhe fundore e një ueb faqeje. E identifikon se dokumenti
përdorë HTML format.
<head>
</head>
Etiketat në mes të cilëve vendosen informatat në lidhje me ballinën e uebfaqes
gjegjësisht të uebsajtit
<title>
</title>
Etiketat në mes të cilëve vendoset titulli i fajllit HTML. Përmbajtja në mes
këtyre etiketave shihet te Title Bar-i të dritares së editorit.
<body>
</body>
Etiketat në mes të cilëve vendoset përmbajtja e dokumentit si psh. tekste,
tabela, grafikë, linçe etj.
Në strukturën e çdo dokumenti të shkruar në gjuhën HTML, etiketat kryesorë që
përkufizojnë atë duhet të renditur në këtë mënyrë:
<!DOCTYPE html>
<html>
<head>
<title>Këtu vendosim titullin e Ueb faqes</title>
</head>
<body>Këtu vendosim çdo gjë që duhet të shihet në ueb faqe </body>
</html>
Shkrimi i kodit për HTML dokument bëhet në editorin Notpad ose TextEdit.
1.4 SHKRIMI I HTML PROGRAMIT
Për shkrimin e programit në HTML rekomandohet tekst editori Notepadnë (PC) ose
TextEditnë (Mac). Por HTML mund të shkruhet edhe me një editor profesional si p.sh:
o Adobe Dreamweaver
o Microsoft Expression Ueb
o CoffeeCup HTML Editor etj.
Rruga më e lehtë për të mësuar gjuhën HTML është duke përdorur një editor të thjesht
teksti. Për të parë se si duket kjo në një ueb dokument të marrim një shembull konkretë të
- 12 -
shkruar në editor të tekstit NotePad. Para se të startoni së pari krijoni një follder për ushtrime
me emrin p.sh. Ushtrimet_praktike në këtë mënyrë:
1. Klikoni me tastin e djathtë në butonin Start të shiritit Taskbar në Desktop,
2. Klikoni në menyn e paraqitur te opsioni Explorer,
3. Në panelin e paraqitur zgjedhe diskun ku dëshiron të vendos follderin në fjalë, psh. My
Documents,
4. Pastaj zgjedhe opsionin New → Folder,
5. Kur krijohet follderi i ri emërtoni follderin me emrin Ushtrime_praktike, si në foto.
Tani ju keni një follder ku do të ruani ushtrimet e juaja praktike në krijimin e
ueb dokumentit dhe elementet e saj. Për të filluar së shkruari të një program në HTML hapim
editorin e tekstit NotPad. Kur të hapet editori i tekstit NotePad, fillojmë të shkruajmë
programin si në vijim:
<!DOCTYPE html>
<html>
<head>
<title>prova 1</title>
</head>
<body>Mësimi i gjuhës HTML </body>
</html>
Pastaj këtë fajll i ruajmë me formatin HTML, me emrin prova dhe me prapashtesë .html ose
.htm si në shembullin e më poshtëm:
- 13 -
Tani edhe emri i fajllit ndëron në prova.html si më poshtë nëfotografi:
Dhe pastaj këtë fajll i hapim me shfletuesin Internet Explorer, me emrin prova 1.html, dhe
ueb faqja e krijuar do të duket:
ose me një shfletues tjetër Google Chrom:
Mos u shqetësoni nëse në shembuj e përdorni etiketat që ju nuk e keni mësuar. Ju do të
mësoni rreth tyre në kapitujt e ardhshëm.!
1.5 ETIKETAT (TAG-S) NË GJUHËN PROGRAMUESE HTML
HTML dokumentet përbëhen prej shumë etiketave dhe tekstit të shkruar brenda tyre.
Forma e dukjes së tekstit në ueb dokument varet nga shkrimi i saktë i etiketave. Etiketat mund
të shkruhen me shkronja të mëdha <BODY>, të vogla <body>, të nxirë <body>, të pjerrët
<body>, ose të përzier <BoDy>, varet nga stili i përdoruesit, por gjithnjë preferohet në një
dokument të përdoret një stil i njëjtë, dhe zakonisht me shkronja të vogla të shtypit gjatë
gjithë kodit të programit në HTML. Çdo etiketë siç kemi përmendë edhe më lartë përbëhet
nga etiketa fillore dhe etiketa fundore si psh.
< b>Tungjatjeta unë jam Agimi </b>
↑ ↑
- 14 -
etiketa fillore etiketa fundore
Mënyra e etiketimit të elementeve mund të ketë dy forma të kodimit. Më së miri mund
të vërejmë në shembullin vijues:
1. Sot është <b>dita</b> e parë e mësimit, si rezultatë do të duket:
1. Sot është dita e parë e mësimit.
2. Sot është <b>dita<b>e parë e mësimit, si rezultatë do të duket:
2. Sot është dita e parë e mësimit
Etiketa për të nxirë vetëm fjalën ‘dita’ te fjalia e parë është e shkruar saktë, ndërsa
etiketa për të njëjtin qëllim te fjalia e dytë është shkruar gabim, ku teksti edhe pas fjalës ‘dita’
ka vazhduar të jetë i nxirë. Po mirë ku është gabimi?
Gabimi është se kemi harruar të mbyllim etiketën fundore <b> me shenjën ‘/ ’, pra
</b>. Gjithnjë duhet pasur kujdes gjatë shkrimit të etiketave mos të harrojmë ndonjë shenjë të
kodeve.
Teksti që shkruajmë brenda etiketave mund të jetë në çfarëdo gjatësie dhe me çfarëdo
lloje të shkrimit. Në dritaren e shfletuesit teksti thyhet varësisht nga gjerësia e dritares, duke
lëvizur skajin e dritares majtas (thyhet rreshti i tekstit) ose djathtas (hapet rreshti i tekstit) në
shfletues, si në shembullin e më poshtëm - prova 2.htm.
Ose kur zvogëlohet gjerësia e dritares së shfletues-it :
1.6 KRYETITULLI I UEB FAQES
Çdo Ueb faqe duhet të ketë së paku një kryetitull i cili dallohet nga teksti vijues për
nga madhësia, lloji dhe ngjyra e shkronjave. Titujt janë të rëndësishme në dizajnimin e një
ueb faqes. Makinat kërkuese në Internet përdorin titujt për indeksimin e strukturës së
- 15 -
përmbajtjeve të faqeve në ueb. Vetë përdoruesi mund të gjejë(hapë) ueb faqet nga titujt e tyre,
prandej është e rëndësishme që të përdorin titujt për të treguar strukturën e dokumentit.
Kryetitulli (ang. Headers) në ueb faqe koordinohet sipas madhësisë së karaktereve me vlera
prej ( h1 – h6 ). Etiketa për caktimin e madhësisë së kryetitullit jepet në këtë formë:
<hn> Kryetitulli <hn> ku n merr vlera prej (1 – 6)
Etiketa <h1> definon titullin shumë të rëndësishëm, etiketa <h6> definon titullin më pak të
rëndësishëm. Teksti në mes të <hn> dhe </ hn> shfaqet si një kryetitull në atë faqe. Në tabelën
e më poshtme mund të shohim këto madhësi te titujve:
Titulli i insertuar zakonisht është i rrafshuar nga ana e majtë e faqes. Nëse dëshirojmë
të ndryshojmë rrafshimin e titullit, në qendër, majtas ose në anën e djathtë të faqes atëherë
përdorim etiketat shtesë fillore <center>, <left> ose <right> dhe pas kryetitullit i shtojmë
etiketat fundore </center>, </left> ose </right> si psh.
<h1><left> informatika </left></h1>
<h3><right> informatika </right></h3>
<h6><center> informatika </center></h6>
1.7 NGJYROSJA E PRAPAVIJËS SË UEB FAQES
Nga shembulli i mëparshëm të ueb faqes, vërejmë se prapavija e tekstit është e bardhë
dhe teksti i zi. Duke pas parasysh se te ueb faqet prapavija (backgraund-i) dhe tekstet kanë
ngjyra të ndryshme, atëherë për të bërë këtë duhet të ndryshojmë disa atribute te etiketat
- 16 -
<body>. Atributet vehen në etiketën fillestare dhe shërbejnë për të përshkruar më detalisht
etiketën e dhënë. Për shembull nëse dëshirojmë të ndryshojmë prapavijën e faqes në ngjyrë të
verdhë, atëherë brenda etiketës <body>i shtojmë:
<body bgcolor=” yellow”>
Se si përdorim në program shihet nga shembulli vijues-prova 3.html:
Rezultati pas hapjes me shfletues, duket:
Siç po shihet se ngjyra e prapavijës po ndryshon me vënjen e atributit bgcolor në
etiketën <body>. Pas çdo atributi vendosim shenjën e barazimit ( = ) e cila na mundëson
vënien e vlerave të atributit, vlera e atributit nëse është tekst gjithnjë vihet brenda thonjëzave.
Ngjyrat e prapavijës mund të definohen në dy mënyra me tekst (yellow) ose me numra
heksadecimal (#ffff00) të cilat i kemi në tabela të krijuara, për çdo ngjyrë. Një atribut tjetër i
etiketës <body>mund të jetë edhe ngjyra e tekstit. Atëherë atributin e ngjyrës së tekstit
vendosim në këtë mënyrë te etiketa <body>.
<body bgcolor=” yellow” text=”blue”>
Se si përdorim në program shihet nga shembulli vijues-prova 4.html:
- 17 -
Rezultati pas hapjes me shfletues,, duket:
Në prapavijën e ueb faqes mund të vendosim edhe fotografi nëse më parë atë kemi të
ruajtur në kompjuterin tonë, në follderin ku i kemi edhe ueb faqen. Atributi në etiket në këtë
rast do të jetë si background. Duhet të kemi kujdes mos të ngatërrojmë me atributin bgcolor.
Etiketa për vënien e fotografisë në prapavijën e ueb faqës do të duket:
<body background ="file:///C:/Users/ismail/Desktop/natyra.jpg">
ose nëse fotografinë i kemi ruajtur në follderin e njëjtë me ueb dokumentin atëherë etiketa së
bashku me atributet e gjerësisë dhe të lartësisë, duket si vijon:
<body background="natyra.jpg" width="100" hight="30">
Se si përdorim në program shihet nga shembulli vijues- prova 5.html:
Rezultati pas hapjes me shfletues, duket si vijon:
- 18 -
Në tabelën e më poshtëm i keni 16 ngjyra themelore që përdorim në HTML
dokumente:
ose nëse përdorim vlera heksadecimale për ngjyra.
Black #000000 Grey #808080
Navy #000080 Olive #808000
Blue #0000FF Red #FF0000
Teal #008080 Yellow #FFFF00
Aqua #00FFFF Fuchsia #FF00FF
Green #008000 Purple #800080
Lime #00FF00 White #FFFFFF
Maroon #800000 Silver #C0C0C0
Se si vendoset një ngjyrë në kodin heksadecimal në prapavijë të ueb faqes shohim në këtë
shembull – prova 6.html:
Rezultati pas hapjes me shfletues, duket si vijon:
- 19 -
1.8 HTML STILET
Çdo element në HTML ka stilin e nënkuptuar-paracaktuar psh. (prapavija e bardhë,
ngjyra e tekstit i zi, madhësia e shkronjave 12 px ...). Ndryshimi i stilit të nënkuptuar të
elementit HTML mund të bëhet duke shtuar atributin stylenë etiketën e elementit. Në këtë
shembull ndryshojmë ngjyrën e paracaktuar të prapavijës nga e bardhë në lightgrey.
Rezultati pas hapjes nga shfletuesi duket:
Atributi style i HTML elementeve ka këtë sintaksë:
style="tipari:vlera"
1.8.1 HTML Text Color
Tipari color definon ngjyrën e tekstit që përdoret në HTML element:
- 20 -
Rezultati pas hapjes nga shfletuesi:
1.8.2 HTML Text Fonts
Tipari font-family definon fontin e tekstit që përdoret në HTML element:
Rezultati pas hapjes nga shfletuesi duket:
1.8.3 HTML Text Size
Tipari font-sizedefinon madhësin e tekstit që përdoret në HTML element:
- 21 -
Rezultati pas hapjes nga shfletuesi:
1.8.4 HTML Text Alignment
Tipari text-aligndefinon rrafshimin horizontal të tekstit që përdoret në HTML
element:
Rezultati pas hapjes nga shfletuesi duket:
Nëse në një shembull i përdorim të gjitha stilet e përmendura më lartë:
- 22 -
Rezultati pas hapjes nga shfletuesi:
1.9 KODI BURIMOR I PROGRAMIT TË SHKRUAR NË HTML
A keni parë ndonjëherë një ueb faqe dhe keni pyetë "Hej! Si e bëjnë ata këtë?"
Për të mësuar klikoni me tastin e djathtë në faqe dhe zgjidhni "View Source" (Internet
Explorer) ose "Page view source" (Firefox), “View page source“ (Google chrome) ose të
ngjashme për shfletues të tjerë. Kjo do të hapë një dritare që përmban kodin HTML të faqes.
- 23 -
Detyra 1 – Të shkruhet programi në HTML si më poshtë, në editorin e tekstit
Notpad dhe pastaj të hapet me browser për të parë rezultatin se si duket ueb faqja.
Keni parasysh se duhet të hapni një follder të veçantë për disajnimin e ueb faqes, dhe në te të
ruhet teksti dhe fotografia natyra.jpeg.
<!DOCTYPE html>
<html>
<title>Detyra 1</title>
<h1><center> Shkrimi i tekstit në HTML </center></h1>
<body background="natyra.jpg" width="100" hight="30">
Me HTML ju mund të krijoni ueb faqen tuaj personale.<br>Mësimi i HTML – së është shumë
e thjeshtë dhe e lehtë. <br>Një program i thjeshtë e shkruar me HTML në një editor, duket si
këtu.<br>Teksti shkruhet brenda etiketave.<br>Gjithashtu mund të ngjyroset
prapavija<br>e dritares dhe teksti.
</body>
</html>
Rezultati pas hapjes në browser duket si vijon:
- 24 -
2. INSERTIMIDHE FORMATIZIMI I TEKSTIT NË UEB FAQE
2.1 SHTIMI I PARAGRAFIT DHE THYERJA E TEKSTIT
Shtimi i tekstit në një ueb faqe është e njëjtë sikur te çdo editor tjetër të tekstit. Teksti i
shkruar në editor, nëse nuk kërkohet ndryshe, rrafshohet nga ana e majtë,është i
formatizuarme formatizim të nënkuptuar (ang. default) për tekst. Teksti i shkruar në shfletues
në mënyrë automatike thyhet në fund të rreshtit varësisht nga gjatësia e dritares, dhe gjithë kjo
mund të duket shumë keq kur dëshirojmë që një fjali të duket e tërë në një rresht, dhe me
formatizim të dëshiruar.
Së parë të shohim si kalohet në rresht të ri, dhe si të fillojmë me një paragraf të ri?
Kur filloni të shkruani një tekst në NotePad kalimi në rresht të ri bëhet duke shtypur
tastin Enter ose Returnpor kjo nuk do të thotë se edhe te shfletues-i do të thyhet rreshti.
Thyerja e rreshtit në shfletues bëhet me përdorimin e etiketës <br> që i quajmë edhe
etiketë të zbrazët(bosh), sepse nuk ka nevojë të mbyllet në fundme një etiketëfundorë.
Tekstet në dokumentet HTML ndahen nëpërmes paragrafëve.Paragrafët definohen me
etiketën fillore <p>dhe përfundojnë me etiketën fundore</p>Kalimi në paragraf të ri në një
tekst arrihet me përdorimin e etiketës <p>në fillim, dhe në fund të paragrafit mbyllet me
etiketën fundor </p>.Se si përdorim në program këto dy etiketa shihet nga shembujt vijues-
teksti1.htmldhe teksti2.html:
Rezultati pas hapjes me shfletues, duket si vijon:
Shembulli për krijimin e një paragrafi të ri duke përdorur etiketën<p> :
- 25 -
Rezultati pas hapjes me shfletues, duket:
Browseri automatikisht shton një rreshtë të zbrazët para dhe pas një paragrafi.
Shumica e Browser-ve edhe nëse keni haruar etiketën fundore do të shfaq HTML elementin.
Një etiketë e veçantë për paragraf <pre> përdoret kur dëshirojmë të bllokojmë para
formatizimin e një teksti me hapësira të strukturuara dhe thyerje të rreshtave. psh.
Rezultati pas hapjes me shfletues, duket:
O Atdhe! Më je i dashur sa më s’ka
Më je nënë, më je motër, më je vlla.
Nga ç’ka rrotull më i shtrenjti ti më je,
Je më i miri nga çdo gjë që ka ky dhé..
Etiketa pre përdoret për shkrimin e një poezie:
- 26 -
2.2 RRAFSHIMI I TEKSTIT– ATRIBUTI ALIGN
Për rregullimin dhe rrafshimin e tekstit të një paragrafi përdorim etiketën <p> dhe
atributet e saj:
o në të majtë <p align=” left”>
o nëtë djathtë <p align=” right”>
o në qendër <p align=” center”>
Se si përdorim në program shihet nga shembulli vijues-teksti3.html:
Rezultati pas hapjes me shfletues, duket:
2.3 LLOJI I FONTIT NË TEKST DHE ATRIBUTET E TIJ
Nëse nuk theksojmë në program se me çfarë font do të shkruajmë tekstin shfletuesi
shfrytëzon formatizimin e nënkuptuar (default). Për caktimin e fontit të tekstit, etiketa
kryesore është <font>dhe kjo mund të ketë tre atribute:face, size dhe color. Me atributin:
o face- definojmë tipin e shkrimit,
o size- madhësinë e shkronjave,
o color- ngjyrën e shkronjave
Me atributin face definojmë llojin e fontit me të cilin dëshirojmë të shkruhet teksti. Në
një faqe mund të përdorim lloje të ndryshme të fonteve. Duhet pasur parasysh që fontet më
parë të jenë të instaluar në kompjuter, përndryshe shfletuesi përdor fontin e nënkuptuar. Nëse
psh. dëshirojmë që faqja të shkruhet me fontin "Comic Sans MS" etiketa do të duket:
- 27 -
<font face="Comic Sans MS">Teksti i shkruar </font>
Në etiketën e fontit mund të vendosim edhe disa lloje të fonteve të cilat përdoren më shpesh si
psh:
<font face="Comic Sans MS,Arial,Courier,Verdana">
Se si përdorim në program shihet nga shembulli vijues-teksti4.html:
Rezultati pas hapjes me shfletues, duket:
Atributi size – përdoret për caktimin e madhësisë së shkronjave, me atributin size
mund të përdorim madhësinë e shkronjave prej 1 deri 7, ( size 1, size 2, size 3, size 4, size 5,
size 6, size 7). Nëse nuk i cekim në etiket atributin size atëherë vlera e nënkuptuar e
madhësisë së shkronjave zakonisht është 3. Se si përdorim në program shihet nga shembulli
vijues-teksti5.html:
- 28 -
Rezultati pas hapjes me shfletues, duket:
Atributi color -Sa i përket atributi i ngjyrës color vlejnë rregullat enjëjtë si te etiketa
body.Ngjyrat mund të shkruhen me kodin heksadecimalose me emër të ngjyrësnë gjuhën
angleze.Se si përdorim në program shihet nga shembulli vijues-teksti6.html:
Rezultati pas hapjes me shfletues, duket:
- 29 -
2.4 STILET E TEKSTIT
Në HTML tekst dokumentet shpesh herë përdorim edhe stilet e tekstit si:
<b> bold Teksti i nxirrë
<i> italic Teksti i pjerrët
<u> underline Teksti i nënvizur
<small> small Teksti i zvogluar
<mark> marked Teksti i markuar
<del> deleted Teksti i fshirë
<sub> subscripts Teksti si indeks
<sup> superscripts Teksti si fuqi
Se si përdorim në program shihet nga shembulli vijues-teksti7.html:
Rezultati pas hapjes me shfletues, duket:
Nëse përpara një teksti dëshirojmë të lëmë hapësirë pa thyerje të tekstit atëherë
përdorim një komandë shtesë &nbsp. Se si përdorim në program shihet nga shembulli vijues-
teksti8.html:
- 30 -
Rezultati pas hapjes me shfletues, duket:
Gjithashtu si stile të tekstit mund të jenë edhe tekstet tëzvogluar në krahasim me tekstin
normal, me etiketën <small>të cilën epërdorim si më poshtë:
Rezultati pas hapjes me shfletues duket:
Ndonjë pjesë të tekstit nëse dëshirojmë të duken si të fshirë përdorim etiketën <del>
- 31 -
Rezultati pas hapjes me shfletues, duket:
Ndonjëherë na duhet të theksojmë ndonjë pjesë të tekstit atëherë e markojmë ate me
etiketën <mark>.
Rezultati pas hapjes me shfletues, duket:
Kur dëshirojmë të shkruajmë ndonjë formulë ose ekuacion në ueb faqe përdorim
etiketat <sub> dhe <sup>
- 32 -
Rezultati pas hapjes me shfletues, duket:
Nëse përmbledhim, në HTML etiketat më kryesorë për formatizim të tekstit janë:
<p> etiketa për paragraf </p>
<font> etiketa për fontin e tekstit </font>
<b> teksti i nxirë </b>
<i> teksti i pjerrët </i>
<u> teksti i nënvizuar </u>
<sup> teksti i ngritur </sup>
<sub> teksti i ulur </sub>
<em> teksti i pjerrët-dorës </em>
<strong> teksti i theksuar </strong>
<code> teksti në kod format </code>
Etiketat <strong> ose <em> do të përdorim nëse ju dëshironi në një mënyrë që teksti i
dhënë përdoruesi të kuptoj si "të rëndësishëm". Sot, të gjithë shfletuesit kryesore interpretojnë
strong si bold dhe em si italics. T’i shohim tani në një detyrë ku do të përdorim të gjitha
etiketat dhe atributet për tekst.
2.5 TEKSTET SI CITATE NË HTML
o Me etiketën <q> definojmë citate të shkurtëra në tekste që zakonisht i vendosim
brenda thonjëzave. Browserët zakonisht insertojn thonjëzat përeth elementit të
vendosur brenda etiketës <q>.
Rezultati pas hapjes së shfletuesit, duket:
- 33 -
o Me etiketën <blockquote> definojmë komplet një citat në tërësi si bllok tekst.
Shfletuesi zakonisht i shtynë për brenda këtë tekst si “indent”. psh.
Rezultati pas hapjes së shfletuesit, duket:
o Me etiketën <address> definojmë kontakt informacionet të autorit ose të
zhvilluesit të ueb faqes ose të një artikulli. Teksti zakonisht tregohet me shkronja
italic. Shumica e shfletuesve vendosin nga një rresht të zbrazët në fillim dhe në
fund të adresës. psh.
Rezultati pas hapjes së shfletuesit, duket:
- 34 -
Detyra 2 - Të shkruhet programi në HTML për dizajnimin e ueb faqes që përmban
një tekst,dhe e cila në shfletues do të ketë këtë pamje:
Zgjidhja e detyrës duket si vijon:
<html>
<head><h1><center>Rregullimi i tekstit</center></h1>
<title>Detyra 2</title></head>
<body>
<p align="left"><font face="Comic Sans MS" size="4" color="red">
Etiketat për rregullimin e një teksti<br><small>te ueb faqja</small></font></p>
<p><b>Teksti i nxirrë-bold</b></p>
<p align="center"><font face="Arial" size="2" color="navy"><i>Teksti i pjerrët-
italic</i></font></p>
<p align="right"><font face="Helvetica" size="1" color="green"><u>Teksti i nënvizuar-
undrline</u></font></p>
<p>Rregullimi i<sub> tekstit</sub> dhe <sup> atributet</sup> e tij</p>
<p>Kontakt <mark>informacionet</mark> e autorit:</p>
<address>
<q>Ismail Kuksi</q><br>
ismailkuksi@gmail.com<br>
tel. <del>+37744123456</del><br>
Rr.Maja e Pikëllimës 24, Prizren<br>
Republika e Kosovës
</address>
</body>
</html>
- 35 -
3. INSERTIMII VIJËS HORIZONTALE NË UEB FAQE
Vizatimi i një vije horizontale në një ueb faqe fillon me përdorimin e etiketës fillore
<hr> dhe përfundon me etiketën fundore </hr>. Kjo etiket vizaton një vijë të hollë në krejt
gjerësinë e faqes. Etiketa <hr> mund të ketë edhe atributet e tij:
o align – rrafshimi i vijës
o size – trashësia e vijës në piksela
o width – gjerësiae vijës në piksela osesipasgjatësisë së dritares
o color – ngjyra e vijës
Se si përdorim në program shihet nga shembulli vijues- vija1.html:
Rezultati pas hapjes me shfletues, duket:
Nëse brenda etiketës <hr> përdorim atributet atëherë vija do të merrë formën dhe
gjatësinë sipas vlerave të dhënë në atribute. Se si përdorim në program shihet nga shembulli
vijues - vija2.html:
Rezultati pas hapjes me shfletues, duket:
- 36 -
Detyra 3 - Të shkruhet programi në HTML për dizajnimin eueb faqes që përmban tekst dhe
vija me madhësi dhe gjatësi të ndryshëm,dhe e cila në shfletues do të ketë këtë pamje:
Programi do të duket si vijon
<!DOCTYPE html>
<html><title>Detyra 3</title>
<body bgcolor=”#CCFFCC”>
<p>Etiketa <b>hr</b> definon një vijë horizontale:</p>
<hr></hr>
<p align="right"><font face=Arial size=2>Paragrafi i parë.</font></p>
<hr size="4" width="50%" color="red" align="right"</hr>
<p align="center"><font face=Tahoma size=3>Paragrafi i dytë.</font></p>
<hr size="8" width="50%" color="blue" align="left"></hr>
<p align="left"><font face=Lucida Console size=5>Paragrafi i tretë.</font></p>
<hr size="12" width="50%" color="yellow" align="center"></hr>
</body>
</html>
- 37 -
4. TEKSTE TË LISTUARA
Listat në gjuhën HTML krijohen për të theksuar ose ndarë tekstet ose vlerat që i kanë
një strukturë dhe një lidhshmëri logjike në mes veti. Këto lista mund të jenë:
o të panumëruara (ang. unordered list)
o të numëruara (ang. ordered list)
o të definuar (ang. definition list)
4.1 LISTA TË PA NUMËRUARA
Listat të panumëruara janë listat ku ndarja e teksteve nuk ka nevojë për vendosjen e
numrave rendor. Këto lista me tekste mund të përpilohen me etiketën <ul> dhe mbaron me
etiketën </ul>. Ndarjet në lista bëhet me etiketën <li> e cila nuk ka nevojë për etiketë fundore
</li>. Struktura e listave të pa numëruara duket si vijon:
<ul>
<li>elementi i parë i listës
<li>elementi i dytë i listës
</ul>
Si shembull po marrim një ndarje të programeve të MS Office-itsi në shembullin– lista1.html:
Rezultati pas hapjes me shfletues, duket:
- 38 -
Për të ndryshuar llojin e pikave të ndarjes duhet përdorur atributet e caktuar të listave.
Atributet mund të jenë:
o circle - rreth
● disc –rreth i mbushur
■ square –katror
Se si përdorim në program shihet nga shembulli vijues – lista2.html:
Rezultati pas hapjes me shfletues, duket:
4.2 LISTA TË NUMËRUARA
Listat të numëruara në programpërpilohen me etiketën fillore <ol> dhe mbarojnë me
etiketën fundore </ol>. Ndarjet mund të jenë me numra, shkronja të alfabetit latin ose me
numra romak. Ndarjet në lista bëhet me siç thamë edhe më parë me etiketën <li> e cila nuk ka
nevojë për etiketë fundore </li>. Struktura e listave të numëruara duket si vijon:
<ol>
<li>elementi i parë i listës
<li>elementi i dytë i listës
</ol>
Se si përdorim në program shihet nga shembulli vijues – lista3.html:
- 39 -
Rezultati pas hapjes me shfletues, duket:
Nëse nuk jemi të kënaqur me ndarjen me numra arab të cilët janë edhe si të
nënkuptuar, mund të përdorni atributet e tipave tjerësi:
o numra natyror ( 1, 2, ...)
o shkronjat e mëdhaja (A-Z)
o shkronjat e vogla (a-z)
o numrat romak (I, II, III ...)
o numrat romak të vogëla (i, ii, iii ...)
Se si përdorim në program shihet nga shembulli vijues – lista4.html:
Rezultati pas hapjes me shfletues, duket:
- 40 -
4.3 NDARJET BRENDA LISTAVE
Nëse kërkohet të krijohen ndarjet ose listat brenda ndarjes kryesore atëherë programi
përpilohet në këtë formë si për shembull – lista 5.html:
Rezultati pas ekzekutimit me shfletues duket:
Nëse tani dëshirojmë ndarjet të bëhen me numra atëherë përpilojmë një program të
tillë si në shembullin vijues – lista6.html:
Rezultati pas ekzekutimit me shfletues duket si vijon:
- 41 -
Gjatë dizajnimit të faqeve ku kemi disa lloje të ndarjeve ose listimeve, mund të
përdorim edhe lista të kombinuar të numëruar dhe të panumëruar së bashku, si në shembullin
vijues – lista7.html:
Rezultati pas hapjes me shfletues, duket si vijon:
4.4 LISTA TË DEFINUAR
Gjatë punës me ueb faqe mund të përdorim edhe ndarjet me tekste duke dhënë prapë
përshkrimin me tekst, këtë formë të ndarjeve i quajmë lista të definuar. Lista të definuar do të
përpilohen nëse përdorim etiketat:
<dl>- Etiketa fillore dhe fundore të listave të definuar
<dt>- Etiketa për definimin e termit (koka e definicionit)
<dd> - Etiketa për përshkrimin e definicionet
Struktura e përpilimit të listave të definuar duket si vijon:
<dl>
<dt>termi 1</dt><dd>përshkrimi i termit 1</.dd>
<dt>termi 2</dt><dd>përshkrimi i termit 2</.dd>
. . . . .
</dl>
Ku termet rrafshohen nga ana e majtë por përshkrimet paraqiten në rresht të ri
dhe janë brenda për disa karakter.Se si përdorim në program shihet nga shembulli vijues –
lista8.html:
- 42 -
Rezultati pas hapjes me shfletues, duket si vijon:
- 43 -
Detyra 4 -Të tregohet se si do të duket dritarja e faqes në shfletues nëse është përpiluar një
program në HTML si te– detyra4.html?
<html>
<head><h2><title>Detyra 4</title></h2></head>
<body bgcolor="yellow">
<p><center><font face="Arial" size="4" color="Red">Një listim të përzier</font></center></p>
<ul>
<li><font face="Arial" size="1">Kafeja</font></li>
<li>Çaji
</ul>
<hr></hr>
<dl><font face="Comic Sans MS" size="3">
<dt>Kafeja</dt>
<dd>Kafeja është një ndër pijet më të konsumuara në të gjithë botën</dd>
<dt>Çaji</dt>
<dd>Çaji është i njohur për efektet e tij kundër gripit, kollës dhe të ftohurit</dd>
</font></dl>
<hr align="left" size="1" Width="25%"></hr>
<font face="Arial" size="4"><ul type="square">
<li>çaj i zi
<li>çaj i malit
</ul></font>
<hr align="left" size="2" Width="50%" color="green"></hr><ul>
<li><b><font face="Verdana" size="5">Makiato</b></font>
<li><b><font face="Verdana" size="5">Expresso</b></font>
</ul>
<hr align="left" size="4" Width="75%" color="red"></hr>
<ol type="A">
<li><i>çaj i kamiljes</i>
<li><b>çaj i mëllagës</b>
</ol>
<hr align="left" size="6" Width="85%" color="blue"></hr>
<ul type="circle">
<li><u><font face="Garamont" size="7">Capuchino</font></u>
</ul>
</body>
</html>
Ueb faqja sipasDetyrës4 do të duket:
- 44 -
5. TABELAT NË UEB FAQE
Tabelat paraqesin një element shumë të përshtatshme për paraqitjen dhe vendosjen e të
dhënave në Ueb faqe. Përveç mënyrës klasike të përdorimit të tabelave, në HTML tabelat
shfrytëzohen edhe për kontrollimin e vendosjes së teksteve dhe të fotografive në ueb faqe.
Vendosja e elementeve të ueb faqes në fushat e tabelës paraqet një teknikë e ueb dizajnerit.
Në fushat e tabelës (celulat) mund të vendosim elemente si p.sh tekst, fotografi, link dhe
tabela të tjerë. Tabelaformohet prej rreshtave (ang. row) dhe kolonave (ang.column),
pikëpremja e tyre formon celulat( ang. cell).
5.1 KRIJIMI I TABELËS
Tabelat në ueb faqe përpilohen me ndihmën e etiketës fillore <table> dhe etiketën
fundore <table> e cila mund të ketë më shumë atribute:
o border -përshkruan gjerësinë e kornizës së jashtme të tabelës;
o cellspacing -përshkruan gjerësinë e vijave ndarëse të dy celulave;
o cellpadding -përshkruan hapësirën rreth përmbajtjes së celulës;
o width -përshkruan gjerësinë e plotë të tabelës.
Titulli i tabelës jepet me etiketën <caption> e cila shkruhet mbi tabelë dhe mbyllet me
etiketën fundore </caption>, dhe mund të ketë atributin align:
o top, middle, bottompër rrafshim vertikal
o left, center, right për rrafshim horizontal
Çdo rresht në tabelë përshkruhet në mes etiketave <tr> dhe </tr> (ang. table row).
Edhe etiketa <tr> mund të ketë atributet:
o për rrafshim horizontal, atributi alignme vlera: left, center, right
o për rrafshim vertikal, atributivalignme vlera: top, middle, bottom
Celulat përshkruhen në mes etiketave <td> dhe </td>. Etiketa <td> i ka këto atribute:
o për rrafshim horizontal, atributi align
o për rrafshi vertikal, atributi valign
o për bashkim horizontal të celulave: rowspan(i bashkon dy celula të llojit të njejtë)
o për bashkim vertikal të celulave: colspan(i bashkon dy celula të kolonës së njejtë)
Etiketa <th> i ka vetitë të njëjtë si etiketa <td> vetëm se tekstin e qendërzon dhe e
thekson si titull të kolonës. Struktura themelore e një tabele duket si vijon:
- 45 -
<table>
<caption> emri si titull i tabelës </caption>
<tr> përmbajtja e rreshtit të parë si header
<th> përmbajtja e celulës së parë të headerit </th>
<th> përmbajtja e celulës së fundit të headerit </th>
</tr> fundi i rreshtit të parë
<tr>
<td> përmbajtja e celulës së parë në rreshtin e parë </td>
<td> përmbajtja e celulës së dytë në rreshtin e parë </td>
</tr>
<tr>
<td> përmbajtja e celulës së parë në rreshtin e fundit </td>
<td> përmbajtja e celulës së parë në rreshtin e fundit </td>
</tr>
</table>
Duke parë strukturën e krijimit të tabelës, krijimi i një tabele pra fillon me etiketën
fillore <table> dhe mbaron me etiketën fundore </table>. Përmbajtja e celulave të tabelës
vendoset brenda etiketave <td> dhe mbaron me </td>, nëse definohet kreu i tabelës atëherë
shënohet brenda etiketave <th> dhe </th>. Për definimin e rreshtave të tabelës përdorim
etiketat<tr> dhe </tr>. Se si përdorim në program shihet nga shembulli vijues – tabela1.html:
Rezultati duket si vijon:
- 46 -
Siç po shihet në detyrë, tabela nuk ka kufinjë të definuar, nëse dëshirojmë të
kufizojmë tabelën atëherë në etiketën <table> vendoset edhe atributi border si për shembull
<table border=1>. Se si përdorim në program shihet nga shembulli vijues – tabela2.html:
Rezultati pas hapjes me shfletues, duket si vijon:
5.2 ATRIBUTET E TABELAVE
Për të ndarë tabelës dimensionet e dëshiruara, shfrytëzojmë atributet height dhe width
ku madhësia e celulave shprehet me përqindje. Se si përdorim në program shihet nga
shembulli vijues – tabela3.html:
- 47 -
Rezultati pas hapjes me shfletues, duket si vijon:
Ekzistojnë edhe atribute tjerë në dizajnimin e tabelave si psh. cellpadding dhe
cellspacing. Se si përdorim në program shihet nga shembulli vijues – tabela4.html:
Rezultati pas hapjes me shfletues, duket si vijon:
- 48 -
Me ndryshime të mëtutjeshme të vlerave të atributeve si më poshtëte shembulli –
tabela5.html: Rezultati duket si vijon:
Nëse vazhdojmë me ndryshime të vlerave të atributeve dhe nëse i shtojmë edhe
atributet tjerë për font në një shembull vijues – tabela6.html:
Rezultati pas hapjes me shfletues, duket si vijon:
- 49 -
Shpesh ndodhë që ndonjëcelulë në tabelë duhet të shtrihet në më shumë rreshta ose
kolona, atëherë kjo mund të arrihet me bashkimin e rreshtave ose të kolonave duke i përdorur
atributet colspan dhe rowspan,të cilat vendosen brenda etiketës <td> ose të etiketës <th>.
Vlera e këtyre atributeve jepen varësisht nga rreshtat dhe kolonat që bashkohen. Për të
kuptuar më mirë se si përdoren këto dy atribute të marrim disa shembuj konkretë. Se si
përdorim në program shihet nga shembulli vijues – tabela7.html:
Rezultati pas hapjes me shfletues, duket si vijon:
- 50 -
Nëse më tutje përdorim edhe atributin rowspan së bashku me colspan në etiketën
<TH> te detyra e mësipërm, tabela tani duket – tabela8.html:
Rezultati pas hapjes me shfletues, duket si vijon:
- 51 -
Detyra 5 - Të tregohet se si do të duket dritarja e faqes në shfletues nëse është
përpiluar një program në HTML si më poshtë?
<!Doctype html>
<HTML><TITLE>Detyra 5</TITLE>
<!-- Fillimi i definimit të Tabelës -->
<TABLE width="50%" border="2" cellspacing="10" cellpadding="20"></th>
<caption> Tabela komplete me atributet e saj</caption>
<TR>
<TH rowspan=5 bgcolor="pink"><font size="6">Klasa XII</font></TH>
<TH colSpan=3 bgcolor="green"><font size="5" color="yellow">
Regjistri i nxënësit</font></TH>
</TR>
<TR bgcolor="yellow">
<TH width="20%"><font face="Verdana" size="3">Emri</font></TH>
<TH width="20%"><font face="Verdana" size="3">Mbiemri</font></TH>
<TH width="20%"><font face="Verdana" size="3">Datëlindja</font></TH>
</TR>
<TR>
<TD><font face="Garamont" size="2">Arsim</font></TD>
<TD><font face="Garamont" size="2">Hoxha</font></TD>
<TD align=center valign=middle>23/04/1998</TD>
</TR>
<TR>
<TD><font face="Comic Sans MS" size="1">Arta</font></TD>
<TD><font face="Comic Sans MS" size="1">Shala</font></TD>
<TD align=right valign=top>03/01/2012</TD></font>
</TR>
<TR>
<TD>Besim</TD>
<TD>Krasniqi</TD>
<TD align=left valign=bottom>26/06/1962</TD>
</TR>
</TABLE>
</HTML>
Zgjidhja e detyrës pas hapjes me shfletues, duket si vijon:
- 52 -
6. INSERTIMII LINK-UT NË UEB FAQE
Link-u ose Hyperlink-u paraqet një lidhje që mundëson leximin enjë teksti(dokumenti)
nga një vendku është emri i link-utte ueb faqja, deri tenjë pjesë tjetërtëdokumentit në ueb site.
Shfletuesi,zakonishtë link-un paraqet me një ngjyrë tjetër ose në shumicën e rasteve të
nënvizuar në dokument. Dukja eetiketës për paraqitjen e link-ut është:
< a atributi> ... </a> ose më të kompletuar duket:
< a href=”adresa e lidhjes (URL) ”> emri i link-ut </a>
Ku href- Hypertext Reference është atributi për një faqe tjetër. Ne mund të krijojmë disa lloje
të link-ëve dhe atë:
o Për një ueb site në Internet të ruajtur në ueb serverin e juaj.
o Për një ueb faqe nëueb site-in e njejtë
o Prejnjë bookmarknë ueb faqe
o Për një e-mail adresë
6.1 LINK-U PREJ NJË UEB FAQE NË NJË UEB SITE TJETËR
Për shembull nëse dëshirojmë të lidhemi në ueb site-in e qendrës trajnuese
profesionale www.ata-ks.org me linkun ATA, linku do të duket në shembullin si vijon –
Linku1.html:
<a href=” http://www.ata-ks.org” > ATA </a>
<html>
<head><h2><left>Linku në një ueb site</left></h2>
<title>linku 1</title></head>
<body>
<p>Qendra trajnuese:
<a href=”http://www.ata-ks.org>ATA</a>
</body>
</html>
Rezultati pas hapjes me shfletues, duket si vijon:
- 53 -
Nëse klikojmë në linkun ATA, rezultati do të duket si më poshtë, hapet ueb sajti i
Qendrës Trajnuese ATA.
6.2 LINK-U PREJ NJË UEB FAQE NË UEB FAQE TJETËR TË UEB SITE-IT TË
NJEJTË
Linku në një fajll ose dokument të ruajtur në një server kudo në Internet, është pjesa
më interesante dhe më e përdorura e hyperlinkut në rrjetë. Në këtë rast etiketa e linkut do të
përmbajë referencën në atë fajll të shprehur përmes URL-së(Uniform Resoursce Locator). Për
të bërë këtë së pari duhet të kemi uebfaqen(fajllin), në një uebsajt që ekziston në rrjetë të
Internetit, si në shembullin vijues – linku2.html:
<a href=” www.ata-ks.org/regjistrimi/ecdl.doc”> Regjistrimi online </a>
<html>
<head><h4>Linku në një faqe të ueb site-it</h4>
<title>linku 2</title></head>
<body>
<a href=” http://www.ata-ks.org/regjistrimi/ecdl.doc”><h2>Regjistrimi online</h2></a>
</body>
</html>
Rezultati pas hapjes me shfletues, duket si vijon
- 54 -
6.3 LINK-U PËR KRIJIMIN E NJË BOOKMARK-U NË NJË UEB FAQE
Nëse kemi një uebfaqe të gjatë, mund të krijojmë link për tu lidhur në një pjesë tjetër
të ueb faqes, shkruajmë emrin e pjesës së ueb faqes ku dëshirojmë të lidhemi,e cila shënohet
si vijon:
<a name=” Insertimi i Link-ut” >Emri i linkut</a>
Tani nëse p.sh dëshirojmë të lidhemi te Kapitulli 6, linku do të duket si vijon:
<a href=” #Insertimi i Link-ut ”>Kapitulli 6</a>
Për të parë se si përdorim një link të tillë në ueb faqe të marrim një shembull: linku3.html
<html>
<head><h2>Linku në një pjesë të ueb faqes</h2>
<title>linku 3</title></head>
<body bgcolor="aqua">
<a name=”Insertimi i Link-ut ”></a>
<a href=”#Insertimi i Link-ut ">Kapitulli 6</a>
</body>
</html>
Rezultati pas hapjes me shfletues, duket si vijon:
6.4 LINK-U PËR NJË E-MAIL ADRESE NË UEB FAQE
- 55 -
Për shembull nëse dëshirojmë të lidhemi në e-mail adresë të një ueb serveri
www.google.com me linkun info@gmail.com, linku do të duket si vijon:
<a href=” mailto:info@gmail.com”> Informim </a>
Për të parë se si përdorim një link të tillë në ueb faqe të marrim një shembull
linku4.html si më poshtë:
<html>
<head><h4>Linku në një e-mail adresë</h4>
<title>linku 4</title></head>
<body bgcolor="pink">
email: <a href=” mailto:info@gmail.com”>Informim</a>
</body>
</html>
Rezultati pas hapjes me shfletues, duket si vijon:
6.5 LINK-U SI FOTOGRAFI
Ne kemi parë se si të krijohet lidhja hypertext duke përdorur tekstin dhe gjithashtu
kemi mësuar se si të përdorim fotografitë në ueb faqe. Tani, do të mësojmë se si të përdorim
fotografitë për të krijuar një hyperlink. Përdorimi i fotografisë si hyperlink është shumë e
thjeshtë, ne vetëm duhet të përdorim një fotografi brenda hyperlinkut në vendin e tekstit.
Linku si fotografi për të kaluar në një ueb site insertohet me këtë etiketë:
<a href="http://www.ata-ks.org"><imgsrc="smiley.png"></img></a>
Për të parë se si përdorim një link të tillë në ueb faqe të marrim një shembull:
linku5.html
<!DOCTYPE html>
<html><title>Linku 5 </title>
<body>
<h1><center>Linku si fotografi</center></h1>
<p>Kliko ne fotografi per te hapur ueb faqen</p><br>
<a href="http://www.ata-ks.org">
<img src="smiley1.jpeg" alt="HTML" width="100" height="100"></img></a>
- 56 -
</body>
</html>
Rezultati pas hapjes me shfletues, duket si vijon:
6.6 LINKU PËR TË HAPUR NJË FOTOGRAFI NË UEB FAQE
Për të hapur në një fotografi në një ueb faqe tjetër nga një link përdorim këtë etiketë:
<!DOCTYPE html>
<html><title>Linku 6 </title>
<body>
<p>Krijimi i një linku për një fotografi:</p>
<a href="Prizreni.jpg"> PRIZRENI </a>
</body>
</html>
Dhe kur shtypim linkun PRIZRENI hapet ueb faqja me fotografi:
- 57 -
Detyra 6 - Të tregohet se si do të duket dritarja e faqes në shfletues nëse është përpiluar një
program në HTML si më poshtë ?
<!Doctype html>
<html>
<head><h2> Linku në ueb faqe</h2></head>
<title>Detyra 6</title>
<body>
<p><A HREF=” http://www.gjimnazigjonbuzuku.edu”> Gjimnazi </A></p>
<p><A HREF=” http://www.ata-ks.org/regjistrimi/ecdl.doc”> Regjistrimi në ECDL
</A></p>
<p><A HREF=”#tb”>Tabela orari</A></p>
<A NAME=”tb”>Tabela orari</A>
<p><A HREF=” mailto:gjimnazigjonbuzuku@hotmail.com”>gjgjbuzuku</A></p>
</body>
</html>
Zgjidhja e Detyrës 6:
Rezultati pas hapjes me browser:
- 58 -
7. INSERTIMII FOTOGRAFISË NË UEB FAQE
Fotografia që tregohet në kuadër të HTML faqes duhet të tregohet nëpërmes një
formati grafik të përshtatshëm. Formatet e fotografisë që më së shpeshti shfrytëzohen janë dy
formatet JPEG (JPG) dhe GIF. Shkaku i përdorimit të këtyre dy formateve është madhësia e
fotografisë në dokument dhe vështirësitë gjatë leximit. Këto dy formate shfrytëzojnë metoda
efikase për kompresim dhe në këtë mënyrë rritet perforrmanca e aplikacionit.
Në HTML fotografia paraqitet përmes etiketës <IMG>. Etiketa <img> është i
zbrazët, ç‘ë do të thotë se përmban vetëm atributet, dhe etiketa <img> nuk ka etiketë fundore.
Për të shfaqur një fotografi në një ueb faqe, ju duhet të përdorni atributin src. Atributi srcdo të
thotë "source".Vlera e atribut src është URL(adresa e fotografisë) që ju dëshironi për të
shfaqur në ueb faqe. Sintaksa e komandës që përshkruan një fotografi duket:
<img src="url" alt="emri i fotografisë">
URL-ja cakton vendin ku është e ruajtur fotografia. Ruajtja e fotografisë më së miri
është në follderin e ueb faqes, me emër të caktuar. Etiketa komplete për insertimin e
fotografisë duket si vijon:
<img src=”Vendi i fotografisë/emri i fotografisë”>
Disa shembuj se si shtohet një fotografi në ueb faqe:
<img src=”My Picture/foto.jpg”> ose më konkrestisht:
<img src=" Gjimnazi.jpeg " alt="Gjimnazi">
Dhe pasi të hapim me browser:
- 59 -
Atributet e etiketës për fotografi mund të jenë:
o Align– rrafshimi i fotografisë në krahasim me margjinat
 horizontalisht (center, right, left)
 vertikalisht (top, bottom, middle)
o Width –gjerësia e fotografisë dhe Height– lartësia e fotografisë
o Border – gjerësia e ram-it të fotografisë
o Alt – në vend të fotografisë jep emrin e fotografisë
Përdorimi i atributeve të fotografisë së bashku me etiketën <img> në program ka një
strukturë të tillë:
<p align=”center”><img src=”foto.jpg”> ose
<img src=”foto.jpg” align=”center”>
<img src="shtegu i vendndodhjes së fotografisë" hight="vl.nr" width="vl.nr"
alt="emri i fotosgrafisë">
<img src=”foto.jpg”alt=”emri i fotografisë”>
Shembulli konkretë për të parë se si përdorim një fotografi, në ueb faqe: foto1.html:
Rezultati pas hapjes me shfletues, duket si vijon:
Në një shembull tjetër kemi një ueb faqe në prapavijë të së cilës është insertuar një fotografi
dhe mbi te një fotografi tjetër – foto2.html:
- 60 -
Rezultati pas hapjes me shfletues, duket si vijon:
- 61 -
Detyra 7 - Të tregohet se si do të duket dritarja e faqes në shfletues nëse është përpiluar një
program në HTML si më poshtë ?
<!DOCTYPE html>
<html>
<body bgcolor="pink">
<h4>Fotografia me rrafshim (align="bottom"):</h4>
<p>Teksti para fotografise <img src="haker.png" alt="HAKERI" width="60" height="60">
Teksti pas fotografise</p>
<h4>Fotografia me rrafshim (align="middle"):</h4>
<p>Teksti para fotografise <img src="ora.png" alt="ORA" align="middle" width="80"
height="80"> Teksti pas fotografise</p>
<h4>Fotografia me rrafshim (align="top"):</h4>
<p>Teksti para fotografise <img src="Lidhja e Prizrenit.jpg" alt="Lidhja e Prizrenit"
align="top" width="100" height="80"> Teksti pas fotografise</p>
</body>
</html>
Rezultati pas hapjes së browserit duket si më poshtë:
- 62 -
8. INSERTIMII MULTIMEDIAVE NË UEB FAQE
Multimedia vjen në formate të ndryshme. Ajo mund të jetë pothuajse çdo gjë që ju
mund të dëgjoni ose të shikoni. p.sh: fotografi, muzikë, zë, video, regjistrime, filma,
animacione, dhe shumë të tjera. Ueb faqet shpesh përmbajnë elemente multimediale të llojeve
të ndryshme me formate të ndryshme. Në këtë kapitull do të mësojmë formatet të ndryshme
multimediale.
Ueb shfletues të parë kanë pas mbështetje vetëm për tekst dhe ato të kufizuar në një
font dhe me një ngjyrë të vetme. Ueb shfletuesit kryesorë të sotëm, trajtojnë ndryshe audio
dhe video fajlat si dhe animacionet të ndryshme. Shfletuesit e sotëm mbështesin formatet e
ndryshme të këtyre fajlave, por disa multimedia fajla me formate të caktuara për tu hapur do
të kërkojnë programe shtesë (helper -plug-ins). HTML5 multimedia premton një të ardhme
më të lehtë për multimedia. Elementet multimediale (si audio ose video) janë të ruajtura në
media fajla.
Multimedia fajlat kanë formate dhe prapashtesa të
ndryshme si: swf, Wav, .mp3, .mp4, mpg, wmv, dhe avi.
Formati ( .mp4) është i ri dhe kryesisht video fajllat në
Internet janë me këtë format, dhe këto multimedia fajlla
kryesisht hapen me programin Flash Player, gjithashtu
mbështeten edhe nga HTML 5.
8.1 INSERTIMI I NJË VIDEO FAJLI
Ndonjëherë ju duhet të shtoni muzikë ose video në ueb faqen tuaj. Mënyra më e lehtë
për të shtuar një video ose zë në ueb faqen tuaj është që të përdorni etiketën të veçantë në
HTML të quajtur <embed>. Ky etiketë vetë shkakton shfletuesin që të përfshijë disa kontrolle
për multimedian që siguron disa lloje të dhënave të medias. Por për të shtuar një viedeo fajll
në ueb faqe mund të përdoret edhe etiketa <video>. Në HTML 5, etiketa <video> së bashku
me atributet width dhe height përdoret si psh.
- 63 -
Rezultati pas hapjes së shfletuesit duket:
Etiketa <video> ka disa atribute. Atributi <control> shton kontrollet e videos, si play,
pause, dhe vëllimin e zërit. Është e mirë që gjithmonë në etiketën <video> të përfshihen edhe
atributet për gjerësi width dhe për lartësi height. Nëse atributet për lartësi dhe gjerësi nuk janë
të vendosur, faqja mund të bllokohe nga ngarkesa e madhe që mund të ketë video fajli.
Etketa <source> ju lejon të specifikoni burimin e video fajlit të cilën shfletuesi mund
të zgjedhë për emitim. Shfletuesi do të përdor vetëm formatet të treguara më parë, të cilat i
njeh. Teksti i vendosur ndërmjet etiketave <video> dhe </video> do të shfaqet vetëm nëse
shfletuesi nuk e mbështet <video> elementin.
8.2 INSERTIMI I NJË AUDIO FAJLI
Në HTML5 etiketa që i shtonë një audio fajl në Ueb faqe është <audio>. Se si e
përdorim këtë etiketë shihet në shembullin e më poshtëm audiofajlli.html:
Rezultati pas egzekutimit në browser do të duket:
- 64 -
Atributi control shton pullat(tastet) për kontrollimin e audio fajlit, si: play, pause, dhe
për vëllimin e zërit. Etiketa <source> ju lejon të specifikoni burimin e audio fajlit të cilën
shfletuesi mund të zgjedhë për emitim. Shfletuesi do të përdor vetëm formatet që i ka të
njohur më parë si psh. mp3, Wav, dhe Ogg.
Teksti i vendosur ndërmjet etiketave <audio> dhe </audio> do të shfaqet vetëm nëse
shfletuesi nuk e mbështet <audio> elementin.
8.3 HTML NDIHMUESIT (PLUG-INS)
Objektet ndihmës (plug-ins) në ueb site janë programe kompjuterike që shtojnë
funksionalitetin standard të një shfletuesi. Shembuj të mirënjohur të plug-ins-ëve janë
reklamat (applets). Elementet shtesë (plug-ins) mund të shtohet në ueb faqe me etiketat
<objekt> ose <embed>.
Plug-ins elementet në ueb faqe mund të përdoret për shumë qëllime, psh.: për të
shfaqur hartat, skanimi për viruset, verifikimi i ID bankare, etj.
Etiketa <object> është i përkrahur nga të gjithë shfletuesit. Etiketa <object> përcakton
një objekt të ngjitur brenda një HTML dokument. Ajo përdoret për të shtimin e elementeve
ndihmës si psh. reklamat ose kryetitujt dinamik në ueb faqe.
Se si përdorim etiketën <object> në shtimine një elementi në ueb faqe shohim nga
shembulli i mëposhtëm:
- 65 -
Rezultati pas egzekutimit në browser do të duket:
Ose nëse dëshirojmë me shtu një fotografi si reklamë, psh:
Rezultati pas egzekutimit në browser do të duket:
- 66 -
Etiketa <embed> është i mbështetur në të gjitha shfletuesit kryesorë. Etiketa <embed>
gjithashtu përcakton një objekt të vendosur brenda një HTML dokumenti. Ueb browserët kanë
mbështetur <embed> etiketën një kohë të gjatë, dhe ka qenë një pjesë e specifikimeve të
gjuhës HTML para HTML5.
Gjithashtu mund të përfshini një etiketë <noembed> për shfletuesit që nuk njohin
etketen <embed>. Për shembull, mund të përdoret <embed> për të shfaqur një film sipas
dëshirës dhe <noembed> për të shfaqur një fotografi të vetëm me formatin .jpeg nëse
shfletuesi nuk e mbështet etiketën <embed>.
Rezultati pas egzekutimit në browser do të duket:
Etiketën <embed> mund të përdorim edhe për të shtuar një multimedia (video ose
audio) fajl në ueb faqe. Kjo etiketë na mundëson që vetë shfletuesi të shfaqë video ose audio
fajlin duke i përfshirë edhe kontrollet për multimedia fajllin, me kushtë që shfletuesi të
mbështet etiketën <embed> dhe formatin e multimedia fajlit. Sintaksa e komandës që
përshkruan një video fajl duket:
<embed src="/html/fajliijuaj.mid"> </embed>
Mund të japim çfardo fajla multimediale pran atributit ‘src=’
- 67 -
Nëse tani i përdorim edhe atributet width dhe height në etiketën <embed> për të
përcaktuar dimenzionet e shfaqjes së dritares së video fajlit në ueb faqe, atëhere programi ynë
duket:
8.4 LUAJTJA E NJË VIDEO NGA YOUTUBE NË HTML UEB FAQE
Për të luajtur një video në një ueb faqe, duhet të kryhen më parë disa veprime si
mëposhtë:
o Ngarkojmë një video në YouTube,
o Marrim një shënim për ID e video fajlit,
o Definojmë HTML etiketën <embed> ose <object> në ueb faqe,
o Atributi src përcakton URL adresën e video fajlit,
o Atributet për gjerësinë dhe lartësinë përcaktojë dimensionin e video-s,
o Shtohet edhe ndonjë parametër tjetër në URL adresë, psh. autoplay=1 (starton
menjëherë video-ja ose autoplay=0 pasi të shtypim butonin)
Më poshtë do të shohim se si mund të shtohen edhe video fajllat nga ueb sait-et si psh.
www.youtube.com. me etiketën <embed> dhe </embed>:
Rezultati pas hapjes së shfletuesit duket si më poshtë:
- 68 -
Detyra 8 - Të tregohet se si do të duket dritarja e faqes në shfletues nëse është përpiluar një
program në HTML si më poshtë?
<!DOCTYPE html>
<html>
<head><h1>Perdorimi i etiketes embed </h1>
<title>Multimedia</title>
</head>
<body>
<embed src="Money for Nothing.MP3" width="100%" height="60%" >
<noembed><img src="Penguins.jpg" alt="Alternative Media" ></noembed>
</embed>
</body>
</html>
Provoni vetë në kompjuterin tuaj duke i shtuar fajllat qe e keni ju në kompjuterin e
juaj të ruajtur më parë në një follder që e keni përpiluar enkas për ushtrime me Html.
- 69 -
9. KRIJIMI I KORNIZAVE (FRAME)NË UEB FAQE
Kornizat(Frame) mundësojnë që të formohet dokumenti(fajlli) i cili do të përbëhet së
paku prej adresave të dy dokumenteve të ndryshme. Shfletuesi do të interpretoj kornizat si
ndarje të dritares në më shumë nën dritare të pavarura, nga të cilat çdo njëra përmban
dokumentin e adresuar. Etiketa kryesor për krijimin e kornizave shënohet me: <frameset>.
Kjo etiketë zëvendëson etiketat <body> në një HTML dokument. Teksti i dokumentit i cili
ndahet në korniza përmban kryesisht informatat të dedikuar kryesisht shfletuesit, shfletuesi
thërret dokumentet e adresuara dhe vendos në kornizat e caktuara.Etiketa <frameset> ka këto
atribute:
o cols - për ndarje vertikale të dritares dhe
o rows- për ndarje horizontale të dritares.
Adresa e dokumentit jepet në kuadër të etiketës FRAME atributet e së cilës janë:
 src – nëpërmes së cilës jepet adresa e dokumentit e cila do të tregohet brenda
hapësirës së etiketës dhe
 marginwidth dhe marginheight
Shpesh përdoret edhe etiketa <noframe> që tregon porosinë shfletuesit që nuk mund
të interpretoj fram-et.Struktura themelore e një HTML dokumenti me Frame-a duket si vijon:
<html>
<head>
</head>
<frameset>
.........
</frameset>
</html>
Për të parë se si përdoret etiketa <frame> të marrim një shembull konkretë –
frame1.html: *Të dizajnohet uebfaqja me dy korniza(frame), ku në secilën kornizë të
vendosen fajlla të ndryshëm, të ruajtur më parë në diskun e juaj?
- 70 -
Rezultati pas hapjes me shfletues, duket si vijon:
Në këtë ueb faqe me dy frame-a janë të insertuar dy fajlla, top.html në pjesën e
sipërme gjegjësisht në fram-in e sipërm të faqes, ndërsa bottom.html, në frame-in e poshtëm
të faqes. Këto dy fajlla më herët janë të krijuar dhe të ruajtur në follderin e ueb sajtit. Për të
analizuar më tepër frame-ët t’i marrim disa shembuj tjerë për shqyrtim. Në shembullin vijues i
kemi të vendosur dy dokumente me emra lista3.html dhe tabela7.html të krijuar si HTML
dokumentdhe pastaj të insertuar në dy pjesë të dritares me dy korniza. Të marrim një
shembull konkretë – frame2.html edhe si detyrë.
*Detyra. Të dizajnohet uebfaqja me dy korniza(frame) horizontale, ku në kornizën e
sipërm të vendoset fajlli tabela.htm, ndërsa në kornizën e poshtëm fajllin lista.html, të ruajtur
më parë në diskun e juaj?
Se si përdorim në program me frameset këto dy fajlla shihet në programin e mëposhtëm:
- 71 -
Rezultati pas hapjes me shfletues, duket si vijon:
Nëse në etiketën <frameset> të programit të mësipërm në shembullin frame2.html në
vend cols shënojmë atributin rows si më poshtë:
Rezultati pas hapjes me shfletues, duket si vijon:
- 72 -
Ose nëse më tutje për të kuptuar më mirë përdorimin e atributeve rows dhe cols
kombinojmë të dy opsionet në një shembull tjetër – frame4.html
Rezultati pas hapjes me shfletues, duket si vijon:
- 73 -
Detyra 9 - Të tregohet se si do të duket dritarja e faqes në shfletues nëse është përpiluar një
program në HTML si më poshtë?
<!Doctype html>
<head>
<title>Detyra 8</title>
</head>
<frameset rows="50%,50%">
<frame src="foto1f.html">
<frameset cols="25%,25%">
<frame src="tabela1f.html">
<frame src="lista1f.html">
</frameset>
</html>
Rezultati pas egzekutimit në browser duket:
- 74 -
10. KRIJIMI I FORMULARËVE (FORM)NË UEB FAQE
Etiketat të mësuara deri më tani janë vetëm për dizajnimin e ueb faqes hipertekstuale
që përmban vetëm tekste, tabela, vija, hiperlinkë dhe imazhe ose fotografi të ndryshme, që
mund të shihenn vetëm me shfletues. Por shfletuesi mund të përcjellë të dhënat në ueb server
për të përpunuar më tutje, të cilat të dhëna i merr nga formularët në ueb sajt. Formulari
mundëson komunikimin ndërmjet shfrytëzuesit dhe serverit. Shfrytëzuesi i mbushë formularin
dhe dërgon serverit, ku më tutje atje përpunohen sipas nevojës. Me anë të formularëve mund
të krijohen aplikime si p.sh.:
o Pyetësorë që regjistrojnë të dhënat në databaza
o Formularë për identifikimine qasjes në ndonjë shërbim të serverit
o Tregtia elektronike( formularë për blerje dhe pagesa et.)
o Formularë për lajmërime të dhënave që ndryshojnë shpesh, etj.
Formulari përpilohet përmes etiketës fillore: <FORM> dhe etiketës fundore </form>.
Etiketa <form> përmban dy atribute:
 action e cila përmban adresën (URL) e programit në server;
 method me të cilën metoda e përshkruar e bartjes së argumentit të programit, dhe mund të ketë dy
vlera get dhe post.
Shembulli i HTML kodit përmes së cilës definohet formulari është:
<formaction=”shembulli.html” method=”post”>
........
</form>
Etiketat <form> nuk mund të vendosen njëra mbi tjetrën. Atributet e përbashkët të
etiketave të ndryshëm në kuadër të formularit është:
o name, me të cilën definohet emri i variablës ku do të vendoset vlera e të dhënave,
o value, me të cilëndefinohet vlera e zgjedhur në formular ose teksti që tregohet,
o type, definonllojin e të dhënave që vendosen brenda etiketës,
Brenda formularit mund të përdoren këto etiketa:
o Etiketa për krijimin e një fushe për tekst për shënime personale. Në këto fushe vendoset
një e dhënë ose një informatë. Korniza mund të jetë text, file dhe password, Etketa
shënohet:
<p> teksti: < input type=”text”, name=” emri ” >
- 75 -
Shembull: Të përpilohet një uebfaqe me një kuti për tekst duke përdorur etiketën
<input type=”text”, name=”emri”>
Se si përdorim në program shihet nga shembulli vijues – formulari1.html:
Rezultati pas hapjes me shfletues, duket si vijon:
Etiketa input mund të ketë edhe këto atribute:
o size - për gjatësi të kornizës për tekst
o maxlength - numri i karaktereve të tekstit
o value – vlera e tekstit
o Gjithashtu etiketën <input> mund të përdorim edhe për vendosjen e fjalëkalimit dhe
e-mail adresës. Se si përdorim në program shihet nga shembulli vijues:
- 76 -
Rezultati pas hapjes me shfletues, duket si vijon:
o Etiketa për krijimin e një kutie për kontrolltë tëdhënave me alternativa checkbox. Etiketa
shënohet:
<input type=”checkbox” name=” lloji i të dhënave ” value=” vlera”>
Të përpilojmë një program për dizajnimin e një ueb faqe me formular ku përdoret
përveç kutive me tekst edhe një kuti për kontroll të dhënave, duke përdorur etiketën:
<input type=”checkbox”>. Se si përdorim në program shihet nga shembulli vijues –
formulari3.html:
Rezultati pas hapjes me shfletues, duket si vijon:
- 77 -
o Etiketa për krijimin e një fushe për zgjedhjen e një vlere nga dy ose më shumë të dhëna
alternative. Etiketa shënohet:
<input type=”radio” name=” lloji i të dhënave ” value=” vlera” checked> labela
Të përpilojmë një program për dizajnimin e një ueb faqe me formular ku përdoret
përveç kutive me tekst, për kontroll të dhënave edhe një fushë për zgjedhjen e një nga shumë
të dhëna, duke përdorur etiketën <input type=radio>. Se si përdorim në program shihet nga
shembulli vijues:
Rezultati pas hapjes me shfletues, duket si vijon:
o Eetiketat <select> dhe <option> janë dy etiketa për dizajnimin e kutisë me opsionet
rënëse. Fusha <select> përshkruan zgjedhjen nga opsionet e mundshme të treguar
nëpërmes etiketës < option>. Etiketa <select> dhe <option> në program shënohen në këtë
formë:
<select name=” emri ” >
<option> tekstirënës </option>
</select>
Atributet që mund të shtohen etiketës <select> janë:
o size
o multiple
- 78 -
Shembull: Të përpilojmë një program për dizajnimin e një ueb faqe me formular ku do të
përdoret përveç kutive me tekst, për kontroll të dhënave, për zgjedhjen e një nga shumë të
dhëna dhe një fushë me listë rënëse me të dhëna, duke përdorur etiketën <select> dhe
<option>.
Se si përdorim në program shihet nga shembulli vijues – formulari5.html:
Rezultati pas hapjes me shfletues, duket si vijon:
o Etiketa për krijimin e një fushepër vendosjen e një komenti si tekst në dritaren e ndarë
është <textarea> . Etiketa në fjalë përpilohet në këtë formë:
<textarea name=”emri” rows=”n” cols=”m”>....teksti...</textarea>
Se si përdorim këtë etiketë në një program shihet nga shembulli vijues – formulari6.html:
- 79 -
Rezultati pas hapjes me shfletues, duket si vijon:
o Etiketa për krijimin e butonave për ruajtjen ose fshirjen e të dhënave të formularit.
Butonat insertohen me etiketën <input> me atributin type e cila e përshkruan natyrën e
butonit. Vlerat e këtij atributi mund të jenë:
 submit, përshkruan butonin e cila pas shtypjes në te dërgon të dhënat që
përmban formulari kah serveri për ruajtje ose për përpunim të mëtejshëm.
 reset, përshkruan butonin e cila pas shtypjes në te i kthen të gjitha vlerat në
gjendje fillestare.
<input type=”submit” name=” dërgo”>
<input type=”reset” name=” shlyej”>
Se si përdorim këtë etiketë në një program shihet nga shembulli vijues – formulari7.html:
- 80 -
Rezultati pas hapjes me shfletues, duket si vijon:
o Nëse dëshirojmë të vendosim vetëm taste të zakonshme atëherë përdorim etiketën input
me atributin button, si në vijim:
<input type="button" value="emri i tastit">
Se si përdorim këtë etiketë në një program shihet nga shembulli vijues – formulari8.html:
Rezultati pas hapjes me shfletues, duket si vijon:
- 81 -
o Nëse duam të grupojmë disa elemente në një vend atëherë mund të përdorin një etiketë:
<fieldset> dhe nëse vendosim edhe labelën për grupin e elementeve me etiketën
<legend> si më poshtë:
<fieldset><legend>teksti i labelës:</legend>etiketafundore </fieldset>
Se si përdorim në një program këtë etiketë shihet nga shembulli vijues – formulari9.html:
Rezultati pas hapjes me shfletues, duket si vijon:
- 82 -
Detyra 10. - Të përpilohet programi për dizajnimin e një ueb faqes me një formular ku janë të
përdorur të gjitha elementet e formularit të dhënë si në shembullin vijues?
- 83 -
Zgjidhje: Kodi i ueb faqes së treguar më lartë ë shembullin Detyra 9.html për dizajnimin e
ueb faqes duket si më poshtë:
<html>
<title>Detyra 9</title>
<h2>Fletë regjistrimi i nxënësit</h2>
<body bgcolor="navy" text="yellow">
<form action="">
<fieldset><legend><h3>Informatat personale:</h3></legend>
<p> Emri:<input type="text" name="emri" size="15" maxlength="10">
Mbiemri:<input type="text" name="mbiemri" size="15" maxlength="10"><br>
<p> Datëlindja: <input type="text" size="10">
Gjinia:<input type="radio" name="gjinia" value="mashkull"/> M
<input type="radio" name="gjinia" value="femër"/> F
<p> Email adresa:<input type="text" name="email"size="30">
<p> Paswordi: <input type=password name="fjalkalimi" value="ismail" size="10"
maxlength="6">
</fieldset>
<p>Klasa:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;Drejtimi:
<select name="Drejtimi">
<option> Natyror</option>
<option> Mat-Inf</option>
<option> Përgjithëshëm</option>
</select><br><br>
<input type="checkbox" name="topping" value="XII-11">XII-11<br>
<input type="checkbox" name="topping" value="XII-12">XII-12<br>
<p>Vërejtje:</p>
<textarea name="comment" rows="5" cols="30" value="50">
</textarea><br>
<input type="submit" value="Regjistroje">
<input type="reset" value="Fshije të dhënat">
</form>
</body>
</html>
- 84 -
11. PËRMBLEDHJE
Në këtë skript jam munduar t’ju mësojë në një formë më të zgjeruar se sa në
planprogramin e lëndës TIK për klasat e 12-ta, se si të përdoren etiketat dhe atributet e tyre në
gjuhën HTML për të krijuar një ueb faqe.
HTML është një gjuhë universale e lartë për Ueb dizajn. HTML ju mundësontë shtoni
një tekst format, të shtoni grafikë, të krijoni një lidhje(hyperlink), të krijoni një formularë për
të dhëna, frame-a, tabela, etj, dhe të ruani të gjitha në një tekst file, që çdo shfletues(shfletues)
të mund të lexoj dhe të tregoj si një dritare. Çelësi i HTML-së është etiketa, që tregon se në
çfarë mënyrë dhe përmbajtje elementi i përshkruar me etiketë do të shfaqet në shfletues.
Në fund po japim një përshkrim të etiketave (tag-ëve) të gjuhës HTML më të
përdorura gjatë dizajnit të një ueb faqes:
<!--...--> definon një koment në HTML program
<address> definon informatat kontaktuese për autorin /krijuesit të dokumentit
<b> definon tekstin e nxirë (bold)
<basefont> komandë, specifikon ngjyrën, madhësinë ose fontin të nënkuptuar të tekstit
në dokument
<big> definon tekstin me shkronja të madhe
<blockquote> definon kllapat e mëdha
<body> definon trupin e dokumentit
<br> definon thyerjen e rreshtit
<button> definon një tast(buton) për klikim
<caption> definon kryetitullin e tabelës
<center> komandë, definon tekstin në qendër
<code> definon një pjesë të kodit kompjuterik
<col> definon vlerat e atributeve për një ose më shumë kolona në tabelë
<colgroup> specifikon grupin e një ose më shumë kolonave në tabelë për formatizim
<dd> definon përshkrimin e një elementi në listë të definuar
<del> definon tekstin të cilën duhet fshirë nga dokumenti
<dir> komandë, definon një listë të direktoriumeve
<div> definon një pjesë në dokument
<dl> definomi i një liste të definuar
<dt> definon një term në listë të definuar
<fieldset> grupimi i elementeve të lidhura të formularit
<font> komandë, definon fontin, ngjyrën, dhe madhësinë për tekstin
<form> etiketa për futjen e formularit për përdorues në HTML
<frame> përcakton një dritare (frame) në një frameset
<frameset> përcakton një sërë korniza
<h1> deri <h6> definon madhësinë e titujve në HTML
<head> definon informacionin në lidhje me dokumentin
<hr> definon vijën horizontale
<html> definon rrënjën e një HTML dokumenti
- 85 -
<i> definon një tekst italik(të pjerrët)
<iframe> definon një inline frame
<img > definon një fotografi
<input> definon një input kontroll
<ins> definon një tekst që insertohet në një dokument
<label> definon një emërtim për një <input> element
<legend> definon një kryetitull për një <fieldset> element
<li> definon një element në list
<link > definon një lidhje ndërmjet një dokumenti dhe resurseve të jashtëm
<meta> definon metadata për një dokument në HTML
<noframes> definon një përmbajtje alternative që nuk vendosen brenda frameve
<object> definon një objekt statik
<ol> definon një listë të renditur
<option> definon opsionet e një drop-down liste
<p> definon një paragraf
<param> definon një parametër për një objekt
<pre> definon një tekst të pa formatizuar
<strike> definon një tekst të përshkruar me vijë
<select> definon një listë drop-down
<small> definon një tekst me shkronja të vogla
<strong> definon një tekst të theksuar
<style> definon informatat e stilit për dokument
<sub> definon subscripted tekst(tekst si indeks)
<sup> definon superscripted tekst(tekst si fuqi)
<table> definon një tabelë
<tbody> grupon përmbajtjen e trupit të tabelës
<td> definon një qeli në një tabelë
<textarea> definon një hapësirë për tekst-komente, element kontrollues
<tfoot> grupon përmbajtjen e futerit(pjesa e fundme) në tabelë
<th> definon qelinë e titullit në tabelë
<thead> grupon përmbajtjen e headerit në tabelë
<title> definon titullin e ueb dokumentit
<tr> definon rreshtin në një tabelë
<tt> definon teletype tekstin
<u> Komandë, definon një tekst të nënvizuar
<ul> definon një tekst të listuar, jo të numëruar
<var> definimi i variablave
Për më shumë informacione për gjuhën HTML, mund të merrni nga shembuj të
ndryshëm në Ueb sajtet të ndryshëm në Internet.
- 86 -
Detyra 11 – Të përpilohet programi(kodi) në gjuhën HTML për dizajnimin e ueb
faqes e treguar në fotografi si më poshtë:
- 87 -
12. HTML STILET – CSS
Mundsitë e formatizimit të objekteve në ueb faqe me HTML etiketa është
mjaft e kufizuar, si psh. kur dizajnojmë pamjen e faqes, jemi të kufizuar te tabelat, në
kontrollin e fonteve të teksteve, dhe në disa stile të tekstit të tilla si bold dhe italic. Por me
përdorimin e modeleve të stileve mund të bëjmë:
o Kontrollin me kujdes të çdo aspekti të pamjes së dritares (caktimi i largësisë në mes
rreshtave, në mes karakterëve, margjinat e faqes, pozita e fotografisë në faqe etj).
o Aplikimin e ndryshimeve në tërë ueb faqe
o Sigurimin e një dizajni të qëndrueshëm për tërë ueb faqen ashtu që të njëjtën modul të
stilit në mënyrë elegante të përdorim për çdo ueb faqe.
o Udhëzime të nevojshme për ueb shfletuesit për të kontrolluar pamjen e faqes.
o Krijimin e ueb faqeve dinamike.
Çfarë është CSS, dhe pse duhet të mësojmë ?
HTML (HyperText Markup Language) përshkruan kuptimin dhe strukturën
të përmbajtjes së ueb faqes. CSS ( Cascading Style Sheets ) përshkruan mënyrën e paraqitjes
së përmbajtjes së ueb faqes me definim të dizajnit të elementeve siç janë rrafshimi, fonti,
ngjyra, margjinat, prapavija etj. CSS mundëson përcaktimin e stilit të dukjes së elementeve që
synohet të ketë çdo element individuale në HTML.
- 88 -
Në HTML dizajni i ueb faqes duket: Në CSS dizajni i ueb faqes duket:
<html>
<body>
<h1>This is a header</h1>
<p>
Këtu është një paragraf me
një bllok tekst.
</p>
<h2>Kryetitulli </h2>
<p>
Një paragraf tjetër me
një bllok tekst.
</p>
</body>
</html>
body {
font-family: "trebuchet ms", sans-serif;
background-color: #ddeedd;
padding: 20px 100px 0px 100px;
}
h1, h2 {
font-size: 1.8em;
color: #88aa44;
margin: 0px;
}
h2 {
font-size: 1.4em;
background-color: #ffffff;
padding: 0px 30px 0px 30px;
}
p {
background-color: #ffffff;
padding: 30px;
margin: 0px;
}
CSS është shkurtesa nga anglishtja Cascading Style Sheets (Fletët me Stile
Kaskadike) dhe paraqet një gjuhë për formatimin e HTML elementeve.
Stili paraqet një bashkësi të karakteristikave të formatit, të cilat identifikohen
me një emër. Stili bën të mundshme që me vetëm një operacion të formatizoni një grup të
HTML elementeve të ueb faqes përfshirë tekstin, figurat, tabelat, etj. Për çdo element në ueb
faqe mund të formojmë një stil të veçantë duke rregulluar brenda stilit: fontin e paragrafit,
ngjyrën e prapavijës të ueb faqes, hapsira në mes rreshtave të paragrafit, kufijtë e tabelave,
margjinat e faqes, dinamika e elementeve, etj.). CSS mund të shkruhet direkt në HTML
dokument, ose mund të jetë i lidhur me etiketën <style> me një HTML dokument.
Pra, stilet definojnë se si do të shfaqen HTML objektet në një ueb faqe.
- 89 -
12.1 STRUKTURA DHE SINTAKSA E GJUHËS CSS
 Sintaksa e CSS
Moduli i rregullave të CSS përbëhet nga selektori dhe deklarimi:
Shprehjet ose modulet e stileve krijohen prej disa rregullave të stilit. Çdo
rregull i stilit ka dy pjesë:
o Selektori: Specifikon elementin për të cilin vlen rregulla e stilit
o Deklarata: Specifikon si duket përmbajtja e përshkruar me CSS
Për modulet e stilit përdorim një grup të shenjave të pikësimit dhe karakterë të
veçanta për të përcaktuar rregullat e stilit.Sintaksa për rregullat e stilit gjithmonë ndjek
modelin e mëposhtme:
selektori {deklarata;}
Deklarata është e ndarë në dy pjesë:
1. Properties (aspektet se si kompjuteri tregon karakteristikat ose tiparet e tekstit dhe
grafikës).
2. Values (vlerat që përcaktojnë se si ne duam të shfaqen tekstet dhe imazhet në faqen
tonë).
Përmbajtja (properties) nga vlera (value) në deklaratëndahet me dy pika, dhe çdo
deklaratë mbaron me pikë-presje:
selektori {vetita: vlera;}
- 90 -
12.2 SELEKTORËT DHE DEKLARATAT
Për një selektor (emërtimi i elementit) për të cilin krijohet një stil në CSS, mund të
aplikojmë dy rregulla të shkrimit të stilit:
1. Një selektor me vetëm një deklaratë e ndarë për një element, psh.:
h1 {color: teal;}
h1 {font-family: Arial;}
h1 {font-size: 36px;}
2. Një selektor me më shumë deklarata për një element:
h1 {
color: teal;
font-family: Arial;
font-size: 36px;
}
Te shembulli i mësipërm, të gjitha deklaratat për selektorin h1 janë të shënuar
brenda kllapave të mëdha ({ }) dhe janë të ndarë mes veti me pikëpresje (;). Mund të
vendosim sa të dëshirojmë deklarata brenda një seti të stileve të një selektori, por duke ndarë
çdonjërin me pikëpresje. Ky set i njejtë i deklaratave mund të referohet të gjithë selektorëve të
elementeve në ueb faqe. Nëse janë më shumë selektorë me një set të njejtë të deklaratave,
selektorët ndahen me presje.
Në shembullin e mëposhtëm, të gjitha selektorët (h1, h2, h3) kanë të
përbashkët një set të njejtë të rregullave të stilit. Seti i rregullavetë stilit është përbërë nga –
një deklaratë për ngjyrën e tekstit (color:teal), një deklaratë fontin e tekstit (font-family) dhe
një deklaratë për madhësinë e shkronjave (font-size):
h1, h2, h3 {
color: teal;
font-family: Arial;
font-size: 36px;
}
ose të shkruar në një rreshtë:
h1, h2, h3 {color: teal; font-family: Arial;font-size: 36px;}
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS
Skripta HTML 5+CSS

More Related Content

What's hot

Bazat e Te Dhenave - ACCESS
Bazat e Te Dhenave  - ACCESSBazat e Te Dhenave  - ACCESS
Bazat e Te Dhenave - ACCESSAjla Hasani
 
Kundrinori i zhdrejtë me parafjalë
Kundrinori i zhdrejtë me parafjalëKundrinori i zhdrejtë me parafjalë
Kundrinori i zhdrejtë me parafjalëAlush Kryeziu
 
Programet kompjuterike
Programet kompjuterikeProgramet kompjuterike
Programet kompjuterikeArlinda
 
Kundrinori i drejtë
Kundrinori i drejtëKundrinori i drejtë
Kundrinori i drejtëAlush Kryeziu
 
Programming Languages
Programming LanguagesProgramming Languages
Programming LanguagesEgzon Mustafa
 
Menyrat dhe kohet e fojes si dhe zhgjedhimi i tyre ne veta
Menyrat dhe kohet e fojes si dhe zhgjedhimi i tyre ne vetaMenyrat dhe kohet e fojes si dhe zhgjedhimi i tyre ne veta
Menyrat dhe kohet e fojes si dhe zhgjedhimi i tyre ne vetaValmir Nuredini
 
Ditari ne vite by irenakotobelli
Ditari ne vite by irenakotobelliDitari ne vite by irenakotobelli
Ditari ne vite by irenakotobelliirena kotobelli
 
Siguria ne internet
Siguria ne internetSiguria ne internet
Siguria ne internetRinorbislimi
 
software hardware
software hardwaresoftware hardware
software hardwareFred Kapo
 
Ndërtimi i bazës së të dhënave në programin Access
Ndërtimi i bazës së të dhënave në programin AccessNdërtimi i bazës së të dhënave në programin Access
Ndërtimi i bazës së të dhënave në programin AccessRexhino Kovaci
 
paisjet hyrëse dhe dalëse
paisjet hyrëse dhe dalësepaisjet hyrëse dhe dalëse
paisjet hyrëse dhe dalëseEgzon Deda
 
Syprina e trekëndëshit
Syprina e trekëndëshitSyprina e trekëndëshit
Syprina e trekëndëshitRamiz Ilazi
 
C++ permbledhje detyrash-v-neziri-r-dervishi-fiek
C++ permbledhje detyrash-v-neziri-r-dervishi-fiekC++ permbledhje detyrash-v-neziri-r-dervishi-fiek
C++ permbledhje detyrash-v-neziri-r-dervishi-fiekXhelal Bislimi
 

What's hot (20)

Bazat e Te Dhenave - ACCESS
Bazat e Te Dhenave  - ACCESSBazat e Te Dhenave  - ACCESS
Bazat e Te Dhenave - ACCESS
 
Java Script (shqip)
Java Script (shqip) Java Script (shqip)
Java Script (shqip)
 
Kundrinori i zhdrejtë me parafjalë
Kundrinori i zhdrejtë me parafjalëKundrinori i zhdrejtë me parafjalë
Kundrinori i zhdrejtë me parafjalë
 
Programet kompjuterike
Programet kompjuterikeProgramet kompjuterike
Programet kompjuterike
 
Kundrinori i drejtë
Kundrinori i drejtëKundrinori i drejtë
Kundrinori i drejtë
 
Programming Languages
Programming LanguagesProgramming Languages
Programming Languages
 
Menyrat dhe kohet e fojes si dhe zhgjedhimi i tyre ne veta
Menyrat dhe kohet e fojes si dhe zhgjedhimi i tyre ne vetaMenyrat dhe kohet e fojes si dhe zhgjedhimi i tyre ne veta
Menyrat dhe kohet e fojes si dhe zhgjedhimi i tyre ne veta
 
Html tabelat
Html tabelatHtml tabelat
Html tabelat
 
Syprina e trapezit
Syprina e trapezitSyprina e trapezit
Syprina e trapezit
 
Gjuha c++
Gjuha c++Gjuha c++
Gjuha c++
 
Ditari ne vite by irenakotobelli
Ditari ne vite by irenakotobelliDitari ne vite by irenakotobelli
Ditari ne vite by irenakotobelli
 
Siguria ne internet
Siguria ne internetSiguria ne internet
Siguria ne internet
 
03 web sherbimet
03 web sherbimet03 web sherbimet
03 web sherbimet
 
software hardware
software hardwaresoftware hardware
software hardware
 
Ndërtimi i bazës së të dhënave në programin Access
Ndërtimi i bazës së të dhënave në programin AccessNdërtimi i bazës së të dhënave në programin Access
Ndërtimi i bazës së të dhënave në programin Access
 
paisjet hyrëse dhe dalëse
paisjet hyrëse dhe dalësepaisjet hyrëse dhe dalëse
paisjet hyrëse dhe dalëse
 
Plan biznesi
Plan biznesiPlan biznesi
Plan biznesi
 
ANALIZE ..."ZONJA BOVARI "
ANALIZE ..."ZONJA BOVARI "ANALIZE ..."ZONJA BOVARI "
ANALIZE ..."ZONJA BOVARI "
 
Syprina e trekëndëshit
Syprina e trekëndëshitSyprina e trekëndëshit
Syprina e trekëndëshit
 
C++ permbledhje detyrash-v-neziri-r-dervishi-fiek
C++ permbledhje detyrash-v-neziri-r-dervishi-fiekC++ permbledhje detyrash-v-neziri-r-dervishi-fiek
C++ permbledhje detyrash-v-neziri-r-dervishi-fiek
 

Skripta HTML 5+CSS

  • 1. Gjimnazi “ Gjon Buzuku “ Prizren Ismail Kuksi GJUHA PROGRAMUESE HTML+CSS Prizren, 2017
  • 2. - 2 - PARATHËNIE Skripta është shkruar si një përmbledhje e ligjëratave të mbajtura nga lënda e Teknologjisë së Informacionit dhe e Komunikimit për klasat e 12-ta në Gjimnazin “ Gjon Buzuku “ në Prizren, gjithashtu është i përshtatur planprogramit mësimor të përcaktuar nga MASHT-i për nxënësit e klasës së XII nga lënda TIK-12. Skripta gjithashtu, është dedikuar për nxënësit si material(literaturë) për të plotësuar ligjratat nga kjo lëndë. Në këtë skriptë përfshihet të mësuarit e HTML-së dhe CSS-së, si dhe ushtrime praktike për dizajnimin e ueb faqes ose të ueb sajtit. Skripta është dedikuar për përdoruesit fillestarët dhe të nivelit mesatar në dizajnimin e ueb sajtit, si dhe për ata që kurrë nuk kanë hapur një editor për dizajnimin e një ueb faqes, gjithashtu skripta mund të jetë e përshtatshme edhe për përdoruesit të cilët nuk merren me ueb dizajn, por ndonjëherë kanë nevojë të prezentojnë ndonjë përmbajtje reklamuese në Internet përmes HTML ose CSS-së. Ne këtë skriptë lexuesi do të mësojë etiketat si dhe atributet e tyre në dizajnimin e strukturës dhe përmbajtjes të ueb faqes me anë të gjuhës programuese HTML dhe CSS, si dhe menaxhimin e vetë strukturës të ueb faqes. Pas kalimit e gjithë përmbajtjes së skriptës përdoruesi do të ketë njohuri për të kuptuar dhe për të bërë vetë një ueb faqe ose një ueb sajt. Autori Msc. Ismail Kuksi Për korrespondencë: e-mail: ismailkuksi@gmail.com
  • 3. - 3 - PËRMBAJTJA 1. HYRJE NE GJUHËN PROGRAMUESE HTML .....................................- 5 - 1.1 KRIJIMI NJË DOKUMENTI NË HTML...................................................................- 6 - 1.2 SINTAKSA E ELEMENTEVE NË HTML ................................................................- 8 - 1.3 STRUKTURA E NJË PROGRAMI NË HTML .........................................................- 9 - 1.4 SHKRIMI I HTML PROGRAMIT ...........................................................................- 11 - 1.5 ETIKETAT (TAG-S) NË GJUHËN PROGRAMUESE HTML...............................- 13 - 1.6 KRYETITULLI I UEB FAQES ..............................................................................- 14 - 1.7 NGJYROSJA E PRAPAVIJËS SË UEB FAQES.....................................................- 15 - 1.8 HTML STILET.........................................................................................................- 19 - 1.8.1 HTML Text Color.................................................................................................- 19 - 1.8.2 HTML Text Fonts .................................................................................................- 20 - 1.8.3 HTML Text Size ....................................................................................................- 20 - 1.8.4 HTML Text Alignment.........................................................................................- 21 - 1.9 KODI BURIMOR I PROGRAMIT TË SHKRUAR NË HTML ..............................- 22 - 2. INSERTIMI DHE FORMATIZIMI I TEKSTIT NË UEB FAQE............- 24 - 2.1 SHTIMI I PARAGRAFIT DHE THYERJA E TEKSTIT .......................................- 24 - 2.2 RRAFSHIMI I TEKSTIT– ATRIBUTI ALIGN.......................................................- 26 - 2.3 LLOJI I FONTIT NË TEKST DHE ATRIBUTET E TIJ .........................................- 26 - 2.4 STILET E TEKSTIT ................................................................................................- 29 - 2.5 TEKSTET SI CITATE NË HTML..........................................................................- 32 - 3. INSERTIMI I VIJËS HORIZONTALE NË UEB FAQE .......................- 35 - 4. TEKSTE TË LISTUARA.....................................................................- 37 - 4.1 LISTA TË PA NUMËRUARA .................................................................................- 37 - 4.2 LISTA TË NUMËRUARA .......................................................................................- 38 - 4.3 NDARJET BRENDA LISTAVE ..............................................................................- 40 - 4.4 LISTA TË DEFINUAR.............................................................................................- 41 - 5. TABELAT NË UEB FAQE .................................................................- 44 - 5.1 KRIJIMI I TABELËS...............................................................................................- 44 - 5.2 ATRIBUTET E TABELAVE....................................................................................- 46 - 6. INSERTIMI I LINK-UT NË UEB FAQE.............................................- 52 - 6.3 LINK-U PËR KRIJIMIN E NJË BOOKMARK-U NË NJË UEB FAQE ................- 54 - 6.4 LINK-U PËR NJË E-MAIL ADRESE NË UEB FAQE ...........................................- 54 - 6.6 LINKU PËR TË HAPUR NJË FOTOGRAFI NË UEB FAQE................................- 56 - 7. INSERTIMI I FOTOGRAFISË NË UEB FAQE....................................- 58 - 8. INSERTIMI I MULTIMEDIAVE NË UEB FAQE ................................- 62 - 8.1 INSERTIMI I NJË VIDEO FAJLI ............................................................................- 62 -
  • 4. - 4 - 8.2 INSERTIMI I NJË AUDIO FAJLI............................................................................- 63 - 9. KRIJIMI I KORNIZAVE (FRAME) NË UEB FAQE ...........................- 69 - 10. KRIJIMI I FORMULARËVE (FORM) NË UEB FAQE......................- 74 - 11. PËRMBLEDHJE ...............................................................................- 84 - 12. HTML STILET – CSS........................................................................- 87 - 12.1 STRUKTURA DHE SINTAKSA E GJUHËS CSS...............................................- 89 - 12.2 SELEKTORËT DHE DEKLARATAT...................................................................- 90 - 12.3 LIDHJA E CSS STILIT NË HTML KOD .............................................................- 91 - 12.4 SELEKTORËT NË CSS.........................................................................................- 97 - 12.5 KOMENTET NË CSS ..........................................................................................- 102 - 12.6 PRAPAVIJA NË CSS (BACKGROUND) ..........................................................- 103 - 12.6.1 Shkurtimi i shënimit të karakeristikave të prapavijës –( background - shorthand property)........................................................................................................................- 107 - 12.7 DIV dhe SPAN elementet në HTML dhe CSS ....................................................- 108 - 13. FORMATIMI I TEKSTIT NË CSS ...................................................- 110 - 13.1 NGJYRA E TEKSTIT...........................................................................................- 110 - 13.2 STILET E FONTIT NË CSS .................................................................................- 111 - 13.3 MADHËSIA E SHKRONJAVE TË FONTIT NË CSS ........................................- 112 - 13.4 PESHA DHE STILI I SHKRIMIT NË CSS.........................................................- 114 - 13.5 RRAFSHIMI I TEKSTIT, HAPËSIRA NË MES SHKRONJAVE DHE RRESHTAVE, SHTYRJA DHE LARTËSIA E RRESHTAVE TË TEKSTI ..............- 116 - 13.6 SHKRONJAT E MËDHA DHE TË VOGLA NË CSS ........................................- 119 - 13.7 FORMA E SHKURTËR E DEKLARIMIT TË VETIVE(ATRIBUTEVE) TË TEKSTIT ME VETËM NJË KOMANDË ....................................................................- 121 - 13.8 KUFIZIMI I PARAGRAFIT ME TEKST (BOX MODEL) NË CSS..................- 123 - 14. FORMATIMI I TEKSTEVE TË LISTUARA NË CSS.......................- 129 - 15. FORMATIMI I TABELAVE NË CSS...............................................- 133 - 16. FORMATIMI I LINKËVE NË CSS ..................................................- 135 - 17. FORMATIMI I FOTOGRAFISË NË CSS ........................................- 139 - 18. FORMATIMI I FORMULARIT(FORMS) NË CSS...........................- 141 - LITERATURA.......................................................................................- 147 -
  • 5. - 5 - 1. HYRJE NE GJUHËN PROGRAMUESEHTML Gjatë njëzet viteve të fundit, ueb faqet në Internet janë bërë shumë të përhapur dhe janë mediumet kryesor të komunikimit, së pari përmes kompjuterit personal, dhe pastaj edhe nga telefonat mobil. Ndryshe nga mediat konvencionale, ueb faqet ofrojnë mundësinë e publikimit të përmbajtjes për secilin përdorues, me një pagesë të papërfillshme ose me asnjë shpenzim financiar. HTML ( HyperText Markup Language ) është një gjuhë e thjeshtë programuese që bazohet në kode për të përshkruar një ueb faqe. HTML përdoret për të krijuar dokumente me strukturë HyperText. Një dokument HyperText përmban informacion që është i ndërlidhurn me dokumente të tjera, duke na lejuar ne të kalojmë nga njëri dokument në tjetrin duke shfrytëzuar të njëjtin aplikacion që po përdornim për të parë dokumentin fillestar. Programi i shkruar në HTML është një ueb dokument(fajl) që ndryshe quhet Web Page (ueb faqe), nëse janë më shumë ueb faqe të lidhura mes veti, quhet Web Site (uebsajt). Programet(kodet) të shkruara me anë të gjuhës HTML paraqesin një standard për shfaqjen e dokumenteve përmes një browseri (shfletuesi) në Internet. Faqet HTML janë thjeshtë fajlla tekstuale të cilët përmbajnë udhëzime se si do të shfaqet ueb faqja në shfletues të Internetit. Për përshkrimin e elementeve në ueb faqe shfrytëzohen ETIKETA-t (ang. TAG-s). Grumbulli i këtyre HTML etiketave në dokumente interpretohen dhe shfaqen nga shfletues (browser) të ndryshëm, si p.sh. Internet Explorer, Google Chrom apo Firefox. Një program i thjeshtë i shkruar me kodin HTML duket: <!DOCTYPE html> <html> <body> <h1>Programimi në HTML</h1> <p>Hyper Text Markup Language</p> </body> </html> Me zhvillimin e rrjetit të Internetit ka ardhë deri te rritja e përdorimit të Ueb Site-ve, që ka shtyrë zhvillimin më të hovëshëm të dizajnimit të ueb faqeve. Këto ueb faqe janë të lidhura në mes veti me tekste të quajtur – Hypertekst. Hipertekstet në të vërtet janë një bashkësi e faqeve të përmbledhura në një databazë, të lidhur mes veti me vegëza të quajtur
  • 6. - 6 - Link ose Hyperlink, dhe të cilët janë të vendosura në çdo faqe të ueb dokumentit. Me klikimin në këto linqe kalohet drejtëpërdrejtë në leximin e faqes përkatëse të lidhur me faqen ku është linku. HTML ueb faqet janë fajlla teksti të zakonshëm që mund të shkruhen në çfarëdo editor teksti si psh, NotPad, WordPad, TextEdit etj. Dhe pastaj të ruhen me formatin ose prapashtesën .html. Në vend të këtyre editorëve të thjeshtë mund të përdorim edhe editorë vizual për krijimin e ueb faqeve sikurse që janë: Macromedia Dreamweaver ose Microsoft Frontpage. Editorët vizual të ueb faqeve quhen edhe WYSIWYG editor. (What You See Is What You Get). Me WYSIWYG editorë nuk keni nevojë shumë të mësoni HTML, por çdonjëri që dëshiron të merret seriozisht me ueb dizajn duhet patjetër të njohë mirë gjuhën programuese HTML, sepse HTML është baza e çdo ueb faqeje dhe gjithçka fillon prej saj. Kur të përvetësoni bazat e gjuhës programuese HTML dhe CSS atëherë mund të kaloni në mësimin e një gjuhe programuese më të lartë si p.sh. JavaScript ose PHP për dizajnimin e ueb faqeve dinamike më të avancuara, që inkoroptohen në HTML. 1.1 KRIJIMI NJË DOKUMENTI NË HTML Për krijimin e një ueb faqes, krejt çka na nevojitet praktikisht i kemi të instaluar në kompjuter së bashku me Sistemin Operativ. Për të shkruar programin në HTML na duhet një editor të thjeshtë teksti si psh. Notepad (PC) ose TextEdit (Mac). Për të egzekutuar(interpretuar) programin e shkruar si tekst në Notepad na duhet një ueb shfletues(Browser). Qëllimi i një ueb shfletuesi (të tilla siç janë Google Chrome, Internet Explorer, Firefox, Safari dhe Opera) është për të lexuar HTML dokumentet dhe për të shfaqur ose treguar ato si ueb faqe. Google Chrome Internet Explorer Firefox Safari Opera Shfletuesit nuk tregojnë HTML etiketat, por përdorin etiketat për t'u treguar/shfaqur përmbajtjen e HTML dokumentit si ueb faqe për përdoruesit. Duhet të kemi parasysh se shfletuesit të ndryshëm interpretojnë në mënyra të ndryshme HTML etiketat p.sh dokumenti i shkruar në HTML si më lartë kur hapet me browser duket:
  • 7. - 7 - Nëse më parë nuk keni përdorur Notepad-in, atëherë atë mund të gjeni në menynë (Start→Accessories→Notepad). Së fundi na duhet edhe një prej programeve për përpunimin e grafikës si p.sh. CorelDraw dhe një prej programeve për përpunimin e fotografisë si p.sh Photoshop për të na mundësuar të krijohen dhe të shikohen fajllat grafik dhe imazhet të cilat do të vendosim në ueb prezantim. HTML dokumentet siç thamë edhe më parë janë të përpiluar nga shumë elemente të përshkruara me Etiketa (Tags) të cilët kontrollojnë çdo element-objekt që duket në ueb faqe. Një etiketë në të vërtet është një komandë që tregon shfletuesit se çka të krijonë, si të krijon dhe në çfarë mënyre të shfaqë elementin-objektin në shfletues (browser). Etiketat për kodim në HTML zakonisht quhen - HTML etiketa. o HTML etiketat si p.sh.etiketa <html> përbëhen nga fjala kyçe (emrat e etiketave) të rrethuara me kllapa kënd ose simbole si ‘<‘ dhe ‘>‘, o HTML etiketat sikurse që është etiketa <b> dhe </ b> shkruhen normalisht në çifte, o Etiketa e parë në fillim të elementit është etiketa e fillimit (fillor), ndërsa etiketa e dytë në fund të elementit është etiketë e përfundimit ose (fundor), o Etiketa fundore është shkruar njejtë si etiketa fillore <etiketa> por me një vijë të pjerrët / (back-slash) përpara etiketës si </etiketa>si psh. o < emri i etiketës> përmbajtja e elementit-objektit </emri i etiketës> HTML etiketat mund të shkruhen me shkronja të vogla ose të mëdha, kjo nuk ka ndikim te komanda, por për të ruajtur esteticitetin nuk preferohet të shkruhen me shkronja të përziera, zakonisht më së shpeshti praktikojmë që etiketat t’i shkruajmë me shkroja të vogla gjatë gjithë dokumentit. Disa verzione e Gjuhës Programuese HTML që nga ditët e para të Internetit janë:
  • 8. - 8 - 1.2 SINTAKSA E ELEMENTEVE NË HTML Për të qenë sa më i suksesshëm në shkrimin dhe përpilimin e një HTML dokumenti t’i japim disa rregulla sintaksore dhe sematike të cilat duhet në mënyrë të përpiktë të përdorim, për të mos pas probleme më vonë gjatë ekzekutimit të programit. Çdo ueb faqe përbëhet nga shumë objekte ose elemente që përshkruhen me "HTML Etiketa" dhe "HTML Elemente". Një HTML element përshkruhet në mes të etiketës fillore dhe asaj fundore, duke përfshirë edhe vetë etiketën së bashku me atributet e tij. Një HTML element është definuar si p.sh: <p> Ky është një paragraf </p> Etiketat duhet të përmbahen këtyre rregullave: o Një element në HTML fillon me një etiketë e hapjes në fillim të dokumentit. o Një element në HTML përfundon me një etiketë të mbylljes në fund të dokumentit. o Përmbajtja e çdo elementi është në mes të etiketës fillore dhe fundore. o Disa prej elementeve në HTML kanë përmbajtje të zbrazët. o Elementet e zbrazëta janë të mbyllura në etiketën e fillimit. o Elementet në HTML etiketa mund të kenë edhe atributet e tyre. o Atributet sigurojë informata shtesë në lidhje me një element. o Atributet janë të vendosur gjithmonë në etiketën fillore. o Atributet e etiketës shtohen me emër dhe vlerë. o Vlerat e atributeve duhet të jenë gjithmonë të mbyllura me thonjëza. o Thonjëzat e dyfishta janë më të zakonshme, por edhe thonjëzat e vetme janë të lejuara gjithashtu. o Komentet mund të futen në dokumentin HTML për ta bërë atë më të lexueshëm dhe të kuptueshëm. Komentet janë të injoruar nga shfletuesët dhe nuk shfaqen në ueb faqe. Atributet e HTML-së shfrytëzohen për zgjerimin e veprimit të etiketave. Kemi lloje të ndryshme të atributeve: Verzionet Viti HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 XHTML5 2013
  • 9. - 9 - o Class - atributet ose ID atributi o Name - atributet o Href - atributet o Src - atributet o Value - atributet o Stil - atributet o Align - atributet o Valign - atributet Çdo HTML dokument fillon me etiketën <html> e cila njofton shfletuesin që fajlli i posa filluar për lexim është një HTML dokument, dhe si i tillë duhet të tregohet në shfletues. Në fund të HTML dokumentit vendoset etiketa fundore </html> me të cilën përfundon HTML dokumenti. Çdo etiketë për shtimin e një elementi në ueb dokument fillon me kodin brenda shenjave < > (etiketa fillore), dhe mbaron me kodin e njëjtë brenda shenjave < > por duke shtuar edhe vijën e pjerrët / përpara kodit brenda shenjave </ > (etiketa fundore). Disa HTML elemente mund të shfaqin përmbajtjen me korrektësi edhe në qoftë se ju keni harruar etketën fundorë si psh. <p> Ky është një paragraf Shembulli i më sipërm punon në shumë browser pa problem, sepse etiketa fundore konsiderohet e nënkuptuar. Por çdo herë mos u mbështeteni në këtë, shumë HTML elemente do të japin rezultate të papritura ose gabime në qoftë se ju harroni të mbydhni elementin me etiketën fundore. 1.3 STRUKTURA E NJË PROGRAMI NË HTML Në fillim të çdo dokumenti në HTML 5.0 vendoset një koment (deklaratë) <!DOCTYPE>. Deklarata <!DOCTYPE> ndihmon shfletuesit për të shfaqur një ueb faqe në mënyrë të saktë. Ka shumë lloje të dokumenteve në Internet, një shfletues mund të shfaq 100% në mënyrë korrekte një faqe e HTML-së dokumentit, nëse ajo e di llojin dhe versionin e përdorur të HTML-së. Deklarata <! DOCTYPE> është mbështetur nga të gjithë shfletuesit browser-ët kryesore si: Etiketa <DOCTYPE!> nuk ka një etiketë fundor. Gjithashtu shkrimi i etiketës <DOCTYPE!> ose <doctype!> nuk është e ndjeshme në shkronjat e vogla apo të mëdha. Gjithmon shtoni deklarimin <!DOCTYPE> në HTML dokumente, ashtu që shfletuesi të di
  • 10. - 10 - se çfarë lloji të dokumentit e presin. Në HTML5 deklarimi shkruhet: <!DOCTYPE html>. Çdo HTML dokument përbëhet prej dy pjese: o ballina(ang. Head) dhe o trupi (ang. Body), Pjesa e ballinës së dokumentit fillon me etiketën <head> dhe mbaron me </head>, ndërsa pjesa e trupit të dokumentit fillon me etiketën <body> dhe mbaron me </body>. Tekstin që shkruani në mes të etiketave <head> dhe </head> tregohet në pjesën e sipërme të HTML dokumentit, në dritaren e shfletuesit të juaj, dhe zakonisht shfrytëzohet për të dhënë kryetitullin e uebsajtit që dizajnohet. Brenda etiketave të hederit të dokumentit vendoset etiketa e titullit të dokumentit (ueb faqes) në mes të etiketave: <title> dhe </title>. Titulli i dokumentit tregohet në shiritin e titullit të dritares së shfletuesit. Etiketa <title> përcakton titullin e dokumentit dhe është e nevojshme në të gjitha HTML / XHTML dokumentet. Etiketa<title>: o përcakton një titull në shiritin e tiullit të browser-it (shfletuesit), o siguron një titull për ueb faqen, kur ajo është shtuar në të preferuarat, o tregon një titull për ueb faqe, në rezultatet e kërkimit te makina kërkuese. Komentet mund të insertohen në HTML programe për të bërë ate më të lexueshëm dhe më të kuptueshëm. Komenti nga ana e browserit nuk merret parasysh dhe nuk shfaqen në ueb faqe. Komentet në HTML dokument shkruhen në këtë formë: <! - - Komenti ... - - > Rezultati pas hapjes në shfletues, duket:
  • 11. - 11 - Struktura themelore eueb faqes, përbëhet nga këto etiketa: Etiketa Përshkrimi <html> </html> Etiketa fillore dhe fundore e një ueb faqeje. E identifikon se dokumenti përdorë HTML format. <head> </head> Etiketat në mes të cilëve vendosen informatat në lidhje me ballinën e uebfaqes gjegjësisht të uebsajtit <title> </title> Etiketat në mes të cilëve vendoset titulli i fajllit HTML. Përmbajtja në mes këtyre etiketave shihet te Title Bar-i të dritares së editorit. <body> </body> Etiketat në mes të cilëve vendoset përmbajtja e dokumentit si psh. tekste, tabela, grafikë, linçe etj. Në strukturën e çdo dokumenti të shkruar në gjuhën HTML, etiketat kryesorë që përkufizojnë atë duhet të renditur në këtë mënyrë: <!DOCTYPE html> <html> <head> <title>Këtu vendosim titullin e Ueb faqes</title> </head> <body>Këtu vendosim çdo gjë që duhet të shihet në ueb faqe </body> </html> Shkrimi i kodit për HTML dokument bëhet në editorin Notpad ose TextEdit. 1.4 SHKRIMI I HTML PROGRAMIT Për shkrimin e programit në HTML rekomandohet tekst editori Notepadnë (PC) ose TextEditnë (Mac). Por HTML mund të shkruhet edhe me një editor profesional si p.sh: o Adobe Dreamweaver o Microsoft Expression Ueb o CoffeeCup HTML Editor etj. Rruga më e lehtë për të mësuar gjuhën HTML është duke përdorur një editor të thjesht teksti. Për të parë se si duket kjo në një ueb dokument të marrim një shembull konkretë të
  • 12. - 12 - shkruar në editor të tekstit NotePad. Para se të startoni së pari krijoni një follder për ushtrime me emrin p.sh. Ushtrimet_praktike në këtë mënyrë: 1. Klikoni me tastin e djathtë në butonin Start të shiritit Taskbar në Desktop, 2. Klikoni në menyn e paraqitur te opsioni Explorer, 3. Në panelin e paraqitur zgjedhe diskun ku dëshiron të vendos follderin në fjalë, psh. My Documents, 4. Pastaj zgjedhe opsionin New → Folder, 5. Kur krijohet follderi i ri emërtoni follderin me emrin Ushtrime_praktike, si në foto. Tani ju keni një follder ku do të ruani ushtrimet e juaja praktike në krijimin e ueb dokumentit dhe elementet e saj. Për të filluar së shkruari të një program në HTML hapim editorin e tekstit NotPad. Kur të hapet editori i tekstit NotePad, fillojmë të shkruajmë programin si në vijim: <!DOCTYPE html> <html> <head> <title>prova 1</title> </head> <body>Mësimi i gjuhës HTML </body> </html> Pastaj këtë fajll i ruajmë me formatin HTML, me emrin prova dhe me prapashtesë .html ose .htm si në shembullin e më poshtëm:
  • 13. - 13 - Tani edhe emri i fajllit ndëron në prova.html si më poshtë nëfotografi: Dhe pastaj këtë fajll i hapim me shfletuesin Internet Explorer, me emrin prova 1.html, dhe ueb faqja e krijuar do të duket: ose me një shfletues tjetër Google Chrom: Mos u shqetësoni nëse në shembuj e përdorni etiketat që ju nuk e keni mësuar. Ju do të mësoni rreth tyre në kapitujt e ardhshëm.! 1.5 ETIKETAT (TAG-S) NË GJUHËN PROGRAMUESE HTML HTML dokumentet përbëhen prej shumë etiketave dhe tekstit të shkruar brenda tyre. Forma e dukjes së tekstit në ueb dokument varet nga shkrimi i saktë i etiketave. Etiketat mund të shkruhen me shkronja të mëdha <BODY>, të vogla <body>, të nxirë <body>, të pjerrët <body>, ose të përzier <BoDy>, varet nga stili i përdoruesit, por gjithnjë preferohet në një dokument të përdoret një stil i njëjtë, dhe zakonisht me shkronja të vogla të shtypit gjatë gjithë kodit të programit në HTML. Çdo etiketë siç kemi përmendë edhe më lartë përbëhet nga etiketa fillore dhe etiketa fundore si psh. < b>Tungjatjeta unë jam Agimi </b> ↑ ↑
  • 14. - 14 - etiketa fillore etiketa fundore Mënyra e etiketimit të elementeve mund të ketë dy forma të kodimit. Më së miri mund të vërejmë në shembullin vijues: 1. Sot është <b>dita</b> e parë e mësimit, si rezultatë do të duket: 1. Sot është dita e parë e mësimit. 2. Sot është <b>dita<b>e parë e mësimit, si rezultatë do të duket: 2. Sot është dita e parë e mësimit Etiketa për të nxirë vetëm fjalën ‘dita’ te fjalia e parë është e shkruar saktë, ndërsa etiketa për të njëjtin qëllim te fjalia e dytë është shkruar gabim, ku teksti edhe pas fjalës ‘dita’ ka vazhduar të jetë i nxirë. Po mirë ku është gabimi? Gabimi është se kemi harruar të mbyllim etiketën fundore <b> me shenjën ‘/ ’, pra </b>. Gjithnjë duhet pasur kujdes gjatë shkrimit të etiketave mos të harrojmë ndonjë shenjë të kodeve. Teksti që shkruajmë brenda etiketave mund të jetë në çfarëdo gjatësie dhe me çfarëdo lloje të shkrimit. Në dritaren e shfletuesit teksti thyhet varësisht nga gjerësia e dritares, duke lëvizur skajin e dritares majtas (thyhet rreshti i tekstit) ose djathtas (hapet rreshti i tekstit) në shfletues, si në shembullin e më poshtëm - prova 2.htm. Ose kur zvogëlohet gjerësia e dritares së shfletues-it : 1.6 KRYETITULLI I UEB FAQES Çdo Ueb faqe duhet të ketë së paku një kryetitull i cili dallohet nga teksti vijues për nga madhësia, lloji dhe ngjyra e shkronjave. Titujt janë të rëndësishme në dizajnimin e një ueb faqes. Makinat kërkuese në Internet përdorin titujt për indeksimin e strukturës së
  • 15. - 15 - përmbajtjeve të faqeve në ueb. Vetë përdoruesi mund të gjejë(hapë) ueb faqet nga titujt e tyre, prandej është e rëndësishme që të përdorin titujt për të treguar strukturën e dokumentit. Kryetitulli (ang. Headers) në ueb faqe koordinohet sipas madhësisë së karaktereve me vlera prej ( h1 – h6 ). Etiketa për caktimin e madhësisë së kryetitullit jepet në këtë formë: <hn> Kryetitulli <hn> ku n merr vlera prej (1 – 6) Etiketa <h1> definon titullin shumë të rëndësishëm, etiketa <h6> definon titullin më pak të rëndësishëm. Teksti në mes të <hn> dhe </ hn> shfaqet si një kryetitull në atë faqe. Në tabelën e më poshtme mund të shohim këto madhësi te titujve: Titulli i insertuar zakonisht është i rrafshuar nga ana e majtë e faqes. Nëse dëshirojmë të ndryshojmë rrafshimin e titullit, në qendër, majtas ose në anën e djathtë të faqes atëherë përdorim etiketat shtesë fillore <center>, <left> ose <right> dhe pas kryetitullit i shtojmë etiketat fundore </center>, </left> ose </right> si psh. <h1><left> informatika </left></h1> <h3><right> informatika </right></h3> <h6><center> informatika </center></h6> 1.7 NGJYROSJA E PRAPAVIJËS SË UEB FAQES Nga shembulli i mëparshëm të ueb faqes, vërejmë se prapavija e tekstit është e bardhë dhe teksti i zi. Duke pas parasysh se te ueb faqet prapavija (backgraund-i) dhe tekstet kanë ngjyra të ndryshme, atëherë për të bërë këtë duhet të ndryshojmë disa atribute te etiketat
  • 16. - 16 - <body>. Atributet vehen në etiketën fillestare dhe shërbejnë për të përshkruar më detalisht etiketën e dhënë. Për shembull nëse dëshirojmë të ndryshojmë prapavijën e faqes në ngjyrë të verdhë, atëherë brenda etiketës <body>i shtojmë: <body bgcolor=” yellow”> Se si përdorim në program shihet nga shembulli vijues-prova 3.html: Rezultati pas hapjes me shfletues, duket: Siç po shihet se ngjyra e prapavijës po ndryshon me vënjen e atributit bgcolor në etiketën <body>. Pas çdo atributi vendosim shenjën e barazimit ( = ) e cila na mundëson vënien e vlerave të atributit, vlera e atributit nëse është tekst gjithnjë vihet brenda thonjëzave. Ngjyrat e prapavijës mund të definohen në dy mënyra me tekst (yellow) ose me numra heksadecimal (#ffff00) të cilat i kemi në tabela të krijuara, për çdo ngjyrë. Një atribut tjetër i etiketës <body>mund të jetë edhe ngjyra e tekstit. Atëherë atributin e ngjyrës së tekstit vendosim në këtë mënyrë te etiketa <body>. <body bgcolor=” yellow” text=”blue”> Se si përdorim në program shihet nga shembulli vijues-prova 4.html:
  • 17. - 17 - Rezultati pas hapjes me shfletues,, duket: Në prapavijën e ueb faqes mund të vendosim edhe fotografi nëse më parë atë kemi të ruajtur në kompjuterin tonë, në follderin ku i kemi edhe ueb faqen. Atributi në etiket në këtë rast do të jetë si background. Duhet të kemi kujdes mos të ngatërrojmë me atributin bgcolor. Etiketa për vënien e fotografisë në prapavijën e ueb faqës do të duket: <body background ="file:///C:/Users/ismail/Desktop/natyra.jpg"> ose nëse fotografinë i kemi ruajtur në follderin e njëjtë me ueb dokumentin atëherë etiketa së bashku me atributet e gjerësisë dhe të lartësisë, duket si vijon: <body background="natyra.jpg" width="100" hight="30"> Se si përdorim në program shihet nga shembulli vijues- prova 5.html: Rezultati pas hapjes me shfletues, duket si vijon:
  • 18. - 18 - Në tabelën e më poshtëm i keni 16 ngjyra themelore që përdorim në HTML dokumente: ose nëse përdorim vlera heksadecimale për ngjyra. Black #000000 Grey #808080 Navy #000080 Olive #808000 Blue #0000FF Red #FF0000 Teal #008080 Yellow #FFFF00 Aqua #00FFFF Fuchsia #FF00FF Green #008000 Purple #800080 Lime #00FF00 White #FFFFFF Maroon #800000 Silver #C0C0C0 Se si vendoset një ngjyrë në kodin heksadecimal në prapavijë të ueb faqes shohim në këtë shembull – prova 6.html: Rezultati pas hapjes me shfletues, duket si vijon:
  • 19. - 19 - 1.8 HTML STILET Çdo element në HTML ka stilin e nënkuptuar-paracaktuar psh. (prapavija e bardhë, ngjyra e tekstit i zi, madhësia e shkronjave 12 px ...). Ndryshimi i stilit të nënkuptuar të elementit HTML mund të bëhet duke shtuar atributin stylenë etiketën e elementit. Në këtë shembull ndryshojmë ngjyrën e paracaktuar të prapavijës nga e bardhë në lightgrey. Rezultati pas hapjes nga shfletuesi duket: Atributi style i HTML elementeve ka këtë sintaksë: style="tipari:vlera" 1.8.1 HTML Text Color Tipari color definon ngjyrën e tekstit që përdoret në HTML element:
  • 20. - 20 - Rezultati pas hapjes nga shfletuesi: 1.8.2 HTML Text Fonts Tipari font-family definon fontin e tekstit që përdoret në HTML element: Rezultati pas hapjes nga shfletuesi duket: 1.8.3 HTML Text Size Tipari font-sizedefinon madhësin e tekstit që përdoret në HTML element:
  • 21. - 21 - Rezultati pas hapjes nga shfletuesi: 1.8.4 HTML Text Alignment Tipari text-aligndefinon rrafshimin horizontal të tekstit që përdoret në HTML element: Rezultati pas hapjes nga shfletuesi duket: Nëse në një shembull i përdorim të gjitha stilet e përmendura më lartë:
  • 22. - 22 - Rezultati pas hapjes nga shfletuesi: 1.9 KODI BURIMOR I PROGRAMIT TË SHKRUAR NË HTML A keni parë ndonjëherë një ueb faqe dhe keni pyetë "Hej! Si e bëjnë ata këtë?" Për të mësuar klikoni me tastin e djathtë në faqe dhe zgjidhni "View Source" (Internet Explorer) ose "Page view source" (Firefox), “View page source“ (Google chrome) ose të ngjashme për shfletues të tjerë. Kjo do të hapë një dritare që përmban kodin HTML të faqes.
  • 23. - 23 - Detyra 1 – Të shkruhet programi në HTML si më poshtë, në editorin e tekstit Notpad dhe pastaj të hapet me browser për të parë rezultatin se si duket ueb faqja. Keni parasysh se duhet të hapni një follder të veçantë për disajnimin e ueb faqes, dhe në te të ruhet teksti dhe fotografia natyra.jpeg. <!DOCTYPE html> <html> <title>Detyra 1</title> <h1><center> Shkrimi i tekstit në HTML </center></h1> <body background="natyra.jpg" width="100" hight="30"> Me HTML ju mund të krijoni ueb faqen tuaj personale.<br>Mësimi i HTML – së është shumë e thjeshtë dhe e lehtë. <br>Një program i thjeshtë e shkruar me HTML në një editor, duket si këtu.<br>Teksti shkruhet brenda etiketave.<br>Gjithashtu mund të ngjyroset prapavija<br>e dritares dhe teksti. </body> </html> Rezultati pas hapjes në browser duket si vijon:
  • 24. - 24 - 2. INSERTIMIDHE FORMATIZIMI I TEKSTIT NË UEB FAQE 2.1 SHTIMI I PARAGRAFIT DHE THYERJA E TEKSTIT Shtimi i tekstit në një ueb faqe është e njëjtë sikur te çdo editor tjetër të tekstit. Teksti i shkruar në editor, nëse nuk kërkohet ndryshe, rrafshohet nga ana e majtë,është i formatizuarme formatizim të nënkuptuar (ang. default) për tekst. Teksti i shkruar në shfletues në mënyrë automatike thyhet në fund të rreshtit varësisht nga gjatësia e dritares, dhe gjithë kjo mund të duket shumë keq kur dëshirojmë që një fjali të duket e tërë në një rresht, dhe me formatizim të dëshiruar. Së parë të shohim si kalohet në rresht të ri, dhe si të fillojmë me një paragraf të ri? Kur filloni të shkruani një tekst në NotePad kalimi në rresht të ri bëhet duke shtypur tastin Enter ose Returnpor kjo nuk do të thotë se edhe te shfletues-i do të thyhet rreshti. Thyerja e rreshtit në shfletues bëhet me përdorimin e etiketës <br> që i quajmë edhe etiketë të zbrazët(bosh), sepse nuk ka nevojë të mbyllet në fundme një etiketëfundorë. Tekstet në dokumentet HTML ndahen nëpërmes paragrafëve.Paragrafët definohen me etiketën fillore <p>dhe përfundojnë me etiketën fundore</p>Kalimi në paragraf të ri në një tekst arrihet me përdorimin e etiketës <p>në fillim, dhe në fund të paragrafit mbyllet me etiketën fundor </p>.Se si përdorim në program këto dy etiketa shihet nga shembujt vijues- teksti1.htmldhe teksti2.html: Rezultati pas hapjes me shfletues, duket si vijon: Shembulli për krijimin e një paragrafi të ri duke përdorur etiketën<p> :
  • 25. - 25 - Rezultati pas hapjes me shfletues, duket: Browseri automatikisht shton një rreshtë të zbrazët para dhe pas një paragrafi. Shumica e Browser-ve edhe nëse keni haruar etiketën fundore do të shfaq HTML elementin. Një etiketë e veçantë për paragraf <pre> përdoret kur dëshirojmë të bllokojmë para formatizimin e një teksti me hapësira të strukturuara dhe thyerje të rreshtave. psh. Rezultati pas hapjes me shfletues, duket: O Atdhe! Më je i dashur sa më s’ka Më je nënë, më je motër, më je vlla. Nga ç’ka rrotull më i shtrenjti ti më je, Je më i miri nga çdo gjë që ka ky dhé.. Etiketa pre përdoret për shkrimin e një poezie:
  • 26. - 26 - 2.2 RRAFSHIMI I TEKSTIT– ATRIBUTI ALIGN Për rregullimin dhe rrafshimin e tekstit të një paragrafi përdorim etiketën <p> dhe atributet e saj: o në të majtë <p align=” left”> o nëtë djathtë <p align=” right”> o në qendër <p align=” center”> Se si përdorim në program shihet nga shembulli vijues-teksti3.html: Rezultati pas hapjes me shfletues, duket: 2.3 LLOJI I FONTIT NË TEKST DHE ATRIBUTET E TIJ Nëse nuk theksojmë në program se me çfarë font do të shkruajmë tekstin shfletuesi shfrytëzon formatizimin e nënkuptuar (default). Për caktimin e fontit të tekstit, etiketa kryesore është <font>dhe kjo mund të ketë tre atribute:face, size dhe color. Me atributin: o face- definojmë tipin e shkrimit, o size- madhësinë e shkronjave, o color- ngjyrën e shkronjave Me atributin face definojmë llojin e fontit me të cilin dëshirojmë të shkruhet teksti. Në një faqe mund të përdorim lloje të ndryshme të fonteve. Duhet pasur parasysh që fontet më parë të jenë të instaluar në kompjuter, përndryshe shfletuesi përdor fontin e nënkuptuar. Nëse psh. dëshirojmë që faqja të shkruhet me fontin "Comic Sans MS" etiketa do të duket:
  • 27. - 27 - <font face="Comic Sans MS">Teksti i shkruar </font> Në etiketën e fontit mund të vendosim edhe disa lloje të fonteve të cilat përdoren më shpesh si psh: <font face="Comic Sans MS,Arial,Courier,Verdana"> Se si përdorim në program shihet nga shembulli vijues-teksti4.html: Rezultati pas hapjes me shfletues, duket: Atributi size – përdoret për caktimin e madhësisë së shkronjave, me atributin size mund të përdorim madhësinë e shkronjave prej 1 deri 7, ( size 1, size 2, size 3, size 4, size 5, size 6, size 7). Nëse nuk i cekim në etiket atributin size atëherë vlera e nënkuptuar e madhësisë së shkronjave zakonisht është 3. Se si përdorim në program shihet nga shembulli vijues-teksti5.html:
  • 28. - 28 - Rezultati pas hapjes me shfletues, duket: Atributi color -Sa i përket atributi i ngjyrës color vlejnë rregullat enjëjtë si te etiketa body.Ngjyrat mund të shkruhen me kodin heksadecimalose me emër të ngjyrësnë gjuhën angleze.Se si përdorim në program shihet nga shembulli vijues-teksti6.html: Rezultati pas hapjes me shfletues, duket:
  • 29. - 29 - 2.4 STILET E TEKSTIT Në HTML tekst dokumentet shpesh herë përdorim edhe stilet e tekstit si: <b> bold Teksti i nxirrë <i> italic Teksti i pjerrët <u> underline Teksti i nënvizur <small> small Teksti i zvogluar <mark> marked Teksti i markuar <del> deleted Teksti i fshirë <sub> subscripts Teksti si indeks <sup> superscripts Teksti si fuqi Se si përdorim në program shihet nga shembulli vijues-teksti7.html: Rezultati pas hapjes me shfletues, duket: Nëse përpara një teksti dëshirojmë të lëmë hapësirë pa thyerje të tekstit atëherë përdorim një komandë shtesë &nbsp. Se si përdorim në program shihet nga shembulli vijues- teksti8.html:
  • 30. - 30 - Rezultati pas hapjes me shfletues, duket: Gjithashtu si stile të tekstit mund të jenë edhe tekstet tëzvogluar në krahasim me tekstin normal, me etiketën <small>të cilën epërdorim si më poshtë: Rezultati pas hapjes me shfletues duket: Ndonjë pjesë të tekstit nëse dëshirojmë të duken si të fshirë përdorim etiketën <del>
  • 31. - 31 - Rezultati pas hapjes me shfletues, duket: Ndonjëherë na duhet të theksojmë ndonjë pjesë të tekstit atëherë e markojmë ate me etiketën <mark>. Rezultati pas hapjes me shfletues, duket: Kur dëshirojmë të shkruajmë ndonjë formulë ose ekuacion në ueb faqe përdorim etiketat <sub> dhe <sup>
  • 32. - 32 - Rezultati pas hapjes me shfletues, duket: Nëse përmbledhim, në HTML etiketat më kryesorë për formatizim të tekstit janë: <p> etiketa për paragraf </p> <font> etiketa për fontin e tekstit </font> <b> teksti i nxirë </b> <i> teksti i pjerrët </i> <u> teksti i nënvizuar </u> <sup> teksti i ngritur </sup> <sub> teksti i ulur </sub> <em> teksti i pjerrët-dorës </em> <strong> teksti i theksuar </strong> <code> teksti në kod format </code> Etiketat <strong> ose <em> do të përdorim nëse ju dëshironi në një mënyrë që teksti i dhënë përdoruesi të kuptoj si "të rëndësishëm". Sot, të gjithë shfletuesit kryesore interpretojnë strong si bold dhe em si italics. T’i shohim tani në një detyrë ku do të përdorim të gjitha etiketat dhe atributet për tekst. 2.5 TEKSTET SI CITATE NË HTML o Me etiketën <q> definojmë citate të shkurtëra në tekste që zakonisht i vendosim brenda thonjëzave. Browserët zakonisht insertojn thonjëzat përeth elementit të vendosur brenda etiketës <q>. Rezultati pas hapjes së shfletuesit, duket:
  • 33. - 33 - o Me etiketën <blockquote> definojmë komplet një citat në tërësi si bllok tekst. Shfletuesi zakonisht i shtynë për brenda këtë tekst si “indent”. psh. Rezultati pas hapjes së shfletuesit, duket: o Me etiketën <address> definojmë kontakt informacionet të autorit ose të zhvilluesit të ueb faqes ose të një artikulli. Teksti zakonisht tregohet me shkronja italic. Shumica e shfletuesve vendosin nga një rresht të zbrazët në fillim dhe në fund të adresës. psh. Rezultati pas hapjes së shfletuesit, duket:
  • 34. - 34 - Detyra 2 - Të shkruhet programi në HTML për dizajnimin e ueb faqes që përmban një tekst,dhe e cila në shfletues do të ketë këtë pamje: Zgjidhja e detyrës duket si vijon: <html> <head><h1><center>Rregullimi i tekstit</center></h1> <title>Detyra 2</title></head> <body> <p align="left"><font face="Comic Sans MS" size="4" color="red"> Etiketat për rregullimin e një teksti<br><small>te ueb faqja</small></font></p> <p><b>Teksti i nxirrë-bold</b></p> <p align="center"><font face="Arial" size="2" color="navy"><i>Teksti i pjerrët- italic</i></font></p> <p align="right"><font face="Helvetica" size="1" color="green"><u>Teksti i nënvizuar- undrline</u></font></p> <p>Rregullimi i<sub> tekstit</sub> dhe <sup> atributet</sup> e tij</p> <p>Kontakt <mark>informacionet</mark> e autorit:</p> <address> <q>Ismail Kuksi</q><br> ismailkuksi@gmail.com<br> tel. <del>+37744123456</del><br> Rr.Maja e Pikëllimës 24, Prizren<br> Republika e Kosovës </address> </body> </html>
  • 35. - 35 - 3. INSERTIMII VIJËS HORIZONTALE NË UEB FAQE Vizatimi i një vije horizontale në një ueb faqe fillon me përdorimin e etiketës fillore <hr> dhe përfundon me etiketën fundore </hr>. Kjo etiket vizaton një vijë të hollë në krejt gjerësinë e faqes. Etiketa <hr> mund të ketë edhe atributet e tij: o align – rrafshimi i vijës o size – trashësia e vijës në piksela o width – gjerësiae vijës në piksela osesipasgjatësisë së dritares o color – ngjyra e vijës Se si përdorim në program shihet nga shembulli vijues- vija1.html: Rezultati pas hapjes me shfletues, duket: Nëse brenda etiketës <hr> përdorim atributet atëherë vija do të merrë formën dhe gjatësinë sipas vlerave të dhënë në atribute. Se si përdorim në program shihet nga shembulli vijues - vija2.html: Rezultati pas hapjes me shfletues, duket:
  • 36. - 36 - Detyra 3 - Të shkruhet programi në HTML për dizajnimin eueb faqes që përmban tekst dhe vija me madhësi dhe gjatësi të ndryshëm,dhe e cila në shfletues do të ketë këtë pamje: Programi do të duket si vijon <!DOCTYPE html> <html><title>Detyra 3</title> <body bgcolor=”#CCFFCC”> <p>Etiketa <b>hr</b> definon një vijë horizontale:</p> <hr></hr> <p align="right"><font face=Arial size=2>Paragrafi i parë.</font></p> <hr size="4" width="50%" color="red" align="right"</hr> <p align="center"><font face=Tahoma size=3>Paragrafi i dytë.</font></p> <hr size="8" width="50%" color="blue" align="left"></hr> <p align="left"><font face=Lucida Console size=5>Paragrafi i tretë.</font></p> <hr size="12" width="50%" color="yellow" align="center"></hr> </body> </html>
  • 37. - 37 - 4. TEKSTE TË LISTUARA Listat në gjuhën HTML krijohen për të theksuar ose ndarë tekstet ose vlerat që i kanë një strukturë dhe një lidhshmëri logjike në mes veti. Këto lista mund të jenë: o të panumëruara (ang. unordered list) o të numëruara (ang. ordered list) o të definuar (ang. definition list) 4.1 LISTA TË PA NUMËRUARA Listat të panumëruara janë listat ku ndarja e teksteve nuk ka nevojë për vendosjen e numrave rendor. Këto lista me tekste mund të përpilohen me etiketën <ul> dhe mbaron me etiketën </ul>. Ndarjet në lista bëhet me etiketën <li> e cila nuk ka nevojë për etiketë fundore </li>. Struktura e listave të pa numëruara duket si vijon: <ul> <li>elementi i parë i listës <li>elementi i dytë i listës </ul> Si shembull po marrim një ndarje të programeve të MS Office-itsi në shembullin– lista1.html: Rezultati pas hapjes me shfletues, duket:
  • 38. - 38 - Për të ndryshuar llojin e pikave të ndarjes duhet përdorur atributet e caktuar të listave. Atributet mund të jenë: o circle - rreth ● disc –rreth i mbushur ■ square –katror Se si përdorim në program shihet nga shembulli vijues – lista2.html: Rezultati pas hapjes me shfletues, duket: 4.2 LISTA TË NUMËRUARA Listat të numëruara në programpërpilohen me etiketën fillore <ol> dhe mbarojnë me etiketën fundore </ol>. Ndarjet mund të jenë me numra, shkronja të alfabetit latin ose me numra romak. Ndarjet në lista bëhet me siç thamë edhe më parë me etiketën <li> e cila nuk ka nevojë për etiketë fundore </li>. Struktura e listave të numëruara duket si vijon: <ol> <li>elementi i parë i listës <li>elementi i dytë i listës </ol> Se si përdorim në program shihet nga shembulli vijues – lista3.html:
  • 39. - 39 - Rezultati pas hapjes me shfletues, duket: Nëse nuk jemi të kënaqur me ndarjen me numra arab të cilët janë edhe si të nënkuptuar, mund të përdorni atributet e tipave tjerësi: o numra natyror ( 1, 2, ...) o shkronjat e mëdhaja (A-Z) o shkronjat e vogla (a-z) o numrat romak (I, II, III ...) o numrat romak të vogëla (i, ii, iii ...) Se si përdorim në program shihet nga shembulli vijues – lista4.html: Rezultati pas hapjes me shfletues, duket:
  • 40. - 40 - 4.3 NDARJET BRENDA LISTAVE Nëse kërkohet të krijohen ndarjet ose listat brenda ndarjes kryesore atëherë programi përpilohet në këtë formë si për shembull – lista 5.html: Rezultati pas ekzekutimit me shfletues duket: Nëse tani dëshirojmë ndarjet të bëhen me numra atëherë përpilojmë një program të tillë si në shembullin vijues – lista6.html: Rezultati pas ekzekutimit me shfletues duket si vijon:
  • 41. - 41 - Gjatë dizajnimit të faqeve ku kemi disa lloje të ndarjeve ose listimeve, mund të përdorim edhe lista të kombinuar të numëruar dhe të panumëruar së bashku, si në shembullin vijues – lista7.html: Rezultati pas hapjes me shfletues, duket si vijon: 4.4 LISTA TË DEFINUAR Gjatë punës me ueb faqe mund të përdorim edhe ndarjet me tekste duke dhënë prapë përshkrimin me tekst, këtë formë të ndarjeve i quajmë lista të definuar. Lista të definuar do të përpilohen nëse përdorim etiketat: <dl>- Etiketa fillore dhe fundore të listave të definuar <dt>- Etiketa për definimin e termit (koka e definicionit) <dd> - Etiketa për përshkrimin e definicionet Struktura e përpilimit të listave të definuar duket si vijon: <dl> <dt>termi 1</dt><dd>përshkrimi i termit 1</.dd> <dt>termi 2</dt><dd>përshkrimi i termit 2</.dd> . . . . . </dl> Ku termet rrafshohen nga ana e majtë por përshkrimet paraqiten në rresht të ri dhe janë brenda për disa karakter.Se si përdorim në program shihet nga shembulli vijues – lista8.html:
  • 42. - 42 - Rezultati pas hapjes me shfletues, duket si vijon:
  • 43. - 43 - Detyra 4 -Të tregohet se si do të duket dritarja e faqes në shfletues nëse është përpiluar një program në HTML si te– detyra4.html? <html> <head><h2><title>Detyra 4</title></h2></head> <body bgcolor="yellow"> <p><center><font face="Arial" size="4" color="Red">Një listim të përzier</font></center></p> <ul> <li><font face="Arial" size="1">Kafeja</font></li> <li>Çaji </ul> <hr></hr> <dl><font face="Comic Sans MS" size="3"> <dt>Kafeja</dt> <dd>Kafeja është një ndër pijet më të konsumuara në të gjithë botën</dd> <dt>Çaji</dt> <dd>Çaji është i njohur për efektet e tij kundër gripit, kollës dhe të ftohurit</dd> </font></dl> <hr align="left" size="1" Width="25%"></hr> <font face="Arial" size="4"><ul type="square"> <li>çaj i zi <li>çaj i malit </ul></font> <hr align="left" size="2" Width="50%" color="green"></hr><ul> <li><b><font face="Verdana" size="5">Makiato</b></font> <li><b><font face="Verdana" size="5">Expresso</b></font> </ul> <hr align="left" size="4" Width="75%" color="red"></hr> <ol type="A"> <li><i>çaj i kamiljes</i> <li><b>çaj i mëllagës</b> </ol> <hr align="left" size="6" Width="85%" color="blue"></hr> <ul type="circle"> <li><u><font face="Garamont" size="7">Capuchino</font></u> </ul> </body> </html> Ueb faqja sipasDetyrës4 do të duket:
  • 44. - 44 - 5. TABELAT NË UEB FAQE Tabelat paraqesin një element shumë të përshtatshme për paraqitjen dhe vendosjen e të dhënave në Ueb faqe. Përveç mënyrës klasike të përdorimit të tabelave, në HTML tabelat shfrytëzohen edhe për kontrollimin e vendosjes së teksteve dhe të fotografive në ueb faqe. Vendosja e elementeve të ueb faqes në fushat e tabelës paraqet një teknikë e ueb dizajnerit. Në fushat e tabelës (celulat) mund të vendosim elemente si p.sh tekst, fotografi, link dhe tabela të tjerë. Tabelaformohet prej rreshtave (ang. row) dhe kolonave (ang.column), pikëpremja e tyre formon celulat( ang. cell). 5.1 KRIJIMI I TABELËS Tabelat në ueb faqe përpilohen me ndihmën e etiketës fillore <table> dhe etiketën fundore <table> e cila mund të ketë më shumë atribute: o border -përshkruan gjerësinë e kornizës së jashtme të tabelës; o cellspacing -përshkruan gjerësinë e vijave ndarëse të dy celulave; o cellpadding -përshkruan hapësirën rreth përmbajtjes së celulës; o width -përshkruan gjerësinë e plotë të tabelës. Titulli i tabelës jepet me etiketën <caption> e cila shkruhet mbi tabelë dhe mbyllet me etiketën fundore </caption>, dhe mund të ketë atributin align: o top, middle, bottompër rrafshim vertikal o left, center, right për rrafshim horizontal Çdo rresht në tabelë përshkruhet në mes etiketave <tr> dhe </tr> (ang. table row). Edhe etiketa <tr> mund të ketë atributet: o për rrafshim horizontal, atributi alignme vlera: left, center, right o për rrafshim vertikal, atributivalignme vlera: top, middle, bottom Celulat përshkruhen në mes etiketave <td> dhe </td>. Etiketa <td> i ka këto atribute: o për rrafshim horizontal, atributi align o për rrafshi vertikal, atributi valign o për bashkim horizontal të celulave: rowspan(i bashkon dy celula të llojit të njejtë) o për bashkim vertikal të celulave: colspan(i bashkon dy celula të kolonës së njejtë) Etiketa <th> i ka vetitë të njëjtë si etiketa <td> vetëm se tekstin e qendërzon dhe e thekson si titull të kolonës. Struktura themelore e një tabele duket si vijon:
  • 45. - 45 - <table> <caption> emri si titull i tabelës </caption> <tr> përmbajtja e rreshtit të parë si header <th> përmbajtja e celulës së parë të headerit </th> <th> përmbajtja e celulës së fundit të headerit </th> </tr> fundi i rreshtit të parë <tr> <td> përmbajtja e celulës së parë në rreshtin e parë </td> <td> përmbajtja e celulës së dytë në rreshtin e parë </td> </tr> <tr> <td> përmbajtja e celulës së parë në rreshtin e fundit </td> <td> përmbajtja e celulës së parë në rreshtin e fundit </td> </tr> </table> Duke parë strukturën e krijimit të tabelës, krijimi i një tabele pra fillon me etiketën fillore <table> dhe mbaron me etiketën fundore </table>. Përmbajtja e celulave të tabelës vendoset brenda etiketave <td> dhe mbaron me </td>, nëse definohet kreu i tabelës atëherë shënohet brenda etiketave <th> dhe </th>. Për definimin e rreshtave të tabelës përdorim etiketat<tr> dhe </tr>. Se si përdorim në program shihet nga shembulli vijues – tabela1.html: Rezultati duket si vijon:
  • 46. - 46 - Siç po shihet në detyrë, tabela nuk ka kufinjë të definuar, nëse dëshirojmë të kufizojmë tabelën atëherë në etiketën <table> vendoset edhe atributi border si për shembull <table border=1>. Se si përdorim në program shihet nga shembulli vijues – tabela2.html: Rezultati pas hapjes me shfletues, duket si vijon: 5.2 ATRIBUTET E TABELAVE Për të ndarë tabelës dimensionet e dëshiruara, shfrytëzojmë atributet height dhe width ku madhësia e celulave shprehet me përqindje. Se si përdorim në program shihet nga shembulli vijues – tabela3.html:
  • 47. - 47 - Rezultati pas hapjes me shfletues, duket si vijon: Ekzistojnë edhe atribute tjerë në dizajnimin e tabelave si psh. cellpadding dhe cellspacing. Se si përdorim në program shihet nga shembulli vijues – tabela4.html: Rezultati pas hapjes me shfletues, duket si vijon:
  • 48. - 48 - Me ndryshime të mëtutjeshme të vlerave të atributeve si më poshtëte shembulli – tabela5.html: Rezultati duket si vijon: Nëse vazhdojmë me ndryshime të vlerave të atributeve dhe nëse i shtojmë edhe atributet tjerë për font në një shembull vijues – tabela6.html: Rezultati pas hapjes me shfletues, duket si vijon:
  • 49. - 49 - Shpesh ndodhë që ndonjëcelulë në tabelë duhet të shtrihet në më shumë rreshta ose kolona, atëherë kjo mund të arrihet me bashkimin e rreshtave ose të kolonave duke i përdorur atributet colspan dhe rowspan,të cilat vendosen brenda etiketës <td> ose të etiketës <th>. Vlera e këtyre atributeve jepen varësisht nga rreshtat dhe kolonat që bashkohen. Për të kuptuar më mirë se si përdoren këto dy atribute të marrim disa shembuj konkretë. Se si përdorim në program shihet nga shembulli vijues – tabela7.html: Rezultati pas hapjes me shfletues, duket si vijon:
  • 50. - 50 - Nëse më tutje përdorim edhe atributin rowspan së bashku me colspan në etiketën <TH> te detyra e mësipërm, tabela tani duket – tabela8.html: Rezultati pas hapjes me shfletues, duket si vijon:
  • 51. - 51 - Detyra 5 - Të tregohet se si do të duket dritarja e faqes në shfletues nëse është përpiluar një program në HTML si më poshtë? <!Doctype html> <HTML><TITLE>Detyra 5</TITLE> <!-- Fillimi i definimit të Tabelës --> <TABLE width="50%" border="2" cellspacing="10" cellpadding="20"></th> <caption> Tabela komplete me atributet e saj</caption> <TR> <TH rowspan=5 bgcolor="pink"><font size="6">Klasa XII</font></TH> <TH colSpan=3 bgcolor="green"><font size="5" color="yellow"> Regjistri i nxënësit</font></TH> </TR> <TR bgcolor="yellow"> <TH width="20%"><font face="Verdana" size="3">Emri</font></TH> <TH width="20%"><font face="Verdana" size="3">Mbiemri</font></TH> <TH width="20%"><font face="Verdana" size="3">Datëlindja</font></TH> </TR> <TR> <TD><font face="Garamont" size="2">Arsim</font></TD> <TD><font face="Garamont" size="2">Hoxha</font></TD> <TD align=center valign=middle>23/04/1998</TD> </TR> <TR> <TD><font face="Comic Sans MS" size="1">Arta</font></TD> <TD><font face="Comic Sans MS" size="1">Shala</font></TD> <TD align=right valign=top>03/01/2012</TD></font> </TR> <TR> <TD>Besim</TD> <TD>Krasniqi</TD> <TD align=left valign=bottom>26/06/1962</TD> </TR> </TABLE> </HTML> Zgjidhja e detyrës pas hapjes me shfletues, duket si vijon:
  • 52. - 52 - 6. INSERTIMII LINK-UT NË UEB FAQE Link-u ose Hyperlink-u paraqet një lidhje që mundëson leximin enjë teksti(dokumenti) nga një vendku është emri i link-utte ueb faqja, deri tenjë pjesë tjetërtëdokumentit në ueb site. Shfletuesi,zakonishtë link-un paraqet me një ngjyrë tjetër ose në shumicën e rasteve të nënvizuar në dokument. Dukja eetiketës për paraqitjen e link-ut është: < a atributi> ... </a> ose më të kompletuar duket: < a href=”adresa e lidhjes (URL) ”> emri i link-ut </a> Ku href- Hypertext Reference është atributi për një faqe tjetër. Ne mund të krijojmë disa lloje të link-ëve dhe atë: o Për një ueb site në Internet të ruajtur në ueb serverin e juaj. o Për një ueb faqe nëueb site-in e njejtë o Prejnjë bookmarknë ueb faqe o Për një e-mail adresë 6.1 LINK-U PREJ NJË UEB FAQE NË NJË UEB SITE TJETËR Për shembull nëse dëshirojmë të lidhemi në ueb site-in e qendrës trajnuese profesionale www.ata-ks.org me linkun ATA, linku do të duket në shembullin si vijon – Linku1.html: <a href=” http://www.ata-ks.org” > ATA </a> <html> <head><h2><left>Linku në një ueb site</left></h2> <title>linku 1</title></head> <body> <p>Qendra trajnuese: <a href=”http://www.ata-ks.org>ATA</a> </body> </html> Rezultati pas hapjes me shfletues, duket si vijon:
  • 53. - 53 - Nëse klikojmë në linkun ATA, rezultati do të duket si më poshtë, hapet ueb sajti i Qendrës Trajnuese ATA. 6.2 LINK-U PREJ NJË UEB FAQE NË UEB FAQE TJETËR TË UEB SITE-IT TË NJEJTË Linku në një fajll ose dokument të ruajtur në një server kudo në Internet, është pjesa më interesante dhe më e përdorura e hyperlinkut në rrjetë. Në këtë rast etiketa e linkut do të përmbajë referencën në atë fajll të shprehur përmes URL-së(Uniform Resoursce Locator). Për të bërë këtë së pari duhet të kemi uebfaqen(fajllin), në një uebsajt që ekziston në rrjetë të Internetit, si në shembullin vijues – linku2.html: <a href=” www.ata-ks.org/regjistrimi/ecdl.doc”> Regjistrimi online </a> <html> <head><h4>Linku në një faqe të ueb site-it</h4> <title>linku 2</title></head> <body> <a href=” http://www.ata-ks.org/regjistrimi/ecdl.doc”><h2>Regjistrimi online</h2></a> </body> </html> Rezultati pas hapjes me shfletues, duket si vijon
  • 54. - 54 - 6.3 LINK-U PËR KRIJIMIN E NJË BOOKMARK-U NË NJË UEB FAQE Nëse kemi një uebfaqe të gjatë, mund të krijojmë link për tu lidhur në një pjesë tjetër të ueb faqes, shkruajmë emrin e pjesës së ueb faqes ku dëshirojmë të lidhemi,e cila shënohet si vijon: <a name=” Insertimi i Link-ut” >Emri i linkut</a> Tani nëse p.sh dëshirojmë të lidhemi te Kapitulli 6, linku do të duket si vijon: <a href=” #Insertimi i Link-ut ”>Kapitulli 6</a> Për të parë se si përdorim një link të tillë në ueb faqe të marrim një shembull: linku3.html <html> <head><h2>Linku në një pjesë të ueb faqes</h2> <title>linku 3</title></head> <body bgcolor="aqua"> <a name=”Insertimi i Link-ut ”></a> <a href=”#Insertimi i Link-ut ">Kapitulli 6</a> </body> </html> Rezultati pas hapjes me shfletues, duket si vijon: 6.4 LINK-U PËR NJË E-MAIL ADRESE NË UEB FAQE
  • 55. - 55 - Për shembull nëse dëshirojmë të lidhemi në e-mail adresë të një ueb serveri www.google.com me linkun info@gmail.com, linku do të duket si vijon: <a href=” mailto:info@gmail.com”> Informim </a> Për të parë se si përdorim një link të tillë në ueb faqe të marrim një shembull linku4.html si më poshtë: <html> <head><h4>Linku në një e-mail adresë</h4> <title>linku 4</title></head> <body bgcolor="pink"> email: <a href=” mailto:info@gmail.com”>Informim</a> </body> </html> Rezultati pas hapjes me shfletues, duket si vijon: 6.5 LINK-U SI FOTOGRAFI Ne kemi parë se si të krijohet lidhja hypertext duke përdorur tekstin dhe gjithashtu kemi mësuar se si të përdorim fotografitë në ueb faqe. Tani, do të mësojmë se si të përdorim fotografitë për të krijuar një hyperlink. Përdorimi i fotografisë si hyperlink është shumë e thjeshtë, ne vetëm duhet të përdorim një fotografi brenda hyperlinkut në vendin e tekstit. Linku si fotografi për të kaluar në një ueb site insertohet me këtë etiketë: <a href="http://www.ata-ks.org"><imgsrc="smiley.png"></img></a> Për të parë se si përdorim një link të tillë në ueb faqe të marrim një shembull: linku5.html <!DOCTYPE html> <html><title>Linku 5 </title> <body> <h1><center>Linku si fotografi</center></h1> <p>Kliko ne fotografi per te hapur ueb faqen</p><br> <a href="http://www.ata-ks.org"> <img src="smiley1.jpeg" alt="HTML" width="100" height="100"></img></a>
  • 56. - 56 - </body> </html> Rezultati pas hapjes me shfletues, duket si vijon: 6.6 LINKU PËR TË HAPUR NJË FOTOGRAFI NË UEB FAQE Për të hapur në një fotografi në një ueb faqe tjetër nga një link përdorim këtë etiketë: <!DOCTYPE html> <html><title>Linku 6 </title> <body> <p>Krijimi i një linku për një fotografi:</p> <a href="Prizreni.jpg"> PRIZRENI </a> </body> </html> Dhe kur shtypim linkun PRIZRENI hapet ueb faqja me fotografi:
  • 57. - 57 - Detyra 6 - Të tregohet se si do të duket dritarja e faqes në shfletues nëse është përpiluar një program në HTML si më poshtë ? <!Doctype html> <html> <head><h2> Linku në ueb faqe</h2></head> <title>Detyra 6</title> <body> <p><A HREF=” http://www.gjimnazigjonbuzuku.edu”> Gjimnazi </A></p> <p><A HREF=” http://www.ata-ks.org/regjistrimi/ecdl.doc”> Regjistrimi në ECDL </A></p> <p><A HREF=”#tb”>Tabela orari</A></p> <A NAME=”tb”>Tabela orari</A> <p><A HREF=” mailto:gjimnazigjonbuzuku@hotmail.com”>gjgjbuzuku</A></p> </body> </html> Zgjidhja e Detyrës 6: Rezultati pas hapjes me browser:
  • 58. - 58 - 7. INSERTIMII FOTOGRAFISË NË UEB FAQE Fotografia që tregohet në kuadër të HTML faqes duhet të tregohet nëpërmes një formati grafik të përshtatshëm. Formatet e fotografisë që më së shpeshti shfrytëzohen janë dy formatet JPEG (JPG) dhe GIF. Shkaku i përdorimit të këtyre dy formateve është madhësia e fotografisë në dokument dhe vështirësitë gjatë leximit. Këto dy formate shfrytëzojnë metoda efikase për kompresim dhe në këtë mënyrë rritet perforrmanca e aplikacionit. Në HTML fotografia paraqitet përmes etiketës <IMG>. Etiketa <img> është i zbrazët, ç‘ë do të thotë se përmban vetëm atributet, dhe etiketa <img> nuk ka etiketë fundore. Për të shfaqur një fotografi në një ueb faqe, ju duhet të përdorni atributin src. Atributi srcdo të thotë "source".Vlera e atribut src është URL(adresa e fotografisë) që ju dëshironi për të shfaqur në ueb faqe. Sintaksa e komandës që përshkruan një fotografi duket: <img src="url" alt="emri i fotografisë"> URL-ja cakton vendin ku është e ruajtur fotografia. Ruajtja e fotografisë më së miri është në follderin e ueb faqes, me emër të caktuar. Etiketa komplete për insertimin e fotografisë duket si vijon: <img src=”Vendi i fotografisë/emri i fotografisë”> Disa shembuj se si shtohet një fotografi në ueb faqe: <img src=”My Picture/foto.jpg”> ose më konkrestisht: <img src=" Gjimnazi.jpeg " alt="Gjimnazi"> Dhe pasi të hapim me browser:
  • 59. - 59 - Atributet e etiketës për fotografi mund të jenë: o Align– rrafshimi i fotografisë në krahasim me margjinat  horizontalisht (center, right, left)  vertikalisht (top, bottom, middle) o Width –gjerësia e fotografisë dhe Height– lartësia e fotografisë o Border – gjerësia e ram-it të fotografisë o Alt – në vend të fotografisë jep emrin e fotografisë Përdorimi i atributeve të fotografisë së bashku me etiketën <img> në program ka një strukturë të tillë: <p align=”center”><img src=”foto.jpg”> ose <img src=”foto.jpg” align=”center”> <img src="shtegu i vendndodhjes së fotografisë" hight="vl.nr" width="vl.nr" alt="emri i fotosgrafisë"> <img src=”foto.jpg”alt=”emri i fotografisë”> Shembulli konkretë për të parë se si përdorim një fotografi, në ueb faqe: foto1.html: Rezultati pas hapjes me shfletues, duket si vijon: Në një shembull tjetër kemi një ueb faqe në prapavijë të së cilës është insertuar një fotografi dhe mbi te një fotografi tjetër – foto2.html:
  • 60. - 60 - Rezultati pas hapjes me shfletues, duket si vijon:
  • 61. - 61 - Detyra 7 - Të tregohet se si do të duket dritarja e faqes në shfletues nëse është përpiluar një program në HTML si më poshtë ? <!DOCTYPE html> <html> <body bgcolor="pink"> <h4>Fotografia me rrafshim (align="bottom"):</h4> <p>Teksti para fotografise <img src="haker.png" alt="HAKERI" width="60" height="60"> Teksti pas fotografise</p> <h4>Fotografia me rrafshim (align="middle"):</h4> <p>Teksti para fotografise <img src="ora.png" alt="ORA" align="middle" width="80" height="80"> Teksti pas fotografise</p> <h4>Fotografia me rrafshim (align="top"):</h4> <p>Teksti para fotografise <img src="Lidhja e Prizrenit.jpg" alt="Lidhja e Prizrenit" align="top" width="100" height="80"> Teksti pas fotografise</p> </body> </html> Rezultati pas hapjes së browserit duket si më poshtë:
  • 62. - 62 - 8. INSERTIMII MULTIMEDIAVE NË UEB FAQE Multimedia vjen në formate të ndryshme. Ajo mund të jetë pothuajse çdo gjë që ju mund të dëgjoni ose të shikoni. p.sh: fotografi, muzikë, zë, video, regjistrime, filma, animacione, dhe shumë të tjera. Ueb faqet shpesh përmbajnë elemente multimediale të llojeve të ndryshme me formate të ndryshme. Në këtë kapitull do të mësojmë formatet të ndryshme multimediale. Ueb shfletues të parë kanë pas mbështetje vetëm për tekst dhe ato të kufizuar në një font dhe me një ngjyrë të vetme. Ueb shfletuesit kryesorë të sotëm, trajtojnë ndryshe audio dhe video fajlat si dhe animacionet të ndryshme. Shfletuesit e sotëm mbështesin formatet e ndryshme të këtyre fajlave, por disa multimedia fajla me formate të caktuara për tu hapur do të kërkojnë programe shtesë (helper -plug-ins). HTML5 multimedia premton një të ardhme më të lehtë për multimedia. Elementet multimediale (si audio ose video) janë të ruajtura në media fajla. Multimedia fajlat kanë formate dhe prapashtesa të ndryshme si: swf, Wav, .mp3, .mp4, mpg, wmv, dhe avi. Formati ( .mp4) është i ri dhe kryesisht video fajllat në Internet janë me këtë format, dhe këto multimedia fajlla kryesisht hapen me programin Flash Player, gjithashtu mbështeten edhe nga HTML 5. 8.1 INSERTIMI I NJË VIDEO FAJLI Ndonjëherë ju duhet të shtoni muzikë ose video në ueb faqen tuaj. Mënyra më e lehtë për të shtuar një video ose zë në ueb faqen tuaj është që të përdorni etiketën të veçantë në HTML të quajtur <embed>. Ky etiketë vetë shkakton shfletuesin që të përfshijë disa kontrolle për multimedian që siguron disa lloje të dhënave të medias. Por për të shtuar një viedeo fajll në ueb faqe mund të përdoret edhe etiketa <video>. Në HTML 5, etiketa <video> së bashku me atributet width dhe height përdoret si psh.
  • 63. - 63 - Rezultati pas hapjes së shfletuesit duket: Etiketa <video> ka disa atribute. Atributi <control> shton kontrollet e videos, si play, pause, dhe vëllimin e zërit. Është e mirë që gjithmonë në etiketën <video> të përfshihen edhe atributet për gjerësi width dhe për lartësi height. Nëse atributet për lartësi dhe gjerësi nuk janë të vendosur, faqja mund të bllokohe nga ngarkesa e madhe që mund të ketë video fajli. Etketa <source> ju lejon të specifikoni burimin e video fajlit të cilën shfletuesi mund të zgjedhë për emitim. Shfletuesi do të përdor vetëm formatet të treguara më parë, të cilat i njeh. Teksti i vendosur ndërmjet etiketave <video> dhe </video> do të shfaqet vetëm nëse shfletuesi nuk e mbështet <video> elementin. 8.2 INSERTIMI I NJË AUDIO FAJLI Në HTML5 etiketa që i shtonë një audio fajl në Ueb faqe është <audio>. Se si e përdorim këtë etiketë shihet në shembullin e më poshtëm audiofajlli.html: Rezultati pas egzekutimit në browser do të duket:
  • 64. - 64 - Atributi control shton pullat(tastet) për kontrollimin e audio fajlit, si: play, pause, dhe për vëllimin e zërit. Etiketa <source> ju lejon të specifikoni burimin e audio fajlit të cilën shfletuesi mund të zgjedhë për emitim. Shfletuesi do të përdor vetëm formatet që i ka të njohur më parë si psh. mp3, Wav, dhe Ogg. Teksti i vendosur ndërmjet etiketave <audio> dhe </audio> do të shfaqet vetëm nëse shfletuesi nuk e mbështet <audio> elementin. 8.3 HTML NDIHMUESIT (PLUG-INS) Objektet ndihmës (plug-ins) në ueb site janë programe kompjuterike që shtojnë funksionalitetin standard të një shfletuesi. Shembuj të mirënjohur të plug-ins-ëve janë reklamat (applets). Elementet shtesë (plug-ins) mund të shtohet në ueb faqe me etiketat <objekt> ose <embed>. Plug-ins elementet në ueb faqe mund të përdoret për shumë qëllime, psh.: për të shfaqur hartat, skanimi për viruset, verifikimi i ID bankare, etj. Etiketa <object> është i përkrahur nga të gjithë shfletuesit. Etiketa <object> përcakton një objekt të ngjitur brenda një HTML dokument. Ajo përdoret për të shtimin e elementeve ndihmës si psh. reklamat ose kryetitujt dinamik në ueb faqe. Se si përdorim etiketën <object> në shtimine një elementi në ueb faqe shohim nga shembulli i mëposhtëm:
  • 65. - 65 - Rezultati pas egzekutimit në browser do të duket: Ose nëse dëshirojmë me shtu një fotografi si reklamë, psh: Rezultati pas egzekutimit në browser do të duket:
  • 66. - 66 - Etiketa <embed> është i mbështetur në të gjitha shfletuesit kryesorë. Etiketa <embed> gjithashtu përcakton një objekt të vendosur brenda një HTML dokumenti. Ueb browserët kanë mbështetur <embed> etiketën një kohë të gjatë, dhe ka qenë një pjesë e specifikimeve të gjuhës HTML para HTML5. Gjithashtu mund të përfshini një etiketë <noembed> për shfletuesit që nuk njohin etketen <embed>. Për shembull, mund të përdoret <embed> për të shfaqur një film sipas dëshirës dhe <noembed> për të shfaqur një fotografi të vetëm me formatin .jpeg nëse shfletuesi nuk e mbështet etiketën <embed>. Rezultati pas egzekutimit në browser do të duket: Etiketën <embed> mund të përdorim edhe për të shtuar një multimedia (video ose audio) fajl në ueb faqe. Kjo etiketë na mundëson që vetë shfletuesi të shfaqë video ose audio fajlin duke i përfshirë edhe kontrollet për multimedia fajllin, me kushtë që shfletuesi të mbështet etiketën <embed> dhe formatin e multimedia fajlit. Sintaksa e komandës që përshkruan një video fajl duket: <embed src="/html/fajliijuaj.mid"> </embed> Mund të japim çfardo fajla multimediale pran atributit ‘src=’
  • 67. - 67 - Nëse tani i përdorim edhe atributet width dhe height në etiketën <embed> për të përcaktuar dimenzionet e shfaqjes së dritares së video fajlit në ueb faqe, atëhere programi ynë duket: 8.4 LUAJTJA E NJË VIDEO NGA YOUTUBE NË HTML UEB FAQE Për të luajtur një video në një ueb faqe, duhet të kryhen më parë disa veprime si mëposhtë: o Ngarkojmë një video në YouTube, o Marrim një shënim për ID e video fajlit, o Definojmë HTML etiketën <embed> ose <object> në ueb faqe, o Atributi src përcakton URL adresën e video fajlit, o Atributet për gjerësinë dhe lartësinë përcaktojë dimensionin e video-s, o Shtohet edhe ndonjë parametër tjetër në URL adresë, psh. autoplay=1 (starton menjëherë video-ja ose autoplay=0 pasi të shtypim butonin) Më poshtë do të shohim se si mund të shtohen edhe video fajllat nga ueb sait-et si psh. www.youtube.com. me etiketën <embed> dhe </embed>: Rezultati pas hapjes së shfletuesit duket si më poshtë:
  • 68. - 68 - Detyra 8 - Të tregohet se si do të duket dritarja e faqes në shfletues nëse është përpiluar një program në HTML si më poshtë? <!DOCTYPE html> <html> <head><h1>Perdorimi i etiketes embed </h1> <title>Multimedia</title> </head> <body> <embed src="Money for Nothing.MP3" width="100%" height="60%" > <noembed><img src="Penguins.jpg" alt="Alternative Media" ></noembed> </embed> </body> </html> Provoni vetë në kompjuterin tuaj duke i shtuar fajllat qe e keni ju në kompjuterin e juaj të ruajtur më parë në një follder që e keni përpiluar enkas për ushtrime me Html.
  • 69. - 69 - 9. KRIJIMI I KORNIZAVE (FRAME)NË UEB FAQE Kornizat(Frame) mundësojnë që të formohet dokumenti(fajlli) i cili do të përbëhet së paku prej adresave të dy dokumenteve të ndryshme. Shfletuesi do të interpretoj kornizat si ndarje të dritares në më shumë nën dritare të pavarura, nga të cilat çdo njëra përmban dokumentin e adresuar. Etiketa kryesor për krijimin e kornizave shënohet me: <frameset>. Kjo etiketë zëvendëson etiketat <body> në një HTML dokument. Teksti i dokumentit i cili ndahet në korniza përmban kryesisht informatat të dedikuar kryesisht shfletuesit, shfletuesi thërret dokumentet e adresuara dhe vendos në kornizat e caktuara.Etiketa <frameset> ka këto atribute: o cols - për ndarje vertikale të dritares dhe o rows- për ndarje horizontale të dritares. Adresa e dokumentit jepet në kuadër të etiketës FRAME atributet e së cilës janë:  src – nëpërmes së cilës jepet adresa e dokumentit e cila do të tregohet brenda hapësirës së etiketës dhe  marginwidth dhe marginheight Shpesh përdoret edhe etiketa <noframe> që tregon porosinë shfletuesit që nuk mund të interpretoj fram-et.Struktura themelore e një HTML dokumenti me Frame-a duket si vijon: <html> <head> </head> <frameset> ......... </frameset> </html> Për të parë se si përdoret etiketa <frame> të marrim një shembull konkretë – frame1.html: *Të dizajnohet uebfaqja me dy korniza(frame), ku në secilën kornizë të vendosen fajlla të ndryshëm, të ruajtur më parë në diskun e juaj?
  • 70. - 70 - Rezultati pas hapjes me shfletues, duket si vijon: Në këtë ueb faqe me dy frame-a janë të insertuar dy fajlla, top.html në pjesën e sipërme gjegjësisht në fram-in e sipërm të faqes, ndërsa bottom.html, në frame-in e poshtëm të faqes. Këto dy fajlla më herët janë të krijuar dhe të ruajtur në follderin e ueb sajtit. Për të analizuar më tepër frame-ët t’i marrim disa shembuj tjerë për shqyrtim. Në shembullin vijues i kemi të vendosur dy dokumente me emra lista3.html dhe tabela7.html të krijuar si HTML dokumentdhe pastaj të insertuar në dy pjesë të dritares me dy korniza. Të marrim një shembull konkretë – frame2.html edhe si detyrë. *Detyra. Të dizajnohet uebfaqja me dy korniza(frame) horizontale, ku në kornizën e sipërm të vendoset fajlli tabela.htm, ndërsa në kornizën e poshtëm fajllin lista.html, të ruajtur më parë në diskun e juaj? Se si përdorim në program me frameset këto dy fajlla shihet në programin e mëposhtëm:
  • 71. - 71 - Rezultati pas hapjes me shfletues, duket si vijon: Nëse në etiketën <frameset> të programit të mësipërm në shembullin frame2.html në vend cols shënojmë atributin rows si më poshtë: Rezultati pas hapjes me shfletues, duket si vijon:
  • 72. - 72 - Ose nëse më tutje për të kuptuar më mirë përdorimin e atributeve rows dhe cols kombinojmë të dy opsionet në një shembull tjetër – frame4.html Rezultati pas hapjes me shfletues, duket si vijon:
  • 73. - 73 - Detyra 9 - Të tregohet se si do të duket dritarja e faqes në shfletues nëse është përpiluar një program në HTML si më poshtë? <!Doctype html> <head> <title>Detyra 8</title> </head> <frameset rows="50%,50%"> <frame src="foto1f.html"> <frameset cols="25%,25%"> <frame src="tabela1f.html"> <frame src="lista1f.html"> </frameset> </html> Rezultati pas egzekutimit në browser duket:
  • 74. - 74 - 10. KRIJIMI I FORMULARËVE (FORM)NË UEB FAQE Etiketat të mësuara deri më tani janë vetëm për dizajnimin e ueb faqes hipertekstuale që përmban vetëm tekste, tabela, vija, hiperlinkë dhe imazhe ose fotografi të ndryshme, që mund të shihenn vetëm me shfletues. Por shfletuesi mund të përcjellë të dhënat në ueb server për të përpunuar më tutje, të cilat të dhëna i merr nga formularët në ueb sajt. Formulari mundëson komunikimin ndërmjet shfrytëzuesit dhe serverit. Shfrytëzuesi i mbushë formularin dhe dërgon serverit, ku më tutje atje përpunohen sipas nevojës. Me anë të formularëve mund të krijohen aplikime si p.sh.: o Pyetësorë që regjistrojnë të dhënat në databaza o Formularë për identifikimine qasjes në ndonjë shërbim të serverit o Tregtia elektronike( formularë për blerje dhe pagesa et.) o Formularë për lajmërime të dhënave që ndryshojnë shpesh, etj. Formulari përpilohet përmes etiketës fillore: <FORM> dhe etiketës fundore </form>. Etiketa <form> përmban dy atribute:  action e cila përmban adresën (URL) e programit në server;  method me të cilën metoda e përshkruar e bartjes së argumentit të programit, dhe mund të ketë dy vlera get dhe post. Shembulli i HTML kodit përmes së cilës definohet formulari është: <formaction=”shembulli.html” method=”post”> ........ </form> Etiketat <form> nuk mund të vendosen njëra mbi tjetrën. Atributet e përbashkët të etiketave të ndryshëm në kuadër të formularit është: o name, me të cilën definohet emri i variablës ku do të vendoset vlera e të dhënave, o value, me të cilëndefinohet vlera e zgjedhur në formular ose teksti që tregohet, o type, definonllojin e të dhënave që vendosen brenda etiketës, Brenda formularit mund të përdoren këto etiketa: o Etiketa për krijimin e një fushe për tekst për shënime personale. Në këto fushe vendoset një e dhënë ose një informatë. Korniza mund të jetë text, file dhe password, Etketa shënohet: <p> teksti: < input type=”text”, name=” emri ” >
  • 75. - 75 - Shembull: Të përpilohet një uebfaqe me një kuti për tekst duke përdorur etiketën <input type=”text”, name=”emri”> Se si përdorim në program shihet nga shembulli vijues – formulari1.html: Rezultati pas hapjes me shfletues, duket si vijon: Etiketa input mund të ketë edhe këto atribute: o size - për gjatësi të kornizës për tekst o maxlength - numri i karaktereve të tekstit o value – vlera e tekstit o Gjithashtu etiketën <input> mund të përdorim edhe për vendosjen e fjalëkalimit dhe e-mail adresës. Se si përdorim në program shihet nga shembulli vijues:
  • 76. - 76 - Rezultati pas hapjes me shfletues, duket si vijon: o Etiketa për krijimin e një kutie për kontrolltë tëdhënave me alternativa checkbox. Etiketa shënohet: <input type=”checkbox” name=” lloji i të dhënave ” value=” vlera”> Të përpilojmë një program për dizajnimin e një ueb faqe me formular ku përdoret përveç kutive me tekst edhe një kuti për kontroll të dhënave, duke përdorur etiketën: <input type=”checkbox”>. Se si përdorim në program shihet nga shembulli vijues – formulari3.html: Rezultati pas hapjes me shfletues, duket si vijon:
  • 77. - 77 - o Etiketa për krijimin e një fushe për zgjedhjen e një vlere nga dy ose më shumë të dhëna alternative. Etiketa shënohet: <input type=”radio” name=” lloji i të dhënave ” value=” vlera” checked> labela Të përpilojmë një program për dizajnimin e një ueb faqe me formular ku përdoret përveç kutive me tekst, për kontroll të dhënave edhe një fushë për zgjedhjen e një nga shumë të dhëna, duke përdorur etiketën <input type=radio>. Se si përdorim në program shihet nga shembulli vijues: Rezultati pas hapjes me shfletues, duket si vijon: o Eetiketat <select> dhe <option> janë dy etiketa për dizajnimin e kutisë me opsionet rënëse. Fusha <select> përshkruan zgjedhjen nga opsionet e mundshme të treguar nëpërmes etiketës < option>. Etiketa <select> dhe <option> në program shënohen në këtë formë: <select name=” emri ” > <option> tekstirënës </option> </select> Atributet që mund të shtohen etiketës <select> janë: o size o multiple
  • 78. - 78 - Shembull: Të përpilojmë një program për dizajnimin e një ueb faqe me formular ku do të përdoret përveç kutive me tekst, për kontroll të dhënave, për zgjedhjen e një nga shumë të dhëna dhe një fushë me listë rënëse me të dhëna, duke përdorur etiketën <select> dhe <option>. Se si përdorim në program shihet nga shembulli vijues – formulari5.html: Rezultati pas hapjes me shfletues, duket si vijon: o Etiketa për krijimin e një fushepër vendosjen e një komenti si tekst në dritaren e ndarë është <textarea> . Etiketa në fjalë përpilohet në këtë formë: <textarea name=”emri” rows=”n” cols=”m”>....teksti...</textarea> Se si përdorim këtë etiketë në një program shihet nga shembulli vijues – formulari6.html:
  • 79. - 79 - Rezultati pas hapjes me shfletues, duket si vijon: o Etiketa për krijimin e butonave për ruajtjen ose fshirjen e të dhënave të formularit. Butonat insertohen me etiketën <input> me atributin type e cila e përshkruan natyrën e butonit. Vlerat e këtij atributi mund të jenë:  submit, përshkruan butonin e cila pas shtypjes në te dërgon të dhënat që përmban formulari kah serveri për ruajtje ose për përpunim të mëtejshëm.  reset, përshkruan butonin e cila pas shtypjes në te i kthen të gjitha vlerat në gjendje fillestare. <input type=”submit” name=” dërgo”> <input type=”reset” name=” shlyej”> Se si përdorim këtë etiketë në një program shihet nga shembulli vijues – formulari7.html:
  • 80. - 80 - Rezultati pas hapjes me shfletues, duket si vijon: o Nëse dëshirojmë të vendosim vetëm taste të zakonshme atëherë përdorim etiketën input me atributin button, si në vijim: <input type="button" value="emri i tastit"> Se si përdorim këtë etiketë në një program shihet nga shembulli vijues – formulari8.html: Rezultati pas hapjes me shfletues, duket si vijon:
  • 81. - 81 - o Nëse duam të grupojmë disa elemente në një vend atëherë mund të përdorin një etiketë: <fieldset> dhe nëse vendosim edhe labelën për grupin e elementeve me etiketën <legend> si më poshtë: <fieldset><legend>teksti i labelës:</legend>etiketafundore </fieldset> Se si përdorim në një program këtë etiketë shihet nga shembulli vijues – formulari9.html: Rezultati pas hapjes me shfletues, duket si vijon:
  • 82. - 82 - Detyra 10. - Të përpilohet programi për dizajnimin e një ueb faqes me një formular ku janë të përdorur të gjitha elementet e formularit të dhënë si në shembullin vijues?
  • 83. - 83 - Zgjidhje: Kodi i ueb faqes së treguar më lartë ë shembullin Detyra 9.html për dizajnimin e ueb faqes duket si më poshtë: <html> <title>Detyra 9</title> <h2>Fletë regjistrimi i nxënësit</h2> <body bgcolor="navy" text="yellow"> <form action=""> <fieldset><legend><h3>Informatat personale:</h3></legend> <p> Emri:<input type="text" name="emri" size="15" maxlength="10"> Mbiemri:<input type="text" name="mbiemri" size="15" maxlength="10"><br> <p> Datëlindja: <input type="text" size="10"> Gjinia:<input type="radio" name="gjinia" value="mashkull"/> M <input type="radio" name="gjinia" value="femër"/> F <p> Email adresa:<input type="text" name="email"size="30"> <p> Paswordi: <input type=password name="fjalkalimi" value="ismail" size="10" maxlength="6"> </fieldset> <p>Klasa:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;Drejtimi: <select name="Drejtimi"> <option> Natyror</option> <option> Mat-Inf</option> <option> Përgjithëshëm</option> </select><br><br> <input type="checkbox" name="topping" value="XII-11">XII-11<br> <input type="checkbox" name="topping" value="XII-12">XII-12<br> <p>Vërejtje:</p> <textarea name="comment" rows="5" cols="30" value="50"> </textarea><br> <input type="submit" value="Regjistroje"> <input type="reset" value="Fshije të dhënat"> </form> </body> </html>
  • 84. - 84 - 11. PËRMBLEDHJE Në këtë skript jam munduar t’ju mësojë në një formë më të zgjeruar se sa në planprogramin e lëndës TIK për klasat e 12-ta, se si të përdoren etiketat dhe atributet e tyre në gjuhën HTML për të krijuar një ueb faqe. HTML është një gjuhë universale e lartë për Ueb dizajn. HTML ju mundësontë shtoni një tekst format, të shtoni grafikë, të krijoni një lidhje(hyperlink), të krijoni një formularë për të dhëna, frame-a, tabela, etj, dhe të ruani të gjitha në një tekst file, që çdo shfletues(shfletues) të mund të lexoj dhe të tregoj si një dritare. Çelësi i HTML-së është etiketa, që tregon se në çfarë mënyrë dhe përmbajtje elementi i përshkruar me etiketë do të shfaqet në shfletues. Në fund po japim një përshkrim të etiketave (tag-ëve) të gjuhës HTML më të përdorura gjatë dizajnit të një ueb faqes: <!--...--> definon një koment në HTML program <address> definon informatat kontaktuese për autorin /krijuesit të dokumentit <b> definon tekstin e nxirë (bold) <basefont> komandë, specifikon ngjyrën, madhësinë ose fontin të nënkuptuar të tekstit në dokument <big> definon tekstin me shkronja të madhe <blockquote> definon kllapat e mëdha <body> definon trupin e dokumentit <br> definon thyerjen e rreshtit <button> definon një tast(buton) për klikim <caption> definon kryetitullin e tabelës <center> komandë, definon tekstin në qendër <code> definon një pjesë të kodit kompjuterik <col> definon vlerat e atributeve për një ose më shumë kolona në tabelë <colgroup> specifikon grupin e një ose më shumë kolonave në tabelë për formatizim <dd> definon përshkrimin e një elementi në listë të definuar <del> definon tekstin të cilën duhet fshirë nga dokumenti <dir> komandë, definon një listë të direktoriumeve <div> definon një pjesë në dokument <dl> definomi i një liste të definuar <dt> definon një term në listë të definuar <fieldset> grupimi i elementeve të lidhura të formularit <font> komandë, definon fontin, ngjyrën, dhe madhësinë për tekstin <form> etiketa për futjen e formularit për përdorues në HTML <frame> përcakton një dritare (frame) në një frameset <frameset> përcakton një sërë korniza <h1> deri <h6> definon madhësinë e titujve në HTML <head> definon informacionin në lidhje me dokumentin <hr> definon vijën horizontale <html> definon rrënjën e një HTML dokumenti
  • 85. - 85 - <i> definon një tekst italik(të pjerrët) <iframe> definon një inline frame <img > definon një fotografi <input> definon një input kontroll <ins> definon një tekst që insertohet në një dokument <label> definon një emërtim për një <input> element <legend> definon një kryetitull për një <fieldset> element <li> definon një element në list <link > definon një lidhje ndërmjet një dokumenti dhe resurseve të jashtëm <meta> definon metadata për një dokument në HTML <noframes> definon një përmbajtje alternative që nuk vendosen brenda frameve <object> definon një objekt statik <ol> definon një listë të renditur <option> definon opsionet e një drop-down liste <p> definon një paragraf <param> definon një parametër për një objekt <pre> definon një tekst të pa formatizuar <strike> definon një tekst të përshkruar me vijë <select> definon një listë drop-down <small> definon një tekst me shkronja të vogla <strong> definon një tekst të theksuar <style> definon informatat e stilit për dokument <sub> definon subscripted tekst(tekst si indeks) <sup> definon superscripted tekst(tekst si fuqi) <table> definon një tabelë <tbody> grupon përmbajtjen e trupit të tabelës <td> definon një qeli në një tabelë <textarea> definon një hapësirë për tekst-komente, element kontrollues <tfoot> grupon përmbajtjen e futerit(pjesa e fundme) në tabelë <th> definon qelinë e titullit në tabelë <thead> grupon përmbajtjen e headerit në tabelë <title> definon titullin e ueb dokumentit <tr> definon rreshtin në një tabelë <tt> definon teletype tekstin <u> Komandë, definon një tekst të nënvizuar <ul> definon një tekst të listuar, jo të numëruar <var> definimi i variablave Për më shumë informacione për gjuhën HTML, mund të merrni nga shembuj të ndryshëm në Ueb sajtet të ndryshëm në Internet.
  • 86. - 86 - Detyra 11 – Të përpilohet programi(kodi) në gjuhën HTML për dizajnimin e ueb faqes e treguar në fotografi si më poshtë:
  • 87. - 87 - 12. HTML STILET – CSS Mundsitë e formatizimit të objekteve në ueb faqe me HTML etiketa është mjaft e kufizuar, si psh. kur dizajnojmë pamjen e faqes, jemi të kufizuar te tabelat, në kontrollin e fonteve të teksteve, dhe në disa stile të tekstit të tilla si bold dhe italic. Por me përdorimin e modeleve të stileve mund të bëjmë: o Kontrollin me kujdes të çdo aspekti të pamjes së dritares (caktimi i largësisë në mes rreshtave, në mes karakterëve, margjinat e faqes, pozita e fotografisë në faqe etj). o Aplikimin e ndryshimeve në tërë ueb faqe o Sigurimin e një dizajni të qëndrueshëm për tërë ueb faqen ashtu që të njëjtën modul të stilit në mënyrë elegante të përdorim për çdo ueb faqe. o Udhëzime të nevojshme për ueb shfletuesit për të kontrolluar pamjen e faqes. o Krijimin e ueb faqeve dinamike. Çfarë është CSS, dhe pse duhet të mësojmë ? HTML (HyperText Markup Language) përshkruan kuptimin dhe strukturën të përmbajtjes së ueb faqes. CSS ( Cascading Style Sheets ) përshkruan mënyrën e paraqitjes së përmbajtjes së ueb faqes me definim të dizajnit të elementeve siç janë rrafshimi, fonti, ngjyra, margjinat, prapavija etj. CSS mundëson përcaktimin e stilit të dukjes së elementeve që synohet të ketë çdo element individuale në HTML.
  • 88. - 88 - Në HTML dizajni i ueb faqes duket: Në CSS dizajni i ueb faqes duket: <html> <body> <h1>This is a header</h1> <p> Këtu është një paragraf me një bllok tekst. </p> <h2>Kryetitulli </h2> <p> Një paragraf tjetër me një bllok tekst. </p> </body> </html> body { font-family: "trebuchet ms", sans-serif; background-color: #ddeedd; padding: 20px 100px 0px 100px; } h1, h2 { font-size: 1.8em; color: #88aa44; margin: 0px; } h2 { font-size: 1.4em; background-color: #ffffff; padding: 0px 30px 0px 30px; } p { background-color: #ffffff; padding: 30px; margin: 0px; } CSS është shkurtesa nga anglishtja Cascading Style Sheets (Fletët me Stile Kaskadike) dhe paraqet një gjuhë për formatimin e HTML elementeve. Stili paraqet një bashkësi të karakteristikave të formatit, të cilat identifikohen me një emër. Stili bën të mundshme që me vetëm një operacion të formatizoni një grup të HTML elementeve të ueb faqes përfshirë tekstin, figurat, tabelat, etj. Për çdo element në ueb faqe mund të formojmë një stil të veçantë duke rregulluar brenda stilit: fontin e paragrafit, ngjyrën e prapavijës të ueb faqes, hapsira në mes rreshtave të paragrafit, kufijtë e tabelave, margjinat e faqes, dinamika e elementeve, etj.). CSS mund të shkruhet direkt në HTML dokument, ose mund të jetë i lidhur me etiketën <style> me një HTML dokument. Pra, stilet definojnë se si do të shfaqen HTML objektet në një ueb faqe.
  • 89. - 89 - 12.1 STRUKTURA DHE SINTAKSA E GJUHËS CSS  Sintaksa e CSS Moduli i rregullave të CSS përbëhet nga selektori dhe deklarimi: Shprehjet ose modulet e stileve krijohen prej disa rregullave të stilit. Çdo rregull i stilit ka dy pjesë: o Selektori: Specifikon elementin për të cilin vlen rregulla e stilit o Deklarata: Specifikon si duket përmbajtja e përshkruar me CSS Për modulet e stilit përdorim një grup të shenjave të pikësimit dhe karakterë të veçanta për të përcaktuar rregullat e stilit.Sintaksa për rregullat e stilit gjithmonë ndjek modelin e mëposhtme: selektori {deklarata;} Deklarata është e ndarë në dy pjesë: 1. Properties (aspektet se si kompjuteri tregon karakteristikat ose tiparet e tekstit dhe grafikës). 2. Values (vlerat që përcaktojnë se si ne duam të shfaqen tekstet dhe imazhet në faqen tonë). Përmbajtja (properties) nga vlera (value) në deklaratëndahet me dy pika, dhe çdo deklaratë mbaron me pikë-presje: selektori {vetita: vlera;}
  • 90. - 90 - 12.2 SELEKTORËT DHE DEKLARATAT Për një selektor (emërtimi i elementit) për të cilin krijohet një stil në CSS, mund të aplikojmë dy rregulla të shkrimit të stilit: 1. Një selektor me vetëm një deklaratë e ndarë për një element, psh.: h1 {color: teal;} h1 {font-family: Arial;} h1 {font-size: 36px;} 2. Një selektor me më shumë deklarata për një element: h1 { color: teal; font-family: Arial; font-size: 36px; } Te shembulli i mësipërm, të gjitha deklaratat për selektorin h1 janë të shënuar brenda kllapave të mëdha ({ }) dhe janë të ndarë mes veti me pikëpresje (;). Mund të vendosim sa të dëshirojmë deklarata brenda një seti të stileve të një selektori, por duke ndarë çdonjërin me pikëpresje. Ky set i njejtë i deklaratave mund të referohet të gjithë selektorëve të elementeve në ueb faqe. Nëse janë më shumë selektorë me një set të njejtë të deklaratave, selektorët ndahen me presje. Në shembullin e mëposhtëm, të gjitha selektorët (h1, h2, h3) kanë të përbashkët një set të njejtë të rregullave të stilit. Seti i rregullavetë stilit është përbërë nga – një deklaratë për ngjyrën e tekstit (color:teal), një deklaratë fontin e tekstit (font-family) dhe një deklaratë për madhësinë e shkronjave (font-size): h1, h2, h3 { color: teal; font-family: Arial; font-size: 36px; } ose të shkruar në një rreshtë: h1, h2, h3 {color: teal; font-family: Arial;font-size: 36px;}