Limbajul HTML

Editoare HTML: Notepad (PC), TextEdit (Mac)

Vezi videoclipul: Editoare HTML: Notepad (PC), TextEdit... Vezi toată lecția: Introducere în HTML Citește teoria: Editoare HTML: Notepad (PC), TextEdit...
Editoare HTML
  • Paginile web pot fi create și modificate folosind editori HTML profesionali.
  • Cu toate acestea, pentru învățarea HTML vă recomandăm un editor de text simplu, cum ar fi Notepad (PC) sau TextEdit (Mac).
  • Considerăm că utilizarea unui editor de text simplu este o modalitate bună de a învăța HTML.
  • Urmați pașii de mai jos pentru a crea prima pagină web cu Notepad sau TextEdit.
Pasul 1: Deschideți Notepad (PC)

Windows 8 sau o versiune mai recenta:

Deschideți ecranul de pornire (simbolul ferestrei din partea stângă jos a ecranului). Deschideți Notepad.

Windows 7 sau o versiune anterioara:

Deschideti Start > Programs > Accessories > Notepad

Pasul 1: Deschideți TextEdit (Mac)

Deschideti Finder > Applications > TextEdit
De asemenea, modificați anumite preferințe pentru ca aplicația să salveze corect fișierele. În Preferences > Format > alegeți "Plain Text"
Apoi, sub „Open și Save”, bifați caseta care scrie "Display HTML files as HTML code instead of formatted text".
Apoi, deschideți un nou document pentru a plasa codul.

Pasul 2: Scrieți puțin cod HTML

Scrieți sau copiați puțin cod HTML în Notepad.
  
<!DOCTYPE html>
<html>
<body>

<h1>Prima mea rubrică</h1>

<p>Primul meu paragraf.</p>

</body>
</html>


Pasul 3: Salvați pagina HTML.

Salvați fișierul pe computer. Selectați File > Save as  în meniul Notepad.
Denumiți fișierul "index.htm" și setați codificarea la UTF-8 (care este codificarea preferată pentru fișierele HTML).



Puteți utiliza .htm sau .html ca extensie de fișier. Nu există nici o diferență.

Pasul 4: Vizualizați pagina HTML în browserul dvs.​​​​​​​

Deschideți fișierul HTML salvat în browserul preferat (faceți dublu clic pe fișier sau faceți clic dreapta - și alegeți „Open with”).
Rezultatul va arăta cam așa:

​​​​​​​

Introducere în HTML: DOCTYPE, html, head, title, body, h1, p

Vezi videoclipul: Introducere în HTML: DOCTYPE, html, he... Vezi toată lecția: Introducere în HTML Citește teoria: Introducere în HTML: DOCTYPE, html, he...
Introducere in HTML
  • HTML este limbajul marcant standard pentru crearea de pagini Web.
  • HTML înseamnă Hyper Text Markup Language.
  • HTML descrie structura unei pagini Web.
  • HTML este format dintr-o serie de elemente.
  • Elementele HTML spun browserului cum să afișeze conținutul.
  • Elementele HTML sunt reprezentate prin etichete.
  • Etichetele HTML etichetează bucăți de conținut, cum ar fi „titlu”, „paragraf”, „tabel” și așa mai departe.
  • Navigatoarele nu afișează etichetele HTML, ci le folosesc pentru a reda conținutul paginii.
Un simplu document HTML:
Exemplu: 
<!DOCTYPE html>
<html>
<head>
<title>Titlul paginii</title>
</head>
<body>

<h1>Prima mea rubrică</h1>
<p>Primul meu paragraf.</p>

</body>
</html>
Exemplu explicat:
  • 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.
Etichete HTML

Etichetele HTML sunt nume de elemente înconjurate de paranteze unghiulare: 
<tagname> conținutul merge aici ... </tagname>
  • Etichetele HTML vin în mod normal în perechi precum <p> și </p>.
  • Prima etichetă dintr-o pereche este eticheta de început, a doua etichetă este eticheta finală.
  • Eticheta finală este scrisă ca eticheta de început, dar cu un slash înainte introdus înainte de numele etichetei.
Sfat: Eticheta de început se numește și eticheta de deschidere, iar eticheta finală eticheta de închidere.

Navigatoare web
Scopul unui browser web (Chrome, Edge, Firefox, Safari) este să citească documente HTML și să le afișeze.
Browserul nu afișează etichetele HTML, ci le folosește pentru a determina modul de afișare a documentului:



Structura paginii HTML
Mai jos este vizualizarea unei structuri de pagini HTML:
 
<html>
<head>
<title>Titlul paginii</title>
</head>
<body>
<h1>Acesta este un titlu.</h1>
<p>Acesta este un paragraf.</p>
<p>Acesta este un alt paragraf.</p>
</body>
</html>


Notă: Doar conținutul din secțiunea <body> (zona albă de mai sus) este afișat într-un browser.

Declarația <! DOCTYPE>
  • Declarația <! DOCTYPE> reprezintă tipul de document și ajută browserele să afișeze corect paginile web.
  • Trebuie să apară o singură dată, în partea de sus a paginii (înaintea oricărei etichete HTML).
  • Declarația <! DOCTYPE> nu este sensibilă la litere mari și mici.
  • Declarația <! DOCTYPE> pentru HTML5 este:
<!DOCTYPE html>
Versiuni HTML

Încă din primele zile ale web-ului, au existat multe versiuni de HTML:
 
Versiune An
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014

Elemente de bază HTML: img, button, ul

Vezi videoclipul: Elemente de bază HTML: img, button, u... Vezi toată lecția: Elemente de bază HTML Citește teoria: Elemente de bază HTML: img, button, u...
Imagini HTML
  • Imaginile HTML sunt definite cu eticheta <img>.
  • Fișierul sursă (src), textul alternativ (alt), lățimea și înălțimea sunt furnizate ca atribute:
Exemplu: 
<img src="lectii-virtuale.jpg" alt="lectii-virtuale.ro" width="104" height="142">
Butoane HTML
  • Butoanele HTML sunt definite cu eticheta <button>:
Exemplu: 
<button>Faceți click pe mine!</button>
Liste HTML
  • Listele HTML sunt definite cu eticheta <ul> (lista neordonată / bullet list) sau eticheta <ol> (listă ordonată / numerotată), urmată de tag-uri (elemente de listă):
Exemplu:
  
<ul>
  <li>Cafea</li>
  <li>Ceai</li>
  <li>Lapte</li>
</ul>

<ol>
  <li>Cafea</li>
  <li>Ceai</li>
  <li>Lapte</li>
</ol>

Elemente de bază HTML: DOCTYPE, html, body, h, p, a

Vezi videoclipul: Elemente de bază HTML: DOCTYPE, html,... Vezi toată lecția: Elemente de bază HTML Citește teoria: Elemente de bază HTML: DOCTYPE, html,...

Documente HTML
  • Toate documentele HTML trebuie să înceapă cu o declarație de tip document: <! DOCTYPE html>.
  • Însuși documentul HTML începe cu <html> și se termină cu </html>.
  • Partea vizibilă a documentului HTML este cuprinsă între <body> și </body>.
Exemplu: 
<!DOCTYPE html>
<html>
<body>

<h1>Prima mea rubrică</h1>
<p>Primul meu paragraf.</p>

</body>
</html>
Titluri HTML
  • Titlurile HTML sunt definite cu etichetele de la <h1> la <h6>.
  • <h1> definește rubrica cea mai importantă. <h6> definește titlul cel mai puțin important:
Exemplu:
 
<h1>Acesta este heading 1</h1>
<h2>Acesta este heading 2</h2>
<h3>Acesta este heading 3</h3>

Paragrafe HTML
  • Paragrafele HTML sunt definite cu eticheta <p>:
Exemplu:
 
<p>TAcesta este un paragraf.</p>
<p>Acesta este un alt paragraf.</p>

Linkuri HTML
  • Legăturile HTML sunt definite cu eticheta <a>:
Exemplu: 
/video/basic-html
  • Destinația linkului este specificată în atributul href.
  • Atributele sunt utilizate pentru a furniza informații suplimentare despre elementele HTML.
  • Veți afla mai multe despre atribute într-un alt capitol.

Elemente HTML. Elementul HTML gol br. HTML nu este Case Sensitive

Vezi videoclipul: Elemente HTML. Elementul HTML gol br.... Vezi toată lecția: Elemente HTML Citește teoria: Elemente HTML. Elementul HTML gol br....

Nu uita eticheta finală!

Unele elemente HTML vor fi afișate corect, chiar dacă uitați eticheta finală:

Exemplu: 
<html>
<body>

<p>Acesta este un paragraf
<p>Acesta este un paragraf

</body>
</html>
Exemplul de mai sus funcționează în toate browserele, deoarece eticheta de închidere este considerată opțională.
Nu vă bazați niciodată pe asta. Poate produce rezultate și / sau erori neașteptate dacă uitați eticheta finală.

Elemente HTML goale
  • Elementele HTML fără conținut se numesc elemente goale.
  • <br> este un element gol fără o etichetă de închidere (eticheta <br> definește o pauză de linie):
Exemplu: 
<p>Acesta este un <br> paragraf cu o pauză de linie.</p>
Elementele goale pot fi „închise” în eticheta de deschidere astfel: <br />.
HTML5 nu necesită să fie închise elementele goale. Dar dacă doriți o validare mai strictă sau dacă trebuie să faceți ca documentul dvs. să fie lizibil de către analizatorii XML, trebuie să închideți toate elementele HTML în mod corespunzător.

HTML nu este Case Sensitive
  • Etichetele HTML nu sunt case sensitive: <P> înseamnă la fel ca <p>.
  • Standardul HTML5 nu necesită etichete cu minuscule, dar W3C recomandă minuscule în HTML și necesită minuscule pentru tipuri de documente mai stricte precum XHTML.

Elemente HTML: html,body ,p,h

Vezi videoclipul: Elemente HTML: html,body ,p,h Vezi toată lecția: Elemente HTML Citește teoria: Elemente HTML: html,body ,p,h
Elemente HTML

Un element HTML constă, de obicei, dintr-o etichetă de început și o etichetă finală, cu conținutul introdus între ele: 
<tagname> Conținutul merge aici ... </tagname>
Elementul HTML este totul, de la eticheta de pornire la eticheta finală: 
<p> Primul meu paragraf. </p>
Exemplu:
 
Inceput tag Continut element Sfarsit tag
<h1> Primul meu Heading </h1>
<p> Primul meu paragraf. </p>
<br>    

Elementele HTML fără conținut se numesc elemente goale. Elementele goale nu au o etichetă finală, cum ar fi elementul <br> (care indică o pauză de linie).

Elemente HTML imbricate
  • Elemente HTML pot fi imbricate (elementele pot conține elemente).
  • Toate documentele HTML constau din elemente HTML imbricate.
  • Acest exemplu conține patru elemente HTML:
Exemplu:
  
<!DOCTYPE html>
<html>
<body>

<h1>Primul meu Heading</h1>
<p>Primul meu paragraf.</p>

</body>
</html>

Exemplu explicat:
  • Elementul <html> definește întregul document.
  • Are o etichetă de început <html> și o etichetă finală </html>.
  • În elementul <html> se află elementul <body>.
<html>
<body>

<h1>Primul meu Heading</h1>
<p>Primul meu paragraf.</p>

</body>
</html>
  • Elementul <body> definește corpul documentului.
  • Are o etichetă de început <body> și o etichetă finală </body>.
  • În interiorul elementului <body> se află alte două elemente HTML: <h1> și <p>.
<body>

<h1>Primul meu Heading</h1>
<p>Primul meu paragraf.</p>

</body>
  • Elementul <h1> definește un titlu.
  • Are o etichetă de început <h1> și o etichetă finală </h1>.
  • Conținutul elementului este: Primul meu Heading.
<h1>Primul meu Heading</h1>
  • Elementul <p> definește un alineat.
  • Are o etichetă de început <p> și o etichetă finală </p>.
  • Conținutul elementului este: Primul meu paragraf.
<p>Primul meu paragraf.</p>
 

Atribute HTML: href, src, width, height

Vezi videoclipul: Atribute HTML: href, src, width, heigh... Vezi toată lecția: Atribute HTML Citește teoria: Atribute HTML: href, src, width, heigh...
Atribute HTML

Atributele oferă informații suplimentare despre elementele HTML.
  • Toate elementele HTML pot avea atribute.
  • Atributele oferă informații suplimentare despre un element.
  • Atributele sunt întotdeauna specificate în eticheta de pornire.
  • Atributele vin de obicei în perechi nume / valoare precum:
    nume = "valoare"
Atributul href

Legăturile HTML sunt definite cu eticheta <a>. Adresa de legătură este specificată în atributul href:

Exemplu: 
<a href=""> Acesta este un link </a>
Veți afla mai multe despre link-uri și eticheta <a> mai târziu în acest tutorial.

Atributul src
  • Imaginile HTML sunt definite cu eticheta <img>.
  • Numele de fișier al sursei imaginii este specificat în atributul src:

Exemplu: 
<img src="img_lv.jpg">

Atributele width și height

Imaginile HTML au, de asemenea, atributele width și height, care specifică lățimea și înălțimea imaginii:

Exemplu: 
<img src="img_lv.jpg" width="500" height="600">
În mod implicit, lățimea și înălțimea sunt specificate în pixeli; deci lățime = "500" înseamnă 500 pixeli lățime.
Veți afla mai multe despre imagini în capitolul nostru Imagini HTML.

Atribute HTML: alt, lang, title

Vezi videoclipul: Atribute HTML: alt, lang, title Vezi toată lecția: Atribute HTML Citește teoria: Atribute HTML: alt, lang, title
Atributul alt

Atributul alt specifică un text alternativ care trebuie utilizat, dacă nu poate fi afișată o imagine.
Valoarea atributului alt poate fi citită de cititorii de ecran. În acest fel, cineva „ascultă” pagina web, de ex. o persoană cu deficiență de vedere, poate „auzi” elementul.

Exemplu: 
<img src = "img_girl.jpg" alt = "Fată cu sacou">

Atributul alt este de asemenea util dacă imaginea nu poate fi afișată (de exemplu, dacă nu există):

Exemplu:

Vedeți ce se întâmplă dacă încercăm să afișăm o imagine care nu există:
  
<img src = "img_typo.jpg" alt = "Fată cu sacou">
Atributul style

Atributul style este utilizat pentru a specifica stilul unui element, cum ar fi culoarea, fontul, dimensiunea etc.

Exemplu: 
<p style = "color: red"> Acesta este un paragraf. </p>

Atributul lang 
  • Limbajul documentului poate fi declarat în eticheta <html>.
  • Limbajul este declarat cu atributul lang.
  • Declararea unui limbaj este importantă pentru aplicațiile de accesibilitate (cititoare de ecran) și  pentru motoarele de căutare:
Exemplu: 
<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>
Primele două litere specifică limba (en). Dacă există un dialect, adăugați încă două litere (SUA).

Atributul title

Aici, atributul title este adaugat la elementul <p>. Valoarea atributului title va fi afișată sub forma unui tooltip când treceți cu mouse-ul peste paragraf:

Exemplu: 
<p title = "Sunt un tooltip">
Acesta este un paragraf.
</ p>

Atribute HTML. Scrierea numelor de atribute cu lowercase. Folosirea ghilimelelor în jurul valorilor atributelor.

Vezi videoclipul: Atribute HTML. Scrierea numelor de atr... Vezi toată lecția: Atribute HTML Citește teoria: Atribute HTML. Scrierea numelor de atr...
Vă sugerăm: Utilizați atributele Lowercase (minuscule)!
  • Standardul HTML5 nu necesită nume de atribute lowercase (minuscule).
  • Atributul title poate fi scris cu uppercase (majuscule) sau cu lowercase (minuscule), de exemplu: TITLE sau title.
  • Vă recomandăm lowercase (minuscule) în HTML și este necesar lowercase (minuscule) pentru tipuri de documente mai stricte precum XHTML.
Vă sugerăm: Citați valorile atributelor!
  • Standardul HTML5 nu necesită ghilimele în jurul valorilor atributului.
  • Atributul href, prezentat mai sus, poate fi scris fără ghilimele:
Greșit: 
<a href=https://www.lectii-virtuale.ro>

Corect: 
<a href="">
  • Vă recomandăm ghilimele în HTML și solicităm ghilimele pentru tipuri de documente mai stricte precum XHTML.
  • Uneori este necesar să folosiți ghilimele. Acest exemplu nu va afișa corect atributul title, deoarece conține un spațiu:
Exemplu: 
<p title = Despre Lectii Virtuale>
Utilizarea ghilimelelor este cea mai frecventă. Omiterea lor poate produce erori.
La Lectii virtuale folosim întotdeauna ghilimele în jurul valorilor atributelor.

Ghilimele simple sau duble?

Ghilimelele duble în jurul valorilor atributelor sunt cele mai frecvente în HTML, dar pot fi utilizate și ghilimele simple.
În unele situații, când valoarea atributului conține ghilimele duble, este necesar să folosiți ghilimele simple:

Exemplu: 
<p title='Ion "ShotGun" Popescu'>
Sau vice versa: 
<p title = "Ion 'ShotGun' Popescu">

Rezumat:
  • Toate elementele HTML pot avea atribute.
  • Atributul title oferă informații suplimentare despre
    „tool-tip”.
  • Atributul href oferă informații de adresă pentru linkuri.
  • Atributele width și height oferă informații despre mărimea imaginilor.
  • Atributul alt oferă text pentru cititorii de ecran.
  • Folosim întotdeauna nume de atribute cu lowercase (minuscule).
  • Cităm întotdeauna valorile atributului.

Titluri HTML. Etichetele de la h1 la h6. Specificarea dimensiunii unui heading cu atributul style, folosind proprietatea CSS font-size.

Vezi videoclipul: Titluri HTML. Etichetele de la h1 la h... Vezi toată lecția: Titluri HTML Citește teoria: Titluri HTML. Etichetele de la h1 la h...
Titluri HTML (HTML Headings)

Exemplu:

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Titlurile (headings) sunt definite cu etichete de la <h1> la <h6>.
<h1> definește rubrica cea mai importantă. <h6> definește titlul cel mai puțin important.

Exemplu: 
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Notă: Navigatoarele adaugă automat puțin spațiu alb (o marjă) înainte și după o rubrică.

Titlurile (headings) sunt importante

Motoarele de căutare utilizează headings pentru a indexa structura și conținutul paginilor dvs. web.
Utilizatorii deseori parcurg în grabă o pagină in functie de titlurile (headings) acesteia. Este important să folosiți headings pentru a arăta structura documentului.
Titlurile (headings) <h1> ar trebui utilizate pentru titlurile principale, urmate de <h2>, apoi cele mai puțin importante <h3> și așa mai departe.

Notă: Utilizați titluri (headings) HTML doar pentru titluri. Nu folosiți titluri( headings) pentru a face textul BIG sau bold.

Titluri (headings) mai mari

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:

Exemplu: 
<h1 style="font-size:60px;">Heading 1</h1>

Titluri HTML. Eticheta head - container pentru metadate. Definirea titlului documentului utilizand metadatele.

Vezi videoclipul: Titluri HTML. Eticheta head - containe... Vezi toată lecția: Titluri HTML Citește teoria: Titluri HTML. Eticheta head - containe...
Eticheta <hr> în HTML

Eticheta <hr> definește o pauză tematică într-o pagină HTML și este afișată cel mai adesea ca o regulă orizontală.
Elementul <hr> este utilizat pentru a separa conținutul (sau a defini o modificare) într-o pagină HTML:

Exemplu: 
<h1> Acesta este heading 1 </h1>
<p> Acesta este un text. </p>
<hr>
<h2> Acesta este heading 2 </h2>
<p> Acesta este un alt text. </p>
<hr>
Elementul HTML <head>

Elementul HTML <head> este un container pentru metadate. Metadatele HTML sunt date despre documentul HTML. Metadatele nu sunt afișate.
Elementul <head> este plasat între eticheta <html> și eticheta <body>:

Exemplu: 

<! DOCTYPE html>
<html>

<head>
   <title> Primul meu HTML </title>
   <meta charset = "UTF-8">
</head>

<body>
.
.
.
Notă: Metadatele definesc de obicei titlul documentului, setul de caractere, stilurile, scripturile și alte informații meta.

Titluri HTML. Vizualizarea codului sursă HTML cu View Page Source. Inspectarea unui element HTML cu Inspect Element.

Vezi videoclipul: Titluri HTML. Vizualizarea codului sur... Vezi toată lecția: Titluri HTML Citește teoria: Titluri HTML. Vizualizarea codului sur...
Cum să vizualizați sursă HTML?

Ai văzut vreodată o pagină web și te-ai întrebat "Hei! Cum au făcut asta?"

Vizualizați codul sursă HTML:

Faceți click dreapta pe o pagină HTML și selectați "View Page Source"/„Vizualizați sursa paginii” (în Chrome) sau "View Source"/„Vizualizați sursa” (în Edge) sau altele similare în alte browsere. Aceasta va deschide o fereastră care conține codul sursă HTML al paginii.

Inspectați un element HTML:

Faceți click dreapta pe un element (sau o zonă goală) și alegeți "Inspect"/„Inspectați” sau "Inspect Element"/„Inspectați elementul” pentru a vedea din ce elemente sunt alcătuite (veți vedea atât cod HTML cât și CSS). De asemenea, puteți edita în timp real cod HTML sau CSS în panoul Elements/Elemente sau Styles/Stiluri care se deschide.

Referință pentru etichete HTML:
 
Etichetă Descriere
<html> Definește rădăcina unui document HTML
<body> Definește corpul documentului
<head> Un container pentru toate elementele head (titlu, scripturi, stiluri, informații meta și multe altele)
<h1> to <h6> Definește titlurile/ headings HTML
<hr> Definește o schimbare tematica a continutului

Paragrafe HTML. Definirea unui text preformatat folosind eticheta pre.

Vezi videoclipul: Paragrafe HTML. Definirea unui text pr... Vezi toată lecția: Paragrafe HTML Citește teoria: Paragrafe HTML. Definirea unui text pr...
Problema Poemelor

Acest poem va fi afișat pe o singură linie:

Exemplu: 
<p>
   Bonnie-ul meu se află peste ocean.

   Bonnie-ul meu se află peste mare.

   Bonnie-ul meu se află peste ocean.

   O, adu-mi-l înapoi pe Bonnie.
</p>
Elementul HTML <pre>

Elementul HTML <pre> definește textul preformatat.
Textul din interiorul unui element <pre> este afișat într-un font cu lățime fixă (de obicei Courier) și păstrează atât spațiile cât și pauzele de linie:

Exemplu: 
<pre>
   Bonnie-ul meu se află peste ocean.

   Bonnie-ul meu se află peste mare.

   Bonnie-ul meu se află peste ocean.

   O, adu-mi-l înapoi pe Bonnie.
</pre>
Referință pentru etichete HTML

Informații suplimentare despre elementele HTML și atributele acestora:
 
Etichetă Descriere
<p> Definește un paragraf
<br> Inserează o singură pauză de linie
<pre> Definește textul preformatat

Paragrafe HTML. Definirea unui paragraf cu eticheta p. Definirea unei pauze de linie folosind eticheta br.

Vezi videoclipul: Paragrafe HTML. Definirea unui paragra... Vezi toată lecția: Paragrafe HTML Citește teoria: Paragrafe HTML. Definirea unui paragra...
Paragrafe HTML

Elementul HTML <p> definește un alineat:

Exemplu: 
<p> Acesta este un paragraf. </p>
<p> Acesta este un alt paragraf. </p>

Notă: Navigatoarele adaugă automat un spațiu alb (o marjă) înainte și după un paragraf.

Afișare în HTML
  • Nu puteți fi sigur cum va fi afișat codul HTML.
  • Ecrane mari sau mici și redimensionarea ferestrelor vor crea rezultate diferite.
  • Cu HTML, nu puteți modifica ieșirea adăugând spații suplimentare sau linii suplimentare în codul dvs. HTML.
  • Browserul va elimina orice spații și linii suplimentare atunci când este afișată pagina:
Exemplu: 
<p>
Acest paragraf
conține o mulțime de linii
în codul sursă,
dar browserul
o ignoră.
</p>

<p>
Acest paragraf
conține o mulțime de spații
în codul sursă,
dar browserul
o ignoră.
</p>
Nu uita eticheta finală

Majoritatea browserelor vor afișa corect codul HTML chiar dacă uitați eticheta finală:

Exemplu: 
<p> Acesta este un paragraf.
<p> Acesta este un alt paragraf.
Exemplul de mai sus va funcționa în majoritatea browserelor, dar nu vă bazați pe acest lucru.

Notă: Renunțarea la eticheta finală poate produce rezultate sau erori neașteptate.

Pauze de linii (Line Breaks) în HTML 
  • 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:
Exemplu: 
<p> Acesta este un paragraf <br> cu pauza de linie. </p>
Eticheta <br> este o etichetă goală, ceea ce înseamnă că nu are o etichetă finală.

Stiluri HTML. Setarea stilului unui element HTML folosind atributul style. Definirea culorii de fundal pentru un element HTML folosind proprietatea background-color.

Vezi videoclipul: Stiluri HTML. Setarea stilului unui el... Vezi toată lecția: Stiluri HTML Citește teoria: Stiluri HTML. Setarea stilului unui el...
Stiluri HTML 

Exemplu:

I am Red

I am Blue

I am Big

Atributul style in HTML
  • Setarea stilului unui element HTML, se poate face cu atributul style.
  • Atributul HTML style are urmatoarea sintaxa:
<tagname style="property:value;">
Proprietatea este o proprietate CSS. Valoarea este o valoare CSS.

Background Color
  • Proprietatea CSS background-color definește culoarea de fundal pentru un element
    HTML.
  • Acest exemplu stabilește culoarea de fundal a unei pagini la powderblue:
Exemplu: 
<body style = "background-color: powderblue;">
<h1> Acesta este un titlu </h1>
<p> Acesta este un paragraf. </p>
</body>

Stiluri HTML. Proprietăţiile CSS folosite pentru definirea stilurilor: color, font-family, font-size, text-align.

Vezi videoclipul: Stiluri HTML. Proprietăţiile CSS folos... Vezi toată lecția: Stiluri HTML Citește teoria: Stiluri HTML. Proprietăţiile CSS folos...
Culoarea textului (Text Color)

Proprietatea CSS color definește culoarea textului pentru un element HTML:

Exemplu: 
<h1 style = "color: blue;"> Acesta este un titlu </h1>
<p style = "color: red;"> Acesta este un paragraf. </p>
Fonturi

Proprietatea CSS font-family definește fontul care va fi folosit pentru un element HTML:

Exemplu: 
<h1 style = "font-family: verdana;"> Acesta este un titlu </h1>
<p style = "font-family: courier;"> Acesta este un paragraf. </p>
Mărimea textului (Text Size)

Proprietatea CSS font-size definește dimensiunea textului pentru un element HTML:

Exemplu: 
<h1 style = "font-size: 300%;"> Acesta este un titlu </h1>
<p style = "font-size: 160%;"> Acesta este un paragraf. </p>

Aliniere text (Text Alignment)

Proprietatea CSS text-align definește alinierea textului orizontal pentru un element HTML:

Exemplu: 
<h1 style = "text-align: center;"> Titlu centrat </h1>
<p style = "text-align: center;"> Paragraf centrat. </p>

Rezumat:
  • Utilizați atributul style pentru stilul elementelor HTML.
  • Utilizați background-color pentru culoarea de fundal.
  • Utilizați color pentru culorile textului.
  • Utilizați font-family pentru fonturile textului.
  • Utilizați font-size pentru dimensiunile textului.
  • Folosiți text-align pentru alinierea textului.

Formatare text în HTML. Elemente de formatare în HTML: b, strong, i, em, small

Vezi videoclipul: Formatare text în HTML. Elemente de fo... Vezi toată lecția: Formatare text în HTML Citește teoria: Formatare text în HTML. Elemente de fo...
Formatare text in HTML

Formatare text:

Exemplu:

Acest text este îngroșat

Acest text este italic

Acesta este subscript și superscript

Elemente de formatare în HTML

În capitolul precedent, ați aflat despre atributul style în HTML.
HTML definește, de asemenea, elemente speciale pentru definirea textului cu o semnificație specială.
HTML folosește elemente precum <b> și <i> pentru formatarea ieșirii, cum ar fi textul cu caractere bold sau italic.
Elementele de formatare au fost proiectate pentru a afișa tipuri speciale de text:
  • <b> - Text cu caractere bold.
  • <strong> - Text important.
  • <i>- Text italic.
  • <em> - Text accentuat.
  • <mark> - Text marcat.
  • <small> - Text mic.
  • <del> - Text șters.
  • <ins> - Text inserat.
  • <sub> - Text subscript.
  • <sup> - Text suprapus.
Elementele HTML <b> și <strong>

Elementul HTML <b> definește textul bold, fără nici o importanță suplimentară.

Exemplu: 
<b> Acest text este bold </b>
Elementul HTML <strong> definește un text intens, cu o importanță „puternică” semantică adăugată. 
<strong> Acest text este intens </strong>
Elementele HTML <i> și <em>

Elementul HTML <i> definește textul italic, fără nicio importanță suplimentară.

Exemplu: 
<i> Acest text este italic </i>
Elementul HTML <em> definește textul subliniat, cu o importanță semantică adăugată. 
<em> Acest text este subliniat </em>
Notă: Navigatoarele afișează <strong> ca <b> și <em> ca <i>. Cu toate acestea, există o diferență în sensul acestor etichete: <b> și <i> definesc textul bold respectiv italic, dar <strong> și <em> înseamnă că textul este „important”.

