SlideShare a Scribd company logo
HTML
(HyperText Markup Language)
TAHIR HOXHA
WWW.AKADEMIAVIRTUALE.COM
HTML (HyperText Markup Language)
 HTML është gjuhë për përshkrimin e strukturës së një Web
faqeje.
 Web faqes mund t’iu referohemi edhe si HTML dokument.
 HTML nuk është gjuhë programore.
 HTML dokumenti është fajll tekstual, që ruhet në disk me
ekstensionin .htm ose .html
 Çdo tekst editor (jo tekst procesor si Word-i) mund të përdoret
për krijimin dhe editimin e HTML dokumenteve.
HTML elementet
 Një HTML dokument, gjegjësisht një Web faqe, përbëhet nga një
varg i elementeve strukturalë, të cilat shënohen si fjalë të
rezervuara, me kuptim të veçantë për shfletuesit.
 Disa nga HTML elementet janë:
◦ Titulli
◦ Paragrafi
◦ Imazhi
◦ Tabela, etj.
HTML etiketat
 Secili element përshkruhet me anë të etiketave (tag) të caktuara.
Elementi Etiketa
Titull i nivelit më të lartë h1
Paragraf p
Imazh img
Tabelë table
HTML etiketat
 Për t’u dalluar etiketat nga pjesa tjetër e tekstit të Web faqes, ato
shënohen ndërmjet shenjave < dhe >.
 Kështu, elementi “paragraf”, etiketa e të cilit është p, shënohet si
<p>
HTML etiketat hapëse dhe mbyllëse
 Etiketa <p> shënon fillimin e tekstit të një paragrafi.
 Paragrafi mbyllet me </p>, duke i treguar shfletuesit se në atë
pozitë përfundon një paragraf.
 Shembull:
<p>O malet' e Shqipërisë e ju o lisat' e gjatë!</p>
HTML etiketat hapëse dhe mbyllëse
<h1>BAGËTI E BUJQËSIA</h1>
<p>O malet' e Shqipërisë e ju o lisat' e gjatë!</p>
<p>Fushat e gjëra me lule, q'u kam ndër mënt dit' e natë!</p>
<p>Ju bregore bukuroshe e ju lumenjt' e kulluar!</p>
<p>Çuka, kodra, brinja, gërxhe dhe pylle të gjelbëruar!</p>
<p>Do të këndonj bagëtinë që mbani ju e ushqeni,</p>
<p>O vendëthit e bekuar, ju mëndjen ma dëfreni.</p>
Paraqitja në shfletues
HTML etiketat hapëse dhe mbyllëse
 Etiketat hapëse përcaktojnë pikën e fillimit të veprimit të një
elementi, ndërsa etiketat mbyllëse shënojnë mbarimin e veprimit
të të njëjtit.
 Për shembull:
<p>O malet' e <strong>Shqipërisë</strong> e ju o lisat' e gjatë!</p>
 Paragrafi fillon me <p> dhe mbaron me </p>
HTML etiketat hapëse dhe mbyllëse
 Fjala “Shqipërisë” është e mbështjellur me etiketën <strong> dhe
</strong>, dhe kjo e udhëzon shfletuesin që atë fjalë ta paraqesë
si bold:
O malet' e Shqipërisë e ju o lisat' e gjatë!
 Pra, nga <strong> deri në </strong> teksti do të paraqitet si
bold.
HTML etiketat hapëse dhe mbyllëse
 <p>O malet' e <strong>Shqipërisë</strong> e ju o lisat' e gjatë!</p>
 Në rreshtin e mësipërm e shohim edhe një rregull: etiketa që
hapet më vonë, mbyllet më heret.
 Pra:
◦ <p> e hap paragrafin,
◦ <strong> tregon se teksti në vijim duhet të paraqitet si bold
◦ </strong> tregon se këtu përfundon teksti me bold
◦ </p> e mbyll paragrafin
 Etiketa <strong> u hap e dyta, por u mbyll e para.
HTML etiketat hapëse dhe mbyllëse
 Me anë të etiketa hapëse dhe mbyllëse formojmë edhe
