Kurs Profesional HTML në Shqip

Mëso bazat e ndërtimit të faqeve web përmes mësimeve të strukturuara, shembujve të qartë, ushtrimeve praktike, mini-testeve dhe provimit final.

10 mësime

Strukturë, tekst, linke, media, lista, tabela, forma, semantikë dhe aksesueshmëri.

Testim real

Duhet të marrësh të paktën 70% në mini-testet e kapitujve dhe në provimin final.

Projekt final

Në fund ndërton një faqe personale me strukturë profesionale HTML.

Praktikë reale

Mëson si të shkruash kodin, ta ruash si index.html, ta hapësh në browser dhe ta testosh.

Admin Audit Log

Regjistron veprimet admin në këtë browser.

<!DOCTYPE html>
<html lang="sq">
  <head>
    <title>Faqja ime</title>
  </head>
  <body>
    <header>
      <h1>Mirë se erdhe</h1>
    </header>
  </body>
</html>

Çfarë është HTML?

HTML është gjuha që i jep strukturë një faqeje web. Ajo nuk është gjuhë programimi; është gjuhë markimi.

Bazat e web-it

Objektivat

Të kuptosh rolin e HTML në një faqe web.
Të dallosh HTML, CSS dhe JavaScript.
Të njohësh elementin, tag-un dhe atributin.

HTML është skeleti, CSS është pamja, JavaScript është sjellja interaktive.

<p>Ky është paragraf.</p>

Tag hapës: <p>
Përmbajtja: Ky është paragraf.
Tag mbyllës: </p>

Kur hap një faqe web, browser-i lexon HTML-in nga lart poshtë dhe krijon një pemë elementësh. Çdo element i tregon browser-it çfarë kuptimi ka përmbajtja: titull, paragraf, link, imazh, listë apo seksion.

Një fillestar shpesh mendon se HTML përdoret për “ta bërë faqen të bukur”, por kjo është puna e CSS. HTML duhet të jetë i qartë edhe pa ngjyra. Nëse struktura është e saktë, faqja kuptohet më mirë nga përdoruesit, Google dhe teknologjitë ndihmëse.

Ushtrim

Shkruaj në një skedar të ri një titull <h1> dhe dy paragrafë <p> për veten.

1. Çfarë bën HTML?

Shton vetëm ngjyra Strukturon përmbajtjen e faqes Ruaj të dhëna në server

2. Cila pjesë kontrollon pamjen vizuale?

HTML SQL CSS

Struktura bazë e dokumentit HTML

Çdo faqe serioze fillon me skelet të qartë: deklarimi i dokumentit, rrënja, koka dhe trupi.

Dokumenti HTML

<!DOCTYPE html>
<html lang="sq">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Faqja ime</title>
  </head>
  <body>
    Përmbajtja shfaqet këtu.
  </body>
</html>

Pse ka rëndësi?

<!DOCTYPE html> i tregon browser-it të përdorë standardin modern.
lang="sq" ndihmon motorët e kërkimit dhe lexuesit e ekranit.
meta viewport e bën faqen të përshtatshme në telefon.

Nga editori te browser-i

HTML nuk ekzekutohet si program më vete. Ti e shkruan në një editor teksti ose editor kodi, e ruan si skedar me prapashtesën .html, pastaj browser-i e lexon dhe e shfaq si faqe web. Browser-i nuk i tregon tag-et si tekst; ai i përdor për të kuptuar strukturën e dokumentit.

Hap një editor të thjeshtë ose profesional, si Notepad, TextEdit, VS Code apo një editor tjetër kodi.
Shkruaj strukturën bazë me <!DOCTYPE html>, <html>, <head> dhe <body>.
Ruaje skedarin me emër index.html. Ky është emri klasik i faqes kryesore në një projekt web.
Përdor kodimin UTF-8, që shkronjat shqip si ë dhe ç të shfaqen saktë.
Hape skedarin në Chrome, Edge, Firefox ose Safari dhe kontrollo rezultatin.

Rregull i mirë: pas çdo ndryshimi në HTML, ruaje skedarin dhe rifresko browser-in për të parë rezultatin.

Laborator praktik: HTML Preview

Për testim të shpejtë mund të përdorësh edhe editorin online të Laboratori.al. Aty shkruan HTML, CSS ose JavaScript dhe sheh menjëherë rezultatin, pa krijuar skedar në kompjuter.

