02 sesioni 02

1. HTML

HTML (Hypertext Markup Language) është një gjuhe shenjash te cilat na lejojnë të shfaqim një përmbajtje te pasur me elemente te ndryshme, tu referohemi burimeve te tjera (sic mund te jene imazhet, etj.), si dhe te krijojmë lidhje me dokumente të tjera për procesim te mëtejshëm.

HTML përdoret për të krijuar dokumente me strukture HyperText. Një dokument HyperText përmban informacion që është i ndërlidhur me dokumente të tjera, duke na lejuar ne të kalojmë nga njeri dokument ne tjetrin duke shfrytëzuar te njëjtin aplikacion qe po përdornim për te pare dokumentin fillestar.

HTML mund të përdoret gjithashtu për të krijuar dokumente multimediale,p.sh ato që përmbajnë informacion i cili nuk është thjesht tekst si p.sh :

· Imazhe

· Tinguj

· Video

· Nën programe (plug-ins)

Documentat HTML quhen "Web pages". Browser merr faqet e Web nga Serveri Web qe mund te ndodhet kudo ne Internet. Per te shkruar HTML mund te perdoren editoret e tekstit si psh NotePad.

HTML është aktualisht ne versioni 4.01 dhe vazhdoj te ofroj veçori te avancuara për te krijuar faqe me përmbajtje edhe me te pasur.

Është krijuar një specifikim i përputhshëm me HTML,

XHTML (Extensible Hypertext Markup Language) e cila përdor sintaksën e XML dhe sjell një XML Schema qe mund te përdoret për te vlerësuar një dokument, për te kontrolluar nëse ai është i krijuar sakte etj.

HTML nuk është gjuha e vetme në dispozicion për krijimin e dokumenteve HyperText, ka gjuhë që vinë para dhe pas HTML (SGML, XML, etj), por HTML është bërë gjuha e rekomandimit W3C për krijimin e përmbajtjes për Internetin.

1.1 Bazat e HTML

Dokumentet HTML janë krijuar si dokumente me tekst të thjeshtë (me formatim jo të veçantë) në të cilin i gjithë teksti i formatuar është përcaktuar duke përdorur shenja tekstuale te quajtura tag-e. Tag-et janë shenjat tekstuale që fillojnë me karakter <, e ndjekur nga emri i tag-ut pasuar me çdo atribut tjetër, dhe në fund mbyllet me karakterin > .

Tag-u hapes do të dukej si me poshtë:

<TAG>

Fundi i tag-ut fillon me karakter <, e ndjekur nga karakteri /, i ndjekur nga

emri i tag-ut dhe karakteri >. Tag-u mbyllës do të dukej si më poshtë:

</TAG>

Tag-et janë case-sensitive, kuptimi dhe funksioni i tyre ngelet i njëjte pavarësisht nëse janë shkruar me gërma te mëdha apo me gërma të vogla.

Shembull:

<title> emri i dokumentit </title> Shembull i përdorimit të tag-eve për të shënuar tekst BoldItalicsBold

Atributet e tag-eve të cilat tregojnë parametrat e tjera vendosen në tag-et hapëse si më poshtë:

<TAG ATRIBUT ATRIBUT...>

Forma e këtyre atributeve shfaqet ose vetëm me emrin e atributit emri i atributit i ndjekur nga =, ndjekur nga vlera që ne duam të caktojmë atë . Përshembull:

<A HREF="http://www.w3.org">Lidhëz</A> <IMG SRC="image.jpg" BORDER=0 ALT="NAME">

Në disa raste, në HTML mund edhe të mos i përdorim tag-et mbyllës, kjo në rastet ku ato nuk rrethojnë tekst si p.sh rasti i mësipërm i një imazhi.

1.2Struktura e dokumenteve HTML

Të gjitha dokumentet HTML kanë pak a shumë të njëjtën strukturë. I gjithë dokumenti duhet të përfshihen në një tag HTML dhe është i ndarë në dy pjese : pjesa e kokës, e përfshire në një tag HEAD dhe trupin e dokumentit (që për mban

informacionin e dokumentit), i cili është i përfshirë brenda një tag-u të quajtur BODY. Koka përmban disa përkufizime të dokumentit: titullin e tij, shënime shtesë, fjalë kyçe etj. Një shembull mund te jetë:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> vendoset titulli </title>

