Leksion 1 - Hyrje Ne XHTML

Programim ne WEB Leksion 1: XHTML

1

Leksion 1

Hyrje ne XHTML

1

Pjeset kryesore te lendes

Aplikimi i sintakses e standartit W3C dhe struktura e dokumentave XHTML.

Formatimi i faqeve web duke perdorur Cascading Style Sheets (CSS)

Skriptet client-side duke perdorur JavaScript

Struktura baze dhe sintaksa e gjuhes se skriptimit PHP

Integrimi i XHTML, CSS dhe PHP per ndertimin e web site-ve interaktive.

Trajtimi i inputit nepermjet procesimit te formave dhe te dhenave ne URL

Veprimtari te ndryshme web-based si: dergim i e-mail, uploadimi i fileve

2


2

Materialet te shkruara

Deitel, Paul, Internet & World Wide Web: How to

Program, 4th Edition, Prentice Hall Incorporated, 2007.

ISDN: 978-0131752429

Gosselin, Don, PHP Programming with MySQL, First

Edition. Course Technology Incorporated, 2005, ISBN 0-

619-21687-5.

3

Software te nevojshem

XAMPP permban:

Apache: aplikacion web server, open source

MySQL: database server

PHP: gjuhe scriptimi server-sidee disenjuar per web

por qe mund te perdoret edhe si general purpose.

Open source.

phpMyAdmin: mjet free dhe open source i

implementuar ne PHP per te menaxhuar administrimin

e MySQL nepermjet nje web browser.

4


3

Hyrje HTML

XHTML (Extensible HyperText Markup Language)

markup language per krijimin e faqeve web

Bazuar ne HTML (HyperText Markup Language)

Teknologji e Word Wide Web Consortium (W3C)

XHTML 1.0

Lejon te shfaqet vetem permbajtja dhe struktura e nje dokumenti HTLM, pa formatime.

Formatimi percaktohet me ane te Cascading Style Sheets (CSS)

Nje makine qe ekzekuton pjese sofware, quhet web server dhe ruaj dokumenta XHTML.

5

Shembull i pare ne XHTML

Ne XHTML, teksti vendoset brenda disa elementeve

qe quhen tage, te cilat vendosen midis < dhe >

Cdo dokument XHTML permban nje tag fillimi <html>

dhe nje tag mbarimi </html>

Disa elemente mbajne atribute qe kane informacion

shtese ne lidhje me elementin.

Komentet ne XHTML fillojne gjithmone me <!–

dhe mbarojne me -->.

Cdo dokument HTML mban nje element head dhe

permban elementet:

Title

Body

6


4

Elemente XHTML

Elementi Head nuk shfaqet me informacion ne permbajtje

Elementi Title:

Titulli i nje faqe web

Zakonisht shfaqet ne title bar (lart ne dritaren e browser-it)

Ky eshte teksti qe identifikon faqen kur perdoruesi e shton ate

faqe ne Bookmark ose Favourites

Elemeti body:

Ka permbajtjen e dokumentit i cili mund te permbaje tekst

ose/dhe tage.

7

Praktike e mire programimi

Vendosni emrat e dokumentave te tille qe te jene

pershkrues te funksionalitetit te tyre. Keshtu identifikohen

me shpejt dokumentat dhe mbahen mend me lehte nga

ata qe duan te perdorin kete dokument.

Psh, nqs po shkruajme nje dokument XHTML qe mban te

dhena te nje produkti, mund t’i vendosim emrin

produkt.html

Prapashtesa e nje dokumenti me permbajtje XHTML

mund te jete . html ose .htm

8

5

I gjithe teskti qe vendoset midis tageve <p> dhe </p>

formon nje paragraf.

Dokumentat XHTML permbajne gjithmone tage fillimi

dhe fundi

Nje tag fillimi perbehet nga emri i elementit i kufizuar me <

dhe > (psh <html>)

Nje tag fundi perbehet nga emri i elementit i kufizuar nga </

dhe > (psh </html>)

Ne pergjithesi cdo tag fillimi ka korespondentin e tij tag fundi.

Shume prej tageve te fillimit kane atribute qe sigurojne

informacion shtesene lidhje me nje element.

Cdo atribut ka nje emer dhe nje vlere te ndara me shenjen =

9

1 <?xml version = "1.0" encoding = "utf-8"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4

