HTML

1. HTML Nje veshtrim i pergjithshem mbi HTML

2. HTML • HyperText Markup Language (HTML) eshte bashkesi kodesh te perdorur per te ndertuar faqet Web. • Gjuhe programimi • Mundeson ndertimin, ndryshimin dhe mirembajtjen e faqeve ne World Wide Web • WWW ose Web eshte nje bashkesi web serverash ku jane publikuar sasi te medha dokumentash.

3. Cfare nuk eshte HTML? • E para, nuk eshte e veshtire ne te kuptuar dhe perdorur. • E dyta, HTML nuk eshte nje gjuhe e vertete programimi (me shume formatimi). Nuk eshte nje gjuhe per te shkruar programe Web.

4. Cfare nuk eshte HTML? • Termat dokument dhe faqe nuk tregojne te njejten gje. • HTML perdoret per te krijuar dokumente elektronike qe mund te lexohen ne sisteme te ndryshme duke perdorur software te quajtur browser. Browser-i perkthen kodet HTML ne nje paraqitje ne ekran. • Teknikisht dokumenti eshte kodet te HTML ndersa faqja eshte ajo cfare duket mbasi perkthehet nga browseri.

5. Cfare eshte HTML? • H qendron per “hyper”. • Nje “hyper document” eshte nje dokument qe permban linqe (lidhje) me pjese te tjera qe mund te jete nje dokument tjeter ose brenda te njejtit dokument. • Nje link kur aktivizohet nga klikimi i tij mundeson hapjen e nje dokumenti tjeter, levizjen ne te njejtin dokument, paraqitjen e nje imazhi etj.

6. Cfare HTML eshte? • T qendron per Text. • Tregon se cfare paraqitet ne ekranin e kompjuterit. • Lejon portabilitet permes platformave domethene lejon te gjithe llojet e kompjuterave kudo ne bote te paraqesin dokumentat qe permbajne kode HTML. • Termi platforme i referohet kombinimit te tipit te kompjuterit, sistemit te tij te operimit, browserit etj.

7. Cfare HTML eshte? • ML qendron per “markup language”. • HTML perdor shkronja te vendosura ndermjet < dhe >. • Nje koncept baze qe qendron per HTML eshte qe ne jemi te pergjegjshem per permbajtjen, por browseri menaxhon paraqitjen. • Pra ne kemi kontroll te kufizuar persa i perket formatit, keshtu qe duhet te kufizohemi ne permbajtje.

8. Browserat • Nje browser eshte nje program kompjuteri qe perdorim per te eksploruar World Wide Web. • Programi i browserit perkthen dokumentat qe permbajne gjuhen HTML ne fjale dhe imazhe ne ekran. • Shumica e browserave • I pergjigjet butonave te navigimit si Forward, Back, Refresh, Home etj • Paraqesin faqen. • Sigurojne nje rresht per te futur adresa Web. • Paraqesin imazhe. • Paraqesin dokumenta HTML te perkthyer si faqe • Paraqesin kodet HTML ne nje dokument • Paraqesin video me ndihmen e plug-in-ve, qe jane module programi te pavarura qe mund t’i shtohen browser-it.

9. Browserat • Firefox, Internet Explorer, Chrome jane jane tre shembuj programe browserash. • Browserat grafik paraqesin Multimedia. • Browseri i pare grafik Mosaic.

10. Cfare eshte nje URL? • URL qendron per Uniform Resource Locator. • Thjesht pershkuan vendndodhjen ose adresen e internetit te burimit (resource) specifik qe ne duam te perdorim per dokumentin tone. • URL eshte nje identifikues unik per nje faqe. • URL permban emrin e domainit te serverit ku ndodhet faqja dhe emrin e skedarit. • Nje URL mund te shenoje ne nje faqe Web tjeter, ne nje vend tjeter brenda faqes korente ose ne nje komponent te faqes si nje imazh.

11. Cfare eshte nje URL? • Per te marre nje faqe browseri komunikon me serverin nepermjet nje protokolli te quajtur HTTP (HyperText Transfer Protocol). • Browseri i ben nje kerkese Web serverit per nje faqe te caktuar dhe Web serveri dergon permbajtjen e faqes emrin e se ciles i dergoi browseri. • Se fundmi, browseri interpreton kodin HTML te derguar nga Web serveri dhe afishon rezultatin.

