dizajnimi i web-faqeve - informatika shqiptareitshqip.com/tutoshqip/html1.pdfdetyra • te krijohet...

DIZAJNIMI I WEB-FAQEVE

www.TutoShqip.com – Tutoriale Shqip

Tutoshqip .com 2013 © copyright

http://www.tutoshqip.com/

World Wide Web ?

• Permbledhja globale e te gjitha webfaqeve dhe nderlidhja e tyre me ane te Internetit.

• Te gjitha faqet e Internetit qe kane qasje ne Internet e perbejne WWW

• Mbi 250 milion web faqe

Web Design (Ueb Dizajn) ?????

• Aftësia e krijimit te nje prezantimi për përdorues nëpërmjet WWW

Website (uebfaqe) ???

• Një faqe interneti është një përmbledhje ueb faqeve të lidhura, imazhe, video ose formate tjera dixhitale që janë të adresuara me një Domain Name të përbashkët ose IP address në një rrjet Internet

Llojet e Uebfaqeve ?

• Statike

• Dinamike

Uebfaqe Statike ?

• Një faqe interneti që gjithmonë përmban të njëjtin informacion në përgjigje të gjitha kërkesave të drejtuara nga të gjithë përdoruesit

Uebfaqe Dinamike ?

• Përmbajtja në një faqe interneti mund të ndryshojë, në përgjigje të konteksteve të ndryshme ose kushteve të ndryshme

Kërkesat Harduerike ?

• PC ( Personal computer)

• Internet

Markup languages ?

• Eshtë një kombinim i fjalëve dhe simboleve që i japin udhëzime se si një dokument duhet të paraqitet

Markup languages ?

• HTML

• XHTML

• Extensible Hypertext Markup Language

Hypertext ???

• Hypertext – Super tekst ose pertej tekstit (gre)

• Hypertext na lejon inkorporim të lehtë të tekstit, imazhe, tabela, dhe formatimin në një dokument dhe lidhjen me dokumente të tjera HyperText ose HyperLinks.

HTML – Hypertext Markup Languages

Dy opsione per dizajnimin e HTML uebfaqeve:

• FrontPage, Microsoft Word, Adobe Dreamweaver etj….

• Mesimi i HTML code dhe shkrimi i tij permes nje tekst editori (NotePad)

HTML code !?

• Nese deshirojm te zhvillojm nje webfaqe profesionale perdorimi i veglave nuk mjafton.

• Code eshte kaotike, mirembajtja shume e veshtire

• Nese deshirojme te zhvillojme webfaqe dinamike patjeter duhet te dime HTML

• Forma (Dergim – Pranim)

• Etj etj etj …….

Veglat e nevojshme (Tools) ?

• Tekst editor ( NotePad)

• Shfletues (IE, Chrome, Firefox, etj)

FILLOJME

<HTML>

Pershendetje te gjitheve

</HTML>

<HTML> dhe </HTML> - Tags

<HTML> </HTML> - fillon dhe mbaron

HTML code Header

• Secila Html faqe ka Header.Headeri permban informacione te rendesishme rreth faqes.

• <HEAD> dhe </HEAD> - Tags

• <HTML>

<HEAD> …. </HEAD> </HTML>

HTML – Titulli i faqes

• Një nga pjesët më të rëndësishme të një Header –it është titulli.

• <TITLE> dhe </TITLE> - tags

• <HTML> <HEAD> <TITLE> Titulli i faqes </TITLE> </HEAD> </HTML>

HTML – TRUPI I WEB FAQES

• <BODY> dhe </BODY> - tags

• BODY vjen pas mbylljes se TAGS </HEAD>

• <HTML>

<HEAD>

<TITLE>Titulli i faqes</TITLE>

</HEAD>

<BODY>

Mire se vini ne web faqen time. ……

</BODY>

</HTML>

HTML – PRAPAVIJA (BACKGROUND) • <BODY BGCOLOR="#xxxxxx"> - tags

• <HTML>

<HEAD>

<TITLE>Titulli i faqes</TITLE>

</HEAD>

<BODY BGCOLOR="#00FF00">

Prapavija e faqes me ngjyre te gjelbër.

</BODY>

</HTML>

RRGGBB – RedGreenBlue

HEXADECIMAL – 00 - FF

HTML – PRAPAVIJA (BACKGROUND)