5 

6 

7 <html xmlns = "http://www.w3.org/1999/xhtml">

8 <head>

9 <title>Welcome</title>

10 </head>

11

12 <body>

13 <p>Welcome to XHTML!</p>

14 </body>

15 </html>

10


6

11

W3C XHTML Validation Service

12

Dokumentat XHTML te shkruar ne rregull per nga

sintaksa, do te renderohen ne menyren e duhur.

Dokumentat XHTML te cilat mbajne gabime sintakse do

terenderohen ne menyre jo normale.

Validation services (e.g., validator.w3.org) na

sigurojne korrektesine e dokumentave XHTML nga ana

sintaksore.

7

Headings

13

XHTML kane gjashte headings (h1 deri h6) te cilat

renditen sipas rendesise se informacionit.

Emementi heading h1 konsiderohet si me i rendesishem

prandaj renderoeht me fontin me te madh.

Ementet e tjere heading (psh., h2, h3, etj.) renderohen me font

ne menyre progresive me te vogel.

14

1 <?xml version = "1.0" encoding = "utf-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5  6  7 <html xmlns = "http://www.w3.org/1999/xhtml"> 8 <head> 9 <title>Headings</title> 10 </head> 11 12 <body> 13 <h1>Level 1 Heading</h1> 14 <h2>Level 2 heading</h2> 15 <h3>Level 3 heading</h3> 16 <h4>Level 4 heading</h4> 17 <h5>Level 5 heading</h5> 18 <h6>Level 6 heading</h6> 19 </body> 20 </html>

Krijon gjashte headings, me

rendesi zbritese


8

Linking

15

Nje hiperlink referon drejt linkeve apo resorseve te

tjera, si psh dokumenta XHTML apo imazhe.

Web browser zakonisht si default i nenvizojne dhe

shfaqin ne ngjyre blu

Linking

16

Per te shtuar linke ne nje faqe web perdoret

elementi a i cili qendron per anchor.

Atributi href tregon resorsin me te cilin lidhet.

Anchor mund te lidhen me nje adrese emaili duke

perdorur mailto: URL

mailto:URL

9

Linking

17

Elementi strong ben qe browser ta renderoje

tekstin ne formatin bold.

18




4

5 

6 


8 <head>

9 <title>Links</title>

10 </head>

11

12 <body>

13 <h1>Here are my favorite sites</h1>

14 <p><strong>Click a name to go to that page.</strong></p>

15

16 

17 <p><a href = "http://www.deitel.com">Deitel</a></p>

18 <p><a href = "http://www.prenhall.com">Prentice Hall</a></p>

19 <p><a href = "http://www.yahoo.com">Yahoo!</a></p>

20 <p><a href = "http://www.usatoday.com">USA Today</a></p>

21 </body>

22 </html>

Krijon elementin anchor qe te

lidh me URL e specifikuar ne

atributin href

10

19




4

5 

6 


8 <head>

9 <title>Contact Page</title>

10 </head>

11

12 <body>

13 <p>

14 My email address is

15 <a href = "mailto:[email protected]">

16 [email protected]

17 </a>

18 . Click the address and your default email client

19 will open an e-mail message and address it to me.

20 </p>

21 </body>

22 </html>

Hyperlink krijon nje mesazh per

ne adresen

[email protected]

nepermjet programit default te

email ne kompjuter.

20

mailto:[email protected]


11

Imazhet

21

Atributi src i elementit img percakton pozicionin e

imazhit.

Cdo element img duhet te kete nje atribut alt, i cili

mban tekstin qe duhet t’i tregohet kompjuterit klient

nqs browser nuk mund te renderoje imazhin.

Width dhe height jane atribute opsionale.

Nqs eleminohen nga elementi img, atehere browser perdor

width dhe height te imazhit.

Permasat merren ne pixel.

Imazhet

22

Disa elementet XHTML jane elemente bosh qe

kane vetem atribute dhe nuk markojne tekst.

Elementet bosh, si psh img duhet te perfundojne,

ose duke perdorur tagun mbylles, ose duke

vendosur / para shenjes > mbyllese te tagut.

12

23




4

5 

6 


8 <head>

9 <title>Images</title>

10 </head>

11

12 <body>

13 <p>

14 <img src = "cpphtp6.jpg" width = "92" height = "120"

