Rezultate pentru tag: rest

Dispersia luminii.

Definiţia dispersiei. Descompunerea luminii albe în spectrul de radiaţii vizibile. Dispersia în prisma optică. Dispersia normală şi anomală.

Masă atomică. Izotopi. Mol de atomi

Masa atomică relativă medie. Compoziția procentuală a izotopilor în natură. Numărul lui Avogadro.

Viteza şi acceleraţia.

Metode de adunare şi scadere a vectorilor. Viteza medie şi viteza momentană. Acceleraţia medie şi acceleraţia momentană.

Mişcarea rectilinie uniform variată.

Definiţie, legea vitezei, ecuaţia mişcării, relaţia Galilei.

Legea atracţiei gravitaţionale.

Legea atracţiei gravitaţionale universale. Câmpul gravitaţional terestru.

Lucrul mecanic.

Definiţie. Interpretare geometrică. Forţe conservative. Lucrul mecanic al forţelor elastică şi de greutate.

Puterea şi randamentul.

Definiţia puterii. Randamentul unei maşini. Randamentul planului înclinat.

Energia cinetică şi energia potenţială.

Energia cinetică. Teorema variaţiei energiei cinetice. Energia potenţială gravitaţională şi elastică.

Refracţia undelor.

Refracţia undelor mecanice. Seismologia - undele mecanice terestre.

Structura substanţei.

Structura substanţei. Ipoteza atomică. Numarul lui Avogadro. Molul.

Calorimetrie I.

Lucrul mecanic: definiţie, ecuaţii pentru varii procese. Căldura. Coeficienţi calorici: definţii, tipuri.

Motoare termice.

Randamentul maşinii termice. Motoarele termice Otto şi Diesel.

Entropia. Principiul II.

Entropia: definiţie, interpretare. Procese reversibile şi ireversibile. Principiul II al termodinamicii.

Transformări de stări de agregare.

Stări de agregare: definiţie, faze, transfromări. Vaporizarea, evaporarea, fierberea. Căldura latentă.

Lichefierea, topirea. Diagrama de fază.

Izotermele Andrews ale gazului real. Lichefierea. Topirea şi solidificarea. Diagramele de fază. Punctul triplu.

Legea Joule. Electroliza.

Energia electrică – legea Joule. Puterea electrică. Randamentul electric. Efectul chimic - electroliza.

Circuitul oscilant deschis. Antene.

Circuitul oscilant deschis. Antene dipol de emisie şi recepţie. Clasificarea undelor electromagnetice.

Transformările Galilei. Relativitatea clasică.

Spaţiul şi timpul în fizica clasică. Transformările Galilei. Principiul relativităţii clasice. Electromagnetismul - o excepţie.

Principiile Einstein. Transformările Lorentz.

Principiile Einstein ale relativităţii restrânse. Spaţiu-timpul în fizica relativistă. Transformările Lorentz. Relativitatea simultaneităţii.

Dinamica relativistă. Ecuaţia Einstein.

Dinamica relativistă: masa, impusul şi forţa în fizica relativistă. Ecuaţia Einstein: relaţia masă-energie.

Aplicaţii: radiaţiile X.

Radiaţiile X de frânare şi caracteristice: producere şi proprietăţi. Interacţiunea cu substanţa. Aplicaţii.

Configurația electronică a elementelor din primele 3 perioade (Z 1-18)

Straturi electronice, substraturi electronice, orbitali. Spin electronic. Configurația electronică. Reguli de ocupare cu electroni a straturilor şi substraturilor. Principiul lui Pauli. Regula lui Hund.

Tabelul periodic – grupe şi perioade

Tabelul periodic. Grupe, perioade. Legea periodicității. Grupe principale, Grupe secundare. Electron distinctiv. Metale alcaline. Metale alcalino-pământoase. Halogeni.

Poziţia elementelor în tabelul periodic şi proprietăţile periodice

Tabelul periodic. Poziţia elementelor în tabelul periodic. Proprietăţile periodice. Raza atomică, volumul atomic. Ion, cation, anion.

Dioda semiconductoare.

Dioda semiconductoare. Joncţiunea PN. Polarizarea directă şi inversă a diodei. Străpungerea joncţiunii.

Variaţia energiei de ionizare

Ion, cation, anion. Proprietăți periodice. Energie de ionizare - definiție, variație în tabelul periodic.

Energia de legătură. Stabilitatea nucleară.

Energia de legătură. Energia de legătură pe nucleon. Platoul de stabilitate. Procese de creştere a stabilităţii.

Variaţia proprietăţilor periodice chimice

Proprietățile periodice chimice. Electronegativitate, caracter metalic, caracter nemetalic, valență. Scara electronegativităţii. Elemente electronegative şi elemente electropozitive. Proprietăţile fizice ale metalelor şi nemetalelor. Caracterul bazic şi caracterul acid al oxizilor metalici. 

Forţe intermoleculare. Legături de hidrogen.

Forțe intramoleculare şi forțe intermoleculare. Legătura de hidrogen, forțe dipol-dipol, forțe de dispersie London, forțe van der Waals. Proprietățile influențate de forțele intermoleculare: punct de fierbere, punct de topire, stare de agregare. 

Starea gazoasă. Legea gazelor ideale.

Gaze reale. Modelul gazului ideal. Legea gazelor ideale. Parametrii de stare ai gazelor. Valori numerice ale lui R (constanta molară a gazelor ideale). Variaţia parametrilor gazelor ideale. Condensarea. 

Soluţii. Dizolvarea compuşilor ionici şi moleculari în apă.

Soluţii. Amestecuri omogene şi amestecuri eterogene. Solvent/dizolvant şi solut/dizolvat/solvat. Soluţii lichide, gazoase şi solide. Solubilitate. Factorii care influenţează solubilitatea. Apa – cel mai bun solvent. Dizolvarea. Dizolvarea compuşilor ionici în apă. Dizolvarea substanţelor polare în apă. 

Concentraţia procentuală - aplicaţii

Soluții, dizolvare. Concentrație procentuală. Masă dizolvată, masa soluției. Aplicații.

Factorii care influenţează echilibrele chimice

Principiul lui LeChatelier. Influenţa concentraţiei, a presiunii şi a temperaturii asupra echilibrelor chimice. Reacţii endoterme şi reacţii exoterme. Procedeul Haber-Bosch, obţinerea amoniacului la scală industrială. Reacţii reversibile şi reacţii ireversibile. 

pH-ul soluţiilor apoase

pH – definiţie, semnificaţie matematică. Reacţia de autoprotoliză a apei. Soluţie neutră. Produsul ionic al apei, K_w. Soluţii acide, soluţii neutre şi soluţii bazice. pH neutru, pH bazic şi pH acid. Scala de pH. 

Reacţii redox. Oxidanţi şi reducători.

Transferul de electroni. Reacţia de oxidare. Reacţia de reducere. Numărul de oxidare. Reguli pentru determinarea numerelor de oxidare. Reacţii redox. Agenţi oxidanţi şi agenţi reducători. Caracter oxidant şi carcter reducător. Seria activităţii metalelor. 

Teorema împărţirii cu rest

Împărțirea cu rest a numerelor naturale. Teorema împarțirii cu rest.

Deîmpărţit = cât x împărţitor + rest, restul < împărţitorul (d = c x î + r, r < î)

Sisteme de numerație

Sistemul de numerație zecimal (baza 10). Sistemul de numerație binar (baza 2). Sistemul de numerație hexazecimal (baza 16). Conversia unui număr dintr-un sistem de numerație în altul.

Divizibilitatea numerelor naturale. Divizor. Multiplu

Divizibilitatea numerelor naturale. Noţiunea de divizor. Noţiunea de multiplu.

Divizibilitatea numerelor întregi

Divizibilitatea numerelor întregi.

Scoaterea întregilor din fracție şi introducerea întregilor în fracţie

Scoaterea întregilor din fracție și introducerea întregilor în fracţie. Reprezentare prin desen

Descompuneri în factori

Descompunerea în factori. Metode de descompunere în factori: metoda factorului comun, formule de calcul prescurtat și metode combinate.

Mărimi direct proporţionale

Rezolvarea problemelor cu mărimi direct proporţioale. Regula de trei simplă pentru mărimi d.p.

Mărimi invers proporționale

Rezolvarea problemelor cu mărimi invers proporţionale. Regula de trei simplă pentru mărimi i.p.

Clasificarea triunghiurilor

Clasificarea triunghiurilor după laturi şi după unghiuri: triunghi oarecare, triunghi isoscel, triunghi echilateral, triunghi ascuţitunghic, triunghi dreptunghic, triunghi obtuzunghic

Aria triunghiului

Formula pentru arie triunghi. Aria triunghiului oarecare și aria triunghiului dreptunghic.

Alcani – nomenclatură, proprietăţi fizice, aplicaţii practice

Alcani, izoalcani. Metan, etan, propan, butan, izobutan. Izomerie de catenă. Serie omoloagă. Corelaţia dintre structura alcanilor şi proprietăţile fizice (starea de agregare, temperatura de fierbere).

Alcani – proprietăţi chimice

Reacţii care au loc cu scindarea legăturilor C – C. Reacţii care au loc cu scindarea legăturilor C – H. Arderea alcanilor. Reacţia de substituţie – halogenarea alcanilor. Reacţia de dehidrogenare – piroliza, cracarea. Izomerizarea alcanilor. Izomerizarea n-butanului. Cifra octanică a benzinelor. Solubilitatea alcanilor. 

Alchene – nomenclatură, proprietăţi fizice, aplicaţii practice

Serie omoloagă. Nomenclatură. Atomi de carbon vinilici şi atomi de carbon alilici. Caracteristicile legăturii duble. Izomerie geometrică (izomeri cis-trans). Izomerie de catenă. Izomerie de funcţiune. Izomerie de poziţie. Proprietăţi fizice

Arene – nomenclatură, clasificare şi proprietăţi fizice

Hidrocarburi aromatice. Structuri de rezonanţă (structuri limită). Benzenul. Modelul Kékulé. Structura inelului benzenic. Caracter aromatic. Clasificarea arenelor. Nomenclatură. Poziţiile orto-, meta-, şi para-. Proprietăţi fizice. 

Arene – adiţie la nucleul aromatic, reacţii la catena laterală

Reacţia de hidrogenare a benzenului, a naftalinei şi a antracenului. Reacţii caracteristice catenei laterale – halogenarea şi oxidarea. Poziţia benzilică. Oxidare blândă şi oxidare energică. 

Structura compuşilor organici – formule moleculare şi formule structurale

Structură chimică. Analiza elementală. Determinarea formulei procentuale, a formulei brute şi a formulei moleculare (exemple de calcul). Formule structurale: formule de proiecţie, formule de proiecţie restrânse (plane). Izomerie. Izomeri geometrici (izomeri cis-trans). 

Reacţii de halogenare

Halogenarea prin reacţii de substituţie – halogenarea alcanilor, halogenarea în poziţie alilică, halogenarea în poziţie benzilică, halogenarea nucleului aromatic. Halogenarea prin reacţii de adiţie – adiţia halogenilor la alchene, adiţia halogenilor la alchine, adiţia halogenilor la alcadiene, adiţia halogenilor la benzen, adiţia hidracizilor la alchene, adiţia hidracizilor la alchine.

Alcooli – metanol, etanol, glicerină.

Clasificarea compuşilor organici cu funcţiuni. Alcool. Grupa funcţională hidroxil. Nomenclatură. Clasificarea alcoolilor. Structură. Proprietăţi fizice. Metanol şi etanol – acţiune biologică. Obţinerea etanolului – fermentaţia alcoolică. Glicerina, trinitratul de glicerină. Dinamita şi Premiile Nobel.

Grăsimi

Acizii graşi saturaţi. Acizi graşi nesaturaţi. Trigliceride simple şi mixte. Grăsimi saturate. Grăsimi nesaturate. Grăsimi mononesaturate. Omega 3. Grăsimi trans. Acţiunea grăsimilor asupra organismului uman. 

Alcooli – proprietăţi chimice

Caracteristicile grupei funcţionale hidroxil. Reacţia cu metalele alcaline. Reacţia de deshidratare (eliminarea apei). Reactivitatea alcoolilor în funţie de structură. Deshidratarea intramoleculară şi deshidratarea intermoleculară a alcoolilor. Obţinerea eterilor. Oxidarea alcoolilor – oxidarea blândă şi oxidarea energică. Reacţia de esterificare – esteri organici şi esteri anorganici. 

Fenoli

Clasificarea fenolilor. Nomenclatură. Caracteristicile grupei hidroxil fenolice. Proprietăţi fizice. Proprietăţi chimice – reacţii specifice grupei hidroxil şi reacţii specifice nucleului aromatic. Reacţia cu metalele alcaline. Reacţia cu hidroxizii alcalini. Reacţii de substituţie la nucleul aromatic – reacţia de sulfonare şi reacţia de nitrare a fenolului. Aplicaţii practice. 

Derivaţi halogenaţi – proprietăţi chimice

Derivaţi halogenaţi cu reactivitate normală, derivaţi halogenaţi cu reactivitate mărită şi derivaţi halogenaţi cu reactivitate scăzută. Reacţii de substituţie – reacţia de hidroliză, reacţia cu cianurile alcaline. Reacţia de dehidrohalogenare (de eliminare a hidracidului). Regula lui Zaiţev. 

Amine

Clasificarea şi nomenclatura aminelor. Caracteristicile grupei funcţionale amino. Proprietăţi fizice. Caracterul bazic al aminelor. Amine aromatice. Reacţii de substituţie. Reacţii de alchilare. Obţinerea sărurilor de arendiazoniu. Aplicaţii practice. 

Compuşi carbonilici

Grupa funcţională carbonil. Aldehide şi cetone. Nomenclatura aldehidelor. Nomenclatura cetonelor. Proprietăţi fizice. Reacţii de adiţie – adiţia hidrogenului. Reacţii de oxidare. Aplicaţii practice. 

Zaharide – produşi de policondensare ai monozaharidelor

Zaharoza – carcateristici şi aplicaţii practice. Zahăr rafinat şi zahăr nerafinat. Amidonul. Amiloza şi amilopectina. Surse de amidon. Fotosinteza. Celuloza. Surse de celuloză. Proprietăţi şi aplicaţii practice. 

Proteine

Aminoacizi – structură şi nomenclatură. Peptide şi polipeptide. Reacţia de policondensare a aminoacizilor. Legătura peptidică. Clasificarea proteinelor. Funcţii. Proprietăţi fizice. Proteine simple şi proteine conjugate. Grupe prostetice. Denaturarea proteinelor. Factori denaturanţi. 

Aria dreptunghiului

Formula pentru arie dreptunghi. Exercițiu cu aria unui dreptunghi.

Aria cercului (discului); Aria sectorului de cerc

Formula de calcul pentru aria cercului. Aria discului. Aria sectorului de cerc. Exemplu de calcul pentru aria cercului.

Aminoacizi

Proteine, peptide, aminoacizi. Legătură peptidică, rest de aminoacid. Cei 20 de aminoacizi naturali. Structura aminoacizilor. Sistemul D, L. Aminoacizii - seria sterică L. Reacţii stereospecifice. Proprietăţi chimice ale aminoacizilor. Amfion (formă dipolară). Clasificarea aminoacizilor în funcţie de polaritatea radicalului hidrocarbonat. Caracterul amfoter al aminoacizilor. Soluţii tampon. 

Proteine - structura primară

Proteine - polimeri ai aminoacizilor. Policondensarea aminoacizilor. Hidroliza proteinelor. Structura proteinelor. Structura primară - secvenţa resturilor de aminoacizi. Corelaţia structură - funcţie. Conformaţie. Legătura peptidică - proprietăţi.

Proteine - structura secundară, terţiară şi cuaternară

Structura secundară - helix α, foi pliate β, structuri secundare nedefinite. Orientarea în spaţiu a proteinelor. Interacţiuni intramoleculare care stabilizează structura secundară. Structura terţiară. Interacţiuni care stabilizează structura terţiară a proteinelor. Protomeri. Structura cuaternară. Clasificarea proteinelor în funcţie de structură. Denaturarea proteinelor. 

Acizi nucleici - ADN, ARN, codul genetic

Structura de dublu helix a ADN-ului. Perechi de baze complementare în ADN şi perechi de baze complementare in ARN. Secvenţa mononucleotidelor. ARN mesager, ARN de transport, ARN ribozomal. Sinteza proteinelor - transcriere, traducere. Cod genetic, codon, genă, universalitatea codului genetic. 

Unități de măsură pentru lungimi. Transformări.

Unități de masură pentru lungime. Metrul. Multiplii și submultiplii metrului.

Legea lui Hess. Entalpia de formare standard.

Termochimie. Variaţia entalpiei în reacţiile endoterme. Variaţia entalpiei în reacţiile exoterme. Legea aditivităţii căldurilor de reacţie – Legea lui Hess. Condiţii standard de reacţie. Entalpia molară de formare standard. 

Căldura de combustie

Combustie. Tipuri de combustibili. Entalpia de combustie standard. Ardere completă şi ardere incompletă. Căldura de combustie. Puterea calorică. Condiţii normale pentru măsurarea puterii calorice. Putere calorică inferioară şi putere calorică superioară. 

Viteza de reacţie

Cinetica chimică – definiţie. Viteza medie de reacţie. Variaţia concentraţiei reactanţilor şi a produşilor de reacţie în timp. Exemplu de calcul pentru viteza medie de reacţie. Clasificarea reacţiilor chimice în funcţie de viteza de reacţie. Reacţii rapide. Reacţii cu viteză moderată. Reacţii lente. Măsurarea vitezei de reacţie. 

Legea vitezei de reacţie

Viteza de reacţie. Variaţia vitezei de reacţie în funcţie de concentraţia reactanţilor şi în funcţie de concentraţia produşilor. Legea vitezei de reacţie. Expresia matematică a vitezei de reacţie. Constanta vitezei de reacţie. Ordine parţiale de reacţie. Ordin total de reacţie. Ordine parţiale de reacţie vs coeficienţi stoechiometrici. 

Influenţa suprafeţei de contact şi a temperaturii asupra vitezei de reacţie

Factorii care influenţează viteza de reacţie. Influenţa suprafeţei de contact asupra vitezei de reacţie. Influenţa temperaturii asupra vitezei de reacţie. Dependenţa constantei de viteză de temperatură. Relaţia lui Arrhenius. Semnificaţia matematică a elementelor din relaţia lui Arrhenius. Determinarea energiei de activare. Metoda grafică de determinare a energiei de activare. 

Influenţa catalizatorilor asupra vitezei de reacţie

Catalizatori – definiţie şi mod de funcţionare. Reprezentarea grafică a energiei de activare pentru o reacţie necatalizată şi o reacţie catalizată. Etapa determinantă de viteză. Reacţii catalitice. Proprietăţile catalizatorilor - activitatea catalitică, selectivitatea. Promotorii şi otrăvurile. Tipuri de reacţii catalitice –reacţii omogene, eterogene şi enzimatice. Suport catalitic. Inhibitori. 

Aplicaţii

Timp de înjumătăţire. Unităţi de măsură pentru constanta de viteză. Exemple de calcul. 

Operații cu numere naturale. Împărțirea

Împărțirea numerelor naturale. Împărțirea exactă (cu rest zero) a două numere naturale. Împărțirea cu rest diferit de zero a două numere naturale. Enunțarea teoremei împărțirii cu rest. 

Divizor. Multiplu. Noțiuni introductive

Divizori ai unui număr natural. Multiplii unui număr natural.

Operația de logaritmare, calcule cu logaritmi

Logaritmarea unei expresii, calcule cu logaritmi. Restrângerea unor expresii folosind proprietățile logaritmilor.

Simbolul Sigma și calculul unor sume

Scrierea unor sume restrâns cu ajutorul simbolului Sigma. Proprietățile simbolului Sigma. Calculul unor sume, demonstație prin inducție matematică. Metoda coeficienților nedeterminați.