• <BODY BACKGROUND="image.gif">

• <HTML>

• <HEAD>

• <TITLE>Titulli i faqes</TITLE>

• </HEAD>

• <BODY BACKGROUND="image1.gif">

• <B>Faqja me prapavije Image(Fotografi)</B>

• </BODY>

• </HTML>

TEST

• Shkruani Code ne menyre qe prapavija te jete me ngjyre te kaltert.

• Listoni te gjithe TAGS qe i shpjeguam deri tash.

• Shkruani Code ne ate menyre qe te jete e vendosur nje Fotografia ne prapavije.



Tutoshqip.com 2013 © copyright


HTML – FORMATIMI I TEKSTIT

• Permbajtja (Content)

• Fjale per fjale

• PSH. Kjo eshte shume e rendesishme Kjo eshte shume e rendesishme

Kjo eshte shume e rendesishme

HTML – NDRYSHIMI I STILIT TE TEXTIT

• <B> …</B>

• <I> … </I>

• <U>…</U>

• <br>….

Shembull: <BODY>Kjo eshte shume e <B>rendesishme</B> </BODY>

Shembulli 2.1 • <HTML>

• <HEAD>

• <TITLE>Shembulli1, Ligjerata 2</TITLE>

• </HEAD>

• <BODY>

• <B>Ky tekst eshte BOLD</B>

• <I>Ndersa ky tekst eshte ITALIC</I>

• <U>dhe ky tekst eshte UNDERLINED</U>

• <B><I>Ky tekst eshte kombinim i dyjave, bold dhe italic</I></B>

• </BODY>

• </HTML>


• <HEAD>

• <TITLE>Shembulli1, Ligjerata 2</TITLE>

• </HEAD>

• <BODY>

• <B>Ky tekst eshte BOLD</B><br>

• <I>Ndersa ky tekst eshte ITALIC</I><br>

• <U>dhe ky tekst eshte UNDERLINED</U><br>


• </BODY>

• </HTML>

HTML – NESTED TAGS


HTML – Teksti me gjeresi fikse te fontit

• <TT>...</TT> - tags

• TT - Typewriter Text

• “w”, “W”

• “i” , “I”

Ndryshimi i madhesise dhe Fontit

• Ndryshimi i madhesise se shkronjave (tekstit)

• Ndryshimi i fontit ose tipit te shkronjave

• <FONT> … </FONT>

Ndryshimi i madhesise se tekstit

• <FONT SIZE=n>...</FONT>

• n – numer,

• n = 1 – 7

• n = 3 – by default


• <HEAD>

• <TITLE>Shembulli 2, Ligjerata 2</TITLE>

• </HEAD>

• <BODY>

• <FONT SIZE=1>Madhesia e tekstit eshte 1</FONT><br>







• </BODY>

• </HTML>

Formati i Fontit

• <FONT FACE=« Emri i fontit">...</FONT>

• Arial

• Arial Black

• Time New Roman

• Georgia

• Impact

• Helvetica etj etj etj

• <FONT FACE="Arial,HELVATICA">...</FONT>

Shembulli 2.3

• <HTML>

• <HEAD>

• <TITLE>Shembulli 3, Ligjerata 2</TITLE>

• </HEAD>

• <BODY>

• <FONT FACE="ARIAL">Ky tekst ne fontin ARIAL </FONT><br>

• <FONT FACE="IMPACT"> Ky tekst ne fontin IMPACT </FONT><br>

• </BODY>

• </HTML>

Ndryshimi i ngjyres se fontit

• Ndryshimi i ngjyres se BACKGROUND

• Ndryshimi i ngjyres se Fontit

• <FONT COLOR="#xxxxxx“>…..</FONT><br>

• <BODY BGCOLOR="#xxxxxx">…</BODY>

Kombinimi i atributeve te fontit

• <FONT MIX Atributet > ….. </FONT>

• <B><I><FONT SIZE="5" FACE="IMPACT" COLOR="#00FF00">

Kombinimi i atributeve te TAGS, FONT!

</FONT></I></B>

Ndryshimi i ngjyrave te fontit ne uebfaqe

• by default

• Ngjyra e tekstit eshte e zeze

• Ngjyra e Linqeve eshte e kaltert etj

• <BODY> …… </BODY>

Shembull