15 alt = "C++ How to Program book cover" />

16 <img src = "jhtp.jpg" width = "92" height = "120"

17 alt = "Java How to Program book cover" />

18 </p>

19 </body>

20 </html>

Percakton pozicionin e

imazhit

Percakton width te imazhit

Percakton height te imazhit

Percakton tekstin qe do

te shfaqet nqs imazhi

eshte i padisponueshem

Imazhet

24

Krijoni nje imazh hyperlink duke nderthurur nje element

img me nje element anchor

13

25




4

5 

6 


8 <head>

9 <title>Navigation Bar</title>

10 </head>

11

12 <body>

13 <p>

14 <a href = "links.html">

15 <img src = "buttons/links.jpg" width = "65"

16 height = "50" alt = "Links Page" />

17 </a>

18

19 <a href = "list.html">

20 <img src = "buttons/list.jpg" width = "65"

21 height = "50" alt = "List Example Page" />

22 </a>

23

24 <a href = "contact.html">

25 <img src = "buttons/contact.jpg" width = "65"

26 height = "50" alt = "Contact Page" />

27 </a>

28

Krijon imazhin

hyperlink

26

29 <a href = "table1.html">

30 <img src = "buttons/table.jpg" width = "65"

31 height = "50" alt = "Table Page" />

32 </a>

33

34 <a href = "form.html">

35 <img src = "buttons/form.jpg" width = "65"

36 height = "50" alt = "Feedback Form" />

37 </a>

38 </p>

39 </body>

40 </html>


14

Karaktere speciale dhe rregulla horizontale

27

XHTML permban karaktere te vecanta (ne formen &code;) per te shprehur karaktere qe nuk mund te renderohen ndryshe.

Kodi mund te jete:

Shkurtim i fjales

Numer

Decimal

Hexadecimal

Shembull: Karakteri & paraqitet si:

&amp

&#38 (decimal)

&#x26 (hexadecimal)

Karaktere speciale dhe rregulla horizontale

28

Shumica e browser renderojne rregulla horizontale, qe

percaktohen nga tagu <hr/> si rresht horizontal

Elementi hr shton nje line break mbi dhe nen rreshtin

horizontal.

15

29




4

5 

6 


8 <head>

9 <title>Contact Page</title>

10 </head>

11

12 <body>

13 <p>

14 Click

15 <a href = "mailto:[email protected]">here</a>

16 to open an email message addressed to

17 [email protected].

18 </p>

19

20 <hr /> 

21

22 

23 

24 <p>All information on this site is <strong>©

25 Deitel & Associates, Inc. 2007.</strong></p>

26

Shton nje rregull

horizontal me nje line

break mbi dhe nen te.

Shton karakteret

speciale © dhe &

30

27 

28 

29 

30 

31 <p><del>You may download 3.14 x 10<sup>2</sup>

32 characters worth of information from this site.</del>

33 Only <sub>one</sub> download per hour is permitted.</p>

34 <p><em>Note: < ¼ of the information

35 presented here is updated daily.</em></p>

36 </body>

37 </html>

Ben 2 si

superscript

Ben si

subscript

fjalen one

Krijon efekt subscipt

Thekson

(emphasize) tekstin

Shton simbolet

speciale < dhe ¼

16

List

31

Elementi liste e parenditur ul

Krijon nje liste ne te cilen cdo element ne liste fillon me nje

simbol (bullet)

Cdo element i listes eshte nje li (list item). Shumica e web

browsers e renderojne kete element ne nje rresh te ri.

32




4

5 

6 


8 <head>

9 <title>Links</title>

10 </head>

11

12 <body>

13 <h1>Here are my favorite sites</h1>

14 <p><strong>Click on a name to go to that page.</strong></p>

15

16 

17 <ul>

18 

19 <li><a href = "http://www.deitel.com">Deitel</a></li>

20 <li><a href = "http://www.w3.org">W3C</a></li>

21 <li><a href = "http://www.yahoo.com">Yahoo!</a></li>

22 <li><a href = "http://www.cnn.com">CNN</a></li>

23 </ul>

24 </body>

25 </html>

Krijon nje liste te parenditur

Elementet hyperlink behen

elemente individuale te listes.


17

33

List

34

Elementi ol i listes se renditur krijon nje liste ne te

cilen cdo element fillon me nje numer.