Elementul HTML <small>

Elementul HTML <small> definește textul mai mic:

Exemplu: 
<h2> HTML <small> Mic </small> Formatare </h2>

Formatare text în HTML. Elemente de formatare în HTML: mark, del, ins, sub, sup

Vezi videoclipul: Formatare text în HTML. Elemente de fo... Vezi toată lecția: Formatare text în HTML Citește teoria: Formatare text în HTML. Elemente de fo...
Elementul HTML <mark>

Elementul HTML <mark> definește textul marcat / evidențiat:

Exemplu: 
<h2> HTML <mark> Marcat </mark> Formatare </h2>

Elementul HTML <del>

Elementul HTML <del> definește textul șters / eliminat.

Exemplu: 
<p> Culoarea mea preferată este <del> albastru </del> roșu. </p>

Elementul HTML <ins>

Elementul HTML <ins> definește textul inserat / adăugat.

Exemplu: 
<p>Culoarea mea<ins> preferata</ins>este roșu.</p>
Elementul HTML <sub>

Elementul HTML <sub> definește textul subscris.

Exemplu: 
<p> Acesta este <sub> un text </sub> subscris. </p>

Elementul HTML <sup>

Elementul HTML <sup> definește textul suprascriptat.

Exemplu: 
<p> Acesta este <sup> un text </sup> suprascript. </p>

Citate HTML. Elemente de citare și citate în HTML: q, blockquote, abbr.

Vezi videoclipul: Citate HTML. Elemente de citare și cit... Vezi toată lecția: Elemente de citare și citate în HTML Citește teoria: Citate HTML. Elemente de citare și cit...
Elementul HTML <q> pentru citate scurte

Elementul HTML <q> definește un citat scurt.
De obicei, browserele inserează ghilimele în jurul elementului <q>.

Exemplu: 
<p> Scopul WWF este de a: <q> Construi un viitor în care oamenii trăiesc în armonie cu natura. </q> </p>

Elementul HTML <blockquote> pentru citate:

Elementul HTML <blockquote> definește o secțiune care este citată dintr-o altă sursă.
Navigatoarele de obicei indentează elementele <blockquote>.

Exemplu: 
<p> Iată un citat de pe site-ul WWF: </p>
<blockquote cite = "http://www.worldwildlife.org/who/index.html">
Timp de 50 de ani, WWF protejează viitorul naturii.
Organizația mondială de conservare,
WWF funcționează în 100 de țări și este susținut de
1,2 milioane de membri în Statele Unite și
aproape de 5 milioane la nivel global.
</blockquote>
Elementul HTML <abbr> pentru abrevieri

Elementul HTML <abbr> definește o prescurtare sau un acronim.
Marcarea abrevierilor poate oferi informații utile browserelor, sistemelor de traducere și motoarelor de căutare.

Exemplu: 
<p> The <abbr title = "World Health Organization"> WHO </abbr> a fost fondată în 1948. </p>

Citate HTML. Elemente de citare și citate în HTML: address, cite, bdo.

Vezi videoclipul: Citate HTML. Elemente de citare și ci... Vezi toată lecția: Elemente de citare și citate în HTML Citește teoria: Citate HTML. Elemente de citare și ci...
Elementul HTML <address> pentru informații de contact

Elementul HTML <address> definește informațiile de contact (autor / proprietar) ale unui document sau ale unui articol.
Elementul <address> este de obicei afișat în format italic. Majoritatea browserelor vor adăuga o pauză de linie înainte și după element.

Exemplu: 
<address>
Scris de John Doe. <br>
Vizitați-ne la: <br>
Example.com <br>
Box 564, Disneyland <br>
Statele Unite ale Americii
</address>

Elementul HTML <cite> pentru titlul unei lucrări (Work Title)

Elementul HTML <cite> definește titlul unei lucrări.
De obicei, browserele afișează elemente <cite> în format italic.

Exemplu: 
<p> <cite> The Scream </cite> de Edvard Munch. Pictat în 1893. </p>

HTML <bdo> pentru înlocuire bidirecțională.

Elementul HTML <bdo> definește înlocuirea bidirecțională.
Elementul <bdo> este utilizat pentru a trece peste direcția curentă a textului:

Exemplu: 
<bdo dir = "rtl"> Acest text va fi scris de la dreapta la stânga </bdo>

Elemente de citare și citate HTML
 
Etichetă Descriere
<abbr> Definește o prescurtare sau acronim
<address> Definește informațiile de contact pentru autorul / proprietarul unui document
<bdo> Definește direcția textului
<blockquote> Definește o secțiune care este citată dintr-o altă sursă
<cite> Definește titlul unei opere
<q> Definește un scurt citat de linie

Comentarii în codul HTML. Etichete de comentarii în codul HTML.

Vezi videoclipul: Comentarii în codul HTML. Etichete de... Vezi toată lecția: Comentarii în codul HTML Citește teoria: Comentarii în codul HTML. Etichete de...
Etichete de comentarii în codul HTML

Puteți adăuga comentarii la sursa dvs. HTML utilizând următoarea sintaxă: 
<! - Scrie comentariile tale aici ->
Observați că există un punct de exclamare (!) În eticheta de deschidere, dar nu în eticheta de închidere.

Notă: 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:

Exemplu: 
<! - Acesta este un comentariu ->

<p> Acesta este un paragraf. </p>

<! - Nu uitați să adăugați mai multe informații aici ->

Comentariile sunt de asemenea foarte bune pentru depanarea HTML, deoarece puteți comenta câteodată liniile de cod HTML pentru a căuta erori:

Exemplu: 
<! - Nu afișați această imagine momentan
<img border = "0" src = "pic_trulli.jpg" alt = "Trulli">
->

Culori în HTML. Valori de culoare: RGBA, HSLA. Saturaţie și Luminozitate.

Vezi videoclipul: Culori în HTML. Valori de culoare: RGB... Vezi toată lecția: Culori în HTML Citește teoria: Culori în HTML. Valori de culoare: RGB...
Saturaţie

Saturația poate fi descrisă ca intensitatea unei culori.
  • 100% este de culoare pură, fără nuanțe de gri.
  • 50% este 50% gri, dar puteți vedea în continuare culoarea.
  • 0% este complet gri, nu mai puteți vedea culoarea.

Exemplu:



Luminozitate

Luminozitatea unei culori poate fi descrisă cam cât de multă lumină doriți să dați culorii, unde 0% nu înseamnă lumină (negru), 50% înseamnă 50% lumină (nici întuneric, nici lumină) 100% înseamnă lumină completă (alb).

Exemplu:



Nuanțele de gri sunt adesea definite prin setarea nuanței și a saturației la 0 și reglarea luminozitații de la 0% la 100% pentru a obține nuanțe mai închise / mai deschise:

Exemplu:



Valoarea RGBA

Valorile de culoare RGBA sunt o extensie a valorilor de culoare RGB cu un canal alfa - care specifică opacitatea unei culori.
O valoare de culoare RGBA este specificată cu: 
rgba(red, green, blue, alpha)
Parametrul alfa este un număr între 0.0 (complet transparent) și 1.0 (deloc transparent):

Exemplu:



Valoarea HSLA

Valorile de culoare HSLA sunt o extensie a valorilor de culoare HSL cu un canal alfa - care specifică opacitatea unei culori.
O valoare de culoare HSLA este specificată cu: 
hsla(hue, saturation, lightness, alpha)
Parametrul alfa este un număr între 0.0 (complet transparent) și 1.0 (deloc transparent):

Exemplu:


 

Culori în HTML. Valori de culoare: RGB, HEX, HSL

Vezi videoclipul: Culori în HTML. Valori de culoare: RGB... Vezi toată lecția: Culori în HTML Citește teoria: Culori în HTML. Valori de culoare: RGB...
Valori de culoare

În HTML, culorile pot fi de asemenea specificate folosind valori RGB, valori HEX, valori HSL, valori RGBA și valori HSLA:
La fel cu numele de culoare "Tomato":



La fel cu numele de culoare "Tomato", dar transparent 50%:



Exemplu: 
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Valoarea RGB

În HTML, o culoare poate fi specificată ca valoare RGB, folosind această formulă: 
rgb(red, green, blue)
Fiecare parametru (roșu, verde și albastru) definește intensitatea culorii între 0 și 255.
De exemplu, rgb (255, 0, 0) este afișat ca roșu, deoarece roșul este setat la cea mai mare valoare (255), iar celelalte sunt setate pe 0.
Pentru a afișa culoarea neagră, setați toți parametrii de culoare la 0, astfel: rgb (0, 0, 0).
Pentru afișarea albului, setați toți parametrii de culoare la 255, astfel: rgb (255, 255, 255).
Experimentați amestecând valorile RGB de mai jos:


Exemplu:



Nuanțele de gri sunt deseori definite folosind valori egale pentru toate cele 3 surse de lumină:

Exemplu:



Valoarea HEX

În HTML, o culoare poate fi specificată folosind o valoare hexadecimală sub forma: 
#rrggbb
În cazul în care rr (roșu), gg (verde) și bb (albastru) sunt valori hexadecimale între 00 și ff (aceeași ca zecimală 0-255).
De exemplu, # ff0000 este afișat ca roșu, deoarece roșul este setat la cea mai mare valoare (ff), iar celelalte sunt setate la cea mai mică valoare (00).

Exemplu:



Nuanțele de gri sunt deseori definite folosind valori egale pentru toate cele 3 surse de lumină:

Exemplu:



Valoare HSL

În HTML, o culoare poate fi specificată folosind nuanță, saturație și lumină (HSL) sub forma: 
hsl(hue, saturation, lightness)
Hue este un grad pe roata de culoare de la 0 la 360. 0 este roșu, 120 este verde și 240 albastru.
Saturation este o valoare procentuală, 0% înseamnă o nuanță de gri, iar 100% este culoarea completă.
Lightness este o valoare procentuală, 0% este negru, 50% nu este nici lumină, nici întunecată, 100% este alb

Exemplu:


 

Culori în HTML. Stiluri aplicate culorilor: background-color, color, border.

Vezi videoclipul: Culori în HTML. Stiluri aplicate culor... Vezi toată lecția: Culori în HTML Citește teoria: Culori în HTML. Stiluri aplicate culor...
Culori in codul HTML

Culorile in codul HTML sunt specificate folosind nume de culori predefinite sau valori RGB, HEX, HSL, RGBA, HSLA.

Nume de culoare

În HTML, o culoare poate fi specificată folosind un nume de culoare:
 

HTML acceptă 140 de nume standard de culori.

Culoare de fundal (Background Color)

Puteți seta culoarea de fundal (Background Color) pentru elementele HTML:



Exemplu: 
<h1 style = "background-color: DodgerBlue;"> Hello World </h1>
<p style = "background-color: Tomato;"> Lorem ipsum ... </p>
Culoarea textului (Text Color)

Puteți seta culoarea textului:


Exemplu: 
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Border Color

Puteți seta culoarea marginilor:



Exemplu: 
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Stiluri CSS în HTML. Atribute: id, class. Referințe externe: external style sheets.

Vezi videoclipul: Stiluri CSS în HTML. Atribute: id, cla... Vezi toată lecția: Stiluri CSS în HTML Citește teoria: Stiluri CSS în HTML. Atribute: id, cla...
Atributul id

Pentru a defini un stil specific pentru un element special, adăugați un atribut id elementului: 
<p id = "p01"> Sunt diferit </p>
apoi definiți un stil pentru elementul cu id-ul specific:

Exemplu: 
#p01 {
  color: blue;
}
Notă: Id-ul unui element ar trebui să fie unic într-o pagină, astfel încât selectorul de id să fie utilizat pentru a selecta un element unic!

Atributul class

Pentru a defini un stil pentru tipuri speciale de elemente, adăugați un atribut de clasă elementului: 
<p class = "error"> Sunt diferit </p>
apoi definiți un stil pentru elementele cu clasa specifică:

Exemplu: 
p.error {
  color: red;
}

Referințe externe

Foile de stil externe (external style sheets) pot fi trimise cu o adresă URL completă sau cu o cale relativă la pagina web curentă.
Acest exemplu utilizează o adresă URL completă pentru a face legătura cu o foaie de stil (style sheet):

Exemplu: 
<link rel="stylesheet" href="/html/styles.css">
Acest exemplu se leagă la o foaie de stil localizată în folderul html de pe site-ul web curent:

Exemplu: 
<link rel="stylesheet" href="/html/styles.css">
Acest exemplu se leagă la o foaie de stil localizată în același folder cu pagina curentă:

Exemplu: 
<link rel="stylesheet" href="styles.css">

Rezumat
  • 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.

HTML Style Tags
 
Etichetă Descriere
<style> Definește informațiile despre stil pentru un document HTML
<link> Definește o legătură între un document și o resursă externă
 

Stiluri CSS în HTML. Adăugarea de CSS la elementele HTML: inline cu atributul style, intern folosind elementul style și extern folosind elementul link.

Vezi videoclipul: Stiluri CSS în HTML. Adăugarea de CSS... Vezi toată lecția: Stiluri CSS în HTML Citește teoria: Stiluri CSS în HTML. Adăugarea de CSS...
Stiluri CSS în HTML


Modelarea HTML cu CSS

CSS înseamnă Cascading Style Sheets.
CSS descrie modul în care elementele HTML trebuie să fie afișate pe ecran, pe hârtie sau în alte suporturi.
CSS economisește multă muncă. Poate controla aspectul mai multor pagini web simultan.
CSS poate fi adăugat la elementele HTML în 3 moduri:
  • Inline - prin utilizarea atributului style în elementele HTML.
  • Intern - folosind un element <style> în secțiunea <head>.
  • Extern - folosind un fișier CSS extern.
Cel mai obișnuit mod de a adăuga CSS, este să păstrați stilurile în fișiere CSS separate. Totuși, aici vom folosi stilul intern și inline, deoarece acest lucru este mai ușor de demonstrat și mai ușor pentru tine să îl încerci singur.

Stilul CSS Inline

Un CSS inline este utilizat pentru a aplica un stil unic la un singur element HTML.
Un CSS inline utilizează atributul style al unui element HTML.
Acest exemplu stabilește culoarea textului elementului <h1> pe albastru:

Exemplu: 
<h1 style = "color: blue;"> Acesta este un titlu albastru </h1>

Stilul CSS intern

Un CSS intern este utilizat pentru a defini un stil pentru o singură pagină HTML.
Un CSS intern este definit în secțiunea <head> a unei pagini HTML, în cadrul unui element <style>:

Exemplu: 
<! DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {culoare: albastru;}
p {culoare: roșu;}
</style>
</head>
<body>

<h1> Acesta este un titlu </h1>
<p> Acesta este un paragraf. </p>

</ body>
</ html>

Stilul CSS extern

O foaie de stil extern (external style sheet) este utilizată pentru a defini stilul pentru multe pagini HTML.
Cu o foaie de stil extern (external style sheet), puteți schimba aspectul unui întreg site web, schimbând un fișier!
Pentru a utiliza o foaie de stil extern (external style sheet), adăugați o legătură la aceasta în secțiunea <head> a paginii HTML:

Exemplu: 
<! DOCTYPE html>
<html>
<head>
   <link rel = "stylesheet" href = "styles.css">
</head>
<body>

<h1> Acesta este un titlu </h1>
<p> Acesta este un paragraf. </p>

</body>
</html>
O foaie de stil extern (external style sheet) poate fi scrisă în orice editor de text. Fișierul nu trebuie să conțină niciun cod HTML și trebuie salvat cu o extensie .css.
Iată cum arată „styles.css”: 
body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

Stiluri CSS în HTML. Fonturi CSS: color, font-family, font-size. Proprietăți CSS: border, padding, margin.

Vezi videoclipul: Stiluri CSS în HTML. Fonturi CSS: colo... Vezi toată lecția: Stiluri CSS în HTML Citește teoria: Stiluri CSS în HTML. Fonturi CSS: colo...
Fonturi CSS

Proprietatea CSS color  definește culoarea textului ce trebuie utilizat.
Proprietatea CSS font-family definește fontul care trebuie utilizat.
Proprietatea CSS font-size definește dimensiunea textului care trebuie utilizat.

Exemplu: 
<! DOCTYPE html>
<html>
<head>
<style>
h1 {
   color: albastru;
   font-family: verdana;
   font-size: 300%;
}
p {
   color: rosu;
   font-family: curier;
   font-size: 160%;
}
</style>
</head>
<body>

<h1> Acesta este un titlu. </h1>
<p> Acesta este un paragraf. </p>

</body>
</html>

Proprietatea CSS border

Proprietatea CSS border definește un chenar în jurul unui element HTML:

Exemplu: 
p {
  border: 1px solid powderblue;
}

Proprietatea CSS padding

Proprietatea CSS padding definește un padding (spațiu) între text și chenar:

Exemplu: 
p {
  border: 1px solid powderblue;
  padding: 30px;
}

Proprietatea CSS margin

Proprietatea CSS margin definește o marjă (spațiu) în afara lui border:

Exemplu: 
p {
  border: 1px solid powderblue;
  margin: 50px;
}

Link-uri HTML. Marcajele HTML: bookmark. Paginile externe referite cu o adresă URL.

Vezi videoclipul: Link-uri HTML. Marcajele HTML: bookmar... Vezi toată lecția: Linkuri HTML Citește teoria: Link-uri HTML. Marcajele HTML: bookmar...
Link-uri HTML - Creați un Bookmark

Marcajele HTML (bookmarks) 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ă.
Pentru a crea un marcaj (bookmark), trebuie mai întâi să creați marcajul, apoi să adăugați un link la acesta.
Când faceți click pe link, pagina va defila cu marcajul la locație.

Exemplu:

Mai întâi, creați un marcaj (bookmark) cu atributul id:
  
<h2 id = "C4"> Capitolul 4 </h2>

Apoi, adăugați un link către marcaj (bookmark) („Salt la capitolul 4”), din interiorul aceleiași pagini:
  
<a href="#C4"> Salt la capitolul 4 </a>

Sau adăugați un link către marcaj (bookmark) ("Salt la capitolul 4"), de pe o altă pagină:

Exemplu: 
<a href="html_demo.html#C4"> Salt la capitolul 4 </a>

Căi externe(External Paths)

Paginile externe pot fi referite cu o adresă URL completă sau cu o cale relativă la pagina web curentă.
Acest exemplu utilizează o adresă URL completă pentru a face link către o pagină web:

Exemplu: 
<a href="/html/default.asp"> Tutorial HTML </a>

Acest exemplu se leagă la o pagină aflată în folderul html de pe site-ul web curent:

Exemplu: 
<a href="/html/default.asp"> Tutorial HTML </a>

Acest exemplu se leagă la o pagină situată în același folder cu pagina curentă:

Exemplu: 
<a href="default.asp"> Tutorial HTML </a>

Rezumat
  • 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ă
  • Utilizați atributul href (href = "# valoare") pentru a face legătura cu marcajul (bookmark).
Etichete de legătură HTML
 
Etichetă Descriere
<a> Definește un hyperlink
 

Link-uri HTML. Definirea hiperlink-urilor cu eticheta HTML a. Link-uri locale. Culorile Link-urilor în HTML.

Vezi videoclipul: Link-uri HTML. Definirea hiperlink-uri... Vezi toată lecția: Linkuri HTML Citește teoria: Link-uri HTML. Definirea hiperlink-uri...
Link-uri HTML

Link-urile se găsesc în aproape toate paginile web. Link-urile permit utilizatorilor să facă clic pe drumul lor de la pagină la pagină.

Link-uri HTML - hyperlink-uri

Link-urile HTML sunt hyperlink-uri.
Puteți face click pe un link și să săriți la un alt document.
Când mutați mouse-ul peste un link, săgeata mouse-ului se va transforma într-o mână mică.

Notă: Un link nu trebuie să fie text. Poate fi o imagine sau orice alt element HTML.

Link-uri HTML - Sintaxă

Hiperlink-urile sunt definite cu eticheta HTML <a>: 
<a href="url">link text</a>
Exemplu: 
<a href="/html/"> Accesați tutorialul nostru HTML </a>
Atributul href specifică adresa de destinație (/html/) a link-ului.
Textul link-ului este partea vizibilă (Vizitați tutorialul nostru HTML).
Făcând click pe link-ul text, vă veți trimite la adresa specificată.

Notă: Fără o tăiere înainte (forward slash) la sfârșitul adreselor de subfolder, puteți genera două solicitări către server. Multe servere vor adăuga automat o tăiere înainte (forward slash) la sfârșitul adresei și apoi vor crea o nouă solicitare.

Link-uri locale

Exemplul de mai sus a utilizat o adresă URL absolută (o adresă web completă).
Un link local (link către același site web) este specificat cu o adresă URL relativă (fără https: // www ....).

Exemplu: 
<a href="html_images.asp"> Imagini HTML </a>
HTML Link Colors

În mod implicit, un link va apărea astfel (în toate browserele):
  • Un link nevăzut este subliniat și albastru.
  • Un link vizitat este subliniat și violet.
  • Un link activ este subliniat și roșu.
Puteți modifica culorile implicite, folosind CSS:

Exemplu: 
<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
Link-urile sunt adesea stilate ca butoane, folosind CSS:

Acesta este un link
Exemplu
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

Link-uri HTML. Atributul target. Imaginea ca link: elementul img. Titluri Link: atributul title

Vezi videoclipul: Link-uri HTML. Atributul target. Imagi... Vezi toată lecția: Linkuri HTML Citește teoria: Link-uri HTML. Atributul target. Imagi...
Link-uri HTML - Atributul țintă

Atributul țintă specifică unde se poate deschide documentul legat.
Atributul țintă poate avea una dintre următoarele valori:
  • _blank - Deschide documentul legat într-o nouă fereastră sau tab.
  • _self - Deschide documentul legat în aceeași fereastră / tab în care a fost făcut click (acesta este implicit).
  • _parent - Deschide documentul legat în cadrul părinte.
  • _top - Deschide documentul legat în corpul complet al ferestrei.
  • framename - Deschide documentul legat într-un cadru numit.
Acest exemplu va deschide documentul legat într-o fereastră / tab-ul noului browser:

Exemplu: 
<a href="/" target="_blank"> Vizitați lectii-virtuale.ro! </a>
Sfat: Dacă pagina dvs. web este blocată într-un cadru, puteți utiliza target = "_ top" pentru a ieși din cadru:

Exemplu: 
<a href="/html/" target="_top"> Tutorial HTML5! </a>

Link-uri HTML - Imagine ca link

Este comună utilizarea imaginilor ca link-uri:

Exemplu: 
<a href="default.asp">
  <img src="smiley.gif" alt="Tutorial HTML" style="width:42px;height:42px;border:0;">
</a>
Notă: border: 0; este adăugat pentru a împiedica IE9 (și versiunile anterioare) să afișeze un chenar în jurul imaginii (când imaginea este o legătură).

Link Titles

Atributul title specifică informații suplimentare despre un element. Informațiile sunt prezentate cel mai adesea ca un text de tip tooltip atunci când mouse-ul se deplasează peste element.

Exemplu: 
<a href="/html/" title="Accesează secțiunea HTML pentru lectii-virtuale"> Vizitați tutorialul nostru HTML </a>

Imagini în HTML. Utilizarea proprietăţii float. Imaginea ca link cu img, src, a, map, usemap, area, picture. Imagini animate cu gif.

Vezi videoclipul: Imagini în HTML. Utilizarea proprietăţ... Vezi toată lecția: Imagini în HTML Citește teoria: Imagini în HTML. Utilizarea proprietăţ...
Imagini într-un alt folder

Dacă nu este specificat, browserul se așteaptă să găsească imaginea în același folder ca și pagina web.
Cu toate acestea, este comună stocarea imaginilor într-un sub-folder. Apoi, trebuie să includeți numele folder-ului în atributul src:

Exemplu: 
<img src="/images/html5.gif" alt="Pictograma HTML5" style="width:128px;height:128px;">

Imagini de pe un alt server

Unele site-uri web își depozitează imaginile pe serverele de imagini.
De fapt, puteți accesa imagini de pe orice adresă web din lume:

Exemplu: 
<img src="/images/lectii-virtuale.jpg" alt="lectii-virtuale.ro">

Imagini animate

HTML permite GIF-urile animate:

Exemplu: 
<img src="programare.gif" alt="Computer Man" style="width:48px;height:48px;">

Imaginea ca link

Pentru a utiliza o imagine ca link, puneți eticheta <img> în eticheta <a>:

Exemplu: 
<a href="default.asp">
  <img src="smiley.gif" alt="Tutorial HTML"" style="width:32px;height:32px;border:0;">
</a>

Notă: border: 0; este adăugat pentru a împiedica IE9 (și versiunile anterioare) să afișeze un chenar în jurul imaginii (când imaginea este un link).

Imagine plutitoare (Image Floating)

Utilizați proprietatea CSS float pentru a lăsa imaginea să plutească la dreapta sau la stânga unui text:

Exemplu: 
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
Imaginea va pluti în dreapta textului.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
Imaginea va pluti în stânga textului.</p>

Cititoare de ecran HTML(HTML Screen Readers)

Un cititor de ecran (HTML Screen Reader) este un program software care citește codul HTML, transformă textul și permite utilizatorului să „asculte” conținutul.
Cititoarele de ecran (HTML Screen Readers) sunt utile pentru persoanele cu deficiențe de vedere sau cu dizabilități de învățare.

Rezumat
  • 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.
Notă: Încărcarea imaginilor necesită timp. Imaginile mari pot încetini pagina. Folosiți cu atenție imaginile.

Etichete de imagine HTML (HTML Image Tags)
 
Etichetă Descriere
<img> Definește o imagine
<map> Definește o imagine-hartă (image-map)
<area> Definește o zonă cu care se poate face click în interiorul unei hărţi (image-map)
<picture> Definește un container pentru mai multe resurse de imagine

Imagini în HTML. Definirea imaginilor cu eticheta img. Specificarea adresei URL cu atributul src.

Vezi videoclipul: Imagini în HTML. Definirea imaginilor... Vezi toată lecția: Imagini în HTML Citește teoria: Imagini în HTML. Definirea imaginilor...
Imagini în HTML

Imaginile pot îmbunătăți designul și aspectul unei pagini web.



Exemplu: 
<img src = "trulli.jpg" alt = "Trulli italian">


Exemplu: 
<img src="img_men.jpg" alt="Barbat într-o jacketă">



Exemplu: 
<img src = "img_locorotondo.jpg" alt = "Flori în Locorotondo">
Sintaxa imaginilor în HTML

În HTML, imaginile sunt definite cu eticheta <img>.
Eticheta <img> este goală, conține doar atribute și nu are o etichetă de închidere.
Atributul src specifică adresa URL (adresa web) a imaginii:

Exemplu: 
<img src="url">

Imagini în HTML . Atributul HTML alt pentru definirea unui text alternativ pentru o imagine. Atributele HTML width si height pentru definirea dimensiunii imaginii.

Vezi videoclipul: Imagini în HTML . Atributul HTML alt p... Vezi toată lecția: Imagini în HTML Citește teoria: Imagini în HTML . Atributul HTML alt p...
Atributul alt

Atributul alt oferă un text alternativ pentru o imagine, dacă utilizatorul din anumite motive nu îl poate vizualiza (din cauza conexiunii lente, a unei erori în atributul src sau dacă utilizatorul utilizează un cititor de ecran).
Valoarea atributului alt ar trebui să descrie imaginea:

Exemplu: 
<img src = "img_locorotondo.jpg" alt = "Flori în Locorotondo">

Dacă un browser nu poate găsi o imagine, aceasta va afișa valoarea atributului alt:

Exemplu: 
<img src = "nume_gresit.gif" alt = "Flori în Locorotondo">
Notă: Atributul alt este necesar. O pagină web nu se va valida corect fără ea.

Dimensiunea imaginii - lățime și înălțime (Width and Height)

Puteți utiliza atributul style pentru a specifica lățimea și înălțimea (Width and Height) unei imagini.

Exemplu: 
<img src="img_men.jpg" alt="Bărbat într-o jacketă" style="width:500px;height:600px;">
În mod alternativ, puteți utiliza atributele de lățime și înălțime (Width and Height):

Exemplu: 
<img src="img_men.jpg" alt="Bărbat într-o jacketă" width="500" height="600">

Atributele lățime și înălțime (Width and Height) definesc întotdeauna lățimea și înălțimea imaginii în pixeli.

Notă: Specificați întotdeauna lățimea și înălțimea (Width and Height) unei imagini. Dacă nu sunt specificate lățimea și înălțimea (Width and Height) , pagina ar putea clipi în timp ce imaginea se încarcă.

Lățimea și înălțimea, sau stilul? (Width and Height, or Style?)

Atributele de lățime, înălțime și stil (width, height, style) sunt valabile în HTML.
Cu toate acestea, vă sugerăm să folosiți atributul stil (style). Împiedică foile de stil (styles sheets) să modifice dimensiunea imaginilor:

Exemplu: 
<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="Pictograma HTML5" width="128" height="128">
<img src="html5.gif" alt="Pictograma HTML5" style="width:128px;height:128px;">

</body>
</html>

HTML imagini hărți. Folosirea elementului area. Definirea formei unei zone: rect, cerc, poli, default.

Vezi videoclipul: HTML imagini hărți. Folosirea elementu... Vezi toată lecția: Imagini hărți în HTML Citește teoria: HTML imagini hărți. Folosirea elementu...
Zonele

Apoi adăugați zonele unde se poate face click.
O zonă pe care se poate face click este definită folosind un element <area>.

Formă

Trebuie să definiți forma zonei și puteți alege una dintre aceste valori:
  • rect - definește o regiune dreptunghiulară
  • cerc - definește o regiune circulară
  • poli - definește o regiune poligonală
  • default- definește întreaga regiune
Coordonate

Trebuie să definiți câteva coordonate pentru a putea plasa zona pe care se poate face click pe imagine.
Coordonatele vin în perechi, una pentru axa x și una pentru axa y.
Coordonatele 34, 44 sunt situate la 34 de pixeli de la marginea stângă și la 44 de pixeli din partea de sus:



Coordonatele 270, 350 sunt amplasate la 270 de pixeli de la marginea stângă și 350 pixeli din partea de sus:



Acum aveți suficiente date pentru a crea o zonă dreptunghiulară cu click:
  
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Aceasta este zona care poate face click și va trimite utilizatorul pe pagina computerului.htm:


 

HTML imagini hărți. Definirea unei imagini harta cu eticheta map. Introducerea Imaginii folosind eticheta img și atributul usemap.

Vezi videoclipul: HTML imagini hărți. Definirea unei ima... Vezi toată lecția: Imagini hărți în HTML Citește teoria: HTML imagini hărți. Definirea unei ima...
Imagini hărți

Eticheta <map> definește o imagine-hartă. O imagine-hartă este o imagine cu zone cu click.
Faceți click pe computer, pe telefon sau pe ceașca de cafea din imaginea de mai jos:



Exemplu: 
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Telefon" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cafea" href="coffee.htm">
</map>

Cum functioneazã?

Ideea din spatele unei hărți a imaginii este că ar trebui să puteți efectua diferite acțiuni, în funcție de locul în care faceți click pe imagine.
Pentru a crea o hartă a imaginii aveți nevoie de o imagine și o hartă care conține câteva reguli care descriu zonele pe care se poate face click.

Imaginea

Imaginea este introdusă folosind eticheta <img>. Singura diferență față de alte imagini este că trebuie să adăugați un atribut usemap: 
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
Valoarea usemap începe cu o etichetă hash tag # urmată de numele hărții imaginii și este utilizată pentru a crea o relație între imagine și harta imaginii.

Notă: Puteți utiliza orice imagine ca hartă a imaginii.

Harta

Apoi adăugați un element <map>.
Elementul <map> este utilizat pentru a crea o hartă a imaginii și este legat de imagine prin utilizarea atributului nume: 
<map name="workmap">
Atributul nume trebuie să aibă aceeași valoare ca atributul usemap.

Notă: Puteți introduce elementul <map> oriunde doriți, nu trebuie să fie inserat imediat după imagine.

HTML imagini hărți. Folosirea elementului area pentru a executa o funcție JavaScript.

Vezi videoclipul: HTML imagini hărți. Folosirea elementu... Vezi toată lecția: Imagini hărți în HTML Citește teoria: HTML imagini hărți. Folosirea elementu...
Cerc

Pentru a adăuga o zonă de cerc, localizați mai întâi coordonatele din centrul cercului:

337, 300



Apoi specificați raza cercului:

44 pixeli


Acum aveți suficiente date pentru a crea o zonă circulară cu click:
  
<area shape="circle" coords="337, 300, 44" href="coffee.htm">

Aceasta este zona în care se poate face click și va trimite utilizatorul la pagina coffee.htm:



Harta imaginii și JavaScript

O zonă în care se poate face click nu trebuie să fie un link către o altă pagină, ci se poate declanșa o funcție JavaScript.
Adăugați un eveniment de click pe elementul <area> pentru a executa o funcție JavaScript:

Exemplu:

Atunci când faceți click pe zonă puteți utiliza atributul onclick pentru a executa o funcție JavaScript . 
<area shape="circle" coords="337,300,44" onclick="myFunction()">

Imagini de fundal în HTML. Elemente folosite: background-image, style, body

Vezi videoclipul: Imagini de fundal în HTML. Elemente fo... Vezi toată lecția: Imagini de fundal în HTML Citește teoria: Imagini de fundal în HTML. Elemente fo...
Imagini de fundal (background-image)

Pentru a adăuga o imagine de fundal în HTML, folosiți imaginea de fundal (background-image) a proprietății CSS.

Imagine de fundal (background-image) pe un element HTML.

Pentru a adăuga o imagine de fundal (background-image) la un element HTML, puteți utiliza atributul style:

Exemplu:

Adăugați o imagine de fundal (background-image) la un element HTML: 
<div style="background-image: url('img_girl.jpg');">
Puteți specifica, de asemenea, imaginea de fundal  (background-image) în elementul <style>:

Exemplu:

Specificați imaginea de fundal în elementul style: 
<style>
div {
  background-image: url('img_girl.jpg');
}
</style>
Imagine de fundal pe o pagină

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>:

Exemplu:

Adăugați o imagine de fundal (background-image) pe o pagină HTML: 
<style>
body {
  background-image: url('img_girl.jpg');
}
</style>

Imagini de fundal în HTML. Repetare de fundal. Acoperire de fundal. Background Stretch. Elemente folosite: background-image, background-repeat, background-size, background-attachment.

Vezi videoclipul: Imagini de fundal în HTML. Repetare de... Vezi toată lecția: Imagini de fundal în HTML Citește teoria: Imagini de fundal în HTML. Repetare de...
Repetare de fundal

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 explica, vezi ce se întâmplă când folosim o imagine mică ca fundal în interiorul unui element div mare:



Proprietatea imagine de fundal (background-image) va încerca să umple elementul div cu imagini până când va ajunge la final.

Exemplu: 
<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>
Pentru a evita ca imaginea de fundal (background-image)să se repete, utilizați proprietatea background-repeat.

Exemplu: 
<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>
Acoperire de fundal (Background Cover)

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):