• <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF"

• VLINK="#00FF00" ALINK="#FF0000">Some Text </BODY>

• BGCOLOR: web page background

• TEXT: Text Color

• LINK: Link Color

• VLINK: Visited link

• ALINK: Active link

"No one becomes a programmer without programming"

TEST 2

• Shkruani nje HTML faqe teksti ne rreshtat e se ciles permban keto kombinime: 1. Italic dhe Bold

2. Italic dhe Underlined

3. Bold dhe Underlined



Tutoshqip.com 2013© copyright


Paragraphs • <P>….</P> - Tags

• <P>Paragrafi i pare </P>

• <P>Paragrafi i dyte</P>

• Nested Tags brenda Paragrafit

• <PRE>…</PRE> - Tags - preformatted text

• Texti ne mes TAG –ut <PRE> paraqitet ekzaktesisht si e keni shkruajtur

• <HTML>

• <HEAD> <TITLE>Shembull</TITLE>

• </HEAD>

• <BODY>

• <PRE>

• Teksti ne brendesi

• te ketij taku eshte ruajtur

• ashtu sikurse eshte shkruajtur ne HTML

• pa asnje ndryshim

• </PRE>

• <P>Tekst qe tregon shpjimin e tag –ut per paragraf:</P>

• <PRE>for i = 1 to 10

• print i

• next i

• </PRE>

• </BODY>

• </HTML>

Hapersia ne mes textit

• – TAGS ( pa kuota) - non-breaking space

• <BODY>

Ketu jane te insertuara 5 hapesira

• </BODY>

Paragraph alignments

• <P ALIGN="left"> </P> - TAGS ( Majte)

• <P ALIGN="center"> </P> - TAGS ( Qender)

• <P ALIGN="right"> </P> - TAGS ( Djathte)


• <HEAD>

• <TITLE>Shembulli 3.1</TITLE>

• </HEAD>

• <BODY>

• <P ALIGN="left">Teksit ne anen e majte.</P>

• <P ALIGN="center“>Teksti ne qender.</P>

• <P ALIGN="right">Teksti ne anen e djathte.</P>

• </BODY>

• </HTML>

Indented Text - Tekst prerë

• <BLOCKQUOTE> …..</BLOCKQUOTE> -TAGS


• <HEAD>


• </HEAD>

• <BODY>

• Shohim Blockquote ketu:<BR><BR>

• <BLOCKQUOTE>

• Ky eshte nje citat i gjate, ky eshte nje citat i gjate,



• </BLOCKQUOTE>

• </BODY>

• </HTML>

Fotografit ne web

• <BODY BACKGROUND="image.gif">

▫ Tags per vendosjen e fotos ne background te Body

• </BODY>

• <IMG> - TAGS per vendosjen e fotografise brenda per brenda uebfaqes.

Shembulli 3.3

• <HTML>

• <HEAD>


• </HEAD>

• <BODY BACKGROUND="image1.jpg">

• <B>Kjo eshte fotografi:</B><BR>

• <IMG SRC=“image2.jpg">

• </BODY>

• </HTML>


• <HEAD>


• </HEAD>

• <BODY BACKGROUND="image1.jpg"> <B>Kjo eshte fotografi me parametra 234 x30:</B><BR>

• <IMG SRC=“image2.jpg” WIDTH=234 HEIGHT=30>

• </BODY>

• </HTML>

Alignment dhe border size per foto

• <HTML>

• <HEAD>


• </HEAD>

• <BODY BACKGROUND="image1.jpg">

• Kjo eshte fotografi e vendosur ne qender:<BR>

• <P ALIGN="center">

• <IMG SRC=“image2.jpg">

• </P>

• </BODY>

• </HTML>

Border size

• <HTML>

• <HEAD>


• </HEAD>

• <P ALIGN="center">

• <IMG SRC=“image.jpg" border=3>

• </P>

• </HTML>

Alternativ tekst per fotografi

• <ALT> - TAGS

• Perdoret ne kuader te Tag –ut <IMG>

• Psh

• <IMG SRC=“Smiley.gif" ALT=“Smiley Face">

• <HTML>

• <HEAD>


• </HEAD>

• <BODY>

• <IMG SRC="smiley.gif" ALT="Smiley face" width="42" height="42" />

• </BODY>

• </HTML>

