Javën e kaluar e mësuam lidhjen ndërmjet Git dhe GitHub si dhe u lidhëm personalisht nga laptopi ynë me git sistemin në GitHub si dhe me repon tonë personale që e krijuam për këtë projekt. Tani do fillojmë të mësojmë rreth HTML & CSS, për të filluar dizajnimin e uebfaqes sonë.
Në fund të mësimit të javës së kaluar ju sugjeruam që të shihni video materiale për bazat e HTML (shihni këtë video) si dhe CSS (shihni këtë video). Videot e sugjeruara japin më tepër detaje rreth HTML dhe CSS, por ne do fokusohemi vetëm në disa prej tyre, me qëllim që ta kuptoni konceptin bazë se si funksionojnë HTML dhe CSS. Përderisa shihni videot, sugjerohet që t'i ndjekni ato duke programuar shembujt e tyre edhe ju sëbashku me videon.
HTML duhet ta mendoni si një sistem që ju mundëson ta organizoni komplet strukturën e uebfaqes tuaj, apo plani i arkitektit gjatë planifikimit të shtëpisë. Ndërsa CSS ka të bëjë me pjesën e dizajnimit të uebfaqes, apo në rastin e shtëpisë është ngjyrosja dhe zbukurimi i saj. Gjatë përdorimit të tyre do e kuptoni më mirë rolin e secilës.
Sa për rikujtim, në desktopin tuaj klikoni anën e djathtë të mausit, zgjidhni Git Bash. Pastaj me "cd emri_i_repos" do të hyni në follderin e projektit/repos tuaj. Në fillim do të marrim ndryshimet e fundit nga repoja e pastaj do vazhdojmë punën tonë. Duke e ditur se tani jemi duke punuar vetëm, nuk ka ndryshime tjera në server. Por, është mirë që të mësoheni ta përdorni këtë komandë me qëllim që ta keni më lehtë për të bashkpunuar më tutje. VS Code do e hapim me "code .".
cd emri_i_repos
git pull
code .
Ushtrimi i javës
Kësaj rradhe do mësoni se si të krijoni një uebfaqe të thjeshtë me HTML & CSS si dhe ta shihni si duket ajo në Browser (psh: Google Chrome, Safari, Edge, Internet Explorer, Firefox, Opera, etj).
Bazat e HTML
Tash në VS Code do e krijojmë një fajll tjetër duke klikuar në menu tek "File->New File" me emrin "index.html". Këtu do të shënoni kodin e mëposhtëm:
<html>
<head>
<title>Kursi TechUP</title>
</head>
<body>
<h1>Tungjatjeta, unë jam pjesë e kursit TechUP</h1>
<p>Uebfaqja jonë personale.</p>
</body>
</html>
Për të kuptuar se çfar bën kodi i mësipërm mund të mësoni në këtë kurs.
Pasi të bëni ndryshimet e dëshiruara, koha është për të ruajtur këto ndryshime në repon tonë në GitHub. Tani vazhdoni në Terminal dhe shkruani komandat e duhura.
git add .
git commit -m "added html code"
git push
Pasiqë e mbaruam këtë pjesë të projektit mund të shkojmë në Desktop dhe të hapim follderin e projektit tonë. Aty do e gjejmë edhe fajllin e krijuar "index.html". Klikoni 2 herë fajllin dhe do ju hapet uebfaqja e krijuar. Ndryshimet që do i bëni do mund ti kontrolloni këtu se si duken në realitet ato.
Tani provoni të shkruani këtë më poshtë që të mësojmë diçka më shumë për HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Kursi TechUP</title>
</head>
<body>
<h1>Tungjatjeta, unë jam pjesë e kursit TechUP</h1>
<p>Uebfaqja jonë personale.</p>
<ul>
<li>
<a href="gallery.html">Galeria</a>
</li>
<li>
<a href="about.html">Rreth nesh</a>
</li>
<li>
<a href="contact.html">Kontakt</a>
</li>
</ul>
<h1>Galeria ime</h1>
<p>
Këtu do vendosim fotografitë tona që do i shfaqim për të tjerët.
</p>
<img src="foto1.jpg" alt="Foto1">
<table>
<caption>Informatat e personit</caption>
<tr>
<th>Emri</th>
<th>Mbiemri</th>
<th>Mosha</th>
<th>Gjinia</th>
</tr>
<tr>
<td>Hasan</td>
<td>Hiseni</td>
<td>17</td>
<td>M</td>
</tr>
<tr>
<td>Fisnike</td>
<td>Hasani</td>
<td>18</td>
<td>F</td>
</tr>
</table>
</body>
</html>
Për të mësuar kodet që i kemi vendosur këtu mund të shihni kursin Hyrje në Ueb Dizajn.
Mos harroni përsëri komandat:
git add .
git commit -m "added more complex html code"
git push
Bazat e CSS
Sa i përket CSS do i mësojmë vetëm këto në vazhdim sa për të kuptuar logjikën e saj. Më shumë rreth tyre mund të mësoni në mësimin që ua sugjeruam Hyrje në Ueb Dizajn.
Do fillojmë duke krijuar një fajll tjetër për CSS kodin tonë. File -> New File dhe pastaj shkruani emrin "styling.css". Pasi të krijohet fajlli vendosni kodin e mëposhtëm.
* {
font-family: "Times New Roman", Times, serif;
}
#header {
text-align: center;
background-color: #247BA0;
}
#foto1 {
width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
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 {
background-color: #5ADBFF;
height: 22px;
color: #247BA0;
}
table {
border-collapse: collapse;
width: 100%;
}
caption {
caption-side: bottom;
}
th, td {
text-align: center;
padding: 8px;
}
th {
background-color: #094074;
color: white;
}
.footer {
background-color: #5ADBFF;
padding: 0.5em;
text-align: right;
}
Pasi të përfundoni duhet komandat:
git add .
git commit -m "added css code"
git push
HTML & CSS
Për të funksionuar kodi i CSS që e shënuam më herët duhet që të bëjmë do ndryshime në fajllin tonë "index.html". Në fillim duhet ta lidhim fajllin e CSS e pastaj do duhet që të ndryshojmë pjesët tjera të kodit.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Kursi TechUP</title>
<link rel="stylesheet" type="text/css" href="styling.css">
</head>
<body>
<div id="header">
<h1>Tungjatjeta, unë jam pjesë e kursit TechUP</h1>
<p>Uebfaqja jonë personale.</p>
</div>
<ul>
<li>
<a href="gallery.html">Galeria</a>
</li>
<li>
<a href="about.html">Rreth nesh</a>
</li>
<li>
<a href="contact.html">Kontakt</a>
</li>
</ul>
<h1>Galeria ime</h1>
<p>
Këtu do vendosim fotografitë tona që do i shfaqim për të tjerët.
</p>
<img id="foto1" src="foto1.jpg" alt="Foto1">
<table>
<caption>Informatat e personit</caption>
<tr>
<th>Emri</th>
<th>Mbiemri</th>
<th>Mosha</th>
<th>Gjinia</th>
</tr>
<tr>
<td>Hasan</td>
<td>Hiseni</td>
<td>17</td>
<td>M</td>
</tr>
<tr>
<td>Fisnike</td>
<td>Hasani</td>
<td>18</td>
<td>F</td>
</tr>
</table>
<div class="footer">
<p>Contact info: 070 071 072</p>
</div>
</body>
</html>
Tani le të ruajmë ndryshimet e fundit në GitHub repon tonë.
git add .
git commit -m "linked css to html"
git push
Përgatitje për javën e 3-të
Tani shikoni përsëri videot e njëjta për HTML (shihni këtë video) si dhe CSS (shihni këtë video). Përderisa shihni videot, sugjerohet që t'i ndjekni ato duke programuar shembujt e tyre edhe ju sëbashku me videon. Tashmë e dini se si mund të eksperimentoni me HTML dhe CSS, provoni të krijoni diçka më interesante dhe javën e ardhshme do na prezantoni ato si dhe do i diskutojmë bashkë problemet që i keni hasur gjatë procesit.