După cum puteți vedea, imaginea va acoperi întregul element, fără întindere, imaginea își va păstra proporțiile inițiale.

Exemplu: 
<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>
Background Stretch

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%:



Încercați să redimensionați fereastra browserului și veți vedea că imaginea se va întinde, dar acoperă întotdeauna întregul element.

Exemplu: 
<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>

Element de imagine în HTML: picture, img, source, bandwidth, format support.

Vezi videoclipul: Element de imagine în HTML: picture, i... Vezi toată lecția: Element de imagine în HTML Citește teoria: Element de imagine în HTML: picture, i...
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>

HTML5 a introdus elementul <picture> pentru a adăuga mai multă flexibilitate la specificarea resurselor de imagine.
Elementul <picture> conține o serie de elemente <source>, fiecare referindu-se la diferite surse de imagine. Astfel browserul poate alege imaginea care se potrivește cel mai bine vizualizării curente și / sau dispozitivului.
Fiecare element <source> are atribute care descriu când imaginea lor este cea mai potrivită.

Exemplu:

Afișați imagini diferite pe diferite dimensiuni ale ecranului: 
<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>
Notă: Specificați întotdeauna un element <img> drept ultimul element copil al elementului <imagine>. Elementul <img> este folosit de browserele care nu acceptă elementul <picture> sau dacă niciuna dintre etichetele <source> nu se potrivește.

Când să utilizați elementul Picture

Există două scopuri principale pentru elementul <picture>:

1. Lățime de bandă (Bandwidth)

Dacă aveți un ecran sau un dispozitiv mic, nu este necesar să încărcați o imagine mare. Browserul va utiliza primul element <source> cu valorile atributului potrivit și va ignora oricare dintre elementele următoare.

2. Formatați suportul (Format Support)

Este posibil ca unele browsere sau dispozitive să nu accepte toate formatele de imagine. Folosind elementul <picture>, puteți adăuga imagini cu toate formatele, iar browserul va folosi primul format pe care îl recunoaște și va ignora oricare dintre formatele următoare.

Exemplu:

Browserul va folosi primul format de imagine pe care îl recunoaște: 
<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
Notă: Browserul va folosi primul element <source> cu valorile atributului potrivit și va ignora următoarele elemente <source>.

Tabele HTML. Adăugarea unei legende cu eticheta <caption>. Stil special pentru un tabel cu atributul id.

Vezi videoclipul: Tabele HTML. Adăugarea unei legende cu... Vezi toată lecția: Tabele HTML Citește teoria: Tabele HTML. Adăugarea unei legende cu...
Tabel HTML - Adăugarea unei legende ( Adding a Caption)

Pentru a adăuga o legendă la un tabel, utilizați eticheta <caption>:

Exemplu: 
<table style="width:100%">
  <caption>Economii lunare</caption>
  <tr>
    <th>Luna</th>
    <th>Economii</th>
  </tr>
  <tr>
    <td>Ianuarie</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Februarie</td>
    <td>$50</td>
  </tr>
</table>
Notă: Eticheta <caption> trebuie introdusă imediat după eticheta <table>.

Un stil special pentru un tabel

Pentru a defini un stil special pentru un tabel special, adăugați un atribut id la tabel:

Exemplu: 
<table id="t01">
  <tr>
    <th>Prenume</th>
    <th>Nume</th>
    <th>Vârsta</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>Popescu</td>
    <td>54</td>
  </tr>
</table>
Acum puteți defini un stil special pentru acest tabel: 
table#t01 {
  width: 100%;
  background-color: #f1f1c1;
}
Și adăugați mai multe stiluri: 
table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
  background-color: #fff;
}
table#t01 th {
  color: white;
  background-color: black;
}

Rezumat:
  • 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ă.
Etichete de tabel HTML
 
Etichetă Descriere
<table> Definește un tabel
<th> Definește o celulă antet dintr-un tabel
<tr> Definește un rând într-un tabel
<td> Definește o celulă dintr-un tabel
<caption> Definește o legendă de 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
<thead> Grupează conținutul antetului într-un tabel
<tbody> Grupează conținutul corpului într-un tabel
<tfoot> Grupează conținutul subsolului într-un tabel

Tabele HTML. Definirea unui tabel HTML: table, tr, th, td. Adăugarea unui chenar cu border. Proprietatea CSS border-collapse

Vezi videoclipul: Tabele HTML. Definirea unui tabel HTML... Vezi toată lecția: Tabele HTML Citește teoria: Tabele HTML. Definirea unui tabel HTML...
Definirea unui tabel HTML

Un tabel HTML este definit cu eticheta <table>.
Fiecare rând de tabel este definit cu eticheta <tr>. Un antet de tabel este definit cu eticheta <th>. În mod implicit, titlurile tabelelor sunt îngroșate și centrate. Un tabel de date / o celulă este definit cu eticheta <td>.

Exemplu: 
<table style="width:100%">
  <tr>
    <th>Prenume</th>
    <th>Nume</th>
    <th>Vârsta</th>
  </tr>
  <tr>
    <td>Ion</td>
    <td>Popescu</td>
    <td>30</td>
  </tr>
  <tr>
    <tdAna</td>
    <td>Ionescu</td>
    <td>40</td>
  </tr>
</table>
Notă: Elementele <td> sunt containerele de date din tabel. Pot conține tot felul de elemente HTML; text, imagini, liste, alte tabele etc.

Tabel HTML - Adăugarea unui chenar

Dacă nu specificați un chenar (border) pentru tabel, acesta va fi afișat fără margini.
Un chenar este setat folosind proprietatea CSS border:

Exemplu: 
table, th, td {
  border: 1px solid black;
}
Nu uitați să definiți chenare atât pentru tabel, cât și pentru celulele tabelului.

Tabel HTML - Collapsed Borders

Dacă doriți ca mai multe chenare sa se uneasca într-un singur chenar, adăugați proprietatea CSS border-collapse:

Exemplu: 
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Tabel HTML - Adding Cell Padding

Cell Padding specifică spațiul dintre conținutul celulei și marginile acesteia.
Dacă nu specificați padding, celulele tabelului vor fi afișate fără padding.
Pentru a seta padding, utilizați proprietatea CSS padding:

Exemplu: 
th, td {
  padding: 15px;
}

Tabele HTML. Proprietatea CSS de aliniere a textului text-align. Proprietatea CSS border-spacing. Atributele: colspan și linespan.

Vezi videoclipul: Tabele HTML. Proprietatea CSS de alini... Vezi toată lecția: Tabele HTML Citește teoria: Tabele HTML. Proprietatea CSS de alini...
Tabel HTML - Titluri aliniate la stânga (Left-align Headings)

În mod implicit, titlurile tabelelor sunt îngroșate și centrate.
Pentru a alinia la stânga titlurile tabelului, utilizați proprietatea CSS de aliniere a textului (text-align):

Exemplu: 
th {
  text-align: left;
}

Tabel HTML - Adăugarea spațierii frontierelor (Adding Border Spacing)

Distanța de frontieră (border spacing) specifică spațiul dintre celule.
Pentru a seta distanța de graniță pentru o tabelă, utilizați proprietatea CSS border-spacing :

Exemplu: 
table {
  border-spacing: 5px;
}

Notă: Dacă tabelul are collapsed borders, border-spacing nu are efect.

Tabel HTML - Celule care acoperă multe coloane

Pentru a face cell span mai mult de o coloană, utilizați atributul colspan:

Exemplu: 
<table style="width:100%">
  <tr>
    <th>Nume</th>
    <th colspan="2">Telefon</th>
  </tr>
  <tr>
    <td>Ion Ionescu</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

Tabel HTML - Celule care acoperă multe rânduri

Pentru a face un interval de celule (cell span) mai mult de un rând, utilizați atributul linespan:

Exemplu: 
<table style="width:100%">
  <tr>
    <th>Nume:</th>
    <td>Ion Ionescu</td>
  </tr>
  <tr>
    <th rowspan="2">Telefon:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

Liste HTML. Listă HTML ordonată: ol, li. Atributul type al etichetei ol.

Vezi videoclipul: Liste HTML. Listă HTML ordonată: ol, l... Vezi toată lecția: Liste HTML Citește teoria: Liste HTML. Listă HTML ordonată: ol, l...
Listă HTML ordonată

O listă ordonată începe cu eticheta <ol>. Fiecare element de listă începe cu tagul <li>.
În mod implicit, elementele din listă vor fi marcate cu numere:

Exemplu: 
<Ol>
   <li> Cafea </li>
   <li> Ceai </li>
   <li> Lapte </li>
</Ol>

Listă HTML ordonată - Atributul type

Atributul type al etichetei <ol>, definește tipul marcajului elementului de listă:
 
Tip Descriere
type="1" Elementele din listă vor fi numerotate cu numere (implicit)
type="A" Elementele din listă vor fi numerotate cu litere mari
type="a" Elementele din listă vor fi numerotate cu litere mici
type="I" Elementele din listă vor fi numerotate cu numere romane majuscule
type="i" Elementele din listă vor fi numerotate cu numere romane minuscule

Numere: 
<ol type = "1">
   <li> Cafea </li>
   <li> Ceai </li>
   <li> Lapte </li>
</ol>
Litere mari: 
<ol type = "A">
   <li> Cafea </li>
   <li> Ceai </li>
   <li> Lapte </li>
</ol>
Litere mici: 
<ol type = "a">
   <li> Cafea </li>
   <li> Ceai </li>
   <li> Lapte </li>
</ol>
Numere romane cu majuscule: 
<ol type = "I">
   <li> Cafea </li>
   <li> Ceai </li>
   <li> Lapte </li>
</ol>
Numere romane minuscule: 
<ol type = "i">
   <li> Cafea </li>
   <li> Ceai </li>
   <li> Lapte </li>
</ol>

Liste HTML. Listă HTML neordonată: ul, li. Proprietatea CSS list-style-type.

Vezi videoclipul: Liste HTML. Listă HTML neordonată: ul,... Vezi toată lecția: Liste HTML Citește teoria: Liste HTML. Listă HTML neordonată: ul,...
Liste HTML

Exemplu de listă HTML
 

O listă neordonată:

  • Articol
  • Articol
  • Articol
  • Articol

O listă ordonată:

  1. Primul articol
  2. Al doilea articol
  3. Al treilea articol
  4. Al patrulea articol

Lista HTML neordonată

O listă neordonată începe cu eticheta <ul>. Fiecare element de listă începe cu tagul <li>.
Elementele din listă vor fi marcate în mod implicit cu buline (cercuri negre mici) :

Exemplu: 
<ul>
   <li> Cafea </li>
   <li> Ceai </li>
   <li> Lapte </li>
</ul>
Listă HTML neordonată - Alegeți marcatorul articolului de listă

Proprietatea CSS list-style-type este utilizată pentru a defini stilul marcajului articolului de listă:
 
Valoare Descriere
disc Setează marcajul elementului listei la un buletin (implicit)
cerc Setează marcajul elementului de listă într-un cerc
pătrat Setează marcajul elementului de listă într-un pătrat
niciuna Elementele din listă nu vor fi marcate

Exemplu - Disc: 
<ul style = "list-style-type: disc;">
   <li> Cafea </li>
   <li> Ceai </li>
   <li> Lapte </li>
</ul>
Exemplu - Cerc: 
<ul style = "list-style-type: circle;">
   <li> Cafea </li>
   <li> Ceai </li>
   <li> Lapte </li>
</ul>
Exemplu - Pătrat: 
<ul style = "list-style-type: square;">
   <li> Cafea </li>
   <li> Ceai </li>
   <li> Lapte </li>
</ul>
Exemplu - Niciuna: 
<ul style = "list-style-type: none;">
   <li> Cafea </li>
   <li> Ceai </li>
   <li> Lapte </li>
</ul>

Liste HTML. Liste de descriere HTML: dl, dt, dd, li. Liste HTML imbricate. Utilizarea atributului start. Listă orizontală cu CSS.

Vezi videoclipul: Liste HTML. Liste de descriere HTML: d... Vezi toată lecția: Liste HTML Citește teoria: Liste HTML. Liste de descriere HTML: d...
Liste de descriere HTML

HTML acceptă de asemenea listele de descrieri.
O listă de descrieri este o listă de termeni, cu o descriere a fiecărui termen.
Eticheta <dl> definește lista de descrieri, eticheta <dt> definește termenul (nume) și eticheta <dd> descrie fiecare termen:

Exemplu: 
<dl>
   <dt> Cafea </dt>
   <dd> - băutură caldă neagră </dd>
   <dt> Lapte </dt>
   <dd> - băutură rece albă </dd>
</dl>

Liste HTML imbricate

Lista poate fi imbricată (listele din liste):

Exemplu: 
<ul>
   <li> Cafea </li>
   <li> Ceai
     <ul>
       <li> Ceai negru </li>
       <li> Ceai verde </li>
     </ul>
   </li>
   <li> Lapte </li>
</ul>
Notă: Elementele din listă pot conține o listă nouă și alte elemente HTML, cum ar fi imagini și link-uri etc.

Numărarea listelor de control

În mod implicit, o listă ordonată va începe să numere de la 1. Dacă doriți să începeți să numărați de la un număr specificat, puteți utiliza atributul start:

Exemplu: 
<ol start = "50">
   <li> Cafea </li>
   <li> Ceai </li>
   <li> Lapte </li>
</ol>

Listă orizontală cu CSS

Listele HTML pot fi proiectate în mai multe moduri diferite cu CSS.
Un mod popular este să creezi o listă pe orizontală, să creezi un meniu de navigare:

Exemplu: 
<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Acasă </a></li>
  <li><a href="#news">Știri</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">Despre</a></li>
</ul>

</body>
</html>

Rezumat
  • 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ă.
Etichete de listă HTML
 
Etichetă Descriere
<ul> Definește o listă neordonată
<ol> Definește o listă ordonată
<li> Definește un element de listă
<dl> Definește o listă de descrieri
<dt> Definește un termen dintr-o listă de descrieri
<dd> Descrie termenul dintr-o listă de descrieri

Atributul HTML class. Utilizarea atributului class. Utilizarea atributului class în elementele inline.

Vezi videoclipul: Atributul HTML class. Utilizarea atrib... Vezi toată lecția: Atributul HTML class Citește teoria: Atributul HTML class. Utilizarea atrib...
Atributul HTML class

Utilizarea atributului class

Atributul HTML class este folosit pentru a defini stiluri egale pentru elemente cu același nume de clasă.
Deci, toate elementele HTML cu același atribut de clasă (class) vor obține același stil.
Aici avem trei elemente <div> care indică același nume de clasă:

Exemplu: 
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
  background-color: black;
  color: white;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="cities">
  <h2>Londra</h2>
  <p>Londra este capitala Angliei. </p>
</div>

<div class="cities">
  <h2>Paris</h2>
  <p>Paris este capitala Franței.</p>
</div>

<div class="cities">
  <h2>Tokyo</h2>
  <p>Tokyo Paris este capitala Japoniei.</p>
</div>

</body>
</html>
Rezultat:


Utilizarea atributului class în elementele inline

Atributul HTML class poate fi folosit și pe elementele inline:

Exemplu: 
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Titlu</h1>
<p>Acesta este un text <span class="note">important</span> text.</p>

</body>
</html>

Atributul HTML class. Selectarea elementelor cu o clasă specifică.

Vezi videoclipul: Atributul HTML class. Selectarea eleme... Vezi toată lecția: Atributul HTML class Citește teoria: Atributul HTML class. Selectarea eleme...
Selectați elemente cu o clasă specifică

În CSS, pentru a selecta elemente cu o anumită clasă, scrieți un caracter (.), urmat de numele clasei:

Exemplu:

Utilizați CSS pentru a aplica stiluri tuturor elementelor cu numele clasei „oraș”:
  
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<h2 class = "city"> Londra </h2>
<p> Londra este capitala Angliei. </p>

<h2 class = "city"> Paris </h2>
<p> Paris este capitala Franței. </p>

<h2 class = "city"> Tokyo </h2>
<p> Tokyo este capitala Japoniei. </p>
Rezultat:


Sfat: Atributul class poate fi folosit pe orice element HTML.
Notă: Numele clasei este sensibil la litere mari și mici!

Atributul HTML class. Clase multiple. Etichetele diferite ce pot împărtăși aceeași clasă: h2, p. Utilizarea atributului class în JavaScript: getElementsByClassName ()

Vezi videoclipul: Atributul HTML class. Clase multiple.... Vezi toată lecția: Atributul HTML class Citește teoria: Atributul HTML class. Clase multiple....
Clase multiple

Elementele HTML pot avea mai mult de un nume de clasă, fiecare nume de clasă trebuie separat printr-un spațiu.

Exemplu:

Elemente de stil cu numele clasei „city”, de asemenea elemente de stil cu numele clasei „main”:
  
<h2 class="city main">Londra</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
În exemplul de mai sus, primul element <h2> aparține atât clasei „city”, cât și clasei „main”.

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:

Exemplu: 
<h2 class="city">Paris</h2>
<p class="city">Paris este capitala Franței</p>

Utilizarea atributului class în JavaScript

Numele clasei poate fi folosit și de JavaScript pentru a efectua anumite sarcini pentru elemente cu numele clasei specificat.
JavaScript poate accesa elemente cu un nume de clasă specificat folosind metoda getElementsByClassName ():

Exemplu:

Când un utilizator face click pe un buton, ascundeți toate elementele cu numele clasei „city”:
  
<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

Atributul HTML id. Utilizarea atributului id în JavaScript folosind metoda getElementById ().

Vezi videoclipul: Atributul HTML id. Utilizarea atributu... Vezi toată lecția: Atributul HTML id Citește teoria: Atributul HTML id. Utilizarea atributu...
Utilizarea atributului id în JavaScript

JavaScript poate accesa un element cu un id specificat folosind metoda getElementById ():

Exemplu:

Utilizați atributul id pentru a manipula textul cu JavaScript: 
<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = " Să aveți o zi frumoasă!";
}
</script>
 

Atributul HTML id. Utilizarea atributului id: CSS și JavaScript.

Vezi videoclipul: Atributul HTML id. Utilizarea atributu... Vezi toată lecția: Atributul HTML id Citește teoria: Atributul HTML id. Utilizarea atributu...
Atributul HTML id

Utilizarea atributului 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:

Exemplu:

Utilizați CSS pentru a aplica stiluria unui element cu id-ul „myHeader”:
  
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>

<h1 id="myHeader">My Header</h1>
Rezultat:



Sfat: Atributul id poate fi utilizat pe orice element HTML.
Notă: Valoarea id este sensibilă la litere mari și mici.
Notă: valoarea id trebuie să conțină cel puțin un caracter și să nu conțină spațiul alb (spații, file etc.).
 

Atributul HTML id. Diferența dintre class și id. Marcaje cu id și link-uri.

Vezi videoclipul: Atributul HTML id. Diferența dintre cl... Vezi toată lecția: Atributul HTML id Citește teoria: Atributul HTML id. Diferența dintre cl...
Diferența dintre class și id

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:

Exemplu: 
<style>
/* Stilează elementul cu id-ul "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Stilează toate elementele cu numele clasei "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- Un element unic  -->
<h1 id="myHeader">Orașele mele</h1>

<!-- Mai multe elemente similare -->
<h2 class="city">Londra</h2>
<p>Londra este capitala Angliei.</p>

<h2 class="city">Paris</h2>
<p>Paris este capitala Franței.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo este capitala Japoniei.</p>

Marcaje (bookmarks) cu id și link-uri

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ă.
Pentru a crea un marcaj (bookmark), trebuie mai întâi să creați marcajul, apoi să adăugați un link la acesta.
Când faceți click pe link, pagina va defila cu marcajul (bookmark) la locație.
 
Exemplu:

Mai întâi, creați un marcaj cu atributul id: 
<h2 id="C4">Capitolul 4</h2>
Apoi, adăugați un link către marcaj („Salt la capitolul 4”), din interiorul aceleiași pagini:

Exemplu: 
<a href="#C4">Salt la capitolul 4</a>
Sau adăugați un link către marcaj ("Salt la capitolul 4"), de pe o altă pagină:

Exemplu: 
<a href="html_demo.html#C4">Salt la capitolul 4</a>

HTML Iframes. Eliminare border folosind atributul style și proprietatea CSS border. Iframe - Ţintă pentru un link folosind atributul target.

Vezi videoclipul: HTML Iframes. Eliminare border folosin... Vezi toată lecția: HTML Iframes Citește teoria: HTML Iframes. Eliminare border folosin...
Iframe - Eliminați border

Î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:

Exemplu: 
<iframe src="demo_iframe.htm" style="border:none;"></iframe>
Cu CSS, puteți modifica, de asemenea, dimensiunea, stilul și culoarea marginii iframe:

Exemplu: 
<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>

Iframe - Target pentru un link

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:

Exemplu: 
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.lectii-virtulae.ro" target="iframe_a">lectii-virtuale.ro</a></p>

Etichea HTML iframe
 
Etichetă Descriere
<iframe> Definește un cadru inline

HTML Iframes. Sintaxa Iframe. Specificarea dimensiunii iframe cu height și width.

Vezi videoclipul: HTML Iframes. Sintaxa Iframe. Specific... Vezi toată lecția: HTML Iframes Citește teoria: HTML Iframes. Sintaxa Iframe. Specific...
HTML Iframes

Un iframe este utilizat pentru a afișa o pagină web în cadrul unei pagini web.

Sintaxa Iframe

Un iframe HTML este definit cu eticheta <iframe>: 
<iframe src="URL"></iframe>
Atributul src specifică adresa URL (adresa web) a paginii inline frame.

Iframe - Setați Height și Width (înălțimea și lățimea)

Utilizați atributele height și width (înălțime și lățime) pentru a specifica dimensiunea iframe.
În mod implicit, height și width (înălțimea și lățimea) sunt specificate în pixeli:

Exemplu: 
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
Sau puteți utiliza CSS pentru a seta height și width (înălțimea și lățimea) iframe-ului:

Exemplu: 
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>

HTML JavaScript. Utilizarea etichetei script pentru a defini un script din partea clientului.

Vezi videoclipul: HTML JavaScript. Utilizarea etichetei... Vezi toată lecția: HTML JavaScript Citește teoria: HTML JavaScript. Utilizarea etichetei...
HTML JavaScript

JavaScript face ca paginile HTML să fie mai dinamice și mai interactive.

Eticheta HTML <script>

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.
Utilizările obișnuite pentru JavaScript sunt manipularea imaginii, validarea formei și modificările dinamice ale conținutului.
Pentru a selecta un element HTML, JavaScript utilizează cel mai adesea metoda document.getElementById ().
Acest exemplu JavaScript scrie „Hello JavaScript!” într-un element HTML cu id = "demo":

Exemplu:

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

 

HTML JavaScript. Eticheta noscript pentru furnizarea conținutului alternativ pentru utilizatorii care au scripturi dezactivate în browser.

Vezi videoclipul: HTML JavaScript. Eticheta noscript pen... Vezi toată lecția: HTML JavaScript Citește teoria: HTML JavaScript. Eticheta noscript pen...

Exemple JavaScript

Iată câteva exemple despre ceea ce poate face JavaScript:

JavaScript poate schimba conținutul HTML
 

document.getElementById("demo").innerHTML = "Hello JavaScript!";


JavaScript poate schimba stilurile HTML

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";


JavaScript poate schimba atributele HTML

document.getElementById("image").src = "picture.gif";

Eticheta HTML <noscript>

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:

Exemplu: 
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript>Ne pare rău, browserul dvs. nu acceptă JavaScript!</noscript>

Etichete script HTML
 
Etichetă Descriere
<script> Definește un script din partea clientului
<noscript> Definește un conținut alternativ pentru utilizatorii care nu acceptă scripturile din partea clientului

Căi de fișiere în HTML. Căi de fișiere absolute. Căi de fișiere relative.

Vezi videoclipul: Căi de fișiere în HTML. Căi de fișier... Vezi toată lecția: Căi de fișiere în HTML Citește teoria: Căi de fișiere în HTML. Căi de fișier...
Căi de fișiere HTML (File paths)
 
Calea Descriere
<img src="picture.jpg"> picture.jpg este situat în același dosar ca pagina curentă
<img src="images/picture.jpg"> picture.jpg se află în folderul imagini din folderul curent
<img src="/images/picture.jpg"> picture.jpg se află în folderul de imagini de la rădăcina web-ului curent
<img src="../picture.jpg"> picture.jpg este situat în folder cu un nivel în sus din folderul curent

O cale de fișier (file path) 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
Căi de fișiere absolute (Absolute File Paths)

O cale absolută a fișierului este adresa URL completă a unui fișier internet:

Exemplu: 
<img src = "https://www.lrctii-virtuale.ro/images/picture.jpg" alt = "Mountain">

Căi de fișiere relative (Relative File Paths)

O cale de fișier relativă indică un fișier relativ la pagina curentă.
În acest exemplu, calea fișierului indică un fișier din folderul de imagini situat la rădăcina web-ului curent:

Exemplu: 
<img src="/images/picture.jpg" alt="Mountain">
În acest exemplu, calea fișierului indică un fișier din folderul de imagini situat în folderul curent:

Exemplu: 
<img src="images/picture.jpg" alt="Mountain">
În acest exemplu, calea fișierului indică un fișier din folderul de imagini situat în folder cu un nivel deasupra folderului curent:

Exemplu: 
<img src="../images/picture.jpg" alt="Mountain">

Cea mai buna soluție

Cea mai bună soluție este să folosiți căi de fișiere relative (dacă este posibil).
Când utilizați căi de fișiere relative, paginile dvs. web nu vor fi legate de adresa de bază curentă URL. Toate link-urile vor funcționa atât pe propriul computer (localhost), cât și pe domeniul public actual și domeniile dvs. viitoare.

Elementul HTML head. Etichete ce descriu metadate: title, style, link.

Vezi videoclipul: Elementul HTML head. Etichete ce descr... Vezi toată lecția: Elementul HTML head Citește teoria: Elementul HTML head. Etichete ce descr...
Elementul HTML head

Elementul <head> este un container pentru metadate (date despre date) și este plasat între eticheta <html> și eticheta <body>.
Metadatele HTML sunt date despre documentul HTML. Metadatele nu sunt afișate.
Metadatele definesc de obicei titlul documentului, setul de caractere, stilurile, scripturile și alte informații meta.
Următoarele etichete descriu metadate:<title>, <style>, <meta>, <link>, <script>,și <base>.

Elementul HTML <title>

Elementul <title> definește titlul documentului și este necesar în toate documentele HTML.
Elementul <title>:
  • definește un titlu în tab-ul browser-ului.
  • oferă un titlu pentru pagină atunci când este adăugată la favorite
  • afișează un titlu pentru pagină din rezultatele motorului de căutare.
Un simplu document HTML:

Exemplu: 
<!DOCTYPE html>
<html>

<head>
  <title>Titlul paginii</title>
</head>

<body>
Conținutul documentului ......
</body>

</html>

Elementul HTML <style>

Elementul <style> este utilizat pentru a defini informațiile despre stil pentru o singură pagină HTML:

Exemplu: 
<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

Elementul HTML <link>

Elementul <link> este utilizat pentru a face legătura cu foile de stil externe:

Exemplu: 
<link rel="stylesheet" href="mystyle.css">

Elementul HTML head. Etichetele script și base ce desciu metadate.

Vezi videoclipul: Elementul HTML head. Etichetele script... Vezi toată lecția: Elementul HTML head Citește teoria: Elementul HTML head. Etichetele script...
Elementul HTML <script>

Elementul <script> este folosit pentru a defini JavaScript din partea clientului (client-side JavaScripts.).
Acest cod JavaScript scrie "Hello JavaScript!" într-un element HTML cu id = "demo":

Exemplu: 
<script>
function myFunction {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

Elementul HTML <base>

Elementul <base> specifică adresa URL de bază și ținta de bază (base target) pentru toate adresele URL relative dintr-o pagină:

Exemplu: 
<base href="/images/" target="_blank">

Se omit etichetele <html>, <head> și <body>?

Conform standardului HTML5; etichetele <html>, <body> și <head> pot fi omise.
Următorul cod se va valida ca HTML5:

Exemplu: 
<!DOCTYPE html>
<title>Titlul paginii</title>

<h1> Acesta este un titlu</h1>
<p>Acesta este un paragraf.</p>

Elemente HTML head
 
Etichetă Descriere
<head> Definește informații despre document
<title> Definește titlul unui document
<base> Definește o adresă implicită sau o țintă (target) 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

Elementul HTML head. Eticheta meta ce descrie metadate. Setarea Viewport.

Vezi videoclipul: Elementul HTML head. Eticheta meta ce... Vezi toată lecția: Elementul HTML head Citește teoria: Elementul HTML head. Eticheta meta ce...
Elementul HTML <meta>

Elementul <meta> este utilizat pentru a specifica setul de caractere utilizat, descrierea paginii, cuvinte cheie, autor și alte metadate.
Metadatele sunt utilizate de browsere (modul de afișare a conținutului), de motoarele de căutare (cuvinte cheie) și alte servicii web.

Definiți setul de caractere utilizat: 
<meta charset="UTF-8">
Definiți o descriere a paginii dvs. web: 
<meta name="description" content="Tutoriale web gratuite">
Definirea cuvintelor cheie pentru motoarele de căutare: 
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Definiți autorul unei pagini: 
<meta name="author" content="John Doe">
Actualizați documentul la fiecare 30 de secunde: 
<meta http-equiv="refresh" content="30">

Exemplu de etichete <meta>:
  
<meta charset="UTF-8">
<meta name="description" content="Tutoriale web gratuite">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">

Setarea Viewport

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: 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Un element viewport  <meta> oferă instrucțiuni browserului despre cum să controlați dimensiunile și scalarea paginii.
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. 
Iată un exemplu de pagină web fără eticheta viewport meta, și aceeași pagină web cu eticheta viewport <meta>.

Sfat: Dacă navigați pe această pagină cu un telefon sau o tabletă, puteți face click pe cele două legături de mai jos pentru a vedea diferența.

Exemplu: Fără eticheta viewport meta



Exemplu: Cu eticheta viewport meta


 

Elemente HTML Layout: header,nav,section,article,aside,footer,summary,details.

Vezi videoclipul: Elemente HTML Layout: header,nav,secti... Vezi toată lecția: Elemente HTML Layout Citește teoria: Elemente HTML Layout: header,nav,secti...
Elemente HTML Layout

Site-urile web afișează deseori conținut în mai multe coloane (cum ar fi o revistă sau un ziar).
HTML oferă mai multe elemente semantice care definesc diferitele părți ale unei pagini web:

  • <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.
  • <details> - Definește detalii suplimentare.
  • <summary> - Definește un titlu pentru elementul <details>.

Elemente HTML Layout. Tehnici Layout HTML. Tabele HTML. CSS Frameworks. CSS Floats. CSS Flexbox. CSS Grid View.

Vezi videoclipul: Elemente HTML Layout. Tehnici Layout H... Vezi toată lecția: Elemente HTML Layout Citește teoria: Elemente HTML Layout. Tehnici Layout H...
Tehnici Layout HTML

Există cinci moduri diferite de a crea multicolumn layouts.
  • Tabele HTML (nerecomandat)
  • Proprietatea CSS float
  • CSS flexbox
  • CSS framework
  • CSS grid
Tabelele HTML

Elementul <table> nu a fost proiectat pentru a fi un instrument de aspect! Scopul elementului <tabel> este afișarea datelor tabulare. Deci, nu folosiți tabele pentru aspectul paginii dvs.! Vor aduce dezordine în codul dvs. Și imaginați-vă cât de greu va fi să vă reproiectați site-ul după câteva luni.

Sfat: NU folosiți tabele pentru aspectul paginii!

CSS Frameworks

Dacă doriți să vă creați rapid un layout, puteți utiliza un framework cum ar fi Bootstrap.

CSS Floats

Este ceva comun să faceți machete web (web layouts) întregi folosind proprietatea CSS float. Float este ușor de învățat - trebuie doar să vă amintiți cum funcționează float și proprietățile clare.

Dezavantaje: Elementele float sunt legate de fluxul de documente, care pot afecta flexibilitatea.

Exemplu:



CSS Flexbox

Flexbox reprezintă un nou mod de dispunere în CSS3.
Utilizarea flexboxului asigură că elementele se comportă în mod previzibil atunci când aspectul paginii trebuie să găzduiască dimensiuni de ecran diferite și dispozitive de afișare diferite.

Dezavantaje: Nu funcționează în IE10 și în cele anterioare.

Exemplu:



CSS Grid View

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.

Dezavantaje: Nu funcționează în IE și nici în Edge 15 și nici în precedentele.

HTML Responsive Web Design. Imagini responsive. Utilizarea proprietății width. Utilizarea proprietății max-width.

Vezi videoclipul: HTML Responsive Web Design. Imagini re... Vezi toată lecția: HTML Responsive Web Design Citește teoria: HTML Responsive Web Design. Imagini re...
Imagini responsive

Imaginile responsive sunt imagini care se dimensionează frumos pentru a se potrivi cu orice dimensiune a browserului.

Utilizarea proprietății lățime (width)

Dacă proprietatea CSS width este setată la 100%, imaginea va fi receptivă și va scala în sus și în jos:

Exemplu: 
<img src="img_man.jpg" style="width:100%;">
Observați că în exemplul de mai sus, imaginea poate fi amplificată pentru a fi mai mare decât dimensiunea inițială. O soluție mai bună, în multe cazuri, va fi utilizarea în schimb a proprietății cu lățimea maximă (max-width).

Utilizarea proprietății cu lățimea maximă (max-width)

Dacă proprietatea cu lățimea maximă (max-width) este setată la 100%, imaginea va scădea în jos dacă trebuie, dar niciodată nu va fi mai mare decât dimensiunea inițială:


Exemplu: 
<img src="img_man.jpg" style="max-width:100%;height:auto;">

HTML Responsive Web Design. Setarea Viewport.

Vezi videoclipul: HTML Responsive Web Design. Setarea Vi... Vezi toată lecția: HTML Responsive Web Design Citește teoria: HTML Responsive Web Design. Setarea Vi...
HTML Responsive Web Design

Ce este proiectarea web receptivă (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):

Notă: O pagină web ar trebui să arate bine pe orice dispozitiv!

Setarea Viewport

Când creați pagini web responsive, adăugați următorul element <meta> în toate paginile dvs. web:

Exemplu: 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Acest lucru va seta viewport-ul paginii dvs., care va oferi browserului instrucțiuni despre cum să controlați dimensiunile și scalarea paginii.
Iată un exemplu de pagină web fără etichetă meta viewport și aceeași pagină web cu etichetă meta viewport:

Fără etichetă meta viewport:



Cu etichetă meta viewport:

HTML Responsive Web Design. Interogări media. Responsive Web Page.

Vezi videoclipul: HTML Responsive Web Design. Interogări... Vezi toată lecția: HTML Responsive Web Design Citește teoria: HTML Responsive Web Design. Interogări...
Interogări media (Media Queries)

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.

Exemplu:

Redimensionați fereastra browserului pentru a vedea că cele trei elemente div de mai jos se vor afișa orizontal pe ecrane mari și stivuite vertical pe ecrane mici:



Exemplu: 
<style>
.left, .right {
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}

/* Folosiți o interogare media pentru a adăuga un punct de întrerupere la 800px: */
Ecranul @media și(max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* Lățimea este de 100%, atunci când viewport este de 800px sau mai mică */
  }
}
</style>

Responsive Web Page - Exemplu complet

O pagină Responsive Web ar trebui să arate bine pe ecrane desktop mari și pe telefoane mobile mici.


 

HTML Responsive Web Design. Bootstrap.

Vezi videoclipul: HTML Responsive Web Design. Bootstrap. Vezi toată lecția: HTML Responsive Web Design Citește teoria: HTML Responsive Web Design. Bootstrap.
Bootstrap

Un alt framework popular este Bootstrap, folosește HTML, CSS și jQuery pentru a face pagini web responsive.

Exemplu: 
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exemplu de bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>Prima mea pagină Bootstrap</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>
</div>

</body>
</html>
 

HTML Responsive Web Design. Elementul HTML picture. Responsive Text Size.

Vezi videoclipul: HTML Responsive Web Design. Elementul... Vezi toată lecția: HTML Responsive Web Design Citește teoria: HTML Responsive Web Design. Elementul...
Afișați imagini diferite în funcție de lățimea browserului

Elementul HTML <picture> vă permite să definiți imagini diferite pentru dimensiuni diferite ale ferestrei browserului.
Redimensionați fereastra browserului pentru a vedea cum se schimbă imaginea de mai jos în funcție de lățime:



Exemplu: 
<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_pumpkinflowers.jpg" media="(max-width: 1500px)">
  <source srcset="pumpkinflowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>

Responsive Text Size

Mărimea textului poate fi setată cu o unitate „vw”, ceea ce înseamnă „lățimea vizualizării” (viewport width).
Astfel dimensiunea textului va urma dimensiunea ferestrei browserului:



Exemplu: 
<h1 style="font-size:10vw">Hello World</h1>

Viewport este dimensiunea ferestrei browserului. 1vw = 1% din lățimea viewport. Dacă viewport are 50 cm lățime, 1vw este 0,5 cm.

HTML Responsive Web Design. Frameworks. Responsive Style Sheet.

Vezi videoclipul: HTML Responsive Web Design. Frameworks... Vezi toată lecția: HTML Responsive Web Design Citește teoria: HTML Responsive Web Design. Frameworks...
Responsive Web Design - Frameworks

Există multe CSS Frameworks care oferă un Responsive Design.
Sunt gratuite și ușor de utilizat.
O modalitate excelentă de a crea un Responsive Design este de a utiliza o responsive style sheet.



Exemplu: 
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/lvcss/4/lv.css">
<body>

<div class="lv-container lv-green">
  <h1>Lectii-virtuale Demo</h1>
  <p>Redimensionați această pagină receptivă!</p>
</div>

<div class="lv-row-padding">
  <div class="lv-third">
    <h2>Londra</h2>
    <p>Londra este capitala Angliei.</p>
    <p>Este cel mai populat oraș din Regatul Unit,
     cu o zonă metropolitană de peste 13 milioane de locuitori.</p>
  </div>

  <div class="lv-third">
    <h2>Paris</h2>
    <p>Paris este capitala Franței.</p>
    <p>Zona din Paris este unul dintre cele mai mari centre de populație din Europa,
     cu peste 12 milioane de locuitori.</p>
  </div>

  <div class="lv-third">
    <h2>Tokyo</h2>
    <p>Tokyo este capitala Japoniei.</p>
    <p>Este centrul zonei Tokyo,
     și cea mai populată zonă metropolitană din lume.</p>
  </div>
</div>

</body>
</html>

Elemente de cod HTML pentru computer: code și pre.

Vezi videoclipul: Elemente de cod HTML pentru computer:... Vezi toată lecția: Elemente de cod HTML pentru computer Citește teoria: Elemente de cod HTML pentru computer:...
Elementul HTML <code> - Pentru codul computerului (Computer Code)

Elementul HTML <code> definește un fragment de cod computer.
Textul înconjurat de etichete <code> este de obicei afișat într-un font monospace:

Exemplu: 
<code>
x = 3;
y = 4;
z = x + y;
</code>
Rezultat: 
x = 3; y = 4; z = x + y;
Observați că elementul <code> nu păstrează spațiul alb și pauzele de linie suplimentare.
Pentru a remedia acest lucru, puteți introduce elementul <code> în interiorul unui element <pre>:

Exemplu: 
<pre>
<code>
x = 3;
y = 4;
z = x + y;
</code>
</pre>
Rezultat: 
x = 3;
y = 4;
z = x + y;

Elemente de cod HTML pentru computer: kbd și samp

Vezi videoclipul: Elemente de cod HTML pentru computer:... Vezi toată lecția: Elemente de cod HTML pentru computer Citește teoria: Elemente de cod HTML pentru computer:...
Elemente de cod HTML pentru computer

Exemplu de cod  pentru computer 
<code>
x = 3;<br>
y = 4;<br>
z = x + y;
</code>
Elementul HTML <kbd> - Pentru introducerea tastaturii (Keyboard Input)

Elementul HTML <kbd> reprezintă intrarea utilizatorului, cum ar fi introducerea tastaturii sau comenzile vocale.
Textul înconjurat de etichete <kbd> este de obicei afișat într-un font monospace:

Exemplu: 
<p>Salvați documentul apăsând <kbd>Ctrl + S</kbd></p>
Rezultat: 
Salvați documentul apăsând Ctrl + S

HTML <samp> Pentru ieșirea dintr-un program(Program Output)

Elementul HTML <samp> reprezintă ieșirea dintr-un program sau un sistem de calcul.
Textul înconjurat de etichete <samp> este de obicei afișat într-un font monospace:

Exemplu: 
<p>Dacă introduceți o valoare greșită, programul va returna<samp>Eroare!</samp></p>
Rezultat: 
Dacă introduceți o valoare greșită, programul va returna Eroare!

Elemente de cod HTML pentru computer. Elementul de cod var.

Vezi videoclipul: Elemente de cod HTML pentru computer.... Vezi toată lecția: Elemente de cod HTML pentru computer Citește teoria: Elemente de cod HTML pentru computer....
Elementul HTML <var> - Pentru variabile

Elementul HTML <var> definește o variabilă.
Variabila ar putea fi o variabilă într-o expresie matematică sau o variabilă în contextul programării:

Exemplu: 
Einstein a scris: <var>E</var> = <var>mc</var><sup>2</sup>.
Rezultat: 
Einstein a scris: E = mc2.

Elemente de cod HTML pentru computer
 
Etichetă Descriere
<code> Definește codul de programare
<kbd> Definește introducerea tastaturii 
<samp> Definește ieșirea computerului
<var> Definește o variabilă
<pre> Definește text preformatat

Entități HTML. Spațiu fără întrerupere: nbsp.

Vezi videoclipul: Entități HTML. Spațiu fără întrerupere... Vezi toată lecția: Entități HTML Citește teoria: Entități HTML. Spațiu fără întrerupere...
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.
Unele caractere sunt rezervate în HTML.
Dacă utilizați semnele mai mic decât (<) sau mai mare decât (>) în textul dvs., browserul le poate amesteca cu etichete.
Entitățile de caractere sunt utilizate pentru a afișa caractere rezervate în HTML.
O entitate de caractere arată astfel:

Exemplu: 
&entity_name;
SAU
&#entity_number;
Pentru a afișa un semn mai mic decât (<) trebuie să scriem:  &lt; or &#60;

Avantajul utilizării unui nume de entitate: Un nume de entitate este ușor de reținut.
Dezavantajul utilizării unui nume de entitate: Navigatorii pot să nu accepte toate numele de entitate, dar suportul pentru numere este bun.

Spațiu fără întrerupere (Non-breaking Space)

O entitate de caractere obișnuită folosită în HTML este spațiul care nu se întrerupe (non-breaking space): &nbsp;
Un spațiu fără întrerupere (non-breaking space) este un spațiu care nu se va întrerupe (non-breaking space) într-o nouă linie.
Două cuvinte separate printr-un spațiu care nu se întrerupe se vor lipi (nu se vor întrerupe  într-o linie nouă). Acest lucru este util atunci când întreruperea cuvintelor ar putea fi perturbatoare.

Exemple:
  • § 10
  • 10 km/h
  • 10 PM
O altă utilizare obișnuită a spațiului care nu se întrerupe este de a împiedica browserele să nu trunchieze spațiile din paginile HTML.
Dacă scrieți 10 spații în textul dvs., browserul va elimina 9 dintre ele. Pentru a adăuga spații reale textului dvs., puteți utiliza entitatea de caractere &nbsp; .

Cratima care nu se întrerupe (&#8209;) vă permite să utilizați un caracter cratimă (-) care nu se va întrerupe.

Entități HTML. Combinarea marcajelor diacritice: glyph, grave(̀) și acute()

Vezi videoclipul: Entități HTML. Combinarea marcajelor d... Vezi toată lecția: Entități HTML Citește teoria: Entități HTML. Combinarea marcajelor d...
Alte entități de caractere HTML utile
 
Rezultat Descriere Numele entității Numărul entității
  spațiu fără rupere &nbsp; &#160;
< mai puțin decât &lt; &#60;
> mai mare ca &gt; &#62;
& ampersand &amp; &#38;
" ghidaj dublu &quot; &#34;
' o ghilimea (apostrof) &apos; &#39;
¢ cent &cent; &#162;
£ liră &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
© copyright &copy; &#169;
® marcă inregistrată &reg; &#174;

Notă: Numele entităților sunt casesensitive.

Combinarea marcajelor diacritice (Diacritical Marks)

Un marcaj diacritic este un „glyph” adăugat la o literă.
Unele mmarcaje diacritice, cum ar fi grave (̀) și acute (´) sunt numite accente.
Semnele diacritice pot apărea atât deasupra cât și sub o literă, în interiorul unei litere și între două litere.
Marcajele diacritice pot fi utilizate în combinație cu caractere alfanumerice pentru a produce un caracter care nu este prezent în setul de caractere (codare) utilizat în pagină.

Aici sunt câteva exemple:
 
Marcaj Caracter Construcție Rezultat
 ̀ a a&#768; à
 ́ a a&#769; á
̂ a a&#770; â
 ̃ a a&#771; ã
 ̀ O O&#768; Ò
 ́ O O&#769; Ó
̂ O O&#770; Ô
 ̃ O O&#771; Õ

Simboluri HTML. Entități de simbol HTML. Simboluri matematice acceptate de HTML: forall, part, exist, empty, nabla, isin, notin, ni, prod, sum.

Vezi videoclipul: Simboluri HTML. Entități de simbol HTM... Vezi toată lecția: Simboluri HTML Citește teoria: Simboluri HTML. Entități de simbol HTM...
Entități de simbol HTML

Entitățile HTML au fost descrise în capitolul precedent.
Multe simboluri matematice, tehnice și 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.
Dacă nu există niciun nume de entitate, puteți utiliza un număr de entitate, o referință zecimală sau hexadecimală.

Exemplu: 
<p>Voi afișa &euro;</p>
<p>Voi afișa &#8364;</p>
<p>Voi afișa &#x20AC;</p>
Se va afișa ca: 
Voi afișa €
Voi afișa €
Voi afișa €

Simboluri matematice acceptate de HTML
 
Caracter Număr Entitate Descriere
∀ &#8704; &forall; PENTRU TOȚI
∂ &#8706; &part; PARȚIAL DIFERENŢIAL
∃ &#8707; &exist; EXISTA
∅ &#8709; &empty; SETURI GOALE
∇ &#8711; &nabla; NABLA
∈ &#8712; &isin; ELEMENTUL DE
∉ &#8713; &notin; NU ESTE UN ELEMENT AL
∋ &#8715; &ni; CONȚINE CA MEMBRU
∏ &#8719; &prod; PRODUS N-ARY
∑ &#8721; &sum; REZUMAT N-ARY

Simboluri HTML. Litere grecești acceptate de HTML: Alpha, Beta, Gamma, Delta, Epsilon, Zeta. Entități acceptate de HTML:copy, euro, trade, larr, uarr, rarr, darr, clubs, diams.

Vezi videoclipul: Simboluri HTML. Litere grecești accept... Vezi toată lecția: Simboluri HTML Citește teoria: Simboluri HTML. Litere grecești accept...
Câteva litere grecești acceptate de HTML
 
Caracter Număr Entitate Descriere
Α &#913; &Alpha; LITERA GRECĂ ALPHA
Β &#914; &Beta; LITERA GRECĂ BETA
Γ &#915; &Gamma; LITERA GRECĂ GAMMA
Δ &#916; &Delta; LITERA GRECĂ DELTA
Ε &#917; &Epsilon; LITERA GRECĂ EPSILON
Ζ &#918; &Zeta; LITERA GRECĂ ZETA

Alte câteva entități acceptate de HTML
 
Caracter Număr Entitate Descriere
© &#169; &copy; SEMNUL COPYRIGHT
® &#174; &reg; SEMNUL ÎNREGISTRAT
€ &#8364; &euro; SEMNUL EURO
™ &#8482; &trade; MARCĂ
← &#8592; &larr; SĂGEATĂ SPRE STANGA
↑ &#8593; &uarr; SĂGEATĂ ÎN SUS
→ &#8594; &rarr; SĂGEATĂ SPRE DREAPTA
↓ &#8595; &darr; SĂGEATĂ ÎN JOS
♠ &#9824; &spades; BLACK SPADE SUIT
♣ &#9827; &clubs; BLACK CLUB SUIT
♥ &#9829; &hearts; BLACK HEART SUIT
♦ &#9830; &diams; BLACK DIAMOND SUIT

Codare HTML (seturi de caractere). Diferențe dintre seturile de caractere.

Vezi videoclipul: Codare HTML (seturi de caractere). Dif... Vezi toată lecția: Codare HTML (seturi de caractere) Citește teoria: Codare HTML (seturi de caractere). Dif...
Diferențele dintre seturile de caractere

Următorul tabel afișează diferențele dintre seturile de caractere descrise mai sus:
 
Numb ASCII ANSI 8859 UTF-8 Descriere
32         space
33 ! ! ! ! exclamation mark
34 " " " " quotation mark
35 # # # # number sign
36 $ $ $ $ dollar sign
37 % % % % percent sign
38 & & & & ampersand
39 ' ' ' ' apostrophe
40 ( ( ( ( left parenthesis
41 ) ) ) ) right parenthesis
42 * * * * asterisk
43 + + + + plus sign
44 , , , , comma
45 - - - - hyphen-minus
46 . . . . full stop
47 / / / / solidus
48 0 0 0 0 digit zero
49 1 1 1 1 digit one
50 2 2 2 2 digit two
51 3 3 3 3 digit three
52 4 4 4 4 digit four
53 5 5 5 5 digit five
54 6 6 6 6 digit six
55 7 7 7 7 digit seven
56 8 8 8 8 digit eight
57 9 9 9 9 digit nine
58 : : : : colon
59 ; ; ; ; semicolon
60 < < < < less-than sign
61 = = = = equals sign
62 > > > > greater-than sign
63 ? ? ? ? question mark
64 @ @ @ @ commercial at
65 A A A A Latin capital letter A
66 B B B B Latin capital letter B
67 C C C C Latin capital letter C
68 D D D D Latin capital letter D
69 E E E E Latin capital letter E
70 F F F F Latin capital letter F
71 G G G G Latin capital letter G
72 H H H H Latin capital letter H
73 I I I I Latin capital letter I
74 J J J J Latin capital letter J
75 K K K K Latin capital letter K
76 L L L L Latin capital letter L
77 M M M M Latin capital letter M
78 N N N N Latin capital letter N
79 O O O O Latin capital letter O
80 P P P P Latin capital letter P
81 Q Q Q Q Latin capital letter Q
82 R R R R Latin capital letter R
83 S S S S Latin capital letter S
84 T T T T Latin capital letter T
85 U U U U Latin capital letter U
86 V V V V Latin capital letter V
87 W W W W Latin capital letter W
88 X X X X Latin capital letter X
89 Y Y Y Y Latin capital letter Y
90 Z Z Z Z Latin capital letter Z
91 [ [ [ [ left square bracket
92 \ \ \ \ reverse solidus
93 ] ] ] ] right square bracket
94 ^ ^ ^ ^ circumflex accent
95 _ _ _ _ low line
96 ` ` ` ` grave accent
97 a a a a Latin small letter a
98 b b b b Latin small letter b
99 c c c c Latin small letter c
100 d d d d Latin small letter d
101 e e e e Latin small letter e
102 f f f f Latin small letter f
103 g g g g Latin small letter g
104 h h h h Latin small letter h
105 i i i i Latin small letter i
106 j j j j Latin small letter j
107 k k k k Latin small letter k
108 l l l l Latin small letter l
109 m m m m Latin small letter m
110 n n n n Latin small letter n
111 o o o o Latin small letter o
112 p p p p Latin small letter p
113 q q q q Latin small letter q
114 r r r r Latin small letter r
115 s s s s Latin small letter s
116 t t t t Latin small letter t
117 u u u u Latin small letter u
118 v v v v Latin small letter v
119 w w w w Latin small letter w
120 x x x x Latin small letter x
121 y y y y Latin small letter y
122 z z z z Latin small letter z
123 { { { { left curly bracket
124 | | | | vertical line
125 } } } } right curly bracket
126 ~ ~ ~ ~ tilde
127 DEL        
128   €     euro sign
129      NOT USED
130   ‚     single low-9 quotation mark
131   ƒ     Latin small letter f with hook
132   „     double low-9 quotation mark
133   …     horizontal ellipsis
134   †     dagger
135   ‡     double dagger
136   ˆ     modifier letter circumflex accent
137   ‰     per mille sign
138   Š     Latin capital letter S with caron
139   ‹     single left-pointing angle quotation mark
140   Œ     Latin capital ligature OE
141      NOT USED
142   Ž     Latin capital letter Z with caron
143      NOT USED
144      NOT USED
145   ‘     left single quotation mark
146   ’     right single quotation mark
147   “     left double quotation mark
148   ”     right double quotation mark
149   •     bullet
150   –     en dash
151   —     em dash
152   ˜     small tilde
153   ™     trade mark sign
154   š     Latin small letter s with caron
155   ›     single right-pointing angle quotation mark
156   œ     Latin small ligature oe
157      NOT USED
158   ž     Latin small letter z with caron
159   Ÿ     Latin capital letter Y with diaeresis
160         no-break space
161   ¡ ¡ ¡ inverted exclamation mark
162   ¢ ¢ ¢ cent sign
163   £ £ £ pound sign
164   ¤ ¤ ¤ currency sign
165   ¥ ¥ ¥ yen sign
166   ¦ ¦ ¦ broken bar
167   § § § section sign
168   ¨ ¨ ¨ diaeresis
169   © © © copyright sign
170   ª ª ª feminine ordinal indicator
171   « « « left-pointing double angle quotation mark
172   ¬ ¬ ¬ not sign
173   ­ ­ ­ soft hyphen
174   ® ® ® registered sign
175   ¯ ¯ ¯ macron
176   ° ° ° degree sign
177   ± ± ± plus-minus sign
178   ² ² ² superscript two
179   ³ ³ ³ superscript three
180   ´ ´ ´ acute accent
181   µ µ µ micro sign
182   pilcrow sign
183   · · · middle dot
184   ¸ ¸ ¸ cedilla
185   ¹ ¹ ¹ superscript one
186   º º º masculine ordinal indicator
187   » » » right-pointing double angle quotation mark
188   ¼ ¼ ¼ vulgar fraction one quarter
189   ½ ½ ½ vulgar fraction one half
190   ¾ ¾ ¾ vulgar fraction three quarters
191   ¿ ¿ ¿ inverted question mark
192   À À À Latin capital letter A with grave
193   Á Á Á Latin capital letter A with acute
194   Â Â Â Latin capital letter A with circumflex
195   Ã Ã Ã Latin capital letter A with tilde
196   Ä Ä Ä Latin capital letter A with diaeresis
197   Å Å Å Latin capital letter A with ring above
198   Æ Æ Æ Latin capital letter AE
199   Ç Ç Ç Latin capital letter C with cedilla
200   È È È Latin capital letter E with grave
201   É É É Latin capital letter E with acute
202   Ê Ê Ê Latin capital letter E with circumflex
203   Ë Ë Ë Latin capital letter E with diaeresis
204   Ì Ì Ì Latin capital letter I with grave
205   Í Í Í Latin capital letter I with acute
206   Î Î Î Latin capital letter I with circumflex
207   Ï Ï Ï Latin capital letter I with diaeresis
208   Ð Ð Ð Latin capital letter Eth
209   Ñ Ñ Ñ Latin capital letter N with tilde
210   Ò Ò Ò Latin capital letter O with grave
211   Ó Ó Ó Latin capital letter O with acute
212   Ô Ô Ô Latin capital letter O with circumflex
213   Õ Õ Õ Latin capital letter O with tilde
214   Ö Ö Ö Latin capital letter O with diaeresis
215   × × × multiplication sign
216   Ø Ø Ø Latin capital letter O with stroke
217   Ù Ù Ù Latin capital letter U with grave
218   Ú Ú Ú Latin capital letter U with acute
219   Û Û Û Latin capital letter U with circumflex
220   Ü Ü Ü Latin capital letter U with diaeresis
221   Ý Ý Ý Latin capital letter Y with acute
222   Þ Þ Þ Latin capital letter Thorn
223   ß ß ß Latin small letter sharp s
224   à à à Latin small letter a with grave
225   á á á Latin small letter a with acute
226   â â â Latin small letter a with circumflex
227   ã ã ã Latin small letter a with tilde
228   ä ä ä Latin small letter a with diaeresis
229   å å å Latin small letter a with ring above
230   æ æ æ Latin small letter ae
231   ç ç ç Latin small letter c with cedilla
232   è è è Latin small letter e with grave
233   é é é Latin small letter e with acute
234   ê ê ê Latin small letter e with circumflex
235   ë ë ë Latin small letter e with diaeresis
236   ì ì ì Latin small letter i with grave
237   í í í Latin small letter i with acute
238   î î î Latin small letter i with circumflex
239   ï ï ï Latin small letter i with diaeresis
240   ð ð ð Latin small letter eth
241   ñ ñ ñ Latin small letter n with tilde
242   ò ò ò Latin small letter o with grave
243   ó ó ó Latin small letter o with acute
244   ô ô ô Latin small letter o with circumflex
245   õ õ õ Latin small letter o with tilde
246   ö ö ö Latin small letter o with diaeresis
247   ÷ ÷ ÷ division sign
248   ø ø ø Latin small letter o with stroke
249   ù ù ù Latin small letter u with grave
250   ú ú ú Latin small letter u with acute
251   û û û Latin small letter with circumflex
252   ü ü ü Latin small letter u with diaeresis
253   ý ý ý Latin small letter y with acute
254   þ þ þ Latin small letter thorn
255   ÿ ÿ ÿ Latin small letter y with diaeresis

Codare HTML (seturi de caractere). Atributul HTML charset. Eticheta meta.

Vezi videoclipul: Codare HTML (seturi de caractere). Atr... Vezi toată lecția: Codare HTML (seturi de caractere) Citește teoria: Codare HTML (seturi de caractere). Atr...
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ă.

Ce este codarea caracterelor?

ASCII a fost primul standard de codare a caracterelor (numit și set de caractere). ASCII a definit 128 de caractere alfanumerice diferite care pot fi utilizate pe internet: numere (0-9), litere engleze (A-Z) și unele caractere speciale, cum ar fi! $ + - () @ <>.
ISO-8859-1 a fost setul de caractere implicit pentru HTML 4. Acest set de caractere a acceptat 256 de coduri de caractere diferite.
ANSI (Windows-1252) a fost setul de caractere Windows original. ANSI este identic cu ISO-8859-1, cu excepția faptului că ANSI are 32 de caractere suplimentare.
Deoarece ANSI și ISO-8859-1 erau atât de limitate, HTML 4 a acceptat și UTF-8.
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>:

Exemplu: 
<meta charset="UTF-8">
Dacă un browser detectează ISO-8859-1 într-o pagină web, acesta este implicit în ANSI.

Codare HTML (seturi de caractere). Setul de caractere ASCII. Setul de caractere ANSI (Windows-1252). Set de caractere ISO-8859-1. Setul de caractere UTF-8. Regula CSS charset.

Vezi videoclipul: Codare HTML (seturi de caractere). Set... Vezi toată lecția: Codare HTML (seturi de caractere) Citește teoria: Codare HTML (seturi de caractere). Set...
Setul de caractere ASCII

ASCII folosește valorile de la 0 la 31 (și 127) pentru caracterele de control.
ASCII utilizează valorile de la 32 la 126 pentru litere, cifre și simboluri.
ASCII nu utilizează valorile de la 128 la 255.

Setul de caractere ANSI (Windows-1252)

ANSI este identic cu ASCII pentru valorile de la 0 la 127.
ANSI are un set propriu de caractere pentru valorile de la 128 la 159.
ANSI este identic cu UTF-8 pentru valorile de la 160 la 255.

Set de caractere ISO-8859-1

8859-1 este identic cu ASCII pentru valorile de la 0 la 127.
8859-1 nu utilizează valorile de la 128 la 159.
8859-1 este identic cu UTF-8 pentru valorile de la 160 la 255.

Setul de caractere UTF-8

UTF-8 este identic cu ASCII pentru valorile de la 0 la 127.

UTF-8 nu folosește valorile de la 128 la 159.

UTF-8 este identic atât pentru ANSI, cât și pentru 8859-1 pentru valorile de la 160 la 255.

UTF-8 continuă de la valoarea 256 cu peste 10 000 de caractere diferite.

Pentru o privire mai atentă, studiază referința noastră completă de seturi de caractere HTML.

Regula CSS @charset

Puteți utiliza regula CSS @charset pentru a specifica codarea caracterelor utilizate într-o foaie de stil (style sheet):

Exemplu:

Setați codarea foii de stil (style sheet) la Unicode UTF-8: 
@charset "UTF-8";

HTML5 Drag and Drop. Asistență browser.

Vezi videoclipul: HTML5 Drag and Drop. Asistență browser... Vezi toată lecția: HTML5 Drag and Drop Citește teoria: HTML5 Drag and Drop. Asistență browser...
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.

Asistență browser (Browser Support)

Numerele din tabel specifică prima versiune a browserului care acceptă complet Drag and Drop.



Exemplu de drag and drop HTML

Exemplul de mai jos este un exemplu de drag and drop simplu:

Exemplu: 
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>
Poate părea complicat, dar permite parcurgerea tuturor diferitelor părți ale unui eveniment de drag and drop.

HTML5 Drag and Drop. Element care poate fi deplasat cu atributul dragable pe true. Atributul ondragstart. Metoda dataTransfer.setData(). Evenimentul ondragover. Metoda event.preventDefault() pentru evenimentul ondragover. Atributul ondrop.

Vezi videoclipul: HTML5 Drag and Drop. Element care poat... Vezi toată lecția: HTML5 Drag and Drop Citește teoria: HTML5 Drag and Drop. Element care poat...
Faceți un element care poate fi deplasat

În primul rând: pentru a face un element care poate fi trasat, setați atributul dragable pe true: 
<img draggable="true">

Ce să deplasați - ondragstart și setData ()

Apoi, specificați ce ar trebui să se întâmple atunci când elementul este tras.
În exemplul de mai sus, 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:
  
function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}
În acest caz, tipul de date este „text”, iar valoarea este id-ul elementului care poate fi antrenat („drag1”).

