dizajnimi i web-faqeve - informatika shqiptareitshqip.com/tutoshqip/html1.pdfdetyra • te krijohet...
Post on 08-Feb-2020
14 Views
Preview:
TRANSCRIPT
DIZAJNIMI I WEB-FAQEVE
www.TutoShqip.com – Tutoriale Shqip
Tutoshqip .com 2013 © copyright
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.
DIZAJNIMI I WEB-FAQEVE
www.TutoShqip.com – Tutoriale Shqip
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>
Shembulli 2.1 • <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>
• <B><I>Ky tekst eshte kombinim i dyjave, bold dhe italic</I></B>
• </BODY>
• </HTML>
HTML – NESTED TAGS
• <B><I>Ky tekst eshte kombinim i dyjave, bold dhe italic</I></B>
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
Shembulli 2.2 • <HTML>
• <HEAD>
• <TITLE>Shembulli 2, Ligjerata 2</TITLE>
• </HEAD>
• <BODY>
• <FONT SIZE=1>Madhesia e tekstit eshte 1</FONT><br>
• <FONT SIZE=2>Madhesia e tekstit eshte 2</FONT><br>
• <FONT SIZE=3>Madhesia e tekstit eshte 3</FONT><br>
• <FONT SIZE=4>Madhesia e tekstit eshte 4</FONT><br>
• <FONT SIZE=5>Madhesia e tekstit eshte 5</FONT><br>
• <FONT SIZE=6>Madhesia e tekstit eshte 6</FONT><br>
• <FONT SIZE=7>Madhesia e tekstit eshte 7</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
DIZAJNIMI I WEB-FAQEVE
www.TutoShqip.com – Tutoriale Shqip
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)
Shembulli 3.1 • <HTML>
• <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
Shembulli 3.2 • <HTML>
• <HEAD>
• <TITLE>Shembulli 3.2</TITLE>
• </HEAD>
• <BODY>
• Shohim Blockquote ketu:<BR><BR>
• <BLOCKQUOTE>
• Ky eshte nje citat i gjate, ky eshte nje citat i gjate,
• Ky eshte nje citat i gjate, ky eshte nje citat i gjate,
• 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>
• <TITLE>Shembulli 3.3</TITLE>
• </HEAD>
• <BODY BACKGROUND="image1.jpg">
• <B>Kjo eshte fotografi:</B><BR>
• <IMG SRC=“image2.jpg">
• </BODY>
• </HTML>
Shembulli 3.4 • <HTML>
• <HEAD>
• <TITLE>Shembulli 3.4</TITLE>
• </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>
• <TITLE>Shembulli 3.5</TITLE>
• </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>
• <TITLE>Shembulli 3.6</TITLE>
• </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>
• <TITLE>Shembulli 3.7</TITLE>
• </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.
DIZAJNIMI I WEB-FAQEVE
Instituti për Trajnime dhe Zhvillim Ekonomik
Tutoshqip.com 2013 © copyright
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>
• <TITLE>Shembulli 4.1</TITLE>
• </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>
• <TITLE>Shembulli 4.2</TITLE>
• </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>
• <TITLE>Shembulli 4.3</TITLE>
• </HEAD>
• <BODY>
• Kliko ne foto per ta vizituar faqen time<BR><BR>
• <A HREF="http://www.flashlajme.info/sport">
• <IMG SRC="fl.png">
• </A>
• <BR><BR> Pa kornize: <BR><BR>
• <A HREF="http://www.flashlajme.info/sport">
• <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:info@flashlajme.info">
• Email Me
• </A>
• </BODY>
• mailto: - konvertimin
Shembulli 4.4
• <HTML>
• <HEAD>
• <TITLE>Shembulli 4.4</TITLE>
• </HEAD>
• <BODY>
• Kliko mbi link per te lene komentin tuaj.<BR>
• <A HREF="mailto:info@flashlajme.info?
• 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>
Shembulli 4.5 • <HTML>
• <HEAD>
• <TITLE>Shembulli 4.5</TITLE>
• </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
Shembulli 4.6 • <HTML>
• <HEAD>
• <TITLE>Shembulli 4.6</TITLE>
• </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
DIZAJNIMI I WEB-FAQEVE
www.TutoShqip.com – Tutoriale Shqip
Tutoshqip.com 2013 © copyright
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>
• <TITLE>Shembulli 5.1</TITLE>
• </HEAD>
• <BODY>
• <TABLE WIDTH=50% BORDER=1>
• <TR>
• <TD>Cell Rreshti1 Kolona1</TD>
• <TD>Cell Rreshti1 Kolona2</TD>
• </TR>
• <TR>
• <TD>Cell Rreshti2 Kolona1</TD>
• <TD>Cell Rreshti2 Kolona2</TD>
• </TR>
• </TABLE>
• </BODY>
• </HTML>
• <TABLE WIDTH=250 BORDER=1>
• <TR>
• <TD>Cell Rreshti1 Kolona1</TD>
• <TD>Cell Rreshti1 Kolona2</TD>
• </TR>
• <TR>
• <TD>Cell Rreshti2 Kolon1</TD>
• <TD>Cell Rreshti2 Kolona2</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>
• <TITLE>Shembulli 5.2</TITLE>
• </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>
• <TITLE>Shembulli 5.3</TITLE>
• </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
DIZAJNIMI I WEB-FAQEVE
www.TutoShqip.com – Tutoriale Shqip
Tutoshqip.com 2013 © copyright
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>
• <TABLE WIDTH=400 HEIGHT=100 BORDER=3>
• <TR>
• <TD WIDTH=140>TOP LEFT</TD>
• <TD WIDTH=260>TOP RIGHT</TD>
• </TR>
• <TR>
• <TD>BOTTOM LEFT</TD>
• <TD>BOTTOM RIGHT</TD>
• </TR>
• </TABLE>
• </BODY>
• </HTML>
• <HTML>
• <HEAD>
• <TITLE>Shembulli 6-1b</TITLE>
• </HEAD>
• <BODY>
• <TABLE WIDTH=400 HEIGHT=100 BORDER=3>
• <TR>
• <TD WIDTH=35%>TOP LEFT</TD>
• <TD WIDTH=65%>TOP RIGHT</TD>
• </TR>
• <TR>
• <TD>BOTTOM LEFT</TD>
• <TD>BOTTOM RIGHT</TD>
• </TR>
• </TABLE>
• </BODY>
• </HTML>
• <HTML>
• <HEAD>
• <TITLE>Shembulli 6.2</TITLE>
• </HEAD>
• <BODY>
• <TABLE WIDTH=400 HEIGHT=100 BORDER=3>
• <TR>
• <TD WIDTH=140>TOP LEFT</TD>
• <TD WIDTH=260> </TD>
• </TR>
• <TR>
• <TD> </TD>
• <TD>BOTTOM RIGHT</TD>
• </TR>
• </TABLE>
• </BODY>
• </HTML>
Cell padding
• <HTML>
• <HEAD>
• <TITLE>Shembulli 6.3</TITLE>
• </HEAD>
• <BODY>
• Efektet e Cell padding : <BR><BR>
• <TABLE BORDER=3 CELLPADDING=20>
• <TR>
• <TD>TOP LEFT</TD>
• <TD>TOP RIGHT</TD>
• </TR>
• <TR>
• <TD>BOTTOM LEFT</TD>
• <TD>BOTTOM RIGHT</TD>
• </TR>
• </TABLE>
• </BODY>
• </HTML>
Cell spacing
• <HTML>
• <HEAD>
• <TITLE>Shembulli 6.4</TITLE>
• </HEAD>
• <BODY>
• Efektet e Cell spacing : <BR><BR>
• <TABLE BORDER=3 CELLSPACING=20>
• <TR>
• <TD>TOP LEFT</TD>
• <TD>TOP RIGHT</TD>
• </TR>
• <TR>
• <TD>BOTTOM LEFT</TD>
• <TD>BOTTOM RIGHT</TD>
• </TR>
• </TABLE>
• </BODY>
• </HTML>
DIZAJNIMI I WEB-FAQEVE
www.TutoShqip.com – Tutoriale Shqip
Tutoshqip.com 2013 © copyright
Table background color
• <HTML>
• <HEAD>
• <TITLE>Shembulli 7.1</TITLE>
• </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>
• <TITLE>Shembulli 7.2</TITLE>
• </HEAD>
• <BODY>
• <TABLE width="300" BORDER=1>
• <TR BGCOLOR="#CCCCCC">
• <TD width="50%">A</TD>
• <TD width="50%">B</TD>
• </TR>
• <TR BGCOLOR="#FF0000">
• <TD width="50%">C</TD>
• <TD width="50%">D</TD>
• </TR>
• </TABLE>
• </BODY>
• </HTML>
• <HTML>
• <HEAD>
• <TITLE>Shembulli 7.3</TITLE>
• </HEAD>
• <BODY>
• <TABLE width="300" BORDER=1>
• <TR BGCOLOR="#CCCCCC">
• <TD width="50%">A</TD>
• <TD width="50%">B</TD>
• </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>
• <TITLE>Shembulli 7.4</TITLE>
• </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>
• <TITLE>Shembulli 7.5</TITLE>
• </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
top related