E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale HTML

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  HTML  /  Diverse (6)

Introducere in HTML5

25.05.2012
Introducere in HTML5

In acest tutorial voi prezenta succint principalele noutati aduse de HTML5 in comparatie cu versiunile anterioare.

Total vizualizari: 5987 5987 afisari   |   Comentarii  0   |   Rating   |   (3 voturi)   |   Timp necesar: 15 min 15 min   |   Nivel de cunostiinte necesar: Mediu  Mediu

Autor: Pustiu Expert
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza

Tehnologia evolueaza rapid, intr-un ritm alert, in toate domeniile, si cum era de asteptat web development-ul nu putea sa fie mai prejos. HTML-ul este limbajul markup cel mai folosit in acest moment pentru paginile web, insa acesta a "suferit" un upgrade simtitor prin intermediul HTML5.

Nu o sa intru in istoria si pasii evolutivi ai acestui limbaj, deoarece in opinia mea, cunoasterea acestora nu fac scopul principal al unui web developer (insa nu afirm ca trebuiesc total ignorate aceste informatii).

Avand la baza principiile dupa care a fost dezvoltat HTML, ultima versiune a acestuia - HTML5 - se bazeaza pe structura, sens si continut, asa cum CSS (respectiv CSS3, despre care voi prezenta mai multe informatii intr-un tutorial separat) trebuie folosit numai pentru a modifica felul in care continutul este afisat. Cu alte cuvinte, HTML5 trebuie sa descrie ce este un element in pagina iar CSS3 sa descrie cum trebuie sa arate acel element.

Prin urmare, avand aceste linii bine definite, schimbari au fost facute pentru a veni in sprijinul dezvoltatorilor si designerilor. O parte din tagurile deja cunoscute au fost scoase, iar altele au fost proaspat introduse. In acest tutorial mi-am propus sa prezint schimbarile ce fac din HTML5 un "limbaj cu o mai mare putere de exprimare".

Incepem cu inceputul. Doctype-ul sau Document Type Declaration nu mai este atat de complicat si greu de retinut, cum a fost in versiunile anterioare de HTML sau XHTML, ci pur si simplu:

<!DOCTYPE HTML>

Aceasta 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.

Sectiunea <head> este rezervata titlului paginii, informatiilor meta, javascripturilor si css-urilor. De 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-9" />
</head>

Sectiunea <body> ramane in continuare principala sectiune a paginii html.

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta charset="UTF-9" />
    </head>
    <body>
        <!-- continut -->
    </body>
</html>

Noile elemente in HTML5

Cele mai cunoscute noutati aduse de HTML5 sunt elementele de continut header, article si footer, ce compun tagurile cu aceleasi nume. Omoloagele lor media: audio, canvas, figure si video ne scapa in sfarsit de scripturile de embed (in cazul fisierelor video/audio) si ne aduc functionalitati noi precum "desenarea" direct in pagina (cum este cazul canvas-ului).

Mai jos am alcatuit o lista detaliata a acestor elemente:

<article> - container de continut de sine-statator;
<aside> - defineste continutul relationat de article, dar independent de acesta;
<audio> - container pentru continut audit;
<canvas> - container pentru dezvoltare grafica;
<command> - defineste o comanda, tasta (combinatie de taste), radio button etc;
<datalist> - defineste o lista de optiuni predefinite pentru elementul de tip input;
<details> - defineste detaliile unui element;
<embed> - container pentru aplicatii externe sau continut interactiv;
<figcaption> - defineste titlul sau legenda elementului figure;
<figure> - container pentru continut media (in mare parte imagini);
<footer> - container pentru footer-ul unei pagini sau al unei sectiuni;
<header> - container pentru header-ul unei pagini sau al unei sectiuni;
<hgroup> - grupeaza elementele de tip heading;
<keygen> - defineste un generator de perechi de key pentru formulare;
<mark> - defineste texte sau portiuni de text marcate, evidentiate;
<meter> - defineste un indicator pentru masurari scalare in cadrul unui interval sau pentru valori fractionale;
<nav> - container pentru sectiunea de navigare a paginii;
<output> - defineste rezultatul unei operatii sau calcul, precum rezultatul unui script;
<progress> - defineste evolutia unui proces;
<rp> - defineste ce afiseaza browserul atunci cand nu suporta adnotari Ruby;
<rt> - defineste componenta de text Ruby din cadrul unei adnotari;
<ruby> - defineste o adnotare Ruby;
<section> - defineste o sectiune in cadrul paginii;
<source> - specifica resursele pentru elementele media;
<summary> - defineste un header vizibil pentru informatiile din elementul details;
<time> - container pentru data/timp;
<video> - container pentru continut video;
<wbr> - specifica locul optim intr-un text sau cuvant mai lung in care browserul poate introduce rand nou sau cratima.

O buna parte din elementele de mai sus au proprietatea ca se pot folosi impreuna cu CSS3 si Javascript, ba chiar numai impreuna cu acestea pot duce la rezultate uimitoare.

Spuneam la inceput ca anumite elemente au fost scoase, cu precadere cele ce tineau mai mult de aspect si nu de continut. Acestea se regasesc in lista de mai jos:

<acronym> - inlocuit de<abbr>
<applet> - inlocuit de <object>
<basefont>            
<bgsound> - inlocuit de <audio>
<big>
<blink>
<center>
<dir> - inlocuit de <ul>
<font>
<frame>
<frameset>
<isindex> - inlocuit de <form>
<marquee>
<multicol>
<nobr>
<noframes>
<noscript>
<s>
<spacer>
<strike>
<tt>
<u>

Bun, am vazut ce a intrat, am vazut ce a iesit. Acum 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. Asta cu toate ca, cel mai probabil, div-urile noastre au un id="header", id="footer" etc.

HTML5 vine si "face lumina" cu nou <nav>, <footer> sau <header>. Cand incepem si conectam parti si bucati diferite, intelesul semantic capata proportii, si vom vrea sa stim care este rezultatul. Pentru aceasta, un standard HTML este o modalitate mai mult buna de a determina sensul decat niste texte 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 extrem de usoara si reprezinta un mare avantaj. Dar 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. Ce inseamna asta?

Pai, 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. Vom 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 Google Maps.

Suna interesant nu? Acum sper ca v-am trezit "apetitul" pentru HTML5.

Pagina:
1
comenteaza printeaza

Cuvinte cheie:   Tutorial HTML5,   tag-uri,   html,   css,   web development,   script,  

Alte tutoriale HTML:
Noteaza acest tutorial
Rating tutorial
 
(3 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4330
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4195
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4180
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4015
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Swift 3D Python Powerpoint Vista AJAX Flash MySQL Photoshop Fotografie Verilog RoR COREL DRAW Dreamweaver Fireworks Java Sony Vegas SEO Gimp SWF Excel Bridge JSON CSS Ruby on Rails Javascript Lightroom StyleSheet Action Script XML PSD HTML XHTML Word Outlook Illustrator PHP
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software