Rezultate pentru tag: cati

Proiecții ortogonale pe un plan

Proiecția unui punct pe un plan. Proiecția unui segment pe un plan. Lungimea proiecției unui segment pe un plan. Proiecția unei drepte pe un plan.

Teorema celor trei perpendiculare

Distanța de la un punct la o dreaptă în spațiu. Teorema celor trei perpendiculare. Enunțul și demonstrația teoremei celor trei perpendiculare. 

Prisma triunghiulară regulată

Aria prismei și volumul prismei. Deducerea formulelor de calcul pentru arie prismă triunghiulară și volum prismă triunghiulară regulată. Aria laterală a prismei triunghiulare regulate. Aria totală a prismei triunghiulare regulate. Volumul unei prisme triunghiulare regulate.

Propagarea luminii. Reflexia si refracţia.

Propagarea luminii în medii omogene: constanţa vitezei şi conceptul de rază de lumină. Legile reflexiei şi refracţiei. Reflexia totală: definiţie, aplicaţii.

Imagini şi obiecte virtuale.

O discuţie detaliată asupra conceptelor de obiect virtual şi imagine virtuală: semnificaţie, proprietăţi.

Lama cu feţe plan paralele.

Aplicaţii ale interferenţei nelocalizate. Lama cu feţe plan paralele: franjele de egală înclinare. Stratul antireflex.

Noţiuni de cinematică.

Introducem noţiunile şi mărimile de bază ale cinematicii. Discutăm ecuaţia de mişcare. Prezentăm definiţia şi proprietăţile vectorilor.

Forţa de frecare. Corpul pe plan înclinat.

Frecarea. Forţa de frecare. Aplicaţiile frecării. Corpul pe plan înclinat.

Lucrul mecanic.

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

Noţiuni de termodinamică.

Sistem termodinamic. Stări şi parametri de stare. Procese şi parametri de proces. Echilibru termodinamic.

Teoria cinetico-moleculara: aplicaţii.

Deducerea legii Dalton. Extinderea modelului gazului ideal la substanţe reale. Clasificarea stărilor de agregare.

Entropia. Principiul II.

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

Condensatorul electric.

Condensatorul electric. Condensatorul plan. Gruparea în serie şi paralel a condensatoarelor.

Legea Joule. Electroliza.

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

Generarea tensiunii alternative.

Energia câmpului magnetic. Exemplu: bobina. Generarea tensiunii electrice alternative. Aplicaţii.

Aplicaţii: radiaţiile X.

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

Aplicaţii: laseri.

LASERi: emisia stimulată, inversia de populaţie. Tehnologii de construcţie, proprietăţi, aplicaţii.

Semiconductori intrinseci şi extrinseci.

Legături covalente. Semiconductori intrinseci. Semiconductori extrinseci P şi N - doparea cu impurităţi.

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.

Aplicaţii ale diodei. Tranzistorul.

Aplicaţii ale diodei: dioda varicap, redresarea curentului alternativ. Tranzistorul cu efect de câmp.

Variaţia energiei de ionizare

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

Legătura ionică. Compuşii ionici.

Regula octetului. Legături chimice. Cedare şi primire de electroni. Punere în comun de electroni. Compuşi ionici. Ioni pozitivi – cationi. Ioni negativi – anioni. Simboluri Lewis. Substanţe cristaline. Proprietăţile compuşilor ionici. 

Acceleratoare circulare de particule.

Acceleratoare circulare: ciclotronul şi sincrotronul. Radiaţia sincrotronică. Aplicaţii.

Legea generală a gazelor

Legea gazelor ideale. Legea lui Avogadro. Parametrii de stare ai gazelor. Ecuaţia lui van der Waals. Aplicaţie.

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 soluţiilor. Cristalohidraţi.

Soluţii. Concentraţia. Concentraţia procentuală şi concetraţia molară. Aplicaţie. Cristalohidraţi. Substanţă anhidră, eflorescenţă, higroscopicitate. 

Concentraţia procentuală - aplicaţii

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

Concentraţia molară - aplicaţii

Calculul concentraţiei molare a unei soluţii. Regula de trei simplă. Molaritate. Aplicaţii.

Echilibre chimice – legea acţiunii maselor

Reacţia directă, reacţia inversă. Procedeul Haber, obţinerea amoniacului. Starea de echilibru chimic. Variaţia în timp a concetraţiilor şi a vitezelor de reacţie. Reacţii reversibile. Legea acţiunii maselor. Constanta de echilibru. Aplicaţii – legea acţiunii maselor. 

Echilibre chimice – aplicaţie

Viteza reacţiei directe, viteza reacţiei inverse. Starea de echilibru chimic. Constanta de echilibru. Aplicaţii. 

Acizi şi baze. Teoria protolitică.

Reacţia de neutralizare. Acizi, baze. Protonul. Transferul de protoni. Ion hidroniu. Teoria Brönsted-Lowry sau teoria protolitică. Clasificarea acizilor. Acid conjugat, bază conjugată. Cupluri acid-bază conjugate. 

Tăria acizilor şi bazelor – amfoliţi acido-bazici

Acizi tari şi acizi slabi. Ionizarea acizilor tari. Ionizarea acizilor slabi. Constanta de aciditate. K_a. Baze tari şi baze slabe. Ionizarea bazelor tari. Ionizarea bazelor slabe. Constanta de bazicitate, K_b. Caracterul amfoter. Amfoliţi acido-bazici. 

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. 

Coeficienţii stoechiometrici în ecuaţiile reacţiilor redox

Coeficienţi stoechiometrici. Stabilirea coeficienţilor stoechiometrici prin metoda redox – aplicaţii. 

Transformarea fracţiilor ordinare cu numitorul putere a lui 10 în fracţii zecimale

Transformarea fracțiilor ordinare în fracții zecimale. Metode de transformare a fracţiilor ordinare în fracții zecimale.

Scăderea fracțiilor zecimale

Scăderea fracțiilor zecimale care au un număr finit de zecimale nenule

Intervale de numere reale

Noțiunea de interval. Intervale mărginite de numere reale, intervale nemărginite.  Interval deschis, interval închis. Legătura dintre intervale și modul.  Determinarea soluțiilor unor inecuații (în mulțimea numerelor reale) care au necunoscuta în modul.

Ecuaţia de gradul al doilea

Forma unei ecuații de gradul doi. Deducerea formulelor care apar în rezolvarea unei ecuații de gradul al doilea.

Unghiuri adiacente. Bisectoarea unui unghi

Unghiuri adiacente. Bisectoarea unui unghi. Unghiuri congruente.

Criteriile de congruenţă ale triunghiurilor dreptunghice

Congruenţa triunghiurilor dreptunghice. Criteriile de congruenţă ale triunghiurilor dreptunghice

Mediatoarea unui segment. Concurenta mediatoarelor laturilor unui triunghi

Linii importante în triunghi: mediatoarea, concurența mediatoarelor. Centrul cercului circumscris triunghiului. Proprietatea punctelor situate pe mediatoarea unui segment. Noțiunea de 'Teoremă directă' și 'Teoremă reciprocă'

Drepte paralele intersectate de o secantă

Drepte paralele intersectate de o secantă. Unghiuri alterne interne. Unghiuri alterne externe. Unghiuri corespondente. Unghiuri interne de aceeaşi parte a secantei. Unghiuri externe de aceeaşi parte a secantei. 

Proprietați ale triunghiurilor oarecare

Suma masurilor unghiurilor unui triunghi este de 180 de grade. Unghi exterior unui triunghi.Teorema unghiului exterior. Bisectoarea interioară și bisectoarea exterioară a unui triunghi. Relații între unghiurile și laturile unui triunghi.

Proprietăţile triunghiului isoscel

Proprietăţile triunghiului isoscel. Un triunghi isoscel are două unghiuri congruente. Într-un triunghi isoscel, mediana, înălțimea, bisectoarea și mediatoarea corespunzătoare bazei coincid.

Proprietăţile triunghiului echilateral

Triunghiul echilateral. Un triunghi echilateral are toate unghiurile congruente. Într-un triunghi echilateral, toate liniile importante ce pornesc din același vârf coincid.

Paralelogramul

Patrulaterul convex care are laturile opuse paralele se numește paralelogram. Proprietățile paralelogramului. Modalități de a demonstra că un patrulater este paralelogram.

Rombul

Paralelogramul care are două laturi consecutive congruente se numește romb. Proprietățile rombului. Modalități de a demonstra că un patrulater este romb.

Trapezul

Patrulaterul care are două laturi opuse paralele, iar celelalte două neparalele se numește trapez. Definiția unui trapez isoscel. Proprietățile trapezului isoscel. Modalități de a demonstra că un trapez este isoscel.

Linia mijlocie în triunghi

Linie mijlocie în triunghi este un segment care uneşte mijloacele a două laturi ale triunghiului. Proprietățile liniei mijlocii.

Teorema fundamentală a asemănării

O paralelă la una din laturile unui triunghi formează cu celelalte două laturi (sau cu prelungirile lor) un triunghi asemenea cu cel dat.

Teorema înălţimii

Într-un triunghi dreptunghic, lungimea înălțimii corespunzătoare unghiului drept este medie proporțională între lungimile proiecțiilor catetelor pe ipotenuză. Teorema înălțimii și reciproca.

Teorema lui Pitagora

Într-un triunghi dreptunghic, suma pătratelor lungimilor catetelor este egală cu pătratul lungimii ipotenuzei.

Coarde şi arce in cerc

Teoreme referitoare la coarde și arce în cerc. Coarde congruente. Arce congruente. Diametru perpendicular pe o coardă.

Unghi înscris în cerc

Unghi cu vârful pe cerc. Măsura unui unghi înscris în cerc. Unghi înscris în semicerc. Triunghi înscris în cerc.

Patrulater înscris în cerc; patrulater inscriptibil

Un patrulater se numește patrulater înscris în cerc dacă vârfurile sale aparțin cercului. În acest caz cercul se numește cerc circumscris patrulaterului. Proprietatea unui patrulater înscris în cerc. Patrulater inscriptibil.

Teoreme de paralelism

Enunțarea unor teoreme importante de paralelism în spațiu. Modalități de a demonstra că două plane sunt paralele.

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

Alchene – proprietăţi chimice

Reacţii specifice hidrocarburilor nesaturate – reacţii de adiţie, de oxidare şi de polimerizare. Hidrogenarea alchenelor, halogenarea alchenelor, adiţia hidracizilor la alchene, adiţia apei la alchene. Oxidare blândă şi oxidare energică. Reacţii comune cu hidrocarburile saturate – reacţii de ardere, reacţii de substituţie. Regula lui Markovnikov. Polimeri vinilici. 

Alchine – nomenclatură, proprietăţi fizice

Caracteristicile legăturilor covalente triple. Nomenclatură. Izomerie de constituţie – izomerie de catenă şi izomerie de poziţie. Structura alchinelor. Proprietăţi fizice.

Alcadiene – nomenclatură, proprietăţi fizice şi chimice

Nomenclatură. Clasificarea alcadienelor în funcţie de poziţia legăturilor duble în catenă. Adiţia hidrogenului. Adiţia halogenilor. Adiţia 1,2 şi adiţia 1,4. Reacţia de polimerizare. Reacţia de copolimerizare. Obţinerea butadienei şi a izoprenului. 

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. 

Chimia carbonului – chimia organică

Carbonul – “elementul vieţii”. Diferenţa dintre compuşii organici şi compuşii anorganici. Obiectul de studiu al chimiei organice. Elemente organogene. Hidrocarburi. Compuşi organici cu funcţiuni.

Reacţii de polimerizare

Importanţa reacţiilor de polimerizare. Schema generală a unei reacţii de polimerizare. Proprietăţile polimerilor. Procedee de polimerizare – polimerizare radicalică, reacţia de policondensare. Radicali liberi. Polimerizarea radicalică. Polimeri vinilici. Reacţia de coplimerizare. Copolimeri. 

Reacţii de esterificare

Obţinerea esterilor. Derivaţi funcţionali ai acizilor carboxilici. Aplicaţii industriale ale reacţiilor de esterificare. Obţinerea aspirinei. Acidul acetilsalicilic. 

Reacţii de condensare şi policondensare

Reacţii de condensare între compuşii carbonilici – condensarea aldolică şi crotonică. Componentă carbonilică şi componentă metilenică. Reacţii de policondensare. Obţinerea şi proprietăţile fenoplastelor – bachelita şi novolacul. 

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. 

Săpunuri şi detergenţi

Reacţia de saponificare. Agenţi activi de suprafaţă (surfactanţi). Clasificarea şi structura surfactanţilor. Modul de acţiune al săpunurilor şi detergenţilor. Clasificarea detergenţilor.

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 – importanţă, proprietăţi fizice

Aplicaţii practice ale derivaţilor halogenaţi. Clasificare. Nomenclatură. Caracteristicile legăturilor C – halogen. Proprietăţi fizice. Obţinere.

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

Compuşi organici cu acţiune biologică. Compuşi cu mai multe grupe funcţionale. Zaharide – polihidroxialdehide şi polihidroxicetone. Monozaharide. Zaharide de policondensare. Glucoza. Structura zaharidelor. Proiecţii Fischer – notaţii D şi L. Atom de carbon asimetric. Importanţa biologică a glucozei. Aplicaţiile practice ale glucozei.

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. 

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. 

Latura, apotema și aria pătratului înscris în cerc

Latura pătratului în funcție de raza cercului circumscris. Apotema pătratului în funcție de raza cercului circumscris. Formula pentru arie pătrat în funcție de raza cercului circumscris.

Latura, apotema și aria hexagonului regulat înscris în cerc

Latura unui hexagon regulat în funcție de raza cercului circumscris. Formula pentru apotemă hexagon regulat în funcție de raza cercului circumscris. Formula pentru arie hexagon regulat în funcție de raza cercului circumscris. Perimetrul hexagonului.

Entalpia

Energie cinetică. Energie potenţială. Energie internă. Funcţii de stare şi funcţii de proces. Variabile de stare. Mărimi de stare extensive şi intensive. Transfer de energie internă. Entalpia. Semnificaţia relaţiei de definire a entalpiei. Variaţia entalpiei. Calorimetrie. 

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. 

Aplicaţii

Căldura specifică, c. Căldura specifică molară. Exemple de calcul pentru capitolul termochimie. 

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. 

Aplicaţii

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

Paralelipipedul dreptunghic

Aria paralelipipedului și volumul paralelipipedului. Deducerea formulelor de calcul pentru arie paralelipiped și volum paralelipiped dreptunghic. Aria laterală a paralelipipedului. Aria totală a paralelipipedului. Volumul unui paralelipiped dreptunghic.

Cubul

Aria cubului și volumul cubului. Deducerea formulelor de calcul pentru arie cub și volum cub. Aria laterală a cubului. Aria totală a cubului. Volumul cubului.

Logaritmi

Noțiunea de logaritm, exemple de logaritmi. Condițiile de existență a logaritmilor. 

Proprietățile logaritmilor

Propritățile logaritmilor: logaritmul produsului, logaritmul raportului, logaritmul unei puteri. Formula pentru schimbarea bazei logaritmului și alte formule logaritmice. Operații cu logaritmi.

Ecuații de gradul I

Forma generală e ecuațiilor de gradul I. Modalitatea teoretică de rezolvare a unei ecuații de gradul întâi. Interpretarea geometrică pentru ecuația de gradul I. Ecuații cu parametru real- exerciții.

Inecuații de gradul I

Forma generală a inecuațiilor de gradul I cu o necunoscută. Modalitatea teoretică de rezolvare a unei inecuații de gradul întâi. Ecuații cu modul, explicitarea modulului.

Sisteme formate dintr-o ecuație de gradul I și o ecuație de gradul II

Rezolvarea unor tipuri de sisteme de ecuații cu coeficienți reali: sisteme formate dintr-o ecuație de gradul I și o ecuație de gradul II. Interpretarea geometrică a acestora

Sisteme de ecuații omogene

Ecuații omogene. Sisteme omogene, algoritmul de rezolvare.

Ecuații de gradul al doilea

Recapitulare ecuații de gradul II cu rădăcini reale. Modalități de rezolvare. Ecuația de gradul al doilea: formarea ecuației când se cunosc rădăcinile (folosind suma și produsul rădăcinilor).

Inecuații de gradul al doilea

Inecuații de gradul II: forma generală, modalități de rezolvare. Exemple de inecuații de gradul doi.

Inecuații de gradul al doilea ce conțin modul

Inecuații de gradul II ce conțin modul. Explicitarea modulului unei inecuații de gradul doi.

Sisteme de inecuații de gradul al doilea

Sisteme formate din inecuații de gradul II și inecuații de gradul I, sau sisteme ce conțin doar inecuații de gradul II.

Piramida triunghiulară regulată

Aria piramidei și volumul piramidei. Deducerea formulelor de calcul pentru arie piramidă triunghiulară regulată și volum piramidă triunghiulară regulată. Aria laterală a piramidei triunghiulare regulate. Aria totală a piramidei triunghiulare regulate. Volumul unei piramide triunghiulare regulate.

Piramida patrulateră regulată

Aria piramidei și volumul piramidei. Deducerea formulelor de calcul pentru arie piramidă patrulateră regulată și volum piramidă patrulateră regulată. Aria laterală a piramidei patrulatere regulate. Aria totală a piramidei patrulatere regulate. Volumul unei piramide patrulatere regulate.

Piramida hexagonală regulată

Aria piramidei și volumul piramidei. Deducerea formulelor de calcul pentru arie piramidă hexagonală regulată și volum piramidă hexagonală regulată. Aria laterală a piramidei hexagonale regulate. Aria totală a piramidei hexagonale regulate. Volumul unei piramide hexagonale regulate.

Trunchiul de piramidă regulată

Aria trunchiului de piramidă și volumul trunchiului de piramidă. Deducerea formulelor de calcul pentru arie trunchi de piramidă regulată și volum trunchi de piramidă regulată. Aria laterală a trunchiului de piramidă regulată. Aria totală a trunchiului de piramidă regulată. Volumul unui trunchi de piramidă regulată.

Cilindrul circular drept