Aria triunghiului- formula lui Heron

Aria triunghiului oarecare folosind formula lui Heron.

Funcția exponențială

Noțiunea de creștere exponențială, descreștere exponențială. Funcția exponențială și proprietățile acesteia. Grafice de funcții exponențiale.

Lege de compoziţie internă

Lege de compoziţie pe o mulţime. 

Operaţii cu polinoame (3)

Împărţirea polinoamelor scrise sub formă algebrică. Teorema împărţirii cu rest.

Împărţirea unui polinom la X-a. Schema lui Horner

Împărţirea unui polinom la X-a. Schema lui Horner.

Divizibilitatea polinoamelor

Divizibilitatea polinoamelor. Proprietăţile relaţiei de divizibilitate. Polinoame asociate în divizibilitate.

Dobânda simplă

Formula de calcul pentru dobănda simplă.

Introducere în HTML

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

Paragrafe HTML

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

Linkuri HTML

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

Tabele HTML

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

HTML Responsive Web Design

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



 

Formulare HTML

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

HTML Tipuri Input

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

HTML Atribute Input

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

Elemente semantice în HTML5

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

HTML APIs

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

Stocare Web în HTML5

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

HTML5 Web Workers

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

CSS Fundaluri

Proprietățile de fundal CSS sunt utilizate pentru a defini efectele de fundal pentru elemente.
Proprietăți de fundal CSS: culoare de fundal, imagine de fundal, fundal repetare, background-attachment, background-position.
Culoare de fundal CSS ( CSS background-color).
Proprietatea de culoare de fundal specifică culoarea de fundal a unui element.
Cu CSS, o culoare este cel mai des specificată de: un nume de culoare valid - precum „roșu”, o valoare HEX - ca „# ff0000”, o valoare RGB - ca „rgb (255,0,0)”.
Imagine de fundal CSS (CSS background-image)
Proprietatea de fundal imagine specifică o imagine pe care să o folosească ca fundal al unui element.
În mod implicit, imaginea este repetată, astfel încât acoperă întregul element.
Când utilizați o imagine de fundal, utilizați o imagine care nu perturba textul.
Repetare de fundal CSS (CSS background-repeat)
În mod implicit, proprietatea imaginii de fundal repetă o imagine atât pe orizontală cât și pe verticală.
Unele imagini trebuie repetate doar pe orizontală sau vertical sau vor arăta ciudat, astfel:
Pentru a repeta o imagine pe verticală, setați background-repeat: repeat-y;
Fundal CSS-repetare: nu se repetă (CSS background-repeat: no-repeat)
Afișarea imaginii de fundal o singură dată este, de asemenea, specificată de proprietatea background-repeat.
În exemplul de mai sus, imaginea de fundal este plasată în același loc cu textul. Vrem să schimbăm poziția imaginii, astfel încât să nu deranjeze prea mult textul.
Poziția de fundal CSS (CSS background-position).
Proprietatea poziție fundal este utilizată pentru a specifica poziția imaginii de fundal.
Atasament de fundal CSS (CSS background-attachment).
Proprietatea de atașare de fundal specifică dacă imaginea de fundal trebuie să se deruleze sau să fie fixată (nu va defila cu restul paginii).
Fundal CSS - proprietatea shorthand
Pentru a scurta codul, este de asemenea posibil să specificați toate proprietățile de fundal într-o singură proprietate. Aceasta se numește o proprietate shorthand.
Proprietatea shorthand pentru fundal este fundal.
Când folosiți proprietatea shorthand ordinea valorilor proprietății este:
background-color
background-image
background-repeat
background-attachment
background-position
Nu contează dacă lipsește una din valorile proprietății, atât timp cât celelalte sunt în această ordine.
background - Setează toate proprietățile fundalului într-o singură declarație
background-attachment - Setează dacă o imagine de fundal este fixă sau defilează cu restul paginii
background-clip - Specifică zona de pictură a fundalului
background-color - Setează culoarea de fundal a unui element
background-image - Setează imaginea de fundal pentru un element
background-origin - Specifică unde este / sunt poziționate imaginile de fundal
background-position - Setează poziția de pornire a unei imagini de fundal
background-repeat - Setează modul în care se va repeta o imagine de fundal
background-size - Specifică dimensiunea imaginii de fundal

CSS Height și Width

Proprietățiile height și width sunt utilizate pentru a seta înălțimea și lățimea unui element.
Proprietățiile height și width nu includ padding, borders sau margins. Stabilește înălțimea / lățimea (height/width) zonei din interiorul padding-ului, border-ului și marginii elementului.
Valori CSS înălțime / lățime (height/width)
Proprietățiile de înălțime și lățime (height/width) pot avea următoarele valori:
auto - Aceasta este implicită. Browserul calculează înălțimea și lățimea (height/width).
lenght - Definește înălțimea / lățimea (height/width) în px, cm etc.
% - Definește înălțimea / lățimea (height/width) în procente din blocul conținut.
inițial - Setează înălțimea / lățimea (height/width) la valoarea implicită.
inherit - Înălțimea / lățimea (height/width) vor fi moștenite de la valoarea sa parentală.
Nu uitați că proprietățiile de înălțime și lățime nu includ padding, borders sau margins! Ei setează înălțimea / lățimea zonei din interiorul paddingu-ului, border-ului și marginii elementului!
Setarea lățimii maxime (max-width).
Proprietatea max-width este utilizată pentru a seta lățimea maximă a unui element.
Lățimea maximă (max-width) poate fi specificată în valori de lungime, cum ar fi px, cm, etc., sau în procente (%) din blocul conținut sau setat pe niciunul (acesta este implicit. Înseamnă că nu există o lățime maximă).
Problema cu <div> de mai sus apare atunci când fereastra browserului este mai mică decât lățimea elementului (500px). Browserul apoi adaugă o pagină de defilare orizontală la pagină.
Folosind în schimb această lățime maximă (max-width), în această situație, veți îmbunătăți gestionarea browserului de la ferestrele mici.
Trageți fereastra browserului la o lățime mai mică de 500px, pentru a vedea diferența dintre cele două div-uri!
height - Setează înălțimea unui element.
max-height - Setează înălțimea maximă a unui element.
max-width - Setează lățimea maximă a unui element.
min-height - Setează înălțimea minimă a unui element.
min-width - Setează lățimea minimă a unui element.
width - Setează lățimea unui element.

CSS Text

Proprietatea de culoare este utilizată pentru a seta culoarea textului. Culoarea este specificată de:
un nume de culoare - ca „roșu”
o valoare HEX - ca „# ff0000”
o valoare RGB - ca „rgb (255,0,0)”
Consultați CSS Color Values pentru o listă completă a valorilor de culoare posibile.
Culoarea implicită a textului pentru o pagină este definită în selectorul body.
Aliniere text (Text Alignment).
Proprietatea text-align este utilizată pentru a seta alinierea orizontală a unui text.
Un text poate fi aliniat la stânga sau la dreapta, centrat sau justificat (left sau right, centered sau justified).
Când proprietatea de aliniere a textului este „justify”, fiecare linie este întinsă astfel încât fiecare linie să aibă lățimea egală, iar marginile stânga și dreapta sunt drepte (ca în reviste și ziare).
Decorarea textului (Text Decoration).
Proprietatea text-decoration este utilizată pentru a seta sau elimina decorațiunile din text.
Valoarea text-decoration: none; este adesea folosit pentru a elimina sublinierile din link-uri.
Nu este recomandat să subliniați textul care nu este o legătură, deoarece acest lucru încurcă cititorul.
Transformarea textului.
Proprietatea text-transform este utilizată pentru a specifica litere mari și minuscule (uppercase sau lowercase) într-un text.
Poate fi folosit pentru a transforma totul în litere mari sau minuscule (uppercase sau lowercase) sau pentru a valorifica prima literă a fiecărui cuvânt.
Indentare text (Text Indentation).
Proprietatea text-indent este utilizată pentru a specifica indentarea primei linii a unui text.
Spațiul dintre litere (Letter Spacing)
Proprietatea de spațiere a literelor (letter-spacing) este utilizată pentru a specifica spațiul dintre caracterele unui text.
Înălţimea liniei (Line Height).
Proprietatea line-height este utilizată pentru a specifica spațiul dintre linii.
Direcția textului (Text Direction).
Proprietatea direction este utilizată pentru a schimba direcția textului unui element.
Distanțarea cuvintelor (Word Spacing)
Proprietatea word-spacing a cuvintelor este utilizată pentru a specifica spațiul dintre cuvintele dintr-un text.
color - Setează culoarea textului.
direction -  Specifică direcția textului / direcția de scriere.
letter-spacing - Crește sau scade spațiul dintre caractere dintr-un text.
line-height - Setează înălțimea liniei.
text-align - Specifică alinierea orizontală a textului.
text-decoration - Specifică decorația adăugată la text.
text-indent - Specifică indentarea primei linii dintr-un bloc de text.
text-shadow - Specifică efectul umbre adăugat textului.
text-transform - Controlează capitalizarea textului.
text-overflow - Specifică modul în care conținutul revărsat care nu este afișat trebuie semnalat utilizatorului.
unicode-bidi - Se folosește împreună cu proprietatea de direcție pentru a seta sau returna dacă textul ar trebui să fie anulat pentru a accepta mai multe limbi din același document.
vertical-align - Setează alinierea verticală a unui element.
white-space - Specifică modul în care este gestionat spațiul alb din interiorul unui element.
word-spacing - Crește sau scade spațiul dintre cuvinte dintr-un text.

CSS Fonturi

Proprietățiile fontului CSS definesc font family, boldness, size și style of a text.
Familii de fonturi CSS (CSS Font Families).
În CSS, există două tipuri de nume de fonturi:
generic family - un grup de familii de fonturi cu aspect similar (cum ar fi „Serif” sau „Monospace”).
font family - o familie de fonturi specifică (cum ar fi „Times New Roman” sau „Arial”).
Font Family.
Familia de fonturi a unui text este setată cu proprietatea font-family.
Proprietatea font-family ar trebui să dețină mai multe nume de font ca sistem „fallback”. Dacă browserul nu acceptă primul font, încearcă următorul font și așa mai departe.
Începeți cu fontul dorit și terminați cu o familie generică (generic family), pentru a permite browserului să aleagă un font similar în familia generică (generic family), dacă nu sunt disponibile alte fonturi.
Dacă numele unei familii de fonturi este mai mult de un cuvânt, acesta trebuie să fie între ghilimele, cum ar fi: „Times New Roman”.
Mai multe familii de fonturi sunt specificate într-o listă separată de virgule.
Stilul fontului (Font Style)
Proprietatea font-style este utilizată mai ales pentru a specifica textul italic.
Această proprietate are trei valori:
normal - Textul este afișat normal.
italic - Textul este afișat cu caractere italice.
oblique - Textul este „aplecat” (oblic este foarte similar cu italic, dar mai puțin susținut).
Proprietatea font-size stabilește dimensiunea textului.
Posibilitatea de a gestiona dimensiunea textului este importantă în proiectarea web. Cu toate acestea, nu ar trebui să utilizați ajustări de dimensiune a fontului pentru a face ca paragrafele să arate ca titluri sau rubricile să pară paragrafe.
Utilizați întotdeauna etichetele HTML adecvate, cum ar fi <h1> - <h6> pentru titluri și <p> pentru paragrafe.
Valoarea font-size poate fi o dimensiune absolută sau relativă.
Dimensiune absolută:
Setează textul la o dimensiune specificată.
Nu permite utilizatorului să modifice dimensiunea textului în toate browserele (greșit din motive de accesibilitate).
Dimensiunea absolută este utilă atunci când dimensiunea fizică a ieșirii este cunoscută.
Mărime relativă:
Setează dimensiunea în raport cu elementele din jur.
Permite unui utilizator să modifice dimensiunea textului în browsere.
Dacă nu specificați o dimensiune a fontului, dimensiunea implicită pentru textul normal, cum ar fi alineatele, este 16px (16px = 1em).
Setarea dimensiunii fontului cu pixeli.
Setarea dimensiunii textului cu pixeli vă oferă un control complet asupra dimensiunii textului.
Dacă utilizați pixeli, puteți utiliza în continuare zoom tool pentru a redimensiona întreaga pagină.
Setați dimensiunea fontului cu Em
Pentru a permite utilizatorilor să redimensioneze textul (în meniul browserului), mulți dezvoltatori folosesc em în loc de pixeli.
Unitatea de dimensiuni em este recomandată de W3C.
1em este egal cu dimensiunea curentă a fontului. Dimensiunea implicită a textului în browsere este 16px. Deci, dimensiunea implicită de 1em este 16px.
Mărimea poate fi calculată de la pixeli la em folosind această formulă: pixeli / 16 = em.
Font Weight
Proprietatea font-weight specifică greutatea unui font:
Responsive Font Size
Mărimea textului poate fi setată cu o unitate vw, ceea ce înseamnă „viewport width”.
Astfel dimensiunea textului va urma dimensiunea ferestrei browserului:
Font Variant
Proprietatea font-variant specifică dacă un text ar trebui să fie afișat sau nu într-un font cu caractere mici.
Într-un font cu caractere mici, toate literele mici sunt convertite în litere mari. Cu toate acestea, literele majuscule convertite apar cu o dimensiune de font mai mică decât literele majuscule originale din text.
font - Setează toate proprietățile fontului într-o singură declarație.
font-family - Specifică familia de fonturi pentru text.
font-size - Specifică dimensiunea fontului textului.
font-style - Specifică stilul de font pentru text.
font-variant - Specifică dacă un text trebuie să fie afișat sau nu într-un font cu caractere mici.
font-weight - Specifică greutatea unui font.

CSS max-width

CSS Layout - width și max-width. 
Utilizarea width, max-width și margin: auto;
Așa cum am menționat în capitolul precedent; un element la nivel de block (block-level element) ocupă întotdeauna întreaga lățime disponibilă (se întinde spre stânga și spre dreapta, cât poate).
Setarea lățimii (width) unui element la nivel de bloc (block-level element)  va împiedica întinderea sa până la marginile containerului său. Apoi, puteți seta marginile la auto, pentru a centra orizontal elementul în containerul său. Elementul va prelua lățimea specificată, iar spațiul rămas va fi împărțit în mod egal între cele două margini.
Problema cu <div> de mai sus apare atunci când fereastra browserului este mai mică decât lățimea elementului. Browserul apoi adaugă o pagină de defilare orizontală la pagină.
Folosind în schimb această lățime maximă (max-width), în această situație, veți îmbunătăți gestionarea browserului de la ferestrele mici. Acest lucru este important atunci când faceți un site utilizabil pe dispozitive mici.

CSS Overflow

Proprietatea CSS overflow controlează ce se întâmplă cu conținutul prea mare pentru a se încadra într-o zonă.
CSS Overflow
Proprietatea de overflow specifică dacă trebuie să decupați conținutul sau să adăugați bare de defilare atunci când conținutul unui element este prea mare pentru a se încadra în zona specificată.
Proprietatea de overflow are următoarele valori:
visible (vizibil) - implicit. Depășirea nu este tăiată. Conținutul este redat în afara casetei elementului.
hidden (ascuns) - preaplinul este tăiat, iar restul conținutului va fi invizibil.
scroll (defilare) - overflow-ul este tăiat și este adăugată o bară de defilare pentru a vedea restul conținutului.
auto - Similar cu defilarea, dar adaugă bare de defilare doar atunci când este necesar.
Elementul overflow: visible (revărsat: vizibil)
În mod implicit, revărsarea este vizibilă (overflow: visible), ceea ce înseamnă că nu este tăiată și se redă în afara casetei elementului.
Elementul overflow: hidden (revărsat: ascuns)
Odată cu valoarea ascunsă (overflow: hidden), preluarea este tăiată, iar restul conținutului este ascuns.
Elementul overflow: scroll (revărsat: defilare)
Setând valoarea pentru a derula (overflow: scroll), revărsarea este decupată și este adăugată o bară de defilare pentru a derula în interiorul casetei. Rețineți că aceasta va adăuga o bară de defilare atât pe orizontală cât și pe verticală (chiar dacă nu aveți nevoie de ea).
Elementele overflow-x și overflow-y
Proprietățiile de overflow-x și overflow specifică dacă trebuie să schimbe overflow-ul de conținut doar orizontal sau și vertical (sau ambele):
overflow-x specifică ce trebuie făcut cu marginile stânga / dreapta ale conținutului.
overflow-y specifică ce trebuie făcut cu marginile de sus / de jos ale conținutului.
Toate proprietățiile CSS  de overflow:
overflow - Specifică ce se întâmplă dacă conținutul revărsă caseta unui element.
overflow-x - Specifică ce se poate face cu marginile stânga / dreapta ale conținutului dacă acesta revărsă zona de conținut a elementului.
overflow-y - Specifică ce trebuie făcut cu marginile de sus / de jos ale conținutului dacă acesta revărsă zona de conținut a elementului.

CSS Float

Proprietatea CSS float  specifică modul în care un element ar trebui să plutească (float).
Proprietatea CSS clear specifică ce elemente pot pluti  (float) lângă elementul șters și pe ce parte.
Proprietatea float
Proprietatea float este utilizată pentru poziționarea și formatarea conținutului, de ex. lăsați o imagine să plutească stânga spre text într-un container.
Proprietatea float poate avea una dintre următoarele valori:
left (stânga) - Elementul plutește în stânga containerului său.
right (dreapta) - Elementul plutește în dreapta containerului său.
none - Elementul nu plutește (va fi afișat acolo unde apare în text). Aceasta este implicită.
inherit (mostenire) - elementul moștenește valoarea float a părintelui său.
În cea mai simplă utilizare, proprietatea float poate fi utilizată pentru a înfășura text în jurul imaginilor.
Elementul float: right; (float: dreapta;).
Elementul float: left; (float: stânga;).
Elementul float: none;. 
Proprietatea clear
Proprietatea clear specifică ce elemente pot pluti (float) lângă elementul șters și pe ce parte.
Proprietatea clear poate avea una dintre următoarele valori:
none - Permite elemente plutitoare de ambele părți. Aceasta este implicită.
left (stânga) - Nu sunt permise elemente plutitoare în partea stângă.
right (dreapta) - Nu sunt permise elemente plutitoare în partea dreaptă.
both (ambele) - Nu sunt permise elemente plutitoare nici pe partea stângă, fie pe partea dreaptă.
inherit (mostenirea) - Elementul mosteneste valoarea clara a parintelui său.
Cel mai obișnuit mod de a utiliza proprietatea clear este după ce ați utilizat o proprietate float pe un element.
Când ștergeți floats, ar trebui să potriviți clear cu float: Dacă un element este float la stânga, atunci ar trebui să ștergeți la stânga. Elementul float va continua să plutească, dar elementul șters va apărea sub el pe pagina web.
The clearfix Hack
Dacă un element este mai înalt decât elementul care îl conține și este float, acesta se va „overflow” în afara containerului său.
overflow: auto clearfix  funcționează bine atâta timp cât sunteți în stare să păstrați controlul asupra margin-ului și a padding-ului (altfel puteți vedea bare de defilare). Totuși, noul clearfix hack however este mai sigur de utilizat și următorul cod este folosit pentru majoritatea paginilor web.
Grid of Boxes / Equal Width Boxes
Ce este box-sizing?
Puteți crea cu ușurință trei cutii plutitoare (floating boxes) una lângă alta. Cu toate acestea, când adăugați ceva care mărește lățimea fiecărei cutii (de exemplu, padding sau borders), caseta se va rupe. Proprietatea de dimensionare a cutiei ne permite să includem padding și border în lățimea totală (și înălțimea) a cutiei, asigurându-ne că padding rămâne în interiorul cutiei și că nu se rupe.
Grila casetelor poate fi de asemenea folosită pentru a afișa imagini side by side:
Cutii de înălțime egală (Equal Height Boxes)
Este bine dacă puteți garanta că casetele vor avea întotdeauna aceeași cantitate de conținut în ele. Dar de multe ori, conținutul nu este același. Dacă încercați exemplul de mai sus pe un telefon mobil, veți vedea că conținutul celei de-a doua cutii va fi afișat în afara casetei. Acesta este locul în care CSS3 Flexbox vine la îndemână - deoarece poate întinde automat cutiile pentru a fi la fel de lungă ca cea mai lungă casetă:
Flexbox nu este acceptat în Internet Explorer 10 sau în versiunile anterioare.
Meniu de navigatie (Navigation Menu)
Utilizați float cu o listă de hyperlinkuri pentru a crea un meniu orizontal.
Exemplu de dispunere web (Web Layout Example)
Este, de asemenea, obișnuit să faceți web layouts folosind proprietatea float.
Toate proprietățiile CSS float.
box-sizing Defineste modul în care se calculează lățimea și înălțimea unui element: trebuie să includă sau nu borduri
clear Specifica ce elemente pot pluti lângă elementul șters și pe ce parte
float Specifică modul în care un element trebuie să plutească
overflow Specifică ce se întâmplă dacă conținutul revărsă caseta unui element
overflow-x Specifică ce se poate face cu marginile stânga / dreapta ale conținutului dacă acesta revărsă zona de conținut a elementului
overflow-y Specifică ce trebuie făcut cu marginile de sus / de jos ale conținutului dacă acesta revărsă zona de conținut a elementului

