Abetarja e Webit HTML Leksion 1 1 Blloqet

Abetarja e Web-it, HTML Leksion 1 1

Blloqet e ndërtimit të web-it • HTML dhe CSS • Client Scripting - Java. Script dhe DOM • Server Scripting - ASP, PHP • XML dhe SQL 2

WWW - World Wide Web WWW është shkurtim i World Wide Web WWW zakonisht quhet Web-i është një rrjet kompjuterash në të gjithë botën. Të gjithë kompjuterat ne Web mund të komunikojnë me njëri-tjetrin duke përdorur gjuhë standarte • Të gjithë kompjuterat ne Web përdorin një standart komunikimi të quajtur HTTP • • 3

Si punon WWW-ja? • Informacioni ruhet ne dokumente që quhen faqe web • Faqet web janë skedarë që ruhen në kompjutera që quhen servera web • Kompjuterat që lexojnë faqet web quhen klientë web • Klientët web i shohin faqet me një program që quhet web browser (shfletues web-i) • Browserat me popullorë janë Internet Explorer, Chrome dhe Firefox 4

Si i merr browseri faqet web? • Një browser merr një faqe web nga një server me anë të një kërkese • Një kërkesë është një kërkesë standarte HTTP që përmban një adresë faqeje • Një adresë faqeje ka këtë pamje: http: //www. someone. com/page. htm 5

Si i shfaq browseri faqet web? • Të gjitha faqet web përmbajnë instruksione se si duhet të shfaqen • Browseri shfaq faqen duke i lexuar këto instruksione • Instruksionet më të zakonshme të shfaqjes quhen tage HTML • Tagu HTML për një paragraf ka këtë paraqitje: <p> • Një paragraf në HTML përcaktohet kështu: <p>This is a paragraph. </p> 6

Kush i vendos standartet web? • Standartet Web nuk janë vendosur nga Google apo Microsoft • Rregullat në web janë përcaktuar nga W 3 C • W 3 C është shkurtim i World Wide Web Consortium • W 3 C përcakton specifikimet për standartet web • Standartet më thelbësore te web-it janë HTML, CSS and XML 7

HTML • Hyper. Text Markup Language (HTML) është një bashësi kodesh të përdorur për të ndërtuar faqet Web. • Pra është gjuha që përdoret për të ndërtuar faqet Web. • Mundëson ndërtimin, ndryshimin dhe mirëmbajtjen e faqeve në World Wide Web 8

Cfarë nuk është HTML? • Para se të shohim se cfarë është HTML, është e rëndësishme te dime se cfarë nuk është HTML. • E para, nuk është e vështirë per t’u kuptuar dhe përdorur. • E dyta, HTML nuk është një gjuhë e vërtetë programimi (është më shumë gjuhe formatimi). Nuk është një gjuhë për të shkruar programe Web. 9

HTML • Termat dokument dhe faqe perdoren shpesh ne menyre te ndersjellte kur flitet per faqet Web, por ato nuk tregojne te njejten gje. • Teknikisht dokumenti jane kodet aktuale te HTML ndersa faqja është ajo cfare duket pasi perkthehet nga browseri. 10

Cfarë është HTML? • H është per “hyper”. • Nje “hyper document” është nje dokument qe permban linqe (lidhje) me pjese te tjera qe mund te jete nje dokument tjeter ose brenda te njejtit dokument. • Kur aktivizohet nje link, nga klikimi i tij mundesohet hapja e nje dokumenti tjeter, levizja ne te njejtin dokument, paraqitja e nje imazhi etj. • “Hyper document” jane konsideruar shume me te perdorshem se tekstet standarte sepse perdoruesi mund te zbuloje lidhje ndermjet ideve, ka nje logjike te percaktuar nderveprimi me faqen Web. 11

Cfarë është HTML? • T është per Text. • tregon se cfare paraqitet ne ekranin e kompjuterit. • Lejon portabilitet permes platformave domethene lejon te gjithe llojet e kompjuterave kudo ne bote te paraqesin dokumentat qe permbajne kode HTML. • Termi platforme i referohet kombinimit te tipit te kompjuterit, sistemit te tij te operimit, browserit etj. 12

Cfarë është HTML? • ML është per “markup language”. • HTML perdor shkronja te vendosura ndermjet < dhe >. • Nje koncept baze qe qendron per HTML është qe ne jemi te pergjegjshem permbajtjen, por browseri menaxhon paraqitjen. • Pra ne kemi kontroll te kufizuar persa i perket formatit, keshtu qe duhet te kufizohemi ne permbajtje. 13

Versionet e HTML-së 14

Perdorimi i HTML/XHTML • XHTML është relativisht e thjeshte. • XHTML është e rregullt dhe e strukturuar. • Ndiqni standartet dhe puna juaj do te jete me e thjeshte, me e qendrueshme si dhe rezultatet do jene me te besueshme. 15

