• Përshëndetje Vizitor!

    Nëse ju shfaqet ky mesazh do të thotë se ju nuk jeni regjistruar akoma. Edhe pse nuk jeni regjistruar ju arrini të shihni pjesën me të madhe të seksioneve dhe diskutimeve të forumit, por akoma nuk gëzoni të drejten për të marrë pjesë në to dhe në avantazhet e të qënurit anëtar i këtij komuniteti. Ju lutem : REGJISTROHUNI që të dërgoni postime dhe mesazhe në Forum-Al.

    Regjistrohu !

PSD në HTML dhe CSS – Projekti KOM-TEL

Forum-Al

Aty ku shqiptarët mblidhen
Anëtar
Jan 5, 2010
Postime
561
Pikët
28
Vendndodhja
Forum

Në guidën e parë “Kodimi i një faqeje të plotë me HTML dhe CSS” ju premtova se guida të tilla do të vijojnë dhe ja ku jemi përsëri. Guidë tjetër, projekt tjetër, kod tjetër, por ide dhe qëllim i njëjtë.

Guida e parë morri vlerësime pozitive dhe u shpreh interes, megjithatë morrëm edhe komente nga komuniteti se nuk kanë mundësi teknike (shumica) ose financiare (pakica) për të paguar online, e si rrjedhim s’mund të bëhen anëtarë Premium. Filozofia e Feniksit është “90% japim, 10% marrim” e si e tillë, s’mund t’i lëmë jashtë anëtarët që nuk janë Premium. Do të ishte kundra filozofisë dhe dëshirave tona për të krijuar një faqe që shërben si one-stop-shop (më falni për termin Anglisht) për guida kryesisht rreth webit, por edhe për grafikë e programim. Nga ana tjetër, anëtarët tanë Premium duam t’i trajtojmë si të privilegjuar duke i ofruar guida më të thelluara, prandaj guida e parë është më e madhe dhe më instruktuese se kjo; që do të thotë se në të do të mësoni diçka më shumë. Kjo s’do të thotë se në këtë guidë s’do të mësoni, përkundrazi, ju siguroj që do mësoni shumë nëse keni dëshirën e duhur. Tani ti lejmë muhabetet e të fillojmë me leksionin.

Arsyeja që guida të tilla më pëlqejnë është se kam kontaktuar me shumë dizenjues të mirë që e pëlqejnë webin, por friksohen në pjesën e kodimit sepse ju është krijuar një mit se kodimi/programimi është i vështirë. Ndërsa mund të jetë e vërtetë për programimin në gjuhë si C++ apo Java, e bukura e webit është se mirëpret këdo pa asnjë lloj rezerve. Kushdo mund të mësojë HTML e CSS pa pasur asnjë eksperiencë të mëparshme me kode, sepse fundja HTML dhe CSS janë gjuhë formatimi dhe stilimi, jo gjuhë të vërteta programimi. Nëse dini të bëni dizenjo të bukura faqesh, atëherë seriozisht konsiderojeni të mësoni HTML dhe CSS, në mënyrë që t’i përfundoni faqet tuaja (apo të klientëve) pa pasur nevojë të paguani dikë tjetër. Shpresoj që kjo guidë t’ju ndihmojë në këtë proçes.

Dizenjo që do të punojmë në këtë guidë shfaqet më poshtë. Hidhini një sy që të krijoni idenë e asaj që do të ndërtojmë. Dizenjon e kam punuar fiks para 2 vitesh për një klient në fushën e telekomunikacionit, por nuk u vu asnjëherë në përdorim sepse klienti zgjodhi një dizenjo tjetër timen. Meqë është një dizenjo e thjeshtë grafikisht, e tillë është edhe për tu koduar dhe përshtatet në mënyrë perfekte për guidën. Nuk doja që në këtë guidë të kodoja një dizenjo shumë komplekse që do të kërkonte pa fund kod HTML dhe CSS. Sidoqoftë, më duhet t’ju them se trendet në web lëvizin me shpejtësi të lartë, gjë që mund të bëjë këtë dizenjo të ngjajë e vjetëruar në syrin e disave. Ju kujtoj se qëllimi këtu është të kodojmë kod HTML dhe CSS, jo të dizenjojmë. Mos të harroj t’ju them gjithashtu se logo dhe emri janë të sajuara e jo ato të kompanisë për të cilën është punuar dizenjo fillimisht. Janë thjeshtë të krijuara brenda pak minutash për efekt të guidës.

Dizenjo e firmës fiktive "KOM-TEL"


Parapërgatitje

Hapi i parë që gjithmonë bëj është një vizualizim i ndarjeve kryesore të dizenjos. Nuk është e domosdoshme, por ja u këshilloj sepse do t’ju ndihmojë gjatë proçesit të kodimit. Duke e ndarë dizenjon (vizualisht), do e kuptoni që në fillim se si ta organizoni kodin, ku të përdorni float, pozicionim absolut, etj. Në rastin e kësaj guide shërben gjithashtu si një udhëzues për emërtimin e seksioneve HTML kryesorë të faqes, që mos të humbisni gjatë proçesit. Një vizualizim i ndarjes i prezantuar grafikisht shfaqet më poshtë.

Ndarje vizuale e dizenjos


Hapi tjetër është krijimi i skedarëve dhe direktorive me të cilat do të punojmë. Organizimi i mirë është jetik kur ndërtoni faqe, sepse do punoni me disa skedarë në direktori të ndryshme, dhe s’mund ti lejoni vetes humbje kohe vetëm për të gjetur atë që kërkoni. Krijojmë një skedar “index.html”, dy direktori “imazhet” dhe “css”, dhe brenda direktorisë “css” krijojmë një skedar “stilet.css”. Emërtimet janë totalisht arbitrare dhe mund ti quani si të doni (përveç “index.html” që është skedari indeks i direktorisë), thjeshtë ruani një linjë standarte nëpër faqe që të punoni lehtë.

Nga tani e tutje do fillojmë të shkruajmë kod, prandaj ju këshilloj dy gjëra: 1) të jeni të vëmendshëm dhe 2) të gjeni një editor HTML dhe CSS të mirë. Kjo e fundit është e rëndësishme sepse një editor i mirë ju ofron fasilitete si ngjyrosje kodi, plotësim kodi, shfletues skedarësh, etj. Unë përdor prej vitesh Adobe (atëherë Macromedia) Dreamweaver dhe nuk kam ç’të kërkoj më të mirë, por egzistojnë alternativa gjithashtu të mira dhe më të lira (nëse ju intereson ky fakt). Që nga kalimi në Mac, kam provuar disa editorë interesantë (por që absolutisht s’ma zëvendësojnë Dreamweaver) si Coda, BBEdit, CSSEdit, TextMate, etj. Në Windows nuk kam eksperimentuar kaq shumë, por di që Aptana Studio është një aplikacion i mirë kodimi dhe kam dëgjuar njerëz ta lavdërojnë Notepad++. Zgjidhja është e juaja, por ju lutem, për hir të Tim Berners-Lee (lol) mos përdorni Notepad!

