Shembuj HTML5. Thjeshtimi i shkrimit DOCTYPE

06.04.2019 Programet

Standardi HTML5 përdoret gjithnjë e më shumë në dizajnin modern të uebit. Dhe megjithëse është ende në zhvillim, shumë nga standardet e tij tashmë janë miratuar dhe përdoren nga të gjithë shfletuesit modernë, përfshirë ata celularë.

Në këtë artikull do të shikojmë disa nga veçoritë e reja të HTML5 me shembuj konkretë të zbatimit të tyre në praktikë.

DOCTYPE i ri

Le të kujtojmë se si përcaktohet një dokument tipik XHTML në seksionin DOCTYPE:

‹! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"›

Deklarata e llojit të dokumentit në gjuhën e shënjimit duket shumë më koncize dhe e lexueshme

‹!DOCTYPE html›

Për më tepër, mund ta përdorni këtë DOCTYPE kur shtroni ndonjë faqe. Nëse shfletuesi nuk është i njohur me HTML5, atëherë ai do të shfaqë faqen në modalitetin e standardeve.

Semantika e përmirësuar e kodit

Semantika e përmirësuar e kodit lejon Motorë kërkimi dalloni qartë llojet e përmbajtjes në faqe, të ndara informacion i rendesishem, rrisni renditjen e faqeve për pyetjet e kërkimit.

Elementetkokë dhefundi i faqes

Tani mund të heqim qafe ndërtime si

‹div id="header"› … ‹/div› ‹div id="footer"› … ‹/div›

Dhe filloni të përdorni më të kuptueshme si për njeriun ashtu edhe për makinën

‹header› … ‹/header› ‹footer› … ‹/footer›

‹div› sipas dizajnit nuk kanë strukturë semantike dhe mund të futen disa herë brenda njëri-tjetrit dhe kontejnerëve të tjerë. Përdorimi i një strukture semantike më të menduar ju lejon të dalloni qartë për motorin e kërkimit se ku ndodhet titulli, fundi dhe ku ndodhet pjesa kryesore e informacionit.

ElementiFIGURA

Merrni parasysh pjesën e mëposhtme të kodit:

‹img src="mars.jpg" alt="(!LANG:Rreth Marsit" /› ‹p›This is an image of Mars‹/p› !}

NË këtë rastështë e vështirë për motorët e kërkimit të përcaktojnë se etiketa ‹p› që përmban përshkrimin e imazhit është në të vërtetë përshkrimi i saj. Kjo është arsyeja pse është më mirë të kombinohen ndërtime të tilla në një enë të përbashkët, e cila është ‹figura ›:

‹figure› ‹img src="mars.jpg" alt="(!LANG:About Mars" /› ‹figcaption› ‹p›This is an image of Mars‹/p› ‹/figcaption› ‹/figure› !}

Në këtë rast, ekziston një etiketë shtesë ‹figcapture›, e cila specifikon se ku është përmbajtja e figurës dhe ku është titulli i saj.

Përdorimihgroup

Imagjinoni që keni një titull në faqen tuaj të internetit që përbëhet nga një titull kryesor dhe një nëntitull. Përdorimi i etiketave të zakonshme ‹h1› dhe ‹h2› nuk tregon në asnjë mënyrë lidhjen midis këtyre dy artikujve. Prandaj, ato mund të kombinohen semantikisht duke përdorur etiketën ‹hgroup›:

‹header› ‹hgroup› ‹h1›Fotogaleri‹/h1› ‹h2›Vendi ynë i lirë në Pragë‹/h2› ‹/hgroup› ‹/header›

Nuk ka lloje për të përfshirë skriptet dhe fletët e stilit

Ju mund të përdorni ende struktura për të përfshirë skriptet, bibliotekat, fletët e stilit, etj. formën e mëposhtme:

‹link rel="stylesheet" href="stylesheet.css" type="text/css" /› ‹script src="script.js" type="text/javascript"›‹/script›

Pra, tani nuk është më e nevojshme të specifikoni llojin e skedarit të përfshirë. Shfletuesi do ta zbulojë atë automatikisht. Kjo do të thotë që atributi tip nuk është më i nevojshëm:

‹link rel="stylesheet" href="stylesheet.css" /› ‹script src="script.js"›‹/script›

Struktura e kodit

Standardi XHTML parashikonte nevojën për të specifikuar vlerat e atributeve në një ose citate të dyfishta. Standardi HTML5 ju lejon të mos përdorni thonjëza nëse ato nuk janë të nevojshme, d.m.th. vlera e atributit specifikohet me një fjalë pa hapësira. Për më tepër, as nuk keni nevojë të mbyllni elementët e çiftuar. Këtu është një shembull:

‹p class=myClass id=pId›Përmbajtja

Megjithatë, kjo mund të dëmtojë lexueshmërinë e kodit nga ana e zhvilluesit. Prandaj, stili i shkrimit të kodit varet plotësisht nga ju, sepse stili i vjetër (i testuar me kohë) ende mbështetet.

Përmbajtje e modifikueshme