Unde să elimin datele trase - ondragover

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:
  
event.preventDefault()

Faceți eliminarea - ondrop

Atunci când datele glisate sunt abandonate, apare un eveniment drop.
În exemplul de mai sus, atributul ondrop apelează o funcție, drop(eveniment): 
function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

Cod explicat:
 
  • 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

HTML Uniform Resource Locators (URL). Codificare URL. Setul de caractere ASCII.

Vezi videoclipul: HTML Uniform Resource Locators (URL).... Vezi toată lecția: HTML Uniform Resource Locators (URL) Citește teoria: HTML Uniform Resource Locators (URL)....
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.

Exemple de codificare ASCII

Browserul dvs. va coda intrarea, în funcție de setul de caractere utilizat în pagina dvs.
Setul de caractere implicit în HTML5 este UTF-8.

 
Caracter De la Windows-1252 De la UTF-8
€ %80 %E2%82%AC
£ %A3 %C2%A3
© %A9 %C2%A9
® %AE %C2%AE
À %C0 %C3%80
Á %C1 %C3%81
 %C2 %C3%82
à %C3 %C3%83
Ä %C4 %C3%84
Å %C5 %C3%85

HTML Uniform Resource Locators (URL). Scheme URL comune: HyperText Transfer Protocol (http), Secure HyperText Transfer Protocol (https), File Transfer Protocol (ftp).

Vezi videoclipul: HTML Uniform Resource Locators (URL).... Vezi toată lecția: HTML Uniform Resource Locators (URL) Citește teoria: HTML Uniform Resource Locators (URL)....
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.

URL - Uniform Resource Locator

Navigatoarele web solicită pagini de pe serverele web folosind o adresă URL.
Un URL (Uniform Resource Locator) este utilizat pentru a adresa un document (sau alte date) pe web.
O adresă web precum /html/default.asp respectă aceste reguli de sintaxă: 
scheme://prefix.domain:port/path/filename
Explicaţie:
  • 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

Tabelul de mai jos prezintă câteva scheme comune:
 
Schemă Prescurtare pentru Folosit pentru
http HyperText Transfer Protocol Pagini web comune. Nu este criptat
https Secure HyperText Transfer Protocol Pagini web sigure. Criptat
ftp File Transfer Protocol Descărcarea sau încărcarea fișierelor
file   Un fișier pe computer

HTML și XHTML - Partea 2

Vezi videoclipul: HTML și XHTML - Partea 2 Vezi toată lecția: HTML și XHTML Citește teoria: HTML și XHTML - Partea 2
Cele mai importante diferențe din HTML:

Structura documentului
  • XHTML DOCTYPE este obligatoriu.
  • Atributul xmlns din <html> este obligatoriu.
  • <html>, <head>, <title> și <body> sunt obligatorii.
Elemente XHTML
  • Elementele XHTML trebuie să fie amplasate în mod corespunzător.
  • Elementele XHTML trebuie să fie întotdeauna închise.
  • Elementele XHTML trebuie să fie cu litere mici.
  • Documentele XHTML trebuie să aibă un element rădăcină.
Atributele XHTML
  • Numele atributelor trebuie să fie scrise cu litere mici.
  • Valorile atributelor trebuie menționate.
  • Minimizarea atributelor este interzisă.

HTML și XHTML - Partea 5

Vezi videoclipul: HTML și XHTML - Partea 5 Vezi toată lecția: HTML și XHTML Citește teoria: HTML și XHTML - Partea 5
Elementele XHTML trebuie să fie scrise cu litere mici (Lower Case)

Exemple:

Acesta este un exemplu greșit 
<BODY>
<P> Acesta este un paragraf </P>
</ BODY>
Acesta este un exemplu corect: 
<body>
<p>Aceste este un paragraf</p>
</body>

Numele atributelor XHTML trebuie să fie scrise cu litere mici (Lower Case)

Exemple:

Acesta este un exemplu greșit: 
<table WIDTH="100%">
Acesta este un exemplu corect: 
<table width="100%">

Valorile atributelor trebuie citate

Exemple:

Acesta este un exemplu greșit: 
<table width=100%>
Acesta este un exemplu corect: 
<table width="100%">

HTML și XHTML - Partea 6

Vezi videoclipul: HTML și XHTML - Partea 6 Vezi toată lecția: HTML și XHTML Citește teoria: HTML și XHTML - Partea 6
Minimizarea atributelor este interzisă

Exemple:

Acesta este un exemplu greșit: 
<input type="checkbox" name="vehicle" value="car" checked />
Acesta este un exemplu corect: 
<input type="checkbox" name="vehicle" value="car" checked="checked" />
Acesta este un exemplu greșit: 
<input type="text" name="lastname" disabled />
Acesta este un exemplu corect: 
<input type="text" name="lastname" disabled="disabled" />

Cum se face conversia de la HTML la XHTML?
  1. Adăugați un XHTML <! DOCTYPE> pe prima linie a fiecărei pagini.
  2. Adăugați un atribut xmlns elementului html al fiecărei pagini.
  3. Schimbați toate numele elementelor în minuscule (lowercase).
  4. Închideți toate elementele goale.
  5. Modificați toate numele atributelor în minuscule (lowercase).
  6. Citați toate valorile atributului.

HTML și XHTML - Partea 1

Vezi videoclipul: HTML și XHTML - Partea 1 Vezi toată lecția: HTML și XHTML Citește teoria: HTML și XHTML - Partea 1
HTML și XHTML

XHTML este HTML scris ca XML.

Ce este XHTML?
  • 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.
De ce XHTML?

Multe pagini de pe internet conțin „bad” HTML.
Acest cod HTML funcționează bine în majoritatea browserelor (chiar dacă nu respectă regulile HTML):
  
<html>
<head>
  <title>Acesta este bad HTML</title>

<body>
  <h1>Bad HTML
  <p>Acesta este un alineat
</body>
Piața de astăzi constă din diferite tehnologii de browser. Unele browsere rulează pe computere, iar unele browsere rulează pe telefoane mobile sau alte dispozitive mici. Dispozitivele mai mici au adesea lipsa resurselor sau a puterii pentru a interpreta marcarea „bad”.
XML este un limbaj de marcare în care documentele trebuie să fie marcate corect (să fie „bine formate”).
XHTML a fost dezvoltat combinând punctele forte ale HTML și XML.
XHTML este reproiectat HTML ca XML.

HTML și XHTML - Partea 3

Vezi videoclipul: HTML și XHTML - Partea 3 Vezi toată lecția: HTML și XHTML Citește teoria: HTML și XHTML - Partea 3
<! DOCTYPE ....> Este obligatoriu

Un document XHTML trebuie să aibă o declarație XHTML DOCTYPE.
O listă completă cu toate documentele XHTML se găsește în Referința noastră pentru etichete HTML.
Elementele <html>, <head>, <title> și <body> trebuie să fie, de asemenea, prezente, iar atributul xmlns din <html> trebuie să specifice xml namespace pentru document.
Acest exemplu arată un document XHTML cu un minim de etichete necesare:

Exemplu: 
<!DOCTYPE html PUBLIC "-//lv//DTD XHTML 1.0 Transitional//EN"
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="/1999/xhtml">

<head>
  <title>Titlul documentului </title>
</head>

<body>
  ceva conținut
</body>

</html>
Elementele XHTML trebuie să fie amplasate corespunzător

În HTML, unele elemente pot fi îmbinate în mod necorespunzător între ele, astfel:

Exemplu: 
<b> <i> Acest text are caractere bold și italice </b> </i>

HTML și XHTML - Partea 4

Vezi videoclipul: HTML și XHTML - Partea 4 Vezi toată lecția: HTML și XHTML Citește teoria: HTML și XHTML - Partea 4
Elementele XHTML trebuie să fie întotdeauna închise

Exemple:

Acesta este un exemplu greșit: 
<p> Acesta este un paragraf
<p> Acesta este un alt paragraf
Acesta este un exemplu corect: 
<p> Acesta este un paragraf </p>
<p> Acesta este un alt paragraf </p>

Elementele goale trebuie să fie, de asemenea, închise

Exemple:

Acesta este un exemplu greșit: 
O pauză: <br>
O regulă orizontală: <hr>
O imagine: <img src = "happy.gif" alt = "Față fericită">
Acesta este un exemplu corect: 
O pauză: <br />
O regulă orizontală: <hr />
O imagine: <img src = "happy.gif" alt = "Față fericită" />

Formulare HTML. Elementul input. Atributul type.

Vezi videoclipul: Formulare HTML. Elementul input. Atri... Vezi toată lecția: Formulare HTML Citește teoria: Formulare HTML. Elementul input. Atri...
Elementul <input>

Elementul <input> este cel mai important form element.
Elementul <input> poate fi afișat în mai multe moduri, în funcție de atributul type.

Aici sunt cateva exemple:
 
Tip Descriere
<input type="text"> Definește un câmp de introducere text (one-line text)dintr-o linie
<input type="radio"> Definește un buton radio (pentru selectarea unei opțiuni din mai multe)
<input type="submit"> Definește un buton de trimitere (pentru trimiterea formularului)

Text Input

<input type = "text"> definește un câmp de intrare de o linie (one-line input field) pentru introducerea textului (text input):

Exemplu: 
<form>
  Prenume:<br>
  <input type="text" name="prenume"><br>
  Nume:<br>
  <input type="text" name="nume">
</form>
Așa va arăta într-un browser:


Notă: Formularul în sine nu este vizibil. De asemenea, rețineți că lățimea implicită a unui câmp de text este de 20 de caractere.

Formulare HTML. Atributul action. Atributul target. Atributul method.

Vezi videoclipul: Formulare HTML. Atributul action. Atri... Vezi toată lecția: Formulare HTML Citește teoria: Formulare HTML. Atributul action. Atri...
Atributul action

Atributul action definește acțiunea care trebuie executată la trimiterea formularului.
În mod normal, datele formularului sunt trimise către o pagină web pe server atunci când utilizatorul face click pe butonul de trimitere (submit button).
În exemplul de mai sus, datele formularului sunt trimise către o pagină de pe server numită "/ action_page.php". Această pagină conține un script din partea serverului care gestionează datele formularului:

Exemplu: 
<form action="/action_page.php">
Dacă atributul action este omis, acțiunea este setată pe pagina curentă.

Atributul target

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”:

Exemplu: 
<form action="/action_page.php" target="_blank">

Atributul method

Atributul method specifică metoda HTTP (GET sau POST) care trebuie utilizată la trimiterea datelor formularului:

Exemple: 
<form action="/action_page.php" method="get">
sau 
<form action="/action_page.php" method="post">

Formulare HTML. Metoda GET. Metoda POST. Atributul name.

Vezi videoclipul: Formulare HTML. Metoda GET. Metoda POS... Vezi toată lecția: Formulare HTML Citește teoria: Formulare HTML. Metoda GET. Metoda POS...
Când să folosiți GET?

Trimiterea datelor formularului se face cu metoda implicită GET.
Cu toate acestea, atunci când este utilizat GET, datele formularului trimis vor fi vizibile în câmpul adresei paginii: 
/action_page.php?firstname=Donald&lastname=Duck

Note despre GET:
  • Adaugă datele formularului în perechi nume / valoare la adresa URL.
  • Lungimea unei adrese URL este limitată (2048 de caractere).
  • Nu folosiți niciodată GET pentru a trimite date sensibile! (va fi vizibil pe adresa URL).
  • Util pentru trimiterile de formular unde un utilizator dorește să marcheze rezultatul.
  • GET este mai bun pentru datele care nu sunt sigure, cum ar fi șirurile de interogare din Google.
Când să folosiți POST?

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.

Note despre POST:

POST-ul nu are limitări de mărime și poate fi utilizat pentru a trimite cantități mari de date.
Trimiterile de formular cu POST nu pot fi marcate.

Atributul name

Fiecare câmp de intrare trebuie să aibă un atribut name pentru a fi transmis.
Dacă atributul name este omis, datele câmpului de intrare nu vor fi deloc trimise.
Acest exemplu va trimite doar câmpul de introducere „Nume de familie” (Last name):

Exemplu: 
<form action="/action_page.php">
  Prenume:<br>
  <input type="text" value="Donald"><br>
  Nume:<br>
  <input type="text" name="lastname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form>

Formulare HTML. Elementul HTML form.

Vezi videoclipul: Formulare HTML. Elementul HTML form. Vezi toată lecția: Formulare HTML Citește teoria: Formulare HTML. Elementul HTML form.
Formulare HTML 

Exemplu de formular HTML

Prenume:

Nume:


 

Elementul <form>

Elementul HTML <form> definește un formular care este utilizat pentru a colecta intrarea utilizatorului: 
<form>
.
elemente form
.
</form>
Un formular HTML conține elemente de formular.
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.

Formulare HTML. Gruparea datelor formularului cu fieldset. Elementul legend.

Vezi videoclipul: Formulare HTML. Gruparea datelor formu... Vezi toată lecția: Formulare HTML Citește teoria: Formulare HTML. Gruparea datelor formu...
Gruparea datelor formularului cu <fieldset>

Elementul <fieldset> este utilizat pentru a grupa datele înrudite într-un formular.
Elementul <legend> definește o legendă pentru elementul <fieldset>.

Exemplu: 
<form action="/action_page.php">
  <fieldset>
    <legend>Informații personale:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Donald"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Duck"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Așa se va afișa într-un browser codul HTML de mai sus:
 
Informații personale:
Prenume:

Nume:


 

Lista tuturor atributelor <form>:
 
Atribut Descriere
accept-charset Specifică caracterul folosit în formularul trimis (implicit: setul de pagini).
action Specifică o adresă (URL) unde să trimiteți formularul (implicit: pagina de trimitere).
autocomplete Specifică dacă browserul ar trebui să completeze automat formularul (implicit: activat).
enctype Specifică codificarea datelor trimise (implicit: este codat cu url).
method Specifică metoda HTTP folosită la trimiterea formularului (implicit: GET).
name Specifică un nume folosit pentru identificarea formularului (pentru utilizarea DOM: document.forms.name).
novalidate Specifică faptul că browserul nu trebuie să valideze formularul.
target Specifică ținta adresei în atributul de acțiune (implicit: _self).

Formulare HTML. Radio Button Input. Butonul Submit.

Vezi videoclipul: Formulare HTML. Radio Button Input. Bu... Vezi toată lecția: Formulare HTML Citește teoria: Formulare HTML. Radio Button Input. Bu...
Radio Button Input

<input type="radio"> definește un buton radio.
Butoanele radio permit unui utilizator să selecteze UNUL dintr- un număr limitat de opțiuni:

Exemplu: 
<form>
  <input type="radio" name="gender" value="bărbat" checked> Bărbat<br>
  <input type="radio" name="gender" value="femeie"> Femeie<br>
  <input type="radio" name="gender" value="altele"> Altele
</form>

Așa se va afișa într-un browser codul HTML de mai sus :



Butonul Trimite (Submit)

<input type = "submit"> definește un buton pentru trimiterea datelor formularului către un gestionar de formulare (form-handler).
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:

Exemplu: 
<form action="/action_page.php">
  Prenume:<br>
  <input type="text" name="firstname" value="Donald"><br>
  Nume:<br>
  <input type="text" name="lastname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form>
Așa se va afișa într-un browser codul HTML de mai sus :
 
Prenume:

Nume:


 

Elemente de formulare HTML: textarea și button. Atributele multiple, rows, cols, type.

Vezi videoclipul: Elemente de formulare HTML: textarea ș... Vezi toată lecția: Elemente de formulare HTML Citește teoria: Elemente de formulare HTML: textarea ș...
Atributul multiple:

Atributul multiple permite mai multe selecții.
Utilizați atributul multiple pentru a permite utilizatorului să selecteze mai multe valori:

Exemplu: 
<select name="mașinini" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Elementul <textarea>

Elementul <textarea> definește un câmp de introducere pe mai multe linii (o zonă de text):

Exemplu:  
<textarea name="message" rows="10" cols="30">
Pisica se juca în grădină.
</textarea>
Atributul rows specifică numărul vizibil de linii dintr-o zonă de text.
Atributul cols specifică lățimea vizibilă a unei zone de text.
Așa se va afișa codul HTML de mai sus într-un browser:


Puteți defini, de asemenea, dimensiunea zonei de text utilizând CSS:

Exemplu:  
<textarea name="message" style="width:200px; height:600px;">
Pisica se juca în grădină.
</textarea>

Elementul <button>

Elementul <button> definește un buton pe care se poate face click:

Exemplu:  
<button type="button" onclick="alert('Hello World!')">Faceți click pe mine!</button>
Așa se va afișa într-un browser codul HTML de mai sus:

Notă: Specificați întotdeauna atributul type pentru elementul button. Diferite browsere pot utiliza diferite tipuri implicite pentru elementul button.

Elemente de formulare HTML: input, select, option. Atributele type și size.

Vezi videoclipul: Elemente de formulare HTML: input, sel... Vezi toată lecția: Elemente de formulare HTML Citește teoria: Elemente de formulare HTML: input, sel...
Elemente de formulare HTML

Acest capitol descrie toate elementele de formă HTML.

Elementul <input>

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.

Exemplu: 
<input name="firstname" type="text">
Dacă atributul type este omis, câmpul de intrare primește tipul implicit: "text".

Elementul <select>

Elementul <select> definește o listă derulantă (drop-down list):

Exemplu: 
<select name="mașini">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
Elementul  <option> definește o opțiune care poate fi selectată.
În mod implicit, este selectat primul element din lista derulantă (drop-down list).
Pentru a defini o opțiune preselectată, adăugați atributul selectat la opțiune:

Exemplu: 
<option value="fiat" selected>Fiat</option>

Valori vizibile:

Utilizați atributul size pentru a specifica numărul de valori vizibile:

Exemplu: 
<select name="mașini" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
 

Elemente de formulare HTML: datalist, input, output.

Vezi videoclipul: Elemente de formulare HTML: datalist,... Vezi toată lecția: Elemente de formulare HTML Citește teoria: Elemente de formulare HTML: datalist,...
Elemente de formular in HTML5

HTML5 a adăugat următoarele elemente de formular:



Notă: Navigatoarele nu afișează elemente necunoscute. Elementele noi care nu sunt acceptate în browserele mai vechi nu vă vor „distruge” pagina web.

Elementul HTML5 <datalist>

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

Exemplu: 
<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

Elementul HTML5 <output>

Elementul <output> reprezintă rezultatul unui calcul (ca unul realizat de un script).

Exemplu:

Efectuați un calcul și arătați rezultatul într-un element <output>: 
<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

Elemente de formular HTML
 
