Mësimi 13 – CSS përdorimi

7 min

Pas gjithë atyre stileve të ndryshme që i mësuam në ligjëratën e kaluar, tani është rradha ti vendosim në përdorim ato. Do fillojmë me pjesën e Galerisë duke i vendosur disa fotografi në atë faqe. Në fillim duhet që të kërkoni fotografi dhe ti ruani ato si “foto1.jpg“, “foto2.jpg“, “foto3.jpg” dhe “foto4.jpg“.

Ndryshimi i parë duhet të bëhet te fajlli “gallery.html“, te pjesa e menusë apo navigacionit, gjegjësisht kodi duhet të duket kështu:

            
                
<li><a href="gallery.html" class="active">Gallery</a></li>

Siç mund ta shihni më lartë kemi bërë një ndryshim duke e shtuar atributin class=”active”. Me këtë ne do krijojmë një stil të ri ku do të ndryshojmë dizajnin e faqes e cila do jetë aktive për momentin. Në rastin tonë jemi te faqja e galerisë, prandaj duhet që te ajo ta shënojmë se është aktive. Ndryshimi tjetër duhet të bëhet te pjesa ku e shënuam se do ti vendosim fotografitë tona, pas asaj duhet të shkruajmë kodin për fotografitë:

            
                
<p>
Këtu do vendosim fotografitë tona që do i shfaqim për të tjerët.
</p>
 
<div class="img"> 
<img src="foto1.jpg" alt="Foto1"> 
<div class="desc">Sqarimi i fotos</div> 
</div> 
<div class="img"> 
<img src="foto2.jpg" alt="Foto2"> 
<div class="desc">Sqarimi i fotos</div> 
</div> 
<div class="img"> 
<img src="foto3.jpg" alt="Foto3"> 
<div class="desc">Sqarimi i fotos</div> 
</div> 
<div class="img"> 
<img src="foto4.jpg" alt="Foto4"> 
<div class="desc">Sqarimi i fotos</div> 
</div>

Të bëjmë njëherë një sqarim të vogël të kodit më lartë. Pas <p> kemi shënuar <div class=img”>, kjo klasë do të ketë një stil të veçantë dhe do e shohim më poshtë te kodi i CSS. Gjithashtu, kemi shënuar vendin dhe emrin e fotove. Tipari “alt” përdoret për ato raste kur fotografija ka problem që të shihet, atëherë në vend të fotografisë do të qëndrojë teksti “Foto1” ose diçka tjetër që dëshirojmë të shkruajmë ne. Siç mund ta shihni çdo fotografi ka <div> elementin e vet, që të grupohet veçmas prej fotografive të tjera.

Ruajeni këtë fajll dhe hapeni “about.html” dhe bëni ndryshimin njëherë në pjesën e menusë:

            
                
<li>< a class="active" href="about.html">About us</a></li>

Pas kësaj do duhet të shtoni kodin në vijim menjëherë pas pjesës ku shkruan “Këtu do të shkruani rreth jush ndonjë informatë që dëshironi të lexohet nga të tjerët“. Pas elementit </p> kemi kodin:

            
                
<p>
Këtu do të shkruani rreth jush ndonjë informatë që dëshironi të lexohet nga të tjerët.
</p>

<table>
<caption>This is our contact information</caption>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Short Bio</th>
<th>Image</th>
</tr>
<tr>
<td>Arlind</td>
<td>Musliu</td>
<td>Bachelor of Business Informatics at the SEE University in Tetova, 2009-2012.</td>
<td><img src="fotojaime.jpg" width="150" height="150"></td> </tr>
</table>

Tani kemi një tabelë e cila ka një legjendë e shënuar nëpërmjet elementit caption. Pastaj e kemi filluar një rresht të ri me tr dhe nëpërmjet të th e kemi shënuar emrin e çdo kolone. Pastaj fillon një rresht i ri tr dhe këtu kemi informatat e rreshtit të parë me td. Duhet të kemi kujdes që numri i th elementeve të jetë i njëjtë me numrin e td elementeve. Nëse dëshirojmë të kemi më tepër rreshta atëherë vazhdojmë të përdorim tr për rresht dhe td për informatat. Më në fund e përmbyllim tabelën me elementin </table>.

Vazhdojmë me një fajll tjetër. Ruajeni fajllin about.html dhe pastaj hapeni fajllin contact.html. Njëherë mos të harrojmë të vendosim kodin te menuja:

            
                
<li><a href="contact.html" class="active">Contact</a></li>

