Curs11 Iap

Curs HTML5
HTML (Hypertext Markup Language) este un limbaj folosit în

publicarea paginilor statice web dezvoltat de către W3C (World Wide Web
Consortium), o comunitate internațională de dezvoltatori condusă de
către Tim Berners-Lee și Jeffrey Jaffe. Misiunea W3C este să dezvolte la
potențial maxim standardul World Wide Web prin protocoale și asigurarea
creșterii pe termen lung a standardului Web. Rolul HTML este de a asigura
prezentarea uniformă a informațiilor.
Sintaxa HTML5 nu se mai bazează pe SGML (Standard Generalized
Markup Language - ISO 8878), în ciuda similitudinii marcării sale. Aceasta
a fost proiectată pentru a fi compatibilă cu parsingul comun din variantele
mai vechi de HTML, fiind dotată cu o nouă linie introductivă care arată ca
o declarație de tip document SGML, <!Doctype html>, declanșând astfel
modul de redare specificat în standard. Din 5 Ianuarie 2009, HTML5
include Web Forms 2.0, o specificație WHATWG (Web Hypertext
Application Technology Working Group), anterior utilizată separat.
HTML5 este doar o recomandare W3C și nu o variantă finală a acestui
limbaj, modificări importante putând fi aduse în viitorul apropiat.
WHATWG este o comunitate care asigură dezvoltarea standardului
Web focalizată pe îmbunătățirea standardelor HTML și APIs (Application
Programming Interface) necesare aplicațiilor web. Organizația WHATWG a
fost fondată de către dezvoltatori de la Apple, Fundația Mozilla și Opera
Software în 2004 în urma unui congres W3C, îngrijorați de lipsa de interes
pentru HTML și nerespectarea nevoilor creatorilor independenți de cod HTML.
Aceasta a fost de altfel și misiunea acestui grup.
HTML este scris sub formă de elemente numite etichete (tags) care
vin de cele mai multe ori în perechi (de deschidere / de închidere) dar nu
neapărat. În interiorul acestor elemente se introduc informațiile text sau chiar
alte elemente HTML. HTML este un cod care stă la baza paginilor web și poate
fi editat într-un program de tipul text editor fiind salvate ulterior cu extensia html
sau htm.
HTML DOM (Document Object Model) descrie obiecte și metode
specifice documentelor HTML oferind funcționalități de manipulare a
documentelor structurate ierarhic, a elementelor și atributelor HTML. El
expune un număr de metode și proprietăți convenabile care sunt în
concordanță cu modelele existente.
Structura unui astfel de fișier trebuie să fie de formă descrisă mai jos
unde:
- etichetele < html > delimitează conținutul HTML al paginii
1
- etichetele < head > marchează descrieri de tip < meta >, link-uri
către alte fișiere (scripturi, stiluri CSS etc) sau stiluri pentru formatarea textului
, title
- etichetele < body > vor conține etichetele HTML împreună cu
informațiile text pe care le conțin și care vor fi afișate în fereastră browser-ului
De precizat că prima linie a acestui fișier trebuie să conțină eticheta
<DOCTYPE> care descrie versiunea HTML folosită la crearea codului din
fișier. Această etichetă poate să aibă una din variantele de mai jos:
➢ HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
➢ HTML 4.01 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
➢ HTML 4.01 Frameset:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
➢ HTML 5:
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
<!— taguri din head -->
</head>
<body>
</body>
</html>
HTML5 este o continuare a standardului HTML care îmbunătățește