Shtegu i fotografise

• <IMG SRC=“foto/image.jpg">

• <IMG SRC="../image.jpg">

DETYRA

• Listoj te gjithe TAGS dhe jepe shpjegimin e perdorimit te gjithe secilit .

• Perdore paragrafet “Left, Right, Center dhe Block Quote” ne nje shembull

• Shkruaj komplet HTML faqen , ku fotografia do te jete e vendosur ne qender, madhesia e saj te jete 300x300 dhe kufizimi 10.


Instituti për Trajnime dhe Zhvillim Ekonomik


Links

• Lidhja qe behet ne mes te nje teksti , imazhi apo grafike me ndonje faqe te re quhet LINK

• Lidhja mund te na tregoj per ndonje faqe ne webfaqen tone ose ndonje webfaqe ne Internet.

Text links • <A>…. </A> - TAGS

• <HTML>

• <HEAD>


• </HEAD>

• <BODY>

• <A HREF="http://www.flashlajme.info"> Kliko ketu per ta vizituar portalin <b>Flash Lajme</b></A>

• </BODY>

• </HTML>

Image links • <HTML>

• <HEAD>


• </HEAD>

• <BODY>

• Kliko ne foto per ta vizituar faqen time<BR><BR>

• <A HREF="http://www.flashlajme.info/sport">

• <IMG SRC="fl.png">

• </A>

• </BODY>

• </HTML>

• <HTML>

• <HEAD>


• </HEAD>

• <BODY>

• Kliko ne foto per ta vizituar faqen time<BR><BR>


• <IMG SRC="fl.png">

• </A>

• <BR><BR> Pa kornize: <BR><BR>


• <IMG SRC="fl.png" border=0>

• </A>

• </BODY>

• </HTML>

Email links

• <BODY>

• Kliko ne link per te me derguar e-mail: <BR>

• <A HREF="mailto:[email protected]">

• Email Me

• </A>

• </BODY>

• mailto: - konvertimin

Shembulli 4.4

• <HTML>

• <HEAD>


• </HEAD>

• <BODY>

• Kliko mbi link per te lene komentin tuaj.<BR>

• <A HREF="mailto:[email protected]?

• Subject:Komento rreth webfaqes sime">Email Me</A>

• </BODY>

• </HTML>

Lists

• <UL> … </UL> - TAGS

• <UL> - Unordered list ( Lista e parenditur)

• <UL> se bashku me <LI>


• <HEAD>


• </HEAD>

• <BODY>

• Kjo eshte lista e temave te shpjeguara sot :

• <UL>

• <LI>Text Links

• <LI>Image Links

• <LI>Email Links

• <LI>List of Items

• </UL>

• </BODY>

• </HTML>

• <OL> …</OL> - TAGS

• <OL> se bashku me <LI>

• <OL> - Ordered List


• <HEAD>


• </HEAD>

• <BODY>

• Kjo eshte lista e temave te shpjeguara sot :

• <OL>

• <LI>Text Links

• <LI>Image Links

• <LI>Email Links

• <LI>List of Items

• </OL>

• </BODY>

• </HTML>

Horizontal Separator Rule

• <HR> - TAGS

• Psh.

• <BODY>

• Sessioni i pare i tekstit

• <HR>

• Sessioni i dyte i tekstit

• </BODY>

Horizontal Separator Rule

• <HR WIDTH="50%"> me perqindje (%)

• <HR WIDTH="100"> me pixels

• <HR SIZE=n>- diametri i vijes

• <HR SIZE=n NOSHADE> - pa hije

• <HR color="#000000"> - ngjyra e vijes

Permbledhje

• Groupi 1

• Groupi 2

• Groupi 3

Detyra • Te krijohet web faqja ne baze te ketyre kushteve:

▫ Backgroundi ngjyre te bardhe

▫ 4 linqe ( Tab ose Menu)

Home

Grupi

Projekti

Trajnimi

▫ Te gjitha linqet te jene te lidhura njera me tjetren

▫ Ne kuader te seciles faqe te jete e vendosur logoja me parametra ( 200 x 70)

▫ Logoja te krijohet nga njeri prej anetareve te grupit e cila do e perfaqesoj ate group

▫ Sa here te klikohet ne LOGO te kaloj ne Linkun HOME

▫ Ne brendesi te secilit LINK te kete permbajtje