Descrierea cilindrului circular drept. Elementele unui cilindru circular drept. Înălțimea cilindrului. Generatoarea unui cilindru. Secțiunea axială a cilindrului. Desfășurarea unui cilindru circular drept. Aria cilindrului și volumul cilindrului. Deducerea formulelor de calcul pentru arie cilindru circular și volum cilindru circular. Aria laterală a cilindrului circular drept. Aria totală a cilindrului circular drept. Volumul cilindrului circular drept.

Conul circular drept

Descrierea conului circular drept. Elementele unui con circular drept. Înălțimea conului. Generatoarea conului. Secțiunea axială a conului. Desfășurarea unui con circular drept. Aria conului și volumul conului. Deducerea formulelor de calcul pentru arie con circular și volum con circular. Aria laterală a conului circular drept. Aria totală a conului circular drept. Volumul conului circular drept.

Trunchiul de con circular drept

Descrierea trunchiului de con circular drept. Elementele unui trunchi de con circular drept. Înălțimea trunchiului de con. Generatoarea trunchiului de con. Secțiunea axială a trunchiului de con. Desfășurarea unui trunchi de con circular drept. Aria trunchiului de con și volumul trunchiului de con. Deducerea formulelor de calcul pentru arie trunchi de con și volum trunchi de con. Aria laterală a trunchiului de con circular drept. Aria totală a trunchiului de con circular drept. Volumul trunchiului de con circular drept.

Sfera

Descrierea unei sfere. Formulele de calcul pentru arie sferă și volum sferă. Probleme cu aria sferei și volumul sferei.

Reprezentarea geometrică a numerelor complexe

Imaginea geometrică a unui număr complex. Interpretarea geometrică a modulului unui număr complex. Interpretarea geometrică a sumei și a diferenței a două numere complexe. Interpretarea geometrică a numerelor complexe opuse și a numerelor complexe conjugate.

Operații logice: implicația

Implicația propozițiilor. Ipoteză, concluzie. Implicația predicatelor. Incluziunea mulțimilor. Valoarea de adevăr a implicației. 

Metoda inducției matematice

Inducție matematică. Etapele principiului inducției matematice (etapa de verificare, etapa de demonstrație). Demonstrația unei propoziții matematice folosind principiul inducției matematice.

Metoda inducției matematice în demonstrarea unor inegalități

Demonstrarea unor inegalități prin inducție matematică.

Șiruri monotone

Șir crescător, șir descrescător, șir monoton. Definiția șirurilor monotone. Metode prin care se poate studia monotonia șirurilor. Exemple de șiruri monotone.

Proprietățile progresiei geometrice

Termenul general al unei progresii geometrice în funcție de primul termen și de rația progresiei. Condiția ca n numere să fie în progresie geometrică. Suma primilor n termeni ai unei progresii geometrice.

Funcții mărginite

Imaginea unei funcții, noțiunea de funcție mărginită. Graficul unei funcții mărginite. Mărginirea unei funcții numerice.

Monotonia funcțiilor numerice

Funcție crescătoare, funcție descrescătoare, funcție monotonă. Exemple de funcții monotone. Modalități de a studia monotonia funcțiilor. Intervale de monotonie. Exerciții de stabilire a monotoniei funcțiilor.

Compunerea funcțiilor

Compunerea funcțiilor. Proprietăți ale compunerii funcțiilor. Exerciții- funcții compuse.

Vectori

Direcția unei drepte. Segmente cu aceeași direcție. Segmente orientate. Segmente echipolente. Noțiunea de vector. Vector nul. Vector unitate. Vectori egali. Vectori opuși.

Adunarea vectorilor

Adunarea vectorilor: regula paralelogramului, regula triunghiului, regula poligonului. Proprietățile operației de adunare a vectorilor.

pH-ul soluțiilor apoase de acizi

Definiție pH. Produsul ionic al apei. pH și pOH. Calculul concentrației ionilor hidroniu pentru soluțiile de acizi tari și pentru soluțiile de acizi slabi. Calculul pH-ului pentru soluțiile de acizi tari și pentru soluțiile de acizi slabi. Exemplu de calcul pH pentru o soluție de acid tare. Exemplu de calcul pH pentru o soluție de acid slab. 

Reacția de neutralizare în soluții apoase

Reacția de neutralizare - definiție. Neutralizarea unui acid tare cu o bază tare. Ioni spectatori. Căldura molară de neutralizare. Formarea sărurilor prin neutralizarea unui acid tare cu o bază tare. Reacția dintre un acid slab și o bază tare. Reacția dintre un acid tare și o bază slabă. 

Hidroliza sărurilor

Sărurile - compuși ionici. Comportamentul anionilor în apă. Comportamentul cationilor în apă. Reacția de hidroliză. Săruri care formează soluții neutre (săruri provenite de la acizi tari și baze tari). Săruri care formează soluții acide (săruri provenite de la acizi tari și baze slabe). Săruri care formează soluții bazice (săruri provenite de la acizi slabi și baze tari). Săruri provenite de la acizi slabi și baze slabe. Hidroliza azotatului de sodiu (NaNO₃), hidroliza clorurii de amoniu (NH₄Cl), hidroliza sulfurii acide de sodiu (NaHS), hidroliza cianurii de amoniu (NH₄CN). Aplicații; calculul pH-ului unei soluții de sare. 

Proprietățile progresiei aritmetice

Termenul general al unei progresii aritmetice în funcție de primul termen și de rație. Proprietățile progresiei aritmetice. Condiția ca n numere sa fie în progresie aritmetică. Suma primilor n termeni ai unei progresii aritmetice. 

Funcția de gradul I

Funcția de gradul întâi. Graficul funcției de gradul I, intersecția cu axele. Monotonia unei funcții de gradul I. Reprezentarea grafică a funcției de gradul I, funcții definite pe ramuri.

Sisteme de inecuații de gradul I

Rezolvarea unor sisteme de inecuații de gradul întâi.

Vectorul de poziție al unui punct

Vector de poziție al unui punct. Vectorul de poziție al punctului care împarte un segment într-un raport dat. Vector de poziție al mijlocului unui segment. 

Teorema lui Menelaus

Condiția de coliniaritate a trei puncte. Teorema lui Menelaus și reciproca.

Teorema lui Ceva

Concurența unor linii într-un triunghi. Teorema lui Ceva. Reciproca teoremei lui Ceva.

Relațiile între funcțiile trigonometrice ale unui unghi

Formula fundamentală a trigonometriei. Formule trigonometrice pentru unghiuri complementare. Relații între funcții trigonometrice. 

Reducerea la primul cadran

Calculul funcțiilor trigonometrice folosind formule de reducere la primul cadran. Trecerea din cadranul II în cadranul I. Trecerea din cadranul III în cadranul I. Trecerea din cadranul IV în cadranul I.

Formule trigonometrice ale sumei și diferenței a două unghiuri

Formule trigonometrice pentru suma și diferența a două unghiuri

Formule trigonometrice pentru argumentul dublu și triplu

Formulele trigonometrice ale argumentului dublu și triplu.

Transformarea sumelor în produse

Transformarea sumelor în produse

Teorema cosinusului

Aplicații ale produsului scalar: teorema cosinusului.

Teorema medianei

Aplicații ale produsului scalar: teorema medianei.

Teorema sinusurilor

Teorema sinusurilor.

Aria triunghiului- formula lui Heron

Aria triunghiului oarecare folosind formula lui Heron.

Razei cercului circumscris și raza cercului înscris în triunghi

Formulele de calcul pentru raza cercului circumscris și raza cercului înscris în triunghi.

Operații cu permutări

Compunerea permutărilor de grad n.Proprietăți ale compunerii permutărilor de grad n. puterea unei permutări de grad n.Proprietăți ale transpozițiilor.

Proprietățile determinanților

Proprietatea lui Weierstrass

Proprietatea lui Weierstrass pentru studiul convergenţei şirurilor. Lema lui Cesaro.

Existenţa primitivelor

Condiţii ca o funcţie să admită primitive.

Lege de compoziţie internă

Lege de compoziţie pe o mulţime. 

Probabilitatea unui eveniment.

Probabilitatea unui eveniment. Funcţia probabilitate.

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.

Atribute HTML

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

Formatare text în HTML

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

Linkuri HTML

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

Imagini în HTML

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

Imagini hărți în HTML

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

Imagini de fundal în HTML

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

Element de imagine în HTML

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

Tabele HTML

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

Atributul HTML id

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

Căi de fișiere în HTML

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

Codare HTML (seturi de caractere)

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

HTML Uniform Resource Locators (URL)

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

HTML și XHTML

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

Elemente de formulare HTML

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

HTML Atribute Input

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

Introducere în HTML5

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

Suport HTML5

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

Elemente noi în HTML5

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

Elemente semantice în HTML5

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

Migrare în HTML5

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

Ghid de stil în HTML5

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

Grafică HTML

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

HTML SVG

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

HTML5 Video

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

HTML5 Audio

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

HTML Plug-ins

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

HTML YouTube

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

HTML APIs

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

HTML5 Drag and Drop

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

Stocare Web în HTML5

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

HTML5 Web Workers

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

Evenimente trimise de server în HTML5

Evenimentele trimise de server permit unei pagini web să primească actualizări de la un server.
Evenimente trimise de server - mesagerie unidirecțională.
Un eveniment trimis de server este atunci când o pagină web primește automat actualizări de la un server.
Acest lucru era posibil și înainte, dar pagina web ar trebui să întrebe dacă există actualizări disponibile. Cu evenimente trimise de server, actualizările vin automat.
Obiectul EventSource este utilizat pentru a primi notificări de evenimente trimise de server.
Creați un nou obiect EventSource și specificați adresa URL a paginii care trimite actualizările (în acest exemplu "demo_sse.php").
De fiecare dată când se primește o actualizare, apare evenimentul onmessage.
Când are loc un eveniment onmessage, introduceți datele primite în elementul cu id = "result".
Verificați asistența pentru evenimente trimise de server
Aveți nevoie de un server capabil să trimită actualizări de date (cum ar fi PHP sau ASP).
Sintaxa fluxului de evenimente din partea serverului este simplă. Setați antetul „Content-Type” la „text / stream-event”. Acum puteți începe să trimiteți fluxuri de evenimente.
Setați antetul „Content-Type” la „text / stream-event”.
Specificați că pagina nu ar trebui să fie în cache.
Afișați datele care trebuie trimise (începeți întotdeauna cu „date:”).
Curățați datele de ieșire înapoi pe pagina web.
Evenimentul onmessage pentru a primi mesaje.
Alte evenimente:
onopen - Când se deschide o conexiune la server.
onmessage - Când un mesaj este primit.
onerror - Când apare o eroare.

CSS Introducere

CSS este un limbaj care descrie stilul unui document HTML.
CSS descrie modul în care trebuie afișate elementele HTML.
CSS reprezintă Cascading Style Sheets.
CSS descrie modul în care elementele HTML trebuie să fie afișate pe ecran, pe hârtie sau în alte suporturi.
CSS economisește multă muncă. Poate controla aspectul mai multor pagini web simultan.
Fișele de stil externe (external stylesheets) sunt stocate în fișiere CSS.
CSS este utilizat pentru a defini stiluri pentru paginile dvs. web, inclusiv designul, aspectul și variațiile de afișare pentru diferite dispozitive și dimensiuni de ecran.
HTML nu a fost niciodată destinat să conțină etichete pentru formatarea unei pagini web!
HTML a fost creat pentru a descrie conținutul unei pagini web.
Când etichete ca <font> și atribute de culoare au fost adăugate la specificația HTML 3.2, a început un coșmar pentru dezvoltatorii web. Dezvoltarea de site-uri web mari, unde fonturile și informațiile despre culoare erau adăugate la fiecare pagină, a devenit un proces lung și scump.
Pentru a rezolva această problemă, World Wide Web Consortium (W3C) a creat CSS.
Definițiile de stil sunt salvate în mod normal în fișiere .css externe.
Cu un fișier de foi de stil externe (external stylesheet file), puteți schimba aspectul unui întreg site web schimbând doar un singur fișier!

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 Borders

Proprietăți CSS Borders.
Proprietățiile CSS Borders vă permit să specificați stilul, lățimea și culoarea chenarului unui element.
CSS Border Style.
Proprietatea CSS Border Style specifică ce fel de chenar trebuie afișat.
Sunt permise următoarele valori:
dotted (punctat) - Definește un chenar (border) punctat.
dashed - Definește o bordură (border) punctată.
solid - Definește o bordură (border) solidă.
double (dublu) - Definește o bordură (border) dublă.
groove - Definește un chenar cu caneluri 3D. Efectul depinde de valoarea culorii bordurii (border-color).
ridge - Definește un chenar (border) ridicat 3D. Efectul depinde de valoarea culorii bordurii (border-color).
inset - Definește un chenar (border) de inserție 3D. Efectul depinde de valoarea culorii bordurii (border-color).
outset - Definește un chenar (border) de declanșare 3D. Efectul depinde de valoarea culorii bordurii (border-color).
none - Nu definește nici o frontieră (border).
hidden (ascuns) - definește un chenar (border) ascuns.
Proprietatea border-style poate avea de la una până la patru valori (pentru top border, right border, bottom border, left border).
Niciuna dintre celelalte proprietăți CSS border descrise mai jos nu va avea NICIUN efect, decât dacă este setată proprietatea border-style!
Lățimea marginilor CSS (CSS Border Width)
Proprietatea border-width specifică lățimea celor patru chenare.
Lățimea poate fi setată ca o dimensiune specifică (în px, pt, cm, em, etc.) sau folosind una dintre cele trei valori predefinite: subțire, medie sau groasă (thin, medium, thick.).
Proprietatea border-width poate avea de la una până la patru valori (pentru marginea superioară, granița dreaptă, limita de jos și marginea din stânga/ top border, right border, bottom border, left border).
CSS Border Color
Proprietatea border-color este utilizată pentru a seta culoarea celor patru chenare.
Culoarea poate fi setată de:
name - Specificați un nume de culoare, cum ar fi „red”.
Hex - Specificați o valoare hexagonală, cum ar fi „# ff0000”.
RGB - Specificați o valoare RGB, cum ar fi „rgb (255,0,0)”.
transparent.
Proprietatea border-color poate avea de la una până la patru valori (pentru marginea de sus, marginea dreaptă, limita de jos și marginea din stânga/top border, right border, bottom border, left border).Dacă border-color nu este setată, moștenește culoarea elementului.
CSS Border - Individual Sides
Din exemplele de mai sus, ați văzut că este posibil să specificați o frontieră diferită pentru fiecare parte.
În CSS, există, de asemenea, proprietăți pentru specificarea fiecărui chenar (sus, dreapta, jos și stânga/top, right, bottom, left).
Dacă proprietatea border-style are patru valori:
border-style: punctat dublu punctat solid.
top border este punctat.
right border este solid.
bottom border este dublu.
left border este punctat.
Dacă proprietatea border-style are trei valori:border-style: dublu solid punctat.
top border este punctat.
right și left borders sunt solide.
bottom border este dublu.
Dacă proprietatea border-style are două valori:
border-style: solid punctat.
top și bottom borders sunt punctate.
right și left borders sunt solide.
Dacă proprietatea border-style are o valoare:
border-style: punctat.
toate cele patru granițe sunt punctate.
Proprietatea border-style este folosită în exemplul de mai sus. Cu toate acestea, funcționează, de asemenea, cu border-width și border-color.
CSS Border - Proprietatea Shorthand
După cum puteți vedea din exemplele de mai sus, există multe proprietăți de luat în considerare atunci când aveți de-a face cu frontierele.
Pentru a scurta codul, este de asemenea posibil să se specifice toate proprietățile de frontieră individuale într-o singură proprietate.
Proprietatea de frontieră (border) este o proprietate shorthand pentru următoarele proprietăți individuale de frontieră:
border-width
border-style (required)
border-color
Frontierele rotunjite CSS (CSS Rounded Borders).
Proprietatea border-radius este utilizată pentru a adăuga borduri rotunjite la un element.
Toate proprietățile top border într-o singură declarație.
Acest exemplu demonstrează o proprietate shorthand pentru setarea tuturor proprietăților pentru top border într-o singură declarație.
Setați stilul marginii de jos (bottom border).
Acest exemplu demonstrează cum să setați stilul marginii de jos (bottom border).
Setați lățimea marginii din stânga (left border).
Acest exemplu demonstrează modul de setare a lățimii marginii din stânga (left border).
Setați culoarea celor patru chenare (borders).
Acest exemplu demonstrează cum să setați culoarea celor patru chenare. Poate avea de la una la patru culori.
Setați culoarea marginii drepte (right border).
Acest exemplu demonstrează cum să setați culoarea marginii drepte (right border).
border Setează toate proprietățile de frontieră într-o singură declarație
border-bottom Setează toate proprietățile frontierei de jos într-o singură declarație
border-bottom-color Setează culoarea marginii de jos
border-bottom-style Setează stilul marginii de jos
border-bottom-width Setează lățimea marginii de jos
border-color Setează culoarea celor patru chenare
border-left Stabilește toate proprietățile frontierei din stânga într-o singură declarație
border-left-color Setează culoarea marginii din stânga
border-left-style Setează stilul chenarului din stânga
border-left-width Setează lățimea marginii din stânga
border-radius Setează toate cele patru chenare - * - proprietăți ale razei pentru colțurile rotunjite
border-right Setează toate proprietățile de frontieră dreaptă într-o singură declarație
border-right-color Setează culoarea marginii drepte
border-right-style Setează stilul chenarului drept
border-right-width Setează lățimea marginii drepte
border-style Setează stilul celor patru chenare
border-top Setează toate proprietățile de frontieră de sus într-o singură declarație
border-top-color Setează culoarea marginii superioare
border-top-style Setează stilul chenarului superior
border-top-width Setează lățimea marginii superioare
border-width Setează lățimea celor patru chenare

CSS Margini

