Feb 17 2019

HTML -Web design & development
HTML eshte gjuha skriptuese qe ju mundeson te kriojni uebfaqen tuaj, ne kete mesim do te permbledhim nje mori njohurish qe i perkasin HTML-s, eshte e lehte per ta mesuar, shpersoj te ju pelqej.

HTML shkruhet me tagje dhe struktura bazike e nje html dokumenti duket keshtu :

<!DOCTYPE html>
<html>
  <head>
    <title>Titulli i faqes</title>
  </head>
  <body>

     <h1>Tekst Titulli 1</h1>
     <p>Tekst paragraf.</p>

  </body>
</html>

Tagu kryesor eshte <html> dhe gjithcka shkruhet brenda ketij kodi eshte nje HTML dokuemnt, tagjet mbyllese permbajn "/" ne fillim te emrit te tagut, p.sh. ne rastin e <html> tagu mbylles eshte </html>.
Struktura bazike ndahet ne head dhe body, pergjithesisht te gjithe stilet edhe informacionet qe nuk duam ti shfaqim per vizitoret i shkruajm ne tagun <head>...</head>, kurse ato qe i shfaqim per vizitorin i shkruajm ne <body>...</body>
E keni verejtur edhe ju besoj, qe kur e hapni nje uebfaqe tek tabi siper shkruan emri i uebfaqes ose i faqes ne te cilen ndodhemi ne uebfaqe, kjo definohet ne <title>...</title>.
HTML permban perafersisht 130 tagje dhe kjo e bene ate te leht per tu mbajtur mend, megjithate ne do te permendim ato me te perdorurat.



<!DOCTYPE html> - Eshte tagu i deklarimit te dokumentit, ne rastin tone html, mund te hasim htm, xhtml...

HTML5 Tag


Per te na lehtesuar me shume leximin e tagjeve ne HTML5 u krijuan edhe disa tagje te reja te cilat ju shtuan standardit te tagjeve edhe ate tagje si :

<main></main> - Qe ne ta kemi me te lehte per te definuar pjesen kryesore te faqes.
<header></header> - Qe perdoret per te definuar pjesen e siperme te faqes
<footer></footer> - Qe perdoret per te definuar pjesen e poshtme te faqes
<nav></nav> - Qe perdoret per te definuar pjesen e linqeve te faqes
<section></section> - Qe perdoret per te definuar nje sektor ne nje pjese te caktuar te faqes
<aside></aside> - Qe perdoret per te definuar nje pjese nga anet faqes
<article></article> - Qe perdoret per te definuar nje artikull ne faqe
<figure></figure> - Qe perdoret per te definuar hapsire per imazh ne faqe
<details></details> - Qe perdoret per te shfaqur nje hapsire qe hapet vetem kur te klikohet
<summary></summary> - Qe perdoret per te shfaqur nje permbledhje ne faqe
<time></time> - Qe perdoret per te shfaqur daten ose ore ne faqe

Si paraqesim tekst ne uebfaqe


Duke lexuar me siper kuptojm se standarded e HTML-s jane bere me te lehta per tu kuptuar nga te gjithe, e njejta vlen edhe per paraqitjen e tekstit ne faqe edhe ate duke perdorur tagje si :

<p></p> - Qe perdoret per te paraqitur nje paragraf
<h1></h1> - Perdoret per te paraqitur titull (heading) me madhesin me te madhe
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6> - Eshte tagu qe ka madhesin me te vogel te tekstit te paraqitur si titull (heading)
<small></small> - Perdoret qe te paraqesim nje tekst me madhesi me te vogel brenda nje p apo nje heading tagu.
<strong></strong> - Perdoret per ta bere tekstin bold (me te plote)
<em></em> - Perdoret per ta bere tekstin italic (te pjerret)
<span></span> - Perdoret per te paraqitur tekst te cfardoshem te pa stilizuar.

<div></div> - Perdoren per te paraqitur nje blok apo set elementesh ne faqe, duke perdor class ose id stilizohen per ti dhene kuptim blokut, eshte nje nga tagjet me te perdorura.


Si te paraqesim imazhe, linqe dhe video


Linqet, imazhet edhe videot pervec tagjeve duhet patjeter te shkruajm edhe atributet e tyre perkateve, artibutet jane veti qe tregojn nje funksion te caktuar te tagut, p.sh.:

<a></a> - Perdoret per te paraqitur nje link ne faqe, mirpo href atributi brenda tagut tregon se me cfar faqe te jashtme apo me cfar sektori te brendshem brenda faqes do te lidhet ai link, dhe si i kompletuar tagu <a> do te duket :
<a href=""></a>

<img src="" /> - Imazhi ndryshe linku, kerkon te dij se ku eshte burimi i imazhit qe do te paraqes edhe per dallim mbyllet ne vete, nuk ka nevoj per tag mbylles.

<video width="320" height="240" controls">
  <source src="" type="video/mp4">
</video>
Video per dallim nga linku edhe imazhi ka nevoj qe fillimisht te tregohen dimenzionet e hapsires qe do te shfrytezoj video-ja, gjithashtu tregohet nese do ket mundesi per kontroll, pastaj mund te definohen me shum se nje burim per videon duke perdorur tipe te ndryshme te videos per shfletues te ndryshem, qe vizitori gjithmon te kete nje pergjigje per hapsiren e rezervuar.


Si te definojm tabela


Tabelta perbehen nga rreshtat dhe kolonat dhe ti tilla definohen edhe ne html.

<table></table> - Definojm qe ne brendesi te ketyre tagjeve ka tabele
<tr></tr> - Perdoret per te paraqitur nje rresht
<td></td> - Perdoret per te paraqitur kolone