▫ Te perfshihen te gjithe TAG –at e shpjeguar deri tani

HAPJA dhe MBYLLJA e TAGS

• <TAG 1 > <TAG2> <TAG3>

PERMBAJTJA E WEB – it

</TAG3>

</TAG2>

</TAG>

Vizatimi i tabelave

• <TABLE> …. </TABLE>

• <TR> …</TR>

• <TD>…</TD>

• <TH>….</TH>

• <TH> - by default BOLD & CENTER

• <TD> - by default LEFT

PSH.

• <TABLE>

• <TR>

• <TD>Rreshti i pare</TD>

• </TR>

• <TR>

• <TD>Rreshti i dyte</TD>

• </TR>

• </TABLE>

TABLE BORDER

• <TABLE BORDER=1>

• <TR>

• <TD>Rreshti i pare</TD>

• </TR>

• <TR>

• <TD>Rreshti i dyte</TD>

• </TR>

• </TABLE>

Parametrat e madhesise se Tabeles • <HTML>

• <HEAD>


• </HEAD>

• <BODY>

• <TABLE WIDTH=50% BORDER=1>

• <TR>

• <TD>Cell Rreshti1 Kolona1</TD>


• </TR>

• <TR>



• </TR>

• </TABLE>

• </BODY>

• </HTML>

• <TABLE WIDTH=250 BORDER=1>

• <TR>



• </TR>

• <TR>

• <TD>Cell Rreshti2 Kolon1</TD>


• </TR>

• </TABLE>

Text brenda Tabelave • <TD ALIGN=CENTER>

• <TD ALIGN=RIGHT>

• <TD ALIGN=LEFT>

• <VALIGN>

▫ TOP

▫ BOTTOM

▫ MIDDLE

▫ By default VALIGN eshte MIDDLE

• <HTML>

• <HEAD>


• </HEAD>

• <BODY>

• <TABLE WIDTH=50% HEIGHT=100 BORDER=3>

• <TR>

• <TD ALIGN=LEFT VALIGN=TOP>TOP LEFT</TD>

• <TD ALIGN=RIGHT VALIGN=TOP>TOP RIGHT</TD>

• </TR>

• <TR>

• <TD ALIGN=LEFT VALIGN=BOTTOM>BOTTOM LEFT</TD>

• <TD ALIGN=RIGHT VALIGN=BOTTOM>BOTTOM RIGHT</TD>

• </TR>

• </TABLE>

• </BODY>

• </HTML>

IMAGE ne CELL te Tabeles

• <IMG> ne mes te <TD> </TD>

• <HTML>

• <HEAD>


• </HEAD>

• <BODY>

• <TABLE BORDER=4>

• <TR>

• <TD><IMG SRC="image.jpg"></TD>

• </TR>

• </TABLE>

• </BODY>

• </HTML>

Detyra

• 3 LINQE

• Ne secilin link me qene e vendosun nga nje Tabele

▫ Linkun e Pare Tabela 4 x 2

▫ Linkun e Dyta Tabela 2 x 4

▫ Linkun e Trete Tabela 4x4.

Ne Linkun 2 ne brendin e Rreshti 2 Kolona e Pare te vendoset Foto me dimension 170 x 70

Ne Linkun 3 ne brendin e Rreshti 3 Kolona 3 Texti me qene ne Anen e Djathte , TOP

Cell Width (Column Width) • HTML>

• <HEAD>

• <TITLE>Table: kolona nuk eshte e specifikuar</TITLE>

• </HEAD>

• <BODY>

• <TABLE WIDTH=400 HEIGHT=100 BORDER=3>

• <TR>

• <TD>TOP LEFT</TD>

• <TD>TOP RIGHT</TD>

• </TR>

• <TR>

• <TD>BOTTOM LEFT</TD>

• <TD>BOTTOM RIGHT</TD>

• </TR>

• </TABLE>

• </BODY>

• </HTML>

• <HTML>

• <HEAD>

• <TITLE>Shembulli 6-1a</TITLE>

• </HEAD>

• <BODY>


• <TR>

• <TD WIDTH=140>TOP LEFT</TD>

• <TD WIDTH=260>TOP RIGHT</TD>

• </TR>

• <TR>



• </TR>

• </TABLE>

• </BODY>

• </HTML>