Proprietățiile CSS margin sunt utilizate pentru a crea spațiu în jurul elementelor, în afara oricărui chenar definit.
Cu CSS, aveți control complet asupra marginilor. Există proprietăți pentru setarea marginii pentru fiecare parte a unui element (sus, dreapta, jos și stânga/top, right, bottom, left).
Margin - Individual Sides
CSS are proprietăți pentru specificarea marginii pentru fiecare parte a unui element: margin-top, margin-right, margin-bottom, margin-left.
Toate proprietățile marginii pot avea următoarele valori:
auto - browserul calculează marginea.
length  - specifică o margine în px, pt, cm etc.
% - specifică o margine în% din lățimea elementului care conține.
inherit- specifică faptul că marginea ar trebui să fie moștenită de la elementul părinte. Valorile negative sunt permise.
Setați margini diferite pentru toate cele patru laturi ale unui element <p>.
Pentru a scurta codul, este posibil să specificați toate proprietățile marginii într-o singură proprietate.
Proprietatea margin este o proprietate shorthand pentru următoarele proprietăți margin individuale: margin-top, margin-right, margin-bottom, margin-left.
Dacă proprietatea marjei are patru valori:
margin: 25px 50px 75px 100px;
top margin este 25px
right margin este 50px
bottom margin este 75px
left margin este 100px
Dacă proprietatea margin are trei valori:
margin: 25px 50px 75px;
top margin este de 25px.
right și  left margins sunt de 50px.
bottom margin este de 75px.
Dacă proprietatea margin are două valori:
margin: 25px 50px;
top și bottom margins sunt de 25px
right și left margins sunt de 50px
Dacă proprietatea margin are o valoare:
margin: 25px;
toate cele patru margini sunt de 25px
Valoarea auto (The auto Value)
Puteți seta proprietatea marginii ca automat (auto) să centreze orizontal elementul din containerul său.
Elementul va prelua apoi lățimea specificată, iar spațiul rămas va fi împărțit în mod egal între marginile din stânga și cea din dreapta.
Folosiți margin: auto.
Valoarea inherit (The inherit Value).
Acest exemplu permite ca marginea stângă a elementului <p class = "ex1"> să fie moștenită de la elementul părinte (<div>).
Margin Collapse
Marginile superioare și inferioare ale elementelor sunt uneori prăbușite într-o singură margine care este egală cu cea mai mare dintre cele două margini.
Acest lucru nu se întâmplă pe marginile din stânga și din dreapta! Doar marginile de sus și de jos!
Elementul <h1> are marginea de jos de 50px iar elementul <h2> are marginea de sus setată la 20px.
Simțul comun pare să sugereze că marginea verticală dintre <h1> și <h2> ar fi în total 70px (50px + 20px). Dar din cauza colapsului marginii, marginea reală ajunge să fie de 50px.
margin - Proprietate shorthand pentru setarea proprietăților marginii într-o singură declarație.
margin-bottom - Setează marginea de jos a unui element.
margin-left - Setează marginea stângă a unui element.
margin-right - Setează marginea dreaptă a unui element.
margin-top - Setează marginea superioară a unui element.

CSS Padding

Proprietățiile CSS padding sunt utilizate pentru a genera spațiu în jurul conținutului unui element, în interiorul oricărui chenar definit.
Cu CSS, aveți un control complet asupra padding- ului. Există proprietăți pentru setarea padding-ului pentru fiecare parte a unui element (sus, dreapta, jos și stânga/top, right, bottom, left).
Padding - Individual Sides
CSS are proprietăți pentru specificarea padding- ului pentru fiecare parte a unui element: padding-top, padding-right, padding-bottom, padding-left .
Toate proprietățile padding pot avea următoarele valori:
length - Specifică o căptușire în px, pt, cm etc.
% - Specifică un padding în % din lățimea elementului care îl conține.
inherit - Specifică faptul că padding-ul ar trebui să fie moștenit de la elementul părinte.
Valorile negative nu sunt permise.
Padding - Proprietatea Shorthand
Pentru a scurta codul, este posibil să specificați toate proprietățiile padding într-o singură proprietate.
Proprietatea padding este o proprietate shorthand pentru următoarele proprietăți individuale padding: padding-top, padding-right, padding-bottom, padding-left
Dacă proprietatea padding are patru valori:
padding: 25px 50px 75px 100px;
top padding este de 25px
right padding este de 50px
bottom padding este de 75px
left padding este de 100px
Dacă proprietatea padding are trei valori:
padding: 25px 50px 75px;
top padding este de 25px
right și left paddings sunt de 50px
bottom padding este de 75px
Dacă proprietatea padding are două valori:
padding: 25px 50px;
top și bottom paddings sunt de 25px
right și left paddings sunt de 50px
Dacă proprietatea padding are o valoare:
padding: 25px;
toate cele patru garnituri sunt de 25px
Padding și elementul width
Proprietatea CSS width specifică lățimea zonei de conținut a elementului. Zona de conținut este porțiunea din interiorul padding-ului, border și marginea unui element (modelul box).
Deci, dacă un element are o lățime specificată, padding-ul adăugat la acel element va fi adăugat la lățimea totală a elementului. Acesta este adesea un rezultat nedorit.
Pentru a menține lățimea la 300px, indiferent de cantitatea de padding, puteți utiliza proprietatea box-sizing. Acest lucru face ca elementul să-și mențină lățimea; dacă măriți padding-ul, spațiul de conținut disponibil va scădea.
Utilizați proprietatea box-sizing pentru a păstra lățimea la 300px, indiferent de cantitatea de padding.
Setați left padding
Acest exemplu demonstrează modul de setare a left padding-ului unui element <p>.
Setați right padding
Acest exemplu demonstrează cum să setați right padding-ul unui element <p>.
Setați top padding
Acest exemplu demonstrează modul de setare a top padding-ului unui element <p>.
Setați bottom padding
Acest exemplu demonstrează modul de setare a bottom padding-ului unui element <p>.
padding - O proprietate shorthand pentru setarea tuturor proprietăților de umplere într-o singură declarație.
padding-bottom - Setează bottom padding-ul unui element.
padding-left - Stabilește left padding-ul unui element.
padding-right - Setează right padding-ul unui element.
padding-top - Setează top padding-ul unui element.

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 Box Model

Toate elementele HTML pot fi considerate casete (boxes). În CSS, termenul „model de cutie”(box model) este utilizat atunci când vorbim despre design și aspect.
Modelul CSS box este în esență o cutie care se înfășoară în jurul fiecărui element HTML. Este format din: margini, borders, padding și conținutul real.
Content - Conținutul căsuței, unde apar text și imagini.
Padding - Șterge o zonă din jurul conținutului. Padding este transparent.
Border - O graniță care se întinde pe padding și content.
Margin - Șterge o zonă în afara graniței. Marginea este transparentă
.Modelul casetei (box model) ne permite să adăugăm un chenar în jurul elementelor și să definim spațiul dintre elemente.
Lățimea și înălțimea unui element (Width and Height of an Element).
Pentru a seta corect lățimea și înălțimea (width și height) unui element în toate browserele, trebuie să știți cum funcționează modelul casetei (box model).

CSS Outline

Un outline este o linie care este desenată în jurul elementelor, în afara granițelor (borders), pentru a face ca elementul să „iasă în evidență”.
CSS are următoarele proprietăți outline (contur): outline-style, outline-color, outline-width, outline-offset, outline.
Conturul (outline) diferă de granițe (borders)! Spre deosebire de graniță (border), conturul (outline) este tras în afara graniței elementului și poate suprapune alt conținut. De asemenea, conturul (outline) NU este o parte din dimensiunile elementului; lățimea și înălțimea (height și weight) totală a elementului nu este afectată de lățimea conturului.
CSS Outline Style.
Proprietatea outlyne style specifică stilul conturului și poate avea una dintre următoarele valori:
dotted (punctat) - Definește un contur punctat.
dashed (marcat) - Definește un contur discret.
solid - Definește un contur solid.
double (dublu) - Definește un contur dublu.
groove (canelură) - Definește un contur în canelură 3D.
ridge - Definește un contur 3D ridged.
inset - Definește un contur de inserție 3D.
outset - Definește un contur de declanșare 3D.
none - Nu definește contur.
hidden (ascuns) - Definește un contur ascuns.
Niciuna dintre celelalte proprietăți outline nu va avea niciun efect, cu excepția cazului în care proprietatea în stil outline este setată!
CSS Outline Color.
Proprietatea CSS outline-color este utilizată pentru a seta culoarea conturului.
Culoarea poate fi setată de:
name - Specificați un nume de culoare, cum ar fi „red”.
RGB - Specificați o valoare RGB, cum ar fi „rgb (255,0,0)”.
Hex - Specificați o valoare hexagonală, cum ar fi „# ff0000”.
invert - Realizează o inversare a culorii (care asigură că conturul este vizibil, indiferent de fundalul culorii).
CSS Outline Width.
Proprietatea outline-width specifică lățimea conturului și poate avea una dintre următoarele valori:
thin (subțire) - de obicei 1px.
medium (mediu) - de obicei 3px.
thick (gros) - de obicei 5px.
O dimensiune specifică (în px, pt, cm, em, etc).
CSS Outline - Proprietatea Shorthand
Proprietatea outline este o proprietate shorthand pentru setarea următoarelor proprietăți outline individuale: outline-width, outline-style (required), outline-color.
CSS Outline Offset
Proprietatea outline-offset adaugă spațiu între un outline și edge/ border unui element. Spațiul dintre un element și conturul său este transparent.
Proprietățiile CSS Outline: outline, outline-color, outline-offset, outline-style, outline-width.
outline - O proprietate shorthand pentru setarea contur-lățime, stil contur și contur-culoare într-o singură declarație.
outline-color - Setează culoarea unui contur.
outline-offset - Specifică spațiul dintre un contur și marginea sau marginea unui element.
outline-style - Setează stilul unui contur.
outline-width - Setează lățimea unui contur.

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 Tabele

Aspectul unui tabel HTML poate fi îmbunătățit mult cu CSS.
Bordurile tabelelor
Pentru a specifica bordurile tabelelor în CSS, utilizați proprietatea border.
Reduceți marginile tabelului (Collapse Table Borders)
Proprietatea border-collapse stabilește dacă bordurile tabelului trebuie să fie prăbușite într-un singur chenar:
Dacă doriți doar un chenar în jurul tabelului, specificați numai proprietatea border pentru <tabel>.
Lățimea și înălțimea tabelului (Table Width and Height)
Lățimea și înălțimea (width și height) unui tabel sunt definite prin proprietățiile de lățime și înălțime.
Aliniere orizontală (Horizontal Alignment)
Proprietatea de aliniere text stabilește alinierea orizontală (cum ar fi stânga, dreapta sau centrul) conținutului în <th> sau <td>.
În mod implicit, conținutul elementelor <th> sunt aliniate în centru și conținutul elementelor <td> sunt aliniate la stânga.
Aliniere verticală (Vertical Alignment)
Proprietatea vertical-align stabilește alinierea verticală (cum ar fi partea superioară, inferioară sau mijlocie) a conținutului în <th> sau <td>.
În mod implicit, alinierea verticală a conținutului dintr-un tabel este mijlocie (atât pentru elementele <th> cât și pentru <td>).
Table Padding
Pentru a controla spațiul dintre graniță și conținutul dintr-un tabel, utilizați proprietatea padding pentru elementele <td> și <th>.
Horizontal Dividers
Adăugați proprietatea border-bottom la <th> și <td> pentru horizontal dividers.
Hoverable Table
Utilizați selectorul :hover pe <tr> pentru a evidenția rândurile de tabel cu mouse over.
Striped Tables
Pentru tabele cu dungi zebră (zebra-striped tables), utilizați selecția nth-child() și adăugați o culoare de fundal la toate rândurile de tabele uniforme (sau impare).
Culoarea tabelului (Table Color)
Tabel responsiv (Responsive Table)
Un tabel responsiv va afișa o bară de defilare orizontală dacă ecranul este prea mic pentru a afișa întregul conținut.
Adăugați un element de container (cum ar fi <div>) cu overflow-x: auto în jurul elementului <table> pentru a face să răspundă.
În OS X Lion (pe Mac), barele de defilare sunt ascunse în mod implicit și sunt afișate doar atunci când sunt utilizate (chiar dacă „overflow: scroll” este setat).
Proprietățiile tabelului CSS:
border - Setează toate proprietățile de frontieră într-o singură declarație
border-collapse - Specifică dacă granițele tabelelor trebuie sau nu prăbușite
border-spacing - Specifică distanța dintre marginile celulelor adiacente
caption-side- Specifică amplasarea unei legi de tabel
empty-cells - Specifică dacă se afișează sau nu margini și fundal pe celulele goale dintr-un tabel
table-layout - Setează algoritmul de dispunere care va fi utilizat pentru o tabelă

CSS Display

Layout CSS - Proprietatea display
Proprietatea display este cea mai importantă proprietate CSS pentru controlul aspectului.
Proprietatea display
Proprietatea display specifică dacă / cum este afișat un element.
Fiecare element HTML are o valoare de afișare implicită în funcție de tipul de element. Valoarea implicită a afișajului pentru majoritatea elementelor este block sau inline.
Elemente la nivel de block (Block-level Elements)
Un element la nivel de block (block-level element) pornește întotdeauna pe o nouă linie și ocupă toată lățimea disponibilă (se întinde spre stânga și spre dreapta, cât poate).
Exemple de elemente la nivel de block (block-level element): <div>, <h1> - <h6>, <p>, <form>, <header>, <footer>, <section>.
Elemente în linie (Inline Elements)Un element inline nu pornește de pe o nouă linie și ocupă doar lățimea necesară.
Acesta este un element <span> inline din interiorul unui paragraf.
Exemple de elemente inlinie: <span>, <a>, <img>.
Display: none;
Display: none; este utilizat în mod obișnuit cu JavaScript pentru a ascunde și a arăta elementele fără a le șterge și recrea.
Elementul <script> folosește display: none; ca implicit.
Înlocuire Valoare implicită a afișajului
După cum am menționat, fiecare element are o valoare de afișare implicită. Cu toate acestea, puteți trece peste acest lucru.
Modificarea unui element inline într-un element de block, sau invers, poate fi utilă pentru ca pagina să arate într-un mod specific și să respecte în continuare standardele web.
Un exemplu obișnuit este crearea de elemente inline <li> pentru meniurile orizontale.
Setarea proprietății de afișare (display) a unui element modifică doar modul în care este afișat elementul, NU ce fel de element este. Deci, un element inline cu display: block; nu este permis să aibă alte elemente de block în interiorul său.
crearea de elemente inline <li> pentru meniurile orizontale.
afișare elemente <span> ca elemente de block.
afișare elemente <a> ca elemente de block.
Ascunde un element - display:none sau visibility:hidden?
Ascunderea unui element se poate face prin setarea proprietății dispaly la none. Elementul va fi ascuns, iar pagina va fi afișată ca și cum elementul nu este acolo.
visibility:hidden; ascunde de asemenea un element.
Cu toate acestea, elementul va ocupa totuși același spațiu ca înainte. Elementul va fi ascuns, dar afectează în continuare aspectul.
Proprietăți CSS de afișare / vizibilitate:
display - Specifică modul în care trebuie afișat un element.
visibility - Specifică dacă un element trebuie să fie vizibil sau nu.

CSS Position

CSS Layout -  Proprietatea position
Proprietatea position specifică tipul metodei de poziționare utilizate pentru un element (static, relativ, fix, absolut sau lipicios/static, relative, fixed, absolute sau sticky).
Elementele sunt apoi poziționate folosind proprietățiile de sus, de jos, de stânga și de dreapta (top, bottom, left, și right). Cu toate acestea, aceste proprietăți nu vor funcționa decât dacă proprietatea position este setată prima. De asemenea, funcționează diferit în funcție de valoarea poziției.
position: static; (poziție: static)
Elementele HTML sunt poziționate static în mod implicit.
Elementele poziționate static nu sunt afectate de proprietățile de sus, de jos, de stânga și de dreapta.
Un element cu position: static; (poziție: static) nu este poziționat într-un mod special; este poziționat întotdeauna în funcție de fluxul normal al paginii.
Element cu position: relative; (poziție: relativă;)
Un element cu position: relative; (poziție: relativă;) este poziționat în raport cu poziția normală.
Setarea proprietățiilor de sus, dreapta, jos și stânga a unui element relativ poziționat (relatively-positioned element) va face ca acesta să fie ajustat departe de poziția normală. Alt conținut nu va fi ajustat pentru a se încadra în niciun spațiu lăsat de element.
Elementul cu position: fixed; (poziție: fix;)
Un element cu position: fixed; (poziție: fix;) este poziționat în raport cu afișajul, ceea ce înseamnă că acesta rămâne întotdeauna în același loc, chiar dacă pagina este defilată. Proprietățile de sus, dreapta, jos și stânga sunt utilizate pentru poziționarea elementului.
Un element fix nu lasă un gol în pagina în care ar fi fost localizat în mod normal.
Elementul cu position: absolute; (poziție: absolută;)
Un element cu position: absolute; (poziție: absolută;) este poziționat în raport cu strămoșul cel mai apropiat poziționat (în loc de poziționat în raport cu vitrina, ca fix).
In orice caz; dacă un element poziționat absolut nu are strămoși poziționați, acesta folosește corpul documentului și se deplasează împreună cu derularea paginii.
Un element „poziționat” este unul a cărui poziție este orice, cu excepția staticii.
Elementul cu position: sticky; (poziție: lipicios;)
Un element cu position: sticky; (poziție: lipicios;) este poziționat în funcție de poziția de derulare a utilizatorului.
Un element lipicios (sticky) trece între relativ și fix, în funcție de poziția de defilare. Este poziționat relativ până când o poziție de offset dată este întâlnită în vitrină - apoi se „lipeste” în loc (ca poziția: fix).
Internet Explorer, Edge 15 și versiunile anterioare nu acceptă poziționarea sticky. Safari necesită un prefix -webkit- (vezi exemplul de mai jos). De asemenea, trebuie să specificați cel puțin una de sus, dreapta, jos sau stânga pentru ca poziționarea sticky să funcționeze.
În acest exemplu, elementul sticky se lipește în partea de sus a paginii (sus: 0), când atingeți poziția de defilare.
Elemente suprapuse (Overlapping Elements)
Când elementele sunt poziționate, se pot suprapune altor elemente.
Proprietatea indexului z specifică ordinea stivei unui element (care element trebuie plasat în fața sau în spatele celorlalte).
Un element poate avea o comandă a stivei pozitivă sau negativă.
Un element cu o ordine de stivă mai mare este întotdeauna în fața unui element cu o ordine de stivă mai mică.
Dacă două elemente poziționate se suprapun fără z - index specificat, elementul poziționat ultimul în codul HTML va fi afișat în partea de sus.
Poziționarea textului într-o imagine
Cum să poziționați textul peste o imagine.
Toate proprietățiile de poziționare CSS: bottom, clip, left, position, top, right, z-index. 
bottom - Setează marginea inferioară a marginii pentru o casetă poziționată
clip - Clipsează un element absolut poziționat
left - Setează marginea din stânga pentru o cutie poziționată
position - Specifică tipul de poziționare pentru un element
right - Setează marginea din dreapta pentru o cutie poziționată
top - Setează marginea superioară a marginii pentru o casetă poziționată
z-index - Setează ordinea stivei unui element

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 Opacitate / Transparență