codul HTML oferind suport pentru cele mai noi aplicații multimedia și în
același timp menține modul simplu de înțelegere a codului de către
browser-ele de pe calculator și mobile. Acest standard încearcă să elimine
caracteristicile cu specificații diferite, caracteristicile diferite de software,
browsere și erorile de sintaxă în documentele web deja existente. Cu alte
cuvinte, se încearcă obținerea unui singur limbaj de marcare care poate fi scris
în oricare din limbajele HTML. HTML5 extinde, îmbunătățește și raționalizează
disponibilitățile documentelor web, aducând în plus marcaje și resurse APIs
pentru creare de aplicații web complexe.
2
HTML5 aduce caracteristici sintactice noi, elemente ca <video>,
<audio>, <header>, <canvas> și altele, dar și renunță la unele elemente
cum ar fi <object> care este prea generic. Acestea contribuie la simplificarea
includerii și manipulării conținutului multimedia sau grafic, fără a solicita plugin-
uri externe codului HTML.
În plus față de specificarea marcării, HTML5 specifică și scripting interfețe
de programare ale aplicațiilor (API-uri), care pot fi utilizate împreună cu
JavaScript. Interfețele existente ale modelului de obiecte document (DOM)
includ și caracteristici de facto, documentate.
APIs și HTML DOM sunt părți esențiale în codul HTML5. Exemple de
interfețe DOM pentru HTML5 extinse cu noi APIs, sunt:
- Canvas – pentru modul direct de proiectare 2D (vezi Specification
1.0);
- Timed media playback - Redare media cronometrată;
- Offline storage database – pentru aplicații web offline;
- Editarea de documente;
- Funcționalitatea Drag-and-drop;
- Mesageria Cross-Document;
- Managementul istoric al browser-ului;
- MIME type=”” (Multipurpose Internet Mail Extensions) – înregistrare
manipulant de protocol și tip MIME;
- Microdate;
- Stocare web - un cadru de stocare pentru perechi de valori-cheie care
oferă un comportament similar cookie-urilor, dar cu o capacitate de
stocare mai mare și API mai bună.
Observație:
Nu toate tehnologiile de mai sus sunt incluse în specificația W3C HTML5,
deși ele există în specificația HTML5 WHATWG. Unele tehnologii conexe, care
nu fac parte nici din W3C HTML5, nici din specificația HTML5 WHATWG, sunt
prezentate ca specificații separate, de către W3C, după cum urmează:
- Geolocation – identificarea locației geografice a unui obiect;
- Web SQL Database – bază de date locală a browser-ului;
- Indexed Database API – o stocare de valori-cheie indexate ierarhic;
- HTML5 API File – folosit la încărcarea/manipularea fișierelor;
- Directories and System – API utilizat pentru stocare date client;
- File Writer – API pentru scrierea de fișiere în aplicații web;
- Web Audio API – API JavaScript de înalt nivel pentru prelucrarea și
sintetizarea sunetelor în aplicații web;
- ClassList API.
3
Schimbările apărute în HTML5 și-au făcut deja simțită prezența în
randare pentru majoritatea browser-elor. Cu mici excepții, HTML5 poate fi
folosit la o anumită capacitate în toate browser-ele moderne.
Structura unei pagini HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section> ... </section>
</article>
<aside> ... </aside>
<footer> ... </footer>
</body> </html>
Semantica HTML5
HTML5 are o sintaxă derivată din HTML, compatibilă cu HTML4 și

XHTML. Nu are aceeași sintaxă, deoarece elimină regulile stricte din XHTML
ca etichetele să fie scrise cu litere mari, atributele să aibă valori sau necesitatea
utilizării etichetelor de închidere.
HTML5 oferă o flexibilitate mai mare, fiind un limbaj mult simplificat.
Scopul noii sintaxe este de a genera un cod cât mai scurt prin eliminarea
părților de cod care nu pot influența rezultatul paginii HTML.
Modificările în sintaxa HTML5 apar încă de la prima declarație din
pagină, cea a tipului de document la care nu mai este necesară trimiterea
la o referință DTD (Document Type Definition). Astfel, declararea tipului de
document se face mult mai simplu și fără a trebui să fie scrisă cu caractere
mari. Mai jos este o comparație a declarării tipului de document
comparativ HTML4 / HTML5.
<!— HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!— HTML5 -->
<!DOCTYPE html>
4
În eticheta <head>, declararea datelor <meta> s-a schimbat semnificativ.
Declararea setului de caractere este și ea modificată. Mai jos este prezentată
o comparație a declarării setului de caractere, comparativ HTML4 / HTML5.
<!— HTML4 – Char Set -->

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!— HTML5 – Char Set -->
<meta charset="UTF-8">
Elementul <script> din <head> este modificat, HTML5 renunțând la

