0 Prishtinë 2014

UNIVERSITETI I PRISHTINËS

FAKULTETI I EDUKIMIT

AVANCIMI I KUALIFIKIMIT TË MËSIMDHËNËSVE-AKM

Programi: Teknologji-Informatikë

P U N I M D I P L O M E

LËNDA : Web Programimi

TEMA : Krijimi i web aplikacioneve në HTML

Mentori: Kandidati:

Prof. ass. Kyvete Shatri ars. Naim Gashi

1 Prishtinë 2014

Ky punim diplome u mbrojt më: __________________________ para

Komisionit Vlerësues në përbërje:

1.____________________________.Kyetar

2.____________________________.Anëtar

3.____________________________.Anëtar

Evlerësoi punimin me notën:______________

Nënshkrimet e anëtarve të Komisionit Vlerësues:

1._________________________.

2._________________________

3._________________________.

2 Prishtinë 2014

PËRMBAJTJA

Abstrakti ................................................................................................................................ 3

Hyrje ...................................................................................................................................... 4

1.Web aplikacionet në HTML .............................................................................................. 5

1.1 Rreth HTML ................................................................................................................... 5

1.2 Si t'ia Fillojmë për krijimin e web aplikacioneve në HTML .............................................. 5

1.3 Elementet e web aplikacioneve në HTML ........................................................................ 9

1.4 Shpjegimi i kodeve kryesore(elementeve) ......................................................................... 10

2. Formatimi i web aplikacioneve në HTML ........................................................................ 11

2.1 Formatimi në HTML ........................................................................................................ 11

2.2 Formati i Tagjeve ............................................................................................................. 11

3. Krijimi i web aplikacionevetë tjera në HTML ................................................................. 16

3.1 Kodimi i Hiperlidhjeve (Linkave) në HTML ..................................................................... 16

3.2. Kodimi i Imazheve ........................................................................................................... 17

3.3 Madhësia e Imazheve ........................................................................................................ 18

3.4.Listimet në HTML ............................................................................................................ 19

3.5.Listat e rregullta ................................................................................................................ 19

3.6. Listat e pa rregullta ........................................................................................................... 19

3.7.Tabelat në HTM ................................................................................................................ 20

3.8.Ueb Format në HTML ...................................................................................................... 21

3.9 Meta Tagu ......................................................................................................................... 25

3.10.Frejmat dhe Frejmsetat .................................................................................................... 26

3.11 Cascading Style Sheets (CSS) .......................................................................................... 27

3.12 Aplikacionet e zërit ......................................................................................................... 32

3.13 Aplikacionet e videove .................................................................................................... 33

4. Të gjitha shembujt e aplikacioneve .................................................................................. 34

Rezyme .................................................................................................................................. 39

Biografia ............................................................................................................................... 41

Literatura .............................................................................................................................. 42

3 Prishtinë 2014

Abstrakt

Në këtë temë diplome do të trajtohet krijimi i web aplikacioneve në gjuhën programuese

HTML. HTML është program softuerik që shërben për krijimin dhe dizajnimin e web faqeve në

internet. Punimi do të trajtojë çështjet që kanë të bëjne me njohjen e programimit të këtillë që

përmban komanda(urdhera) për ndërtimin e një dokumenti hypertekst i cili përmban të dhëna

apo informata në formate të ndryshme si tekste, figura, muzikë dhe video klipe. Kështu është e

nevojshme dhe urgjente që të futet një element i tillë në plan-programet e reja mësimore nëpër

shkolla që nxënësit avancohen në mënyrë profesinale.

Për tu realizuar ky qëllim është edomosdoshme paisja e shkollave me kompjuter në kabinete të

informatikës dhe të ket lidhje rrjeti për qasje në internet.

Duke u nisur nga këto konstatime, kemi menduar se do të ishte e arsyeshme që të hyjmë në

sqarimin e kësaj teme, dhe duke menduar se kjo do të ishte një lehtësim për përdorimin dhe

aplikimin e saj në praktike, pra krijimi i web aplikacioneve në HTML si gjuhë programuese.

Abstract

In this diploma will be addressed in the creation of web applications programming

language HTML . HTML is a software program that serves to create and design web pages on

the Internet . The paper will address issues relating to the recognition of the kettle containing

programming commands ( orders ) for the construction of a hypertekst document which contains

data or information in different formats such as text , pictures , music and video clips . So it is

necessary and urgent to put an element of such new curricula teaching in schools , that pupils

Update in order professional organizations. To be realiziar this purpose it is necessary equipping

schools with computer labs and computer network connection to access this online . Given these

findings , we thought that it would be reasonable to enter into an explanation of this topic , and

thinking it would be a relief for its use and application in practice , thus creating web

applications in HTML as programming language .

4 Prishtinë 2014

Hyrje

Shfletuesit e faqeve të internetit(Web-browserët) , janë aplikacione softuerike që u lejojnë

përdoruesve t`ju çasen të dhënave (ueb- aplikacioneve) të vendosura brenda një faqe interneti

(web site) dhe të ndërveprojnë me përmbajtjen e tyre. Wikipedia me të drejtë i quan shfletuesit si

"klient universal për çdo aplikacione të internetit " .

Të dhënat, informatat si(teksti,fotografitë,muzika,video klipe etj.) që ndodhen brenda shfletuesit,

janë paraqitur për përdoruesit dhe gjenerohen në mënyrë dinamike (në një format të veçantë

p.sh.në gjuhën programuese “HTML”, duke përdorur CSS–n si dizajnues i web faqes ).

Të gjitha këto të dhëna, informata apo ( ueb- aplikacione) ndodhen në një Web-server.

Gjuhët programuese janë një ndër elementet më të rëndësishme për zbatimin e tyre në

shkolla gjatë procesit edukativo-arismore, kryesisht në lëndën e informatikës, duke kompletuar

kështu një bazë të mirë për zhvillimin e njohurive bashkëkohore të teknologjisë së informimit

dhe komunikimit. Nuk mundë të kemi një përparim në të kuptuarit e lëndës së informatikës, në

qoftëse nxënesit nuk e përvetësojnë në mënyrë të duhur dhe të nevojshme mënyren e

programimit në përgjithësi e kështu edhe krijimin e web aplikacioneve në HTML si gjuhë

programuese në veçanti. Gjatë përvojës sime të gjatë në arsim në shkollën fillore dhe e mesme të

ulëta kam vërejtë se shumë nxënës kanë vështërsi në të kuptuarit e programimit në mënyrë

profesionale. Për këtë qëllim, së pari do t`i paraqes njohuritë e nevojshme për krijimin e web

aplikacioneve në HTML, konkretisht për kodimin e aplikacioneve, në mënyrë që të bëhet sa më

e kuptueshme jo vetëm për nxënësit por edhe për lexuesin në përgjithësi. Duke e pas parasysh

këtë nevoje të domosdoshme teknologjike, është nje arsye e madhe pse e kam zgjedhur këtë

temë për diplomim në fakultetin e edukimit, drejtimi “Teknologji- Informatikë”.

5 Prishtinë 2014

Kapitulli I

1.WEB aplikacionet në HTML

1.1 Rreth HTML-ës

H-T-M-L janë iniciale të shprehjeve: H= Hyper, T=Text, M= Markup dhe L= Language, që

kur të kombinohen së bashku paraqesin shprehjen angleze: HyperText Markup Language (Gjuha

e ngritur që bazohet në hipertekst). HyperText Markup Language, është një gjuhë programuese

që përdoret për të krijuar web faqe të ndryshme varsisht nga dëshira e përdoruesit . Për të

zhvilluar Web aplikacione përdoren "HTML tagjet" për pjesë të ndryshme të dokumentit.

Gjithashtu tagjet HTML përdoren për të specifikuar titujt, paragrafët, tekstet, figurat(imazhet)

listat, tabelat, videoklipe dhe shumë më tepër. HTML është në mesin e gjuhëve standarde

gjenerale, (SGML)1 dhe është përcaktuar nga World Wide Web Konsorciumi (W3C)

2.

Çfarë na nevojitet për të krijuar HTML ? Nuk ka nevojë për ndonjë pajisje të veçantë ose

software për të krijuar HTML . Në fakt më poshtë, do ti shkruajmë se çka nevojitet:

- Kompjuteri,

-Tekst ose HTML editor,

Shumica e kompjuterëve tashmë kanë një editor teksti dhe lehtë mund të krijohet një web faqe

