Teksti PDF

Universiteti
Aleksander Moisiu Durres
Fakulteti i Teknologjise se Informacionit
Lenda: Programim Web 1
Tema:Teksti, (Fontet, paragrafët, bold, italic, line
breaks, horizontal line etj.). Linket.
Pedagogu: Eda Tabaku

QELLIMI I LEKSIONIT
• Studentit te njihet dhe te aftesohet ne ndetimin e faqeve

web duke ilustruar perdorimin e fonteve, paragrafëve,
bold, italic, line breaks, horizontal line etj dhe linkeve.
STRUKTURA E
PERGJITHESHME E NJE
DOC.HTML
<html>
<head>
<title> Titulli i dokumentit</title>
</head>
<body>
Përmbajtja e dokumentit
</body>
</html>
KONCEPTE BAZE
• 1. Formati i emrave të file –ve është: .html ose .htm
• 2. Dokumentat html perbajne elemente te cilet quhen tag.
• 3. <emri_tag>permbajta e tagut</emri_tag>
• 4. Tagu hapes mund te shoqerohet me atribute. Atributet

jane karakteristika qe i jepen elementeve html.
<tag atribut1="vleraa” atribut2 ="vlerab”>

permbajtje</tag>
KRIJIMI I NJE WEB
FAQE
• Për të shkruajtur një dokument HTML (gjate ketij kursi

) do tepërdoret Notepad++.
• Hapat që ndiqen për të krijuar një dokument në
Notepad++ janë:
1. Hapet Notepad++ dhe New file.
2. Shkruhet kodi i HTML.
3. Kodi ruhet në formatin .html
4. Hapet faqja e krijuar në një nga browserat

MODIFIKIMI I NJE WEB
FAQE
• Për të bërë ndryshime në një faqe Web të krijuar në një
text editor dhe të hapur në një browser ndiqen këto
hapa:
• 1. Browseri me faqen HTML lihet hapur dhe kthehesh te

text editori.
• 2. Nëse faqja HTML nuk është e hapur në text editor

atëherë kjo faqe duhet hapur në text editor.
• 3. Kryhen ndryshimet e faqes HTML në text editor.
• 4. Ruhen ndryshimet e kryera.
• 5. Kthehesh te Web Browseri dhe klikohet butoni

Refresh.
TEKSTI NE HTML
• Dokumentet HTML mund te permbajne:
• tekste,
• imazhe,
• file multimediale,
• linke,
• tabela,
• lista,
• forma etj.
PARAGRAFET NE HTML
• Sintaksa
• permbajta e paragrafit 
• Atributi qe mund ti bashkengjitet tag –ut paragraf eshte atributi

ALGIN Vlerat e tij janë: LEFT, RIGHT,CENTRAL dhe
JUSTIFY.
• Për të krijuar një paragraf ndiqen hapat e mëposhtëm:

1. Vendoset në trupin dokumentit.
2. Shkruhet përmbajtja e paragrafit.
3. Vendoset për të mbyllur paragrafin.
• Shembull
• Ky eshte nje parakraf i thjeshte text ne HTML 

ATRIBUTET
• Atributet jane karakteristika shtese qe i vendosen tagut.
• Atributet vendosen gjithmone ne tagun hapes.
• Atributet kategorizohen ne 3 tipe:
• 1. Atribute Opsional (varen nga tipi i elementit)
• 2. Atribute Standarte ( id, class, titile, style, lang)
• 3. Atribute Ngjarjesh ( onclick, onmousedown,

onmouseup, onekey press etj)
• 4. Atribute te detyruar ( prezeca e tyre eshte e detyrar ne

nje tag ne menyre qe ai te kryej ne funksion te caktuar)
HTML Headings – TITUJT
• HTML headings përdoren kryesisht për emrat e kapitujve ose
të paragrafëve (seksioneve).
• Sintaksa
<hn>HTML Heading </hn> ku n=1,2,..,6,
• Për të krijuar një heading ndiqen hapat e mëposhtëm:

• 1. Vendoset <hn> në trupin e dokumentit.
• 2. Shkruhet përmbajtja e heading.
• 3. Vendoset </hn> për të mbyllur heading.
• Shembull:
• <h1>HTML Heading </h1>
Shembull ilustrues i
klasifikimit te heading sipas
madhesise
TEKSTI I PREFORMATUAR
• Sintaksa
• <pre> permbajta e paragrafit </pre>
• Shembull
RRJESHTI I RI
Shembull:
<html>
<body>

Emer Mbiemer 
emer1 mbiemer1, 
emer2 mbiemer2, 
emer3 mbiemer3, 
emer4 mbiemer4, 