Listat mund te nderthuren per te paraqitur te dhena

hierarkike.

18

35




4

5 

6 


8 <head>

9 <title>Lists</title>

10 </head>

11

12 <body>

13 <h1>The Best Features of the Internet</h1>

14

15 

16 <ul>

17 <li>You can meet new people from countries around

18 the world.</li>

19 <li>

20 You have access to new media as it becomes public:

21

22 

23 

24 

25 <ul>

26 <li>New games</li>

27 <li>New applications

28

Element i listes

36

29 

30 <ol>

31 <li>For business</li>

32 <li>For pleasure</li>

33 </ol>

34 </li> 

35

36 <li>Around the clock news</li>

37 <li>Search engines</li>

38 <li>Shopping</li>

39 <li>Programming

40

41 

42 <ol>

43 <li>XML</li>

44 <li>Java</li>

45 <li>XHTML</li>

46 <li>Scripts</li>

47 <li>New languages</li>

48 </ol>

49 </li> 

50 </ul> 

51 </li>

52

53 <li>Links</li>

54 <li>Keeping in touch with old friends</li>

55 <li>It is the technology of the future!</li>

56 </ul> 

57 </body>

58 </html>

Krijon nje liste te renditur ne

nje element liste

Element i nje liste

te parenditur

Krijon nje liste te renditur

brenda nje elementin list.

Perfundon elementin list

Perfundon listen e nderfutur


19

37

Table

38

Elementi table

Percakton nje tabele XHTML

Atributi summary permbledh kontentin e tabeles dhe

perdoret nga speech devices per ta bere tabelen me te

aksesueshme nga perdoruesit me probleme vizuale.

Elementi caption pershkruan kontentin e tabeles

Teksti brenda tagut <caption> ne shumicen e browserave

renderoeht mbi tabelen.


20

Table

39

Nje tabele mund te ndahet ne tre seksione te pavarur

Head (elementi thead)

Titujt e tabelave

Header te kolonave

Body (elementi tbody)

Te dhenat e tabeles

Foot (elementi tfoot)

Rezultatet e llogaritjeve

Footnotes

Nen sesionin body ne kod, por shfaqet ne fund te faqes.

Table

40

Elementi tr

Percakton secilin rresht ne tabele

Elementi th

Percakton nje qelize te header

Elementi td

Mban elementet e te dheanve te tabeles

21

41




4

5 

6 


8 <head>

9 <title>A simple XHTML table</title>

10 </head>

11

12 <body>

13

14 

15 <table border = "1" width = "40%"

16 summary = "This table provides information about

17 the price of fruit">

18

19 

20 

21 <caption><strong>Price of Fruit</strong></caption>

22

23 

24 

25 <thead>

26 <tr> 

27 <th>Fruit</th> 

28 <th>Price</th>

29 </tr>

30 </thead>

31

Fillon nje tabele XHTML

Vendos borderin e tabeles

1pixel te gjere

Gjeresia e tabeles

40% e ekranit

Permbajta e tabeles ne

atributin summary

Teskti mbi tabele

Krijon nje element head

Krijon nje qelize table

heading ne rreshtin e ri

Krijon nje rresht te ri

ne tabele Krijon qelizen tjeter ne rresht

42

32 

33 

34 <tfoot>

35 <tr>

36 <th>Total</th>

37 <th>$3.75</th>

38 </tr>

39 </tfoot>

40

41 

42 

43 <tbody>

44 <tr>

45 <td>Apple</td> 

46 <td>$0.25</td>

47 </tr>

48 <tr>

49 <td>Orange</td>

50 <td>$0.50</td>

51 </tr>

52 <tr>

53 <td>Banana</td>

54 <td>$1.00</td>

55 </tr>

56 <tr>

57 <td>Pineapple</td>

58 <td>$2.00</td>

59 </tr>

60 </tbody>

61 </table>

62

63 </body>

64 </html>

Krijon sesionin foot

Krijon qeliza header

ne fund te tabeles

Krijon sesionin body

Shton nje qelize ne

trupin e tabeles

Fundi i tabeles


22

Krijimi i nje tabele te thjeshte

43

Tabelat

44

Mund te bashkoni qeliza te dhenash nepermjet

atributeve rowspan dhe colspan

Vlerat e ketyre atributeve caktojne numrin e

