1. Abetarja e Web-it, HTML
Leksion 1

2. Blloqet e ndërtimit të web-it
HTML dhe CSS
Client Scripting - JavaScript dhe DOM
Server Scripting - ASP, PHP
XML dhe SQL

3. WWW - World Wide Web WWW është shkurtim i World Wide Web
WWW zakonisht quhet Web.
Web-i është një rrjet kompjuterash në të gjithë botën.
Të gjithë kompjuterat ne Web mund të komunikojnë me njëri-tjetrin duke përdorur gjuhë standarte
Të gjithë kompjuterat ne Web përdorin një standart komunikimi të quajtur HTTP

4. Si punon WWW-ja? Informacioni ruhet ne dokumente që quhen faqe web
Faqet web janë skedarë që ruhen në kompjutera që quhen servera web
Kompjuterat që lexojnë faqet web quhen klientë web
Klientët web i shohin faqet me një program që quhet web browser (shfletues web-i)
Browserat me popullorë janë Internet Explorer, Chrome dhe Firefox

5. Si i merr browseri faqet web?
Një browser merr një faqe web nga një server me anë të një kërkese
Një kërkesë është një kërkesë standarte HTTP që përmban një adresë faqeje
Një adresë faqeje ka këtë pamje:  

6. Si i shfaq browseri faqet web?
Të gjitha faqet web përmbajnë instruksione se si duhet të shfaqen
Browseri shfaq faqen duke i lexuar këto instruksione
Instruksionet më të zakonshme të shfaqjes quhen tage HTML
Tagu HTML për një paragraf ka këtë paraqitje: <p>
Një paragraf në HTML përcaktohet kështu:
 <p>This is a paragraph.</p>

7. Kush i vendos standartet web?
Standartet Web nuk janë vendosur nga Google apo Microsoft
Rregullat në web janë përcaktuar nga W3C
W3C është shkurtim i World Wide Web Consortium
W3C përcakton specifikimet për standartet web
Standartet më thelbësore te web-it janë HTML, CSS and XML

8. HTML
HyperText Markup Language (HTML) është një bashësi kodesh të përdorur për të ndërtuar faqet Web.
Pra është gjuha që përdoret për të ndërtuar faqet Web.
Mundëson ndërtimin, ndryshimin dhe mirëmbajtjen e faqeve në World Wide Web

9. Cfarë nuk është HTML?
Para se të shohim se cfarë është HTML, është e rëndësishme te dime se cfarë nuk është HTML .
E para, nuk është e vështirë per t’u kuptuar dhe përdorur.
E dyta, HTML nuk është një gjuhë e vërtetë programimi (është më shumë gjuhe formatimi). Nuk është një gjuhë për të shkruar programe Web.

10. HTML
Termat dokument dhe faqe perdoren shpesh ne menyre te ndersjellte kur flitet per faqet Web, por ato nuk tregojne te njejten gje.
Teknikisht dokumenti jane kodet aktuale te HTML ndersa faqja është ajo cfare duket pasi perkthehet nga browseri.

11. Cfarë është HTML? H është per “hyper”.
Nje “hyper document” është nje dokument qe permban linqe (lidhje) me pjese te tjera qe mund te jete nje dokument tjeter ose brenda te njejtit dokument.
Kur aktivizohet nje link, nga klikimi i tij mundesohet hapja e nje dokumenti tjeter, levizja ne te njejtin dokument, paraqitja e nje imazhi etj.
“Hyper document” jane konsideruar shume me te perdorshem se tekstet standarte sepse perdoruesi mund te zbuloje lidhje ndermjet ideve, ka nje logjike te percaktuar nderveprimi me faqen Web.

12. Cfarë është HTML? T është 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.

13. Cfarë është HTML? ML është per “markup language”.
HTML perdor shkronja te vendosura ndermjet < dhe >.
Nje koncept baze qe qendron per HTML është 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.

14. Versionet e HTML-së

15. Perdorimi i HTML/XHTML
XHTML është relativisht e thjeshte.
XHTML është e rregullt dhe e strukturuar.
Ndiqni standartet dhe puna juaj do te jete me e thjeshte, me e qendrueshme si dhe rezultatet do jene me te besueshme.

16. Problemet me HTML
Versione konkuruese te browserave prezantuan vecori te reja pertej standarteve
Implementime te paqendrueshme te paraqitjes dhe te skripteve
Permbajtja dhe prezantimi te perziera se bashku