HTML5 ju lejon të bëni përmbajtjen e faqes suaj të internetit plotësisht të redaktueshme pa pasur nevojë për ngjitje fushat e fshehura për të futur tekst. Gjithçka që nevojitet është të shtoni atributin contenteditable="true" (ose pa thonjëza, siç mësuam nga paragrafi i mëparshëm) te elementi që dëshironi të bëni të modifikueshëm. Pas kësaj, përdoruesi do të jetë në gjendje të modifikojë përmbajtjen e tij direkt nga faqja.

Në këtë rast, përdoruesi mund të shtojë, heqë dhe modifikojë artikuj në listën e pa renditur ‹ul› . Më poshtë është një shembull i një liste, artikujt e së cilës mund të ndryshohen

Shiko Tv
Dëgjo Muzikë
Luaj Video lojera

Karakteristikat e Formës së Re

HTML5 u jep përdoruesve dhe zhvilluesve më shumë mundësi për futjen e informacionit në formularë. Për këtë qëllim janë shtuar shumë gjëra të dobishme. Le të shqyrtojmë disa prej tyre.

Fushat e hyrjesemail

Përdorni atributin type="email" në etiketën ‹input› dhe fushën e hyrjes e për të pasur aftësi shtesë unike për të vërtetuar se adresa është futur saktë dhe nëse adresa është futur gabimisht, shfletuesi do të shfaqë një mesazh paralajmërues për përdorues.

‹input id="email" name="email" type="email" /›

Rezultati mund të duket si ky (Google Chrome):

Ka edhe fusha të tjera të hyrjes, si adresa e faqes në internet ose numri i telefonit. Parimi i punës së tyre është i ngjashëm me fushën e postës elektronike.

Përdorimi i këshillave

Tani nuk ka nevojë të përdoret javascript për të krijuar sugjerime (mbajtëse të vendeve) për hyrje fushat e tekstit. HTML5 sugjeron përdorimin e një speciale atributi mbajtës i vendit Një që mund të shfaqë një këshillë për tekstin e sfondit për fushën.

‹input name="email" type="email" placeholder="(!LANG: [email i mbrojtur]" /›

Rezultati tregohet më poshtë:

Ky shembull do të funksionojë vetëm në shfletues të aktivizuar me HTML5.

Email:

fokusim automatik

Pa përdorimin e javascript, është e mundur që automatikisht t'i jepet fokus një elementi pasi të jetë ngarkuar faqja. Për ta bërë këtë, duhet të shtoni një atribut pa parametra në fushën që duhet të futet së pari.

‹input name="name" type="tekst" fokusim automatik /›

Fusha e emrit do të aktivizohet automatikisht dhe do të jetë gati për futjen e tekstit.

Fushat e kërkuara

Nëse është e nevojshme të shënoni disa fusha si të detyrueshme, tani mjafton të specifikoni . Kështu, kur dërgoni formularin, shfletuesi do të kontrollojë nëse fushat e kërkuara janë plotësuar dhe, nëse jo, do të shfaqë një mesazh.

‹hyrja e emrit = "emri" type="tekst" vendmbajtës="(!LANG:John Smith" required /› !}

Më poshtë është një ilustrim i rezultatit të këtij kodi (Google Chrome):

GamaInput

HTML5 prezanton një hyrje krejtësisht të re të diapazonit të kontrollit, i cili është një rrëshqitës, vlera e të cilit ndryshohet duke zvarritur një shënues të veçantë midis vlerave të paracaktuara.

‹input type="range" name="sasia" min="0" max="100" step=".25" value="10" /›

Atributet min dhe max përdoren për të vendosur vlerat ekstreme të rrëshqitësit, hapi është hapi i ndryshimit të vlerës. Shfletuesi Google Chrome e jep këtë kontroll si më poshtë:

Ky shembull do të funksionojë vetëm në shfletues të aktivizuar me HTML5.

Magazinimi lokal

Ruajtja lokale ju lejon të ruani informacionin e futur nga përdoruesi nëse faqja e shfletuesit është mbyllur ose ngarkuar përsëri. Kjo është shumë e përshtatshme, veçanërisht në rastet kur forma është mjaft e madhe dhe faqja është mbyllur aksidentalisht.

Vetë ruajtja lokale nuk është pjesë e specifikimit HTML5, por është e lidhur ngushtë me të.

Kontrolli ruajtje lokale ndodh përmes objektit të klasës localStorage duke përdorur dy metodat setData() dhe getData(). Më poshtë është një shembull që përdor listën e redaktueshme të përshkruar më sipër, e cila do të ruajë vlerat e fundit të futura në të.

‹h1›Lista e detyrave‹/h1› ‹ul contenteditable=true› ‹li›Shiko TV‹/li› ‹li›Dëgjo muzikë‹/li› ‹li›Luaj videolojëra‹/li› ‹/ul›

JavaScript (duke përdorur bibliotekën jQuery, por kjo është opsionale):

$("#todo"). blur(funksion () ( localStorage.setItem ("todoData", this.html); )); if (localStorage.getItem("todoData")) ($("#todo").html(localStorage.getItem("todoData")); )

Mbështetje multimediale

Tani nuk ka nevojë të përdorni shtojca dhe biblioteka të palëve të treta për t'u lidhur audio të ndryshme dhe skedarë video. Të gjitha aftësitë e ngulitjes së mediave janë përfshirë tani në specifikimin HTML5.