12. Cfare eshte nje URL? • Te shohim si eshte ndertuar nje URL: • Formati standart per URL e nje faqe konsiston ne: • Protokollin qe perdoret • Emrin e domainit te serverit • Pathin e skedarit/faqes brenda serverit • Emrin e skedarit/faqes Pra protokoll://domain name/path/filename Psh: http://www.google.com/imghp • Cdo faqe Web duhet te kete nje URL unike.

13. Cfare eshte nje URL? • Nje shembull • http://www.intersystems.com/education/index.html • Protokolli=http • Emri i domain-it=www.intersystems.com • Path-i=education • Emri i skedarit/faqes=index.html

14. URL • Protokolli • Protokolli i nje URL-je percakton formatin e informacionit qe aksesohet nga interneti. • Protokolli i tregon browserit sesi eshte organizuar informacioni qe merret. • Protokolle te njohur jane: • file • ftp • mailto • telnet • http • https

15. URL • Domain-i • Emri i domain-it eshte pjesa e dyte e URL. • Specifikon vendndodhjen fizike te skedarit ose burimin e informacionit. • Internet Protocol (IP) adresa identifikojne kompjutera specifike ne Internet. • Nqs perdorim emrin e nje domain-i ne vend te nje adrese IP, nje program i vecante i quajtur Domain Name Server(DNS) perpiqet te perktheje emrin e domain-it ne nje adrese IP. • Emrat e domain-ve mbarojne me shtesa (extension) si psh • .com • .edu • .org etj.

16. URL • Path-i dhe emri i skedarit • Nqs burimi me te cilin lidhemi eshte nje skedar (file), atehere URL mbaron me nje emer skedari.

17. HTTP • HTTP eshte protokolli qe perdoret per transmetimin e faqeve Web, si edhe informacioneve qe kane te bejne me imazhe, tinguj, video etj. • Versioni me i fundit eshte 1.1 dhe ai percaktohet ne referencen RFC 20068. • Porta e HTTP eshte 80. • Web serverat degjojne ne porten 80 per nje lidhje TCP (Transmission Control Protocol). Kur browseri do te dergoje nje kerkese HTTP, ai inicion krijimin e nje lidhje TCP ne porten 80 ne serverin qe referohet ne URL e faqes se kerkuar. Nese lidhja mund te realizohet browseri dergon kerkesen HTTP mbi lidhjen TCP te krijuar pak me pare. Pasi pergjigja HTTP eshte marre saktesisht nga browseri, serveri inicion mbylljen e lidhjes se krijuar. • Lidhja TCP ne kete menyre operimi quhet jopersistente (e paqendrueshme).

18. HTTP • Per cdo kerkese do te krijohet nje lidhje TCP e re. Ne shume raste nje faqe Web mund te permbaje disa elemente si imazhe, tinguj, video etj dhe per transferimin e secilit prej tyre do te krijohen lidhje TCP. • Per te zvogeluar vonesen e shkaktuar ne rastet kur faqja permban disa elemente disa browsera krijojne disa lidhje TCP nje per cdo element. • Numri i lidhjeve te njekohshme qe mund krijoje nje browser shkon deri ne 5 madje edhe deri ne 10. • Ndonese eshte e vertete qe kjo gje mund te zvogeloje vonesen e shkaktuar nga trasferimi i cdo elementi ka nje efekt negativ. Administrimi i disa lidhjeve konkurente per cdo faqe kerkon kohe dhe burime si nga browseri dhe nga serveri, sidomos te serverat qe mund te kene shume trafik se mund te marrin qindra kerkesa njekohesisht.

19. HTTP • Per kete arsye qe nga versioni 1.1 i HTTP, serveri nuk e mbyll lidhjen pas transmetimit te nje faqeje, por ajo eshte aktive gjate kohes se nje sesioni. • Ne kete rast lidhja TCP quhet e qendrueshme, ndaj browseri e serveri mund te dergojne disa kerkesa/pergjigje duke perdorur te njejtin lidhje TCP. Kjo menyre operimi redukton vonesen. • Sesioni mund te perfundoje nga ana e serverit me ane te komandave te ekzekutuara atje. • Sesioni mund te perfundoje nga browseri – perdoruesi shkon ne nje tjeter Web server ose mbyll browserin dhe gjithashtu sesioni mund te perfundoje kur nuk ka me kerkesa per nje kohe te caktuar (session time out). • Zakonisht ne disa web servera kjo kohe eshte 15 minuta.