informațiile extra. În caseta următoare este prezentată o comparație a
declarării elementului <script>, comparativ HTML4 / HTML5.
<!— HTML4 – Script -->
<script type="text/JavaScript" src="scriptfile.js"></script>
<!— HTML5 – Script -->
<script src="scriptfile.js"></script>
Declararea fișierelor externe de stil (elementul <link>) este și ea

modificată, analog elementului <script> cu mențiunea că nu există eticheta de
închidere și adăugarea atributului “rel” cu valoarea ”stylesheet”. Mai jos este o
comparație a declarării elementului <link>, comparativ HTML4 / HTML5.
<!— HTML4 – Link -->
<link rel="stylesheet" type="text/css" href="stylefile.css">
<!— HTML5 – Link -->
<link rel="stylesheet" href="stylefile.css">
Elementele HTML5 sunt folosite între etichetele de deschidere și

închidere ale elementului respectiv. Aceste etichete pot fi scrise cu caractere
mici sau mari, însă pot fi scrise și ca o combinație de litere mici și mari. Există
însă convenția ca etichetele să fie scrise cu litere mici. Cu toate că cea mai
mare parte a elementelor sunt conținute între eticheta de deschidere și cea de
închidere, există totuși și excepții: eticheta br, hr, link, meta și altele.
Elementele din HTML5, ca și în HTML4, pot conține atribute pentru
setarea mai multor proprietăți. Unele atribute sunt definite global, iar altele sunt
definite doar pentru un anumit element. Toate atributele sunt perechi de date
care definesc numele atributului și valoarea pe care acesta o conține. Mai jos
este un exemplu în care unui element <div> i se atașează un atribut “class” cu
valoarea ”header”.
<div class="header">...</div>
5
Față de HTML4, varianta HTML5 a adăugat elemente noi și le-a scos pe
cele ”depreciate”. Ca exemple de elemente la care s-a renunțat, putem
enumera:
- <applet> - specifică un applet
- <acronym> - specifică un acronim
- <basefont> - specifică un font de bază
- <center> - centrează un text
- <dir> - specifică o listă de directoare
- <big> - specifică un text mare
- <tt> - specifică un text teletype
- <font> - specifică mărimea și culoarea unui text
- <frame> - specifică o fereastră
- <frameset> - specifică un set de ferestre
- <noframes> - specifică o secțiune fără ferestre
- <u> - specifică un text subliniat
- <strike><s> - specifică un text tăiat
- <plaintext> - transformă documentul în text simplu
Totodată, HTML5 a introdus și elemente noi, cum ar fi:
- <article> - specifică o bucată de conținut independent de document;
- <aside> - specifică o bucată de conținut asemănătoare cu restul
conținutului;
- <audio> - specifică un fișier audio;
- <canvas> - randează dinamic imagini, diagrame sau jocuri;
- <command> - specifică o comandă pe care un utilizator o poate
invoca;
- <datalist> - specifică o listă creată dinamic;
- <details> - specifică informații adiționale pe care un utilizator le poate
obține;
- <embed src=”img/a.swf”> - specifică conținut extern;
- <footer> - specifică o secțiune din document unde se trec de obicei
date despre autor;
- <header> - specifică o secțiune unde se trece de obicei un menu;
- <nav> - specifică o secțiune destinată navigației;
- <section> - specifică un document generic;
- <time> - specifică o dată sau o oră;
- <video> - specifică un fișier video.
Cele mai utilizate atribute, suportate de cele mai multe elemente HTML5,
sunt următoarele:
6
- accesskey – specifică o combinație de taste utilizată pentru
accesarea elementului respectiv;
- align – aliniază elementul orizontal (stânga, centru, dreapta);
- background – plasează o imagine sub element;
- bgcolor – setează o culoare de fundal sub element (valoare
numerică, RGB sau hexazecimal);
- contenteditable – specifică dacă utilizatorul poate edita sau nu
conținutul elementului;
- data-XXXX – crează atribute personalizate de către autor;
- draggable - specifică dacă utilizatorul poate muta sau nu un
elementul în pagină;
- spellcheck – specifică dacă un element trebuie sau nu verificat
(ortografic sau gramatical);
- tabindex – specifică ordinea tab-urilor.
În vederea creării structurii unui document HTML5 pot fi utilizate
următoarele elemente:
- <section> - reprezintă un document generic care împreună cu
elementele de scriere <h1>,<h2>,<h3>,<h4>,<h5> și <h6> indică
structura textului afișat în browser;
- <article> - specifică o parte de conținut, independent de document;
- < aside> - specifică o bucată de conținut asemănătoare cu restul
conținutului;
- <header> - specifică o secțiune unde se trece de obicei un menu;
- < footer> - specifică o secțiune din document unde se trec de obicei
date despre autor sau drepturi de autor;
- < nav> - specifică o secțiune destinată navigației;
- < dialog> - specifică marcarea unei conversații;
- < figure> - specifică un titlu și o parte a conținutului preluat extern
paginii (imagine, audio, video etc.).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
7
<section> ... </section>
</article>
<aside> ... </aside>
<footer> ... </footer>
</body> </html>
Elemente de stocare pe web
HTML5 îmbunătățește semnificativ sistemul HTML4 de stocare locală a