HTML prej këti editori. Mundet po ashtu të shkarkohet një editor HTML nga interneti, apo

ndonjë program aplikativ sikurse Fron Page,CoffeeCup të cilët janë nga redaktorët më popullore

për krijimin e web faqese. Në qoftë se ju nuk keni të holla për të blerë një redaktor , ju mund të

shkarkoni një të lirë për shembull versioni CoffeeCupfree (Windows ) dhe TextPad (Windows ) .

Nëse ju nuk keni një editor HTML , dhe ju nuk doni të shkarkoni një të tillë, atëherë vetëm një

editor teksti ju mjafton. Shumica e kompjuterëve tashmë kanë një editor teksti . Shembuj të

redaktorëve teksti mund të jenë si Notepad-i ( për Windows ), Pico (për Linux ), ose Simpletext /

Tekst Edit / Text grindavec (Mac), FronPage etj.

Për të krijuar web faqe gjithashtu nevojitet edhe:

- Web Browser, për shembull, Internet Explorer, Firefox , ose Google Chrome, Safari.

Shtrohet pyetja, a duhet të jeni on-line (i kyçur në internet) ? Jo , ju nuk duhet të jeni on-line për

të krijuar web faqe. Ju mund të krijoni web faqe në kompjuterin tuaj lokal . Ju duhet të kyqeni

në internet vetem atëherë kur ju dëshironi për ta publikuar web faqen tuaj .

1.2 Si t'ia fillojmë për krijimin e weba aplikacioneve në HTML.

Ekzistojnë dy opcione për krijimin e web aplikacioneve në HTML:

1. Opcioni i parë, duke përdor programet aplikative siç janë : FrontPage, Microsoft

Word, Adobe Dreamweaver etj.

Microsoft FrontPage (emri i plotë Microsoft Office FrontPage) është editor apo program

aplikativ për krijimin e web faqeve , që administrohet nga Microsoft-i . FrontPage fillimisht

është krijuar në Cambridge, Massachusetts nga kompania Technologies Vermeer ,Incorporates

1 Standard General Markup Language 2 WWWC

6 Prishtinë 2014

FrontPage është projektuar për tu përkrahur nga shfletuesit, Internet Explorer , Google

Chrome ,Firefox ,Safari etj.

Është projektuar ashtu që përdoruesit nuk i shohin detajet e kodimit të HTML-ës, duke bërë

kështu të mundur për fillestare që të krijojë Web faqet shumë lehtë. Dinamik Web Templates (

DWT ) janë përfshirë për herë të parë në FrontPage 2003 duke i lejuar përdoruesit të krijiojmë

shabllone të vetme që mund të përdoren në të gjitha Web faqe dhe Web site.

Buttonat Interactivë u jepin përdoruesve një mënyrë të re të lehtë për të krijuar Web grafika për

kërkim dhe lidhje , duke eliminuar nevojën për një paketë të komplikuar image - editing të

tilla si Adobe Photoshop.

Accessibility checker u jepin përdoruesve aftësinë për të kontrolluar nëse kodi i tyre është në

përputhje me standarde dhe se Web faqja e tyre është lehtë e arritshme për njerëzit me aftësi të

kufizuara .

FrontPage është një mjet i fuqishëm që përdoret për të hartuar, krijuar dhe publikuar web faqet.

Në kuadër të këti software-i ju keni mundësi të zgjidhni llojin e web site-it që ju dëshironi,

ndërsa FrontPage gjeneron dhe organizon të gjitha dokumentet e web site që ju nevojitet.

Atëherë ju mund të plotësoni web faqen tuaj me tekst, figura, tinguj dhe karakteristika të tjera që

ju dëshironi ti prezantoni.

Duke përdorur një mjet si FrontPage, për të krijuar një web site është tani shumë më e lehtë dhe

më intuitive se sa që ishte në të kaluarën.

Përmbajtjet tuaja të krijuara me anë të FrontPage mund të anashkalojnë nevojen për të mësuar

kodet HTML (Hypertext Markup Language), e cila është gjuha apo kodim që përdorin web

shfletuesit për të paraqitur përmbajtjen web.

Për ti bërë të gjitha këto detyra, FrontPage ju ofron tre programe të ndryshme. Ata janë:

FrontPage Explorer, FrontPage Editor dhe Web Server FrontPage Personal.

Në vijim do të paraqesim nje shembull të thjesht të web faqes të krijuar nga programi Front Page

Në këtë fotografi paraqitet

dizajnimi I web faqes me

ndihmën e programit FrontPage.

Përmbajtja e kësaj web faqe është

realizuar, duke i përdorur veglat e

programit , të cilat kanë

mundësuar editimin e tekstit

insertimin e fotove dhe linqeve

etj.

Foto1:Dizajnimi i web faqes me ndihmën e FrontPage-it.

7 Prishtinë 2014

Ky është rezultati i paraqitur në

shfletues (Google Chrom).

Në shfletues shifet titulli (Web

Faqja e krijuar nga FrontPage),

linqet(Ballina,Materiali,Kontakti)

dhe fotografitë.

Foto2: Rezultati në shfletues

2. Opcioni i dytë, mësimi i kodeve të HTML-s

Këtu nga kjo temë, do të përdorim opcionin e mësimit të kodeve të HTML për të krijuar një faqe

interneti. Në fakt , nga koha që përfundohet së lexuari kjo temë, lexuesi vetë mund të aftësohet

që ta krijojë një web faqe ! Për t`i krijuar web aplikacionet në HTML zakonisht duhet të

veprohet si në vijim:

-Të krijohet një file HTML-je,

-Të shkruhen disa kode të HTML-ës,

-Të përsëriten hapate fundit ( nëse është e nevojshme ),

-Krijohet një Web-faqe,

Në vazhdim , hapat e mësipërm do t`i tregojmë në më shumë detaje . Krijimi i një file(skedar)

HTML-je. Një skedar HTML-je është thjeshtë një skedar teksti e ruajtur me një . Html ose .htm

extension ( dmth. në krahasim me një extension . Txt ). Hapet një editor teksti i thjeshtë nga

kompjuteri, Notepad, FrontPage ,Visual InterDev, ASP.NET – Editori, Dreamweaver, ( ndoshta

Notepad nëse ju jeni duke përdorur Windows apo TextEdit) . Preferohet të përdoret një editor

HTML special të tillë si CoffeeCup. Krijojmë një skedë të re ( nëse nuk është krijuar tashmë

),ruhet file(skederi) si shembulli1, me prapashtesë(extension) .html. Më poshtë po i shkruajmë

disa kode të HTML në Notepad për shembull :

8 Prishtinë 2014

Kodi:

<html>

<head>

<title>Shembulli në

Shfletues</title>

</head>

<body>

<p>Me pak se 5 minuta kemi

kriju web faqen e pare!</p>

</body>

</html>

Foto3:.- Pamja e kodimit në tekst editorin e Notepad-it

Për ta shikuar rezultatin nga dosja

e krijuar klikohet dy here mbi të,

ose ...hapet web shfletuesi nga

kompjuteri (për shembull:

Internet Explorer , Firefox ,

Netscape, Google Chrome,

Safari etj) . Nga shfletuesi

selektohet File / Open, pastaj

klikohet në " Browse ". Një kuti

dialogu do të shfaqet duke bërë që

ju të lundroni në dosje. Shkoni tek

dosja, pastaj zgjidhni "Open".

Foto4: - Rezultati në shfletues, pas ekzekutimit të kodimit.

9 Prishtinë 2014

1.3 Elementet e web aplikacioneve në HTML .

Elementet e HTML janë bazat e HTML-ës . Dokumentet e HTML-ës janë thjesht një skedar

teksti i përbërë nga elementet e HTML-s . Këto elemente përcaktohen duke përdorur tagjet e

HTML-ës. Tagjet e HTML-ës i tregojnë shfletuesit se cilat elemente dhe se si duhet paraqitur ato

HTML përbëhet nga gati 100 tagje . Të gjitha dokumentet e HTML-ës duhet të përmbajnë të

paktën të gjitha tagjet(etiketat) në këtë mënyrë:

<!--...-->

<!doctype>

<a>

<abbr>

<acronym>

<address>

<applet>

<area>

<b>

<base>

<basefont>

<bdo>

<big>

<blockquote>

<body>

<br>

<button>

<caption>

<center>

<cite>

<code>

<col>

<colgroup>

<dd>

<del>

<dfn>