Hape këtë faqe në një tab tjetër: HTML, CSS, JS Preview - Laboratori.al.

Kopjo këtë shembull, ndrysho titullin dhe paragrafin, pastaj shiko si ndryshon rezultati:

<html>
  <head>
    <title>Faqja ime e parë</title>
  </head>
  <body>
    <h1>Përshëndetje!</h1>
    <p>Ky është testi im në HTML Preview.</p>
  </body>
</html>

Përdor HTML Preview për prova të shpejta, por për projektin final mëso edhe ta ruash faqen si index.html.

Elementi <head> është si pjesa administrative e dokumentit. Aty vendosen informacione që ndihmojnë browser-in ta kuptojë faqen: kodimi i karaktereve, titulli, përshkrimi, lidhjet me CSS dhe rregullat për ekranet mobile.

Elementi <body> është zona ku vendoset ajo që përdoruesi sheh: tekste, butona, foto, menu, seksione dhe forma. Ndarja mes head dhe body është bazë për çdo faqe profesionale.

1. Ku vendoset titulli që shfaqet në tab-in e browser-it?

Brenda <title> Brenda <footer> Brenda <button>

2. Cili element mban përmbajtjen që shfaqet në faqe?

<head> <body> <meta>

Teksti, titujt dhe hierarkia

Faqja duhet të lexohet si dokument i rregullt: një titull kryesor, nënseksione dhe paragrafë të qartë.

Përmbajtje

Rregulla profesionale

Përdor vetëm një <h1> për temën kryesore të faqes.
Mos kalo nga <h1> direkt te <h4> pa arsye.
Përdor <strong> për rëndësi, jo vetëm për trashësi vizuale.

<h1>Shërbimet tona</h1>
<p>Ne ndërtojmë faqe web moderne.</p>

<h2>Dizajn web</h2>
<p>Faqe të shpejta dhe të qarta.</p>

<h2>Mirëmbajtje</h2>
<p>Përditësime dhe kontroll sigurie.</p>

Titujt nuk janë vetëm për madhësi teksti. Ata krijojnë hartën logjike të faqes. Një <h1> tregon temën kryesore, <h2> ndan kapituj ose seksione, ndërsa <h3> përdoret për nënseksione.

Paragrafët duhet të jenë të shkurtër dhe me një ide kryesore. Në një faqe reale, kjo e bën tekstin më të lexueshëm dhe ndihmon përdoruesin të gjejë shpejt informacionin që kërkon.

1. Cili është përdorimi më i mirë i <h1>?

Për çdo paragraf Vetëm për tekst të vogël Për titullin kryesor të faqes

2. Cili element përdoret për paragraf?

<p> <img> <table>

Linke dhe imazhe

Linket lidhin faqet me njëra-tjetrën, ndërsa imazhet i japin kontekst vizual përmbajtjes.

Navigim dhe media

<a href="https://example.com">Vizito faqen</a>

<img
  src="foto-produkti.jpg"
  alt="Telefon i zi mbi tavolinë"
>

Detaje që duken profesionale

href tregon destinacionin e linkut.
src tregon burimin e imazhit.
alt përshkruan imazhin për aksesueshmëri dhe SEO.
<img> është element bosh në HTML modern; nuk përdor tag mbyllës </img>.

Linket janë mënyra si përdoruesi lëviz brenda një faqeje, nga një faqe në tjetrën ose drejt një burimi të jashtëm. Një link i mirë ka tekst të qartë, që tregon çfarë ndodh pas klikimit.

Imazhet duhet të përdoren me qëllim. Atributi alt nuk është zbukurim; ai zëvendëson imazhin kur nuk ngarkohet dhe ndihmon përdoruesit që përdorin lexues ekrani.

1. Cili atribut përdoret për adresën e linkut?

src href title

2. Pse përdoret alt te imazhet?

Për të rritur madhësinë Për të krijuar tabelë Për përshkrim dhe aksesueshmëri

Listat

Listat e bëjnë informacionin të lehtë për t'u skanuar dhe ndihmojnë në strukturimin e hapave.

Organizim

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<ol>
  <li>Hap editorin</li>
  <li>Shkruaj kodin</li>
  <li>Hape në browser</li>
</ol>

Kur përdoret secila?