Etichetă Descriere
<form> Definește un formular HTML pentru introducerea utilizatorului
<input> Definește un control de intrare
<textarea> Definește un control de intrare multiline (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ă (drop-down list)
<optgroup> Definește un grup de opțiuni conexe dintr-o listă derulantă (drop-down list)
<option> Definește o opțiune dintr-o listă derulantă (drop-down list)
<button> Definește un buton pe care se poate face click
<datalist> Specifică o listă de opțiuni predefinite pentru controale de intrare
<output> Definește rezultatul unui calcul

HTML Tipuri Input. Tipul de intrare text.

Vezi videoclipul: HTML Tipuri Input. Tipul de intrare te... Vezi toată lecția: HTML Tipuri Input Citește teoria: HTML Tipuri Input. Tipul de intrare te...
Tipuri de intrare HTML(HTML Input Types)

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">
Input Type Text

<input type = "text"> definește un câmp de introducere text dintr-o linie:

Exemplu: 
<form>
  Prenume:<br>
  <input type="text" name="firstname"><br>
  Nume:<br>
  <input type="text" name="lastname">
</form>
Așa se va afișa într-un browser codul HTML de mai sus:
 
Prenume:

Nume:
 

HTML Tipuri Input. Tip de intrare parolă. Tip de intare submit.

Vezi videoclipul: HTML Tipuri Input. Tip de intrare paro... Vezi toată lecția: HTML Tipuri Input Citește teoria: HTML Tipuri Input. Tip de intrare paro...
Tip intrare parolă (Input Type Password)

<input type = "password"> definește un câmp de parolă:

Exemplu: 
<form>
  Nume utilizator:<br>
  <input type="text" name="username"><br>
  Parolă utilizator:<br>
  <input type="password" name="psw">
</form>
Așa se va afișa într-un browser codul HTML de mai sus:
 
Nume utilizator:

Parolă utilizator:
 

Caracterele unui câmp de parolă sunt mascate (afișate ca asteriscuri sau cercuri).

Tip intrare submit (Input Type Submit)

<input type = "submit"> definește un buton pentru trimiterea datelor de formular către un gestionar de formulare.
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 (action) al formularului:

Exemplu: 
<form action="/action_page.php">
  Prenume:<br>
  <input type="text" name="firstname" value="Donald"><br>
  Nume:<br>
  <input type="text" name="lastname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form>
Așa se va afișa într-un browser codul HTML de mai sus:
 
Prenume:

Nume:


 

Dacă omiteți atributul de valoare al butonului de trimitere, butonul va primi un text implicit:

Exemplu: 
<form action="/action_page.php">
  Prenume:<br>
  <input type="text" name="firstname" value="Donald"><br>
  Numee:<br>
  <input type="text" name="lastname" value="Duck"><br><br>
  <input type="submit">
</form>

HTML Tipuri Input. Tip de intrare reset. Tip de intrare radio.

Vezi videoclipul: HTML Tipuri Input. Tip de intrare rese... Vezi toată lecția: HTML Tipuri Input Citește teoria: HTML Tipuri Input. Tip de intrare rese...
Tip intrare reset (Input Type Reset)

<input type = "reset"> definește un buton de resetare care va reseta toate valorile formularului la valorile lor implicite:

Exemplu: 
<form action="/action_page.php">
  Nume:<br>
  <input type="text" name="firstname" value="Donald"><br>
  Prenume:<br>
  <input type="text" name="lastname" value="Duck"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>
Așa se va afișa într-un browser codul HTML de mai sus:
 
Nume:

Prenume:


 

Dacă schimbați valorile de intrare și apoi faceți click pe butonul "Reset", datele de formular vor fi resetate la valorile implicite.

Tip intrare Radio (Input Type Radio)

<input type = "radio"> definește un buton radio.
Butoanele radio permit unui utilizator să selecteze DOAR UNUL dintr-un număr limitat de opțiuni:

Exemplu: 
<form>
  <input type="radio" name="gender" value="male" checked>Bărbat<br>
  <input type="radio" name="gender" value="female">Femeie<br>
  <input type="radio" name="gender" value="other">Altele
</form>
Așa se va afișa într-un browser codul HTML de mai sus:
 
Bărbat
Femeie
Altele

HTML Tipuri Input. Tipuri de intrare HTML5. Tip intrare color. Tip de intrare date.

Vezi videoclipul: HTML Tipuri Input. Tipuri de intrare H... Vezi toată lecția: HTML Tipuri Input Citește teoria: HTML Tipuri Input. Tipuri de intrare H...
Tipuri de intrare HTML5 (HTML5 Input Types)

HTML5 a adăugat mai multe tipuri noi de intrare:
  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
Noile tipuri de intrare care nu sunt acceptate de browserele web mai vechi, se vor comporta ca <input type = "text">.

Tip intrare color (Input Type Color)

<input type="color"> este utilizat pentru câmpurile de introducere care ar trebui să conțină o culoare.
În funcție de suportul browserului, un câmp de culoare poate apărea în câmpul de introducere.

Exemplu: 
<form>
    Selectați culoarea preferată:
  <input type="color" name="favcolor">
</form>

Tip de intrare date (Input Type Date)

 <input type="date"> este utilizat pentru câmpurile de introducere care ar trebui să conțină o dată.
În funcție de asistența browserului, un selector de date poate apărea în câmpul de introducere.

Exemplu: 
<form>
   Zi de nastere:
  <input type="date" name="bday">
</form>
De asemenea, puteți utiliza atributele min și max pentru a adăuga restricții la date:

Exemplu: 
<form>
  Introduceți o dată înainte de 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Introduceți o dată după 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>
 

HTML Tipuri Input. Tip de intrare datetime-local. Tip de intrare e-mail. Tip de intrare file. Tip de intrare month.

Vezi videoclipul: HTML Tipuri Input. Tip de intrare date... Vezi toată lecția: HTML Tipuri Input Citește teoria: HTML Tipuri Input. Tip de intrare date...
Tip de intrare datetime-local (Input Type Datetime-local)

<input type="datetime-local"> specifică un câmp de intrare de dată și oră, fără fus orar.
În funcție de asistența browserului, un selector de date poate apărea în câmpul de introducere.

Exemplu: 
<form>
  Data nașterii (data și ora):
  <input type="datetime-local" name="bdaytime">
</form>

Tip de intrare e-mail (Input Type Email)

<input type="email"> este utilizat pentru câmpurile de introducere care ar trebui să conțină o adresă de e-mail.
În funcție de asistența browserului, adresa de e-mail poate fi validată automat la trimitere.
Unele smartphone-uri recunosc tipul de e-mail și adaugă „.com” la tastatură pentru a se potrivi cu introducerea e-mailului

Exemplu: 
<form>
  E-mail:
  <input type="email" name="email">
</form>

Tip de intrare file (Input Type File)

<input type="file">  definește un câmp selectat pentru fișiere și un buton "Browse" pentru încărcarea fișierelor.

Exemplu: 
<form>
  Selectați un fișier:<input type="file" name="myFile">
</form>

Tip de intrare month (Input Type Month)

<input type="month"> permite utilizatorului să selecteze o lună și un an.
În funcție de asistența browserului, un selector de date poate apărea în câmpul de introducere.

Exemplu: 
<form>
  Zi de nastere (luna si anul):
  <input type="month" name="bdaymonth">
</form>

HTML Tipuri Input. Tip de intrare number. Restricții de intrare. Tip de intrare range.

Vezi videoclipul: HTML Tipuri Input. Tip de intrare numb... Vezi toată lecția: HTML Tipuri Input Citește teoria: HTML Tipuri Input. Tip de intrare numb...
Tip de intrare number (Input Type Number)

<input type="number"> definește un câmp de introducere numerică. 
Puteți seta, de asemenea, restricții la numerele acceptate.
Următorul exemplu afișează un câmp de introducere numerică, unde puteți introduce o valoare de la 1 la 6:

Exemplu: 
<form>
  Cantitatea (între 1 și 6):
  <input type="number" name="quantity" min="1" max="6">
</form>

Restricții de intrare

Iată o listă a unor restricții comune de intrare:
 
Atribut Descriere
checked Specifică faptul că un câmp de intrare ar trebui să fie preselectat atunci când se încarcă pagina (type="checkbox" sau type="radio")
disabled Specifică faptul că un câmp de intrare trebuie dezactivat
max Specifică valoarea maximă pentru un câmp de intrare
maxlength Specifică numărul maxim de caractere pentru un câmp de intrare
min Specifică valoarea minimă pentru un câmp de intrare
pattern Specifică o expresie regulată pentru a verifica valoarea de intrare
readonly Specifică faptul că un câmp de intrare este doar de citire (nu poate fi modificat)
required Specifică faptul că este necesar un câmp de intrare (trebuie completat)
size Specifică lățimea (în caractere) a unui câmp de intrare
step Specifică intervalele de numere legale pentru un câmp de introducere
value Specifică valoarea implicită pentru un câmp de intrare

Următorul exemplu afișează un câmp de intrare numeric, unde puteți introduce o valoare de la 0 la 100, în pași de 10. Valoarea implicită este 30:

Exemplu: 
<form>
  Cantitate:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Tip de intrare range (Input Type Range)

<input type="range"> definește un control pentru introducerea unui număr a cărui valoare exactă nu este importantă (cum ar fi un control al slide-rului). Intervalul implicit este de la 0 la 100. Cu toate acestea, puteți seta restricții la numerele acceptate cu atributele min, max și pas:

Exemplu: 
<form>
  <input type="range" name="points" min="0" max="10">
</form>

HTML Tipuri Input. Tip de intrare Checkbox. Tip intrare Button.

Vezi videoclipul: HTML Tipuri Input. Tip de intrare Chec... Vezi toată lecția: HTML Tipuri Input Citește teoria: HTML Tipuri Input. Tip de intrare Chec...
Tip de intrare Checkbox (Input Type Checkbox)

<input type = "checkbox"> definește o casetă de selectare.
Casetele de selectare (Checkbox) permit unui utilizator să selecteze ZERO sau MAI MULTE opțiuni cu un număr limitat de opțiuni.

Exemplu: 
<form>
  <input type="checkbox" name="vehicle1" value="Bike">Am o bicicletă<br>
  <input type="checkbox" name="vehicle2" value="Car">Am o mașină
</form>
Așa se va afișa într-un browser codul HTML de mai sus:
 
Am o bicicletă
Am o mașină

Tip intrare Button (Input Type Button)

<input type="button"> definește un buton:

Exemplu: 
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Așa se va afișa într-un browser codul HTML de mai sus:


 

HTML Tipuri Input. Tipul de intrare search. Tipul de intrare tel. Tipul de intrare time. Tipul de intrare url.

Vezi videoclipul: HTML Tipuri Input. Tipul de intrare se... Vezi toată lecția: HTML Tipuri Input Citește teoria: HTML Tipuri Input. Tipul de intrare se...
Tipul de intrare search (Input Type Search)

<input type="search"> este folosit pentru câmpurile de căutare (un câmp de căutare se comportă ca un câmp de text obișnuit).

Exemplu: 
<form>
  Căutați pe Google:
  <input type="search" name="googlesearch">
</form>

Tipul de intrare tel (Input Type Tel)

<input type="tel"> este utilizat pentru câmpurile de introducere care ar trebui să conțină un număr de telefon.

Exemplu: 
<form>
  Telefon:
  <input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Tipul de intrare time (Input Type Time)

<input type="time"> permite utilizatorului să selecteze o oră (fără fus orar).
În funcție de suportul browserului, un câmp de timp poate apărea în câmpul de introducere.

Exemplu: 
<form>
  Selectați o oră:
  <input type="time" name="usr_time">
</form>

Tipul de intrare url (Input Type Url)

<input type="url"> este utilizat pentru câmpurile de intrare care ar trebui să conțină o adresă URL.  
În funcție de suportul browserului, câmpul URL poate fi validat automat atunci când este trimis.
Unele smartphone-uri recunosc tipul url și adaugă „.com” la tastatură pentru a se potrivi cu intrarea url-ului.

Exemplu: 
<form>
  Adăugați pagina dvs. de pornire:
  <input type="url" name="homepage">
</form>

HTML Tipuri Input. Tipul de intrare week. HTML tipul de intrare attribute.

Vezi videoclipul: HTML Tipuri Input. Tipul de intrare we... Vezi toată lecția: HTML Tipuri Input Citește teoria: HTML Tipuri Input. Tipul de intrare we...
Tipul de intrare week (Input Type Week)

<input type="week"> permite utilizatorului să selecteze o săptămână și un an.
În funcție de asistența browserului, un selector de date poate apărea în câmpul de introducere.

Exemplu: 
<form>
  Selectați o săptămână:
  <input type="week" name="week_year">
</form>

HTML Input Type Attribute
 
Etichetă Descriere
<input type=""> Specifică tipul de intrare de afișat

HTML Atribute de intrare. Atributele height și width. Atributul list.

Vezi videoclipul: HTML Atribute de intrare. Atributele h... Vezi toată lecția: HTML Atribute Input Citește teoria: HTML Atribute de intrare. Atributele h...
Atributele înălțime și lățime (The height and width Attributes)

Atributele înălțime și lățime (height și width) specifică înălțimea și lățimea unui element <input type = "image">.

Specificați întotdeauna dimensiunea imaginilor. Dacă browserul nu cunoaște dimensiunea, pagina va clipi în timp ce imaginile se încarcă.

Exemplu:

Definiți o imagine de tip buton de trimitere (submit), cu atribute de înălțime și lățime (height și width):
  
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Atributul list (The list Attribute)

Atributul list se referă la un element <datalist> care conține opțiuni predefinite pentru un element <input>.

Exemplu:

Un element <input> cu valori predefinite într-un <datalist>:
  
<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

HTML Atribute de intrare. Atributul value. Atributul readonly. Atributul disabled. Atributul size Atributul maxlenght.

Vezi videoclipul: HTML Atribute de intrare. Atributul va... Vezi toată lecția: HTML Atribute Input Citește teoria: HTML Atribute de intrare. Atributul va...
Atributul value (The value Attribute)

Atributul value specifică valoarea inițială pentru un câmp de intrare:

Exemplu: 
<form action="">
  Prenume:<br>
  <input type="text" name="firstname" value="Ion">
</form>

Atributul readonly (The readonly Attribute)

Atributul readonly specifică faptul că un câmp de intrare este doar citit (nu poate fi modificat):

Exemplu: 
<form action="">
  Prenume:<br>
  <input type="text" name="firstname" value="Ion" readonly>
</form>

Atributul disabled (The disabled Attribute)

Atributul disabled specifică faptul că un câmp de intrare este dezactivat.
Un câmp de introducere dezactivat este inutilizabil și nu se poate face click, iar valoarea acestuia nu va fi trimisă atunci când trimiteți formularul:

Exemplu: 
<form action="">
  Prenume:<br>
  <input type="text" name="firstname" value="Ion" disabled>
</form>

Atributul size (The size Attribute)

Atributul size specifică dimensiunea (în caractere) pentru câmpul de intrare:

Exemplu: 
<form action="">
  Prenume:<br>
  <input type="text" name="firstname" value="Ion" size="40">
</form>

Atributul maxlenght (The maxlength Attribute)

Atributul maxlength specifică lungimea maximă permisă pentru câmpul de intrare:

Exemplu: 
<form action="">
  Prenume:<br>
  <input type="text" name="firstname" maxlength="10">
</form>
Cu un atribut de tip maxlength, câmpul de intrare nu va accepta mai mult decât numărul permis de caractere.
Atributul maxim nu oferă feedback. Dacă doriți să avertizați utilizatorul, trebuie să scrieți cod JavaScript.

Notă: Restricțiile de intrare nu sunt ignorate, iar JavaScript oferă multe modalități de a adăuga input-uri ilegale. Pentru a restricționa în siguranță intrarea, trebuie să fie verificată și de receptor (server)!

HTML Atribute de intrare. Atributul autofocus. Atributul form. Atributul formaction.

Vezi videoclipul: HTML Atribute de intrare. Atributul au... Vezi toată lecția: HTML Atribute Input Citește teoria: HTML Atribute de intrare. Atributul au...
Atributul autofocus (The autofocus Attribute)

Atributul autofocus specifică faptul că un câmp de intrare ar trebui să obțină focalizare automată la încărcarea paginii.

Exemplu:

Lăsați câmpul de introducere „Prenume” ("First name") să se focalizeze automat când se încarcă pagina:
  
Prenume:<input type="text" name="fname" autofocus>

Atributul form (The form Attribute)

Atributul form specifică una sau mai multe forme căruia ii aparține un element <input>.

Exemplu:

Un câmp de intrare situat în afara formularului HTML (dar încă o parte a formularului):
  
<form action="/action_page.php" id="form1">
  Prenume: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Nume: <input type="text" name="lname" form="form1">

Atributul formaction (The formaction Attribute)

Atributul formaction specifică adresa URL a unui fișier care va prelucra controlul de intrare (control input) la trimiterea formularului.
Atributul formaction înlocuiește atributul de acțiune (action attribute) al elementului <form>.
Atributul formaction este utilizat cu type="submit" și type="image".

Exemplu:

Un formular HTML cu două butoane de trimitere, cu acțiuni diferite:
  
<form action="/action_page.php">
  Prenume: <input type="text" name="fname"><br>
  Nume: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="/action_page2.php"
  value="Trimiteți ca admin">
</form>

HTML Atribute de intrare. Atributul formenctype. Atributul formmethod.

Vezi videoclipul: HTML Atribute de intrare. Atributul fo... Vezi toată lecția: HTML Atribute Input Citește teoria: HTML Atribute de intrare. Atributul fo...
Atributul formenctype (The formenctype Attribute)

Atributul formenctype specifică modul în care datele formularului trebuie codificate atunci când sunt prezentate (numai pentru formularele cu method="post").
Atributul formenctype înlocuiește atributul enctype al elementului <form>.
Atributul formenctype este utilizat cu type = "submit" și type = "image".

Exemplu:

Trimiteți datele de formular (form-data) care sunt codate implicit (primul buton de trimitere) și cele care sunt codate ca "multipart/form-data" (al doilea buton de trimitere):
  
<form action="/action_page_binary.asp" method="post">
  Nume: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Trimiteți ca Multipart/form-data">
</form>

Atributul formmethod (The formmethod Attribute)

Atributul formmethod definește metoda HTTP pentru trimiterea datelor de formular la adresa URL a acțiunii.
Atributul formmethod trece peste atributul method al elementului <form>.
Atributul formmethod poate fi utilizat cu type = "submit" și type = "image".

Exemplu:

Al doilea buton de trimitere înlocuiește metoda HTTP a formularului:
  
<form action="/action_page.php" method="get">
  Prenume: <input type="text" name="fname"><br>
  Nume: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" value="Trimiteți cu metoda POST">
</form>

HTML Atribute de intrare. Atributul pattern. Atributul placeholder. Atributul required.

Vezi videoclipul: HTML Atribute de intrare. Atributul pa... Vezi toată lecția: HTML Atribute Input Citește teoria: HTML Atribute de intrare. Atributul pa...
Atributul pattern (The pattern Attribute)

Atributul pattern specifică o expresie regulată cu care este verificată valoarea elementului <input>.
Atributul pattern funcționează cu următoarele tipuri de intrare (input types): text, search, url, tel, email, și password.

Sfat: Utilizați atributul global title pentru a descrie pattern-ul care să ajute utilizatorul.
Sfat: Aflați mai multe despre expresiile obișnuite din tutorialul nostru JavaScript.

Exemplu:

Un câmp de intrare (input field) care poate conține doar trei litere (fără numere sau caractere speciale):
  
Cod de țară:<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Cod de țară cu trei litere">

Atributul placeholder (The placeholder Attribute)

Atributul placeholder specifică un indiciu care descrie valoarea așteptată a unui câmp de intrare (o valoare de eșantion sau o scurtă descriere a formatului).
Sugestia este afișată în câmpul de intrare înainte ca utilizatorul să introducă o valoare.
Atributul placeholder funcționează cu următoarele tipuri de intrare (input types): text, search, url, tel, email, și password.

Exemplu:

Un câmp de introducere (input field) cu un text placeholder :
  
<input type="text" name="fname" placeholder="Prenume">

Atributul required (The required Attribute)

Atributul required specifică faptul că un câmp de intrare trebuie completat înainte de a trimite formularul.
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.

Exemplu:

Un câmp de intrare required (A required input field):
  
Nume utilizator:<input type="text" name="usrname" required>

HTML Atribute de intrare. Atributul step. Formular HTML și elemente de intrare.

Vezi videoclipul: HTML Atribute de intrare. Atributul st... Vezi toată lecția: HTML Atribute Input Citește teoria: HTML Atribute de intrare. Atributul st...
Atributul step (The step Attribute)

Atributul step specifică intervalele de număr legale pentru un element <input>.

Exemplu: Dacă step = "3", numerele legale ar putea fi -3, 0, 3, 6 etc.

Sfat: Atributul step poate fi utilizat împreună cu atributele max și min pentru a crea o serie de valori legale.

Atributul step funcționează cu următoarele tipuri de intrare (input types): number, range, date, datetime-local, month, time și week.

Exemplu:

Un câmp de introducere (input field) cu intervale de numere legale specificate:
  
<input type="number" name="points" step="3">

Formular HTML și elemente de intrare (HTML Form and Input Elements)
 
Etichetă Descriere
<form> Definește un formular HTML pentru introducerea utilizatorului
<input> Definește un control de intrare (input control)

HTML Atribute de intrare. Atributul formnovalidate. Atributul formtarge.

Vezi videoclipul: HTML Atribute de intrare. Atributul fo... Vezi toată lecția: HTML Atribute Input Citește teoria: HTML Atribute de intrare. Atributul fo...
Atributul formnovalidate (The formnovalidate Attribute)

Atributul formnovalidate înlocuiește atributul novalidate al elementului <form>.
Atributul formnovalidate poate fi utilizat cu type="submit".

Exemplu:

Un formular cu două butoane de trimitere (cu și fără validare):
  
<form action="/action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Trimiteți fără validare">
</form>

Atributul formtarget (The formtarget Attribute)

Atributul formtarget specifică un nume sau un cuvânt cheie care indică unde să se afișeze răspunsul care este primit după trimiterea formularului.
Atributul formtarget înlocuiește atributul țintă (target) al elementului <form>.
Atributul formtarget poate fi utilizat cu type = "submit" și type = "image".

Exemplu:

Un formular cu două butoane de trimitere, cu ferestre țintă diferite:
  
<form action="/action_page.php">
  Prenume: <input type="text" name="fname"><br>
  Nume: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Trimiteți-vă la o fereastră nouă">
</form>
 

HTML Atribute de intrare. Atributul autocomplete. Atributul novalidate.

Vezi videoclipul: HTML Atribute de intrare. Atributul au... Vezi toată lecția: HTML Atribute Input Citește teoria: HTML Atribute de intrare. Atributul au...
Atributele HTML5

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 autocomplete (The autocomplete Attribute)

Atributul autocomplete specifică dacă un formular sau un câmp de intrare ar trebui să aibă sau nu dezactivată completarea automată.
Când este completat automat, browserul completează automat valorile de intrare pe baza valorilor introduse de utilizator înainte.
Sfat: Este posibil să fie completat automat „on” pentru formular, și „off” pentru câmpuri de introducere specifice sau invers.
Atributul autocomplete funcționează cu <form> și următoarele tipuri <input>:text, search, url, tel, email, password, datepickers, range, și color

Exemplu:

Un formular HTML cu autocomplete on (și off pentru un câmp de intrare):
  
<form action="/action_page.php" autocomplete="on">
  Prenume:<input type="text" name="fname"><br>
  Nume: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>
Sfat: În unele browsere este posibil să fie nevoie să activați funcția de completare automată (autocomplete) pentru ca aceasta să funcționeze.

Atributul novalidate (The novalidate Attribute)

Atributul novalidate este un atribut <form>.
Când este prezent, novalidate specifică faptul că datele formularului nu ar trebui să fie validate atunci când sunt prezentate.

Exemplu:

Indică faptul că formularul nu trebuie validat la trimitere: 
<form action="/action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

HTML Atribute de intrare. Atributele min și max. Atributul multiple.

Vezi videoclipul: HTML Atribute de intrare. Atributele m... Vezi toată lecția: HTML Atribute Input Citește teoria: HTML Atribute de intrare. Atributele m...
Atributele min și max (The min and max Attributes)

Atributele min și max specifică valorile minime și maxime pentru un element <input>.
Atributele min și max funcționează cu următoarele tipuri de intrare (input types): number, range, date, datetime-local, month, time și week.

Exemplu:

<input> - elemente cu valori minime și maxime:
  
Introduceți o dată înainte de 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Introduceți o dată după 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Cantitatea (între 1 și 5):
<input type="number" name="quantity" min="1" max="5">

Atributul multiple (The multiple Attribute)

Atributul multiple specifică faptul că utilizatorului i se poate introduce mai mult de o valoare în elementul <input>.
Atributul multiple funcționează cu următoarele tipuri de intrare (input types): e-mail și file.

Exemplu:

Un câmp de încărcare a fișierelor care acceptă mai multe valori:
  
Selectați imagini:<input type="file" name="img" multiple>
 

Introducere în HTML5. Declarația DOCTYPE pentru HTML5. Declarația de codare a caracterelor.

Vezi videoclipul: Introducere în HTML5. Declarația DOCTY... Vezi toată lecția: Introducere în HTML5 Citește teoria: Introducere în HTML5. Declarația DOCTY...
Introducere în HTML5

Ce este nou în HTML5?

Declarația DOCTYPE pentru HTML5 este foarte simplă:
  
<!DOCTYPE html>

Declarația de codare a caracterelor (charset) este, de asemenea, foarte simplă:
  
<meta charset="UTF-8">

Exemplu HTML5: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titlul documentului</title>
</head>

<body>
Conținutul documentului......
</body>

</html>
Codificarea implicită a caracterelor în HTML5 este UTF-8.

Introducere în HTML5. Elemente noi în HTML5: header, footer, article, section, svg, canvas, audio și video. Atribute ale elementelor de formular noi, cum ar fi: number, date, time, calendar, și range. API-uri HTML5 noi. Elemente eliminate în HTML

Vezi videoclipul: Introducere în HTML5. Elemente noi în... Vezi toată lecția: Introducere în HTML5 Citește teoria: Introducere în HTML5. Elemente noi în...
Elemente noi în HTML5

Cele mai interesante elemente HTML5 sunt:

Elemente semantice 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>.

API-uri HTML5 noi (Interfețe de programare a aplicațiilor/Application Programming Interfaces)

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
Sfat: Stocarea locală a HTML este un înlocuitor puternic pentru cookie-uri.

Elemente eliminate în HTML5

Următoarele elemente HTML4 au fost eliminate în HTML5:
 
Elementul eliminat Folosiți în schimb
<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>  
<frameset>  
<noframes>  
<strike> CSS, <s>, or <del>
<tt> CSS

Introducere în HTML5. Istoria HTML.

Vezi videoclipul: Introducere în HTML5. Istoria HTML. Vezi toată lecția: Introducere în HTML5 Citește teoria: Introducere în HTML5. Istoria HTML.
Istoria HTML

Încă din primele zile ale World Wide Web, au existat multe versiuni de HTML:
 
An Versiune
1989 Tim Berners-Lee a inventat www
1991 Tim Berners-Lee a inventat HTML
1993 Dave Raggett a redactat HTML+
1995 Grupul de lucru HTML a definit HTML 2.0
1997 Recomandare W3C: HTML 3.2
1999 Recomandare W3C: HTML 4.01
2000 Recomandare W3C: XHTML 1.0
2008 Primul proiect public WHATWG HTML5
2012 Standardul de viață WHATWG HTML5
2014 Recomandare W3C: HTML5
2016 Recomandarea candidaților W3C: HTML 5.1
2017 Recomandare W3C: HTML5.1 2nd Edition
2017 Recomandare W3C: HTML5.2

Din 1991 până în 1999, HTML s-a dezvoltat de la versiunea 1 la versiunea 4.
În anul 2000, World Wide Web Consortium (W3C) a recomandat XHTML 1.0. Sintaxa XHTML a fost strictă, iar dezvoltatorii au fost obligați să scrie cod valid și „bine format”.
În 2004, W3C a decis să închidă dezvoltarea HTML-ului, în favoarea XHTML.
În 2004, WHATWG (Web Hypertext Application Technology Working Group) a fost format. WHATWG a dorit să dezvolte HTML, în concordanță cu modul în care a fost utilizată web-ul, fiind în același timp compatibil cu versiunile mai vechi de HTML.
În 2004 - 2006, WHATWG a obținut sprijinul principalilor furnizori de browser.
În 2006, W3C a anunțat că va sprijini WHATWG.
În 2008, a fost lansat primul proiect public HTML5.
În 2012, WHATWG și W3C au decis o separare:
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.
Standardul de viață WHATWG HTML5 a fost publicat în 2012 și este actualizat continuu.
W3C a dorit să dezvolte un standard HTML5 și XHTML definitiv.
Recomandarea HTML3 W3C a fost lansată 28 octombrie 2014.
Recomandarea W3C HTML5.1 Ediția a II-a a fost publicată pe 3 octombrie 2017.
Recomandarea W3C HTML5.2 a fost lansată la 14 decembrie 2017.

HTML5 Suport. Asistență browser în HTML5. Definire elemente semantice ca elemente block. Adăugare elemente noi în HTML.

Vezi videoclipul: HTML5 Suport. Asistență browser în HTM... Vezi toată lecția: Suport HTML5 Citește teoria: HTML5 Suport. Asistență browser în HTM...
Asistență browser în HTML5 (HTML5 Browser Support)

Puteți învăța browserele mai vechi să gestioneze corect 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 chiar IE6 (Windows XP 2001) cum să gestioneze elemente HTML necunoscute.

Definiți elementele semantice ca elemente block

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:
  
header, section, footer, aside, nav, main, article, figure {
  display: block;
}

Adăugați elemente noi în HTML

Puteți adăuga, de asemenea, unei pagini HTML, elemente noi folosind un truc de browser.
Acest exemplu adaugă un element nou numit <myHero> la o pagină HTML și definește un stil pentru acesta:

Exemplu: 
<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
  display: block;
  background-color: #dddddd;
  padding: 50px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Un Titlu</h1>
<myHero>Elementul My Hero</myHero>

</body>
</html>

Declarația JavaScript document.createElement ("myHero") este necesară pentru a crea un element nou în IE 9 și în versiunile anterioare.

HTML5 Suport. Problema cu Internet Explorer 8. Sintaxa pentru HTML5Shiv. Exemplu HTML5Shiv.

Vezi videoclipul: HTML5 Suport. Problema cu Internet Exp... Vezi toată lecția: Suport HTML5 Citește teoria: HTML5 Suport. Problema cu Internet Exp...
Problemă cu Internet Explorer 8

Puteți utiliza soluția descrisă în HTML5 Support - Partea 1 pentru toate elementele HTML5 noi.
Cu toate acestea, IE8 (și versiunile anterioare) nu permite stilizarea elementelor necunoscute!
Din fericire, Sjoerd Visscher a creat HTML5Shiv! HTML5Shiv este o soluție JavaScript pentru a permite stilizarea elementelor HTML5 în versiunile de Internet Explorer înainte de versiunea 9.

Veți avea nevoie de HTML5Shiv pentru a oferi compatibilitate pentru browsere IE mai vechi decât IE 9.

Sintaxa pentru HTML5Shiv

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

Puteți descărca cea mai recentă versiune a HTML5shiv de la github sau consultați versiunea CDN la https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

Sintaxă 
<head>
  <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
  <![endif]-->
</head>

Exemplu HTML5Shiv

Dacă nu doriți să descărcați și să stocați HTML5Shiv pe site-ul dvs., puteți face referire la versiunea găsită pe site-ul CDN.
Scriptul HTML5Shiv trebuie plasat în elementul <head>, după orice foi de stil:

Exemplu: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<body>

<section>

<h1>Orașele celebre</h1>

<article>
<h2>Londra</h2>
<p>Londra este capitala Angliei. Este cel mai populat oraș din Regatul Unit, cu o zonă metropolitană de peste 13 milioane de locuitori.</p>
</article>

<article>
<h2>Paris</h2>
<p>Paris este capitala și cel mai populat oraș al Franței.</p>
</article>

<article>
<h2>Tokyo</h2>
<p>Tokyo este capitala Japoniei, centrul zonei Greater Tokyo și cea mai populată zonă metropolitană din lume.</p>
</article>

</section>

</body>
</html>

Elemente semantice în HTML5. Elementul HTML5 header. Elementul HTML5 footer. Elementul HTML5 nav.

Vezi videoclipul: Elemente semantice în HTML5. Elementul... Vezi toată lecția: Elemente semantice în HTML5 Citește teoria: Elemente semantice în HTML5. Elementul...
Elementul HTML5 <header>

Elementul <header> specifică un antet pentru un document sau secțiune.
Elementul <header> trebuie utilizat ca un recipient pentru conținut introductiv.
Puteți avea mai multe elemente <header> într-un singur document.

Următorul exemplu definește un antet pentru un articol:

Exemplu: 
<article>
  <header>
    <h1>Ce face WWF?</h1>
    <p>Misiunea WWF:</p>
  </header>
  <p>Misiunea WWF este de a opri degradarea mediului natural al planetei noastre,
   și să construim un viitor în care oamenii trăiesc în armonie cu natura.</p>
</article>

Elementul HTML5 <footer>

Elementul <footer> specifică un subsol pentru un document sau secțiune.
Un element <footer> ar trebui să conțină informații despre elementul pe care îl conține.
Un subsol conține, de obicei, autorul documentului, informații privind drepturile de autor, link-uri către termenii de utilizare, informații de contact etc.
Este posibil să aveți mai multe elemente <footer> într-un document.

Exemplu: 
<footer>
  <p>Postat de: Ion Popescu</p>
  <p>Informații de contact: <a href="mailto:[email protected]">
  [email protected]</a>.</p>
</footer>

Elementul HTML5 <nav>

Elementul <nav> definește un set de legături de navigare (navigation links).

Observați că NU toate linkurile unui document ar trebui să se afle în interiorul unui element <nav>. Elementul <nav> este destinat numai blocului principal de legături de navigație.

Exemplu: 
<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

Elemente semantice în HTML5: article, aside, details, figcaption, figure,footer,table, form, header, main, mark, nav, section, summary, time.

Vezi videoclipul: Elemente semantice în HTML5: article,... Vezi toată lecția: Elemente semantice în HTML5 Citește teoria: Elemente semantice în HTML5: article,...
Elemente semantice în HTML5

Semantica se referă la studiul sensurilor cuvintelor și frazelor dintr-o limbă.
Elemente semantice = elemente cu semnificație.

Ce sunt elementele semantice?

Un element semantic descrie clar sensul său atât pentru browser cât și pentru dezvoltator.
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.

Asistență browser (Browser Support)



Elementele semantice HTML5 sunt acceptate în toate browserele moderne.

În plus, puteți „învăța” browserele mai vechi cum să gestioneze „elemente necunoscute”.

Elemente semantice noi în HTML5

Multe site-uri web conțin cod HTML precum: <div id = "nav"> <div class = "header"> <div id = "footer">
pentru a indica navigarea, antetul și subsolul (navigation, header, and footer).

Pentru a definii diferite părți ale unei pagini web, HTML5 oferă elemente semantice noi:
  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

 

Elemente semantice în HTML5. Elementul HTML5 section. Elementul HTML5 article. Integrarea article în section sau Vice Versa

Vezi videoclipul: Elemente semantice în HTML5. Elementul... Vezi toată lecția: Elemente semantice în HTML5 Citește teoria: Elemente semantice în HTML5. Elementul...
Elementul HTML5 <section>

Elementul <section> definește o secțiune dintr-un document.
Conform documentației HTML5 a W3C: „O secțiune este o grupare tematică de conținut, de obicei cu o rubrică (heading).
În mod normal, o pagină de pornire poate fi împărțită în secțiuni pentru introducere, conținut și informații de contact.

Exemplu: 
<section>
  <h1>WWF</h1>
  <p>Fondul mondial pentru natură (WWF) este ....</p>
</section>

Elementul HTML5 <article>

Elementul <article> specifică independent, conținut de sine stătător.
Un articol ar trebui să aibă un singur sens și ar trebui să fie posibil să-l citiți independent de restul site-ului web.

Exemple de unde poate fi utilizat un element <article>:
  • Postare pe forum
  • Postare pe blog
  • Articol de ziar
Exemplu: 
<article>
  <h1>Ce face WWF?</h1>
  <p>Misiunea WWF este de a opri degradarea mediului natural al planetei noastre,
   și să construim un viitor în care oamenii trăiesc în armonie cu natura.</p>
</article>

Integrarea <article> în <section> sau Vice Versa?

Elementul <article> specifică independent, conținut de sine stătător.
Elementul <section> definește secțiunea dintr-un document.

Putem folosi definițiile pentru a decide cum se integrează acele elemente? Nu, nu putem!

Așadar, pe internet, veți găsi pagini HTML cu elemente <secțiune> care conțin elemente <article> și elemente <article> care conțin elemente <secțiune>.
Veți găsi, de asemenea, pagini cu elemente <secțiune> care conțin elemente <secțiune> și elemente <article> care conțin elemente <article>.

Exemplu pentru un ziar: Sportul <article> din secțiunea sport, poate avea o secțiune tehnică în fiecare <article>.

Elemente semantice în HTML5. De ce Elemente Semantice?

Vezi videoclipul: Elemente semantice în HTML5. De ce Ele... Vezi toată lecția: Elemente semantice în HTML5 Citește teoria: Elemente semantice în HTML5. De ce Ele...
De ce Elemente Semantice?

Cu HTML4, dezvoltatorii au folosit propriile  id/class names pentru elemente de stil: antet, sus, jos, subsol, meniu, navigare, principal, container, conținut, articol, bară laterală, topnav etc.( header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav)

Acest lucru a făcut imposibil ca motoarele de căutare să identifice conținutul corect al paginii web.

Cu noile elemente HTML5 (<header> <footer> <nav> <section> <article>), acest lucru va deveni mai ușor.
Conform W3C, un Web semantic: „Permite partajarea și reutilizarea datelor în aplicații, întreprinderi și comunități”.

Elemente semantice în HTML5

Mai jos este o listă alfabetică a noilor elemente semantice din HTML5.
 
Etichetă Descriere
<article> Definește un articol
<aside> Definește conținutul în afara conținutului paginii
<details> 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 data / ora

Elemente semantice în HTML5. Elementul HTML5 aside. Elementele HTML5 figure și figcaption.

Vezi videoclipul: Elemente semantice în HTML5. Elementul... Vezi toată lecția: Elemente semantice în HTML5 Citește teoria: Elemente semantice în HTML5. Elementul...
Elementul HTML5 <aside>

Elementul <aside> definește un anumit conținut în afară de conținutul în care este plasat (ca o bară laterală/like a sidebar).
Conținutul <aside> ar trebui să fie legat de conținutul din jur.

Exemplu: 
<p>Eu și cu familia mea am vizitat centrul Epcot în această vară.</p>

<aside>
  <h4>Centrul Epcot</h4>
  <p>Centrul Epcot este un parc tematic din Disney World, Florida.</p>
</aside>

Elementele HTML5 <figure> și <figcaption>

Scopul unei figurine este adăugarea unei explicații vizuale unei imagini.
În HTML5, o imagine și o legendă pot fi grupate într-un element <figure>:

Exemplu: 
<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Elementul <img> definește imaginea, elementul <figcaption> definește o legendă.

 

Ghid de stil HTML5. Utilizarea numelor de atribute cu litere mici. Folosirea ghilimelelor la valorile atributului.

Vezi videoclipul: Ghid de stil HTML5. Utilizarea numelor... Vezi toată lecția: Ghid de stil în HTML5 Citește teoria: Ghid de stil HTML5. Utilizarea numelor...
Utilizați nume de atribute cu litere mici

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, deoarece:
 
  • Amestecarea numelor scrise cu litere mari și a numelor scrise cu litere mici este proastă.
  • În mod normal, dezvoltatorii folosesc nume scrise cu litere mici (ca în XHTML).
  • Numele scrise cu litere mici arata mai curat.
  • Numele scrise cu litere mici sunt mai ușor de scris.
Greşit: 
<div CLASS="menu">
Corect: 
<div class="menu">

Puneți între ghilimele valorile atributului

HTML5 permite ca valorile atributelor să fie scrise fără ghilimele.

Vă recomandăm să puneți între ghilimele valorile atributului, deoarece:
 
  • În mod normal, dezvoltatorii citează valorile atributului (ca în XHTML).
  • Valorile citate sunt mai ușor de citit.
  • Trebuie să folosiți ghilimele dacă valoarea conține spații.
Foarte greşit:

Acest cod nu va funcționa, deoarece valoarea conține spații: 
<table class=table striped>
Greşit: 
<table class=striped>
Corect: 
<table class="striped">

Ghid de stil HTML5. Comentarii in HTML. Foi de stil. JavaScript în HTML.

Vezi videoclipul: Ghid de stil HTML5. Comentarii in HTML... Vezi toată lecția: Ghid de stil în HTML5 Citește teoria: Ghid de stil HTML5. Comentarii in HTML...
Comentarii in HTML

Comentariile scurte trebuie scrise pe o singură linie, astfel: 
<!-- Acesta este un comentariu -->
Comentariile care se întind pe mai multe linii trebuie scrise astfel: 
<!--
  Acesta este un exemplu lung de comentarii. Acesta este un exemplu lung de comentarii.
  Acesta este un exemplu lung de comentarii. Acesta este un exemplu lung de comentarii.
-->
Comentariile lungi sunt mai ușor de observat dacă sunt indentate în două spații.

Foi de stil (Style Sheets)

Utilizați sintaxa simplă pentru a face legătura cu foile de stil (atributul tip nu este necesar): 
<link rel="stylesheet" href="styles.css">
Regulile scurte pot fi comprimate, astfel: 
p.intro {font-family: Verdana; font-size: 16em;}
Regulile lungi trebuie scrise pe mai multe rânduri: 
body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
 
  • 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

Utilizați sintaxa simplă pentru încărcarea scripturilor externe (atributul tip nu este necesar): 
<script src="myscript.js">
 

Ghid de stil HTML5 și convenții de codare. Utilizarea numelor elementelor folosind litere mici.

Vezi videoclipul: Ghid de stil HTML5 și convenții de cod... Vezi toată lecția: Ghid de stil în HTML5 Citește teoria: Ghid de stil HTML5 și convenții de cod...
Ghid de stil HTML5 și convenții de codare

Dezvoltatorii web sunt adesea incerti cu privire la stilul de codare și sintaxa de utilizat în HTML.
Între 2000 și 2010, mulți dezvoltatori web s-au convertit de la HTML la XHTML.
Cu XHTML, dezvoltatorii au fost obligați să scrie cod valid și „bine format”.
HTML5 este ceva mai soft când vine vorba de validarea codului.

Be Smart and Future Proof

O utilizare constantă a stilului face mai ușor pentru alții să înțeleagă HTML-ul tău.
În viitor, programe precum cititorii XML ar putea dori să citească HTML-ul dvs.
Utilizarea unei sintaxe bine formate - „aproape de XHTML” poate fi inteligentă.

Păstrați întotdeauna codul ordonat, curat și bine format.

Utilizați tipul de document corect

Declarați întotdeauna tipul de document ca primă linie în documentul dvs.: 
<!DOCTYPE html>
Dacă doriți consecvență cu etichetele minuscule, puteți utiliza: 
<!doctype html>

Utilizați numele elementelor cu litere mici (Lower Case)

HTML5 permite amestecarea literelor mari și literelor mici in numele elementelor.

Vă recomandăm să folosiți numele elementelor scrise cu litere mici, deoarece:
  • Amestecarea numelor scrise cu litere mari și a celor scrise cu litere mici este proastă
  • În mod normal, dezvoltatorii folosesc nume scrise cu litere mici (ca în XHTML)
  • Scrisul cu litere mici arata mai curat.
  • Numele cu litere mici sunt mai ușor de scris.
Greşit 
<SECTION>
  <p>Acesta este un paragraf.</p>
</SECTION>
Foarte Greşit 
<Section>
  <p>Acesta este un paragraf.</p>
</SECTION>
Corect 
<section>
  <p>Acesta este un paragraf.</p>
</section>
 

Ghid de stil HTML5. Atribute de imagine. Spații și semne egale.

Vezi videoclipul: Ghid de stil HTML5. Atribute de imagin... Vezi toată lecția: Ghid de stil în HTML5 Citește teoria: Ghid de stil HTML5. Atribute de imagin...
Atribute de imagine

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.

Greşit: 
<img src="html5.gif">
Corect: 
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Spații și semne egale

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

Greşit: 
<link rel = "stylesheet" href = "styles.css">
Corect: 
<link rel="stylesheet" href="styles.css">

Evitați liniile cu coduri lungi

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.

Ghid de stil HTML5. Linii goale și indentare.

Vezi videoclipul: Ghid de stil HTML5. Linii goale și ind... Vezi toată lecția: Ghid de stil în HTML5 Citește teoria: Ghid de stil HTML5. Linii goale și ind...
Linii goale și indentare

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 element:

Inutil: 
<body>

  <h1>Orașe celebre</h1>

  <h2>Tokyo</h2>

  <p>
     Tokyo este capitala Japoniei, centrul zonei Marelui Tokyo,
     și cea mai populată zonă metropolitană din lume.
     Este sediul guvernului japonez și al Palatului Imperial,
     și casa familiei imperiale japoneze.
  </p>

</body>
Mai bine: 
<body>

<h1>Orașe celebre</h1>

<h2>Tokyo</h2>
<p>Tokyo este capitala Japoniei, centrul zonei Marelui Tokyo,
și cea mai populată zonă metropolitană din lume.
Este sediul guvernului japonez și al Palatului Imperial,
și casa familiei imperiale japoneze.</p>

</body>
Exemplu de tabel: 
<table>
  <tr>
    <th>Nume</th>
    <th>Descriere</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Descrierea A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Descrierea B</td>
  </tr>
</table>
Exemplu de listă: 
<ul>
  <li>Londra</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ul>

Ghid de stil HTML5. Etichetele html, body și head.

Vezi videoclipul: Ghid de stil HTML5. Etichetele html, b... Vezi toată lecția: Ghid de stil în HTML5 Citește teoria: Ghid de stil HTML5. Etichetele html, b...
Se omit <html> și <body>?

În HTML5, eticheta <html> și eticheta <body> pot fi omise.

Următorul cod se va valida ca HTML5:

Exemplu: 
<!DOCTYPE html>
<head>
  <title>Titlul paginii</title>
</head>

<h1>Acesta este un titlu</h1>
<p>Acesta este un paragraf.</p>
Cu toate acestea, 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: 
<!DOCTYPE html>
<html lang="en-US">
Declararea unei limbi este importantă pentru aplicațiile de accesibilitate (cititoare de ecran) și motoarele de căutare.

Omiterea <html> sau <body> poate bloca software-ul DOM și XML.
Omiterea <body> poate produce erori în browserele mai vechi (IE9).

Se omite <head>?

Î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>:

Exemplu: 
<!DOCTYPE html>
<html>
<title>Titlul paginii</title>

<body>
  <h1>Acesta este un titlu</h1>
  <p>Acesta este un paragraf.</p>
</body>

</html>
Cu toate acestea, nu vă recomandăm să omiteți eticheta <head>.

Omiterea etichetelor nu este cunoscută pentru dezvoltatorii web.Este nevoie de timp pentru a fi stabilit ca un ghid.

Ghid de stil HTML5. Închiderea tuturor elementelor HTML. Închiderea elementelor HTML goale

Vezi videoclipul: Ghid de stil HTML5. Închiderea tuturor... Vezi toată lecția: Ghid de stil în HTML5 Citește teoria: Ghid de stil HTML5. Închiderea tuturor...
Închideți toate elementele HTML

În HTML5, nu trebuie să închideți toate elementele (de exemplu elementul <p>).

Vă recomandăm să închideți toate elementele HTML.

Greșit: 
<section>
  <p>Acesta este un paragraf.
  <p>Acesta este un paragraf.
</section>
Corect: 
<section>
  <p>Aceste este un paragraf.</p>
  <p>Aceste este un paragraf.</p>
</section>

Închideți elementele HTML goale

În HTML5, este opțional să închideți elementele goale.

Permis: 
<meta charset="utf-8">
De asemenea permis: 
<meta charset="utf-8" />
Cu toate acestea, slash-ul de închidere (/) este NECESAR în XHTML și XML.
Dacă vă așteptați ca software-ul XML să acceseze pagina dvs., este bine să păstrați clapeta de închidere!

Ghid de stil HTML5. Meta Data title. Setarea Viewport

Vezi videoclipul: Ghid de stil HTML5. Meta Data title. S... Vezi toată lecția: Ghid de stil în HTML5 Citește teoria: Ghid de stil HTML5. Meta Data title. S...
Meta Data

Elementul <title> este necesar în HTML5. Faceți titlul cât mai semnificativ posibil: 
<title>Sintaxă HTML5 și stil de codare</title>
Pentru a asigura interpretarea corectă și indexarea corectă a motoarelor de căutare, atât limba cât și codificarea caracterelor ar trebui definite cât mai devreme într-un document: 
<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Sintaxă HTML5 și stil de codare</title>
</head>

Setarea Viewport

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.
Ar trebui să includeți următorul element de afișare (viewport )  <meta> în toate paginile web: 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Un element de afișare (viewport) <meta> oferă instrucțiunile browserului cu privire la modul de control al dimensiunilor și scalării paginii.
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.

Iată un exemplu de pagină web fără etichetă viewport meta și aceeași pagină web cu eticheta viewport meta:

Ghid de stil HTML5. Accesarea elementelor HTML cu JavaScript. Extensii de fișiere. Diferențele dintre .htm și .html. Diferențe tehnice.

Vezi videoclipul: Ghid de stil HTML5. Accesarea elemente... Vezi toată lecția: Ghid de stil în HTML5 Citește teoria: Ghid de stil HTML5. Accesarea elemente...
Accesarea elementelor HTML cu JavaScript

O consecință a utilizării stilurilor HTML „incorecte” poate duce la erori JavaScript.
Aceste două declarații JavaScript vor produce rezultate diferite:

Exemplu: 
var obj = getElementById("Demo")

var obj = getElementById("demo")

Utilizați numele de fișiere scrise cu litere mici

Unele servere web (Apache, Unix) sunt sensibile la litere mari și la litere mici cu privire la numele fișierelor: „london.jpg” nu poate fi accesat ca „London.jpg”.
Alte servere web (Microsoft, IIS) nu sunt sensibile la litere mari și litere mici: "london.jpg" poate fi accesat ca "London.jpg" sau "london.jpg".
Dacă utilizați un amestec de litere mari și mici, trebuie să fiți extrem de consecvenți.
Dacă treceți de la un server nesensibil la litere mici la un server sensibil la litere mari, chiar și erorile mici vor duce la ruperea web-ului!
Pentru a evita aceste probleme, utilizați întotdeauna nume de fișiere scrise cu litere mici.

Extensii de fișiere

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.

Diferențele dintre .htm și .html

Nu există nicio diferență între extensiile .htm și .html. Ambele vor fi tratate ca HTML de orice browser web sau server web.
Diferențele sunt culturale:
.htm „miroase” a sistemele DOS timpurii în care sistemul a limitat extensiile la 3 caractere.
.html „miroase” a sistemele de operare Unix care nu aveau această limitare.

Diferențe tehnice

Când o adresă URL nu specifică un nume de fișier (cum ar fi /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."
Cu toate acestea, serverele pot fi configurate cu mai multe nume de fișiere implicite și, în mod normal, puteți configura atâtea nume de fișiere implicite, după cum este necesar.
Oricum, extensia completă pentru fișierele HTML este .html și nu există niciun motiv pentru care să nu fie utilizat.

Grafică HTML. HTML5 Canvas. Elementul HTML canvas.

Vezi videoclipul: Grafică HTML. HTML5 Canvas. Elementul... Vezi toată lecția: Grafică HTML Citește teoria: Grafică HTML. HTML5 Canvas. Elementul...
HTML5 Canvas

Elementul HTML <canvas> este utilizat pentru a desena grafică pe o pagină web.
Graficul de mai jos este creat cu <canvas>. Acesta prezintă patru elemente: un dreptunghi roșu, un dreptunghi de gradient, un dreptunghi multicolor și un text multicolor.



Ce este 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.

Asistență browser

Numerele din tabel specifică prima versiune de browser care acceptă complet elementul <canvas>.



Example Canvas

O pânză (un canvas) este o zonă dreptunghiulară pe o pagină HTML. În mod implicit, o pânză nu are margine și nu conține.

Marcajul arată astfel: 
<canvas id="myCanvas" width="200" height="100"></canvas>
Notă: 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).

Iată un exemplu de bază, de canvas gol :



Exemplu: 
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
 

Grafică HTML. Exemple de grafică: linie, cerc, text, stroke text.

Vezi videoclipul: Grafică HTML. Exemple de grafică: lini... Vezi toată lecția: Grafică HTML Citește teoria: Grafică HTML. Exemple de grafică: lini...
Desenează o linie



Exemplu: 
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

Desenează un cerc



Exemplu: 
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Desenează un text



Exemplu: 
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

Stroke Text



Exemplu: 
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
 

Grafică HTML. Exemple de grafică : gradient liniar, gradient circular, imagine.

Vezi videoclipul: Grafică HTML. Exemple de grafică : gra... Vezi toată lecția: Grafică HTML Citește teoria: Grafică HTML. Exemple de grafică : gra...
Desenează gradient liniar



Exemplu: 
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Desenează gradient circular



Exemplu: 
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Desenare imagine
  
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
 

HTML5 SVG. Elementul HTML svg. Exemple: cerc SVG, dreptunghi SVG.

Vezi videoclipul: HTML5 SVG. Elementul HTML svg. Exemple... Vezi toată lecția: HTML SVG Citește teoria: HTML5 SVG. Elementul HTML svg. Exemple...
HTML5 SVG

Ce este SVG?

SVG înseamnă grafică vectorială scalabilă.
SVG este utilizat pentru a defini grafica pentru Web.
SVG este o recomandare W3C.

Elementul HTML <svg>

Elementul HTML <svg> este un container pentru grafică SVG.
SVG are mai multe metode pentru desenarea căilor, casetelor, cercurilor, textului și imaginilor grafice.

Asistență browser (Browser Support)

Numerele din tabel specifică prima versiune a browserului care acceptă integral elementul <svg>.



Cerc SVG


Exemplu: 
<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

Dreptunghi SVG



Exemplu: 
<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
 

HTML5 SVG. Diferențele dintre SVG și Canvas. Comparație între Canvas și SVG.

Vezi videoclipul: HTML5 SVG. Diferențele dintre SVG și C... Vezi toată lecția: HTML SVG Citește teoria: HTML5 SVG. Diferențele dintre SVG și C...
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.
Pânza (Canvas) este redată pixel cu pixel. Pe pânză (Canvas), odată ce desenul grafic este desenat, acesta este uitat de browser. Dacă poziția sa ar trebui schimbată, întreaga scenă trebuie redirecționată, inclusiv oricare obiecte care ar putea fi acoperite de grafic.

Comparație între Canvas și SVG

Tabelul de mai jos prezintă câteva diferențe importante între Canvas și SVG:
 
Canvas SVG
  • 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ă.
  • 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.

HTML5 SVG. Exemple: dreptunghi rotunjit SVG, stea SVG, logo SVG.

Vezi videoclipul: HTML5 SVG. Exemple: dreptunghi rotunji... Vezi toată lecția: HTML SVG Citește teoria: HTML5 SVG. Exemple: dreptunghi rotunji...
Dreptunghi rotunjit SVG



Exemplu: 
<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Stea SVG



Exemplu: 
<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

Logo SVG



Exemplu: 
<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Ne pare rău, browserul dvs. nu acceptă SVG inline.
</svg>

HTML Media. HTML Multimedia. Asistență browser. Formate multimedia: .swf, .wav, .mp3, .mp4, .mpg, .wmv și .avi.

Vezi videoclipul: HTML Media. HTML Multimedia. Asistență... Vezi toată lecția: HTML Media Citește teoria: HTML Media. HTML Multimedia. Asistență...
HTML Multimedia

Multimedia pe web inseamnă sunet, muzică, videoclipuri, filme și animații.

Ce este Multimedia?

Multimedia vine în mai multe formate diferite. Poate fi aproape orice puteți auzi sau vedea.
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.
În acest capitol veți afla despre diferitele formate multimedia.

Asistență browser (Browser Support)

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.

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

HTML Media. Formate video HTML5: MP4, WebM și Ogg.

Vezi videoclipul: HTML Media. Formate video HTML5: MP4,... Vezi toată lecția: HTML Media Citește teoria: HTML Media. Formate video HTML5: MP4,...
Formate video obișnuite


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.

 
Format Fișier Descriere
MPEG .mpg
.mpeg		 MPEG. Dezvoltat de Moving Pictures Expert Group. Primul format video popular pe web. Folosit pentru a fi acceptat de toate browserele, dar nu este acceptat în HTML5 (Vezi MP4).
AVI .avi AVI (Audio Video Interleave). Dezvoltat de Microsoft. Folosit frecvent în camere video și hardware TV. Joacă bine pe computere Windows, dar nu în browserele web.
WMV .wmv WMV (Windows Media Video).Dezvoltat de Microsoft. Folosit frecvent în camere video și hardware TV. Joacă bine pe computere Windows, dar nu în browserele web.
QuickTime .mov Dezvoltat de Apple. Folosit frecvent în camere video și hardware TV. Joacă bine pe computere Apple, dar nu în browserele web. (Vezi MP4)
RealVideo .rm
.ram		 RealVideo. Dezvoltat de Real Media pentru a permite transmiterea video cu lățimi de bandă reduse. Este încă utilizat pentru video online și TV TV online, dar nu joacă în browserele web.
Flash .swf
.flv		 Flash. Dezvoltat de Macromedia. Adesea necesită o componentă suplimentară (plug-in) pentru a juca în browserele web.
Ogg .ogg Dezvoltat de Fundația Xiph.Org. Suportat de HTML5.
WebM .webm WebM. Dezvoltat de gigantii web, Mozilla, Opera, Adobe și Google. Suportat de HTML5.
MPEG-4
or MP4		 .mp4 MP4. Dezvoltat de Moving Pictures Expert Group. Bazat pe QuickTime. Folosit în mod obișnuit în camerele video noi și hardware-ul TV. Suport de toate browserele HTML5. Recomandat de YouTube. 

Doar videoclipurile MP4, WebM și Ogg sunt acceptate de standardul HTML5.

HTML Media. Formate audio HTML5: MP3, WAV și Ogg.

Vezi videoclipul: HTML Media. Formate audio HTML5: MP3,... Vezi toată lecția: HTML Media Citește teoria: HTML Media. Formate audio HTML5: MP3,...
Formate audio

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.
 
Format Fişier Descriere
MIDI .mid
.midi		 MIDI (Interfață digitală cu instrument muzical). Formatul principal pentru toate dispozitivele electronice de muzică precum sintetizatoarele și plăcile de sunet pentru PC. Fișierele MIDI nu conțin sunet, doar note digitale care pot fi redate de electronice. Funcționează bine pe toate computerele și hardware-ul muzical, dar nu în browserele web.
RealAudio .rm
.ram		 RealAudio. Dezvoltat de Real Media pentru a permite transmiterea audio cu lățimi de bandă reduse. Nu funcționează în browserele web.
WMA .wma WMA (Windows Media Audio). Dezvoltat de Microsoft. Folosit frecvent în playerele muzicale. Funcționează bine pe computere Windows, dar nu în browserele web.
AAC .aac AAC (Advanced Audio Coding). Dezvoltat de Apple ca format implicit pentru iTunes. Funcționează bine pe computere Apple, dar nu în browserele web.
WAV .wav WAV. Dezvoltat de IBM și Microsoft. Funcționează bine pe sistemele de operare Windows, Macintosh și Linux. Suportat de HTML5.
Ogg .ogg Ogg. Dezvoltat de Fundația Xiph.Org. Suportat de HTML5.
MP3 .mp3 Fișierele MP3 sunt de fapt partea de sunet a fișierelor MPEG. MP3 este cel mai popular format pentru playerele de muzică. Combină o compresie bună (fișiere mici) cu o calitate înaltă. Suport pentru toate browserele.
MP4 .mp4 MP4 este un format video, dar poate fi folosit și pentru audio. Videoclipul MP4 este următorul format video pe internet. Acest lucru duce la asistența automată pentru audio MP4 de către toate browserele.
 
Doar MP3, WAV și Ogg audio sunt acceptate de standardul HTML5.

HTML5 Video. HTML Video - Suport pentru browser: MP4, WebM și Ogg. HTML Video - Tipuri media. HTML Video - Metode, proprietăți și evenimente. Etichete video HTML5: video, source, track.

Vezi videoclipul: HTML5 Video. HTML Video - Suport pentr... Vezi toată lecția: HTML5 Video Citește teoria: HTML5 Video. HTML Video - Suport pentr...
HTML Video - Suport pentru browser

În HTML5, există 3 formate video acceptate: MP4, WebM și Ogg.
Suportul browserului pentru diferitele formate este:
 
Browser MP4 WebM Ogg
Internet Explorer Da Nu Nu
Chrome Da Da Da
Firefox Da Da Da
Safari Da Nu Nu
Opera Da (from Opera 25) Da Da


HTML Video - Tipuri media
 
File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg


HTML Video - Metode, proprietăți și evenimente

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.
Există, de asemenea, evenimente DOM care vă pot notifica atunci când un videoclip începe să se redea, este în pauză etc.

Etichete video HTML5
 
Etichetă Descriere
<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 textele pieselor în playerele media

HTML5 Video. Redarea videoclipurilor în HTML. Elementul HTML5 video. HTML video - Redare automată.

Vezi videoclipul: HTML5 Video. Redarea videoclipurilor î... Vezi toată lecția: HTML5 Video Citește teoria: HTML5 Video. Redarea videoclipurilor î...

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.

Asistență browser (Browser Support)

Numerele din tabel specifică prima versiune a browserului care acceptă integral elementul <video>.



Elementul HTML <video>

Pentru a afișa un videoclip în HTML, utilizați elementul <video>:

Exemplu: 
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Browserul dvs. nu acceptă eticheta video.
</video>

Cum funcționează?

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

HTML <video> - Redare automată (HTML <video> Autoplay)

Pentru a începe un videoclip automat, utilizați atributul autoplay:

Exemplu: 
<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Browserul dvs. nu acceptă eticheta video.
</video>
Atributul de redare automată (autoplay) nu funcționează pe dispozitive mobile precum iPad și iPhone.

HTML5 Audio. Audio pe Web. Elementul HTML5 audio. Elementul source. Atributul de control.

Vezi videoclipul: HTML5 Audio. Audio pe Web. Elementul H... Vezi toată lecția: HTML5 Audio Citește teoria: HTML5 Audio. Audio pe Web. Elementul H...
Audio pe Web

Î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 fișier audio într-o pagină web.

Asistență browser (Browser Support)

Numerele din tabel specifică prima versiune de browser care acceptă integral elementul <audio>.



Elementul HTML <audio>

Pentru a reda un fișier audio în HTML, utilizați elementul <audio>:

Exemplu: 
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Browserul dvs. nu acceptă elementul audio.
</audio>

HTML Audio - Cum funcționează

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

HTML5 Audio. Formate audio acceptate: MP3, WAV și OGG. Tipuri media. Metode, proprietăți și evenimente. Etichete audio HTML5.

Vezi videoclipul: HTML5 Audio. Formate audio acceptate:... Vezi toată lecția: HTML5 Audio Citește teoria: HTML5 Audio. Formate audio acceptate:...
HTML Audio - Suport pentru browser (Browser Support)

În HTML5, există 3 formate audio acceptate: MP3, WAV și OGG.
Suportul browserului pentru diferitele formate este:
 
Browser MP3 WAV OGG
Edge/IE Da Nu Nu
Chrome Da Da Da
Firefox Da Da Da
Safari Da Da Nu
Opera Da Da Da


HTML Audio - Tipuri media (Media Types)
 
Tipul fișierului Tip media
MP3 audio/mpeg
OGG audio/ogg
WAV audio/wav


HTML Audio - Metode, proprietăți și evenimente

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.

Etichete audio HTML5
 
Etichetă Descriere
<audio> Definește conținutul sunetului
<source> Definește multiple resurse media pentru elemente media, cum ar fi video și audio

HTML Plugin-uri. Aplicațiile Helper. Etichetele object și embed. Etichetele video și audio.

Vezi videoclipul: HTML Plugin-uri. Aplicațiile Helper. E... Vezi toată lecția: HTML Plug-ins Citește teoria: HTML Plugin-uri. Aplicațiile Helper. E...
HTML Plug-ins 

Scopul unui plug-in este extinderea funcționalității unui browser web.

HTML Helpers (Plug-ins)

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>

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.

Exemplu: 
<object width="400" height="50" data="bookmark.swf"></object>
Elementul <object> poate fi de asemenea utilizat pentru a include HTML în HTML:

Exemplu: 
<object width="100%" height="500px" data="snippet.html"></object>

Sau imagini dacă vă plac:

Exemplu: 
<object data="bmw.jpeg"></object>

HTML Plugin-uri. Elementul embed.

Vezi videoclipul: HTML Plugin-uri. Elementul embed. Vezi toată lecția: HTML Plug-ins Citește teoria: HTML Plugin-uri. Elementul embed.
Elementul <embed>

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.

Exemplu: 
<embed width="400" height="50" src="bookmark.swf">

Rețineți că 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:

Exemplu: 
<embed width="100%" height="500px" src="snippet.html">

Sau imagini dacă vă plac:

Exemplu: 
<embed src="bmw.jpeg">
 

HTML YouTube. Videoclipuri HTML YouTube. Id video YouTube. Redarea unui videoclip YouTube în HTML folosind: frame, src, width, height.

Vezi videoclipul: HTML YouTube. Videoclipuri HTML YouTub... Vezi toată lecția: HTML YouTube Citește teoria: HTML YouTube. Videoclipuri HTML YouTub...
Videoclipuri HTML YouTube

Cel mai simplu mod de a reda videoclipuri în HTML, este să folosiți YouTube.

Vă luptați cu formatele video?

Mai devreme în acest tutorial, ați văzut că ar trebui să convertiți videoclipurile dvs. în diferite formate pentru a le reda în toate browserele.
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.

Id video YouTube

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.

Redarea unui videoclip YouTube în 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).

