Krijimi i ueb-faqeve

Krijimi i veb-faqeve mund të bëhet në disa faza të cilat zakonisht hanë :

q       Plani

q       Disenji-projektimi

q       Kodimi(HTML)

q       Transferimi në internet-upload (FTP)

q       Testimi

q       Promocioni

q       Mirëmbatja dhe pasurimi i veb-sajtit

Secila nga këto faza duhet të ketë objektivin e caktuar dhe rezulltatet e parashikuara më pare.

Planifikimi i ueb-sajtit- përfshin përcaktimin e këtyre elementeve

q       Qëllimi i sajtit

q       Audiencën e shfrytëzuesit

q       Strategjisë

q       Objektivave dhe

q       Zgjedhjen e host servisit

Disenjimi i ueb-sajtit

Procesi i disejnit të veb-sajtit përfshin disa principe të disenjit dhe të shkrimit. Në këtë faze parashihen :

q       Zgjedhja e fotografive, midi-fajllave, dhe lidhjeve (link)për secilën faqe

q       Krijimi i skemës standarde të navigacionit me kreun (header) dhe përfundimin e faqes (footer) për veb-sajtin e shfrytëzuesve

q       Përpilimi i fajllave me tekst për secilën faqe të sajtit të shfrytëzuesit. Në këtë faze është shumë mire që të përfshihet edhe përmbatja

Kodimi i ueb-sajtit

Kodimi i veb-sajtit mund të bëhet duke shfrytëzuar

q       Form wizard

q       HTML shembujt (templates)

q       HTML editorin dhe

q       Duke gjeneruar kodin manualisht

Në këtë faze duhet shtuar dhe

q       Kreun standard të faqes (header)

q       Përfundimin standard të faqes  (footer)

q       Shtojcat për navigacion

q       Lidhjet (links)

q       Fotografit dhe fajllat me zëra të mbledhura për veb-faqe

 

Kodi HTML burimor i secilës faqe mund të gjendet me komandat nga browseri view/ sorce kode

Transferi i sajtit në internet –upload

Në këtë faze zgjedhet protokolli për transfer të të fajllit FTP, programi që do të bëjë transferin e fajllave të shfrytëzuesit  ashtu që sajti i tij mund të shihet perms internetit

Testimi i ueb-sajtit

Në këtë faze bëhet testimi i lidhjeve interne, externe duke shfrytëzuar serviset on-line për testim të validitetit.

Promocioni i ueb-sajtit

Shfrytëzuesi në këtë faze krijon disa të dhëna provuse për sajtin e vetë dhe regjistrohet në veglat për hulumtim dhe direktoriumet e internetit.

Mirëmbatja e ueb sajtit

Pasi që të kenë përfunduar të gjitha fazat e tjera të zhvillimit të veb-sajtit, shfrytëzuesi duhet të bëjë mirëmbatjen e vezhdushme të veb0sajtit duke i përsëritur fazat e kaluara vazhdimisht. Me krijimin e veb sajtit, shfrytëzuesi nuk e ka krye punën e tijë, sepse atë vazhdimisht duhet ta pasuroj dhe freskoj me shenime të reja

Kodimi në HTML