<ul> për pika pa rend të detyrueshëm.
<ol> për hapa me rend të qartë.
<li> është çdo element i listës.

Listat e bëjnë përmbajtjen më të lehtë për t'u lexuar. Kur rendi nuk ka rëndësi, përdoret <ul>. Kur hapat duhen ndjekur njëri pas tjetrit, përdoret <ol>.

Në faqe profesionale, listat përdoren për menu, veçori produkti, hapa procesi, kritere, përfitime dhe checklist-a. Ato janë më të qarta se paragrafët shumë të gjatë.

1. Cili element krijon listë të renditur?

<ol> <ul> <p>

2. Çfarë përfaqëson <li>?

Link image List item Large input

Tabelat

Tabelat përdoren për të dhëna tabelare, jo për të krijuar layout-in e faqes.

Të dhëna

<table>
  <thead>
    <tr>
      <th>Produkt</th>
      <th>Çmimi</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Kurs HTML</td>
      <td>29€</td>
    </tr>
  </tbody>
</table>

Struktura

<tr> krijon rresht.
<th> krijon qelizë titulli.
<td> krijon qelizë me të dhëna.

Tabelat janë të dobishme kur ke të dhëna që krahasohen në rreshta dhe kolona, si çmime, orare, raporte ose inventar. Nuk duhet të përdoren për të ndërtuar dizajnin e faqes.

Përdorimi i <thead>, <tbody>, <th> dhe <td> e bën tabelën më të qartë për browser-in dhe më të lexueshme për përdoruesin.

1. Cili element krijon rresht tabele?

<td> <th> <tr>

2. Kur duhet përdorur tabela?

Për të dhëna tabelare Për çdo layout faqeje Vetëm për foto

1. Cili link është më profesional?

Shiko programin e kursit Kliko këtu Link

2. Kur përdoret <ol>?

Për foto produkti Për tekst pa rend Për hapa që kanë rend

3. Për çfarë përdoret tabela?

Për të vendosur gjithë layout-in Për të dhëna në rreshta dhe kolona Vetëm për butona

Format dhe input-et

Format mbledhin të dhëna nga përdoruesi: emër, email, kërkim, mesazh, zgjedhje dhe më shumë.

Interaksion

<form action="/kontakt" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <label for="mesazh">Mesazh</label>
  <textarea id="mesazh" name="mesazh"></textarea>

  <button type="submit">Dërgo</button>
</form>

Praktika të mira

Lidhe <label> me input përmes for dhe id.
Përdor tipin e duhur: email, password, number.
Përdor required kur fusha nuk duhet të lihet bosh.

Format janë ura mes përdoruesit dhe faqes. Ato përdoren për kontakt, regjistrim, hyrje në llogari, kërkim, porosi dhe shumë veprime të tjera. Çdo fushë duhet të ketë emër të qartë dhe tip të saktë.

Kur përdor label, fusha bëhet më e lehtë për t'u përdorur. Përdoruesi mund të klikojë edhe tekstin e etiketës, ndërsa lexuesit e ekranit e kuptojnë më mirë se çfarë kërkon fusha.

1. Cili atribut e bën një fushë të detyrueshme?

placeholder required href

2. Pse përdoret <label>?

Për të emërtuar dhe lidhur fushën Për të hapur link Për të vendosur foto

HTML semantik

Elementët semantikë përshkruajnë kuptimin e zonave të faqes, jo vetëm pamjen e tyre.

Strukturë profesionale

Elementët kryesorë

<header> për krye të faqes ose seksionit.
<nav> për navigim.
<main> për përmbajtjen kryesore.
<section> dhe <article> për blloqe kuptimplota.
<footer> për fundin e faqes.

<header>...</header>
<nav>...</nav>
<main>
  <article>
    <h1>Artikulli</h1>
    <p>Përmbajtja...</p>
  </article>
</main>
<footer>...</footer>

HTML semantik është një nga dallimet mes kodit fillestar dhe kodit profesional. Në vend që çdo gjë të jetë <div>, përdor elementë që tregojnë kuptimin: header, nav, main, article, section dhe footer.

Kjo nuk e ndryshon vetëm pamjen; ajo e bën faqen më të mirë për SEO, aksesueshmëri, mirëmbajtje dhe bashkëpunim me programues të tjerë.

