Download - Hyrje në HTML

Transcript
Page 1: Hyrje në HTML

HTML(HyperText Markup Language)TAHIR HOXHA

WWW.AKADEMIAVIRTUALE.COM

Page 2: Hyrje në HTML

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.

Page 3: Hyrje në HTML

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.

Page 4: Hyrje në HTML

HTML etiketat Secili element përshkruhet me anë të etiketave (tag) të caktuara.

Elementi EtiketaTitull i nivelit më të lartë h1Paragraf pImazh imgTabelë table

Page 5: Hyrje në HTML

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>

Page 6: Hyrje në HTML

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>

Page 7: Hyrje në HTML

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>

Page 8: Hyrje në HTML

Paraqitja në shfletues

Page 9: Hyrje në HTML

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>

Page 10: Hyrje në HTML

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.

Page 11: Hyrje në HTML

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.

Page 12: Hyrje në HTML

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.

Page 13: Hyrje në HTML

Paraqitja skematike 1

div

p p

Page 14: Hyrje në HTML

Paraqitja skematike 2

div

p p

Page 15: Hyrje në HTML

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.

Page 16: Hyrje në HTML

Struktura themelore e HTML dokumentit<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

DOCTYPE

html

head

body

Page 17: Hyrje në HTML

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”.

Page 18: Hyrje në HTML

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.

Page 19: Hyrje në HTML

<!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">