CSS Pseudo-elemente

Un pseudo-element CSS este utilizat pentru a stabili părțile specificate ale unui element.
De exemplu, poate fi folosit pentru:
Stilizarea primei litere sau linia unui element.
Inserarea de conținut înainte sau după, conținutul unui element.
Observați notația dublă colon - :: first-line versus :first-line
Dublul colon a înlocuit notația cu un singur colon pentru pseudo-elemente în CSS3. Aceasta a fost o încercare din partea W3C de a distinge pseudo-clasele și pseudo-elementele.
Sintaxa cu un singur colon a fost folosită atât pentru pseudo-clase, cât și pentru pseudo-elemente în CSS2 și CSS1.
Pseudo-element :: first-line este utilizat pentru a adăuga un stil special la prima linie a unui text.
Pseudo-elementul :: first-line poate fi aplicat numai elementelor la nivel de block.
Următoarele proprietăți se aplică pentru pseudo-element :: first-line: font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear
Pseudo-elementul :: first-letter este utilizat pentru a adăuga un stil special la prima literă a unui text.
Pseudo-elementul :: first-letter poate fi aplicat numai elementelor la nivel de block.
Următoarele proprietăți se aplică pentru pseudo-elementul :: first-letter: font properties, color properties , background properties, margin properties, padding properties, border properties, text-decoration, vertical-align (only if "float" is "none"), text-transform, line-height, float, clear
Pseudo-elemente și clase CSS
Pseudo-elementele pot fi combinate cu clase CSS.
Pseudo-elemente multiple
Mai multe pseudo-elemente pot fi, de asemenea, combinate.
Pseudo-elementul ::before poate fi utilizat pentru a insera un anumit conținut înainte de conținutul unui element.
Pseudo-elementul ::after poate fi utilizat pentru a insera un anumit conținut după conținutul unui element.
Pseudo-element ::selection se potrivește cu porțiunea unui element selectat de un utilizator.
Următoarele proprietăți CSS pot fi aplicate la ::selection: culoare, fundal, cursor și contur (color, background, cursor, și outline).
Toate Pseudo-elementele CSS:
::after p ::after - Inserați ceva după conținutul fiecărui element <p>
::before p ::before - Introduceți ceva înainte de conținutul fiecărui element <p>
::first letter p ::first letter -  Selectează prima literă a fiecărui element <p>
::first-line p ::first-line - Selectează prima linie a fiecărui element <p>
::selection p ::selection - Selectează porțiunea unui element selectat de un utilizator
Toate Pseudo-clasele CSS:
:active a:active - Selectează legătura activă
:checked :input checked - Selectează fiecare element <input> bifat
:disabled :input disabled - Selectează fiecare element dezactivat <input>
:empty p:empty - Selectează fiecare element <p> care nu are copii
:enabled input:enabled - Selectează fiecare element activat <input>
:first-child p:first-child  - Selectează toate elementele <p> care este primul copil al părintelui său
:first-of-type p:first-of-type - Selectează fiecare element <p> care este primul element <p> al părintelui său
:focus input:focus - Selectează elementul <input> care are focus
:hover a:hover - Selectează linkurile peste mouse
:in-range input:in-range - Selectează elementele <input> cu o valoare dintr-un interval specificat
:invalid :input invalid - Selectează toate elementele <input> cu o valoare nevalidă
:lang(language)    p:lang(it) -  Selectează fiecare element <p> cu o valoare a atributului lang începând cu „it”
:last-child    p:last-child - Selectează toate elementele <p> care este ultimul copil al părintelui său
:last-of-type    p:last-of-type - Selectează fiecare element <p> care este ultimul element <p> al părintelui său
:link a:link - Selectează toate linkurile nevizitate
:not (selector) :not (p) - Selectează fiecare element care nu este un element <p>
:nth-child (n) p:nth-child (2) - Selectează fiecare element <p> care este al doilea copil al părintelui său
:nth-last-child (n) p:nth-last-child (2) - Selectează fiecare element <p> care este al doilea copil al părintelui său, numărând de la ultimul copil
:nth-last-of-type (n) p:nth-last-of-type (2) - Selectează fiecare element <p> care este al doilea element <p> al părintelui său, numărând de la ultimul copil
:nth-of-type (n) p:nth-of-type (2) - Selectează fiecare element <p> care este al doilea element <p> al părintelui său
:only-of-type p:only-of-type - Selectează fiecare element <p> care este singurul element <p> al părintelui său
:only-child p:only-child - Selectează fiecare element <p> care este singurul copil al părintelui său
:optional  input:optional - Selectează elementele <input> fără atribut "necesar"
:out-of-range    input:out-of-range - Selectează elementele <input> cu o valoare în afara unui interval specificat
:read-only  input:read-only - Selectează elementele <input> cu atributul „readonly” specificat
:read-write input:read-write - Selectează elementele <input> fără atribut "readonly"
:required  input:required - Selectează elementele <input> cu atributul „necesar” specificat
:root root - Selectează elementul rădăcină al documentului
:target #news:target - Selectează elementul #news activ curent (faceți clic pe o adresă URL care conține numele ancorării)
:valid  input:valid - Selectează toate elementele <input> cu o valoare valabilă
:visited  a:visited - Selectează toate linkurile vizitate

CSS Galerie de imagini

CSS poate fi utilizat pentru a crea o galerie de imagini.

 

CSS Contoare

Contoare CSS
Contoarele CSS sunt „variabile” menținute de CSS ale căror valori pot fi incrementate prin reguli CSS (pentru a urmări de câte ori sunt utilizate). Contoarele vă permit să ajustați aspectul conținutului în funcție de plasarea acestuia în document.
Numerotare automată cu contoare
Contoarele CSS sunt ca „variabile”. Valorile variabilei pot fi incrementate prin reguli CSS (care vor urmări de câte ori sunt utilizate).
Pentru a lucra cu contoarele CSS vom folosi următoarele proprietăți:
counter-reset - Creează sau resetează un contor
counter-increment - Crește o valoare a contorului
content - Inserează conținut generat
counter() or counters() function - Adăugă valoarea unui contor la un element
Pentru a utiliza un contor CSS, acesta trebuie mai întâi creat cu counter-reset.
Creează un contor pentru pagină (în selectorul body), apoi crește valoarea contorului pentru fiecare element <h2> și adaugă "Secțiunea <valoarea contorului>:" la începutul fiecărui element <h2>.
Nesting Counters
Creează un contor pentru pagină (section) și un contor pentru fiecare element <h1> (subsection). Contorul „section” va fi contorizat pentru fiecare element <h1> cu „secțiunea <valoarea secțiunii contorului>.”, Iar contorul „subsection” va fi contorizat pentru fiecare element <h2> cu „<valoarea contorului de secțiuni >. <valoarea contorului de subsecțiuni> ".
Un contor poate fi de asemenea util pentru a crea liste conturate, deoarece o nouă instanță a unui contor este creată automat în elementele copil. Folosim funcția counters()  pentru a insera o șir între diferitele niveluri de nested counters.

CSS Unități

Unități CSS
CSS are mai multe unități diferite pentru exprimarea unei lungimi.
Multe proprietăți CSS iau valori „de lungime” (lenght), cum ar fi lățimea, marja, căptușirea, dimensiunea fontului etc (width, margin, padding, font-size).
Lungimea este un număr urmat de o unitate de lungime, cum ar fi 10px, 2em etc.
Un whitespace nu poate apărea între număr și unitate. Cu toate acestea, dacă valoarea este 0, unitatea poate fi omisă.
Pentru unele proprietăți CSS, lungimile negative sunt permise.
Există două tipuri de unități de lungime: absolută și relativă.
Lungimi absolute (Absolute Lengths)
Unitățile de lungime absolută sunt fixe și o lungime exprimată în oricare dintre acestea va apărea exact ca acea dimensiune.
Unitățile de lungime absolută nu sunt recomandate pentru utilizare pe ecran, deoarece dimensiunile ecranului diferă atât de mult. Cu toate acestea, pot fi utilizate dacă este cunoscut suportul de ieșire, cum ar fi pentru aspectul tipăririi.
cm  -   centimetri
mm -   millimetri
in  -  inci (1in = 96px = 2.54cm)
px *  -  pixeli (1px = 1/96th of 1in)
pt  -  puncte (1pt = 1/72 of 1in)
pc  -  picas (1pc = 12 pt)
* Pixelii (px) sunt în raport cu dispozitivul de vizualizare. Pentru dispozitivele cu valoare redusă, 1px este un pixel de dispozitiv (punct) al afișajului. Pentru imprimante și ecrane de înaltă rezoluție, 1px implică mai mulți pixeli de dispozitiv.
Lungimi relative (Relative Lengths)
Unitățile de lungime relativă specifică o lungime relativă la o altă proprietate lungime. Unitățile de lungime relativă scalează mai bine între diferite medii de redare.
em - În raport cu dimensiunea fontului elementului (2em înseamnă de 2 ori dimensiunea fontului curent)
ex - În raport cu înălțimea x a fontului curent (rar folosit)
ch - În raport cu lățimea "0" (zero)
rem - Relativ la dimensiunea fontului elementului rădăcină
vw - În raport cu 1% din lățimea afișajului *
vh - În raport cu 1% din înălțimea viewport *
vmin - În raport cu 1% din dimensiunea mai mică a portofoliului *
vmax - În raport cu 1% din dimensiunea mai mare a portofoliului
% - În raport cu elementul părinte
Unitățile em și rem sunt practice în crearea unui aspect scalabil perfect!
* Viewport = dimensiunea ferestrei browserului. Dacă viewport are 50cm lățime, 1vw = 0,5cm.
Asistență browser (Browser Support)
Numerele din tabel specifică prima versiune a browserului care acceptă integral unitatea de lungime.

CSS Fundaluri multiple

În acest capitol veți învăța cum să adăugați mai multe imagini de fundal la un element.
Proprietățiile background-size, background-origin, background-clip.
CSS vă permite să adăugați mai multe imagini de fundal pentru un element, prin proprietatea background-image.
Diferitele imagini de fundal sunt separate prin virgule, iar imaginile sunt stivuite una peste alta, unde prima imagine este cea mai apropiată de privitor.
Mai multe imagini de fundal pot fi specificate utilizând fie proprietățiile de fundal individuale (ca mai sus), fie proprietatea background shorthand.
CSS Background Size
Proprietatea CSS background-size vă permite să specificați dimensiunea imaginilor de fundal.
Mărimea poate fi specificată în lungimi, procente (lengths, percentages) sau utilizând unul dintre cele două cuvinte cheie: conține sau acoperire(contain sau cover).
Redimensionare background image la o dimensiune mult mai mică decât imaginea originală (folosind pixeli).
Celelalte două valori posibile pentru background-size sunt contain și cover.
Cuvântul cheie contain scalează imaginea de fundal (scales the background image) pentru a fi cât mai mare (dar atât lățimea cât și înălțimea sa trebuie să se încadreze în zona conținutului). Ca atare, în funcție de proporțiile imaginii de fundal (background image) și de zona de poziționare a fundalului, pot exista anumite zone ale fundalului care nu sunt acoperite de imaginea de fundal (background image).
Cuvântul cheie cover scalează imaginea de fundal (scales the background image) astfel încât zona de conținut să fie acoperită complet de imaginea de fundal (background image) (atât lățimea cât și înălțimea acesteia sunt egale sau depășesc aria conținutului). Ca atare, este posibil ca unele părți ale imaginii de fundal (background image) să nu fie vizibile în zona de poziționare a fundalului.
Definirea dimensiunilor mai multor imagini de fundal (Define Sizes of Multiple Background Images)
Proprietatea background-size acceptă, de asemenea, mai multe valori pentru dimensiunea fundalului (folosind o listă separată de virgule), atunci când lucrați cu mai multe fundaluri.
Full Size Background Image
Acum vrem să avem o imagine de fundal (background image) pe un site web care să acopere întreaga fereastră a browserului în orice moment.
Cerințele sunt următoarele:
Completează întreaga pagină cu imaginea (fără spațiu alb).
Scalați imaginea după caz.
Centrați imaginea pe pagina.
Nu provocați bare de defilare (scrollbars).
Hero Image
De asemenea, puteți utiliza diferite proprietăți de fundal (background) pe un <div> pentru a crea hero image (o imagine mare cu text) și să o plasați acolo unde doriți.
Proprietatea CSS background-origin
Proprietatea CSS background-origin specifică unde este poziționată imaginea de fundal.
Proprietatea are trei valori diferite:
border-box - imaginea de fundal pornește din colțul din stânga sus al border-ului.
padding-box - (implicit) imaginea de fundal pornește din colțul din stânga sus al marginii padding-ului.
content-box - imaginea de fundal pornește din colțul din stânga sus al conținutului.
Proprietatea CSS background-clip
Proprietatea CSS background-clip specifică zona de pictură a fundalului.
Proprietatea are trei valori diferite:
border-box - (implicit) fundalul este pictat pe marginea exterioară a border-ului.
padding-box - fundalul este vopsit până la marginea exterioară a padding-ului.
content-box - fundalul este pictat în caseta de conținut.
Proprietăți CSS background avansate:
background - O proprietate shorthand pentru setarea tuturor proprietăților de fundal într-o singură declarație
background-clip - Specifică zona de pictură a fundalului
background-image - Specifică una sau mai multe imagini de fundal pentru un element
background-origin - Specifică unde este / sunt poziționate imaginile de fundal
background-size - Specifică dimensiunea imaginii de fundal

CSS Fonturi Web

Fonturi Web CSS
Regula CSS @ font-face
Fonturile web permit proiectanților web să utilizeze fonturi care nu sunt instalate pe computerul utilizatorului.
Când a-ți găsit / cumpărat fontul pe care doriți să-l utilizați, includeți doar fișierul font pe serverul dvs. web, iar acesta va fi descărcat automat la nevoie.
Fonturile dvs. proprii sunt definite în regula CSS @font-face.
Diferite formate de fonturi (Different Font Formats)
Fonturi TrueType (TTF)
TrueType este un standard de font dezvoltat la sfârșitul anilor 1980, de Apple și Microsoft. TrueType este cel mai frecvent format de font atât pentru sistemele de operare Mac OS cât și pentru Microsoft Windows.
Fonturi OpenType (OTF)
OpenType este un format pentru fonturile computerului scalabile. A fost construit pe TrueType și este marcă înregistrată a Microsoft. Fonturile OpenType sunt utilizate astăzi frecvent pe majore platforme de calculatoare.
Web Open Font Format (WOFF)
WOFF este un format de font folosit pentru paginile web. A fost dezvoltat în 2009 și este acum o recomandare a W3C. WOFF este în esență OpenType sau TrueType cu compresie și metadate suplimentare. Scopul este de a sprijini distribuirea fontului de la un server la un client printr-o rețea cu restricții de lățime de bandă.
Web Open Font Format (WOFF 2.0)
Fontul TrueType / OpenType care asigură o compresie mai bună decât WOFF 1.0.
Fonturi / forme SVG
Fonturile SVG permit SVG-ului să fie utilizat ca glife la afișarea textului. Specificația SVG 1.1 definește un modul de font care permite crearea de fonturi într-un document SVG. Puteți aplica CSS și în documentele SVG, iar regula @ font-face poate fi aplicată textului în documente SVG.
Fonturi OpenType încorporate (EOT)
Fonturile EOT sunt o formă compactă de fonturi OpenType proiectate de Microsoft pentru a fi utilizate ca fonturi încorporate pe paginile web.
Asistență browser pentru formate de fonturi
IE: formatul fontului funcționează numai atunci când este setat să fie „instalabil”.
Firefox: Nu este acceptat implicit, dar poate fi activat (trebuie să setați un steag la „true” pentru a utiliza WOFF2).
Utilizarea Bold Text
Trebuie să adăugați o altă regulă @font-face care conține descriptori pentru text bold
Descriptori de fonturi CSS (CSS Font Descriptors)

CSS Transformări 2D

Transformări 2D CSS
Transformările CSS vă permit să vă deplasați, să rotiți, să scalați și să înlăturați elemente.
Proprietăți CSS: transform.
Asistență browser (Browser Support)
Numerele din tabel specifică prima versiune a browserului care acceptă integral proprietatea.
Prefixuri specifice browserului
Unele browsere mai vechi au nevoie de prefixe specifice (-ms- sau -webkit-) pentru a înțelege proprietățile de transformare 2D.
CSS Metode de transformare 2D
Cu proprietatea de transformare CSS puteți utiliza următoarele metode de transformare 2D: translate(), rotate(), scaleX(), scaleY(), scale(), skewX(), skewY(), skew(), matrix()
Metoda translate() mută un element din poziția sa curentă (în funcție de parametrii indicați pentru axa X și axa Y).
Metoda rotate() roteste un element în sensul acelor de ceasornic sau în sens contrar acelor de ceasornic, în conformitate cu un anumit grad.
Utilizarea valorilor negative va roti elementul în sensul acelor de ceasornic.
Metoda scale() crește sau scade dimensiunea unui element (în funcție de parametrii dați pentru lățime și înălțime).
Metoda scaleX() crește sau scade lățimea unui element.
Metoda scaleY() crește sau scade înălțimea unui element.
Metoda skewX() frânează un element de-a lungul axei X cu unghiul dat.
Metoda skewY() frânează un element de-a lungul axei Y de unghiul dat.
Metoda skew() frânează un element de-a lungul axelor X și Y de unghiurile date.
Metoda matrix() combină toate metodele de transformare 2D într-una.
Metoda matrix() ia șase parametri, care conțin funcții matematice, ceea ce vă permite să rotiți, să scalați, să mutați (să translați) și să înlăturați elemente.
Parametrii sunt următorii: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Proprietăți de transformare CSS
transform - Aplică o transformare 2D sau 3D la un element.
transform-origin - Vă permite să schimbați poziția asupra elementelor transformate.
CSS Metode de transformare 2D
matrix(n, n, n, n, n, n) - Definește o transformare 2D, folosind o matrice de șase valori
translate(x, y) -  Definește o transformare 2D, mutând elementul de-a lungul axei X și Y
translateX(n) - Definește o transformare 2D, mutând elementul de-a lungul axei X
translateY(n) - Definește o transformare 2D, mutând elementul de-a lungul axei Y
scale(x, y) - Definește o transformare la scară 2D, modificând lățimea și înălțimea elementelor
scaleX(n) - Definește o transformare la scară 2D, modificând lățimea elementului
scaleY(n) - Definește o transformare la scară 2D, schimbând înălțimea elementului
rotate(angle) - Definește o rotație 2D, unghiul este specificat în parametru
skew(angle x, angle y) - Definește o transformare în 2D de-a lungul axei X și Y
skewX(angle) - Definește o transformare în 2D de-a lungul axei X
skewY(angle) - Definește o transformare în 2D de-a lungul axei Y