<dir>

<div>

<dl>

<dt>

<frame>

<frameset>

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

<head>

<hr>

<html>

<i>

<iframe>

<img>

<input>

<ins>

<isindex>

<kbd>

<label>

<legend>

<li>

<link>

<map>

<menu>

<meta>

<noframes>

<noscript>

<object>

<ol>

<optgroup>

<p>

<param>

<pre>

<q>

<s>

<samp>

<script>

<select>

<small>

<span>

<strike>

<strong>

<style>

<sub>

<sup>

<table>

<tbody>

<td>

<textarea>

<tfoot>

<th>

<thead>

<title>

<tr>

<tt>

<u>

<ul>

<var>

10 Prishtinë 2014

1.4 Shpjegimi i kodeve kryesore (elementare)

Të gjitha dokumentet e HTML-ës (web faqet) duhet të përdorin kodet themelore si bazë në të

cilën do të mbështet faqja. Kodet elementare janë të përkryera dhe përbëhen me katër pal të

tagjeve (etiketave) e të cilat janë:

<html>dhe</html>

<head>dhe</head>

<title>dhe</title>

<body>dhe</body>

Elementi < ! DOCTYPE ... > i tregon shfletuesit se cili version i dokumentit në HTML është

përdorur .

Elementi <html> mund të mendohet si një enë ku të gjitha tagjet tjera janë brenda saj ( me

përjashtim të tagut DOCTYPE ! .

Tagu <head> përmban informacion që nuk është apo nuk shikohet brenda shfletuesit tuaj ( të

tilla si tagu meta , JavaScript dhe CSS ), edhe pse tagu <title> bën përjashtim për këtë .

Përmbajtja e tagut <title> shfaqet në shiritin e titullit të shfletuesit (drejtë në krye të shfletuesit).

Tagu <body> është zona kryesore për përmbajtjen e juaj. Kjo përmban tekstin e trupit .

Mbyllja dhe hapja e tagut .

Të gjitha këto tagje kanë hapjen dhe mbylljen e tagjeve , dhe se përmbajtja e tagjeve është

vendosur në mes tyre . Ka disa përjashtime nga ky rregull .

Ju gjithashtu do të vëreni se tagu i mbylljes është paksa e ndryshme për tagun e hapjes –tagu i

mbylljes përmban një vije thysore përpara (/) pas < . Kjo tregon shfletuesit se ky tag është i

mbyllur. Shtrohet pyetja; si të përdoren shkronjat e mëdhaja apo të vogla ? Ju mund të përdorni

shkronjat e mëdha ose të vogla kur kodoni në HTML, megjithatë, në shumicën e rasteve

përdoret me shkronja të vogla .

11 Prishtinë 2014

Kapitulli II

2. Formatimi i web aplikacioneve në HTML

2.1 Formatimi në HTML

Të njihemi me disa nga opcionet e formatimit të cilat janë në dispozicion edhe tek programi i

përpunimi të tekstit apo Wordit në kuadrin e paketës së Microsoft Office , dhe tek softvere të

tjera, të tilla si QuarkXPress .

2.2 Formati i Tagjeve

Pra, shumë nga këto karakteristikat e formatimit janë në dispozicion gjithashtu edhe në HTML .

Disa nga opsionet më të zakonshme të formatimit po i paraqesim më poshtë .

<B>Teksti</B> , <B> është fillimi i tagut bold, "Teksti" është shprehja e infektuar me tagun

<B> , </B> është mbyllja e tagut. Rasti tjeter: <I>Italic</I><TT>Typewriter</TT>

<B><I>Bold dhe Italic</I></B> si rezultat paraqitet Bold and Italic

<B><TT>Typewriter dhe Bold</TT></B>si rezultat paraqitet Typewriter and Bold

Nëse dëshironi të përdorni shumë tagje për një shprehje duhet të veprojme si më poshtë:

<B><I><TT>Shprehja Brenda shumë tagjeve</TT></I></B>

Shembull:

<!DOCTYPE html>

<html>

<body>

<p><b>Ky është teksti

Bold</b></p>

<p><strong>Ky është teksti

strong</strong></p>

<p><i>Ky është teksti italic</i></p>

<p><em>Ky është teksti

emphasized</em></p>

<p><code>Ky është teksti sipas

produktit të kompjuterit</code></p>

<p>Ky është_{indeksi i poshtëm(superscript)} dhe <sup>indeksi i

sipërm(superscript)</sup></p>

</body>

</html> Foto5.-Kodimi dhe rezultati në shfletues, pas ekzekutimit të kodimit.

12 Prishtinë 2014

Tagjet Unike:

Ekzistojnë tagje që duhet të përdoren vetëm si të vetëm domethënia e të cilëve është treguar më

poshtë:

<HR> Kjo komandë mundëson ndarjen e teksteve me vija horizontale .

<BR> Kur dëshirojmë të fitojmë ndërprerjen e caktuar të tekstit vendoset tagu <BR> (shkurtesa

e fjalës Break).

<P> Paragrafin (kryerreshtin) kodi HTML nuk e njeh vetvetiu, prandaj duhet që në vendin ku

dëshirohet të vendoset kryerreshti i ri të shënohet tagu <P>.

-Titujt

Janë tagjet veçanta për specifikimin e titujve në HTML. Ka 6 nivele të titujve(krerëve) në

HTML duke filluar nga <h1> për më të rëndësishme, gjer në <h6> për më pak të rëndësishëme.

Këtu janë Kodet:

<h1>Titulli 1</h1>

<h2>Titulli2</h2>

<h3> Titulli 3</h3>

<h4> Titulli 4</h4>

<h5> Titulli 5</h5>

<h6> Titulli 6</h6>

Foto6:- Rezultati në shfletues, pas ekzekutimit të kodimit.

Elementi <strong>, Për të

vendosur një rëndes të fortë në një

pjesë të tekstit, përdorim

elementin <strong> .

<p><strong>Kujdes:</strong>

Ju lutem keni lënë derën

hapur.</p>

Foto7:.-Rezultati në shfletues, pas ekzekutimit të kodimit.

13 Prishtinë 2014

Elementi <em>

Ju mund të vendosni theksin në

tekst duke përdorur elementin

<em> .

<p>Luleshtrydhet janë të

<em>shijshme</em>!</p>

Foto 8:- Rezultati në shfletues, pas ekzekutimit të kodimit.

Vijë Pushimi.

Ju mund të bëni një vijë pushim

duke përdorur <br> elementin .

<p> Këtu është një <br /> vije

pushim .</p>

Foto9:.- Rezultati në shfletues, pas ekzekutimit të kodimit.

Rregulla e vijës horizontale.

Ju mund të krijoni një rregull

horizontale duke përdorur

elementin <hr> .

Ketu paraqitet vija

horizontale...<hr /> ... kjo eshtë

vija orizontale:

Foto10:.- Rezultati në shfletues, pas ekzekutimit të kodimit.

14 Prishtinë 2014

Tagu < FONT>:

Formatizimi i tekstit gjatë kodimit në HTML bëhet me sintaksën e më poshtme:

Shembull:

<!DOCTYPE html>

<html>

<body>

<FONT COLOR = ”ngjyra”

SIZE = “madhësia” FASE =

“Lloji i shkrimit”> Teksti që

formatizohet </FONT>

</body>

</html>

Foto11:.- Rezultati në shfletues, pas ekzekutimit të kodimit.

Një shembull tjetër i formatizimit:

<!DOCTYPE html>

<html><body>

<p style="background-

color:#FF0000">

Vendosni ngjyrën duke përdorur

kodin Hexadecimal

</p> <p style="background-

color:rgb(255,255,0)">

Vendosni ngjyrën duke përdorur

kodin"RGB"</p>

<p style="background-

color:pink">

Vendosni ngjyrën,duke përdorur

Emrin e ngjyrës</p></body>

</html>

Foto12:.- Rezultati në shfletues, pas ekzekutimit të kodimit.

15 Prishtinë 2014

Lista e pa organizuar ( pa - numëruar ) _<UL> 3. Për të krijuar një listë të parenditur,

përdorni elementin <ul> për rrath

të zi, dhe element <li> se qka

është duke u listuar .

Kodi:

<ul>

<li>List pika 1</li>

<li>List pika 2</li>

<li>List pika 3</li>

</ul>

Foto13:.- Rezultati në shfletues, pas ekzekutimit të kodimit.

Lista e renditur me numra ( të numëruara ) _ <OL>4.

Për të krijuar një listë të renditur , përdorni elementin <ol> për të përcaktuar listën , dhe element

<li> se çka është duke u listuar .Vini re, se i vetmi ndryshim midis një liste të renditur dhe një

listë të parenditur është shkronja e parë e përkufizimit listës ( " o " për numra , " u " për pika ) .

Kodi:

<ol>

<li>List pika 1</li>

<li>List pika 2</li>

<li>List pika 3</li>

</ol>

Foto14: Rezultati në shfletues, pas ekzekutimit të kodimit.

3 Unordered List 4 Ordered List

16 Prishtinë 2014

Një shembull tjetër i kodimit të formatizimit të tekstit duket si më poshtë.

Ju mund të kopjoni dhe të ngjitni (Copu-Paste) këto kode në tekst editorin tuaj në

momentin kur ndiheni të gatshëm të filloni dizajnimin e web faqes suaj.

Kodi Burimor:

<html>

<body>

<h1>Kreu im i pare</h1>

<p>Paragrafi im i pare.</p>

</body>

</html>

Foto15:.- Rezultati në shfletues, pas ekzekutimit të kodimit.

Kapitulli III

3.Krijimi i web aplikacioneve të tjera në HTML

3.1 Kodimi i Hiperlidhjeve (Linkave) në HTML

Një hyperlink (ose link) në web faqe mund te jetë një fjalë, grup i fjalëve, apo imazh që

përdoruesi mund të klikojë mbi të, e të hidhet në një tjetër dokument. Linqet mundësojnë

përdoruesve të klikojnë dhe të gjejnë rrugën e tyre nga një web faqe në web faqe tjetër. Kur ju

hyni me kursor(shigjeta) mbi një lidhje në një Web faqe, shigjeta do të kthehet në një dorë të

vogël. Gjatë dizajnimit apo programimit të ueb-faqeve, një vend shumë me rëndësi e zën

hiperlidhjet apo siç quhen shkurt linkat(vegzat). Linkat mundësojnë lidhjen e faqeve, fajllave

dhe e-mail adresat . Hiperlidhja në ueb-faqe mund të krijohet duke përdorur komandën: <A

HREF = “adresa” > emri_i_linkut </A>. Atributi HREF specifikon destinacionin e një lidhje.

Për shembull: <a href="URL5">Adresa</a>

5 Uniform Resource Locator

17 Prishtinë 2014

Shprehja adresa e futur brenda tagut tregon lokacionin (adresën) se me cilën: faqe, fajll apo

emajll adresë do të lidhemi. p.sh shprehja adresa mund të zëvendësohet në këtë mënyrë:

adresa = http://www.hotmail.com adresa = emri_i_fajllit.html ose adresa = mailto: mailadresa

Në qoftë se në vendin e caktuar dëshirojmë që të krijojmë link, i cili do të ndërlidhë faqen tone

me faqen, fajllin apo postën elektronike atëherë përdorim tagjet me komandat si më poshtë:

<A HREF = http://www.hotmail.com >Kalo ne Hotmail </A>

<A HREF = “Faqja1.html” > Shko te Faqja1 </A>

<A HREF = “mailto: interneti_2014@yahoo.com” >Lidhja_me_emailin_tim </A>

Shembull:

<!DOCTYPE html>

<html> <body>

<a href="http://www.hotmail.com" target="_blank">Vizitoni posten elektronike!</a>

<p>Nëse keni vendosur për atributin "_blank6", lidhja do të hapet në një dritare të re të

shfletuesit / tab. </ P></body>

</html>

Foto16:.- Rezultati në shfletues, pas ekzekutimit të kodimit

3.2 Kodimi i Imazheve .

Deri më tani kemi trajtuar si bëhet kodimi i teksteve në HTML dhe paraqitja e tyre në ueb-faqe.

Tani do të tregojmë se si do ta inkorporojmë (përfshijmë) fotografinë dhe grafikën në ueb-faqe

6 _ e zbrazët(web faqe pa përmbajtje)

18 Prishtinë 2014

me ndihmën e HTML kodimit. Fotogafia apo grafika duhet të jetë e formatit me kstenzion: .jpg (

Joint Photographic Group), .gif ( Graphics Interchange Format ose .bmp), etj. Fotografia në ueb-

faqe mund të paraqitet në qoftese në tag gjatë HTML kodimit përdoret komanda:

<IMG SRC=”Shtegu_i_fotografisë_fajlli.jpg”> p.sh.

<IMG SRC="C:\fotografia.bmp">

3.3 Madhesia e Imazheve.

Madhësia e fotografisë në ueb-faqe mund të ndërrohet dhe preferohet që të jetë sa më e vogël, në

mënyrë që fajlli HTML që krijon ueb-faqen të mos bëhet shumë i madh. Preferohet që ueb-faqja

të ketë më shumë tekst dhe më pak fotografi, ose këto fotografi të jenë me dimensione të vogla.

Kontrolli i madhësisë së fotografisë mund të bëhet nëse në tagun për vendosje të fotografisë

shënojmë edhe gjerësinë (Width) apo gjatësinë (Height) e fotografisë.

Komanda HTML në këto raste do të duket:

<IMG SRC=”Shtegu_i_fotografisë_fajlli.jpg” width=”gjerësia” height=”gjatësia”>

p.sh. Në qoftë se dëshirojmë që fotografia të ketë dimenzione saktësisht të definuara, atëherë

shënojmë gjersinë dhe gjatësinë e fotografisë të shprehur me numra:

<IMGSRC=”Shtegu_i_fotografisë_fajlli.jpg” width=”200” height=”300”>

Përvec disqeve të kompjuterit fotografia mund të huazohet edhe nga ndonjë ueb-faqe tjetër duke

e përdorur sintaksën e më poshtme.

<IMG SRC=” http://www.kosova.com/foto.jpg”>

Shembull: Kodimi:

<html>

<head>

<title> FAQJA E DYTË</title>

</head>

<body>

<br><br>

<IMG SRC=”

http://www.kosova.com/foto.jpg”>

<body>

</html>

Foto17:.- Rezultati në shfletues, pas ekzekutimit të kodimit.

19 Prishtinë 2014

3.4 Listimet në HTML.

Për të bërë listime në Ueb-faqe me ndihmën e HTML-së përdoren këto tagje:

<OL> - për numërim gjatë listimit. (OL = “Ordered List” tag)

<UL> - për rrathë të vegjël të zi gjatë listimit. (UL=“Unordered List”tag)

<LI> - për të identifikuar se çka është duke u listuar. (LI = “Liste Item” tag)

3.5 Listimet e rregulta (OL =“Ordered List”)

Cikli i komandave të më poshtme demonstron paraqitjen e tekstit të listuarme numra:

<HTML>

< BODY >

Lënda Programimi në Internet përfshinë:

<OL>

<LI>HTML

<LI>Jscript

<LI> ASP, JSP, PHP dhe

<LI>XML

</OL></BODY></HTML> Foto18: Rezultati në shfletues, pas ekzekutimit të kodimit.

3.6 Listimi jo të rregullta (UL = “Unordered List”).

Me ciklin e komandave të më poshtëme të

kodit HTML:

<HTML>

< BODY > Lënda Programimi në www

përfshinë:

<UL>

<LI>HTML

<LI>Jscript

<LI>ASP,JSP,PHP dhe

<LI>XML

</UL></BODY>

</ HTML > Foto19:.- Rezultati në shfletues, pas ekzekutimit të kodimit.

20 Prishtinë 2014

3.7 Tabelat në HTML.

Rrugë tjetër për formatizimin e të dhënave duke e përdorur XHTML-in është përdorimi i

tabelave, të cilat i organizojnë të dhënat në rreshta dhe kolona.

Të gjitha tagjet dhe tekstet që përfshihen brenda tabelës duhet të vendosen brenda tagjeve:

<TABLE> dhe </ TABLE > që paraqesin fillimin dhe fundin e tabelës.

Tagjet <TABLE> dhe </ TABLE > duhet të vendosen brenda tagjeve <BODY> dhe </BODY>.

Emrat e kolonave (kokat e kolonave) të tabelës duhet të vendosen brenda tagjeve <THEAD> dhe

</THEAD>. Rreshtat me të dhënat e tabelës vendosen brenda tagjeve <TBODY> dhe

</TBODY>. Kurse rezultatet e llogaritjeve të tabelave (fundi i tabelës) brenda tagjeve:

<TFOOT> dhe </TFOOT>.

Tagu <TR> paraqet një rresht në tabelë dhe përdoret për formatizimin e celulave të një rreshti.

Të gjitha celulat brenda tagjeve <TR> dhe </TR> e përbëjnë rreshtin.

Ekzistojnë dy lloje të tagjeve për krijimin dhe formatizimin e celulave:

1. Tagjet <TH> dhe </TH> për krijimin dhe formatizimin e celulave në kokat e tabelës p.sh:

<THEAD>

<TR> <TH> Koka e një kolone (Atributi i një kolone) </TH> </TR> </THEAD>.

2. Tagjet <TD> dhe </TD> për krijimin dhe formatizimin e qelulave në trupin e tabelës. p.sh

<TBODY>

<TR> <TD> E dhëna në qelulën1 </TD> </TR>

<TR> <TD> E dhëna në qelulën2 </TD> </TR>

</TBODY>.

Atributet për tagjet e tabelave:

-Atributet për tagjet: <TABLE>, <THEAD >, < TBODY >, <TR>, <TH> dhe <TD> janë:

BORDER – Për kufizimin e tabelave (Vijat e tabelës nuk do të paraqiten në Browers nëse

atributi BORDER=”0”).

ALIGN – Shkallëzon të dhënat në tabelë dhe në celula (majtas, në qendër dhe djathtas).

WIDTH – Cakton gjërsinë e tabelave dhe të celulave.

CELLPADDING- Krijon një jastëk (mbrojtje) të pikselave ndërmjet të celulav dhe brenda tyre.

CELLSPASING - Eliminimin e hapësirave ndërmjet celulave.

BGCOLOR - Cakton dukjen e ngjyrës mbrapa të dhënave të tabelës dhe celulave.

Shembull:

21 Prishtinë 2014

<HTML>

<HEAD>

<TITLE>Faqja meTabela</TITLE>

</HEAD>

<BODY> <TABLE Border="2">

<TR>

<TH>Nr.</TH <TH>Emri</TH> <TH>Mbiemri</TH> <TH>Pika</TH> <TH>Nota</TH>

</TR>

<TR><TD>1</TD><TD>Arta</TD><TD>Morina</TD><TD>32</TD><TD>1</TD></TR>

<TR><TD>2</TD><TD>Artan</TD><TD>Gashi</TD><TD>54</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>Bleona</TD><TD>Deliu</TD><TD>63</TD><TD>3</TD></TR>

<TR><TD>4</TD><TD>Drita</TD><TD>Kadriu</TD><TD>85</TD><TD>4</TD></TR>

<TR><TD>5</TD><TD>Zana</TD><TD>Kabashi</TD><TD>92</TD><TD>5</TD></TR>

</TABLE>

</BODY>

</HTML>

Foto20:.- Rezultati në shfletues, pas ekzekutimit të kodimit.

3.8 Ueb Format në HTML

Format në HTML përdoren për të bartur të dhënat apo informatat në një server.

Për paraqitjen e të dhënave individuale të një personi apo entiteti tjetër në një faqe interneti

preferohen Ueb format.

22 Prishtinë 2014

Me ndihmën e Ueb formave nga broversi mundësohet: paraqitja, vendosja, fshirja dhe ndryshimi

i të dhënave që ndodhen në një Bazë të të dhënave. Të gjitha tagjet dhe të dhënat që përfshihen

brenda formës duhet të vendosen brenda tagjeve : <FORM> dhe </ FORM > që paraqesin

fillimi dhe fundin e formës. Tagjet < FORM > dhe </ FORM > duhet të vendosen brenda

tagjeve <BODY> dhe </BODY>. Tagu <FORM> prëdore t për krijimin e formave.

HTML tagu <FORM> i ka dy atribute: METHOD dhe ACTION.

Atributi METHOD duhet t'iu bashkëngjitet njera nga vetit (kërkesat): GET ose POST .

GET është kërkesa për dokument, kurse me POST kërkesa dërgon parametra.

Atributi ACTION specifikon faqen që do të thirret për dërgimin e të dhënave.

Ja si përdoret praktikisht teoria e më sipërme:

<FORM METHOD = "POST" ACTION = "EmerFajlli.ekstenzioni">

<FORM METHOD = “GET" ACTION = "EmerFajlli.ekstenzioni">

Fushat (kontrollat) në Ueb forma:

Fushat në Ueb forma janë: text boxat, listë boxat, check boxat, combo boxat, radio butonat dhe

butonat për dërgimin dhe fshirjen të dhënave.

Për krijimin e: text boxave, check bxave, radio butonat dhe butonat për dërgimin dhe fshirjen të

dhënave, përdoret tagu <INPUT>.

Forma e përgjihshme e tagut INPUT është:

<INPUT NAME ="emri" TYPE="tipi" VALUE=”vlera” SIZE="madhësia">

Atributet NAME dhe VALUE kanë rëndësi të madhe në kombinimin kontrollave të Ueb iterfejsit

me bazat e të dhënave.

Varësish nga atributit TYPE do të caktohet edhe lloji i Input tagut:

TYPE="text" - krijon tekst boks

TYPE="password" - krijon password boks

TYPE=“radio" - krijon radio boton

TYPE=“checkbox" - krijon buton kontrollues

TYPE="submit" - krijon buton për dërgimin e të dhënave

TYPE="reset" - krijon buton për fshirjen e të dhënave

23 Prishtinë 2014

Shembull:

<HTML>

<HEAD>

<TITLE> WEB FORMA </TITLE>

</HEAD> <BODY bgcolor="cian">

<h3>FORMULARPËR

APLIKIM</h3><HR> <formaction="process.php

"method="post">

Nr. Studentit: <input type="text"/>

<br><br>Emri: <input type="text"/> <br><br>Mbiemri:<input

type="text"/><br><br>

Vendlindja: <select>

<option value="0.">

<option value="1.">Prishtinë <option value="2.">Mitrovic

<option value="3.">Gjilan

<option value="4.">Pej

<option value="5.">Gjakovë <option value="6.">Prizren

<option value="7.">Ferizaj

<option value="8.">Podujevë</select> <br><br><h4>Drejtimet:</h4><p>

Matematik: <input type="checkbox"/><br>

Informatik: <input type="checkbox"/> <br><br><h4>Gjinia:</h4><p>

<input type="radio" name="gjinia:"/>Mashkull:<br>

<input type="radio" name="gjinia:"/>Femër:

<br><br>Nr i Bankës : <input type="Password" name="Password" value=""/> <br ><br><input type="submit" name="submit" value="DËRGO"/>

<input type="reset" name="reset" value="PASTRO"/>

</form></BODY>

</HTML>

Foto21:.- Rezultati në shfletues, pas ekzekutimit të kodimit.

HTML Text-Boxi: Text-Boxi në HTML krijohet me ndihmën e tagut <INPUT>.

Në Ueb Format e Ueb faqeve kontrolla Text-Box krijohet me sintaksën e më poshtme:

<INPUT TYPE = TEXT NAME = “Komuna” >. Text-Boxi i ka dy atribute : TYPE dhe NAME.

Atributi TYPE me vlerën TEXT e definon Text-Boxin, kurse atributi NAME e definon emrin e

Text-Boxit

24 Prishtinë 2014

HTML List-Boxi: List-Boxi krijohet me ndihmën e dy HTML-tagjeve: <SELECT> dhe

<OPTION>. Për çdo List-Box bëhet vetëm një hapje dhe një mbyllje e tagut

SELECT,<SELECT>…..</SELECT>).

