L02_2324 HTML-ListaTabelaFormaCSS GA.pdf

Dizajni dhe Zhvillimi i Web-it HTML Lista, Tabela, Forma GRETA AHMA greta. ahma@ ubt - uni. net 2 02 3/2 02 4 © 2023 UBT 1  Kujtojmë: HTML (1...

Dizajni dhe Zhvillimi i Web-it HTML Lista, Tabela, Forma GRETA AHMA greta. ahma@ ubt - uni. net 2 02 3/2 02 4 © 2023 UBT 1  Kujtojmë: HTML (1) ❑ Çka është HTML? ▪ HTML (Hypertext Markup Language) - përshkruan përmbajtjen dhe strukturën e një faqe të Web’it; ▪ Nuk është një gjuhë programuese. - Krijuar nga blloqe të quajtur elemente HTML është mbresëlënës!!! © 2023 UBT 2  Kujtojmë: HTML (2) ❑ Të gjitha elementet shënohen si në vazhdim: 1 Fillimi i tagut 3 Përmbajtja e tagut 2 Përfundimi i tagut Permbajtja... Elementi në HTML © 2023 UBT 3  Kujtojmë: HTML (3) ❑ Struktura e HTML dokumentit në Web faqes Metadata që nuk p.sh. shfaqet në dritaren e Inxhinieria e Web'it shfaqet si pamjes se shfletuesit emri i faqes Përmbajtja që shfaqet në... Përmbajtja e faqes... pamjen e shfletuesit ruhet në një file emir_domumentit.html © 2023 UBT 4  Elementet Bllok dhe Inline në HTML ❑Vlera default e shfaqjes së elementeve në HTML për shumicën e elementeve është bllok ose inline. ▪ elementi i nivelit të bllokut - fillon gjithmonë në një linjë/rresht të ri dhe merr gjerësinë e plotë të disponueshme. ▪ p.sh të elementeve të bllokut: o o , , , o through o , , ▪ elementi i nivelit inline - nuk fillon në një linjë/rresht të ri dhe merr vetëm gjerësinë që zë kontentin e tij. ▪ p.sh të elementeve të inline: o , o , o , ,, © 2023 UBT 5 Elementi në HTML: Lista PJESA PARË © 2023 UBT 6 Rasti i përdorimit të Elementit List në Webfaqe © 2023 UBT 7  Elementi në HTML: Lista (1) ❑Listat e HTML-it përdoren për të listuar informacionin në mënyrë mire të organizuar dhe semantike. Lista është bllok element. ❑Ekzistojnë 3 lloje të ndryshme të listës në HTML dhe secila ka një qëllim dhe kuptim të veçantë: 1. tagu Lista të renditura (numëruara) - përdoret për të grupuar dhe renditur informatat në organzim të specifikuar. 2. tagu Lista të parenditura (me pika) - përdoret për të grupuar dhe renditur informatat në organzimi të jo-specifikuar 3. tagu Lista përshkruese - përdoret për të shfaqur një listë te termat dhe përshkrimet e tyre. ▪ tagu Përdoret për të listuar artikujt brenda listave dhe. ▪ tagu përdoret për të definuar termat e artikujve të listuar. tagu përdoret për të përshkruar artikujt brenda listave. © 2023 UBT 8  Elementi në HTML: Lista (2) © 2023 UBT 9  Elementi në HTML: Lista (3) Vlerat e atributit për llojin janë (type = 1, A, a, I, ose i) i. Apple 1. Apple ii. Orange 2. Orange iii. Grapefruit 3. Grapefruit A. Apple a. Apple B. Orange b. Orange I. Apple C. Grapefruit c. Grapefruit II. Orange III. Grapefruit Vlerat e atributit për llojin janë (type = disc, circle ose square) Apple o Apple ▪ Apple Orange o Orange ▪ Orange Pear o Pear ▪ Pear © 2023 UBT 10  Elementi në HTML: Lista (4.1) ❑ Listat Nested (shumfishta) © 2023 UBT 11  Elementi në HTML: Lista (4.2) ❑ Listat Nested (shumfishta) Listat mund të përmbajnë pothuajse çdo gjë Tekstet, imazhet, paragrafët, lidhjet © 2023 UBT 12 Elementi në HTML: Tabela PJ E S A D Y TË © 2023 UBT 13  Elementi në HTML: Tabela (1) ❑ Tabelat përdoren në HTML për shtrirjen e faqeve dhe organizimin e informacioneve. ❑ Ekzistojnë disa lloje të informacioneve që duhet të shfaqen në një grid ose tabelë. ▪ p.sh: tabelat përfshijnë raportet financiare, oraret televizive , rezultatet e sportit etj. ▪ Tabelat asnjherë nuk preferohen të përdoren për shtrirje të faqeve © 2023 UBT 14  Elementi në HTML: Tabela (2) ❑ Struktura bazë e tabelës në HTML. ▪ Tagu : Përdoret për të definuar një tabelë dhe është tagu root/prind i tabelës. ▪ Tagu : Tregon fillimin e secilit rresht duke përdorur tagun startues. Pasohet nga një ose më shumë tags (një për çdo qelizë në atë rresht). Në fund të rreshtit përdorim një tag mbyllës. ▪ Tagu : Secila qelizë ose e dhëne e një tabele reprezentohet duke përdorur një tag. (. qëndron për të dhënat e tabelës.) Në fund të secilës qelizë përdorim një tag mbyllës. © 2023 UBT 15  Elementi në HTML: Tabela (3) ❑ Kryetitujt e tabelës në HTML. ▪ tagu i përdorur njëkohesisht si tagu, por reprezenton titujt për një kolonë ose për një rresht. (th është për titullin e tabelës.) © 2023 UBT 16  Elementi në HTML: Tabela (colspan) ❑ Spanning (zgjerimi) i kolonave (ose colspan). ▪ Atributi i colspan mund të përdoret në taguin ose dhe tregon se sa kolona përkatësisht qeliza mund të përfshijë ‘zgjerimi’. © 2023 UBT 17  Elementi në HTML: Tabela (rowspan) ❑ Spanning (shtritja) e rreshtave (ose rowspan). ▪ Atributi i rowspan mund të përdoret në taguin ose dhe tregon se sa rreshta përkatësisht qeliza mund të përfshijë ‘shtrirja’. © 2023 UBT 18 Elementi në HTML: Formulari PJESA TRETË © 2023 UBT 19  Elementi në HTML: Formulari (1) ❑Forma më e njohur në Web është boxi i kërkimit që gjindet në mes të faqes kryesore të Google dhe gjirafa50. ▪ Ju do të shiheni format kur regjistroheni si anëtar i një faqe të Web’it, kur bëni blerje online ose kur regjistroheni në universitet etj. © 2023 UBT 20  Elementi në HTML: FORMAT (2) ❑Ekzistojnë disa lloje të kontrolleve të formave që mund t'i përdorni për të mbledhur informacion nga vizitorët në faqen tuaj. © 2023 UBT 21  Elementi në HTML: FORMAT (3) ❑Ekzistojnë disa lloje të kontrolleve të formave që mund t'i përdorni për të mbledhur informacion nga vizitorët në faqen tuaj. © 2023 UBT 22  Elementi në HTML: FORMAT (4) ❑ Struktura e forms: Tagu :është tagu i definimit të formes. ▪ tagu kërkon një atribut të veprimit (action). Vlera e saj është URL-ja e faqes në server që do të marrë informacionin në formën kur ai dorëzohet. ▪ Forma mund të dërgohet duke përdorur një nga dy metodat: get ose post. © 2023 UBT 23  Elementi në HTML: FORMAT (5) ❑ Tagu :përdoret për të krijuar disa kontrolle të ndryshme formash. ▪ Vlera e tipit përcakton se çfarë lloj të dhënash do të krijohet. o atributi type=“text”-kur atributi i tipit ka një vlerë të tekstit, krijon një hyrje të vetme teksti. o atributi name=“p.sh emriPërdoruesit”-kur përdoruesi inserton informacion në një formë, serveri duhet të dijë se cilen formë kontrolli duhet te perdure per seciles pjesë të të dhënave te insertuara. o atributi maxlength =“p.sh 30”-ju mund të përdorni atributin maxlength për të kufizuar numrin e karaktereve që një përdorues mund të insertoj në tekst. © 2023 UBT 24  Elementi në HTML: FORMAT (7) ❑ tagu përdoret për të krijuar një input të tekstit me shumë rreshta. o Çdo tekst që shfaqet në mes të tag -ut … … … < / textarea > do të shfaqet në boxin e tekstit kur faqja ngarkohet. © 2023 UBT 27  Elementi në HTML: FORMAT (8) ❑tagu : atribut type="radio" radio butonat, i lejojnë përdoruesit të zgjedhin vetëm një nga opcionet.Atributi.value tregon vlerën e dërguar në server nëse ky radio buton është e përzgjedhur. Ramiz HOXHA © 2023 UBT 28  Elementi në HTML: FORMAT (9) ❑tag : atribut type="checkbox" checkboxes lejojnë përdoruesit të zgjedhin një ose më shumë opcione në përgjigje të një pyetjeje. ▪ atributi value tregon vlerën e dërguar në server nëse ky checkbox është e përzgjedhur. © 2023 UBT 29  Elementi në HTML: FORMAT (10) ❑ tagu : tagu përdoret për të krijuar një box të listës drop down. Përmban dy ose më shumë taga ▪ atributi name tregon emrin e kontrollit të formes që dërgohet në server, së bashku me vlerën që përdoruesi ka zgjedhur. tagu përdoret për të specifikuar opsionet që përdoruesi mund të zgjedhë © 2023 UBT 30  Elementi në HTML: FORMAT (11) ❑ submit button. tagu ▪ Butoni i submit përdoret për të dërguar një formë në server. atributi i value përdoret për të kontrolluar tekstin që shfaqet në një buton. © 2023 UBT 31  Elementi në HTML: FORMAT (12) ❑ Kemi edhe disa taga të tjera të kontrolleve në Form: ▪