Audio

Për të futur në një faqe skedar zanor ju duhet të përdorni etiketën

‹Kontrollet e luajtjes automatike të audios›
‹burimi src="file.ogg" /›
‹burimi src="file.mp3" /›
‹a href="file.mp3"›Shkarko këtë skedar.‹/a›
‹/audio›

Në faqe, ky bllok mund të duket kështu ( Shfletuesi Google krom)

Ky etiketë ka veçoritë e veta të mbështetjes në shfletues. Për shembull, Shfletuesi Mozilla Firefox-i punon me skedarë .ogg ndërsa shfletuesit Webkit punojnë me .mp3

Video

Deri kohët e fundit, e vetmja mënyrë futja e përmbajtjes video në një faqe HTML ishte integrimi i përmbajtjes Flash. Megjithatë, shfletuesit që plotësojnë specifikimet HTML5 tani ofrojnë një mundësi të tillë. Kjo u bë veçanërisht e popullarizuar kur hosti më i madh i videove YouTube.com kaloi në formatin HTML5.

Për të integruar me sukses një video në një faqe, duhet të përdorni etiketën ‹video›. Fatkeqësisht, nuk ka konsensus midis prodhuesve të shfletuesit në çfarë formati duhet të prezantohet video, kështu që secila prej tyre promovon formatin e vet. Ndërsa IE dhe Safsri mbështesin videon H.264 (e cila u mbështet nga lojtarët Flash), Opera dhe Firefox po promovojnë burim i hapur Formatet Vorbis dhe Theora. Chrome, nga ana tjetër, mund të shfaqë saktë videot në të gjitha formatet, përfshirë WebM.

‹kontrollet e videos preload› ‹burimi src="video.ogv" type="video/ogg; codecs="vorbis, theora"" /› ‹burimi src="video.mp4" type="video/mp4; codecs=" avc1.42E01E, mp4a.40.2"" /› ‹p›Shfletuesi juaj është i vjetër. ‹a href="video.mp4"›Shkarko këtë video në vend.‹/a› ‹/p› ‹/video›

Jo të gjithë shfletuesit mund të shfaqin video HTML5, kështu që nën etiketën ‹source› mund të specifikoni një lidhje për të shkarkuar videon ose për të integruar Flash player.

Atributi i parangarkimit lejon shfletuesin të fillojë automatikisht shkarkimin e videos, gjë që mund të jetë e dobishme nëse videoja është mjaft e madhe. Atributi i kontrolleve ju lejon të vendosni kontrollet standarde të transmetimit të videos.

Nga autori: Përshëndetje miq! Në këtë artikull, dua t'ju tregoj pak për html5. Tregoni se çfarë është html5, çfarë ka të re në të. Cilat veçori të reja u ofron zhvilluesve. HTML5 është një koncept shumë i gjerë. Dhe disa teknologji që quhen në HTML5, në përgjithësi, nuk janë html5, por gjërat e para...

I pari është standardi HTML5, një dokument i vendosur në faqen e internetit të W3C, i cili përshkruan të gjitha etiketat, atributet, API-të e reja dhe një numër dokumentesh të lidhura që përmbajnë disa detaje shtese, si API Canvas.

E dyta është HTML5 "i madh", i marketingut, në modë, një ombrellë për një brez të tërë teknologjish të reja, duke përfshirë edhe vetë specifikimin HTML5 dhe shumë module CSS3, API të ndryshme JavaScript dhe standard i ri për JavaScript - ECMAScript5.

Konsideroni disa karakteristikat kryesore html5:

Është më e thjeshtë, më shumë strukturë e thjeshtë elementet në faqe, duke e bërë më të lehtë krijimin dhe korrigjimin e kodit.

Ai siguron elemente standarde për objektet mediatike që më parë kërkonin instalimin e shtojcave të veçanta që duhej të përditësoheshin vazhdimisht.

Ai ka integrimin e tij me ndërfaqet që mund të nevojiten në aplikimet moderne. Një shembull është gjeolokacioni, i cili lejon shfletuesin të përcaktojë vendndodhjen e përdoruesit (koordinatat e tij). Më parë, kjo mund të bëhej vetëm përmes GPS.

Çfarë i jep HTML5?

Për zhvilluesit, html5 ndihmon për të shkruar kodin semantik të kuptueshëm. Ju lejon të menaxhoni shumë procese në faqe me metodat tuaja standarde, pa përdorimin e shtojcave dhe shërbimeve javascript ose të palëve të treta. Kjo do të thotë se disa çështje të ndër-shfletuesve po trajtohen, pasi shfletuesit zbatojnë veçori të reja në të njëjtën mënyrë.

Gjithashtu html5 bën punë e përshtatshme online dhe për përdoruesit e zakonshëm. Për shembull, shpejtësia e punës rritet, përdorimi i shfletuesit bëhet më i përshtatshëm. Për të parë video nga youtube, nuk keni nevojë të instaloni shtojca shtesë dhe t'i përditësoni vazhdimisht.

Objektivat HTML5

Shkurtimisht, qëllimet e html5 mund të quhen si më poshtë:

Eliminimi i shtojcave si Flash for funksionet e përbashkëta që të gjithë kanë nevojë. Ndërtoni mbështetjen tuaj për gjëra të tilla si audio, video, etj.