</head>

<body>

Permbajtja e dokumentit

</body>

</html>

Titulli i dokumentit

Cdo document HTML ka nje titull. Per te caktuar titullin e dokumentit perdoret komanda <title>, psh:

<title>Dokumenti im I pare ne HTML</title>

Titulli vendoset midis tag-ut hapes <title> dhe tagut mbylles </title>. Titulli vendoset ne seksionin e kokës .

Komentet

Në HTML, ne mund të fusim komente në faqe duke e vendosur tekstin brenda tag-eve: <-! dhe --!>. Përmbajtja brenda këtyre dy shenjave injorohet ngabrowser-i dhe nuk shfaqet te përdoruesit.

Paragrafët

Tag-u përdoret për të ndarë paragrafët. Meqenëse HTML injoron ndërprerjen e rreshtave të marra nga skedari origjinal dhe i gjithë teksti është i vazhdueshëm për HTML, ne kemi nevojë për një mekanizëm për të treguar fillim dhe fundin e paragrafëve, ky mekanizëm është siguruar nga dhe .

Tag-u P mund të ketë gjithashtu një atribut ALIGN, që tregon drejtimin e tekstit në paragraf. Kjo mund të marre një nga vlerat e mëposhtme:

LEFT, e pozicionuar në të majtë.
RIGHT, e pozicionuar në të djathtë.
CENTRAL, teksti i qendërzuar

1.2.2 Ndërprerje rreshti

Tag-u tregon një ndërprerje rreshti. Ai mund të përdoret si një shenjë fillestare dhe nuk kërkon një tag mbyllës. BR nuk do të ndryshojë parametrat e përcaktuara për paragrafin në të cilin ne jemi të vendosur në këtë kohë.

1.2.3. Ndarja e teksteve në blloqe

Elementi <DIV> përdoret për të ndarë tekstin në blloqe duke futur një rresht të vetëm midis blloqeve si BR, edhe pse ai mund të ketë cilësi të njëjta, si P,

ne mund të përcaktojmë drejtimin e tekstit për secilin bllok DIV.

Parametri ALIGN te DIV merr vlerat e mëposhtme: LEFT

RIGHT

CENTRAL

1.2.4. Tekst i para-formatuar

Teksti i futur në mes të tag-eve <PRE> dhe </ PRE> do të shfaqet nga

browser-i në përputhje me formatin me të cilin teksti është shkruar duke lëne te pa ndryshuar çdo ndërprerje rresht apo hapësire.

Ne shembullin e mëposhtëm mund të shohim përdorimin e disa prej këtyre tag-eve.

<HTML>

<HEAD>

<TITLE>Rreth Shqipërisë </TITLE>

</HEAD>

<BODY>

Shqipëria ka një sipërfaqe prej 28.748 km2. Ajo është e pozicionuar në pjesën jug perëndimore të gadishullit Ballkanit dhe kufizohet në veri me Malin e Zi, në veri- lindje me Kosovën, në lindje me Maqedoninë dhe në jug e jug -lindje me Greqinë. Në perëndim vendi laget nga ujërat e deteve Adriatik dhe Jon. Shqipëria ndahet në katër zona fiziko - gjeografike (Alpet e Shqipërisë, Krahina Malore Qëndrore, Krahina Malore Jugore dhe Ultësira Perëndimore).

Klima e Shqipërisë është tipike mesdhetare, me verë të nxehtë e të thatë dhe dimër relativisht të butë dhe të lagët. Në pjesët malore, në brendësi të vendit veçanërisht në veri, dimri është i ashpër dhe me dëborë, ndërsa vera është e freskët me temperaturë të këndshme. </DIV>

Shqipëria është në përgjithësi vend malor. Malet dhe kodrat zënë 2/3 e sipërfaqes. Maja më e lartë e vendit është Korabi 2.763 m, në rrethin e Dibrës në veri - lindje të vendit. Ultësirat të cilat zënë 1/3 e sipërfaqes shtrihen përgjatë bregdetit Adriatik si dhe në zonën e Korçës në jug - lindje të vendit. </DIV>

