Search the Community

Operatori logici Introducere Condițiile sunt o formă comodă de a lua decizii întrebându-ne dacă ceva are valoare Adevărat sau nu. Dar de multe ori o condiție nu e suficientă. Am putea dori să facem opusul. Sau de exemplu dacă dorim să luăm o decizie bazată pe turtle.xcor() și``turtle.ycor()`` atunci trebuie să le combinăm. Asta se poate rezolva cu operatori logici. Negarea unei declarații Dacă dorim ca ceva să fie Fals putem utiliza not. Este un operator logic: x = False if not x : print("condition met") else: print("condition not met") Exercițiu Țestoasa ne pune la dispoziție o funcție utilă pentru a ști dacă desenează sau nu: turtle.isdown(). Această funcție returnează Adevărat dacă țestoasa desenează. După cum am văzut mai devreme, funcțiile turtle.penup() și turtle.pendown() schimbă între desen și mișcare, sau doar mișcare fără a trasa nici o urmă. Putem scrie o funcție care înaintează doar dacă penița este ridicată? Soluție def stealthed_forward(distance): if not turtle.isdown(): turtle.forward(distance) Asta și aia sau altceva Doi operatori ușor de înțeles sunt and (și) și or (sau). Ei fac exact ce spune numele lor: if 1 < 2 and 4 > 2: print("condition met") if 1 > 2 and 4 < 10: print("condition not met") if 4 < 10 or 1 < 2: print("condition met") Nu ești limitat la un singur operator logic. Poți combina oricâți de mulți dorești. Exercițiu Mai devreme am pus țestoasa într-o închisoare circulară. De această dată să o punem într-o cutie. Dacă țestoasa merge mai mult de 100 pe axele X sau Y atunci întoarcem țestoasta înapoi spre centru. Soluție def forward(distance): while distance > 0: if (turtle.xcor() > 100 or turtle.xcor() < -100 or turtle.ycor() > 100 or turtle.ycor() < -100): turtle.setheading(turtle.towards(0,0)) turtle.forward(1) distance = distance - 1

Desenează o spirală Buclele pot fi întrerupte cu comanda break. Este util în mod special când ai scris o buclă infinită, care este o buclă unde condiția este întotdeauna Adevărată. Exercițiu Scrie o buclă while cu o condiție care este întotdeauna Adevărată pentru a desena o spirală. Întrerupe bucla când țestoasa ajunge la o anumită distanță față de centru. Folosește funcția turtle.distance(x, y) pentru a afla distanța țestoasei față de punctul definit de coordonatele x și y. Pentru a face asta ai nevoie de funcțiile turtle.xcor() și turtle.ycor(), care returnează poziția țestoasei pe axele X si respectiv Y. Soluția def draw_spiral(radius): original_xcor = turtle.xcor() original_ycor = turtle.ycor() speed = 1 while True: turtle.forward(speed) turtle.left(10) speed += 0.1 if turtle.distance(original_xcor, original_ycor) > radius: break Supliment Poți să creezi o condiție pentru această buclă, în așa fel încât să nu ai nevoie de bucla infinită while True sau de break? Ce versiune este mai ușor de înțeles?

Închisoarea țestoasei Exercițiu The turtle has been up to its usual tricks again, robbing liquor stores and building up huge gambling debts. It’s time for turtle to be put into a cell that it can’t get out of. Hai să facem o nouă variantă de forward(). Una care va întoarce țestoasa complet dacă încearcă să meargă mai departe de 100 de la origine. Vom avea nevoie de o buclă while și de cateva funcții noi: turtle.distance(0,0) - Distanța țestoasei de la origine turtle.towards(0,0) - Unghiul pentru a se întoarce la origine turtle.setheading(angle) - Setează direcția țestoasei Poți să încerci să te joci cu țestoasa direct în interpretor pentru a verifica exact ce fac, daca dorești. Acum va trebui să implementăm logica celulei, poate într-o buclă while și folosind niște logică condițională. Este puțin cam complicat dar continuă! Să nu îți fie frică să vorbești cu cineva mai experimentat sau cu alt student. Soluția def forward(distance): while distance > 0: if turtle.distance(0,0) > 100: angle = turtle.towards(0,0) turtle.setheading(angle) turtle.forward(1) distance = distance - 1

Bucle condiționale Introducere Buclele condiționale sunt un mod de a repeta ceva atâta vreme cât o condiție este satisfăcută, sau Adevărată. Dacă condiția este întotdeauna satisfăcută (nu devine niciodată Falsă), atunci bucla poate deveni infinită. Dacă condiția este falsă la început, codul din buclă nu va rula niciodată! În Python buclele condiționale sunt definite folosind declarația while: word = '' sentence = '' print('Please enter some words.') print('Include a period (.) when you are finished.') while '.' not in word: word = input('next word: ') sentence = word + ' ' + sentence print() print('Aha! You said:') print(sentence) Numim această parte a codului ‘condițional’: '.' not in word De valoarea Adevărat sau nu întoarsă de condiție depinde executarea codului din bucla while. Citește codul de mai sus și încearcă să rezumi în minte ce face (care va fi rezultatul final). Apoi copiază într-un fișier, cum ar fi sentence.py și rulează-l - vezi exact ce face. Seamănă cu ce credeai tu ?

Cum să dai indicații Țestoasele din Python pot fi foarte bune la executat instrucțiuni. Hai să încercăm să folosim funcția input() pentru a cere utilizatorului o direcție în care să miște țestoasa. Pentru a păstra lucrurile simple vom accepta doar două instrucțiuni: “left” (stânga) și “right” (dreapta). Este mult mai ușor să definești asta ca o funcție, adică: def move(): direction = input("Go left or right? ") if direction == "left": turtle.left(60) turtle.forward(50) if direction == "right": turtle.right(60) turtle.forward(50) Acum oricând folosești move() ți se va cere să alegi left (stânga) sau right (dreapta). “prelucrarea datelor” În acest program, țestoasa va răspunde doar la exact left sau right, fără excepție. Deși Left sau LEFT ar putea părea același lucru ca și left pentru un om, asta nu e valabil și în cazul programării. Python are niște metode care să te ajute la asta. Un șir ce caractere are metodele .strip(), care elimină spațiile albe și .lower() care transformă toate literele în litere mici. Iată câteva exemple care afișează efectele lui .strip() și .lower(): my_variable = " I Am Capitalised" print(my_variable) my_stripped = my_variable.strip() print(my_stripped) my_lower = my_variable.lower() print(my_lower) Încearcă să adaugi direction = direction.strip().lower() la funcția move(), pentru a vedea ce efect are. Adeseori numim genul acesta de cod “data munging” (prelucrarea datelor), și este foarte des întâlnit. Poți să adaugi opțiuni suplimentare pentru a face țestoasa să deseneze și alte lucruri? Ce zici de hexagon?

Instrucțiuni condiționale Introducere Până acum am îndeplinit sarcini predefinite, dar la modul serios nu am făcut decât ce face un casetofon care urmează redă același lucru de fiecare dată. Ceea ce face programarea atât de puternică sunt instrucțiunile condiționale. Este facilitatea de a testa o variabilă față de o valoare și de a reacționa într-un fel dacă condiția este îndeplinită de variabilă și în alt fel dacă nu. Acestea sunt în mod normal denumite de programatori instrucțiuni if. Pentru a ști dacă condiția este Adevărată sau Falsă avem nevoie de un nou tip de date: logice. Acestea permit operații logice. O instrucțiune sau operație logică poate fi evaluată la Adevărat sau Fals. Instrucțiunea noastră condițională poate fi înțeleasă ca: Condiția poate fi orice se evaluează la Adevărat sau Fals. Comparațiile întotdeauna întorc Adevărat sau Fals, de exemplu == (este egal cu), > (mai mare decât), < (mai mic decât). Partea else este opțională. Dacă nu o folosești, atunci când condiția are valoarea ‘Fals’ nu se va întâmpla nimic. Exemple Iată câteva exemple. Poți să le citești linie cu linie și să te gândești ce fac, sau poți să le execuți pentru a fi sigur: condition = True if condition: print("condition met") if not condition: print("condition not met") direction = -30 if direction > 0 : turtle.forward(direction) else: turtle.left(180) turtle.forward(-direction)

O funcție parametrizată pentru un hexagon de dimensiune variabilă Exercițiu Scrie o funcție care îți permite să desenezi hexagoane de orice dimensiune dorești, la fiecare apelare. Soluție def hexagon(size): for _ in range(6): turtle.forward(size) turtle.left(60) O funcție cu mai mulți parametri Exercițiu Scrie o funcție care va desena o formă cu oricâte laturi (să presupunem că mai mult de două), de orice lungime a laturii. Fă-o să deseneze diverse forme. Uite un exemplu de desenare a unor forme cu această funcție: Soluție def draw_shape(sides, length): for _ in range(sides): turtle.forward(length) turtle.right(360 / sides) Supliment Ar putea suna aiurea, dar este perfect posibil să transmiți o funcție ca parametru altei funcții! Python tratează funcțiile ca pe ‘lucruri’ perfect normale, la fel ca variabilele, numerele și șirurile de caractere. De exemplu, ai putea creea o funcție de desenare a funei forme care se întoarce într-o direcție sau alta în funcție de ce funcție îi transmiți - turtle.left sau turtle.right. Vezi dacă poți implementa asta!