• <HTML>

• <HEAD>

• <TITLE>Shembulli 6-1b</TITLE>

• </HEAD>

• <BODY>


• <TR>

• <TD WIDTH=35%>TOP LEFT</TD>

• <TD WIDTH=65%>TOP RIGHT</TD>

• </TR>

• <TR>



• </TR>

• </TABLE>

• </BODY>

• </HTML>

• <HTML>

• <HEAD>


• </HEAD>

• <BODY>


• <TR>

• <TD WIDTH=140>TOP LEFT</TD>

• <TD WIDTH=260> </TD>

• </TR>

• <TR>

• <TD> </TD>


• </TR>

• </TABLE>

• </BODY>

• </HTML>

Cell padding

• <HTML>

• <HEAD>


• </HEAD>

• <BODY>

• Efektet e Cell padding : <BR><BR>

• <TABLE BORDER=3 CELLPADDING=20>

• <TR>



• </TR>

• <TR>



• </TR>

• </TABLE>

• </BODY>

• </HTML>

Cell spacing

• <HTML>

• <HEAD>


• </HEAD>

• <BODY>

• Efektet e Cell spacing : <BR><BR>

• <TABLE BORDER=3 CELLSPACING=20>

• <TR>



• </TR>

• <TR>



• </TR>

• </TABLE>

• </BODY>

• </HTML>

Table background color

• <HTML>

• <HEAD>


• </HEAD>

• <BODY>

• <TABLE width="300" BGCOLOR="#CCCCCC">

• <TR>

• <TD width="50%">A</TD>

• <TD width="50%">B</TD>

• </TR>

• <TR>

• <TD width="50%">C</TD>

• <TD width="50%">D</TD>

• </TR>

• </TABLE>

• </BODY>

• </HTML>

• <HTML>

• <HEAD>


• </HEAD>

• <BODY>

• <TABLE width="300" BORDER=1>

• <TR BGCOLOR="#CCCCCC">



• </TR>

• <TR BGCOLOR="#FF0000">

• <TD width="50%">C</TD>

• <TD width="50%">D</TD>

• </TR>

• </TABLE>

• </BODY>

• </HTML>

• <HTML>

• <HEAD>


• </HEAD>

• <BODY>

• <TABLE width="300" BORDER=1>

• <TR BGCOLOR="#CCCCCC">



• </TR>

• <TR>

• <TD width="50%" BGCOLOR="#FF0000">C</TD>

• <TD width="50%" BGCOLOR="#0000FF">D</TD>

• </TR>

• </TABLE>

• </BODY>

• </HTML>

Column Span

• COLSPAN=x

• X- numri i cell ( qelizave)

• <HTML>

• <HEAD>


• </HEAD>

• <BODY>

• <TABLE BORDER=1 WIDTH=300>

• <TR>

• <TD COLSPAN=2 WIDTH=100>A</TD>

• <TD WIDTH=100>B</TD>

• </TR>

• <TR>

• <TD>A</TD>

• <TD>B</TD>

• <TD>C</TD>

• </TR>

• </TABLE>

• </BODY>

• </HTML>

Row Span

• ROWSPAN=x

• X – numri i qelizave

• <HTML>

• <HEAD>


• </HEAD>

• <BODY>

• <TABLE BORDER=1 WIDTH=200>

• <TR>

• <TD ROWSPAN=2>A</TD>

• <TD>B</TD>

• <TD>C</TD>

• </TR>

• <TR>

• <TD>D</TD>

• <TD>E</TD>

• </TR>

• </TABLE>

• </BODY>

• </HTML>

Nested Tables

• Kombinimi i tabelave ose tag –s per tabela

Detyra

1. Te punohet tabela si ne Figure

2. Ne tabelen e detyres 1 rreshti i pare te kete nje ngjyre ndersa te tri cell –se ne rreshtin e dyte te kene ngjyra te ndryshme.

3. Te krijohet tabela me 1 x 3 me border 0, ku ne kolonen e dyte te krijohet tabela 2 x2 me border 3, ku cell kane ngjyra te ndryshme njera nga tjetra.

• Listoj te gjitha TAG –se dhe Atributet e Tabelave

dizajnimi i web-faqeve - informatika shqiptareitshqip.com/tutoshqip/html1.pdfdetyra • te krijohet...

Documents