Kodet Bazë

Deri tani kam folur, e ndërsa e folura ju ndihmon t’i kuptoni teorikisht si gjërat funksionojnë, sigurisht s’ju ndihmon nga ana teknike. Kodi e bën shumë mirë këtë! Megjithatë, tani fillon edhe pjesa e komplikuar e guidës e cila kërkon të gjithë vëmendjen tuaj. Pa humbur kohë, le të fillojmë me kodimin e dizenjos në HTML dhe CSS.

Nëse përdorni një editor si Dreamweaver, në momentin që keni krijuar skedarin “index.html”, brenda tij duhet të jetë shtuar kodi bazë për një dokument të vlefshëm XHTML 1.0 Transitional. Kjo ju ndihmon sepse nuk keni nevojë të memorizoni (apo të kopjoni nga diku) DTD-në dhe namespace-in e një dokumenti XHTML, por gjithashtu i krijon automatikisht taget standarte HTML si , dhe . Kodi fillestar që do të nisim projektin tonë shfaqet më poshtë:

PSD ne HTML dhe CSS - Projekti Kom-TelGjithçka është standarte dhe përbën strukturën bazë të një dokumenti HTML, përveç rreshtit . Pikërisht ky rresht lidh dokumentin HTML me dokumentin e jashtëm CSS (që ndodhet në direktorinë “css”). Nga praktika, kjo është metoda më e mirë për të shkruar kod CSS sepse të lejon të përcaktosh rregulla për një ose më shumë dokumente HTML dhe ti mirëmbash të gjitha në një skedar. Imagjinoni të keni një website me 20-30 dokumente HTML dhe në një moment të caktuar pas publikimit, doni të ndërroni ngjyrën e lidhjeve. Nëse do kishit krijuar një set rregullash të veçanta brenda vetë dokumenteve HTML duke përdorur tagun , do detyroheshit të modifikoni stilet e çdo dokumenti më vete. Punë e kotë dhe e mënjanueshme! Duke lidhur një dokument të jashtëm CSS ku shkruani rregullat për të gjithë dokumentet HTML, mjafton të ndryshoni stilet një herë. Shpresoj të jetë e qartë. Pra, logjika është e thjeshtë: krijojmë një dokument CSS në direktorinë “css” dhe e lidhim me dokumentin HTML duke përdorur tagun .

Përveç kodit bazë HTML, do shkruajmë edhe disa kode bazë CSS të cilat shërbejnë si rregulla të përgjithshme. Duke mos ditur nivelin tuaj të njohurive, do mundohem të shpjegoj çdo gjë me aq detaje sa është e mundur dhe në përgjithësi do fokusohem më shumë tëk shpjegimi i kodit CSS se sa ai HTML. Është kodi CSS që i vendos elementët në vendet e tyre dhe që përmban shkallën më të lartë të vështirësisë. Kini parasysh (që mos të bëhemi lëmsh) se në fillim do ju tregoj një pjesë të kodit (qoftë HTML apo CSS) dhe poshtë tij do vijoj me shpjegimet.