CSS Tooltip

CSS Tooltip
Creați tooltips cu CSS.
Un tooltip este adesea folosit pentru a specifica informații suplimentare despre ceva când utilizatorul mută indicatorul mouse-ului peste un element.
Basic Tooltip
Creați un tooltip care apare când utilizatorul mută mouse-ul peste un element.
HTML: Utilizați un element container (cum ar fi <div>) și adăugați-i clasa „tooltip”. Când utilizatorul trece cu mouse-ul peste acest <div>, va afișa textul de tip tooltip.
Textul de tip tooltip este plasat în interiorul unui element inline (cum ar fi <span>) cu class = "tooltiptext".
CSS: Clasa tooltip folosește position:relative, care este necesară pentru poziționarea textului tooltip (position:absolute).
Consultați exemplele de mai jos despre cum să poziționați indicatorul.
Clasa tooltiptext conține textul actual de tip tooltip. Este ascunsă în mod implicit și va fi vizibilă în hover (vezi mai jos). De asemenea, i-am adăugat câteva stiluri de bază: 120px lățime (width), culoare de fundal neagră, culoare text alb, text centrat (black background color, white text color, centered text) și 5px top și bottom padding.
Proprietatea CSS border-radius este utilizată pentru a adăuga colțuri rotunjite (rounded corners) tooltip text.
Selectorul :hover este utilizat pentru a afișa textul de tip tooltip atunci când utilizatorul mută mouse-ul peste <div> cu class="tooltip".
Positioning Tooltips
tooltip-ul este plasat la dreapta (left: 105%) a textului „hoverable” (<div>). De asemenea, rețineți că partea de sus:-5px (top:-5px) este utilizată pentru a-l plasa în mijlocul elementului container. Folosim numărul 5 deoarece textul de tip tooltip are o acoperire de 5px în partea de sus și de jos (top and bottom padding). Dacă măriți padding, creșteți și valoarea proprietății de top pentru a vă asigura că aceasta rămâne la mijloc (dacă este ceea ce doriți). Același lucru este valabil dacă doriți ca tooltip să fie plasat la stânga.
Dacă doriți ca tooltip să apară în partea de sus sau de jos ( top sau bottom), consultați exemplele de mai jos. Rețineți că folosim proprietatea margin-left cu o valoare de minus 60 pixeli. Acest lucru este pentru a centra tooltip deasupra/sub (above/below ) textul hoverable. Este setat la jumătatea lățimii tooltip-ului (120/2 = 60).
Instrumente săgeți (Tooltip Arrows)
Pentru a crea o săgeată (arrow) care ar trebui să apară dintr-o parte specifică a tooltip-ului, adăugați conținut „empty” după tooltip, cu pseudo-element class ::after împreună cu proprietatea content. Săgeata în sine este creată folosind borders. Acest lucru va face ca tooltip-ul să pară un speech bubble.
Adăugare săgeată la partea de jos a tooltip-ului.
Poziționarea săgeții în interiorul tooltip: top: 100% va așeza săgeata în partea de jos a tooltip. left: 50% va centra săgeata.
Proprietatea border-width specifică dimensiunea săgeții. Dacă schimbați acest lucru, modificați, de asemenea, valoarea margin-left. Aceasta va menține săgeata centrată.
Border-color este utilizată pentru a transforma conținutul într-o săgeată. Am stabilit top border la negru, iar restul la transparent. Dacă toate părțile ar fi negre, s-ar termina cu o black square box.
Adăugați o săgeată în partea de sus a tooltip.
Adăugați o săgeată la stânga tooltip-ului.
Adăugați o săgeată la dreapta tooltip-ului.
Fade In Tooltips (Animation)
Dacă doriți să aplicați fade în tooltip text când urmează să fie vizibil, puteți utiliza proprietatea CSS transition împreună cu proprietatea opacity și puteți trece de la a fi complet invizibil la 100% vizibil, într-un număr de secunde specificate (1 secundă în exemplul nostru).

CSS object-fit

Proprietatea CSS object-fit
Proprietatea CSS object-fit este utilizată pentru a specifica modul în care un <img> sau <video> trebuie redimensionat pentru a se potrivi cu containerul său.
Această proprietate spune conținutului să umple containerul într-o varietate de moduri; cum ar fi „păstrați acel raport de aspect” sau „întindeți-vă și ocupați cât mai mult spațiu”.
Asistență browser (Browser Support)
Avem două imagini și dorim ca acestea să umple lățimea de 50% a ferestrei browserului și 100% din înălțime.
Nu folosim object-fit, așa că atunci când redimensionăm fereastra browserului, raportul de aspect al imaginilor va fi distrus.
Folosim object-fit: cover; astfel, când redimensionăm fereastra browserului, raportul de aspect al imaginilor este păstrat.
Toate valorile proprietății CSS object-fit
Proprietatea CSS object-fit poate avea următoarele valori:
fill - Aceasta este implicită. Conținutul înlocuit este dimensionat pentru a completa content box a elementului. Dacă este necesar, obiectul va fi stretched sau squished pentru a se potrivi
contain - Conținutul înlocuit este scalat pentru a-și menține raportul de aspect (aspect ratio) în timp ce se încadrează în content box a elementului
cover - Conținutul înlocuit este dimensionat pentru a-și păstra raportul de aspect (aspect ratio) în timp ce umpleți întreaga content box a elementului. Obiectul va fi tăiat (clipped ) pentru a se potrivi
none - Conținutul înlocuit nu este redimensionat
scale-down - Conținutul este dimensionat ca și cum nici un conținut nu a fost specificat (ar avea ca rezultat o dimensiune mai mică a obiectului concret).

CSS Flexbox

CSS Flexbox
CSS Modulul Flexbox Layout (CSS Flexbox Layout Module)
Înainte de modulul Layout Flexbox, existau patru moduri de aspect:
Block, pentru secțiunile dintr-o pagină web
Inline, pentru text
Table, pentru date în două dimensiuni ale tabelului
Positioned, pentru poziția explicită a unui element
Flexible Box Layout Module, face mai ușoară proiectarea unei structuri flexibile layout responsive fără a folosi float sau poziționare (positioning).
Asistență browser(Browser Support)
Proprietățilie flexbox sunt acceptate în toate browserele moderne.
Elemente Flexbox (Flexbox Elements)
Pentru a începe să utilizați modelul Flexbox, trebuie să definiți mai întâi un recipient flex (flex container).
Elementul de mai sus reprezintă un recipient flex (flex container) (zona albastră) cu trei elemente flexibile.
Un container flex cu trei articole flexibile.
O dispunere flexibilă (Flexible Layout) trebuie să aibă un element părinte cu proprietatea de afișare setată la flex.
Elementele directe ale copilului ale containerului flexibil devin automat elemente flexibile.
Proprietățiile containerului flex sunt: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content.
Proprietatea flex-direction
Proprietatea flex-direction definește în ce direcție containerul dorește să stiveze elementele flex.
 "flex-direction: column;" stivuiește elementele flexate vertical (de sus în jos).
Valoarea coloanei (column) stochează vertical elementele flex (de sus în jos).
Valoarea coloană-inversă (column-reverse) stochează vertical elementele flex (dar de jos în sus).
Valoarea row-reverse stochează elementele flexate pe orizontală (dar de la dreapta la stânga).
Proprietatea flex-wrap specifică dacă elementele flex trebuie să fie wrap sau nu.
Valoarea wrap specifică faptul că elementele flex se vor wrap dacă este necesar.
Valoarea nowrap specifică faptul că elementele flex nu se vor wrap (aceasta este implicită).
Valoarea wrap-reverse specifică faptul că elementele flexibile se vor wrap dacă este necesar, în ordine inversă.
Proprietatea flex-flow este o proprietate shorthand pentru setarea proprietăților flex-direction și flex-wrap.
Proprietatea justify-content este utilizată pentru alinierea elementelor flex
Valoarea center aliniază elementele flex în centrul containerului
Valoarea flex-start aliniază elementele flex la începutul containerului (implicit)
Valoarea flex-end aliniază elementele flex la sfârșitul containerului
Valoarea space-around afișează elementele flex cu spațiu înainte, între și după linii (before, between și after)
Valoarea space-between afișează elementele flexibile cu spațiu între linii
Proprietatea align-items este utilizată pentru alinierea elementelor flexate pe verticală.
Utilizăm un container înalt de 200 de pixeli, pentru a demonstra mai bine proprietatea align-items.
Valoarea center aliniază elementele flex din mijlocul containerului.
Valoarea flex-start aliniază elementele flex din partea de sus a containerului.
Valoarea flex-end aliniază elementele flex din partea de jos a containerului.
Valoarea stretch întinde elementele flex pentru a umple containerul (aceasta este implicit).
Valoarea baseline aliniază elementele flex, cum ar fi alinierea lor de bază.
Proprietatea align-content este utilizată pentru a alinia liniile flex.
În aceste exemple, utilizăm un container înalt de 600 de pixeli, cu proprietatea flex-wrap setată pentru a wrapa, pentru a demonstra mai bine proprietatea align-content.
Valoarea space-between afișează liniile flexate cu spațiu egal între ele.
Valoarea space-around afișează liniile flexate cu spațiu înainte, între și după ele.
Valoarea stretch întinde liniile flex pentru a ocupa spațiul rămas (acesta este implicit).
Valoarea center afișează liniile de flexare din mijlocul containerului.
Valoarea flex-start afișează liniile flex la începutul containerului.
Valoarea flex-end afișează liniile de flex la sfârșitul containerului.
Centrare perfectă
În următorul exemplu, vom rezolva o problemă de stil foarte comună: centrarea perfectă (perfect centering).
Setați atât proprietățiile justify-content, cât și align-items in centru, iar elementul flex va fi perfect centrat.
Child Elements (Items)
Elementele child directe ale unui recipient flex devin automat elemente flexibile (flexibile).
Proprietățiile elementului flex: order, flex-grow, flex-shrink, flex-basis, flex, align-self.
Proprietatea order specifică ordinea elementelor flex.
Primul element flex din cod nu trebuie să apară ca primul element din layout.
Valoarea order trebuie să fie un număr, valoarea implicită este 0.
Proprietatea order poate modifica ordinea articolelor flex.
Proprietatea flex-grow specifică cât de mult va crește un element flex în raport cu restul elementelor flex.
Valoarea flex-grow trebuie să fie un număr, valoarea implicită este 0.
Faceți ca cel de-al treilea element flex să crească de opt ori mai rapid decât celelalte elemente flex.
Proprietatea flex-shrink specifică cât de mult se va micsora un element flex în raport cu restul elementelor flex.
Valoarea flex-shrink trebuie să fie un număr, valoarea implicită este 1.
Nu lăsați al treilea element flex să se micșoreze la fel de mult decât celelalte elemente flex.
Proprietatea flex-basis specifică lungimea inițială a unui element flex.
Proprietatea flex este o proprietate shorthand pentru proprietățiile flex-grow, flex-shrink și flex-basis.
Proprietatea align-self specifică alinierea pentru elementul selectat în interiorul containerului flexibil.
Proprietatea align-self înlocuiește alinierea setată implicit de proprietatea align-items a containerului.
Galerie de imagini responsive folosind Flexbox
Utilizați flexbox pentru a crea o galerie de imagini responsive care variază între patru, două sau imagini cu lățime completă, în funcție de dimensiunea ecranului.
Website responsive folosind Flexbox
Utilizați flexbox pentru a crea un responsive website, care conține o bară de navigare flexibilă și conținut flexibil.
Proprietăți CSS Flexbox
display - Specifică tipul de box folosit pentru un element HTML
flex-direction - Specifică direcția articolelor flexibile din interiorul unui recipient flex
justify-content - Aliniază orizontal elementele flex atunci când elementele nu folosesc tot spațiul disponibil pe axa principală
align-items - Aliniază vertical elementele flex atunci când elementele nu folosesc tot spațiul disponibil pe axa transversală
flex-wrap - Specifică dacă elementele flexate trebuie să se înfășoare (wrap) sau nu, dacă nu există suficient loc pentru ele pe o singură linie flex
align-content - Modifică comportamentul proprietății flex-wrap. Este similar cu align-items, dar în loc să alinieze elementele flex, aliniază liniile flex
flex-flow - O proprietate shorthand pentru flex-direction și flex-wrap
order - Specifică ordinea unui articol flexibil în raport cu restul elementelor flexibile din interiorul aceluiași recipient
align-self - Folosit pe articolele flex. Înlocuiește proprietatea align-items
flex - O proprietate shorthand pentru proprietățile flex-grow, flex-shrink și flex-basis

SQL UPDATE

Instrucțiunea SQL UPDATE
Instrucțiunea UPDATE este utilizată pentru a modifica înregistrările existente într-un tabel.
Sintaxa UPDATE
UPDATE table_name
SET column1 = value1, column2 = value2, ...
WHERE condition;
Aveți grijă când actualizați înregistrările într-un tabel! Observați clauza WHERE din declarația UPDATE. Clauza WHERE specifică ce înregistrări trebuie actualizate. Dacă omiteți clauza WHERE, toate înregistrările din tabel vor fi actualizate!
Tabela UPDATE 
Următoarea instrucțiune SQL actualizează primul client (CustomerID = 1) cu o persoană de contact nouă și un oraș nou.
UPDATE Customers
SET ContactName = 'Ion Popescu', City= 'Bucuresti'
WHERE CustomerID = 1;
Înregistrări multiple UPDATE
Clauza WHERE este cea care determină câte înregistrări vor fi actualizate.
Următoarea declarație SQL va actualiza numele de contact la „Ion” pentru toate înregistrările în care țara este „Romania”:
UPDATE Customers
SET ContactName='Ion'
WHERE Country='Romania';
UPDATE avertizare!
Aveți grijă când actualizați înregistrările. Dacă omiteți clauza WHERE, TOATE înregistrările vor fi actualizate!
UPDATE Customers
SET ContactName='Ion';

SQL TOP, LIMIT sau ROWNUM

Clauzele SQL TOP, LIMIT sau ROWNUM
Clauza SQL SELECT TOP
Clauza SELECT TOP este utilizată pentru a specifica numărul de înregistrări de returnat.
Clauza SELECT TOP este utilă pe tabele mari cu mii de înregistrări. Restituirea unui număr mare de înregistrări poate afecta performanța.
Nu toate sistemele de baze de date acceptă clauza SELECT TOP. MySQL acceptă clauza LIMIT pentru a selecta un număr limitat de înregistrări, în timp ce Oracle utilizează ROWNUM.
Sintaxa SQL Server / MS Access
SELECT TOP number|percent column_name(s)
FROM table_name
WHERE condition;
Sintaxa MySQL 
SELECT column_name(s)
FROM table_name
WHERE condition
LIMIT number;
Sintaxa Oracle
SELECT column_name(s)
FROM table_name
WHERE ROWNUM <= number;
Exemple SQL TOP, LIMIT și ROWNUM
Următoarea instrucțiune SQL selectează primele trei înregistrări din tabelul „Customers”:
SELECT TOP 3 * FROM Customers;
Următoarea instrucțiune SQL arată exemplul echivalent folosind clauza LIMIT:
SELECT * FROM Customers
LIMIT 3;
Următoarea instrucțiune SQL arată exemplul echivalent folosind ROWNUM:
SELECT * FROM Customers
WHERE ROWNUM <= 3;
Exemplu SQL TOP PERCENT
Următoarea instrucțiune SQL selectează primele 50% de înregistrări din tabelul „Customers”:
SELECT TOP 50 PERCENT * FROM Customers;
Adăugați o clauză WHERE
Următoarea declarație SQL selectează primele trei înregistrări din tabelul „Customers”, unde țara este „Germania”:
SELECT TOP 3 * FROM Customers
WHERE Country='Germania';
Următoarea instrucțiune SQL arată exemplul echivalent folosind clauza LIMIT:
SELECT * FROM Customers
WHERE Country='Germany'
LIMIT 3;
Următoarea instrucțiune SQL arată exemplul echivalent folosind clauza ROWNUM:
SELECT * FROM Customers
WHERE Country='Germania' AND ROWNUM <= 3;

SQL Restricții

SQL Constraints
Limitările SQL
Restricțiile SQL sunt utilizate pentru a specifica regulile pentru datele dintr-un tabel.
SQL Creare constrângeri
Constrângerile pot fi specificate atunci când tabela este creată cu instrucțiunea CREATE TABLE sau după crearea tabelului cu instrucțiunea ALTER TABLE.
Sintaxă
CREATE TABLE table_name (
    column1 datatype constraint,
    column2 datatype constraint,
    column3 datatype constraint,
    ....
);
Limitările SQL
Restricțiile SQL sunt utilizate pentru a specifica regulile pentru datele dintr-un tabel.
Constrângerile sunt utilizate pentru a limita tipul de date care poate intra într-un tabel. Aceasta asigură precizia și fiabilitatea datelor din tabel. Dacă există o încălcare între constrângere și acțiunea de date, acțiunea este anulată.
Constrângerile pot fi la nivel de coloană sau de tabel. Restricțiile de nivel de coloană se aplică unei coloane și restricțiile de nivel de tabel se aplică întregii tabele.
Următoarele constrângeri sunt utilizate în mod obișnuit în SQL:
NOT NULL - Se asigură că o coloană nu poate avea o valoare NULL
UNIQUE - Se asigură că toate valorile dintr-o coloană sunt diferite
PRIMARY KEY - O combinație între NOT NULL ȘI UNIQUE. Identifică în mod unic fiecare rând dintr-un tabel
FOREIGN KEY - Identifică un rând / o înregistrare într-un alt tabel
CHECK - Se asigură că toate valorile dintr-o coloană îndeplinesc o condiție specifică
DEFAULT - Setează o valoare implicită pentru o coloană atunci când nu este specificată nicio valoare
INDEX - Folosit pentru a crea și recupera rapid datele din baza de date

SQL NOT NULL

SQL NOT NULL
SQL Constrângere NOT NULL (SQL NOT NULL Constraint)
În mod implicit, o coloană poate conține valori NULL.
Constrângerea NOT NULL impune o coloană pentru a NU (NOT) accepta valorile NULL.
Acest lucru impune un câmp care să conțină întotdeauna o valoare, ceea ce înseamnă că nu puteți introduce o înregistrare nouă sau să actualizați o înregistrare fără a adăuga o valoare la acest câmp.
SQL NOT NULL în CREATE TABLE
Următorul SQL asigură că coloanele „ID”, „LastName” și „FirstName” NU (NOT) vor accepta valori NULL atunci când se creează tabelul „Persoane” (Persons):
CREATE TABLE Persons (
    ID int NOT NULL,
    LastName varchar(255) NOT NULL,
    FirstName varchar(255) NOT NULL,
    Age int
);
SQL NOT NULL în ALTER TABLE
Pentru a crea o restricție NOT NULL pe coloana „Vârstă” (Age) când tabelul „Persoane” (Persons) este deja creat, utilizați următorul SQL:
ALTER TABLE Persons
MODIFY Age int NOT NULL;

SQL UNIQUE

SQL Constrângere UNIQUE (SQL UNIQUE Constraint)
Constrângerea UNIQUE asigură că toate valorile dintr-o coloană sunt diferite.
Atât constrângerile UNIQUE, cât și cele PRIMARY KEY oferă o garanție de unicitate pentru o coloană sau un set de coloane.
O constrângere PRIMARY KEY  are automat o restricție UNIQUE.
Cu toate acestea, puteți avea multe constrângeri UNIQUE pe tabelă, dar o singură restricție PRIMARY KEY pe tabelă.
SQL UNIQUE Constraint on CREATE TABLE
Următorul SQL creează o restricție UNIQUE în coloana „ID” atunci când este creată tabela „Persoane” (Persons):
SQL Server / Oracle / MS Access:
CREATE TABLE Persons (
    ID int NOT NULL UNIQUE,
    LastName varchar(255) NOT NULL,
    FirstName varchar(255),
    Age int
);
MySQL:

CREATE TABLE Persons (
    ID int NOT NULL,
    LastName varchar(255) NOT NULL,
    FirstName varchar(255),
    Age int,
    UNIQUE (ID)
);
Pentru a denumi o constrângere UNIQUE și pentru a defini o restricție UNIQUE pe mai multe coloane, utilizați următoarea sintaxă SQL:
MySQL / SQL Server / Oracle / MS Access:
CREATE TABLE Persons (
    ID int NOT NULL,
    LastName varchar(255) NOT NULL,
    FirstName varchar(255),
    Age int,
    CONSTRAINT UC_Person UNIQUE (ID,LastName)
);
SQL UNIQUE Constraint on ALTER TABLE
Pentru a crea o restricție UNIQUE în coloana „ID” atunci când tabelul este deja creat, utilizați următorul SQL:
MySQL / SQL Server / Oracle / MS Access:
ALTER TABLE Persons
ADD UNIQUE (ID);
Pentru a denumi o constrângere UNIQUE și pentru a defini o restricție UNIQUE pe mai multe coloane, utilizați următoarea sintaxă SQL:
MySQL / SQL Server / Oracle / MS Access:
ALTER TABLE Persons
ADD CONSTRAINT UC_Person UNIQUE (ID,LastName);
DROP a UNIQUE Constraint
Pentru a elimina o restricție UNIQUE, utilizați următorul SQL:
MySQL:
ALTER TABLE Persons
DROP INDEX UC_Person;
SQL Server / Oracle / MS Access:
ALTER TABLE Persons
DROP CONSTRAINT UC_Person;

SQL PRIMARY KEY

SQL PRIMARY KEY
SQL Limitarea PRIMARY KEY (SQL PRIMARY KEY Constraint)
Limitarea PRIMARY KEY (PRIMARY KEY Constraint) identifică în mod unic fiecare înregistrare dintr-un tabel.
Primary keys trebuie să conțină valori UNIQUE și nu pot conține valori NULL.
Un tabel poate avea doar O (ONE) cheie primară (primary key); iar în tabel, această cheie primară (primary key) poate consta din coloane simple sau multiple (câmpuri).
SQL PRIMARY KEY în CREATE TABLE
Următorul SQL creează o PRIMARY KEY în coloana „ID” când se creează tabelul „Persoane” (Persons):
MySQL:
CREATE TABLE Persons (
    ID int NOT NULL,
    LastName varchar(255) NOT NULL,
    FirstName varchar(255),
    Age int,
    PRIMARY KEY (ID)
);
SQL Server / Oracle / MS Access:

CREATE TABLE Persons (
    ID int NOT NULL PRIMARY KEY,
    LastName varchar(255) NOT NULL,
    FirstName varchar(255),
    Age int
);
Pentru a permite denumirea unei restricții PRIMARY KEY și pentru a defini o restricție PRIMARY KEY pe mai multe coloane, utilizați următoarea sintaxă SQL:
MySQL / SQL Server / Oracle / MS Access:
CREATE TABLE Persons (
    ID int NOT NULL,
    LastName varchar(255) NOT NULL,
    FirstName varchar(255),
    Age int,
    CONSTRAINT PK_Person PRIMARY KEY (ID,LastName)
);
În exemplul de mai sus, există doar ONE PRIMARY KEY (PK_Person). Cu toate acestea, VALUE (valoarea) cheii primare (primary key) este alcătuită din TWO COLUMNS (ID + LastName).
SQL PRIMARY KEY în ALTER TABLE
Pentru a crea o restricție PRIMARY KEY în coloana „ID” atunci când tabelul este deja creat, utilizați următorul SQL:
MySQL / SQL Server / Oracle / MS Access:
ALTER TABLE Persons
ADD PRIMARY KEY (ID);
Pentru a permite denumirea unei restricții PRIMARY KEY și pentru a defini o restricție PRIMARY KEY pe mai multe coloane, utilizați următoarea sintaxă SQL:
MySQL / SQL Server / Oracle / MS Access:
ALTER TABLE Persons
ADD CONSTRAINT PK_Person PRIMARY KEY (ID,LastName);
Dacă utilizați instrucțiunea ALTER TABLE pentru a adăuga o cheie primară (primary key), coloana cheii primare (primary key) trebuie să fi fost deja declarată că nu conține valori NULL (când a fost creat tabelul pentru prima dată).
Renunțare la o restricție PRIMAR KEY (DROP a PRIMARY KEY Constraint)
Pentru a renunța la o restricție PRIMAR KEY, utilizați următorul SQL:
MySQL:
ALTER TABLE Persons
DROP PRIMARY KEY;
SQL Server / Oracle / MS Access:
ALTER TABLE Persons
DROP CONSTRAINT PK_Person;

SQL FOREIGN KEY

SQL FOREIGN KEY 
SQL Constrângere FOREIGN KEY (SQL FOREIGN KEY Constraint)
O FOREIGN KEY este o cheie folosită pentru a lega două tabele între ele.
O FOREIGN KEY este un câmp (sau o colecție de câmpuri) dintr-un tabel care se referă la FOREIGN KEY dintr-un alt tabel.
Tabelul care conține cheia străină (foreign key) se numește tabel copil (child table), iar tabelul care conține cheia candidat (candidate key) este denumit referință sau tabel părinte (parent table).
Creați două tabele:
Tabelul „Persoane” (Persons):
Tabelul „Comenzi” (Orders):
Observați că coloana „PersonID” din tabelul „Comenzi” (Orders) indică coloana „PersonID” din tabelul „Persoane” (Persons).
Coloana „PersonID” din tabelul „Persoane” (Persons) este PRIMARY KEY din tabelul „Persoane” (Persons).
Coloana „PersonID” din tabelul „Comenzi” (Orders) este o FOREIGN KEY din tabelul „Comenzi” (Orders).
Limitarea FOREIGN KEY este utilizată pentru a preveni acțiunile care ar distruge legăturile dintre tabele.
Restrângerea FOREIGN KEY împiedică, de asemenea, introducerea datelor nevalide în coloana de cheie străină (foreign key), deoarece aceasta trebuie să fie una dintre valori.
SQL FOREIGN KEY în CREATE TABLE
Următorul SQL creează un FOREIGN KEY în coloana „PersonID” atunci când se creează tabelul „Comenzi” (Orders):
MySQL:
CREATE TABLE Orders (
    OrderID int NOT NULL,
    OrderNumber int NOT NULL,
    PersonID int,
    PRIMARY KEY (OrderID),
    FOREIGN KEY (PersonID) REFERENCES Persons(PersonID)
);
SQL Server / Oracle / MS Access:
CREATE TABLE Orders (
    OrderID int NOT NULL PRIMARY KEY,
    OrderNumber int NOT NULL,
    PersonID int FOREIGN KEY REFERENCES Persons(PersonID)
);
Pentru a permite denumirea unei restricții FOREIGN KEY și pentru a defini o restricție FOREIGN KEY pe mai multe coloane, utilizați următoarea sintaxă SQL:
MySQL / SQL Server / Oracle / MS Access:
CREATE TABLE Orders (
    OrderID int NOT NULL,
    OrderNumber int NOT NULL,
    PersonID int,
    PRIMARY KEY (OrderID),
    CONSTRAINT FK_PersonOrder FOREIGN KEY (PersonID)
    REFERENCES Persons(PersonID)
);
SQL FOREIGN KEY în ALTER TABLE
Pentru a crea o restricție FOREIGN KEY în coloana „PersonID” atunci când tabelul „Comenzi” (Orders) este deja creat, utilizați următorul SQL:
MySQL / SQL Server / Oracle / MS Access:
ALTER TABLE Orders
ADD FOREIGN KEY (PersonID) REFERENCES Persons(PersonID);
Pentru a permite denumirea unei constrângeri FOREIGN KEY și pentru a defini o restricție FOREIGN KEY pe mai multe coloane, utilizați următoarea sintaxă SQL:
MySQL / SQL Server / Oracle / MS Access:
ALTER TABLE Orders
ADD CONSTRAINT FK_PersonOrder
FOREIGN KEY (PersonID) REFERENCES Persons(PersonID);
Eliminare restricție FOREIGN KEY (DROP a FOREIGN KEY Constraint)
Pentru a elimina o restricție FOREIGN KEY, utilizați următorul SQL:
MySQL:
ALTER TABLE Orders
DROP FOREIGN KEY FK_PersonOrder;
SQL Server / Oracle / MS Access:
ALTER TABLE Orders
DROP CONSTRAINT FK_PersonOrder;

SQL CHECK

SQL CHECK
SQL restricție CHECK (SQL CHECK Constraint)
Restrângerea CHECK este utilizată pentru a limita intervalul de valori care poate fi plasat într-o coloană.
Dacă definiți o restricție CHECK pe o singură coloană, aceasta permite doar anumite valori pentru această coloană.
Dacă definiți o restricție CHECK pe o tabelă, aceasta poate limita valorile din anumite coloane pe baza valorilor din alte coloane din rând.
SQL CHECK în CREATE TABLE
Următorul SQL creează o restricție CHECK în coloana „Vârstă” (Age) când se creează tabelul „Persoane” (Persons). Restrângerea CHECK vă asigură că nu puteți avea nicio persoană sub 18 ani:
MySQL:
CREATE TABLE Persons (
    ID int NOT NULL,
    LastName varchar(255) NOT NULL,
    FirstName varchar(255),
    Age int,
    CHECK (Age>=18)
);
SQL Server / Oracle / MS Access:
CREATE TABLE Persons (
    ID int NOT NULL,
    LastName varchar(255) NOT NULL,
    FirstName varchar(255),
    Age int CHECK (Age>=18)
);
Pentru a permite denumirea unei constrângeri CHECK și pentru a defini o restricție CHECK pe mai multe coloane, utilizați următoarea sintaxă SQL:
MySQL / SQL Server / Oracle / MS Access:
CREATE TABLE Persons (
    ID int NOT NULL,
    LastName varchar(255) NOT NULL,
    FirstName varchar(255),
    Age int,
    City varchar(255),
    CONSTRAINT CHK_Person CHECK (Age>=18 AND City='Sandnes')
);
SQL CHECK în ALTER TABLE
Pentru a crea o restricție CHECK în coloana „Vârstă” (Age) când tabelul este deja creat, utilizați următorul SQL:
MySQL / SQL Server / Oracle / MS Access:
ALTER TABLE Persons
ADD CHECK (Age>=18);
Pentru a permite denumirea unei constrângeri CHECK și pentru a defini o restricție CHECK pe mai multe coloane, utilizați următoarea sintaxă SQL:
MySQL / SQL Server / Oracle / MS Access:
ALTER TABLE Persons
ADD CONSTRAINT CHK_PersonAge CHECK (Age>=18 AND City='Sandnes');
Eliminare constrângere CHECK (DROP a CHECK Constraint)
Pentru a elimina o constrângere CHECK, utilizați următorul SQL:
SQL Server / Oracle / MS Access:
ALTER TABLE Persons
DROP CONSTRAINT CHK_PersonAge;
MySQL:
ALTER TABLE Persons
DROP CHECK CHK_PersonAge;

SQL DEFAULT

SQL DEFAULT 
SQL Restrângerea DEFAULT (SQL DEFAULT Constraint)
Restrângerea DEFAULT este utilizată pentru a furniza o valoare implicită pentru o coloană.
Valoarea implicită va fi adăugată la toate înregistrările noi, dacă nu este specificată nicio altă valoare.
SQL DEFAULT în CREATE TABLE
Următorul SQL stabilește o valoare DEFAULT pentru coloana „Oraș” (City) atunci când se creează tabelul „Persoane” (Persons):
SQL / SQL Server / Oracle / MS Access:
CREATE TABLE Persons (
    ID int NOT NULL,
    LastName varchar(255) NOT NULL,
    FirstName varchar(255),
    Age int,
    City varchar(255) DEFAULT 'Sandnes'
);
Restrângerea DEFAULT poate fi de asemenea folosită pentru a insera valori system, utilizând funcții precum GETDATE ():
CREATE TABLE Orders (
    ID int NOT NULL,
    OrderNumber int NOT NULL,
    OrderDate date DEFAULT GETDATE()
);
SQL DEFAULT în ALTER TABLE
Pentru a crea o restricție DEFAULT pe coloana „Oraș” (City) atunci când tabelul este deja creat, utilizați următorul SQL:
MySQL:
ALTER TABLE Persons
ALTER City SET DEFAULT 'Sandnes';
SQL Server:
ALTER TABLE Persons
ADD CONSTRAINT df_City
DEFAULT 'Sandnes' FOR City;
MS Access:
ALTER TABLE Persons
ALTER COLUMN City SET DEFAULT 'Sandnes';
Oracle:
ALTER TABLE Persons
MODIFY City DEFAULT 'Sandnes';
Eliminare constrângere DEFAULT (DROP a DEFAULT Constraint)
Pentru a elimina o constrângere DEFAULT, utilizați următorul SQL:
MySQL:
ALTER TABLE Persons
ALTER City DROP DEFAULT;
SQL Server / Oracle / MS Access:
ALTER TABLE Persons
ALTER COLUMN City DROP DEFAULT;

SQL AUTO INCREMENT

SQL Câmpul AUTO INCREMENT
Câmpul AUTO INCREMENT
Auto-increment permite un număr unic de generat automat atunci când o nouă înregistrare este introdusă într-un tabel.
Adesea, acesta este câmpul cheie principal (primary key field) pe care am dori să fie creat automat de fiecare dată când se introduce o nouă înregistrare.
Sintaxa pentru MySQL
Următoarea instrucțiune SQL definește coloana "Personid" pentru a fi un câmp cheie primară (primary key field) cu auto-increment din tabelul "Persoane" (Persons):
CREATE TABLE Persons (
    Personid int NOT NULL AUTO_INCREMENT,
    LastName varchar(255) NOT NULL,
    FirstName varchar(255),
    Age int,
    PRIMARY KEY (Personid)
);
MySQL folosește cuvântul cheie (keyword) AUTO_INCREMENT pentru a efectua o funcție auto-increment.
În mod implicit, valoarea de pornire pentru AUTO_INCREMENT este 1 și va crește cu 1 pentru fiecare înregistrare nouă.
Pentru a permite ca secvența AUTO_INCREMENT să înceapă cu o altă valoare, utilizați următoarea instrucțiune SQL:
ALTER TABLE Persons AUTO_INCREMENT=100;
Pentru a insera o înregistrare nouă în tabelul „Persoane” (Persons), NU (NOT) va trebui să specificăm o valoare pentru coloana „Personid” (o valoare unică va fi adăugată automat):
INSERT INTO Persons (FirstName,LastName)
VALUES ('Ion','Popescu');
Declarația SQL de mai sus ar insera o nouă înregistrare în tabelul „Persoane”(Persons). Coloanei „Personid” i se va atribui o valoare unică. Coloana „FirstName” ar fi setată la „Ion”, iar coloana „LastName” ar fi setată la „Popescu”.
Sintaxa pentru SQL Server
Următoarea instrucțiune SQL definește coloana "Personid" pentru a fi un câmp cheie primară (primary key field) cu auto-increment in tabelul "Persoane" (Persons):
CREATE TABLE Persons (
    Personid int IDENTITY(1,1) PRIMARY KEY,
    LastName varchar(255) NOT NULL,
    FirstName varchar(255),
    Age int
);
MS SQL Server folosește cuvântul cheie (primary key) IDENTITY pentru a efectua o funcție de auto-increment (auto-increment feature).
În exemplul de mai sus, valoarea de pornire pentru IDENTITY este 1 și va crește cu 1 pentru fiecare înregistrare nouă.
Pentru a specifica că coloana „Personid” ar trebui să înceapă la valoarea 10 și să crească cu 5, schimbați-o în IDENTITY(10,5)
Pentru a insera o înregistrare nouă în tabelul „Persoane” (Persons), NU (NOT) va trebui să specificăm o valoare pentru coloana „Personid” (o valoare unică va fi adăugată automat):
INSERT INTO Persons (FirstName,LastName)
VALUES ('Ion','Popecu');
Declarația SQL de mai sus ar insera o nouă înregistrare în tabelul „Persoane” (Persons). Coloanei „Personid” i se va atribui o valoare unică. Coloana „FirstName” ar fi setată la „Ion”, iar coloana „LastName” ar fi setată la „Popescu”.
Sintaxa pentru Access
Următoarea instrucțiune SQL definește coloana "Personid" pentru a fi un câmp cheie primară cu auto-increment (auto-increment primary key field) în tabelul "Persoane" (Persons):
CREATE TABLE Persons (
    Personid AUTOINCREMENT PRIMARY KEY,
    LastName varchar(255) NOT NULL,
    FirstName varchar(255),
    Age int
);
MS Access utilizează cuvântul cheie (keyword) AUTOINCREMENT pentru a efectua o funcție auto-increment (auto-increment feature).
În mod implicit, valoarea de pornire pentru AUTOINCREMENT este 1 și va crește cu 1 pentru fiecare înregistrare nouă.
Pentru a specifica că coloana „Personid” ar trebui să înceapă la valoarea 10 și să crească cu 5, schimbați autoincrementul în AUTOINCREMENT(10,5).
Pentru a insera o înregistrare nouă în tabelul „Persoane” (Persons), NU (NOT) va trebui să specificăm o valoare pentru coloana „Personid” (o valoare unică va fi adăugată automat):
INSERT INTO Persons (FirstName,LastName)
VALUES ('Ion','Popescu');
Declarația SQL de mai sus ar insera o nouă înregistrare în tabelul „Persoane”(Persons). Coloanei „Personid” i se va atribui o valoare unică. Coloana „FirstName” ar fi setată la „Ion”, iar coloana „LastName” ar fi setată la „Popescu”.
Sintaxa pentru Oracle
În Oracle codul este puțin mai complicat.
Va trebui să creați un câmp cu auto-increment (auto-increment field) cu obiectul secvenței (sequence object) (acest obiect generează o secvență numerică).
Utilizați următoarea sintaxă CREATE SEQUENCE:
CREATE SEQUENCE seq_person
MINVALUE 1
START WITH 1
INCREMENT BY 1
CACHE 10;
Codul de mai sus creează un obiect de secvență (sequence object) numit seq_person, care începe cu 1 și va crește cu 1. De asemenea, va stoca (cache) până la 10 valori pentru performanță. Opțiunea cache specifică câte valori de secvență (sequence values) vor fi stocate în memorie pentru acces mai rapid.
Pentru a introduce o nouă înregistrare în tabelul „Persoane” (Persons), va trebui să folosim funcția nextval (această funcție preia următoarea valoare din secvența seq_person):
INSERT INTO Persons (Personid,FirstName,LastName)
VALUES (seq_person.nextval,'Ion','Popescu');
Declarația SQL de mai sus ar insera o nouă înregistrare în tabelul „Persoane” (Persons). Coloana „Personid” avea să i se atribuie următorul număr din secvența seq_person. Coloana „FirstName” ar fi setată la „Ion”, iar coloana „LastName” ar fi setată la „Popescu”.

SQL Injection