Exemplu - Utilizarea iFrame (recomandat) 
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

HTML YouTube. Controale YouTube. YouTube - Folosire object sau embed.

Vezi videoclipul: HTML YouTube. Controale YouTube. YouTu... Vezi toată lecția: HTML YouTube Citește teoria: HTML YouTube. Controale YouTube. YouTu...
Controale YouTube (YouTube Controls)

Valoarea 0: Player controls nu se afișează.

Valoarea 1 (implicit): Afișare player controls.

Exemplu YouTube - Controale:
  
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>

YouTube - Folosim <object> sau <embed>

Notă: YouTube  <object> și <embed> sunt depășite din ianuarie 2015. Ar trebui să vă migrați videoclipurile pentru a utiliza <iframe>.

Exemplu - Utilizarea <object> (învechită)
  
<object width="420" height="315"
data="https://www.youtube.com/embed/tgbNymZ7vqY">
</object>

Exemplu - Folosirea <embed> (învechită)
  
<embed width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">

HTML YouTube. Redare automată YouTube. Listă de redare YouTube. Buclă YouTube.

Vezi videoclipul: HTML YouTube. Redare automată YouTube.... Vezi toată lecția: HTML YouTube Citește teoria: HTML YouTube. Redare automată YouTube....
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.

Notă: 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.