1. Cili element duhet të mbajë përmbajtjen kryesore të faqes?

<span> <br> <main>

2. Cili element përdoret më mirë për menunë e navigimit?

<footer> <nav> <table>

Aksesueshmëri dhe SEO bazë

HTML i mirë ndihmon njerëzit, lexuesit e ekranit dhe motorët e kërkimit ta kuptojnë faqen.

Cilësi

Checklist

Vendos lang në elementin <html>.
Përdor tituj sipas hierarkisë.
Shkruaj alt të dobishëm për imazhet informative.
Përdor tekst linku të qartë, jo vetëm "kliko këtu".

<a href="/cmimet">Shiko paketat e çmimeve</a>

<img
  src="ekipi.jpg"
  alt="Ekipi i kompanisë në zyrë gjatë punës"
>

Aksesueshmëria do të thotë që faqja mund të përdoret nga sa më shumë njerëz, përfshirë ata që përdorin tastierë, lexues ekrani ose pajisje ndihmëse. HTML i saktë është hapi i parë drejt aksesueshmërisë.

SEO bazë fillon nga struktura: titull i qartë, përshkrim i mirë, hierarki titujsh, linke të kuptueshme dhe imazhe me alt. Këto gjëra ndihmojnë motorët e kërkimit ta kuptojnë faqen.

1. Cili tekst linku është më i qartë?

Shiko paketat e çmimeve Kliko këtu Më shumë

2. Çfarë ndihmon atributi lang?

Vetëm ngjyrën e faqes Madhësinë e imazhit Gjuhën për browser, SEO dhe aksesueshmëri

Projekt final: faqja jote personale

Tani bashko gjithçka në një faqe reale: hyrje, navigim, seksione, projekt, kontakt dhe footer.

Praktikë

<body>
  <header>
    <h1>Ardit Krasniqi</h1>
    <nav>
      <a href="#rreth">Rreth meje</a>
      <a href="#projektet">Projektet</a>
      <a href="#kontakt">Kontakt</a>
    </nav>
  </header>

  <main>
    <section id="rreth">...</section>
    <section id="projektet">...</section>
    <section id="kontakt">...</section>
  </main>

  <footer>© 2026</footer>
</body>

Kriteret e dorëzimit

Ka strukturë të plotë HTML.
Ka navigim me linke drejt seksioneve.
Ka të paktën një listë, një imazh me alt dhe një formë kontakti.
Përdor elementë semantikë.

Projekti final është pjesa ku njohuritë kthehen në aftësi. Mos e ndërto faqen thjesht që të “punojë”; ndërtoje që të lexohet, të mirëmbahet dhe të kuptohet nga dikush tjetër.

Një faqe personale e mirë ka qëllim të qartë: kush je, çfarë bën, cilat projekte ke dhe si mund të kontaktohesh. HTML duhet të krijojë këtë rrugë në mënyrë logjike.

1. Cila strukturë është më profesionale për një faqe personale?

Vetëm shumë <div> pa tituj header, nav, main, section, footer Vetëm një tabelë e madhe

2. Çfarë duhet të bësh para provimit final?

Të përsërisësh konceptet dhe të ndërtosh projektin Të fshish gjithë kodin Të përdorësh vetëm foto

1. Pse lidhet label me input-in?

Për të ndryshuar fontin automatikisht Për përdorim më të lehtë dhe aksesueshmëri Për të fshirë input-in

2. Cili është shembull i HTML semantik?

header, nav, main, footer vetëm div pa emra vetëm br

3. Çfarë duhet të ketë projekti final?

Vetëm një fjali Vetëm foto pa tekst Strukturë, seksione, navigim, media dhe kontakt

Provimi përfundimtar

Për të marrë certifikatën duhet të kalosh provimin me të paktën 70%. Pyetjet përmbledhin gjithë kursin.

Urime, e kalove provimin.

Shkruaj emrin dhe mbiemrin që të shfaqen në certifikatë.

Certifikata e përfundimit

Mund ta printosh ose ta ruash si PDF nga dritarja e printimit.

HTML

Certifikatë përfundimi

HTML Profesional në Shqip

Kjo certifikatë i jepet

Emri Mbiemri

për përfundimin me sukses të kursit me mësime, ushtrime praktike, mini-teste dhe provim final.

Rezultati 0%

Data

Niveli Bazë Profesional