Proprietatea opacity specifică opacitatea / transparența unui element.
Imagine transparentă
Proprietatea opacity poate lua o valoare între 0,0 și 1,0. Cu cât valoarea este mai mică, cu atât mai transparentă.
IE8 și utilizarea anterioară filter:alpha(opacity=x). X poate lua o valoare de la 0 la 100. O valoare mai mică face ca elementul să fie mai transparent.
Efectul Hover transparent
Proprietatea de opacitate este adesea folosită împreună cu: hover selector pentru a modifica opacitatea cu mouse-over.
Transparent Box
Când se utilizează proprietatea opacity pentru a adăuga transparență pe fundalul unui element, toate elementele sale copil moștenesc aceeași transparență. Acest lucru poate face textul într-un element complet transparent, greu de citit.
Transparență folosind RGBA
Dacă nu doriți să aplicați opacitate elementelor copil, folosiți valorile de culoare RGBA.
Ați aflat de la capitolul nostru de culori CSS, că puteți utiliza RGB ca valoare a culorii. În plus față de RGB, puteți utiliza o valoare a culorii RGB cu un canal alfa (RGBA) - care specifică opacitatea unei culori.
O valoare de culoare RGBA este specificată cu: rgba (roșu, verde, albastru, alfa). Parametrul alfa este un număr între 0,0 (complet transparent) și 1,0 (complet opac).
Text în Transparent Box.

CSS Bară de navigare

Bare de navigare
Navigarea ușor de utilizat este importantă pentru orice site web.
Cu CSS puteți transforma meniuri HTML plictisitoare în bare de navigare cu aspect bun.
Bară de navigare = Lista de legături
O bară de navigare are nevoie de HTML standard ca bază.
Bară de navigare dintr-o listă HTML standard.
O bară de navigare este practic o listă de legături, astfel încât utilizarea elementelor <ul> și <li> are sens perfect.
Link de navigare activ / curent
Adăugați o clasă „activă” la link-ul curent pentru a anunța utilizatorul pe ce pagină se află.
Link-uri centrate & adăugare borders
Adăugați text-align: center la <li> sau <a> pentru a centra legăturile.
Adăugați proprietatea border la <ul> Adăugați un border în jurul barei de navigare. Dacă doriți, de asemenea, borders în interiorul barei de navigare, adăugați un border-bottom la toate elementele <li>, cu excepția ultimului.
Full-height Fixed Vertical Navbar
Bară de navigare orizontală
Există două moduri de a crea o bară de navigare orizontală. Utilizarea elementelor din linie interioară sau flotantă.
Articole de listă inline
O modalitate de a construi o bară de navigare orizontală este de a specifica elementele <li> ca inline, pe lângă codul „standard” de mai sus.
display: inline; - În mod implicit, elementele <li> sunt elemente de tip block. Aici, eliminăm pauzele de linie înainte și după fiecare articol din listă, pentru a le afișa pe o singură linie.
Floating List Items
Un alt mod de a crea o bară de navigare orizontală este să float elementele <li> și să specifici un layout pentru link-urile de navigare.
Link de navigare activ / curent
Adăugați o clasă „active” la link-ul curent pentru a anunța utilizatorul pe ce pagină se află.
Link-uri aliniere dreapta (Right-align links)
Aliniați legăturile din dreapta, plutind elementele din listă spre dreapta (float: right;):
Border Dividers
Adăugați proprietatea border-right la <li> pentru a crea divizori de legături.
Fixed Navigation Bar
Faceți ca bara de navigare să rămână în partea de sus sau de jos a paginii, chiar și atunci când utilizatorul derulează pagina.
Fixed Top
Fixed Bottom
Bară orizontală gri
Sticky Navbar
Adăugați position: sticky; la <ul> pentru a crea sticky navbar.
Un element sticky trece între relativ și fix, în funcție de poziția de defilare. Este poziționat relativ până când o poziție dată de offset este întâlnită în viewport - apoi se „lipeste”la loc (ca position:fixed).
Internet Explorer, Edge 15 și versiunile anterioare nu acceptă poziționarea sticky. Safari necesită un prefix -webkit- (vezi exemplul de mai sus). De asemenea, trebuie să specificați cel puțin una de sus, dreapta, jos sau stânga pentru ca poziționarea sticky să funcționeze.
Responsive Topnav
Cum să utilizați interogări media CSS pentru a crea o navigare de sus.
Responsive Sidenav
Cum să utilizați interogări media CSS pentru a crea o navigare receptivă.
Dropdown Navbar
Cum să adăugați un meniu derulant într-o bară de navigare.

CSS Website Layout

Website Layout
Un site web este adesea împărțit în anteturi, meniuri, conținut și un subsol(headers, menus, content și footer).
Antet (Header)
Un antet este de obicei situat în partea de sus a site-ului web (sau chiar sub un meniu de navigare de sus). Adesea conține un logo sau numele site-ului.
Bară de navigare (Navigation Bar)
O bară de navigare conține o listă de link-uri pentru a ajuta vizitatorii care navighează pe site-ul dvs. web.
Conţinut (Content)
Aspectul din această secțiune depinde adesea de utilizatorii vizați. Cea mai comună dispunere este una (sau combinarea lor) dintre următoarele:
1-column - (adesea folosit pentru browserele mobile)
2-column - (adesea folosit pentru tablete și laptopuri)
3-column layout  - (utilizată doar pentru desktopuri)
Coloane inegale (Unequal Columns)
Conținutul principal este cea mai mare și cea mai importantă parte a site-ului dvs.
Este comună cu lățimile inegale ale coloanei, astfel încât cea mai mare parte a spațiului este rezervată conținutului principal. Conținutul lateral (dacă există) este adesea folosit ca o navigare alternativă sau pentru a specifica informații relevante pentru conținutul principal. Modificați lățimile după cum doriți, amintiți-vă doar că ar trebui să adauge până la 100% în total.
Subsol (Footer)
Subsolul este plasat în partea de jos a paginii. Adesea conține informații precum copyright și informații de contact.
Responsive Website Layout
Folosind o parte din codul CSS de mai sus, putem crea un site web responsiv, care variază între două coloane și coloane cu lățime completă, în funcție de lățimea ecranului.

CSS Colțuri rotunjite

CSS Colțuri rotunjite
Cu proprietatea CSS border-radius, puteți da oricărui element "colțuri rotunjite" (rounded corners).
Proprietate CSS border-radius
Proprietatea CSS border-radius definește raza colțurilor unui element.
Această proprietate vă permite să adăugați colțuri rotunjite la elemente!
Colțuri rotunjite (rounded corners) pentru un element cu o culoare de fundal specificată.
Colțuri rotunjite (rounded corners) pentru un element cu bordură.
Colțuri rotunjite (rounded corners) pentru un element cu o imagine de fundal.
Proprietatea „border-radius” este de fapt o proprietate de tip shorthand pentru proprietățiile border-top-left-radius, border-top-right-radius, border-bottom-right-radius și border-bottom-left-radius.
CSS border-radius - Specificați fiecare colț
Proprietatea border-radius poate avea de la una până la patru valori.
Patru valori - border-radius: 15px 50px 30px 5px; (prima valoare se aplică colțului din stânga sus(top-left corner), a doua valoare se aplică colțului din dreapta sus(top-right corner), a treia valoare se aplică colțului din dreapta jos(bottom-right corner) și a patra valoare se aplică colțului din stânga jos(bottom-left corner)).
Trei valori - border-radius: 15px 50px 30px; (prima valoare se aplică colțului din stânga sus(top-left corner), a doua valoare se aplică colțurilor din dreapta sus și din stânga jos(top-right și bottom-left corners) și a treia valoare se aplică colțului din dreapta jos(bottom-right corner)).
Două valori - border-radius: 15px 50px; (prima valoare se aplică colțurilor din stânga sus și din dreapta jos(top-left și bottom-right corners), iar a doua valoare se aplică colțurilor din dreapta sus și din stânga jos(top-right și bottom-left corners)).
O valoare - border-radius: 15px; (valoarea se aplică la toate cele patru colțuri, care sunt rotunjite în mod egal).
Proprietăți CSS Rounded Corners
border-radius O proprietate shorthand pentru setarea tuturor celor patru chenare - * - * - proprietăți radius.
border-top-left-radius Definește forma marginii din colțul din stânga sus.
border-top-right-radius Definește forma marginii din colțul din dreapta sus.
border-bottom-right-radius Definește forma marginii din colțul din dreapta jos.
border-bottom-left-radius Definește forma marginii din colțul din stânga jos.

CSS Border Images

CSS Border Images
Cu proprietatea CSS border-image, puteți seta o imagine care să fie utilizată ca border în jurul unui element.
Proprietatea CSS border-image
Proprietatea CSS border-image vă permite să specificați o imagine care trebuie utilizată în loc de bordura normală din jurul unui element.
Proprietatea are trei părți:
Imaginea utilizată ca border.
Unde să tăiați imaginea.
Definiți dacă secțiunile din mijloc trebuie repetate sau întinse.
Proprietatea border-image ia imaginea și o taie în nouă secțiuni, precum o placă tic-tac-toe. Apoi plasează colțurile la colțuri, iar secțiunile din mijloc sunt repetate sau întinse după cum specificați.
Pentru ca border-image să funcționeze, elementul are nevoie și de setul de proprietăți border!
Secțiunile din mijloc ale imaginii sunt repetate pentru a crea border.
Secțiunile din mijloc ale imaginii sunt întinse pentru a crea border.
Proprietatea border-image este de fapt o proprietate de tip shorthand pentru proprietățile border-image-source, border-image-slice, border-image-width, border-image-outset și border-image-repeat.
CSS border-image - Different Slice Values
Different slice values schimbă complet aspectul border-ului.
Proprietățiile CSS Border Image
border-image - O proprietate shorthand pentru setarea tuturor proprietăților border-image- *.
border-image-source - Specifică calea către imaginea care va fi utilizată ca border.
border-image-slice - Specifică modul de tăiere a border image.
border-image-width - Specifică lățimile pentru border image.
border-image-outset - Specifică cantitatea prin care se extinde zona border image dincolo de border box.
border-image-repeat - Specifică dacă border image trebuie repetată, rotunjită sau întinsă.

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 Efecte de umbră

Efecte de umbră CSS
Cu CSS puteți adăuga umbră textului și elementelor.
Proprietăți: text-shadow, box-shadow.
Umbre multiple (Multiple Shadows)
Pentru a adăuga mai mult de o umbră textului, puteți adăuga o listă de umbre separate de virgule.
Umbră de strălucire neon roșu și albastru.
Text alb cu umbra neagră, albastră și albastru închis
Puteți utiliza, de asemenea, proprietatea text-shadow pentru a crea un chenar simplu în jurul unui text (fără umbre)
Proprietatea CSS box-shadow
Proprietatea CSS box-shadow aplică umbre pentru elemente.
În cea mai simplă utilizare, specificați doar umbra orizontală și umbra verticală.
Apoi, adăugați o culoare la umbră.
Apoi, adăugați un efect de estompare la umbră.
Puteți adăuga, de asemenea, umbre la pseudo-elemente ::before și ::after pentru a crea un efect interesant.
Cards
Un exemplu de utilizare a proprietății box-shadow pentru a crea paper-like cards.
Proprietăți CSS Shadow
box-shadow - Adaugă una sau mai multe umbre la un element.
text-shadow - Adăugă una sau mai multe umbre la un text.

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 Tranziții

Tranziții CSS
Tranzițiile CSS vă permit să modificați valorile proprietății fără probleme, pe o durată dată.
În acest capitol veți afla despre următoarele proprietăți: transition, transition-delay, transition-duration, transition-property, transition-timing-function
Asistență browser pentru tranziții
Prefixuri specifice browserului
Unele browsere mai vechi au nevoie de prefixuri specifice (-webkit-) pentru a înțelege proprietățiile de tranziție
Cum se utilizează tranzițiile CSS?
Pentru a crea un efect de tranziție, trebuie să specificați două lucruri:
proprietatea CSS la care doriți să adăugați un efect
durata efectului
Dacă partea de durată nu este specificată, tranziția nu va avea nici un efect, deoarece valoarea implicită este 0.
Un element <div> 100px * 100px red. Elementul <div> a specificat, de asemenea, un efect de tranziție pentru proprietatea de lățime, cu o durată de 2 secunde.
Efectul de tranziție va începe atunci când proprietatea CSS (lățimea/width) specificată modifică valoarea.
Acum, să specificăm o nouă valoare pentru proprietatea de lățime/width atunci când un utilizator se alătură peste elementul <div>:
Atunci când cursorul se decuplează din element, acesta se va schimba treptat înapoi la stilul său original.
Modificați mai multe valori ale proprietății
Efect de tranziție atât pentru proprietatea lățimii (width), cât și pentru înălțime (height), cu o durată de 2 secunde pentru lățime (width) și 4 secunde pentru înălțime (height).
Specificați curba de viteză (speed curve) a tranziției
Proprietatea transition-timing-function specifică curba de viteză (speed curve) a efectului de tranziție.
Proprietatea transition-timing-function poate avea următoarele valori:
ease - specifică un efect de tranziție cu început lent, apoi rapid, apoi sfârșit lent (acest lucru este implicit)
linear - specifică un efect de tranziție cu aceeași viteză de la început până la sfârșit
ease-in - specifică un efect de tranziție cu pornire lentă
ease-out - specifică un efect de tranziție cu sfârșit lent
ease-in-out - specifică un efect de tranziție cu început și sfârșit lent
cubic-bezier(n,n,n,n) - vă permite să definiți propriile valori într-o funcție cub-bezier
Întârzie efectul de tranziție (Delay the Transition Effect)
Proprietatea transition-delay specifică o întârziere (în secunde) pentru efectul de tranziție.
Tranziție + transformare (Transition + Transformation)
Proprietățiile CSS transition pot fi specificate una câte una
Proprietatea shorthand transition
Proprietăți CSS transition:
transition - O proprietate scurtă pentru setarea celor patru proprietăți de tranziție într-o singură proprietate
transition-delay - Specifică o întârziere (în secunde) pentru efectul de tranziție
transition-duration - Specifică câte secunde sau milisecunde durează un efect de tranziție
transition-property - Specifică numele proprietății CSS pentru care este efectul de tranziție
transition-timing-function - Specifică curba de viteză a efectului de tranziție

CSS Animații