</body>
</html>
 vs <prev> vs 
VIJA HORIZONTALE
• Sintaksa
<hr>
• Shembull
<html>
<body>
 Universiteti Aleksander Moisiu Durres
<hr>
 Fakulteti i Teknologjise se Informacionit 
<hr size="3" align="center" width="50%" color="blue">
</body>
</html>
Bold, italic, underline
• Sintaksa
• teksti ketu 
• teksti ketu 
• teksti ketu 
• Shembull
<html>
<body>
 Ky tekst eshte bold 
Ky tekst eshte italic 
Ky tekst eshte underline
</body>
</html>
Superscript dhe Subscript
• Sintaksa
• permbajta 
• permbajta 
• Shembull
<html>
<body>
Perdorimi i tagut subscript
Formula e ujit eshte H2O
Perdorimi i tagut superscript
Katrori i numrit 3 eshte 9. (32=81)
</body>
</html>
TAGET inserted dhe delete
• Sintaksa
• <ins> permbajta </ ins>
<del> permbajta </del>
• Shembull:
<html>
<body>
 <ins> Ky tekst eshte i nenvizuar nga poshte
</ins>
 <del> Ky tekst eshte me vije ne mes </del>
</body>
</html>
Disa font styles te
perdoreshem ne HTML
B (bold).
I (italics).
U (underlined).
STRIKE (strikethrough).
SUP (superscript).
SUB (subscript).
BLINK
TT (teletype).
BIG (big).
SMALL (small)
Detyre!
Provoni efektin e tyre ne perfshirjen Brenda trupit te nje
dok. html
Disa stile njëkohësisht
• Shembull
<html>
<body>
Tekst me dy stile te ndryshme.
</body>
</html>
KARAKTERE TE
VECANTE(Entitetet)
Shembull perdorimi i
entiteteve
HTML PA ENTITETE
<html>
<body>
 Përdorimi i entiteteve ne html 
 Kjo eshte faqa zyrtare e UAMD ®

</body>
</html>
HTML ME ENTITETE
<html>
<body>
 P&eumlrdorimi i entiteteve n&euml
html 
 Kjo &eumlsht&euml faqa zyrtare e
UAMD &reg &copy 
</body>
</html>
KOMENTET NE HTML
• Përmbajtja e komentit injorohet nga browseri dhe nuk
shfaqet te përdoruesit .
• Perdoren per te bere nje program me te lehte per tu

kuptuar.
• Caktivizojne ate pjese te kodit qe aktualisht nuk eshte I

nevojshem te perdoret
• Sintaksa
<! Komenti vendoset këtu >
Shembull
<html>
<body>
 Pershendetje 
<! Komenti vendoset këtu >
</body>
</html>
Ndarja e teksteve në blloqe
DIV vs SPAN
• Sintaksa DIV
<div> permbajta </div>
• Ndarës seksionesh, nuk ka atribut të kërkuar. Përdor

kryesisht style, class dhe id. Përdoret për formatimin
e një bllok elementësh (bllok – line).
• Sintaksa SPAN
• permbajta 
• Ndarës seksionesh, nuk ka atribut të kërkuar. Përdor

kryesisht style, class dhe id. Përdoret për formatimin
e një nje elementi (in – line).
Shembull DIV
<html>
<body>
<h1>Perdorimi i elementit div </h1>
<div style="backgroundcolor:lightblue">
<h3>Ky eshte nje heading ne nje element
div. </h3>
Ky eshte nje paragraf ne nje element
div.
</div>
Ky eshte nje paragraf jashte nje

elementi div.
</body>
</html>
Shembull SPAN
<html>
<body>
<h1>Perdorimi i span </h1>

Une studioj ne
FTI
dhe jam student i deges
Informatike
Anglisht

</body>
</html>
FONTET HTML
• Html permban tag dhe atribute qe i bashkengjiten tag

eve per ndryshimin e karakteristikave te teksteve si ne
font (stilistike) dhe ne ngjyre.
• HTML CSS
• CSS mund te shtohet ne 3 menyra:
• 1. Inline
• 2. Internal
Do te studiohen ne CSS
• 3. External
FORMATIMI I TEKSTIT
Formatimi i tekstit lidhet me:
• pozicionin e tekstit,
• tipin e shkrimit,
• madhësinë e shkrimit,
• ngjyrën e shkrimit
• ngjyrën e sfondit të shkrimit .

POZICIONIMI I TEKSTIT
• Pozicionimi horizontal i tekstit

Sintaksa
• align=”value”
• style=“textalign:value”
value mund te marr vlere: left, right, center, justify