rreshtave/kolonave qe do te zihen nga ajo qelize.

Mund te vendoset brenda cdo qelize te dhenash ose qelize

header te tabeles.

23

45




4

5 

6 


8 <head>

9 <title>Tables</title>

10 </head>

11

12 <body>

13 <h1>Table Example Page</h1>

14

15 <table border = "1">

16 <caption>Here is a more complex sample table.</caption>

17

18 <thead>

19 

20 

21 <tr>

22 

23 <th rowspan = "2">

24 <img src = "camel.gif" width = "205"

25 height = "167" alt = "Picture of a camel" />

26 </th>

27

Qeliza header

zgjerohet ne 2

rreshta.

46

28 

29 <th colspan = "4">

30 <h1>Camelid comparison</h1>

31 <p>Approximate as of 6/2007</p>

32 </th>

33 </tr>

34 <tr>

35 <th># of Humps</th>

36 <th>Indigenous region</th>

37 <th>Spits?</th>

38 <th>Produces Wool?</th>

39 </tr>

40 </thead>

41 <tbody>

42 <tr>

43 <th>Camels (bactrian)</th>

44 <td>2</td>

45 <td>Africa/Asia</td>

46 <td>Yes</td>

47 <td>Yes</td>

48 </tr>

49 <tr>

50 <th>Llamas</th>

51 <td>1</td>

52 <td>Andes Mountains</td>

53 <td>Yes</td>

54 <td>Yes</td>

55 </tr>

56 </tbody>

57 </table>

58 </body>

59 </html>

Qeliza header zgjerohet

ne 4 kolona.


24

Tabele xhtml me komplekse

47

Format

48

XHTML mundeson perdorimin e formave per mbledhje

informacioni nga perdoruesit.

Format permbajne komponente vizuale, si psh butona, me ane

te te cileve perdoruesit mund te nderveprojne.

Mund te permbajne edhe elemente jo vizuale, qe qeuhen

inpute te fshehura (hidden inputs) te cilat perdoren per te

ruajtur informacion te nevojshem per t’u derguar ne server,

por qe nuk jepet nga perdoruesi si input.


25

Format

49

Nje forme fillon me deklarimin e elementit form

Atributi method percakton menyren si do te dergohen ne

server te dhenat e formes.

Atributi action i formes percakton scriptin te i cili do te

dergohen te dhenat e formes.

Format

50

Elementi input siguron te dhena per scriptin i cili proceson te dhenat. Inputi text shton nje textbox ne forme, duke mundesuar funtjen e

te dhenave tekst nga perdoruesi.

Elementi label permban informacion per perdoruesin ne lidhje me qellimin e elementin input.

Atributi size percakton numrin e karaktereve te dukshme ne elementin input.

Atributi opsional maxlength limiton numrin e karaktereve qe jepen si input ne text box.

Inputi i tipit submit dergon te dhenat e futura ne forme drejt web serverit per procesim. Shumica e browserave krijojne nje buton i cili kur shtypet i dergon te

dhenat e formes.

Inputi i tipit reset ben qe te kthen te gjitha te dhenat e vendosura ne forme nga perdoruesi ne vleren e tyre default.

26

51




4

5 

6 


8 <head>

9 <title>Forms</title>

10 </head>

11

12 <body>

13 <h1>Feedback Form</h1>

14

15 <p>Please fill out this form to help

16 us improve our site.</p>

17

18 

19 

20 

21 <form method = "post" action = "">

22 <p>

23 

24 

25 <input type = "hidden" name = "recipient"

26 value = "[email protected]" />

27 <input type = "hidden" name = "subject"

28 value = "Feedback Form" />

29 <input type = "hidden" name = "redirect"

30 value = "main.html" />

31 </p>

shton te dhenat e

formes ne request te

browser

Nuk perdoret URL

per te procesuar te

dhenat e formes

Krijon hidden input te

padukshme per

perdoruesin

52

32

33 

34 <p><label>Name:

35 <input name = "name" type = "text" size = "25"

36 maxlength = "30" />

37 </label></p>

38

39 <p>

40 

41 

42 

43 <input type = "submit" value = "Submit" />

44 <input type = "reset" value = "Clear" />

45 </p>

46 </form>

47 </body>

48 </html>

Krijon nje label per

text field

Shton nje text box me emrin

“name” me 25 karaktere te

