I gjithë leksioni është marrë nga:
http://kendveshtrim.free.fr/forums/index.php?showtopic=455Duke pare se ne shumë faqe shqiptare nga persona te ndryshëm, kryesisht studente, shtrohet pyetja ose kërkohet ndihmë sesi ndërtohet një webfaqe nëpërmjet html dhe css, po mundohem te paraqes këtu, disa mesime ose me saktë një përkthim te gjetur ne net mbi përdorimin bazik te HTML dhe CSS ne ndërtimin e një faqeje prezantuese ne internet.
Çfare janë CSS ?
Cascading Style Sheet ose shkurtimisht CSS, siç është shpjeguar edhe tek ky forum nga lojtar tek një teme e ngjajshme, ndihmojne ne dizajnin e një faqeje, jo vetëm te një flete te vetme, por një siti me shumë flete ku të gjitha këto kanë një stil te njëjtë (madhësi germash, ngjyrë te sfondit ose tekstit, permasash, etj). Të gjitha fletet e faqes web furnizohen ne te njëjtin burim, kjo e thjeshtezon shumë ndërtimin e siteve te fuqishem prej dhjetra e qindra fletesh sidhe informacionesh te panumert. Ndryshe do të duhej qe për çdo flete te shkruhej ose bashkengjitej veçmas edhe stili përkatës ne mënyrë qe teksti të mos paraqitej pa rregull. Imagjinoni punën e madhe qe dilte nga kjo por edhe gabimet e panumert qe mund te rrjedhonin. Por le le hyjmë direkt ne teme:
Kod bazik HTML
Dokument
<html></html> : dokument html
<body></body> : trupi i dokumentit
Titujt
<h1></h1> : titull i nivelit të parë
<h2></h2> : titull i nivelit te dytë
<h3></h3> : titull i nivelit te tretë (... e me rradhë deri tek ai i gjashtë, 6)
Elemente te tekstit
<p></p> : paragraf
: liste me pika
: liste me numra
<a href=""> </a> : lidhje
Table
<table></table> : table
<th></th> : legjende linjë ose kollone
<tr></tr> : linjë e table
<td></td> : kollone e table
Pozicion
<div></div> : vendosja e një bllokut.
Ja p.sh. si mund të shkruhet thjesht një flete ne html, te cilën mund ta regjistroni si index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="sq">
<head>
<title>Fleta ime pare me HTML</title>
</head>
<body>
<p>Mirëdita te gjithëve !</p>
</body>
</html>
Flete stili me sfond te bardhe.
Teksti i perdorur është i llojit Verdana, i zi shoqëruar edhe me disa efekte te tjera.
Përmasat e germave janë te paraqitura me % por ato mund te jenë me em ose px qe duke qenë gjatesi relative për një paraqitje homogjene te faqes duhen privilegjuar ne raport me pt ose pc, unitete absolute permasash.
html,body {
background-color : white;
}
p,ul,li,td {
font-size : 100%;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : black;
background-color : white;
}
h1 {
font-size : 200%;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : navy;
text-align: center;
}
h2 {
font-size : 150%;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : red;
padding-left:15px;
}
a:link {color: green; text-decoration:underline;}
a:visited {color: gray; text-decoration:underline;}
a:hover {color:red; text-decoration:none;}
Me anë te programit tuaj te trajtimit te tekstit regjistrojeni duke e emeruar gjithashtu, këtë dokument, ne style.css e vendosni ndermjet
[c]<head></head>[/c] (qe ndodhen p.sh. tek index.html)
[c]<link href="style.css" rel="stylesheet" type="text/css">[/c]
Neqofte se desheroni qe mos keni probleme me NS 4.x, një shfletues web i shkuar kohe, vendosni edhe këtë, po midis kllapave <head></head>
[c]<style type="text/css" media="screen">@import "style.css";</style>[/c]
Selectoret "class" dhe "id"Atributi class
Le të marrim një shembull, tek fletet e një faqeje web shohim shpesh ne te djathte të tyre, poshte shkrimit i cili mund te jetë mjaft i gjatë, lidhje te llojit "ngjituni tek kreu", "lart", etj. (emërtimet janë të ndryshme, e varen kryesisht prej langazhit te faqes ose atij qe e ka bërë atë) e te cilat sherbejne, duke klikuar tek to, për tu ngjitur sipër ku ndodhet pergjithesisht menuja kryesore e faqes.
Këto realizohen nëpërmjet selectorit class përpara te cilit gjithnjë ne fleten e stilit, vendoset një pikë.
Source CSS
.haut {
text-align:right;
}
Source (x)html
<p class="haut">
<a href="#haut">Ngjituni tek kreu</a>
</p>
Kjo mënyrë mund te përsëritet ne një flete, aq here sa duam ose ndjejme te nevojshme.
Atributi id
Selectori id ka pothuaj te njëjtin funksion por me ndryshimin e madh qe nuk mund te përsëritet veçse një here ne flete. Për këtë aresye ai përdoret për rregullimin e elementeve te faqes (mise en page) sesa te shkronjave vete (mise en formë des caractères).
Shembull : Le të marrin një faqe te ndertuar nga dy kollona. Njëra kollone do të na sherbeje për menune (menu), 100 pixel te gjerë e te vendosur majtas, ndërsa tjetra ku ndodhet teksti (contenu), 110 pixel nga cepi majte, për të mos qenë ngjitur ose permbi menyne. Këtë radhe nuk është një pikë qe vendoset përpara id, por një shenjë #.
Source CSS
#menu {
background-color:silver;
width:100px;
float:left;
}
#contenu {
margin-left:110px;
}
Source (x)html
<h1 id="haut">Shembuj perdorues te selectoreve "class" dhe "id"</h1>
<div id="menu">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
<div id="contenu">
<p>
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
sed diam nonummy nibh euismod
tincidunt ut laoreet dolore
magna aliquam erat volutpat.
Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor
in hendrerit in vulputate velit
esse molestie consequat,
vel illum dolore eu feugiat
nulla facilisis at vero eros
et accumsan et iusto odio
dignissim qui blandit praesent
luptatum zzril delenit augue duis
dolore te feugait nulla facilisi.
</p>
<p class="haut">
<a href="#haut">Ngjitu tek kreu</a>
</p>
</div>
Testoni shembullinshënim : tek faqja e dhënë, css është bashkengjitur me kodin html ne te njëjtin vend, por mund te jetë ne një dokument te veçante siç tek rasti siperm e te sherbeje për shumë flete te ngjashme ne stil por me përmbajtje (contenu) të ndryshme.