Injecția SQL (SQL Injection)
Injecția SQL (SQL Injection) este o tehnică de injecție de cod (code injection) care ar putea distruge baza de date.
Injecția SQL (SQL Injection) este una dintre cele mai frecvente tehnici de hacking web.
Injecția SQL (SQL Injection) este plasarea codului rău intenționat în declarațiile SQL, prin introducerea paginii web.
SQL în paginile web
Injecția SQL (SQL Injection) are loc de obicei atunci când ceri utilizatorului o introducere, cum ar fi numele său de utilizator / userid (username/userid), iar în loc de nume / id (name/id), utilizatorul vă oferă o declarație SQL pe care o veți rula în mod neștiut pe baza de date.
Uitați-vă la următorul exemplu care creează o instrucțiune SELECT adăugând o variabilă (txtUserId) la un șir selectat. Variabila este preluată din intrarea utilizatorului (getRequestString):
txtUserId = getRequestString("UserId");
txtSQL = "SELECT * FROM Users WHERE UserId = " + txtUserId;
Restul acestui capitol descrie pericolele potențiale ale utilizării intrării utilizatorului în declarațiile SQL.
Injecția SQL pe baza 1 = 1 este întotdeauna adevărată
Privește din nou exemplul de mai sus. Scopul inițial al codului a fost crearea unei instrucțiuni SQL pentru a selecta un utilizator, cu un id de utilizator (user id) dat.
Dacă nu există nimic care să împiedice un utilizator să introducă o intrare „greșită” (wrong), utilizatorul poate introduce unele intrări „inteligente” (smart) ca aceasta:
UserId: 105 SAU 1 = 1
Apoi, instrucțiunea SQL va arăta astfel:
SELECT * FROM Users WHERE UserId = 105 OR 1=1;
SQL-ul de mai sus este valid și va întoarce TOATE (ALL) rândurile din tabelul „Utilizatori” (Users), deoarece OR 1 = 1 este întotdeauna TRUE.
Exemplul de mai sus pare periculos? Ce se întâmplă dacă tabelul „Utilizatori” (Users) conține nume și parole?
Instrucțiunea SQL de mai sus este la fel ca aceasta:
SELECT UserId, Name, Password FROM Users WHERE UserId = 105 or 1=1;
Un hacker ar putea avea acces la toate numele de utilizator și parolele (user names și passwords) dintr-o bază de date, introducând pur și simplu 105 OR 1 = 1 în câmpul de introducere.
Injecția SQL Bazată pe "" = "" este întotdeauna adevărată
Iată un exemplu de autentificare a utilizatorului pe un site web:
Nume utilizator: John Doe
Parola: myPass
Exemplu:
uName = getRequestString("username");
uPass = getRequestString("userpassword");
sql = 'SELECT * FROM Users WHERE Name ="' + uName + '" AND Pass ="' + uPass + '"'
Rezultat:
SELECT * FROM Users WHERE Name ="John Doe" AND Pass ="myPass"
Un hacker ar putea avea acces la numele de utilizator și parolele (user names și passwords) dintr-o bază de date, introducând pur și simplu "OR" "=" în caseta de text a numelui de utilizator sau a parolei (user name sau password):
Nume utilizator: "sau" "="
Parola: "sau" "="
Codul de la server va crea o declarație SQL validă astfel:
Rezultat:
SELECT * FROM Users WHERE Name ="" or ""="" AND Pass ="" or ""=""
SQL de mai sus este valid și va returna toate rândurile din tabelul „Utilizatori” (Users), deoarece OR „„ = „„ este întotdeauna TRUE.
Injecție SQL bazată pe declarații SQL Batched (SQL Injection Based on Batched SQL Statements)
Majoritatea bazelor de date acceptă declarația SQL batched.
Un batch (lot) de instrucțiuni SQL este un grup de două sau mai multe instrucțiuni SQL, separate prin punct și virgulă.
Instrucțiunea SQL de mai jos va returna toate rândurile din tabelul „Utilizatori” (Users), apoi va șterge tabelul „Furnizori” (Suppliers).
SELECT * FROM Users; DROP TABLE Suppliers
txtUserId = getRequestString("UserId");
txtSQL = "SELECT * FROM Users WHERE UserId = " + txtUserId;
User id: 105; DROP TABLE Suppliers
SELECT * FROM Users WHERE UserId = 105; DROP TABLE Suppliers;
Utilizați parametrii SQL pentru protecție
Pentru a proteja un site web de injecția SQL, puteți utiliza parametrii SQL.
Parametrii SQL sunt valori care sunt adăugate la o interogare SQL la momentul executării, într-o manieră controlată.
Exemplu Razor ASP.NET:
txtUserId = getRequestString("UserId");
txtSQL = "SELECT * FROM Users WHERE UserId = @0";
db.Execute(txtSQL,txtUserId);
Rețineți că parametrii sunt reprezentați în instrucțiunea SQL de către un marker@.
Motorul SQL verifică fiecare parametru pentru a se asigura că este corect pentru coloana sa și sunt tratate literal, și nu ca parte a SQL-ului care trebuie executat.
txtNam = getRequestString("CustomerName");
txtAdd = getRequestString("Address");
txtCit = getRequestString("City");
txtSQL = "INSERT INTO Customers (CustomerName,Address,City) Values(@0,@1,@2)";
db.Execute(txtSQL,txtNam,txtAdd,txtCit);
Următoarele exemple arată cum să construiți interogări parametrizate în unele limbaje web comune.
SELECTAȚI DECLARAȚIA ÎN ASP.NET:
txtUserId = getRequestString("UserId");
sql = "SELECT * FROM Customers WHERE CustomerId = @0";
command = new SqlCommand(sql);
command.Parameters.AddWithValue("@0",txtUserID);
command.ExecuteReader();
INSERAȚI ÎN DECLARAȚIE ÎN ASP.NET:
txtNam = getRequestString("CustomerName");
txtAdd = getRequestString("Address");
txtCit = getRequestString("City");
txtSQL = "INSERT INTO Customers (CustomerName,Address,City) Values(@0,@1,@2)";
command = new SqlCommand(txtSQL);
command.Parameters.AddWithValue("@0",txtNam);
command.Parameters.AddWithValue("@1",txtAdd);
command.Parameters.AddWithValue("@2",txtCit);
command.ExecuteNonQuery();
INSERAȚI ÎN DECLARAȚIE ÎN PHP:
$stmt = $dbh->prepare("INSERT INTO Customers (CustomerName,Address,City)
VALUES (:nam, :add, :cit)");
$stmt->bindParam(':nam', $txtNam);
$stmt->bindParam(':add', $txtAdd);
$stmt->bindParam(':cit', $txtCit);
$stmt->execute();

PHP Operatori

Operatori PHP
Operatorii sunt folosiți pentru a efectua operații cu variabile și valori.
PHP împarte operatorii în următoarele grupuri:
Operatori de aritmetică
Operatori de atribuire
Operatori de comparație
Operatori de creștere / descreștere
Operatori logici
Operatori cu șiruri (string)
Operatori de matrice (array)
Operatori de atribuire condiționată
Operatori Aritmetici PHP
Operatorii aritmetici PHP sunt folosiți cu valori numerice pentru a efectua operațiuni aritmetice comune, cum ar fi adunarea, scăderea, înmulțirea etc.
Operatori PHP de atribuire
Operatorii PHP de atribuire sunt folosiți cu valori numerice pentru a scrie o valoare a unei variabile.
Operatorul de atribuire de bază în PHP este "=". Înseamnă că operandul stâng este setat la valoarea expresiei de atribuire din dreapta.
Operatori PHP de comparație
Operatorii PHP de comparație sunt folosiți pentru a compara două valori (număr sau șir/number or string)
Operatori PHP de creștere / descreștere
Operatorii PHP de incrementare sunt folosiți pentru a crește valoarea unei variabile.
Operatorii PHP de descreștere sunt folosiți pentru a descrește valoarea unei variabile.
Operatori logici PHP
Operatorii logici PHP sunt folosiți pentru a combina instrucțiuni condiționale.
Operatori PHP String
PHP are doi operatori special conceputi pentru string-uri.
Operatori Array PHP
Operatorii Array PHP sunt folosiți pentru a compara matricile.
Operatori PHP de atribuire condiționată
Operatorii PHP de alocare condiționată sunt folosiți pentru a seta o valoare în funcție de condiții.

PHP Loops

Bucle PHP (PHP Loops)
În capitolele următoare veți învăța cum să repetați codul folosind bucle (loops) în PHP.
Bucle PHP (PHP Loops)
Adesea, atunci când scrieți cod, doriți ca același block de cod să fie difuzat de mai multe ori un anumit număr de ori. Deci, în loc să adăugăm mai multe linii de cod aproape egale într-un script, putem folosi bucle (loops).
Buclele (loops) sunt utilizate pentru a executa același block de cod din nou și din nou, atâta timp cât o anumită condiție este adevărată (true).
În PHP, avem următoarele tipuri de buclă (loop types):
while - buclează (loops) un block de cod atâta timp cât condiția specificată este adevărată (true).
do ... while - se buclează (loops) o dată printr-un block de cod, apoi se repetă bucla (loop) atâta timp cât condiția specificată este adevărată (true).
for - se buclează (loops) printr-un block de cod de un număr specificat de ori.
foreach - se buclează (loops) printr-un block de cod pentru fiecare element dintr-un tablou.
Capitolele următoare vor explica și vor oferi exemple pentru fiecare tip de buclă (loop type).
PHP bucla while (PHP while Loop)
Bucla while - Bucle printr-un block de cod atâta timp cât condiția specificată este adevărată (true).
PHP bucla while
Bucla while execută un block de cod atâta timp cât condiția specificată este adevărată (true).
Sintaxă
while (condition is true) {
     cod de executat;
}
<?php
$x = 1;
while($x <= 5) {
    echo "Numărul este: $x <br>";
    $x++;
}
?>
$x = 1; - Inițializați contorul de bucle (loop counter) ($x) și setați valoarea de pornire la 1.
$x <= 5 - Continuați bucla (loop) atâta timp cât $x este mai mică sau egală cu 5.
$X ++; - Măriți valoarea contorului buclei (loop counter) cu 1 pentru fiecare iterație.
<?php
$x = 0;
while($x <= 100) {
    echo "Numărul este: $x <br>";
    $x+=10;
}
?>
$x = 0; - Inițializați contorul buclei (loop counter) ($x) și setați valoarea de pornire la 0.
$x <= 100 - Continuați bucla (loop) atât timp cât $x este mai mic sau egal cu 100.
$X + = 10; - Măriți valoarea contorului buclei (loop counter) cu 10 pentru fiecare iterație.
PHP bucla do while (PHP do while Loop)
Bucla do ... while - Buclează (loops) o dată printr-un block de cod, apoi repetă bucla (loop) atâta timp cât condiția specificată este adevărată (true).
PHP bucla do while (PHP do while Loop)
Bucla do ... while va executa întotdeauna blocul de cod o dată, apoi va verifica starea și va repeta bucla (loop) cât timp (while) condiția specificată este adevărată (true).
Sintaxă
do {
    cod de executat;
} while (condition is true);
Exemplul de mai jos stabilește prima variabilă $x la 1 ($x = 1). Apoi, bucla do while (do while loop) va scrie o anumită ieșire, apoi va crește variabila $x cu 1. Apoi, starea este bifată ($x este mai mică sau egală cu 5?), Iar bucla (loop) va continua să funcționeze atâta timp cât $x este mai mică sau egală cu 5:
<?php
$x = 1;
do {
    echo "Numărul este: $x <br>";
    $x++;
} while ($x <= 5);
?>
În bucla do...while (do...while loop) în timp ce condiția este testată DUPĂ executarea instrucțiunilor din buclă (loop). Aceasta înseamnă că bucla do ... while (do...while loop) își va executa instrucțiunile cel puțin o dată, chiar dacă condiția este falsă (false). Vezi exemplul de mai jos.
Acest exemplu stabilește variabila $x la 6, apoi rulează bucla (loop), apoi starea este verificată:
<?php
$x = 6;
do {
    echo "Numărul este: $x <br>";
    $x++;
} while ($x <= 5);
?>
PHP bucla for. (PHP for Loop)
Bucla for -  Buclează (loops) printr-un block de cod de un număr specificat de ori.
PHP bucla for. (PHP for Loop)
Bucla for se utilizează atunci când știi în prealabil de câte ori ar trebui să ruleze scriptul.
Sintaxă
for (init counter; test counter; increment counter) {
    cod care trebuie executat pentru fiecare iterație;
}
Parametrii:
init counter: Initializarea valorii contorului buclei (loop counter).
test counter: evaluare pentru fiecare iterație de buclă (loop iteration). Dacă se evaluează la TRUE, bucla (loop) continuă. Dacă se evaluează la FALSE, bucla (loop) se termină.
increment counter: Crește valoarea contorului buclei (loop counter).
Exemplul de mai jos afișează numerele de la 0 la 10:
<?php
for ($x = 0; $x <= 10; $x++) {
    echo "Numărul este: $x <br>";
}
?>
$x = 0; - Inițializați contorul buclei (loop counter) ($x) și setați valoarea de pornire la 0.
$x <= 10; - Continuați bucla (loop) atâta timp cât $x este mai mic sau egal cu 10.
$x ++ - Măriți valoarea contorului buclei (loop counter) cu 1 pentru fiecare iterație.
Acest exemplu numără până la 100 din zece în zece:
<?php
for ($x = 0; $x <= 100; $x+=10) {
    echo "Numărul este: $x <br>";
}
?>
$x = 0; - Inițializați contorul buclei (loop counter) ($x) și setați valoarea de pornire la 0.
$x <= 100; - Continuați bucla (loop) atâta timp cât $x este mai mic sau egal cu 100.
$x + = 10 - Măriți valoarea contorului buclei (loop counter) cu 10 pentru fiecare iterație.
PHP bucla foreach (PHP foreach Loop)
Bucla foreach - Buclează (loops) printr-un block de cod pentru fiecare element dintr-un tablou (array).
PHP bucla foreach (PHP foreach Loop)
Bucla foreach funcționează numai pe tablouri (arrays) și este utilizată pentru a bucla (loop) fiecare pereche cheie / valoare (key/value ) dintr-un tablou (array).
Sintaxă
foreach ($array as $value) {
  cod de executat;
}
Pentru fiecare iterație de buclă (loop iteration), valoarea elementului array curent este atribuită lui $value, iar indicatorul tabloului (array) este mutat de unul singur până când ajunge la ultimul element de matrice (element array).
Următorul exemplu va emite valorile tabloului dat (array) ($colors):
<?php
$colors = array("red", "green", "blue", "yellow");
foreach ($colors as $value) {
  echo "$value <br>";
}
?>
<?php
$age = array("Ion"=>"35", "Petre"=>"37", "Tudor"=>"43");
foreach($age as $x => $val) {
  echo "$x = $val<br>";
}
?>

PHP Array

Un array (tablou) stochează mai multe valori într-o singură variabilă:
<?php
$cars = array("Volvo", "BMW", "Toyota");
echo "Îmi place " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";
?>
Ce este un Array?
Un array (tablo) este o variabilă specială, care poate reține mai mult de o valoare simultan.
Dacă aveți o listă de articole (de exemplu, o listă cu nume de mașini), stocarea mașinilor în variabile unice ar putea arăta astfel:
$cars1 = "Volvo";
$cars2 = "BMW";
$cars3 = "Toyota";
Cu toate acestea, ce se întâmplă dacă doriți să vă buclați (loop) între mașini și să găsiți una specifică? Și dacă nu ai avea 3 mașini, ci 300?
Soluția este să creezi un array (tablou)!
Un array (tablou) poate reține multe valori sub un singur nume și puteți accesa valorile făcând referire la un număr de index.
Creați un array (o matrice) în PHP
În PHP, funcția array() este utilizată pentru a crea un tablou (array):
array ();
În PHP, există trei tipuri de matrice:
Matrice indexate (Indexed arrays) - Arrays cu un index numeric
Matrice asociative (Associative arrays) - Arrays cu chei (keys) numite
Matricele multidimensionale (Multidimensional arrays) - Arrays care conțin unul sau mai multe tablouri (arrays)
Obțineți Lungimea unui Array - Funcția count()
Funcția count() este utilizată pentru a returna lungimea (numărul de elemente) unui array (tablou):
<?php
$cars = array("Volvo", "BMW", "Toyota");
echo count($cars);
?>
PHP matrice indexate (PHP Indexed Arrays)
Există două moduri de a crea tablouri indexate (indexed arrays):
Indexul poate fi atribuit automat (indexul începe întotdeauna de la 0), astfel:
$cars = array("Volvo", "BMW", "Toyota");
sau indexul poate fi atribuit manual:
$cars[0] = "Volvo";
$cars[1] = "BMW";
$cars[2] = "Toyota";
Următorul exemplu creează un tablou indexat (indexed array) numit $cars, îi atribuie trei elemente și apoi tipărește un text care conține valorile tabloului (array values):
<?php
$cars = array("Volvo", "BMW", "Toyota");
echo "Îmi place " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";
?>
Buclă printr-o matrice indexată (Loop Through an Indexed Array)
Pentru a parcurge și tipări toate valorile unui tablou indexat (indexed array), puteți utiliza o buclă (loop) for, astfel:
<?php
$cars = array("Volvo", "BMW", "Toyota");
$arrlength = count($cars);
for($x = 0; $x < $arrlength; $x++) {
    echo $cars[$x];
    echo "<br>";
}
?>
PHP matrice asociative (PHP Associative Arrays)
Matricele asociative (associative arrays) sunt tablouri (arrays) care folosesc chei numite (named keys) pe care le atribuiți lor.
Există două moduri de a crea un tablou asociativ (associative array):
$age = array("Petre"=>"35", "Ion"=>"37", "Dan"=>"43");
sau:
$age['Petre'] = "35";
$age['Ion'] = "37";
$age['Dan'] = "43";
Cheile denumite (named keys) pot fi apoi utilizate într-un script:
<?php
$age = array("Petre"=>"35", "Ion"=>"37", "Dan"=>"43");
echo "Petre are " . $age['Petre'] . " ani.";
?>
Buclă printr-o matrice asociativă (Loop Through an Associative Array)
Pentru a parcurge și tipări toate valorile unui tablou asociativ (associative array), puteți utiliza o buclă (loop) foreach, astfel:
<?php
$age = array("Petre"=>"35", "Ion"=>"37", "Dan"=>"43");
foreach($age as $x => $x_value) {
    echo "Key=" . $x . ", Value=" . $x_value;
    echo "<br>";
}
?>
PHP matrice multidimensionale (PHP Multidimensional Arrays)
În paginile anterioare, am descris matricile (arrays) care reprezintă o listă unică de perechi cheie/valoare (key/value).
Cu toate acestea, uneori doriți să stocați valorile cu mai mult de o cheie. Pentru aceasta, avem tablouri multidimensionale (multidimensional arrays).
PHP - Arrayuri multidimensionale
Un tablou multidimensional (multidimensional array) este un tablou (array) care conține unul sau mai multe tablouri (arrays).
PHP acceptă tablouri multidimensionale (multidimensional arrays) care sunt la două, trei, patru, cinci sau mai multe niveluri. Cu toate acestea, tablourile (arrays) cu mai mult de trei niveluri sunt greu de gestionat pentru majoritatea oamenilor.
Dimensiunea unui tablou (array) indică numărul de indici de care aveți nevoie pentru a selecta un element.
Pentru un tablou bidimensional (two-dimensional array), aveți nevoie de doi indici pentru a selecta un element
Pentru un tablou tridimensional (three-dimensional array), aveți nevoie de trei indici pentru a selecta un elementPHP - Matricele bidimensionale (PHP - Two-dimensional Arrays)
Un tablou bidimensional (two-dimensional array) este un tablou de matrice (array of arrays) (un tablou tridimensional (three-dimensional array) este un tablou de tablouri (arrays of arrays)).
Putem stoca datele dintr-un tabel într-un tablou bidimensional (two-dimensional array), astfel:
$cars = array
  (
  array("Volvo",22,18),
  array("BMW",15,13),
  array("Saab",5,2),
  array("Land Rover",17,15)
  );
Acum, two-dimensional $cars array conține patru tablouri (arrays) și are doi indici: rând și coloană (row and column).
Pentru a avea acces la elementele tabloului (array) $cars trebuie să indicăm cei doi indici (rând și coloană/row and column):
<?php
echo $cars[0][0].": În stoc: ".$cars[0][1].", sold: ".$cars[0][2].".<br>";
echo $cars[1][0].": În stoc: ".$cars[1][1].", sold: ".$cars[1][2].".<br>";
echo $cars[2][0].": În stoc: ".$cars[2][1].", sold: ".$cars[2][2].".<br>";
echo $cars[3][0].": În stoc: ".$cars[3][1].", sold: ".$cars[3][2].".<br>";
?>
<?php
for ($row = 0; $row < 4; $row++) {
  echo "<p><b>Numărul rândului $row</b></p>";
  echo "<ul>";
  for ($col = 0; $col < 3; $col++) {
    echo "<li>".$cars[$row][$col]."</li>";
  }
  echo "</ul>";
}
?>
PHP matrice de sortare. (PHP Sorting Arrays)
Elementele dintr-un tablou (array) pot fi sortate în ordine alfabetică sau numerică, descrescător sau crescător.
PHP - Funcții de sortare pentru matrice (PHP - Sort Functions For Arrays)
În acest capitol, vom parcurge următoarele funcții de sortare a tablelor (arrays) PHP:
sort() - sortează tablourile (arrays) în ordine crescătoare.
rsort() - sortează tablourile (arrays) în ordine descrescătoare.
asort() - sortează tablourile asociative (associative arrays) în ordine crescătoare, în funcție de valoare.
ksort() - sortează matricile asociative (associative arrays) în ordine crescătoare, în funcție de cheie.
arsort() - sortează tablourile asociative (associative arrays) în ordine descrescătoare, în funcție de valoare.
krsort() - sortează tablourile asociative (associative arrays) în ordine descrescătoare, în funcție de cheie.
Sortare Array în ordine crescătoare - sort()
Următorul exemplu sortează elementele tabloului (array) $cars în ordine alfabetică ascendentă:
<?php
$cars = array("Volvo", "BMW", "Toyota");
sort($cars);
?>
Următorul exemplu sortează elementele tabloului (array) $numbers în ordine numerică crescătoare:
<?php
$numbers = array(4, 6, 2, 22, 11);
sort($numbers);
?>
Sortare Array în ordine descrescătoare - rsort()
Următorul exemplu sortează elementele tabloului (array) $cars în ordine alfabetică descrescătoare:
<?php
$cars = array("Volvo", "BMW", "Toyota");
rsort($cars);
?>
Următorul exemplu sortează elementele tabloului (array) $numbers în ordine numerică descrescătoare:
<?php
$numbers = array(4, 6, 2, 22, 11);
rsort($numbers);
?>
Sortare Array (ordine crescătoare), în funcție de valoarea - asort()
Următorul exemplu sortează un tablou asociativ (associative array) în ordine crescătoare, în funcție de valoare:
<?php
$age = array("Petre"=>"35", "Ion"=>"37", "Dan"=>"43");
asort($age);
?>
Sortare Array (ordine crescătoare), în funcție de cheia - ksort()
Următorul exemplu sortează un tablou asociativ (associative array) în ordine crescătoare, în funcție de cheie:
<?php
$age = array("Petre"=>"35", "Ion"=>"37", "Dan"=>"43");
ksort($age);
?>
Sortare Array (ordine descrescătoare), în funcție de valoarea - arsort()
Următorul exemplu sortează un tablou asociativ (associative array) în ordine descrescătoare, în funcție de valoare:
<?php
$age = array("Petre"=>"35", "Ion"=>"37", "Dan"=>"43");
arsort($age);
?>
Sortare Array (ordine descrescătoare), în funcție de cheia - krsort()
Următorul exemplu sortează un tablou asociativ (associative array) în ordine descrescătoare, în funcție de cheie:
<?php
$age = array("Petre"=>"35", "Ion"=>"37", "Dan"=>"43");
krsort($age);
?>

PHP Variabile Globale - Superglobale

PHP Variabile Globale - Superglobalele
Superglobalele au fost introduse în PHP 4.1.0 și sunt variabile încorporate (built-in variables) care sunt întotdeauna disponibile în toate domeniile.
PHP Variabile Globale - Superglobalele
Unele variabile predefinite din PHP sunt „superglobale”, ceea ce înseamnă că sunt întotdeauna accesibile, indiferent de sfera de acțiune - și le puteți accesa din orice funcție, clasă sau fișier fără a fi nevoie să faceți nimic special.
Variabilele superglobale PHP sunt: $GLOBALS, $_SERVER, $_REQUEST, $_POST, $_GET, $_FILES, $_ENV, $_COOKIE, $_SESSION.
Capitolele următoare vor explica unele dintre superglobale, iar restul va fi explicat în capitolele ulterioare.
PHP Superglobal - $GLOBALS
Variabilele super globale sunt variabile încorporate (built-in variables), care sunt întotdeauna disponibile în toate domeniile.
PHP $GLOBALS
$GLOBALS este o variabilă super globală PHP, care este utilizată pentru a accesa variabile globale de oriunde în scriptul PHP (de asemenea, din funcții sau metode).
PHP stochează toate variabilele globale într-un tablou numit $GLOBALS [index]. Indicele conține numele variabilei.
Exemplul de mai jos arată cum se utilizează variabila super globală $GLOBALS:
<?php
$x = 75;
$y = 25;
 function addition() {
    $GLOBALS['z'] = $GLOBALS['x'] + $GLOBALS['y'];
}
 addition();
echo $z;
?>
În exemplul de mai sus, deoarece z este o variabilă prezentă în matricea (array) $GLOBALS, este accesibilă și din afara funcției!
PHP Superglobal - $_SERVER
Variabilele super globale sunt variabile încorporate (built-in variables), care sunt întotdeauna disponibile în toate domeniile.
PHP $ _SERVER
$ _SERVER este o variabilă super globală PHP care conține informații despre antetele, căile și locațiile scriptului (headers, paths, and script locations).
Exemplul de mai jos arată cum să folosiți unele dintre elementele din $ _SERVER:
<?php
echo $_SERVER['PHP_SELF'];
echo "<br>";
echo $_SERVER['SERVER_NAME'];
echo "<br>";
echo $_SERVER['HTTP_HOST'];
echo "<br>";
echo $_SERVER['HTTP_REFERER'];
echo "<br>";
echo $_SERVER['HTTP_USER_AGENT'];
echo "<br>";
echo $_SERVER['SCRIPT_NAME'];
?>
Următorul tabel prezintă cele mai importante elemente care pot intra în interiorul $ _SERVER:
$ _SERVER ['PHP_SELF'] Returnează numele de fișier al scriptului care se execută în prezent
$ _SERVER ['GATEWAY_INTERFACE'] Returnează versiunea Interfaței de Gateway comun (CGI) pe care serverul o folosește
$ _SERVER ['SERVER_ADDR'] Returnează adresa IP a serverului gazdă
$ _SERVER ['SERVER_NAME'] returnează numele serverului gazdă (cum ar fi www.w3schools.com)
$ _SERVER ['SERVER_SOFTWARE'] returnează șirul de identificare a serverului (cum ar fi Apache / 2.2.24)
$ _SERVER ['SERVER_PROTOCOL'] returnează numele și revizuirea protocolului informațional (cum ar fi HTTP / 1.1)
$ _SERVER ['REQUEST_METHOD'] returnează metoda de solicitare folosită pentru a accesa pagina (cum ar fi POST)
$ _SERVER ['REQUEST_TIME'] returnează intervalul de timp al începerii cererii (cum ar fi 1377687496)
$ _SERVER ['QUERY_STRING'] Returnează șirul de interogare dacă pagina este accesată printr-un șir de interogare
$ _SERVER ['HTTP_ACCEPT'] Returnează antetul Accept din cererea curentă
$ _SERVER ['HTTP_ACCEPT_CHARSET'] returnează antetul Accept_Charset din cererea curentă (cum ar fi utf-8, ISO-8859-1)
$ _SERVER ['HTTP_HOST'] Returnează antetul gazdei din cererea curentă
$ _SERVER ['HTTP_REFERER'] returnează adresa URL completă a paginii curente (nu este de încredere, deoarece nu toți agenții utilizator o acceptă)
$ _SERVER ['HTTPS'] Este scriptul cerut printr-un protocol HTTP sigur
$ _SERVER ['REMOTE_ADDR'] Returnează adresa IP de unde utilizatorul vizualizează pagina curentă
$ _SERVER ['REMOTE_HOST'] returnează numele gazdei de unde utilizatorul vizualizează pagina curentă
$ _SERVER ['REMOTE_PORT'] Returnează portul utilizat pe mașina utilizatorului pentru a comunica cu serverul web
$ _SERVER ['SCRIPT_FILENAME'] Returnează numele de cale absolut al scriptului care se execută în prezent
$ _SERVER ['SERVER_ADMIN'] Returnează valoarea acordată directivei SERVER_ADMIN din fișierul de configurare a serverului web (dacă scriptul rulează pe o gazdă virtuală, va fi valoarea definită pentru acea gazdă virtuală) (cum ar fi [email protected] )
$ _SERVER ['SERVER_PORT'] Returnează portul pe mașina serverului care este utilizat de serverul web pentru comunicare (cum ar fi 80)
$ _SERVER ['SERVER_SIGNATURE'] Returnează versiunea serverului și numele gazdei virtuale care sunt adăugate la paginile generate de server
$ _SERVER ['PATH_TRANSLATED'] returnează calea bazată pe sistemul de fișiere la scriptul curent
$ _SERVER ['SCRIPT_NAME'] returnează calea scriptului curent
$ _SERVER ['SCRIPT_URI'] Returnează URI-ul paginii curente
PHP Superglobal - $_REQUEST
Variabilele super globale sunt variabile încorporate (built-in variables), care sunt întotdeauna disponibile în toate domeniile.
PHP $ _REQUEST
PHP $ _REQUEST este o variabilă super globală PHP care este folosită pentru a colecta date după trimiterea unui formular HTML.
Exemplul de mai jos arată un formular cu un câmp de intrare și un buton de trimitere (input field și submit button). Când un utilizator trimite datele făcând click pe „Trimite” (Submit), datele formularului sunt trimise fișierului specificat în atributul de acțiune (action attribute) al etichetei (tag) <form>. În acest exemplu, indicăm acest fișier în sine pentru prelucrarea datelor din formular. Dacă doriți să utilizați un alt fișier PHP pentru procesarea datelor din formular, înlocuiți-l cu numele de fișier ales. Apoi, putem folosi super variabila globală $ _REQUEST pentru a colecta valoarea câmpului de intrare (input field):
<html>
<body>
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
  Nume: <input type="text" name="fname">
  <input type="submit">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // colectați valoarea câmpului de intrare (input field)
    $name = $_REQUEST['fname'];
    if (empty($name)) {
        echo "Numele este gol";
    } else {
        echo $name;
    }
}
?>
</body>
</html>
PHP Superglobal - $_POST
Variabilele super globale sunt variabile încorporate (built-in variables), care sunt întotdeauna disponibile în toate domeniile.
PHP $ _POST
PHP $ _POST este o variabilă super globală PHP, care este folosită pentru a colecta date de formular după trimiterea unui formular HTML cu method="post".
$ _POST este de asemenea utilizat pe scară largă pentru a trece variabilele.
Exemplul de mai jos arată un formular cu un câmp de intrare și un buton de trimitere (input field și submit button). Când un utilizator trimite datele făcând click pe „Trimite” (Submit), datele formularului sunt trimise fișierului specificat în atributul de acțiune (action attribute) al etichetei (tag) <form>. În acest exemplu, indicăm fișierul în sine pentru prelucrarea datelor din formular. Dacă doriți să utilizați un alt fișier PHP pentru procesarea datelor din formular, înlocuiți-l cu numele de fișier ales. Apoi, putem utiliza super variabila globală $ _POST pentru a colecta valoarea câmpului de intrare (input field):
<html>
<body>
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
  Nume: <input type="text" name="fname">
  <input type="submit">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // colectați valoarea câmpului de intrare (input field)
    $name = $_POST['fname'];
    if (empty($name)) {
        echo "Numele este gol";
    } else {
        echo $name;
    }
}
?>
</body>
</html>
PHP Superglobal - $_GET
Variabilele super globale sunt variabile încorporate (built-in variables), care sunt întotdeauna disponibile în toate domeniile.
PHP $ _GET
PHP $ _GET este o variabilă super globală PHP, care este utilizată pentru a colecta date de formular după trimiterea unui formular HTML cu method="get".
$ _GET poate colecta și datele trimise pe adresa URL.
Presupunem că avem o pagină HTML care conține un hyperlink cu parametri:
 <html>