Reduktimi i nevojës për JavaScript dhe kod shtesë, falë përdorimit të elementeve të rinj html5.

Sigurimi i qëndrueshmërisë midis shfletuesve dhe pajisjeve.

Bëjini të gjitha sa më transparente.

Çfarë ka të re në HTML5

I ri funksionalitetin ka shumë në html5. Sot edhe më versionet e fundit shfletuesit modernë mbështesin plotësisht të gjitha tiparet e html5. Prandaj, në këtë artikull do të shqyrtojmë vetëm tiparet kryesore të html5.

Elementë të rinj html5

Elementet e rinj html5 e bëjnë më të shpejtë krijimin e shënimit për një faqe, bëhet më e thjeshtë, më e kuptueshme dhe më e lehtë për të korrigjuar gabimet. Këtu janë disa etiketa të reja:

Dhe

< ! doctype html >

< html lang = "en" >

< head >

< meta charset = "utf-8" >

< title > < / title >

< meta name = "author" content = "" / >

< meta name = "description" content = "" / >

< link rel = "stylesheet" href = "assets/css/style.css" / >

< ! -- [ if lt IE 9 ] >

< ! [ endif ] -- >

< / head >

< body >

< header >

< h1 > < a href = "/" >Titulli i faqes< / a > < / h1 >

< nav >

< ol >

< li > < a href = "" >Lidhja e Navigimit 1< / a > < / li >

< li > < a href = "" >Nav Link 2< / a > < / li >

< li > < a href = "" >Nav Link 3< / a > < / li >

< / ol >

< / nav >

< / header >

< article >

< h1 >Kreu i artikullit< / h1 >

< p >Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.< / p >

< h2 >Nënkreu i artikullit< / h2 >

< p >Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.< / p >

Sot do të flasim për semantikën në HTML5. Tashmë kam shkruar një postim të vogël përmbledhjeje rreth. Unë rekomandoj që të njiheni me të përpara se të lexoni këtë artikull. Tani do të merremi me këtë çështje në mënyrë më të detajuar, se si të kompozojmë saktë dhe me kompetencë strukturën semantike të një dokumenti HTML5.

Në këtë artikull, ne gradualisht do të krijojmë një faqe html dhe do ta stilojmë me etiketa semantike HTML5.

Figura - Struktura semantike për faqen HTML5.

DOCTYPE dhe meta etiketat në titullin e faqes

Le të fillojmë me një shabllon standard të dokumentit HTML5 dhe të shtojmë meta etiketat në kokë:

Titulli i faqes