Animații CSS
CSS permite animarea elementelor HTML fără a utiliza JavaScript sau Flash!
În acest capitol veți afla despre următoarele proprietăți: @keyframes, animation-name, animation-duration, animation-delay, animation-iteration-count, animation-direction, animation-timing-function, animation-fill-mode, animation.
Asistență browser pentru animații (Browser Support for Animations)
Prefixuri specifice browserului
Unele browsere mai vechi au nevoie de prefixe specifice (-webkit-) pentru a înțelege proprietățiile de animație.
Ce sunt animațiile CSS?
O animație permite unui element să se schimbe treptat de la un stil la altul.
Puteți modifica câte proprietăți CSS doriți, de câte ori doriți.
Pentru a utiliza animația CSS, trebuie mai întâi să specificați câteva cadre cheie pentru animație.
Cadrele cheie conțin ce stiluri va avea elementul în anumite momente.
Regula @keyframes
Când specificați stiluri CSS din regula @keyframes, animația se va schimba treptat de la stilul curent la noul stil în anumite momente.
Pentru ca animația să funcționeze, trebuie să legați animația de un element.
Legarea animației „exemplu” de elementul <div>. Animația va dura 4 secunde și va schimba treptat culoarea de fundal a elementului <div> de la „red” la „yellow”.
Proprietatea animation-duration definește cât timp ar trebui să dureze o animație. Dacă proprietatea animation-duration nu este specificată, nu va apărea nicio animație, deoarece valoarea implicită este 0s (0 secunde).
Am specificat când stilul se va schimba folosind cuvintele cheie „from” și „to” (care reprezintă 0% (start) și 100% (complet)).
Este posibilă utilizarea procentului. Utilizând procente, puteți adăuga oricâte modificări de stil doriți.
Schimbarea culorii de fundal (background-color) a elementului <div> atunci când animația este completă 25%, 50% completă și din nou când animația este 100% completă:
Întârziere animație (Delay an Animation)
Proprietatea animation-delay specifică o întârziere pentru începerea unei animații.
De asemenea, sunt permise valori negative. Dacă utilizați valori negative, animația va începe ca și cum ar fi jucat deja N secunde.
Setați de câte ori ar trebui să ruleze o animație
Proprietatea animation-iteration-count specifică numărul pe care trebuie să-l ruleze o animație.
Valoarea „infinite”  - pentru a face animația să continue pentru totdeauna
Rulați animația în direcție inversă sau cicluri alternative
Proprietatea animation-direction specifică dacă o animație trebuie să fie redată înainte, înapoi sau în cicluri alternative.
Proprietatea animation-direction poate avea următoarele valori:
normal - Animația este redată normal (înainte). Aceasta este implicită
reverse - animația este redată în sens invers (înapoi)
alternate - animația este redată mai întâi, apoi înapoi
alternate-reverse - animația este redată mai întâi înapoi, apoi înainte
Rulare animație în sens invers (înapoi)(backwards).
Valoarea "alternate" pentru a face ca animația să fie difuzată mai întâi înainte (forwards), apoi înapoi (backwards).
Valoarea „alternate-reverse” pentru a face ca animația să fie rulată mai întâi înapoi(backwards), apoi înainte (forwards)
Rulați animația în direcție inversă sau cicluri alternative
Proprietatea animation-direction specifică dacă o animație trebuie să fie redată înainte, înapoi sau în cicluri alternative.
Proprietatea animation-direction poate avea următoarele valori:
normal - Animația este redată normal (înainte)(forwards). Aceasta este implicită
reverse - animația este redată în sens invers (înapoi)
alternate - animația este redată mai întâi înainte(forwards), apoi înapoi(backwards)
alternate-reverse - animația este redată mai întâi înapoi(backwards), apoi înainte(forwards)
Rulare animație în sens invers (înapoi)(backwards):
Valoarea "alternate" pentru a face ca animația să fie difuzată mai întâi înainte (forwards), apoi înapoi (backwards).
Valoarea „alternate-reverse” pentru a face ca animația să fie rulată mai întâi înapoi(backwards), apoi înainte(forwards).
Precizați curba de viteză (Speed Curve) a animației
Proprietatea animation-timing-function specifică curba de viteză (speed curve) a animației.
Proprietatea animation-timing-function  poate avea următoarele valori:
ease - Specifică o animație cu început lent, apoi rapid, apoi sfârșit încet (aceasta este implicit)
linear - Specifică o animație cu aceeași viteză de la început până la sfârșit
ease-in - Specifică o animație cu pornire lentă
ease-out - Specifică o animație cu sfârșit lent
ease-in-out - Specifică o animație cu început și sfârșit lent
cubic-bezier(n,n,n,n) - Vă permite să definiți propriile valori într-o funcție cubic-bezier
Precizați modul de completare (fill-mode) pentru o animație
Animațiile CSS nu afectează un element înainte de a fi redat primul cadru-cheie (keyframe) sau după ce ultimul cadru-cheie (keyframe) este redat. Proprietatea animation-fill-mode poate înlocui acest comportament.
Proprietatea animation-fill-mode specifică un stil pentru elementul țintă atunci când animația nu se joacă (înainte de a începe, după ce se termină, sau ambele).
Proprietatea animation-fill-modepoate avea următoarele valori:
none - Valoare implicită. Animația nu va aplica niciun stil la element înainte sau după executarea acestuia
forwards - Elementul va pastra valorile stilului setate de ultimul cadru cheie (keyframe) (depinde de animation-direction și animation-iteration-count)
backwards - Elementul va obține valorile de stil setate de primul cadru-cheie (keyframe) (depinde de animation-direction) și îl va păstra în timpul perioadei de întârziere a animației
both - Animația va respecta regulile atât în ​​față cât și înapoi (forwards și backwards), extinzând proprietățiile de animație în ambele direcții
Elementul <div> păstrează valorile stilului de la ultimul cadru cheie (keyframe) la încheierea animației.
Exemple animation-fill-mode
Elementul <div> obține valorile style setate de primul cadru cheie (keyframe) înainte de începerea animației (în perioada de întârziere a animației (animation-delay)).
Elementul <div> obține valorile style setate de primul cadru cheie (keyframe) înainte de începerea animației și să păstreze valorile stilului de la ultimul cadru de cheie (keyframe) atunci când animația se încheie.
Proprietatea Shorthand Animation
Proprietăți CSS animation
@keyframes - Specifică codul de animație
animation - O proprietate shorthand pentru setarea tuturor proprietăților de animație
animation-delay - Specifică o întârziere pentru începerea unei animații
animation-direction - Specifică dacă o animație trebuie să fie redată înainte, înapoi sau în cicluri alternative
animation-duration - Specifică cât timp trebuie să dureze o animație pentru a finaliza un ciclu
animation-fill-mode - Specifică un stil pentru element atunci când animația nu se joacă (înainte de a începe, după ce se termină sau ambele)
animation-iteration-count - Specifică numărul de ori când trebuie să fie redată o animație
animation-name - Specifică numele animației @keyframes
animation-play-state - Specifică dacă animația este în curs de execuție sau în pauză
animation-timing-function - Specifică curba de viteză a animației

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 Paginare

CSS Paginare
Aflați cum puteți crea o paginare responsive folosind CSS.
Paginare simplă
Dacă aveți un site web cu o mulțime de pagini, poate doriți să adăugați un fel de paginare la fiecare pagină.
Paginarea activă și hoverable
Evidențiați pagina curentă cu o clasă .active și folosiți selectorul :hover pentru a schimba culoarea fiecărei linii de pagină atunci când deplasați mouse-ul peste ele.
Butoane rotunjite active și hoverable
Dacă doriți un buton rotund „active” și „hover” adăugați proprietatea border-radius.
Efect de tranziție hoverable (Hoverable Transition Effect)
Adăugați proprietatea transition la link-urile paginii pentru a crea un efect de tranziție în timpul trecerii (hover).
Paginare mărginită (Bordered Pagination)
Utilizați proprietatea border pentru a adăuga borduri la paginație.
Margini rotunjite (Rounded Borders)
Adăugați rounded borders la prima și ultima dvs. legătură (link) din paginare.
Spațiu între legături (Space Between Links)
Adăugați proprietatea margin dacă nu doriți să grupați linkurile paginii.
Mărimea paginării (Pagination Size)
Modificați dimensiunea paginării cu proprietatea font-size.
Paginarea centrată (Centered Pagination)
Pentru a centra paginarea, wrap un element de tip container (cum ar fi <div>) în jurul lui cu text-align:center
Paginare Breadcrumbs
O altă variantă a paginării este așa-numita "breadcrumbs"

CSS Coloane multiple

CSS Coloane multiple
Layout cu mai multe coloane CSS( CSS Multi-column Layout)
Aspectul cu mai multe coloane CSS (multi-column layout) permite definirea ușoară a mai multor coloane de text - la fel ca în ziare.
Proprietăți CSS Multi-column
În acest capitol veți afla despre următoarele proprietăți CSS multi-column: column-count, column-gap, column-rule-style, column-rule-width, column-rule-color, column-rule, column-span, column-width.
Asistență browser (Browser Support)
CSS Creează mai multe coloane (CSS Create Multiple Columns)
Proprietatea column-count specifică numărul de coloane în care trebuie divizat un element.
Impărțirea textului din elementul <div> în 3 coloane.
CSS Specificați decalajul dintre coloane (CSS Specify the Gap Between Columns)
Proprietatea column-gap specifică decalajul dintre coloane.
Specifică o distanță de 40 de pixeli între coloane.
CSS Reguli coloane (CSS Column Rules)
Proprietatea column-rule-style specifică stilul regulii dintre coloane.
Proprietatea column-rule-width specifică lățimea regulii între coloane.
Proprietatea column-rule-color specifică culoarea regulii dintre coloane.
Proprietatea column-rule este o proprietate shorthand pentru setarea tuturor proprietăților column-rule- * de mai sus.
Stabilre lățimea, stilul și culoarea (width, style, color) regulii între coloane.
Specificați câte coloane ar trebui să se întindă (Specify How Many Columns an Element Should Span)
Proprietatea column-span specifică câte coloane ar trebui să se întindă (span) între un element.
Următorul exemplu specifică faptul că elementul <h2> ar trebui să se întindă (span) pe toate coloanele.
Specificați Lățimea coloanei (Specify The Column Width)
Proprietatea coloană-lățime specifică o lățime sugerată, optimă pentru coloane.
Specifică faptul că lățimea optimă sugerată pentru coloane ar trebui să fie de 100px.
Proprietăți CSS Multi-columns
column-count - Specifică numărul de coloane în care trebuie divizat un element
column-fill - Specifică modul de completare a coloanelor
column-gap - Specifică decalajul dintre coloane
column-rule - O proprietate shorthand pentru setarea tuturor proprietăților column-rule- *
column-rule-color - Specifică culoarea regulii dintre coloane
column-rule-style - Specifică stilul regulii dintre coloane
column-rule-width - Specifică lățimea regulii dintre coloane
column-span - Specifică câte coloane ar trebui să se întindă pe un element
column-width - Specifică o lățime sugerată, optimă pentru coloane
columns - O proprietate shorthand pentru setarea lățimii coloanei și a numărului de coloane

 

CSS Interogări media - Exemple

Interogări media CSS - exemple
Interogările media sunt o tehnică populară pentru livrarea unei foi de stil adaptate diferitelor dispozitive. Pentru a demonstra un exemplu simplu, putem schimba culoarea de fundal pentru diferite dispozitive.
Interogări media pentru meniuri
În acest exemplu, folosim interogări media pentru a crea un meniu de navigare responsive, care variază în ceea ce privește designul pe diferite dimensiuni de ecran.
Interogări media pentru coloane
O utilizare obișnuită a interogărilor media este de a crea un aspect flexibil (flexible layout). În acest exemplu, creem un aspect (layout) care variază între patru, două și full-width coloane, în funcție de diferitele dimensiuni ale ecranului.
Un mod mai modern de a crea column layouts este să folosiți CSS Flexbox. Cu toate acestea, nu este acceptat în Internet Explorer 10 și versiunile anterioare. Dacă aveți nevoie de asistență IE6-10, folosiți floats.
Ascundeți elementele cu interogări media
O altă utilizare obișnuită a interogărilor media este de a ascunde elemente pe diferite dimensiuni ale ecranului.
Modificați dimensiunea fontului cu interogări media
De asemenea, puteți utiliza interogări media pentru a modifica dimensiunea fontului (font size) unui element pe diferite dimensiuni ale ecranului.
Galerie de imagini flexibile
Folosim interogări media împreună cu flexbox pentru a crea o galerie de imagini responsive.
Site web flexibil
Utilizăm interogări media împreună cu flexbox pentru a crea un site web responsive, care conține o bară de navigare flexibilă și conținut flexibil.
Orientare: Portret / Peisaj
Interogările media pot fi, de asemenea, utilizate pentru a schimba aspectul (layout) unei pagini, în funcție de orientarea browserului.
Puteți avea un set de proprietăți CSS care se vor aplica numai atunci când fereastra browserului este mai largă decât înălțimea sa, o așa-numită orientare „Peisaj” (Landscape):
Utilizați o culoare de fundal lightblue (background color) dacă orientarea este în modul peisaj (landscape):
Folosind o valoare suplimentară: adăugăm o interogare media suplimentară la cea existentă folosind virgulă (aceasta se va comporta ca un operator OR).

CSS Responsive Web Design - Interogări media

Responsive Web Design - Interogări media
Ce este o interogare media?
Interogarea media este o tehnică CSS introdusă în CSS3.
Utilizează regula @media pentru a include un block de proprietăți CSS numai dacă o anumită condiție este adevărată.
Dacă fereastra browserului este de 600px sau mai mică, culoarea de fundal (background color) va fi deschisă la culoare (lightblue).
Adăugați un Breakpoint
Mai devreme în acest tutorial am făcut o pagină web cu rânduri și coloane și a fost responzive, dar nu arăta bine pe un ecran mic.
Interogările media (media queries) vă pot ajuta. Putem adăuga un punct de break (breakpoint) unde anumite părți ale designelui se vor comporta diferit pe fiecare parte a punctului de break (breakpoint).
Utilizați o interogare media (media queries) pentru a adăuga un punct de break (breakpoint) la 768px:
Când ecranul (fereastra browserului) devine mai mic decât 768px, fiecare coloană ar trebui să aibă o lățime de 100%.
Întotdeauna design pentru mobil întâi
Mobile First înseamnă proiectare pentru mobil înainte de proiectare pentru desktop sau orice alt dispozitiv (Acest lucru va face afișarea paginii mai rapidă pe dispozitive mai mici).
Aceasta înseamnă că trebuie să facem unele modificări în CSS-ul nostru.
În loc să schimbăm stilurile când lățimea devine mai mică de 768px, ar trebui să schimbăm designul când lățimea devine mai mare de 768px. Acest lucru va face în primul rând proiectarea noastră mobilă.
Puteți adăuga câte breakpoints doriți.
Vom insera, de asemenea, un punct de break (breakpoint) între tablete și telefoane mobile.
Facem acest lucru prin adăugarea a încă o interogare media (media query ) (la 600px) și un set de clase noi pentru dispozitive mai mari de 600px (dar mai mici decât 768px):
Rețineți că cele două seturi de clase sunt aproape identice, singura diferență este denumirea (col- și col-s-).
Breakpoints tipice dispozitivului (Typical Device Breakpoints)
Există tone de ecrane și dispozitive cu înălțimi și lățimi diferite, așa că este greu să creezi un punct de break (breakpoint) exact pentru fiecare dispozitiv. Pentru a menține lucrurile simple, puteți viza cinci grupuri.
Orientare: Portret / Peisaj (Landscape)
Interogările media (media queries) pot fi, de asemenea, utilizate pentru a schimba aspectul (layout) unei pagini, în funcție de orientarea browserului.
Puteți avea un set de proprietăți CSS care se vor aplica numai atunci când fereastra browserului este mai largă decât înălțimea sa, o așa-numită orientare „Peisaj” (Lanscape):
Pagina web va avea un fundal luminos (lightblue background) dacă orientarea este în modul peisaj (lanscape).
Ascundeți elementele cu interogări media (Hide Elements With Media Queries)
O altă utilizare obișnuită a interogărilor media (media queries) este de a ascunde elemente pe dimensiuni diferite de ecran.
Modificați dimensiunea fontului cu interogări media (Change Font Size With Media Queries)
De asemenea, puteți utiliza interogări media (media queries) pentru a modifica dimensiunea fontului unui element pe diferite dimensiuni ale ecranului.

CSS Responsive Web Design - Imagini

Responsive Web Design - Images
Utilizarea proprietății Width
Dacă proprietatea lățimii (width) este setată la un procent și înălțimea este setată la „auto”, imaginea va fi receptivă și va scala în sus și în jos.
Imaginea poate fi redusă pentru a fi mai mare decât dimensiunea inițială. O soluție mai bună, în multe cazuri, va fi utilizarea în schimb a proprietății cu lățimea maximă.
Imaginile de fundal (Background Images) pot răspunde, de asemenea, la redimensionare și scalare (resizing și scaling).
Dacă proprietatea background-size este setată pe „contain”, imaginea de fundal (background Images) se va scala și va încerca să se potrivească zonei de conținut. Cu toate acestea, imaginea își va păstra raportul de aspect (relația proporțională între lățimea și înălțimea imaginii (width și height)).
Dacă proprietatea background-size este setată pe „100% 100%”, imaginea de fundal (background image) se va întinde pentru a acoperi întreaga zonă de conținut.
Dacă proprietatea background-size este setată pe „cover”, imaginea de fundal (background image) se va scala pentru a acoperi întreaga zonă de conținut. Observați că valoarea „cover” păstrează raportul de aspect (aspect ratio), iar o parte din imaginea de fundal (background image) poate fi tăiată.
Imagini diferite pentru dispozitive diferite
O imagine mare poate fi perfectă pe un ecran mare al unui computer, dar inutilă pe un dispozitiv mic. De ce să încărcați o imagine mare atunci când trebuie să o măriți în jos? Pentru a reduce încărcarea sau pentru orice alte motive, puteți utiliza interogări media (media queries) pentru a afișa imagini diferite pe dispozitive diferite.
Puteți utiliza interogarea media (media query) min-device-width, în loc de min-width, care verifică lățimea dispozitivului, în loc de lățimea browserului. Atunci imaginea nu se va schimba când redimensionați fereastra browserului.
Elementul HTML5 <picture>
HTML5 a introdus elementul <picture>, care vă permite să definiți mai multe imagini.
Asistență browser (Browser Support)
Elementul <picture> funcționează similar cu elementele <video> și <audio>. Configurați surse diferite, iar prima sursă care se potrivește preferințelor este cea utilizată:
Atributul srcset este necesar și definește sursa imaginii.
Atributul media este opțional și acceptă interogările media (media queries) pe care le găsiți în regula CSS @media.
De asemenea, ar trebui să definiți un element <img> pentru browserele care nu acceptă elementul <picture>.

CSS Grid Container

Grid Container
Pentru a face ca un element HTML să se comporte ca un container grid, trebuie să setați proprietatea display la grid sau la inline-grid.
Containerele grid constau din elemente grid, plasate în coloane și rânduri (columns și rows).
Proprietatea grid-template-columns
Proprietatea grid-template-columns definește numărul de coloane din aspectul gridului dvs. (grid layout) și poate defini lățimea (width) fiecărei coloane.
Valoarea este un space-separated-list, unde fiecare valoare definește lungimea coloanei respective.
Dacă doriți ca aspectul gridului (grid layout) să conțină 4 coloane, specificați lățimea (width) celor 4 coloane sau „auto” dacă toate coloanele trebuie să aibă aceeași lățime (width).
Proprietatea grid-template-rows definește înălțimea (height) fiecărui rând (row).
Valoarea este un space-separated-list, unde fiecare valoare definește înălțimea (height) rândului respectiv (row).
Proprietatea justify-content este utilizată pentru alinierea întregului grid în interiorul containerului.
Lățimea (width) totală a gridului trebuie să fie mai mică decât lățimea (width) containerului pentru ca proprietatea justify-content să aibă vreun efect.
Proprietatea align-content este utilizată pentru alinierea verticală (vertically align) a întregului grid în interiorul containerului.
Înălțimea (height) totală a gridului trebuie să fie mai mică decât înălțimea (height) containerului pentru ca proprietatea align-content să aibă vreun efect.

SQL INSERT INTO

Instrucțiunea SQL INSERT INTO
Instrucțiunea INSERT INTO este utilizată pentru a insera înregistrări noi într-un tabel.
Sintaxa INSERT INTO
Este posibil să scrieți instrucțiunea INSERT INTO în două moduri.
Prima modalitate specifică atât numele coloanelor, cât și valorile care trebuie introduse:
INSERT INTO table_name (column1, column2, column3, ...)
VALUES (value1, value2, value3, ...);
Dacă adăugați valori pentru toate coloanele tabelului, nu este necesar să specificați numele coloanelor din interogarea SQL. Cu toate acestea, asigurați-vă că ordinea valorilor este în aceeași ordine cu coloanele din tabel.
Sintaxa INSERT INTO ar fi următoarea:
INSERT INTO table_name
VALUES (value1, value2, value3, ...);
Exemplu INSERT INTO
Următoarea instrucțiune SQL introduce o nouă înregistrare în tabelul "Customers":
INSERT INTO Customers (CustomerName, ContactName, Address, City, PostalCode, Country)
VALUES ('Cardinal', 'Tom B. Erichsen', 'Skagen 21', 'Stavanger', '4006', 'Norway');
Inserați date numai în coloane specificate
De asemenea, este posibil să inserați date doar în coloane specifice.
Următoarea instrucțiune SQL va insera o înregistrare nouă, dar va insera doar date în coloanele „CustomerName”, „City” și „Country” (CustomerID va fi actualizat automat):
INSERT INTO Customers (CustomerName, City, Country)
VALUES ('Cardinal', 'Stavanger', 'Norway');