strukturën e dokumentit, gjegjësisht e caktojmë hierarkinë
ndërmjet elementeve, pra marrëdhëniet e tyre të ndërsjella.
 Shembull:
<div>
<p>O malet' e Shqipërisë e ju o lisat' e gjatë!</p>
<p>Fushat e gjëra me lule, q'u kam ndër mënt dit' e natë!</p>
</div>
 Këtu elementet p bëhen pasardhës/fëmijë të elementit div.
Paraqitja skematike 1
div
p p
Paraqitja skematike 2
div
p p
Struktura themelore e HTML dokumentit
 Çdo HTML dokument ka strukturë themelore të njëjtë.
 Mosrespektimi i kësaj strukture bën që një HTML dokument të
trajtohet si dokument jovalid sipas specifikacionit të W3C.
 HTML dokumenti jo i formatuar mirë bën që shfletuesit e
ndryshëm ta interpretojnë në mënyra të ndryshme, duke
rezultuar në pamje inkonzistente.
Struktura themelore e HTML dokumentit
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
DOCTYPE
html
head
body
DOCTYPE
 DOCTYPE është “markup declaration” apo një instruksion që
shënohet në rreshtin e parë të HTML dokumentit dhe i cili
definon versionin e HTML të atij dokumenti.
 Kjo informatë u shërben shfletuesve që faqen ta interpretojnë në
mënyrë standarde, dhe jo në “quirks mode”.
Quirks mode
“Quirks mode” është një regjim funksionimi ku shfletuesit do
të përpiqen t’i determinojnë kuptimet e strukturave apo
elementeve brenda një HTML dokumenti.
Është i dobishëm në rastet kur hapet një HTML dokument i
formatuar në mënyrë jokorrekte, me ç’rast shfletuesi përpiqet
që megjithatë ta paraqesë atë në mënyrë korrekte.
Kjo rezulton në atë që shfletues të ndryshëm ta interpretojnë
HTML dokumentin në mënyra të ndryshme.
Mungesa e DOCTYPE në rreshtin e parë të HTML dokumentit,
bën që shfletuesi të punojë në këtë mod.
Në modin standard, shfletuesi i interpreton elementet e faqes
sipas versionit të shënuar të HTML në DOCTYPE.
<!DOCTYPE html>
 Nëse shënohet <!DOCTYPE html>, shfletuesit do ta konsiderojnë
atë HTML dokument si të bazuar në HTML5.
 Në versionet më të vjetra të HTML, DOCTYPE duket kështu:
Versioni DOCTYPE
HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

More Related Content

What's hot

Siguria e fëmijëve në internet
Siguria e fëmijëve në internetSiguria e fëmijëve në internet
Siguria e fëmijëve në internet
enis vladi
 
Shqiperia- pasurite kulturore dhe turistike dhe ndikimi i tyre ne zhvillimin ...
Shqiperia- pasurite kulturore dhe turistike dhe ndikimi i tyre ne zhvillimin ...Shqiperia- pasurite kulturore dhe turistike dhe ndikimi i tyre ne zhvillimin ...
Shqiperia- pasurite kulturore dhe turistike dhe ndikimi i tyre ne zhvillimin ...
Liil Otr
 
Trevat Shqiptare Ne Greqi
Trevat Shqiptare Ne GreqiTrevat Shqiptare Ne Greqi
Trevat Shqiptare Ne Greqi
olinuhi
 
Projekt ne TIK
Projekt ne TIKProjekt ne TIK
Projekt ne TIK
Anisa 19
 
Dieta e balancuar - një jetë e shëndetshme
Dieta e balancuar - një jetë e shëndetshmeDieta e balancuar - një jetë e shëndetshme
Dieta e balancuar - një jetë e shëndetshme
Riku Verri
 
Shqiperia e mesme
Shqiperia e mesmeShqiperia e mesme
Shqiperia e mesme
Arlinda
 
ELEMENTET KIMIKE NE ORGANIZEM
ELEMENTET KIMIKE NE ORGANIZEMELEMENTET KIMIKE NE ORGANIZEM
ELEMENTET KIMIKE NE ORGANIZEM
Altin Emiri
 