Brenda hapjes dhe mbylljes së tagut <SELECT> mund të jenë disa <OPTION> tagje.

P.sh. Nëse dëshirojmë të krijojmë një List-Box në të cilin do të përfshihen 7-ditët e javës,

nevojiten 7- <OPTION> tagje. Këto tagje duhet të vendosen mbrenda tagjeve

<SELECT>….</SELECT> si më poshtë:

<SELECT NAME = DitëteJavës >

<OPTION VALUE = “0”>E Hene

<OPTION VALUE = “1”>E Marte

<OPTION VALUE = “2”>E Merkur

<OPTION VALUE = “3”>E Enjet

<OPTION VALUE = “4”>E Premte

<OPTION VALUE = “5”>E Shtunë

<OPTION VALUE = “6”>E Diel

</SELECT>

Foto22:.- Rezultati në shfletues, pas ekzekutimit të kodimit.

Vetia NAME në tagun <SELECT> në mënyrë unike e identifikon List-Boxin. Vetija VALUE

brenda tagjeve <OPTION> identifikon në mënyrë jo-unike çdo vlerë të List-Box-it që e

zgjedhim.

HTML Check Boxi: Check Box-at mundësojnë zgjedhjen e disa opsioneve njëkohësisht. P.sh.

dëshirojmë të pyesim studentët përmes Web-faqes se cilat gjuhë programuese dëshirojnë t’i