• Pozicionimi Vertikal i tekstit
• Sintaksa
• valign=”value”
• style=“textvalign:value”
value mund te marr vlere: top, bottom, middle

Shembull – pozicionimi i
tekstit
<html>
<body>

Teksi eshte pozicionuar ne
qender
</body>
</html>
TIPI I SHKRIMIT
• Sintaksa
• style="fontfamily:Value“
• value mund te marr vlere: Times New Roman, Tahoma,
Calibri etj.
• Shembull
<html>
<body>

Teksti eshte shkruar ne tipin e shkrimit Algerian
</body>
</html>
MADHESIA E SHKRIMIT
• Sintaksa
• style=“font-size:value”
• Value mund te marr vlera: Numra nga 1-7, 100px – pixel, 100%
- përqind, 100pt - point
• Shembull
<html>
<body>

Teksti eshte shkruar ne me madhesi shkrimi 13 px

</body>
</html>
NGJYRA E SHKRIMIT
• Sintaksa
• style=“color:value”
• Value mund te marr vlera:
rgb(red_value,green_value,blue_value), color_name,
#red_valuegreen_valueblue_value, rgb(0%,0%,100%)
• Shembull
<html>
<body>
Ngjyra e tekstit
duke perdorur sistemin Hexadecimal
Ngjyra e
tekstit duke perdorur kodin
RGB
Ngjyra e
tekstit duke perdorur sistemin e
perqindjes
Ngjyra e tekstit duke
perdorur color name
</body>
</html>
• Sintaksa
NGJYRA E BACKGROUNDIT
• style=“backgraund-color:value”
• Value mund te marr vlera:

rgb(red_value,green_value,blue_value), color_name,
#red_valuegreen_valueblue_value, rgb(0%,0%,100%)
• Shembull
<html>
<body>
 Ngjyra e sfondit duke perdorur
sistemin Hexadecimal
Ngjyra e sfondit duke perdorur
kodin RGB
Ngjyra e sfondit duke
përdorur sistemin e peqindjes
Ngjyra e sfondit duke perdorur color
name
</body>
</html>
Disa karakteristika stilizimi
nje elementi
<html>
<body>
 Programim ne web 1 
</body>
</html>
HTML LINKS (lidhezat)
1. Linket dhe struktura e përgjithshme e linkeve.
2. Krijimi i linkeve me faqe të tjera. Linket te brendeshem

dhe linke te jashtem
3. Lidhja e linkeve në seksione në të njëjtën Web Page.
4. Lidhja e linkeve me adresën e email (email links) dhe

shkarkimi I skedarëve .
5. Stilizimi i Link
STRUKTURA E PERGJITHESHME
• Linket ose Hyperlink lidhin faqet HTML dhe burime të tjera
informacioni(foto, video, dokumente etj) në një faqe Web.
• Përdorimi i linkeve në një Web Site i mundëson përdoruesve të

faqes të lidhen me Web Site të tjera, me një faqe tjetër në këtë
Web Site si edhe të lokalizohen në të njëjtën faqe.
• Sintaksa:
• <a href=“Web Adresa”>Emri i linkut</a>
• Shembull
<html>
<body>
<h2>HTML Links</h2>
<a
href="https://www.uamd.edu.al">Vizitoni
faqen zyrtare te Uamd</a>
</body>
</html>
KATEGORITE E LINKEVE
• Linke te brendeshem jane ata linke të cilët përdorin shorthand
(specifikon pjesën epathit deri në folderin aktual) për të specifikuar
URL për një burim tëcaktuar. Këto linke përdoren kryesisht për të
lidhur faqe të ndyshme të njësite. Përdoren kryesisht për të dhënat
që ndodhen brenda një folderi meWeb Page.
• Linke te jashtem janë ata linke të cilët përfshijnë adresën e plote

URL për të lidhur browserin me një faqe Web. Këta linke kanë
adresën e plotë e cila fillon zakonisht me: http://www.... Çdo Web
Page ka URL e vet. Një URL e fillon me domain name e faqes dhe
mund të ndiqet nga rruga (path) për një faqe specifike
• DETYRE!
Lidhja e linkeve në seksione në të njëjtën Web Page
Lidhja e linkeve me adresën e
email (email links)
• Sintaksa
• <a href=“mailto:name@mailaddresss.com”> email_name</a>
• Shembull
<html>
<body>
<h4>Email Addresses</h4>
<a href="mailto:
e.tabaku@hotmail.com"> Per cdo pyetje
me shkrani ne email </a>
 
 
Eda Tabaku, pedagoge e lendes Program
ne Web 1
</body>
</html>
STILIZIMI I LINKeve
1. Hapja e linkeve në një dritare të re (atributi target)
Sintaksa:
<a href="Web address" target="_value">Link_name</a>
Value mund te marr vlera:_self, _blank, framename
2. Vendosja e titullit të linkut (atributi title)
Sintaksa:
a href="Web address" title="_value">Link_name</a>
Value mund te marr vlere: Text
3. Vendosja e ngjyres se emrit te nje linku
Do ta studiojme ne CSS
Detyre !
Ilustroni me shembull stilizimin e linkut.
PYETJE
Fund
Falemiderit
Email: e.tabaku@hotmail.com