dukshme dhe nje limit prej

30 karakteresh

Shton nje buton

submit me tekstin

“Submit” mbi te

Shton nje buton reset me te

shkruar “Clear” mbi te Fundi i formes

XHTML


27

53

Format

54

Elementi textarea shton nje texbox multiline ne forme Numri i rreshtave ne textarea percaktohet me ane te

atributit rows, ndersa numri i kolonave (karaktereve per rresht) percaktohet me ane te atributit cols

Inputi i tipit password shton ne forme nje password box I lejon perdoruesve te japin informacion sensitiv, si psh

numri i kartes se kreditit apo passworde te ndryshme, duke e maskuar informacion me nje karakter tjeter, zakonisht *

Vlera reale e inputit i dergohet web serverit pa * qe maskon inputin.


28

Format

55

Inputi i tipit checkbox lejon qe perdoruesit te bejne nje zgjedhje. Kur check box selektohet, shfaqet nje shenje mbi te, ne te kundert

check box eshte bosh.

Check box mund te perdoren vetem ose ne grupe.

Check box qe jane pjese e te njejtit grup kane te njejtin emer.

Inputi i tipit checkbox lejon perdoruesin te beje nje perzgjedhje

Nje radio button eshte i ngjashem per nga funksioni me check box pervec faktit qe vetem nje radio button mund te zgjidhet ne nje kohe. Te gjitha radio buttons jane ne grup dhe kane te njejten vlere te

atributit name, por vlera te ndryshme te atributit value.

Inputi i tipit select permban nje drop down list me elemente. Atributi name identifikon drop down listen.

Elementi option shton elemente ne drop down list.

Format

56

Elementi br ne shumicen e browserave ben qe te

gjenerohet nje line break.

Cdo markup ose tekst qe ndodhet pas elementit br

vendoset ne nje rresht me poshte.

29

57




4

5 

6 


8 <head>

9 <title>More Forms</title>

10 </head>

11

12 <body>

13 <h1>Feedback Form</h1>

14 <p>Please fill out this form to help

15 us improve our site.</p>

16

17 <form method = "post" action = "">

18 <p>

19 <input type = "hidden" name = "recipient"

20 value = "[email protected]" />

21 <input type = "hidden" name = "subject"

22 value = "Feedback Form" />

23 <input type = "hidden" name = "redirect"

24 value = "main.html" />

25 </p>

26

27 <p><label>Name:

28 <input name = "name" type = "text" size = "25" />

29 </label></p>

30

58

31 

32 <p><label>Comments:<br />

33 <textarea name = "comments"

34 rows = "4" cols = "36">Enter comments here.</textarea>

35 </label></p>

36

37 

38 

39 

40 <p><label>E-mail Address:

41 <input name = "email" type = "password" size = "25" />

42 </label></p>

43

44 <p>

45 <strong>Things you liked:</strong><br />

46

47 <label>Site design

48 <input name = "thingsliked" type = "checkbox"

49 value = "Design" /></label>

50 <label>Links


52 value = "Links" /></label>

53 <label>Ease of use


55 value = "Ease" /></label>

56 <label>Images


58 value = "Images" /></label>

59 <label>Source code


61 value = "Code" /></label>

62 </p>

Ston nje text area me 4 rreshta

dhe 36 kolona, teksti fillestar I

te cilit eshte “Enter comments

here.”

Shton nje input qe e shfaqe

tektin e futut me shenjen *

ose nje karakter tjeter.

Shton disa checkbox me

labels te ndryshme.

30

59

63

64 

65 

66 

67 

68 <p>

69 <strong>How did you get to our site?:</strong><br />

70

71 <label>Search engine

72 <input name = "howtosite" type = "radio"

73 value = "search engine" checked = "checked" /></label>

74 <label>Links from another site


76 value = "link" /></label>

77 <label>Deitel.com Website


79 value = "deitel.com" /></label>

80 <label>Reference in a book


82 value = "book" /></label>

83 <label>Other


85 value = "other" /></label>

86 </p>

87

88 <p>

89 <label>Rate our site:

90

Shton nje grup me radio

button ne te cilet vetem

njeri mund te zgjidhet.

Radio button i

selektuar

60

91 

92 

93 

94 <select name = "rating">

95 <option selected = "selected">Amazing</option>

96 <option>10</option>