Pastaj do të shënoni kodin e mëposhtëm pas pjesës “Këtu shënoni informatat e juaja për kontakt që vizituesit e faqes të mund të ju kontaktojnë juve.“. Kodi është si vijon:

            
                
<p>
Këtu shënoni informatat e juaja për kontakt që vizituesit e faqes të mund të ju kontaktojnë juve.
</p>
<div id="myform"> 
<form> 
<label for="fname">Emri</label> 
<input type="text" id="fname" name="fname"> 
<label for="school">Në cilën shkollë mësoni</label> 
<select id="school" name="school"> 
<option value="gjimnaz">Gjimnaz</option> 
<option value="ekonomike">Ekonomike</option> 
<option value="mjeksi">Mjeksi</option> 
<option value="industriale">Industriale</option> 
</select> 
<input id="mybutton" type="submit" value="Submit"> 
</form> 
</div>

Këtu kemi vendosur një formë e cila do shërbejë për të ju mundësuar përdoruesve të na kontaktojnë neve si pronarë të faqes. Njëherë kemi një div me ID e emërtuar myform të cilës i kemi vendosur një stil të veçantë në fajllin e CSS. Pastaj e hapim formën nëpërmjet form dhe nëpërmjet label i tregojmë përdoruesit se cilën informatë duhet ta shënojë. Në fillim kërkojmë që të shënojë emrin e tij në input elementin. Pastaj e pyesim se në cilën shkollë mëson dhe i japim disa opsione nëpërmjet elementit select , ndërsa opsionet i shënojmë me option. Në fund kemi një input që vendos një buton i cili nëse shtypet atëherë mesazhi dërgohet. Ky buton ka ID me mybutton dhe në CSS kemi një stil të shënuar më poshtë.

Ruajeni fajllin e “contact.html” dhe hapeni fajllin “styling.css”. Më poshtë e keni komplet kodin e CSS-së me të gjitha stilet që i kemi përdorur gjatë këtij programi mësimorë. Pasi të kopjoni kodin dhe të përfundojmë me faqet e tjera atëherë do të keni mundësinë të eksperimentoni duke bërë ndryshimet e dëshiruara.

            
                
* {
    font-family: "Times New Roman", Times, serif;
}
#header {
    text-align: right;
}
#mylogo {
    width: 100px;
    height: 100px;
    float: left;
    padding-left: 25px;
    padding-top: 25px;
}
#nav {
    background-color: #247BA0;
    height: 50px;
    margin: 0;
}
#mybg {
    background-image: url("bg.jpg");
}
#mybg2 {
    background-image: url("bg2.jpg");
}
#mybg3 {
    background-image: url("bg3.jpg");
}
#mybg4 {
    background-image: url("bg4.jpg");
}
.bg {
    background-size: cover;
    height: 490px;
}
ul {
    float: right;
    background-color: #247BA0;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    float: left;
}
li a {
    display: block;
    color: #5ADBFF;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover:not(.active) {
    background-color: #5ADBFF;
    height: 22px;
    color: #247BA0;
}
li a.active {
    color: white;
    background-color: #094074;
    height: 22px;
}
#content {
    margin-bottom: 300px;
    text-align: center;
    padding: 20px;
}
#footer {
    background-color: #5ADBFF;
    padding: 0.5em;
    text-align: center;
}

table {
 border-collapse: collapse;
 width: 100%;
}
caption {
 caption-side: bottom;
}
th, td {
 text-align: center;
 padding: 8px;
}
tr:nth-child(even){
background-color: #5ADBFF
}
tr:nth-child(odd){
background-color: #247BA0
}
th {
 background-color: #094074;
 color: white;
}

div.img {
 margin: 5px;
 border: 1px solid #ccc;
 float: left;
 width: 180px;
}
div.img:hover {
 border: 1px solid #777;
}
div.img img {
 width: 100%;
 height: auto;
}
div.desc {
 padding: 15px;
 text-align: center;
}

input, select {
 width: 100%;
 padding: 12px 20px;
 margin: 8px 0;
 display: inline-block;
 border: 1px solid #ccc;
 border-radius: 4px;
 box-sizing: border-box;
 background-color: #247BA0;
 color: white;
}
input:focus {
 background-color: white;
 color: black;
}
#myform {
 border-radius: 5px;
 background-color: #5ADBFF;
 padding: 20px;
}
#mybutton{
 background-color: #094074;
 font-weight: bold;
 font-size: 1.5em;
}