Teksti PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Teksti PDF

Uploaded by

Copyright:

Available Formats

Universiteti

Pedagogu: Eda Tabaku

• Studentit te njihet dhe te aftesohet ne ndetimin e faqeve

• 1. Formati i emrave të file –ve është: .html ose .htm

• 2. Dokumentat html perbajne elemente te cilet quhen tag.

• 4. Tagu hapes mund te shoqerohet me atribute. Atributet

<tag atribut1="vleraa” atribut2 ="vlerab”>

• Për të shkruajtur një dokument HTML (gjate ketij kursi

2. Shkruhet kodi i HTML.

3. Kodi ruhet në formatin .html

4. Hapet faqja e krijuar në një nga browserat

• 1. Browseri me faqen HTML lihet hapur dhe kthehesh te

• 2. Nëse faqja HTML nuk është e hapur në text editor

• 3. Kryhen ndryshimet e faqes HTML në text editor.

• 4. Ruhen ndryshimet e kryera.

• 5. Kthehesh te Web Browseri dhe klikohet butoni

• Dokumentet HTML mund te permbajne:

• <p> permbajta e paragrafit </p>

• Atributi qe mund ti bashkengjitet tag –ut paragraf eshte atributi

• Për të krijuar një paragraf ndiqen hapat e mëposhtëm:

• <p> Ky eshte nje parakraf i thjeshte text ne HTML </p>

• Atributet jane karakteristika shtese qe i vendosen tagut.

• Atributet vendosen gjithmone ne tagun hapes.

• Atributet kategorizohen ne 3 tipe:

• 1. Atribute Opsional (varen nga tipi i elementit)

• 2. Atribute Standarte ( id, class, titile, style, lang)

• 3. Atribute Ngjarjesh ( onclick, onmousedown,

• 4. Atribute te detyruar ( prezeca e tyre eshte e detyrar ne

• Për të krijuar një heading ndiqen hapat e mëposhtëm:

• <pre> permbajta e paragrafit </pre>

Emer Mbiemer <br>

• <b> teksti ketu </b>

• <i> teksti ketu </i>

• <u> teksti ketu </u>

<p><b> Ky tekst eshte bold </b></p>

<p><i>Ky tekst eshte italic </i></p>

<p><u>Ky tekst eshte underline</u></p>

• <sup> permbajta </sup>

• <sub> permbajta </sub>

<p>Perdorimi i tagut subscript</p>

<p>Formula e ujit eshte H<sub>2</sub>O</p>

<p>Perdorimi i tagut superscript</p>

<p>Katrori i numrit 3 eshte 9. (3<sup>2</sup>=81)</p>

<B><I>Tekst me dy stile te ndryshme.</I></B>

• Perdoren per te bere nje program me te lehte per tu

• Caktivizojne ate pjese te kodit qe aktualisht nuk eshte I

<!­ ­ Komenti vendoset këtu ­ ­>

<div> permbajta </div>

• Ndarës seksionesh, nuk ka atribut të kërkuar. Përdor

• <span> permbajta </span>

• Ndarës seksionesh, nuk ka atribut të kërkuar. Përdor

<h1>Perdorimi i elementit div </h1>

<p>Ky eshte nje paragraf jashte nje

• Html permban tag dhe atribute qe i bashkengjiten tag­

• CSS mund te shtohet ne 3 menyra:

Formatimi i tekstit lidhet me:

• ngjyrën e sfondit të shkrimit .

• Pozicionimi horizontal i tekstit

value mund te marr vlere: left, right, center, justify

value mund te marr vlere: top, bottom, middle

• Value mund te marr vlera:

1. Linket dhe struktura e përgjithshme e linkeve.

2. Krijimi i linkeve me faqe të tjera. Linket te brendeshem

<! Komenti vendoset këtu >

• Html permban tag dhe atribute qe i bashkengjiten tag

4. Lidhja e linkeve me adresën e email (email links) dhe

• Linke te jashtem janë ata linke të cilët përfshijnë adresën e plote