Funcții cu parametri Introducere Pe măsură ce reducem codul și adăugăm funcții pentru a elimina duplicarea, îl factorizăm. Ăsta este un lucru bun. Dar funcțiile pe care le-am creeat până acum nu sunt foarte flexibile. Variabilele sunt definite în cadrul funcției, așa că dacă vrem să folosim un alt unghi sau altă distanță atunci trebuie să scriem o nouă funcție. Funcția noastră hexagon poate desena doar o singură dimensiune de hexagon! Din acest motiv avem nevoie să putem transmite funcției parametri, numiți și argumente. În acest mod variabilele din cadrul funcției pot avea diverse valori la fiecare apel al funcției. Iată cum am definit funcția line_without_moving() în secțiunea precedentă: def line_without_moving(): turtle.forward(50) turtle.backward(50) O putem îmbunătăți transmițându-i un parametru: def line_without_moving(length): turtle.forward(length) turtle.backward(length) Parametrul se comportă ca o variabilă vizibilă doar în cadrul definiției funcției. Utilizăm această funcție nou definită prin apelarea ei cu noua valoare pe care dorim să o aiba parametrul în acest mod: line_without_moving(50) line_without_moving(40) Am utilizat funcții cu parametri încă de la începutul cursului cu turtle.forward(), turtle.left() etc. Și putem pune oricâte argumente (sau parametri) dorim, separându-le cu virgule și dându-le nume diferite: def tilted_line_without_moving(length, angle): turtle.left(angle) turtle.forward(length) turtle.backward(length)