Valoarea 0 (implicit): Videoclipul nu va fi redat automat atunci când playerul se încarcă.

Valoarea 1: Videoclipul se va reda automat atunci când playerul se încarcă.

YouTube - Redare automată (YouTube Autoplay)
  
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>

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

Geolocalizare în HTML5. Tratarea erorilor și a respingerilor cu al doilea parametru al metodei getCurrentPosition(). Afișarea rezultatului într-o hartă cu Google Maps. Informații specifice locației.

Vezi videoclipul: Geolocalizare în HTML5. Tratarea erori... Vezi toată lecția: HTML APIs Citește teoria: Geolocalizare în HTML5. Tratarea erori...
Tratarea erorilor și a respingerilor

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:

Exemplu: 
function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "Utilizatorul a respins cererea de geolocalizare."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Informațiile despre locație nu sunt disponibile."
      break;
    case error.TIMEOUT:
      x.innerHTML = "Solicitarea de a obține locația utilizatorului a expirat."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "A apărut o eroare necunoscută."
      break;
  }
}

Afișarea rezultatului într-o hartă

Pentru a afișa rezultatul într-o hartă, aveți nevoie de acces la un serviciu de hartă, cum ar fi Google Maps.
În exemplul de mai jos, latitudinea și longitudinea returnate sunt utilizate pentru a afișa locația într-o hartă Google (folosind o imagine statică):

Exemplu: 
function showPosition(position) {
  var latlon = position.coords.latitude + "," + position.coords.longitude;

  var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
  "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";

  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
Informații specifice locației

Această pagină a demonstrat cum se arată poziția unui utilizator pe o hartă.
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).

Geolocalizare în HTML5. Metoda getCurrentPosition() - Returnare date. Obiect de geolocalizare - Alte metode interesante: watchPosition(), clearWatch().

Vezi videoclipul: Geolocalizare în HTML5. Metoda getCurr... Vezi toată lecția: HTML APIs Citește teoria: Geolocalizare în HTML5. Metoda getCurr...
Metoda getCurrentPosition () - Returnare date

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:
 
Proprietate Returnări
coords.latitude Latitudinea ca număr zecimal (întors întotdeauna)
coords.longitude Longitudinea ca număr zecimal (întors întotdeauna)
coords.accuracy Precizia poziției (întoarsă întotdeauna)
coords.altitude Altitudinea în metri peste nivelul mării medii (returnat dacă este disponibil)
coords.altitudeAccuracy 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 ().

Exemplul de mai jos arată metoda watchPosition (). Aveți nevoie de un dispozitiv GPS precis pentru a testa acest lucru (cum ar fi smartphone-ul):

Exemplu: 
<script>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    x.innerHTML = "Geolocalizarea nu este acceptată de acest browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitudine: " + position.coords.latitude +
  "<br>Longitudine: " + position.coords.longitude;
}
</script>

Geolocalizare în HTML5. Localizare Poziția Utilizatorului. Utilizarea geolocalizării în HTML cu Metoda getCurrentPosition().

Vezi videoclipul: Geolocalizare în HTML5. Localizare Poz... Vezi toată lecția: HTML APIs Citește teoria: Geolocalizare în HTML5. Localizare Poz...
Geolocalizare în HTML5

API Geolocalizare în 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ă.

Notă: Geolocalizarea este cea mai precisă pentru dispozitivele cu GPS, cum ar fi smartphone-ul.

Asistență browser (Browser Support)

Numerele din tabel specifică prima versiune de browser care acceptă complet geolocalizarea.



Notă: Î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.
Exemplul de mai jos returnează latitudinea și longitudinea poziției utilizatorului:

Exemplu: 
<script>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocalizarea nu este acceptată de acest browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitudine: " + position.coords.latitude +
  "<br> Longitudine: " + position.coords.longitude;
}
</script>

Stocare Web în HTML5. Asistență browser. Obiecte de stocare Web în HTML: window.localStorage, window.sessionStorage.

Vezi videoclipul: Stocare Web în HTML5. Asistență browse... Vezi toată lecția: Stocare Web în HTML5 Citește teoria: Stocare Web în HTML5. Asistență browse...
Stocare Web în HTML5

Stocare web HTML - mai bine decât cookie-urile.

Ce este stocarea Web HTML?

Cu stocarea web, aplicațiile web pot stoca datele local în browserul utilizatorului.
Înainte de HTML5, datele aplicației trebuiau stocate în cookie-uri, incluse în fiecare solicitare a serverului. 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.

Asistență browser(Browser Support)

Numerele din tabel specifică prima versiune de browser care acceptă complet Stocarea Web.



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: 
if (typeof(Storage) !== "undefined") {
  // Cod pentru localStorage/sessionStorage.
} else {
  // Scuze! Fără suport de stocare web ..
}

Stocare Web în HTML5. Obiectul localStorage.

Vezi videoclipul: Stocare Web în HTML5. Obiectul localSt... Vezi toată lecția: Stocare Web în HTML5 Citește teoria: Stocare Web în HTML5. Obiectul localSt...
Obiectul localStorage

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.

Exemplu: 
// Magazin
localStorage.setItem("lastname", "Popescu");

// Recuperare
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Exemplu explicat:

Creați o pereche localStorage nume / valoare cu name = "lastname" și value = "Popescu"
Obțineți valoarea „lastname” și introduceți-o în elementul cu id = „result”

Exemplul de mai sus poate fi scris astfel: 
// Magazin
localStorage.lastname = "Popescu";
// Recuperare
document.getElementById("result").innerHTML = localStorage.lastname;

Sintaxa pentru înlăturarea elementului localStorage „lastname” este următoarea: 
localStorage.removeItem("lastname");

Notă: Perechile nume / valoare sunt întotdeauna stocate ca șiruri. Nu uitați să le convertiți în alt format atunci când este nevoie!

Următorul exemplu contează de câte ori un utilizator a făcut click pe un buton. În acest cod, șirul de valori este convertit într-un număr pentru a putea crește contorul:

Exemplu: 
if (localStorage.clickcount) {
  localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
  localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Ați făcut click pe butonul" +
localStorage.clickcount + " timp(s).";

Stocare Web în HTML5. Obiectul sessionStorage.

Vezi videoclipul: Stocare Web în HTML5. Obiectul session... Vezi toată lecția: Stocare Web în HTML5 Citește teoria: Stocare Web în HTML5. Obiectul session...
Obiectul sessionStorage

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.

Următorul exemplu contează de câte ori un utilizator a făcut click pe un buton, în sesiunea curentă:

Exemplu: 
if (sessionStorage.clickcount) {
  sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
  sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Ați făcut click pe butonul" +
sessionStorage.clickcount + " timp(s)în această sesiune.";

HTML5 Web Workers. Creere fișier Web Worker într-un JavaScript extern cu demo_workers.js. Ascultător de eveniment „onmessage”. Încheiere web worker folosind metoda terminate().

Vezi videoclipul: HTML5 Web Workers. Creere fișier Web W... Vezi toată lecția: HTML5 Web Workers Citește teoria: HTML5 Web Workers. Creere fișier Web W...
Creați un fișier Web Worker

Acum, hai să creem lucrătorul nostru web (web worker) într-un JavaScript extern.
Aici, creem un script care contează. Scriptul este stocat în fișierul "demo_workers.js":
  
var i = 0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();

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).
  
w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

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 terminate ():
  
w.terminate();
 

HTML5 Web Workers. Ce este un Web Worker? Asistență browser. Verificare Asistența Web Worker.

Vezi videoclipul: HTML5 Web Workers. Ce este un Web Work... Vezi toată lecția: HTML5 Web Workers Citește teoria: HTML5 Web Workers. Ce este un Web Work...
HTML5 Web Workers

Un lucrător web (web worker) este un JavaScript care rulează în fundal, fără a afecta performanța paginii.

Ce este un Web Worker?

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.

Asistență browser (Browser Support)

Numerele din tabel specifică prima versiune a browserului care acceptă pe deplin Web Workers.



Exemplu de lucrători web (web workers) în HTML

Exemplul de mai jos creează un simplu lucrător web (web worker) care numără numere în fundal:

Exemplu:


Verificați Asistența Web Worker

Înainte de a crea un lucrător web (web worker), verificați dacă browserul utilizatorului îl acceptă:

Exemplu: 
if (typeof(Worker) !== "undefined") {
  // Da! Suport pentru lucrători web!
  // Un cod .....
} else {
  // Scuze! Nici un suport pentru Web Worker ..
}

HTML5 Web Workers. Reutilizare Web Worker. Web workers și DOM.

Vezi videoclipul: HTML5 Web Workers. Reutilizare Web Wor... Vezi toată lecția: HTML5 Web Workers Citește teoria: HTML5 Web Workers. Reutilizare Web Wor...
Reutilizați Web Worker

Dacă setați variabila lucrător (worker) pe nedeterminată, după terminarea acesteia, puteți refolosi codul:
  
w = undefined;

Exemplu complet de lucrător web (web worker)

Am văzut deja codul Worker în fișierul .js. Mai jos este codul pentru pagina HTML:

Exemplu: 
<!DOCTYPE html>
<html>
<body>

<p>Numără numere: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<script>
var w;

function startWorker() {
  if (typeof(Worker) !== "undefined") {
    if (typeof(w) == "undefined") {
      w = new Worker("demo_workers.js");
    }
    w.onmessage = function(event) {
      document.getElementById("result").innerHTML = event.data;
    };
  } else {
    document.getElementById("result").innerHTML = "Ne pare rău! Nu există suport pentru Web Worker.";
  }
}

function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

Lucrătorii Web (web workers) și DOM

Î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

Elementele HTML Block și Inline. Element la nivel de block: div. Element în linie: span.

Vezi videoclipul: Elementele HTML Block și Inline. Eleme... Vezi toată lecția: Elementele HTML Block și Inline Citește teoria: Elementele HTML Block și Inline. Eleme...
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.

Elemente la nivel de block (Block-level Elements)

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.

Exemplu: 
<div> Hello World </div>

Elemente la nivel de block în HTML(Block level elements in HTML:):



Elemente în linie (inline)

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.

Exemplu: 
<span>Hello World</span>

Elementele HTML Block și Inline. Elementul div. Elementul span.

Vezi videoclipul: Elementele HTML Block și Inline. Eleme... Vezi toată lecția: Elementele HTML Block și Inline Citește teoria: Elementele HTML Block și Inline. Eleme...
Elementul <div>

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:

Exemplu: 
<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>Londra este capitala Angliei. Este cel mai populat oraș din Regatul Unit, cu o zonă metropolitană de peste 13 milioane de locuitori.</p>
</div>

Elementul <span>

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:

Exemplu: 
<h1>My <span style="color:red">Important</span> Titlu</h1>
Gruparea etichetelor HTML
 
Etichetă Descriere
<div> Definește o secțiune dintr-un document (la nivel de block/block-level)
<span> Definește o secțiune dintr-un document (inline)

Elemente noi în HTML5. Elemente noi semantice / structurale.

Vezi videoclipul: Elemente noi în HTML5. Elemente noi se... Vezi toată lecția: Elemente noi în HTML5 Citește teoria: Elemente noi în HTML5. Elemente noi se...
Elemente noi în HTML5 

Mai jos este o listă a noilor elemente HTML5 și o descriere la ce sunt folosite.

Elemente noi semantice / structurale

HTML5 oferă elemente noi pentru o structură mai bună a documentelor:
 
Etichetă Descriere
<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
<details> 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
<main> Definește conținutul principal al unui document
<mark> Definește text marcat / evidențiat
<meter> Definește o măsurare scalară într-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 ruby (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 dată / oră
<wbr> Definește o posibilă pauză de linie

Elemente noi în HTML5. Grafică HTML5: canvas, svg. Elemente media noi: audio, embed, source, track, video.

Vezi videoclipul: Elemente noi în HTML5. Grafică HTML5:... Vezi toată lecția: Elemente noi în HTML5 Citește teoria: Elemente noi în HTML5. Grafică HTML5:...
Grafică HTML5
 
Etichetă Descriere
<canvas> Desenați grafică din mers, prin scripturi (de obicei JavaScript)
<svg> Desenați grafică vectorială scalară

Elemente media noi
 
Etichetă Descriere
<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> Definește video sau film

Elemente noi în HTML5. Elemente noi de formular (New Form Elements). Tipuri noi de intrare (New Input Types). HTML5 - Sintaxa atributului nou (HTML5 - New Attribute Syntax).

Vezi videoclipul: Elemente noi în HTML5. Elemente noi de... Vezi toată lecția: Elemente noi în HTML5 Citește teoria: Elemente noi în HTML5. Elemente noi de...
Elemente noi de formular (New Form Elements)
 
Etichetă Descriere
<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)
 
Tipuri noi de intrare Atribute noi de intrare
  • 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

HTML5 - Sintaxa atributului nou (HTML5 - New Attribute Syntax)

HTML5 permite patru sintaxe diferite pentru atribute.
Acest exemplu demonstrează diferitele sintaxe utilizate într-o etichetă <input>:
 
Tip Exemplu
Gol <input type="text" value="Ion" disabled>
Necitat <input type="text" value=Ion>
Ghilimele <input type="text" value="Ion Popescu">
Apostrof <input type="text" value='Ion Popescu'>

În HTML5, toate cele patru sintaxe pot fi utilizate, în funcție de ceea ce este necesar pentru atribut.
 

HTML5 Migrare. Migrarea de la HTML4 la HTML5.

Vezi videoclipul: HTML5 Migrare. Migrarea de la HTML4 la... Vezi toată lecția: Migrare în HTML5 Citește teoria: HTML5 Migrare. Migrarea de la HTML4 la...
Migrarea de la HTML4 la 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ă.

Puteți migra de la XHTML la HTML5, folosind aceeași rețetă.
 
Tipic HTML4 Tipic HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div class="article"> <article>
<div id="footer"> <footer>

O pagină tipică HTML4

Exemplu:
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
body {
  font-family: Verdana,sans-serif;
  font-size: 0.9em;
}

div#header, div#footer {
  padding: 10px;
  color: white;
  background-color: black;
}

div#content {
  margin: 5px;
  padding: 10px;
  background-color: lightgrey;
}

div.article {
  margin: 5px;
  padding: 10px;
  background-color: white;
}

div#menu ul {
  padding: 0;
}

div#menu ul li {
  display: inline;
  margin: 5px;
}
</style>
</head>
<body>

<div id="header">
  <h1>Monday Times</h1>
</div>

<div id="menu">
  <ul>
    <li>Știri</li>
    <li>Sport</li>
    <li>Vremea</li>
  </ul>
</div>

<div id="content">
  <h2>Secțiunea știri</h2>
  <div class="article">
    <h2>Articolul de știri</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </div>
  <div class="article">
    <h2>Articolul de știri</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </div>
</div>

<div id="footer">
  <p>&amp;copy; 2016 Monday Times. Toate drepturile rezervate.</p>
</div>

</body>
</html>
 

HTML5 Migrare. Schimbare la Doctype HTML5. Schimbare la codare HTML5. Adăugare HTML5Shiv.

Vezi videoclipul: HTML5 Migrare. Schimbare la Doctype HT... Vezi toată lecția: Migrare în HTML5 Citește teoria: HTML5 Migrare. Schimbare la Doctype HT...
Schimbă la Doctype HTML5

Modificați doctype 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
la doctype HTML5:

Exemplu: 
<!DOCTYPE html>

Schimbare la codare HTML5

Modificați informațiile de codificare: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
la codarea HTML5:

Exemplu: 
<meta charset="utf-8">

Adăugați HTML5Shiv

Noile elemente semantice HTML5 sunt acceptate în toate browserele moderne. În plus, puteți „învăța” browserele mai vechi cum să gestioneze „elemente necunoscute”.
Cu toate acestea, IE8 și versiunile anterioare, nu permit stilizarea elementelor necunoscute. Deci, HTML5Shiv este o soluție JavaScript pentru a permite stilizarea elementelor HTML5 în versiunile de Internet Explorer înainte de versiunea 9.

Adăugați HTML5Shiv:

Exemplu: 
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
 

HTML5 Migrare. Diferența dintre article, section și div.

Vezi videoclipul: HTML5 Migrare. Diferența dintre articl... Vezi toată lecția: Migrare în HTML5 Citește teoria: HTML5 Migrare. Diferența dintre articl...
Diferența dintre <article> <section> și <div>

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.

Cum să interpretezi asta?

În exemplul de mai sus, am folosit <section> ca container pentru <article> aferent.
Dar, am fi putut folosi <article> ca și container pentru articole.

Iată câteva exemple diferite:

<article> în <article>: 
<article>

<h2>Orașe celebre</h2>

<article>
  <h2>Londra</h2>
  <p>Londra este capitala Angliei.</p>
</article>

<article>
  <h2>Paris</h2>
  <p>Paris este capitala și cel mai populat oraș al Franței.</p>
</article>

<article>
  <h2>Tokyo</h2>
  <p>Tokyo este capitala Japoniei.</p>
</article>

</article>
<div> în <article>: 
<article>

<h2>Orașe celebre</h2>

<div class="city">
  <h2>Londra</h2>
  <p>Londra este capitala Angliei.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris este capitala și cel mai populat oraș al Franței.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo este capitala Japoniei. </p>
</div>

</article>
<div> în <section> în <article>: 
<article>

<section>
  <h2>Orașe celebre</h2>

  <div class="city">
    <h2>Londra</h2>
    <p>Londra este capitala Angliei.</p>
  </div>

  <div class="city">
    <h2>Paris</h2>
    <p>Paris este capitala și cel mai populat oraș al Franței.</p>
  </div>

  <div class="city">
    <h2>Tokyo</h2>
    <p>Tokyo este capitala Japoniei.</p>
  </div>
</section>

<section>
  <h2>Țări celebre</h2>

  <div class="country">
    <h2>Anglia</h2>
    <p>Londra este capitala Angliei.</p>
</div>

  <div class="country">
    <h2>Franța</h2>
    <p>Paris este capitala și cel mai populat oraș al Franței.</p>
</div>

  <div class="country">
    <h2>Japonia </h2>
    <p>Tokyo este capitala Japoniei.</p>
  </div>
</section>

</article>

HTML5 Migrare. Schimbare la elemente semantice HTML5.

Vezi videoclipul: HTML5 Migrare. Schimbare la elemente s... Vezi toată lecția: Migrare în HTML5 Citește teoria: HTML5 Migrare. Schimbare la elemente s...
Schimbare la elemente semantice HTML5

CSS-ul existent conține ID-uri și clase pentru stilizarea elementelor: 
body {
  font-family: Verdana,sans-serif;
  font-size: 0.9em;
}

div#header, div#footer {
  padding: 10px;
  color: white;
  background-color: black;
}

div#content {
  margin: 5px;
  padding: 10px;
  background-color: lightgrey;
}

div.article {
  margin: 5px;
  padding: 10px;
  background-color: white;
}

div#menu ul {
  padding: 0;
}

div#menu ul li {
  display: inline;
  margin: 5px;
}
Înlocuiți cu stiluri CSS egale pentru elemente semantice HTML5: 
body {
  font-family: Verdana,sans-serif;
  font-size: 0.9em;
}

header, footer {
  padding: 10px;
  color: white;
  background-color: black;
}

section {
  margin: 5px;
  padding: 10px;
  background-color: lightgrey;
}

article {
  margin: 5px;
  padding: 10px;
  background-color: white;
}

nav ul {
  padding: 0;
}

nav ul li {
  display: inline;
  margin: 5px;
}
În cele din urmă, schimbați elementele în elemente semantice HTML5:

Exemplu: 
<body>

<header>
  <h1>Monday Times</h1>
</header>

<nav>
  <ul>
    <li>Știri</li>
    <li>Sport</li>
    <li>Vremea</li>
  </ul>
</nav>

<section>
  <h2>Secțiunea știri</h2>
  <article>
    <h2>Articolul de știri</h2>
    <p>Lorem ipsum dolor sit amet..</p>
  </article>
  <article>
    <h2>Articolul de știri</h2>
    <p>Lorem ipsum dolor sit amet..</p>
  </article>
</section>

<footer>
  <p>&copy; 2014 Monday Times. Toate drepturile rezervate.</p>
</footer>

</body>

Evenimente trimise de server în HTML5. Evenimente trimise de server - mesagerie unidirecțională. Notificări de eveniment trimise de server cu Obiectul EventSource. Evenimentul onmessage.

Vezi videoclipul: Evenimente trimise de server în HTML5.... Vezi toată lecția: Evenimente trimise de server în HTML5 Citește teoria: Evenimente trimise de server în HTML5....
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.

Exemple: actualizări Facebook / Twitter, actualizări ale prețului stocului, fluxuri de știri, rezultate sportive etc.

Asistență browser (Browser Support)

Numerele din tabel specifică prima versiune de browser care acceptă complet evenimentele trimise de server.



Primiți notificări de eveniment trimise de server

Obiectul EventSource este utilizat pentru a primi notificări de evenimente trimise de server:

Exemplu:
  
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
  document.getElementById("result").innerHTML += event.data + "<br>";
};

Exemplu explicat:

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

Evenimente trimise de server în HTML5. Verificare asistența pentru evenimente trimise de server. Exemplu de cod lateral-server). Setare antet „Content-Type” la „text / stream-event”.

Vezi videoclipul: Evenimente trimise de server în HTML5.... Vezi toată lecția: Evenimente trimise de server în HTML5 Citește teoria: Evenimente trimise de server în HTML5....
Verificați asistența pentru evenimente trimise de server

În exemplul de mai sus, există câteva linii de cod suplimentare pentru a verifica suportul browserului pentru evenimentele trimise de server:
  
if(typeof(EventSource) !== "undefined") {
  // Da! Suport pentru evenimente trimise de server!
   // Un cod .....
} else {
  // Scuze! Niciun suport de evenimente trimis de server ..
}

Exemplu de cod lateral-server (Server-Side Code )

Pentru ca exemplul de mai sus să funcționeze, 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.

Cod în PHP (demo_sse.php):
  
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data:Timpul serverului este: {$time}\n\n";
flush();
?>

Cod în ASP (VB) (demo_sse.asp):
  
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: Timpul serverului este: " & now())
Response.Flush()
%>

Cod explicat:
 
  • 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.

Obiectul EventSource

În exemplele de mai sus am folosit evenimentul onmessage pentru a primi mesaje. Dar sunt disponibile și alte evenimente:

 
Evenimente Descriere
onopen Când se deschide o conexiune la server
onmessage Când un mesaj este primit
onerror Când apare o eroare
Toate capitolele
Limbajul PHP →