Shtova një etiketë e cila është përgjegjëse për fjalë kyçe. dhe tag e cila është përgjegjëse për përshkrimin e faqes. Për optimizimin e SEO, kërkohen këto etiketa. Është gjithashtu e nevojshme të plotësoni etiketën e saktë . Titulli i faqes duhet të jetë unik për të gjithë sitin dhe të përmbajë në titull gjithë thelbin e faqes për të cilën tregohet.</p><p>Le të shkojmë më tej. HTML5 prezanton etiketa të reja që përdoren për të bërë shënjimin semantik të një dokumenti. Këto janë etiketat header, nav, main, article, anside, footer etj. Nga ekrani, ato funksionojnë njësoj si ato të zakonshmet. <div>etiketat, domethënë këto janë elemente blloku. Por nëse <div>nuk ka një ngarkesë semantike, atëherë header, nav, main dhe të tjerët tashmë duhet të përdoren vetëm me kuptim.</p><h3>Titulli i faqes</h3><p>Kreu i faqes është i formatuar në etiketën e kokës. Vini re se titulli i faqes është shkruar me etiketën h1.</p><p>  <header> <h1>Titulli i faqes</h1> </header> </p><p>Nëse kemi edhe një slogan pranë titullit, atëherë vendoseni në një p, div ose span.</p><p>  <header> <h1>Titulli i faqes</h1> <p>slogani i faqes</p> </header> </p><p><b>Një shënim në lidhje me etiketën H1</b></p><p>Duhet të theksohet se në HTML5, etiketa H1 përdoret për të treguar titullin e kontejnerit në të cilin ndodhet (kjo mund të jetë kokë, seksion, artikull, etj.)</p><p>Para ardhjes së etiketave HTML5, semantika ishte disi e ndryshme dhe e ndryshme. Pra, në HTML4, mund të ketë vetëm një titull H1 për faqe! Zakonisht ky ishte titulli i artikullit ose titulli i faqes (për shembull nëse është një faqe kategorie që shfaq shumë artikuj.) H2 përdorej për nëntitujt ose për seksionet e artikullit kryesor. H3 për nënseksionet dhe kështu me radhë.</p><h3>Navigimi i faqes</h3><p>Dizajni i navigimit kryesor në sit duhet të jetë në etiketën nav. Duhet të mbani mend gjithashtu se konsiderohet praktikë e mirë stilimi i navigimit me elementë të listës.</p><p>  <nav> <ul> <li>Shtëpi</li> <li>Portofoli</li> <li>Galeri</li> <li>Kontaktet</li> </ul> </nav> </p><h3>Përmbajtja për faqe</h3><p>Përmbajtja kryesore e faqes është e mbështjellë në etiketën kryesore. Mund të jetë një artikull, ose disa paraafishime artikujsh nëse <a href="https://bumotors.ru/sq/chem-otlichaetsya-palka-dlya-selfi-ot-monopoda-esli-rech-idet-o.html">po flasim</a> rreth një faqe blogu me hyrje të shumta. Ju nuk mund të vendosni një shirit anësor, kokë faqeje, fund ose <a href="https://bumotors.ru/sq/sverhchuvstvitelnye-gps-moduli-samoe-glavnoe-o-gps-navigacii-chto-takoe-gps.html">navigimi kryesor</a> në etiketën kryesore!</p><p>  <main>...përmbajtja kryesore e faqes...</main> </p><h3>Formatimi i artikullit</h3><p>Etiketa e artikullit përdoret për të mbështjellë artikujt. Në përgjithësi, kjo etiketë përmban një bllok përmbajtjeje që mund të hiqet nga konteksti i faqes dhe të përdoret veçmas diku tjetër. Mund të jetë një artikull (teksti i plotë i artikullit ose shikim paraprak), postim në forum, etj.</p><p>Në shembullin më poshtë, tregova dizajnin e artikullit në kontekst, brenda etiketës kryesore. Artikulli ka një bllok kokë me titullin e artikullit. Është caktuar data e publikimit të artikullit <a href="https://bumotors.ru/sq/kak-rasstavit-h1-h6-v-statyah-teg-h1-eto-zagolovok-stranicy-formatirovanie-teksta-pri-pomoshchi-spec.html">etiketë speciale</a> koha , e cila jepet si një element normal inline. Etiketa kohore ka një atribut të veçantë në të cilin koha e publikimit duhet të jepet në formatin origjinal. Mund të jetë vetëm një datë datetime="2015-09-30" ose duke specifikuar orë minuta dhe sekonda datetime="2015-09-30T15:25:55" . Parametri pubdate tregon se artikulli është botuar në të njëjtën kohë kur është shkruar. Nëse ky është lajm, atëherë mund të ndodhë që koha e lajmit të jetë një, dhe koha e publikimit është e ndryshme, për këtë ju duhet të specifikoni dy herë etiketën kohore dhe të vendosni pubdate vetëm në etiketën ku tregohet koha e publikimit. .</p><p> <main> ...  <article>  <header>  <h1>titulli i artikullit</h1>  <time datetime="2015-09-30T15:25:55" pubdate>30 shtator</time> </header>  <h2>nëntitulli i artikullit</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p><p>Nga shembulli i mësipërm, mund të shihni se brenda artikullit, etiketat e kokës dhe të fundit të faqes janë përdorur për të theksuar kokën dhe fundin e artikullit.</p><h3>Shiriti anësor ose kolona me miniaplikacione</h3><p>Për çdo element individual të shiritit anësor, përdorni bllokun anash. Brenda tij, ne përcaktojmë titullin me etiketën h1. Pra, një kolonë e shiritit anësor mund të duket si kjo:</p><p>  <div class="sidebar">  <aside> <h1>Titulli i miniaplikacionit</h1> ... </aside>  <aside> <h1>Shënimet e fundit</h1> ... </aside>  <aside> <h1>Komentet popullore</h1> ... </aside> </div> </p><h3>etiketa e seksionit</h3><p>Etiketa e seksionit përdoret për të përfaqësuar një grup ose seksion të përmbajtjes së lidhur tematikisht. Përdorimi i tij është i ngjashëm me atë të një artikulli me ndryshimin kryesor që përmbajtja brenda elementit lejohet të mos ketë kuptim. <section>jashtë kontekstit të vetë faqes. Rekomandohet përdorimi i etiketave ( <h1> – <h6>) për të treguar temën e seksionit.</p><p>Si shembull, mund të citoni artikullin që po lexoni aktualisht, do të ishte e mundur të mbështillni çdo paragraf në një etiketë <section>. Për shembull, etiketa e seksionit mund të përdoret për të theksuar blloqet e përmbajtjes në një faqe uljeje. Tingëllon si përcaktimi i një elementi div, i cili shpesh përdoret si një enë për përmbajtjen. Dallimi është se div nuk ka kuptim semantik dhe nuk thotë asgjë për përmbajtjen brenda saj. Etiketa e seksionit, nga ana tjetër, përdoret për të treguar qartë se përmbajtja brenda saj është e lidhur në kuptim. Ju mund të zëvendësoni disa nga etiketat tuaja div me seksionin , por gjithmonë përgjigjuni pyetjes "A është e lidhur kjo përmbajtje apo jo?"</p><p>Një shembull i përdorimit të etiketës së seksionit në një listë qytetesh:</p><p> <h1>Një ngjarje veç</h1> <section> <header> <h2>qytetet</h2> </header> <p>Bashkohuni me ne në këto qytete në 2010.</p> <section> <header> <h3>Seattle</h3> </header> <p>Ndiqni rrugën me tulla të verdha.</p> <section> <header> <h3>Boston</h3> </header> <p>Ky është Beantown për miqtë e tij.</p> <section> <header> <h3>Minneapolis</h3> </header> <p>Është kështu <em>bukur</em>.</p> <small>Akomodimi nuk ofrohet.</small> </p><h3>Fundi i faqes - Footer</h3><p>Fundi i faqes është zbukuruar me një etiketë <footer></p><p>  <footer> <p class="copyright">© 2015 E drejta e autorit të sitit</p> </footer> </p><h3>konkluzioni</h3><p>Ju mund të përdorni mjetin HTML5 outliner për të kontrolluar strukturën e një faqeje. Ai tregon strukturën e faqes në blloqe dhe tituj.</p><p>Semantika në HTML5 nuk është e kufizuar në etiketat e mësipërme. Por duke përdorur shembujt e mësipërm, ju mund të përmirësoni shënimin tuaj dhe ta bëni faqen tuaj më miqësore me motorët e kërkimit, gjë që do të rezultojë në më shumë <a href="https://bumotors.ru/sq/telefon-s-kameroi-vysokogo-razresheniya-reiting-luchshih.html">rangut të lartë</a> faqe në rezultatet e kërkimit.</p><p>Duke vazhduar temën, mund të eksploroni etiketa të tjera të reja HTML5. Si dhe mikroformatet për formatimin dhe strukturimin e të dhënave, si p.sh. schema.org</p><p><b>Një shënim i rëndësishëm në lidhje me përdorimin e etiketave HTML5.</b> Specifikimi nuk specifikon rregulla strikte për përdorim <a href="https://bumotors.ru/sq/obshchaya-struktura-tegov-semanticheskaya-struktura-dlya-html5-stranicy.html">etiketat semantike</a>, tregohen vetëm rekomandimet për përdorimin e tyre. Nëse nuk e kuptoni ose nuk dini se ku dhe çfarë etikete HTML5 të përdorni, është më mirë të përdorni div - në mënyrë që të mos dëmtoni ose prishni strukturën e dokumentit.</p><p><b>Artikuj dhe materiale</b></p> <p>Dokument i thjeshtë HTML5</p><p>Konsideroni një nga dokumentet më të thjeshtë HTML5. Fillon duke specifikuar llojin e dokumentit me <a href="https://bumotors.ru/sq/ishodnyi-kod-prilozheniya-android-specialnye-kody-v-androide-chto-my.html">kod të veçantë</a> përshkrimi i llojit të dokumentit (kuptimi i këtij kodi është shpjeguar në <a href="https://bumotors.ru/sq/ustanovka-windows-10-na-mac-mini-udalenie-razdela-bootcamp-chto-sleduet.html">seksioni tjetër</a>), pas së cilës vendoset kodimi dhe emri i dokumentit dhe më pas vijon përmbajtja e tij. Në këtë rast, përmbajtja përbëhet nga një paragraf i tekstit:</p> <p> <!DOCTYPE HTML> <meta charset="utf-8"> <title>Dokument i vogël HTML5