106 <option>Awful</option>

107 </select>

108 </label>

109 </p>

110

111 <p>

112 <input type = "submit" value = "Submit" />

113 <input type = "reset" value = "Clear" />

114 </p>

115 </form>

116 </body>

117 </html>

Krijon nje drop down list

me emrin“rating”

Caktohet “Amazing” si

opsioni i selektuar

fillimisht


31

61

Linke te brendshme

62

Tagu a mund te perdoret per te na derguar ne nje

sesion tjeter brenda te njejtit dokument duke

specifikuar id e elementit ne vend te atributit href per

linkun.

Per te bere nje lidhje te brendshme me nje element me

ane te atributit id, perdoret sintaksa #id.

32

63




4

5 

6 


8 <head>

9 <title>Internal Links</title>

10 </head>

11

12 <body>

13 

14 <h1 id = "features">The Best Features of the Internet</h1>

15

16 

17 <p><a href = "#bugs">Go to <em>Favorite Bugs</em></a></p>

18

19 <ul>

20 <li>You can meet people from countries

21 around the world.</li>

22 <li>You have access to new media as it becomes public:

23 <ul>

24 <li>New games</li>

25 <li>New applications

26 <ul>

27 <li>For Business</li>

28 <li>For Pleasure</li>

29 </ul>

30 </li>

31

Caktohet atributi id

per elementin h1

Krijon nje link per ne elementin me id =

bugs

64

32 <li>Around the clock news</li>

33 <li>Search Engines</li>

34 <li>Shopping</li>

35 <li>Programming

36 <ul>

37 <li>XHTML</li>

38 <li>Java</li>

39 <li>Dynamic HTML</li>

40 <li>Scripts</li>

41 <li>New languages</li>

42 </ul>

43 </li>

44 </ul>

45 </li>

46

47 <li>Links</li>

48 <li>Keeping in touch with old friends</li>

49 <li>It is the technology of the future!</li>

50 </ul>

51

52 

53 <h1 id = "bugs">My 3 Favorite Bugs</h1>

54 <p>

55 

56 <a href = "#features">Go to <em>Favorite Features</em></a>

57 </p>

58 <ol>

59 <li>Fire Fly</li>

60 <li>Gal Ant</li>

61 <li>Roman Tic</li>

62 </ol>

63 </body>

64 </html>

Krijon nje link per ne elementin me id = features

Cakton atributin id per

elementin h1.


33

65

Elementet meta

66

Pjese e sesionit head te dokumentit

Nje nga menyrat me ane te te cilave search engines

zgjdhin faqet web, jane elementet meta

Atributi name identifikon tipin e elementit meta

Atributi content i elemenetit te tipit meta

keywords: ve ne dispozicion per search engines nje liste fjalesh qe

pershkruajne faqen. Keto fjale krahasohen me fjalet qe po kerkohen

ne search engine.

description: ve ne dispozicion nje pershkrim te faqes tre deri ne

kater rreshta ne formen e nje fjalie. Kjo perdoret nga search

engines per te kataloguar web site. Ndonjehere ky tekst shfaqet

edhe si rezultat i kerkimit.

34

67




4

5 

6 


8 <head>

9 <title>Welcome</title>

10

11 

12 

13 <meta name = "keywords" content = "web page, design,

14 XHTML, tutorial, personal, help, index, form,

15 contact, feedback, list, links, deitel" />

16 <meta name = "description" content = "This website will

17 help you learn the basics of XHTML and web page design

18 through the use of interactive examples and

19 instruction." />

20 </head>

21 <body>

22 <h1>Welcome to Our Website!</h1>

23

24 <p>We have designed this site to teach about the wonders

25 of <strong><em>XHTML</em></strong>. <em>XHTML</em> is

26 better equipped than <em>HTML</em> to represent complex

27 data on the Internet. <em>XHTML</em> takes advantage of

28 XML’s strict syntax to ensure well-formedness. Soon you

29 will know about many of the great features of

30 <em>XHTML.</em></p>

31

32 <p>Have Fun With the Site!</p>

33 </body>

34 </html>

Keywords qe

pershkruajne faqen per search engines

Description i site ne nje fjali.

68


35

Fund Leksion 1

69

Leksion 1 - Hyrje Ne XHTML

Documents

Transcript of Leksion 1 - Hyrje Ne XHTML