Guide turistike
Guide turistikeGuide turistike
Guide turistike
sara7991
 

What's hot (20)

Siguria e fëmijëve në internet
Siguria e fëmijëve në internetSiguria e fëmijëve në internet
Siguria e fëmijëve në internet
 
Llogaritja e konsumit te energjise elektrike ne shtepite tona
Llogaritja e konsumit te energjise elektrike ne shtepite tona Llogaritja e konsumit te energjise elektrike ne shtepite tona
Llogaritja e konsumit te energjise elektrike ne shtepite tona
 
Shqiperia- pasurite kulturore dhe turistike dhe ndikimi i tyre ne zhvillimin ...
Shqiperia- pasurite kulturore dhe turistike dhe ndikimi i tyre ne zhvillimin ...Shqiperia- pasurite kulturore dhe turistike dhe ndikimi i tyre ne zhvillimin ...
Shqiperia- pasurite kulturore dhe turistike dhe ndikimi i tyre ne zhvillimin ...
 
Ekonomia e Shqiperise
Ekonomia e ShqiperiseEkonomia e Shqiperise
Ekonomia e Shqiperise
 
Trevat Shqiptare Ne Greqi
Trevat Shqiptare Ne GreqiTrevat Shqiptare Ne Greqi
Trevat Shqiptare Ne Greqi
 
Rajoni Amerikano Qendror & Rajoni Amerikano Jugor
Rajoni Amerikano Qendror & Rajoni Amerikano JugorRajoni Amerikano Qendror & Rajoni Amerikano Jugor
Rajoni Amerikano Qendror & Rajoni Amerikano Jugor
 
Fizika dhe Sporti
Fizika dhe SportiFizika dhe Sporti
Fizika dhe Sporti
 
Projekt ne TIK
Projekt ne TIKProjekt ne TIK
Projekt ne TIK
 
interneti
internetiinterneti
interneti
 
Dieta e balancuar - një jetë e shëndetshme
Dieta e balancuar - një jetë e shëndetshmeDieta e balancuar - një jetë e shëndetshme
Dieta e balancuar - një jetë e shëndetshme
 
Bashkimi Europian -BE
Bashkimi Europian -BEBashkimi Europian -BE
Bashkimi Europian -BE
 
Shqiperia e mesme
Shqiperia e mesmeShqiperia e mesme
Shqiperia e mesme
 
Siguria rrugore
Siguria rrugoreSiguria rrugore
Siguria rrugore
 
ELEMENTET KIMIKE NE ORGANIZEM
ELEMENTET KIMIKE NE ORGANIZEMELEMENTET KIMIKE NE ORGANIZEM
ELEMENTET KIMIKE NE ORGANIZEM
 
Historia e skënderbeut
Historia e skënderbeutHistoria e skënderbeut
Historia e skënderbeut
 
Kontibuti i Shqipetareve ne mbrojtjen e hebrenjeve gjate luftes se 2 boterore
Kontibuti i Shqipetareve ne mbrojtjen e hebrenjeve  gjate luftes se 2 boteroreKontibuti i Shqipetareve ne mbrojtjen e hebrenjeve  gjate luftes se 2 boterore
Kontibuti i Shqipetareve ne mbrojtjen e hebrenjeve gjate luftes se 2 boterore
 
Obeziteti
ObezitetiObeziteti
Obeziteti
 
Hidrokarburet dhe vetite e tyre
Hidrokarburet dhe vetite e tyreHidrokarburet dhe vetite e tyre
Hidrokarburet dhe vetite e tyre
 
Shqipëria në Luftën e Parë Botërore
Shqipëria në Luftën e Parë BotëroreShqipëria në Luftën e Parë Botërore
Shqipëria në Luftën e Parë Botërore
 
Guide turistike
Guide turistikeGuide turistike
Guide turistike
 

Viewers also liked (13)

"Si ta krijojmë një faqe interneti" - Nga 0 (zerro) deri në produkt final
"Si ta krijojmë një faqe interneti" - Nga 0 (zerro) deri në produkt final"Si ta krijojmë një faqe interneti" - Nga 0 (zerro) deri në produkt final
"Si ta krijojmë një faqe interneti" - Nga 0 (zerro) deri në produkt final
 