Ky dokument i thjeshtë mund të thjeshtohet edhe më tej. Për shembull, etiketa fundore në fakt nuk kërkohet në standardin HTML5, sepse shfletuesit dinë të mbyllin gjithçka elemente të hapura në fund të dokumentit (dhe standardi HTML5 e legalizon këtë sjellje). Por prerja e këndeve si kjo në vend që ta thjeshtojë, e bën shënimin më të vështirë për t'u kuptuar dhe mund të shkaktojë gabime të papritura.

Shumica e zhvilluesve të uebit janë të mendimit se përdorimi i seksioneve tradicionale Dhe të dobishme për lehtësimin e perceptimit të dokumentit, sepse ata ndajnë qartë informacionin për faqen (titullin e faqes) dhe vetë përmbajtjen (trupin e faqes). Kjo strukturë është veçanërisht e dobishme kur skriptet, fletët e stilit dhe elementët meta shtohen në faqe:

Dokument i vogël HTML5

Le të shkundim shfletuesin në stilin HTML5!

Së fundi, i gjithë dokumenti (me përjashtim të linjës doctype) mund të mbështillet në elementin tradicional , siç tregohet në listën e mëposhtme:

Dokument i vogël HTML5

Le të shkundim shfletuesin në stilin HTML5!

Deri në HTML5, çdo version i specifikimit zyrtar të HTML kërkonte përdorimin e elementit , pavarësisht se prania e këtij elementi nuk ndikon në asnjë mënyrë sesi shfletuesi trajton pjesën tjetër të kodit të faqes. Në HTML5, përdorimi i këtij elementi i lihet tërësisht zhvilluesit.

Përdorimi i elementeve , Dhe është thjesht çështje stili. Një faqe pa këto elemente do të funksionojë mirë edhe në shfletues të vjetër që nuk kanë dëgjuar kurrë për ndonjë HTML5. Në fakt, shfletuesi merr automatikisht praninë e këtyre elementeve. Prandaj, nëse shikoni DOM(një grup objektesh programatike që përfaqësojnë një faqe) të faqes duke përdorur një skript JavaScript, ai do të përmbajë objekte për elementë , Dhe , edhe nëse zhvilluesi nuk i ka përdorur ato.

Në këtë fazë, kjo faqe mostër është diku midis dokumentit më të thjeshtë HTML5 dhe pikës fillestare të avancuar për një faqe interneti praktike HTML5. Në seksionet në vijim, ne do t'i shtojmë asaj pjesën tjetër elementet e nevojshme dhe gërmoni më thellë në shënimin.