datelor. Modalitatea clasică de stocare a unor date necesare rulării aplicațiilor
web sub forma dorită de dezvoltator este cea realizată prin intermediul așa
numitelor ”cookie-uri”. Un cookie reprezintă un conținut relativ mic de
informație, trimisă de website către browser și salvată local. De fiecare dată
când pagina se încarcă, browser-ul trimite informația către server, care decide
dacă o modifică sau nu, apoi o retrimite către browser. Cookie-urile sunt create
pentru a reține informații despre activitatea utilizatorului, informații necesare
aplicației server pentru afișarea în browser a datelor noi, solicitate conform
navigării. Cookie-urile sunt perechi de informații (nume și valoare), iar pagina
web poate accesa doar datele salvate de acestea. Dezavantajele acestui
proces sunt cantitatea mică de informație care se poate salva (4kb) și
reducerea performanței aplicației web prin trimiterea repetată a acestor
date către server.
Dar toate acestea se schimbă cu noul model HTML5 în care cookie-ul
este înlocuit cu așa numitul ”web storage”, o bază de date locală în care
informațiile sunt salvate ca text sub formă de perechi cheie / valoare.
Dimensiunea acestei baze de date este de maxim 10MB (mult mai mare decât
cea suportată de cookie) și accesul la ea se face la cerere, informația nefiind
trimisă către server la fiecare accesare a paginii web. Procesul de preluare și
modificare a informației web storage se face printr-un API în cadrul unui script
conținut în pagina HTML.
În acest moment toate browser-ele moderne suportă această
tehnologie, excepție făcând IE7 și versiunile mai vechi de IE7.
Observație:
Web storage poate salva date local (”local storage” - fără a avea
dată de expirare cum se întâmplă la cookie, fiind accesibile chiar dacă
browserul se redeschide) sau poate salva date despre sesiune (”session
storage”). Datele privitoare la sesiune sunt șterse când browser-ul se
închide.
8
HTML5 Web Storage asigură două noi obiecte (JavaScript) pentru a putea
salva sau prelua datele dorite:
- window.localStorage accesează datele salvate local
- code.sessionStorage accesează datele privitoare la sesiune
Pentru simplitatea exemplului acest nume se setează direct din codul
JavaScript, însă evident se poate prelua numele de la utilizator printr-un
formular html.
Elemente de versiune web offline
O aplicație web care să ruleze offline (fără conexiune la internet) pare

