+- eSportsKosova - Gaming Community (https://esportskosova.com)
+-- Forum: KOMUNITETI (https://esportskosova.com/forum-107.html)
+--- Forum: IT Zone (https://esportskosova.com/forum-24.html)
+--- Thread: Nderto Website [HTML + CSS] (/thread-48055.html)
Nderto Website [HTML + CSS] - guN- - 05-31-2024
Sot do tju tregoj se si te ndertojme nje Website me kodet e HTML dhe CSS
Me pare ju kam treguar se si te ndertojme vetem me HTML.Per ta shikuar tutorialinKliko Ketu
Fillojme
1.Se pari ndertojme HTML
____________________________________________________________________________________________________________________________________________________________________
Code:
<div class="right">
<div class="myPanel">
<div class="heading"><center style="font-size: 18px; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif;">
<strong>Lajmi 1</strong>
</center></div>
<div class="body">
<p>Ky template eshte punuar nga <strong>Sabri Hakuli</strong>.Te drejat.Është rreptësisht e ndaluar të kopjohet, rishpërndahet, ri-publikohet ose modifikohet çdo material që ndodhet në pronsi te Sabri Hakulit.Per kontakt ju mund te therrisni ne numrin Vala:044-201-874. Po ashtu ju mund te kontaktoni edhe Online permes Facebook (<a href="file:///C|/Users/Naim Hakuli/Desktop/www.facebook.com/sabrihakulidfc">www.facebook.com/sabrihakulidfc</a>) dhe permes e-mail (<em>sabrihakulii@gmail.com</em><br>
Ky template eshte punuar per webfaqet te cilat kane temen baze GAMING)</p>
</div>
</div>
</div>2.Fillojme te ndertojme CSS
____________________________________________________________________________________________________________________________________________________________________
Hapim <style></style> (kodi per CSS).
Shohim qe dvi kane class quhen MyPanel dhe MyBody.Per ti edituar keto duhet te shenojme .MyPanel {kodi} dhe .MyBody {kodi}.Dhe poashtu editojme vetem Headerin e MyPanel pra me kodin .MyPanel .heading {}
Code:
<style>
.MyPanel {
}
.MyBody {
}
</style>3. I veme ne funksion komandat qe deshirojme
____________________________________________________________________________________________________________________________________________________________________
Tani i veme ne funksion kodet e CSS:
border-radius: eshte per te bere me te rrumbullaket DIV
box-shadow: Eshte per Hijen
margin-top: Per gjersin kah Lart
margin-right: Per gjersin kah ana e Djatht
margin-left: Per gjersin kah ana e Majt
margin-bottom: Dhe per gjersin kah Posht
Code:
<style>
.myPanel {
border: 1px solid #0089FF;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 0px 4px #ccc;
margin-top: 5%;
margin-right: 60%;
margin-left: 1%;
margin-bottom: 1%;
}
</style>4.Fillojme te dizajnojme Headerin
____________________________________________________________________________________________________________________________________________________________________
background: Per ngjyren e backgroud
border: per te zgjatur headerin bashke me ngjyren
border-radius: eshte per te bere me te rrumbullaket Header
color: Ngjyra
padding: Per gjersine dhe zgjatjen e headerit
align-content: Cakto pozicionin e textit
Code:
<style>
.myPanel .heading {
background: #0089FF;
border: 1px solid #0089FF;
border-radius: 5px 5px 0 0;
color: #FFFFFF;
padding: 20px 10px;
align-content:center;
}
</style>5.Dizajnojme Body-n
____________________________________________________________________________________________________________________________________________________________________
padding: gjersia dhe gjatesia e body-t
Code:
<style>
padding: 10px 10px;
</styleDje ju ndertuat nje Faqe me kombinim HTML+CSS
Ketu keni te gjithin CSS kodin
Code:
.myPanel {
border: 1px solid #0089FF;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 0px 4px #ccc;
margin-top: 5%;
margin-right: 60%;
margin-left: 1%;
margin-bottom: 1%;
}
.myPanel .heading {
background: #0089FF;
border: 1px solid #0089FF;
border-radius: 5px 5px 0 0;
color: #FFFFFF;
padding: 20px 10px;
align-content:center;
}
.myPanel .body {
padding: 10px 10px;
}