Problemet me HTML • Versione konkuruese te browserave prezantuan vecori te reja pertej standarteve • Implementime te paqendrueshme te paraqitjes dhe te skripteve • Permbajtja dhe prezantimi te perziera se bashku 16

XHTML • XHTML është nje version i HTML-se i modifikuar per te qene konform standartit XML • Dizenjuar per te ndare permbajtjen nga prezantimi • Permbajtja ne XHTML • Prezantimi kontrollohet nga Cascading Style Sheets (CSS) • Extensible – Mund te percaktohen elemente shtese • XML Compatible – Gjuhe te tjera qe bazohen ne XML mund te nguliten ne dokumente XHTML • Si nje gjuhe programimi • Sintakse specifike per t’u perdorur • Ka aplikacione vleresuese (validator) qe ju ndihmojne ta ndertoni kodin sic duhet 17

Ndryshimet e XHTML • Elementet dhe atributet duhet te jene me shkronjat e vogla (loëercase) • Te gjithe elementet duhet te kene tage hapese dhe tage mbyllese <p>Hello</p> • Elementet boshe permbajne tagun mbylles ne vetvete <br /> • Vlerat e atributeve duhet te vendosen brenda thonjezave • Specifikime te metejshme i gjeni tek http: //www. w 3. org/tr/xhtml 1/#diffs 18

Nje Skedar i thjeshtë XHTML <!DOCTYPE HTML PUBLIC "-//W 3 C//Dtd XHTML 1. 0 transitional//EN" "http: //www. w 3. org/tr/xhtml 1/Dtd/xhtml 1 -transitional. dtd"> <html> <head> <title> My Home Page </title> </head> <body> <h 1>My Home Page </h 1> <p> Welcome to my home page </p> </body> </html> 19

Struktura Hierarkike Dokumenti x. HTML i ndertuar sic duhet, formon nje hierarki 20

Tipet e Permbajtjes Dokumentet ndertohen nga tipe logjike te permbajtjes 21

Struktura Semantike Permbajtja e te njejtit tip zakonisht formatohet ne menyre te tille qe te duket njesoj. 22

Markup Semantike HTML markup bazohet ne tipe logjike te permbajtjes 23

Hierarkia perfundimtare 24

Shprehja DOCTYPE • Deklaron versionin specifik te HTML ose XHTML qe po perdoret ne faqe • Perdoret nga browseri per te vendosur se si do te procesohet faqja • Vendoset gjithmone e para ne skedar 25

Shprehja DOCTYPE • tre tipe • Strict – permban te gjithe elementet dhe atributet e HTML-se, por NUK PERFSHIN elemente te prezantimit ose elemente te vjeteruara (si font). Frameset-et nuk lejohen • transitional – permban te gjithe elementet dhe atributet e HTML-se, por duke PERFSHIRE elemente te prezantimit ose elemente te vjeteruara (si font). Frameset-et nuk lejohen • Frameset – Perdoret nese faqja ka frame 26

Strict DOCTYPE • Shembull <!DOCTYPE HTML PUBLIC "-//W 3 C//Dtd XHTML 1. 0 Strict//EN“ "http: //www. w 3. org/tr/xhtml 1/Dtd/xhtml 1 -strict. dtd"> • Perdorimi i Strict inkurajon kodimin e bazuar ne standarte • Vleresuesit (Validators) do te tregojne gabimet logjike ne metodat tuaja • CSS-te tuaja do te punojne me mire dhe ne menyre me te parashikueshme 27

Elementet • Perbehen nga tri pjese: • Tagu i Fillimit, i cili mund te permbaje atribute • Permbajtja • Tagu i Fundit • Shembull: <p id=“intro”>Welcome</p> 28

Atributet • Gjithmone perdoren vetem ne Tagun e Fillimit te elementit • tre tipe: • Atribute Opsionale: Varen nga tipi i elementit • Atribute Standarte: id, class, title, style, dir, lang, xml: lang • Atribute Ngjarjesh: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup • Perdoren ne skriptim 29

Elementet Boshe • Disa elemente nuk kane permbajtje, prandaj nuk kane as tag te fundit • • <img src=“photo. jpg” /> <br /> <hr /> <link rel="stylesheet" type="text/css" href=“main. css" /> • Ne XHTML, qe kerkon tag te fundit per te gjithe elementet, perdoret nje tag i vetem edhe per tagun e fillimit, edhe per ate te fundit. 30

<h 1>, <h 2>, <h 3>, <h 4>, <h 5>, <h 6> • Titujt ne faqe (headings) • Perfaqesojne temen kryesore, nentemat, etj. te faqes • është e rendesishme qe ato te perdoren ne menyre logjike ne faqe, gje qe ndihmon teknologji te tilla si browser-at me ze qe te paraqesin faqen ne menyre inteligjente 31

<p> • Paragraf • Nevojitet per paraqitjen e tekstit ne nje paragraf • Blockquotes (<blockquote>) jane te ngjashme me paragrafin, vetem se ato kane margins anesore me te gjera 32