SQL IN

Operatorul SQL IN
Operatorul IN vă permite să specificați mai multe valori într-o clauză WHERE.
Operatorul IN este un manual pentru mai multe condiții.
Sintaxa IN
SELECT column_name(s)
FROM table_name
WHERE column_name IN (value1, value2, ...);
sau:
SELECT column_name(s)
FROM table_name
WHERE column_name IN (SELECT STATEMENT);
Exemple de operator IN
Următoarea declarație SQL selectează toți clienții care se află în „Germania”, „Franța” sau „Marea Britanie”:
SELECT * FROM Customers
WHERE Country IN ('Germania', 'Franța', 'Marea Britanie');
Următoarea instrucțiune SQL selectează toți clienții care nu se află în „Germania”, „Franța” sau „Marea Britanie”:
SELECT * FROM Customers
WHERE Country NOT IN ('Germania', 'Franța”', 'Marea Britanie');
Următoarea instrucțiune SQL selectează toți clienții care provin din aceleași țări ca furnizorii:
SELECT * FROM Customers
WHERE Country IN (SELECT Country FROM Suppliers);



 

SQL Comentarii

Comentarii SQL
Comentariile sunt utilizate pentru a explica secțiunile instrucțiunilor SQL sau pentru a preveni executarea de instrucțiuni SQL.
Exemplele din acest capitol nu vor funcționa în Firefox și Microsoft Edge!
Comentariile nu sunt acceptate în bazele de date Microsoft Access. Firefox și Microsoft Edge folosesc baza de date Microsoft Access în exemplele noastre.
Comentarii cu o singură linie
Comentariile cu o singură linie încep cu -.
Orice text între - și sfârșitul liniei va fi ignorat (nu va fi executat).
Următorul exemplu utilizează un comentariu cu o singură linie ca explicație:
--Select all:
SELECT * FROM Customers;
Următorul exemplu utilizează un comentariu cu o singură linie pentru a ignora sfârșitul unei linii:
SELECT * FROM Customers -- WHERE City='Berlin';
Următorul exemplu utilizează un comentariu cu o singură linie pentru a ignora o afirmație:
--SELECT * FROM Customers;
SELECT * FROM Products;
Comentarii cu mai multe linii
Comentariile cu mai multe linii încep cu / * și se termină cu * /.
Orice text între / * și * / va fi ignorat.
Următorul exemplu utilizează un comentariu cu mai multe linii ca explicație:
/*Selectați toate coloanele
din toate înregistrările
în tabelul Clienți (Customers): * /
SELECT * FROM Customers;
Următorul exemplu utilizează un comentariu cu mai multe linii pentru a ignora multe afirmații:
/*SELECT * FROM Customers;
SELECT * FROM Products;
SELECT * FROM Orders;
SELECT * FROM Categories;*/
SELECT * FROM Suppliers;
Pentru a ignora doar o parte dintr-o afirmație, utilizați și / * * / comentariu.
Următorul exemplu utilizează un comentariu pentru a ignora o parte a unei linii:
SELECT CustomerName, /*City,*/ Country FROM Customers;
Următorul exemplu utilizează un comentariu pentru a ignora o parte dintr-o afirmație:
SELECT * FROM Customers WHERE (CustomerName LIKE 'L%'
OR CustomerName LIKE 'R%' /*OR CustomerName LIKE 'S%'
OR CustomerName LIKE 'T%'*/ OR CustomerName LIKE 'W%')
AND Country='USA'
ORDER BY CustomerName;

SQL ALTER TABLE

SQL ALTER TABLE
Instrucțiunea SQL ALTER TABLE
Instrucțiunea ALTER TABLE este utilizată pentru a adăuga, șterge sau modifica coloane dintr-un tabel existent.
Instrucțiunea ALTER TABLE este de asemenea folosită pentru a adăuga și a scădea diverse constrângeri pe un tabel existent.
ALTER TABLE - ADD Column
Pentru a adăuga o coloană într-un tabel, utilizați următoarea sintaxă:
ALTER TABLE table_name
ADD column_name datatype;
Următorul SQL adaugă o coloană „Email” la tabelul „Clienți” (Customers):
ALTER TABLE Customers
ADD Email varchar(255);
ALTER TABLE - DROP COLUMN
Pentru a șterge o coloană dintr-un tabel, utilizați următoarea sintaxă (observați că unele sisteme de baze de date nu permit ștergerea unei coloane):
ALTER TABLE table_name
DROP COLUMN column_name;
Următorul SQL șterge coloana „Email” din tabelul „Clienți” (Customers):
ALTER TABLE Customers
DROP COLUMN Email;
ALTER TABLE - ALTER/MODIFY COLUMN
Pentru a modifica tipul de date al unei coloane dintr-un tabel, utilizați următoarea sintaxă:
SQL Server / MS Access:
ALTER TABLE table_name
ALTER COLUMN column_name datatype;
My SQL / Oracle (versiunea anterioară 10G):
ALTER TABLE table_name
MODIFY COLUMN column_name datatype;
Oracle 10G și mai târziu:
ALTER TABLE table_name
MODIFY column_name datatype;
Exemplu SQL ALTER TABLE
Creați tabelul „Persoane” (Persons):
Acum vrem să adăugăm o coloană numită "DateOfBirth" în tabelul "Persoane"(Persons).
Folosim următoarea instrucțiune SQL:
ALTER TABLE Persons
ADD DateOfBirth date;
Observați că noua coloană, "DateOfBirth", este de tip date (data type) și va păstra o dată. Data type specifică ce tip de date poate conține coloana. 
Exemplu Modificați Data Type
Acum dorim să schimbăm tipul de date (Data Type) al coloanei numită „DateOfBirth” din tabelul „Persoane”(Persons).
Folosim următoarea instrucțiune SQL:
ALTER TABLE Persons
ALTER COLUMN DateOfBirth year;
Observați că coloana „DateOfBirth” are acum un tip year și va păstra year într-un format de două sau patru cifre.
Exemplu DROP COLUMN
În continuare, dorim să ștergem coloana numită „DateOfBirth” din tabelul „Persoane”(Persons).
Folosim următoarea instrucțiune SQL:
ALTER TABLE Persons
DROP COLUMN DateOfBirth;

 

SQL CREATE INDEX

SQL CREATE INDEX
Instrucțiunea SQL CREATE INDEX
Instrucțiunea CREATE INDEX este utilizată pentru a crea indexuri în tabele.
Se folosesc indexuri pentru a prelua date din baza de date mai rapid decât in caz contrar. Utilizatorii nu pot vedea indexurile, ci sunt folosite doar pentru a accelera căutările / interogările (searches/queries).
Actualizarea unei tabele cu indexuri necesită mai mult timp decât actualizarea unui tabel fără indexuri (deoarece indexurile au nevoie și de o actualizare). Deci, creați doar indexuri pe coloane care vor fi căutate frecvent.
Sintaxă CREATE INDEX
Creează un index într-un tabel. Valorile duplicate sunt permise:
CREATE INDEX index_name
ON table_name (column1, column2, ...);
Sintaxă  CREATE UNIQUE INDEX 
Creează un index unic pe un tabel. Valorile duplicate nu sunt permise:
CREATE UNIQUE INDEX index_name
ON table_name (column1, column2, ...);
Sintaxa pentru crearea indexurilor variază printre diferite baze de date. Prin urmare: verificați sintaxa pentru a crea indexuri în baza de date.
Exemplu CREATE INDEX
Instrucțiunea SQL de mai jos creează un index numit "idx_lastname" în coloana "LastName" din tabelul "Persoane" (Persons):
CREATE INDEX idx_lastname
ON Persons (LastName);
Dacă doriți să creați un index pe o combinație de coloane, puteți lista numele coloanelor din paranteze, separate prin virgule:
CREATE INDEX idx_pname
ON Persons (LastName, FirstName);
Declarație DROP INDEX (DROP INDEX Statement)
Instrucțiunea DROP INDEX este utilizată pentru a șterge un index dintr-un tabel.
MS Access:
DROP INDEX index_name ON table_name;
SQL Server:
DROP INDEX table_name.index_name;
DB2/Oracle:
DROP INDEX index_name;
MySQL:
ALTER TABLE table_name
DROP INDEX index_name;

SQL Date

SQL Lucrând cu datele
Datele SQL
Partea cea mai dificilă atunci când lucrați cu datele este să vă asigurați că formatul datei pe care încercați să îl inserați se potrivește cu formatul coloanei de date din baza de date.
Atâta timp cât datele dvs. conțin doar porțiunea de date (date portion), întrebările dvs. vor funcționa așa cum vă așteptați. Cu toate acestea, dacă este implicată o porție de timp (time portion), devine mai complicat.
SQL Date Data Types
MySQL vine cu următoarele tipuri de date pentru stocarea date/time în baza de date:
DATE - format YYYY-MM-DD
DATETIME - format: YYYY-MM-DD HH:MI:SS
TIMESTAMP - format: YYYY-MM-DD HH:MI:SS
YEAR - format YYYY or YY
SQL Server vine cu următoarele tipuri de date pentru stocarea date/time în baza de date:
DATE - format YYYY-MM-DD
DATETIME - format: YYYY-MM-DD HH:MI:SS
SMALLDATETIME - format: YYYY-MM-DD HH:MI:SS
TIMESTAMP - format: a unique number (un număr unic)
Tipurile de date (date types) sunt alese pentru o coloană atunci când creați un nou tabel în baza de date!
SQL Lucrul cu date
Puteți compara ușor două date dacă nu este implicată o componentă de timp!
Presupunem că avem tabelul „Comenzi” (Orders):
Acum dorim să selectăm înregistrările cu OrderDate "2008-11-11" din tabel.
Folosim următoarea declarație SELECT:
SELECT * FROM Orders WHERE OrderDate='2008-11-11'
Dacă folosim aceeași declarație SELECT ca mai sus:
SELECT * FROM Orders WHERE OrderDate='2008-11-11'
nu vom obține niciun rezultat! Acest lucru se datorează faptului că interogarea caută doar date fără o porție de timp (time portion).
Pentru a vă menține întrebările simple și ușor de întreținut, nu permiteți componentele timpului în datele dvs.!

PHP Introducere

PHP Introducere
Codul PHP este executat pe server.
HTML
CSS
JavaScript
Ce este PHP?
PHP este un acronim pentru "PHP: Hypertext Preprocessor"
PHP este un limbaj de scripturi de surse deschise, utilizat pe scară largă
Scripturile PHP sunt executate pe server
PHP se poate descărca și utiliza gratuit
PHP este un limbaj uimitor și popular!
Este suficient de puternic pentru a fi în centrul celui mai mare sistem de blogging de pe web (WordPress)!
Este suficient de adânc pentru a rula cea mai mare rețea de socializare (Facebook)!
Ce poate face PHP?
PHP poate genera conținut dinamic al paginii
PHP poate crea, deschide, citi, scrie, șterge și închide fișiere pe server
PHP poate colecta date de formular
PHP poate trimite și primi cookie-uri
PHP poate adăuga, șterge, modifica date din baza de date
PHP poate fi utilizat pentru a controla accesul utilizatorului
PHP poate cripta dateCu PHP nu ești limitat la output HTML. Puteți output imagini, fișiere PDF și chiar filme Flash. De asemenea, puteți output orice text, cum ar fi XHTML și XML.
De ce PHP?
PHP rulează pe diverse platforme (Windows, Linux, Unix, Mac OS X etc.)
PHP este compatibil cu aproape toate serverele folosite astăzi (Apache, IIS etc.)
PHP acceptă o gamă largă de baze de date
PHP este gratuit. Descărcați-l din resursa oficială PHP: www.php.net
PHP este ușor de învățat și rulează eficient pe serverCe este nou în PHP 7
PHP 7 este mult mai rapid decât versiunea stabilă și populară anterioară(PHP 5.6)
PHP 7 a îmbunătățit gestionarea erorilor
PHP 7 acceptă declarații de tip (Type Declarations) mai stricte pentru argumentele funcției
PHP 7 acceptă operatori noi (cum ar fi operatorul național spațial: <=>)

PHP Numere

PHP Numbers
În acest capitol vom analiza în profunzime Integers, Floats și Number Strings.
Numere PHP
Un lucru de remarcat cu privire la PHP este că oferă conversie automată de tip de date (automatic data type conversion).
Deci, dacă atribuiți o valoare integer (valoare întreagă) unei variabile, tipul acelei variabile va fi automat un integer (număr întreg). Apoi, dacă atribuiți un string (șir) aceleiași variabile, tipul se va schimba la un string (șir).
Această conversie automată îți poate sparge codul.
PHP Integers
Un integer (număr întreg) este un număr fără nicio parte zecimală.
2, 256, -256, 10358, -179567 sunt integers (întregi). În timp ce 7.56, 10.0, 150.67 sunt floats.
Deci, un tip de date întreg (integer data type) este un număr non-zecimal cuprins între -2147483648 și 2147483647. O valoare mai mare (sau mai mică) decât aceasta, va fi stocată ca float, deoarece depășește limita unui integer (număr întreg).
Un alt lucru important de știut este că, chiar dacă 4*2,5 este 10, rezultatul este stocat sub formă de float, deoarece unul dintre operanzi este un float (2.5).
Iată câteva reguli pentru integers (numere întregi):
Un număr întreg (integer) trebuie să aibă cel puțin o cifră
Un număr întreg (integer) nu trebuie să aibă o zecimală
Un număr întreg (integer) poate fi pozitiv sau negativ
Numerele întregi pot fi specificate în trei formate: zecimale (baza 10), hexazecimale (baza 16 - prefix 0x) sau octale (baza 8 - prefix 0)
PHP are următoarele funcții pentru a verifica dacă tipul unei variabile este integer (întreg):
is_int()
is_integer() - alias of is_int()
is_long() - alias of is_int()
Verificați dacă tipul unei variabile este integer (întreg):
<?php
$x = 5985;
var_dump(is_int($x));
$x = 59.85;
var_dump(is_int($x));
?>
PHP Floats
Un float este un număr cu un punct zecimal sau un număr în formă exponențială.
2.0, 256.4, 10.358, 7.64E + 5, 5.56E-5 sunt toate floats.
Tipul de date (data type) float poate stoca de obicei o valoare de până la 1.7976931348623E + 308 (dependentă de platformă) și are o precizie maximă de 14 cifre.
PHP are următoarele funcții pentru a verifica dacă tipul unei variabile este float:
is_float()
is_double() - alias of is_float()
Verificați dacă tipul unei variabile este float:
<?php
$x = 10.365;
var_dump(is_float($x));
?>
PHP Infinity
O valoare numerică mai mare decât PHP_FLOAT_MAX este considerată infinită.
PHP are următoarele funcții pentru a verifica dacă o valoare numerică este finită sau infinită:
is_finite()
is_infinite()
Cu toate acestea, funcția PHP var_dump() returnează tipul (data type) și valoarea datelor:
Verificați dacă o valoare numerică este finită sau infinită:
<?php
$x = 1.9e411;
var_dump($x);
?>
PHP NaN
NaN semnifică Not Number.
NaN este utilizat pentru operații matematice imposibile.
PHP are următoarele funcții pentru a verifica dacă o valoare nu este un număr:
is_nan()
Cu toate acestea, funcția PHP var_dump() returnează tipul și valoarea datelor:Calculul invalid va returna o valoare NaN:
<?php
$x = acos(8);
var_dump($x);
?>
PHP Numerical Strings
Funcția PHP is_numeric() poate fi utilizată pentru a afla dacă o variabilă este numerică. Funcția returnează true dacă variabila este un număr sau un șir numeric, false altfel.
Verificați dacă variabila este numerică:
<?php
$x = 5985;
var_dump(is_numeric($x));
$x = "5985";
var_dump(is_numeric($x));
$x = "59.85" + 100;
var_dump(is_numeric($x));
$x = "Hello";
var_dump(is_numeric($x));
?>
De la PHP 7.0: Funcția is_numeric() va returna FALSE pentru șirurile numerice (numeric strings) în formă hexazecimală (de exemplu, 0xf4c3b00c), deoarece nu mai sunt considerate șiruri numerice (numeric strings).
PHP Casting Strings and Floats to Integers
Uneori, trebuie să convertiți o valoare numerică într-un alt tip de date (data type).
Funcția (int), (integer) sau intval() sunt adesea folosite pentru a converti o valoare (value) într-un număr întreg (integer).
Convertiți float și string la integer:
<?php
// Cast float to int
$x = 23465.768;
$int_cast = (int)$x;
echo $int_cast;
echo "<br>";
// Cast string to int
$x = "23465.768";
$int_cast = (int)$x;
echo $int_cast;
?>

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 Manipularea formularelor