<thead></thead> - Perdoret siper tr per te treguar qe kjo eshte pjesa e siperme e tabeles
<tbody></tbody> - Perdoret siper tr per te treguar se kjo eshte pjesa e permbajtjes se tabeles

Nje tabele ne html do te dukej keshtu :

<table>
  <thead>
     <tr>
          <td> Kolona 1</td>
          <td> Kolona 2</td>
     </tr>
  </thead>
  <tbody>
     <tr>
        <td> Permbajtje rreshti 1 Kolona 1</td>
        <td> Permbajtje rreshti 1 Kolona 2</td>
     </tr>
     <tr>
        <td> Permbajtje rreshti 2 Kolona 1</td>
        <td> Permbajtje rreshti 2 Kolona 2</td>
     </tr>
  </tbody>
</table>


Si te krijojm forma


Format perdoren ne rastet kur duam te marrim nje informacion te caktuar nga vizitori i faqes, p.sh. kemi rastet kur per ta perdorur funksionalitetin e faqes tone vizitori duhet te regjistrohet edhe pastaj te identifikohet, keto te dhena ne i marrim duke paraqitur nje forme ne faqe, format definohen me tagun <form></form> dhe si atribute kryesore forma kerkon direksionin se ku do dergohen te dhenat edhe metoden se si do dergohen ato te dhena, ne atributin action definojm se ku do ta dergojm formen edhe ne atributin method definojm formatin e dergimit te te dhenave duke shkruar GET ose POST.

GET - tregojme se te gjitha te dhenat qe do ti dergojm do paraqiten ne link te ndara me & 
POST - tregojme se te gjitha te dhenat do ti dergojme duke mos i shfaqur ne link

Disa prej tagjeve qe perdoren per te paraqitur elemente ne forme :

<input /> - Tagu input mbyllet ne fund te vetes duke mos pasur nevoj per nje tag mbylles, ne forme te pa percaktuar tagu input eshte nje fushe per te shkruar tekst, por kjo mund te jete e ndryshueshme duker perdorur atributin type, atributi type mund te jete i shumbllojshem edhe ate :

text - definohet fushe per tekst
number - definohet fushe vetem per numra
date - definoet fushe vetem per format te dates
email - definohet fushe vetem per email adresa
time - definohet fushe vetem per format te ores
radio - definohet radio butona me atributin name qe eshte i njejte por vlerat e radiobutonave eshte e ndryshme dhe kur kemi radiobutona me emer te njejte, kemi mundesi te zgjedhim vetem nje prej tyre.
checkbox - ndryshe nga radiobuton checkbox na jep mundesi te zgjedhim nje ose me shum opsione.


<select></select> - Perdoret kur deshirojm te paraqesin nje list me dhe i japim mundesi vizitorit te zgjedh, mudesit e zgjedhjeve paraqiten me tagun <option value=""></option> ne atributin value shkruhet vlera qe opsioni i mundeshem ka.

<textarea></textarea> - Kur deshirojm te paraqesim nje fushe teksti me me shume se 1 rresht perdorim textarea .
<label></label> - Perdoret si tregues per fushen.

Elemente e formes mund te permbajn atribute si: 

placeholder - qe perdoret si tregues brenda fushes, 
required - qe perdoret per te treguar se ky element duhet patjeter te posedoj informacion
disabled - elementi nuk eshte i disponueshem edhe pse e kemi ne forem
readonly - elementi mundet vetem te lexoj edhe nuk mund te shkruhet ne te nga vizitori
checked - perdoret per radiobuton ose checkbox per te treguar se ky element eshte i parazgjedhur
name - perdoret per te treguar se me cfar emri identifikues kalojn te dhenat deri tek serveri apo linku ku dergohen te dhenat.

<br /> tagu perdoret per ti treguar shfletuesit se prej ketu kemi nje rresht te ri
<hr /> perdoret per te paraqitur nje vije horizontale dhe pas saj nje rresht te ri.

Me poshte keni eshte definuar nje forme qe perdor disa prej elementeve me te perdorura ne forme.


<form action="" method="">

  <!-- Mund te shkruajm komente -->

  <label for="fullname">Full Name</label>
  <input type="text" value="" id="fullname" placeholder="Full Name" name="fullname" required />
  <br />

  <label>Age</label>
  <input type="number" value="" placeholder="Age" name="age" readonly />
  <br />

  <label>E-Mail</label>
  <input type="email" value="" placeholder="E-Mail" name="email" required />
  <br />
 
  <label>Brthday</label>
  <input type="date" value="" placeholder="Birthday" name="date" required />
  <br />

  <label>Gender</label>
  <label for="female"> 
     Female
     <input type="radio" value="" id="female" checked name="gender" />
  </label>

  <label for="male"> Male
     <input type="radio" value="" id="male" name="gender" />
  </label>
  <br />

  <label>Education</label>
  <label for="unv"> 
     University
     <input type="checkbox" value="" id="unv" checked name="unv" />
  </label>

  <label for="hs"> 
     High School
     <input type="checkbox" value="" id="hs" name="hs" />
  </label>
  <br />

  <label>Faculty</label>
  <select name="">
     <option value="cst">CST</option>
     <option value="cs">CS</option>
  </select>
  <br />

  <label>Special requirements</label>
  <textarea name="specialrequirements" rows="3"></textarea>
  <hr />

  <button type="button">Cancel</button>
  <button type="submit">Save</button>
</form>






  • Enter your Name & E-Mail

  • Discuss with our team

  • Receive a good support

//