Krijimi i faqes në web site
Krijimi i faqes në web siteKrijimi i faqes në web site
Krijimi i faqes në web site
 
Udhëzime për një web faqe
Udhëzime për një web faqeUdhëzime për një web faqe
Udhëzime për një web faqe
 
Krijimi i web site
Krijimi i web siteKrijimi i web site
Krijimi i web site
 
Web design - konceptet themelore
Web design - konceptet themeloreWeb design - konceptet themelore
Web design - konceptet themelore
 
Projekt Per lenden Informatike Viti 1
Projekt Per lenden Informatike Viti 1 Projekt Per lenden Informatike Viti 1
Projekt Per lenden Informatike Viti 1
 
projekt ne informatike
projekt ne informatikeprojekt ne informatike
projekt ne informatike
 
Web dizajni - konceptet themelore
Web dizajni - konceptet themeloreWeb dizajni - konceptet themelore
Web dizajni - konceptet themelore
 
Pajisjet hyrese te kompjuterit
Pajisjet hyrese te kompjuteritPajisjet hyrese te kompjuterit
Pajisjet hyrese te kompjuterit
 
Algoritmet C++
Algoritmet C++Algoritmet C++
Algoritmet C++
 
paisjet hyrëse dhe dalëse
paisjet hyrëse dhe dalësepaisjet hyrëse dhe dalëse
paisjet hyrëse dhe dalëse
 
Kompjuteri dhe pjeset e tij
Kompjuteri dhe pjeset e tijKompjuteri dhe pjeset e tij
Kompjuteri dhe pjeset e tij
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 

