Va rugam dezactivati programul ad block pentru a vizualiza pagina!

Limbajul HTML

icon

Introducere în HTML

HTML este limbajul marcant standard pentru crearea de pagini Web.
HTML reprezintă un început pentru realizarea site-urilor profesionale.
Declarația <! DOCTYPE html> definește acest document ca fiind HTML5.
Elementul <html> este elementul rădăcină al unei pagini HTML.
Elementul <head> conține meta informații despre document.
Elementul <titlu> specifică un titlu pentru document.
Elementul <body> conține conținutul paginii vizibile.
Elementul <h1> definește o rubrică mare.
Elementul <p> definește un alineat.

Editoare HTML

Paginile web pot fi create și modificate folosind editori HTML profesionali.

Elemente de bază HTML

Toate documentele HTML trebuie să înceapă cu o declarație de tip document: <! DOCTYPE html>.
Tag-urile utilizate sunt: <html> și </html>, <body> și </body>, <h1> la <h6>, 
<p> și </p>, <a> și </a>, <img>, <ul> și </ul>, <button> și </button>
 

Elemente HTML

Un element HTML constă, de obicei, dintr-o etichetă de început și o etichetă finală, cu conținutul introdus între ele.
Etichetele folosite sunt: <html> și </html>,<body> și </body> <p> și </p>, <h> și </h>, <br>, <br />.
 

Atribute HTML

Atributele oferă informații suplimentare despre elementele HTML.
Adresa de legătură este specificată în atributul href.
Numele de fișier al sursei imaginii este specificat în atributul src.
Atributele width și height, care specifică lățimea și înălțimea imaginii.
Atributul alt specifică un text alternativ care trebuie utilizat, dacă nu poate fi afișată o imagine.
Atributul style este utilizat pentru a specifica stilul unui element.
Limbajul este declarat cu atributul lang.
Atributul title este adaugat la elementul <p>.

Titluri HTML

Titlurile (headings) sunt definite cu etichete de la <h1> la <h6>.
Fiecare titlu (heading) HTML are o dimensiune implicită. Cu toate acestea, puteți specifica dimensiunea pentru orice titlu (heading) cu atributul style, folosind proprietatea CSS font-size.
Eticheta <hr> definește o pauză tematică într-o pagină HTML.
Elementul HTML <head> este un container pentru metadate.
Metadatele HTML sunt date despre documentul HTML.
Elementul <head> este plasat între eticheta <html> și eticheta <body>.
Vizualizarea codului sursă HTML se face cu View Page Source.
Inspectarea unui element HTML se face cu Inspect Element.

Paragrafe HTML

Elementul HTML <p> definește un alineat.
Elementul HTML <br> definește o pauză de linie (Line Break).
Folosiți <br> dacă doriți o pauză de linie (o linie nouă) fără a începe un nou paragraf.
Eticheta <br> este o etichetă goală, ceea ce înseamnă că nu are o etichetă finală.
Elementul HTML <pre> definește textul preformatat.

Stiluri HTML

Setarea stilului unui element HTML, se poate face cu atributul style.
Proprietatea CSS background-color definește culoarea de fundal pentru un element
HTML.
Proprietatea CSS color definește culoarea textului pentru un element HTML.
Proprietatea CSS font-family definește fontul care va fi folosit pentru un element HTML.
Proprietatea CSS font-size  definește dimensiunea textului pentru un element HTML.
Proprietatea CSS text-align definește alinierea textului orizontal pentru un element HTML.

Formatare text în HTML

Elementele de formatare au fost proiectate pentru a afișa tipuri speciale de text.
<b> definește textul bold, fără nici o importanță suplimentară.
<strong> definește un text intens, cu o importanță „puternică” semantică adăugată.
<i> definește textul italic, fără nicio importanță suplimentară.
<em> definește textul subliniat, cu o importanță semantică adăugată.
<small> definește textul mai mic.
<mark> definește textul marcat / evidențiat.
<del> definește textul șters / eliminat.
<ins> definește textul inserat / adăugat.
<sub> definește textul subscris.
<sup> definește textul suprascriptat.

Elemente de citare și citate în HTML

Elementele de citare folosite în HTML sunt:
<q> definește un citat scurt.
<blockquote> definește o secțiune care este citată dintr-o altă sursă.
<abbr> definește o prescurtare sau un acronim.
<address> definește informațiile de contact (autor / proprietar) ale unui document sau ale unui articol.
<cite> definește titlul unei lucrări.
<bdo> definește înlocuirea bidirecțională.

Comentarii în codul HTML

Etichetele de comentarii sunt utilizate pentru a insera comentarii în codul sursă HTML.
Comentariile nu sunt afișate de browser, dar vă pot ajuta să vă documentați codul sursă HTML.Cu ajutorul comentariilor puteți plasa notificări și memento-uri în HTML.
Comentariile sunt de asemenea foarte bune pentru depanarea HTML, deoarece puteți comenta câteodată liniile de cod HTML pentru a căuta erori:

Culori în HTML

Culorile în codul HTML sunt specificate folosind nume de culori predefinite sau valorile: RGB, HEX, HSL, RGBA, HSLA.
În HTML, o culoare poate fi specificată folosind un nume de culoare.
Puteți seta culoarea de fundal (Background Color) pentru elementele HTML folosind background-color.
Puteți seta culoarea textului folosind color.
Puteți seta culoarea marginilor folosind border.
Saturația poate fi descrisă ca intensitatea unei culori.
Luminozitatea unei culori poate fi descrisă cam cât de multă lumină doriți să dați culorii.
Valorile de culoare RGBA sunt o extensie a valorilor de culoare RGB cu un canal alfa - care specifică opacitatea unei culori.
Valorile de culoare HSLA sunt o extensie a valorilor de culoare HSL cu un canal alfa - care specifică opacitatea unei culori.

Stiluri CSS în HTML

Modelarea HTML cu CSS.
CSS descrie modul în care elementele HTML trebuie să fie afișate pe ecran, pe hârtie sau în alte suporturi. Poate controla aspectul mai multor pagini web simultan.
Utilizați atributul HTML style pentru stilul CSS în linie (inline).
Utilizați elementul HTML <style> pentru a defini stilul CSS intern.
Utilizați elementul HTML <link> pentru a vă referi la un fișier CSS extern.
Utilizați elementul HTML <head> pentru a stoca elementele <style> și <link>.
Utilizați proprietatea CSS color pentru culorile de text.
Utilizați proprietatea CSS font-family pentru fonturile text.
Utilizați proprietatea CSS font-size pentru dimensiunile textului.
Utilizați proprietatea CSS border pentru margini.
Utilizați proprietatea CSS padding pentru spațiu în interiorul border.
Utilizați proprietatea CSS margin pentru spațiu în afara border.
Pentru a defini un stil specific pentru un element special, adăugați un atribut id elementului:
Pentru a defini un stil pentru tipuri speciale de elemente, adăugați un atribut de clasă elementului:
Foile de stil externe (external style sheets ) pot fi trimise cu o adresă URL completă sau cu o cale relativă la pagina web curentă.

Linkuri HTML

Linkurile se găsesc în aproape toate paginile web. Link-urile permit utilizatorilor să facă click pe drumul lor de la pagină la pagină.
Link-urile HTML sunt hyperlink-uri.
Utilizați elementul <a> pentru a defini un link.
Utilizați atributul href pentru a defini adresa link-ului.
Utilizați atributul țintă (target) pentru a defini unde să deschideți documentul legat.
Utilizați elementul <img> (în interiorul <a>) pentru a utiliza o imagine ca link.
Utilizați atributul id (id = "valoare") pentru a defini marcajele (bookmarks) dintr-o pagină
Atributul title specifică informații suplimentare despre un element.
Utilizați atributul href (href = "# valoare") pentru a face legătura cu marcajul (bookmark).
Marcajele HTML (bookmarks) sunt utilizate pentru a permite cititorilor să sară la anumite părți ale unei pagini Web.
Paginile externe pot fi referite cu o adresă URL completă sau cu o cale relativă la pagina web curentă.

Imagini în HTML