Përshkrimi i llojit të dokumentit HTML5

Rreshti i parë i çdo dokumenti HTML5 jep gjithmonë një përshkrim të llojit të dokumentit. Ky përshkrim tregon qartë se ajo që vijon është përmbajtja HTML5 dhe duket kështu:

Gjëja e parë që ju bën përshtypje për përshkrimin e llojit të dokumentit HTML5 është thjeshtësia e tij mahnitëse. Krahasoni atë, për shembull, me përshkrimin e ngathët të llojit të dokumentit që zhvilluesit e uebit duhet të përdorin kur punojnë me XHTML 1.0 të rreptë:

Edhe zhvilluesit profesionistë të uebit janë detyruar të kopjojnë dhe ngjisin përshkrimin e llojit të dokumentit XHTML nga një dokument tjetër. Dhe përshkrimi i llojit të dokumentit HTML5 është i shkurtër, i qartë dhe i lehtë për t'u futur me dorë.

Përshkrimi i llojit të dokumentit HTML5 është gjithashtu i dukshëm për mungesën e një numri. version zyrtar HTML (5 për HTML5). Thjesht thotë se faqja është një faqe HTML. Kjo është në përputhje me konceptin e ri të HTML5 si një gjuhë e gjallë. Veçoritë e reja të shtuara në HTML disponohen automatikisht për t'u vendosur në faqe, pa kërkuar ndryshime në përshkrimin e llojit të dokumentit për këtë.

E gjithë kjo ngre një pyetje të vështirë: nëse HTML5 është një gjuhë e gjallë, atëherë pse një faqe ka nevojë për një përshkrim të llojit të dokumentit?

Përgjigja për këtë pyetje është se përshkrimi i llojit të dokumentit vazhdon të përdoret për arsye historike. Kur përpunohet një faqe me një përshkrim të llojit të dokumentit që mungon, shumica e shfletuesve (përfshirë Internet Explorer dhe Firefox) shkoni te modaliteti i përputhshmërisë (modaliteti i çuditshëm). Në këtë mënyrë, ata përpiqen të japin faqen në bazë të gabimeve në rregullat që janë përdorur në më shumë versionet e hershme. Problemi me këtë është se mënyra e përputhshmërisë së një shfletuesi mund të ndryshojë nga mënyra e përputhshmërisë së një shfletuesi tjetër, si rezultat i së cilës faqet e krijuara për një shfletues ka shumë të ngjarë të shfaqen me gabime në një shfletues tjetër, të tilla si madhësia e gabuar e shkronjave, të prishura struktura projektuese etj.

Dhe kur shfletuesi gjen një përshkrim të llojit të dokumentit në faqe, ai e di se duhet ta përpunojë këtë faqe sipas rregullave më strikte. modaliteti i standardeve, i cili siguron formatim të qëndrueshëm dhe strukturë të faqes kur shfaqet nga çdo shfletues modern. Me disa përjashtime, shfletuesi është plotësisht indiferent ndaj llojit të dokumentit të specifikuar në përshkrim. Ai thjesht kontrollon që faqja të ketë një lloj përshkrimi të llojit të dokumentit. Përshkrimi i llojit të dokumentit HTML5 është thjesht përshkrimi më i shkurtër i vlefshëm i llojit të dokumentit që mundëson modalitetin standard të shfletuesit.

Kodimi i karaktereve

Kodimiështë një standard që i tregon një kompjuteri se si të konvertojë tekstin në një sekuencë bajtësh kur shkruan tekst në një skedar (dhe si ta kthejë atë kur hapet një skedar). Për arsye historike, ka shumë kodime të ndryshme në botë. Në ditët e sotme, pothuajse të gjitha faqet e internetit përdorin kodimin kompakt dhe të shpejtë UTF-8, i cili mbështet të gjitha karakteret në alfabetet e tjera që mund t'ju duhen ndonjëherë.

Serverët e uebit shpesh konfigurohen për t'u treguar shfletuesve që vizitojnë se faqet e ofruara nga serveri janë në një kodim specifik. Por nuk mund të jeni të sigurt se serveri në internet në të cilin planifikoni të strehoni faqen tuaj të internetit do të konfigurohet në këtë mënyrë (përveç nëse është i juaji). serverin e vet). Për më tepër, përpjekja e shfletuesit për të gjetur kodimin më të mundshëm të përdorur në një rast të tillë mund të dështojë për shkak të një problemi të paqartë sigurie. Për këto arsye, duhet të përfshini gjithmonë informacione rreth kodimit të përdorur në shënimin e faqes.

HTML5 e bën këtë detyrë të lehtë. Për ta bërë këtë, thjesht duhet të futni një element në fillim të bllokut (ose nëse elementi nuk përdoret, menjëherë pas kodit të përshkrimit të llojit të dokumentit):

Dokument i vogël HTML5

Mjetet e zhvillimit të uebit si Dreamweaver ose Expression Web e futin këtë element automatikisht kur krijohet faqja. Këto mjete ofrojnë gjithashtu ruajtjen e skedarëve në Kodimi UTF. Por kur krijoni një faqe interneti me një redaktues teksti të thjeshtë, mund t'ju duhet të ndërmerrni hapa shtesë për të siguruar që skedarët tuaj të ruhen me kodimin e duhur.