mësojnë (në këtë rast studentët e kanë mundësinë t’i zgjedhin disa apo të gjitha gjuhët

programuese me ndihmën e Check_Boxave) .

Check Box-at krijohen duke e përdorur tagun <INPUT> me vetin TYPE duke ja bashkangjitur

vlerën CHECKBOX. Sepse Check Box-at përdoren si grup relativ i opsioneve, të gjithë Check

Box-at relativ duhet të kenë vlera identike për vetin e tyre NAME.

Check Box-at në mënyrë unike identifikohen nga vetia e tyre VALUE. Forma e përgjithshme për

Check Box-at është si më poshtë:

25 Prishtinë 2014

<INPUT TYPE=CHECKBOX NAME=konstante VALUE=variabile>

Kur të krijohen Check Box-at duhet që të ia japim të gjithëve të njëjtin emër në vetinë NAME

kurse me vlera të ndryshme në vetin VALUE si më poshtë:

<B>Ju lutem zgjhidhni gjuhët programuese</B><BR>

<INPUT TYPE=CHECKBOX NAME=Gjuhët VALUE=VB> VB <BR>

<INPUT TYPE=CHECKBOX NAME=Gjuhët VALUE=C++> C++ <BR>

<INPUT TYPE=CHECKBOX NAME=Gjuhët VALUE=Java> Java <BR>

