Standardi HTML5 është një gjuhë për strukturimin dhe paraqitjen e materialeve në internet, e cila u prezantua dhe rekomandohet për përdorim në 2014. Për momentin, pothuajse të gjithë shfletuesit mbështesin shumicën e inovacioneve të HTML5, por mos harroni se zhvillimi i gjuhës vazhdon dhe Konsorciumi World Wide Web vazhdon të ndryshojë dhe përmirësojë versionin e pestë.
Ju lutemi vini re se duke filluar nga versioni i pestë Gjuha HTML 5 paraqitet jo thjesht si gjuhë strukturuese, por edhe si gjuhë prezantuese, e cila pasqyrohet në paraqitjen semantike, d.m.th. HTML tani përdoret në një mënyrë të re.
Miratimi i standardit HTML5 ka çuar në një reduktim të ndryshueshmërisë teknologjitë ekzistuese paraqitjet. Kështu, përpara këtij standardi, u përdorën gjerësisht versionet 4.01 të HTML dhe standardet XHTML 1.0 dhe 1.1, si rezultat i të cilave faqet përfaqësoheshin nga një përzierje e këtyre teknologjive, gjë që e ndërlikonte punën e shfletuesit për të interpretuar faqet u prezantua për standardin HTML5:
Le të shohim ndryshimet kryesore që duhet të merren parasysh së pari:
kështu dhe
kështu dhe
pastaj në standardin html5 drejtshkrimi i saktëështë:
Renditja e të gjitha ndryshimeve në etiketa është e pamundur në një mësim, pasi ndryshimet në standard prekën një numër të madh etiketash, kështu që le të shohim ndryshimet kryesore që do të na duhen në punën tonë.
HiperlidhjaShembull
e cila në standardet e mëparshme shkaktonte gabime sepse element i vogël mbështjellë në formë blloku, e vlefshme në HTML5.
Një nga më pyetje popullore Dizajnerët fillestarë të paraqitjes janë: “Si të bëjmë një lidhje hiperlinke për bllok div? " Dhe përgjigjja më e zakonshme ishte: "Përdor JS". Siç mund ta shihni nga shembulli, në HTML5 thjesht mund të vendosni blloqet e nevojshme brenda një hiperlidhjeje.
Etiketat dheHTML 5 riktheu etiketat (e bën fontin të guximshëm) dhe (kursive). Në interpretimin modern, këto etiketa shërbejnë vetëm për dizajn vizual dhe nuk kanë ndonjë kuptim semantik.
Etiketo të voglaEtiketa është përdorur në versionet e mëparshme për të vendosur një madhësi fonti më të vogël se teksti kryesor (e kundërta e tij ishte etiketa e madhe - e cila rriti madhësinë e shkronjave). Shfaqje të ndryshme në shfletues të ndryshëmçoi në zhvendosjen e këtij elementi me etiketë span, i cili është shumë më i përshtatshëm për t'u përdorur.
Në HTML5, etiketa u rikthye, por interpretimi i saj ndryshoi, tani përdoret për të mbështjellë tekstin që duhet të jetë në faqe, por nuk duhet të shkëpusë vëmendjen nga përmbajtja kryesore dhe duhet të jetë sa më i padukshëm. Analog - tekst i bazuar në fusnota, ose kushte të ndryshme aksionet Gjithashtu zvogëlon vizualisht madhësinë e shkronjave të tekstit që përfundon.
etiketa e adresësNdryshe nga versionet e mëparshme HTML në edicionin e pestë përdoret vetëm për të treguar informacionin e kontaktit të autorit të materialeve. Mos përdorni etiketën për të treguar informacionin e kontaktit në faqen e internetit të organizatës (për këtë duhet të përdoren mikroformatet dhe mikro të dhënat).
Siç është përmendur tashmë, brenda këtë mësimËshtë e pamundur të merren parasysh të gjitha ndryshimet në etiketa, më lart shikuam etiketat e përshtatura, tani rendisim ato të vjetruara:
- , i zëvendësuar nga një etiketë (përdoret për të vendosur objekte);
- — zëvendësohet me një etiketë (përdoret për shkurtesa);
- — zëvendësohet me një etiketë (për të futur luajtësin në faqe);
- - zëvendësuar nga ;
- , - zëvendësuar me etiketat AND (për futjen e listave të programeve dhe kodeve);
- - zëvendësuar nga
Karakteristikat e formatimit të tekstit , , - janë hequr, CSS duhet të përdoret për stilim.
Si kujtesë, shumë etiketa të vjetra mbështeten nga shfletuesit, por faqet me etiketa të vjetra nuk do të kalojnë verifikimin. Kjo është arsyeja pse, pasi të keni përfunduar paraqitjen e faqes, duhet ta kontrolloni atë me një validator.
HTML 5 dhe CSS 3 shtuan një numër të madh të etiketave dhe veçorive të reja në paraqitje. Shihni mundësitë e animacionit me vetitë e reja CSS 3.
Përshëndetje mysafirët e këtij blogu dhe abonentët e mi besnikë. Me zhvillimin e shpejtë të teknologjisë, shkencës dhe programimit siç shohim sot, nuk është për t'u habitur që kërkesat e konsumatorëve po rriten. Kjo do të thotë që herët a vonë shfaqen versione të përmirësuara të programeve, pajisjeve dhe, më e rëndësishmja, gjuhëve.
Leximi i artikullit do t'ju japë mirëkuptim i qartë kufijtë midis html dhe html 5. Përveç kësaj, ju do të jeni në gjendje të operoni me njohuritë e fituara dhe të vendosni të gjitha faqet tuaja duke përdorur etiketat html 5.
dua të përkushtohem këtë botim diskutimi i html 5. Ne do të diskutojmë me ju veçoritë kryesore të platformës, elementët e rinj të gjuhës dhe ndryshimet e tyre nga ato të vjetrat, dhe gjithashtu do të shqyrtojmë shembuj specifikë kodi. Tani le të kalojmë te vetë lëngu!
Komandanti i Përgjithshëm i shënjimit të faqes në internet, html i famshëmPas leximit, si dhe burimeve të tjera të lidhura me IT-në, mendoj se mund t'ju quaj me besim "mjeshtër guru". Në fund të fundit, nuk do të jetë e vështirë për ju të tregoni se çfarë është gjuha html dhe pse u krijua. bravo!
Fillestarët në këtë fushë të njohurive nuk duhet të shqetësohen. Unë do të përsëris në mënyrë specifike përkufizimet kryesore.
Pra, para së gjithash, ia vlen të kujtojmë se html është një gjuhë shënjimi e hipertekstit, d.m.th. teksti që përmban elemente të ndërlidhura të tekstit, video, audio dhe formate grafike. Ky mjet të nevojshme për hartimin e strukturës së faqeve, formatimin e pamjes së faqeve dhe për të treguar vendndodhjen e objekteve në të.
Etiketat gjuhësore përdoren për të menaxhuar përmbajtjen e faqes. Çfarë do të thotë "etiketë" dhe për çfarë shërben?
Një etiketë është një njësi e gjuhës shënjuese që ndihmon në vendosjen e një shfaqjeje specifike në një faqe uebsajti. objekt specifik, si dhe një tregues të llojit të tij (lidhje, foto, etj.).
Elementet e gjuhës mund të jenë të vetme ose kontejnerë (ato zakonisht quhen gjithashtu të çiftuar). Ato ndryshojnë vetëm në atë që ato të çiftuara mund të përmbajnë elementë të tjerë brenda vetes: etiketa ose tekst.
Çdo element i gjuhës së internetit në diskutim ka grupin e vet të atributeve. “Një term tjetër? Për çfarë është? – pyet ti. Mjerisht, nuk ka rrugë pa terminologji.
Atributet janë të nevojshme për të zgjeruar gamën e aftësive të një etikete të vetme, si dhe për një menaxhim më fleksibël pamjen kontejnerët. Sigurisht, elementët e gjuhës së shënjimit mund të ekzistojnë lehtësisht pa përcaktuar atributet. Pastaj do t'u japë atyre formatimin e paracaktuar.
Më poshtë kam bashkangjitur një tabelë me shembuj të etiketave të përbashkëta html të çiftuara dhe të vetme me atributet e tyre më të përdorura. Fatkeqësisht, është e vështirë të sigurohet një listë e plotë e atributeve, ka shumë prej tyre. Për ta bërë këtë, është më mirë t'i referoheni specifikimeve të gjuhës.
| Etiketa të vetme | |
| NË në këtë shembull e vetme e paraqitur meta etiketë, i cili përmban informacione që nuk shfaqen në shfletues. Kompleti i karaktereve, emri dhe përmbajtja janë atribute të elementit, përkatësisht përgjegjës për kodimin e dokumentit, emërtimin e meta etiketës dhe vendosjen e vlerës së specifikuar më parë në emër. | |
|
Etiketa është përgjegjëse për shfaqjen skedarët grafikë në faqet e burimeve të internetit. Duke përdorur atributin src, specifikohet shtegu i vetë imazhit, gjerësia përcakton gjerësinë e objektit dhe lartësia - lartësia, alt synon të shfaqë tekstin alternativ nëse është e pamundur të ngarkohet imazhi. |
| Etiketat e çiftuara | |
| Si të gatuajmë një tavë siç duhet? | Etiketa krijon një spirancë (d.m.th. lidhje). href specifikon adresën e skedarit në të cilin do të ndodhë kalimi, objektivi specifikon saktësisht se si do të ngarkohet lidhjen e hapur(në këtë shembull do të hapet në një skedë të re), titulli është përgjegjës për këshillën e veglave kur rri pezull mbi spirancë. |
Siç është përshkruar tashmë në artikujt e mi të mëparshëm, nuk duhet të ngatërroni html dhe html 5. Megjithëse HTML 5 është në një farë kuptimi një "i afërm" i html, ai është plotësisht platformë e re, detyra kryesore e të cilit është të mbështesë skedarët audio dhe video, animacionet, vendndodhjet e ekranit dhe shumë më tepër.
Ky specifikim siguron faqet e internetit me veçori të reja dhe informon DOM ( modeli i objektit dokument) për praninë e objekteve të reja në të. Kjo përshpejton ngarkimin e faqeve dhe e bën më të lehtë për shfletuesit.
Një avantazh i madh për zhvilluesit është se me ardhjen e HTML 5 nuk ka nevojë të rimësoni asgjë. Ai mbështet të gjitha etiketat html 4 dhe i plotëson ato me ato moderne. Kësaj do t'i shtoj edhe një fakt pozitiv. Me ardhjen e elementeve si dhe , nuk ka më nevojë të përdoren etiketat e mbështetjes së medias së trashëguar. Këto përfshijnë: , , , dhe të tjera.
Dhe tani dua të rendis etiketat kryesore të specifikimeve, të cilat përfshijnë artikullin, mënjanë dhe të tjera, dhe gjithashtu të përshkruaj se për çfarë u krijuan.
Etiketat semantikeMe ardhjen e platformës HTML 5, etiketat semantike. Tani në gjuhë të thjeshtë Unë do të shpjegoj se çfarë është.
Më parë, kur shkruani shërbime në internet me ndërfaqe miqësore për përdoruesit dhe u përdor duke theksuar kokën e faqes, pjesën kryesore të saj dhe "footerin" (një vend në fund të faqes për informacion shtesë ose atribut). faqosja e bllokut duke përdorur divs.
Ndoshta kjo ishte e përshtatshme nga njëra anë për zhvilluesit, por motorët e kërkimit, si dhe shfletuesit, kishin një kohë të vështirë. Prandaj, u gjet një zgjidhje në formën e etiketave semantike.
Këta elementë thjesht standardizojnë njësitë bazë të faqes me emrat e etiketave që janë të përbashkëta për të gjitha burimet. Këto përfshijnë, dhe.
është përgjegjës për përcaktimin e titullit të faqes ose titullit të tekstit, për "footerin" në fund të faqes së internetit dhe për navigimin e sajtit. Për të mësuar materialin, dua të provoni:
Faqja juaj e internetit Blog për njerëzit e IT
- Artikulli 1 i menysë
- Artikulli 2 i menysë
Teksti i artikullit të parë
Blogeri i preferuar i autorit
Ky shembull tregon lehtësinë e strukturimit të kodit kur ndihmë html 5. Do të doja të theksoja se sot zhvilluesit që respektojnë veten përdorin specifikimet html 5 dhe css3 në burimet e tyre të internetit. Ato përmirësojnë ndërveprimin e shfletuesit me
Në HTML5, disa etiketa të reja janë futur për strukturën e kodit: , , , , , të cilat në disa raste zëvendësojnë të zakonshmen. Edhe pse duket se nuk ka shumë ndryshim midis etiketave, ka një hendek të madh mes tyre. Etiketat nuk synojnë njerëzit që nuk kanë arsye të shikojnë kodin burimor të një faqeje, por makinat që interpretojnë kodin. Makinat ose robotët nuk e kuptojnë, për ta kjo është një etiketë tipike shënjimi - zëvendësojeni me dhe kuptimi nuk do të ndryshojë. Një gjë tjetër është që roboti, pasi ka zbuluar këtë etiketë, e percepton atë pikërisht si kokën e një siti ose seksioni.
Çfarë jep kjo në fund? Motorët e kërkimit Ata fillojnë të indeksojnë më mirë sitin sepse e ndajnë qartë përmbajtjen e faqes nga elementët ndihmës. Shfletuesit e të folurit të krijuar për personat e verbër e kalojnë titullin dhe shkojnë drejtpërdrejt te përmbajtja. Faqet mund të ndajnë automatikisht përmbajtje dhe informacione të tjera me njëri-tjetrin. Të gjitha këto aftësi quhen semantikë dhe ju lejojnë të paraqisni të dhënat në një formë të përshtatshme për robotët.
Le të bëjmë fillimisht kokën e faqes duke përdorur një etiketë (shembulli 6.2).
Shembulli 6.2. Përdorimi
Një përpjekje për të shtuar një sfond në etiketën në stile nuk çoi në asgjë, sfondi nuk dëshiron të shfaqet në disa shfletues. Të gjitha etiketat e reja fillimisht duhet të bëhen në nivel blloku nëpërmjet veçorisë së shfaqjes, më pas ato do të fillojnë të shfaqen saktë (shembulli 6.3).
Shembulli 6.3. Kreu i faqes
HTML5 CSS 2.1 IE 7+ IE 9+ Cr Op Sa Fx
header ( shfaqja: bllok; sfondi: #00B0D8 url (images/header-gradient.png) repeat-x; )
Ky shembull do të funksionojë në të gjithë shfletuesit përveç IE7 dhe IE8. Internet Explorer nuk i shton stil elementeve që nuk i kupton. Ky keqkuptim mund të korrigjohet duke krijuar një element bedel me duke përdorur JavaScript. Për ta bërë këtë, ne do ta përfshijmë këtë në kod.
dokument.createElement("header");
Nëse ka një etiketë në faqe, ky skenar është mjaft i përshtatshëm për këtë punë. Por nuk dua ta përsëris rreshtin dhjetë herë për dhjetë etiketa të ndryshme, kështu që ne e automatizojmë këtë proces përmes një cikli. Vetë etiketat tregohen në një listë, të ndara me presje (shembulli 6.4).
Shembulli 6.4. Skript për IE
var e = ("artikull, mënjanë, figcaption, figurë, fundor, kokë, hgroup, nav, seksion, kohë"). ndarje (",");< e.length; i++) { document.createElement(e[i]); }
për (var i = 0; i Vetë skenari përbëhet nga komente të kushtëzuara , në mënyrë që të funksionojë vetëm për versionin IE 8.0 dhe më të ulët. IE9 mbështet të reja Etiketat HTML
5 është aktivizuar tashmë.
Ju nuk keni nevojë të futni shembullin e mësipërm në faqen tuaj të internetit, ju mund të përdorni një skript të disponueshëm publikisht të shkruar nga Remy Sharp dhe të shpërndarë nën licencën MIT. Për ta bërë këtë, thjesht jepni një lidhje me të, siç tregohet në shembullin 6.5.
Shembulli 6.5. Skript për IE
Të gjithë skriptet e specifikuara duhet të vendosen në kodin përpara CSS. Kështu, për përdorim të plotë
në stilet për etiketat e reja, vendosni shfaqjen: bllok.
Tani le të shohim disa etiketa HTML5 në më shumë detaje për të kuptuar qëllimin e tyre.
Shembulli 6.6. Duke përdorur një etiketë
HTML5 IE Cr Op Sa Fx
artikull Gjurmët e kafshëve të paprecedentë Historia se si gjurmë misterioze rozë me gjashtë gishta u shfaqën pranë dhomës së ngrënies dhe pse ndodhi kjo.
Përcakton një bllok që nuk lidhet me përmbajtjen kryesore për vendosjen e kategorive, lidhjet me arkivin, etiketat dhe informacione të tjera (shembulli 6.7). Një bllok i tillë, nëse ndodhet në anën, zakonisht quhet "shirit anësor" ose "shirit anësor".
Shembulli 6.6. Duke përdorur një etiketë
Shembulli 6.7. Përdorimi
aside document.createElement("aside");
dokument.createElement("artikull");
mënjanë ( sfond: #f0f0f0; /* Ngjyra e sfondit */ mbushja: 10 pikselë; /* Kufijtë */ gjerësia: 200 px; /* Gjerësia e shiritit anësor */ notoni: djathtas; /* Mbështilleni majtas */ ) artikulli ( margjina-djathtas: 240 px ;
Kurseni energjinë elektrikeGjuhë e mirë
Shkopi i kujt është më i madh
Shembulli 6.6. Duke përdorur një etiketë
Historia ka të bëjë me atë se si ishte e nevojshme të kursehej energjia elektrike, çfarë masash u morën për këtë dhe ku shkoi në të vërtetë.
Përmban një përshkrim për etiketën. Etiketa duhet të vijë së pari ose elementi i fundit në grup.
Përcakton "footrin" e një siti ose seksioni, ai zakonisht përmban emrin e autorit, datën e dokumentit, kontaktin dhe informacion ligjor(Shembulli 6.9).
Shembulli 6.9. Përdorimi
Shembulli 6.6. Duke përdorur një etiketë
footer Faqja personale e Kristina Vetrovës Mirë se vini!
Jam i lumtur t'ju mirëpres në faqen time të internetit.
E drejta e autorit Kristina VetrovaPërcakton "titullin" e një siti ose seksioni.
Përdoret për të grupuar titujt e faqeve të internetit ose të seksioneve (Shembulli 6.10).
Shembulli 6.10. Përdorimi
Shembulli 6.6. Duke përdorur një etiketë
hgroup Kristina Vetrova Faqja personale
Cakton navigimin e faqes (shembulli 6.11). Nëse ka disa blloqe lidhjesh në një faqe, atëherë zakonisht vendosen lidhje me përparësi në to. Është gjithashtu e pranueshme të përdoren etiketa të shumta në një dokument. Mos e futni brenda.
Shembulli 6.11. Përdorimi
Shembulli 6.6. Duke përdorur një etiketë
nav Cheburashka dhe krokodili Gena Cheburashka | Gjeni |
Shapoklyak | Lariska Mirë se vini!
Përcakton një seksion të një dokumenti, i cili mund të përfshijë titujt, kokën, fundin e faqes dhe trupin (Shembulli 6.12). Lejohet të futet një etiketë brenda një tjetre.
Shembulli 6.6. Duke përdorur një etiketë
Shembulli 6.12. Përdorimi
seksioni i filmimit nga polipropileni
Historia ka të bëjë me atë se si ata bënë një film ku heronjtë po pushonin në plazh, më pas erdhi antagonisti, i rrahu protagonistët, i hodhi në pishinë dhe çfarë ndodhi.Gjuhë e mirë
Historia ka të bëjë me atë se si u zhvillua një studio për studimin e gjuhës esperanto, ndërsa sipër saj, në verandë, ishte një studio shakash ku tregoheshin shaka dhe çfarë doli prej saj.
Shënon tekstin brenda një etikete si datë, orë ose si datë ashtu edhe kohë. Mund të specifikohet drejtpërdrejt brenda kontejnerit, ose të specifikohet përmes atributit datatime (shembulli 6.13). Data dhe ora janë caktuar format ndërkombëtar
ISO 8601. Shembuj të projektimit janë dhënë në tabelë. 6.1.
- Çdo njësi ka formën dhe kufizimet e veta të specifikuara.
- Viti është përcaktuar me katër shifra (1860).
- Muaji - dy shifra (01 - janar, 02 - shkurt, 12 - dhjetor).
- Dita - dy numra nga 01 në 31.
- Ora - dy shifra nga 00 në 23.
- Minutat janë dy shifra nga 00 në 59.
- Sekondat janë dy shifra nga 00 në 59.
Zona kohore - orët dhe minutat e treguara me një shenjë plus ose minus.
Data dhe ora ndahen me një germë latine të madhe T. Zona kohore, nëse është e nevojshme, shkruhet pas orës me një shenjë plus ose minus. Për shembull, për Moskën zona kohore do të jetë +03:00.
Shembulli 6.6. Duke përdorur një etiketë
Shembulli 6.13. Përdorimi
koha
1957-10-04 U lëshua sateliti i parë artificial i Tokës.
1961-04-12 Fluturimi i parë i drejtuar në hapësirë.
16-06-1963 Fluturimi i parë i një astronaute femër.
1969-07-21 njeriu zbarkon në Hënë.
Të gjithë e dinë se etiketat, , , janë prezantuese dhe për këtë arsye, bazuar në paradigmën “strukturë, paraqitje, sjellje”, përdorimi i tyre nuk inkurajohet. Elementet , , , duken shumë më të njohur. Ky ka qenë rasti për shumë vite të praktikës së zhvillimit. Megjithatë, shumë ka ndryshuar në semantikën e këtyre elementeve me ardhjen e HTML5. Tani kemi 4 etiketa të reja me kuptim dhe një rrëmujë në kokën tonë.
vs Nëse më parë të gjitha tekstet e paraqitjes ishin plot me fraza si "përdorni në vend të ", dhe kjo ishte gjysma e vërtetë, sot një zakon i tillë mund të luajë një shaka mizore semantike. Puna është se autorët e HTML5 propozojnë ta përdorin atë për të nxjerrë në pah pasazhe të tekstit në mënyrë që të tërheqin vëmendjen e lexuesit, por pa nënkuptuar rëndësinë e shtuar të tekstit ose intonacionit. Specifikimi ofron shembuj të përdorimit për markup fjalë kyçe në dokument
Komponentët frobonitor dhe barbinator janë skuqur.
Dhe kryeson (paragrafi i parë i një artikulli në gazetari)
Kotele "të adoptuara" nga lepuri i përkëdhelur
Gjashtë kotele të braktisura kanë gjetur një figurë të re të papritur të nënës - një lepur të përkëdhelur.
Infermierja veterinare Melanie Humble i çoi kotelet tre javëshe në shtëpinë e saj në Aberdeen.
Nga ana tjetër, si më parë, kjo nënkupton rëndësinë e shtuar të përmbajtjes së saj.
vs Që tani e tutje përmban tekst që dallon nga mjedisi i përgjithshëm, por nuk ka ngjyrime emocionale. Sipas mendimit tim, është logjike të përdoret aty ku tradita tipografike sugjeron kursive (për shembull, fjalët në gjuhë e huaj, termat, etj.)Per aspera ad Astra- e përkthyer nga latinishtja, thënia do të thotë "Përmes gjembave te yjet".
do të thotë stres i theksuar, theks emocional në një pjesë të caktuar të tekstit. Ky është rasti kur në të folur theksojmë fjalët me zë (intonacion, vëllim, etj.)
Nuk mund të ekzekutosh, mund të kesh mëshirë.
Lexoni me kujdes kontratën! “Shkronja të imta” (informacion që është formalitet ligjor, si p.sh. një licencë biznesi ose adresa ligjore etj.) ne, si rregull, shënonim një element me një klasë që përcakton më shumë në agjentët e përdoruesve vizualë font i vogël. Tani një element i ri i vjetër semantik është shfaqur në arsenalin tonë - .Holivar o Më parë nuk ishte gjë tjetër veçse një tekst i tejkaluar. Tani përfaqëson informacionin që ka humbur rëndësinë e tij.Ne gjithashtu kemi një element, rezultati i parazgjedhur i të cilit në agjentët vizualë të përdoruesve është teksti i shënuar. Do të thotë ndryshime në një dokument dhe në shikim të parë qëllimi i tyre mund të duket i njëjtë. Megjithatë, ka një pikë delikate këtu. Le të shohim një shembull të një faqe produkti në një dyqan online.
Mund të tregojë dy çmime, njëra prej të cilave është e kryqëzuar. E shënojmë me elementin . Kjo do të thotë se çmimi i vjetër ka humbur rëndësinë e saj (nuk ka rëndësi kur ka qenë, vetë fakti është i rëndësishëm). Si të kontrolloni nëse nuk është? nënkupton ndryshimet e bëra në dokument (e rendesishme eshte qe në një moment në kohë dokumenti u ndryshua ). Në rastin tonë, dokumenti i ri përmban tashmë informacione të parëndësishme semantikë të re dhe doktip të vjetër Nëse, për ndonjë arsye të panjohur, nuk mund ta zëvendësoni doktipin me një të ri dhe ta vendosni zyrtarisht në HTML 4.01, mos e humbni shpresën. Përdorni elementë të vjetër të rinj me kuptim të ri dhe me kalimin e kohës do të falënderoni veten. Ndoshta dikush do të thotë se kjo është e pasaktë, por këto elemente nuk janë as të pavlefshme. Për më tepër, HTML5 u krijua me të përputhshme prapa
, e njëjta gjë vlen edhe për semantikën e re të elementeve të vjetra. Asgjë nuk ka ndryshuar rrënjësisht, por është shtuar vetëm një erëz semantike.
Të cilat ju lejojnë të përshkruani qartë blloqet e përmbajtjesÇfarë është HTML5? HTML5 është versioni më i ri Hypertext Markup Language (HTML), e cila përfaqëson rishikimin më radikal të kësaj gjuhe në të gjithë historinë e saj. Ky version ka shumë veçori të reja fusha të ndryshme
- . Më të rëndësishmet prej tyre përfshijnë sa vijon.
- Etiketat e integruara të mediave për të mbështetur përmbajtjen audio dhe video
- Etiketa e kanavacës për vizatimin e përmbajtjes direkt në shfletues
Përmirësimi i kualifikimeve në këtë temë
Ky artikull është pjesë e programit “Rruga drejt njohurive” për përmirësimin e aftësive kualifikuese (Rruga e Dijes). Cm . Një grup i ri elementësh strukturorë (etiketa) në HTML5 ndryshon mënyrën e strukturimit të dokumenteve HTML. E re etiketat e strukturës fokusohen në ndarjen e një dokumenti HTML në pjesë logjike. Emri i çdo etikete strukture përshkruan llojin e përmbajtjes që synohet të ruajë etiketa. Ky artikull i kushtohet përshkrim i detajuar
këto etiketa të reja.Në vitin 1989, Tim Berners-Lee krijoi versionin e parë të gjuhës HTML për të kapërcyer disa kufizime të metodave të atëhershme ekzistuese të aksesit të informacionit në internet. Aktiv faza fillestare ekzistenca e internetit, navigimi në të ishte detyrë sfiduese. Përmbajtja në internet ishte një koleksion dokumentesh individuale dhe nuk kishte asnjë mënyrë të lehtë për të lundruar nëpër ato dokumente. Në të vërtetë, përdoruesi duhet ta kishte ditur adresën e saktë dokumentin që po kërkoni dhe futeni manualisht këtë adresë. Për të zgjidhur këtë problem, Berners-Lee krijoi dy teknologji: Protokolli HTTP(Hipertekst Protokolli i Transferimit) dhe HTML (Hypertext Markup Language).
HTTP është një protokoll shërbimi që serverët e uebit përdorin për të ofruar përmbajtje. Shikoni shiriti i adresave shfletuesin tuaj të internetit. Nëse shfletuesi juaj shfaq një URL të plotë, ka shumë të ngjarë që ajo fillon me karakteret "http://". Kjo pjesë e URL-së i tregon shfletuesit se çfarë lloj protokolli duhet të përdorë kur bën një kërkesë në serverin e uebit. Kur një server Web merr një kërkesë për një dokument, në shumicën e rasteve ky dokument paraqitet në Formati HTML ose të konvertohet në këtë format. Është dokumenti HTML që i dërgohet shfletuesit që e dërgoi këtë kërkesë.
HTML është një gjuhë skriptimi që i tregon shfletuesit të internetit se si të prezantojë përmbajtjen. Përmbajtja mund të përmbajë lidhje me dokumente të tjera, duke ofruar një metodë miqësore për përdoruesit për lundrimin midis dokumenteve në internet.
Ky kombinim i teknologjive HTTP dhe HTML siguron navigim të shpejtë dhe të lehtë të përmbajtjes në internet - për të lundruar midis dokumenteve, thjesht duhet të klikoni në lidhjet në tekst. Pas krijimit të dy teknologjive të përmendura më lart, Berners-Lee themeloi një organizatë të quajtur W3C (World Ueb i gjerë Konsorciumi). W3C udhëhoqi zhvillimin e katër të parave Versionet HTML.
Qëllimi fillestar i internetit ishte të shërbente thjeshtë dokumente tekstuale. Shfletuesit e parë ishin vetëm me tekst (me fjalë të tjera, ata nuk kishin ndonjë dritare të zbukuruar - thjesht tekst në ekran). Edhe shtimi i imazheve ishte një arritje mjaft e rëndësishme kur ato u shfaqën për herë të parë. Sot, njerëzit bëjnë një sërë gjërash në internet, nga dërgimi i emaileve deri te shfletimi programet televizive. Interneti tashmë është bërë shumë më tepër se një mekanizëm për transportimin e dokumenteve të thjeshta tekstuale. Veçoritë e reja dhe përdorimet e reja kanë krijuar vështirësi të reja dhe probleme të reja që HTML nuk ishte krijuar kurrë për t'i zgjidhur.
W3C u përpoq të zgjidhte problemet e internetit të sotëm me standardin XHTML 2.0 (Extensible Hypertext Markup Language). Megjithatë, ky standard nuk është miratuar gjerësisht dhe tashmë është braktisur praktikisht. Në vitin 2004, ndërsa W3C po përqendronte përpjekjet e saj në standardin XHMTL 2.0, një organizatë tjetër e quajtur WHATWG (Grupi Punues i Teknologjisë së Aplikimit të Uebit Hypertext) filloi të zhvillonte standardin HTML5, i cili u prit shumë më mirë nga komuniteti sesa standardi XHTML 2.0. W3C ka ndaluar së punuari në XHTML 2.0 dhe aktualisht po punon me WHATWG për të zhvilluar specifikimin HTML5.
Shfletuesit e mbështeturNë kohën e shkrimit të këtij artikulli, standardi HTML5 ende nuk është lëshuar zyrtarisht. Shumica e përmbajtjeve në ueb krijohen ende sipas specifikimeve HTML 4 Megjithatë, disa shfletues mbështesin specifikimin HTML5. Kjo mund të jetë e ndërlikuar sepse secili prej këtyre shfletuesve mund të mbështesë vetëm një nëngrup të veçorive HTML5. Përpara se të krijoni një faqe interneti të bazuar në HTML5, provoni secilin nga shfletuesit tuaj të synuar për t'u siguruar që ata mbështesin veçoritë që planifikoni të përdorni në faqen tuaj.
Deklarata e përditësuar e doctypePavarësisht nga aftësitë e shfletuesve tuaj të synuar, duhet t'i tregoni secilit shfletues se dëshironi të shfaqni përmbajtjen tuaj duke përdorur specifikimin HTML5. Kjo mund të bëhet duke përdorur deklaratën doctype.
Deklarata doctype i tregon shfletuesit se në cilin version të gjuhës së shënjimit është shkruar faqe aktuale. Ai e bën këtë duke përdorur një shabllon DTD (Përkufizimi i llojit të dokumentit). Një DTD specifikon rregullat që përdor një gjuhë shënjimi për të ndihmuar shfletuesit të shfaqin saktë përmbajtjen.
Koncepti i deklaratave të doctype mund të jetë mjaft konfuz. Specifikimi aktual i HTML ka shumë deklarata doctype, dallimet midis të cilave nuk janë plotësisht të qarta. Tabela 1 tregon në dispozicion në për momentin deklaratat e doktipit dhe aftësitë e tyre.
Tabela 1. Deklaratat e Doctypes dhe aftësitë e tyre| HTML 4.01 i rreptë | Lejon të gjithë elementët dhe atributet HTML, por nuk lejon etiketat e prezantimit si font. Elementet e grupit të kornizave nuk lejohen. | |
| HTML 4.01 kalimtare | Ngjashëm me deklaratën strikte HTML, por lejon përdorimin e etiketave të tilla si font. Elementet e grupit të kornizave nuk lejohen. | |
| Set kornizash HTML 4.01 | Ngjashëm me deklaratën kalimtare HTML, por lejon përdorimin e elementeve të grupeve të kornizës. | |
| XHTML 1.0 i rreptë | Ngjashëm me deklaratën strikte HTML, por e gjithë përmbajtja duhet të jetë në formatin XML. Për shembull, çdo element hapës duhet të ketë një element mbyllës përkatës. Elementet e grupit të kornizave nuk lejohen. | |
| XHTML 1.0 kalimtare | Ngjashëm me deklaratën kalimtare HTML, por e gjithë përmbajtja duhet të jetë në formatin XML. Elementet e grupit të kornizave nuk lejohen. | |
| grup kornizash XHTML 1.0 | Ngjashëm me deklaratën kalimtare XHTML, por lejon elementet e grupeve të kornizës. | |
| XHTML 1.1 | Ngjashëm me deklaratën e rreptë XHTML, plus ofron aftësi të modulit të tilla si mbështetje Ruby për gjuhët e Azisë Lindore. |
Për fat të mirë, specifikimi HTML5 thjeshton shumë deklaratën e tipit doctype. Në të vërtetë, ekziston vetëm një deklaratë e tillë në HTML5. Që shfletuesi juaj të jepet duke përdorur specifikimin HTML5, shtoni deklaratën e tipit doctype të treguar në .
Listimi 1. Deklarata e tipit HTML5Deklarata duhet të jetë në fillim të dokumentit HTML, përpara .
Etiketat e reja të strukturësPremisa pas krijimit të etiketave të strukturës së re është dëshira për të ndarë faqet e internetit në pjesë logjike duke përdorur elementë, emrat përshkrues të të cilëve korrespondojnë me përmbajtjen që ato përmbajnë. Konceptualisht, një faqe në internet mund të mendohet si një dokument. Dokumentet përmbajnë headers, footers, kapituj, dhe të tjera të ndryshme simbolet, duke i ndarë dokumentet në pjesë logjike.
NË këtë seksion Duke përdorur një shembull, diskutohen metodat aktuale të ndarjes së një dokumenti HTML. Në seksionet vijuese të artikullit, ne do të modifikojmë kodin origjinal duke përdorur etiketat e strukturës HTML5 dhe modaliteti hap pas hapi Le të shqyrtojmë krijimin e një strukture logjike dokumenti.
Qasja HTML 4Edhe nëse keni krijuar vetëm dokumente bazë HTML më parë, ju jeni ende të njohur me etiketën div. Në epokën para-HTML5, etiketa div ishte mekanizmi kryesor për krijimin e blloqeve të përmbajtjes në një dokument HTML. Si shembull, ai demonstron përdorimin e etiketave div për të krijuar një faqe të thjeshtë me një kokë, zonë përmbajtjeje dhe fund.
Listimi 2. Faqe e thjeshtë HTML duke përdorur etiketat div A Simple Faqe HTML Përdorimi i fundit të përmbajtjes së kokës së DivsKjo qasje funksionon mirë; etiketa div është një element i mrekullueshëm qëllimi i përgjithshëm. Megjithatë, pa shikuar atributin id të çdo etikete div, është e vështirë të thuhet se cilin seksion të dokumentit përfaqëson çdo etiketë div. Mund të bëhet një argument që nëse atributi id emërtohet siç duhet, aftësitë e tij si tregues janë të mjaftueshme, megjithatë, përdorimi i atributeve id nuk është i detyrueshëm. Ka shumë shije të atributit id që mund të konsiderohen po aq të vlefshme. Vetë etiketa div nuk përmban asnjë tregues se çfarë lloji të përmbajtjes i është ngarkuar të përfaqësojë.
Qasja HTML5HTML5 e zgjidh këtë problem duke ofruar një grup etiketash që përcaktojnë më saktë blloqet kryesore të përmbajtjes që përbëjnë një dokument HTML. Pavarësisht nga përmbajtja që rezulton që shfaq një faqe në internet, shumica e faqeve të internetit përbëhen nga kombinime të ndryshme seksionet tipike dhe elementet e faqes.
Listimi 4. Shtimi i një seksioni Një etiketë e thjeshtë e kokës së faqes HTMLKy është një seksion i rëndësishëm i faqes.
Artikulli i etiketës FooterEtiketa e artikullit tregon seksione të rëndësishme të përmbajtjes brenda një faqe interneti. Për shembull, në një blog, çdo postim individual është një pjesë e rëndësishme e përmbajtjes. Pas shtimit të etiketës së artikullit në shembullin e kodit, marrim kodin e treguar në .
Listimi 5. Shtimi i etiketave të artikujve Një kokë e thjeshtë faqesh HTMLKy është një pjesë e rëndësishme e përmbajtjes në faqe.
Ndoshta një postim në blog.Footer Tag mënjanë Etiketa mënjanë tregon se përmbajtja e përfshirë në këtë element është e lidhur, por jo pjesë e përmbajtjes kryesore të asaj faqeje. Në një farë kuptimi, përdorimi i tij është i ngjashëm me futjen e një komenti në trupin e tekstit (si ky koment). Përmbajtja në kllapa ofron informacion shtesë
në lidhje me elementin që përmban këtë përmbajtje. Pas shtimit të etiketës anash në kodin e shembullit, marrim kodin e treguar në të.Ky është një pjesë e rëndësishme e përmbajtjes në faqe.
Ky është një pjesë e rëndësishme e përmbajtjes në faqe.
Listimi 6. Shtimi i një etikete mënjanë Një kokë e thjeshtë faqesh HTMLFooter Etiketa Footer
Etiketa e footer-it shënon përmbajtjen që përmban si fundore të dokumentit aktual. Pas shtimit të etiketës së footer-it në kodin e shembullit, marrim kodin e treguar në .Ky është një pjesë e rëndësishme e përmbajtjes në faqe.
Listimi 7. Shtimi i një etikete në fund të faqes Një kokë e thjeshtë faqesh HTML
Ky është një pjesë e rëndësishme e përmbajtjes në faqe.
Kjo është një mënjanë për postimin e parë në blog.Fundi i faqes Në këtë pikë, të gjitha etiketat div nga janë zëvendësuar nga etiketat e strukturës HTML5.
Lista e etiketave nav 8. Shtimi i një etikete navigimi Një titull i thjeshtë faqesh HTML Disa Lidhje Nav Disa lidhje të tjera Nav Një Lidhje e Tretë NavKy është një pjesë e rëndësishme e përmbajtjes në faqe.
Listimi 7. Shtimi i një etikete në fund të faqes Një kokë e thjeshtë faqesh HTML
Ky është një pjesë e rëndësishme e përmbajtjes në faqe.
Footer Versioni përfundimtar i shembullitI paraqitur këtu është rezultati i zëvendësimit të etiketave origjinale të div me etiketat e reja të strukturës HTML5.
Listimi 9. Versioni përfundimtar i shembullit A Simple HTML Page Header Disa Lidhje Nav Disa lidhje të tjera Nav Një Lidhje e Tretë NavKy është një pjesë e rëndësishme e përmbajtjes në faqe.
Listimi 7. Shtimi i një etikete në fund të faqes Një kokë e thjeshtë faqesh HTML
Ky është një pjesë e rëndësishme e përmbajtjes në faqe.
Kjo është një mënjanë për postimin e parë në blog.Edhe pse ky shembull është thjeshtuar sa më shumë që të jetë e mundur për qëllime demonstrimi, një krahasim i shembullit origjinal bazuar në elementet div() me variantin që rezulton () tregon qartë qëllimin e etiketave të strukturës së re.
konkluzioniEtiketat e reja të strukturës HTML5 përshkruajnë përmbajtjen që përmbajnë dhe ndihmojnë në ndarjen e një dokumenti në seksione logjike. Ashtu si një autor që shkruan një libër, autori i dokumentit do të jetë ende në gjendje të vendosë se kur dhe ku t'i përdorë këto elemente të reja në dokumentin e tyre. Edhe pse dy autorë që shkruajnë të njëjtin libër mund të zgjedhin mënyra të ndryshme për ta ndarë këtë libër në kapituj, përdorimi i kapitujve është ende një qasje e qëndrueshme për ndarjen e librave në seksione. Po kështu, edhe pse dy autorët e një faqeje të caktuar Web mund të zgjedhin fare mirë struktura të ndryshme, e re elementet strukturore HTML5 u ofron zhvilluesve të faqeve të internetit një përvojë të re, të qëndrueshme që nuk ishte ofruar në të kaluarën. etiketat div.
