1 / 49

Abetarja e Web-it , HTML

Abetarja e Web-it , HTML. Leksion 1. Blloqet e ndërtimit të web-it. HTML dhe CSS Client Scripting - JavaScript dhe DOM Server Scripting - ASP, PHP XML dhe SQL. WWW - World Wide Web. WWW është shkurtim i   World Wide Web WWW zakonisht quhet Web .

sondra
Download Presentation

Abetarja e Web-it , HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Abetarjae Web-it,HTML Leksion 1

  2. Blloqet e ndërtimittë web-it • HTML dheCSS • Client Scripting - JavaScript dheDOM • Server Scripting - ASP, PHP • XML dheSQL

  3. WWW - World Wide Web • WWW ështëshkurtim i  World Wide Web • WWW zakonishtquhetWeb. • Web-i ështënjërrjetkompjuterashnëtëgjithëbotën. • Tëgjithëkompjuterat ne Web mundtëkomunikojnë me njëri-tjetrin duke përdorurgjuhëstandarte • Tëgjithëkompjuterat ne Web përdorinnjëstandartkomunikimitëquajturHTTP

  4. Si punon WWW-ja? • Informacioniruhet ne dokumenteqëquhenfaqe web • Faqet web janëskedarëqëruhennëkompjuteraqëquhenservera web • Kompjuteratqëlexojnëfaqet web quhenklientë web • Klientët web i shohinfaqet me një program qëquhetweb browser (shfletues web-i) • Browseratme popullorëjanëInternet Explorer, Chrome dhe Firefox

  5. Si i merrbrowserifaqet web? • Një browser merrnjëfaqe web nganjë server me anëtënjëkërkese • Njëkërkesëështënjëkërkesëstandarte HTTP qëpërmbannjëadresëfaqeje • Njëadresëfaqejekakëtëpamje: http://www.someone.com/page.htm

  6. Si i shfaqbrowserifaqet web? • Tëgjithafaqet web përmbajnëinstruksionese siduhettëshfaqen • Browserishfaqfaqenduke i lexuarkëtoinstruksione • Instruksionetmëtëzakonshmetëshfaqjesquhentage HTML • Tagu HTML përnjëparagrafkakëtëparaqitje: <p> • Njëparagrafnë HTML përcaktohetkështu: <p>This is a paragraph.</p>

  7. Kush i vendosstandartet web? • Standartet Web nukjanëvendosurnga Google apoMicrosoft • Rregullatnë web janëpërcaktuarngaW3C • W3C ështëshkurtim i World Wide Web Consortium • W3C përcaktonspecifikimetpërstandartet web • Standartetmëthelbësorete web-it janëHTML, CSS and XML

  8. HTML • HyperText Markup Language (HTML) ështënjëbashësikodeshtëpërdorurpërtëndërtuarfaqetWeb. • PraështëgjuhaqëpërdoretpërtëndërtuarfaqetWeb. • Mundësonndërtimin, ndryshimindhemirëmbajtjene faqevenë World Wide Web

  9. CfarënukështëHTML? • Para se tëshohim se cfarëështëHTML, është e rëndësishmete dime se cfarënukështë HTML . • E para, nukështëe vështirëper t’ukuptuardhepërdorur. • E dyta, HTML nukështënjëgjuhëe vërtetëprogramimi(ështëmëshumëgjuheformatimi). NukështënjëgjuhëpërtëshkruarprogrameWeb.

  10. HTML • Termatdokumentdhefaqeperdorenshpesh ne menyretendersjelltekurflitet per faqetWeb, poratonuktregojnetenjejtengje. • Teknikishtdokumentijanekodetaktualete HTML ndersafaqjaështëajocfareduketpasiperkthehetngabrowseri.

  11. CfarëështëHTML? • H është per “hyper”. • Nje “hyper document” ështënjedokumentqepermbanlinqe (lidhje) me pjesetetjeraqemundtejetenjedokumenttjeterosebrendatenjejtitdokument. • Kuraktivizohetnje link, ngaklikimi i tijmundesohethapja e njedokumentitjeter, levizja ne tenjejtindokument, paraqitja e njeimazhietj. • “Hyper document” janekonsideruarshume me teperdorshem se tekstetstandartesepseperdoruesimundtezbulojelidhjendermjetideve, kanjelogjiketepercaktuarnderveprimi me faqenWeb.

  12. CfarëështëHTML? • T është per Text. • tregonse cfareparaqitet ne ekranin e kompjuterit. • Lejonportabilitetpermesplatformavedomethenelejontegjithellojet e kompjuteravekudo ne boteteparaqesindokumentatqepermbajnekodeHTML. • Termiplatforme i referohetkombinimittetipittekompjuterit, sistemittetijteoperimit, browseritetj.

  13. CfarëështëHTML? • ML është per “markup language”. • HTML perdorshkronjatevendosurandermjet < dhe >. • Njekonceptbazeqeqendron per HTML ështëqene jemitepergjegjshemper permbajtjen, porbrowserimenaxhonparaqitjen. • Pra ne kemikontrolltekufizuarpersaiperketformatit, keshtuqeduhettekufizohemi ne permbajtje.

  14. Versionet e HTML-së

  15. Perdorimi i HTML/XHTML • XHTML ështërelativisht e thjeshte. • XHTML ështëe rregulltdhe e strukturuar. • Ndiqnistandartetdhepunajuaj do tejete me e thjeshte, me e qendrueshmesidherezultatet do jene me tebesueshme.

  16. Problemet me HTML • Versionekonkuruesetebrowseraveprezantuanvecoriterejapertejstandarteve • Implementimetepaqendrueshmeteparaqitjesdheteskripteve • Permbajtjadheprezantimiteperziera se bashku

  17. XHTML • XHTML ështënje version i HTML-se i modifikuar per teqenekonformstandartit XML • Dizenjuar per tendarepermbajtjenngaprezantimi • Permbajtja ne XHTML • Prezantimikontrollohetnga Cascading Style Sheets (CSS) • Extensible – Mundtepercaktohenelementeshtese • XML Compatible – Gjuhetetjeraqebazohen ne XML mundtenguliten ne dokumente XHTML • Si njegjuheprogramimi • Sintaksespecifike per t’uperdorur • Ka aplikacionevleresuese (validator) qejundihmojnetandertonikodin sic duhet

  18. Ndryshimet e XHTML • Elementetdheatributetduhettejene me shkronjat e vogla (loëercase) • Te gjitheelementetduhettekenetagehapesedhetagembyllese<p>Hello</p> • Elementetboshepermbajnetagunmbylles ne vetvete<br /> • Vlerat e atributeveduhettevendosenbrendathonjezave • Specifikimetemetejshme i gjenitek http://www.w3.org/tr/xhtml1/#diffs

  19. NjeSkedari thjeshtë XHTML <!DOCTYPE HTML PUBLIC "-//W3C//Dtd XHTML 1.0 transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd"> <html> <head> <title> My Home Page </title> </head> <body> <h1>My Home Page </h1> <p> Welcome to my home page </p> </body> </html>

  20. StrukturaHierarkike DokumentixHTMLindertuar sic duhet, formonnjehierarki

  21. Tipet e Permbajtjes Dokumentetndertohenngatipelogjiketepermbajtjes

  22. StrukturaSemantike Permbajtja e tenjejtit tip zakonishtformatohet ne menyretetilleqeteduketnjesoj.

  23. Markup Semantike HTML markup bazohet ne tipelogjiketepermbajtjes

  24. Hierarkia Hierarkiaperfundimtare

  25. Shprehja DOCTYPE • Deklaronversioninspecifikte HTML ose XHTML qepoperdoret ne faqe • Perdoretngabrowseri per tevendosur se si do teprocesohetfaqja • Vendosetgjithmone e para ne skedar

  26. Shprehja DOCTYPE • tretipe • Strict – permbantegjitheelementetdheatributet e HTML-se, por NUK PERFSHIN elementeteprezantimitoseelementetevjeteruara (sifont). Frameset-et nuklejohen • transitional – permbantegjitheelementetdheatributet e HTML-se, por duke PERFSHIRE elementeteprezantimitoseelementetevjeteruara (si font). Frameset-et nuklejohen • Frameset– Perdoretnesefaqja ka frame

  27. Strict DOCTYPE • Shembull <!DOCTYPE HTML PUBLIC "-//W3C//Dtd XHTML 1.0 Strict//EN“ "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-strict.dtd"> • Perdorimii Strict inkurajonkodimin e bazuar ne standarte • Vleresuesit (Validators) do tetregojnegabimetlogjike ne metodattuaja • CSS-tetuaja do tepunojne me mire dhe ne menyre me teparashikueshme

  28. Elementet • Perbehennga tri pjese: • TaguiFillimit, icilimundtepermbajeatribute • Permbajtja • TaguiFundit • Shembull: <p id=“intro”>Welcome</p>

  29. Atributet • Gjithmoneperdorenvetem ne Tagun e Fillimitteelementit • tretipe: • AtributeOpsionale: Varennga tipi ielementit • AtributeStandarte: id, class, title, style, dir, lang, xml:lang • AtributeNgjarjesh: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup • Perdoren ne skriptim

  30. ElementetBoshe • Disaelementenukkanepermbajtje, prandajnukkane as tag tefundit • <imgsrc=“photo.jpg” /> • <br /> • <hr /> • <link rel="stylesheet" type="text/css" href=“main.css" /> • Ne XHTML, qekerkon tag tefundit per tegjitheelementet, perdoretnje tag ivetemedhe per tagun e fillimit, edhe per ate tefundit.

  31. <h1>, <h2>, <h3>, <h4>, <h5>, <h6> • Titujt ne faqe (headings) • Perfaqesojnetemenkryesore, nentemat, etj. tefaqes • është e rendesishmeqeatoteperdoren ne menyrelogjikene faqe, gjeqendihmonteknologjitetillasi browser-at me zeqeteparaqesinfaqen ne menyreinteligjente

  32. <p> • Paragraf • Nevojitet per paraqitjen e tekstit ne njeparagraf • Blockquotes (<blockquote>) janetengjashme me paragrafin, vetem se atokane margins anesore me tegjera

  33. 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>

  34. Markup iTekstit • 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

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

  36. Tabelat • <table>tabele</table> Percaktonrreshtat, shtyllat, dhedicituren(caption) qeperbejnenjetabele. • <tr>qelizat e tabeles</tr> Percaktonnjerresht ne tabele. • <td>tedhenat e tabeles</td> Percaktontedhenatetabeles(njeqelize).

  37. Tabelat • <caption>caption</caption> Percaktonnjediciture per tabelen. • <th>koka e tabeles</th> Percaktonkoken e tabeles (njeqelize).

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

  39. Atributet e <table> • border– ështëvijaqerrethontabelendhendermjetcdoqelize. Vleradefault e atributitborder është 1, do tethote1-pixel border rrethtabelesdherrethcdoqelize ne tabele. • frame– ështëvijaqerrethonnjeqelizetevetmeapotegjithetabelen. Specifikoncilatpjesetekufirittetabelesjanetedukshme. • rule– ështëvijavertikaleapohorizontaleqendanrreshtatdhekolonat e qelizave. Specifikonse cilatshfaqenndermjetqelizavebrendatabeles.

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

  41. Atributet e <table> • frame • border : tegjithaanet • box : tekateranet • void : asnjeane • above : vetemana e siperme • below : vetemana e poshtme • hsides : anethorizontale • vsides : anetvertikale • lhs : vetemanet e majta • rhs : vetemanet e djathta

  42. Atributet e <table> rules • none : no rules, vetem frame i jashtem • rows : rules vetemndermjetrreshtave • cols : rules vetemndermjetshtyllave • all : rules ndermjetrreshtavedheshtyllave

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

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

  45. Imazhet • Imazhetvendosen duke perdorurnje element img • Atributialtsigurontekstalternativqepershkruanimazhin ne rast se veteimazhinukmundteshfaqetoseneseperdoruesinukmundtashoheimazhin <imgsrc="picture.gif" alt=“Butterfly">

  46. Linket • Linket (anchors) mundtelidhinfaqentuaj me ndonjeskedartjeterne Web <a href="http://www.washington.edu/"> University of Washington </a>

  47. Div • Div-et perfshijnenjebashkesielementesh <div style=“text-align: center;”> <h2> News</h2> <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>

  48. Span • Span-et perfshijneobjekte (tekst, imazhe) brendanjeelementi<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>

  49. Pyetje

More Related