body{ margin:0; padding:0; background:white; font:12px Arial, Helvetica, sans-serif; color:#333;}E kam nisur kodin CSS duke shkruar disa rregulla për tagun , në mënyrë që ti heq disa veti që s’me duhen, por edhe ti shtoj disa të cilat do të “trashëgohen” nga elementët nën tij. Rregulla “margin:0″ përcakton se nuk duhet të ketë hapësirë të jashtme, një hapësirë që krijohet automatikisht midis faqes dhe skajeve të shfletuesit. Me “padding:0″ heq edhe hapësirën e brendshme. Në fakt kjo e fundit nuk bën edhe aq sens, por ka disa shfletues (si Opera) që njohin vetëm “padding:0″, ndërsa të tjerët njohin “margin:0″. Duke i shkruar të dyja sigurohemi për të gjithë shfletuesit. Rregulla “background:white” përcakton ngjyrën e sfondit, që në këtë rast është thjeshtë e bardhë. Mund ta kisha shkruar edhe me kod hex (#fff), por në CSS ofrohen disa ngjyra që mund të përcaktohen direkt me emër dhe për mua (ndoshta për ju jo) është më e lehtë ta shkruaj si fjalë. Rregulla “font:12px Arial, Helvetica, sans-serif” përcakton madhësinë e shkronjave dhe familjen e fontit që do të përdor. Të ndalemi pak këtu sepse është pjesë e rëndësishme që jo të gjithë mund ta kuptojnë pa e shpjeguar. Mënyra si e kam shkruar unë është e shkurtuar dhe trajta standarte e shkurtuar është: “font:stili varianti trashësia madhësia/gjatësia-e-linjës familja”. Sigurisht, trajta standarte e shkurtuar përfshin edhe rregulla të cilat s’na interesojnë, prandaj mund të përcaktojmë vetëm ato rregulla që duam dhe ti lëmë të tjerat si janë. Une e kam shkruar në formën: “font:madhësia familja”, ku madhësia është 12px dhe familja është Arial. Pak fjalë për familjen e fontit. Duke qenë se një faqe HTML serviret në vizitorë të ndryshëm të cilët mund mos të kenë një font të caktuar në kompjuterin e tyre, jepet mundësia që të përcaktojmë disa familje fonti. Nëse nuk gjehet Arial në kompjuterin e vizitorit (do ishte e pamundur, por thjeshtë për hir të shembujve), atëherë zëvendësohet me Helvetica. Nëse nuk gjehet as Helvetica, atëherë fonti zëvendësohet më një font çfarëdo i tipit sans-serif. Në këtë mënyrë sigurohet që fonti të jetë të paktën i një stili me fontin origjinal që keni përcaktuar. Së fundmi kam përcaktuar ngjyrën bazë të teksteve me rregullën “color:#333″, ngjyrë e cila do trashëgohet (së bashku me rregullën “font”) në të gjitha tekstet në vijim. Thjeshtë dy fjalë për “color”: ngjyrat hex në CSS shkruhen si një kombinim i gjashtë karaktereve, në trajtën kkjjbb (k-kuqe, j-jeshile, b-blu), por mund të shkruhen gjithashtu si një kombinim i 3 karaktereve nëse i gjithë kodi hex është i njëjtë ose 2 e nga 2 i njëjtë. Pra, mund të shkruhen në formë të shkurtuar vetëm kode si: #aaaaaa -> #aaa dhe #aabbcc -> #abc. Fiksojeni këtë shkurtim sepse është interesant, ju shkurton paksa punë dhe është më i thjeshtë për tu lexuar.

h1, h2, h3, h4, h5, h6, p{ margin:0 0 15px 0; padding:0;}
Elementet h1-h6 janë koka (headers), ndërsa elementi është paragraf dhe kanë të gjithë “margin” dhe “padding” të paracaktuar nga shfletuesi. Unë dua që të gjitha të kenë vetëm hapësirë të poshtme prej 15px, në mënyrë që të ndahen vertikalisht nga njëri tjetri. Rregulla “margin” që kam shkruar është trajta e shkurtuar dhe vjen në këtë format: “margin: hapësira-lart hapësira-djathtas hapësira-poshtë hapësira-majtas”. Ashtu si e kam shkruar unë, të gjitha hapësira bëhen 0 përveç asaj të poshtme. Tek “padding” kam përdorur një formë tjetër të shkurtuar, duke përcaktuar vetëm një vlerë. Kjo vlen vetëm kur të gjitha hapësirat (lart, djathtas, poshtë, majtas) janë të njëjta dhe në vend të “padding:0 0 0 0″, kam shkruar “padding:0″. Fiksoni gjithashtu që vlera 0 nuk ka nevojë për njësi (px, em, etj), ndryshe nga çdo vlerë tjetër. Do i kurseni dokumentit 2 Byte për çdo 0 pa njësi
. Një detaj që s’mund ta lë pa përmendur është selektori presje “,” me të cilin kam ndarë elementët. Në CSS, ky është selektori me të cilin ndajmë elementet kur shkruajmë rregulla për disa elementë. Në këtë rast i jam drejtuar elementëve të veçantë h1, h2, h3, h4, h5, h6 dhe p, dhe i kam ndarë të gjithë presje. Kujdes sepse nëse harroni presjen dhe e bëni hapësirë (për selektorin hapësirë do flas pak më poshtë), do të ndryshohet komplet kuptimi i shprehjes.

ul{ margin:0; padding:0; list-style-type:none;}Tagu <ul> krijon definicionin për një listë të pa renditur. Meqë listat përdoren shpesh për të krijuar menu apo forma të tjera navigimi, i heqim “margin”, “padding” dhe bullets përmes “list-style-type”. Nëse do na nevojitet të krijojmë lista standarte (me bullets dhe hapësira) në përmbajtje, atëherë do krijojmë rregulla specifike për to më pas.

a:focus{ outline:0;}a:link, a:visited{ color:#70a420; text-decoration:none;}a:hover, a:visited:hover{ text-decoration:underline;}a img{ border:0;}Këto janë 4 shprehje që i drejtohen lidhjeve. Kam përdorur disa pseudo-selektorë që zgjedhin gjendje të ndryshme të lidhjeve: focus->lidhja ka marrë fokus (me mouse apo tastjerë), link->lidhje e pa vizituar, visited->lidhje e vizituar, hover->lidhje mbi të cilën është vendosur mouse-i. Përmes këtyre pseudo-klasave mund të përcaktoj rregulla të ndryshme për gjendjen e lidhjeve. Me “a:focus” dhe “outline:0″ zgjedh lidhjet që kanë marrë fokus dhe i heq një kontur (të shëmtuar) të paracaktuar nga shfletuesi. Pa këtë rregull, kur shkon tek një lidhje me tastjere apo kur klikon mbi të, shfaqet një kontur i cili mua personalisht më irriton. Megjithatë s’mund t’ja u këshilloj sepse mund të krijojë probleme aksesueshmërie dhe të nxjerrë jashtë loje vizitorët që përdorin tastjerën, kështu që zgjedhja është në dorën tuaj. Ka mënyra për ta anashkaluar këtë problem, por kjo është jashtë qëllimit të guidës. Me “a:link” dhe “a:visited” kam zgjedhur lidhjet që nuk janë dhe që janë vizituar, në mënyrë që ti vendos një ngjyrë me “color” dhe ti heq vijën poshtë (underline) me “text-decoration:none”. Faqja që une po kodoj është e vogël dhe s’ka nevojë të diferencohen lidhjet e vizituara, por nëse po punoni me një faqe të madhe, atëherë është ide e mirë ti bëni lidhjet e vizituara me një ngjyrë më të hapur që vizitori ta kuptojë çfarë ka parë e çfarë jo. Me “a:hover” dhe “a:visited:hover” kam zgjedhur të gjitha lidhjet (të vizituara ose jo) ku është vendosur mouse-i sipër dhe i kam shtuar një vijë poshtë (underline) me “text-decoration:underline”. Është ide e mirë ti shtoni një efekt vizual lidhjeve kur marrin gjendjen hover për të shtuar shkallën e interaktivitetit. Së fundmi, tek “a img” kam përdorur selektorin hapësire (që ju fola më sipër) i cili zgjedh të gjithë imazhet që ndodhen brenda një lidhjeje . E kam bërë këtë sepse shfletuesi i vendos një kontur të shëmtuar të gjitha imazheve që ndodhen brenda një lidhjeje (pra imazhe të klikueshme) dhe unë e kam hequr me rregullën “border:0″, një rregull që përcakton konturin e një elementi.

div.pastro{ clear:both;}Këtu kam krijuar një klasë që mund të përdoret vetëm nga elementët <div>. Nëse klasa do ishte krijuar në formën “.pastro” në vend të “div.clear”, atëherë do mund të përdorej nga të gjithë elementët. Në rastin tonë, do na shërbeje për të pastruar float (kemi kohë për të folur për të) dhe kjo do bëhet pikërisht me një element <div> që ka klasën “clear”. Se çfarë është float, kur përdoret dhe si përcaktohen klasat në elementët HTML do flasim në vazhdim.

Kemi shkruar kodet bazë HTML për të ndërtuar strukturën fillestare dhe disa kode CSS si rregulla të përgjithshme. Deri tani duhet të keni mësuar si është krijuar një dokument HTML, si përcaktohet një dokument CSS i jashtëm dhe disa rregulla dhe selektorë CSS. Kemi akoma goxha punë sepse akoma s’kemi filluar me kodimin e vetë faqes, por pa frikë; në seksionin në vijim do ju tregoj si të ndërtojmë pjesën e kokës dhe proçesi është fare i lehtë.

Koka

Koka është pjesa e sipërme e dizenjos që përmban logon, disa lidhje dhe flamurët e gjuhës. Megjithatë, para se të kaloj tek koka më duhet t’ju tregoj diçka që harrova t’ja u shpjegoj më sipër. Bëhet fjalë për një element <div> i cili do të jetë “mbajtësi” dhe do të qendërzojë të gjithë elementët e tjerë. Bëhet fjalë për vetëm disa rreshta kod të cilat do i shpjegoj mirë. Kini parasysh që çdo kod HTML që do të shkruajmë tani e tutje do jetë brenda .


Kam krijuar një tag HTML <div> që do të shërbejë si mbajtës për faqen. Qëllimi është që në brendësi të tij të ndodhen të gjithë elementët e tjerë dhe ta kem të thjeshtë ti vendos në qendër të shfletuesit. Vini re gjithashtu përdorimin e atributit “id”, me të cilin do të identifikoj elementin në CSS.

#mbajtesi{ width:780px; margin:10px auto;}Rregulla “width:780px” përcakton gjerësinë fikse të elementët dhe faqja është egzaktësisht 780px e gjerë. Më pas kam përcaktuar margin me vlerën “10px auto”. Kjo formë e shkurtuar përdoret vetëm nëse vlera sipër është e barabartë me atë poshtë dhe vlera majtas është e barabartë me atë djathtas. Në këtë rast kemi vlerën sipër/poshtë 10px dhe vlerën majtas/djathtas “auto”. Ndoshta vlera “auto” ju ka hutuar paksa, por është fare e thjeshtë. Auto është shkurtimi i “automatic”, që do të thotë se vlera e margin duhet të llogaritet automatikisht nga shfletuesi. Në këtë rast, vlera majtas dhe djathtas llogariten automatikisht të njëjta, duke e vendosur faqen në qendër. Vlera gjithashtu llogaritet automatikisht edhe në kohë reale nëse shfletuesi zvogëlohet në gjerësi, duke e lënë sërish faqen në qendër. Tani le të kalojmë në kodimin e kokës.


Gjuha


Ky është i gjithë kodi HTML që na shërben për të krijuar elementët e kokës. Nëse e ndajmë në 2 elementë kryesorë, njëri është imazhi i logos, ndërsa tjetri një <div> që përmban lidhjet dhe flamurët. Lidhjet janë futur brenda një liste të parregullt, ndërsa flamurët janë vendosur thjeshtë si imazhe. Taget “title” (titulli) dhe “alt” shërbejnë së pari për aksesueshmëri, që të kuptohet nga njerëzit me probleme në shikim (të cilët përdorin lexues ekrani) dhe së dyti për t’ja shpjeguar imazhin boteve të motorëve të kërkimit. Në këtë rast nuk ka shumë interes për SEO (ndërsa logo po!), sepse janë thjeshtë flamurë gjuhe, kështu që konsiderojeni si optimizim aksesueshmërie. Vini re gjithashtu që kam përdorur “ ”, i cili është entiteti HTML i karakterit hapësirë. Duke qenë se HTML nuk njeh më shumë se një hapësirë, për ta ndarë pak fjalën “Gjuha” nga imazhet e flamurëve përdora entitetin e hapësirës i cili njihet nga HMTL. Nëse e testoni kodin e mësipërm, elementët do jenë në rresht vertikalisht dhe të shëmtuar. Këtu na vjen në ndihmë CSS, me të cilën do i pozicionojmë.

#koka{ font-size:11px; color:#989898; position:relative;}Me “#koka” i referohemi elementit <div> që mban të gjithë elementët e tjerë të kokës. Duke qenë se tekstet brenda kokës e kanë madhësinë e gërmës 11px dhe ngjyrë një gri të hapur, i kam vënë rregullat “font-size” (madhësia e gërmës) dhe “color” (ngjyra) direkt në “#koka” në mënyrë që të trashëgohet nga elementët e tjerë dhe mos të kem nevojë ti përsëris. Rregulla e fundit “position:relative” shërben për pozicionimin absolut që do të bëjmë pak më tutje. Pozicionimi absolut i lejon elementët të vendosen në çfarëdo pozicioni brenda një elementi tjetër (apo shfletuesit) duke e “thyer” renditjen normale. Duke deklaruar “position:relative” në elementin mbajtës, e bëjmë atë të gatshëm të presë elementë të pozicionuar në mënyrë absolute, përndryshe elementi i pozicionuar në mënyrë absolute do vendosej sipas kordinatave të shfletuesit. Nuk e di sa sens ka shpjegimi, por ju këshilloj të lexoni pak në internet rreth pozicionimit absolut sepse është temë pak delikate dhe po ta kuptoni mirë që në fillim do i lehtësoni vetes punë.

#koka>div{ position:absolute; top:0; right:0; text-align:right;}Në këtë shprehje kam përdorur një selektor CSS “>” i cili zgjedh elementët <div> që janë “fëmijë” direkt të “#koka” e në këtë rast është elementi që përmban lidhjet dhe flamurët e gjuhës. Në një shembull konkret, ky selektor funksionon për këtë div-in e dytë në Duam këtë

, por jo për Duam këtë


. Në rastin e dytë do funksiononte selektori hapësirë “#koka div”. Pra, zgjidhen elementët që janë direkt brenda elementit kryesor dhe jo elementë që janë brenda një elementi tjetër. Kini parasysh që ky selektor nuk suportohet nga IE6, kështu që përdorini kur s’ja u ndjen për të. Për hir të guidës, IE6 e kam nxjerrë jashtë loje
. Vijojmë me pozicionimin absolut që ju fola pak më sipër. Duke qenë se pjesën e lidhjeve dhe flamurëve të gjuhës dua ta zhvendos në ekstremin lart-djathtas, zgjidhja me e thjeshtë është duke përdorur pozicionim absolut. Fillimisht deklarova rregullën “position:absolute” që nis pozicionimin absolut, e më pas vendos kordinatat “top:0″ (lart) dhe “right:0″. Kordinatat funksionojnë si një sistem kordinatash Kartezian i invertuar. Ndodhemi në planin e tretë (x-, y-), por vlerat janë pozitive. Me vlerat “top:0″ dhe “right:0″ e vendosim skajin lart-djathtas të elementit në bosht. Për vlera pozitive, elementi largohet nga akset, ndërsa për vlera negative, elementi i kalon akset, duke u zhvendosur jashtë kornizave të elementit mbajtës. Përsëri nuk e di sa sens ka e gjithë kjo, por si ju thashë, pozicionimi është temë delikate dhe disi komplekse, prandaj duhet të lexoni artikuj të dedikuar. Së fundmi, rregulla “text-align:right” i drejton djathtas të gjithë elementët “fëmijë” të div-it, në mënyrë që të përshtatet me dizenjon.

#koka>div ul{ margin-bottom:10px;}Duke përdorur të njëjtën ide si më parë, kam zgjedhur div-in që përmban lidhjet dhe flamurët e gjuhës, por i jam drejtuar posaçërisht listës së pa renditur që përmban lidhjet. Tagu <ul> është definicioni i listës dhe jo element. Taget janë elementët! Me “margin-bottom:10px” kam krijuar hapësirë midis listës dhe flamurëve të gjuhës.

#koka>div li{ display:inline; margin-left:20px;}Këtu i jam drejtuar elementëve të listës. Duke qenë se listat shfaqen si “bllok”, elementët qëndrojnë sipër njëri tjetrit në hapësirën vertikale. Unë s’dua që të ndodhë, prandaj e kthej që të shfaqet si “inline” (rresht), gjë që i bën elementët e listës të qëndrojnë horizontalisht krahas njëra tjetrës. Me “margin-left:20px” kam krijuar pak hapësirë horizontale midis elementëve.

#koka>div li a{ color:#989898;}Shprehja e fundit e kokës është për ti vendosur ngjyrë lidhjeve. Duke qenë se në pjesën e Kodit Bazë kam përcaktuar që lidhjet të kenë ngjyrë të gjelbër, kjo veti trashëgohet edhe në lidhjet e kokës. Për ti ndërruar, mjafton tu drejtohemi lidhjeve që ndodhen brenda elementëve të listës dhe të shkruajmë rregullën “color”.

Kjo ishte gjithçka për kokën. Ju tregova një kod të shkurtër HTML që krijon elementët dhe disa rreshta kod CSS që i vendos në vendet e duhura. Ju përmenda gjithashtu një pjesë komplekse të CSS si ç’është pozicionimi absolut, që shpresoj ta keni kuptuar që në shpjegimin tim. Megjithatë, mos e lini pas dore dhe lexoni më tepër në internet sepse është pjesë e rëndësishme dhe komplekse. Le të vijojmë me menunë.

Menuja

Menuja është pjesa më e thjeshtë e kësaj guide, sepse e kam mbajtur qëllimisht të tillë. Kam përdorur vetëm një listë dhe imazhet e veçanta të elementëve të menusë të cilat i preva dhe i eksportova si PNG në Photoshop. Duke qenë se guida i drejtohet fillestarëve të cilët po mësojnë HTML dhe CSS, nuk doja ta komplikoja më tepër, por nëse ndiqni guidën time këtu në Feniksi rreth Sprites, atëherë do mund ti jepni edhe një efekt të këndshëm menusë. Nëse doni gjithashtu të shihni një ndërtim kompleks menuje dhe implementin të Sprites në një projekt real, guida Premium “Kodimi i një faqeje të plotë me HTML dhe CSS” do ju ndihmojë vërtetë. Le të fokusohemi tek menuja që kemi. Imazhet e ndara paraqiten më poshtë.

Prerjet e menuse


Figura e paraqitur më sipër tregon 5 imazhet e veçanta që përbëjnë menunë: sfondi dhe menutë. Sfondi është një imazh minimal sepse do përsëritet horizontalisht me CSS.


Kodi është minimal (CSS edhe më i shkurtër), sepse po bëjmë diçka fare të thjeshtë. Mund ti kisha vendosur imazhet edhe direkt pa një listë të parenditur, por preferova ta bëj sepse kam më tepër kontroll. Nëse në të ardhmen do më duhej të shtoja hapësira apo të implementoja Sprites, do e kisha punën më të thjeshtë me një listë të krijuar. Nuk besoj se ka ndonjë gjë të re në këtë kod që nuk e kam shpjeguar deri tani.

#menu{ height:27px; background:url(../imazhet/menu-sfondi.png) repeat-x; margin-top:7px; text-align:right;}Shprehja e parë i drejtohet div-it me id “menu”, i cili është mbajtësi i menusë. I kam vënë gjatësi prej 27px (sepse aq është në dizenjo) me “height”. Imazhin që preva pak më parë për sfondin e menusë e kam vënë pikërisht si sfond. Me rregullën “background” mund të përcaktoj imazhin dhe përsëritjen, por gjithashtu edhe specifika të tjera që këtu s’më duhen. Parametri “repat-x” do të thotë “përsërit në aksin horizontal”, pra imazhi të shumëfishohet automatikisht me CSS horizontalisht. Që efekti të funksionojë duhet që imazhi të jetë grafikisht i përsëritshëm, ku skaji i majtë të jetë i njëjtë me skajin e djathtë. Rregulla “margin-top:7px” krijon pak hapësirë midis menusë dhe kokës. Rregulla e fundit “text-align:right” i drejton elementët djathtas, sepse në dizenjo menuja është drejtuar në mënyrë të tillë.

#menu li{ display:inline;}Shprehja është e thjeshtë dhe e kam përmendur më sipër në kodin CSS të lidhjeve të kokës. “display:inline” i kthen elementët nga shfaqje bllok (block), në shfaqje rresht (inline). Nëse do i lija bllok, menuja do shfaqej vertikalisht sepse elementët bllok nuk qëndrojnë në krah të njeri tjetrit.

Deri tani kemi përfunduar kokën dhe menunë. Kemi akoma punë, por jemi në rrugë të mbarë. Në Firefox, mua faqja më del si në imazhin më poshtë, i cili është progresi i deri tanishëm.

Progresi deri tani


Banneri

Më falni për termin anglisht por nuk po më vinte fjalë më e përshtatshme. Sidoqoftë, Banneri është pjesa ku ndodhet foto kryesore dhe disa lidhje anësore. Nuk do kemi shumë punë me të, por është seksion i rëndësishëm sepse do përdor për herë të parë në këtë guidë “float”. Rregulla float është paksa komplekse për fillestarët që s’e kanë provuar në praktikë, prandja do mundohem ta shpjegoj sa më mirë. Po ju tregoj kodin HTML fillimisht.




Ashtu si ne seksionet e tjera, kodi HTML është i shkurtër dhe nuk përmban kompleksitet. Elementët HTML janë të paktë dhe përsëriten me implementime të ndryshme, prandaj s’ju duhet të mbani mend kode abstrakte. Në këtë rast kam krijuar një <div> mbajtës dhe brenda tij një listë për lidhjet dhe foton. Listën do e rregulloj me CSS që të ketë sfond, ndërsa foton e kam prerë fiks dhe nuk do më duhet ta prek fare. Duke qenë se do përdor float, në fund kam shkruar nje <div> me klasën “pastro”, i cili do “pastrojë” efektin e float. Kjo mund të realizohet edhe në metoda të tjera, por personalisht e zgjedh sepse është më e thjeshta për tu implementuar dhe më jep idenë në moment se ku kam përdorur float, në ato raste kur më duhet të rishikoj kodet. Float është një veti komplekse e CSS që mund të sillet në mënyrë të pa parashikueshme, prandaj dhe do mundohem t’ja u shpjegoj në paragrafin në vijim. Megjithatë, kini parasysh që qëllimi i kësaj guide nuk është të shpjegojë hollësisht funksionet individuale të CSS, prandaj nuk mund të zgjatem shumë. Ju këshilloj të lexoni ndonjë guidë të specializuar për përdorimin e float në CSS.

Kur ju shpjegova pse përdora “display:inline” në elementët të një liste, ju thashë se elementët bllok vendosen sipër njëri tjetrit në hapësirën vertikale. Kjo është sjellja standarte e elementëve HTML dhe nuk bëhet pa arsye, sepse elementë bllok si listat, paragrafet apo headers supozohen të qëndrojnë sipër njëri tjetrit dhe jo në rrjesht horizontal. Në rastin tonë kemi një element bllok si lista <ul> që e ul poshtë vetes imazhin, i cili në vetvete është element rresht (inline). Qëllimi im është ti vendos të dy elementë në krah të njëri tjetrit horizontalisht dhe këtu futet në lojë float. Float është konceptuar fillimisht si një rregull i cili e vendos imazhin brenda tekstit ashtu si në një editor teksi (psh. Word) bëjmë “text wrapping”. Pra, që imazhi të pluskojë (float = pluskim) mbi tekst, në mënyrë që teksti të shfaqet rrotull tij, dhe jo vetëm poshtë apo sipër. I njëjti koncept përdoret edhe për kombinime të tjera (dmth jo domosdoshmërisht imazh-tekst), ku një element pluskon dhe elementët e tjerë shfaqen rrotull tij. Në rastin tonë, elementi që do pluskojë është lista <ul> dhe imazhi do të shfaqet rrotull tij. Së fundmi, efekti i float vazhdon në pafundësi (deri sa gjehet tagu ) dhe të gjithë elementët në vijim do i nën-shtrohen këtij efekti, gjë që absolutisht nuk ka nevojitet. Për ta “pastruar” efektin, kam krijuar atë div-in me klasën “pastro” për të cilin ju fola më sipër, që përdor një rregull në CSS (clear) veçanërisht për të pastruar float. Me vendosjen e atij div-i, efekti i float nuk vijon edhe në elementët e tjerë. Shpresoj të jetë sa më e qartë, por si do qoftë, ju këshilloj të lexoni në veçanti për float, limitet e tij dhe si sillet në shfletues të ndryshëm.

Me shpjegimin e float, mund të vazhdojmë me shpjegimin e kodit CSS që i vendos elementët në vendet e tyre dhe krijimin konkret të efektit float.

#banner{ margin-top:1px;}Asgjë e re, thjeshtë një hapësirë prej 1px e krijuar midis banner-it dhe menusë.

#banner>ul{ width:109px; height:133px; float:left; background:url(../imazhet/banner-lidhjet.png) no-repeat; margin-right:1px; padding:25px; list-style-image:url(../imazhet/bullet-lidhjet.png);}Në këtë shprehje kam krijuar efektin float dhe e kam bërë listën të duket si në dizenjo. Fillimisht kam përcaktuar gjerësinë (width) dhe gjatësinë (height) e elementit për të qenë egzaktësisht sa në dizenjo. Duhet të keni kujdes këtu, sepse gjatësia dhe gjerësia janë më të vogla se në dizenjo, sepse hyn në efekt “padding”. Sipas modelit bllok në CSS, gjerësia/gjatësia e plotë e një elementi është: gjerësi/gjatësi + padding + border + margin. Ndërsa gjerësia/gjatësia e brendshme (ajo që matet me rregullat “width” dhe “height”) është: gjerësi/gjatësi + padding. Pra, në rastin tonë, gjerësia dhe gjatësia e vërtetë nuk është sa e kam përcaktuar në “width” dhe “height”, por: gjerësia->width+padding = 109px + 25px + 25px = 159px dhe gjatësia->height + 25px + 25px = 183px. Po pyesni veten pse e kam llogaritur “padding” nga 2 herë?! E thjeshtë, sepse kam përcaktuar një “padding” me vetëm një vlerë që tregon se duhet të krijohet hapësirë nga të katërta anët dhe nëse llogarisim gjerësinë apo gjatësinë, duhet ti shtojmë vlerën e padding majtas dhe djathtas apo poshtë dhe lartë. Më pas kam përcaktuar që ky element duhet të pluskojë me “float:left”. Pjesa “left” (majtas) tregon se elementi duhet të pluskojë majtas, ndërsa nëse do doja të pluskonte në krahun e djathtë (pra të shfaqej djathtas), do e shkruaja “float:right”. Me “background” kam vendosur sfondin e pjesës së lidhjeve, një imazh të cilin e preva nga dizenjo. Kam shtuar edhe hapësirë prej 1px me “margin-right” që ta ndaj me 1px pjesën e lidhjeve me foton e madhe. Me “padding:25px” kam krijuar hapësirë të brendshme, në mënyrë që lidhjet të jenë të spostuara nga skajet. Së fundmi i kam vendosur elementëve të listës një bullet si në dizenjo me “list-style-image”.

#banner li{ padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #b9cae2;}Në dizenjo, lidhjet janë të ndara nga njëra tjetra me një vijë të hollë të kaltër. Për ta replikuar efektin me CSS, u mjaftova të krijoj margin dhe padding të poshtëm e të vendos një “border”. Ideja këtu është që konturi (border) të spostohet 10px nga elementi përmes padding, ndërsa elementi pasardhës të spostohet nga konturi me 10px përmes margin. E thjeshtë dhe praktike!

#banner li:last-child{ border-bottom:0;}Shprehja që shkruajta pak më parë për të krijuar konturin funksionon, por krijon gjithashtu një kontur në elementin e fundit të listës. Nuk është se ngjan shumë keq, por të bëhemi perfeksionistë e ti bëjmë punët tamam
. Pseudo-selektori “last-child” zgjedh elementin e fundit të shprehjes, në këtë rast elementin e fundit dhe duket përcaktuar “border-bottom:0″, e heqim atë konturin e fundit që s’na pëlqen. Ky pseudo-selektor suportohet nga të gjithë shfletuesit modernë përveç Internet Explorer (tek versioni 9 shpresoj që po), gjë që e bën pak të çalë përdorimin e tij. Personalisht nuk e përdor dhe në këtë rast do bëja një klasë të veçantë për elementin e fundit, por qëllimi im në këtë guidë është t’ju tregoj sa më shumë rregulla dhe përdorimin e tyre praktik. Shkurt, përdoreni me kujdes në vendet ku një element i vogël grafik nuk i influencon përdoruesit e IE.

#banner li a{ color:#f1f1f1;}#banner li a:hover{ text-decoration:none; color:#597db3;}Këto 2 shprehje vendosin ngjyrën e lidhjeve dhe efektin “mouse-i sipër”. I kam shpjeguar tashmë si stilohen lidhjet me CSS dhe pseudo-klasën :hover, prandaj s’duhet të keni asgjë të re.

#banner>img{ display:block;}Kjo shprehje është veçanërisht për Internet Explorer, i cili shfaq hapësirë të panevojshme tek imazhet. Duke i vendosur “display:block”, hapësira zhduket.

Informacioni

Seksioni i informacionit është pjesa më komplekse e guidës, si për nga gjatësia, ashtu edhe për nga kodi i shkruar. Por është gjithashtu seksioni i parafundit (e fundit është “këmbët”, shumë e shkurtër) i kësaj guide të gjatë. Të fokusohemi tek Informacioni. Çfarë bie në sy direkt janë 3 kolonat e informacionit: Lajme, Rreth KOM TEL dhe Teknologjia. Për ta realizuar këtë strukturë së bashku me informacionet që ka brenda do na duhet pak punë, por po ju them që tani se nuk është aspak e vështirë. Ndiqeni guidën dhe do e kuptoni si funksionon.

LAJME



Rreth KOM TEL


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et tellus lectus, ac viverra lectus. Nullam hendrerit tortor sed lectus pretium sollicitudin. Mauris est enim, interdum non porta condimentum, accumsan sed est. Nullam sodales molestie pretium. Aliquam rhoncus odio blandit mi accumsan vestibulum ut vel diam.

lexo me shume Si Funksionon


Etiam venenatis quam luctus diam lacinia sagittis. Cras at nulla velit, vitae feugiat ante. Proin felis nunc, pharetra ultricies luctus vitae, consectetur eget quam. Curabitur tincidunt pulvinar laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

lexo me shume
Teknologjia


Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Lorem ipsum dolor sit amet, consectetur adipiscing elit.





Kodi HTML është pak i gjatë si rrjedhojë e disa fragmentesh të vecanta informacioni, por nuk kemi përdorur asgjë të re përveç tagut . Tagu është shkurtimi i “horizontal rule” (linjë horizontale) dhe e kam përdorur si ndarës midis 2 paragrafeve të kolonës qendrore. Mund të shihni që për çdo kolonë kam krijuar një div mbajtës dhe i kam vënë një id sipas pozicionit (majtas, qender, djathtas). Të tjerat janë lista, paragrafe, headers (tagu ), imazhe dhe lidhje. Kjo është hera e parë që përdor një header në këtë guidë dhe e kam bërë me <h2 />. Praktika e mirë semantike thotë që në fillim duhet të jetë një header <h1 /> që përshkruan faqen, e më pas header-at e tjerë, gjë të cilën unë se kam ndjekur. Edhe pse unë se kam zbatuar, mos e neglizhoni sepse ndihmon edhe në motorët e kërkimit.

#informacioni{ background:url(../imazhet/informacioni-bkg.png) no-repeat; margin-top:1px; padding:17px 13px 0 13px;}Divit mbajtës “#informacioni” i kam vendosur një sfond për ta përshtatur me dizenjon dhe kam krijuar midis tij dhe banner-it një hapësirë prej 1px me “margin-top”. Së fundmi kam krijuar hapësira të brendshme me “padding”, në mënyrë që informacioni të pozicionohet bukur.

h2{ font-size:14px; color:#9ea0b0; text-transform:uppercase;}Këtu kam stiluar tagun <h2 />. I kam vendosur madhësi gërmash prej 14px me “font-size” dhe ngjyrën të cilën e morra nga dizenjo. Me “text-transform:uppercase” i bëra të gjitha gërmat e shkrimit brenda <h2 /> të mëdha, sepse të tilla janë në dizenjo. Mund edhe ti kisha shkruar që në fillim (pra në HTML) më gërma të mëdha (duke mbajtur shtypur SHIFT
), por preferoj ta bëj të tillë sepse nëse më ndërrohet mendja ti bëj të vogla, mjafton të fshij një rregull CSS.

#majtas{ width:133px; float:left; margin-right:30px;}#qender{ width:347px; float:left; margin-right:35px;}#djathtas{ width:207px; float:left;}Të 3 div-ët që shërbejnë si mbajtës të kolonave kanë parimisht të njëjtat rregulla. Gjerësinë (width) ja kam matur në dizenjo, i kam vendosur “float” dhe së fundmi hapësirë djathtas me “margin-right” që ti largoj nga njëri tjetri. Div-it të fundit nuk i kam vendosur hapësirë sepse spostohet nga div-i para-ardhës (#qender). Kjo është baza e një sistemi të thjeshtë me 3 kolona, ku “float” e bën praktikisht të gjithë punën. Mos të harroj t’ju them se gjerësia është e domosdoshme për të vendosur limitet e një divi, përndryshe teksti do shtrihej mbi div-ët e tjerë.

#majtas ul{ list-style-image:url(../imazhet/lajmet-bullet.png); padding-left:20px;}#majtas li{ margin-bottom:10px;}#majtas li a{ font-size:11px; color:#555;}Këto janë 3 shprehje të thjeshta për të rregulluar listën e lajmeve. Shprehja e parë i vendos një bullet listës dhe krijon hapësirë majtas me “padding-left”. Shprehja e dytë krijon hapësirë poshtë me “margin-bottom” midis elementëve të listës. Shprehja e tretë përcakton se lidhjet brenda një liste duhet të kenë madhësi gërme 11px dhe si ngjyrë një gri më të hapur se pjesa tjetër e faqes.

a.lexo-me-shume{ display:block; text-align:right; font-size:10px;}Lidhja “lexo me shume” shfaqet poshtë paragrafeve të kolonës së mesit (#qender) dhe drejtohet djathtas. Për ta arritur këtë efekt, e kam kthyer lidhjen në element bllok që të zgjerohet në 100% të hapësirës që gjen dhe e kam drejtuar djathtas me “text-align”. Së fundmi e kam bërë madhësinë e gërmës të vogël 10px. I njëjti efekt, por më i “pastër” mund të arrihet me një <div> mbajtës e brenda tij të vendoset lidhja. Kodi CSS do mbetej i njëjtë. Në këtë mënyrë, lidhja nuk është e klikueshme në 100% të gjerësisë së saj (edhe aty kur s’ka tekst).

#qender hr{ border:0; border-top:1px solid #e2e2e2; height:1px; margin:10px 0;}Ja u shpjegova në hyrje të seksionit se krijon një vijë horizontale. Pa i vendosur rregulla CSS, vija është thjeshtë e shëmtuar, kështu që e kemi të domosdoshme ta stilojmë. Fillimisht i kam vendosur “border:0″ që t’ja heq të gjithë konturin bazë dhe i kam përcaktuar vetëm një kontur të sipërm prej 1px me “border”. Me “height:1px” e bëj gjatësinë e vijës horizontale vetëm 1px, në mënyrë që edhe Internet Explorer ta shfaqë bukur. Së fundmi i kam vendosur hapësirë të sipërme dhe poshtme me “margin” për t’i diferencuar paragrafët.

div.teknologjite{ width:100%; overflow:hidden;}Tek seksioni i teknologjisë kam krijuar 3 dive të ndryshëm për çdo element. Brenda tyre është një imazh dhe një paragraf të cilët bëhen float dhe më duhet ta pastroj atë float që të arrij efektin e dëshiruar me imazhet ndarëse. Në këtë rast e pashë të arsyeshme të përdor një teknikë pastrimi alternative nga ajo që kam përdorur deri tani (divi me klasën pastro) sepse është më praktike këtu, por gjithashtu edhe për t’ja u treguar. Duke vendosur gjerësinë e elementit (unë e bëra 100% sepse dua të shtrihet në të gjithë gjerësinë që gjen, por mund të jetë edhe fikse në px) sigurohemi që teknika funksionon në çdo shfletues dhe së fundmi shtojmë rregullën “overflow:hidden”. Shumë e përdorin këtë teknikë, por unë preferoj div-in me klasën “pastro” dhe limitohem ta përdor vetëm në raste kur ka përsëritje (dmth ku përdoren disa elementë me klasë të njëjtë) si rasti i tanishëm.

div.teknologjite img{ float:left; margin-right:10px;}Këtu zgjedhim imazhet brenda div-eve “teknologjite” dhe i bëjmë float, në mënyrë që të shfaqen në krah të paragrafeve. Me “margin-right” kam krijuar hapësirë midis 2 elementëve. Më duhet t’ju them se imazhet që kam prerë për seksionin “Teknologjia” kanë gjerësi të njëjtë, në mënyrë që ti lehtësoja punë vetes dhe paragrafet në tre teknologjitë e ndryshme të ishin të baraz-larguar nga imazhet.

#djathtas>img{ display:block; margin:10px 0;}Midis teknologjive të ndryshme ndodhet një imazh i cili shërben si ndarës. Unë e përdora gjithashtu edhe për të krijuar hapësirë midis teknologjive dhe kështu doli më e thjeshtë. Fillimisht e ktheva në një element “bllok”, sepse elementët “inline” nuk supozohet të kenë “margin”, dhe krijova hapësirë të sipërme dhe poshtme me “margin”.

<h2>Këmbët


Jemi pothuajse në përfundim të guidës, me vetëm “këmbët” për të përfunduar. Ky është seksion i papërfillshëm për nga lehtësia, megjithatë i rëndësishëm për kompletimin e dizenjos. Kodi është minimal, prandaj le të kalojmë shpejt në të.

© Copyright KOM-TEL. Te gjitha te drejtat e rezervuara.
Te gjitha fotot, materialet dhe logo KOM-TEL mund te perdoren vetem me lejen e zotuesit

Asgjë më shumë se një paragraf me tekstin e të drejtave të autorit brenda. Kam përdorur një
(line break – thyerje rreshti) në mënyrë që të ulet rreshti.

#kembet{ border-top:1px solid #dadada; margin-top:15px; padding:10px; font-size:10px; color:#4f4f4f;}Shprehja e vetme CSS për këmbët! Vendosa një kontur të sipërm me “border”, hapësirë të sipërme me “margin-top” që ta ndaj nga informacioni dhe hapësirë të brendshme me “padding”. Së fundmi e bëra madhësinë e gërmës 10px dhe ngjyrën një gri më të hapur se pjesa tjetër e teksteve të faqes.

Me përfundimin e kodit tonë, duhet të kemi një paraqitje si më poshtë në shfletues. Unë e kam testuar faqen me sukses në Firefox 3.6, Safari 5, Chrome 5, IE7, IE8 dhe në Opera 5 me rezultate praktikisht të njëjta. Në IE7 ka pak hapësira të tepërta në 2 vende dhe nuk njeh pseudo-selektorin “:last-child”, por janë të papërfillshme dhe të rregullueshme lehtë. Në IE6 nuk e testova, por duhet të ketë probleme si rrjedhojë e përdorimit të selektorit “>”, të cilin nuk e njeh. Megjithatë, faqja duhet të jetë e lexueshme dhe mund të rregullohet me fare pak punë për ta suportuar.

Faqja e perfunduar


Përfundimi

Ishte një guidë e gjatë dhe jam i sigurt që ishte e lodhshme ta lexoni deri në fund. Mund ta them me siguri që ishte e lodhshme për mua, por shpresoj vërtetë t’ju kem ndihmuar të kuptoni konceptet e kodimit në HTML dhe CSS. Kodi dhe teknikat nuk janë të vështira për tu mësuar, por si kudo, duhet punë dhe vullnet. Ju siguroj se pasi të keni koduar pak faqe, do ndiheni shumë më të rehatshëm në kod dhe gjithçka do ju vijë natyrshëm.

Po ju kujtoj edhe një herë disa detyra që ju lashë gjatë rrugës


  • Lexoni ndonjë artikull rreth “float” për të kuptuar më mirë si funksionon.
  • Lexoni ndonjë artikull rreth pozicionimit absolut, sepse është pak temë komplekse të kuptohet në pak rreshta.
  • Blini Premium dhe lexoni guidën time tjetër “Kodimi i një faqeje të plotë me HTML dhe CSS“. Është më e madhe, më komplekse dhe përfshin më tepër teknika se në këtë guidë.
Mos nguroni të komentoni, si për pyetje, ashtu edhe për kritika. Vetëm mos harroni se është një guidë e shkruar në kohë reale me kodimin e faqes (pra kodo>shkruaj>kodo>shkruaj) dhe optimizimi i kodit nuk është sigurisht pika e fortë e guidës. Prandaj mos jini shumë të ashpër në kritika


Ju lutem, nëse e përdorni dizenjon për qëllime personale apo komerciale, vendosni një falenderim drejt Feniksi.com. Kaq ju kërkojmë


Mësim të mbarë.

PSD në HTML dhe CSS – Projekti KOM-TEL është një postim nga: Feniksi.Com - Thesari i Njohurive



Forum-Al.com
Aty ku shqiptarët mblidhen!
 
Top