Korrikula e Trajnimit
HTML
CSS
HTML & CSS Projekti
Hyrje në HTML
Njëra nga pjesët që më së shumti njihet dhe mësohet sot nga ata që merren me Teknologjinë Informative në pjesën e programimit është HTML.
Shumica atyre që dëshirojnë të merren me kodim fillojnë në mësimin nga pjesa e HTML-it.
Nga zhvilluesit e web aplikacioneve njihet njëra nga pjesët më të lehta e cila mësohet më lehtë dhe shënohet më lehtë.
Pse HTML?
Në ditët e sotme gjithnjë e më shumë po bëhet e domosdoshme përdorimi i web aplikacioneve. Informatat e ndryshme që dikur janë dhënë me anën e gazetave, fletushkave, zarfave, etj sot gjithnjë e më shumë po ofrohen përmes web aplikacionev.
Gjithashtu punë të ndryshme që sot kryhen si rezervime (biletës, hotelit, etj), blerje (rroba, pajisje, etj), shfletim postës, punë administrative(nxjerrje e dokumenteve, aplikime për punë, etj ), e shumë e shumë punë të tjera sot po kryhen me anë wë web aplikacioneve.
Diçka që duhet të përmendet është dhe kthimi në web i aplikacione i aplikacioneve të njohura që i kishim të instaluar në kompjuterët tanë si Word, aplikacion për dërgim emaili, etj.
Të gjitha këto informatat në kuadër të një web web aplikacioneve vini si tekste, fotografi, video, audio.
HTML mundëson që të gjitha këto informata të bëhet të dukshme në Web Browser(si: Chrome, Firefox, etj) dhe ato të jenë sa më të strukturuara për lexuesit.
Çka është HTML?
HTML qëndron për Hyper Text Markup Language – është një gjuhë markup(grumbuj tagjeve), e cila mundëson paraqitjen e kuptueshme të përmbajtjes si : tekste, fotografi, video, audio në kuadër të një Web faqeve.
Një faqe në HTML dokument përbëhet prej grumbullit të tagjeve, secili tag shërben për paraqitjen e përmbajtjes së caktuar në kuadër të faqes.
Në vijim po japin një web faqe e cila ka disa lloje të informatave, si tekste të formave të ndryshme, foto dhe video.
Për paraqitjen e informatave si heading përdorim taggjet <h1> ose <h2> deri në <h6>, fotot i paraqesim me tagun <img>, tekstet me anën e tagut <p>, listat me anën e tagut <ul>, format me anë të <form>. Gjithsesi në vijim të materialit do ofrojmë detaje për këto tagje dhe të tjera tagje që na duhen në programimin e web aplikacioneve.
Le të shikojmë kodin që na mundëson paraqitjen e figurës 1.
<html>
<head>
<title> Informata </title>
</head>
<body>
<h1>Probit Academy (Titulli) </h1>
<p>Probit Academy është kompani e themeluar në vitin 2016 në Prishtinë, me fokus në ofrimin e trajnimeve profesionale në Teknologjinë Informative.
Është vazhdimësi PROBIT , duke zgjeruar programet e trajnimeve dhe aktivitete tjera
për aftësim profesional ne fushën e teknologjisë informative. (Tekste)</p>
<h2>List e pakove ne Probit (Nen Titulli)</h2>
<ul>(Lista)
<li>Web Development</li>
<li>Networking</li>
<li>Java Development</li>
<li>C# Development</li>
</ul>
<h3>Disa nga studentet tane nga grupi i fundit (Nen Titulli)</h3>
<img src="foto.jpg" width="900px" height="600px">(Imazh)
<h3>Aplikoni per trajnimet - Titulli aplikim ne shkoll (Nen Titulli)</h3>
<form action="" method="">
<legend>Forma per regjistrimin e studentit (Forma)</legend><br>
<label>Emri: </label><br>
<input type="text" name="emri"><br>
<label>Mbiemri: </label><br>
<input type="text" name="mbiemri"><br>
<label>Telefoni: </label><br>
<input type="text" name="telefoni"><br>
<label>Emaili: </label><br>
<input type="email" name="email"><br>
<label>Trejnimi: </label><br>
<select name="trajnimi" id="trajnimi">
<option value="">Zgjedh Trajnimin</option>
<option value="1">Java Fundamentals</option>
<option value="2">C# Fundamentals</option>
<option value="3">Web Development I & II</option>
<option value="4">CCNA</option>
</select><br />
<input type="submit" value="Ruaj">
</form>
<h3>Disa nga studentet qe jan punesuar</h3>
<table border="1" cellpadding="5" cellspacing="3">
<tr>
<th>Emri</th>
<th>Mbiemri</th>
<th>Shkollimi</th>
<th>Mosha</th>
</tr>
<tr>
<td>Florent</td>
<td>Feta</td>
<td>Shkolla e Mesme</td>
<td >16</td>
</tr>
<tr>
<td>Clirim</td>
<td>Kastrati</td>
<td>Fakultet</td>
<td>22</td>
</tr>
<tr>
<td>Argjend</td>
<td>Llumnica</td>
<td>Fakultet</td>
<td>24</td>
</tr>
</table>
</body>
</html>
Konceptet themelore në HTML
Nga HTML kodi i paraqitur në pjesën 1.2. kemi përdorur disa tagje kryesore që përdoren më së shpeshti. Le të shohim dhe disa disa nga konceptet themelore të cilat janë si pik nisje për pjesët që do të shtjellohen në vijim.
Nga diagrami shohim disa nga konceptet kryesore në HTML: HTML tagu, HTML elementi, HTML atributi.
HTML Tags (tagjet) – ofrojnë mundësin për paraqitjen e informatave në kuadër të një web faqe.
Tagjet fillojnë me <> dhe përfundojnë me </> Shmbull <html></html>- hapja dhe mbyllja e një dokumenti në html, <p></p> hapja dhe mbyllja e një paragrafi.
HMTL Elementet – Në shumë raste koncepti HTML Elemente dhe HTML Tags përdorët për të njëjtën gjë, po në realitet HTML Element është gjithçka çka ka në mes të tagut(përmbajtja) duke përfshirë dhe tagun, p.sh. <p>Ky është një paragraf </p>
HTML Atributet – HTML Elementet mund të kenë atribute. Ato ofrojnë informata shtesë për HTML elementin. Shembull <a href=”probitacademy.com”> Arobit Academy </a> Atributi href na ndihmon që kur klikohet në përmbajtjen e linkut të kalohet url www.probitacademy.com.
Atributi gjithmonë shënohet brenda tagut dhe duket si: name=”value”.
Fillojnë me ” dhe mbarojnë me “, gjithashtu mund të përdoret dhe vetëm një ‘ për hapje ‘ dhe mbyllje. Atributet mund të shënohen me shkronja të vogla dhe të mëdha por rekomandohet të përdorën të vogla.
Disa nga atributet që mund të përdorën në HTML elemente:
| Atributi | Përshkrimi |
| Class | Ofron një ose më shumë e më klasa për një element (referohet një klasë në një syle dokument) |
| Id | Specifikon në id unike për një element |
| Style | Specifikon një rresht CSS për një element |
| Title | Ofron informata shtesë për elementin (paraqitet si një tool tip) |
| Tabindex | Ofron renditjen e tabave në një element |
HTML Versionet dhe Ambienti punues
Prej fillimit të uebit janë krijuar disa versione të HTML-it, për qellim avancimin e funksionaliteteve për Ueb. Fillimisht në viti 1991 kemi HTML, vazhduar HTML+, HTML2.0, HTML3.2, HTML 4.01, XHTML 1.0 dhe në vitin 2014 HTML 5.
Ambienti punues(Editori) – Për të punuar me HTML na mjafton vetëm një editor i thjeshtë si Notpad. Për të shpejtuar punën dhe sigurinë mund të përdorën Editor të ndryshëm si Notpad ++, Dremweaver, NetBeans, VisualStudio Code,etj. Për mësimin e html do përdorim Notpad ++
Fillimisht krijojmë një folder pastaj krijojmë fajlin i cili duhet të ketë ekstensionin .html.
Struktura e HTML faqes
Një faqe HTML faqe fillon me HTML tagun brenda tij kemi pjesën HEAD e cila ofron faqes mundësin e paraqitjes së titullit, stilizimit të faqes, thirrjes së javascript kodit, meta me anën e tagjeve dhe basë tagun:
<title>, <style>, <meta>, <link>, <script>, and <base> . Në tagun BODY vendoset e gjithë përmbajtja e sajtit.
Kodi në HTML është i organizuar në formë të degëve të lisit përfshirë prindi, fëmija dhe vllau|motra.
<body>- prind i div
<div>-fëmijë i body dhe prind i h1 dhe p
<h1></h1>- fëmijë i div dhe vëlla i p
<p></p>- fëmijë i div dhe vëlla i h1
</div>
</body>
Kuptimi i hierarkisë së HTML është i rëndësishëm sepse fëmija trashëgon sjellje dhe stil nga prindi.
Një faqe HTML faqe pas HEAD kemi tagun BODY ku vendosen të gjitha informatat që cilat do të shfaqen për lexim .
Le të shënojmë ushtrimin e parë me disa tagje bazë të cilat do na mundësojnë kuptimin e pjesëve që mësuam deri në këtë pjesë.
Ushtrimi i parë në HTML – htmlstruktura.html
<html>
<head>
<title> Struktura e html faqes</title>
</head>
<body>
<h1>Titulli faqës</h1>
<p style="color:gray">Një paragraf fëmijë e elementit body</p>
<div>
<p> Një paragraf fëmijë e elementit div </p>
</div>
</body>
</html>
1 Comment
Faliminderit për këtë kurs FALAS .
Jeni super , suksese !