Veb-faqet janë dokumente bazike të world wide web-it të cilat krijohen në HTML. Ato mund të jenë pjesë e veb-it apo të formohen vetëm nga një faqe e cila formon vetë veb-prezentimin.

 

            HTML paraqet shkurtes  Hyper-Text-markup-language (gjuha e ngritur që bazohet në hypertext). Quhet gjuhë e ngritur sepse është e komponuar nga komandat e të cilat vendosen  Brenda kllapave këndore “<” (për fillimin e komandës) dhe “>” (për përfundimin e komndës). Këto shenja, i tregojnë browserit se çfarë formati dhe funksionaliteti është dëshiruar të arrihet me anë të komandës Brenda tyre.

            Pjesa e komandës e shenuar kështu Brenda këtyre shenjave quhet tag. Pra gjuha HTML krijohet  me anë të kombinimit të tagjeve dhe tekstit

            Për krijimin e kodit HTML mjafton të shfrytëzohet cili do editor teksti  ( edhe ata të (DOS-it), por fajlli duhet të ruhet me ekstensionin që tregon se ësht fajll html(.htm). këtu do të rekomnadohet që të shfrytëzohet editori i tekstit notepad(bllokshenimesh)

            Fajlli që ruhet në këtë formë mund të aktivizoj me klik të dyfisht browserin e internetit. Nëqoftëse bëjmë ndryshime në fajll duhet që ai të ruhet (save) dhe pastaj në browser të përdoret komanda  refresh(ose reload). Kështu në browser do të paraqiten të gjitha ndryshimet eventuale që i bënë shfrytëzuesi në veb-faqe.

Elementet e HTML-së

Gjuha HTML i ka disa rregulla:

q       Instruksioni në HTML quhet tag

q       Tagjet janë të futura  Brenda shenjave < > dhe jashtë tyre shënohet teksti që paraqitet në Veb-faqe

q       Cikli i komandës duhet të mbyllet me komandën që futet në mes të shenjave “</ “ dhe “>”

q       Preferohet që komanda në tag të shënohet me shkronja kapitale (të mëdha) edhe pse nuk është e obligushme

Kodimi në HTML përfshin krijimin e kreut të faqes HEAD, trupit të faqes (BODY) dhe përfundimit të faqes (Footer)

 

 

 

 

 

Një shembull se çka përfshin  kodi HTML është:

 

<HTML>

<HEAD>

<TITLE>   Titulli i faqes </TITLE >

</ HEAD>

<BODY>

Kjo është faqjaHome e ime e parë<b> dhe ky test është bold</b>

</BODY>

</HTML>

Siç mund të vërehet ciklet e komandave janë të mbyllura me komanden nismëtare:

<HTML> dhe </HTML>
Keto tag shenojne fillimin dhe fundin e nje dokumenti HTML. Tagu i parë në dokumentin e juaj  HTML është <html>. Ky tag i thotë browserit tuaj se ky është fillimi i një dokumenti HTML. Tag-u i fundit në dokumentin tuaj është </html>. Ky tag  i thotë browserit tuaj se ky është fundi i dokumentit HTML. Dokumentet e HTML mbarojne me .html ose .htm me fjalë të tjera, kanë për detyrë të hapin dhe të mbyllin file-in. Tag-ët

 

            <HEAD>

            …………

            </HEAD>

 

Teksti  ndërmjet tag-ut  <HEAD> dhe  tagut </HEAD>  është informacion i kokës ose ballinës( header information). Informacioni i ballinës nuk shfaqet në dritaren e browserit.  Këto informacione janë të nevojshme për browser-in, për Webserver-in dhe për motorët e kërkimit.

 

Teksti ndërmjet   <TITLE> dhe </TITLE> tagjeve është titulli i dokumentit tuaj. Titulli shfaqet në caption(emërtimn) të browserit tuaj.-pra   Shënon fillimin dhe fundin te textit qe ndodhet lart tek browseri.

 

 Teksti ndërmjet  tagjeve <BODY> dhe </BODY>  është teksti që do të paraqitet në browserin e juaj.

 

 Teksti ndërmjet tagjeve  the <B> dhe  </B>  do të shfaqet në bold font.

Elementi i Ballinës- Head Element

Elementi i ballinës përmban informacione të përgjithshme, gjithashtu quhen meta-informacione që kanë të bëjnë me një dokument. Meta ka domethënien  "information about". –

Ju mund të thoni se meta të dhënat( meta-data) ka domethënien informacioni rrethë të dhënave ose meta-informacioni ka kuptimin informacion mbi informacionin

 

Informacioni brend a elementit  Head  

Elementet brenda elementit Head nuk do të shfaqen nga një browser.

Bazuar në standardin  HTML , vetëm pakë tagje janë legale brenda sksionit head . këto janë : <base>, <link>, <meta>, <title>, <style>, and <script>.

Le ta vëzhgojmë një konstruksion ilegal:

<head>   <p>Ky është një tekst </p> </head>

Në këtë rast browseri ka dy opsione :

Ta shfaq tekstin sepse është brenda elementit paragraf

Ta fsheh tekstin sepse ndodhet brenda elementit Head.

Nëse ju vendosni një element HTML si <h1> ose <p>  brenda një elementi siç është ky  , shumica e browserve do ta shfaqin, madje nëse ky është ilegal

A do të harron browseri gabin e juaj  siç është ky. Ne nuk mendojmë kështu. Të tjerët e bëjnë. Should browsers forgive you for errors like this? We don't think so. Others do.

Tagjet  e titujve

Titujt në HTML fitohen me anë të komandave vijuse

<H1> Titulli1 </H1>

<H2> NënTitulli2 </H2?

<H3> Nëntitulli3</H3>

 

 

 

 

 

 

 

 p.sh

<HTML>

<HEAD>

<TITLE> Shembull 1 </TITLE>

<H1>

Titull1

</H1>

<H2>

Nëntitulli 2

</H2>

</HEAD>

<BODY>

 

</BODY>

</HTML>

 

Ndërpreja e paragrafeve në tekst kodi HTML

Paragrafin( kryerreshtin ), kodi HTML nuk e njeh vetveti, prandaj duhet që në vendin ku dëshirohet që të vendoset kryerreshti i ri të shënohet  Tagu </P>

   Mbani mend

<p> dhe </p> krijon një paragraf të ri

            Në vendet në të cilat dëshirohet që të fitohet ndërprerje  e tekstit vendoset tagu <BR> (Break). Tagu <BR>  nuk ka nevoj të mbyllet me </BR>

Mbani mend <br> ndërfut ndërprerje të rreshtit

....... <body> Permbatja e elemntitit Body shfaqet ne browserin e juaj. <p> Ky eshte nje paragraf.</p> <p> ky eshte nje paargarf.</p> <p>Ky eshte nje paragraf .</p>   <p>Elementet e paragrafit definohen branda tagut p.</p> .....

Permbatja e elemntitit Body shfaqet ne browserin e juaj. Ky eshte nje paragraf. ky eshte nje paargarf. Ky eshte nje paragraf . Elementet e paragrafit definohen branda tagut p.

 

 

Vendosja e tekstit ose fotografive në qendër të ueb-faqes- bëhet me anë të komandës  < CENTER>

P.SH  me pjesën e instruksioneve të kodit HTML <CENTER> Ky është shembull për vendosje në qendër të faqes

< /CENTER> , fitohet pjesa e faqes :

ky`````````

Ky është shembull për vendosje në qendër të faqes

<HTML>

<HEAD>

<TITLE> Shembull 1 </TITLE>

<H1>

Titull1

</H1>

<H2>

Nëntitulli 2

</H2>

</HEAD>

<BODY>

<marquee> Pjeset kryesore te nje sistemi kompjuterik jane:</marquee>

</BODY>

</HTML>

Ngjyrat dhe lloji i shkronjave në kodin HTML

 Ngjyrat dhe lloji i shkronjave në kodin HTML mund të definohen  me anë të komandës

<BODY BGCOLOR=”white” TEXT=”Black”LINK”=Blue”

ALINK=”Red”VLINK=”Green” FONT FACE=”Back Anti qua”

Në  këtë tag janë përdorur disa kuptime që janë shpjeguar në vazhdim

BODY BGCOLOR ngjyra në  prapavijë  të ekranit

LINK- lidhja

ALINK- fleshi i lidhjes (linkut)

VLINK- lidhja (linku ) e vizatuar më pare

FONT FACE – fonti  që përdoret në ueb -faqe

Ndërrimi i ngjyrës së shkronjave në pjesën e dëshiruar të të tekstit mund të bëhet duke përdorur tagun

 <FONT COLOR=” Ngjyra -në – gjuhën-angleze

p.sh .

<FONT COLOR=”Blue”

p.sh një cikël komandash në mes të kodit HTML do të mund të duket:

<HTML>

<BODY>

<FONT COLOR=” Blue”> Në këtë pjesë vjenë teksti ngjyrë blue.</ FONT>

</BODY>

</ HTML>

p.sh

<html>
<body bgcolor= “Blue>
<title>Mirësevini ne faqen time</title>
<font color= “red”

<body>
Mirëse vini në faqen që kam bërë unë me html
BLA BLA BLA
<p>
Kjo është e bërë nga unë
</body>
</font>
</html>

<body bgcolor= “gjashtembedhjetesh ose ngjyra” (ne rastin tone shkruam nje ngjyre ne sistemin gjashtembedhjetesh 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) (nqs do te perdorim menyren e ngjyres do te shruajme brenda thonjzave BLUE, YELLOW, RED, BLACK etj)
Kjo specifikon ngjyren e backgroundit.

listimet e ndryshme gjatë kodimit HTML

 gjatë listimeve të ndryshme mund të përdoren tagjet  e më poshtme

<OL> -për numrim gjatë listimit

<UL>- për rrathë të vegjël të zi

<LI> për të u identifikuar se çka është duke u listuar

 p.sh . me anë të cikjlitn të më poshtëm të komandave të kodit HTML

<HTML>

<BODY>

Pjesët kryesore të sistemit kompjuterik janë:

<OL>

<LI> Pjesa hyrëse

<LI> Procesori

<LI> Kujtesa

<LI> pjesa Dalse

</OL\>

</BODY>

</HTML>

 

 

ndërsa me anë të ciklit të mëposhtëm të komandave të kodit HTML:

<HTML>

<BODY>

pjesët kryesore të sistemit kompjuterik janë:

<UL>

<LI> Pjesa hyrëse

<LI> Procesori

<LI> Kujtesa

<LI> pjesa Dalse

</UL\>

</BODY>

</HTML>

në browser do të  paraqitet :

 

Futja e fotografisë dhe e grafikës në përmbatje të Veb-faqes

Fotografia ose grafika e  e dëshiruar duhet të jetë e formatit JPEG(.jpg) ose GIF(.gif)

Në vendin  e dëshiruara për vendosje të fotografisë shënojmë tagun e komandës :

 

<IMG SCR= “ Shtegu –i-fotografisë-dhe-fajlli”>

p.sh.  nëqoftëse përdoret cikli i HTML komandave

<HTML>

<BODY>

 

<CENTER>

<P>

<P>

 

Në Këtë vend do të vendosim fotografin  e

<Br>

<IMG SCR= “C:\ My Documents\My Pictures\ismaili\ismaili.jpg”>

<P>

<P>

<FONT COLOR=”Blue”> ISMAIL DASHI.</FONT

<CENTER>

</BODY>

</HTML>

 

Madhësia e paraqitur e fotografisë ose grafikës në veb-faqe mund të ndrrohet dhe preferohet që të jetë sa më e vogël, në mënyrë që fajlli HTML që formon ueb-faqet të mos bëhet shumë i madhë(preferohet jo më i madhe se disa qindra kilo bajt). Pra , më mire është që ueb-faqja të ketë më shumë tekst dhe më pakë fotografi, ose këto fotografi të jenë me dimension të vogël. Egziston mundësia që fotografia të jetë me dimension të vogël dhe klik në te ajo të rritet dhe të plotësoj tërë ekranin.

            Kontrolli i madhësisë së fotografisë apo grafikës mund të bëhet në tagun për vendosje të fotografisë edhe gjerësin(width) apo gjatësin(Height) e fotografisë. Me shenimin e njërit nga këto dimensione, proporcionalisht ndërrohet edhe tjetri.

            Komanda HTML në këtë rast do të duket

<IMG SCR= “ Shtegu –i-fotografisë-dhe-fajlli” width= gjerpsia –e-fotografisë>

p.sh

<IMG SCR=” D:\ Documents and settings\id1\ My Documents\My Pictures\ismail.jpg” width 150>

nëse dëshirojmë që fotografia të ketë dimensione krejtësisht të definuarap.sh

<IMG SCR=” D:\ Documents and settings\id1\ My Documents\My Pictures\ismail.jpg” width 150, heght =150>

Përveç nga hard disku i kompjuterit, grafikën apo fotografin mund të huazojmë edhe nga ndonjë Veb-faqe tjetër. Nëqoftëse shënohet shtegu i fajllit që huazohet p.sh

<IMG SCR=”http:// www kosova.com/foto.jpg”>

vendosja e grafikës apo fotografisë anash tekstit.

            Nëqoftëse në tagun me komandën IMG SCR, shtohet komanda ALIGN=RIGHT ose ALIGN=LEFT

p.sh

<IMG SCR=” D:\ Documents and settings\id1\ My Documents\My Pictures\ismail.jpg” ALIGN=RIGHT>

hiperlidhja apo shkurt linku në veb-faqe mund të krijohet nëqoftëse në tag gjatë kodimit HTML përdoret komanda

<A HREF=” URL” > emri i linkut </A>

p.sh  në vendin e caktuar dëshirojm të krijojmë link, i cili do të ndërlidh faqen tone dhe faqen e cila ka URL adresën www.kosova.com  atëherë përdorim tagun me komandën

<A HREF=”http:// www kosova.com/”> Kosava. </A> 

 do ta shëndrojn fjalën “Kosova “ si një hyperlink

Në ekran do të paraqitet hiperteksti i nënvizuar i cili me zgjedhje me anë të miut e dërgon shfrytëzuesin drejtpërdrejt në veb-faqen e dëshiruar.

Komandat në HTML për linqe

 

Fuqia  real e  HTML  është aftësia  për të lidhur me dokumente të tjerë ose pjesë të tekstit, imazheve,, video ose audio. ;inqet zakonisht të theksuara ( highlighted) ose nënvizuara (underlined) në një dokument kështu që ju e dini ekzestincën e tyre . klikimi mbi link fillon hapja e dokumentit për të parë atë.

 

Lidhja me një dokument tjetër

Për ta lidhur në një fajll në një  Web server,  tagu i youj  në HTML do të duket:

<a href="http://www.ncsu.edu/">Welcome to NCSU</a>

teksti që duket ndërmjet  fillimit dhe përfundimit të tagjeve s ("Welcome to NCSU") në shembullin e më sipërm është teksti që është lidhje për lexuesin të kaloj në atë t URL.

Kur ju krijonii  një link, imagjinone që ju po krijoni dy pika  anchor :  njëra ekziston në dokumentin e  juaj ( tekstin për të klikuar në te ), ndërsa tjetra është dokumenti që ju do të lidheni . ju kryesisht krijoni një fije ( thread) ndërmjet dy pikave s.

Ja dhe domethënia e pjesëve :

<a                    -- e fillon  anchor-in

href                  -- paraqet "hypertext reference"

http://www.ncsu.edu/  --  URL  e dokumentit tjetër

Welcome to NCSU       --teksti që do të shfaqet dhe do të jetë i klikushëm

/a>                   -- e përfundon  anchor-in

posa të dini URL për një fajll ,  ju mund të krijoni linkun për tet.

 

Lidhja me një  anchor të emërtuar

 Anchori brenda dokumentit të njëjt

Për të lidhur një seksion të posaçëm brenda të njëjtit dokument ju duhet ta definoni emrin e anchor-it  brenda dokumentit  dhe më pas ta lidhni  atë.  P.sh ,po të doni të lidheni nga ballina e dokumentit me titull  "chapter2.html" me paragrafin e katërt  të të njëjtit dokument ,  ju duhet ti jepni paragrafit të katërt  një emër  (çfarëdo emri , të pajtueshëm-you make it up), në këtë rast  "important," dhe ju do të krijoni një lidhje me këtë emër në vend të një URL.

Vazhdim i shembullit të më sipërm, ne do të krijojmë një lidhje  nga ballina e "chapter2.html"  me paragrafin e katërt ;ne do ta quajmë këtë link  "important".  Sopati ju duhet ta definoni emrin (name) "important"  në paragrafin e katërt me  tag  e emrit

<a name="important">First sentence in fourth paragraph</a>

më pas , krijoni  lidhjen me këtë anchor  "important"  (me fillimin e  "chapter2.html"). ky do të duket kështu :

<a href="#important">link to important stuff</a>

 pound sign  në ballë të emrit të anchor-it i thotë browserit të kërkoj për linkun brenda dokumentimit të posa ngargur në vend që të kërkoj diku në ndonjë fajll tjetër.

Note that anchor names are case sensitve, and that some kind of non-blank text must appear in the named anchor tag.

Emërimi i anchorve brenda dokumenteve -Named anchors within another document

Ekzistojnë shumë raste kur ju doni jo vetëm  të lidhenim me një dokument të veçantë. Por më precizë , ju dëshironi të lidheni seksion partikular të  ndonjë dokumenti tjetër. Si një shembull,  supozojmë jo doni të ndërtoni(krijoni) një link nga dokumentit "Our first HTML document"  me seksionin e veçantë me një dokument të dytë të quajtuar "chapter2.html".

Spari  ju vendosni emërtimin e anchor-it në dokumentin e që doni ta lidhni me (chapter2.html). Për ta bërë këtë, shkoni në seksionin  në dokumentin e juaj të dytë  ku ju dëshironi  që  lexuesi  të fillon dhe definoni emrin e ancourit.  Emërtoni këtë anchour  "important".  Ndërfutni tagun si në vazhdim në vendin e përshtatshëm(të duhur) në dokumentin e dytë.

<a name="important">some text</a>

tani krijoni linkun në dokumentin e juaj të parë . në dokumentin e juaj të parë ju duhet të përfshini vetëm emrin  e fajllit, por emri që ju definoni për anchor. Ky emër i anchor-it është seperuar nga emri i fajllit me një  pound sign (#).  Vendosni këtë tag  ku ju dëshironi që linku të shfaq  (tekst të theksuar).

 <a href="http://www.here.edu/chapter2.html#important">important

part</a>

shfrytëzuesi do të sheh që dokumentgi i parë ka fjalën  "important part" të theksuar- highlighted.  Klikimi në ketë tekst të theksuar  do ta merrë seksionin he "important" në dokument të dytë section in the second document.

Edhe fotografitë apo grafika mund të jenë në hiperlidhje(link) për veb-faqen tjetër. Kjo arrihet nëse përdoret tagu

<A HREF =”http:// URL”>< IMG SCR =”shtegu-i-fotografisë- dhe-fajlli”> teksti i dëshiruar </A>

p.sh 

 

 <A HREF=”http:// www Albanian.com”>< <IMG SCR=” D:\ Documents and settings\id1\ My Documents\My Pictures\ismail.jpg” ALIGN=RIGHT> </A><p> shtypni klik në këtë fotografi për ta aktivizuar faqen Albanian.com

            Në browser do të paraqitet fotografia e rrethuar me kornizë me ngjyra të ndryshme nga ajo e tekstit.,