Hyrje në HTML

  • 1. HTML (HyperText Markup Language) TAHIR HOXHA WWW.AKADEMIAVIRTUALE.COM
  • 2. HTML (HyperText Markup Language)  HTML është gjuhë për përshkrimin e strukturës së një Web faqeje.  Web faqes mund t’iu referohemi edhe si HTML dokument.  HTML nuk është gjuhë programore.  HTML dokumenti është fajll tekstual, që ruhet në disk me ekstensionin .htm ose .html  Çdo tekst editor (jo tekst procesor si Word-i) mund të përdoret për krijimin dhe editimin e HTML dokumenteve.
  • 3. HTML elementet  Një HTML dokument, gjegjësisht një Web faqe, përbëhet nga një varg i elementeve strukturalë, të cilat shënohen si fjalë të rezervuara, me kuptim të veçantë për shfletuesit.  Disa nga HTML elementet janë: ◦ Titulli ◦ Paragrafi ◦ Imazhi ◦ Tabela, etj.
  • 4. HTML etiketat  Secili element përshkruhet me anë të etiketave (tag) të caktuara. Elementi Etiketa Titull i nivelit më të lartë h1 Paragraf p Imazh img Tabelë table
  • 5. HTML etiketat  Për t’u dalluar etiketat nga pjesa tjetër e tekstit të Web faqes, ato shënohen ndërmjet shenjave < dhe >.  Kështu, elementi “paragraf”, etiketa e të cilit është p, shënohet si <p>
  • 6. HTML etiketat hapëse dhe mbyllëse  Etiketa <p> shënon fillimin e tekstit të një paragrafi.  Paragrafi mbyllet me </p>, duke i treguar shfletuesit se në atë pozitë përfundon një paragraf.  Shembull: <p>O malet' e Shqipërisë e ju o lisat' e gjatë!</p>
  • 7. HTML etiketat hapëse dhe mbyllëse <h1>BAGËTI E BUJQËSIA</h1> <p>O malet' e Shqipërisë e ju o lisat' e gjatë!</p> <p>Fushat e gjëra me lule, q'u kam ndër mënt dit' e natë!</p> <p>Ju bregore bukuroshe e ju lumenjt' e kulluar!</p> <p>Çuka, kodra, brinja, gërxhe dhe pylle të gjelbëruar!</p> <p>Do të këndonj bagëtinë që mbani ju e ushqeni,</p> <p>O vendëthit e bekuar, ju mëndjen ma dëfreni.</p>
  • 9. HTML etiketat hapëse dhe mbyllëse  Etiketat hapëse përcaktojnë pikën e fillimit të veprimit të një elementi, ndërsa etiketat mbyllëse shënojnë mbarimin e veprimit të të njëjtit.  Për shembull: <p>O malet' e <strong>Shqipërisë</strong> e ju o lisat' e gjatë!</p>  Paragrafi fillon me <p> dhe mbaron me </p>
  • 10. HTML etiketat hapëse dhe mbyllëse  Fjala “Shqipërisë” është e mbështjellur me etiketën <strong> dhe </strong>, dhe kjo e udhëzon shfletuesin që atë fjalë ta paraqesë si bold: O malet' e Shqipërisë e ju o lisat' e gjatë!  Pra, nga <strong> deri në </strong> teksti do të paraqitet si bold.
  • 11. HTML etiketat hapëse dhe mbyllëse  <p>O malet' e <strong>Shqipërisë</strong> e ju o lisat' e gjatë!</p>  Në rreshtin e mësipërm e shohim edhe një rregull: etiketa që hapet më vonë, mbyllet më heret.  Pra: ◦ <p> e hap paragrafin, ◦ <strong> tregon se teksti në vijim duhet të paraqitet si bold ◦ </strong> tregon se këtu përfundon teksti me bold ◦ </p> e mbyll paragrafin  Etiketa <strong> u hap e dyta, por u mbyll e para.
  • 12. HTML etiketat hapëse dhe mbyllëse  Me anë të etiketa hapëse dhe mbyllëse formojmë edhe strukturën e dokumentit, gjegjësisht e caktojmë hierarkinë ndërmjet elementeve, pra marrëdhëniet e tyre të ndërsjella.  Shembull: <div> <p>O malet' e Shqipërisë e ju o lisat' e gjatë!</p> <p>Fushat e gjëra me lule, q'u kam ndër mënt dit' e natë!</p> </div>  Këtu elementet p bëhen pasardhës/fëmijë të elementit div.
  • 15. Struktura themelore e HTML dokumentit  Çdo HTML dokument ka strukturë themelore të njëjtë.  Mosrespektimi i kësaj strukture bën që një HTML dokument të trajtohet si dokument jovalid sipas specifikacionit të W3C.  HTML dokumenti jo i formatuar mirë bën që shfletuesit e ndryshëm ta interpretojnë në mënyra të ndryshme, duke rezultuar në pamje inkonzistente.
  • 16. Struktura themelore e HTML dokumentit <!DOCTYPE html> <html> <head> </head> <body> </body> </html> DOCTYPE html head body
  • 17. DOCTYPE  DOCTYPE është “markup declaration” apo një instruksion që shënohet në rreshtin e parë të HTML dokumentit dhe i cili definon versionin e HTML të atij dokumenti.  Kjo informatë u shërben shfletuesve që faqen ta interpretojnë në mënyrë standarde, dhe jo në “quirks mode”.
  • 18. Quirks mode “Quirks mode” është një regjim funksionimi ku shfletuesit do të përpiqen t’i determinojnë kuptimet e strukturave apo elementeve brenda një HTML dokumenti. Është i dobishëm në rastet kur hapet një HTML dokument i formatuar në mënyrë jokorrekte, me ç’rast shfletuesi përpiqet që megjithatë ta paraqesë atë në mënyrë korrekte. Kjo rezulton në atë që shfletues të ndryshëm ta interpretojnë HTML dokumentin në mënyra të ndryshme. Mungesa e DOCTYPE në rreshtin e parë të HTML dokumentit, bën që shfletuesi të punojë në këtë mod. Në modin standard, shfletuesi i interpreton elementet e faqes sipas versionit të shënuar të HTML në DOCTYPE.
  • 19. <!DOCTYPE html>  Nëse shënohet <!DOCTYPE html>, shfletuesit do ta konsiderojnë atë HTML dokument si të bazuar në HTML5.  Në versionet më të vjetra të HTML, DOCTYPE duket kështu: Versioni DOCTYPE HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">