Duis aute irure <em>dolor in reprehenderit

E = MC<sup>2

CO<sub>2 + H<sub>2O = H<sub>2CO<sub>3

2

CO<sub>2

3

+

4

H<sub>2O

5

= H<sub>2CO<sub>3

6 7

Excepteur sint occaecat,
cupidatat non proident, sunt in culpa 2qui officia deserunt mollit anim id est laborum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

3ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 4ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse 7cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 8 9

cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Copyright © LINKgroup

. Ca și în cazul tag-urilor menţionate mai devreme, scriem un tag ol de început şi un tag ol de final, după care, în interiorul acestuia, scriem noi tag-uri
1. , fiecare reprezentând un nou element al listei. De exemplu: 1
   2
   1. nigredo
   3
   2. albedo
   3. citrinitas
   4
   4. rubedo
   5
   6 Observăm că la începutul listei se află un tag de început
   , după care urmează elementele individuale ale listei încadrate de tag-ul
   1. , iar în final lista se încheie cu
   . Având o astfel de structură, tag-ul listei cuprinde toate elementele introduse, iar browser-ul știe că toate elementele sunt conectate într-un întreg. Conform valorilor implicite, în browser această listă arată astfel:
   
   42
   
   Imaginea 5.3 - Afişarea unei liste ordonate în browser Ceea ce este important şi ce trebuie să rețineți este că numeralele ordinale nu au fost introduse manual în elemente, deși apar în reprezentare. Când afișăm listele ordonate, browser-ul adaugă un numeral ordinal în faţa fiecărui element. Desigur, după cum vom vedea mai târziu în timpul cursului, când vorbim despre limbajul CSS, aceste numere pot fi înlăturate dacă dorim sau le putem schimba în cifre romane, în litere ale alfabetului etc.
   
   Listele neordonate Listele neordonate au o structură foarte asemănătoare cu cea a listelor ordonate menţionate mai devreme. Diferenţa constă în tag-ul folosit. În cazul listelor neordonate, tag-ul folosit este
   Având în vedere acest lucru, priviți următorul exemplu: 1
   2
   • nigredo
   3
   • albedo
   4
   • citrinitas
   5
   • rubedo
   6 Afişarea în browser este următoarea:
   
   Imaginea 5.4 - Afişarea unei liste neordonate în browser După cum putem observa, nu mai sunt afișate numerale ordinale, ci bullets (cerculețe negre). Nu toate browser-ele afișează același tip de bullets, în ceea ce privește dimensiunea și poziția lor, dar, în general, sunt similare. Ca și în cazul listelor ordonate, mai târziu putem schimba sau elimina cerculețele (utilizând limbajul CSS). Deoarece listele ordonate şi cele neordonate sunt atât de asemănătoare, printr-o simplă modificare a tag-ului listei în cod putem modifica tipul de listă dintr-una ordonată într-una neordonată şi invers.
   
   43
   
   Am menționat mai devreme, iar acum repetăm că este foarte important modul în care scriem codul. Trebuie să ne asigurăm că am deschis şi închis corect toate tag-urile, dar şi că acestea nu se intersectează. Un singur caracter greșit poate produce un adevărat haos pe pagina afișată. Mai există și așa-numitele liste incluse (embedded), care, spre deosebire de exemplele anterioare, au mai multe niveluri de elemente. Pentru a clarifica acest lucru, iată un exemplu: 1 2
   • nigredo 3
     4
     • primo
     5
     • secundo
     6
   7
   • albedo
   8
   • citrinitas
   9
   • rubedo
   10
   11 Iată cum arată acest cod în browser:
   
   Imaginea 5.5 - Afişarea unei liste incluse în browser Dacă privim prezentarea exemplului nostru în browser, putem vedea primul nivel al elementului, în timp ce un element (nigredo) are propriile elemente incluse. Dacă analizăm cu atenţie codul, vedem că lista inclusă completă este situată în interiorul unui element din listă. În exemplul de mai sus, lista neordonată este inclusă tot într-o listă ul. Dar, de asemenea, putem include o listă ol într-o listă ul și invers. Atenţie! În timpul includerii unei liste noi, pentru al doilea nivel inseraţi întreaga listă în interiorul tag-ului li de nivel 1. Deci, pentru primul nivel inserăm începutul tag-ului
   • , introducem apoi textul primului nivel, inserăm întreaga listă a nivelului 2 şi abia apoi scriem
   pentru al doilea nivel.
   
   Atributul type pentru listele ul şi ol
   
   44
   
   Simbolul afișat în fața elementelor care alcătuiesc lista poate fi definit cu ajutorul regulilor CSS, după cum vom vedea mai târziu în acest curs, sau prin atributul HTML type aplicat pe listă în cadrul codului HTML. Am spus deja că HTML5 a eliminat această posibilitate şi că se recomandă exclusiv folosirea regulilor CSS pentru stilizare, atât pentru stilizarea listelor, cât şi pentru stilizarea altor elemente. Mai multe despre varianta CSS veţi descoperi în modulul 5. Pe de altă parte, dacă folosim xHTML sau HTML4, putem stiliza lista cu ajutorul, deja menţionatului, atribut type. Atributul type pentru liste neordonate (ul) poate avea următoarele valori:   
   
   circle - cerc; disc - disc; square - pătrat.
   
   Pentru listele ordonate (ol), valorile pot fi:    
   
   A - majuscule; a - minuscule; I - cifre romane majuscule; i - cifre romane minuscule.
   
   În cod, o listă neordonată poate arăta astfel: 1
   2
   • mere
   • banane
   3
   • zmeura
   4
   5 Datorită atributului type cu valoarea square, putem trage concluzia că această listă va avea elementele marcate cu pătrate. Vă reamintim că acest atribut este eliminat din HTML5 şi că trebuie folosite regulile CSS. Pe de altă parte, dacă, totuşi, inseraţi o astfel de stilizare HTML, browserul o va interpreta şi o va afişa corect chiar şi când lucrăm într-un document HTML5, însă pagina nu va fi validă.
   
   Listele de definiţie Listele de definiție se utilizează mai rar, dar pot fi foarte utile. Cea mai frecventă utilizare este pentru paginile de întrebări frecvente (FAQ - Frequently Asked Questions), deoarece acestea sunt aproape întotdeauna sub formă de întrebări și răspunsuri, respectiv în perechi. Rețineți că elementele sunt alcătuite întodeauna din două părți, reprezentate de tag-urile
   și
   , iar lista în sine este marcată cu tag-ul

   (definition list).
   
   45
   
   Iată un exemplu în HTML: 1 2

   nigredo

   3

   a blackening or melanosis

   4

   albedo

   5

   a whitening or leucosis

   citrinitas

   6

   a yellowing or xanthosis

   7

   rubedo

   8

   a reddening, purpling, or iosis

   9

   10 În browser, exemplul arată astfel:
   
   Imaginea 5.6 - Afişarea listei de definiţie în browser După cum putem vedea din exemplu, codul pentru aceste liste este destul de diferit de cel al listelor ordonate și neordonate. Cu toate acestea, regulile de scriere a tag-urilor sunt întotdeauna aceleași.
   
   Linkurile În cadrul acestei lecţii, vom învăţa cum să postăm linkurile (hyperlinkurile) în documentele HTML şi cum să le folosim. Vom vedea şi ce variante de linkuri există și în ce scopuri se utilizează. De asemenea, ne vom familiariza cu conceptele de căi relative și absolute.
   
   Noţiunea de hyperlink Linkurile sau hyperlinkurile (engl. hyperlinks) ne permit conectarea şi trecerea de la o pagină la alta, precum şi legarea fişierelor, a adreselor de e-mail etc. Cu toții am utilizat linkuri pe internet, deoarece fără ele ar trebui ca de fiecare dată să introducem manual adresa pe care vrem să o deschidem. Practic, pe internet fiecare text pe care putem da clic este un link, indiferent dacă este vorba de un site precum Google și Facebook, un site al clubului
   
   46
   
   de fotbal preferat sau un site al unui magazin local. Însăși platforma pe care vă aflaţi în acest moment foloseşte linkuri pentru a trece de la o pagină la alta, pentru conectarea la multimedia etc.
   
   URL Uniform Resource Locator sau, în varianta prescurtată, URL este, prin definiţie, un şir de caractere care definesc referinţa către o anumită resursă pe internet. Cu alte cuvinte, folosind un URL, creăm linkuri către elementele de pe internet. Există URL-uri absolute şi relative. Vom reveni la ele imediat în cele ce urmează.
   
   Structura tag-ului link Pentru a seta linkurile, folosim tag-ul . Acest tag este utilizat foarte des şi de aceea i-a fost acordat un simbol atât de scurt. „A” este prescurtarea de la anchor, care în limba engleză înseamnă „ancoră”. Când setăm un link, trebuie să cunoaștem două detalii. Primul detaliu este URL-ul, respectiv locaţia la care ne duce linkul (pagină, fişier etc.). Al doilea detaliu este ce vom seta drept conţinut, respectiv textul linkului, pe care utilizatorul va da clic şi care îi va comunica ceva despre linkul în sine. Pentru a clarifica acest lucru, iată un exemplu:
   
   Imaginea 6.1 - Exemplu de text legat în browser Ați întâlnit, probabil, acest exemplu foarte des pe diferite site-uri. Avem un paragraf de text, iar un cuvânt (sau mai multe) au fost transformate în linkuri. În mod implicit, linkurile sunt albastre și subliniate, iar cursorul se transformă din săgeată într-o mânuță, atunci când punem mouse-ul deasupra lor. În acest exemplu, cuvântul here este legat (linked) de URL-ul site-ului Google (www.google.com). Cuvântul în sine (conținutul linkului) este vizibil utilizatorului, în timp ce locaţia la care duce linkul nu este vizibilă, cel puțin nu la prima vedere. Acum că am clarificat cele două detalii, trebuie să vedem cum putem insera toate acestea în codul HTML. Vom folosi exemplul de mai sus. Avem un paragraf de text (tag-ul p), în care un cuvânt este transformat într-un link. Am realizat acest lucru deschizând tag-ul chiar înainte de cuvântul dat și închizându-l imediat. De asemenea, am adăugat atributul HTML, numit href, peste tag-ul și astfel am definit calea (locaţia) linkului, respectiv URL-ul. Href este prescurtarea de la englezescul hypertext reference: 1

   Click here for Google

   Deci, în cod vedem tag-urile p şi a, precum şi atributul href cu URL-ul care duce la site-ul Google:
   
   47
   
   Imaginea 6.2 - Afişarea unui link (tag-ul a) În imaginea de mai sus, vedem tag-ul descompus în părţi. Textul, și anume conținutul linkului, este scris cu negru. Dintre toate detaliile prezentate aici, el este singurul element vizibil utilizatorului. Tag-ul , respectiv tag-ul de început şi de final, este scris cu roșu la fel ca şi celelalte tag-uri cu care ne-am întâlnit. Aici, noutatea este atributul href, adăugat în tag-ul de început (putem vedea că semnul mai mare, finalul tag-ului de început, este plasat după atribut). Atributul href este alcătuit din două părţi: numele atributului, care este întotdeauna acelaşi pentru toate linkurile (A), şi locaţia (URL), la care duce linkul (B). Desigur, nu trebuie să uităm nici semnul egal şi nici ghilimelele din jurul lui URL. Există mai multe tipuri diferite de linkuri. Toate aceste linkuri respectă aceeași structură, doar conţinutul atributelor este diferit (URL), respectiv ceea ce este scris între ghilimele.
   
   Tipurile de linkuri Linkurile 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. Oricum, în cazul acestui tip de link, importantă este doar pagina (sau alt element) la care duce linkul, în timp ce pagina pe care se află linkul este mai puţin importantă. De exemplu, dacă privim următorul cod: 1Google 2Facebook 3Twitter putem determina cu uşurinţă, respectând regulile sus-menţionate, că acestea sunt trei linkuri care duc la trei site-uri: Google, Facebook şi Twitter.
   
   48
   
   Ceea ce defineşte linkurile absolute este faptul că nu contează pe ce site sau pagină se află. Întotdeauna vor duce către site-urile specificate. Acest lucru se datorează faptului că am folosit URL-ul absolut menţionat mai devreme. În cazul acestui tip, conținutul URL-ului începe întotdeauna cu tipul de protocol, urmat de domeniu, apoi cu calea până la pagina concretă (de exemplu, http://www.link-academy.com/prijava.php). Dacă nu definim calea până la pagină, ci doar domeniul, se va deschide pagina de start a site-ului. Linkurile 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. Asta se datorează faptului că acest tip de link creează o relație între punctul de start și punctul de final. 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. Haideţi să vedem următorul exemplu de cod: 1Contact info După cum putem observa în exemplu, în cazul linkurilor relative, în atributul href, există un URL relativ. Cu alte cuvinte, adăugăm o cale relativă până la pagină (sau altă resursă). În acest exemplu concret, linkul postat va căuta pagina contact.us.html în același folder în care se află pagina cu linkul, deoarece, așa cum am mai menționat, acest tip de link se referă la locația inițială. Să vedem acum structura unui site:
   
   49
   
   Imaginea 6.3 - O parte din structura unui site web În imagine, observăm că site-ul HTMLcompany conține diferite pagini și foldere, în care este organizată structura. Principiul folderelor și al fișierelor este cunoscut din mediul sistemului de operare, aşa că trecem peste el. Ceea ce ne interesează acum este modul în care stabilim linkurile relative într-o asemenea structură.
   
   50
   
   Linkurile relative se inserează astfel: mai întâi scriem o cale relativă până la folderul dorit și apoi adăugăm numele resursei pe care o conectăm la el. După cum am menționat deja, dacă ambele pagini se află în același folder, scriem doar numele paginii. Să clarificăm printr-un exemplu. Iată câteva situații posibile: Situaţia 1 - Dacă vrem să postăm un link pe pagina de start a site-ului din exemplul de mai sus (marcat cu A), dar care să ducă la pagina john-doe.html (B, în exemplu), localizată în folderul ourteam, care, la rândul lui, se află în folderul about-us, vom scrie următoarele: 1link Linkul va deschide mai întâi folderul about-us, apoi folderul our-team şi în el va căuta pagina johndoe.html. Situaţia 2 – Dacă vrem să setăm un link pe pagina john-doe.html (B), dar care să ducă la pagina de start a site-ului (A) - deci o situaţie opusă celei anterioare -, vom scrie: 1link Deoarece pagina care conține linkul se află în subfoldere și trebuie să o conectăm cu o pagină aflată „mai sus”, mai întâi trebuie să ne întoarcem, adică să ieșim din ambele foldere până când ajungem la nivelul principal, rădăcina site-ului web, și aici trebuie să căutăm index.html. Când ieșim dintr-un folder, adăugăm de două ori semnul punct în loc de numele folderului. Situaţia 3 – Dacă vrem să setăm un link pe pagina john-doe.html (B), care să ducă la pagina din folderul services (C), vom scrie următoarele: 1link În acest caz, avem o combinaţie puțin mai complicată decât cele două situații anterioare, deoarece mai întâi trebuie să ieşim din ambele foldere în care se află pagina la care ne conectăm și abia apoi putem deschide folderul services, în care să căutăm pagina index.html. Dacă setăm un link la un folder, în loc să-l setăm la pagina site-ului, în el se va deschide pagina implicită (index.html), dacă există. De exemplu, ../../services/ va da acelaşi rezultat ca şi ../../services/index.html. Sau, în cazul linkurilor absolute, www.sample.com/about/ va da același rezultat ca www.sample.com/about/index.html. Notă: Linkurile din această lecţie, exemplele precum sample.com şi mysite.com, sunt doar exemple care nu direcţionează către site-uri adevărate, ci se folosesc doar pentru prezentarea modului de construire a linkurilor, iar acestea trebuie tratate ca atare.
   
   51
   
   Înțelegerea corectă a modului de funcționare a linkurilor relative este foarte importantă în procesul de creare a unui site. De asemenea, este foarte important ca toate resursele (pagini, fişiere etc.) necesare unui site să fie întotdeauna împreună. De exemplu, creați un site pe calculatorul dvs. (la nivel local). În el, veţi conecta cu linkuri relative toate paginile și fișierele necesare. Când folosim linkurile relative, nu trebuie să postăm site-ul pe internet de la început, deoarece se vor păstra legăturile dintre toate elementele. Luând în considerare toate acestea, putem concluziona următoarele: Toate fișierele relevante pentru site trebuie să se afle în cadrul folderului principal/rădăcină (root) a site-ului. Toate fișierele inutile, care nu sunt în niciun fel asociate cu site-ul, nu ar trebui să se afle în folderul root. Când mutăm site-ul pe un alt calculator, trebuie să îl postăm pe server etc., trebuie să copiem întregul folder root, pentru a evita apariția erorilor. Poate vă întrebați de ce nu folosim întotdeauna linkurile absolute. Există mai multe motive, dar cel mai important este ușurința de a face modificări. Astăzi, instrumentele moderne de lucru cu HTML și cu documente similare (cum ar fi Adobe Dreamweaver) urmează în mod automat toate linkurile din cadrul unui site și corectează/editează tot ce e nevoie, de obicei în cazurile în care schimbăm numele fișierelor, structura lor etc. Totuşi, principalul avantaj al linkurilor relative pentru toate linkurile din cadrul unui site este că linkurile relative creează linkuri într-un cerc închis al site-ului şi acestea nu vor fi deteriorate şi nici influenţate chiar şi atunci când site-ul, ca un întreg, este mutat într-un alt mediu. De exemplu, dacă am fi creat un site pe calculator şi dacă am fi mutat toate fişierele în folderul D:/Sites/First-site, în timp ce în cadrul site-ului avem 2 pagini: index.html şi info.html, linkul setat ca index.html, care ar fi dus la info.html, ar fi avut următorul aspect:  
   
   Link absolut: link Link relativ: link
   
   Este clar că fiecare link absolut, imediat după postarea site-ului pe server, ar fi trebuit să se modifice (deoarece pe server nu există partiţia D a harddiskului), în timp ce linkul relativ ar fi funcţionat normal, fără modificări. În acest context, imaginaţi-vă că aveţi mai multe sute sau mii de linkuri pe site şi câte probleme ar fi apărut dacă s-ar fi utilizat linkurile absolute. Linkurile relative în raport cu folderul root al site-ului Există şi linkuri care funcţionează precum cele relative, dar direcționează browser-ele să înceapă căutarea unei căi, începând de la nivelul root al site-ului. Pentru a scrie o astfel de cale, vom adăuga un forward slash în fața primului folder sau în fața numelui fișierului, ca în următorul exemplu: 1link Observaţi că am adăugat semnul / (forward slash) imediat după deschiderea atributului href. Aceste linkuri nu funcționează fără servere configurate corect.
   
   52
   
   Atributul Target Am menţionat deja că tag-ul 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ă, în timp ce în trecut se foloseau şi următoarele valori: 
   
    
   
   _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).
   
   Acest atribut este opțional, dar se folosește de cele mai multe ori pentru conectarea la alte site-uri pe baza valorii _ blank. Astfel, se deschide un nou tab în browser, iar cel curent rămâne și el deschis. Exemple: 1link 2link
   
   Linkurile către fişiere Linkurile către fișiere se inserează în mod identic ca şi cele către paginile HTML din exemplele anterioare. Deci, un link către un fișier example.pdf arată astfel: 1link 2link
   
   
   
   Linkurile de e-mail Există şi linkuri de e-mail care direcţionează spre adrese de e-mail. Este interesant că, în loc să deschidă o pagină, ele deschid programul de e-mail implicit al vizitatorilor paginii. Dacă acesta este, de exemplu, Microsoft Outlook, linkul va porni clientul de e-mail menționat, va deschide fereastra de dialog pentru noul e-mail și va introduce adresa pe care am specificat-o în câmpul to: . Totuşi, pot apărea probleme în cazul în care vizitatorul nu are setat un program de e-mail. Linkurile de e-mail se inserează astfel: 1email link
   
   53
   
   Observăm că singura diferență în raport cu linkurile anterioare este cuvântul-cheie mailto , urmat de respectiva adresă de e-mail. Dacă vrem, putem predefini şi titlul (subject) și/sau conținutul (body) e-mailului. Facem acest lucru adăugând semnul ? , urmat de cuvântul-cheie subject sau body, semnul egal, precum şi textul propriu-zis. Dacă adăugăm şi un alt parametru, atunci în loc de semnul ? punem &. Iată un exemplu: 1email link Aceste detalii nu înseamnă că utilizatorul nu va putea să schimbe mai târziu textul predefinit, ci doar reprezintă punctul de plecare pentru e-mail. Totuşi, astăzi linkurile de e-mail se folosesc tot mai rar, fiindcă pot crea confuzii pentru utilizatori şi astfel îşi pierd utilitatea. Linkul se inserează, în general, ca un simplu text sau textul linkului de e-mail se transformă într-o imagine (pentru ca utilizatorii/programele maliţioase să nu poată copia linkul şi să-l folosească pentru spam).
   
   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 ele, la secţiunea respectivă de pe pagină. De exemplu, Wikipedia (www.wikipedia.org) utilizează named anchors pentru a conecta anumite intrări de text cu referinţe aflate în partea de jos a paginii. Pentru fiecare referinţă este setat un named anchor, apoi sunt legate de intrările în text.
   
   54
   
   Imaginea 6.4 - Prezentarea unui Named anchor în Wikipedia Pentru a posta ancora, introducem tag-ul , 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. De exemplu: 1 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: 1link Pe de altă parte, dacă vrem să ne legăm de ancora de pe o altă pagină, vom adăuga: 1link Deci, un link clasic cu adăugarea unui Named anchor precedat de semnul #.
   
   Imaginile Imaginile reprezintă o parte indispensabilă a site-urilor web moderne. Se spune că o imagine spune mai mult decât o mie de cuvinte, lucru adevărat cel puțin în cazul designului web. Era site-urilor simple a apus de mult. Înainte de a explica modul de introducere şi setare a imaginilor pe paginile noastre HTML, trebuie să facem o pauză și să clarificăm câteva detalii. Fiecare imagine pe care vrem să o postăm trebuie să fie pregătită pentru internet. Practica de a posta pe paginile noastre fotografii direct dintr-un aparat digital sau de pe internet nu este bună deloc.
   
   55
   
   Imaginile trebuie să aibă formatul adecvat Există doar trei formate de imagini pe care le putem utiliza astăzi pe paginile web. Acestea sunt JPG, GIF şi PNG. JPG (Joint Photographic Experts Group) foloseşte extensia .jpg sau .jpeg. Acest format nu suportă nici transparența (engl. Transparency), nici animația, dar este excelent pentru comprimarea fotografiilor, deoarece suportă milioane de culori. În programele de procesare a imaginilor, putem alege nivelul tolerat de degradare a calității în schimbul unei dimensiuni mai mici a fișierului. De fiecare dată când salvăm, se pierd anumite informaţii şi de aceea este recomandat să salvăm separat imaginile originalele. 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. Fișierele GIF se comprimă pe orizontală, respectiv, dacă pixelul unei imagini GIF are o variație mică de culori în direcția orizontală, este mult mai ușor de redimensionat. Formatul GIF suportă transparența (cu multe restricții) și animația, ceea ce înseamnă că putem crea efectul de mişcare etc. În fazele inițiale ale dezvoltării animației pe internet, animațiile GIF se utilizau frecvent, chiar și atunci când nu erau absolut necesare. Astăzi, se folosesc tot mai puţin. PNG (Portable Network Graphic) este un format mai nou suportat de către toate browserele 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).
   
   PNG-8 nu suportă animația, dar suportă transparența mult mai bine decât GIF, în timp ce PNG-24 suportă o transparență şi mai bună şi oferă o calitate a imaginii mai bună decât JPG. Totuşi, fişierele PNG sunt mult mai mari, iar browser-ele mai vechi nu se descurcă prea bine cu ele (de exemplu, Internet Explorer 6 nu suportă PNG transparent). 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, deşi încet, încet acest lucru devine irelevant, deoarece Internet Explorer 6 se foloseşte tot mai puțin.
   
   56
   
   Imaginea trebuie să aibă rezoluţia şi dimensiunile corespunzătoare Toate site-urile se afișează pe monitoarele calculatoarelor și ale altor dispozitive mobile. Afișarea pe monitoare este compusă din mici puncte, numite pixeli (engl. pixels). 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ă. Dacă dimensiunile și/sau rezoluția sunt foarte diferite în imagine față de ceea ce apare pe pagină, va avea loc o degradare a imaginii și o afişare de slabă calitate. De aceea, 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.
   
   Pentru a utiliza o imagine, trebuie să avem dreptul Deși acest aspect nu ține de partea tehnică și nu este strict legat de subiectul acestui curs, este, totuși, un aspect foarte important, adesea neglijat. Fiecare imagine este supusă legii drepturilor de autor/copyright și are întotdeauna un autor. Obligatoriu, trebuie să verificaţi în ce condiții şi sub ce licență a fost publicată acea lucrare și dacă aveți dreptul să o folosiţi. O greșeală frecventă a începătorilor este să caute pe Google images și să copieze imaginile direct, ceea ce, în majoritatea cazurilor, reprezintă o încălcare a drepturilor unui anumit autor. Deci, întotdeauna verificați licenţa imaginii și dacă vă este permis să o utilizaţi1. Pe de altă parte, există și site-uri specializate de distribuire a imaginilor, cum ar fi iStockPhoto, Fotolia, gettyimages, sxc.hu etc. Pentru majoritatea imaginilor, trebuie să plătiți, dar există şi imagini gratuite dacă aveți un buget limitat.
   
   Organizarea structurii fişierelor Spre deosebire de multe fișiere utilizate în prezent, paginile HTML nu salvează fișierele cu imagini direct în fișierul HTML. De exemplu, dacă în Microsoft Word introducem un anumit text și câteva imagini, când le salvăm obținem un fișier doc. Dacă trimitem acel fișier unui prieten şi el îl deschide pe calculatorul său, textul şi imaginile vor fi acolo, deci se încarcă din fișier. În schimb, dacă introducem text și câteva imagini într-un document HTML, după ce îl salvăm obţinem un fișier HTML, în care imaginile nu sunt încorporate. Dacă am trimite acum fișierul HTML unui prieten, când îl va deschide pe calculatorul lui va vedea numai textul și un spațiu gol, fără imagini. Fișierul HTML a salvat pozițiile imaginilor, dimensiunile lor și a încercat să le afișeze, dar nu lea găsit deoarece nu fac parte din fișierul HTML şi nu au fost trimise niciodată. De aceea, este foarte important să organizăm structura site-ului într-un mod corespunzător. În lecțiile precedente, am menționat folderul root (principal) al site-ului. Vă recomandăm ca în cadrul
   
   57
   
   lui să creați un subfolder numit images sau un nume asemănător și să stocați toate imaginile acolo. Dacă site-ul este mare, cu multe materiale diferite, puteți să ramificați folderul în continuare. Ca şi în cazul linkurilor despre care am vorbit mai devreme, la fel şi imaginile pot fi apelate pentru a fi afișate fie printr-o cale absolută, fie printr-o cale relativă, dar imaginile ar trebui postate întotdeauna prin intermediul căilor relative. Dacă inserăm toate imaginile în cadrul folderului root al site-ului și le apelăm prin intermediul căilor relative, nicio imagine nu poate să se piardă din greşeală atunci când o trimitem sau o postăm pe site. După cum am mai menţionat, în cazul în care copiem întotdeauna întregul folder root şi dat fiind că sunt căile relative, totul va fi în regulă.
   
   Adăugarea imaginilor Pentru a adăuga imagini pe o pagină HTML, folosim tag-ul . 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ă. În acest caz, textul menţionat va apărea în locul prevăzut pentru imagine. Totuşi, acesta nu ar trebui să descrie imaginea literal, ci doar să dea niște informații legate de scopul ei. De exemplu, textul alt al imaginii de avertizare nu ar trebui să fie: „Triunghi galben cu cadru negru și semn de exclamare”, ci „Avertizare!” sau ceva asemănător. Chiar și motoarele de căutare precum Google folosesc pentru indexare textul alt. Conform standardelor W3C, textul alt este obligatoriu pe o imagine.
   
   Imaginea 7.1 - Reprezentarea tag-ului img în codul HTML cu atributele de bază Tag-ul din exemplu va apela imaginea image.jpg (A) din același folder în care se află şi fișierul HTML în sine. Dacă imaginea nu apare, în caseta goală va fi scris Alt text (B). Atenţie la faptul că tag-urile cu autoînchidere se scriu diferit în variantele HTML5 şi xHTML, aşadar diferă şi scrierea imaginilor, respectiv a tag-urilor img. În versiunea HTML5, scriem:
   
   58
   
   în timp ce în varianta xHTML scriem următoarele: În varianta xHTML, trebuie să avem un spaţiu gol şi o linie oblică în dreapta înainte de semnul mai mare. Varianta HTML5 ar fi acceptat ambele moduri de scriere, în timp ce o situaţie inversă nu ar fi fost posibilă.
   
   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. În cazul în care sunt introduse, atributele ar trebui să reflecte starea reală, respectiv dacă avem o imagine logo.png cu înălţimea de 120 px (pixeli) și lăţimea de 300 px, tag-ul img ar putea arăta astfel în codul HTML: src=”logo.png”
   
   alt=”Nume
   
   companie”
   
   width=”300”
   
   height=”120”>
   
   Într-un tag HTML, ordinea atributelor nu este importantă. Acest lucru se aplică şi la img, dar şi la alte tag-uri. 
   
   Align s-a utilizat pentru poziționarea imaginilor în raport cu elementele din jur. În propoziţia precedentă, am folosit timpul trecut deoarece acest atribut nu este recomandat în HTML5, dar şi în versiunile mai vechi ale limbajului HTML/xHTML. În locul lui vă recomandăm să utilizați regulile CSS de poziţionare. Deoarece imaginile sunt elemente inline (vom aborda acest subiect în curs), dacă le plasăm în interiorul unui paragraf, se vor comporta drept caractere ale textului conform setărilor implicite. Valorile standard ale acestui atribut sunt bottom, left, middle, right și top și alte câteva. Comportamentul lor se poate observa în imaginea de mai jos:
   
   59
   
   Imaginea 7.2 - Atributul align
   
   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.
   
   60
   
   Tabelele trebuie utilizate pentru structurarea tabelară a datelor şi nu trebuie folosite greșit în vederea organizării elementelor, indiferent că este vorba de o pagină întreagă sau doar de o parte a acesteia. După cum deja ştim că fiecare parte a unei pagini HTML este, în esenţă, un text structurat într-un anumit mod, la fel şi tabelele respectă anumite reguli stricte. Î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. Dacă sunteți obișnuiți să lucraţi în Microsoft Excel sau într-un program similar, vă veţi întreba poate unde se află coloanele şi cum sunt marcate. Totuşi, în limbajul HTML nu există termenul de coloană, ci toate celulele (td) sunt aranjate în ordine şi separate pe rânduri (tr). Observați imaginea de mai jos pentru a înțelege mai bine:
   
   Imaginea 8.1 - Afişarea structurii tabelului 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: 1. Deschidem tag-ul table; 2. Deschidem rândul tabelului (tr);
   
   61
   
   3. 4. 5. 6.
   
   Scriem toate celulele (td), în acest caz - patru; Închidem rândul actual (tr); Deschidem următorul rând (tr); Scriem toate celulele (td).
   
   Şi aşa mai departe, până când trecem prin toate rândurile şi ajungem la sfârşitul tabelului, unde închidem tag-ul table. În cod, un astfel de tabel ar arăta astfel: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   1	2	3	4
   5	6	7	8
   9	10	11	12

   19 20 Dacă analizăm acest cod, observăm paşii menţionaţi mai devreme. Mai întâi, am deschis tagul table şi imediat după el am deschis rândul tabelului (tag-ul tr). În cadrul lui, se află celulele în tag-urile lor (td). Apoi, închidem primul rând şi începem următorul. După el scriem al treilea rând, urmat de sfârşitul tabelului. Dacă trebuie să lăsăm o celulă goală (fără conţinut), totuși trebuie să scriem tag-ul td. În acest caz, codul creează un tabel foarte simplu, fără niciun fel de detalii vizuale. Nici tabelul în sine nu se vede, ci doar elementele din cadrul lui. Tabelele şi elementele acestora se pot stiliza prin limbajul CSS, care este, cu siguranţă, cea mai bună variantă, iar în HTML5 aceasta este singura variantă validă. În trecut, în versiunea xHTML puteam să folosim şi atribute în tabele, rânduri, dar şi în celule. Deşi acum sunt depăşite, fiind înlocuite de CSS, următoarele atribute pot fi postate pentru un tabel:
   
   62
   
   Atribut align
   
   bgcolor
   
   Valoare left center right rgb(x,x,x)
   
   Descriere Alinierea tabelului
   
   Culoarea fundalului
   
   #xxxxxx numele culorii pixeli border cellpadding pixeli cellspacing pixeli void frame above below hsides lhs rhs vsides box border none rules groups rows cols all summary text pixeli width %
   
   Grosimea liniei tabelului Spaţiul dintre conţinutul celulelor şi marginile lor Spaţiul dintre celule Defineşte marginile exterioare vizibile.
   
   Defineşte marginile interioare vizibile.
   
   Text care descrie, rezumă conţinutul tabelului. Lăţimea tabelului
   
   Tabelul 8.1 Menţionăm, încă o dată, că aceste atribute sunt date doar informativ. Stilizarea tabelului o vom face prin CSS.
   
   Celulele titlurilor Așa cum există tag-uri p pentru paragrafe, există şi tag-uri h pentru titluri și, în mod analog, pe lângă celulele obişnuite, există şi celule pentru titluri. În loc de td, tag-ul lor este th (table heading).
   
   63
   
   Priviți exemplul: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

   *	monday	tuesday	wednesday	thursday	friday
   morning
   evening

   25 26 Celulele th sunt plasate pe primul rând şi în prima coloană. Atenţie la faptul că în tag-ul table sunt adăugate atribute pentru lăţimea (600px) şi pentru grosimea liniilor marginilor/border (1px). Întrun browser, acesta ar arăta astfel:
   
   Imaginea 8.2 - Afișarea tabelului în browser Dacă mai devreme am spus că trebuie evitate atributele în codul din HTML5, de ce le-am inserat totuşi? Le-am inserat pentru a putea să afişăm tabelul, deoarece încă nu am abordat stilizarea CSS. Pe de altă parte, dacă aveţi nevoie de aceste atribute, le puteţi insera în HTML5. Browser-ul le va interpreta şi afişa în mod normal, deoarece îi sunt cunoscute din versiunile anterioare ale lui HTML, însă codul nu va fi unul valid.
   
   64
   
   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ă. Imaginaţi-vă că celulele rămân întotdeauna separate, iar celula unită se extinde peste câteva astfel de celule. De aceea, trebuie să numărăm câte celule vor fi acoperite şi să introducem acest număr ca valoare a atributului colspan. De asemenea, eliminăm atributele td (sau th), care sunt în plus. De exemplu, priviți acest cod: 1 2 3 4 5 6 7 8 9 10 11

   1	2	3
   4	5	6

   12 care va crea următorul tabel: 1 4
   
   2 5
   
   3 6
   
   Î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. Codul va arăta astfel: 1 2 3 4 5 6 7 8
   
   65 9

   1	2	3
   4		6

   <span style="font-size: 14px;"> 10 11 1 2 3
   
   4
   
   6
   
   Astfel, am specificat celulei 4 să acopere şi celula 5 și, practic, arată ca două tag-uri td. Fiecare rând dintr-un anumit tabel (tr) trebuie să aibă acelaşi număr de tag-uri td (sau th), excepţie făcând cazul în care utilizăm colspan, însă totalul trebuie să fie exact. Conţinutul tag-ului td care dispare trebuie transferat manual în celelalte tag-uri. 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. Priviți exemplul: 1 2 3 4 5 6 7 8 9 10 11

   1	2	3
   4	5	6

   12 Acest cod afişează următorul tabel: 1 4 Dacă schimbăm codul astfel: 1 2 3
   
   2 5
   
   3 6
   
   66 4 5 6 7 8 9

   1	2	3
   	5	6

   10 11
   
   obţinem următorul tabel: 1
   
   2 5
   
   3 6
   
   Cele mai frecvente atribute din celule (xHTML) Cele mai frecvente atribute care apar în celule sunt align, respectiv valign. Cu ajutorul lor, putem adăuga alinierea pe orizontală (align), respectiv alinierea pe verticală (valign). De exemplu, putem scrie: 1... 2 3 4... Align poate avea valorile left, right şi center. După cum ne spun şi denumirile lor, se aliniază conţinutul la stânga, la dreapta sau în centrul/mijlocul celulei. Valign poate avea valorile: top, middle, bottom şi baseline. Denumirile lor ne spun unde va fi plasat conţinutul în cadrul celulei. Top plasează conţinutul în partea de sus a celulei, middle în mijloc, în timp ce bottom şi baseline au o menire aproape similară. În ce constă diferenţa? În faptul că bottom plasează întregul conţinut în partea de jos a celulei, în timp ce baseline plasează aceeaşi linie de bază imaginară, iar conţinutul este așezat pe ea. Baseline poate fi util dacă avem mai multe celule cu fonturi de diferite dimensiuni. Mai jos, avem următoarele imagini care ilustrează cele explicate:
   
   Imaginea 8.3 - Valoarea Bottom a atributului valign
   
   67
   
   Imaginea 8.4 - Valoarea Baseline a atributului valign
   
   Alte atribute Există şi alte atribute care pot fi utilizate în tag-urile (celulele) td, însă, practic, acestea sunt depășite. În HTML5, sunt chiar interzise. Totuşi, tot ce făceam cu ele în trecut putem face astăzi cu ajutorul regulilor CSS într-un mod mult mai simplu. Toate atributele tag-urilor td se găsesc la următorul link: http://www.w3schools.com/tags/tag_td.asp Avem o situaţie similară şi în cazul atributelor de pe rândurile tabelului (tr). Astăzi, nu se mai utilizează. Mai multe informaţii găsim la următorul link: http://www.w3schools.com/tags/tag_td.asp
   
   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 se foloseşte pentru a marca antetele tabelului. Se introduc rândurile (tr), care alcătuiesc antetul. Acest tag merge la început. Tag-ul se foloseşte pentru a introduce rândurile şi celulele obișnuite. Tag-ul se foloseşte pentru a marca partea de jos a tabelului. Se introduc rândurile şi celulele care merg la sfârşit. În general, browser-ele tratează toate cele trei părţi, respectiv celulele din cadrul lor, în acelaşi mod. Totuşi, separarea lor permite o stilizare diferită cu CSS. Pe lângă asta, se poate întâmpla uneori ca soluţiile CMS să separe partea head şi footer, pentru a le afișa întotdeauna. De asemenea, la tipărire, majoritatea browser-elor repetă head (antetul) şi footer (subsolul) pe fiecare pagină pentru o mai mare claritate. Iată cum arată în cod: 1 2 3
   
   
   
   68 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

   celula părţii head
   celula părţii head
   celula părţii footer
   celula părţii footer
   celula părţii body
   celula părţii body

   <span style="font-size: 14px;"> 22 23 24 25 26 Atenţie la ordinea tag-urilor! Ordinea este întotdeauna următoarea:
   
   1. thead 2. tfoot 3. tbody Deşi poate părea mai logic ca mai întâi să inserăm conţinutul (tbody) şi apoi partea de jos a tabelului (tfoot), nu este cazul. Mai întâi, se inserează antetul, apoi partea de jos şi abia la sfârşit conţinutul. Indiferent de ordinea din cod, în reprezentarea din browser subsolul/footerul (tfoot) se va găsi întotdeauna în partea de jos a paginii (după tbody).
   
   Prin urmare, este suficient să punem thead, tbody, respectiv tfoot în jurul tuturor rândurilor pe care vrem să le separăm. De reţinut este că trebuie să cuprindem rândul/rânduri întregi, adică mare atenţie la suprapunerea tag-urilor. De asemenea, dacă introducem aceste tag-uri suplimentare ale tabelului, trebuie să includem și toate rândurile (să nu rămână niciunul în exterior).
   
   69
   
   Formularele În cadrul acestei lecţii, ne vom familiariza cu formularele HTML şi vom face o comparaţie între formularele offline şi cele online.
   
   Noţiunea de formulare HTML Formularele (engl. forms) reprezintă un instrument excelent pentru colectarea informaţiilor de la vizitatorii unui site web. Formularele permit utilizatorilor să trimită comentarii şi întrebări, să caute o anumită informaţie, să se înscrie pentru newsletter, să completeze aplicaţia online sau să introducă informaţii care înlesnesc cumpărarea unui produs. În cadrul acestei lecţii, ne vom familiariza cu formularele şi cu modul de introducere a acestora în pagină. Inițial, termenul de formular era utilizat pentru documentul tipărit, care conţinea câmpuri (spaţii goale) pentru introducerea datelor. Internetul a preluat acest concept şi a modificat formularele ca să funcționeze în mod digital.
   
   Imaginea 9.1 - Exemplu de formulare clasice Sursa: http://en.wikipedia.org/wiki/File:Mantelb%C3%B6gen.JPG
   
   70
   
   Probabil cel mai cunoscut formular de pe web este cel de pe pagina de start a lui Google:
   
   Imaginea 9.2 - Formularul de pe pagina de start a lui Google Formularul din imagine este cunoscut tuturor, deși este foarte simplu. Cu ajutorul acestui formular, introducem textul (cuvintele de căutare) într-un câmp text input, iar apoi, dând clic pe butonul submit (etichetat ca Google Search), transmitem datele.
   
   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.
   
   Imaginea 9.3 - Conceptul de funcţionare a formularului
   
   71
   
   Să exemplificăm toate acestea. 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 email la adresa indicată. Acesta este doar un exemplu, script-ul poate trimite e-mailuri, poate scrie/citi datele din bază sau poate face alte lucruri definite. În acest exemplu, nu ne vom ocupa cu script-uri concrete. În general, acestea se scriu şi inserează prin limbajul PHP, care nu intră în tematica acestui curs, ci în cea a programării web. Noi ne vom ocupa de partea de HTML şi CSS, care ne vor ajuta să inserăm şi să stilizăm formulare. Pe de altă parte, chiar dacă nu cunoaşteţi limbajul PHP, pe internet se pot găsi diferite formulare PHP finalizate deja, care trebuie doar încorporate în HTML.
   
   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 (tag form) recunoaşte evenimentul submit. Acesta activează formularul şi transferă valorile acestuia către server. Să o luăm de la început. Tag-ul se scrie foarte simplu: 1

   Totuşi, acest lucru nu este suficient pentru început. Fiecare formular trebuie să aibă următoarele atribute:   
   
   Action; Method; ID.
   
   Putem adăuga name, enctype şi target. Deşi atributele menţionate nu sunt obligatorii în HTML5 (Action este obligatoriu în versiunile anterioare), fără acestea formularul nu ar fi avut sens. 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.
   
   72
   
   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. Este transmis serverului. Vă recomandăm să adăugați ambele atribute de la început. Ele pot avea aceeaşi valoare, ceea ce este, de asemenea, recomandat.
   
   Enctype Atributul enctype determină cum vor fi codate (encoded) datele în momentul trimiterii către server. Valoarea implicită a acestui atribut este application/x-www-form-urlencoded. Nu trebuie să-l scriem sau să avem grijă de el. Ceea ce ne interesează este ca, în cazul în care vrem să încărcăm fişiere, enctype să aibă valoarea: multipart/form-data.
   
   Target
   
   73
   
   Acest atribut este același ca și în cazul linkurilor. Am analizat detaliile în lecţia 6. Totul este identic, cu excepția faptului că în cazul linkurilor se deschide o pagină, iar la formular se deschide pagina/script-ul din atributul action. Dacă îl folosim pe formular, de obicei utilizăm valoarea _blank , deoarece astfel îi transmitem formularului că trebuie să deschidă script-ul din atributul action într-un nou tab sau într-o nouă fereastră (în funcţie de browser).
   
   Inserarea unui formular Având în vedere toate cele menţionate mai sus, codul formularului nostru poate avea aspectul următor: action="script" method="post" name="formular_exemplu" 1

   2 3

   
   
   Astfel, am completat elementul de bază form. Dacă vrem să încărcăm fişiere prin formular şi/sau să deschidem formularul trimis într-un nou tab, vom introduce şi celelalte două atribute: action="script" method="post" name="formular_exemplu" 1

   2 3

   <span style="font-size: 14px; text-align: justify;">
   
   Deşi am introdus toate aceste elemente, avem doar cadrul gol al formularului, care nu înseamnă nimic. Trebuie să introducem și controalele formularului, care vor colecta datele.
   
   Controalele formularului Controalele din formular sunt responsabile pentru colectarea şi trimiterea datelor. Acestea pot fi butoane de tip text, radio sau de bifare etc. În continuarea lecţiei, ne vom familiariza cu acestea. Input (text)
   
   Tag-ul pe care îl întâlnim cel mai des în formulare este . 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": 1
   
   74
   
   În exemplul codului, se poate vedea că am scris atributul type, precum şi atributul name, care este important pentru script-ul care primeşte datele. Prin atributul name, script-ul va şti cum să clasifice data. De asemenea, am adăugat şi o valoare ID, deşi nu este obligatorie. 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". De asemenea, mai devreme s-a folosit şi atributul size, cu care am determinat lăţimea câmpului. Acum, pentru asta folosim regulile CSS. Codul introdus anterior ar fi afişat acest detaliu pe pagina browser-ului:
   
   Imaginea 9.4 - Câmpul Input text afișat în browser Mai exact, codul care ar fi afişat câmpul de mai sus ar fi fost următorul: 1color 2 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). Ambele tag-uri, şi input, şi label, sunt, conform naturii lor, tag-uri inline. 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. 1 În browser, s-ar fi afişat următoarele:
   
   Imaginea 9.5 - Câmpul pentru inserarea parolei Observați că textul nu este afișat lângă control, deoarece nu am adăugat tag-ul label. Totuşi, putem face acest lucru foarte simplu, dacă adăugăm tag-ul label cu atributul for="pass".
   
   75
   
   Acest tip de câmp input ascunde caracterele introduse, însă nu garantează siguranţa în timpul trimiterii datelor. Pentru aceasta, avem nevoie de un server configurat corect şi de script-uri scrise corect. 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. Dacă utilizatorul nu îl şterge, acesta va fi transmis împreună cu datele. Haideţi să vedem un exemplu: Lorem ipsum dolor sit<br /> <br /> 1amet.
   
   În browser, s-ar fi afişat:
   
   Imaginea 9.6 - Câmpul Textarea în browser În acest tip de control, nu introducem atributul type, deoarece textarea își stabilește singur rolul. În cod, vedem textul introdus între tag-ul iniţial şi cel final, care se afişează în câmp după încărcarea paginii. Poate veți observa pe unele pagini mai vechi atributele cols şi rows, în care sunt introduse valori numerice fără unităţi. Acestea s-au utilizat în trecut pentru a determina lăţimea (cols) şi înălţimea (rows) acestui control. La fel ca şi la input, astăzi efectuăm acest lucru utilizând CSS şi nu mai avem nevoie de ele. 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. Este puțin mai complicat de scris, dar haideţi să vedem un exemplu în browser:
   
   Imaginea 9.7 – Controale radio în browser
   
   76
   
   Cu siguranță, ați întâlnit controale radio în formulare. Ceea ce le caracterizează este faptul că nu
   
   trebuie să introducem valori, ci doar să selectăm una dintre opţiunile oferite (putem selecta doar una singură). Pentru fiecare selecție, trebuie să creăm un tag input separat. Pentru ca browser-ul să ştie că există mai multe tag-uri input diferite (de tip radio) grupate împreună, trebuie să le acordăm acelaşi nume în atributul name. De aceea, utilizatorului nu îi va fi permis să aleagă mai multe opțiuni. Dacă selectează una, toate celelalte se dezactivează. Atributul type menționat mai devreme trebuie adăugat valorii radio în controlul radio. Valoarea ID trebuie să fie diferită pentru fiecare input, indiferent dacă atributul name este identic. Atributul value reprezintă o noutate şi cu ajutorul lui transmitem valoarea pe care a selectat-o utilizatorul. În exemplele precedente, am trimis doar textul, respectiv parola, iar aici transmitem conţinutul atributului value al butonului radio selectat. Codul pentru acest exemplu ar arăta astfel: 1 3 Serbia 4 5
   6 7 Romania 8 9
   10 11 12Ukraine 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. Bineînţeles, am adăugat şi tag-uri label, pentru a face deosebirea între butoanele radio. Aici se află şi câteva tag-uri br, care separă rândurile, deoarece toate elementele de aici sunt inline.
   
   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. Să vedem exemplul din browser:
   
   77
   
   Imaginea 9.8 - Controale Checkbox în browser În timp ce codul ar fi următorul: 1 3 Serbia 4
   5 6 7 Romania 8 9
   10 11 12Ukraine 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):
   
   Imaginea 9.9 - Control dropdown activat în browser Se bazează pe tag-ul select, care conţine deja bine cunoscutele atribute name şi id. În cadrul tagului select menţionat, se află mai multe tag-uri option, în care introducem posibilele valori: 1<select name="country" id="country"> 2 Serbia 3Romania 4Ukraine 5
   
   78
   
   6 7 Fiecare opțiune (option) este o valoare şi ca atare trebuie să conţină atributul value, deoarece asta transmitem serverului, respectiv script-urilor. 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"). De asemenea, putem adăuga și tag-ul label dacă vrem şi îl putem lega de atributul for prin nume (name).
   
   Elementul select Controlul select menţionat poate fi schimbat dacă tag-ului select îi adăugăm atributul size, iar ca valoare introducem un număr. Valoarea acestui număr determină înălţimea controlului şi numărul de opţiuni care vor fi afișate. Pentru a înţelege mai bine, observăm exemplul de mai jos:
   
   Imaginea 9.10 - Select cu atributul size 3 În acest exemplu, în cod am adăugat size="3". Acum, nu mai este un meniu derulant, ci un câmp care afişează mai multe valori. Dacă numărul size este mai mic decât valorile disponibile, în partea dreaptă va apărea un scroll bar/bară de derulare (aici este dezactivată). Haideţi să vedem următorul cod: 1<select name="country" id="country" size="3"> 2 3Serbia 4Romania 5Ukraine 6 7 De asemenea, putem să activăm şi alegerea mai multor valori prin adăugarea atributului multiple="multiple". Pentru ca selectarea multiplă să funcționeze, este necesar şi un atribut size (într-un meniu derulant, nu poate exista selectare multiplă). Codul arată astfel: 1<select name="country" id="country" size="3" multiple="multiple">
   
   79
   
   2 3Serbia 4Romania Ukraine 5 6 7 Astfel, am permis selectarea mai multor opţiuni, cu condiția ca utilizatorul să țină apăsată tasta Control de pe tastatură (Ctrl), respectiv tasta Command (⌘) de pe tastatura calculatoarelor Mac, în timp ce efectuează selectarea multiplă. De aceea, trebuie să existe şi o notă, instrucţiune în acest sens, deoarece majoritatea utilizatorilor nu vor ști despre ce este vorba. În plus, uneori browser-ele au dificultăți cu un astfel de control select. Testaţi-l obligatoriu în toate browser-ele. Încărcarea fişierului Controlul care asigură încărcarea fişierelor prin intermediul formularelor este din nou input type, însă cu file type (type="file"): 1 În browser, se afişează următoarele:
   
   Imaginea 9.11 - Controlul pentru încărcarea fişierelor Dacă folosim acest control, formularul trebuie să aibă metoda setată la POST, precum şi un enctype corect (menţionat mai devreme). Acest control este specific prin faptul că nu permite stilizarea. Nu putem stiliza în niciun fel butonul, câmpul etc. cu regulile CSS, ci aceste detalii depind de browser-ul care afişează formularul.
   
   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: 1
   
   80
   
   Name şi ID nu sunt obligatorii aici. Value, pe de altă parte, defineşte ceea ce va fi scris pe butonul respectiv. Dacă nu îl introducem, în unele browser-e va apărea Submit Query:
   
   Imaginea 9.12 - Butonul submit din exemplul nostru Dacă vrem, în loc de butonul obișnuit putem utiliza o imagine. În acest caz, trebuie setat atributul type="image". Atunci, pe atributul input sunt permise atributele src, width, height şi alt, astfel încât să se comporte ca o imagine. Controlul Button Un control ceva mai nou este controlul button. La acest control, folosim tag-ul … , care poate cuprinde mai multe elemente, de exemplu text şi imagine: 1 2 Finish 3
   
   4 Câmpul Hidden Deşi ideea unui câmp ascuns în formular poate părea contradictorie, un astfel de control este posibil şi se utilizează chiar foarte des. Câmpul ascuns, după cum îi spune numele, nu este vizibil utilizatorului, însă se poate utiliza pentru salvarea temporară a unor date. Când spunem că nu este vizibil, ne referim la faptul că nu este afişat direct în browser, însă este vizibil în codul-sursă (source code), aşadar nu trebuie să postăm date sensibile. Haideţi să vedem exemplul din cod: 1 Controlul se foloseşte, de obicei, pentru a scrie anumite date în el în timpul încărcării paginii și pentru a le trimite apoi script-urilor. De exemplu, imaginaţi-vă un formular pentru sugestii şi comentarii de pe un site care vinde produse. Dacă utilizatorul este logat atunci când formularul este deschis, site-ul îi poate afișa ID-ul din baza de date în câmpul ascuns, iar utilizatorul nu trebuie să vadă acest lucru pe pagină. Când utilizatorul lasă un mesaj şi trimite formularul, ID-ul este trimis și el, ceea ce poate facilita sortarea, monitorizarea şi procesarea în continuare. 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:
   
   81
   
   1 2

   Contact

   3 4 Email:
   5 6
   7 8 Phone:
   type="text" name="phone"> 9 10 11

   12 În browser, acesta ar arăta astfel:
   
   Imaginea 9.13 – Fieldset şi legend într-un exemplu
   
   Fieldset este, în mod implicit, un element block type. Dacă aţi fi analizat cu atenţie codul în acest exemplu, aţi fi observat că tag-urile label sunt scrise în jurul controlului, în acest caz input. Acesta este un alt mod de a adăuga labels/etichete, deşi vă recomandăm să le scrieți separat, utilizând atributul for.
   
   Controalele HTML5 HTML5 şi validarea Cred că aţi observat până acum că unele formulare de pe web includ validarea. Acesta este un principiu conform căruia formularul este verificat în sensul datelor introduse, a tipului de date etc. Acest lucru se realiza până acum cu ajutorul unui JavaScript applet, care se executa pe pagină. Astfel, se evita angajarea inutilă a serverului în cazul în care formularul nu era completat corect.
   
   82
   
   Imaginea 9.14 - Exemplu de formular cu validare. Sursa imaginii: http://www.drupal.org/ Până acum, validarea era efectuată de JavaScript, însă, odată cu apariţia limbajului HTML5, aceste opțiuni sunt încorporate în HTML: 1 În momentul în care a fost conceput acest curs, doar anumite browser-e suportau această opţiune, însă în viitor numărul lor va crește cu siguranţă. Noi variante HTML5 de input Versiunea HTML5 a adus şi variante noi ale controlului input. Unele dintre acestea sunt:    
   
   câmpul textual de căutare (search) - type="search" ; câmpul pentru dată - type="date" ; câmpul pentru URL - type="url" ; câmpul pentru e-mail - type="email" .
   
   Nu trebuie să le explicăm în detaliu, deoarece ele setează câmpul astfel încât acesta să fie pregătit pentru introducerea conţinutului corespunzător. Afişarea şi funcţionalitatea le sunt influenţate de capacitatea browser-ului de a le procesa. Folosiţi-le cu atenţie şi testaţi-le!
   
   83
   
   HTML5 placeholder O altă noutate este opţiunea placeholder, care asigură afişarea textului înainte de interacţiunea cu utilizatorul. De exemplu, în câmpul de căutare putem să introducem: „Search...” Acest cuvânt ar fi dispărut imediat după ce câmpul ar fi fost focalizat (când utilizatorul dă clic pe câmp şi începe să introducă date). Este suficient să adăugăm atributul placeholder cu cuvântul dorit sau cu o propoziţie ca valoare. În continuare, avem şi un exemplu: <span style="font-
   
   1size: 14px;">
   
   Informaţiile despre pagină În cadrul acestei lecţii, vom aborda meta tag-urile care definesc informaţii suplimentare despre pagină. De asemenea, vom analiza atributele ID şi CLASS, pe care le setăm pe tag-urile HTML în scopul conectării cu regulile CSS şi cu codul JavaScript.
   
   Meta tags (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: 1
   
   
   
   2 3
   
   <meta name="description" content="Exemplul paginii pentru meta tag-uri">
   
   84 4<meta name="keywords" content="HTML, Meta, HTML5, xHTML, lectie"> 5<meta name="author" content="Vuk Ninić"> 6
   
   ...
   
   7
   
   În exemplul de mai sus, vedem începutul unei pagini HTML. Mai întâi, este scris doctype, apoi tag-ul HTML, după care este deschis tag-ul head şi în el sunt adăugate câteva meta tag-uri. Au fost adăugate 3 meta tag-uri. Dacă se foloseşte acelaşi tag (<meta>), cele trei se deosebesc după valoarea atributului. De obicei, se folosesc două atribute în fiecare meta tag, acestea fiind name şi content. Primul determină tipul de informaţie, în timp ce al doilea conține informaţia. Există şi excepţii de la această regulă, despre care vom vorbi în continuarea lecţiei. Meta tag-ul Description
   
   Acest meta tag defineşte descrierea paginii. De obicei, este utilizat de motorul de căutare pentru a înţelege despre ce este vorba în pagină. Uneori, apare în rezultatele căutării. Trebuie să aibă până la 155 de caractere. 1<meta name="description" content="Exemplul paginii pentru meta tag-uri">
   
   Haideţi să vedem un exemplu! Dacă tastăm în Google Smashing magazine, vom obţine următorul rezultat:
   
   85
   
   Imaginea 10.1 - Afişarea rezultatelor în motorul de căutare Google pentru cuvintele-cheie Smashing magazine Haideţi să vedem sursa paginii (Ctrl+U) la http://www.smashingmagazine.com/:
   
   Imaginea 10.2 - Afişarea codului HTML al paginii http://www.smashingmagazine.com/ Vedem că descrierea oferită de Google în rezultatele căutării a fost încărcată din meta tag-ul description al paginii.
   
   Meta tag-ul Keywords Se foloseşte pentru a introduce cuvintele-cheie (engl. Keywords), care descriu pagina. În cadrul atributului, elementele sunt separate prin virgulă. În trecut, motoarele de căutare acordau mai multă atenţie cuvintelor-cheie, în timp ce astăzi acestea își pierd importanţa, fiind chiar recomandat să nu le folosim: 1<meta name="keywords" content="HTML, Meta, HTML5, xHTML, lectie">
   
   Meta tag-ul Robots Acest meta tag indică motoarelor de căutare care indexează paginile (numiţi roboţi) cum să trateze pagina. Putem scrie noindex, dacă nu vrem ca pagina noastră să apară în rezultatele căutării (nu este recomandat). Astfel, Google, Bing şi alte motoare, pur şi simplu, vor ignora această pagină şi se vor comporta ca și când ea nici nu ar exista. A doua opţiune este nofollow, care indică faptul că pagina trebuie indexată, însă va neglija toate linkurile care se află pe ea. Dacă vă întrebaţi de ce
   
   86
   
   sunt atât de importante linkurile, vă răspundem: deoarece roboţii găsesc pagini noi prin linkurile de pe alte pagini, navigând fără întrerupere pe internet. De exemplu: 1<meta name="robots" content="nofollow">
   
   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 (title) paginii, care este foarte important pentru motoare de căutare precum Google, Bing şi altele: 1
   
   Opinia expertului SEO despre meta tag-uri Deoarece meta tag-urile influenţează cel mai mult aspectul optimizării site-ului nostru pentru motoarele de căutare (Search Engine Optimization), iată ce spun experţii SEO despre acest subiect: 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.
   
   87
   
   În trecut, tag-ul Meta Keywords permitea poziționarea mai bună prin introducerea unui număr cât mai mare de cuvinte-cheie, însă astăzi situația nu mai este aceeași. Abuzul de acest tag a făcut ca toate motoarele de căutare să-l respingă complet ca parametru de (clasificare) ranking. Sfatul nostru este să nu folosiţi tag-ul Meta Keywords, deoarece nu vă va fi de niciun folos din punct de vedere SEO, dar veţi ajuta concurenţa să vadă ce cuvinte-cheie folosiți pentru a ieși în evidenţă. Concurenţa nu trebuie decât să deschidă codul-sursă al paginii dvs., pentru a vedea direct ce cuvinte-cheie fac obiectul angajamentului dvs. SEO este o ştiinţă de sine stătătoare, iar o abordare mai detaliată a acestei teme depăşeşte sfera acestui curs.
   
   Atributul ID Fiecare element HTML poate să conţină un atribut ID. El se foloseşte pentru a determina un element în mod unic și concret. Aceasta înseamnă că pe o anumită pagină HTML poate exista doar un singur element cu o anumită valoare ID. Poate fi repetat într-un alt document. Valoarea atributului ID poate să conţină litere/caractere de text (minuscule şi majuscule), anumite semne şi numere. Totuşi, trebuie să înceapă cu o literă. Se scrie ca orice alt atribut HTML în tagul HTML de început:

   Acesta este un titlu caruia ii este adaugat un
   
   1ID

   
   
   Astăzi, ID-ul se foloseşte cel mai des pentru stilizarea CSS şi pentru programarea JavaScript. CSS poate folosi ID-ul pentru a aplica o anumită regulă CSS doar pe un singur element (vom vedea mai târziu cum funcționează CSS). De asemenea, JavaScript foloseşte ID-ul într-un mod similar, pentru a conecta anumite elemente ale paginii cu codul său. Simpla adăugare a atributului ID pe un element nu va influenţa afişarea acestuia. Îi adaugă doar o etichetă, practic un nume pe care îl putem folosi mai târziu, dacă este necesar. ID-ul se mai numeşte şi atribut global (global attribute), deoarece se poate aplica pe orice element.
   
   Atributul CLASS Atributul CLASS este foarte similar cu atributul ID menționat anterior, singura diferenţă constând în faptul că acesta poate apărea de mai multe ori pe aceeași pagină HTML. Uneori, este util să etichetăm mai multe elemente cu aceeaşi clasă (CLASS), pentru a le stiliza pe toate deodată cu CSS. Cu alte cuvinte, adăugăm o clasă pe mai multe elemente şi le stilizăm pe toate dintr-odată în CSS.
   
   88
   
   De asemenea, o altă diferenţă în raport cu ID-ul constă în faptul că un element poate conţine în acelaşi timp mai multe clase. Le scriem pe toate într-un singur atribut CLASS, însă le separăm printr-un spaţiu gol. Mai jos, analizăm exemplul: 1

   Primul paragraf

   2

   Al doilea paragraf

   3

   Al treilea paragraf

   4

   Al patrulea paragraf

   
   
   În acest exemplu, putem atribui aceeaşi regulă CSS tuturor celor patru paragrafe şi putem adăuga o altă descriere doar pentru al treilea paragraf (prin clasa separat). O întrebare care se pune frecvent este: Cum stabilim dacă vom folosi atributul ID sau atributul CLASS şi când trebuie să le folosim? Răspunsul nu poate fi simplu şi nici nu există doar unul corect. După cum am menţionat deja, atributele ID şi CLASS doar determină sau distanţează un element de mediul său. În diferite circumstanţe, adăugăm atribute diferite. De asemenea, diferiţi autori vor proceda diferit în situaţii identice, însă vor obţine probabil acelaşi rezultat. Pentru moment, nu vă bateți capul cu această problemă, reţineţi doar regulile şi diferenţele dintre atributele ID şi CLASS, iar totul vă va fi mult mai clar când vom folosi regulile CSS. Modul 5 Bazele CSS
   
   În lecţiile precedente, ne-am familiarizat doar cu limbajul HTML şi cu proprietăţile sale. Am învățat cum să adăugăm conţinut în pagini, iar acum ne vom familiariza cu CSS, cu regulile sale de bază şi cu stilizarea elementelor.
   
   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 a apărut mult mai târziu după HTML. La început, paginile HTML nu erau stilizate din punct de vedere vizual. Apoi, tag-urile HTML le-am folosit pentru stilizare, însă totul s-a dovedit a fi mult prea complicat şi ineficient. De aceea, a fost conceput limbajul CSS, care permite structurii HTML să afişeze conţinutul, iar CSS-ului să îl stilizeze. La început, mulţi autori au combinat stilizarea HTML şi CSS, însă în zilele noastre, când CSS a ajuns la maturitate, putem respecta în totalitate regula de separare a conţinutului (HTML) de stilizare (CSS). CSS ne permite să creăm niște reguli (descriptions), cu ajutorul cărora vom stiliza anumite elemente. De exemplu, cu CSS putem specifica faptul ca fundalul unei pagini să fie albastru, iar
   
   89
   
   textul roșu cu font Arial. De asemenea, putem seta ca toate paragrafele să aibă diferite tipuri de margini etc. În CSS, nu scriem tag-uri şi nici nu adăugăm conţinut HTML. 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 întrun fişier separat (cu extensia .css), fie în partea head a documentului HTML. Mai târziu, vom explica în detaliu aspecte legate de cum şi unde se scrie CSS.
   
   Cum funcţionează CSS-ul? Pentru a înțelege cum funcționează limbajul CSS, trebuie să ne imaginăm că în jurul fiecărui element de pe pagină există un cadru (box) invizibil. 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: 1h1 { color:red; } Exemplul codului de mai sus reprezintă o regulă CSS simplă. Declaraţiile sunt, de asemenea, alcătuite din două părţi: proprietate (property) şi valoare (value). Scriem proprietatea, apoi două puncte (:), apoi valoarea. În aceeaşi regulă, putem scrie mai multe declaraţii și trebuie doar să le separăm prin punct şi virgulă (;). Haideţi să vedem un exemplu! Dacă vrem ca paragrafele paginii noastre să aibă fontul Tahoma şi dimensiunea de 12 px, vom scrie următoarele: 1p { 2 3 4}
   
   font-family:Tahoma; font-size:12px;
   
   90
   
   În acest exemplu, am plasat selectorul p, ceea ce înseamnă că regula respectivă se referă doar la paragrafele din document (la tag-urile

   din HTML). Am pus paranteze acolade şi între ele două declaraţii care selectează fontul (font family) şi dimensiunea textului (font size). Observaţi că între proprietate şi valoare în declaraţie stă întotdeauna semnul : (fără spaţii), iar după declaraţie stă întotdeauna semnul ; (care indică sfârşitul valorii). Trebuie menţionat că noile rânduri şi spaţii nu au un rol important în limbajul CSS, însă trebuie respectată o anumită structură pentru a menține claritatea codului. De obicei, scriem selectorul şi paranteza deschisă pe un singur rând. Apoi, pe următoarele rânduri introducem toate declaraţiile (câte una pe fiecare rând), pentru ca la sfârşit să închidem paranteza pe noul rând, ca în exemplul de mai sus. Selectorii CSS fac diferența între minuscule şi majuscule (sunt case sensitive), aşadar trebuie să acordăm atenție acestui aspect. Anumite proprietăţi pot avea mai multe valori (separate prin virgulă) sau mai multe grupuri de valori (separate prin spaţii goale) sau pot conţine un string (text). În acest caz, valoarea se scrie între ghilimele. Putem combina aceste metode de scriere. Haideţi să vedem exemple pentru astfel de cazuri: 1p { 2 3 4}
   
   font-family:”Times New Roman”, Arial; margin:10px 0 0 0;
   
   Înainte de a continua, reţineţi termenii menţionaţi până acum în cadrul acestei lecţii, deoarece vom reveni la ei. 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. Spre deosebire de fişierele HTML, fişierele CSS sunt alcătuite doar din reguli CSS.
   
   91
   
   Tag-ul pentru legarea regulilor CSS în partea head a paginii este . La fel ca și alte tag-uri (de exemplu, meta tag-ul), acest tag nu are conţinut, fiind cu autoînchidere. Toate valorile se află în atributele sale de pe tag. În cazul tag-ului , aceste atribute sunt: 
   
    
   
   href – defineşte calea până la fişierul CSS extern. Poate fi relativă sau absolută. Vă recomandăm să setați căi relative şi să vă asigurați ca fişierele site-ului să fie întotdeauna împreună şi în aceleaşi relaţii. Am întâlnit deja acest atribut şi în tag-ul img, cu o funcţie similară (calea până la imagine). type – defineşte tipul de document la care ne legăm, deoarece tag-ul 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”.
   
   Iată un exemplu de fişier CSS extern legat, mai exact un exemplu de început de pagină HTML, care arată astfel: 1 2 3 4 5 6 7... 8 Nu uitați că acest tag se pune întotdeauna în cadrul părţii head a fişierului HTML şi, practic, este întotdeauna identic, numai calea până la fişier fiind diferită:
   
   Imaginea 11.1 - Pagini HTML şi fişiere CSS externe
   
   92
   
   Într-un singur document HTML, pot exista mai multe fişiere CSS legate1. În acest caz, vom adăuga câte un tag pentru fiecare fişier CSS extern. Vă reamintim că un fişier CSS poate stoca un număr nelimitat de reguli, însă o parte dintre autori separă grupurile de reguli CSS în diferite fişiere, pentru o organizare mai uşoară. Pe de altă parte, un fişier CSS poate fi apelat, încărcat de mai multe fişiere HTML diferite. Astfel, cu acelaşi fişier putem stiliza aceleaşi elemente de pe diferite pagini. 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 ca mai sus, putem adăuga tag-ul <style>, iar în cadrul lui să scriem direct regulile CSS. Iată un exemplu: 1 2 3 4 5 <style type=”text/css”> 6 p { font-family:Tahoma; 7 font-size:12px; 8 } 9 10 11 12... 13 În acest mod, practic am încorporat întregul fişier CSS în structura paginii HTML. În afara tagului <style>, se află o pagină HTML şi aici sunt valabile regulile ei. Pe de altă parte, în cadrul acestui tag se află regulile CSS şi sunt valabile regulile limbajului CSS:
   
   Imaginea 11.2 - CSS-ul intern încorporat în pagina HTML
   
   CSS-ul extern vs. CSS-ul intern
   
   93
   
   Se pune întrebarea ce CSS ar trebui să utilizăm, cel extern sau cel intern. Aproape întotdeauna este mai practic să utilizăm CSS-ul extern. Iată doar câteva motive:     
   
   Putem folosi aceleaşi reguli CSS pentru mai multe pagini diferite, în loc să le repetăm în mod inutil; Deoarece nu există repetiții ale codului, paginile sunt mai ușoare și se încarcă mai repede (CSS se încarcă doar pe prima); Putem separa conţinutul de stilizare; Putem schimba regulile CSS într-un singur loc, ceea ce va influenţa imediat toate paginile legate; Navigăm mai uşor în codul CSS, care este separat de 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. Acest mod de scriere este permis doar în variantele stricte ale documentelor și este o relicvă din trecut. Î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. Din cauza specificităţii acestei versiuni, regula pe care o introducem se referă doar la un singur element. De aceea, scrierea stilurilor inline nu este practică, iar modificările ulterioare sunt și mai dificile. Vom analiza următorul exemplu: 1... 2

   First paragraph

   3

   My paragraph

   4

   Third paragraph

   ... 5 Astfel, am stilizat un singur paragraf de text - al doilea. Dacă am fi vrut să le stilizăm pe toate, ar fi trebuit să le adăugăm și lor atributul style şi aceste proprietăţi şi valori. Este mai uşor să adăugăm CSS-ul extern sau intern şi să stilizăm toate paragrafele cu o singură regulă. Poate că vă întrebați în acest moment cum putem stiliza doar un singur paragraf dacă asta vrem cu adevărat, respectiv să-l evidențiem pe unul dintre ele? În astfel de cazuri sau în cazuri similare, nu vom folosi stilizarea inline, ci vom folosi selectori mai complecşi decât simplul p, după cum vom vedea în continuare.
   
   94
   
   Tipurile de selectori CSS Există diferite tipuri de selectori, cu ajutorul cărora putem ţinti aproape fiecare element de pe pagină. De noi depinde ce mod vom folosi în funcţie de situaţie. Interesant este faptul că nu există un singur mod adecvat, ci mai multe. În paragraful de mai sus, vorbind despre selectori, am folosit cuvântul a ţinti. Cuvântul face parte din jargon, respectiv din vocabularul experților CSS. Deşi ar fi mai corect să spunem: „această regulă stilizează elementul determinat de selectorul x”, spunem mai frecvent: „această regulă ţinteşte elementul x”. Acest mod de exprimare a devenit o regulă nescrisă, deoarece pleacă de la faptul că selectorii separă doar anumite elemente dintr-o mulţime de alte elemente şi le ţinteşte doar pe acelea. Analizaţi tabelul de mai jos, în care sunt prezentate tipurile de selectori: Explicaţie Ţinteşte toate elementele de pe pagină. Ţinteşte , precum şi toate elementele

   şi

   de pe pagină. † Ţinteşte elementul cu valoarea ID marcată. ID ‡ Ţinteşte elementul cu valoarea CLASS marcată. CLASS Ţinteşte toate elementele aflate în cadrul

   , chiar Moştenitor dacă între ele există elemente. (descendent) h1>a Ţinteşte toate elementele aflate în cadrul

   , însă Copil (child) doar acele elemente care se află direct în el (fără elemente între). h1~p

   Ţinteşte toate elementele

   care vin după elementul

   . Rudă (sibling) Ţinteşte doar un element

   , care se află imediat după Rudă directă (direct h1+p

   . sibling) Tipul de selector Universal General (tipic)
   
   Exemplu * Body, p, h2 #exemplu .exemplu h1 a
   
   Tabelul 11.1 - Tipurile de selectori †Notă: Valoarea ID se pune în atributul ID al tag-ului HTML doar după nume, în timp ce în regula CSS se scrie cu prefixul # . ‡Notă: Valoarea CLASS se adaugă în atributul CLASS al tag-ului HTML doar după nume, în timp ce în regula CSS se scrie cu un prefix. Notă suplimentară pentru ID şi CLASS Selectorii ID şi CLASS se pot combina cu alţi selectori. Facem aceasta scriindu-i împreună. De exemplu:
   
   95
   
   1h1#example {…} ar ţinti doar tag-ul

   , care posedă valoarea ID example. Acelaşi lucru este valabil şi pentru CLASS, numai că în loc de # se scrie . (punct).
   
   Selectorii complecşi Haideţi să vedem ce reguli sunt valabile pentru selectori şi, în general, pentru regulile CSS. Regula ordonării stilurilor CSS Am văzut că CSS se poate scrie în trei moduri (ca fişier separat, ca secţiune head a documentului HTML sau ca inline al tag-ului), astfel încât se poate ajunge la suprapunerea aceloraşi valori CSS. De asemenea, în 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. Haideţi să vedem în exemplu! Dacă în fişierul CSS am fi inserat următoarele: 1p { color:#F00; /*red color*/ 2 3} în partea head a paginii am fi inserat: 1p { color: #3F0; /*green color*/ 2 3} iar în tag-ul inline, culoarea albastră (blue color): 1

   Acesta este un text.

   este logic că textul nu poate fi negru (cum este în mod implicit), roşu, verde şi albastru în același timp. Browser-ul va seta culoarea albastră, deoarece această regulă CSS este cea mai aproape de element.
   
   96
   
   Este important să menţionăm și că, dacă avem două sau mai multe reguli CSS care se aplică la acelaşi element-ţintă, iar proprietăţile nu sunt în conflict, vor fi aplicate toate proprietăţile. Iată două exemple în acest sens. Dacă avem regula CSS: 1p { color:#F00; 2 3} dar şi o altă regulă: 1p { font-family:Arial; 2 3} Deşi se referă la acelaşi element, paragraful va fi formatat în culoarea roşie şi cu fontul Arial, deoarece acestea se completează. Pe de altă parte, dacă avem: 1p { color:#F00; 2 3} dar şi: 1p { 2 font-family:Arial; color:#3F0; 3 } 4 atunci se iau toate proprietăţile care nu se contrazic, plus una dintre cele aflate în conflict. Paragraful va fi formatat cu fontul Arial, însă formatarea culorii (roşu sau verde) va depinde de regulile contradicției menţionate mai devreme. Elementele-ţintă prin care atribuim proprietăţi pot fi mai complexe şi mai specifice, în funcţie de elementele aflate deasupra lor. De exemplu: 1p { color:red; 2 } 3
   
   97
   
   a stilizat toate elementele p, în timp ce următorul cod: 1.first { color:blue; 2 } 3 a stilizat doar elementele p care au clasa (class) first. Dacă, de exemplu, avem 10 paragrafe pe pagină, toate vor obţine culoarea din primul selector (culoarea roşie), în timp ce fiecare paragraf, care are şi clasa first, va obţine culoarea albastră. Apoi, în acest caz, regula CSS cu clasă nu trebuie să se găsească după selectorul general pentru a funcţiona, deoarece clasa este întotdeauna mai importantă decât selectorul general. Acelaşi lucru se întâmplă şi cu valorile ID, care sunt întotdeauna mai importante decât clasele. Haideţi să analizăm şi această situaţie. De exemplu: 1h1 { 2 3}
   
   color:#F90;
   
   ar fi stilizat toate elementele h1, în timp ce următorul cod: 1div h1 { 2 3}
   
   color:#F90;
   
   ar fi stilizat doar elementele h1 care se află în cadrul elementului div. Dacă, de exemplu, punem h1 direct în body, acesta nu este influenţat şi nici stilizat de această regulă, deoarece nu se află în cadrul niciunui div. În continuare, putem defini şi mai precis raportul elementului pe care îl ţintim cu stilizarea. În exemplul anterior, am avut: 1div h1 { 2 3}
   
   color:#F90;
   
   iar dacă scriem: 1div.myClass h1 { 2 3}
   
   color:#F90;
   
   vom stiliza toate titlurile h1, care se află în elementul div cu clasa myClass.
   
   Pe scurt, dacă introducem un spaţiu, ţintim elementul de dedesubt; dacă nu există niciun spaţiu, atunci ţintim elementul de la acelaşi nivel (elementul care îndeplineşte ambele condiţii).
   
   98
   
   Până acum aţi primit multe informaţii noi, cu care nu v-aţi mai întâlnit. După ce veți parcurge exemplele şi veți exersa puţin, reveniţi la această lecţie pentru a fixa detaliile, deoarece ele reprezintă baza limbajului CSS.
   
   Proprietăţile disponibile în CSS După cum ştim deja, în afară de selector, care face parte din regula CSS, trebuie să cunoaștem şi ce proprietăţi şi valori putem utiliza. Normal că nu trebuie să învăţați pe de rost toate proprietăţile posibile, deoarece, pe de o parte, există prea multe, iar, pe de altă parte, nici nu e necesar. Oricum, vă stau întotdeauna la dispoziție și pe internet şi/sau în bibliografie2. Important este să știți cum şi unde să le aplicaţi. Cele mai des folosite proprietăţi vor fi abordate pe parcusul cursului.
   
   Afişarea în diferite browser-e Pe oricine întrebați, un dezvoltator web cu experienţă, un designer sau, în general, orice persoană cu experienţă în HTML şi CSS, dacă CSS se comportă identic în diferite browser-e, răspunsul pe care-l veţi primi va fi unul negativ. Ca şi HTML, CSS este un document text care trebuie parsat şi afişat, iar toate acestea depind de multe detalii, în special de browser. A devenit deja celebră povestea browser-ului Internet Explorer şi (ne)respectarea standardelor general-acceptate. În continuare, Internet Explorer rămâne în urma celorlalte browser-e moderne (Chrome, Opera, Firefox). Ceea ce noi, ca programatori web, trebuie să facem este să testăm site-urile noastre în diferite browser-e, pentru a fi siguri că totul se afişează în mod normal. Nu este suficient să creăm un site în care totul se afişează perfect, de exemplu în browser-ul Chrome, şi să ignorăm că totul arată greşit în Internet Explorer. Poate nu folosiţi Internet Explorer, dar mulți alții îl folosesc. Înainte de a începe să lucraţi la un site, trebuie să determinaţi (sau să ajungeţi la un acord cu cel care a comandat site-ul) ce browser-e va susţine pentru a şti pe ce funcţii vă puteţi baza, deoarece unele versiuni mai vechi pur și simplu nu suportă funcţii mai noi. De exemplu, dacă proprietarul site-ului vă cere ca site-ul să se deschidă normal în Internet Explorer 7, puteți uita de toate funcţiile mai noi, precum HTML5, CSS3 etc. Limbajul CSS: foloseşte toate tag-urile din limbajul HTML foloseşte unele tag-uri din limbajul HTML nu foloseşte tag-uri HTML, ci doar reguli CSS Întrebarea legată de cum putem soluţiona situaţia în care într-un browser ceva poate fi afișat normal, în timp ce în altul nu, rămâne în picioare. Vom începe verificarea, parcurgând următoarele etape:
   
   99 
   
   
   
   
   
   Există o eroare în codul nostru HTML şi/sau CSS? Dacă browser-ul găsește un tag deschis, tag-uri suprapuse, o regulă CSS scrisă incorect etc., el va încerca să presupună ce ar trebui să se afle aici şi atunci apar problemele. În majoritatea cazurilor, problema se află aici, iar nu în browser. Browser-ul în care apare problema suportă ceea ce vrem să realizăm? Am menționat deja acest detaliu în paragraful precedent. Nu toate browser-ele suportă totul. De exemplu, versiunea 6 de Internet Explorer nu suportă fişierele PNG transparente. În toate celelalte browser-e, un astfel de PNG va fi afişat normal, excepţie făcând doar browser-ul de mai sus. Putem să înlocuim imaginile PNG cu altele diferite sau să ignorăm acest browser, însă aceasta este deja o chestiune legată de planificare. Dacă am trecut cu bine de cele două etape sus-menționate și problema noastră nu este legată de ele, atunci avem de-a face cu un CSS browser bug (o problemă de browser), respectiv browser quirk. În acest caz, cel mai bine ar fi să căutăm un răspuns sau o soluţie pe internet, deoarece este aproape probabil ca cineva să se fi confruntat înainte cu aceeaşi problemă sau cu una similară şi să fi împărtăşit soluţia cu alte persoane de pe internet.
   
   Modelul CSS Am menţionat mai devreme în curs că fiecare element de pe o pagină HTML poate fi reprezentat printr-un cadru (engl. box) imaginar trasat în jurul lui şi că există elemente Inline şi Block. În această lecţie, ne vom ocupa în detaliu de aceste noţiuni, precum şi de modul în care putem gestiona aceste cadre din jurul elementelor prin CSS box model. IMPORTANT: Nu confundaţi noţiunile de elemente Inline şi stilizare CSS Inline. Elementele Inline reprezintă un tip de element de pe paginile HTML, în timp ce stilizarea CSS Inline reprezintă un mod de a posta stilizarea CSS pe orice element (în următoarea lecţie, veţi afla mai multe informaţii).
   
   Bazele layoutului Dacă lucrăm în Adobe Illustrator, putem aranja cadrele (layouts) pentru text cum vrem, mutândule în document. În Photoshop, putem desena pe straturi (layers) oriunde vrem. În Microsoft Word, putem muta imaginile dintr-un loc în altul prin glisare, deşi am putea crede că acest lucru funcționează şi în HTML, şi CSS. Adevărul este că ordonarea elementelor este foarte diferită. Aici, ordonarea este un joc care constă în împingere şi stivuire. Putem face o analogie cu clădirea unui perete de cărămidă, unde trebuie să avem un rând precedent (sau cel puțin o cărămidă) ca suport pentru următorul rând. Diferenţa constă în faptul că în cazul nostru cărămizile sunt aranjate de sus în jos, însă principiul de bază este identic. Dacă nu înţelegeți şi nu acumulați cunoştinţele legate de organizarea elementelor şi despre modul de funcţionare a combinaţiilor de limbaje HTML/CSS, veți avea mari probleme mai târziu, legate de transformarea designului ideal pe care l-am desenat în Photoshop (Fireworks, Illustrator etc.) într-un document HTML funcţional.
   
   100
   
   Elementele Block sunt aranjate în timp ce elementele Inline, unul lângă altul
   
   unul
   
   sub
   
   altul,
   
   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.
   
   Imaginea 12.1 - Elementele Block şi Inline Î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. Înălţimea depinde de conţinutul inserat (în caz că nu este definit altfel). 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 ) 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
   
   101
   
   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ă. Prin urmare, fiecare element vizibil poate fi Block sau Inline, întrebarea este doar dacă avem nevoie de aşa ceva într-un anumit context. În mod implicit, în elementele Block intră:        
   
   elemente div (

   ); paragrafe (!ss!p>); liste (

   ); elementele listelor (
   • ); titluri (

     –

     ); tabele (); elementele HTML5 de bază (<section>,
     
     3
     
     
     
     4
     
     
     
     5
     
     
     
     6
     
     
     
     7
     
     
     
     8
     
     
     
     9
     
     
     
     10 11 12 13 14
     
     
     
     
     
     15
     
     
     
     16
     
     
     
     17
     
     
     
     18
     
     
     
     19 20
     
     În CSS, avem: 1 body { 2 3 }
     
     font-family:Georgia, "Times New Roman", Times, serif;
     
     158 4 5 th, td { padding: 7px 10px 10px 10px;
     
     6 7
     
     }
     
     8 9
     
     th { text-transform: uppercase;
     
     10 11
     
     letter-spacing: 0.2em; font-size: 90%;
     
     12
     
     border-bottom: 2px solid #111111;
     
     13
     
     border-top: 1px solid #999;
     
     14
     
     text-align: left;
     
     15} 16 17tr.even { 18
     
     background-color: #6FC;
     
     }
     
     19 20
     
     tr:hover {
     
     21
     
     background-color: #fff;
     
     22
     
     }
     
     23 24.record { 25
     
     text-align: right;
     
     26} 27 28
     
     Iar în browser se afişează următoarele:
     
     159
     
     Imaginea 17.2 - Un tabel stilizat După cum putem vedea din acest exemplu, am combinat diferite reguli CSS şi am adăugat anumite atribute CLASS unor elemente diferite, pentru a le ținti cu regulile CSS. Dacă o luăm de la început, vedem că alegerea fontului este definită pe întreaga pagină (body). Apoi, am setat spaţii (padding) pe celule. Am definit aspectul titlurilor și, la final, am adăugat o zebră (rândurile even şi odd) şi am aliniat ultima coloană.
     
     Stilizarea formularelor Stilizarea formularelor este foarte asemănătoare cu stilizarea tabelelor, dar poate fi mai complicată. În primul rând, din cauza faptului că majoritatea controalelor folosesc obiecte input, aşadar nu putem folosi selectori generali. Să luăm această parte a formularului: 1 2 3
     
     Dacă o stilizăm cu aceste reguli CSS: 1 input { 2 3
     
     width:300px; color: #006; background-color: #D6E6FE;
     
     4 5
     
     border: 1px solid #06C; padding: 2px 45px 2px 2px;
     
     6
     
     background-repeat: no-repeat;
     
     7
     
     background-position: 95% center;
     
     160 8
     
     display: block;
     
     9
     
     margin-bottom: 6px; }
     
     10 11
     
     input#email {
     
     12
     
     background-image: url("images/email.png");
     
     13
     
     }
     
     14 15
     
     input#twitter {
     
     16
     
     background-image: url("images/twitter.png");
     
     17} 18 19input#web { 20
     
     background-image: url("images/web.png");
     
     21} 22 23
     
     vom obţine rezultatul următor:
     
     Imaginea 17.3 - Formular stilizat (câmpuri input) Este important de remarcat că am folosit o singură descriere pentru toate input-urile, dar am adăugat o descriere separată pentru detaliile care se deosebesc. Problema acestui exemplu este că prima descriere a influenţat toate tag-urile input, inclusiv butonul submit, radio şi opţiunile checkbox etc. O soluţie poate fi adăugarea aceleiaşi valori CLASS tuturor câmpurilor textuale şi corectarea primei descrieri. Există şi o a doua variantă - selectorului îi putem adăuga un tip de câmp. De exemplu: 1input[type=text] {…}
     
     161
     
     Type poate fi și altceva. Trebuie să corespundă atributului type al tag-ului input. Trebuie doar să fim mai atenţi cu browser-ele mai vechi, deoarece nu toate suportă acest mod de selectare a elementelor.
     
     Pseudoclasele Pe lângă modul tradițional de selectare a elementelor, în anumite situaţii putem selecta, ţinti, stările lor cu ajutorul pseudoclaselor. Pe acestea le setăm scriind semnul două puncte : după selector sau după o anumită parte a selectorului, iar apoi adăugând cuvântul-cheie. De exemplu, hyperlinkurile pot avea starea link, hover, visited sau active la un anumit moment. Link este starea normală a linkului, hover este starea care se activează când ținem mouse-ul deasupra linkului, visited este starea linkurilor vizitate anterior, în timp ce starea active se instaurează când dăm clic pe link. De exemplu: 1 a, 2 a:link { 3
     
     color: #cc0000;
     
     4
     
     text-decoration:none;
     
     5 } 6 7
     
     a:visited { color: #990000;
     
     8
     
     text-decoration:none;
     
     9
     
     }
     
     10 11
     
     a:hover {
     
     12
     
     color: #3333cc;
     
     13
     
     text-decoration:underline;
     
     14} 15 16a:focus { 17 }
     
     18
     
     outline: thin dotted;
     
     162 19
     
     În acest exemplu, vedem că prima regulă CSS a fost setată pentru toate linkurile (a selector) şi pentru linkurile în stare normală (a:link). Am definit culoarea textului şi am înlăturat underline (linia de sub link). Poate vă întrebaţi de ce am scris doi selectori. Nu este suficient să scriem doar a:link? În principiu este suficient, dar pot apărea probleme dacă cineva nu adaugă atributul href corect în tag. În acest caz, starea :link nu va funcţiona. În continuare, vedem selectorul a:visited în a doua descriere, care defineşte linkurile vizitate, marcându-le printr-o culoare puțin mai închisă. Starea a:hover schimbă culoarea linkurilor în albastru, pentru ca utilizatorul să primească feedback că se află deasupra unui link. Putem adăuga şi starea a:active, pe care nu am folosit-o aici. Folosind stările speciale, practic prin CSS putem să tratăm un element în diferite moduri şi să distanţăm descrierile. În majoritatea cazurilor, practic întotdeauna, pseudoclasele se folosesc pentru linkuri.
     
     Border-radius Cea mai des menţionată proprietate CSS3 este border-radius. O utilizăm pentru a defini curbura unghiului pentru marginea setată. Să privim codul: 1.box { 2
     
     border:1px solid #333;
     
     3
     
     border-radius:10px;
     
     4}
     
     În acest fel, pe un element cu clasa box am inserat o margine gri simplă (border) cu grosimea de 1 pixel, cu colţurile rotunjite la un unghi de 10 pixeli. În acest exemplu, se poate vedea foarte bine cum vechea specificație CSS border colaborează cu cea nouă, border-radius. Pe lângă curbura egală, putem defini şi valori speciale pentru toate cele patru unghiuri. Introducem patru valori pentru unghiurile din stânga-sus, dreapta-sus, dreapta-jos, stânga-jos: 1border-radius:10px 0 20px 0;
     
     163
     
     Un cod introdus astfel va rotunji unghiul din stânga-sus şi pe cel din dreapta-jos:
     
     Imaginea 17.4 - Exemple de aplicaţii border-radius afișate în browser
     
     Box-shadow Această proprietate defineşte umbra pe care un anumit element o aruncă sub el. Solicită mai mulţi parametri. În cod putem scrie, de exemplu: 1.box { 2
     
     box-shadow: 10px 20px 5px 0px #000000;
     
     3}
     
     Acest exemplu pune o umbră pe element - o umbră mutată cu 10 px în partea dreaptă faţă de element, cu 20 px în partea de jos a elementulu, cu valoarea blur (estompare) de 5 px, valoarea spread (care extinde umbra) de 0 px şi, la final, culoarea umbrei în sine. În acest exemplu, am folosit hex, dar putem utiliza şi RGBA, de exemplu. Deci, proprietatea box-shadow necesită următoarele valori: 1box-shadow: hor-position vert-position blur spread
     
     color;
     
     164
     
     Dacă vrem ca o umbră să cadă în interiorul elementului, putem introduce şi cuvântul-cheie inset:
     
     Imaginea 17.5 - Exemplu de drop shadow (umbră lăsată) afișată în browser

     ---

     Related Documents

     

     Html List Dan Link

     May 2020 6

     

     Introducere

     May 2020 24

     

     Html I Css.pptx

     May 2020 10

     

     N At I O N A L I N S

     June 2020 30

     

     N At I O N A L I N S

     June 2020 24

     

     Link

     November 2019 73

     ---

     More Documents from ""

     

     Programarea Core Php.docx

     May 2020 7

     

     May 2020 11

     

     Barcelona Rinex - Pop George.pptx

     June 2020 13

     

     A Class Notes 24 Read- Lknfo.docx

     June 2020 15

     

     Bca Protein Assay

     December 2019 27

     

     April 2020 33

     Copyright © 2024 PDFCOKE.

     name	surname	ID
     Tricia	McMillan	332
     Arthur	Dent	1234
     Ford	Prefect	9876