<body>
<a href="test_get.php?subject=PHP&web=lectii-virtuale.ro">Test $GET</a>
</body>
</html>
Când un utilizator face click pe linkul „Test $GET”, parametrii „subject” și „web” sunt trimiși la „test_get.php”, iar apoi puteți accesa valorile sale în „test_get.php” cu $_GET.
Exemplul de mai jos arată codul din „test_get.php”:
<html>
<body>
<?php
echo "Studiu " . $_GET['subject'] . " la " . $_GET['web'];
?>
</body>
</html>

PHP Fișierul Upload

PHP Încărcare fișier (PHP File Upload)
Cu PHP, este ușor să încărcați fișiere pe server.
Cu toate acestea, cu ușurință apare un pericol, așa că întotdeauna aveți grijă atunci când permiteți încărcarea fișierelor!
Configurați fișierul "php.ini"
În primul rând, asigurați-vă că PHP este configurat pentru a permite încărcarea fișierelor.
În fișierul dvs. "php.ini", căutați directiva file_uploads și setați-l pe On:
file_uploads = On
Creați formularul HTML
Apoi, creați un formular HTML care permite utilizatorilor să aleagă fișierul imagine (image file ) pe care doresc să îl încarce:
<!DOCTYPE html>
<html>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
     Selectați imaginea de încărcat:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Încărcați imaginea" name="submit">
</form>
</body>
</html>
Câteva reguli de urmat pentru formularul HTML de mai sus:
Asigurați-vă că formularul folosește method="post"
De asemenea, formularul are nevoie de următorul atribut: enctype = "multipart/form-data". Acesta specifică ce tip de conținut (content-type) trebuie utilizat la trimiterea formularului
Fără cerințele de mai sus, încărcarea fișierului nu va funcționa.
Alte lucruri de remarcat:
Atributul type="file" al etichetei (tag) <input> arată câmpul de intrare (input field) ca un control de selectare a fișierelor (file-select control), cu un buton "Browse" lângă controlul de intrare
Formularul de mai sus trimite date unui fișier numit „upload.php”, pe care îl vom crea în continuare.
PHP Creați scriptul de încărcare (Create The Upload File PHP Script)
Fișierul "upload.php" conține codul pentru încărcarea unui fișier:
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Verificați dacă fișierul imagine este o imagine reală sau o imagine falsă
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "Fișierul este o imagine - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "Fișierul nu este o imagine.";
        $uploadOk = 0;
    }
}
?>
Script PHP explicat:
$target_dir = "uploads/" - specifică directorul în care urmează să fie plasat fișierul
$target_file - specifică calea fișierului care va fi încărcat
$uploadOk=1 - nu este încă utilizat (va fi folosit ulterior)
$imageFileType - reține extensia fișierului (în minuscule/lower case)
În continuare, verificați dacă fișierul imagine este o imagine reală sau o imagine falsă
Va trebui să creați un nou director numit „uploads” în directorul în care se află fișierul „upload.php”. Fișierele încărcate vor fi salvate acolo.
Verificați dacă fișierul există deja
Acum putem adăuga câteva restricții.
În primul rând, vom verifica dacă fișierul există deja în folderul „uploads”. În acest caz, este afișat un mesaj de eroare și $uploadOk este setat la 0:
// Verificați dacă fișierul există deja
if (file_exists($target_file)) {
    echo "Ne pare rău, fișierul există deja.";
    $uploadOk = 0;
}
Limitați dimensiunea fișierului (Limit File Size)
Câmpul de introducere (input field) a fișierului în formularul nostru HTML de mai sus este denumit "fileToUpload".
Acum, vrem să verificăm dimensiunea fișierului. Dacă fișierul este mai mare de 500KB, este afișat un mesaj de eroare și
$uploadOk este setat la 0:
// Verificați dimensiunea fișierului
if ($_FILES["fileToUpload"]["size"] > 500000) {
    echo "Ne pare rău, fișierul dvs. este prea mare.";
    $uploadOk = 0;
}
//  Permiteți anumite formate de fișiere
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "Ne pare rău, sunt permise doar fișierele JPG, JPEG, PNG și GIF.";
    $uploadOk = 0;
}
Încărcați complet scriptul PHP (Complete Upload File PHP Script)
Fișierul complet "upload.php" arată acum astfel:
 <?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Verificați dacă fișierul imagine este o imagine reală sau o imagine falsă
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "Fișierul este o imagine - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "Fișierul nu este o imagine.";
        $uploadOk = 0;
    }
}
// Verificați dacă fișierul există deja
if (file_exists($target_file)) {
    echo "Ne pare rău, fișierul există deja.";
    $uploadOk = 0;
}
// Verificați dimensiunea fișierului
if ($_FILES["fileToUpload"]["size"] > 500000) {
    echo "Ne pare rău, fișierul dvs. este prea mare.";
    $uploadOk = 0;
}
// Permiteți anumite formate de fișiere
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "Ne pare rău, sunt permise doar fișierele JPG, JPEG, PNG și GIF.";
    $uploadOk = 0;
}
// Verificați dacă $uploadOk este setat la 0 printr-o eroare
if ($uploadOk == 0) {
    echo "Ne pare rău, fișierul dvs. nu a fost încărcat.";
// dacă totul este în regulă, încercați să încărcați fișierul
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        echo "Fișierul ". basename( $_FILES["fileToUpload"]["name"]). " a fost încărcat.";
    } else {
        echo "Ne pare rău, a fost o eroare la încărcarea fișierului.";
    }
}
?>

PHP OOP - Clase abstracte

