HTML5
Kur shkruani dokumente në HTML5, një nga karakteristikat e reja duket që në momentin e deklarimit.Gjithashtu deklarimi i enkodimit të karaktereve është thjeshtuar:
Elementët e rinj në HTML5<!DOCTYPE HTML> <meta charset="UTF-8">
Të rejat në HTML5<article>, <aside>, <audio>, <canvas>, <datalist>,<details>, <embed>, <footer>, <header>, <nav>, <output>, <progress>, <section>, <video>, dhe shumë të tjera!
Integrated API (Application Programming Interfaces)
- Drag dhe Drop
- Audio dhe Video
- Aplikacione Web Offline
- Historia
- Ruajtje lokale
- Gjeolokacioni
- Mesazhet në Web
Struktura e faqeve në HTML5
Elementi < header >Në HTML4, do të përcakojmë një header kështu:
<div id="header">
Në HTML5, përdoret thjesht tagu < header >. Elementi < header > përdoret brenda tageve head.
<!DOCTYPE html> <html> <head></head> <body> <header> <h1> Titulli </h1> <h3> Nentitulli </h3> </header> </body> </html>
Elementi < footer >
Elementi footer përdoret gjerësisht. Përgjithësisht, ne i referohemi një seksioni të lokalizuar në fund të faqes web si footer.
< footer >…< /footer >
Këto tag përgjithësisht përmbajnë informacionin e mëposhtëm:
- Informacione Kontakti
- Privatësie
- Ikonat e Mediave Sociale
- Kushtet e shërbimit
- Të drejtat e autorit
- Sitemap dhe Dokumente të ngjashme
Elementi < nav >
Ky tag prezanton një pjesë të web-it e cila lidh faqen kryesore me faqet e tjera ose me seksione të ndryshme brenda faqes. Ky është seksioni me linket e navigimit. Për shembull:
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Shërbimet</a></li> <li><a href="#">Rreth nesh</a></li> </ul> </nav>
Jo të gjitha linket në një document duhet të jenë brenda elementit < nav > . Elementi < nav > ka për qëllim të përdoret në menunë kryesore të web-it. Rast tipik, elementi < footer > ka një listë navigimesh të cilat nuk janë të nevojshme të jenë brenda tagut të navigimit.
Elementi < article >
Article përmban përmbajtje që mund të përdoren gjithandej në faqe. Këto përmbajtje mund të jenë një post forumi, një artikull gazete ose reviste, një hyrje në bllog, një koment, an interactive, etj. Elementi < article > rizhvendos elementin < div > që është përdorur gjerësisht në HTML4, me një id ose klasë.
<article> <h1>Titulli i artikullit </h1> <p> Përmbajtja e elementit article </p> </article> .
Elementi < section >
< section > është një mbajtës logjikë i përmbajtjes ose artikullit Seksionet përdoren për ndarjen e pjesëve brenda një artikulli. Për shembull, faqja kryesore mund të ketë një seksion që prezanton kompaninë, një seksion tjetër për publikimet, dhe një tjetër për informacionet e kontaktit. Çdo element < section > duhet të identifikohet, tipikisht duke përdorur një heading (h1-h6 element) si një fëmijë të elementit të < section >.
<article> <h1>Miresevini</h1> <section> <h1>Heading</h1> <p>permbajtje ose imazh </p> </section> </article>
Elementi < aside >
Elementi < aside > është për përmbajtje dytësore në lidhje me përmbajtjen kryesore. Kjo përmbajtje zakonisht shkruhet në sidebar. Kur përdoret tagu < aside > brenda tagut < article > , përmbajtja e < aside > duhet të ketë lidhje specifike me artikullin.
<article> <h1> Porosit Pica </h1> <p> Ky website sherben per porositjen online te picave </p> <aside> <p> Pica do te sherbehet ne shtepine tuaj ne moment! </p> </aside> </article>
Audio në Web
Pra HTML5, nuk kishte asnjë standart për luajtjen e filave audio në një faqe web. Elementi HTML5 < audio > specifikon një standart për insertimin e audiove në një faqe web.
Janë dy mënyra të ndryshme për specifikimin e URL së burimit të audios. E para përdor atributin:
<audio src="audio.mp3" controls> Elementi Audio nuk suportohet nga browser juaj! </audio>
Mënyra e dytë e përdorimit të elementit < source > brenda elementit < audio > :
<audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> </audio>
Browseri do të përdorë formatin e pare që do të njohë. Teksti midis tageve < audio > dhe < /audio > do të shfaqet në browsera që nuk suportojnë elementin < audio > . Atributet e < audio > controls
Specifikon që kontrollet audio duhet të shfaqen (si buton play/pause, etj.) autoplay
Kur përdoret ky atribut, audio starton sapo të jetë gati , pa marrë lejen e vizitorit të faqes.
<audio controls autoplay>
loop
Ky atribut bën të mundur riluajtjen e videos sa herë që shkon drejt funditS.
<audio controls autoplay loop>
Videot në HTML
Elementi video është i ngjashëm me elemntin audio. Mund të spcifikohet burimi URL i videos duke përdorur një atribut në elementin video, ose duke përdorur elementin source brenda elementit video:
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> Vidjoja nuk suportohet nga browserat </video>
Në qoftë se browserat nuk suportojnë llojin e parë të videos vazhdojnë me llojin tjetër, nqs nuk suportojnë asnjë prej tyre atëhere afishon tekstin. Atributet e < video >
Një aspekt tjetër që përdoret nga të dy elementët audio dhe video është që të dyja këto elementë përdorin atributet controls, autoplay dhe loop . Në shembulin më poshtë vidjoja do të bëjë replay pasi të ketë përfunduar:
<video controls autoplay loop> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> Vidjoja nuk suportohet nga browserat </video>
Aktualisht, suportohen tre lloje formatesh të elementit < video > : MP4, WebM, dhe OGG.
Progress Bar
Elementi < progress > siguron mundësinë e krijimit të një progress bar-i në web. Ky element mund të përdoret kudo në faqen web.
Atributet e elementit Progress Vlera: Specifikon sa pjesë e punës është kompletuar. Max: Specifikon sa kohë kërkon puna totale.
Shembull:
Statusi: <progress min="0" max="100" value="35"> </progress>
Tagu < progress > përdoret në bashkpunim me javaScript për shfaqen diamike të të dhënave.