Salut, De acestă dată o să vă prezint cel de-al 5-lea modul din micul plan, și anume, "Bazele CSS" ! Ce este CSS? CSS (Cascading Style Sheets) este un limbaj care se foloseşte pentru descrierea semanticii de prezentare a documentului scris într-un limbaj descriptiv (markup language). Cu alte cuvinte, acesta descrie, respectiv ordonează aspectul şi formatarea oricărui element de pe pagină. Regulile CSS ne permit să stilizăm elementele HTML şi alte documente. CSS se foloseşte doar pentru ordonarea şi stilizarea conţinutului în HTML şi a altor documente. CSS este separat de limbajul HTML şi de tag-urile sale. Dacă avem o pagină HTML, nu mai trebuie să corectăm codul respectiv pentru a introduce codul CSS. Pe acesta îl introducem fie într-un fişier separat (cu extensia .css), fie în partea head a documentului HTML. Cum funcţionează CSS-ul? Utilizând CSS, putem crea reguli, cu ajutorul cărora stilizăm cadrul respectiv, dar şi elementele din el. Sintaxa CSS constă în regula CSS (CSS Rule). Regulile CSS sunt alcătuite în mod obligatoriu din două părţi: selectorul (selector) şi declaraţia (declaration). Selectorul indică elementul (sau, dacă sunt mai multe, le separăm prin virgulă) la care se referă respectiva regulă CSS. Declaraţia implementează stilizarea pentru elementul la care se referă regula CSS. Când creăm o regulă CSS, plasăm selectorul, apoi introducem un spaţiu gol şi apoi punem paranteze acolade, după care introducem declaraţia, ca în exemplul de mai jos: h1 { color:red; } Declaraţiile sunt, de asemenea, alcătuite din două părţi: proprietate (property) şi valoare (value). Dacă vrem ca paragrafele paginii noastre să aibă fontul Tahoma şi dimensiunea de 12 px, vom scrie următoarele: p { font-family:Tahoma; font-size:12px; } Prin urmare: limbajul CSS este alcătuit din reguli. Fiecare regulă este alcătuită din selector şi declaraţie. Declaraţia este alcătuită din proprietate şi valoare. Modalitatea de scriere a unei reguli CSS Am menţionat că CSS este separat de codul HTML, de aceea există trei opțiuni de plasare a acestuia, din care două se folosesc în mod activ. CSS-ul extern După cum îi spune și numele, CSS-ul extern se află în afara documentului HTML, într-un fişier separat. Cea mai simplă versiune este cea în care avem un fişier HTML, iar lângă el, un fişier CSS. Este suficient să introducem un anumit tag în partea head a fişierului HTML, tag care va conecta fişierul CSS extern. Pe de altă parte, în fişierul CSS scriem doar regulile. În fişierele CSS, nu trebuie să apară nicio parte a limbajului HTML. Tag-ul pentru legarea regulilor CSS în partea head a paginii este <link>. În cazul tag-ului <link>, aceste atribute sunt: href – defineşte calea până la fişierul CSS extern. Poate fi relativă sau absolută. type – defineşte tipul de document la care ne legăm, deoarece tag-ul <link> se poate folosi şi în alte scopuri, deşi în ultimul timp se foloseşte doar pentru CSS. Setăm: ”text/css”. rel – defineşte relaţia dintre fişierul HTML şi cel legat, adică fişierul extern. Setăm: ”stylesheet” <!DOCTYPE html> <html> <head> <title>CSS extern</title> <link href=”css/stilizare.css” type=”text/css” rel=”stylesheet”> </head> <body> </body> </html> CSS-ul intern Spre deosebire de CSS-ul extern, CSS-ul intern se află direct în documentul HTML, mai exact în partea head. În loc să punem un tag <link> ca mai sus, putem adăuga tag-ul <style>, iar în cadrul lui să scriem direct regulile CSS. <!DOCTYPE html> <html> <head> <title>CSS intern</title> <style type=”text/css”> p { font-family:Tahoma; font-size:12px; } </style> </head> <body> </body> </html> Inline CSS Am menţionat că există trei moduri de a scrie codul CSS. În afară de CSS-ul extern şi intern, există şi modul de scriere inline. Acesta se deosebeşte prin faptul că selectorul este omis, iar CSS-ul se scrie direct în tag-ul HTML, la fel ca atributul. În CSS inline, adăugăm atributul style (pe tag-ul HTML pe care vrem să-l stilizăm) și în el scriem între ghilimele proprietăţile şi valorile, ca mai devreme. <p>First paragraph</p> <p style=”font-family:Tahoma; font-size:12px;”>My paragraph</p> <p>Third paragraph</p> Regula ordonării stilurilor CSS In cadrul fişierelor CSS sau al secțiunii CSS din cadrul paginii se poate ajunge la suprapunere. În astfel de situaţii, există anumite reguli care se aplică în mod automat şi determină care regulă CSS va fi aplicată. În cazul în care regulile CSS se suprapun, browser-ul va aplica regula de proximitate (engl. proximity rule), care specifică aplicarea regulii CSS care este cea mai apropiată de elementul-ţintă. Practic, aceasta înseamnă că, în caz că există mai multe stilizări diferite pentru acelaşi element, browser-ul va folosi cel mai apropiat element de elementul respectiv, cu condiţia ca selectorul să fie identic. În caz că selectorii se deosebesc (dar ţintesc acelaşi element), este important care dintre aceştia este mai precis, iar apoi este importantă şi ordinea. Semantica şi noile elemente HTML5 Dacă ne axăm numai asupra aspectului vizual, toate elementele noi se comportă ca niște div-uri şi nu există niciun fel de diferenţă. Dar, pe de altă parte, contribuie la semantica paginii, adică definesc scopul și menirea părților paginii. Cele mai frecvente elemente noi de bază sunt: Elementul <section> inserează o parte a paginii, respectiv a documentului. Poate cuprinde mai multe elemente identice (de exemplu, <article>), care au subiect sau scop similar. Se poate folosi pentru gruparea altor elemente în unități. Dintre elementele noi, unii autori îl consideră cel mai apropiat de vechiul div. Elementul <article> se comportă ca un cadru pentru orice parte a paginii care se poate evidenția în raport cu restul conţinutului. Este destinat pentru articole, postări pe blog, pe forumuri şi orice alt conţinut independent. Se pot ordona unul după altul sau unul într-altul (de exemplu, comentarii pentru un anumit post care este article - comentariile în sine pot fi, de asemenea, article). Deseori, la început putem face confuzie între <section> şi <article>. Elementul <nav> se foloseşte pentru introducerea şi setarea principalelor elemente de navigare pe pagină (site). Încă există o polemică dacă nav trebuie folosit pentru toate poziţiile de pe linkuri din pagină sau doar pentru navigarea principală. O regulă general-acceptată este că nav trebuie folosit pentru Block-uri mai mari de navigare. De exemplu, dacă în footer setăm doar linkuri pentru termenii de utilizare, informaţii legale şi pagina de start, acestea nu trebuie puse în nav. Dar, dacă în acelaşi footer avem repetate complet principalele linkuri, principala navigare a site-ului, atunci trebuie folosit nav. Elementul <aside> are două scopuri, în funcţie de faptul dacă se află în cadrul elementului <article> sau nu. Elementul <header> se foloseşte pentru a defini un header individual al unei anumite părţi sau al unui anumit element al paginii (de exemplu: <article> sau <section>) sau, mult mai frecvent, pentru a defini principalul header al paginii. În cazul în care se află direct pe pagină, setează headerul site-ului care conţine logoul, motorul de căutare, navigarea etc. Elmelentul <footer> este asemănător cu headerul, dar are alt scop. În timp ce headerul setează antetul, footerul setează partea finală a elementului sau a paginii. Dacă se află în interiorul unei părţi a paginii, poate conţine numele autorului textului, paginile legate etc. Dacă se află direct pe pagină, poate să conţină diferite elemente care se găsesc, de obicei, în partea de jos a site-urilor (informaţii legale, linkuri către harta site-ului şi către regulile de utilizare, navigarea repetată etc.). Elementul <figure> are ca principal scop încadrarea conţinutului suplimentar legat de text (partea paginii). De exemplu, pentru setarea imaginilor, a materialului video, a diagramelor etc. În cadrul său, se poate adăuga şi <figcaption> pe lângă conţinutul în sine, ca descriere. În ultimul timp, se pune foarte des întrebarea: „Când şi în ce situaţie putem folosi un element HTML5 sau altul şi, în general, dacă le putem folosi sau dacă ar trebui să le folosim sau ar trebui să revenim la bine cunoscutul DIV?” Toate aceste elemente vi se pot părea confuze acum, deoarece unele sunt identice (de exemplu: aside şi figure), dar fiecare are propriul scop. În general, şi elementele div se folosesc în continuare, nu sunt eliminate din uz. Putem spune că div-ul se foloseşte întotdeauna, excepţie făcând existenţa unui element determinat cu exactitate pentru o anumită aplicare (de exemplu, header sau footer, şi atunci folosim <header>, respectiv <footer>). Elementele Block si Elementele Inline Toate elementele vizibile de pe o pagină, de la imagini şi paragrafe până la linkuri, sunt localizate în cadre invizibile (în limba engleză, se foloseşte termenul box). Aceste cadre apar în două variante: Block şi Inline. Diferenţa dintre aceste elemente constă în comportamentul lor pe pagină: Elementele Block sunt dreptunghiuri, care tind să umple întregul spaţiu orizontal. Elementele Inline sunt dreptunghiuri, care se potrivesc cu alte elemente. În ilustraţia de mai sus, putem vedea în ce constă diferenţa dintre aceste elemente. Elementele Block se aranjează unul sub altul, indiferent de lăţimea lor. Elementele Inline se aranjează unul lângă altul, precum literele într-un text. Dacă nu le definim altfel, elementele Block ocupă cât mai mult spaţiu pe orizontală şi mută elementul precedent şi pe cel următor deasupra sau sub ele. Practic, împing toate elementele aflate lângă ele dedesubt şi rămân singure pe rândul respectiv. Elementele Block reprezintă instrumentul principal de a ordona paginile. Elementele Inline se bazează pe formatarea textului şi astfel se şi scriu. Dimensiunile lor depind doar de conţinutul din cadrul lor. Dacă definim lăţimea unui element Inline, de exemplu la 200 px, nu se va întâmpla nimic, lăţimea lui va depinde în continuare de lăţimea conţinutului. Contrar acestui lucru, adăugarea de text va mări lăţimea. În mod implicit, fiecare element de pe pagină (în cadrul secțiunii <body>) este element Block sau Inline. Totuşi, cu ajutorul lui CSS, putem schimba un element Inline într-unul Block sau invers. De exemplu, elementele de pe o listă neordonată (Block) se pot transforma în elemente Inline şi astfel obţinem un rând de text cu elemente puse unul lângă altul. De asemenea, putem schimba un şir de linkuri dintr-un text (Inline) în elemente Block, pentru a obţine linkuri aranjate pe verticală. In mod implicit, în elementele Block intră: elemente div (<div>) paragrafe (<p>) liste (<ul>) elementele listelor (<li>) titluri (<h1> – <h6>) tabele (<table>) elementele HTML5 de bază (<section>, <aside>, <nav>, <header> şi <footer>) tag-ul body (<body>) În mod implicit, în elementele Inline intră: elemente span (<span>) linkuri (<a>) formatarea bold (<strong> sau <b>) formatarea italică (<em> sau <i>) imagini (<img>) citate (<cite>) etichete (<label>) Gruparea elementelor. Gruparea mai multor elemente într-un singur element Block (div) Elementul <div> ne permite să grupăm mai multe elemente într-un singur element Block. De exemplu, putem să creăm un div pentru antetul paginii şi să punem în el toate elementele antetului (logo, slogan, navigare, căutare). Tag-ul div, fiind de tip Block, începe pe un rând nou. În afară de aceasta, el nu influenţează aspectul paginii. În mod implicit, div-urile nu au niciun fel de stilizare (fundalul este transparent, border, margin şi padding sunt 0, înălţimea depinde de conţinut şi aşa mai departe). Totuşi, le putem adăuga valori ID şi/sau CLASS şi să le ţintim cu regulile CSS. Această simplitate de bază, pe de o parte, și marile posibilităţi de stilizare, pe de altă parte, fac din elementele div structura de bază a fiecărui site. Gruparea mai multor elemente într-un singur element Inline (SPAN) Elementul <span> este echivalentul Inline al elementului <div>. Cu ajutorul lui putem grupa mai multe elemente Inline într-unul singur. De obicei, se foloseşte pentru a separa părţile din text, deoarece putem, de exemplu, să marcăm o parte din text, să adăugăm CLASS sau ID, iar apoi cu o descriere CSS să influenţăm partea respectivă a textului (care este înconjurată de span). Modelul CSS Box După cum am menţionat deja, în jurul fiecărui element vizibil de pe pagină există un cadru (box) imaginar pe care îl putem stiliza. Dacă am împărți afişarea unui element în etape, am obţine următoarea ordine: HTML setează conţinutul şi creează un cadru imaginar. CSS stilizează cadrul respectiv, îl modifică după nevoie, pentru ca în final să afişeze utilizatorului elementul respectiv. Modelul Box este alcătuit din 5 proprietăţi de bază ale elementelor. Acestea sunt: Width (lăţimea) Height (înălţimea) Margin (marginea sau spaţiul extern) Padding (padding sau spaţiul intern) Border (bordură, cadru) Marginile sunt întotdeauna transparente şi separă elementul de alte elemente de pe pagină. Cadrele (Borders) pot avea diferite stiluri şi stabilesc graniţele elementului. Padding separă conţinutul (content) unui element de cadrele sale. Setările elementelor de fundal se referă la aria din interiorul cadrului, împreună cu secțiunea Padding şi Content (în imagine, secțiunea Padding este afişată cu verde mai închis, deşi în realitate este invizibilă). Proprietăţile Margins, Borders şi Padding pot avea valori diferite pentru fiecare parte a unui element (Top, Right, Bottom, Left). În mod implicit, aceste proprietăţi sunt, de obicei, 0. Este important de reţinut că valorile Width şi Height determină doar lăţimea, respectiv înălţimea conţinutului elementului. Înălţimea şi lăţimea reală pe care elementul le ocupă pe pagină sunt: Content + Padding + Border De exemplu, dacă avem un element div în care conţinutul este de 100x100 pixeli, Padding este 10 px (pe toate părţile), iar Border este 2 pixeli (de asemenea, pe toate părţile), acesta va ocupa 124x124 pixeli. Asta se datorează faptului că lăţimea totală este: 100px pentru conţinut + 10px pentru Padding x2 pentru Padding-ului din stânga şi dreapta + 2px pentru Border x2, deoarece avem şi cadru în stânga şi în dreapta (100 + 10x2 + 2x2 = 124px). Acelaşi lucru este valabil şi pentru înălţime. Codul CSS pentru elementele din acest exemplu ar putea fi: div { width:100px; height:100px; padding:10px; margin:0; border-width:2px; border-style:solid; border-color:#f90; } Proprietăţile CSS în modelul box Width şi Height Cele două proprietăţi reprezintă lăţimea, respectiv înălţimea conţinutului elementului. În mod implicit, lăţimea şi înălţimea sunt atât de mari cât trebuie să înconjoare conţinutul. Excepţie face lăţimea elementelor Block, care se extinde la maxim. Valoarea poate fi în pixeli, procente sau în valori em. Pixelii sunt cel mai popular mod și se folosesc în majoritatea cazurilor. Dacă folosim procente, dimensiunea va fi stabilită de dimensiunea ferestrei browser-ului, respectiv de dimensiunea elementului părinte (dacă există). La valoarea em, dimensiunea depinde de dimensiunea textului (fontului) din cadrul lui: .myDiv { width:400px; height:80%; } Padding Această proprietate defineşte spaţiul intern (Padding). Dacă nu punem nicio valoare, cea implicită este 0. Dacă proprietatea nu conţine niciun sufix, atunci aceasta se aplică pe toate cele patru părţi: padding:10px; Dacă vrem valori Padding diferite, sus, la dreapta, la stânga şi jos, putem scrie, de exemplu: padding-top:10px; padding-right:15px; padding-bottom:20px; padding-left:25px; Există şi un mod prescurtat de scriere (Shorthand). Putem folosi doar proprietatea Padding (fără sufix), pentru a determina toate cele 4 valori: padding:10px 15px 20px 25px; Este important de menţionat doar că valorile se scriu întotdeauna în sensul acelor de ceasornic, începând de sus. În exemplul nostru, 10 px este valoarea Padding-ului de sus, 15 px a celui din dreapta, 20 px a celui de jos, iar 25 px a celui din stânga. Margin Această proprietate defineşte spaţiul extern (Margin). Toate regulile valabile pentru Padding sunt valabile şi pentru Margin. Valoarea implicită este 0 la elementele div. Putem să scriem proprietatea generală (Margin) sau să folosim aceleaşi sufixe pentru părți ca şi la Padding sau putem să scriem şi proprietatea shorthand (prescurtată). margin:100px; margin-top:100px; margin-right:30px; margin-bottom:200px; margin-left:25px; margin:100px 30px 200px 25px; Border-width Folosim această proprietate pentru a defini grosimea marginii din jurul elementului. Putem folosi pixeli sau una dintre următoarele trei valori: thin, medium, thick. În acest caz, procentele şi alte unităţi nu sunt permise. La fel ca la margin şi padding, valoarea border se aplică tuturor celor patru părţi. Valorile diferite le putem scrie prescurtat (shorthand) sau separat, de exemplu: border-top-width: 6px; border-right-width: medium; border-bottom-width: 3px; border-left-width: thin; Border-style Această proprietate se folosește pentru a determina tipul de bordură, cadrul (border) din jurul elementului. În imaginea de mai jos, putem vedea opțiunile posibile. În general, se foloseşte solid (o linie simplă). Valoarea este propriul nume al tipului: solid, double, grooved etc. Dacă toate marginile elementului sunt identice, scriem: border-style:solid; De asemenea, putem determina şi tipul marginii, folosind: border-top-style: solid; border-right-style: groove; border-bottom-style: dotted; border-left-style: outset; Border-color După cum îi spune numele, această proprietate defineşte culoarea marginii. Valoarea culorii poate fi scrisă în diferite moduri, cu ajutorul sistemului hex, RGB sau cu ajutorul numelor culorilor (despre culorile pe web vom discuta într-o lecţie separată): border-color: #FF9900; Alte proprietăţi importante: Display Mai devreme, am menţionat că elementele Block se pot transforma în elemente Inline şi invers. Tipul de element poate fi determinat folosind proprietatea Display prin CSS. Dacă, de exemplu, la valoarea Display a unui element Inline îi atribuim valoarea Block, atunci acest element va fi tratat ca oricare alt element Block: span { display:block; } Cu acest exemplu, am transformat elementele span în elemente Block. În afară de valorile Block şi Inline, pe care le folosim pentru a schimba tipul, proprietatea Display poate avea şi valoarea none. În acest caz, dacă aplicăm display:none, browser-ul se va comporta ca și când elementul nu ar exista, deşi acesta se va afla în cod. De asemenea, orice element încorporat în cadrul elementului respectiv nu va fi afişat, deşi îi este acordată o altă valoare Display. De exemplu, tag-ul span este un element Inline. Dacă atribuim valoarea display:block, practic aceasta se va comporta ca un div. Pe de altă parte, dacă postăm display:none, span-ul menţionat nu va fi vizibil. Totuşi, trebuie să reţinem faptul că, datorită acestei opţiuni nu eliminăm în totalitate elementul, ci doar ascundem afişarea lui, însă utilizatorul va putea citi întotdeauna codul-sursă HTML, pe care îl conţine partea respectivă. Datele sensibile nu ar trebui ascunse în acest mod. Visibility Proprietatea visibility asigură ascunderea unui anumit element, în timp ce spaţiul rezervat pentru elementul respectiv rămâne. Poate avea una dintre următoarele două valori: hidden (ascunde elementul) sau visible (afişează elementul - aceasta este valoarea implicită şi nu trebuie să o scriem). span { visibility:hidden; } Diferenţa dintre visibility:hidden; şi display:none; constă în faptul că, în primul caz, elementul dispare, însă rămâne un spaţiu rezervat pentru el, iar celelalte elemente nu se mută, în timp ce în al doilea caz, elementul dispare de pe pagină și odată cu el şi spaţiul rezervat, aşadar şi celelalte elemente se mută pe pagină. Vă reamintim că, atunci când se utilizează aceste două tehnici, elementele sunt ascunse utilizatorului doar din punct de vedere vizual, rămânând în continuare disponibile în cod, aşadar nu trebuie să ascundem date sensibile în acest mod. Overflow Această proprietate se folosește pentru a defini ce se întâmplă în cazul în care conţinutul depăşeşte cadrele date. De exemplu, putem să definim lăţimea şi înălţimea unui div la 200x300 px, iar apoi să introducem întreaga pagină de text. Deoarece dimensiunile definite sunt mai mici decât cele necesare, textul întreg nu va fi vizibil (partea care depășește div-ul). Totuşi, folosind proprietatea overflow, putem să definim cazul în care conţinutul din cadrul elementului se derulează utilizând overflow:scroll; . O altă valoare posibilă este overflow:hidden; , care va tăia partea ce iese în afara cadrului. Valoarea implicită este overflow:visible; div.myText { overflow:scroll; } În trecut, această proprietate se folosea mai mult pentru introducerea textelor mai lungi în niște cadre limitate. Acum, odată cu dezvoltarea web-ului, proprietatea a devenit inutilă, chiar ineficientă. Totuşi, o caracteristică secundară a acestei proprietăţi a devenit utilă pe site-urile moderne. Min-width, max-width După cum ne şi spun denumirile acestor proprietăţi, este vorba de o lăţime minimă, respectiv maximă a elementelor. În loc să folosim dimensiuni fixe, putem să definim dimensiunea minimă şi/sau maximă: #wrapper { min-width:960px; max-width:1280px; } Utilizarea ambelor proprietăţi în acelaşi element nu este obligatorie. Nu trebuie combinate cu lățimea fixă. Min-height, max-height Proprietăţile min-height şi max-height se comportă la fel ca proprietățile menționate mai sus, singura diferenţă constând în faptul că se referă la înăţimea elementului: p { min-height:10px; max-height:26px; }

O funcție pentru un hexagon Exercițiu Scrie o funcție care desenează un hexagon. Acum combină funcția aceasta într-un fagure. Creează un singur strat așa: Încearcă! Soluție def hexagon(): for _ in range(6): turtle.forward(100) turtle.left(60) for _ in range (6): hexagon() turtle.forward(100) turtle.right(60) Poți să pui partea cu``turtle.forward(100); turtle.right(60)`` direct în funcție, dar în acest caz ar fi mai bine să nu o denumești hexagon. Asta ar fi derutant pentru că de fapt desenează un hexagon și pe urmă avansează într-o poziție în care un alt hexagon ar avea sens doar în cazul unui fagure. Dacă ai avea nevoie să reutilizezi funcția la altceva decât faguri, asta ar fi neașteptat.

O funcție pentru un pătrat Exercițiu Scrie o funție care desenează un pătrat. Poți utiliza această funcție pentru a îmbunătăți programul cu pătrate înclinate? Dacă schimbi programul pentru a folosi o funcție, este mai ușor să experimtentezi? Soluție def tilted_square(): turtle.left(20) # now we can change the angle only here for _ in range(4): turtle.forward(50) turtle.left(90) tilted_square() tilted_square() tilted_square() # bonus: you could have a separate function for drawing a square, # which might be useful later: def square(): for _ in range(4): turtle.forward(50) turtle.left(90) def tilted_square(): turtle.left(20) square() # etc

Funcții definite de utilizator Introducere Programatorii pot întâlni probleme destul de complexe și abstracte, dar o caracteristică a unui bun programator este lenea. Ei doresc să aibă de-a face cu un singur lucru odată . Așa că ai nevoie să spargi problemele în bucăți mai mici, separate, care să îți permită să te concentrezi doar pe cea pe care dorești. Funcțiile sunt un mod de a face această abstractizare în Python. Hai să luăm ca exemplu turtle.reset(). reset este o funcție pe care o apelăm pe turtle și este de fapt o abstractizare a unui număr de pași, adică: Șterge tabla. Setează lățimea și culoarea la valorile implicite. Mută țestoasa înapoi la poziția inițială. Dar pentru că tot codul este inclus în funcție, nu trebuie să ne facem griji pentru aceste detalii. Putem pur și simplu să apelăm această funcție și vom ști că va face ceea ce spune. Deci - cum să îți scrii propriile funcții? O funcție poate fi definită în Python folosind cuvântul cheie def: def line_without_moving(): turtle.forward(50) turtle.backward(50) Funcția pe care am definit-o se numește line_without_moving și este o abstractizare a doi pași ai țestoasei - o deplasare înainte și o deplasare înapoi. Pentru a o utiliza (sau așa cum se spune de obicei, pentru a o apela), scrie numele ei urmat de paranteze: line_without_moving() turtle.right(90) line_without_moving() turtle.right(90) line_without_moving() turtle.right(90) line_without_moving() Am putea să scriem mai multe funcții pentru a elimina repetițiile: def star_arm(): line_without_moving() turtle.right(360 / 5) for _ in range(5): star_arm()

Pătrate mai eficiente Exercițiu Pătratele pe care le desenam la începutul acestui curs aveau multe linii de cod repetate. Poți scrie un program de desenare pătrate în mai puține linii de cod utilizând bucle? Soluția for _ in range(4): turtle.forward(100) turtle.left(90) Supliment Încearcă să faci bucle imbricate, punând una chiar după (înăuntrul) alteia, cu câteva comenzi de desen care aparțin amândorura. Uite cum poate arăta: for ...: for ...: # drawing code inside the inner loop goes here ... # you can put some code here to move # around after! ... Înlocuiește ... cu codul tău, și vezi dacă poți obține ceva drăguț sau interesant!

Desenarea unei linii întrerupte Exercițiu Desenează o linie întreruptă. Poți mișca țestoasa fără ca aceasta să deseneze utilizând funcția turtle.penup() (ridică penița); pentru ca aceasta să deseneze din nou, folosește turtle.pendown() (penița jos). Soluția for i in range(10): turtle.forward(15) turtle.penup() turtle.forward(5) turtle.pendown() Supliment Poți face dungile să fie mai lungi pe măsură ce desenezi linia? Comentarii În exemplul de mai sus, linia care începe cu # este numită un comentariu. În Python, orice urmează pe o linie după # este ignorat de calculator. Folosește comentarii pentru a explica ce face programul tău, fără a schimba modul de comportare al calculatorului. Pot fi folosite și pentru a dezactiva rapid și temporar, sau a “comenta”, linii de cod. Comentariile pot fi puse de asemenea la sfârșitul unei linii, așa: turtle.left(20) # tilt our next square slightly

Salut, De acestă dată o să vă prezint cel de-al 4-lea modul din micul plan, și anume, "Tabelele, formularele si informatiile de pe pagina" ! Vom incepe cu Tabelele Structura tabelului Există mai multe tipuri de date care sunt mai uşor de reprezentat sub formă de tabel decât sub formă de text. De exemplu, rezultatele sportive, rapoartele financiare, orarele şi multe alte informaţii de pe site-uri sunt mai uşor de reprezentat prin tabele. În limbajul HTML, tabelele sunt alcătuite din celule, pe care le marcăm cu td (table data), şi din rânduri, pe care le marcăm cu tr (table row) - acestea sunt conținute în cadrul tag-ului table, care înconjoară totul. Observați imaginea de mai jos pentru a înțelege mai bine: Aceasta este reprezentarea unui tabel cu trei rânduri şi patru coloane, în total 12 celule. În imagine, este marcată şi ordinea în care sunt aranjate celulele. Când scriem tabele în limbajul HTML, trebuie să respectăm următorii paşi: Deschidem tag-ul <table> Deschidem rândul tabelului <tr> Scriem toate celulele <td>, în acest caz - patru Închidem rândul actual <tr> Deschidem următorul rând <tr> Scriem toate celulele <td> În cod, un astfel de tabel ar arăta astfel: <table width="600" border="1"> // atributul 'border' - este pentru grosimea liniei tabelului <tr> <th>*</th> <th>monday</th> <th>tuesday</th> <th>wednesday</th> <th>thursday</th> <th>friday</th> </tr> <tr> <th>morning</th> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <th>evening</th> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> Atributele td Unirea pe orizontală Dacă trebuie să unim anumite celule ale tabelului pe orizontală, pe prima celulă care trebuie unită vom pune atributul colspan, în care definim peste câte celule trebuie să se extindă. <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> Însă, dacă vrem să unim celulele 4 şi 5, atunci trebuie să adăugăm atributul colspan cu valoarea 2 (deoarece unim două celule) și, de asemenea, trebuie să eliminăm întregul tag <td> al celulei 5. <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td colspan="2">4</td> <td>6</td> </tr> </table><span style="font-size: 14px;"> </span> Unirea pe verticală Dacă vrem să unim celulele pe verticală, utilizăm o tehnică similară celei prin care realizăm unirea pe orizontală, numai că în acest caz atributul este rowspan, în loc de colspan. <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> Dacă schimbăm codul, arata astfel: <table> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> Tabelele lungi Dacă avem nevoie de tabele foarte lungi sau complicate, putem ramifica părțile <head>, <body> şi <footer> ale tabelului. Termenii ne reamintesc de anumite părţi ale documentului HTML, însă similitudinea nu este foarte mare. Tag-ul <thead> se foloseşte pentru a marca antetele tabelului. Tag-ul <tbody> se foloseşte pentru a introduce rândurile şi celulele obișnuite. Tag-ul <tfoot> se foloseşte pentru a marca partea de jos a tabelului. Iată cum arată în cod: <table> <thead> <tr> <td>celula părţii head</td> </tr> <tr> <td>celula părţii head</td> </tr> </thead> <tfoot> <tr> <td>celula părţii footer</td> </tr> <tr> <td>celula părţii footer</td> </tr> </tfoot> <tbody> <tr> <td>celula părţii body</td> </tr> <tr> <td>celula părţii body</td> </tr> </tbody> </table> Bazele formularelor Formularele în sine nu au nicio funcţionalitate, ci reprezintă doar un tip de şablon pentru colectarea informaţiilor. Când utilizatorul completează un formular de pe un site, datele colectate sunt transmise până la script-urile de pe o altă pagină, care va finaliza activitatea de colectare a datelor. Pagina contact.html conţine un formular în care utilizatorul introduce datele şi un mesaj. După ce utilizatorul trimite formularul, acesta apelează pagina contact_send.php, pe care se află un script, care procesează datele colectate şi le trimite prin e-mail la adresa indicată. Script-ul poate trimite e-mailuri, poate scrie/citi datele din baza de date sau poate face alte lucruri definite. Tag-ul form Baza formularului web este tag-ul form. Acesta este doar un simplu element HTML cu atribute şi subelemente caracteristice. Astfel, în el introducem tot ceea ce vrem să trimitem serverului prin formularul respectiv. Fiecare formular (<form>) recunoaşte evenimentul submit. Acesta activează formularul şi transferă valorile acestuia către server. Tag-ul se scrie foarte simplu: <form></form> Totuşi, acest lucru nu este suficient pentru început. Fiecare formular trebuie să aibă următoarele atribute: Action Method ID Action Fiecare formular conţine atributul action care indică script-urile la care vor fi transferate datele. În exemplul de mai sus, era vorba de pagina contact_send.php. Observăm că pagina-ţintă este de tip .php. Acest lucru este frecvent (.php, .asp, .jsp) deoarece procesarea parametrilor de server se poate efectua doar din script-urile de pe server. În cazul în care nu vrem să transmitem parametri către server, nu avem nevoie de formular. Dacă omitem acest atribut, browser-ul va subînţelege că aceeaşi pagină care conține formularul va procesa și datele. Method Atributul method defineşte modul în care vor fi transmise datele. Există două opţiuni, şi anume: metoda GET - datele din formular sunt trimise serverului printr-un URL. Informaţiile transmise în acest mod sunt transparente şi supuse atacurilor din partea hackerilor. Deoarece un URL poate avea cel mult 8.192 de caractere, această metodă nu este adecvată pentru formulare mai lungi. De asemenea, putem ajunge la transliteraţie sau transcripţie, iar unele caractere se pot modifica sau pierde pe parcurs. metoda POST - această metodă împachetează datele formularului în cadrul cererii HTTP. Datele nu sunt codificate şi de aceea (deşi sunt mai sigure decât în cazul metodei GET) sunt supuse atacurilor din partea hackerilor. Aşadar, în cazul în care colectăm informaţii personale, precum nume de utilizator, parole sau numere de carduri de credit, trebuie să asigurăm o conexiune mai sigură până la un server sigur. Name şi ID ID-ul se foloseşte pentru determinarea unică a elementului HTML pe o pagină în Document Object Model (prin JavaScript sau pentru stilizare prin CSS). ID-ul trebuie să fie unic. Name determină numele formularului. Inserarea unui formular Având în vedere toate cele menţionate mai sus, codul formularului nostru poate avea aspectul următor: <form action="script.php" method="POST" name="formular_exemplu" id="formular_exemplu"> // some cods </form> Controalele formularului Input (text) Tag-ul pe care îl întâlnim cel mai des în formulare este <input>. Acesta este un tag cu autoînchidere, deoarece toţi parametrii lui sunt setați prin atribute. Acelaşi tag se foloseşte pentru mai multe controale diferite, însă este determinat de atributul type obligatoriu. Prin urmare, dacă vrem să introducem un câmp text simplu, vom introduce tag-ul input cu atributul type="text": <input type="text" name="color" id="color"> Mai putem adăuga și atributul maxlength, cu care determinăm numărul maxim de caractere. De exemplu, dacă vrem să limităm numărul posibil de caractere la 4, vom adăuga maxlength="4" <label for="color">color</label> <input type="text" name="color" id="color"> Fără tag-ul label adăugat, s-ar fi afişat doar câmpul fără textul din stânga lui. Tag-ul label nu trebuie să se afle imediat înainte de tag-ul input, însă de cele mai multe ori îl găsim în această poziție. Important este faptul că label posedă atributul for, care îl leagă de un anumit input. Atributul for al tag-ului input trebuie să fie același ca şi atributul ID al tag-ului input (sau al unui alt tag). Input (password) Tag-ul input se foloseşte tot pentru introducerea parolei (password). În acest caz, atributul type este adăugat pe password. Toate celelalte atribute sunt la fel ca și în cazul textului input. <input type="password" name="pass" id="pass"> Textarea Acest tag creează un câmp textual ceva mai mare, care poate susţine și mai multe rânduri de text. Spre deosebire de câmpul input, textarea nu este un tag cu autoînchidere, aşadar necesită un început şi un sfârşit. Între acestea, se introduce textul care se va afişa în control după încărcarea paginii. <textarea name="description" id="description">Lorem ipsum dolor sit amet.</textarea> Radio buttons (Butoanele radio) Butonul radio este un control destul de diferit din punct de vedere vizual față de controalele menţionate mai devreme, însă şi acesta se bazează pe tag-ul input. <input name="country" type="radio" id="Serbia" value="Serbia" checked="checked"> <label for="Serbia">Serbia</label> <br> <input name="country" type="radio" id="Romania" value="Romania"> <label for="Romania">Romania</label> <br> <input name="country" type="radio" id="Ukraine" value="Ukraine"> <label for="Ukraine">Ukraine</label> Dacă vrem ca, pe măsură ce pagina se încarcă, să fie indicată o valoare, vom adăuga atributul checked="checked" pe tag-ul ei input. Valoarea este întotdeauna aceeaşi. Putem adăuga acest atribut doar pe un input radio din grup. Câmpurile Checkbox Acest control este foarte similar cu controlul radio, însă se deosebeşte prin faptul că utilizatorul poate selecta mai multe valori în acelaşi grup. <input name="country" type="checkbox" id="Serbia" value="Serbia" checked="checked"> <label for="Serbia">Serbia</label> <br> <input name="country" type="checkbox" id="Romania" value="Romania"> <label for="Romania">Romania</label> <br> <input name="country"type="checkbox" id="Ukraine" value="Ukraine"> <label for="Ukraine">Ukraine</label> După cum putem vedea, totul este identic, doar atributul type este modificat. Astfel, am activat alegerea multiplă, unde valorile nu se anulează reciproc. Restul rămâne la fel ca în cazul butoanelor radio. Select (dropdown) Acest control permite utilizatorului să selecteze o valoare din meniul dropdown (derulant): <select name="country" id="country"> <option value="Serbia">Serbia</option> <option value="Romania" selected="selected">Romania</option> <option value="Ukraine">Ukraine</option> </select> La fel ca şi unele controale anterioare, putem alege valoarea care trebuie selectată în momentul încărcării paginii. În acest caz, putem adăuga atributul şi valoarea selected="selected" la opţiunea dorită (în exemplu, a fost adăugată celei de-a doua opţiuni - "Romania"). Incărcarea fişierului Controlul care asigură încărcarea fişierelor prin intermediul formularelor este din nou input type (type="file" <input type="file" name="CV" id="CV"> Dacă folosim acest control, formularul trebuie să aibă metoda setată la POST, precum şi un enctype-ul: multipart/form-data Butonul submit Butonul submit, respectiv controlul submit, cum este mai corect, se foloseşte pentru a trimite formulare şi date introduse unui server, unde vor fi procesate. Din nou se foloseşte bine cunoscutul input, dar cu atributul type setat la submit: <input type="submit" name="submit" id="submit" value="Finish"> Fieldset şi legend Dacă vrem să încadrăm o parte din formular şi să-i adăugăm un anumit titlu, putem face acest lucru cu ajutorul tag-ului fieldset cu care încadrăm toate controalele pe care le selectăm. Putem adăuga tag-ul legend imediat după ce deschidem tag-ul fieldset. În continuare, avem următorul exemplu: <fieldset> <legend>Contact</legend> <label>Email:<br> <input type="text" name="email"> </label><br> <label>Phone:<br> <input type="text" name="phone"> </label> </fieldset> Meta tag-urile Tag-urile <meta> se inserează în partea head a paginii, iar rolul lor este să ofere informaţii suplimentare despre pagina pe care se află. Totuşi, aceste informaţii nu sunt vizibile utilizatorului la prima vedere. Deoarece se află în partea head a paginii, nu apar în browser. Aceste informaţii sunt utilizate doar de browser-e pentru o afişare corectă şi de motoarele de căutare (Google și altele) pentru indexarea paginilor. De exemplu, cu un meta tag putem să definim enconding-ul paginii, aspect important pentru browser în ceea ce priveşte afişarea corectă a textelor. Cu ajutorul acestor tag-uri, putem introduce şi descrierea paginii, pe care o va folosi Google în momentul indexării paginii. Tag-ul <meta> este unul cu autoînchidere, deci nu are început şi sfârşit, iar toate informaţiile se află în cadrul atributelor de pe tag. Este important de menţionat că pentru toate meta tag-urile se utilizează practic acelaşi tag - <meta>-, însă cu atribute diferite. Totuşi, nu putem combina mai multe atribute diferite într-un rând. Trebuie să deschidem un tag <meta> nou. Pentru a clarifica acest lucru, vom analiza următorul exemplu: <!DOCTYPE html> <html> <head> <title>Titlul paginii</title> <meta name="description" content="Exemplul paginii pentru meta tag-uri"> <meta name="keywords" content="HTML, Meta, HTML5, xHTML, lectie"> <meta name="author" content="Beny"> </head> Tag-ul Title Deşi nu face parte dintr-un meta tag real, tag-ul title al paginii este deseori inclus în această categorie (nu foloseşte meta, ci propriul său tag title). Ne-am întâlnit deja cu el la începutul cursului. În el, introducem titlul paginii, care este foarte important pentru motoare de căutare. Opinia expertului SEO despre meta tag-uri Meta tag-urile, care se află în antetul paginii HTML, poate nu au un rol important atunci când utilizatorul vizualizează un site, însă funcţia lor capătă o importanţă foarte mare pe pagina cu rezultatele căutării. Prin urmare, prin introducerea cuvintelor-cheie în motorul de căutare şi prin listarea rezultatelor căutării, toate site-urile sunt prezentate prin trei elemente standard: titlu, o scurtă descriere şi adresele URL. Titlul afişat reprezintă, de fapt, conţinutul aflat în tag-ul Meta Title. Dacă Meta Title al nostru conţine cuvintele-cheie pe care le-a introdus utilizatorul, ele vor fi marcate cu un font bolduit, ceea ce va evidenţia site-ul nostru ca fiind o sursă relevantă de informaţii pentru utilizator. Cele mai bune rezultate se obțin folosind tag-ul Meta Title, cu o lungime totală de până la 70 de caractere şi cu un conţinut de cuvinte-cheie în forma în care utilizatorii le introduc în câmpul de căutare. Bineînţeles, motorul de căutare preia următorul principiu similar, conţinutul descrierii paginii din tag-ul Meta Description. Valoarea tag-ului Meta Description nu se află în cuvintele-cheie. De fapt, s-a confirmat faptul că pagina noastră nu va avea o poziţie mai bună dacă tag-ul Meta Description conţine cuvintele-cheie dorite. Adevărata valoare a tag-ului Meta Description stă în abilitatea de a influența acţiunea utilizatorului. Având în vedere că motorul de căutare ne oferă opţiunea de a ne prezenta printr-o singură propoziție, ar trebui să o utilizăm la maxim și să-i afişăm utilizatorului ceea ce poate obţine de la pagina noastră, trebuie să menţionăm avantajele pe care le oferim şi să-i dăm un motiv să ne aleagă tocmai pe noi dintre toate site-urile listate. SEO este o ştiinţă de sine stătătoare.

Bucle Introducere Ceva ce este posibil să fi observat: programele adeseori au nevoie de repetiții. Python are un concept puternic pe care îl utilizează, numit bucle (în jargon: iterații), care poate fi folosit pentru a reduce codul repetitiv! Pentru moment, încearcă acest exemplu simplu: for name in "John", "Sam", "Jill": print("Hello " + name) Este incredibil de util dacă dorim să facem ceva de mai multe ori – să spunem, să desenăm separat marginile unei forme – dar dorim să scriem acea acțiune o singură dată. Iată o altă versiune de buclă: for i in range(10): print(i) Observați cum scriem doar o linie de cod folosind i, dar ia zece valori diferite? Funcția range(n) poate fi considerată o prescurtare pentru 0, 1, 2, ..., n-1. Dacă dorești să afli mai mult, poți folosi documentația din interpretorul Python scriind help(range). Folosește tasta q pentru a ieși din documentație. Poți de asemenea sa treci prin elemente la alegere: total = 0 for i in 5, 7, 11, 13: print(i) total = total + i print(total) Scrie acest exemplu și încearcă-l cu Python, ca să vezi dacă merge așa cum te aștepți. Uneori vrei să repeți o bucată de cod de mai multe ori, dar nu te interesează valoarea variabilei i; în acest caz este o bună practică să o înlocuiești cu _. Asta înseamnă că nu te interesează valoarea, sau că nu dorești să o utilizezi. Iată un exemplu simplu: for _ in range(10): print("Hello!") Poți să te întrebi sau nu despre variabila i - de ce e folosită de fiecare dată? Ei bine, semnifică “index” și este unul dintre cele mai folosite nume de variabile întâlnite în cod. Dar dacă iterezi peste altceva decât numere, asigură-te că îi dai un nume mai bun! De exemplu: for drink in list_of_beverages: print("Would you like a " + drink + "?") Este cu mult mai ușor de înțeles decât dacă am fi folosit i în loc de drink

Salut, mai jos atasez codul care afiseaza inversul unui numar n : #include<iostream.h> int n, inv,c; void main() { cout<<„n=”; cin>>n; inv=0; while(n!=0) { c=n%10; inv=inv*10+c; n=n/10; } cout<<„Inversul=”<<inv; }

Variabile Introducere Ptiu! Experimentarea cu aceste unghiuri îți cere să schimbi trei locuri diferite din cod de fiecare dată. Imaginează-ți că ai dori să expermentezi cu toate dimensiunile pătratelor, nu mai zic de dreptunghiuri! Asta se poate îmbunătăți. Și aici intră în scenă variabilele: poți să îi spui lui Python că din acest moment, de fiecare dată cănd faci referire la o variabilă, vrei de fapt să spui altceva. Conceptul acesta ar putea fi familiar de la simbolurile matematice, unde scrii Fie x = 5. Atunci x * 2 va fi evident 10. În sintaxa Python, exact același lucru se scrie: x = 5 După această declarație, dacă dai comanda print(x), va tipări de fapt valoarea — 5. Ei bine, putem utiliza asta și pentru țestoasă: turtle.forward(x) Variabilele pot păstra tot felul de lucruri, nu numai numere. Un alt lucru pe care dorești de regulă să îl păstrezi sunt șiruri de caractere - o linie de text. Șirurile sunt indicate cu "(ghilimele) la început și la sfârșit. Vom învăța în continuare despre ele și despre alte tipuri, cum sunt ele denumite în Python, și ce poți face cu ele. Poți utiliza o variabilă pentru a da un nume țestoasei: timmy = turtle Acum de fiecare dată când scrii timmy va ști că vorbești despre turtle. Poți să folosești în continuare și turtle: timmy.forward(50) timmy.left(90) turtle.forward(50) O variabilă numită angle (unghi) Exercițiu Dacă avem o variabilă numită angle (unghi), cum o putem utiliza pentru a experimenta mai rapid cu programul nostru de pătrate înclinate? Soluția angle = 20 turtle.left(angle) turtle.forward(50) turtle.left(90) turtle.forward(50) turtle.left(90) turtle.forward(50) turtle.left(90) turtle.forward(50) turtle.left(90) turtle.left(angle) Supliment Poți aplica acest principiu și la dimensiunea pătratelor? Casa lui Moș Crăciun Exercițiu Desenează o casă. Poți calcula lungimea diagonalei folosind teorema lui Pitagora. Această valoare este un bun candidat pentru a fi stocată într-o variabilă. Pentru a calcula rădăcina pătrată a unui număr în Python, va fi nevoie să imporți modulul math și să folosești funcția math.sqrt(). Pătratul unui număr este calculat cu operatorul **: import math c = math.sqrt(a**2 + b**2)

Desenarea unui dreptunghi Exercițiu Poți să desenezi un dreptunghi? Soluția turtle.forward(100) turtle.left(90) turtle.forward(50) turtle.left(90) turtle.forward(100) turtle.left(90) turtle.forward(50) turtle.left(90) Supliment Dar un triunghi? Într-un triunghi echilateral (un triunghi cu laturile egale) fiecare colț are un unghi de 60 de grade. Mai multe pătrate Exercițiu Acum, desenează un pătrat înclinat. Și încă unul, și încă unul. Poți experimenta cu unghiurile între pătrate. În imagine sunt trei întoarceri de 20 de grade. Poți încerca, de exemplu, 20, 30 și 40. Soluția turtle.left(20) turtle.forward(50) turtle.left(90) turtle.forward(50) turtle.left(90) turtle.forward(50) turtle.left(90) turtle.forward(50) turtle.left(90) turtle.left(30) turtle.forward(50) turtle.left(90) turtle.forward(50) turtle.left(90) turtle.forward(50) turtle.left(90) turtle.forward(50) turtle.left(90) turtle.left(40) turtle.forward(50) turtle.left(90) turtle.forward(50) turtle.left(90) turtle.forward(50) turtle.left(90) turtle.forward(50) turtle.left(90)

Salut, in urmatoarele randuri am sa va prezint cum se face suma cifrelor unui numar (n): #include <iostream.h> int n,s,c; void main() { cout<<„n=”; cin>>n; while(n!=0) { c=n%10; // extrag ultima cifra s=s+c; n=n/10; // tai ultima cifra } cout<<„Suma cifrelor=”<<s; }

Desenarea unui pătrat Exercițiu Desenează un pătrat ca în figura următoare: Pentru un pătrat probabil vei avea nevoie de un unghi drept, care este de 90 de grade. Soluția turtle.forward(50) turtle.left(90) turtle.forward(50) turtle.left(90) turtle.forward(50) turtle.left(90) turtle.forward(50) turtle.left(90) Supliment Dacă vrei să fii creativ, poți modifica forma cu funcțiile turtle.width(...) și turtle.color(...). Cum utilizezi aceste funcții? Înainte de a utiliza o funcție trebuie să îi cunoști semnătura (de exemplu numărul de parametri și semnificația lor). Pentru a putea afla asta poți să scrii help(turtle.color) în consola interactivă Python. Dacă este prea mult text, Python o să pună documentația într-un pager, care îți permite să derulezi pagini sus si jos. Apasă tasta q pentru a ieși din pager.

Desenarea simplă utilizând țestoasa Introducere Țestoasa este ca o planșetă de desen. Are funcții ca turtle.forward(...) și turtle.left(...), care pot mișca țestoasa. Înainte de a utiliza țestoasa, aceasta trebuie importată. Îți recomandăm sa te joci cu ea în mod interactiv pentru început, deoarece va fi nevoie de cateva lucruri suplimentare pentru a o face să funcționeze din fișiere. Deschide un terminal și scrie: import turtle turtle.forward(25) turtle.left(30) Funcția turtle.forward(...) îi spune țestoasei să înainteze distanța specificată. turtle.left(...) primește un număr de grade cu care vrei să se rotească la stânga. Există de asemenea turtle.backward(...) și turtle.right(...) Țestoasa standard este un triunghi. Nu e prea drăguț! Hai să o transformăm într-o țestoasă cu comanda turtle.shape(): turtle.shape("turtle") Mult mai drăguț! Dacă pui comenzile într-un fișier, poate ai observat că fereastra cu țestoasa dispare după ce țestoasa și-a terminat mișcarea. (Asta deoarece Python se închide după ce țestoasa și-a terminat mișcarea. De vreme ce fereastra țestoasei aparține Pyhon, și aceasta se închide.) Pentru a evita asta, adaugă la sfârșitul fișierului tău. Acum fereastra rămâne deschisă pâna cand apeși un buton în ea: import turtle turtle.shape("turtle") turtle.forward(25) turtle.exitonclick()

Să începem Ce ai nevoie Un Python! Daca încă nu ai Python, cele mai recente pachete de instalare sunt disponibile aici: http://python.org/download/ Este de preferat Python 3, aceasta fiind cea mai nouă versiune! Și un editor Un editor te ajută să citești și să scrii cod. Există foarte multe, și acesta este una dintre cele mai personale alegeri pe care le poate face un programator - ca un jucător de tenis care își alege racheta, sau ca un bucătar șef care își alege cuțitul preferat. Pentru început, o să vrei doar un editor simplu, ușor de utilizat și care nu te încurcă, dar este totuși eficient la scrierea de cod Python. Iată câteva sugestii: Sublime Text: Un excelent editor care este simplu de utilizat. Scurtătura acestuia Ctrl+B îți permite să execuți imediat fișierul Python la care lucrezi. Rulează pe Windows, Mac și Linux. Geany: Un editor simplu care nu își propune să fie extrem de complicat. Disponibil pe Windows și Linux (probabil îl poți găsi în programul tău de gestiune a pachetelor). TextMate: Unul dintre cele mai faimoase editoare pentru Mac, a fost un produs comercial dar între timp a devenit open-source. Gedit and Kate: dacă dorești să folosești Linux cu Gnome și respectiv KDE, probabil ai deja unul dintre acestea instalat! Komodo Edit: un editor strălucit, gratuit pentru Mac, Windows și Linux, bazat pe mai puternicul Komodo IDE. Dacă dorești recomandarea noastră, încearcă prima dată Sublime Text. Ce este Python de fapt? Bine, Python este ceva numit un limbaj de programare. Preia ceea ce scrii (în mod normal denumit cod), îl transformă în instrucțiuni pentru calculatorul tău și le execută. O să învățăm cum să scriem cod pentru a face lucruri interesante și utile. Nu vei mai fi nevoit să folosești programele altora pentru a face lucruri cu calculatorul tău! Practic, Python este doar un alt program în calculatorul tău. Primul lucru pe care trebuie să îl înveți este cum să interacționezi cu el. Există multe metode ca să faci asta; prima este să interacționezi cu interpretorul Python, utilizând consola sistemului de operare (OS, prescurtare de la Operating System). O consolă (sau ‘terminal’, sau ‘linie de comandă’) este o formă de a interacționa cu sistemul tău de operare în mod text, așa cum ‘desktop’-ul, în combinație cu mouse-ul tău, este metoda grafică de interacțiune cu sistemul tău. Deschiderea unei console în Mac OS X Consola standard a lui OS X este un program numit Terminal. Deschide Terminal mergănd la Applications, apoi Utilities, apoi dublu clic pe programul Terminal. Poți de asemenea să cauți ușor folosind unealta de căutare din dreapta-sus. Linia de comandă Terminal este un instrument pentru interacțiunea cu calculatorul tău. Se va deschide o fereastră cu un mesaj, cum ar fi: mycomputer:~ myusername$ Deschiderea unei console în Linux Diverse distribuții Linux (ex. Ubuntu, Fedora, Mint) pot avea diverse programe de consolă, numite de obicei terminale. Cel pe care îl ai disponbil și modul în care îl lansezi depinde de distribuție. Pe Ubuntu probabil că vei vrea să deschizi Gnome Terminal. Ar trebui să prezinte un prompt de genul: myusername@mycomputer:~$ Deschiderea unei console în Windows Consola Windows este Command Prompt, numită cmd. O variantă simplă pentru a o obține este să utilizezi combinația Windows+R (unde Windows este tasta cu sigla Windows), care ar trebui să deschidă un dialog Run. Scrie apoi cmd și apasă Enter sau dă clic pe Ok. Poți de asemenea să o cauți în meniul de start. Ar trebui sa arate cam așa: C:\Users\myusername> Command Prompt-ul din Windows nu este la fel de puteric precum omologii lui din Linux și OS X, așa că ar fi posibil să dorești să apelezi Interpretorul Python (vezi mai jos) direct, sau utilizând programul IDLE cu care se livrează Python. Le poți găsi în meniul de Start.

Salut, De data aceasta vom începe cu modulul "Linkurile si Imaginile". Link-urile Noțiunea de hyperlink, ne ajută la conectarea și trecerea de la o pagină la alta. Pentru a accesa un link avem nevoie de structura: <a href=”http://www.google.com”> Click here </a> “A”-ul este exterem de utilizat pe site-uri și de aceea tag-ul este așa de scurt, “A”-ul vine din cuvântul englezesc “anchor” ceea ce înseamnă în limba română ancoră. “Href” este prescurtarea cuvantului englezesc hypertext reference. Deci, în cod vedem tag-ul <a>, precum şi atributul href cu URL-ul care duce la site-ul Google: Atributul Href este alcatuit din 2 parti: numele atributului (A) si locatia (URL) la care duce link-ul (B). Exista si 2 tipuri de link-uri: relative si absolute. Link-urile absolute Acest tip de linkuri se utilizează, de obicei, atunci când vrem să conectăm pagina noastră cu o pagină sau un material de pe un alt site. Linkurile absolute sunt probabil cel mai simplu de introdus, dar se pot dovedi și cele mai complicate în ceea ce privește o viitoare modificare. Exemplu: <a href="http://www.google.com/">Google</a> Link-urile relative Spre deosebire de linkurile absolute, unde doar destinația contează, la linkurile relative este foarte importantă și locația linkului, adică de unde este direcționat vizitatorul site-ului. Linkurile relative sunt, de obicei, utilizate pentru a crea conexiuni în cadrul unui site. Deşi acum linkurile absolute pot părea drept cea mai practică soluţie, de fapt e invers. Linkurile relative se folosesc întotdeauna pentru linkuri în cadrul site-urilor. Exemplu: <a href="contact-us.html">Contact info</a> Atributul Target Am menţionat deja că tag-ul <a> trebuie să aibă atributul href, deoarece fără el, practic, este inutil. Există și un atribut target opțional, care definește modul în care a fost activat linkul și care poate avea una dintre următoarele valori: _blank – încarcă documentul legat într-o nouă fereastră _parent – încarcă documentul legat într-un element părinte al paginii, în care se află linkul. În cazul în care linkul nu se află pe pagina inclusă, acesta se încarcă în toată fereastra _self – încarcă documentul legat în aceeaşi fereastră în care se află şi linkul. Dacă omitem atributul target, această valoare va fi considerată implicită _top – încarcă în toată fereastra, ignorând cadrele (frames). Named anchors (Ancorele denumite) Named anchors se folosesc atunci când vrem ca linkul să direcţioneze spre o parte exactă a paginii. În anumite cazuri, o pagină poate avea un conținut care necesită mult derularea (scroll) pe verticală pentru a găsi un anumit detaliu. Putem plasa named anchors oriunde pe pagină şi apoi setăm un link, la secţiunea respectivă de pe pagină. Pentru a posta ancora, introducem tag-ul <a>, dar, deoarece ancora nu este un link, nu duce nicăieri, ci doar indică locul respectiv, nu are un atribut href și nici conţinut. Exemplu: <a name="something"></a> Aceasta este doar o parte a procesului. Am setat un Named anchor care are un nume și nu este vizibilă în browser. Acum, ne rămâne să legăm această ancoră de aceeași pagină sau de o altă pagină. De exemplu, dacă vrem să legăm o ancoră de aceeași pagină, vom adăuga: Exemplu: <a href="#something">Link</a> Pe de altă parte, dacă vrem să ne legăm de ancora de pe o altă pagină, vom adăuga: Exemplu: <a href="index.html#something">Link</a> Deci, un link clasic cu adăugarea unui Named anchor precedat de semnul #. Imaginile Există doar patru formate de imagini pe care le putem utiliza astăzi pe paginile web. Acestea sunt JPG, GIF, PNG, SVG JPG (Joint Photographic Experts Group) foloseşte extensia .jpg sau .jpeg. Acest format nu suportă transparența, nici animația, dar este excelent pentru comprimarea fotografiilor, deoarece suportă milioane de culori. GIF (Graphics Interchange Format) este limitat la 256 de culori. GIF-urile sunt excelente pentru desene tehnice și pentru imagini mici (iconițe, thumbnails etc). GIF-urile pot memora 2, 4, 16 până la 256 de culori, așadar putem salva mult din dimensiune în momentul în care creăm fișierele. PNG (Portable Network Graphic) este un format mai nou suportat de către toate browser-ele actuale și combină funcţionalitățile formatelor GIF și JPEG. Acest format raster pentru imagini foloseşte comprimarea fără pierderi. Utilizează RGB și sistemul de culori în tonurile gri. Există două tipuri de formate: PNG-8, care conține informația pe 8 biți despre culori (asemănător cu GIF); PNG-24, care conține informația pe 24 de biţi despre culori (combină cele mai bune aspecte ale formatelor GIF și JPG). SVG (Scalable Vector Graphics), este un format pentru imagini de tip vectorial, bazat pe XML fiind utilizat pentru grafică 2D, care permite interactivitatea și animația. Dacă rezumăm toate cele trei tipuri, ajungem la următoarele concluzii: JPG este cel mai bun pentru fotografii și imagini cu multe detalii GIF este cel mai bun pentru imagini mici şi iconiţe PNG combină cele mai bune aspecte ale formatelor GIF și JPG, dar în detrimentul dimensiunii fișierelor. Nu este suportat de browser-ele vechi. SVG cel mai mare avantaj este posibilitatea de a scala imaginile la orice dimensiune fără să pierdem din calitate Imaginea trebuie să aibă rezoluţia şi dimensiunile corespunzătoare Fiecare imagine este, de asemenea, compusă din pixeli, iar termenul de rezoluţie indică numărul de pixeli (puncte) per inch (dots per inch - dpi). Rezoluția standard în care majoritatea monitoarelor afişează site-urile este de 72 dpi, așa că imaginile ar trebui salvate întotdeauna la această rezoluție. În afară de rezoluție, trebuie să avem grijă şi de dimensiuni, adică de lățimea (engl. Width) și înălțimea (engl. Height) imaginilor. Dimensiunile trebuie să fie aceleași în care se va afişa şi imaginea pe pagină. Este important să reţinem că imaginile trebuie mai întâi pregătite în Adobe Photoshop sau într-un instrument similar și abia apoi importate în documentul HTML. Adăugarea imaginilor Pentru a adăuga imagini pe o pagină HTML, folosim tag-ul <img>. Acest tag este cu autoînchidere, respectiv nu are nici început și nici sfârșit, dar trebuie să conțină următoarele două atribute: Src indică URL-ul din care se apelează imaginea (imaginea este întotdeauna în afara fişierului HTML) Alt defineşte textul care va fi afișat vizitatorului site-ului dacă, indiferent de motiv, imaginea nu este afişată Atributele opţionale ale tag-ului img: Title – putem folosi acest atribut dacă vrem să introducem informații suplimentare despre o imagine. Majoritatea browser-elor moderne afișează textul ca un tooltip atunci când stăm cu mouse-ul deasupra imaginii. Width şi Height – lăţimea şi înălţimea imaginii în pixeli. Dacă nu sunt setate aceste atribute, browser-ul va încărca valorile din fișierul imaginii. Align s-a utilizat pentru poziționarea imaginilor în raport cu elementele din jur. Comportamentul lor se poate observa în imaginea de mai jos: Imaginile, respectiv tag-urile img din limbajul HTML sunt aşa-numitele elemente inline.

iPhone SE 2020 este denumirea pe care telefonul pe care-l stim acum ca iPhone 9 o va avea in momentul in care va fi lansat pe pietele din intreaga lume, cei de la Apple urmand a o folosi intern, insa pentru toata lumea, telefonul ar urma sa se numeasca simplu iPhone SE. iPhone SE este o denumire foarte veche, folosita de catre compania Apple timp de ani si ani de zile pentru un model de telefon, insa acum se pare ca vrea sa o readuca pentru cel nou, desi desigur ca va genera confuzie in randul foarte multor persoane. iPhone SE din 2020 va fi totusi mai mare, va fi practic un iPhone 8 cu procesor de iPhone 11, dar restul componentelor vechi, iar asta pentru ca va costa 399 de euro, in versiunea de baza, deci nu poate avea multe componente de ultima generatie. iPhone SE va fi vandut in versiuni de culoare alba, neagra, si rosie, ceea ce e destul de normal pentru ceea ce am vazut si de la alte modele anterioare de telefoane de la compania Apple, inclusiv la modelele din seria iPhone 8, si din moment ce noul model e fix acela, usor modificat, e clar ca exact acele culori vor fi folosite. iPhone SE va fi practic un iPhone 8 imbunatatit, dar va fi mai ieftin decat acele modele care mai sunt in vanzare, si va oferi acces pentru mai multi ani la actualizarile pe care cei de la Apple le vor lansa pentru sistemul de operare iOS. Gasiti mai multe detalii : AICI / AICI