Korrikula e Trajnimit
Totali i mësimeve: 17 mësime
Koha:
15 orë
-
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
Prapavija dhe veçoritë për tekste
Prapavije e elementit
Me anën e veçorisë background definohet prapavijën e një HTML elementi. Kemi disa veçori te cilat përdorën për caktimin e prapavijës:
- background-color- vendosje te ngjyres ne prapavijë,
- background-image- vendosje te imazhit ne prapavijë,
- background-repeat – nësee dëshirojmë që imazhi të përsëritet,
- background- position – caktimin e pozitës së imazhit.
Ngjyrat në css mund të paraqiten duke përdor:
- Emrat e ngjyrave p.sh. color:red,
- Me numra heksadecimal p.sh. color:#ff0000;
- Me RGB(Red Green Blue) vlera p.sh. color: rgb(255,0,0);
Me anën e veçorisë opacity caktojmë sa do të jetë një ngjyrë ose një element i dukshëm p.sh. opacity:0.5 kur dëshirojmë ta bëjmë të jetë 50% e dukshme.
Gjithashtu për të bërë më të dukshëm ose më pak të dukshëm në mund të përdorim si vlerë rgba – vlera a në fund tregon përqindjen e dukshmërisë. P.sh. rgba(250,0,0,0.5)
Ushtrimi për prapavijat në CSS – prapavija.html
<!doctype html>
<html>
<head>
<title>Prapavija</title>
<meta charset="utf-8" />
<style type="text/css">
body{
background-image:url('images/probit_academy.png');
background-repeat:no-repeat;
background-position:right top;
}
.large {
font-size:22px;
}
#green {
color:#B40486;
}
.bluebox {
background-color:blue;
opacity: 0.5;
width:200px;
height:200px;
color:#fff;
}
.redbox {
background-color:rgba(255,0,0,0.5);
width:300px;
height:100px;
}
</style>
</head>
<body>
<div class="bluebox">
<p class="large">TICK Education Center.</p>
</div>
<div class="redbox">
<p id="green" class="large">Tekst per pershkrimin e TICK.</p>
</div>
<p>Fjala e trete <span class="underline large bold">ne paragraf</span> eshte me nenvije.</p>
</body>
</html>
Veçori për tekste
Pjesa e përmbajtjes në një ueb faqe është pjesa më e rëndësishme. Për të paraqitur përmbajtjen sa më përshtatshëm për përdoruesit e një ueb aplikacioni përdoret CSS. Në CSS kemi disa veçori, në vijim po paraqesim disa veçori të cilat mundësojnë ndryshme në tekst.
| Tagu | Përshkrimi |
| Font Families | Font Families – kemi dy lloje të definimit të fontit, generic family- grup i fonteve të ngjashme, font family- lloj specifik i fontit. P.sh. font-family:”Times New Roman”, Times, serif; |
| Font Size | Është veçori që cakton madhësinë e tekstit, font-size:40px ose 2.5em 1em=16px ose 120% |
| Font Face | Me anën e kësaj veçori mundësojmë përdorimin e fonteve për klientë në rastin kur fontin nuk e ka të instaluar nga pajisja që hap webin.
Vendoset fonti i caktuar në një folder në kuadër të web faqes dhe lexohet nga aty. font-face{ font-family: “FontName”; src:url(‘foldername/fontname’);} |
| Font Variant | Është veçori për të krijuar efekte. font-variant: small-caps | normal |
| Font Weight | Është veçori për të rrit ose zvogëluar paraqitjen e theksimit të ngjyrës në font. font-weight:bold|normal|700|200 |
| Font Style | Font Style – është veçori që cakton stilin e tekstit, ka tre vlera : font-style: normal, italic, oblique. |
| Text Color | Text Color – përdoret për të caktuar ngjyrën e tekstit. Specifikohet si HEX vlerë, RGB vlerë, emër të ngjyrës,etj. P.sh. body {color:red;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);} |
| Text Alignment | Text Alignment – përdoret për të caktuar radhitjen e tekstit. Kemi 4 lloje: text-align:center(nga qendra)|left(nga e majta)|right(nga djathta)| justify(shtrirje në rresht). P.sh. p{text-align:center} |
| Text Decoration | Text Decoration – përdoret për të vendosur ose larguar zbukurime në tekstit. Si: text-decoration:overline(vijë lartë)|line-through(vijë në mesë)|underline(vijë poshtë) |
| Text Transormer | Text Transormer – përdoret për të vendosur llojin e shkronjave(të mëdha të vogla )për tekstit. text-transform:uppercase(të mëdha)| lowercase(të vogla) |
| Text Indentation | Veçoria text-indent përdorët për të caktuar ku duhet të filloj rreshti i parë, sa duhet të shtyhet në të majtë. |
| Letter Spacing | Letter Spacing – përdorët për të vendosur hapësirë në mesë të shkronjave. letter-spacing:5px; |
| Word Spacing | Word Spacing – përdorët për të vendosur hapësirë në mesë të fjalëve. word-spacing:5px; |
| Line Height | Veçoria line-height përdorët për të caktuar hapësirën mes rreshtit.
line-heigh:1 |
| Text Direction | Veçoria direction përdorët për të ndryshuar drejtimin e në tekst elementi. direction: rtl; |
| Text shadow | Veçoria text-shadow shton hije në tekst. text-shadow: 2px 3px red; |
| Responsive Font Size | Veçoria font-size:10vw madhësia varësisht nga pajisja nëse viewport është 50 cm 1 vw = 0.5cm |
Ushtrimi për veçori për tekste në CSS – teksteveqori.html
<html>
<head>
<title>Text & Font</title>
<style>
body
{
font-size:14px;
font-family:arial,sans-serif;
}
h1{text-decoration:overline; letter-spacing:5px; text-transform:uppercase;}
h2{font-weight:300; font-size:2vw; text-shadow: 2px 3px red;}
p
{
text-decoration:underline;
color:green;
font-style:oblique;
line-height:20px;
text-align:center
}
.sh1{font-size:15px; text-align:left;text-indent:20px; letter-spacing:1mm}
</style>
</head>
<body>
<h1>Titulli i nje faqeje</h1>
<h2>Nentitulli per nje faqe</h2>
<p>Teksti per nje faqe, i cili mund te jete i ndryshem</p>
<p class="sh1"> TICK eshte kompani e themeluar ne vitin 2012 ne Prishtine, me fokus ne ofrimin e trajnimeve profesionale ne Teknologjine Informative.
</p>
</body>
</html>