Nderto Website [HTML + CSS]

[guN-]

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; </style

____________________________________________________________________________________________________________________________________________________________________

Dje 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; }