Introducere in HTML5

Introducere in HTML5
In acest tutorial voi prezenta succint principalele noutati aduse de HTML5 in

comparatie cu versiunile anterioare.
Tehnologia evolueaza rapid, intr-un ritm alert, in toate domeniile, si cum era de asteptat web
development-ul nu putea sa fie mai preos. HTML-ul este limbaul mar!up cel mai folosit in
acest moment pentru paginile web, insa acesta a "suferit" un upgrade simtitor prin intermediul
HTML5.
#u o sa intru in istoria si pasii evolutivi ai acestui limba, deoarece in opinia mea, cunoasterea
acestora nu fac scopul principal al unui web developer $insa nu afirm ca trebuiesc total ignorate
aceste informatii%.
&vand la baza principiile dupa care a fost dezvoltat HTML, ultima versiune a acestuia - HTML5
- se bazeaza pe structura, sens si continut, asa cum '(( $respectiv '((), despre care voi
prezenta mai multe informatii intr-un tutorial separat% trebuie folosit numai pentru a modifica
felul in care continutul este afisat. 'u alte cuvinte, HTML5 trebuie sa descrie ce este un element
in pagina iar '(() sa descrie cum trebuie sa arate acel element.
*rin urmare, avand aceste linii bine definite, schimbari au fost facute pentru a veni in spriinul
dezvoltatorilor si designerilor. + parte din tagurile dea cunoscute au fost scoase, iar altele au
fost proaspat introduse. In acest tutorial mi-am propus sa prezint schimbarile ce fac din HTML5
un "limba cu o mai mare putere de e,primare".
Incepem cu inceputul. -oct.pe-ul sau -ocument T.pe -eclaration nu mai este atat de complicat
si greu de retinut, cum a fost in versiunile anterioare de HTML sau /HTML, ci pur si simplu0
<!DOCTYPE HTML>
&ceasta ar trebui sa fie prima linie de cod in fisierul html. Teoretic ea poate lipsi, insa un
validator html va trebui apoi sa "ghiceasca" ce versiune de html a fost folosita.
(ectiunea 1head2 este rezervata titlului paginii, informatiilor meta, avascripturilor si css-urilor.
-e asemenea este o buna practica includerea charset-ului pentru a indica browserului ce tip de
caractere sa afiseze la incarcarea paginii.
<head>
<title></title>
<meta charset="UTF-" />
</head>
(ectiunea 1bod.2 ramane in continuare principala sectiune a paginii html.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="UTF-" />
</head>
<!"d#>

</!"d#>
</html>
Noile elemente in HTML5
'ele mai cunoscute noutati aduse de HTML5 sunt elementele de continut header, article si
footer, ce compun tagurile cu aceleasi nume. +moloagele lor media0 audio, canvas, figure si
video ne scapa in sfarsit de scripturile de embed $in cazul fisierelor video3audio% si ne aduc
functionalitati noi precum "desenarea" direct in pagina $cum este cazul canvas-ului%.
Mai os am alcatuit o lista detaliata a acestor elemente0
<article> - c"$tai$er de c"$ti$%t de si$e-statat"r&
<aside> - de'i$este c"$ti$%t%l relati"$at de article( dar i$de)e$de$t de
acesta&
<a%di"> - c"$tai$er )e$tr% c"$ti$%t a%dit&
<ca$*as> - c"$tai$er )e$tr% de+*"ltare ,ra'ica&
<c"mma$d> - de'i$este " c"ma$da( tasta -c"m!i$atie de taste.( radi" !%tt"$
etc&
<datalist> - de'i$este " lista de ")ti%$i )rede'i$ite )e$tr% eleme$t%l de ti)
i$)%t&
<details> - de'i$este detaliile %$%i eleme$t&
<em!ed> - c"$tai$er )e$tr% a)licatii e/ter$e sa% c"$ti$%t i$teracti*&
<'i,ca)ti"$> - de'i$este titl%l sa% le,e$da eleme$t%l%i 'i,%re&
<'i,%re> - c"$tai$er )e$tr% c"$ti$%t media -i$ mare )arte ima,i$i.&
<'""ter> - c"$tai$er )e$tr% '""ter-%l %$ei )a,i$i sa% al %$ei secti%$i&
<header> - c"$tai$er )e$tr% header-%l %$ei )a,i$i sa% al %$ei secti%$i&
<h,r"%)> - ,r%)ea+a eleme$tele de ti) headi$,&
<0e#,e$> - de'i$este %$ ,e$erat"r de )erechi de 0e# )e$tr% '"rm%lare&
<mar0> - de'i$este te/te sa% )"rti%$i de te/t marcate( e*ide$tiate&
<meter> - de'i$este %$ i$dicat"r )e$tr% mas%rari scalare i$ cadr%l %$%i
i$ter*al sa% )e$tr% *al"ri 'racti"$ale&
<$a*> - c"$tai$er )e$tr% secti%$ea de $a*i,are a )a,i$ii&
<"%t)%t> - de'i$este re+%ltat%l %$ei ")eratii sa% calc%l( )rec%m re+%ltat%l
%$%i scri)t&
<)r",ress> - de'i$este e*"l%tia %$%i )r"ces&
<r)> - de'i$este ce a'isea+a !r"1ser%l at%$ci ca$d $% s%)"rta ad$"tari 2%!#&
<rt> - de'i$este c"m)"$e$ta de te/t 2%!# di$ cadr%l %$ei ad$"tari&
<r%!#> - de'i$este " ad$"tare 2%!#&
<secti"$> - de'i$este " secti%$e i$ cadr%l )a,i$ii&
<s"%rce> - s)eci'ica res%rsele )e$tr% eleme$tele media&
<s%mmar#> - de'i$este %$ header *i+i!il )e$tr% i$'"rmatiile di$ eleme$t%l
details&
<time> - c"$tai$er )e$tr% data/tim)&
<*ide"> - c"$tai$er )e$tr% c"$ti$%t *ide"&
<1!r> - s)eci'ica l"c%l ")tim i$tr-%$ te/t sa% c%*a$t mai l%$, i$ care
!r"1ser%l )"ate i$tr"d%ce ra$d $"% sa% cratima3
+ buna parte din elementele de mai sus au proprietatea ca se pot folosi impreuna cu '(() si
4avascript, ba chiar numai impreuna cu acestea pot duce la rezultate uimitoare.
(puneam la inceput ca anumite elemente au fost scoase, cu precadere cele ce tineau mai mult de
aspect si nu de continut. &cestea se regasesc in lista de mai os0
<acr"$#m> - i$l"c%it de<a!!r>
<a))let> - i$l"c%it de <"!4ect>
<!ase'"$t>
<!,s"%$d> - i$l"c%it de <a%di">
<!i,>
<!li$0>
<ce$ter>
<dir> - i$l"c%it de <%l>
<'"$t>
<'rame>
<'rameset>
<isi$de/> - i$l"c%it de <'"rm>
<mar5%ee>
<m%ltic"l>
<$"!r>
<$"'rames>
<$"scri)t>
<s>
<s)acer>
<stri0e>
<tt>
<%>
5un, am vazut ce a intrat, am vazut ce a iesit. &cum sa vedem ce putem face, in linii mari cu
HTML5.
In principal, putem sa oferim inteles semantic superior paginii noastre - o pagina compusa din
div-uri imbricate in div-uri imbricate in div-uri nu ofera nici o informatie despre structura
continutului acelei pagini. &sta cu toate ca, cel mai probabil, div-urile noastre au un id6"header",
id6"footer" etc.
HTML5 vine si "face lumina" cu nou 1nav2, 1footer2 sau 1header2. 'and incepem si conectam
parti si bucati diferite, intelesul semantic capata proportii, si vom vrea sa stim care este
rezultatul. *entru aceasta, un standard HTML este o modalitate mai mult buna de a determina
sensul decat niste te,te arbitrare folosite ca valori pentru atributele de id.
Dispozitive mobile
In ceea ce priveste acest aspect, prin simpla mentionare a notiunilor de mai sus, aducerea unui
continut mult mai bogat $cel putin din punct de vedere media% pe dispozitivele mobile, devine
e,trem de usoara si reprezinta un mare avanta. -ar nu se termina aici.
HTML5 are si in aceasta situatie ce sa prezinte. Hainele de defilare sunt compuse din suport de
geolocatie, aplicatii offline si local storage. 'e inseamna asta7
*ai, vom putea dezvolta aplicatii web care vor avea in spate un mecanism similar bazelor de
date, pentru a stoca datele offline si a le livra serverelor abia cand acestea sunt disponibile. 8om
putea crea o pagina web in care sa ii precizam utilizatorului locatia folosind latitudinea si
longitudinea, apoi sa i le afisam pe o harta folosind 9oogle Maps.

Introducere in HTML5

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Introducere in HTML5

Încărcat de

Drepturi de autor:

Formate disponibile

Introducere in HTML5

In acest tutorial voi prezenta succint principalele noutati aduse de HTML5 in

S-ar putea să vă placă și