PHP Form Handling
Superglobalele PHP $_GET și $_POST sunt utilizate pentru colectarea datelor de formular.
PHP - Un formular HTML simplu
Exemplul de mai jos afișează un formular HTML simplu cu două câmpuri de introducere și un buton de trimitere (input fields și submit button):
<html>
<body>
<form action="welcome.php" method="post">
Nume: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
Când utilizatorul completează formularul de mai sus și face click pe butonul de trimitere (submit), datele formularului sunt trimise pentru procesare într-un fișier PHP numit „welcome.php”. Datele formularului sunt trimise cu metoda HTTP POST.
Pentru a afișa datele trimise, pur și simplu puteți echo toate variabilele. „Welcome.php” arată astfel:
<html>
<body>
Bun venit <?php echo $_POST["name"]; ?><br>
Adresa dvs. de e-mail este: <?php echo $_POST["email"]; ?>
</body>
</html>
Rezultatul ar putea fi ceva de genul:
Bun venit Ion
Adresa dvs. de e-mail este [email protected]
Același rezultat ar putea fi obținut și folosind metoda HTTP GET:
<html>
<body>
<form action="welcome_get.php" method="get">
Nume: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
și „welcome_get.php” arată astfel:
<html>
<body>
Bun venit <?php echo $_GET["name"]; ?><br>
Adresa dvs. de e-mail este: <?php echo $_GET["email"]; ?>
</body>
</html>
Codul de mai sus este destul de simplu. Cu toate acestea, cel mai important lucru lipsește. Trebuie să validați datele formularului pentru a vă proteja scriptul împotriva codului rău intenționat.
Gândiți-vă la SECURITATE când prelucrați formularele PHP!
Această pagină nu conține nicio validare a formularului, ci doar arată cum puteți trimite și recupera datele de formular.
Cu toate acestea, paginile următoare vor arăta cum să procesați formularele PHP cu securitate în minte! Validarea corectă a datelor formularului este importantă pentru a vă proteja formularul de hackeri și spameri!
GET vs. POST
Atât GET, cât și POST creează un tablou (array) (de exemplu, array( key1 => value1, key2 => value2, key3 => value3, ...)). Acest tablou (array) conține perechi cheie/valoare (key/value), unde cheile (keys) sunt numele controalelor de formular (form controls) și valorile sunt datele de intrare (input data) de la utilizator.
Atât GET, cât și POST sunt tratate ca $_GET și $_POST. Acestea sunt superglobale, ceea ce înseamnă că sunt întotdeauna accesibile, indiferent de sfera de aplicare - și le puteți accesa din orice funcție, clasă sau fișier (function, class or file) fără a fi nevoie să faceți nimic special.
$_GET reprezintă o serie de variabile transmise scriptului curent prin parametrii URL.
$ _POST reprezintă o serie de variabile transmise scriptului curent prin metoda HTTP POST.
Când să folosiți GET?
Informațiile trimise dintr-un formular cu metoda GET sunt vizibile tuturor (toate numele variabilelor și valorile (variable names/ values) sunt afișate pe adresa URL). GET are, de asemenea, limite privind cantitatea de informații care trebuie trimise. Limitarea este de aproximativ 2000 de caractere. Cu toate acestea, deoarece variabilele sunt afișate în adresa URL, este posibilă marcarea paginii. Acest lucru poate fi util în unele cazuri.
GET poate fi utilizat pentru trimiterea de date non-sensibile (non-sensitive data).
GET nu ar trebui niciodată utilizat pentru trimiterea de parole sau alte informații sensibile!
Când să folosiți POST?
Informațiile trimise dintr-un formular cu metoda POST sunt invizibile pentru alții (toate numele/valorile (names/values) sunt încorporate în corpul solicitării (body) HTTP) și nu au limite privind cantitatea de informații de trimis.
Mai mult, POST acceptă funcționalități avansate, cum ar fi asistența pentru intrarea binară în mai multe părți (multi-part binary input) în timp ce încărcați fișiere pe server.
Cu toate acestea, deoarece variabilele nu sunt afișate în adresa URL, nu este posibilă marcarea paginii.
Dezvoltatorii preferă POST pentru trimiterea datelor de formular (form data).

PHP Validare formular

Validare formular PHP
Acesta și capitolele următoare arată cum să folosești PHP pentru a valida datele formularului.
Validare formular PHP
Gândiți-vă la SECURITATE când prelucrați formularele PHP!
Aceste pagini vor arăta cum să procesați formularele PHP din punct de vedere al securitatii. Validarea corectă a datelor din formular este importantă pentru a vă proteja formularul de hackeri și spameri!
Formularul HTML la care vom lucra în aceste capitole, conține diferite câmpuri de introducere: câmpuri de text obligatorii și opționale, butoane radio și un buton de trimitere (required and optional text fields, radio buttons, and a submit button):
Name - Obligatoriu. + Trebuie să conțină doar litere și spațiu alb
E-mail - Obligatoriu. + Trebuie să conțină o adresă de e-mail validă (cu @ și.)
Website - Obligatoriu. Dacă este prezent, trebuie să conțină o adresă URL validă
Comment - Opțional. Câmp de introducere pe mai multe linii (textarea)
Sex - Obligatoriu. Trebuie să selectați una
Mai întâi vom analiza codul HTML simplu pentru formular:
Câmpuri text (Text Fields)
Câmpurile nume, e-mail și website sunt elemente de introducere ale textului (input elements), iar câmpul de comentarii este textarea. Codul HTML arată astfel:
Nume: <input type="text" name="name">
E-mail: <input type="text" name="email">
Website: <input type="text" name="website">
Comment: <textarea name="comment" rows="5" cols="40"></textarea>
Butoane radio (Radio Buttons)
Câmpurile gen (gender fields) sunt butoane radio, iar codul HTML arată astfel:
Gen:
<input type="radio" name="gender" value="female">Femeie
<input type="radio" name="gender" value="male">Bărbat
<input type="radio" name="gender" value="other">Altele
Elementul form (The Form Element)
Codul HTML al formularului arată astfel:
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Când formularul este trimis, datele formularului sunt trimise cu method = "post".
Ce este variabila $_SERVER["PHP_SELF"] ?
$_SERVER["PHP_SELF"] este o variabilă super globală care returnează numele de fișier al scriptului care se execută în prezent.
Așadar, $_SERVER["PHP_SELF"] trimite datele formularului (submitted form data) trimis către pagina în sine, în loc să sară pe o altă pagină. În acest fel, utilizatorul va primi mesaje de eroare pe aceeași pagină ca și formularul.
Ce este funcția htmlspecialchars()?
Funcția htmlspecialchars() convertește caracterele speciale în entități HTML. Aceasta înseamnă că va înlocui caractere HTML precum <and> cu &lt; și &gt;. Acest lucru împiedică atacatorii să exploateze codul prin injectarea codului HTML sau a javascriptului (Cross-site Scripting attacks) în formulare.
Notă imporantă privind securitatea formularului PHP
Variabila $_SERVER["PHP_SELF"] poate fi utilizată de hackeri!
Dacă PHP_SELF este utilizat în pagina dvs., un utilizator poate introduce un slash (/) și apoi unele comenzi de Cross Site Scripting (XSS) pentru a executa.
Scripturi încrucișate (Cross-site scripting) (XSS) este un tip de vulnerabilitate a securității computerului care se găsește de obicei în aplicațiile Web. XSS le permite atacatorilor să injecteze scripturi din partea clientului în paginile Web vizualizate de alți utilizatori.
Presupunem că avem următorul formular într-o pagină numită "test_form.php":
<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
Acum, dacă un utilizator introduce URL-ul normal în bara de adrese precum "http://www.example.com/test_form.php", codul de mai sus va fi tradus în:
<form method="post" action="test_form.php">
Până acum, bine.
Cu toate acestea, considerați că un utilizator introduce următoarea adresă URL în bara de adrese:
http://www.example.com/test_form.php/%22%3E%3Cscript%3Ealert('hacked')%3C/script%3E
În acest caz, codul de mai sus va fi tradus în:
<form method="post" action="test_form.php/"><script>alert('hacked')</script>
Acest cod adaugă o etichetă script (script tag) și o comandă de alertă (alert command). Și atunci când pagina se încarcă, codul JavaScript va fi executat (utilizatorul va vedea o casetă de alertă (alert box)). Acesta este doar un exemplu simplu și inofensiv cum poate fi exploatată variabila PHP_SELF.
Fiți conștienți de faptul că orice cod JavaScript poate fi adăugat în eticheta <script>! Un hacker poate redirecționa utilizatorul către un fișier de pe alt server, iar respectivul fișier poate conține cod rău intenționat care poate modifica variabilele globale sau poate trimite formularul la o altă adresă pentru a salva datele utilizatorului, de exemplu.
Cum să evitați exploatările $_SERVER["PHP_SELF"]?
Exploatările $_SERVER["PHP_SELF"] pot fi evitate folosind funcția htmlspecialchars().
Codul formularului ar trebui să arate astfel:
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Funcția htmlspecialchars() convertește caracterele speciale în entități HTML. Acum, dacă utilizatorul încearcă să exploateze variabila PHP_SELF, va rezulta următoarea ieșire (output):
<form method="post" action="test_form.php/&quot;&gt;&lt;script&gt;alert('hacked')&lt;/script&gt;">
Validați datele formularului cu PHP
Primul lucru pe care îl vom face este să trecem toate variabilele prin funcția PHP htmlspecialchars().
Când folosim funcția htmlspecialchars(); atunci dacă un utilizator încearcă să trimită următoarele într-un câmp text:
<script>location.href('http://www.hacked.com')</script>
- acest lucru nu ar fi executat, deoarece va fi salvat ca și cod HTML scăpat, astfel:
&lt;script&gt;location.href('http://www.hacked.com')&lt;/script&gt;
Codul este acum sigur pentru a fi afișat pe o pagină sau în interiorul unui e-mail.
De asemenea, vom face alte două lucruri atunci când utilizatorul va trimite formularul:
Scoateți caracterele inutile (spațiu suplimentar, filă, linie nouă (extra space, tab, newline)) din datele de intrare ale utilizatorului (cu funcția PHP trim() )
Eliminați backslashes (\) din datele de intrare ale utilizatorului (cu funcția PHP stripslashes())Următorul pas este să creem o funcție care să facă toate verificările pentru noi (ceea ce este mult mai convenabil decât scrierea aceluiași cod încă o dată).
Vom numi funcția test_input().
Acum, putem verifica fiecare variabilă $_POST cu funcția test_input(), iar scriptul va arata astfel:
<?php
// definiți variabilele și setați valorile goale
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = test_input($_POST["name"]);
  $email = test_input($_POST["email"]);
  $website = test_input($_POST["website"]);
  $comment = test_input($_POST["comment"]);
  $gender = test_input($_POST["gender"]);
}
function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>
Observați că la începutul scriptului, verificăm dacă formularul a fost trimis folosind $_SERVER ["REQUEST_METHOD"]. Dacă REQUEST_METHOD este POST, atunci formularul a fost trimis - și ar trebui validat. Dacă nu a fost trimis, săriți validarea și afișați un formular necompletat.
Cu toate acestea, în exemplul de mai sus, toate câmpurile de introducere sunt opționale. Scriptul funcționează bine chiar dacă utilizatorul nu introduce date.
Următorul pas este de a face necesare câmpurile de intrare și de a crea mesaje de eroare, dacă este nevoie.

PHP Formular - E-mail/URL

Formulare PHP - Validați e-mailul și adresa URL
Acest capitol arată cum se pot valida numele, e-mailurile și adresele URL.
PHP - Validare nume
Codul de mai jos arată o modalitate simplă de a verifica dacă câmpul de nume conține doar litere și spațiu alb. Dacă valoarea câmpului nume nu este validă, atunci stocați un mesaj de eroare:
$name = test_input($_POST["name"]);
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
  $nameErr = "Sunt permise doar litere și spațiu alb";
}
Funcția preg_match() caută un șir de șablon (string for pattern), returnând adevărat (true) dacă modelul (pattern) există și fals (false) altfel.
PHP - Validare e-mail
Cel mai simplu și mai sigur mod de a verifica dacă o adresă de e-mail este bine formulată este să folosești funcția PHP filter_var().
În codul de mai jos, dacă adresa de e-mail nu este bine formulată, atunci stocați un mesaj de eroare (error message):
$email = test_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  $emailErr = "Format de e-mail invalid";
}
PHP - Validare URL
Codul de mai jos arată o modalitate de a verifica dacă o sintaxă a adresei URL este validă (această expresie obișnuită permite și liniuțe în adresa URL). Dacă sintaxa adresei URL nu este validă, atunci stocați un mesaj de eroare (error message):
$website = test_input($_POST["website"]);
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
  $websiteErr = "URL invalid";
}
PHP - Validați numele, e-mailul și adresa URL
Scriptul acum arată așa:
<?php
// definiți variabilele și setați valorile goale
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["name"])) {
    $nameErr = "Numele este necesar";
  } else {
    $name = test_input($_POST["name"]);
    // verificați dacă numele conține doar litere și spațiu alb
    if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
      $nameErr = "Sunt permise doar litere și spațiu alb";
    }
  }
  if (empty($_POST["email"])) {
    $emailErr = "Email is required";
  } else {
    $email = test_input($_POST["email"]);
    // verificați dacă adresa de e-mail este bine formulată
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      $emailErr = "Format de e-mail nevalid";
    }
  }
 if (empty($_POST["website"])) {
    $website = "";
  } else {
    $website = test_input($_POST["website"]);
    // verificați dacă sintaxa adresei URL este validă (această expresie obișnuită permite și liniuțe în URL)
    if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
      $websiteErr = "URL nevalid";
    }
  }
 if (empty($_POST["comment"])) {
    $comment = "";
  } else {
    $comment = test_input($_POST["comment"]);
  }
  if (empty($_POST["gender"])) {
    $genderErr = "Genul este necesar";
  } else {
    $gender = test_input($_POST["gender"]);
  }
}
?>
Următorul pas este să arătați cum să împiedicați formularul să golească toate câmpurile de intrare (input fields) atunci când utilizatorul trimite formularul.

PHP Data și Ora

PHP Data și ora (PHP Date and Time)
Funcția PHP date() este utilizată pentru formatarea unei date și/sau a unei ore.
Funcția PHP date()
Funcția PHP date() formatează un marcaj de timp (timestamp) într-o dată și o oră mai lizibile.
Sintaxă
date(format,timestamp)
format - Obligatoriu. Specifică formatul de timp (timestamp)
timestamp - Opțional. Specifică un marcaj de timp (timestamp). Valoarea implicită (default) o reprezintă data și ora curente
Un marcaj de timp (timestamp) este o succesiune de caractere, care indică data și/sau ora la care a avut loc un anumit eveniment.
Obțineți o dată
Parametrul format necesar al funcției date() specifică modul de formatare al datei (sau orei).
Iată câteva caractere care sunt utilizate frecvent pentru date:
d - Reprezintă ziua lunii (01 - 31)
m - Reprezintă o lună (de la 01 la 12)
Y - Reprezintă un an (în patru cifre)
l (lowercase 'L') - Reprezintă ziua săptămânii
Alte caractere, cum ar fi „/”, „.” sau „-” pot fi de asemenea inserate între caractere pentru a adăuga o formatare suplimentară.
Exemplul de mai jos formatează data de astăzi în trei moduri diferite:
<?php
echo "Astăzi este " . date("Y/m/d") . "<br>";
echo "Astăzi este " . date("Y.m.d") . "<br>";
echo "Astăzi este " . date("Y-m-d") . "<br>";
echo "Astăzi este " . date("l");
?>
Obțineți o oră