17. XHTML
XHTML është nje version i HTML-se i modifikuar per te qene konform standartit XML
Dizenjuar per te ndare permbajtjen nga prezantimi
Permbajtja ne XHTML
Prezantimi kontrollohet nga Cascading Style Sheets (CSS)
Extensible – Mund te percaktohen elemente shtese
XML Compatible – Gjuhe te tjera qe bazohen ne XML mund te nguliten ne dokumente XHTML
Si nje gjuhe programimi
Sintakse specifike per t’u perdorur
Ka aplikacione vleresuese (validator) qe ju ndihmojne ta ndertoni kodin sic duhet

18. Ndryshimet e XHTML
Elementet dhe atributet duhet te jene me shkronjat e vogla (loëercase)
Te gjithe elementet duhet te kene tage hapese dhe tage mbyllese <p>Hello</p>
Elementet boshe permbajne tagun mbylles ne vetvete <br />
Vlerat e atributeve duhet te vendosen brenda thonjezave
Specifikime te metejshme i gjeni tek

19. Nje Skedar i thjeshtë XHTML
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd XHTML 1.0 transitional//EN" " <html> <head> <title> My Home Page </title> </head> <body> <h1>My Home Page </h1> <p> Welcome to my home page </p> </body> </html>

20. Dokumenti xHTML i ndertuar sic duhet, formon nje hierarki
Struktura Hierarkike
Dokumenti xHTML i ndertuar sic duhet, formon nje hierarki

21. Tipet e Permbajtjes
Dokumentet ndertohen nga tipe logjike te permbajtjes

22. Struktura Semantike
Permbajtja e te njejtit tip zakonisht formatohet ne menyre te tille qe te duket njesoj.

23. Markup Semantike
HTML markup bazohet ne tipe logjike te permbajtjes

24. Hierarkia perfundimtare

25. Shprehja DOCTYPE
Deklaron versionin specifik te HTML ose XHTML qe po perdoret ne faqe
Perdoret nga browseri per te vendosur se si do te procesohet faqja
Vendoset gjithmone e para ne skedar

26. Shprehja DOCTYPE tre tipe
Strict – permban te gjithe elementet dhe atributet e HTML-se, por NUK PERFSHIN elemente te prezantimit ose elemente te vjeteruara (si font). Frameset-et nuk lejohen
transitional – permban te gjithe elementet dhe atributet e HTML-se, por duke PERFSHIRE elemente te prezantimit ose elemente te vjeteruara (si font). Frameset-et nuk lejohen
Frameset – Perdoret nese faqja ka frame

27. Strict DOCTYPE Shembull
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd XHTML 1.0 Strict//EN“
"
Perdorimi i Strict inkurajon kodimin e bazuar ne standarte
Vleresuesit (Validators) do te tregojne gabimet logjike ne metodat tuaja
CSS-te tuaja do te punojne me mire dhe ne menyre me te parashikueshme

28. Elementet Perbehen nga tri pjese: Shembull:
Tagu i Fillimit, i cili mund te permbaje atribute
Permbajtja
Tagu i Fundit
Shembull:
<p id=“intro”>Welcome</p>

29. Atributet Gjithmone perdoren vetem ne Tagun e Fillimit te elementit
tre tipe:
Atribute Opsionale: Varen nga tipi i elementit
Atribute Standarte: id, class, title, style, dir, lang, xml:lang
Atribute Ngjarjesh: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
Perdoren ne skriptim

30. Elementet Boshe
Disa elemente nuk kane permbajtje, prandaj nuk kane as tag te fundit
<img src=“photo.jpg” />
<br />
<hr />
<link rel="stylesheet" type="text/css" href=“main.css" />
Ne XHTML, qe kerkon tag te fundit per te gjithe elementet, perdoret nje tag i vetem edhe per tagun e fillimit, edhe per ate te fundit.

31. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Titujt ne faqe (headings)
Perfaqesojne temen kryesore, nentemat, etj. te faqes
është e rendesishme qe ato te perdoren ne menyre logjike ne faqe, gje qe ndihmon teknologji te tilla si browser-at me ze qe te paraqesin faqen ne menyre inteligjente

32. <p> Paragraf Nevojitet per paraqitjen e tekstit ne nje paragraf
Blockquotes (<blockquote>) jane te ngjashme me paragrafin, vetem se ato kane margins anesore me te gjera

33. Listat Listat e Parenditura (listat me pika - bullet) <ul>
<li>One</li>
<li>Tëo</li>
</ul>
Listat e Renditura (listat e numeruara)
<ol>
</ol>

