Abetarja e Web-it,
HTML
Leksion 1
1
Blloqet e ndërtimit të web-it
• HTML dhe CSS
• Client Scripting - JavaScript dhe DOM
• Server Scripting - ASP, PHP
• XML dhe SQL
2
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
3
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
4
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: http://www.someone.com/page.htm
5
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>
6
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
7
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
8
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.
9
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.
10
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.
11
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.
12
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.
13
Versionet e HTML-së
14
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.
15
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
16
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
17
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
http://www.w3.org/tr/xhtml1/#diffs
18
Nje Skedar i thjeshtë XHTML
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd XHTML 1.0 transitional//EN"
"http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>
My Home Page
</title>
</head>
<body>
<h1>My Home Page </h1>
<p>
Welcome to my home page
</p>
</body>
</html>
19
Struktura Hierarkike
Dokumenti xHTML i ndertuar sic duhet, formon nje
hierarki
20
Tipet e Permbajtjes
Dokumentet ndertohen nga tipe logjike te permbajtjes
21
Struktura Semantike
Permbajtja e te njejtit tip zakonisht formatohet ne menyre
te tille qe te duket njesoj.
22
Markup Semantike
HTML markup bazohet ne tipe logjike te permbajtjes
23
Hierarkia
Hierarkia perfundimtare
24
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
25
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
26
Strict DOCTYPE
• Shembull
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd XHTML 1.0 Strict//EN“
"http://www.w3.org/tr/xhtml1/Dtd/xhtml1-strict.dtd">
• 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
27
Elementet
• Perbehen nga tri pjese:
• Tagu i Fillimit, i cili mund te permbaje atribute
• Permbajtja
• Tagu i Fundit
• Shembull:
<p id=“intro”>Welcome</p>
28
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
29
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.
30
<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
31
<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
32
Listat
• Listat e Parenditura (listat me pika - bullet)
<ul>
<li>One</li>
<li>Tëo</li>
</ul>
• Listat e Renditura (listat e numeruara)
<ol>
<li>One</li>
<li>Tëo</li>
</ol>
33
Markup i Tekstit
• Bolding
• <b>text</b>
• <strong>text</strong>
• Italics
• <i>text</i>
• <em>text</em> (Emphasized text)
• Tjeter
• _text subscript
• ^text superscript
34
Tabelat
<table border cellspacing="5" cellpadding="10">
<caption>People on the team</caption>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
<tr>
<td>Mary</td>
<td>Analyst</td>
</tr>
<tr>
<td>John</td>
<td>Technician</td>
</tr>
</table>
35
Tabelat
• <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).
36
Tabelat
• <caption>caption</caption>
Percakton nje diciture per tabelen.
• <th>koka e tabeles</th>
Percakton koken e tabeles (nje qelize).
37
Atributet e <table>
• Cellpadding – percakton hapesiren ndermjet te dhenave
dhe ne qelize dhe kufirit te qelizes.
• Cellspacing – percakton hapesiren ndermjet qelizave ne
tabele.
38
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.
39
•
•
•
•
•
•
<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>
<tr>
<td>Detroit </td>
<td>November 11th </td>
</tr>
<tr>
<td>Toronto </td>
<td>November 17th</td>
</tr>
</table>
</body>
</html>
40
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
41
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
42
•
•
•
•
•
•
<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>
<tr>
<td>Detroit </td>
<td>November 11th </td>
</tr>
<tr>
<td>Toronto </td>
<td>November 17th</td>
</tr>
</table>
</body>
</html>
Shembull
43
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>
<tr>
<td>Detroit </td>
<td>November 11th </td>
</tr>
<tr>
<td>Toronto </td>
<td>November 17th</td>
</tr>
</table>
• </body>
• </html>
44
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">
45
Linket
• Linket (anchors) mund te lidhin faqen tuaj me ndonje
skedar tjeter ne Web
<a href="http://www.washington.edu/">
University of Washington </a>
46
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>
47
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>
48
Pyetje
49