20. Terminologji te HTML • Tags • Jane kode HTML qe jane te mbyllur brenda < dhe >. • Psh <BR> vendos nje kthim ne rreshtin tjeter. • Tag-et jane ne dy tipe te pergjithshme • Containers • Tag-e bosh (nuk rrethojne ndonje tekst)

21. Terminologji te HTML • Container • Nje container ka nje tag hapes dhe nje tag mbylles. • Brenda tag-ve ndodhet informacioni qe kontrollohet nga container-i. • Psh <B>bold</B> • Cdo tag hapes duhet te shoqerohet nga nje tag mbylles.

22. Terminologji te HTML • Atributet • Tag-et bosh ose ato container hapes mund te permbajne elemente te tjere te HTML te quajtur atribute, te cilet jane kode te vecante qe modifikojne tag-et. • Psh tag-u <P>paragraph</P> container percakton nje paragraf teksti. • Ka nje atribut align qe lejon te vendoset paragrafi djathtas, majtas apo ne qender. • Tag-et mbylles nuk perfshijne atribute. • Nqs nuk specifikohet nje atribut merret vlera default e tij.

23. Terminologji te HTML • World Wide Web Consortium (W3C) vendos dhe kontrollon protokollet HTML dhe tag-et. • Ekzistojne shume editore qe mundesojne ndertimin e faqeve Web.

24. Faqja e pare Web • Elementi container hapes qe rrethon te gjithe faqen Web eshte <HTML>. • <HTML>permbajtja e faqes</HTML> • Pershkrimi-Rreshti i pare dhe i fundit i cdo dokumenti HTML. • Tipi-Container • Atributet-dir, lang, version • Version tregon versionin • Dir vendos drejtimin baze per te shfaqur apo shtypur tekstin. Mund te jete LTR (Left To Right) apo RTL (Right To Left). • Lang specifikon gjuhen baze te vlerave te atributeve te elementeve.

25. Faqja e pare Web • <HEAD> <TITLE> titulli i faqes </TITLE> </HEAD> <BODY> Informacioni qe do te shfaqet ne web faqe </BODY> </HTML>

26. Shembull • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" • "http://www.w3.org/TR/REC-html40/strict.dtd"> • <HTML dir="RTL" lang="en"> • <!-- Author: Your Name --> • <!-- Created: mm/dd/yy --> • <HEAD> • <TITLE>Poetry by Robert Frost</TITLE> • </HEAD dir="RTL" lang="en"> • <BODY> • <H1 align="CENTER">What Fifty Said</H1> • <P>When I was young my teachers were the old. • I gave up fire for form till I was cold. • I suffered like a metal being cast. • I went to school to age to learn the past. • </P> • <P>Now I am old my teachers are the young. • What can’t be molded must be cracked and sprung. • I strain at lessons fit to start a suture. • I go to school to youth to learn the future. • </P> • </BODY> • </HTML>

27. <HEAD>Te dhena te kokes</HEAD> • Pershkrimi-Siguron informacione pershkruese rreth nje dokumenti si pjese e kokes. • Tipi-Container • Atributet-dir, lang

28. <TITLE>Titull pershkrues</TITLE> • Pershkrimi-Siguron informacione pershkruese rreth dokumentit ne pjesen e siperme te ekranit, jo ne trupin e dokumentit . • Tipi-Container • Atributet-dir, lang • Cdo dokument HTML duhet te kete nje element <TITLE>.

29. <BODY>Te dhena te trupit</BODY> • Pershkrimi-Percakton permbajtjen e nje faqeje Web. • Tipi-Container • Atributet-alink, background, bgcolor, class, dir, id, link, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onUnload, style, text, title, vlink.

30. Stilet • Nje stil eshte nje bashkesi rregullash formatimi qe i tregojne browserit sesi autori pelqen te paraqese permbajtjen e faqes. • Stili percakton karakteristikat e vendosjes, madhesise, ngjyres, fontit etj. • Cascading Style Sheets (CSS) krijohen stile nga vete autori dhe aplikohen pastaj ne faqet Web.

