- Nu ai niciun produs în coș.
Despre HTML 5 – limbajul de programare esential pentru orice web-designer
HTML-ul, parte indispensabilă a oricărei pagini web, a făcut mari progrese în ultima perioadă. Variantele cel mai des folosite până de curând au fost HTML 4.01 şi XHTML 1.0. Versiunea 4.01 a fost revizuită ultima dată în aprilie 1998, iar XHTML 1.0 a devenit parte a specificaţiilor W3C în anul 2000.
Ce înseamnă toate astea? Ei bine, înseamnă că tehnologiile folosite cel mai des în momentul de faţă pentru afişarea informaţiilor pe internet sunt oarecum depăşite. Sunt în uz de mai bine de 10 ani iar în termeni informatici asta înseamnă foarte mult.
Lucrul la HTML 5 a început prin anul 2004, iar deja prin 2010 a ajuns la un stadiu cât de cât finalizat. Obiectivele sale principale au fost acelea de a îmbunătăți limbajul cu un suport pentru cele mai recente apariții multimedia în același timp menținându-l ușor de citit de oameni și bine înțeles de computere și device-uri (browsere web, parsere, etc.). HTML5 își propune să însumeze nu numai HTML4, dar și XHTML1 și DOM2HTML (îndeosebi JavaScript).[3]
Ce aduce nou HTML 5
Urmând modelul intuitiv de structurare a datelor implementat de XML, HTML 5 permite o mai bună organizare a câmpurilor unei pagini. Au fost introduse noi tag-uri care permit o implementare semantică a elementelor unei pagini.
A fost adăugată posibilitatea de implementare mai uşoară în pagină a elementelor de tip multimedia, cum ar fi video şi audio, lucru care era făcut până acum prin folosirea tag-ului object şi a unui player Flash (SWF) cel mai des.
Noi atribute au fost adăugate tag-urilor deja existente, ceea ce permite o interacţiune mai dinamică cu acestea şi o metodă de manipulare mai uşoară a elementelor unui document. Astfel au fost introduse atribute precum draggable (permite unui element să poată fi mutat în pagină) sau contenteditable (permite unui element să poată fi editat). Acest lucru elimină nevoia de a folosi alte tehnologii precum JavaScript pentru a obţine acelaşi rezultat.
Care sunt noile tag-uri?
Noile tag-uri introduse de HTML 5 sunt destinate în primul rând organizării elementelor după scopul în care sunt folosite. Asta nu înseamnă că sunt ignorate vechile elemente, cum ar fi div-urile, ci sunt introduse noi elemente ajutătoare. Mai jos găsiţi o listă cu diferite tag-uri disponibile în HTML 5.
- section – acest tag este un element de tip
blockcare permite separarea diferitelor secţiuni ale unei pagini. Nu este făcut să înlocuiască taguldiv, dar o poate face foarte bine - article – numele îl defineşte foarte bine, ceea ce denota şi natura semantică a noii versiuni HTML. Un alt element de tip
blockdestinat organizării mai multor elemente de acelaşi tip. De exemplu posturile unui blog, articolele într-un magazin online sau elementele dintr-un coş de cumpărături. - aside – tag folosit pentru marcarea unui conţinut în pagină care are mai puţin legătură cu restul conţinutului. Un exemplu bun de folosire a acestui tag este pentru marcarea meniului de navigare în site/pagină sau pentru delimitarea zonelor cu reclama/bannere.
- nav – un alt element foarte explicit. Este folosit la marcarea meniului principal de navigare sau a unui grup de link-uri. Nu toate link-urile trebuie să fie incluse în tag-ul
nav - header – folosit la marcarea unuia sau a mai multor titluri în interiorul unei pagini sau chiar în interiorul diferitelor articole din aceeaşi pagină
- footer – folosit pentru marcarea unei secţiuni de final a unei pagini sau a unui articol
Ar mai fi şi alte tag-uri introduse în HTML 5, dar nu are rost să le enumeram pe toate aici. Dacă doriţi să aflaţi mai multe, e recomandat să vizitaţi specificaţiile W3C. Acolo găsiţi toate modificările ce urmează să le contină noua versiune de HTML.
Cum arata o pagina în HTML 5?
Păi să vedem cam cum modifica noile tag-uri structura unei pagini simple. În mod normal am folosi multe div-uri pentru organizarea elementelor şi o pagina simpla ar arata cam asa:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pagina web cu XHTML 1.0</title>
</head>
<body>
<div id="header">
<h1>Titlul paginii XHTML 1.0</h1>
</div>
<div id="meniu">
<ul>
<li><a href="#">acasa</a></li>
<li><a href="#">servicii</a></li>
<li><a href="#">portofoliu</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
<div id="continut">
<div id="articol">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p> Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p> Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
</div>
<div id="footer">
<p>2webdesign.ro - Copyright © 2017</p>
</div>
</body>
</html>
Se observă că pagina de mai sus conţine foarte multe div-uri pe care trebuie să le diferenţiem prin id-uri sau clase. Asta crează un exces de tag-uri greu de urmărit, fenomen cunoscut ca “div-soup” (supă de div-uri). Şi acum hai să vedem cum ar arăta acelaşi document folosind câteva tag-uri implementate de HTML 5.
< !DOCTYPE html> <html> <head> <title>Pagina web cu XHTML 1.0</title> </head> <body> <header> <h1>Titlul paginii XHTML 1.0</h1> </header> <nav> <ul> <li><a href="#">acasa</a></li> <li><a href="#">servicii</a></li> <li><a href="#">portofoliu</a></li> <li><a href="#">contact</a></li> </ul> </nav> <section> <article> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <p> Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> </article> <aside> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <p> Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> </aside> </section> <footer> <p>2webesign.ro Copyright © 2017</p> </footer> </body> </html>
Se observă clar că noul cod este mai uşor de citit şi de urmărit. Mai mult, pentru o pagina simplă ca asta, elementele pot fi identificate prin tag, nu prin id sau clasa. Asta elimină căutarea tag-ului prin fişierele HTML şi CSS în cazul paginilor mai complexe.
2WebDesign
Cu o experienta de peste un deceniu in materie de web design si propulsati de o nemarginita pasiune pentru online va invitam sa ne vizitati site-ul si sa va inspirati citind cele mai interesante articole din domeniu.
Recommended Posts
Creare site de prezentare sau magazine online in WordPress | Web design WP la preturi mici
8 mai 2017
Cateva fonturi gratuite si interesante pentru web designeri
27 ianuarie 2017