HTML Radio Butonat: Për dallim nga Check-Boxat Radio-Botonat nga grupi i opsoneve të

ndryshme mundësojnë zgjedhjen e vetëm njërit prej tyre. P.sh. Gjatë një semestri lëndë

zgjedhore janë disa por studenti e ka mundësinë ta zgjedh vetëm njërën prej tyre, atëherë për

eliminimin e gabimeve në këto raste përdoren Radio-Butonat.

Radio-Butonat krijohen duke e përdorur tagun <INPUT>, me vetin TYPE që duhet t’i

ashkëngjitet e dhëna RADIO, me emër të njëjtë në vetin NAME dhe me vlera të ndryshme në

vetin VALUE, si më poshtë:

<INPUT TYPE=RADIO NAME=Konstant VALUE=Variabile> .

Radio-Butonat lidhës janë një bashkësi e radio-butonave nga të cilët vetëm një radio-buton mund

të zgjidhet. p,sh. Si më poshtë:

Zgjedhe njërën nga lëndët zgjedhore:

<INPUT TYPE=RADIO NAME=Lënda VALUE= 2 >BDH <BR>

<INPUT TYPE=RADIO NAME=Lënda VALUE= 1 >POO <BR>

<INPUT TYPE=RADIO NAME=Lënda VALUE= 0 >PI <BR>

3.9 Tagu META7 (Metadata):

Është fjalë kyçe që definon makinat e kërkimit

Tagjet <META> vendosen brenda tagjeve <HEAD> dhe </HEAD>:

Tagu META përfshinë dy atribute: NAME dhe CONTENT. Atributi NAME është një identifikuese

i tipit të tagut META që ju jeni duke e përfshirë. Atributi CONTENT kujdeset për informatat e

makinën kërkuese që do të jenë katalogë (lista) rreth sajtit të juaj.

Demonstrimet e tagut META: <META NAME = ”keywords” CONTENT = “Uebpage, design,

HTM, form,……,”><META NANE = ”description” CONTENT = “Ky Uebsajt do të ju ndihmoj

te mësoni themelet e HTML-së dhe dizajnin e Uebfaqeve përmes përdorimit të shembujve

7 Informacione lidhur me të dhënat në dokumentin e HTML-ës

26 Prishtinë 2014

interaktiv dhe instruksioneve (mësimdhënie)”>

Atributi CONTENT në tagun META me atributin NAME = “keywords” kujdeset për makinën

kërkuese me një listë të fjalëve të cilat përshkruajnë aspektet qelës në sajtin tuaj. Këto fjalë janë

përdorur që të bashkohen me kërkesat.

3.10 Frejmat dhe Frejmsetat (Frame & Framset):

Një frejm(Frame)8 përdoret për të shfaqur një faqe interneti brenda një web faqe.

Programimi në Ueb ka shumë elemente të cilat mund të vendosen në Ueb Faqe. Një prej

elementeve është edhe frejmi (Frame). Frejmat janë një rrugë për vendosjen e më shumë se një

Web-faqe në të njëjtën kohë në ekranin e kompjuterit.

Frejmi paraqet një komponentë e cila paraqet një kornizë – Ueb faqe në Ueb faqe. Kur një Ueb

faqe përmban disa frejma, kjo Ueb faqe quhet Frejmset (Frameset).

Tagu Frejmave është: <FRAME NAME = “emri” SRC = “faqja.html”>

Tagu <FRAME> përbëhet prej dy atributeve: NAME dhe SRC. Në çdo FRAME element, atributi

SRC jep URL e faqes që do të paraqitet në frejmin e specifikuar. Faqja me frejma fillon me

tagun <FRAMSET> dhe përfundojnë me </FRAMSET>, që i tregon Broversit se faqja përfshinë

frejma. P.sh. Rezultati i HTML-sintaksës është paraqitursi më poshtë:

<FRAMESET COLS = "110, *">

<FRAMENAME="Butoni1“

SCROLLING="no“SRC=

"Butoni1.htm">

<FRAMESET ROWS = "175, *">

<FRAMENAME="Fotografia"SRC=

"Fotografia.htm" >

<FRAME NAME = “Informatat" SRC =

“Informatat.htm"> </FRAMESET>

</FRAMESET>

Foto23:.- Rezultati në shfletues, pas ekzekutimit të kodimit.

8 Kornizë

27 Prishtinë 2014

3.11 Cascading Style Sheets (CSS)9

Në gjuhën programuese HTML përdoren edhe teknologji tjera të cilat luajnë rolinë e ndihmësit,

lehtësojnë punën në dizajnimin e web faqes, shkruhen si nën programe dhe pastaj thirren sa herë

që ka nevojë të përdoren. Këto teknologji janë, Java, JavaScript, CSS(Cascading Style Shits),

CGI(Comon Gateway Interface), VBScript(Vizual Basic Script), por mund të ket edhe teknologji

te tjera.

Në qoftëse e krijoni një Web-sajt me 2000 Faqe,nëse dëshironi të ndërroni ngjyrën e linkave në

çdo faqe do të jetë një mund shumë i madhe, mirëpo duke e përdorur Style Sheet-in ju duhet të

ndërroni ngjyrën e linkut në Style Sheet, në këtë mënyrë në mënyrë automatike do të ndërrohen

të gjitha ngjyrat e linkave. Style Sheet-at mund të deklarohen si: Atribute të një tagu.

Style Sheet-a të brendshëm - Internal style sheets . Style Sheet-a të jashtëm (Fajlla të jashtëm)

nga Web faqja - External style sheets.

Inline styles :

<!DOCTYPE html PUBLIC "- //W3C//DTD

HTML 4.0 Transitional//EN">

<HTML>

<HEAD><TITLE>Stilet

inline</TITLE></HEAD>

<BODY>

<P>Ketu kemi nje pjese te tekstit</P>

<!—Atributi STYLE lejon deklarimin e stilit

inline styles. -->

<!--Ndarja e stileve (styles) bëhet me

pikëpresje. -->

<P STYLE = "font-size: 20pt">Ky eshte nje

tekst qe do te paraqitet me stil sheet.</P>

<P STYLE = "font-size: 20pt; color:

#0000FF">Edhe nje tjeter tekst.</P>

</BODY>

</HTML>

Foto24:.-Rezultati nës hfletues, pas ekzekutimit të kodimit.

9 Dizajnimi i web faqeve

28 Prishtinë 2014

Pozita e elementeve në CSS

Pozita (position) e elementeve në CSS mund të jete:

Absolute (absolute) dhe Relative (relative).

Më poshtë do të paraqesim shembujt për këto raste.

