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
Tabelat dhe Format
Tabelat
Ngjason me atë që përdoret në të gjitha vendet që jemi mësuar të shohim si Word, Excle, etj. Tabela përdorët për të mundësuar paraqitjen e shënimeve në formë të gridit.
Tagjet kryesore të cilat na mundësojnë paraqitjen e informatave në formë tabelare janë:
Fillon me <table> mbaron</table>. Për krijimin e rreshtit përdoret <tr>(table row) dhe mbaron </tr>, për hapjen e kolonës<td>(table data) dhe mbylljen</td>. Kur dëshirojmë shënimet një kolon të jenë më të theksuara përdorim <th>(table heading) e cila përdoret për kolonë.
Në raste kur dëshirojmë të ndajmë shënimet ashtu si ndahen në editor të tjerë si: pjesa e lartë në të cilën vendosën informatat që përshkruajnë shënimet që do shënohen për kolonën përdorim tagun <thead>, në pjesën ku vendosën shënime përdoret tagu <tbody> dhe në fund ku mund të vendosim p.sh. totalin, menaxhimin e faqeve(pagination) ose shënime të ngjashme përdorim <tfoot>.
Në vijim po ofrojmë dhe disa atribute që mund të përdorën në kuadër të tabelës:
Kur dëshirojmë të krijojmë në kuadër të një shënimi më shumë hapësirë rresht ose në kolonë përdorim rowspan për rresht dhe colspan për kolonë.
Me atributin width e përdorim kur dëshirojmë të caktojmë gjatësinë e tabelës, border – kufizimin e tabelës, cellpadding – hapësirën brenda kolonave, cellspacing – hapësirën jashtë kolonave, bgcolor – ngjyrën e prapavijës për kolonat.
Ushtrimi në vijim për tabelat – tabelat.html
Shënim përdor fajllat e ofruar në fillim për të krijuar zgjidhjen si në vijim.
<!DOCTYPE html>
<html>
<head>
<title>Prezantimi i Tabeles</title>
</head>
<body>
<!--Tag per tabel e border cellpadding cellspacing bgcolor-->
<table border="1" bgcolor="#eaeaea" cellpadding="5px" cellspacing="3px">
<!--Tag per rreshte dhe per kolona th-->
<tr>
<th>Emri</th>
<th>Mbiemri</th>
<th>Adresa </th>
<th>Mosha </th>
</tr>
<!--Tag per rreshte dhe per kolona-->
<tr>
<td rowspan="2">Filan</td>
<td>Fisteku</td>
<td>Prishtine</td>
<td>33</td>
</tr>
<!--Tag per rreshte dhe per kolona-->
<tr>
<td>Filan</td>
<td>Fisteku</td>
<td>Peje</td>
<td colspan="2">22</td>
</tr>
</table>
</body>
</html>
Format
Format përdorën për mundësuar plotësimin e informatave dhe kalimin e tyre nga ueb browseri për në hapësirën ku ruhen shënimet.
Informatat që mund të pranohen në kuadër të formës janë të ndryshme si text, checkbox, radio-buttons, submit. Gjithashtu mund të përmbaj listë, textarea, fieldset, select, legend, label, etj.
Për hapjen e formës përdoret tagu dhe disa atribute te cilat po i japim ne vijim:
<form action=”” method=”” id=””></form>
form-tagu që definon formen, action – atributi që cakton fjallin i cili thirret pasi të ekzekutohet forma, method – metoda e cila mundëson kalimin e shënimeve ne pjesën e serverit, id – atributi i cili zakonisht përdoret për të lexuar vlerat me JavaScript ose përdoret për të i dhënë stil me CSS.
Ushtrimi në vijim për format – format.html
Shënim përdor fajllat e ofruar në fillim për të krijuar zgjidhjen si në vijim.
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
</head>
<body>
<!--Tag per forma me action, method style="width: 500px" -->
<form action="" method="" style="width: 500px">
<!-- Tag per pershkrimin e formes legenda-->
<legend>Forma per regjistrimin e studentit</legend>
<!-- Tag per grumbullimin e tagjeve -->
<fieldset>
<!-- Tag per pershkrimin e formes legenda-->
<legend>Detajet e studentit</legend>
<!-- Tag per Emri me label dhe input text -->
<label>Emri:</label><br />
<input type="text" name="emri" id="emri"/> <br/>
<!-- Tag per Mbiemri me label dhe input text -->
<label>Mbiemri:</label><br />
<input type="text" name="mbiemri" id="mbiemri"/> <br/>
<!-- Tag per Gjinia me label dhe 2 inputa radio -->
<label>Gjinia: </label><br />
<input type="radio" name="gjinia" value="mashkull">Mashkull<br />
<input type="radio" name="gjinia" value="femer">Femer<br />
<!-- Tag per Email me label dhe input email -->
<label> Email: </label><br />
<input type="email" name="email" id="email" required><br />
</fieldset>
<!-- Tag per grumbullimin e tagjeve -->
<fieldset>
<!-- Tag per pershkrimin e formes legenda-->
Detajet e trajnimit
<!-- Tag per Trajnimin me label dhe select dhe options -->
<legend>Detajet e te trajnimit</legend>
<label> Trajnimi: </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 />
<!-- Tag per Orarin me label dhe 2 inputa checkbox paradite dhe pas dite -->
<<label>Orari: </label><br />
<input type="checkbox" name="orari" value="paradite">Paradite<br />
<input type="checkbox" name="orari" value="pasdite">Pasdite
<br />
<!-- Tag per daten e aplikimit - label dhe date-->
label>Data e aplikimit:</label><br />
<input type="date" name="dataaplikimi"><br />
<!-- Tag per komente - label dhe textarea-->
<label> Komente: </label><br />
<textarea name="komente"></textarea><br />
<!-- Tag per submit me atributin vakue="Apliko"-->
<input type="submit" value="Apliko">
</fieldset>
</form>
</body>
</html>
Përshkrimi i kodit – Në kuadër të formës kemi informata të ndryshme që shënohet dhe varësisht nga lloji i informatave përdoren tagjet e caktuara.
| Tagu | Përshkrimi |
| <fieldset> | Mundëson grupimin e disa informatave si në ushtrim grupin e informatave personale ose të trajnimit. |
| <legend> | Përshkrimin e informatave për grupim ose edhe për formën. |
| <label> | Përshkrimin e vetëm një informate si në rastin tonë Emri. |
| <input type=”text” name=”emri” id=”emri” maxlength=”30″> | Nga ushtrimi kemi input tagu që mundëson vendosjen e informatave. Me anë të atributit type caktohet çfarë lloji të informatës, në rastin tonë tekst që mundëson të shënohet tekst deri ne disa karakter të caktuar si në rastin e emrin. Atributi name – na mundëson marrjen e shënimeve që plotësohet në tagun input në server me anën e gjuhës skriptuese , maxlength – gjatësinë maksimale që lejohet të plotësohet. |
| <input type =… | Përpos tekst mund të ketë:
email na mundëson me shënua email valide , |
| <input type =… | type=file – mundëson vendosjen e dokumenteve, url – mundëson vendosjen e url, hidden – shënim që nuk e she përdoruesi, search – fushë që shërben për kërkim, submit – buton i cili na mundëson ekzekutimin e formës |
| <textarea name=”komente”></textarea> | Mundëson shënimin e tekstit më të gjatë |
| <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> |
Mundëson ofrimin e shënimeve në listë dhe zgjedhjen e një shënimi |
| <input type=”text” required=”required”> | Atributi required – i cili përdoret për validimin e shënimeve. |