Imaginile pot îmbunătăți designul și aspectul unei pagini web.
Utilizați elementul HTML <img> pentru a defini o imagine.
Utilizați atributul HTML src pentru a defini adresa URL a imaginii.
Utilizați atributul HTML alt pentru a defini un text alternativ pentru o imagine, dacă nu poate fi afișat.
Utilizați atributele HTML lățime și înălțime (width and height) pentru a defini dimensiunea imaginii.
Utilizați proprietățile CSS pentru lățime și înălțime (width and height) pentru a defini dimensiunea imaginii (alternativ).
Utilizați proprietatea CSS float pentru a lăsa imaginea să plutească.
Utilizați elementul HTML <map> pentru a defini o imagine-hartă (image-map).
Utilizați elementul HTML <area> pentru a defini zonele în care se poate face click pe imaginea hartă (image-map).
Utilizați atributul usemap al elementului HTML <img> pentru a indica o hartă-imagine(image-map).
Utilizați elementul HTML <picture> pentru a afișa imagini diferite pentru diferite dispozitive.

Imagini hărți în HTML

Cu hărți de imagine (Image Maps), puteți adăuga zone pe care se poate face click pe o imagine.
Eticheta <map> definește o imagine-hartă
Imaginea este introdusă folosind eticheta <img>.Singura diferență față de alte imagini este că trebuie să adăugați un atribut usemap.
Elementul <map> este utilizat pentru a crea o hartă a imaginii și este legat de imagine prin utilizarea atributului nume.
O zonă pe care se poate face click este definită folosind un element <area>.
 

Imagini de fundal în HTML

O imagine de fundal poate fi specificată pe aproape orice element HTML.
Pentru a adăuga o imagine de fundal în HTML, folosiți imaginea de fundal (background-image) a proprietății CSS.
Pentru a adăuga o imagine de fundal (background-image) la un element HTML, puteți utiliza atributul style.
Dacă doriți ca întreaga pagină să aibă o imagine de fundal (background-image), atunci trebuie să specificați imaginea de fundal (background-image) în elementul <body>.
Dacă imaginea de fundal este mai mică decât elementul, imaginea se va repeta, orizontal și vertical, până când va ajunge la sfârșitul elementului.
Pentru a evita ca imaginea de fundal (background-image)să se repete, utilizați proprietatea background-repeat.
Dacă doriți ca imaginea de fundal să acopere întregul element, puteți seta proprietatea de fundal (background-size) pe care să o acopere.
De asemenea, pentru a vă asigura că întregul element este întotdeauna acoperit, setați proprietatea de atașare în fundal la fix (background-attachment).
Dacă doriți ca întinderea imaginii de fundal să se potrivească întregii imagini din element, puteți seta proprietatea de fundal (background-size) la 100% 100%:

Element de imagine în HTML

Elementul de imagine ne permite să afișăm imagini diferite pentru diferite dispozitive sau dimensiuni de ecran.
Elementul HTML <picture>.
Elementul <picture> conține o serie de elemente <source>.
Elementul <img> este folosit de browserele care nu acceptă elementul <picture> sau dacă niciuna dintre etichetele <source> nu se potrivește.
Există două scopuri principale pentru elementul <picture>: Lățime de bandă (Bandwidth), Formatați suportul (Format Support).

Tabele HTML

Utilizați elementul HTML <table> pentru a defini un tabel.
Utilizați elementul HTML <tr> pentru a defini un rând de tabel.
Utilizați elementul HTML <td> pentru a defini datele unui tabel.
Utilizați elementul HTML <th> pentru a defini un titlu de tabel.
Utilizați elementul HTML <caption> pentru a defini o legendă de tabel.
Utilizați proprietatea CSS border pentru a defini o bordură.
Utilizați proprietatea CSS border-collapse pentru a restrânge marginile celulelor.
Utilizați proprietatea CSS padding pentru a adăuga umplutură la celule.
Utilizați proprietatea CSS text-align pentru a alinia textul celulelor.
Utilizați proprietatea CSS border-spacing pentru a seta distanța dintre celule.
Utilizați atributul colspan pentru a crea o celulă cu mai multe coloane.
Utilizați atributul linespan pentru a face ca o celulă să aibă mai multe rânduri.
Utilizați atributul id pentru a defini în mod unic o tabelă.
<colgroup> Specifică un grup de una sau mai multe coloane dintr-un tabel pentru formatare.
<col> Specifică proprietățile coloanei pentru fiecare coloană dintr-un element <colgroup>.
<thead> Grupează conținutul antetului într-un tabel.
<tbody> Grupează conținutul corpului într-un tabel.
<tfoot> Grupează conținutul subsolului într-un tabel.

Liste HTML

Elementele din listă pot conține alte elemente HTML
Utilizați elementul HTML <ul> pentru a defini o listă neordonată.
Utilizați proprietatea CSS list-style-type pentru a defini marcajul elementelor de listă.
Utilizați elementul HTML <ol> pentru a defini o listă ordonată.
Utilizați atributul HTML type pentru a defini tipul de numerotare.
Utilizați elementul HTML <li> pentru a defini un element de listă.
Utilizați elementul HTML <dl> pentru a defini o listă de descrieri.
Utilizați elementul HTML <dt> pentru a defini termenul de descriere.
Utilizați elementul HTML <dd> pentru a descrie termenul dintr-o listă de descrieri.
Listele pot fi amplasate în liste.
Elementele din listă pot conține alte elemente HTML.
Utilizați proprietatea CSS float: left sau display:inline pentru a afișa o listă pe orizontală.
Proprietatea CSS list-style-type este utilizată pentru a defini stilul marcajului articolului de listă:
disc - Setează marcajul elementului listei la un buletin (implicit).
circle - Setează marcajul elementului de listă într-un cerc.
square - Setează marcajul elementului de listă într-un pătrat.
none -  Elementele din listă nu vor fi marcate.

Elementele HTML Block și Inline

Fiecare element HTML are o valoare de afișare implicită în funcție de tipul de element.Cele două valori afișate sunt: block și inlinie.
Un element la nivel de block (block-level element) pornește întotdeauna pe o linie nouă și ocupă toată lățimea disponibilă (se întinde spre stânga și spre dreapta, cât poate).
Elementul <div> este un element la nivel de block.
Un element inline nu pornește de pe o linie nouă ci ocupă doar lățimea necesară.
Acesta este un element inline <span> din interiorul unui paragraf.
Elementul <div> este adesea folosit ca și container pentru alte elemente HTML.
Elementul <div> nu are atribute necesare, dar stilul (style), clasa (class) și id-ul (id) sunt comune.
Când este utilizat împreună cu CSS, elementul <div> poate fi utilizat pentru a aplica stiluri blocurilor de conținut.
Elementul <span> este adesea folosit ca un container pentru un text.
Elementul <span> nu are atribute necesare, stilul (style), clasa (class) și id-ul (id) sunt comune.
Când este utilizat împreună cu CSS, elementul <span> poate fi utilizat pentru a aplica stiluri blocurilor de conținut.

Atributul HTML class

Atributul HTML class este folosit pentru a defini stiluri egale pentru elemente cu același nume de clasă.
Atributul HTML class poate fi folosit și pe elementele inline.
În CSS, pentru a selecta elemente cu o anumită clasă, scrieți un caracter (.), urmat de numele clasei.
Atributul class poate fi folosit pe orice element HTML.
Numele clasei este sensibil la litere mari și mici!
Elementele HTML pot avea mai mult de un nume de clasă, fiecare nume de clasă trebuie separat printr-un spațiu.
Etichetele diferite pot împărtăși aceeași clasă.
Etichetele diferite, cum ar fi <h2> și <p>, pot avea același nume de clasă și, prin urmare, au același stil.
Utilizarea atributului class în JavaScript.
JavaScript poate accesa elemente cu un nume de clasă specificat folosind metoda getElementsByClassName ().

Atributul HTML id

