Download presentation
Presentation is loading. Please wait.
1
Internet Ligjerata 10 Dr. Fisnik Dalipi
2
HTML 5 Çka është HTML5? Pasardhës i HTML 4.01 dhe XHTML 1.1
Vjen me tage të reja, tipare dhe API. Më poshtë japim një listë me vetëm disa tipare që e karakterizojnë HTML 5: Elemente të reja strukturuese(<header>, <footer>, <nav> etj.) Forma 2.0 dhe validim nga ana e klientit Përmbajtje e re nga shftletuesit për audio dhe video (<video>, <audio>) Canvas API dhe SVG Web magazinim (Storage) Offline aplikacione Geo-lokacion Drag & Drop Komuikime të reja API (Server Sent Events, Web Sockets, …)
3
HTML 5 Historia e HTML5? Dhjetor 1997: HTML 4.0 publikohet nga W3C
Shkurt - Mars 1998: publikohet XML 1.0 Dhjetor Janar 2000: ECMAScript 3rd Edition, XHTML 1.0 (Riformulim i HTML tageve në XML) dhe publikimi i HTML 4.01 rekomandimeve Maj 2001: publikohen rekomandimet e XHTML 1.1 Gushtt 2002: draft versioni i parë punues i XHTML 2.0. Dhjetor 2002: draft versioni i dytë punues i XHTML 2.0. Janar 2008: publikohet draft versioni i parë punues W3C i HTML5 !!
4
HTML 5 E ardhmja e HTML5 84% e programuesve planifikojnë që ti aplikojnë tiparet e HTML 5 Çelësi për ta kuptuar HTML 5 qëndron aty se si teknologji HTML 5 nuk është si e vetme por përbëhet nga një grup teknologjish. Fuqia e HTML5 mundë të vërehet në përzgjedhjen e kompanisë Microsoft për ta përdorë në Windows 8 Për të krijuar një HTML5 fajll na nevojiten: Ndonjë tekst editor si Notepad++, Editplus, Textmate, Dream weaver Shfletues Interneti si Chrome, Firefox 3.5+, Safari, IE9, Opera Njohuri paraprake për HTML 4
5
Struktura e Web faqes Këtu kemi elemente të reja dhe të përmirësuara
HTML5 ofron 28 elemente të reja: <section>, <article>, <aside>, <hgroup>, <header>,<footer>, <nav>, <figure>, <figcaption>, <video>, <audio>, <source>, <embed>, <mark>,<progress>, <meter>, <time>, <ruby>, <rt>, <rp>,<wbr>, <canvas>, <command>, <details>,<summary>, <datalist>, <keygen> and <output> Faqja e HTML fillon me deklarimin DOCTYPE HTML5 po ashtu i përmirëson disa elemente ekzistuese që të reflektojnë më mirë përdoruershmëri më të mirë: Elementi <a> tani mund të përmbaj përmbajtje më komplekse Elementi <hr> paraqet ndarje tematike Elementi<cite> e paraqet vetëm titullin e punimit Elementi <strong> e reflekton më shumë rëndësinë se sa dukshmërinë
6
Struktura e Web faqes Faqja e parë në HTML5
<!DOCTYPE html> <html> <head> <title>Titulli i dokumentit</title> </head> <body> Kjo eshte gjithcka per te nisur me HTML 5. </body> </html>
7
Elemente të reja Elemente të reja semantike
<nav>: është bllok navigues. I grupon linqet të faqeve tjera ose të pjesëve të një faqeje të vetme. <nav> nuk duhet përdorur në çdo vend ku hasen linqe.
8
Elemente të reja Elemente të reja semantike
<Header>: paraqet header-in (ballinën) e dokumentit
9
Elemente të reja Elemente të reja semantike
<article>: Webi sot përmban një oqean me të dhëna dhe artikuj lajmesh. Kjo bëri që W3C të krijoj një një element (tag) për artikujt <div class="article">. E përdorim article kur mendojm se duhet shpërndar një artikull. Elementi "article" mund të jetë i ndërthurur në një element tjetër "article“ .
10
Elemente të reja Elemente të reja semantike
<aside>: Elementi "aside" i referohet përmbajtjes kryesore, por mund të ndahet nga përmbajtja.
11
Elemente të reja Elemente të reja semantike
<footer>: Ngjashëm si me elementin "header”, elementi "footer" i referohet pjesës së poshtme të web faqes. Elementi footer jo vetëm që mund të vendoset në fund të ndonjë dokumenti por edhe në çdo seksion apo artikull.
12
A përmbahet elementi progress?
Elemente të reja Elemente të reja semantike <Progress>: Elementi i ri "progress" është shumë i ngjashëm me elementin "meter" . Krijohet për të treguar progresin e një pune të caktuar. Progresi mund të jetë i përcaktuar ose i papërcaktuar. Kjo d.m.th. se mund të përdoret "progress" për të treguar se ne akoma nuk e dijmë edhe sa punë kemi për të bërë. Progresi i punës A: <progress value="60" max="100">60%</progress> Progresi i punës A: Shfletuesi A përmbahet elementi progress?
13
Elemente të reja Elemente të reja semantike
<meter>: "Meter" është element i ri në HTML5 e që përfaqëson vlerën e një intervali. Fjala kyçe këtu është "known range". Gjatë përdorimit të këtij elementi duhet të përcaktohet edhe vlera minimale dhe ajo maksimale e intervalit.
14
Elemente të reja Elemente të reja semantike
<mark>: Me elementin<mark> e bëjmë një tekst të dokumentit të nënvizohet, apo nxihet si pasojë e rëndësisë të atij teksti. <figure>: Elementi <figure> përcakton përmbajtje të vetë-përmbajtura si ilustrime, diagrame, foto, etj.
15
Të gjitha në një vend I vendosim të gjitha në një vend
16
Të gjitha në një vend Krijimi i blogjeve me html5
17
Format në HTML 5 Tipi input
Ja disa tipe që kanë ekzistuar përpara HTML5: ■ button ■ checkbox ■ file ■ hidden ■ image ■ password ■ radio ■ reset ■ submit ■ text HTML5 ofron edhe 13 tipe të reja input: ■ search ■ ■ url ■ tel ■ datetime ■ date ■ month ■ week ■ time ■ datetime-local ■ number ■ range ■ color
18
Forma Kerko ne Google: <input type="search" name="googlesearch" /> <input type=" " name="usermail" /> Jepe emrin e websajtit tend: <input type="url" name="homepage" /> Telefoni: <input type="tel" name="usrtel" /> <label for="rating">On a scale of 1 to 10, my knowledge of HTML5 is:</label> <input type="range" min="1" max="10" name="rating" type="range"> Zgjidhe ngjyren e preferuar: <input type="color" name="favcolor" /> <form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form> <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" name="a" value="50" />100 <input type="number" name="b" value="50" /> =<output name="x" for="a b"></output> </form>
19
Thank You! PYETJE??? 19
Similar presentations