imposibil de realizat, însă cu HTML5 un dezvoltator poate să facă acest lucru
realizabil (nu 100%). Ideea din spatele acestei tehnologii este să permită
utilizatorului accesarea resurselor care nu au nevoie de conexiune la internet,
fișiere statice ca pagini html, imagini, fișiere.css, scripturi JavaScript,
fișiere media și altele. Acest lucru este posibil prin conceptul de depozitare
(”caching”).
Caching în HTML rezidă din fișiere pe care dezvoltatorul are posibilitatea
să le specifice că fiind fișiere ce trebuiesc salvate local în browser. Un beneficiu
este îmbunătățirea vitezei cu care pagina este servită browser-ului, cele mai
multe fișiere fiind locale, deci nu necesită descărcarea de pe server. Pe de altă
parte, aplicația poate să ruleze local în situația în care server-ul este
nefuncțional.
Întregul proces de caching offline rezidă într-un fișier numit ”manifest”.
Acesta conține o listă de fișiere pe care browser-ul trebuie să le descarce la
prima accesare a aplicației web. Desigur, acest fișier are o sintaxă și un set de
reguli clare:
- fișierul trebuie declarat în codul html;
- tipul MIME (Multipurpose Internet Mail Extensions) trebuie declarat
ca "text/cache-manifest";
- pe prima linie trebuie trecut "CACHE MANIFEST";
- liniile cu comentarii trebuiesc prefixate cu caracterul # (diez);
Fișierul manifest are trei secțiuni:
- cache – dezvoltatorul menționează o listă cu link-urile relative ale
fișierelor ce trebuiesc salvate local;
- network (opțional) - dezvoltatorul menționează o listă cu link-urile
relative ale fișierelor ce trebuiesc accesate de pe server;
- fallback (opțional) – dezvoltatorul specifică resurse alternative locale
pentru accesul la fișiere ce trebuiesc accesate online în cazul în care
conexiunea la server nu e posibilă.
Declararea acestui fișier în codul html se face în cadrul etichetei <html>.
9
<html manifest="appcache">
Fișierele salvate local vor fi descărcate numai în cazul în care fișierul

manifest a fost modificat sau datele cache ale browser-ului au fost șterse.
Să presupunem că o aplicație web care afișează ora curentă este
formată din trei fișiere: fișierul oră.html, un fișier oră.css și unul oră.js și dorim
să-l facem disponibil și în lipsa conexiunii la internet. În acest caz, fișierul
manifest poate să arate ca mai jos:
CACHE MANIFEST
ora.html
ora.css
ora.js
Fișierul ora.html trebuie să conțină declararea fișierului manifest, ca mai

jos:

<!DOCTYPE HTML>
<html manifest="appcache">
<head>
<title>Ora</title>
<script src="ora.js"></script>
<link rel="stylesheet" href="ora.css">
</head>
<body>
<p>Data este: <output id="data"></output></p>
</body>
</html>
Cu ajutorul fișierului ora.js care afișează data preluând data curentă prin
intermediul obiectului Date() și a fișierului .css, aplicația web este disponibilă și
offline, după prima accesare online a fișierului .html.
/* ora.js */
setInterval(function () {
document.getElementById('data').value = new Date();
}, 1000);
/* ora.css */
output { font: 2em sans-serif; }
10
Elemente specifice canvas
HTML5 introduce un nou element, de data asta pentru grafică, direct în

pagina web. Elementul <canvas> este un container utilizat pentru a desena
forme, de obicei cu ajutorul unui script (cum ar fi JavaScript). <canvas>
specifică o zonă dreptunghiulară a paginii .html, căreia îi trebuiesc specificate
dimensiunile (lungime și lățime) și eventual un atribut ”id” pentru a putea face
referire la un element din script. Astfel, cea mai simplă formă a elementului
canvas este:
<canvas id="myCanvas" width="200" height="100"></canvas>
<canvas> acceptă atributul ”style” cu care se poate stiliza elementul, prin