Pozita Absolute :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Pozita Absolute </TITLE>

</HEAD>

<BODY>

<IMG SRC = “sunset.jpg" STYLE = "position: absolute; top: 0px;

left: 0px; z-index: 1">

<H1 STYLE = "position: absolute; top: 50px; left: 50px;

z-index: 3">Pozicionimi i tekstit</H1>

<IMG SRC = “winter.jpg" STYLE = "position: absolute; top: 25px;

left: 100px; z-index: 2">

</BODY>

</HTML>

Foto25:.- Rezultati në shfletues, pas ekzekutimit të kodimit.

29 Prishtinë 2014

Pozita relative :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD>

<TITLE>Pozita Relative </TITLE>

<STYLE TYPE = "text/css">

P { font-size: 2em;font-family: Verdana, Arial, sans-serif }

SPAN { color: red;

font-size: .6em;

height: 1em }

.super { position: relative;

top: -1ex }

.sub { position: relative;

bottom: -1ex }

.shiftl { position: relative;

left: -1ex }

right: -1ex }

</STYLE></HEAD>

<BODY><P> Text text text text <SPAN CLASS = "super">fuqi</SPAN> text text text text

<SPAN CLASS = "sub">indext</SPAN>

text Text text <SPAN CLASS = "shiftl">zhvendosur majtas</SPAN> text text text <SPAN

CLASS = "shiftr">zhvendosur djathtas</SPAN>

Text text text text text </P></BODY></HTML>

Foto26:.- Rezultati në shfletues, pas ekzekutimit të kodimit.

30 Prishtinë 2014

Shtimi background-imazhit me CSS

Sikurse në shembujt e HTML edhe me ndihmen CSS mundësohet shtimi i background-it për një

document. Në shembullin e më poshtëm është ilustruar vendosja e background ne HTML-

dokument me ndihmen e CSS:

Shembulli:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD>

<TITLE>Background Images</TITLE>

<STYLE TYPE = "text/css">

BODY { background-image: url(watermark.gif);

background-position: bottom right;

background-repeat: no-repeat;

background-attachment: fixed }

P { font-size: 2em;

color: #AA5588;

text-indent: 1em;

font-family: Arial, sans-serif }

.dark { font-weight: bold }

</STYLE></HEAD>

<BODY><P>

Ky është nje tekst që do të paraqitet

në faqe.

<SPAN CLASS = "dark"> Ky është

nje tjetër tekst që do të paraqitet në

faqe. Ky është nje tekst që do të

paraqitet në faqe.</SPAN>

</P></BODY>

</HTML>

Foto27:.- Rezultati në shfletues, pas ekzekutimit të kodimit.

31 Prishtinë 2014

Shembull:

<!DOCTYPE html>

<html><head>

<style> Body

{background-color:pink;}

h1

{color:orange;

text-align:center;}

p

{

font-family:"Times New Roman";

font-size:25px;

}

</style>

</head><body>

<h1>Shembull për CSS(Cascading

Style Sheets)!</h1>

<p>Ky është një paragraf.</p>

</body> </html>

Foto28:.- Rezultati në shfletues, pas ekzekutimit të kodimit.

Shembull tjetër:

<!DOCTYPE html>

<html>

<bodystyle="background-

color:yellow;">

<h2style="background-color:red;">Ky

është një titull</h2>

<pstyle="background-

color:green;">Kyështënjë aragraf.</p>

</body> </html>

Foto29:.- Rezultati në shfletues, pas ekzekutimit të kodimit.

32 Prishtinë 2014

3.12 Aplikacionet e zërit:

Zërat mund të jenë të ngulitura(embed) në faqe, dokument të HTML-ës me disa metoda.

Shembull: Për të u ekzekutuar një file audio në HTML, duhet të ju nevojitet:

<audio

controls>

<source src="horse.ogg"

type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg">

</ audio>

Tagu <embed> përcakton si një enë me përmbajtje të jashtëme, (jo-HTML) .

Shembull:

<!DOCTYPE html>

<html>

<body>

<h2>Linku i audios</h2>

<p><embed

src="http://www.4shared.com/e

mbed/290322902/52de205b"></

p><p>Kliko këtu për ta

ndëgjuar zërin</p>

</body>

</html>

Foto30:.- Rezultati i treguar në shfletues, pas ekzekutimit të kodimit.

33 Prishtinë 2014

3.13 Aplikacionet e videove:

Videot mund të jenë të ngulitura(embed) në faqe, document të HTML-ës me disa metoda.

Shembull:

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

<source src="movie.webm" type="video/webm">

<object data="movie.mp4" width="320" height="240">

<embed src="movie.swf" width="320" height="240">

</object>

</video>

Shembull:

<!DOCTYPEhtml>

<html>

<body>

<h2>Linku i videos</h2>

<p><embed

src="http://www.youtube.com/embed/

bGw9kihKH-

o?list=PL9267B3FB749DA276"></p><

p>Cliko këtu për ta par videon</p>

</body>

</html>

Foto31:.- Rezultati në shfletues, pas ekzekutimit të kodimit.

34 Prishtinë 2014

4. Krejt në fund po e paraqesim një shembull të përgjithshëm për web aplikacionet e

krijuara në HTML .

Shembull:

<html>

<head>

<title> Të gjitha Ushtrimet </title>

</head>

<body> =====================================================

<center>

<h1>Faqja e parë e WEBSITE-it e koduar në<br> gjuhën e programimit- 'HTML'</h1>

</center>

<marquee direction="right"> <left>

<img src ="C:\Users\Gashi\Desktop\-PROJEKTE-ne Web Programim\Ueb-

formulart\profili.jpg"width="150"heght="100">

</left>

</marquee>

<marquee direction="left">

<h1 align ="center"><h1 ><u> MIRË SE ERDHËT NË WEBSITE-in TIM </u > </h1>

</marquee>

<HR color="green">

<i><FONT face="arial" size="5" color="blue">

Ky website është shkruar dhe dizajnuar me ndihmen e tagjeve për kodim në editorin për tekst

NOTEPAD.

<BR>

