Professional Documents
Culture Documents
HTML Dengiz e
HTML Dengiz e
SISTEMET OPERATIVE
TEMA:
HTML
Mentori: Kandidati:
inxh. i dipl. Florina Mullafetahu Dengiz Edreneli
Maj 2005,
Prizren
PËRMBAJTJA
HYRJE NË HTML
1
Në lidhje me HTML, Sqarim ------------------------------------------------------------------------------- 1
ETIKETAT THEMELORE
4
Etiketa Center, Bold, Italic, Underline; Ndarjet e Rreshtave (Line Breaks) -------------------- 4
Etiketa Paragraph, Blockquote, Horizontal Rule ----------------------------------------------------- 5
FONTET (TEKSTI)
6
Font Face (Stili i Fontit), Font Size (Madhësia e Fontit) -------------------------------------------- 6
Font Color (Ngjyra e Fontit) -------------------------------------------------------------------------------- 7
GRAFIKË
9
Etiketa Image -------------------------------------------------------------------------------------------------- 9
Madhësia e Fotografisë (Image Size), Renditja e Fotografisë (Image Alignment) ----------10
Radhitja e Fotove së bashku me Tekstin -------------------------------------------------------------- 11
Përmbledhje -------------------------------------------------------------------------------------------------- 13
Indeks ---------------------------------------------------------------------------------------------------------- 14
HTML është shkurtesa e fjalës Hyper Text Markup Language.
Është një gjuhë programuese e cila përmban komanda (urdhëra) për ndërtimin e një
dokumenti hypertekst, i cili mund të përmbajë të dhëna në formate të ndryshme, si: tekste,
figura, muzikë dhe video klipe.
Duke e përdorur gjuhën programuese HTML mund të krijohen web faqe të ndryshme,
varësisht nga dëshira juaj.
Në gjuhën programuese HTML përdoren edhe teknologji të tjera të cilat luajnë rolin e
ndihmësit. Këto lehtësojnë punën në dizajnimin e faqes. Shkruhen si nënprograme dhe
pastaj thirren sa herë që ka nevojë të përdoren.
Këto teknologji janë: Java, JavaScript, CSS (Cascading Style Sheets), CGI (Common
Gateway Interface), VBScript (Visual Basic Script), por mund të ketë edhe teknologji të
tjera.
Në lidhje me HTML
Të gjitha etiketat (komandat) janë të mbyllura me kllapat < >, të cilat mundësojnë që
komanda e shkruar të mos shihet kur faqja është në punë. Browser-i juaj i rrjetit e lexon
komandën e shkruar dhe e përkthen atë në gjuhën e kompjuterit përderisa kllapat janë të
mbyllura.
Etiketa e fillimit (hapjes) është ajo e cila gjeneron një urdhër (komandë) për leximin e
browser-it. Për shembull, i gjithë teksti që vijon <b>duhet të duket i trashë (bold),
përderisa etiketa e mbarimit (mbylljes) është e shkruar brenda në kodim. Etiketa e
mbarimit përbëhet me shtimin e shenjës / në etiketë.</b>
Etiketat e HTML-së nuk janë gjëra të ndijshme. Ashtu që <html> është krejtësisht i njejtë
sikurse <HTML>. Megjithëse për shkak të ndryshimeve që mund të ndodhen më vonë
është e preferushme që të përdoren shkronjat e formatit të vogël. Por mbani në mend,
emrat e figurave dhe url-të e web faqeve janë të ndijshme. Kështu që kur përmbahen këto
në ndonjë etiketë të HTML-së duhet të jeni të sigurtë se ato janë të shkruara saktësisht
ashtu si duken në shiritin e adresave.
Sqarim
1
FORMATI I WEB FAQES
Të gjitha dokumentet e HTML-së (web faqet) duhet të përdorin këtë format themelorë si bazë,
në të cilën do të mbështetet faqja. Ky format është i përkryer me katër palë të etiketave, të
cilët janë:
Etiketa e HTML-së tregon browserit tuaj se faqja është një dokument HTML. Etiketa <html>
duhet të jetë patjetër etiketa e parë në dokumentin tuaj HTML. Dhe etiketa </html> është
etiketa e fundit në dokumentin HTML.
Etiketat <head> përmbajnë etiketat e titullit të faqes, etiketat META të cilët janë makina të
kërkimit, që përdoren për të hartuar treguesin e faqes suaj, ndonjë etiketë bazë të HTML-së,
dhe disa kode të javascript-it. Sa për tani nuk duhet të koncentroheni në etiketat META,
etiketat bazë të HTML-së, dhe kodet e javascript-it, sepse këto do të diskutohen më vonë.
Ju mund të ndërtoni web faqe edhe pa këto etiketa, dhe të shtoni ato më vonë kur ju bëheni të
rahatshëm me gjuhën programuese HTML.
Etiketat <title> janë të vendosura ndërmjet etiketave <head>, dhe përfshijnë titullin e faqes
ashtu si duket në shiritin e gjendjes (status bar), në anën e majtë në këndin e lartë të ekranit.
Ky titull nuk shfaqet në web faqen tuaj. Ky titull do të jetë përshkrues i faqes suaj, por jo më
tepër se 64 simbole me gjatësi.
Etiketat <body> janë aty ku ju vendosni tërë përmbajtjen (tekstet, fotografitë, dhe lidhjet) që ju
dëshironi të shihen në faqen tuaj. Etiketa body e fillimit është poashtu vendi ku ju mund të
cilësoni ngjyrën e sfondit (background), ngjyrën e tekstit, lidhjeve (link) dhe ngjyrën e lidhjeve
të vizituara (vlink).
Më poshtë do të shihni se si ato duhet të jenë të rregulluar. Aty përfshihen një palë e etiketave
META në pjesën e etiketës head, dhe vetit themelore përbrenda etiketës body të fillimit.
Ju mund të kopjoni dhe të ngjitni (copy & paste) këto kode në tekst editorin tuaj në momentin
kur ndiheni të gatshëm të filloni dizajnimin e web faqes suaj.
<html>
<head>
<title>Titulli i Faqes Suaj Këtu</title>
<META name="description" content="Përshkrimi i faqes suaj këtu”>
<META name="keywords" content="Fjalët kyqe lidhur me faqen tuaj shkruhen këtu”>
<base href="http://www.faqjajuaj.com/">
</head>
<body bgcolor="ngjyra" text="ngjyra" link="ngjyra" vlink="ngjyra”>
E gjithë përmbajtja e faqes suaj shkruhet këtu..!
</body>
</html>
2
Tiparet (Attributes):
Shumë etiketa të fillimit të HTML-së lejojnë të shtohen tiparet. Këto tipare në aspekte tjera e
kanë kuptimin e formatizimit të web faqes suaj. Tani të përdorim etiketat body nga kodi i
mësipërm, për të shpjeguar këto tipare.
<body bgcolor="ngjyra" text="ngjyra" link="ngjyra" vlink="ngjyra”>
Nëse ne nuk përdorim këto tipare, web faqja jonë do të dukej me ngjyra të paplotësuara
(default colors). Me zëvendësimin e fjalës "ngjyra" me ndojnë emër të ngjyrës, ose me shifra
heksadecimale, ne mund të ndërojmë ngjyrat e paplotësuara.
Etiketa e mësipërme body, do të na jepë një faqe me sfond të ngjyrës së zezë, tekst të
bardhë, lidhje të ngjyrës së artë, dhe lidhje të vizituara me ngjyrë vjollce.
Të sypozojmë që ju keni një sfond me ngjyrë fildishi të cilën e kishit përdorur, me tekst të
zezë, lidhje të kaltërta dhe lidhje të vizituara me ngjyrë të kuqe. Sfondi pra, background="" do
të përmbush këtë. Tani shikoni se si kodi do të dukej.
Vërejtje: Ne ende nuk e kemi caktuar ngjyrën e sfondit (zgjedhni një ngjyrë sa më të mbyllur
që është i mundshëm për sfondin tuaj) ashtu që faqja nuk hapet me ngjyrën e paplotësuar
përderisa figura e sfondit ngarkohet. Poashtu, nëse ju vendosni këtë -->
http://www.yourdomainname.com/ në <base href=""> në pjesën ku ndodhet head, ju mund të
shkurtoni url-në në tiparet e sfondit tuaj që të shihet kështu.
background="directory/ivory.gif”
3
ETIKETAT THEMELORE
Këto faqe përmbajnë shumë nga etiketat që ju do të përdorni në krijimin e web faqes suaj.
Shtimi i çdo etikete për paraqitje, do t'ju tregojë juve se si kombinohen etiketa të ndryshme
dhe tiparet për efekte të tjera.
Etiketa Center:
Etiketa <center> përdoret për të vendosur tekstet, fotografitë, dhe tabelat (ose ndonjë
kombinim i tyre) në qendër të web faqes suaj. Etiketa center kërkon një etiketë për mbarim
(mbyllje) pra, </center>.
Etiketa Bold:
Etiketa <b> shëndron tekstin në një pamje më të trashë. Kjo etiketë poashtu kërkon një etiketë
për mbarim, </b>.
Etiketa Italics:
Etiketa <i> shkakton që teksti të duket i pjerrët, dhe kërkon etiketë për mbyllje, </i>.
Etiketa Underline:
Etiketa <u> e nënvizon tekstin, dhe kërkon një etiketë për mbyllje, </u>.
<center><b><i><u>
Teksti i trashë, i pjerrët dhe i nënvizuar në qendër
</u></i></b></center>
Vërejtje: Mbani në mend se etiketat janë të mbyllura me renditje nga etiketat e fillimit.
<center><b><i><u><br>
Teksti i trashë, i pjerrët dhe i nënvizuar në qendër<br>
</u></i></b></center>
4
Etiketa Paragraph:
Etiketa <p> kapërcen një rresht dhe fillon një kryeresht të ri, poashtu edhe në këtë etiketë nuk
ka nevojë për mbyllje. Renditja e paplotësuar (default alignment) për këtë etiketë është në të
majtë. Por, me shtimin e tipareve në vijim, align="right" ose align="center", në etiketë ju mund
të ndëroni radhitjen e paplotësuar.
Etiketa Blockquote:
Etiketa <blockquote> përdoret për dhëmbëzimin e një pjese të tekstit, dhe kërkon një etiketë
për mbyllje, që është </blockquote>.
<hr width="50">
<hr width="50%">
Align, në rastin kur nuk janë të plotësuar karakteristikat është në qendër, por me shtimin e
karakteristikave në vijim align="right" ose align="left" kjo mund të ndërohet.
5
FONTET (TEKSTI)
Teksti i përdorur në web faqen tuaj kontrollohet nga etiketa e fonteve, dhe kërkon një etiketë
për mbyllje </font>. Të tre karakteristikat e fonteve janë:
face="emri i fontit"
size="numri"
color="emri i ngjyrës ose numri heksadecimal"
Ne do të diskutojmë etiketën e lartëpërmendur dhe shkurt tiparet e saj. Por së pari disa gjëra
të mbajmë në mend..!
Sikurse teksti (stili dhe ngjyra e fontit) që duket tek ndonjëri, mbështetet plotësisht në
kompjuterin dhe browserin që e përdorin. Fonti i papërcaktuar (default font) në kompjutera
është Times New Roman, dhe ngjyra e papërcaktuar është ngjyra e zezë. Kështu që nëse ju
përpunoni fontin dhe personi që viziton faqen tuaj nuk e ka atë font në kompjuterin e vet...çka
sypozoni! Faqja juaj do të duket me tekstin e paraqitur në font të papërcaktuar (default font).
E njejta vlen edhe për ngjyrën e fontit. Të gjitha ngjyrat nuk duken njejtë nga gjithë browser-ët.
Pra, më mirë është të përdoret njëra nga ngjyrat e sigurta, që ato të duken njejtë nga të gjithë
browser-ët.
Ju mund të ndërroni tekstin e web faqes suaj duke ndërruar njërën ose të gjitha nga këto
karakteristika. Ju poashtu mund të shtoni fonte alternative (të ndryshme) në atributin face
duke veçuar emrin e fontit me një presje. Këtu është një shembull:
6
font size="6"
font size="7”
Ju poashtu mund të cilësoni një madhësi relative të fontit. Kjo është e bazuar në përdorimin e
shenjës së një minusi (-) apo të një plusi (+) dhe një numër çfarëdo (prej 1 deri 7) të
madhësisë së papërcaktuar. Këtu janë shembujt:
font size="-2"
font size="-1"
Default font size="3"
font size="+2"
font size="+3"
font size="+4”
Font Color (Ngjyra e Fontit)
Ngjyra e fontit mund të përcaktohet duke e përdorur emrin e ngjyrës ose kodin heksadecimal.
Por, këtu browser-i i vjetër prapë bie në lojë..! Të gjitha emrat e ngjyrave nuk janë të njohur
nga të gjitha browserët, dhe kodet heksadecimale nuk shihen njejtë nga të gjithë browser-ët.
Këtu janë disa shembuj të emrave të ngjyrave dhe kodeve heksadecimale përkatëse për atë
emër të ngjyrës.
Red ~ #990033
Green ~ #008000
Blue ~ #3333ff
Black ~ #000000
N ë rregull..! Tani do të shohim se si etiketa e fontit (font tag) dhe karakteristikat e tij mund të
kombinohen, dhe të përdoren veçanërisht, për të formatizuar tekstin e web faqes suaj. Ne poashtu
do të përdorim disa nga etiketat themelore nga faqja e mëparshme. Ju me siguri nuk
dëshironi që faqja juaj të duket kështu, por kjo është mënyra më e shpejtë dhe më e lehtë për të
parë efektet e çdo etikete dhe çdo karakteristike. Dhe tani në vazhdim do të shohim kodimin e HTML-
së që është përdorur për të krijuar këtë tekst.
Kjo pjesë e tekstit që është ndërmjet vijave është i fiksuar për të na treguar përdorimin e
papërcaktimit për stilin e fontit, Madhësinë, dhe ngjyrën. Kështu që, me shtimin e këtyre etiketave dhe
karakteristikave të ndryshme ndryshimet do të jenë
7
Këtu është kodimi që ne kemi përdorur për të formuar paragrafin e mëparshëm.
8
GRAFIKË
Figurat grafike, me të vërtetë mund të zmadhojnë një web sajt. Ekzistojnë shumë sajte që
janë falas për grafikë ku ju mund të merrni figura për sajtin tuaj, dhe disa që kërkojnë një lidhje
në sajtin e tyre. Ju mund të transferoni (upload) fotografitë e juaja (me zgjatje .jpg), ose mund
të krijoni fotografitë e juaja me programe të ndryshme si p.sh.: PaintShop Pro, CorelDraw etj.
Për të përdorur një fotografi në web sajtin tuaj ju duhet të transferoni atë në udhëzuesin e
dosjeve në serverin e web sajtit tuaj. Shumë prezentues të rrjetit (web hosts) siguron aftësin e
transferimit të fotografive, apo ju mund të përdorni njërën nga shumë ftp (File Transfer
Protocol - Protokoli për Transferimin e Dosjeve) programe që janë në dispozicion.
Shfrytëzuesit e WebTV duhet të transferojnë dhe të ngarkojnë (transload) fotografinë në
administratorin e dosjeve.
Mos u lidhni drejtpërdrejt tek fotografitë në ndonjë sajt tjetër..! Kjo mund të krijojë një shirit të
gjërë të problemeve për pronarin e atij sajti, dhe nëse fotografia është e lëvizur ose e larguar
nga vendi ajo më aspak më shumë nuk do të shihet në web faqen tuaj.
Etiketa Image:
Ekzistojnë shumë tipare që mund të përdoren me etiketën image, por këtu është një etiketë
themelore e fotografisë. Duket kështu:
1.. img tregon browserit se ai është duke e lexuar një etiketë për fotografi (image tag).
2.. src="" tregon browserit se ku të kërkon fotografinë. Kjo është vendi ku url-ja
(Uniform Resource Locator) është vendosur.
3.. width="??" dhe height="??" pëdoret për të treguar browserit madhësinë e
fotografisë në pixela. Simbolet ? mund të zëvendësohen me ndonjë numër që tregon
madhësinë e fotografisë në pixela. Këto tipare janë shumë të rëndësishëm në ndihmesën e
ngarkimit të shpejtë të web faqes suaj. Browseri nuk duhet të pret derisa ai e gjen fotografinë
për të parë se sa e madhe është ajo. Ai lexon tiparet, ruan hapësirën e shpërndarë në faqe,
dhe vazhdon leximin e pjesës tjetër të kodimit tuaj të html-së. Këto tipare poashtu mund të
përdoren për rindryshimin e fotografisë në faqen tuaj. Do të diskutojmë dhe do të japim
shembuj më vonë për këtë.
4.. alt="emri ose përshkrimi i fotografisë" - kjo karakteristikë nuk është i nevojshëm për
fotografinë të duket në faqe. Por është ide e mirë të bëhet i zakonshëm që të përmbahet edhe
kjo në të gjitha etiketat për shkaqet në vazhdim.
Disa njerëz e shfrytëzojnë internetin me browser-ët që janë vetëm për tekst, ose grafikët e
prishur, për shfrytëzimin më të shpejtë. Karakteristika alt u tregon atyre se ekziston një
fotografi, dhe çka është ajo. Nëse ju përdorni një fotografi si lidhje në një faqe tjetër ju mund të
përdorni atributin alt që vizitori ta ketë një përshkrim të shkurtër të faqes.
9
Madhësia e Fotografisë (Image Size):
Kjo fotografi është 264 pixela në gjërësi dhe 266 në gjatësi, dhe tiparet në etiketë duken sikur
në vijim...
pra, width="264" height="266”. Këtu është një fotografi me atributet width="" dhe height="" të
cilët janë të ndëruar në 427 dhe 431 pixela.
Ju mund të ndëroni atributet width="" dhe height="" në çfarëdo numri që ju dëshironi. Por
nëse ju nuk e mbani të proporcionuar me madhësinë origjinale fotografia do të bëhet e
shtrembëruar.
Kjo fotografi tregon papërcaktimin e renditjes në të majtë. Këtu është etiketa e fotos e
përdorur për të vendosur atë në faqe,
10
Fotoja e vendosur në qendër të faqes
Atributi align="top".
Nëse keni më shumë se një rresht të tekstit veni re se si rreshti i dytë ulet në fund të
fotografisë.
Kjo mund të fitohet me përdorimin e atributeve align="left" dhe align="right", dhe tani
shpjegimi më poshtë.
Atributi align="middle”
Atributi align="bottom”
Ju mund të keni mbështjellësen e tekstit rreth fotografisë nëse shtoni etiketën e fotos pra,
11
Këtu është një trik i shkurtër..! Vendosni dy etiketa të fotove
së bashku përdoren atributet align="left" dhe align="right" të përcjellur nga teksti juaj. Ju do të
fitoni efektin e treguar, "teksti shfaqet në mes të fotove".
Nëse dëshironi ende hapësirë në mes të fotos dhe tekstit mund të shtoni atributet hspace dhe
vspace në etiketën e fotografisë,
12
PËRMBLEDHJE
Megjithëse ekziston shumë për HTML-në se sa që është përmbajtur në këto faqe. HTML-ja e
përfshirë këtu është shumë i përshtatshëm sa për fillim. Në të vërtetë, ju mund të mos merrni
parasysh faqet dhe të gjitha ato të cilat ju nevojiten që të filloni një web faqe themelore.
HTML është verzioni teknologjik i "Simon Says". Ju po i jepni browserit një komandë, dhe po i
tregoni atij se si të funsionon ajo komandë. Dhe poashtu po i tregoni se kur të mbyllet.
Meqë është lehtë të mësohet, HTML mund të jetë shumë i pafalshëm. Njejtë edhe atyre që
kanë qenë në te për krejtësisht pak kohë. Shumë probleme vijnë nga gjëra të vogla të cilat
janë të haruara apo të vendosura gabimisht. Për shembull, mungesa e një simboli (") apo <,
një etiketë e mbylljes, apo një gabim në drejtshkrim apo një hapësirë në url. Ashtu që nëse
keni problem në faqen tuaj së pari filloni të kontrolloni këto gabime të vogla. Pas pak kohe ju
do të jeni në gjendje të tregoni se çka është gabim për vetëm me një shikim në faqe të
browserit tuaj.
Ndërsa dhurata e dytë më e mirë është motoja nga WebTV Help sajti:
"It's not how much you know that counts, it's knowing where to find that which you don't know
that counts...!
Shpjegimi i motos së mësipërme është se, njeriu mesatar që nuk punon çdo ditë me HTML,
nuk do të kujton të gjitha kodet dhe atributet. Sapo mos të provoni ..! Më mirë mbani një libër
adresimi. Kjo mund të jetë nga shënimet e dorëshkrimit në një fletore, në një fajll në
kompjuterin tuaj, të ruani sajte të mira adresimi në folderin e preferuar. Çfardo që punon është
mirë për ju..!
13
INDEKS
A W
Align -------------------------------- 5 Width ----------------------------- 10
Alt ----------------------------------- 9
B
Body -------------------------------- 2
Bold --------------------------------- 4
Br ------------------------------------ 4
Blockquote ------------------------ 5
C
Center ------------------------------ 4
F
Font --------------------------------- 6
H
Head ------------------------------- 2
Html -------------------------------- 2
Hspace ---------------------------12
Hr ----------------------------------- 5
Height ---------------------------- 10
I
Italics ------------------------------- 4
Img --------------------------------- 9
N
Noshade -------------------------- 5
P
P ------------------------------------ 5
S
Size -------------------------------- 5
T
Title -------------------------------- 2
U
Underline ------------------------- 4
V
Vspace ---------------------------12
14
Literatura u morr nga:
WebTutor v4.1