Listat • Listat e Parenditura (listat me pika - bullet) <ul> <li>One</li> <li>Tëo</li> </ul> • Listat e Renditura (listat e numeruara) <ol> <li>One</li> <li>Tëo</li> </ol> 33

Markup i Tekstit • Bolding • <b>text</b> • <strong>text</strong> • Italics • <i>text</i> • <em>text</em> (Emphasized text) • Tjeter • <sub>text</sub> subscript • <sup>text</sup> superscript 34

Tabelat <table border cellspacing="5" cellpadding="10"> <caption>People on the team</caption> <tr> <th>Name</th> <th>Position</th> </tr> <td>Mary</td> <td>Analyst</td> </tr> <td>John</td> <td>Technician</td> </tr> </table> 35

Tabelat • <table>tabele</table> Percakton rreshtat, shtyllat, dhe dicituren (caption) qe perbejne nje tabele. • <tr>qelizat e tabeles</tr> Percakton nje rresht ne tabele. • <td>te dhenat e tabeles</td> Percakton te dhena te tabeles(nje qelize). 36

Tabelat • <caption>caption</caption> Percakton nje diciture per tabelen. • <th>koka e tabeles</th> Percakton koken e tabeles (nje qelize). 37

Atributet e <table> • Cellpadding – percakton hapesiren ndermjet te dhenave dhe ne qelize dhe kufirit te qelizes. • Cellspacing – percakton hapesiren ndermjet qelizave ne tabele. 38

Atributet e <table> • border – është vija qe rrethon tabelen dhe ndermjet cdo qelize. Vlera default e atributit border është 1, do te thote 1 -pixel border rreth tabeles dhe rreth cdo qelize ne tabele. • frame – është vija qe rrethon nje qelize te vetme apo te gjithe tabelen. Specifikon cilat pjese te kufirit te tabeles jane te dukshme. • rule – është vija vertikale apo horizontale qe ndan rreshtat dhe kolonat e qelizave. Specifikon se cilat shfaqen ndermjet qelizave brenda tabeles. 39

• • • <html> <head> <title>3 by 2 table</title> </head> <body bgcolor="#ffffff">  • • • • <table frame="above"> <tr> <td>Dallas </td> <td>November 5 th </td> </tr> <tr> <td>Detroit </td> <td>November 11 th </td> </tr> <tr> <td>Toronto </td> <td>November 17 th</td> </tr> </table> </body> </html> 40

Atributet e <table> • • • frame border : te gjitha anet box : te kater anet void : asnje ane above : vetem ana e siperme below : vetem ana e poshtme hsides : anet horizontale vsides : anet vertikale lhs : vetem anet e majta rhs : vetem anet e djathta 41

Atributet e <table> rules • none : no rules, vetem frame i jashtem • rows : rules vetem ndermjet rreshtave • cols : rules vetem ndermjet shtyllave • all : rules ndermjet rreshtave dhe shtyllave 42

• • • <html> <head> <title>3 by 2 table</title> </head> <body bgcolor="#ffffff">  • • • • <table rules="roës"> <tr> <td>Dallas </td> <td>November 5 th </td> </tr> <tr> <td>Detroit </td> <td>November 11 th </td> </tr> <tr> <td>Toronto </td> <td>November 17 th</td> </tr> </table> </body> </html> Shembull 43

Shembull • • Width – kontrollon gjeresine e tabeles <html> <head> <title>3 by 2 table With Border</title> </head> <body bgcolor="#ffffff">  • • • • <table border="10" width="10%"> <tr> <td>Dallas </td> <td>November 5 th </td> </tr> <tr> <td>Detroit </td> <td>November 11 th </td> </tr> <tr> <td>Toronto </td> <td>November 17 th</td> </tr> </table> • </body> • </html> 44

Imazhet • Imazhet vendosen duke perdorur nje element img • Atributi alt siguron tekst alternativ qe pershkruan imazhin ne rast se vete imazhi nuk mund te shfaqet ose nese perdoruesi nuk mund ta shohe imazhin <img src="picture. gif" alt=“Butterfly"> 45

Linket • Linket (anchors) mund te lidhin faqen tuaj me ndonje skedar tjeter ne Web <a href="http: //www. washington. edu/"> University of Washington </a> 46

Div • Div-et perfshijne nje bashkesi elementesh <div style=“text-align: center; ”> <h 2> News</h 2> <p><a href=“budget. html”>Budget</a></p> <p><a href=“invest. html”>Investment</a></p> </div> <div>A block-level section in a document</div> 47

Span • Span-et perfshijne objekte (tekst, imazhe) brenda nje elementi <p>Call me Ishmael. Some years ago — <span style=“font-style: italic; ”>never mind how long precisely</span> — having little or no money in my purse, and nothing particular to interest me on shore</p> • <span>An inline section in a document</span> 48

Pyetje 49