<PRE>

Lumenjtë kryesorë janë: Drini, Vjosa, Shkumbini, Semani, Mati, Buna. Prej tyre vetëm Buna, në rrjedhën e poshtme është i lundrueshëm. Më shumë se një e treta e Shqipërisë është e mbuluar nga pyje. Një e treta është kullotë dhe vetëm rreth një e pesta është e kultivuar.

</PRE>

Shqipëria ka një pozicion mjaft të përshtatshëm gjeografik për zhvillimin e industrisë turistike me një akses mjaft të volitshëm ndaj tregjeve kryesore evropiane, me një potencial klimaterik shumë të favorshëm, me një shtrirje të gjatë plazhesh ende të pastra, dhe me male të lartë dhe liqene të shumtë të mëdhenj e të vegjël..

</CENTER>

</BODY>

</HTML>

Kodi HTML do të shfaqet si më poshtë:

1.3 FontetHTML përmban edhe tag-e për ndryshimin e atributeve te teksteve tona si fontin dhe ngjyrën.

1.3.1 Headers

Ekziston një element i quajtur <Hx> që në HTML mund ta përdorim për te përcaktuar pjesët e tekstit që duam ti konsiderojmë si headers (seksione,kapituj etj). Ky tag i cakton një madhësi më të madhe tekstit (në bazë të x, siç do ta shohim), e bën atë më të nxire (bold) si dhe vendos fillimin e një paragrafi mbas këtij header-i.

Madhësia e header mund të ndryshojnë nga 1në 6 dhe kemi 6 tag-e të mundshme: H1, H2, H3, H4, H5 dhe H6.

1.3.2 Font-et

Ne HTML përdoret tag-u FONT per ti dhene tekstit stile , ngjyra dhe efekte te ndryshme te cilat bejn qe ai te duket me i këndshem kur te afishohet ne faqen tone te web-it. Ne HTML 4.01 ky tag nuk përdoret dhe funksioni i tij zevendesohet duke përdorur CSS te cilen do ta studiojm ne vazhdim.

1.3.2 Font styles

HTML ofron një serë tag-esh te cilat mund te përdoren për ti vendosur stile te ndryshme tekstit qe ndodhet brenda këtyre tag-eve.

Disa prej tyre janë:

B (bold).

I (italics).

U (underlined).

STRIKE (strikethrough).

SUP (superscript).

SUB (subscript).

BLINK

TT (teletype).

BIG (big).

SMALL (small).

Ne HTML, ne mund te vendosim tekstit edhe disa stile njëkohësisht si mund te jete bold dhe italic si me poshtë:

Tekst me dy stile te ndryshme.

Me poshtë është paraqitur një shembull i cili ilustron përdorimin e stileve te sipërpërmendura.

<HEAD>

<TITLE> Titulli i dokumentit</TITLE>

</HEAD>

<BODY>

<h1>Header H1</h1>

<h2>Header H2</h2>

<h3>Header H3</h3>

<h4>Header H4</h4>

<h5>Header H5</h5>

<h6>Header H6</h6>

Font size

1 2

3 4

5 6

7 6

5 4

3 2

1

Colours

CO

LO

RE

S . D

E . L

ET

RA

S

Bold Italics Underlined

<strike>Strikethrough</strike> ASuperscript

BSubscript <blidhëz>Blidhëzing</blidhëz>

<tt>Typewriter(Teletype)</tt> <big>Big

text</big> Small text

</BODY>

</HTML>

Me poshtë jepet rezultati qe shfaqet në browser pas ekzekutimit të kodit te mësipërm.

Header H1

Header H2

Header H3

Header H4

Header H5

Header H6

Font size

1 2 3 4 5 6 7 6 5 4 3 2 1

Colours CO LO RE S . D E . L ET RA S

Bold

Italics

Underlined

~~Strikethrough~~

A^Superscript

B_Subscript

Blidhëzing

Typewriter(Teletype)

Big text

Small text

1.3.3 Vendosja e karaktereve të veçanta

HTML përdor disa kode te veçanta për të mundësuar shtypjen e karaktereve të cilat nuk i shkruajmë dot nga tastiera. Tabela e mëposhtme paraqet kodet dhe simbolin që ato përfaqësojnë.