PHP OOP - Clase abstracte
PHP - Care sunt clasele și metodele abstracte?
Clasele și metodele abstracte sunt atunci când clasa parent (părinte) are o metodă numită, dar au nevoie de o clasă (e) child (copil) pentru a finaliza sarcinile.
O clasă abstractă (abstract class) este o clasă care conține cel puțin o metodă abstractă (abstract method). O metodă abstractă (abstract method) este o metodă care este declarată, dar care nu este implementată în cod.
O clasă sau o metodă abstractă (abstract method) este definită de cuvântul cheie (keyword) abstract:
Sintaxă
<?php
abstract class ParentClass {
  abstract public function someMethod1();
  abstract public function someMethod2($name, $color);
  abstract public function someMethod3() : string;
}
?>
La moștenirea (inheriting) de la o clasă abstractă (abstract class), metoda clasei copil (child class method) trebuie definită cu același nume și cu același modificator access mai puțin restricționat. Deci, dacă metoda abstractă (abstract method) este definită ca protejată, metoda clasei copil (child class method) trebuie definită fie protejată, fie publică, dar nu privată. De asemenea, tipul și numărul de argumente solicitate trebuie să fie aceleași. Cu toate acestea, clasele pentru copii (child classes) pot avea în plus argumente opționale.
Deci, atunci când o clasă de copii (child class) este moștenită (inherited) de la o clasă abstractă (abstract class), avem următoarele reguli:
Metoda clasei copil (child class method) trebuie definită cu același nume și redeclarea metodei abstracte părinte (parent abstract method).
Metoda clasei pentru copii (child class method) trebuie definită cu același  sau cu un mai puțin restricționat modificator access.
Numărul de argumente solicitate trebuie să fie același. Cu toate acestea, clasa pentru copii (child class) poate avea în plus argumente opționale.
<?php
// Clasa părinte (Parent class)
abstract class Car {
  public $name;
  public function __construct($name) {
    $this->name = $name;
  }
  abstract public function intro() : string;
}
// Clasele copil(Child classes)
class Audi extends Car {
  public function intro() : string {
    return "Alege calitatea germană! Sunt un $this->name!";
  }
}
class Volvo extends Car {
  public function intro() : string {
    return "Mândru că sunt suedez! Sunt un $this->name!";
  }
}
class Citroen extends Car {
  public function intro() : string {
    return "Extravaganța franceză! Sunt un a $this->name!";
  }
}
// Creați obiecte din clasele copil (child classes)
$audi = new audi("Audi");
echo $audi->intro();
echo "<br>";
$volvo = new volvo("Volvo");
echo $volvo->intro();
echo "<br>";
$citroen = new citroen("Citroen");
echo $citroen->intro();
?>
Exemplu explicat
Clasele Audi, Volvo și Citroen sunt moștenite (inherited) de la clasa Auto. Aceasta înseamnă că clasele Audi, Volvo și Citroen pot utiliza proprietatea publică $name precum și metoda publică __construct() din clasa Car din cauza moștenirii (inheritance).
Dar, intro() este o metodă abstractă (abstract method) care ar trebui definită în toate clasele copil (child classes) și ar trebui să returneze un șir (string).
PHP - mai multe exemple de clase abstracte
Să ne uităm la un alt exemplu în care metoda abstractă (abstract method) are un argument:
<?php
abstract class ParentClass {
  // Metoda abstractă (abstract method)cu un argument
  abstract protected function prefixName($name);
}
class ChildClass extends ParentClass {
  public function prefixName($name) {
    if ($name == "Ion Popescu") {
      $prefix = "Mr.";
    } elseif ($name == "Ioana Popescu") {
      $prefix = "Mrs.";
    } else {
      $prefix = "";
    }
    return "{$prefix} {$name}";
  }
}
$class = new ChildClass;
echo $class->prefixName("Ion Popescu");
echo "<br>";
echo $class->prefixName("Ioana Popescu");
?>
<?php
abstract class ParentClass {
  // Metoda abstractă (abstract method) cu un argument
  abstract protected function prefixName($name);
}
class ChildClass extends ParentClass {
  // Clasa copil (child class) poate defini argumente opționale care nu sunt în metoda abstractă a părintelui (parent's abstract method)
  public function prefixName($name, $separator = ".", $greet = "Dear") {
    if ($name == "Ion Popescu") {
      $prefix = "Mr";
    } elseif ($name == "Ioana Popescu") {
      $prefix = "Mrs";
    } else {
      $prefix = "";
    }
    return "{$greet} {$prefix}{$separator} {$name}";
  }
}
$class = new ChildClass;
echo $class->prefixName("Ion Popescu");
echo "<br>";
echo $class->prefixName("Ioana Popescu");
?>

PHP MySQL Creare Tabel

PHP MySQL Create Table
Un tabel de baze de date (database table) are propriul nume unic și este format din coloane și rânduri (columns and rows).
Creați un tabel MySQL folosind MySQLi și PDO
Instrucțiunea CREATE TABLE este utilizată pentru a crea un tabel în MySQL.
Vom crea un tabel numit „MyGuests”, cu cinci coloane: "id", "firstname", "lastname", "email" și "reg_date":
CREATE TABLE MyGuests (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50),
reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)
Tipul de date (data type) specifică ce tip de date poate conține coloana.
După tipul de date (data type), puteți specifica alte atribute opționale pentru fiecare coloană:
NOT NULL - Fiecare rând (row) trebuie să conțină o valoare pentru acea coloană (column), valorile nule nu sunt permise
Valoarea DEFAULT - Setați o valoare implicită care este adăugată atunci când nu este trecută altă valoare
UNSIGNED - Folosit pentru tipuri de numere, limitează datele stocate la numere pozitive și zero
AUTO INCREMENT - MySQL crește automat valoarea câmpului de fiecare dată când se adaugă o nouă înregistrare
PRIMARY KEY - Folosit pentru identificarea unică a rândurilor dintr-un tabel. Coloana cu setarea PRIMARY KEY este adesea un număr de identificare (ID number) și este adesea folosită cu AUTO_INCREMENT
Fiecare tabel trebuie să aibă o coloană de chei primare (primary key column) (în acest caz: coloana „id”). Valoarea sa trebuie să fie unică pentru fiecare înregistrare din tabel.
Următoarele exemple arată cum se creează tabelul în PHP:
Exemplu (MySQLi Orientat pe obiect/MySQLi Object-oriented):
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Creați conexiunea
$conn = new mysqli($servername, $username, $password, $dbname);
// Verificați conexiunea
if ($conn->connect_error) {
    die("Conexiunea a eșuat: " . $conn->connect_error);
}
// sql pentru a crea tabelul
$sql = "CREATE TABLE MyGuests (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50),
reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)";
if ($conn->query($sql) === TRUE) {
    echo "Tabelul MyGuests creat cu succes";
} else {
    echo "Eroare la crearea tabelului: " . $conn->error;
}
$conn->close();
?>
Exemplu (MySQLi Procedural)
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Creați conexiunea
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Verificați conexiunea
if (!$conn) {
    die("Conexiunea a eșuat: " . mysqli_connect_error());
}
//  sql pentru a crea tabelul
$sql = "CREATE TABLE MyGuests (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50),
reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)";
if (mysqli_query($conn, $sql)) {
    echo "Tabelul MyGuests creat cu succes";
} else {
    echo "Eroare la crearea tabelului: " . mysqli_error($conn);
}
mysqli_close($conn);
?>
Exemplu (PDO)
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDBPDO";

try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    // setați modul de eroare PDO la excepție
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // sql pentru a crea tabelul
    $sql = "CREATE TABLE MyGuests (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    firstname VARCHAR(30) NOT NULL,
    lastname VARCHAR(30) NOT NULL,
    email VARCHAR(50),
    reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
    )";

    // utilizați exec() deoarece nu se returnează niciun rezultat
    $conn->exec($sql);
    echo "Tabelul MyGuests creat cu succes";
    }
catch(PDOException $e)
    {
    echo $sql . "<br>" . $e->getMessage();
    }

$conn = null;
?>

PHP MySQL Declarații pregătite

PHP MySQL Declarații pregătite
Declarațiile pregătite (prepared statements) sunt foarte utile împotriva injecțiilor SQL (SQL injections).
Declarații pregătite și parametri legați
O declarație pregătită (prepared statements) este o caracteristică utilizată pentru a executa aceleași (sau similare) instrucțiuni SQL cu o eficiență ridicată.
Declarațiile pregătite (prepared statements) funcționează astfel:
Pregătiți: Un șablon de instrucțiuni SQL (SQL statement template) este creat și trimis în baza de date. Anumite valori sunt lăsate nespecificate, numite parametri (etichetat (labeled ) "?"). Exemplu: INSERT INTO MyGuests VALUES(?, ?, ?)
Baza de date analizează, compilează și efectuează optimizarea interogării pe șablonul de instrucțiuni SQL (SQL statement template) și stochează rezultatul fără a-l executa
Executați: ulterior, aplicația leagă valorile la parametri, iar baza de date execută instrucțiunea. Aplicația poate executa instrucțiunea ori de câte ori dorește cu valori diferite
Față de executarea directă a instrucțiunilor SQL, instrucțiunile pregătite (prepared statements) au trei avantaje principale:
Instrucțiunile pregătite (prepared statements) reduc timpul de analiză (parsing time), deoarece pregătirea pe interogare se face o singură dată (deși instrucțiunea este executată de mai multe ori)
Parametrii legați (bound parameters) minimizează lățimea de bandă (bandwidth) către server, deoarece trebuie să trimiteți de fiecare dată doar parametrii și nu întreaga interogare (query)
Instrucțiunile pregătite (prepared statements) sunt foarte utile împotriva injecțiilor SQL (SQL injections), deoarece valorile parametrilor, care sunt transmise ulterior folosind un protocol diferit, nu trebuie eliberate corect (correctly escaped). Dacă șablonul de instrucțiune originală (original statement template) nu este derivat de la intrarea externă (external input), nu poate apărea injecția SQL (SQL injection).
Declarații pregătite în MySQLi (Prepared Statements in MySQLi)
Următorul exemplu utilizează instrucțiuni pregătite și parametri legați (prepared statements and bound parameters) în MySQLi:
Exemplu (MySQLi cu declarații pregătite/MySQLi with Prepared Statements)
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Creați conexiunea
$conn = new mysqli($servername, $username, $password, $dbname);
// Verificați conexiunea
if ($conn->connect_error) {
    die("Conexiunea a eșuat: " . $conn->connect_error);
}
// pregătiți și legați
$stmt = $conn->prepare("INSERT INTO MyGuests (firstname, lastname, email) VALUES (?, ?, ?)");
$stmt->bind_param("sss", $firstname, $lastname, $email);
// setați parametrii și executați
$firstname = "Ion";
$lastname = "Popescu";
$email = "[email protected]";
$stmt->execute();
$firstname = "Maria";
$lastname = "Gheorghe";
$email = "[email protected]";
$stmt->execute();
$firstname = "Iulia";
$lastname = "Filipescu";
$email = "[email protected]";
$stmt->execute();
echo "Înregistrări noi create cu succes";
$stmt->close();
$conn->close();
?>
Linii de cod pentru a explica exemplul precedent:
"INSERT INTO MyGuests (firstname, lastname, email) VALUES (?, ?, ?)"
În SQL-ul nostru, introducem un semn de întrebare (?) unde vrem să înlocuim o valoare întreagă, string, dublă sau blob (integer, string, double or blob).
Apoi, aruncați o privire la funcția bind_param():
$stmt->bind_param("sss", $firstname, $lastname, $email);
Această funcție leagă parametrii la interogarea SQL (SQL query) și îi spune bazei de date care sunt parametrii. Argumentul „sss” listează tipurile de date (types of data) care sunt parametri. Caracterul s spune mysql-ului că parametrul este un șir (string).
Argumentul poate fi unul din următoarele patru tipuri:
i - număr întreg (integer)
d - dublu (double)
s - șir (string)
b - BLOB
Pentru fiecare parametru trebuie să avem una dintre acestea .
Spunând mysql-ului la ce tip de date (type of data) trebuie să se aștepte, reducem la minimum riscul de injecții SQL (SQL injections.).
Dacă dorim să introducem date din surse externe (cum ar fi intrarea utilizatorului (user input)), este foarte important ca datele să fie igienizate ( sanitized) și validate.
Declarații pregătite în PDO (Prepared Statements in PDO)
Următorul exemplu utilizează declarații pregătite și parametri legați (prepared statements and bound parameters) în PDO:
Exemplu (PDO cu declarații pregătite)
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDBPDO";
try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    // setați modul de eroare PDO la excepție
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    // pregătiți parametrii sql și bind
    $stmt = $conn->prepare("INSERT INTO MyGuests (firstname, lastname, email)
    VALUES (:firstname, :lastname, :email)");
    $stmt->bindParam(':firstname', $firstname);
    $stmt->bindParam(':lastname', $lastname);
    $stmt->bindParam(':email', $email);
    // introduceți un rând
    $firstname = "Ion";
    $lastname = "Popescu";
    $email = "[email protected]";
    $stmt->execute();
    // introduceți un alt rând
    $firstname = "Maria";
    $lastname = "Gheorghe";
    $email = "[email protected]";
    $stmt->execute();
    // introduceți un alt rând
    $firstname = "Iulia";
    $lastname = "Filipescu";
    $email = "[email protected]";
    $stmt->execute();
    echo "Înregistrări noi create cu succes";
    }
catch(PDOException $e)
    {
    echo "Eroare: " . $e->getMessage();
    }
$conn = null;
?>

PHP - AJAX Căutare live

PHP - AJAX Căutare live
AJAX poate fi utilizat pentru a crea căutări mai prietenoase și interactive pentru utilizator.
AJAX Căutare live
Următorul exemplu va demonstra o căutare live, unde obțineți rezultate de căutare în timp ce tastați.
Căutarea live are multe avantaje în comparație cu căutarea tradițională:
Rezultatele sunt afișate pe măsură ce tastați
Rezultatele se restrâng pe măsură ce continuați să scrieți
Dacă rezultatele devin prea restrânse, eliminați caracterele pentru a vedea un rezultat mai larg
Rezultatele se găsesc într-un fișier XML (de ex. links.xml). Pentru a face acest exemplu mic și simplu, sunt disponibile doar șase rezultate.
Exemplu explicat - Pagina HTML
Când un utilizator tastează un caracter în câmpul de intrare, funcția „showResult()” este executată. Funcția este declanșată de evenimentul "onkeyup":
<html>
<head>
<script>
function showResult(str) {
  if (str.length==0) {
    document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
    return;
  }
  if (window.XMLHttpRequest) {
    // cod pentru IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // cod pentru IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("livesearch").innerHTML=this.responseText;
      document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
  }
  xmlhttp.open("GET","livesearch.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>
Explicația codului sursă:
Dacă câmpul de intrare (input field) este gol (str.length == 0), funcția șterge conținutul marcatorului de căutare live (livesearch placeholder) și iese din funcție.
Dacă câmpul de intrare (input field) nu este gol, funcția showResult() execută următoarele:
Creați un obiect XMLHttpRequest
Creați funcția care trebuie executată atunci când răspunsul serverului este gata
Trimiteți cererea dezactivată unui fișier de pe server
Observați că la URL se adaugă un parametru (q) (cu conținutul câmpului de introducere (input field))
Fișierul PHP
Pagina de pe server numită de JavaScript-ul precedent este un fișier PHP numit "livesearch.php".
Codul sursă din „livesearch.php” caută un fișier XML pentru titluri care se potrivesc cu șirul de căutare (search string) și returnează rezultatul:
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//obțineți parametrul q de la URL
$q=$_GET["q"];
//căutarea tuturor linkurilor din fișierul xml dacă lungimea lui q>0
if (strlen($q)>0) {
  $hint="";
  for($i=0; $i<($x->length); $i++) {
    $y=$x->item($i)->getElementsByTagName('title');
    $z=$x->item($i)->getElementsByTagName('url');
    if ($y->item(0)->nodeType==1) {
      //find a link matching the search text
      if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
        if ($hint=="") {
          $hint="<a href='" .
          $z->item(0)->childNodes->item(0)->nodeValue .
          "' target='_blank'>" .
          $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        } else {
          $hint=$hint . "<br /><a href='" .
          $z->item(0)->childNodes->item(0)->nodeValue .
          "' target='_blank'>" .
          $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
      }
    }
  }
}
// Setați ieșirea la „nici o sugestie” dacă nu a fost găsit niciun indiciu
// sau la valorile corecte
if ($hint=="") {
  $response="nici o sugestie";
} else {
  $response=$hint;
}
//ieșire răspuns
echo $response;
?>
Dacă există un text trimis de la JavaScript (strlen($q)> 0), se întâmplă următoarele:
Încărcați un fișier XML într-un nou obiect XML DOM
Buclați-vă (Loop) prin toate elementele <title> pentru a găsi potriviri (matches) din textul trimis de JavaScript
Setează URL-ul și titlul corect în variabila „$response”. Dacă se găsesc mai multe potriviri (matches), toate potrivirile (matches) sunt adăugate la variabilă
Dacă nu se găsește nicio potrivire (matche), variabila „$response” este setată pe „fără sugestie”

Baze

Definirea bazelor conform teoriei disociației electrolitice și teoriei protolitice; formula generală și nomenclatura bazelor; proprietățile și reacțiile chimice specifice bazelor; ionizarea bazelor; metode generale de obținere a bazelor. 

Săruri

Structura și formula generală a sărurilor; săruri neutre, săruri acide și săruri bazice; nomenclatura sărurilor; proprietățile și reacțiile chimice ale sărurilor; metode generale de obținere a sărurilor; neutralizare și hidroliză. 

Hidrogenul

Caracteristici generale ale hidrogenului; formarea ionului de hidrură, H^-, și formarea ionului de hidrogen (proton), H⁺. Răspândirea hidrogenului în natură. Metode de preparare a hidrogenului. Proprietățile fizice și chimice ale hidrogenului. Hidruri. Ortohidrogen și parahidrogen. Hidrogenul atomic. Întrebuințările hidrogenului. Izotopii hidrogenului (protiu, deuteriu, tritiu). 

Apa

Răspândirea apei în natură. Purificarea apei - sedimentare, filtrare, sterilizare. Apele industriale. Distiliarea apei. Apa higroscopică. Proprietățile fizice ale apei. Structura moleculei de apă. Proprietățile chimice ale apei. Hidrați.  

Grupa 18 sau grupa a VIII-a principală

Grupa a VIII-a principală, numerotată VIII A sau 18, cuprinde gazele rare (nobile) heliu, He, neon, Ne, argon, Ar, kripton, Kr, xenon, Xe, radon, Rn. 

 

Grupa 17 sau grupa a VII-a principală

Grupa a VII-a principală, numerotată VII A sau 17, numită și grupa halogenilor, conține următoarele elemente: fluor, F, clor, Cl, brom, Br, iod, I, astatin, At.
 

Grupa 16 sau grupa a VI-a principală

Grupa a VI-a principală a sistemului periodic, numerotată VI A sau 16, cuprinde elementele oxigen, O, sulf, S, seleniu, Se, telur, Te, și poloniu, Po. 

 

Grupa 15 sau grupa a V-a principală

Grupa a V-a principală a sistemului periodic, numerotată V A sau 15, cuprinde următoarele elemente: azot, N, fosfor, P, arsen, As, stibiu (antimoniu), Sb, și bismut, Bi. 
 

Grupa 14 sau grupa a IV-a principală

Grupa a IV-a principală a sistemului periodic, numerotată IV A sau 14, cuprinde elementele carbon, C, siliciu, Si, germaniu, Ge, staniu, Sn, și plumb, Pb. 

Grupa 13 sau grupa a III-a principală

Grupa a III-a principală a sistemului periodic, numerotată III A sau 13, cuprinde elementele bor, B, aluminiu, Al, galiu, Ga, indiu, In, și taliu, Tl. 

Grupa 2 sau grupa a II-a principală

Grupa a II-a principală a sistemului periodic, numerotată II A sau 2, cuprinde elementele: beriliu, Be, magneziu, Mg, calciu, Ca, stronțiu, Sr, bariu, și radiu, Ra. Această grupă se mai numește grupa metalelor alcalino-pământoase. 

Grupa 1 sau grupa I principală

Elementele de tranziție

Structura electronică a elementelor de tranziție; caracteristicile chimice ale elementelor de tranziție. 

Grupa 3 sau grupa a III-a secundară

Grupa a III-a secundară a sistemului periodic, numerotată III B sau 3, cuprinde elementele rare scandiu, Sc, ytriu, Y, și lantan, La, precum și elementul radioactiv actiniu, Ac. 

 

Grupa 4 sau grupa a IV-a secundară

Grupa a IV-a secundară a sistemului periodic, numerotată IV B sau 4, cuprinde elementele rare titan, Ti, zirconiu, Zr, și hafniu, Hf. 

Grupa 5 sau grupa a V-a secundară

Grupa a V-a secundară a sistemului periodic, numerotată V B sau 5, cuprinde elementele rare vanadiu, V, niobiu, Nb, și tantal, Ta.

Grupa 6 sau grupa a VI-a secundară

Grupa a VI-a secundară a tabelului periodic, numerotată VI B sau 6, cuprinde elementele crom, Cr, molibden, Mo, și wolfram, W.

Grupa 7 sau grupa a VII-a secundară

Grupa a VII-a secundară a sistemului periodic, numerotată VII B sau 7, cuprinde elementele mangan, Mn, technețiul, Tc, și reniu, Re. 

Grupa 8 sau grupa a VIII-a secundară

Grupa 8 a sistemului periodic, în trecut considerată parte a grupei a VIII-a secundare, alături de grupele 9 și 10, cuprinde elementele fier, Fe, ruteniu, Ru, și osmiu, Os. 

Grupa 9 sau grupa a VIII-a secundară

Grupa 9 a sistemului periodic, în trecut considerată parte a grupei a VIII-a secundare alături de grupele 8 și 10, cuprinde elementele cobalt, Co, rodiu, Rh, și iridiu, Ir.