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
Hyrje në CSS
Cascading Style Sheets – CSS është gjuhë e mënyrës së paraqitjes së HTML elementeve, e krijuar për ti dhënë stil dhe pamje përmbajtjes.
Dallimi me CSS(Demonstrim)
http://www.w3schools.com/css/demo_default.htm
CSS Sintaksa dhe Komentet
Në vijim po paraqesim figurën që përshkruan ndarjen e sintaksës që bëhet në CSS.
H1 është tagu – Selector,
color -> një veti e H1 – Property
blue -> qfar ngjyrë për H1 – Value
Komentet – Në CSS fillojnë me /* dhe mbarojnë me */, përdorën për të përshkruan CSS kodin, kjo na ndihmon që të kemi më të kjartë kodin pas një kohe. /*Ky është një koment */ p { text-align:center; /* Ky është një koment tjeter*/ color:black; font-family:arial; }
Ushtrimi për sintaksën e CSS – sintaksa.html
<!doctype html>
<html>
<head>
<title>CSS Sintaksa</title>
<style>
h1{
font-size:22px;
}
p {
color: green;
font-size:14px;
}
</style>
</head>
<body>
<h1>CSS Titulli</h1>
<p>CSS ushtrimi per sintaks</p>
</body>
</html>
Llojet e thirrjes për CSS
Varësisht nga nevojat e përdorimit të CSS atë mund ta shkruajmë dhe implementojm ne HTML në tre mënyra:
- Si css i jashtëm
- Css i brendshëm dhe
- Css në tag
CSS në tag – në raste kur një style na duhet të përdoret vetëm njëherë brenda web site-it duhet të përdorim CSS në tag. Mënyra e përdorimit <p style=”color:green”></p>
CSS i brendëshëm– në raste kur një style na duhet vetëm brenda një faqe në kuadër të web site-it duhet të përdorim CSS të brendshëm. Mënyra e përdorimit.
<style> p{ color:green;}</stype>
CSS i jashtëm– në raste kur një style duhet të aplikohet te disa faqe në kuadër të web site-it duhet të përdorim CSS të jashtëm.
CSS i jashtëm është dokumenti i cili ka ekstensionin “.css” dhe shënojmë p{ color:green} dhe në HTML thirret përmes komandës <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>.
Ushtrimi i për llojet e përdorimit në CSS – cssllojet1.html
<!doctype html>
<html>
<head>
<title>HTML CSS 1</title>
<!-- thirrja e css te jashtem -->
<link rel="stylesheet" href="style.css" />
<!-- css i bredendeshem -->
<style>
p{font-size:18px;}
</style>
</head>
<body>
<h1> Probit Academy </h1>
<p> Probit është kompani e themeluar në vitin 2016 në Prishtinë, me fokus në ofrimin e trajnimeve profesionale në TI. </p>
<h1> WEB </h1>
<p> Web I - HTML, CSS, JavaScript</p>
<p> Web II - PHP & MySQL</p>
<h2 style="color:red"> WEB III</h2><!-- css në tag -->
<h2 class="ndryshe"> WEB IV</h2>
</body>
</html>
cssllojet2.html
<!doctype html>
<html>
<head>
<title>HTML CSS 1</title>
<!-- thirrja e css te jashtem -->
<link rel="stylesheet" href="style.css" />
<!-- css i bredendeshem -->
<style>
p{font-size:18px;}
</style>
</head>
<body>
<h1> Probit Acaddemy </h1>
<p> Probit është kompani e themeluar në vitin 2016 në Prishtinë, me fokus në ofrimin e trajnimeve profesionale në TI. </p>
<h1> WEB </h1>
<p> Web I - HTML, CSS, JavaScript</p>
<p> Web II - PHP & MySQL</p>
<h2 style="color:red"> WEB III</h2><!-- css në tag -->
<h2 class="ndryshe"> WEB IV</h2>
</body>
</html>
dhe në fund css i jashtem style.css
html{
font-family:Tahoma;
}
p{
font-size:15px;
}
.ndryshe{
color:yellow;
}
Në klasë me studentët le të bëhen disa demonstrime për të shikuar me studentët dallimin e llojeve të CSS më mirë.
Kujdes në rastin e thirrjes së 3 llojeve të CSS për një html element hierarkia e ekzekutimit: thirret style i jashtëm, pastaj i brendshëm pastaj në tag.
Selektoret
Për të mundësuar përdorimin e stileve për HTML Elementet CSS ofron mundësin e përdorimit të selektorëve.
Selektori Universal – aplikohet te të gjitha elementet në një faqe, shënohet *{ }
Selektori i Llojit – aplikohet te elementet sipas emërtimit, shënohet h1,h2,h3{} |
ID Selector – përdoret për të përshkruar stilin për një element unik. id përdoret si atribut i HTML elementit dhe paraqitet me “#”P.sh. #param1 { text-align:center; color:red; } id=”param1”
Class Selector – përdoret për të përshkruar stilin për një grup të elementeve. class mundë të përdoret për shumë HTML elemente në një dokument, paraqitet me “.”
.center {text-align:center;} class=”center” p.center {text-align:center;}
Selektori fëmijë – aplikohet te një element që është fëmijë i një elementi tjetër, shënohet li>a{ }. Stili aplikohet vetëm kur tagu <a> është fëmijë i tagut <li> drejtpërdrejt.
Selektori pasardhës – aplikohet te një element që është pasardhës i një elementi tjetër, shënohet ul a { }. Stili aplikohet kur tagu <a> është fëmijë i tagut p drejtpërdrejt ose është në hierarki më posht tagut <p>.
Renditja e ekzekutimit dhe hierarkia
Nëse për selektorin e njëjtë është bërë dy ose më shume herë stil i njëjtë aplikohet stili i cili është i i vendosur i fundit.
Në raste kur kemi stil më specifik për tagun p.sh. kemi *{font-size:16px;} dhe p{font-size:14px} aplikohet ai i cili është më specifik në rastin ton p{font-size:14px}.
Kemi raste kur dëshirojmë kur dëshirojmë të i japim rëndësi më të madhe një stili të caktuar atë atëherë përdorim !important pas vlerës së veçorisë. p{font-size:14px!important}
Nëse përdorim veçorinë font-family ose color në tagun <body> ai do aplikohet në të gjitha tagjet që vendosen brenda body përpos atyre tagjeve që kanë të caktuar ndryshe në stil, kjo ndodh për arsye të trashëgimisë.
Trashëgimia nuk vlen në të gjitha veçorit, p.sh. background-color, border etj.
Ushtrimi për selektorët në CSS – selektoret.html
<!doctype html>
<html>
<head>
<title>Selektoret</title>
<style type="text/css">
*{
font-family: 'Trebuchet MS', Arial, sans-serif;
color: darkslategrey;
font-size: 16px;
}
h1,h2{
color: black;
}
.large{
font-size:22px;
}
#green {
color:green;
}
.underline {
text-decoration:underline;
}
.bold {
font-weight:bold;
}
li>a{
font-size: 14px!important;
color: green;
}
ul a{
color: red;
font-size: 14px;
}
</style>
</head>
<body>
<p class="large">TICK Education Center.</p>
<p id="green" class="large">Tekst per pershkrimin e TICK.</p>
<p>Fjala e trete <span class="underline large bold">ne paragraf
</span> eshte me nenvije.</p>
<ul>
<li><a href="#">Buka</a></li>
<li><a href="#">Qumeshti</a></li>
</ul>
</body>
</html>