Kodi

á, Á, é, É,...

¿

¡

º

ª

™ or 

©

®

<

>

&

"

Rezultati

á,Á,é,É,...

¿

¡

O

a

Trademark

Copyright

Registered

(non-breaking space)

<

>

&

"

1.4 Linket

Një nga tiparet kyçe te Web-it, e cila e ka bere dhe me te suksesshëm atë, është lidhja ndërmjet dokumenteve te cilat ndodhen ne servera te ndryshëm. Lidhja mund të behet me imazhe, audio, video si dhe me faqe web-i të tjera. Lidhjet mund te krijohen duke përdorur tag-un A dhe atributet e tije NAME, HREF,TARGET.

Nëse lidhëza bën lidhjen e faqes me një faqe tjetër, ku kjo e fundit është pjese e te njëjtit site atëherë lidhëza njihet si linke brendshme. Nëse lidhëza ju lidh me një faqe te re, por te site tjetër atëherë lidhëza njihet si linke jashtme. Gjithashtu mund te krijojmë një linke cila të na çoj në një pjese tjetër te së njëjtës faqe.

Një links pecifikohet me ane te tag-ut <a>. Çdo gjë që shkruhet midis tag-ut hapes <a> dhe tag-ut mbyllës </a> do te jete pjese e lidhëzës e cila pasi klikohet nga përdoruesi do të kaloj në faqen e re.

1.4.1 Linket ne një faqe te re WEB

Për të lidhur një faqe me një faqe tjetër nevojitet qe tag-u hapës <a> të përmbaj atributin href dhe vlera e atributit është emri i skedarit për tek i cili nevojitet te kalojmë.

Një shembull mund te jetë:

<body>

Kthehu tek <a href=”shembull1.html”>Shembulli i pare</a>

</body>

Nevojitet që të dy skedarët ( fshembulli1.html dhe shembull2.html) të gjenden në të njëjtën dosje. Kur të klikojmë mbi lidhëzë Shembulli i pare do të hapet faqja shembull1.html në të njëjtën dritare.

Nëse duam të kalojmë në një faqe te re te një site tjetër përsëri do të përdorim elementin <a> dhe atributin href por kësaj here duhet qe si vlere te atributit href te vendosim URL-në e plote faqes ku duam të shkojmë. Si p.sh :

<body>

A doni te vizitoni <a href=”http://www.uamd.edu.al/”>faqen e UAMD-se</a>?

</body>

Kur te krijoni lidhëza kini parasysh qe te përdorni fjale te cilat përkufizojnë në mënyrë sa me koncize faqen ku ju do te drejtoheni. Nga ana tjetër për te ndihmuar përdoruesin nga ana vizuale këshillohet që linket të ngjyrosen në mënyrë që të bëhen më të dukshme midis fjalëve të tjera te përmbajtjes së faqes.

Shume dizenjues te web-it përdorin imazhet brenda elementit <a>. Në rast se përdorni figurat duhet qe ajo te jete shpjeguese e mire e faqes tek e cila te drejton.

Brenda elementit <a> mund te përdoret edhe atributi title dhe vlera e tij do te jete shpjegimi qe ju doni te shfaqet ne rastin se afrojmë mousin mbi lidhëz. Ky trik është i vlefshëm sidomos ne rastet kur lidhëza është figure.

Kështu p.sh. shtojmë ne shembullin tone rreshtat e mëposhtëm:

<a href=http://www.google.com/ title=”Kerkimi ne Google”> Google </a> eshte nje motor kerkimi shume i fuqishem.

Ne figurën e mëposhtme jepet pamja qe na shfaqet ne browser mbas ekzekutimit te shembullit te mësipërm.

1.4.2 Lidhja e adresave email

Ne disa raste kemi pare qe ne faqe shfaqen adresat e personave te ndryshëm dhe pasi klikoni mbi to hapet një dritare e cila jep mundësin e dërgimit te një emaili adresës së sapo klikuar.

Për të krijuar një linkmbi një adrese email-i duhet te shtoni atributin href i cili si vlere duhet te ketë:

<a href=mailto:emer@shembull.com>emer@shembull.com </a>