Më poshtë do t`i paraqesim disa shembuj të përdorimit të tagjeve të mësuara deri më tani.

<BR>

Për të parë më tepër ju vetëm duhet të klikoni mbi këto vegza (linqe).</FONT></i>

<HR color="red">

<HR color="green"> <B>

<CENTER>

<UL>

35 Prishtinë 2014

<li><A HREF = "C:\Users\Gashi\Desktop\PROJEKTI\Biografia.html">BIOGRAFIA (CV)</A>

<BR><P>

</CENTER>

<OL>

<li><A HREF = "C:\Users\Gashi\Desktop\PROJEKTI\USHTRIMI I PARË.html"><font

color="red">WEB</font> FAQJA E PARË</A> <BR><P>

<li><A HREF = "C:\Users\Gashi\Desktop\PROJEKTI\FAQJA E TRETË-.html"><font

color="red">WEB</font> FAQJA E DYTË</A> <BR><P>

<li><A HREF = "C:\Users\Gashi\Desktop\PROJEKTI\Ushtrimi me lista1.html"><font

color="red">WEB</font>FAQJA E TRETË</A> <BR><P>

</ol>

</UL>

</B>

<HR color="red">

<center>

<p>

<FONT face="arial" size="3" color="#888888"> Kontakti -

<a href="naim_gashi43@hotmail.com">naim_gashi43@hotmail.com</a>

<p><font face="arial" size="3" color="#888888">

Për më tepër vizitoni vegzën: <A HREF="http://gjergjfishta-

prishtin.weebly.com/">http://gjergjfishta-prishtin.weebly.com/</A></FONT>

</P>

</CENTER>=======================================================

<br>

<h3>LISTAT</h3>

<br>

<P>Drejtimet e Fakultetit të Edukimit:</P>

<OL>

<LI>Mate-Inf

<UL>

<LI>Viti I

36 Prishtinë 2014

<LI>Viti II

<LI>Viti III

<LI>Viti IV

</UL>

<LI>Tek-Inf

<UL>

<LI>Viti I

<LI>Viti II

<LI>Viti III

<LI>Viti IV

</UL>

<LI>Fiz-Kimi

<UL>

<LI>Viti I

<LI>Viti II

<LI>Viti III

<LI>Viti IV

</UL>

</OL>===============================================================

<br>

<h3>KRIJIMI I TABELËS</h3>

<br>

<TABLE Border="2">

<TR><TH>Nr.</TH><TH>Emri</TH><TH>Mbiemri</TH><TH>Pika</TH><TH>Nota</TH>

</TR>

<TR><TD>1</TD><TD>Arta</TD><TD>Morina</TD><TD>32</TD><TD>1</TD></TR>

<TR><TD>2</TD><TD>Artan</TD><TD>Gashi</TD><TD>54</TD><TD>2</TD></TR>

<TR><TD>3</TD><TD>Bleona</TD><TD>Deliu</TD><TD>63</TD> <TD>3</TD> </TR>

<TR><TD>4</TD><TD> Drita</TD><TD>Kadriu</TD><TD>85</TD><TD>4</TD></TR>

<TR><TD>5</TD><TD> Zana</TD><TD>Kabashi</TD><TD>92</TD><TD>5</TD> </TR>

</TABLE><br>=========================================================

37 Prishtinë 2014

<p><h3><font color="red">FORMULAR PËR APLIKIM</font></h3></p>

<BR> <form action=" "method="post">

Nr. Studentit: <input type="text"/>

<br><br>Emri: <input type="text"/>

<br><br>Mbiemri: <input type="text"/>

<br><br>Vendlindja:

<select>

<option value="0.">

<option value="1.">Prishtinë

<option value="2.">Mitrovic

<option value="3.">Gjilan

<option value="4.">Pej

<option value="5.">Gjakovë

<option value="6.">Prizren

<option value="7.">Ferizaj

<option value="8.">Podujevë

</select><br><br><h4>Drejtimet:</h4>

<p><p>Matematik: <input type="checkbox"/>

<br>Informatik: <input type="checkbox"/>

<br><br><h4>Gjinia:</h4>

<p> <input type="radio" name="gjinia:"/>Mashkull:<br>

<input type="radio" name="gjinia:"/>Femër:

<br><br>Nr i Bankës : <input type="Password" name="Password" value=""/>

<br ><br><input type="submit" name="submit" value="DËRGO"/>

<input type="reset" name="reset" value="PASTRO"/>

</form></body>

</html>

38 Prishtinë 2014

Foto32:- Pamja pas ekzekutimit të kodimit

39 Prishtinë 2014

Rezyme

Në këtë punim jam përpjekur të bejë një interpretim të kodimit në gjuhën programuese”HTML”.

Tani për këtë spjegimi, kemi njohuri të nevojshme për krijimin e web aplikacioneve në HTML.

Ne kemi filluar me një hyrje në HTML , dhe përdorimin i tij, Ne pastaj kemi sqaruar një faqe

bazë , para se të sqarohet në disa nga tagjet themelore . Shqyrtuam se çdo tag mund të kenë

atribute të ndryshme,dhe se si mund të ofrojne vlera këto attribute. Mësuam se ne mund të

krijojm hyperlinks duke përdorur tag me atribut href . Kemi qfaq një imazh duke përdorur tag

img me atribut src, aplikuam disa atribute të tjera për disa tagje. Pastaj sqaruam për rërndësinë e

kodimit dhe komentuam me qëllim për ta bërë mirëmbajtjen sa më të lehtë.

Jemi armatosur me njohuri si më lart , trajtuam disa aplikacione ne HTML më të përparuara të

tilla si harta imazhe , tabela, forma , dhe korniza. Kemi përfunduar duke mësuar se si të

zgjërojm me HTML stilin scripts . Mund të ju paraqiten sfidat (vështersit) gjatë kodimit të

web aplikacioneve në HTML për shembull mungesa e shenjës(“) ose <, etiketa e bylljes,apo

një gabim në drejtshkrim apo një hapsir ne URL. Kështu që nese keni problem me

kodimin në faqe së pari filloni ti kontrolloni këto gabime të vogla. Mirëpo me praktikët të

shpeshtë, ju do të jeni në gjendje të tregoni se qka është gabim në faqe të browserit10

tuaj.

Tani është një kohë e përkryer për të krijuar dhe të botoni nje faqe tuajen ( nëse nuk e keni bërë

deri tani ) . Krijimi i një faqe interneti bazë është shumë i thjeshtë ne qoftese ju e dini kodimin

gjegjësisht programimin e gjuhës programuese HTML_ës. Unë ju rekomandoj që të studijoni

këtë temë në lidhje me ndërtimin e një web-faqe interneti.

10 SHfletuesit(Internet Explorer, Google Chrome,Fire fox etj)

40 Prishtinë 2014

Resume

In this paper I am trying to do a rendition of coding language rogramuese " " HTML " . Now for

the explanation , we have the knowledge necessary for creating web applications in HTML . We

started with an introduction to HTML , and its use , we then have clarified a basic site before to

explain some of the fundamental Enter tags . Examined that each tag can have different attributes

, and how they can offer these attribute values . We learned that we can create hyperlinks using

the href attribute tag . We qfaq an image using the img tag with the src attribute , other attributes

applied some fodder for some . Then explained to rërndësinë coding and commented in order to

make maintenance easier . Are armed with the above knowledge , we treated some applications

in more advanced HTML such as image maps , tables , forms , and frames . We ended up

learning how to expand the HTML style scripts . Can you presented challenges ( difficulties )

during coding web applications in HTML for example the lack of marks ( " ) or < , bylljes label ,

or a mistake in spelling or a space in the URL . So if you have a problem with encoding in the

first page start to check these errors vogla.Mirëpo with frequent practice , you will be able to tell

what is wrong in your browser page . Now is a perfect time to create and publish a page yours (

if you have not done so already ) . Creating a basic website is very simple IF you know encoding

ie HTML_ës programming language programming . I highly recommend you to studijoni this

topic about building a web site.

41 Prishtinë 2014

Biografia

Naim (Refik) Gashi nga Prishtina u lind më 12 Korrik 1962 në

fshatin.Busi . Shkollën fillore e ka mbaruar në Prishtinë në shkollën

(Vlladimir Nazor), tani Naim Frashëri, të mesmen e kreu dy vite në

gjimnazin Gjevdet Doda në Pishtinë dejtimi “Matematiko -Natyrorë

pastaj dy vite tjera ka vazhuar drejtimin “Programues” në shkollen

Teknike. Në vitin 1985 ka regjistruar studimet në “SH.L.P”. drejtimi “Politeknikë” në Prishtinë

gjatë studimeve ka arritur një sukses solid, kështu që në vitin 1987diplomoj me titull professional

‘arsimtar”. Pas diplomimit është punësuar më 01.09.1987 në shkollën fillore Gjergj Fishta” në

Prishtinë. Ka një përvojë pune prej 27 vitesh si edukator, pedagog dhe arsimtar në procesin

edukativo-arsimor. Ka qenë pjesëmarrës i shumë aktiviteteve, kurseve dhe takimeve në seminare

të ndryshme në fushën e informatikës dhe teknologjisë së komunikimit. Është i çertifikuar dhe

ka marrë diploma e mirënjohje të ndryshme nga kurse të ndryshme të Teknologjisë së

Informimit dhe komunikimit. Tani ka vazhduar Fakultetin e Edukimit në Prishtinë për Avansim

dhe Kualifikim të Mësimdhënësve (AKM) duke e përfunduar me sukses, punon dhe vepron në

Prishtinë, në fushën e procesit edukativo-arsimore.

42 Prishtinë 2014

Literatura:

1. - Dika.Z, Luma.A ,viti i botimit 2007, “Konceptet themelore të Web Dizajnimit” -Tetovë

2. -Sylabus 4 ,viti i botimit 2007, “European Computer Driving Licence - ECDL “ -Prishtinë

3. -Shatri.K Materiali , Ligjerata nga lëndëa “ Web- Programimi “ , F. E.- Prishtinë .

4. http://www.quackit.com/html/tutorial/html_forms.cfm, (data e hapjes, 20/01/2014 )

5. http://www.w3schools.com/default.asp , (data e hapjes, 20/01/2014 )

6. http://www.htmlkit.com/ , (data e hapjes, 20/01/2014 )

7. http://www.youtube.com/watch?v=AvCDlxkseAE (data e hapjes, 20/01/2014 )

8. http://cocoon.apache.org/2.1/tutorial/tutorial-develop-webapp.html(data e hapjes, (20

/01/2014 )

9. http://www.htmliseasy.com/table_tutor/index.html (data e hapjes, 20/01/2014 )

10. http://en.wikipedia.org/wiki/Microsoft_FrontPage (data e hapjes, 28/01/2014)