Në kodin që e kemi tani, ka disa ndryshime nga ajo që e kishim më herët. Tani do i sqarojmë disa nga këto ndryshime.

            
                
table {
 border-collapse: collapse;
 width: 100%;
}
caption {
 caption-side: bottom;
}
th, td {
 text-align: center;
 padding: 8px;
}
tr:nth-child(even){
background-color: #5ADBFF
}
tr:nth-child(odd){
background-color: #247BA0
}
th {
 background-color: #094074;
 color: white;
}

Në fillim do sqarojmë këtë pjesë që e përdorim në faqen e about.html. Kemi bërë që kur të përdoret table elementi, atëherë kufitë e tabelës të mos jenë të dukshme, dhe gjërësia e tabelës të jetë e plotë. Tabela ka edhe legjendën ku sqarohet se çfarë kemi shënuar në tabelë, e kjo bëhet me caption, në këtë rast e kemi vendosur të qëndrojë në pjesën e poshtme. Pastaj th dhe td e kemi bërë që stili të pozicionohet në qendër dhe padding: 8px. Pastaj, kemi bërë diçka që ka të bëjë me logjikën matematikore. Sa herë që numri i reshtit të tabelës të jetë çift, ngjyra e prapavijës të jetë ndryshe, e kur të përdoret një numër tek atëherë prapavija do jetë ndryshe. Pjesa e th gjithashtu do ketë një ngjyrë tjetër për prapavijën dhe ngjyra e fontit do jetë e bardhë.

            
                
div.img {
 margin: 5px;
 border: 1px solid #ccc;
 float: left;
 width: 180px;
}
div.img:hover {
 border: 1px solid #777;
}
div.img img {
 width: 100%;
 height: auto;
}
div.desc {
 padding: 15px;
 text-align: center;
}

Tani e kemi stilin që ka të bëjë me galerinë që e ndryshuam më lartë. Njëherë themi që elementi div që ka brenda tij class-ën img , duhet të ketë një stil të veçantë. Ky stil përfshin që margin të jetë 5px nga të gjitha anët, që fotografitë të mos ngjiten njëra me tjetrën. Kufirit i kemi shënuar një vijë prej 1px dhe me një ngjyrë të caktuar. Pastaj e kemi bërë që fotografitë të shtyhen majtas njëra nga tjetra, me një gjërësi prej 180px. Gjithashtu pas asaj kemi bërë që kur përdoruesi të afrojë shenjë e miut mbi fotografi, atëherë të ndryshojë stili duke u ndryshuar ngjyra e kufirit.

Ndërsa për div.img img themi që elementi div me class img, që ka brenda tij një element tjetër img, të ketë një stil tjetër. Gjërësia e tij të jetë sa gjërësia e div, si dhe lartësia të jetë auto që dmth të përshtatet me lartësinë e div. Ndërsa div.desc thotë që elementi div që ka brenda tij class me emrin desc të ketë padding prej 15px dhe të pozicionohet teksti në qendër.

            
                
input, select {
 width: 100%;
 padding: 12px 20px;
 margin: 8px 0;
 display: inline-block;
 border: 1px solid #ccc;
 border-radius: 4px;
 box-sizing: border-box;
 background-color: #247BA0;
 color: white;
}
input:focus {
 background-color: white;
 color: black;
}
#myform {
 border-radius: 5px;
 background-color: #5ADBFF;
 padding: 20px;
}
#mybutton{
 background-color: #094074;
 font-weight: bold;
 font-size: 1.5em;
}

Në fund do të sqarojmë ndryshimet e fundit që i kemi vendosur te CSS. Këto elemente do ti përdorim në faqen e fundit contact.html. Në fillim themi që elementi input dhe select i elementit form të ketë stilin e veçantë siç e shihni më lartë. Stilet që i kemi përdorur më herët nuk do i sqarojmë përsëri. Por, stili border-radius bën që kufiri të jetë i thyer për 4px. Elementi border-box është për të siguruar se të gjitha input do jenë me madhësi të njëjtë.

Pjesa e input:focus është që kur përdoruesi të jetë në një input duke shkruar mesazhin e tij atëherë ngjyra e prapavijës të bëhet e bardhë ndërsa ngjyra e fontit e zezë.

Kemi vendosur një ID me emrin myform ku e kemi vendosur një stil të caktuar, si dhe ID me emrin mybutton ku kemi një stil të ri duke e ndryshuar trashësinë e fontit në bold.

Diskutimet