intermediul etichetelor CSS. Mai mult, prin intermediul elementelor JavaScript,
se poate stiliza elementul în mod programatic. Mai jos este un exemplu prin
care programatic se poate desena un dreptunghi colorat în interiorul
elementului HTML <canvas>.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#AA0000;">
Browser-ul nu suporrta HTML5
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#AA0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
Cu ajutorul JavaScript se pot trasa în <canvas> cercuri, gradiente, se

poate scrie text, se pot include imagini și chiar grafică 3D/
Elemente de SVG
SVG (Scalable Vector Graphics) definește o grafică vectorială pentru

paginile web. O astfel de grafică poate fi mărită sau micșorată fără a pierde din
calitate (toată grafica este realizată cu ajutorul modelelor matematice). O
11
particularitate importantă e acestui element este că suportă și animația.
Avantajele folosirii imaginii SVG sunt:
- Imaginile pot fi create și editate cu orice editor text;
- Imaginile pot fi indexate în motoarele de căutare;
- Imaginile pot fi scalabile sau comprimate;
- Imaginile pot fi printate la orice rezoluție fără să se piardă din
calitate.
Cel mai simplu element <svg> este prezentat mai jos:
<svg width="300" height="200"> </svg>
SVG este un limbaj pentru descrierea graficii 2D cu ajutoul XML. Asta

înseamnă că fiecare element pe care îl conține poate fi accesat printr-un
eveniment JavaScript. Mai mult, fiecare formă desenată este reținută în
memorie ca un obiect, astfel încât browser-ul redesenează automat forma dacă
un atribut al ei este modificat.
Prin SVG se pot desena obiecte simple precum un cerc, un dreptunghi,
o elipsă, un poligon, dar și texte și căi pe care se pot desena alte forme. Ele
pot fi stilizate cu ajutorul CSS, dar se pot aplica și filtre sau gradiente de
imagine pe formele deja create.
Aplicație: să se creeze folosind SVG un dreptunghi/pătrat la care să se
atașeze o umbră.
<!DOCTYPE html>
<html>
<body>
<svg height="120" width="100">
<defs>
<filter id="filter11" x="0" y="0">
<feGaussianBlur stdDeviation="35" />
<feOffset dx="15" dy="5" />
</filter>
</defs>
<rect width="90" height="90" fill="red" filter="url(#filter11)" />
<rect width="90" height="90" fill="yellow" />
Browser-ul nu suporta HTML5
</svg>
</body>
</html>
12
Elemente de Drag & Drop
HTML5 are o nouă tehnologie care permite ”apucarea” unui element din
pagină și mutarea lui într-o altă locație din pagină, așa numitul ”drag and drop”.
Cele două condiții care trebuiesc îndeplinite pentru ca un element să fie mutat,
sunt ca atributele ”draggable” și ”ondragover” să fie declarate ”true”.
Elemente video si audio
Observație: înainte de standardul HTML5 nu exista posibilitatea

vizualizării fișierelor video / ascultării fișierelor audio, fără alte plug-in-uri
(programe externe paginii). Începând însă cu HTML5, au fost introduse
elementele <video> pentru vizualizarea de fișiere video și <audio> pentru
ascultarea fișierelor audio.
Elementul video specifică una sau mai multe surse de fișiere video
recunoscute de un anumit browser. Dacă două sau mai multe surse sunt
recunoscute de browser, vizualizarea fișierului video se va efectua de la prima
sursă.
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Mesaj
</video>
</body>
</html>
Exemplu pentru audio:
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Mesaj
</audio>
Diferite browsere suportă unul sau mai multe tipuri de fișiere video
recunoscute de către elementul <video> (m4, webm sau ogg). Pentru fișierele
audio, tipurile recunoscute de elementul <audio> sunt mp3, wav sau ogg.
13
Totodată, elementul <video> sau <audio> suportă interacțiunea cu script
JavaScript pentru controlul vizualizării sau dimensiunii elementului (exemplu
pentru redare video):
Taguri noi ce apar în cadrul formularelor

<form>
HTML5 păstrează tag-ul <form> din HTML însă îl îmbunătățește cu două

