Korrikula e Trajnimit
-
Hyrje në HTMLLeksioni1.1
-
Tekstet dhe ListatLeksioni1.2
-
Linqet dhe ImazhetLeksioni1.3
-
Detyra për ushtrime – Pjesa ILeksioni1.4
-
Tabelat dhe FormatLeksioni1.5
-
Tagje dhe funksionalitete tjeraLeksioni1.6
-
Video dhe AudioLeksioni1.7
-
Detyra për ushtrime – Pjesa IILeksioni1.8
-
Kuizi – HTMLLeksioni1.9
-
Hyrje në CSSLeksioni2.1
-
Prapavija dhe veçoritë për teksteLeksioni2.2
-
Hapësirat, kufizimet dhe dimensionetLeksioni2.3
-
Detyra për ushtrime – Pjesa ILeksioni2.4
-
Linqe, Lista, Tabela dhe FormaLeksioni2.5
-
Pseudo class | elementet , float dhe pozicionimiLeksioni2.6
-
Detyra për ushtrime – Pjesa IILeksioni2.7
HTML 9
CSS 7
HTML & CSS Projekti 1
Tekstet dhe Listat
Pasi që shumica e përmbajtjes së një web faqe është e përbërë prej teksteve dhe ne këtë pjesë kemi tagjë më shumë të cilat na mundësojnë paraqitjen e teksteve në forma të ndryshme. Në vijim po japim disa nga tagjet që përdorën në HTML për paraqitjen e teksteve.
Shënim: Merr ushtrimet për html_sifda në vijim dhe plotëso ato me mësimet e bëra nga secilën pjesë që do prezantohet në vijim.
Kreu(Heading)
Nga fjala kreu nënkuptohet se përdorën për emërtimin e pjesëve kryesore në kuadër të një faqe në mënyrë që të tërhiqet vëmendja e lexuesit. Këto tagje përdoren për emërtimin e pjesëve si titulli i faqes, titujt e lajmeve, nëntitujt, etj.
Nga këto që përmendëm për secilën nga to kemi paraqitje të veçantë përmes opsioneve që ofron HTML, e ato janë h1, h2, h3, h4, h5, h6.
Shembull
<h1>Kreu i faqes</h1>
<h2>Titulli i lajmit</h2>
<h3>Nëntitulli </h3>
<h4> Nëntitulli tjetër</h4>
<h5>Më i theksuar</h5>
<h6>Më i pakë e theksuar</h6>
Paragrafët dhe formatimi i tekstit
Për paraqitjen e përmbajtjes së faqes, lajmit, etj në HTML përdorën paragrafët tagu <p>.
Shembull : <p>Një shënim për ueb faqe.</p>
Nga paraqitja e paragrafit më larët kemi rezultat me tekst të thjeshtë nëse dëshirojmë të kemi tekst që duhet të rregullohet më ndryshe sikurse që kemi në Word p.sh. bold, italic, dalje në rresht të ri, paraqitje e tekstit më poshtë ose më lartë, etj. për të gjitha këto kemi tagje tjera specifike të cilat ofrohen në vijim të materialit:
| Tagu | Përshkrimi |
| <b> | Tekst bold |
| <i> | Kthen në stil italik tekstin |
| <br/> | Mundëson daljen ne rresht të ri. |
| <hr/> | Mundëson vendosjen e një vije që shërben si ndarje mes përmbajtjeve të ndryshme. |
| <sub> | Mundësohet paraqitja e indeksit. |
| <sup> | Mundësohet paraqitja e fuqisë. |
| <strong> | Tekst i rëndësishëm |
| <em> | Teksti i theksuar |
| <blockquote> | Citatet të gjata që përfshijnë e gjithë fjalinë. |
| <q> | Citatet të shkurtër që përfshijnë e një pjesë të fjalisë. |
| <abbr> | Ku zgjedhim me maus një tekst na paraqitet përshkrimi |
| <acronym> | Ku zgjedhim me maus një tekst na paraqitet përshkrimi |
| <cite> | Ku dëshirojmë të referohemi në tekste të jashtme |
| <dfn> | Përshkrimi i një definimi |
| <address> | Për paraqitjen e adresës. |
| <small> | Zvogëlimi i madhësisë së tekstit |
| <big> | Zvogëlimi i madhësisë së tekstit |
| <mark> | Tekst i markuar |
Komentet – Për punë më të lehtë, qasje me të lehtë pas një kohe që kemi krijuar HTML kodin ose për të kuptuar pjesët e ndryshme nëse punohet nga më shumë se një punëtor, etj. përdorën komentet. <!– Një koment në HTML –>
Ushtrimi i dyte në HTML – tekstet.html
Shënim përdor fajllat e ofruar në fillim për të krijuar zgjidhjen si në vijim.
<!DOCTYPE html>
<html>
<head>
<!-- Përdor tagjet për tekstin brenda kllapave-->
<title>Tekstet</title>
</head>
<body>
<!-- Perdor njerin nga tagjet per heading -->
<h1>Titulli i faqes</h1>
<!-- Përdor tagun për shënime -->
<p>Nje shenim per ueb faqe - <em>tekst me i theksuar </em>, pas vijes ne mes kalo tekstin ne rresht te ri.<br>
<strong>Shenim i rendesishem me dukshmeri me te larte</strong> : Perberja e ujit eshte H<sub>2</sub>O.
</p>
<!-- Përdor njërin nga tagjet për heading -->
<h2>Ushtrime ne matematike</h2>
<!-- Perdor tagun per shenime -->
<p>Ne matematike x<sup>2</sup>=9) per x = 3, <big>Teksi me font me te madhe</big>,<small> Tekst me font me te vogel</small></p>
<!-- Perdor tagun per shenim -->
<p>
Naimi ka thene <q>Pune pune nate e dite, qe te shohim pake drite.</q></p>
<!-- Përdor tagun për shënim dhe përdor absevation për HTML -->
<p>Fjala <abbr title="Hypertext Markup Language">HTML</abbr> eshte nga me te kerkuarat ne engjinat kerkuese.</p>
<!-- Përdor tagun për shënim dhe përdor citat -->
<p><cite> Menyra e vetme per te mesuar nje gjuhe programuse eshte duke e
shkruar programe me ate gjuhe</cite>, ka thene Dennis Ritchie</p>
</body>
</html>
Lista
Lista në HTML paraqet një listë të elementeve të cilët e kanë nga një përshkrim.
Kemi tre lloje të listave, lista e renditur dhe e pa renditur dhe lista e definuar.
Në vijim po paraqesim kodin për deklarimin e tre llojeve te listave:
| Lista e renditur | Lista e pa renditur | Lista e definuar |
| <ol> – ordered list <li>Buka</li> – list item <li>Qumështi</li><li>Kafe</li> </ol> |
<ul> – unordered list < li>Buka</li> < li>Qumështi</li>< li>Kafe</li> < /ul> |
<dl> – description list
<dt>Buka </dt> – defines a term/name <dd> Perberja : Uj, Miel, … </dd> <dd> Perberja : Uj, Kafe, Sheqer, … </dd>
|
Lista përdorët për paraqitjen e të dhënave në formë të renditur, ajo përdoret në analogji të njëjtë me mënyrën e përdorimit në Word.
Lista në HTML gjithashtu përdoret dhe kur kemi elemente që janë të njëjta në stil si në meny, në raste të shumë gjuhësisë, etj.
Ushtrimi në vijim paraqet tre llojet e listave në HTML – lista.html
Shënim përdor fajllat e ofruar në fillim për të krijuar zgjidhjen si në vijim.
<!DOCTYPE html>
<html>
<head>
<!-- Perdor tagjet per tekstin brenda kllapave-->
<title>Lista</title>
</head>
<body>
<h1>Lista e pa renditur</h1>
<!-- Ne vijim perdor tagjet per paraqitjen e listes se pa renditur-->
<ul>
<li>Buka</li>
<li>Qumështi</li>
<li>Kafe</li>
</ul>
<h1>Lista e renditur</h1>
<!-- Ne vijim perdor tagjet per paraqitjen e listes se renditur-->
<ol>
<li>Buka</li>
<li>Qumështi</li>
<li>Kafe</li>
</ol>
<h1>Lista definuar</h1>
<!-- Ne vijim perdor tagjet per paraqitjen e listes se definuar-->
<dl>
<dt>Buka</dt>
<dd>Perberja e bukes: Uj, Miel, ...</dd>
<dt>Kafe</dt>
<dd>Perberja e kafes: Uj, Kafe, Sheqer, ...</dd>
</dl>
</body>
</html>
2 Comments
Pershendetje,
Si fillim ju falenderoj per mesimet free ne faqen tuaj.
Un jam fillestar dhe me pelqen te mesoj fushen e web development. Kam filluar te shikoj video te ndryshme ne yotube por me ndihmon shume leksioni ne gjuhen shqipe.
P.S
Ne kete leksion shikoj qe ka nje gabim shpejtesie ,tek ushtrimi i listave te renditura dhe te pa renditura,tek pershkrimi lista e renditur duhet te jete lista e parenditur si dhe tek lista e parenditur duhet te jete lista e renditur :
Lista e renditur
Buka
Qumështi
Kafe
Lista e pa renditur
Buka
Qumështi
Kafe
Ka qene gabim teknik, e rregulluam, faleminderit.