31. Shembull • <HTML> • <HEAD> • <TITLE>Heading Tag (H1-H6) Demonstration</TITLE> • </HEAD> • <BODY> • <H1>Heading 1</H1> • <H2>Heading 2</H2> • <H3>Heading 3</H3> • <H4>Heading 4</H4> • <H5>Heading 5</H5> • <H6>Heading 6</H6> • <H1 style="color: red; font-style: italic">Heading 1</H1> • </BODY> • </HTML>

32. <!—comment--> • Pershkrimi-browserat injorojne cdo text te vendosur brenda ketij tag-u. • Tipi-s’ka • Atributet-s’ka • Perdor kete tag per te percaktuar autorin dhe daten e krijimit te dokumentit.

33. <H1>Heading</H1><H2></H2><H3></H3><H4></H4><H5></H5><H6></H6><H1>Heading</H1><H2></H2><H3></H3><H4></H4><H5></H5><H6></H6> • Pershkrimi-percakton nje nga gjashte nivelet te titullit. • Tipi-Container • Atributet-align, class, dir, id, lang, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, style, title.

34. <P>paragraf</P> • Pershkrimi-percakton nje paragraf • Tipi-container • Atributet-align, class, dir, id, lang, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, style, title.

35. Tag-e bosh • <BR> • Pershkrimi-krijon nje kalim ne rreshtin tjeter. • Tipi-s’ka • Atributet-class, clear, id, style, title

36. Tag-e bosh • <HR> • Pershkrimi-Krijon nje vije horizontale ne faqe • Tipi-s’ka • Atributet-align, class, id, noshade, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, style, title, size, width. • Kur atributi noshade mundeson shfaqjen e nje ngjyre solide.

37. Shembull • <HTML> • <HEAD> • <TITLE>Poetry by Robert Frost</TITLE> • </HEAD> • <BODY> • <H1 align="CENTER">What Fifty Said</H1> • <HR align="CENTER" noshade size="4" width="50%"> • <P align="CENTER">When I was young my teachers were the old.<BR> • I gave up fire for form till I was cold.<BR> • I suffered like a metal being cast.<BR> • I went to school to age to learn the past.<BR> • </P> • <P align="CENTER">Now I am old my teachers are the young.<BR> • What can’t be molded must be cracked and sprung.<BR> • I strain at lessons fit to start a suture.<BR> • I go to school to youth to learn the future.<BR> • </P> • <HR align="CENTER" size="2" width="50"> • </BODY> • </HTML>

38. Atributet e tag-ut body • Atributi bgcolor kontrollon ngjyren e sfondit te faqes. • Psh <BODY bgcolor=“yellow”> • Ose <BODY bgcolor=“#FFFF00”> • Atributi background na lejon te vendosim nje imazh ne sfond te faqes tone. • Atributi text vendose ngjyren per te gjithe tekstin ne faqe pervec tekstit qe perfshihet brenda container <A>.

39. Shembull • <HTML> • <HEAD> • <TITLE>Poetry by Robert Frost</TITLE> • </HEAD> • <BODY background="rocks.jpg" text="00FFFF"> • <!-- text = cyan --> • <H1 align="CENTER">What Fifty Said</H1> • <HR align="CENTER" size="4" noshade width="75%"> • <P align="CENTER">When I was young my teachers were the old.<BR> • I gave up fire for form till I was cold.<BR> • I suffered like a metal being cast.<BR> • I went to school to age to learn the past.<BR> • </P> • <P align="CENTER">Now I am old my teachers are the young.<BR> • What can’t be molded must be cracked and sprung.<BR> • I strain at lessons fit to start a suture.<BR> • I go to school to youth to learn the future.<BR> • </P> • <HR align="CENTER" size="2" width="50"> • </BODY> • </HTML>

40. Alink, link, vlink • Keto tre atribute na lejojne te kontrollojme ngjyren e linqeve. • alink – kontrollon ngjyren e linkut aktiv, ose linkut qe shenohet nga mouse-i. Perdoret vetem nga Navigator, te tjeret e injorojne. • link – kontrollon ngjyren e te gjithe hiperlinqeve qe perdoruesi nuk ka vizituar. • vlink – kontrollon ngjyren e te gjithe linqeve qe perdoruesi ka vizituar tashme.