Gjuhe

Konsiderohet një formë e mirë për të treguar gjuhën natyrale të një faqe interneti. Ky informacion ndonjëherë mund të jetë i dobishëm për të tjerët, për shembull, motorët e kërkimit mund ta përdorin atë për të filtruar rezultatet e kërkimit për të kthyer vetëm faqet në gjuhën e specifikuar.

Mënyra më e lehtë për të futur informacionin e gjuhës në një faqe interneti është përmes elementit :

Informacioni i gjuhës mund të jetë gjithashtu i dobishëm nëse faqja përmban tekst gjuhë të ndryshme për t'u lexuar nga një lexues ekrani. Në këtë rast, atributi lang me kodin përkatës të gjuhës futet në vendin e duhur në dokument, për shembull, në elementet

, që përfshin tekstin në gjuhë të ndryshme. Kështu, një lexues ekrani është në gjendje të përcaktojë se çfarë teksti mund të lexojë.

Shtimi i një fletë stili

Pothuajse çdo faqe e një faqe interneti profesionale të dizajnuar siç duhet përdor fletë stilesh. Elementi përdoret për të specifikuar fletën e stilit të kërkuar. në bllok Dokumenti HTML5:

Dokument i vogël HTML5

Kjo metodë është e ngjashme me specifikimin e fletëve të stilit në dokumentet tradicionale HTML, por pak më e lehtë. Meqenëse ekziston vetëm një gjuhë kaskadë e fletës së stilit, CSS, shtimi i atributit type="text/css" që kërkohej më parë nuk është më i nevojshëm.

Shtimi i kodit JavaScript

Gjuhe Skriptet JavaScript u krijua fillimisht si një mënyrë që kërkon shumë kohë për të shtuar magjepsje dhe hijeshi në faqet e mërzitshme të internetit. Në ditët e sotme, përdorimi kryesor i JavaScript është zhvendosur nga zhvillimi i kambanave dhe bilbilave të ndërfaqes në zhvillimin e aplikacioneve të personalizuara në ueb, duke përfshirë klientët ultra-efikas të postës elektronike, redaktuesit e tekstit dhe motorët e hartave që funksionojnë drejtpërdrejt në shfletues.

Kodi JavaScript futet në një dokument HTML5 nga në përgjithësi në të njëjtën mënyrë si në një faqe tradicionale HTML. Lista e mëposhtme tregon një shembull të futjes së kodit JavaScript në një dokument ueb nga lidhja në skedar i jashtëm:

Dokument i vogël HTML5

Atributi language="JavaScript" është opsional, sepse nëse nuk specifikohet asnjë gjuhë tjetër skriptimi (dhe meqenëse JavaScript është e vetmja gjuhë skriptimi e mbështetur gjerësisht për HTML, gjasat e zhvillimit të këtij janë të papërfillshme), shfletuesit automatikisht supozojnë se përdoret JavaScript. Por edhe kur i referoheni një skedari të jashtëm me kod JavaScript, duhet të mbani mend etiketën mbyllëse. Nëse kjo etiketë hiqet nga një shkelje ose kur përpiqeni të shkurtoni kodin duke përdorur sintaksën e elementit bosh, atëherë faqja nuk do të funksionojë siç duhet.

Nëse kaloni shumë kohë duke testuar faqet tuaja JavaScript në Internet Explorer, duke shtuar etiketën MOTW (Shenja e ueb- etiketa e veçorive të rrjetit) të bllokosh menjëherë pas linjës së kodimit. Kjo bëhet në këtë mënyrë:

Dokument i vogël HTML5

Kjo linjë kodi i thotë Internet Explorer që ta trajtojë faqen sikur të ishte shkarkuar nga një faqe interneti në distancë. Përndryshe, IE kalon në një mënyrë të veçantë bllokimi, shfaq një paralajmërim sigurie në shiritin e mesazheve dhe refuzon të ekzekutojë ndonjë Kodi JavaScript derisa të klikoni butonin "Lejo përmbajtjen e bllokuar".

Të gjithë shfletuesit e tjerë shpërfillin shenjën MOTW dhe përdorin të njëjtat cilësime sigurie për të dyja faqet e ngarkuara nga faqet e largëta të internetit dhe skedarët lokalë HTML.

Shembuj HTML5. Thjeshtimi i shkrimit DOCTYPE

DOCTYPE i ri

Semantika e përmirësuar e kodit

Nuk ka lloje për të përfshirë skriptet dhe fletët e stilit

Struktura e kodit

Përmbajtje e modifikueshme

Karakteristikat e Formës së Re

Magazinimi lokal

Mbështetje multimediale

Çfarë i jep HTML5?

Objektivat HTML5

Çfarë ka të re në HTML5

Elementë të rinj html5

DOCTYPE dhe meta etiketat në titullin e faqes

Përshkrimi i llojit të dokumentit HTML5

Kodimi i karaktereve

Gjuhe

Shtimi i një fletë stili

Shtimi i kodit JavaScript

Artikujt kryesorë të lidhur