Iată câteva caractere care sunt utilizate frecvent pentru perioade:
H - format de 24 de ore al unei ore (de la 00 la 23)
h - format de 12 ore al unei ore cu zerouri în față (de la 01 la 12)
i - Minute cu zerouri în față (00-59)
s - Secunde cu zerouri în față (de la 00 la 59)
a - Lowercase Ante meridian și Post meridian (am sau pm)
Exemplul de mai jos emite ora curentă în formatul specificat:
<?php
echo "Ora este " . date("h:i:sa");
?>
Rețineți că funcția PHP date() va returna data/ora curentă a serverului!
Obțineți-vă fusul orar (timezone)
Dacă timpul de întoarcere din cod nu este corect, cel mai probabil este pentru că serverul dvs. se află într-o altă țară sau este configurat pentru un alt fus orar (timezone).
Deci, dacă aveți nevoie de o oră corectă în funcție de o anumită locație, puteți seta fusul orar (timezone) pe care doriți să îl utilizați.
Exemplul de mai jos stabilește fusul orar (timezone) pe „America/New_York”, apoi emite ora curentă în formatul specificat:
<?php
date_default_timezone_set("America/New_York");
echo "Este ora " . date("h:i:sa");
?>
Creați o dată cu mktime()
Parametrul opțional timestamp din funcția date() specifică un marcaj de timp (timestamp). Dacă este omisă, vor fi utilizate data și ora curentă (ca în exemplele de mai sus).
Funcția PHP mktime() întoarce marcajul de timp (timestamp) Unix pentru o dată. Marcajul de timp Unix (timestamp) conține numărul de secunde între Unix Epoch (1 ianuarie 1970 00:00:00 GMT) și ora specificată.
Sintaxă
mktime(hour, minute, second, month, day, year)
Exemplul de mai jos creează o dată și o oră cu funcția date() dintr-un număr de parametri în funcția mktime():
<?php
$d=mktime(11, 14, 54, 8, 12, 2014);
echo "Data creerii este " . date("Y-m-d h:i:sa", $d);
?>
Creați o dată dintr-un șir (string) cu strtotime()
Funcția PHP strtotime() este utilizată pentru a converti un șir de date (date string) care poate fi citit de om într-un marcaj de timp (timestamp) Unix (numărul de secunde de la 1 ianuarie 1970, 00:00:00 GMT).
Sintaxă
strtotime(time, now)
Exemplul de mai jos creează o dată și o oră din funcția strtotime():
<?php
$d=strtotime("10:30pm April 15 2014");
echo "Data creerii este " . date("Y-m-d h:i:sa", $d);
?>
PHP este destul de inteligent în ceea ce privește conversia unui șir (string) într-o dată, astfel încât să puteți pune diverse valori:
<?php
$d=strtotime("mâine");
echo date("Y-m-d h:i:sa", $d) . "<br>";
$d=strtotime("sâmbăta viitoare");
echo date("Y-m-d h:i:sa", $d) . "<br>";
$d=strtotime("+ 3 luni"");
echo date("Y-m-d h:i:sa", $d) . "<br>";
?>
Cu toate acestea, strtotime() nu este perfect, așa că nu uitați să verificați șirurile (stringurile) pe care le introduceți acolo.
Mai multe exemple de date
Exemplul de mai jos scoate (outputs) datele pentru următoarele șase sâmbete:
<?php
$startdate = strtotime("Sâmbătă");
$enddate = strtotime("+ 6 săptămâni", $startdate);
while ($startdate < $enddate) {
  echo date("M d", $startdate) . "<br>";
  $startdate = strtotime("+ 1 săptămână", $startdate);
}
?>
Exemplul de mai jos afișează numărul de zile până la 4 iulie:
<?php
$d1=strtotime("04 iulie");
$d2=ceil(($d1-time())/60/60/24);
echo "Există " . $d2 ." zile până la 4 iulie.";
?>

PHP Include

PHP fișiere include (PHP Include Files)
Instrucțiunea include (sau require) preia tot textul / codul / marcajul (text/code/markup) care există în fișierul specificat și îl copiază în fișierul care folosește instrucțiunea include.
Includerea fișierelor este foarte utilă atunci când doriți să includeți același PHP, HTML sau text în mai multe pagini ale unui site web.
PHP declarațiile include și require (PHP include and require Statements)
Este posibil să inserați conținutul unui fișier PHP într-un alt fișier PHP (înainte ca serverul să îl execute), cu instrucțiunea include sau require.
Instrucțiunile include și require sunt identice, cu excepția eșecului:
require va produce o eroare fatală (E_COMPILE_ERROR) și va opri scriptul
include va produce doar un avertisment (E_WARNING) și scriptul va continua
Așadar, dacă doriți ca execuția să continue și să le arate utilizatorilor ieșirea (output), chiar dacă fișierul include lipsește, folosiți instrucțiunea include.
În caz contrar, în cazul FrameWork, CMS sau o codificare complexă a aplicației PHP, utilizați întotdeauna instrucțiunea require pentru a include un fișier cheie pentru fluxul de execuție. Acest lucru va ajuta la evitarea compromiterii securității și integrității aplicației dvs., doar în caz că lipsește accidental un fișier cheie (key file).
Inclusiv fișierele economisesc multă muncă. Aceasta înseamnă că puteți crea un antet, un subsol sau un fișier de meniu (header, footer sau menu file) pentru toate paginile dvs. web. Apoi, când antetul (header) trebuie actualizat, puteți actualiza doar antetul (header) include fișierul (include file).
Sintaxă
include 'filename'; sau require 'filename';
Exemple PHP include
Presupunem că avem un fișier de subsol standard (standard footer file) numit "footer.php", care arată astfel:
 <?php
echo "<p>Copyright &copy; 2020-" . date("Y") . " lectii-virtuale.ro</p>";
?>
Pentru a include fișierul de subsol (footer file) într-o pagină, utilizați instrucțiunea include:
<html>
<body>
<h1>Bine ați venit pe prima mea pagină!</h1>
<p>Un text.</p>
<p>Mai mult text.</p>
<?php include 'footer.php';?>
</body>
</html>
Presupunem că avem un fișier meniu standard (standard menu file) numit "menu.php":
<?php
echo '<a href="/default.asp">Home</a> -
<a href="/html/default.asp">Tutorial HTML</a> -
<a href="/css/default.asp">Tutorial CSS</a> -
<a href="/js/default.asp">Tutorial JavaScript</a> -
<a href="default.asp">Tutorial PHP</a>';
?>
Toate paginile de pe site-ul web ar trebui să folosească acest fișier meniu. Iată cum se poate face (folosim un element <div> pentru ca meniul să poată fi ușor stilat mai târziu cu CSS):
<html>
<body>
<div class="menu">
<?php include 'menu.php';?>
</div>
<h1>Bine ați venit pe prima mea pagină!</h1>
<p>Un text.</p>
<p>Mai mult text.</p>
</body>
</html>
Presupunem că avem un fișier numit "vars.php", cu cateva variabile definite:
<?php
$color='roșu';
$car='BMW';
?>
Apoi, dacă includem fișierul "vars.php", variabilele pot fi utilizate în fișierul apelant:
<html>
<body>
<h1>Bine ați venit pe prima mea pagină!</h1>
<?php include 'vars.php';
echo "Am o $color $car.";
?>
</body>
</html>
PHP include vs. require
Instrucțiunea require este de asemenea folosită pentru a include un fișier în codul PHP.
Cu toate acestea, există o mare diferență între include și require; când un fișier este inclus cu instrucțiunea include și PHP nu îl poate găsi, scriptul va continua să execute:
<html>
<body>
<h1>Bine ați venit pe prima mea pagină!</h1>
<?php include 'noFileExists.php';
echo "Am o $color $car.";
?>
</body>
</html>
Dacă facem același exemplu folosind instrucțiunea require, instrucțiunea echo nu va fi executată, deoarece execuția scriptului moare după ce instrucțiunea require a returnat o eroare fatală:
<html>
<body>
<h1>Bine ați venit pe prima mea pagină!</h1>
<?php require 'noFileExists.php';
echo "Am o $color $car.";
?>
</body>
</html>
Folosiți require când fișierul este solicitat de aplicație.
Folosiți include atunci când fișierul nu este necesar și aplicația ar trebui să continue atunci când fișierul nu este găsit.

PHP Manipularea fișierelor

Manipularea fișierelor PHP (PHP File Handling)
Manipularea fișierelor (File handling) este o parte importantă a oricărei aplicații web. Adesea, trebuie să deschideți și să procesați un fișier pentru diferite sarcini.
PHP Manipularea fișierelor (PHP Manipulating Files)
PHP are mai multe funcții pentru crearea, citirea, încărcarea și editarea fișierelor (creating, reading, uploading, and editing files).
Aveți grijă când manipulați fișierele (manipulating files)!
Când manipulați fișierele (manipulating files) trebuie să fiți foarte atenți.
Puteți face multe daune dacă faceți ceva greșit. Erorile comune sunt: ​​editarea fișierului greșit, completarea unui hard disk cu date nefolositoare (garbage data) și ștergerea din accident a conținutului unui fișier.
Funcția PHP readfile()
Funcția readfile() citește un fișier și îl scrie în bufferul de ieșire (output buffer).
Presupunem că avem un fișier text numit „webdictionary.txt”, stocat pe server, care arată astfel:
AJAX = JavaScript și XML asincron (Asynchronous JavaScript and XML)
CSS = Fișe de stil în cascadă (Cascading Style Sheets)
HTML = Hyper Text Markup Language
PHP = PHP Hypertext Preprocessor
SQL = Limbaj de interogare structurat (Structured Query Language)
SVG = Grafică vectorială scalabilă (Scalable Vector Graphics)
XML = Limbaj de marcare extinsă  (EXtensible Markup Language)
Codul PHP pentru a citi fișierul și a-l scrie în bufferul de ieșire (output buffer) este după cum urmează (funcția readfile() returnează numărul de octeți citiți cu succes):
<?php
echo readfile("webdictionary.txt");
?>
Funcția readfile() este utilă dacă tot ce doriți să faceți este să deschideți un fișier și să citiți conținutul acestuia.
Capitolele următoare vă vor învăța mai multe despre gestionarea fișierelor.

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 Cookies

Cookie-uri PHP (PHP Cookies)
Ce este un Cookie?
Un cookie este adesea folosit pentru a identifica un utilizator. Un cookie este un fișier mic pe care serverul îl încorporează pe computerul utilizatorului. De fiecare dată când același computer solicită o pagină cu un browser, va trimite și cookie-ul. Cu PHP, puteți crea și recupera valorile cookie.
Creați cookie-uri cu PHP
Un cookie este creat cu funcția setcookie().
Sintaxă
setcookie(name, value, expire, path, domain, secure, httponly);
Numai parametrul name este necesar. Toți ceilalți parametrii sunt opționali.
PHP Creare / Recuperare Cookie (PHP Create/Retrieve a Cookie)
Următorul exemplu creează un cookie numit „user” cu valoarea „Ion Popescu”. Cookie-ul va expira după 30 de zile (86400 * 30).
„/” înseamnă că cookie-ul este disponibil pe întregul site web (în caz contrar, selectați directorul preferat).
Vom prelua apoi valoarea „user” cookie-ului (folosind variabila globală $_COOKIE). De asemenea, folosim funcția isset() pentru a afla dacă cookie-ul este setat:
<?php
$cookie_name = "user";
$cookie_value = "Ion Popescu";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 day
?>
<html>
<body>
<?php
if(!isset($_COOKIE[$cookie_name])) {
    echo "Cookie-ul numit" . $cookie_name . "' nu este setat!";
} else {
    echo "Cookie '" . $cookie_name . "' is set!<br>";
    echo "Valoarea este:" . $_COOKIE[$cookie_name];
}
?>
</body>
</html>
Funcția setcookie() trebuie să apară BEFORE de eticheta (tag) <html>.
Valoarea cookie-ului este codificată în mod automat la trimiterea cookie-ului și automat decodificată atunci când este primită (pentru a preveni codificarea URL-ului, utilizați în schimb setrawcookie()).
Modificați o valoare cookie
Pentru a modifica un cookie, trebuie doar să setați (din nou) modul cookie folosind funcția setcookie():
<?php
$cookie_name = "user";
$cookie_value = "Alex Ionescu";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/");
?>
<html>
<body>
<?php
if(!isset($_COOKIE[$cookie_name])) {
    echo "Cookie-ul nimit'" . $cookie_name . "' nu este setat!";
} else {
    echo "Cookie'" . $cookie_name . "' este setat!<br>";
    echo "Valoarea este:" . $_COOKIE[$cookie_name];
}
?>
</body>
</html>
Ștergeți un cookie
Pentru a șterge un cookie, utilizați funcția setcookie() cu o dată de expirare din trecut:
<?php
// setați data de expirare la o oră în urmă
setcookie("user", "", time() - 3600);
?>
<html>
<body>
<?php
echo "Cookie 'user' este șters.";
?>
</body>
</html>
Verificați dacă cookie-urile sunt activate
Următorul exemplu creează un mic script care verifică dacă cookie-urile sunt activate. Mai întâi, încercați să creați un cookie de testare cu funcția setcookie(), apoi numărați variabila array $_COOKIE:
<?php
setcookie("test_cookie", "test", time() + 3600, '/');
?>
<html>
<body>
<?php
if(count($_COOKIE) > 0) {
    echo "Cookie-urile sunt activate.";
} else {
    echo "Cookie-urile sunt dezactivate.";
}
?>
</body>
</html>

PHP Sesiuni

Sesiuni PHP
O sesiune este o modalitate de a stoca informații (în variabile) pentru a fi utilizate în mai multe pagini.
Spre deosebire de un cookie, informațiile nu sunt stocate pe computerul utilizatorilor.
Ce este o sesiune PHP?
Când lucrați cu o aplicație, o deschideți, faceți unele modificări și apoi o închideți. Aceasta seamănă foarte mult cu o sesiune. Calculatorul știe cine ești. Știe când porniți aplicația și când terminați. Dar pe internet există o problemă: serverul web nu știe cine sunteți sau ce faceți, deoarece adresa HTTP nu menține starea.
Variabilele de sesiune (session variables) rezolvă această problemă prin stocarea informațiilor utilizatorului care vor fi utilizate pe mai multe pagini (de exemplu, numele de utilizator, culoarea preferată etc.). În mod implicit, variabilele de sesiune durează până când utilizatorul închide browserul.
Așa deci; Variabilele de sesiune (session variables) conțin informații despre un singur utilizator și sunt disponibile pentru toate paginile dintr-o singură aplicație.
Dacă aveți nevoie de o stocare permanentă, poate doriți să stocați datele într-o bază de date.
Porniți o sesiune PHP
O sesiune este pornită cu funcția session_start().
Variabilele de sesiune sunt setate cu variabila globală PHP: $_SESSION.
Acum, hai să creăm o nouă pagină numită "demo_session1.php". În această pagină, începem o nouă sesiune PHP și setăm câteva variabile de sesiune:
<?php
// Începeți sesiunea
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
// Setați variabile de sesiune
$_SESSION["favcolor"] = "green";
$_SESSION["favanimal"] = "cat";
echo "Variabilele de sesiune sunt setate.";
?>
</body>
</html>
Funcția session_start() trebuie să fie primul lucru din documentul dvs. Înainte de orice etichete HTML.
Obțineți valori variabile ale sesiunii PHP
În continuare, creem o altă pagină numită "demo_session2.php". Din această pagină, vom accesa informațiile de sesiune pe care le-am setat pe prima pagină („demo_session1.php”).
Observați că variabilele de sesiune nu sunt transmise individual la fiecare pagină nouă, ci sunt preluate din sesiunea pe care o deschidem la începutul fiecărei pagini (session_start()).
De asemenea, observați că toate valorile variabilei de sesiune sunt stocate în variabila globală $_SESSION:
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
// Variabilele de sesiune echo care au fost setate pe pagina anterioară
echo "Culoarea preferată este " . $_SESSION["favcolor"] . ".<br>";
echo "Animalul preferat este " . $_SESSION["favanimal"] . ".";
?>
</body>
</html>
Un alt mod de a arăta toate valorile variabilei de sesiune (session variable) pentru o sesiune de utilizator (user session ) este să executați următorul cod:
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
print_r($_SESSION);
?>
</body>
</html>
Cum functioneazã? De unde știe că sunt eu?
Majoritatea ședințelor setează o cheie de utilizator (user-key) pe computerul utilizatorului care arată așa: 765487cf34ert8dede5a562e4f3a7e12. Apoi, când o sesiune este deschisă pe o altă pagină, scanează computerul pentru o cheie de utilizator (user-key). Dacă există o potrivire, aceasta accesează sesiunea, dacă nu, începe o nouă sesiune.
Modificați o variabilă de sesiune PHP
Pentru a schimba o variabilă de sesiune, trebuie doar să o suprascrieți:
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
// pentru a schimba o variabilă de sesiune, trebuie doar să o rescrieți
$_SESSION["favcolor"] = "yellow";
print_r($_SESSION);
?>
</body>
</html>
Distrugeți o sesiune PHP
Pentru a elimina toate variabilele globale ale sesiunii și a distruge sesiunea, utilizați session_unset() și session_destroy():
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
// eliminați toate variabilele de sesiune
session_unset();
// distrugeți sesiunea
session_destroy();
?>
</body>
</html>

PHP Filtre

Filtre PHP
Validarea datelor = Determinați dacă datele sunt într-o formă corectă.
Sanitizarea datelor = Eliminați orice caracter ilegal din date.
Extensia de filtrare PHP
Filtrele PHP sunt utilizate pentru validarea și igienizarea intrărilor externe.
Extensia de filtru PHP are multe dintre funcțiile necesare pentru verificarea intrării utilizatorului (user input) și este concepută pentru a face validarea datelor mai ușoară și mai rapidă.
Funcția filter_list() poate fi utilizată pentru a enumera ce oferă extensia de filtru PHP:
<table>
  <tr>
    <td>Nume filtru</td>
    <td>ID filtru</td>
  </tr>
  <?php
  foreach (filter_list() as $id =>$filter) {
      echo '<tr><td>' . $filter . '</td><td>' . filter_id($filter) . '</td></tr>';
  }
  ?>
</table>
De ce să folosești filtrele?
Multe aplicații web primesc input extern. Intrarea/datele externe pot fi:
Intrarea utilizatorului dintr-un formular (User input from a form)
Cookies
Date despre servicii web (Web services data)
Variabilele serverului (Server variables)
Rezultatele interogării bazei de date (Database query results)
Ar trebui să validați întotdeauna datele externe!
Datele trimise nevalide pot duce la probleme de securitate și vă pot break pagina web!
Folosind filtre PHP puteți fi sigur că aplicația dvs. primește introducerea corectă!
Funcția PHP filter_var()
Funcția filter_var() validează și igienizează datele.
Funcția filter_var() filtrează o singură variabilă cu un filtru specificat. Este nevoie de două bucăți de date (pieces of data):
Variabila pe care doriți să o verificați
Tipul de verificare de utilizat
Sanitizarea unui string
Următorul exemplu utilizează funcția filter_var() pentru a elimina toate etichetele HTML dintr-un șir (string):
<?php
$str = "<h1>Hello World!</h1>";
$newstr = filter_var($str, FILTER_SANITIZE_STRING);
echo $newstr;
?>
Validarea unui număr întreg (integer)
Următorul exemplu utilizează funcția filter_var() pentru a verifica dacă variabila $int este un număr întreg (integer). Dacă $int este un număr întreg (integer), rezultatul codului de mai jos va fi: „Integer este valid”. Dacă $int nu este un număr întreg (integer), rezultatul va fi: „Integer nu este valid”:
<?php
$int = 100;
if (!filter_var($int, FILTER_VALIDATE_INT) === false) {
    echo("Integer este valid");
} else {
    echo("Integer nu este valid");
}
?>
filter_var() și Problema cu 0
În exemplul de mai sus, dacă $int a fost setat pe 0, funcția de mai sus va returna „Integer nu este valid”. Pentru a rezolva această problemă, utilizați codul de mai jos:
<?php
$int = 0;
if (filter_var($int, FILTER_VALIDATE_INT) === 0 || !filter_var($int, FILTER_VALIDATE_INT) === false) {
    echo("Integer este valid");
} else {
    echo("Integer nu este valid");
}
?>
Validați o adresă IP
Următorul exemplu utilizează funcția filter_var() pentru a verifica dacă variabila $ip este o adresă IP validă:
<?php
$ip = "127.0.0.1";
if (!filter_var($ip, FILTER_VALIDATE_IP) === false) {
    echo("$ip este o adresă IP validă");
} else {
    echo("$ip nu este o adresă IP validă");
}
?>
Sanitizarea și validarea unei adrese e-mail
Următorul exemplu utilizează funcția filter_var() pentru a elimina mai întâi toate caracterele ilegale din variabila $e-mail, apoi verificați dacă este o adresă e-mail validă:
<?php
$email = "[email protected]";
// Eliminați toate caracterele ilegale din e-mail
$email = filter_var($email, FILTER_SANITIZE_EMAIL);
// Validați e-mail
if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
    echo("$email este o adresă e-mail validă");
} else {
    echo("$email nu este o adresă e-mail validă");
}
?>
Sanitizarea și validarea unei adrese URL
Următorul exemplu utilizează funcția filter_var() pentru a elimina mai întâi toate caracterele ilegale dintr-o adresă URL, apoi verificați dacă $url este o adresă URL validă:
<?php
$url = "https://www.w3schools.com";
// Eliminați toate caracterele ilegale dintr-un URL
$url = filter_var($url, FILTER_SANITIZE_URL);
// Validați adresa URL
if (!filter_var($url, FILTER_VALIDATE_URL) === false) {
    echo("$url este o adresă URL validă");
} else {
    echo("$url nu este o adresă URL validă");
}
?>