Atributul id specifică un id unic pentru un element HTML (valoarea trebuie să fie unică în documentul HTML).
Valoarea id poate fi folosită de CSS și JavaScript pentru a efectua anumite sarcini pentru elementul cu valoarea specifică de id.
În CSS, pentru a selecta un element cu un id specific, scrieți un caracter hash (#), urmat de id-ul elementului.
Valoarea id este sensibilă la litere mari și mici.
Atributul id poate fi utilizat pe orice element HTML.
Un element HTML poate avea un singur id unic care aparține acelui element singular, în timp ce un nume de clasă poate fi utilizat de mai multe elemente.
Marcajele (bookmarks) HTML sunt utilizate pentru a permite cititorilor să sară la anumite părți ale unei pagini Web.
Marcajele (bookmarks) pot fi utile dacă pagina dvs. web este foarte lungă.
Utilizarea atributului id în JavaScript.
JavaScript poate accesa un element cu un id specificat folosind metoda getElementById ().

HTML Iframes

Un iframe este utilizat pentru a afișa o pagină web în cadrul unei pagini web.
Un iframe HTML este definit cu eticheta <iframe>.
Atributul src specifică adresa URL (adresa web) a paginii inline frame.
Utilizați atributele height și width (înălțime și lățime) pentru a specifica dimensiunea iframei.
Sau puteți utiliza CSS pentru a seta height și width (înălțimea și lățimea) iframe-ului.
În mod implicit, un iframe are un chenar (border) în jurul său.
Pentru a elimina chenarul (border), adăugați atributul style și utilizați proprietatea CSS border.
Cu CSS, puteți modifica, de asemenea, dimensiunea, stilul și culoarea marginii iframe.
Un iframe poate fi folosit ca target frame pentru o legătură.
Atributul target al linkului trebuie să se refere la atributul name al iframe:
<iframe> Definește un cadru inline.

HTML JavaScript

JavaScript face ca paginile HTML să fie mai dinamice și mai interactive.
Eticheta <script> este utilizată pentru a defini un script din partea clientului (client-side script) (JavaScript).
Elementul <script> fie conține instrucțiuni script, fie indică prin atributul src un fișier script extern.
Pentru a selecta un element HTML, JavaScript utilizează cel mai adesea metoda document.getElementById ().
JavaScript poate schimba conținutul HTML.
JavaScript poate schimba stilurile HTML.
JavaScript poate schimba atributele HTML.
Eticheta <noscript> este utilizată pentru a furniza un conținut alternativ pentru utilizatorii care au scripturi dezactivate în browserul lor sau au un browser care nu acceptă scripturile din partea clientului.

Căi de fișiere în HTML

O cale de fișier descrie locația unui fișier în structura folderului unui site web.
Căile de fișiere sunt utilizate la conectarea la fișiere externe, cum ar fi: Pagini web, Imagini, Foi de stil, JavaScripts.
O cale absolută a fișierului este adresa URL completă a unui fișier internet.
O cale de fișier relativă indică un fișier relativ la pagina curentă.

Elementul HTML head

Elementul <head> este un container pentru metadate (date despre date) și este plasat între eticheta <html> și eticheta <body>.
<head> Definește informații despre document.
<titlu> Defineste titlul unui document.
<base> Definește o adresă implicită sau o țintă implicită pentru toate linkurile dintr-o pagină.
<link> Definește relația dintre un document și o resursă externă.
<meta> Definește metadatele despre un document HTML.
<script> Definește un script din partea clientului.
<style> Definește informațiile despre stil pentru un document.
HTML5 a introdus o metodă pentru a permite proiectanților web să preia controlul asupra viewport-ului, prin eticheta <meta>.
Viewport este zona vizibilă a utilizatorului unei pagini web. Aceasta variază în funcție de dispozitiv și va fi mai mică pe un telefon mobil decât pe ecranul computerului.
Ar trebui să includeți următorul element viewport <meta> în toate paginile web.
Partea width=device-width stabilește lățimea paginii pentru a urma lățimea ecranului dispozitivului (care va varia în funcție de dispozitiv).
Partea initial-scale=1.0  setează nivelul inițial de zoom când prima pagină este încărcată de browser. 

Elemente HTML Layout

Site-urile web deseori afișează conținut în mai multe coloane (cum ar fi o revistă sau un ziar).
<header> - definește un antet pentru un document sau o secțiune
<nav> - definește un container pentru link-uri de navigație
<section> - definește o secțiune dintr-un document
<article> - definește un articol independent de sine stătător
<aside> - definește conținutul în afară de conținut (precum o bară laterală)
<footer> - definește un subsol pentru un document sau o secțiune
<detalii> - definește detalii suplimentare
<summary> - definește un titlu pentru elementul <details>
Tehnici Layout HTML. Există cinci moduri diferite de a crea multicolumn layouts: HTML tables (not recommended), CSS float property, CSS flexbox, CSS framework, CSS grid.
Elementul <table> nu a fost proiectat pentru a fi un instrument de aspect! Scopul elementului <tabel> este afișarea datelor tabulare. 
Dacă doriți să vă creați rapid un layout, puteți utiliza un framework cum ar fi Bootstrap.
Este ceva comun să faceți machete web (web layouts) întregi folosind proprietatea CSS float. 
Flexbox reprezintă un nou mod de dispunere în CSS3.
Modulul CSS Grid Layout oferă un sistem de dispunere bazat pe grilă, cu rânduri și coloane, ceea ce facilitează proiectarea paginilor web fără a fi nevoie să folosiți floats și poziționare.

HTML Responsive Web Design

Responsive Web Design vizează utilizarea HTML-ului și CSS-ului pentru redimensionarea, ascunderea, micșorarea sau mărirea unui site web automat, pentru a-l arăta bine pe toate dispozitivele (desktop-uri, tablete și telefoane).
Setarea Viewport. Când creați pagini web responsive, adăugați următorul element <meta> în toate paginile dvs. web.
Imaginile responsive sunt imagini care se dimensionează frumos pentru a se potrivi cu orice dimensiune a browserului.
Utilizarea proprietății lățime (width).
Utilizarea proprietății cu lățimea maximă (max-width).
Elementul HTML <picture> vă permite să definiți imagini diferite pentru dimensiuni diferite ale ferestrei browserului.
Responsive Text Size. Mărimea textului poate fi setată cu o unitate „vw”, ceea ce înseamnă „lățimea vizualizării” (viewport width).
Pe lângă redimensionarea textului și a imaginilor, este de asemenea obișnuit să folosești interogări media în paginile responsive web.
Cu interogări media, puteți defini stiluri complet diferite pentru diferite dimensiuni de browser.
O pagină Responsive Web ar trebui să arate bine pe ecrane desktop mari și pe telefoane mobile mici.
Există multe CSS Frameworks care oferă un Responsive Design.
O modalitate excelentă de a crea un Responsive Design este de a utiliza o responsive style sheet.
Un alt framework popular este Bootstrap, folosește HTML, CSS și jQuery pentru a face pagini web responsive.



 

Elemente de cod HTML pentru computer

Elementele de cod HTML pentru computer sunt:
<code> Defineste codul de programare.
<kbd> Definește introducerea tastaturii.
<samp> Definește ieșirea computerului.
<var> Definește o variabilă.
<pre>Definește un text preformatat.

Entități HTML

Caracterele rezervate în HTML trebuie înlocuite cu entități de caractere.
Caracterele care nu sunt prezente pe tastatură pot fi, de asemenea, înlocuite de entități.

Simboluri HTML

Multe simboluri matematice, tehnice și simboluri valutare nu sunt prezente pe o tastatură normală.
Pentru a adăuga astfel de simboluri la o pagină HTML, puteți utiliza un nume de entitate HTML.
Simboluri matematice acceptate de HTML: forall, part, exist, empty, nabla, isin, notin, ni, prod, sum.
Câteva litere grecești acceptate de HTML:Alpha, Beta, Gamma, Delta, Epsilon, Zeta.
Câteva entități acceptate de HTML:copy, euro, trade, larr, uarr, rarr, darr, clubs, diams.

Codare HTML (seturi de caractere)

Pentru a afișa corect o pagină HTML, un browser web trebuie să știe ce set de caractere să folosească.
ASCII a fost primul standard de codare a caracterelor (numit și set de caractere). 
ISO-8859-1 a fost setul de caractere implicit pentru HTML 4
ANSI (Windows-1252) a fost setul de caractere Windows original. 
UTF-8 (Unicode) acoperă aproape toate caracterele și simbolurile din lume.
Setul de caractere implicit pentru HTML5 este UTF-8.
Atributul HTML charset.
Pentru a afișa corect o pagină HTML, un browser web trebuie să cunoască setul de caractere utilizat în pagină.
Acest lucru este specificat în eticheta <meta>.

HTML Uniform Resource Locators (URL)

Un URL este un alt cuvânt pentru o adresă web.
O adresă URL poate fi compusă din cuvinte (lectii-virtuale.ro) sau o adresă IP (Internet Protocol) (192.68.21.51).
Majoritatea oamenilor introduc numele când navighează, deoarece numele sunt mai ușor de reținut decât numerele.
scheme - definește tipul serviciului de internet (cel mai frecvent este http sau https)
prefix - definește un prefix de domeniu (implicit pentru http este www)
domain - definește numele domeniului Internet (cum ar fi lectii-virtuale.ro)
port - definește numărul de port la gazdă (implicit pentru http este 80)
path - definește o cale pe server (Dacă este omis: directorul rădăcină al site-ului)
filename - definește numele unui document sau resursă
Scheme URL comune: HyperText Transfer Protocol (http), Secure HyperText Transfer Protocol (https), File Transfer Protocol (ftp).
Codificare URL.
Adresele URL pot fi trimise doar pe Internet folosind setul de caractere ASCII. Dacă o adresă URL conține caractere în afara setului ASCII, adresa URL trebuie convertită.
Codarea URL transformă caracterele care nu sunt ASCII într-un format care poate fi transmis pe internet.
Codarea URL înlocuiește caracterele care nu sunt ASCII cu un „%” urmat de cifre hexadecimale.
Adresele URL nu pot conține spații. Codarea URL înlocuiește în mod normal un spațiu cu un semn plus (+) sau% 20.
Setul de caractere implicit în HTML5 este UTF-8.

HTML și XHTML

XHTML este HTML scris ca XML.
XHTML înseamnă limbaj de extindere HyperText Markup Language
XHTML este aproape identic cu HTML
XHTML este mai strict decât HTML
XHTML este HTML definit ca o aplicație XML
XHTML este acceptat de toate browserele principale

Formulare HTML

Elementul HTML <form> definește un formular care este utilizat pentru a colecta intrarea utilizatorului.
Elementele de formular sunt diferite tipuri de elemente de intrare, cum ar fi câmpurile de text, casetele de selectare, butoanele radio, butoanele de trimitere și multe altele.
Elementul <input> este cel mai important form element.
Elementul <input> poate fi afișat în mai multe moduri, în funcție de atributul type.
<input type = "text"> Definește un câmp de introducere text dintr-o linie.
<input type = "radio"> Definește un buton radio (pentru selectarea uneia dintre mai multe opțiuni).
<input type = "submit"> Definește un buton de trimitere (pentru trimiterea formularului).
Form-handler este de obicei o pagină de server cu un script pentru procesarea datelor de intrare.
Form-handler este specificat în atributul de acțiune al formularului.
Atributul action definește acțiunea care trebuie executată la trimiterea formularului.
Atributul target specifică dacă rezultatul trimis se va deschide într-o nouă pagină a browser-ului, într-un cadru sau în fereastra curentă.
Valoarea implicită este „_self”, ceea ce înseamnă că formularul va fi transmis în fereastra curentă.
Pentru a face ca rezultatul formularului să fie deschis într-o nouă pagină a browser-ului, folosiți valoarea „_blank”.
Atributul method specifică metoda HTTP (GET sau POST) care trebuie utilizată la trimiterea datelor formularului.
Trimiterea datelor formularului se face cu metoda implicită GET.
Utilizați întotdeauna POST dacă datele din formular conțin informații personale sau sensibile. Metoda POST nu afișează datele formularului trimis în câmpul adresei paginii.
Elementul <fieldset> este utilizat pentru a grupa datele înrudite într-un formular.
Elementul <legend> definește o legendă pentru elementul <fieldset>.

Elemente de formulare HTML

<form> Definește un formular HTML pentru introducerea utilizatorului.
Cel mai important element de formă este elementul <input>.
Elementul <input> poate fi afișat în mai multe moduri, în funcție de atributul type.
Dacă atributul type este omis, câmpul de intrare primește tipul implicit: "text".
Elementul <select> definește o listă derulantă (drop-down list).
Elementul  <option> definește o opțiune care poate fi selectată.
Utilizați atributul size pentru a specifica numărul de valori vizibile.
Utilizați atributul multiple pentru a permite utilizatorului să selecteze mai multe valori.
Elementul <textarea> definește un câmp de introducere pe mai multe linii (o zonă de text).
Atributul rows specifică numărul vizibil de linii dintr-o zonă de text.
Atributul cols specifică lățimea vizibilă a unei zone de text.
Elementul <button> definește un buton pe care se poate face click.
Elementul <datalist> specifică o listă de opțiuni predefinite pentru un element <input>.
Utilizatorii vor vedea o listă derulantă (drop-down list) a opțiunilor predefinite pe măsură ce introduc date.
Atributul listei elementului <input>, trebuie să se refere la atributul id al elementului <datalist>.
Elementul <output> reprezintă rezultatul unui calcul (ca unul realizat de un script).
<form> Definește un formular HTML pentru introducerea utilizatorului
<input> Definește un control de intrare
<textarea> Definește un control de intrare multilin (zona text)
<label> Definește o etichetă pentru un element <input>
<fieldset> Grupează elemente conexe într-o formă
<legend> Definește o legendă pentru un element <fieldset>
<select> Definește o listă derulantă
<optgroup> Definește un grup de opțiuni conexe dintr-o listă derulantă
<option> Definește o opțiune dintr-o listă derulantă
<button> Definește un buton pe care se poate face clic
<datalist> Specifică o listă de opțiuni predefinite pentru controale de intrare
<output> Definește rezultatul unui calcul

HTML Tipuri Input

Acest capitol descrie diferitele tipuri de intrare pentru elementul <input>.
Diferite tipuri de intrare pe care le puteți utiliza în HTML:<input type="button">, <input type="checkbox">, <input type="color">,
<input type="date">, <input type="datetime-local">, <input type="email">, <input type="file">, <input type="hidden">
<input type="image">, <input type="month">, <input type="number">, <input type="password">, <input type="radio">
<input type="range">, <input type="reset">, <input type="search">, <input type="submit">, <input type="tel">
<input type="text">, <input type="time">, <input type="url">, <input type="week">.
HTML5 a adăugat mai multe tipuri noi de intrare: color, date, datetime-local, email, month, number, range, search, tel, time, url, week.
Restricții de intrare: checked, disabled, max, maxlength, min, pattern, readonly, required, size, step, value.
<input type = ""> Specifică tipul de intrare de afișat.

HTML Atribute Input

Atributul value specifică valoarea inițială pentru un câmp de intrare.
Atributul readonly specifică faptul că un câmp de intrare este doar citit (nu poate fi modificat).
Atributul disabled specifică faptul că un câmp de intrare este dezactivat.
Atributul size specifică dimensiunea (în caractere) pentru câmpul de intrare.
Atributul maxlength specifică lungimea maximă permisă pentru câmpul de intrare.
Restricțiile de intrare nu sunt ignorate, iar JavaScript oferă multe modalități de a adăuga input-uri ilegale.
HTML5 a adăugat următoarele atribute pentru <input>: autocomplete, autofocus, form, formaction, formenctype, formmethod,
formnovalidate, formtarget, height and width, list, min and max, multiple, pattern (regexp), placeholder, required, step
și următoarele atribute pentru <form>: autocomplete, novalidate.
Atributul formaction este utilizat cu type="submit" și type="image".
Atributul formenctype este utilizat cu type = "submit" și type = "image".
Atributul formmethod poate fi utilizat cu type = "submit" și type = "image".
Atributul step funcționează cu următoarele tipuri de intrare (input types): number, range, date, datetime-local, month, time și week.
Atributul pattern funcționează cu următoarele tipuri de intrare (input types): text, search, url, tel, email, și password.
Utilizați atributul global title pentru a descrie pattern-ul care să ajute utilizatorul.
Atributul placeholder funcționează cu următoarele tipuri de intrare (input types): text, search, url, tel, email, și password.
Atributul required funcționează cu următoarele tipuri de intrare (input types): text, search, url, tel, email, password, date pickers, number, checkbox, radio, și file.
Atributul multiple funcționează cu următoarele tipuri de intrare (input types): e-mail și file.
Atributele min și max funcționează cu următoarele tipuri de intrare (input types): number, range, date, datetime-local, month, time și week.
Atributul list se referă la un element <datalist> care conține opțiuni predefinite pentru un element <input>.
Atributele înălțime și lățime (height și width) specifică înălțimea și lățimea unui element <input type = "image">.
Atributul formnovalidate poate fi utilizat cu type="submit".
Atributul formtarget înlocuiește atributul țintă (target) al elementului <form>.
Atributul formtarget poate fi utilizat cu type = "submit" și type = "image".
Atributul novalidate este un atribut <form>.
Atributul autocomplete funcționează cu <form> și următoarele tipuri <input>:text, search, url, tel, email, password, datepickers, range, și color.

Introducere în HTML5

WHATWG a dorit să dezvolte HTML ca un „standard de viață”. Un nivel de viață este mereu actualizat și îmbunătățit. Se pot adăuga noi funcții, dar funcționalitățile vechi nu pot fi eliminate.
Declarația DOCTYPE pentru HTML5.
Declarația de codare a caracterelor (charset).
Codificarea implicită a caracterelor în HTML5 este UTF-8.
Elementesemantice noi precum: <header>, <footer>, <article> și <section>.
Atribute ale elementelor de formular noi, cum ar fi: number, date, time, calendar, și range.
Elemente grafice noi: <svg> și <canvas>.
Elemente multimedia noi: <audio> și <video>.
Cele mai interesante API-uri noi în HTML5 sunt: HTML Geolocation, HTML Drag and Drop, HTML Local Storage, HTML Application Cache, HTML Web Workers, HTML SSE.
Următoarele elemente HTML4 au fost eliminate în HTML5: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, 
<noframes>, <strike>, <tt>.
Folosiți în schimb: <abbr>, <object>, CSS, <ul>, <s>, <del>.

Suport HTML5

HTML5 este acceptat în toate browserele moderne.
În plus, toate browserele, vechi și noi, gestionează automat elemente nerecunoscute ca elemente inline.
Din această cauză, puteți „învăța” browserele mai vechi să gestioneze elemente HTML „necunoscute”.
Puteți învăța browserele mai vechi să gestioneze corect HTML5.
HTML5 definește opt noi elemente semantice. Toate acestea sunt elemente la nivel de bloc (block-level elements).
Pentru a asigura un comportament corect în browserele mai vechi, puteți seta proprietatea de afișare CSS (CSS display property) pentru aceste elemente HTML pentru a le bloca.
Puteți adăuga, de asemenea, unei pagini HTML, elemente noi folosind un truc de browser.
Declarația JavaScript document.createElement ("myHero") este necesară pentru a crea un element nou în IE 9 și în versiunile anterioare.
Veți avea nevoie de HTML5Shiv pentru a oferi compatibilitate pentru browsere IE mai vechi decât IE 9.
HTML5Shiv este plasat în eticheta <head>.
HTML5Shiv este un fișier javascript la care se face referire într-o etichetă <script>.
Ar trebui să utilizați HTML5Shiv când utilizați noile elemente HTML5 precum: <article>, <section>, <aside>, <nav>, <footer>.

Elemente noi în HTML5

HTML5 oferă elemente noi pentru o structură mai bună a documentelor:
<article> - Definește un articol dintr-un document
<aside> - Definește conținutul în afară de conținutul paginii
<bdi> - Izolează o parte a textului care ar putea fi formatată într-o direcție diferită de celălalt text din afara acestuia
<detalii> - Definește detalii suplimentare pe care utilizatorul le poate vizualiza sau ascunde
<dialog> - Definește o casetă de dialog sau o fereastră
<figcaption> - Definește o legendă pentru un element <figure>
<figure> - Definește conținut autonom
<footer> - Definește un subsol pentru un document sau secțiune
<header> - Definește un antet pentru un document sau secțiune
<principal> - Definește conținutul principal al unui document
<mark> - Definește text marcat / evidențiat
<meter> - Definește o masurare scalara intr-un interval cunoscut (un ecartament)
<nav> - Definește legăturile de navigare
<progress> - Reprezintă progresul unei sarcini
<rp> - Definește ce trebuie afișat în browserele care nu acceptă adnotările ruby
<rt> -  Definește o explicație / pronunție a caracterelor (pentru tipografia din Asia de Est)
<ruby> - Definește o adnotare rubin (pentru tipografia din Asia de Est)
<section> - Definește o secțiune dintr-un document
<summary> - Definește un titlu vizibil pentru un element <details>
<time> - Definește o data / ora
<wbr> - Definește o posibila pauza de linie
Elemente noi de formular (New Form Elements): 
<datalist> - Specifică o listă de opțiuni predefinite pentru controale de intrare
<output> - Definește rezultatul unui calcul
Tipuri noi de intrare (New Input Types): color,date,datetime,datetime,local,email,month,number,range,search,tel,time,url,week,autocomplete,autofocus,form,formaction,formenctype,formmethod,formnovalidate,formtarget,height and width,list,min and max,multiple,pattern (regexp),placeholder,required,step.
Grafică HTML5: 
<canvas> Desenați grafică din mers, prin scripturi (de obicei JavaScript)
<svg> Desenați grafică vectorială scalabilă
Elemente media noi:
<audio> - Definește conținutul sunetului
<embed> - Definește un container pentru o aplicație externă (non-HTML)
<source> - Definește mai multe resurse media pentru elemente media (<video> și <audio>)
<track> - Definește piesele text pentru elementele media (<video> și <audio>)
<video> - Defineste video sau film

Elemente semantice în HTML5

Semantica se referă la studiul sensurilor cuvintelor și frazelor dintr-o limbă.
Elemente semantice = elemente cu semnificație:
<article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>.
Exemple de elemente non-semantice<div> și <span> - Nu spune nimic despre conținutul său.
Exemple de elemente semantice<form><tabel> și <article> - definește clar conținutul său.
<article> Definește un articol
<aside> Definește conținutul în afară de conținutul paginii
<detalii> Definește detalii suplimentare pe care utilizatorul le poate vizualiza sau ascunde
<figcaption> Definește o legendă pentru un element <figure>
<figure> Specifică conținut independent, cum ar fi ilustrații, diagrame, fotografii, listări de coduri etc.
<footer> Definește un subsol pentru un document sau secțiune
<header> Specifică un antet pentru un document sau secțiune
<main> Specifică conținutul principal al unui document
<mark> Definește text marcat / evidențiat
<nav> Definește legăturile de navigare
<section> Definește o secțiune dintr-un document
<summary> Definește un titlu vizibil pentru un element <details>
<time> Definește o data / ora

Migrare în HTML5

Acest capitol se referă în întregime la modul de migrare de la HTML4 la HTML5.
Acest capitol arată cum se poate converti o pagină HTML4 într-o pagină HTML5, fără a distruge nimic din conținutul sau structura originală.
Migrarea de la HTML4 la HTML5:
<div id="header"> -   <header>
<div id="menu">  -   <nav>
<div id="content">  -   <section>
<div class="article">  -   <article>
<div id="footer">  -   <footer>
Modificați doctype la doctype HTML5.
Modificați informațiile de codificare la codarea HTML5.
Adăugați HTML5Shiv.
Schimbare la elemente semantice HTML5.
CSS-ul existent conține ID-uri și clase pentru stilizarea elementelor.
Înlocuiți cu stiluri CSS egale pentru elemente semantice HTML5.
Schimbați elementele în elemente semantice HTML5​​​​​​.
Există o diferență confuză (lipsa) în standardul HTML5, între <article> <section> și <div>.
În standardul HTML5, elementul <secțiune> este definit ca un bloc de elemente conexe.
Elementul <article> este definit ca un bloc complet, de sine stătător, al elementelor conexe.
Elementul <div> este definit ca un bloc de elemente pentru copii.
<article> în <article>.
<div> în <article>.
<div> în <section> în <article>.
 

Ghid de stil în HTML5

O utilizare constantă a stilului face mai ușor pentru alții să înțeleagă HTML-ul.
În viitor, programe precum cititorii XML ar putea dori să citească HTML-ul.
Utilizarea unei sintaxe bine formate - „aproape de XHTML” poate fi inteligentă.
Vă recomandăm să folosiți numele elementelor scrise cu litere mici, deoarece:
În HTML5, nu trebuie să închideți toate elementele (de exemplu elementul <p>).
Vă recomandăm să închideți toate elementele HTML.
Închideți elementele HTML goale
În HTML5, este opțional să închideți elementele goale.
HTML5 permite amestecarea literelor mari și a literelor mici în nume de atribute.
Vă recomandăm să folosiți nume de atribute scrise culitere mici.
HTML5 permite ca valorile atributelor să fie scrise fără ghilimele.
Vă recomandăm să puneți între ghilimele valorile atributului.
Adăugați întotdeauna atributul alt la imagini. Acest atribut este important atunci când imaginea din anumite motive nu poate fi afișată. De asemenea, definiți întotdeauna lățimea și înălțimea (width și height) imaginii. Reduce pâlpâirea, deoarece browserul poate rezerva spațiu pentru imagine înainte de încărcare.
HTML5 permite spații în jurul semnelor egale. Dar fără spațiu este mai ușor de citit și grupează entitățile mai bine împreună.
Când utilizați un editor HTML, este incomod să derulați la dreapta și la stânga pentru a citi codul HTML.
Încercați să evitați liniile de cod mai lungi de 80 de caractere.
Nu adăugați linii necompletate fără un motiv.
Pentru lizibilitate, adăugați linii goale pentru a separa blocuri de coduri mari sau logice.
Pentru lizibilitate, adăugați două spații de indentare. Nu folosiți tasta tab.
Nu folosiți linii necompletate și indentate. Nu este necesar să indentizați fiecare elemen
În HTML5, eticheta <html> și eticheta <body> pot fi omise.
Nu vă recomandăm să omiteți etichetele <html> și <body>.
Elementul <html> este rădăcina documentului. Este locul recomandat pentru specificarea limbii paginii.
Omiterea <html> sau <body> poate bloca software-ul DOM și XML.
Omiterea <body> poate produce erori în browserele mai vechi (IE9).
În HTML5, eticheta <head> poate fi omisă.
În mod implicit, browserele vor adăuga toate elementele înainte de <body> la un element implicit <head>.
Puteți reduce complexitatea HTML prin omiterea etichetei <head>
Elementul <title> este necesar în HTML5. Faceți titlul cât mai semnificativ posibil
HTML5 a introdus o metodă pentru a permite proiectanților web să preia controlul asupra viewport-ului, prin eticheta <meta>.
Viewport este zona vizibilă a utilizatorului unei pagini web. Acesta variază în funcție de dispozitiv și va fi mai mic pe un telefon mobil decât pe ecranul computerului.
Lățimea (width) = partea lățimii dispozitivului (width=device-width part) - stabilește lățimea paginii pentru a urma lățimea ecranului dispozitivului (screen-width) (care va varia în funcție de dispozitiv).
Partea inițială = 1,0 setează nivelul de zoom inițial atunci când pagina este încărcată prima dată de browser
Comentariile scurte trebuie scrise pe o singură linie
Comentariile lungi sunt mai ușor de observat dacă sunt indentate în două spații.
Utilizați sintaxa simplă pentru a face legătura cu foile de stil (atributul tip nu este necesar)
Regulile scurte pot fi comprimate
Regulile lungi trebuie scrise pe mai multe rânduri
Puneți suportul de deschidere (opening bracket) pe aceeași linie cu selectorul.
Utilizați un spațiu înainte de suportul de deschidere (opening bracket).
Folosiți două spații de indentare.
Utilizați punct și virgulă după fiecare pereche proprietate-valoare, inclusiv ultima.
Utilizați ghilimele în jurul valorilor numai dacă valoarea conține spații.
Plasați suportul de închidere (opening bracket) pe o linie nouă, fără spații de conducere.
Evitați liniile de peste 80 de caractere.
Se încarcă JavaScript în HTML
Accesarea elementelor HTML cu JavaScript
Utilizați numele de fișiere scrise cu litere mici
Fișierele HTML ar trebui să aibă o extensie .html sau .htm.
Fișierele CSS ar trebui să aibă o extensie .css.
Fișierele JavaScript ar trebui să aibă o extensie .js.
Nu există nicio diferență între extensiile .htm și .html. Ambele vor fi tratate ca HTML de orice browser web sau server web.
Când o adresă URL nu specifică un nume de fișier (cum ar fi https://www.lectii-virtuale.ro/css/), serverul returnează un nume de fișier implicit. Numele de fișiere implicite obișnuite sunt index.html, index.htm, default.html și default.htm.
Dacă serverul dvs. este configurat doar cu "index.html" ca nume de fișier implicit, fișierul dvs. trebuie numit "index.html", nu "index.htm."

Grafică HTML

Pentru a desena grafică pe o pagină web este utilizat elementul HTML <canvas> .
Elementul HTML <canvas> este utilizat pentru a desena grafică, din nou, prin JavaScript.
Elementul <canvas> este doar un container pentru grafică. Pentru a desena grafică trebuie să utilizați JavaScript.
Canvas are mai multe metode pentru a desena căi, cutii, cercuri, text și adăugarea de imagini.
 Specificați întotdeauna un atribut id (la care se face referire într-un script) și un atribut lățime și înălțime (width și height) pentru a defini dimensiunea pânzei (canvas). Pentru a adăuga un chenar (border), utilizați atributul stil (style).
 

HTML SVG

SVG înseamnă grafică vectorială scalabilă.
SVG este utilizat pentru a defini grafica pentru Web.
SVG este o recomandare W3C.
Elementul HTML <svg> este un container pentru grafică SVG.
SVG are mai multe metode pentru desenarea căilor, casetelor, cercurilor, textului și imaginilor grafice.
Diferențele dintre SVG și Canvas
SVG este un limbaj pentru descrierea graficelor 2D în XML.
Canvas desenează grafică 2D, pe fugă (cu un JavaScript).
SVG este bazat pe XML, ceea ce înseamnă că fiecare element este disponibil în DOM SVG. Puteți atașa manipulatoare de evenimente JavaScript (JavaScript event handlers) pentru un element.
În SVG, fiecare formă desenată este amintită ca obiect. Dacă se schimbă atributele unui obiect SVG, browserul poate reda automat forma.
Canvas: Rezoluție dependentă. Fără suport pentru organizatorii de evenimente.Capacități slabe de redare a textului. Puteți salva imaginea rezultată ca .png sau .jpg. Bine potrivit pentru jocuri cu intensitate grafică.
SVG: Rezoluție independentă. Suport pentru operatorii de evenimente. Cel mai potrivit pentru aplicații cu zone de redare mari (Google Maps). Redarea lentă, dacă este complexă (orice lucru care utilizează mult DOM va fi lent). Nu este potrivit pentru aplicații de joc.

HTML Media

Multimedia pe web inseamnă sunet, muzică, videoclipuri, filme și animații.
Exemple: imagini, muzică, sunet, videoclipuri, înregistrări, filme, animații și multe altele.
Paginile web conțin adesea elemente multimedia de diferite tipuri și formate.
Primele browsere web au avut suport doar pentru text, limitat la un singur font într-o singură culoare.
Mai târziu au venit browserele cu suport pentru culori și fonturi și imagini!
Formatele audio, video și animație au fost gestionate diferit de majoritatea browserelor. Diferite formate au fost acceptate, iar unele formate necesită programe auxiliare suplimentare (plug-in-uri) pentru a funcționa.
Sperăm că acest lucru va deveni istorie. Multimedia HTML5 promite un viitor mai ușor pentru multimedia.
Elementele multimedia (cum ar fi audio sau video) sunt stocate în fișiere media.
Cea mai obișnuită modalitate de a descoperi tipul de fișier este de a privi extensia de fișier.
Fișierele multimedia au formate și extensii diferite precum: .swf, .wav, .mp3, .mp4, .mpg, .wmv și .avi.
MP4 este noul și următorul format pentru video pe internet.
MP4 este recomandat de YouTube.
MP4 este acceptat de Flash Players.
MP4 este acceptat de HTML5.
Doar videoclipurile MP4, WebM și Ogg sunt acceptate de standardul HTML5.
MP3 este cel mai nou format pentru muzică înregistrată comprimat. Termenul MP3 a devenit sinonim cu muzica digitală.
Dacă site-ul dvs. web este despre muzică înregistrată, MP3 este alegerea.
Doar MP3, WAV și Ogg audio sunt acceptate de standardul HTML5.

HTML5 Video

Redarea videoclipurilor în HTML
Înainte de HTML5, un videoclip putea fi redat doar într-un browser cu un plug-in (precum flash).
Elementul HTML5 <video> specifică un mod standard de a încorpora un videoclip într-o pagină web.
Pentru a afișa un videoclip în HTML, utilizați elementul <video>.
Atributul de control (controls) adaugă controale video, cum ar fi: redare, pauză și volum.
Este o idee bună să includeți întotdeauna atributele de lățime și înălțime (width și height). Dacă nu sunt setate înălțimea și lățimea (width și height), pagina ar putea clipi în timp ce video-ul se încarcă.
Elementul <source> vă permite să specificați fișiere video alternative din care browserul poate alege. Browserul va folosi primul format recunoscut.
Textul dintre etichetele <video> și </video> va fi afișat numai în browserele care nu acceptă elementul <video>.
Pentru a începe un videoclip automat, utilizați atributul autoplay.
Atributul de redare automată (autoplay) nu funcționează pe dispozitive mobile precum iPad și iPhone.
În HTML5, există 3 formate video acceptate: MP4, WebM și Ogg.
HTML5 definește metodele, proprietățile și evenimentele DOM pentru elementul <video>.
Acest lucru vă permite să încărcați, să redați și să întrerupeți videoclipuri, precum și să setați durata și volumul.
<video> Definește un videoclip sau un film
<source> Definește mai multe resurse media pentru elemente media, cum ar fi <video> și <audio>
<track> Definește piesele text în playerele media

HTML5 Audio

Înainte de HTML5, fișierele audio puteau fi redate doar într-un browser cu un plug-in (cum ar fi flash).
Elementul HTML5 <audio> specifică un mod standard de a încorpora un audio într-o pagină web.
Pentru a reda un fișier audio în HTML, utilizați elementul <audio>:
Atributul de control (controls) adaugă controale audio, cum ar fi redare, pauză și volum.
Elementul <source> vă permite să specificați fișiere audio alternative din care browserul poate alege. Browserul va folosi primul format recunoscut.
Textul dintre etichetele <audio> și </audio> va fi afișat numai în browserele care nu acceptă elementul <audio>.
În HTML5, există 3 formate audio acceptate: MP3, WAV și OGG.
HTML5 definește metodele, proprietățile și evenimentele DOM pentru elementul <audio>.
Acest lucru vă permite să încărcați, să redați și să întrerupeți un fișier audio, precum și să setați durata și volumul.
Există, de asemenea, evenimente DOM care vă pot notifica atunci când un audio începe să se redea, este în pauză etc.
<source> - Definește multiple resurse media pentru elemente media, cum ar fi video și audio.

HTML Plug-ins

Scopul unui plug-in este extinderea funcționalității unui browser web.
Aplicațiile Helper (plug-in-uri) sunt programe de calculator care extind funcționalitatea standard a unui browser web.
Exemple de plug-in-uri cunoscute sunt applet-urile Java.
Plug-in-urile pot fi adăugate la paginile web cu eticheta <object> sau cu eticheta<embed>.
Plug-in-urile pot fi utilizate în mai multe scopuri: afișarea hărților, scanarea virușilor, verificarea codului dvs. bancar etc.
Pentru a afișa videoclipuri și audio: utilizați etichetele <video> și <audio>.
Elementul <object> este acceptat de toate browserele.
Elementul <object> definește un obiect încorporat într-un document HTML.
Este utilizat pentru a încorpora plug-in-uri (cum ar fi applet-uri Java, cititoare PDF, Flash Players) în paginile web.
Elementul <object> poate fi de asemenea utilizat pentru a include HTML în HTML sau imagini.
Elementul <embed> este acceptat în toate browserele principale.
Elementul <embed> definește, de asemenea, un obiect încorporat într-un document HTML.
Navigatoarele web au acceptat elementul <embed> de mai mult timp. Cu toate acestea, nu a făcut parte din specificația HTML înainte de HTML5.
Elementul <embed> nu are o etichetă de închidere. Nu poate conține text alternativ.
Elementul <embed> poate fi folosit și pentru a include HTML în HTML sau imagini.

HTML YouTube

Cel mai simplu mod de a reda videoclipuri în HTML, este să folosiți YouTube.
Conversia videoclipurilor în diferite formate poate fi dificilă și necesită mult timp.
O soluție mai ușoară este să permiteți YouTube-ului să redea videoclipurile din pagina dvs. web.
YouTube va afișa un id (cum ar fi tgbNymZ7vqY), atunci când salvați (sau redați) un videoclip.
Puteți utiliza acest id și faceți referire la videoclipul dvs. în codul HTML.
Pentru a reda videoclipul dvs. pe o pagină web, faceți următoarele:
Încărcați videoclipul pe YouTube Ia o notă de identificare a videoclipului.
Definiți un element <frame> în pagina dvs. web.
Lăsați atributul src să indice URL-ul videoclipului.
Utilizați atributele de lățime și înălțime (width și height) pentru a specifica dimensiunea playerului.
Adăugați alți parametri la adresa URL (vezi mai jos).
Redare automată YouTube (YouTube Autoplay)
Puteți face ca videoclipul dvs. să înceapă să se redea automat atunci când un utilizator vizitează pagina respectivă adăugând un parametru simplu la adresa URL a YouTube.
Fiți atenți când decideți redarea automată a videoclipurilor dvs. Pornirea automată a unui videoclip vă poate enerva vizitatorul și poate ajunge să provoace mai mult rău decât bine.
Listă de redare YouTube (YouTube Playlist)
O listă separată de virgule a videoclipurilor de redat (pe lângă adresa URL originală).
Buclă YouTube (YouTube Loop)
Valoarea 0 (implicit): Videoclipul va fi redat o singură dată.
Valoarea 1: Videoclipul se va bucla (pentru totdeauna).
Controale YouTube (YouTube Controls)
Valoarea 0: Player controls nu se afișează.
Valoarea 1 (implicit): Afișare player controls.
YouTube - Folosim <object> sau <embed>
 YouTube  <object> și <embed> sunt depășite din ianuarie 2015. Ar trebui să vă migrați videoclipurile pentru a utiliza <iframe>.

HTML APIs

API Geolocalizare HTML este utilizat pentru a localiza poziția unui utilizator.
Localizați Poziția Utilizatorului
API Geolocalizare în HTML este utilizat pentru a obține poziția geografică a unui utilizator.
Deoarece acest lucru poate compromite confidențialitatea, poziția nu este disponibilă decât dacă utilizatorul o aprobă.
Geolocalizarea este cea mai precisă pentru dispozitivele cu GPS, cum ar fi smartphone-ul.
Începând cu Chrome 5.0, API-ul de geolocalizare va funcționa numai pe contexte sigure, cum ar fi HTTPS. Dacă site-ul dvs. este găzduit pe o origine nesigură (cum ar fi HTTP), solicitările pentru a obține locația utilizatorilor nu vor mai funcționa.
Utilizarea geolocalizării în HTML
Metoda getCurrentPosition () este utilizată pentru a returna poziția utilizatorului.
Al doilea parametru al metodei getCurrentPosition () este utilizat pentru a gestiona erorile. Specifică o funcție care trebuie executată dacă nu reușește să obțină locația utilizatorului:
Pentru a afișa rezultatul într-o hartă, aveți nevoie de acces la un serviciu de hartă, cum ar fi Google Maps.
Geolocalizarea este de asemenea foarte utilă pentru informații specifice locației, cum ar fi:
Informații locale actualizate.
Afișare Puncte de interes în apropierea utilizatorului.
Navigare rotativă (GPS).
Metoda getCurrentPosition () returnează un obiect de succes. Proprietățile de latitudine, longitudine și precizie sunt întotdeauna returnate. Celelalte proprietăți sunt returnate dacă sunt disponibile:
coords.latitude -  Latitudinea ca număr zecimal (întors întotdeauna)
coords.longitude - Longitudinea ca număr zecimal (întors întotdeauna)
coords.acuratetă - Precizia poziției (întoarsă întotdeauna)
coords.altitude - Altitudinea în metri peste nivelul mării medii (returnat dacă este disponibil)
coords.altitude - Accarity Precizia altitudinii de poziție (returnată dacă este disponibilă)
coords.heading - Titlul ca grade în sensul acelor de ceasornic dinspre nord (returnat dacă este disponibil)
coords.speed - Viteza în metri pe secundă (returnată dacă este disponibilă)
timestamp -  Data / ora răspunsului (returnat dacă este disponibil)
Obiect de geolocalizare - Alte metode interesante
watchPosition () - returnează poziția actuală a utilizatorului și continuă să returneze poziția actualizată pe măsură ce utilizatorul se mișcă (precum GPS-ul într-o mașină).
clearWatch () - Oprește metoda watchPosition ().

HTML5 Drag and Drop

Drag and drop este o caracteristică foarte comună. Este atunci când „apucați” un obiect și îl trageți într-o altă locație.
În HTML5, drag and drop face parte din standard: Orice element poate fi tras.
Pentru a face un element care poate fi trasat, setați atributul dragable pe true
Atributul ondragstart apelează o funcție, drag (eveniment), care specifică ce date trebuie să fie trasate.
Metoda dataTransfer.setData () stabilește tipul de date și valoarea datelor trase.
Evenimentul ondragover specifică unde pot fi eliminate datele trase.
În mod implicit, datele / elementele nu pot fi abandonate în alte elemente. Pentru a permite o eliminare, trebuie să prevenim manipularea implicită a elementului.
Acest lucru se realizează prin apelarea metodei event.preventDefault () pentru evenimentul ondragover.
Atunci când datele glisate sunt abandonate, apare un eveniment drop.
Atributul ondrop apelează o funcție, drop(eveniment).
Call preventDefault() - pentru a preveni gestionarea implicită a datelor browserului (implicit este deschis ca link in drop)
Obțineți datele trase cu metoda dataTransfer.getData (). Această metodă va returna orice date care au fost setate la același tip în metoda setData()
Datele trase sunt id-ul elementului tras ("drag1")
Adăugați elementul tras în elementul drop.

Stocare Web în HTML5

Stocare web în HTML - mai bine decât cookie-urile.
Cu stocarea web, aplicațiile web pot stoca datele local în browserul utilizatorului.
Stocarea web este mai sigură și cantități mari de date pot fi stocate local, fără a afecta performanța site-ului web.
Spre deosebire de cookie-uri, limita de stocare este mult mai mare (cel puțin 5 MB) și informațiile nu sunt transferate niciodată pe server.
Stocarea web este pe origine (pe domeniu și protocol). Toate paginile, de la o origine, pot stoca și accesa aceleași date.
Obiecte de stocare Web în HTML
Stocarea web în HTML furnizează două obiecte pentru stocarea datelor pe client:
window.localStorage - stochează date fără dată de expirare.
window.sessionStorage - stochează datele pentru o sesiune (datele se pierd la închiderea filei browserului).
Înainte de a utiliza stocarea web, verificați asistența browserului pentru localStorage și sessionStorage.
Obiectul localStorage stochează datele fără data de expirare. Datele nu vor fi șterse atunci când browserul este închis și vor fi disponibile a doua zi, săptămână sau an.
Perechile nume / valoare sunt întotdeauna stocate ca șiruri. Nu uitați să le convertiți în alt format atunci când este nevoie!
Obiectul sessionStorage este egal cu obiectul localStorage, cu excepția faptului că stochează datele pentru o singură sesiune. Datele sunt șterse atunci când utilizatorul închide fila browserului specific.
 

HTML5 Web Workers

Un lucrător web este un JavaScript care rulează în fundal, fără a afecta performanța paginii.
Când executați scripturi într-o pagină HTML, pagina nu răspunde până la finalizarea scriptului.
Un lucrător web (web worker) este un JavaScript care rulează în fundal, independent de alte scripturi, fără a afecta performanța paginii. Puteți continua să faceți orice doriți: făcând click, selectând lucruri etc., în timp ce lucrătorul web (web worker) rulează în fundal.
Înainte de a crea un lucrător web (web worker), verificați dacă browserul utilizatorului îl acceptă.
Creați un fișier Web Worker.
Creăm lucrătorul nostru web (web worker) într-un JavaScript extern.
Creem un script care contează. Scriptul este stocat în fișierul "demo_workers.js".
Apoi putem trimite și primi mesaje de la lucrătorul web (web worker).
Adăugați un ascultător de eveniment „onmessage” la lucrătorul web (web worker).
Când lucrătorul web (web worker) postează un mesaj, codul din ascultătorul evenimentului este executat. Datele de la lucrătorul web (web worker) sunt stocate în event.data.
Încheiați un lucrător web (web worker).
Când se creează un obiect de lucru web(web worker), acesta va continua să asculte mesajele (chiar și după terminarea scriptului extern) până la încheierea acestuia.
Pentru a încheia un lucrător web (web worker) și a resurselor gratuite pentru browser / computer, utilizați metoda terminare ().
Reutilizați Web Worker.
Dacă setați variabila lucrător (worker) pe nedeterminată, după terminarea acesteia, puteți refolosi codul.
Întrucât lucrătorii web (web workers) se află în fișiere externe, aceștia nu au acces la următoarele obiecte JavaScript:
Obiectul ferestrei.
Obiectul documentului.
Obiectul părinte.

Evenimente trimise de server în HTML5

Evenimentele trimise de server permit unei pagini web să primească actualizări de la un server.
Evenimente trimise de server - mesagerie unidirecțională.
Un eveniment trimis de server este atunci când o pagină web primește automat actualizări de la un server.
Acest lucru era posibil și înainte, dar pagina web ar trebui să întrebe dacă există actualizări disponibile. Cu evenimente trimise de server, actualizările vin automat.
Obiectul EventSource este utilizat pentru a primi notificări de evenimente trimise de server.
Creați un nou obiect EventSource și specificați adresa URL a paginii care trimite actualizările (în acest exemplu "demo_sse.php").
De fiecare dată când se primește o actualizare, apare evenimentul onmessage.
Când are loc un eveniment onmessage, introduceți datele primite în elementul cu id = "result".
Verificați asistența pentru evenimente trimise de server

Aveți nevoie de un server capabil să trimită actualizări de date (cum ar fi PHP sau ASP).
Sintaxa fluxului de evenimente din partea serverului este simplă. Setați antetul „Content-Type” la „text / stream-event”. Acum puteți începe să trimiteți fluxuri de evenimente.
Setați antetul „Content-Type” la „text / stream-event”.
Specificați că pagina nu ar trebui să fie în cache.
Afișați datele care trebuie trimise (începeți întotdeauna cu „date:”).
Curățați datele de ieșire înapoi pe pagina web.
Evenimentul onmessage pentru a primi mesaje.
Alte evenimente:
onopen - Când se deschide o conexiune la server.
onmessage - Când un mesaj este primit.
onerror - Când apare o eroare.

Despre Lecții-Virtuale.ro

Lecții-Virtuale este o platformă educațională care oferă filme și teste cu indicații ce conțin rezolvare completă, pe pași, la materiile esențiale Matematică, Fizică și Chimie. Scopul nostru este să ne concentrăm pe prezentarea noțiunilor și fenomenelor într-o manieră care să stimuleze înțelegerea și nu memorarea mecanică. Lecții-Virtuale își propune să faciliteze accesul la conținut educațional de calitate, oferind în același timp feed-back asupra performanței. Echipa noastră însumează experiențe diverse, de la Matematică și Informatică, la Fizică, Chimie și Medicină. Unii dintre noi lucrează din țară în timp ce alții lucrează din străinătate. Acest website a fost realizat în conformitate cu viziunea noastră despre cum credem că trebuie prezentată informația științifică. Sperăm să vă simțiti bine alături de noi și să invățați lucruri folositoare pentru viitoarea carieră şi în viaţă. Hai România!

Newsletter

Abonează-te la Newsletter pentru a fi la curent cu toate ofertele noastre.

2020 © Lecții-virtuale.ro Toate drepturile rezervate
Termeni    Despre    Contact    Confidenţialitate    Cariere