34. Markup i Tekstit Bolding Italics Tjeter <b>text</b>
<strong>text</strong>
Italics
<i>text</i>
<em>text</em> (Emphasized text)
Tjeter
_text subscript
^text superscript

35. Tabelat
<table border cellspacing="5" cellpadding="10"> <caption>People on the team</caption> <tr> <th>Name</th> <th>Position</th> </tr> <td>Mary</td> <td>Analyst</td> <td>John</td> <td>Technician</td> </table>

36. Tabelat <tr>qelizat e tabeles</tr>
<table>tabele</table>
Percakton rreshtat, shtyllat, dhe dicituren (caption) qe perbejne nje tabele.
<tr>qelizat e tabeles</tr>
Percakton nje rresht ne tabele.
<td>te dhenat e tabeles</td>
Percakton te dhena te tabeles(nje qelize).

37. Tabelat <caption>caption</caption>
Percakton nje diciture per tabelen.
<th>koka e tabeles</th>
Percakton koken e tabeles (nje qelize).

38. Atributet e <table>
Cellpadding – percakton hapesiren ndermjet te dhenave dhe ne qelize dhe kufirit te qelizes.
Cellspacing – percakton hapesiren ndermjet qelizave ne tabele.

39. Atributet e <table>
border – është vija qe rrethon tabelen dhe ndermjet cdo qelize. Vlera default e atributit border është 1, do te thote 1-pixel border rreth tabeles dhe rreth cdo qelize ne tabele.
frame – është vija qe rrethon nje qelize te vetme apo te gjithe tabelen. Specifikon cilat pjese te kufirit te tabeles jane te dukshme.
rule – është vija vertikale apo horizontale qe ndan rreshtat dhe kolonat e qelizave. Specifikon se cilat shfaqen ndermjet qelizave brenda tabeles.

40. <html>
<head>
<title>3 by 2 table</title>
</head>
<body bgcolor="#ffffff">
<!-- Background color = ëhite -->
<table frame="above">
<tr>
<td>Dallas </td>
<td>November 5th </td>
</tr>
<td>Detroit </td>
<td>November 11th </td>
<td>Toronto </td>
<td>November 17th</td>
</table>
</body>
</html>

41. Atributet e <table>
frame
border : te gjitha anet
box : te kater anet
void : asnje ane
above : vetem ana e siperme
below : vetem ana e poshtme
hsides : anet horizontale
vsides : anet vertikale
lhs : vetem anet e majta
rhs : vetem anet e djathta

42. Atributet e <table>
rules
none : no rules, vetem frame i jashtem
rows : rules vetem ndermjet rreshtave
cols : rules vetem ndermjet shtyllave
all : rules ndermjet rreshtave dhe shtyllave

43. Shembull <html> <head>
<title>3 by 2 table</title>
</head>
<body bgcolor="#ffffff">
<!-- Background color = ëhite -->
<table rules="roës">
<tr>
<td>Dallas </td>
<td>November 5th </td>
</tr>
<td>Detroit </td>
<td>November 11th </td>
<td>Toronto </td>
<td>November 17th</td>
</table>
</body>
</html>

44. Shembull Width – kontrollon gjeresine e tabeles <html>
<head>
<title>3 by 2 table With Border</title>
</head>
<body bgcolor="#ffffff">
<!-- Background color =white -->
<table border="10" width="10%">
<tr>
<td>Dallas </td>
<td>November 5th </td>
</tr>
<td>Detroit </td>
<td>November 11th </td>
<td>Toronto </td>
<td>November 17th</td>
</table>
</body>
</html>

45. Imazhet Imazhet vendosen duke perdorur nje element img
Atributi alt siguron tekst alternativ qe pershkruan imazhin ne rast se vete imazhi nuk mund te shfaqet ose nese perdoruesi nuk mund ta shohe imazhin
<img src="picture.gif" alt=“Butterfly">

46. Linket
Linket (anchors) mund te lidhin faqen tuaj me ndonje skedar tjeter ne Web
<a href="
University of Washington </a>

47. Div Div-et perfshijne nje bashkesi elementesh
<div style=“text-align: center;”> <h2> News</h2> <p><a href=“budget. html”>Budget</a></p> <p><a href=“invest.html”>Investment</a></p> </div>
<div>A block-level section in a document</div>

48. Span
Span-et perfshijne objekte (tekst, imazhe) brenda nje elementi <p>Call me Ishmael. Some years ago — <span style=“font-style: italic;”>never mind how long precisely</span> — having little or no money in my purse, and nothing particular to interest me on shore</p>
<span>An inline section in a document</span>

49. Pyetje