atribute speciale: ”autocomplete” și ”novalidate”.
Se folosește atributul ”autocomplete” dacă formularul sau căsuța de
introducere text din formular poate fi completat(ă) sau nu cu valori introduse
înainte de către utilizator. Desigur, opțiunea de auto completare trebuie activată
în browser. Mai jos este cazul unui formular standard în care se permite auto
completarea câmpurilor, cu excepția câmpului de email.
<!DOCTYPE html>
<html>
<body>
<form action="form.html" autocomplete="on">
Nume:<input type="text" name="nume"><br>
Prenume: <input type="text" name="prenume"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
</body>
</html>
Atributului “novalidate” i se atribuie doar o valoare booleană care

specifică dacă formularul (datele introduse) trebuie validat sau nu la apăsarea
butonului “submit”.
<input type=”submit” value”trimite” />
<input type=”reset” value=”sterge” /> ???
Exemplu:
<form action="form.html" novalidate>
E-mail: <input type="email" name="email">
</form>
Un alt tag nou este <datalist> care specifică o listă predefinită de opțiuni
la un element <input>. Elementul <datalist> afișează o listă cu auto completare
14
astfel încât utilizatorul o să vadă în pagină (o listă derulantă de opțiuni în
câmpul de introducere a datelor).
Exemplu:
<form action="demo_form.asp" method="get">

<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Tagul <keygen> asigură o modalitate securizată de autentificare. Acest

element folosește o pereche de chei în formular. La apăsarea butonului de
autentificare se generează două chei, una privată și una publică. Cea privată
este salvată local în browser și cea publică este trimisă la server. Cheia publică
este folosită pentru generarea unui certificat de autentificare care urmează să
valideze utilizatorul în viitor.
<!DOCTYPE html>
<html>
<body>
<form action="keygen.html" method="get">
Nume: <input type="text" name="nume">
Criptare: <keygen name="security">
</form>
</body>
</html>
15
Tagul <output> afișează rezultatul unui calcul specificat în atributul
oninput.
<!DOCTYPE html>
<html>
<body>
<form oninput="x.value=parseInt(a.value)*parseInt(b.value)"> 0
<input type="range" id="a" value="100" min="1" max="1000">1000 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
</body>
</html>
16

Curs11 Iap

Încărcat de

Informații document

Titlu original

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

Curs11 Iap

Încărcat de

Drepturi de autor:

Formate disponibile

Curs HTML5

HTML (Hypertext Markup Language) este un limbaj folosit în

HTML5 este o continuare a standardului HTML care îmbunătățește

HTML5 are o sintaxă derivată din HTML, compatibilă cu HTML4 și

<!— HTML4 – Char Set -->

Elementul <script> din <head> este modificat, HTML5 renunțând la

Declararea fișierelor externe de stil (elementul <link>) este și ea

Elementele HTML5 sunt folosite între etichetele de deschidere și

Elemente de stocare pe web

HTML5 îmbunătățește semnificativ sistemul HTML4 de stocare locală a

O aplicație web care să ruleze offline (fără conexiune la internet) pare

Fișierele salvate local vor fi descărcate numai în cazul în care fișierul

Fișierul ora.html trebuie să conțină declararea fișierului manifest, ca mai

HTML5 introduce un nou element, de data asta pentru grafică, direct în

<canvas> acceptă atributul ”style” cu care se poate stiliza elementul, prin

Cu ajutorul JavaScript se pot trasa în <canvas> cercuri, gradiente, se

SVG (Scalable Vector Graphics) definește o grafică vectorială pentru

SVG este un limbaj pentru descrierea graficii 2D cu ajutoul XML. Asta

Elemente video si audio

Observație: înainte de standardul HTML5 nu exista posibilitatea

Taguri noi ce apar în cadrul formularelor

HTML5 păstrează tag-ul <form> din HTML însă îl îmbunătățește cu două

Atributului “novalidate” i se atribuie doar o valoare booleană care

<form action="demo_form.asp" method="get">

Tagul <keygen> asigură o modalitate securizată de autentificare. Acest

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