LISTAT

Ka shume mundësi qe ne faqen tuaj te përdorni lista. Kështu p.sh. një opsion mund te jete kur kërkoni te listoni gjithë albumet qe keni apo ne rastin kur shpjegoni një procedure dhe shpjegoni hapat njëra pas tjetrës.

Ne HTML kemi tre lloje listash:

Unordered list qe jane ne formen e pikave te plota te mbushura
Ordered list qe jane nje sekuence me numra po shkronja
Definition list te cilat ju lejojnë juve te specifikoni nje simbol dhe perkufizimin e tij

Perdorimi i elementit <ul> per krijimin e listave unordered

Nqs deshironi te perdorni nje liste me pika përpara çdo opsioni atëherë ju nevojitet te perdorni elementin <ul> ( i cili qendron per unordered list). Çdo pike e mbushur ose çdo rresht qe ju shkruani duhet te vendoset brenda tag-ut hapes <li> dhe atij mbyllës </li> ( i cili qëndron për list item).

Nevojitet qe te mbyllni gjithmonë elementin <li>. Edhe pse disa faqe lejojnë qe te mos e përdorni tag-un </li> përsëri është shume e këshillueshme përdorimi i sakte i këtij tag-u mbylles.

Kështu një shembull mund te jete:

<html>

<head>

<title>Perdorimi i listave</title>

</head>

<body>

<ul>

<li>Perdorimi i listave ordered</li>

<li>Perdorimi i listave unordered</li>

<li>Perdorimi i lidhëzave</li>

<li>Perdorimi i email lidhëzave</li>

</ul>

</body>

</html>

Dhe ne faqen tone do te kemi një pamje te ngjashme me pamjen e mëposhtme:

Listat ordered

Nganjëherë mund te doni te përdorni lista orederd. Ne kete lloj liste ne mend te pikave te plota do te perdoren numrat (1,2,3...) ose shkronjat (A,B,C..) ose numrat romak (i,ii,iii...) si prefiks i çdo rreshti.

Kjo lloj liste përfshihet brenda elemenit <ol> i cili qendron per (ordered list). Cdo rresht i listes duhet te perfshihet brenda tageve <li> dhe </li> (i cili qëndron për list item).

Kështu p.sh shembulli shembulli i me siperm mund te përkthehet si:

<ol>

<li>Perdorimi i listave ordered</li>

<li>Perdorimi i listave unordered</li>

<li>Perdorimi i lidhëzave</li>

<li>Perdorimi i email lidhëzave</li>

</ol>

ne rast se nuk duam te përdorim numrat arabike por shkronjat apo numrat romake atëherë duhet te përdorim atributin type ne elementin <ol>.

Kështu p.sh :

Kështu nëse duam te përdorim numrat romake te vegjël për shembullin e mësipërm atëherë do te kishin kodin e mësipërm te ndryshuar ne:

<li>Perdorimi i listave ordered</li>

<li>Perdorimi i listave unordered</li>

<li>Perdorimi i lidhëzave</li>

<li>Perdorimi i email lidhëzave</li>

</ol>

por ne ditët e sotme ky atribut nuk përdoret me porse vendoset ne file CSS.

Ne rastin e listave ordered ju jepet mundësia jo vetëm e përzgjedhjes se llojit te pikësimit por edhe te përcaktoni se cili do te jete pikëzimi fillestare. Kështu për shembull ne rast se po përzgjidhni mundësinë e përdorimit te shkronjave te medhaja porse nuk doni qe shkronjat te fillojnë nga shkronja A por tek D atëherë cfare duhet te shtoni tek kodi jone është:

<li>Perdorimi i listave ordered</li>

<li>Perdorimi i listave unordered</li>

<li>Perdorimi i lidhëzave</li>

<li>Perdorimi i email lidhëzave</li>

</ol>

Dhe faqja do te marre pamjen e mëposhtme:

Listat e përcaktuara

Këto lloj listash janë një lloj i veçante listash te cilat na lejojnë te përdorim terma qe ndiqen prej një përshkrimi te shkurtër te tyre. Ne listat e përcaktuara termat përmbahen brenda elementit <dl>( i cili qëndron per definition list). Elementi <dl> përmban elementet <dt> dhe <dd> ne mënyre te alternuar. Përmbajtja e elementit <dt> është termi qe ju do te përcaktoni. Për shembull shembulli me poshtë përshkruan tipet e ndryshme ne XHTML:

Vazhdojmë te modifikojmë shembullin tone te mësipërm:

<dl>

<dt>Listave ordered</dt>

<dd>Perdorin pikeza te mbushura</dd>

<dt>Perdorimi i listave unordered</dt>

<dd>Perdorin numra po shkronja ne vend te pikëzave te plota</dd>

<dt>Perdorimi i listave te perkufizuara</dt>

<dd>Perdorin terma dhe perkufizime</dd>

</dl>

Dhe pamja e faqes sonë do te ndryshoj si me poshtë:

Listat e ndërfutura

Për ti komplikuar paksa shembujt e marre le te mundohemi te perdorim lista brenda listave. Kështu mund te keni raste kur doni qe elementin e një liste ta shndërrojmë ne një liste te veçante; një rast mund te jete shembulli i permbajtjes se nje libri ku kemi topics dhe nen cdo topics do kemi dhe nenceshtjes. Pra element do te vendoset brenda tageve hapes dhe mbylles <li> dhe ne nje rast vete elementi <li> do te permbaj nje liste te re. Vazhdojme me shembullin e marre dhe bejne modifikimet e meposhtme:

<li>Item i trete</li>

<li>Item i katert

</ol>

</li>

<li>Item i peste</li>

</ol>

Dhe pamja e faqes sone do te ndryshoj si me poshte:

Imazhet

Për të vendosur imazhet ose grafiket në një faqe Web përdoret një tag i vetëm i quajtur <IMG>. <IMG> ka disa atribute te cilat përcaktojnë se cilin skedar imazhi do te përdorim, madhësinë e tij etj. Atributi i cili përcakton imazhin qe do të shfaqet është SRC. Me anë të këtij tag-u ne mund te përcaktojmë një URL për skedarin e imazhit qe do të kërkohet në server për tu paraqitur në browser. Imazhi mund te jete i ruajtur ne çfarëdo direktorie mjafton qe vlera qe ne do ti japim tag-ut SRC te jete nje URL.

Nëse duam qe ti shtojmë një tekst imazhit tone përdorim atributin ALT.

Atributet WIDTH dhe HEIGHT përdoren për te përcaktuar përmasat me te cilat duam qe te shfaqet imazhi ne faqen e Web-it. Nëse ne nuk i përcaktojmë këto përmasa, browseri do ta shfaqi imazhin me përmasat qe ka vete imazhi.

Ky imazh do te shfaqej ne browser me ane te kodit te mëposhtëm.

<HTML>

<HEAD>

<TITLE>Document title</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Imazhet mund te krijohen ne menyra dhe formate te ndryshme. Browseri njeh formatet GIF,JPEG dhe PNG. Per te shmangur mungesat eshte mire te mos perdorim imzhe shume te medha.

Ushtrime

Ndertoni nje faqe web e cila te permbaje tekstet si me poshte:
1. emrin tuaj me ngjyre jeshile dhe font Tahoma.
2. Nje paragraph me 4-5 fjali ku secila prej tyre ka nje formatim ndryshe.

Ndertoni nje faqe web e cila afishon përshkrimin e një libri, sipër përshkrimit ndodhet titulli I librit I cili është I nënvijëzuar dhe me tekst te theksuar. Ne fund te pershkrimit vendosni nje imazh I cili përfaqëson kapaku i librit.

Afishoni ne nje faqe web nje imazh I cili ka nje border me madhesi 2,gjeresi dhe lartesi 200.

4. Ndertoni nje faqe web ku te ruani profiling Tuaj ne formen e nje CV te shkurtuar. Vendosni aty nje foto Tuajen. Perdorni headings dhe paragrafet. Perdorni, tagun <a> per te krijuar lidhje me profilin Tuaj ne facebook apo linked in. Perdorni listat per te ilustruar njohurite Tuaja kompjuterike dhe te gjuheve te huaja (gjuha, sqarimi, p.sh anglisht, shume mire , si ne llojin e trete te listave).