Aplicatii Mobile - Curs1

1
Introducere
Pentru afişarea conţinutului fişierelor în format HTML5, limbajele de programare actuale integrează o
clasă specializată. În Java şi C# de exemplu, această clasă se numeşte WebView , iar în Objective-C numele
clasei este UIWebView.
Limbajele menţionate permit programarea aplicaţiilor native destinate terminalelor mobile. Astfel
limbajul Java este utilizat pentru scrierea aplicaţiilor destinate platformei Android, Objective-C este un
limbaj destinat realizării de aplicaţii pentru iPhone sau iPad iar C++ permite scrierea aplicaţiilor pentru
telefoane sau tablete funcţionând sub Windows.
În abordarea tehnologiei folosite la crearea unei aplicaţii mobile un pas important este stabilirea
sistemului de operare cărora le este destinată aceasta. Studiind distribuţia sistemelor de operare folosite
în telefonia mobilă se observă că platforma Android este de departe cea mai utilizată.
Aparent o aplicaţie de succes trebuie să poată fi rulată cu prioritate pe acest sistem. Totuşi, faptul că o
aplicaţie mobilă nativă, indiferent de limbajul folosit, poate afişa într-un control de tip WebView un
conţinut HTML5 + JavaScript permite imaginarea unei clase de aplicaţii mobile în care partea nativă se
reduce la simpla afişare pe ecranul terminalului a acestui control. În controlul afişat se va încărca un fişier
codificat în HTML5, parte a aplicaţiei. Aplicaţia propriuzisă va fi creată folosind HTML5 pentru afişare şi
JavaScript pentru elementele programate.
2
În ultimii ani s-a creat o clasă de aplicaţii mobile bazată pe tehnologia menţionată. Aplicaţiile astfel
realizate sunt cunoscute sub denumirea de aplicaţii mobile hibride. Specific acestora este faptul că pot fi
dezvoltate folosind cunoştinţele normale pentru dezvoltatorii de site -uri web sau de aplicaţii web,
respectiv HTML5, CSS3 şi JavaScript. Componenta nativă a unei astfel de aplicaţii, respectiv aplicaţia care
afişează pe ecranul terminalului un control de tip WebView, este generată automat de mediile folosite
pentru dezvoltare. Schema generală a unei astfel de aplicaţii este prezentată în figura următoare.
Interfaţă
Pe lângă setul restrâns de cunoştinţe şi tehnici de dezvoltare, aplicaţiile mobile hibride au şi avantajul
evident de a putea fi generate fără modificări pe o largă varietate de terminale, funcţionând sub diverse
sisteme de operare.
Observaţie: O pagină Web afişată în fereastra browser-ului telefonului nu poate accesa multe dintre
resursele terminalului. De exemplu senzorii acestuia, sistemul de fişiere sau agenda cu contacte. Doar
aplicaţiile native, scrise în limbajele menţionate, dispun de clase şi metode de acces la acestea. Aplicaţiile
mobile hibride sunt însă în primă instanţă aplicaţii native. Ele crează după lansarea în execuţie un obiect
din clasa WebView în care se încarcă apoi fişierul .html al aplicaţiei şi fişierele JavaScript referite în acesta.
Folosind însă facilitatea din aplicaţiile native care permite comunicarea dintre codul JavaScript dintr-un
control WebView cu restul aplicaţiei native, pentru accesul la componentele menţionate se pot scrie
funcţii native apelate efectiv din funcţiile conţinute în scripturile JavaScript. Funcţiile de legătură între
3
cele scrise în JavaScript şi metodele native sunt definite pentru fiecare platformă şi încărcate în aplicaţie
în momentul creării executabilului acesteia. Astfel accesul la resursele terminalului devine efectiv şi
pentru aplicaţiile hibride.
Istoric
În anul 2009 compania canadiană Nitobi a creat o soluţie de dezvoltare de aplicaţii mobile denumită
PhoneGap. Aceasta permite crearea de aplicaţii mobile conţinând un obiect de tip WebView şi un set de
funcţii JavaScript apelabile din fişierul conţinut în WebView şi care pot accesa componentele fizice şi
software ale terminalului pe care rulează.
În 2011 Nitobi cedează PhoneGap corporaţiei non-profit Apache Software Foundation.
Tot în 2011 compania americană Adobe Systems Inc. preia Nitobi şi devine proprietara mediului
PhoneGap. Ca urmare, în 2012 Apache Software Foundation schimbă numele tehnologiei de dezvoltare
din PhoneGap în Cordova.
Compania Adobe integrează PhoneGap începând cu Adobe Dreamweaver CS6 şi crează PhoneGap Build
(https://build.phonegap.com/), soluţie de tip cloud care permite crearea rapidă a kiturilor de instalare a
aplicaţiilor mobile pentru diferite platforme.
Cordova sau PhoneGap?

Apache Cordova este un proiect open source. PhoneGap este o distribuţie a soluţiei Cordova care oferă
în plus integrarea în produse Adobe (Dreamweaver) şi crearea de aplicaţii mobile pentru diferite sisteme
de operare folosind PhoneGap Build . Practic cele două sunt similare şi pot fi folosite una în locul alteia.
Din punct de vedere al utilizatorilor, dacă dezvoltarea unui proiect se bazează pe folosirea produselor
Adobe atunci se va folosi PhoneGap, dacă nu, se va folosi Apache Cordova.
Sunt mai bune aplicațiile native ?

Aplicațiile native pot avea viteze de răspuns mai bune ca și cele hibride. În cazul unor jocuri este posibil
ca acest lucru să fie important, deci trebuie adoptată soluția programării folosind limbajele native (Java
pentru Android, C++ pentru Windows și Objective C pentru IOS). Pentru majoritatea aplicațiilor însă,
această caracteristică nu este importantă. Este important însă ca manevrarea interfeței grafice să dea
senzația de fluiditate și de precizie, ori din această perspectivă aplicațiile mobile hibride sunt mai bine
cotate (+12% în testele specialiștilor).
Un exemplu clasic de soluții preponderent mobile este reprezentat de familia aplicațiilor care accesează
resurse din Internet. Astfel firme mari își bazează pe aplicații mobile hibride accesul clienților la
informațiile oferite. Exemple :
4
Amazon Appstore
Twitter
Apple Appstore
5
Gmail
Uber
Instagram
6
Pregătirea sistemului
Pentru a putea realiza aplicaţii mobile hibride folosind un calculator funcţionând sub sistemul de operare
Windows, se pot instala şi configura diverse medii de dezvoltare, cele mai utilizate în acest moment fiind
următoarele:
 IONIC este un mediu de dezvoltare bazat pe AngularJS. AngularJS este un framework dezvoltat
de Google, destinat realizării de aplicaţii Web în arhitectură Model – View – Controller (MVC)
pentru componenta de front-end.
 Mobile Angular UI este un mediu similar mediului IONIC, bazat tot pe AngularJS şi Bootstrap 3,
destinat realizării de aplicaţii mobile.
 Intel XDK este o platformă de dezvoltare creată de Intel. În Intel XDK dezvoltarea aplicaţiilor se
realizează cu un efort minim, construirea interfeţei utilizator realizându-se cu mouse-ul, prin
inserarea elementelor dintr-o paletă (drag and drop). Platforma integrează diverse soluţii
destinate creării productive a site-urilor web: Bootstrap 3, jQuery Mobile, Topcoat ş.a..
 Appcelerator TITANIUM este o soluţie gratuită (open source) de dezvoltare de aplicaţii mobile
bazată pe Titanium Studio, un mediu de dezvoltare complex destinat editării codului aplicaţiei,
vizualizării şi testării acesteia.
7
 Sencha Touch este un mediu de dezvoltare de aplicaţii mobile care integrează majoritatea
framework-urilor JavaScript destinate creării componentelor aplicaţiilor Web executabile în
browser (front-end ) . Costul mare al unei licenţe limitează însă utilizarea sa.
 PhoneGap este integrat în Adobe Dreamweaver, transformând populara aplicaţie de dezvoltare a
site-urilor într-o aplicaţie destinată creării aplicaţiilor mobile.
În cele ce urmează va fi folosită aplicaţia Intel SDK. Alegerea are la bază costurile (aplicaţia este gratuită)
precum şi suportul pe care se bazează, respectiv firma Intel Co., cel mai mare jucător din piaţa
microprocesoarelor.
Pregătirea telefonului
Pentru un telefon funcţionând sub sistemul Android pregătirea terminalului constă în validarea opţiunii
USB debugging din lista afişată selectând pe telefon Settings / Developer options. Dacă opţiunea
Developer options nu apare printre opţiunile afişate, trebuie căutată pe Internet soluţia pentru varianta
de Android folosită. De exemplu pentru Android versiunea 4.2 sau superioară se procedează astfel:
 Se selectează pe terminal pictograma Settings şi în lista afişată se selectează opţiunea About

phone;
 Lista afişată se derulează până pe ultima poziţie, pe care scrie Build number;
8
Notă: Calea spre opţiunea Build number poate diferi de la un model de telefon la altul Astfel, pentru HTC
Dsire 610 calea este Software information / More / Build number. Practic trebuie găsită varianta pentru
telefonul utilizat.
 Se selectează cu degetul de şapte (7) ori Build number. Efectul va fi includerea în lista Settings a
intrării Developer options., după care se poate valida opţiunea USB debbuging.
 În continuare se va conecta telefonul la calculator folosind un cablu USB. La conectare sistemul
de operare va încerca să instaleze driver-ele necesare. De regulă succesul operaţiei este limitat.
Driver-ul necesar comunicației între calculator și telefon (sau tabletă) se poate descărca din Internet.
Pentru platforma Android se poate accesa adresa:
https://developer.android.com/tools/extras/oem-usb.html#Drivers
O variantă alternativă este accesarea paginii de la adresa http://adbdriver.com/downloads/ În pagina

menționată se va selecta Adb driver installer.
Rezultatul va fi descărcarea pe calculator a unui executabil (AdbDriverInstaller.exe). Cu telefonul conectat

la calculator prin cablul USB se va lansa în execuţie AdbDriverInstaller.exe (dublu clic în Windows Explorer).
Aplicaţia va afişa o fereastră în care va apărea identificatorul telefonul conectat. Pentru instalarea driver-
ului necesar conectării telefonului se va selecta butonul Install.
9
După încheierea procesului, pe ecranul telefonului va apărea un mesaj de confirmare a conexiunii cu PC-ul,
care trebuie acceptată.
Ulterior, după instalarea şi lansarea în execuţie a aplicaţiei Intel XDK folosită la dezvoltarea aplicațiilor, se
va putea verifica dacă telefonul conectat prin cablul USB este configurat corect. Astfel, dacă se selectează
tabul PROFILE aplicaţia va afişa fie No Device Connected fie un cod specific telefonului utilizat.
10
a. Instalarea aplicaţiei Intel XDK

Intel XDK se poate instala pe toate sistemele de operare majore: Linux, Unix, Windows sau OS X.
Aplicaţia se descarcă de la adresa: http://xdk.intel.com/ şi se instalează pe calculator. Pentru utilizarea

aplicaţiei va trebui creat un cont de dezvoltator prin selectarea opţiunii Join Today sau ulterior, la prima
lansare în execuţie a aplicaţiei.
Instalarea pe telefon a aplicaţiei App Preview

Pentru testarea pe telefon a aplicaţiilor în dezvoltare este necesară instalarea unei aplicaţii specifice.
Pentru Android se va selecta https://play.google.com/store şi se va căuta şi instala pe telefon aplicaţia
App preview. Aplicația există și pentru telefoane funcționând sub alte siste me de operare și poate fi
descărcată și instalată din magazinul virtual specific platformei.
11
La prima rulare a aplicaţiei, aceasta va solicita datele contului creat pentru folosirea aplicaţiei Intel XDK.
Instalarea unei aplicaţii de simulare

Deoarece emulatorul integrat în Intel XDK este relativ limitat, uneori testarea aplicaţiei nu va putea fi
făcută decât pe telefon sau folosind o aplicaţie specializată. O aplicaţie bine realizată şi relativ rapidă este
Genymotion care poate fi descărcată gratuit de la adresa https://www.genymotion.com/#!/.
Versiunea gratuită a emulatorului este relativ limitată, deci instalarea este recomandată doar dacă
testarea aplicaţiei pe telefon nu este concludentă şi ea trebuie extinsă folosind facilităţile unei aplicaţii
specializate de simulare.
Realizarea unei aplicaţii de tip Hello World folosind Intel

XDK
Înainte de a începe aprofundarea acestei tehnici de dezvoltare a aplicațiilor mobile se va realiza o mică
aplicație de tip Hello World. Chiar dacă este vorba despre o aplicație banală, realizarea ei va necesita
totuși parcurgerea pașilor specifici, astfel:
 Se lansează în execuţie Intel XDK;

12
 Se selectează tipul de proiect dorit. În cazul unei aplicaţii de tip "Hello World!" se va selecta
Projects / Samples and Demos / General şi în panoul din dreapta se va alege HTML5 + Cordova şi
apoi Hello, Cordova.
Observație: Dacă opțiunea Samples and Demos lipsește din panoul din stânga, cauza este lipsa logării la
contul creat pe site-ul firmei Intel.
 Se generează proiectul
13
În caseta de dialog afişată se introduce un nume pentru noua aplicaţie, se impune directorul în care se va
creea proiectul şi se apasă butonul Create.
În continuare se va derula procesul automat de creare a proiectului, finalizat prin afișarea unui mesaj.
14
Intel XDK va va afişa în fereastra DEVELOP conţinutul fişierului index.html. Aşa cum s-a afirmat deja, o
aplicaţie hibridă conţine un fişier în format HTML5 care va fi încărcat în mod automat în controlul de tip
WebView al aplicaţiei. Fereastra afişată de mediul de dezvoltare va permite editarea acestui cod folosind
editorul integrat (Intel XDK integrează editorul Brackets) şi va fi permanent accesibilă prin selectarea
tabului DEVELOP.
Coloana din stânga permite accesul la toate fişierele proiectului: fişiere conţinând stiluri (.css), fişiere
conţinând scripturi JavaScript (.js) sau fişiere conţinând imagini (.jpg, .gif sau .png).
De exemplu, pentru a accesa fişierul de stiluri index.css evidenţiat în imagine se va selecta fişierul în
arborele structural al proiectului, calea fiind: www/css/index.css.
15
În prima parte a panoului din stânga mediul de dezvoltare Intel XDK afișează fişierele în lucru din cadrul
proiectului curent. Astfel, dacă s-au operat modificări în index.css şi s-a salvat fişierul, acesta va fi adăugat
automat sub index.html.
Fişierele conţinute în proiect pot fi afişate şi selectând în Windows Explorer directorul proiectului.
16
Principalele fişiere ale aplicației mobile sunt în subdirectorul www.
Subdirectorul plugins include extensii specifice Apache Cordova. Acestea au fost incluse deoarece tipul
de proiect a fost astfel ales încât să permită accesul la aceste extensii.
 Se testează funcţionarea aplicaţiei. Pentru proiectul realizat, deoarece acesta accesează mai
mulți senzori ai telefonului se recomandă testarea direct pe telefon. Pentru aceasta se va selecta
tabul TEST.
După selectarea tabului TEST va trebui selectat butonul I HAVE INSTALLED APP PREVIEW.
La prima accesare a modulului de testare Intel XDK va solicita sincronizarea versiunii din calculator cu cea
de pe serverul firmei Intel pe care se crează efectiv aplicația mobilă.
În cazul în care s-au realizat eventuale modificări în aplicație, pentru resincronizarea versiunii din
calculator cu cea de pe serverul companiei Intel se apasă butonul PUSH FILES:
17
În continuare se lansează pe telefon aplicația APP PREVIEW. Dacă aplicația nu este conectată la contul
folosit în Intel XDK, se realizează conectarea. Apoi se selectează în lista de proiecte afișată de aplicația
APP PREVIEW proiectul realizat (Demo), acesta fiind imediat lansat în execuție pe telefon.
18
Alte facilităţi ale mediului de dezvoltare Intel XDK

În crearea aplicaţiei anterioare s-au utilizat două dintre taburile expuse de aplicaţie, respectiv DEVELOP şi
TEST.
Utilizarea tabului EMULATE
Pentru testarea pe calculator a aplicațiilor, folosind doar resursele disponibile în mediul de dezvoltare
Intel XDK, se poate selecta tabul EMULATE. Interfața expusă permite testarea efectului mișcării
terminalului (pentru simularea utilizării accelerometrului și a busolei) sau funcționarea GPS-ului.
De asemenea se pot impune diferite tipuri de terminale (telefoane și tablete) și dispunerea acestora
(vertical sau orizontal).
Utilizarea tabului DEBUG
Tabul DEBUG permite lansarea aplicaţiei pe terminalul conectat prin cablul USB (transfer urmat de lansare
în execuție) ca și în cazul seletării tabului TEST, sau lansarea aplicaţiei în regim de depanare.
19
Debug Lansare în Oprire aplicaţie

execuţie
Dacă se selectează butonul Debug , aplicaţia va afişa o interfață similară celei afișate de Google
Chrome dacă se apasă tasta F12. Simpla plasare a mouse-ului deasupra unei linii de cod din fișierul
index.html de exemplu va determina evidenţierea pe terminalul conectat a elementului corespondent
împreună cu unele informaţii de bază (identificatorul blocului care conţine elementul respectiv şi
dimensiunile sale). De asemenea se pot vedea mesajele trimise de aplicație spre consolă prin apelul
funcției JavaScript console.log().
Utilizarea tabului PROFILE
Intel XDK permite realizarea unei analize a calităţii aplicaţiei realizate. După selectarea tabului PROFILE
aplicaţia va afişa o interfaţe permite lansarea în execuţie a aplicaţiei pe terminal (teminalul este conectat
prin cablul USB). După lansarea în execuţie se va selecta butonul de înregistrare a modului de funcţionare
a aplicaţiei şi se va opera pe terminal aplicaţia cât timp se doreşte. Apoi se va opri înregistrarea şi în
20
fereastra aplicaţiei Intel XDK vor fi afişate reprezentări grafice privind resursele monitorizate: gradul de
utilizare a procesorului, memoria utilizată ş.a..
Utilizarea tabului BUILD
Aplicaţia Intel XDK poate fi folosită pentru realizarea de aplicaţii mobile pentru mai multe platforme. După
selectarea tabului BUILD se va selecta platforma pentru care se crează aplicaţia.
Realizarea formei finale, "livrabile" a aplicaţiei va face obiectul ultimei părţi a cursului.
21
Concluzii...
Intel XDK este un mediu avansat de creare de aplicații mobile. Utilizarea sa eficientă presupune însă
realizarea unor mici aplicații, cât mai variate, dar și crearea unor proiecte tipice, de complexitate mai
mare.
Practic crearea unei aplicații mobile hibride va fi sistematic un exercițiu de programare în JavaScript și
jQuery în care, suplimentar față de aplicațiile web obișnuite, aplicația poate accesa ansamblul de senzori
ai aparatului.
Dar mai trebuie ceva. O idee de aplicație, desigur. Genială dacă se poate.
22
HTML 5
Înainte de a începe realizarea primelor aplicaţii hibride folosind HTML 5, deoarece sunt vizate şi aplicaţiile
care afişează informaţii în limba română, va trebui activată pe calculatorul folosit la realizarea acestora
scrierea în această limbă. Pentru aceasta se va accesa Control Panel / Region and Language / Keyboard
and Languages / Change Keyboards....
Ca urmare pe bara de stare a calculatorului va apărea un selector destinat selectării limbii.

23
Crearea unui fişier HTML 5 minimal

Generalităţi
Un fişier HTML 5 minimal are conţinutul următor:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titlul paginii</title>
<meta name="viewport" content="width=device -width, initial-scale=1">
</head>
<body>
<h1>Prima pagină HTML</h1>
<p>Acest paragraf conţine şi caractere cu diacritice.</p>
</body>
</html>
Prima linie indică faptul că fişierul conţine cod HTML 5.
Aşa cum se poate observa în continuare, un document codificat în HTML 5 conţine doar caractere
obişnuite (ASCII).
În HTML 5 informaţia este conţinută în elemente. Exemple de elemente conţinute în fişierul prezentat:
html, head, body, h1 şi p.
Elementele sunt delimitate folosind marcaje. Un marcaj se formează încadrând numele tipului de element
între paranteze formate din caracterele '<' şi '>'. Marcajele apar de regulă în perechi. La scrierea perechii
unui marcaj, numele tipului de element este precedat de '/'. Exemplu:
<p>Acesta este un paragraf.</p>
Există şi elemente care nu presupun folosire unei perechi de marcaje. De exemplu trecerea la aliniat nou
(br), inserarea unei imagini (img) sau comunicarea spre browser a unor informaţii (meta).
Marcajele pot avea atribute. În exeplul dat marcajul <meta> are un atribut, charset. Valorile atributelor
se încadrează între ghilimele (" ").
În momentul încărcării documentului într-o aplicaţie de vizualizare (un control WebView, în cazul
aplicaţiilor mobile), în fereastra acesteia va apărea doar conţinutul elementului body.
24
Pentru a vizualiza într-o aplicaţie de navigare fişierul în format HTML 5 realizat, acesta trebuie scris
folosind un editor adaptat (Notepad++ şi Sublime Text fiind printre cele mai utilizate) şi apoi salvat, numele
fişerului având extensia .html. Fişierul poate fi deschis în browser-ul implicit fie prin selectarea sa cu un
dublu clic în fereastra aplicaţiei Windows Explorer, fie folosind o opţiune a aplicaţiei folosite la editare.
Rezultat:
Observaţii:
Adresa documentului astfel deschis în aplicaţia de navigare va începe cu file:///...
Titlul documentului (elementul title) apare scris pe bara de titlu a aplicaţiei de navigare.
Elementul h1 este titlul principal şi este implicit scris mai mare. Pentru subtitluri de diferite ranguri se pot
folosi elemente similare: h2, h3, ..., h6.
Textul obişnuit se introduce folosind paragrafe (elemente p).
Pentru a putea folosi diacriticele specifice limbii române, s-a comunicat browser-ului printr-un atribut al
unui element meta setul de caractere utilizat:
Un alt element meta asigură redarea corectă a unei pagini web pe ecranele terminalelor mobile
(telefoane, tablete):
Exemple de afișare a unui site pe ecranul unui telefon fără, respectiv cu <meta name="viewport" ...>:
25
Fără definire viewport Cu definire viewport
Pentru a stiliza documentul realizat se va folosi CSS (eng. Cascading Style Sheets, trad. foi de stiluri în
cascadă), un limbaj de descriere a aspectului şi a dispunerii în fereastra browser-ului a informaţiilor din
documentele codificate în HTML.
Observație: Foile de stiluri permit realizarea şi a altei funcţii esenţiale în lumea site-urilor web, respectiv
adaptarea modului de afişare a informaţiilor la diferitele medii de afişare. Astfel, fără a interveni în fişierul
hipertext, doar folosind facilităţi ale limbajului de descriere a stilurilor se poate realiza afişarea corectă a
unui document codificat în HTML pe un ecran normal, pe ecranul unui telefon sau pe imprimantă.
Descrierea în limbajul CSS a modul de afişare a elementelor dintr-un document HTML se realizează prin
stiluri. Un document HTML poate fi formatat folosindu-se unul sau mai multe fişiere de stiluri, ordinea
acestora determinând rezultatul final. În cazul fişierelor în format HTML care folosesc elemente
prestilizate (de exemplu elementele din Bootstrap sau jQuery Mobile), efectul de cascadă va fi exploatat
pe larg prin definirea într-un fişier de stiluri suplimentar a modificărilor dorite, noul fişier fiind inserat în
documentul HTML după fişierul de stiluri specific framework-ului folosit.
Un stil conţinut într-o foaie de stiluri constă la rândul lui din două părţi: un selector sau un set de selectori
(elemente HTML sau selectori special definiţi) şi un bloc de descriere încadrat între acolade ({}). Exemplu:
p, h3 {font-size: 0.75em;}
26
Ansamblul de stiluri care formează o foaie de stiluri poate fi înregistrat într-un fişier separat având
extensia .css sau inserat în pagină, la început, în head. Se pot însă adăuga blocuri de descriere elementelor
cărora li se adresează folosind atributul style.
Integrarea într-un fişier codificat în HTML a unui fişier conţinând stiluri se realizează folosind elementul
link, ca în exemplul următor:
<link rel="stylesheet" href= "css/main.css">
În cazul inserării foii de stiluri la începutul fişierului hipertext, în head va fi adăugat un element style:
<!DOCTYPE html>
<html>
<head>
<title>George Cosbuc</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* reguli css */
</style>
</head>
În foile de stiluri comentariile sunt încadrate între '/*' şi '*/'.
În cazul în care unui element i se adaugă un atribut style, sintaxa folosită rezultă din exemp lul următor:
<h1 style="color:blue;text-align:center">Titlul paginii</h1>

<p style="color:green">Un paragraf scris cu verde.</p>
Principiile CSS
Un stil dintr-o foaie de stiluri se descrie pe baza schemei următoare:
selectori proprietate valoare
h1, h2 {color:brown; font-family: "Trebuchet MS",Verdana, Tahoma, sans serif;}
proprietate valoare
bloc de descriere
27
Selectori
Selectorii specifică elementele din fişierul hipertext care vor fi afectate de stilul respectiv. Selectorii
folosiţi sunt în primul rând elementele conţinute în fişierul HTML asociat: p, h1 ... h6, body, html etc.. Se
pot declara însă şi selectori suplimentari, aşa cum se va vedea în continuare.
Scrierea selectorilor poate fi complicată, ea depinzând de elementele din pagină vizate.
În funcţie de elementele din fişierul hipertext vizate, selectorii pot fi de mai multe tipuri, astfel:
 Selectori globali: h1, h2, p
Regulile care descriu stilul se vor aplica tuturor elementelor enumerate în lista de selectori: h1, h2 şi p.
După scrierea acestui stil se pot particulariza cele trei elemente prin stiluri suplimentare care le -ar viza
eventual pe fiecare, separat. Datorită efectului de "cascadă", fiecare element dintre cele trei va păstra
toate proprietăţile din blocurile în care este descris, valorile acelor proprietăţi fiind însă cele de la ultima
definire.
 Selectori de tip clasă care apar ca valori ai atributului class folosit în elementele HTML vizate. La
definirea unui stil pentru un astfel de selector numele clasei este precedat de un punct '.'.
Exemplu:
<div class="align-center">
<p id="id_msgBar" class="event listening"><span>debug messages go
HTML here...</span></p>
</div>
 Selectori de tip identificator (id) care permit descrierea stilului folosit la afişarea unui element din
pagină căruia i s-a atribuit un nume unic folosind atributil id. Exemplu:
<div id="continut">
HTML ...
</div>
#continut {
CSS width:960px;
margin:0 auto;
border:1px solid #AAAAAA;
}
28
Observație: Într-un document HTML un nume specificat prin atributul id poate apărea o singură dată, el
indicând un element anume din pagină. Pentru a impune acelaşi stil mai multor elemente din pagină se
foloseşte atributul class, aşa cum s-a arătat.
 Selectori poziţionali. Aceşti selectori permit localizarea unor elemente din documentul hipertext
pe baza poziţiei lor. Exemplu:
nav ul li {background-color: yellow;}
Stilul bazat pe acest selector se aplică elementelor li din fişierul hipertext conţinute în ul, iar ul este
conţinut la rândul lui într-un element nav. Elementele din succesiunea folosită pentru localizarea
elementelor selectate sunt separate printr-un spaţiu.
Noţiuni de HTML 5
Elementele prezentate anterior ( p, h1, h2 etc. ) au rolul de a permite scrierea diferită a unor informaţii
diferite din punct de vedere semantic. Înţelegerea faptului că un element p este un paragraf iar un element
h1 este titlul documentului face inutilă orice dezvoltare a subiectului. Oricine poate indica paragrafele şi
titlurile de diferite nivele dintr-un document.
Pentru a realiza documente hipertext cu conţinuturi diverse, setul de elemente HTML utilizat deja trebuie
însă completat cu alte elemente care permit inserarea într-un document a unor informaţii comune:
imagini, liste, tabele şi, fiind vorba de documente hipertext, a legăturilor.
img
Elementele img se folosesc pentru inserarea în fişierele hipertext a imaginilor. Exemplu:
<img href="imagini/bran12.jpg" alt="Castelul Bran iarna">
Atributul href permite specificarea căii spre fişierul care conţine imaginea. Fişierul referit poate fi în
diverse formate:
JPEG (Joint Photographic Experts Group) având extensia .jpg. Acest format permite memorarea imaginilor
într-un format comprimat.
GIF (Graphics Interchange Format) având extensia .gif. Imaginile în format GIF nu sunt comprimate (includ
reprezentarea tuturor pixelilor care compun imaginea) dar numărul de culori este redus (255). Formatul
permite şi realizarea unor mici animaţii.
29
PNG (Portable Network Graphics) având extensia .png. Imaginile în format .png sunt şi admit impunerea
şi a unui grad de transparenţă (pe lângă componentele Red Green şi Blue, un punct de pe ecran poate
avea setată şi transparenţa - componenta alpha).
Atributul alt specifică un şir de caractere care va fi utilizat dacă imaginea nu poate fi afişată. Este cazul
lipsei fişierului sau în cazul în care browser-ul este configurat astfel încât să nu afişeze imaginile.
Observaţie: Din perspectiva browser-ului, o imagine este un simbol grafic şi este tratată ca orice caracter.
Ea va fi deci afişată în linie cu caracterele care o preced şi o succed. Se spune din acest motiv că img este
un element "inline", spre deosebire de p, h1 etc. care sunt elemente de tip "bloc". Diferenţa dintre
elemente inline şi blocuri este prezentată în imaginea următoare.
<h1>
<p>
<p>
<p>
Element tip "inline" (img) Elemente tip "bloc" (h1, p)
Pentru poziţionarea diferită a imaginilor se va utiliza tot CSS.
Definirea dimensiunilor la care se afişează o imagine poate pune unele probleme. Pentru ecrane mari
practic nu trebuie nimic specificat, imaginea afişându-se la dimensiunea ei normală. Evident trebuie ţinut
cont de acest lucru şi imaginile încărcate pe site trebuie în prealabil prelucrate.
Pentru afişarea imaginilor pe ecrane mici (tablete, telefoane) lăţimile imaginilor trebuie impuse. Pentru
aceasta se vor folosi simultan proprietăţile width şi max-width. Proprietatea width se exprimă de obicei
ca procent din lăţimea spaţiului utilizabil iar max-width se poate exprima în procente sau în pixeli,
mărimea corespunzând cu mărimea normală a imaginii. Astfel, pentru o imagine având lungimea ( width)
de 200px se poate scrie max-width: 100% sau max-width: 200px. Exemplu:
.blLateral img {
max-width: 100%; /* sau max-width: 200px; */
width: 47%; /* scalare automata daca blLateral se ingusteaza */
height: auto; /* Mentine proportiile intre latime si inaltime */
}
Astfel stilizate, imaginile conţinute în blocul specificat vor fi afişate la mărimea normală sau vor fi
redimensionate astfel încât să ocupe 47% din lăţimea disponibilă. Vor putea fi de exemplu afişate câte
două pe o linie, una lângă alta. Dacă fereastra de afişare a browser-ului este mărită astfel încât scalarea
30
ar conduce la imagini mai late decât mărimea normală a imaginii, scalarea nu se mai produce, imaginea
râmânând la această mărime. Altfel spus, scalarea va opera doar "în jos", în sensul micşorării imaginilor
astfel stilizate, dacă blocul blLateral este mai îngust.
Observaţie: Încărcarea imaginilor folosite ca fundal în diferite regiuni ale paginii se realizează prin CSS, nu
prin folosirea elementelor img.
a
Elementele a (eng. anchor) sunt fundamentale în Web deoarece ele materializează noţiunea de
hiperlegătură. Un element a are un atribut, href, care permite specificarea paginii care va fi încărcată.
Exemple de utilizare:
<a href="info.html">informaţii suplimentare ...</a>
Vizitaţi <a href="http://www.louvre.fr/visites-en-ligne">muzeul virtual Luvru</a> şi

descoperiţi...
Observaţie: Dacă pagina referită prin atributul href aparţine aceluiaşi site adresa sa va fi relativă la locaţia
de pe disc a paginii curente. De cele mai multe ori va fi simpla denumire a fişierului .html, deoarece
fişierele .html se pun de regulă în acelaşi director. Dacă este referită o pagină dintr-un alt site, adresa
folosită va avea structura oricărei adrese din Internet respectiv va începe cu specificarea protocolului
(http:), apoi va fi indicat numele site-ului (nume de domeniu, de exemplu www.louvre.fr) după care se va
scrie calea spre fişierul referit. Dacă numele fişierului referit nu apare, se subînţelege că fişierul referit
este index.html.
Frecvent selectarea unei hiperlegături se realizează folosind o imagine. În această situaţie, între marcajele
<a> şi </a> se inserează un element img. Exemplu:
<a href="afisare_cos.php"><img src="cos_mare.gif" alt="Cos"></a>
Protocolul indicat în referinţa spre fişier poate fi http sau https. A doua variantă corespunde accesării unei
pagini securizate. Este în special cazul paginilor magazinelor online. Paginile afişate de aceste magazine
conţin formulare destinate culegerii unor date: articolele cumpărate, identitatea cumpărătorului şi datele
cardului bancar folosit la plata online. Pentru securizarea acestor informaţii (introduse de cumpărător în
formularul conţinut în pagina magazinului online), înaintea trimiterii lor spre site -ul magazinului online
trebuie realizată o criptare a acestora, de unde necesitatea folosirii protocolului https.
31
ul
Elementul ul (eng. unordered list) este folosit pentru inserarea în documente a listelor neordonate. Un
element ul este compus din elemente li, ambele elemente fiind de tip "bloc". Exemplu:
<ul>
<li>Portocale</li>
<li>Banane</li>
<li>Lămâi</li>
</ul>
Pictograma folosită la marcare (bulina) şi chiar modul de dispunere a intrărilor în listă (vertical, ca în
exemplu, sau orizontal, una lângă alta), pot fi impuse folosind reguli CSS.
ol
Elementul ol (eng. ordered list) este destinat inserării în documente a listelor ordonate. Un element ol
conţine elemente li. Exemplu:
<ol>
<li>Cafea</li>
<li>Ceai</li>
<li>Lapte</li>
</ol>
Dacă numerotarea nu începe de la 1 ci de la valoarea n, elementului ol i se va adăuga atributul start.

Exemplu:
<ol start="7">
table
Elementul <table> permite inserarea în documentele hipertext a tabelelor. Din perspectiva aplicaţiilor de
navigare, un tabel este un bloc format din linii (elemente tr, table row). La rândul lor liniile sunt compuse
din celule care pot fi elemente td , în cazul celulelor obişnuite sau th pentru celulele care formează capul
tabelului. Exemplu:
<table>
<tr>
<th>Produs</th>
<th>Pret</th>
<th>Cantitate disponibila</th>
</tr>
<tr>
32
<td>Pantofi Lux</td>
<td>156</td>
<td>243</td>
</tr>
<tr>
<td>Pantofi Carmens</td>
<td>174</td>
<td>189</td>
</tr>
</table>
Conţinutul unei celule dintr-un tabel poate fi o secvenţă de text, ca în exemplul dat, o imagine inserată
folosind un element img sau orice combinaţie din cele două.
Un tabel poate avea şi celule unite. Pentru a indica acest lucru elementele td sau th afectate vor avea
atribute colspan (unire de celule dispuse pe orizontală una lângă alta) şi rowspan (unire de celule dispuse
una sub alta).
Pentru a nu greşi la descriere, în cazul unui tabel având celule unite se recomandă să se pornească de la
o reprezentare grafică a acestuia pe care să se indice celulele care trebuie efectiv descrise, ca în figură:
1 1 1
2 2 2
3 3
4
<table>
<tr>
<td> ... </td> linia 1
<td colspan="2"> ... </td>
<td> ... </td>
</tr>
<tr>
<td rowspan="3"> ... </td>
<td> ... </td>
<td colspan="2"> ... </td>
linia 2
</tr>
<tr>
<td> ... </td>
<td colspan="2" rowspan="2"> ... </td> linia 3
</tr>
<tr>
<td> ... </td> linia 4
</tr>
</table>
33
Observaţie: Dispunerea îngrijită a informaţiei în celulele tabelului va fi realizată folosind CSS.
Elementele div şi span

Codificarea paginilor Web necesită uneori utilizarea unor elemente care nu au o semnificaţie în raport cu
conţinutul pe care îl delimitează ci realizează doar un efect de grupare. Un astfel de grup de elemente va
putea primi folosind CSS un set comun de reguli de afişare. Elementele folosite în astfel de situaţii sunt
div şi span.
div
Un element div este de tip "bloc". El încadrează un ansamblu de elemente cărora trebuie să li se impună
un anumit set de proprietăţi CSS. Un exemplu clasic este blocul care trebuie declarat pentru a centra
conţinutul unei pagini în fereastra browser-ului. Un astfel de bloc va fi primul element inserat în body.
span
Elementul span este de tip "inline". El permite de exemplu delimitarea unei zone dintr-un paragraf care
trebuie afişată altfel decât restul paragrafului.
Exemplu:
<p>Este <span class="important">un lucru bine făcut </span> care va produce în timp
<span class="important">efecte interesante</span>.</p>
Elemente noi, introduse în HTML5

Ansamblul elementelor HTML4 descris anterior este completat în HTML5 cu alte câteva elemente noi, tot
cu semnificaţie bine definită din punct de vedere semantic: main, article, section, header, footer, nav şi
aside. Toate aceste elemente sunt de tip "bloc". Modul lor de utilizare pentru descrierea unei pagini Web
rezultă din imaginea următoare.
34
<header>
<nav class="navsite">
<div class="continut">
<main> <aside>
<article>
<section>
<article>
<section>
<article>
<footer>
article
Un element article conţine un ansamblu de informaţii care are sens şi în afara paginii, deci poate fi copiat
şi folosit în altă parte. Exemple: o postare într-un blog, un eseu, un text care tratează un subiect precizat.
section
Un element section este folosit pentru a grupa un ansamblu de elemente unite semantic. Elementele
unei secţiuni nu au sens în afara zonei în care sunt inserate. Un exemplu ar putea fi o secţiune care
grupează conţinutul efectiv al unei pagini web sau secţiunea care conţine comentariile legate de u n articol
din pagină. În paginile care prezintă produse de exemplu, descrierea unui produs va fi un article iar
comentariile aferente vor fi grupate folosind un element section.
35
header
Elementul header este folosit pentru a delimita zona de cap a paginii. Elementul se foloseşte şi în articole
sau în secţiuni aparţinând paginii cu aceeaşi semnificaţie, respectiv definirea unei zone de cap. Un header
poate conţine imagini, logo-uri şi secvenţe de text, de cele mai multe ori elemente h1.
Notă: Indiferent de poziţia în care apare, un element h indică un titlu. Utilizarea elementelor h, precum
şi a celorlalte marcaje care au un conţinut semantic, nu are legătură atât cu stilizarea cât cu structurarea
corectă a documentului. Aceasta este deosebit de importantă, multe dintre elementele definite în HTML5
fiind destinate de altfel acestui scop. Structurarea corectă produce două efecte:
creează premisele citirii corecte a paginii de către persoanele cu deficienţe de vedere (care folosesc
aplicaţii de navigare speciale sau activează facilităţi specifice existente în browser-ele uzuale) şi
ajută la crearea de către browser a unui model corect al paginii (denumit DOM – DOcument Model).
Paginile pot conţine secvenţe de cod scrise în limbajul JavaScript care realizează navigarea prin DOM,
selectează elementele acestuia şi modifică dinamic unele atribute.
footer
Un element footer este acea zonă de la sfârşitul paginii care conţine informaţii privind autorul paginii.
Uneori footer-ul conţine şi hiperlegături care realizează trimiteri la pagini conexe. Şi elementele article
sau section pot conţine elemente footer.
main
Elementul main al unei pagini Web conţine informaţia principală din pagină, structurată de regulă pe
articole şi secţiuni. O pagină nu poate avea decât un element main. Elementul main nu poate fi continut
în header, nav, aside, footer, article sau section.
nav
Un element nav este destinat navigării. Poate fi vorba de navigarea în site sau navigarea în interiorul
paginilor lungi.
Elementul nav va conţine hiperlegături (elemente a) sau, în cadrul site-urilor complexe, meniuri
derulante. Un element nav poate fi plasat înainte de header, după header sau pe o coloană, lateral.
aside
Un element aside este în mod obligatoriu situat în afara elementului main. El reprezintă o zonă a paginii
al cărei conţinut este doar tangenţial legat de conţinutul zonei main. Un exemplu ar fi zona care conţine
36
reclame ale unor sponsori sau o zonă cu informaţii diverse şi noutăţi. De regulă aceste a apar ca în schema
prezentată, în dreapta (sau în stânga) zonei main sau, în cazul ecranelor mici, sub elementul main.
figure
Elementul figure este folosit pentru a insera o imagine într-un document. Spre deosebire de varianta din
HTML4, în HTML5 figure este de tip "bloc" şi conţine un element img (similar celui din HTML4) şi, opţional,
un element figcaption care permite inserarea după imagine sau înaintea ei a unui text explicativ.
Exemplu:
<figure>
<img src="cosbuc.jpg" alt="George Coșbuc">
<figcaption>George Coșbuc în 1906.</figcaption>
</figure>
Exemplu fundamental:
Se consideră modelul (eng. template) din imagine. Deoarece pentru realizarea şi testarea unui site sunt
necesare blocuri de text, stiliştii web-ului folosesc un text în limba latină cu rolul de text aleator. Acest
text se poate prelua de pe diverse site-uri, unul dintre acestea fiind http://loremipsum.net/.
37
<header>
<nav>
<article>
<aside>
<footer>
Pe modelul site-ului s-au marcat elementele HTML5 care vor fi folosite pentru definirea corectă a structurii
documentului: header, nav, article, aside, footer. Elementul main nu este evidenţiat dar el este cuprins
între nav şi aside.
Observaţie: Elementul aside conţine trei reclame.
Pagina poate fi codificată în HTML astfel:
Începutul, inclusiv head-ul:
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<title>Hotelul Nord</title>
<link rel="icon" type="image/png" href="imagini/logo16x16px.png" />
<link href="stil.css" rel="stylesheet">

</head>
Observaţie: Includerea liniei :
<link rel="icon" type="image/png" href="imagini/logo16x16px.png" />

38
are ca efect afişarea pe bara de titluri a browser-ului, înaintea titlului paginii, a unei mici pictograme.
Aceasta are dimensiunile obligatorii de 16x16 pixeli şi este memorată în fşierul referit, logo16x16px.png.
Linia <link href="stil.css" rel="stylesheet"> ataşează foaia de stiluri conţinută în fişierul stil.css.
Blocul <header>
<body>
<div id="container">
<header class="hprincipal">
<img class="logoheader" src="imagini/logo.png">
</header>
Observaţie: În header se încarcă doar logo-ul (imagini/logo.png). Imaginea mare, reprezentând hotelul
se încarcă în fişierul de stiluri (stil.css) şi se aplică pe fundalul header-ului.
Blocul <nav>
<nav>
<ul>
<li class="activ"><a href="index.html">HOME</a></li>
<li><a href="prezent.html">PREZENTARE</a></li>
<li><a href="prezent.html">ACCES</a></li>
<li><a href="prezent.html">REZERVĂRI</a></li>
</ul>
</nav>
Observaţii:
De obicei listele de adrese din nav sunt marcate ca liste neordonate, ul. Dispunerea pe orizontală şi
stilizarea afişării legăturilor se realizează folosind reguli specifice, continute în stil.css.
Primul element li din ul corespunde legăturii spre pagina curentă, index.html. De regulă legătura spre
pagina curentă se stilizează diferit şi din acest motiv i s-a ataşat o clasă - clasa activ.
Elementul main
<div id="continutPagina"> <!—container pt. main + aside -->

<main>
<article>
<header><h1>Welcome</h1></header>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum
my nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi eni
m ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum
my nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</article>
39
</main>
Elementul main conţine un articol format dintr-un header şi două paragrafe (p).
Elementul aside
<aside>
<article class="stanga">
<header>
<img src="imagini/poza1.png">
<h1>Promo sponsor 1</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, ....</p>
</article>
<article class="mijloc">
<header>
<h1> Promo sponsor 2</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, .....</p>
</article>
<article class="dreapta">
<header>
<h1> Promo sponsor 3</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, .....</p>
</article>
<!—Anulez afişarea pe 3 coloane -->
<div style="clear:both;"> </div>
</aside>
</div> 
Observaţie: Cele trei articole conţinute în aside vor fi astfel stilizate încât să se aşeze unul lângă altul,
formând trei coloane.
Elementul footer
<footer>
<p>© Hotel Nord, 2014</p>
</footer>
</div> 
</body>
</html>
Rezultat:
40
În lipsa stilizării evident că pagina nu prea are nimic entuziasmant. După adăugarea fişierului stil.css, fără
a face vreo altă modificare, pe un ecran normal pagina va arăta astfel:
41
Formulare
Aplicaţiile web presupun afişarea unei interfeţe grafice (Windows), introducere de comenzi sau date de
către utilizatorul acestora şi prelucrarea lor în cadrul aplicaţiilor de pe un server. În cele ce urmează va fi
prezentată codificarea în html a elementelor care compun o interfaţă Windows de bază: casete de text,
butoane de diferite tipuri, controale cu listă etc. destinate introducerii datelor care urmează să fie
prelucrate într-o aplicaţie web.
Elementul form
Elementul form este delimitat prin marcaje <form>… </form> şi serveşte la gruparea controalelor
Windows destinate introducerii de date în cadrul unei aplicaţii web. În cele ce urmează elementul form
va fi denumit şi formular.
Un element form are două atribute obligatorii :
 method defineşte modul în care sunt transmise datele spre server. Atributul poate lua două
valori: method=”post” dacă datele provenite din controalele formularului vor fi citite de aplicaţia
web ca şi fişier standard de intrare (stdin în limbajul C) respectiv method=”get” dacă datele din
42
controalele Windows ale formularului vor fi transmise aplicaţiei web printr-un şir de caractere
adăugat în continuarea adresei componentei aplicaţiei web cerută serverului.
 action indică denumirea componentei software a aplicaţiei web care va prelucra datele trimise.
Această componentă software este lansată în execuţie de aplicaţia de tip server pentru web
(Apache de exemplu).
Pentru scrierea componentelor aplicaţiilor web care prelucrează datele din formulare (şi executate pe
server) în timp s-au dezvoltat diferite limbaje, cele mai răspândite fiind limbajele PHP, PERL şi PYTHON.
Toate aceste limbaje sunt din familia limbajelor interpretate (execuţia instrucţiunilor are loc într-un
interpretor de comenzi).
Deoarece o aplicaţie destinată prelucrării datelor dintr-un formular poate conţine comenzi destinate altor
aplicaţii de pe server, ea are caracteristicile unui script. Din acest motiv în cele ce urmează secvenţele de
cod în care se vor realiza prelucrările datelor din formulare vor fi denumite scripturi.
Exemplu :
<form method=”post” action=”programe/calcul.php”>
Elementul input
Un element input defineşte caracteristicile unui câmp al formularului. Atributele marcajului <input> sunt:
 type=tip - defineşte tipul controlului Windows;

 name=nume - defineşte numele asociat valorii câmpului. În cadrul unui formular acest nume este
unic.
 value=valoare - defineşte conţinutul prestabilit al câmpului;
 size=valoare - defineşte lungimea în caractere a unui control de tip text sau password;
 checked - se foloseşte pentru un buton radio dintr-un grup de butoane sau pentru o casetă de
validare pentru a impune starea selectat ;
 maxlength=m - numărul maxim de caractere acceptate într-un control de tip text sau password.
Pentru modificarea aspectului implicit al unui element input se folosesc stiluri. Se pot astfel defini clase
care pot fi asociate controalelor prin adăugarea atributului class. Formularele prezentate în continuare
vor conţine modificări ale modului normal de afişare a controalelor Windows folosind stiluri.
HTML 5 permite definirea unei mulţimi extinse de tipuri de controale, cele mai des folosite fiind
următoarele: text, submit, button, checkbox, password, file, hidden, image, radio și reset.
Tipul text permite definirea unui control pentru introducerea unui şir de caractere :
<input type=”text” name=”cod_numeric” />
Adăugarea atributului maxlength permite limitarea lungimii şirului de caractere permis.

43
Tipul password (parolă) permite introducerea unei parole. Caracterele introduse nu vor fi afişate, în câmp
apărând doar caractere * :
<input type="password" name="parola" />
Tipul checkbox (casetă de validare) permite desenarea unei casete izolate de validare:
<input type="checkbox" name="clientnou" checked value="da" />
De regulă caseta de validare este inclusă între marcaje <label> ... </label> pentru a ataşa casetei un şir de
caractere.
<label> <input type="checkbox" name="clientnou" value="da" checked /> Client nou </l
abel>
Efectul validării casetei va fi includerea în şirul de caractere trimis spre server a şirului "clientnou=da".
Tipul radio permite descrierea unui grup de butoane radio. Gruparea se realizează prin atribuirea
aceluiaşi nume tuturor controalelor care formează grupul. Pentru a adăuga în dreptul fiecărui buton un
şir de caractere (etichetă) descrierea controlului va fi inclusă între marcaje <label> ... </label>. Exemplu:
<label><input type=”radio” name="semestrul" checked value="0" /> I (octombrie -februa

rie) </label>
<label><input type=”radio” name="semestrul" value="1" /> II (martie-iunie)</label>
Tipul buton submit are ca şi efect transmiterea spre server a valorilor introduse în câmpurile formularului.
Un formular poate conţine mai multe butoane de tip submit. Exemplu:
<input type=”submit” name="gata" value ="OK" />
La apăsarea butonului din exemplu, în şirul de caractere trimis scriptului asociat formularului va fi inclusă
secvenţa "gata=OK".
Exemplu de pagină web care conţine un formular:

44
<html>
<head>
<title>Exemplu</title>
<style>
#login {
margin: 0 0 0 100px;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 300px;
}
#login input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 160px;
padding: 4px 4px 4px 4px;
background-color: #666699;
color:white;
}
#login .caseta1 {
background-image:url("om.jpg");
background-position:top left;
background-repeat:no-repeat;
}
#login .simplu {
}
#login .btn { width:80px; }
#login table {
width: 100%;
border: 2px solid rgb(215,215,215);
border-collapse: collapse;
background-color: #cccccc;
}
#login td {padding:5px; border: 1px solid #ffffff; }
.centrat {text-align:center;}
}
</style>
</head>
<body>
<h1>Formulare</h1>
<div id="login">
<form method="post" action="programe/log.php">
45
<table>
<tr>
<td>Email: </td><td><input type="text" name="eml" class="caseta1" /></td>
</tr>
<tr>
<td>Password:</td><td><input type="password" name="passwd" class="simplu" /></
td>
</tr>
<tr>
<td colspan="2"><label>Remember Me: <input type="checkbox" name="rmbm" checked
="checked" value="true" /></label></td>
</tr>
<tr>
<td colspan="2" class="centrat ="gat"><input type="submit" value="Login" class
="btn" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Pentru a simplifica alinierea informaţiilor din formular, conţinutul acestuia a fost plasat într-un tabel.
Tipul buton reset determină crearea unui buton a cărui acţionare permite utilizatorului să şteargă valorile
din toate câmpurile formularului.
<imput type =”reset” value="Anulare" />
Tipul image permite includerea în formular a unei imagini având la selectare un comportament similar
unui buton de tip submit:
<input type=”image” src="imagini/poza.gif" alt="Validare" />
Tipul hidden permite transmiterea unor informaţii spre server fără ca utilizatorul să le vadă pe ecran. De
regulă câmpurile hidden servesc la realizarea unei sesiuni de lucru. Aceasta presupune înlănţuirea
coerentă a unui ansamblu de pagini, de regulă realizate dinamic de scripturile aplicaţiei web. O astfel de
aplicaţie va memora în atributele value din câmpuri hidden informaţii necesare următorului script lansat
în execuţie ca urmare a apăsării unui buton de tip submit.
Tipul file permite încărcarea unui fişier pe server. Controlul de tip file afişează o casetă de text şi un buton
pe care scrie Browse. După ce se apasă butonul Browse şi se selectează fişierul numele acestuia va fi
automat afişat în caseta de text. Apăsarea butonului de tip submit al formularului determină transferul
fişierului pe server, într-un director temporar. Scriptul asociat formularului va realiza mutarea fişierului
din directorul temporar într-un director al saitului, eventual după o validare în care se verifică tipul şi
dimensiunea fişierului.
46
Exemplu :
<form enctype=”multipart/form-data” action=”prelucrez.php” method=”post”>

<input type=”hidden” name=”MAX_FILE_SIZE” value=”30000”>
<p>Selectati fisierul : <input type=”file” name=”fisier” /></p>
<input type=”submit” value=”Incarcare server”>
</form>
Atributul enctype indică natura informaţiei trimise spre server. Valoarea implicită a acestui parametru
este enctype="application/x-www-form-urlencoded" şi corespunde formularelor obişnuite care trimit
spre server un şir de caractere. În cazul transmiterii unui fişier atributul trebuie schimbat în
enctype="multipart/form-data".
Fişierul astfel transmis poate fi de orice tip. Pe lângă controlul de tip file formularul poate conţine şi alte
controale conţinând diverse informaţii care trebuie trimise împreună cu fişierul.
Elementul textarea
În cazul în care un formular trebuie să permită introducerea unui text mai lung, dispus pe mai multe linii,
se va folosi un element textarea. În acest mod se definesc de exemplu zonele destinate scrierii unor
mesaje, impresii etc. Marcajul <textarea> are trei atribute: name, rows (câte linii) şi cols (câte coloane).
<textarea name=”rezumat” rows=”5” cols=”35”>Rezumatul Dv.</textarea>
Elementul select
Elementul select permite definirea controalelor complexe de tip text plus listă (combo box). Caseta de tip
combobox afişează o valoare. Selectarea acesteia sau a săgeţii din dreapta ei cu mouse -ul va provoca
afişarea listei asociate, vizitatorul paginii putând selecta linia dorită.
Exemplu :
47
Mergem în raionul cu produse

<select name=”raion”>
<option value=”niciunde” selected>(alegeti raionul)
< option value=”alimente”>Produse alimentare
< option value=”bautura”>B ăuturi
< option value=”cosmetice”>Cosmetice
< option value=”menaj”>Articole de menaj
< option value=”imbrac”>Îmbrăcăminte
< option value=”electro”>Articole electrocasnice
< option value=”gradina”>Articole pentru grădinărit
</select>
În exemplul dat, dacă se selectează raionul Produse alimentare, şirul de caractere trimis spre server în
urma apăsării butonului de tip submit va conţine secvenţa "raion= alimente".
În cazul în care trebuie realizat un control de tip listă derulantă, care de regulă permite selectarea mai
multor opţiuni, se va utiliza atributul size care precizează numărul de opţiuni vizibile în cadrul controlului
şi multiple, în cazul în care controlul admite selectare multiplă. Pentru selectarea multiplă se va ţine tasta
"Ctrl" apăsată.
Exemplu:
<p>Ce marcă de maşină ati dori să aveţi (puteti selecta mai multe)?</p>
<p><select name="cars" multiple size=”4”>
<option value="dacia"> Dacia
< option value ="renault"> Renault
< option value ="wv"> Volkswagen
< option value ="audi"> Audi
< option value ="opel"> Opel
< option value ="fiat"> Fiat
< option value ="seat"> Seat
</select> </p>
Atributul size="4" provoacă afişarea pe ecran a 4 dintre opţiunile din listă.

48
Formularele prezentate au atributul method="post". Atributul method="get" oferă posibilitatea lansării

unor scripturi aflate pe servere de căutare, de exemplu Google sau Yahoo.
Exemplu :
http://www.google.ro/search?hl=ro&q=html5+tutorial
<table>
<tr>
<td> Google </td>
<td><form action=”http://www.google.ro/search” method=”get”>
<input type="hidden” value="ro" name="hl" />
<input type="text” size="35" name="q" />
<input type="submit" value="Cauta" /></form>
</td>
</tr>
<tr>
<td> Yahoo </td>
<td><form action="http://www.yahoo.com/search" method="get">
<input type="text" size="35" name="p" />
<input type="submit" value="Cauta" /></form>
</td>
</tr>
</table>
Întrucât şirul de caractere care trebuie trimis diferă pentru serverele de căutare menţionate, este
esenţială transcrierea corectă a formularelor.
Tipuri noi de elemente input introduse de HTML 5

HTML 5 extinde lista elementelor de tip input cu încă 13 tipuri. Utilizarea corectă a acestora uşurează
introducerea şi validarea datelor. În cazul afişării site-ului pe un telefon mobil, browser-ul va afişa tastaturi
adaptate pentru fiecare tip de informaţie. Tipurile specifice HTML 5 sunt search, email, url, tel, number,
range, date, month, week, time, datetime, datetime-local şi color.
Elementele de tip input din HTML 5 pot fi necunoscute unor browsere. În acest caz, browser-ele le vor
considera ca fiind elemente de tip text.
49
search
Controlul de tip search serveşte la iniţierea căutărilor în site. Exemplu:
<input type="search" name="cauta">
Rezultat:
email
Elementele input de tip e-mail permit introducerea adreselor de e-mail. Dacă şirul de caractere nu
respectă formatul unei adrese valide, sub control va fi afişat un mesaj de eroare.
<input type="email" name="email" required>
Dacă marcajul este folosit într-un fişier afişat pe un telefon, primul panou conţinând imaginea tastaturii
afişate pentru introducerea adresei va conţine caracterul '@'.
url
Un control de tip url permite tastarea unei adrese. Exemplu:
<input type="url" name="url" required>
Şi în acest caz tastatura afişată pe telefoane mobile va fi adaptată, conţinând printre altele o tastă .com.
50
tel
Controlul de tip tel permite introducerea unui număr de telefon.
<input type="tel" name="tel" id="tel" required>
Şi în acest caz tastatura afişată pe telefoanele mobile va fi adaptată, astfel:
number
Elementul input de tip number permite introducerea unei valori numerice.
În cazul valorilor numerice există un ansamblu de atribute ( min, max şi step) care permit definirea
limitelor valorii şi o valoare a cărei multiplu trebuie să fie numărul introdus.
<input type="number" min="25" max="31" step="0.5" value="25"

name="marime">
range
Controlul de tip range afişează un cursor cu ajutorul căruia se poate stabili o valoare cuprinsă într-un
interval dat. Exemplu:
<input id="calificare" type="range" min="1" max="100"value="0">
Nivel calificare
51
Date
Un control input de tip date permite selectarea unei date. Valoarea selectată va fi transformată în şir de
caractere.
color
Controlul text de tip color permite alegerea unei culori. Interfaţa afişată pentru selectare depinde de
sistemul de operare. Exemplu:
<input name="culoare" type="color">
CSS 3
Unităti de măsură în CSS
În CSS pentru exprimarea dimensiunilor se folosesc diverse unităţi de măsură: px, pt, pc, %, em, ex, in,
mm, cm. Importanţă practică au însă doar următoarele:
52
px – pixeli (puncte ecran). Exemplu: 14px. Pentru majoritatea aplicaţiilor de navigare, mărimea normală,
implicită a fontului paragrafelor (p) este de 16px.
em – este o unitate adoptată din domeniul tipografiei şi reprezintă mărimea curentă a fontului. De
exemplu 2em înseamnă de două ori mărimea curentă. Raportarea se face permanent la mărimea curentă
a fontului din blocul în care dimensiunea 2em este folosită. Dacă de exemplu pentru elementul html
mărimea este lăsată cea implicită, (16px), pentru body (inclus în html) este impusă de 0.75em (ar fi 12px)
şi pentru paragrafe (p, evident incluse în body) este impusă mărimea 0.875em, mărimea reală în pixeli a
fontului paragrafelor va fi 0.75*0.875*16px=10.5px.
Această unitate este scalabilă. Ea permite modificarea proporţională a mărimii tuturor fonturilor când
cititorul paginii web modifică mărimea fontului de bază folosind facilităţile browser-ului (Ctrl + pentru
zoom+ respectiv Ctrl – pentru zoom -);
rem (root em) – permite raportarea mărimilor fonturilor folosite la o singură mărime de font, respectiv
cea impusă pentru elementul html. Unitatea este introdusă în CSS3.
% - procent din mărimea normală. Se poate folosi în loc de em (100% = 1em) dar se utilizează mai ales la
definirea dimensiunilor blocurilor în care este divizată pagina.
Observaţie: Mărimea normală, implicită a textului pentru majoritatea browser-elor este de 16px. Deci
1em = 16px. Evident, dacă nu se realizează o scalare (zoom+ sau -). Calculând în pixeli şi neglijând efectul
de moştenire, o variantă de exprimare a mărimii în em a fonturilor ar putea fi:
 h1: 1.25em (20 px);
 h2: 1.125em (18 px)
 h3 1em (16 px)
 textul normal (p): 0.875em (14px) sau 0.75em (12 px)
 textul scris mic (subtext, note de picior s.a.): 0.625em (10 px).
Pentru rem se poate gândi şi o variantă mai simplu de utilizat, astfel:

 html: mărimea de referinţă, 62.5% (nescalat înseamnă 10px);
 textul normal (p): 1.2rem sau 1.4rem (fără scalare dimensiunile sunt 12px sau 14px)
 h3: 1.6rem (16 px), etc.
Pentru definirea mărimii fontului se foloseşte proprietatea font-size. Exemple:
html {font-size: 0.625rem;} /* pt. elementul html s-a impus 10px */

h1 {font-size: 2rem;} /* 20 px */
p {font-size: 1.4rem;} /* 14 px */
53
Culori
În CSS culoarea se exprimă prin codul acesteia exprimat în hexazecimal sau folosind expresia RGB(r, v, a).
Codul hexazecimal va fi precedat de '#'. Codul areformatul #rrggbb, valorile componentelor culorii fiind
definite în ordinea roşu (rr), verde (gg) şi albastru (bb). Exemple:
#ff0000 sau color:red sau color:RGB(255,0,0)
#00ff00 sau color: green sau color: RGB(0,255,0)
#0000ff sau color:blue sau color:RGB(0, 0, 255)
#ffff00 sau color: yellow sau color:RGB(255,255,0)
#00ffff sau color: aqua sau color:RGB(0,255,255)
#ff00ff sau color: magenta sau color:RGB(255,0,255)
#000000 sau color:black sau color:RGB(0,0,0)
#ffffff sau color:white sau color:RGB(255,255,255)
Notă: Folosind codificarea prezentată se pot crea 256x256x256 culori distincte.
Exemplu de stilizare a unui elemnt h1:
h1 {font-sixe:1.75rem; color:RGB(192,0,0);}
Codul zecimal (RGB) al unei culori poate fi obţinut şi folosind fereastra standard din Windows.
54
Observaţie: CSS permite şi creare de zone în care culoarea de umplere are un oarecare grad de
transparenţă. Astfel de culori se pot defini folosind espresia RGBA(rrr,ggg,bbb,a). Ultima valoare, a
(prescurtare de la alpha), indică transparenţa şi poate lua valori între 0 (perfect transparent) şi 1 (complet
opac). Exemplu:
h1 {
font-sixe:125em; color:#00FF00;
background-color:RGBA(255,255,255,0.35);
}
Fonturi
Aspectul fontului se defineşte folosind proprietatea font-family. Valorile obişnuite sunt:
 font-family:"Times New Roman", Times, serif
 font-family:Tahoma, Verdana, Arial, sans-serif.
Browser-ul va încerca să aplice fonturile în ordinea dată. În lipsa fonturilor precizate se va folosi unul
dintre fonturile din familia indicată (serif sau sans-serif).
Diferenţa dintre familiile serif şi sans-serif rezultă din figura următoare.
Notă: Setul de fonturi normale poate fi extins prin folosirea unor fonturi din Internet sau adăugate în site.
Se poate accesa colecţia de fonturi a companiei Google (http://www.google.com/fonts). Pentru a folosi
în site o familie de fonturi se parcurg paşii următori:
Se accesează http://www.google.com/fonts şi se alege fontul potrivit. Apoi se apasă butonul Add to

Collection din caseta de prezentare a fontului.
55
Se selectează opţiunea Use (în partea de jos a ferestrei):
În fereastra afişată se parcurg paşii propuşi:
Exemplu: Pentru a folosi familia de fonturi Zeyda (prezentat în imagine) se va adăuga ansamblului de reguli
de stilizare regula suplimentară:
@import url( http://fonts.googleapis.com/css?family=Zeyada);

56
Pentru a folosi noul font la scrierea paragrafelor documentului HTML, elementul p va fi stilizat folosind
regula următoare:
p {font-family: 'Zeyada', cursive;}
Alte proprietăţi legate de fonturi

 font-style poate fi normal, italic sau oblique:
p {font-style:italic;}
 font-weight poate fi normal sau bold.
Ca prim exerciţiu de stilizare a unui document hipertext se propune realizarea unei pagini web conţinând
poezia Numai una, de George Coşbuc.
Rezolvare:
Poezia poate fi descărcată din Internet. Primele două strofe sunt următoarele:
Pe umeri pletele-i curg râu

Mlădie, ca un spic de grâu,
Cu șorțul negru prins în brâu,
O pierd din ochi de dragă.
Și când o văd, îngălbenesc;
Și când n-o văd, mă-mbolnăvesc,
Iar când merg alții de-o pețesc,
Vin popi de mă dezleagă.
La vorbă-n drum, trei ceasuri trec

Ea pleacă, eu mă fac că plec,
Dar stau acolo și-o petrec
Cu ochii cât e zarea.
Așa cum e săracă ea,
Aș vrea s-o știu nevasta mea,
Dar oameni răi din lume rea
Îmi tot închid cărarea.
Pentru codificare se va deschide Notepad++ şi se va tasta conţinutul paginii:

57
<!DOCTYPE html>
<html>
<head>
<title>Numai una!</title>
</head>
<body>
<h1>Numai una!</h1>
<p>De George Coșbuc</p>
<p>Pe umeri pletele-i curg râu
Mlădie, ca un spic de grâu,
Cu șorțul negru prins în brâu,
O pierd din ochi de dragă.
Și când o văd, îngălbenesc;
Și când n-o văd, mă-mbolnăvesc,
Iar când merg alții de-o pețesc,
Vin popi de mă dezleagă.</p>
<p>La vorbă-n drum, trei ceasuri trec
Ea pleacă, eu mă fac că plec,
Dar stau acolo și-o petrec
Cu ochii cât e zarea.
Așa cum e săracă ea,
Aș vrea s-o știu nevasta mea,
Dar oameni răi din lume rea
Îmi tot închid cărarea.</p>
</body>
</html>
După salvare pe disc şi afişare în fereastra browser-ului favorit (se selectează în meniul Run opţiunea
Launch in IE sau alta, în funcţie de browser-ul dorit) se obţine o primă versiune a paginii:
58
Rezultatul nu este tocmai satisfăcător deoarece browser-ul nu ia în considerare apăsarea tastei Enter.
Apăsarea acesteia pentru a trece la linie nouă este deci inutilă.
Totuşi strofele apar în blocuri de text diferite deoarece sunt conţinute în elemente p separate.
Pentru a remedia modul de afişare a versurilor se va introduce după fiecare vers un element br (eng.
break).
Notă: Marcarea unui element br nu necesită o pereche de marcaje. Limbajul HTML de codificare a
documentelor hipertext a fost la un anumit moment modificat astfel încât să fie compatibil cu standardul
XML de înregistrare a informaţiilor structurate, rezultatul fiind standardul de codif icare XHTML. În XML,
deci şi în XHTML nu se acceptă marcaje fără pereche. Pentru marcarea elementelor care nu necesită
folosirea unei perechi de marcaje (ca br, img, meta, link şi multe altele), în XHTML se foloseşte sintaxa
<marcaj />. Deoarece HTML5 a apărut după XHTML, acesta permite folosirea marcajelor XHTML (din
considerente de compatibilitate). Deci elementul break (br) se poate marca scriind fie <br>, fie <br />.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Numai una!</h1><p>De George Coșbuc</p>
<p>Pe umeri pletele-i curg râu <br>Mlădie, ca un spic de grâu, <br>
Cu șorțul negru prins în brâu,<br>O pierd din ochi de dragă.<br>
Și când o văd, îngălbenesc;<br>Și când n -o văd, mă-mbolnăvesc,<br>
Iar când merg alții de-o pețesc,<br>Vin popi de mă dezleagă.</p>
59
<p>La vorbă-n drum, trei ceasuri trec<br>Ea pleacă, eu mă fac că plec,<br>

Dar stau acolo și-o petrec<br>Cu ochii cât e zarea.<br>
Așa cum e săracă ea,<br>Aș vrea s-o știu nevasta mea,<br>
Dar oameni răi din lume rea<br>Îmi tot închid cărarea.</p>
</body>
</html>
Rezultat:
Observaţie: Pe lângă ignorarea apăsării tastei Enter, browser-ul ignoră şi spaţiile consecutive (reţine doar
unul) şi apăsările tastei Tab. Ca urmare, în fereastra aplicaţiei de editare conţinutul unei pagini poate fi
structurat prin indentarea blocurilor de text, ca şi în cazul programelor de calculator. Medii de dezvoltare
avansate pot realiza structurarea paginii automat, ca efect al executării unei comenzi de formatare.
Exemplu, în NetBeans:
60
Limitările specifice limbajului de codificare HTML5 opresc la acest nivel dezvoltarea paginii.
Observaţie: Pagina web afişată este denumită şi pagină nestilizată, deoarece este afişată folosind reguli
de afişare integrate în browser. De fapt ea este stilizată şi anularea stilului implicit înaintea impunerii
propriilor reguli va face obiectul unei activităţi aparte. Aspectul paginii nestilizate poate diferi de la un
browser la altul.
În continuare va trebui să impunem prin stiluri modul de afişare a informaţiei. Fiind vorba de o pagină
izolată, stilurile pot fi inserate la începutul paginii, în head :
<head>
<style>
html {font-size: 62.5%;} /* pt. elementul html s -a impus 10px */
h1 {
font-size: 2rem; /* 20 px */
color:RGB(192,0,0);
font-style: italic;
font-family:Tahoma, Verdana, sans-serif;
}
p {font-size: 1.4rem;} /* 14 px */
p {
font-size: 1.2rem;
font-style: italic;
font-family:Tahoma, Verdana, sans-serif ;
}
</style>
</head>
Rezultat:
61
Dacă stilurile sunt mutate într-un fişier separat denumit stil.css plasat în acelaşi director cu pagina
poezie.html, elementul head va conţine un element link, astfel:
<head>
<link rel="stylesheet" href="stil.css">
</head>
Observaţie: Scrierea regulilor în fişierul de stiluri se realizează de obicei pe mai multe linii, ca în exemplul
anterior. Această scriere permite vizualizarea mai uşoară a diferitelor proprietăţi.
Geometria elementelor tip "bloc"

În continuare se va realiza fişierul .css conţinând stilurile necesare afişării corecte a paginii web create.
Înainte de a începe stilizarea efectivă vor fi evidenţiate regulile de stilizare integrate în browser. Acestea
au făcut de altfel posibilă prima afişare a paginii.
Pentru a vedea dispunerea iniţială a elementelor din documentul realizat se va impune pentru fiecare
dintre acestea o culoare de fundal distinctă.
La realizarea documentului hipertext anterior s-au folosit multe elemente despre care s-a spus în curs că
sunt elemente de tip "bloc". Un element de tip bloc are geometria din imagine.
Conţinut
height
width
În schiţă apare un chenar colorat denumit border. Acesta poate fi impus folosind reguli CSS (tip de linie,
grosime, culoare etc.). Dacă nu s-a realizat acest lucru, chenarul nu va exista. În cazul blocurilor din fişierul
nestilizat chenarul lipseşte.
Spaţiul dintre conţinutul efectiv şi border se numeşte padding. La aplicarea pe fundalul blocului a unei
culori sau a unei imagini, acestea vor ocupa tot spaţiul din interiorul border-ului deci se vor extinde şi
peste padding.
62
Zona exterioară border-ului este denumită margin şi serveşte la distanţarea blocurilor. Dacă două blocuri
se întâlnesc de-a lungul unei laturi, distanţa dintre ele nu va fi suma mărimilor zonelor margin
corespunzând celor două blocuri. Se va reţine doar valoarea maximă, valoarea mică fiind ignorată, ca în
imaginea următoare.
margin1
margin2
margin1
În HTML4 dimensiunile unui bloc sunt definite în principal prin proprietăţile width şi height . Aceste
proprietăţi definesc dimensiunile părţii utile (interioare) ale unui bloc. Pentru a obţine dimensiunea zonei
din pagină ocupată efectiv de un bloc este necesară adăugarea mărimilor celorlalte elemente geometrice
ale blocului (padding, border şi margin).
Având în vedere dificultăţile gestionării locului ocupat de un bloc în pagină în varianta HTML4, în HTML5
s-a introdus o nouă proprietate, box-sizing. Astfel, dacă pentru un bloc se adaugă regula:
box-sizing: border-box;
atunci dimensiunile width şi height vor reprezenta mărimea blocului măsurată pe exteriorul border-ului.
border
height
padding
width
63
În acest caz gestionarea poziţiei şi dimensiunii blocurilor este mai uşoară si mai intuitivă. Proprietatea
box-sizing nu este însă implementată de toate browserele. Pentru a o putea folosi la dimensionarea
tuturor elementelor de tip "bloc" din pagină, la începutul foii de stiluri trebuie adăugat stilul:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Observaţie: Un bloc pentru care nu s-au specificat dimensiuni se va extinde automat astfel încât să ocupe
pe orizontală tot spaţiul disponibil iar pe verticală să conţină elementele pe care fişierul hipertext le
plasează în interiorul lui 1.
Pe lângă width şi height există însă şi alte proprietăţi, utile mai ales în crearea site-urilor adaptabile (eng.
responsive), respectiv min-width, max-width, min-height şi max-height.
 min-width – permite limitarea scăderii lăţimii unui bloc până la o anumită valoare. Se utilizează
când lăţimea acelui bloc, width este exprimată în unităţi relative (em, rem, %) pentru a limita
îngustarea blocului la afişarea pe ecrane mici. Exemplu:
<style>
p {
width: 25%;
min-width:150px;
background-color: brown;
}
</style>
 max-width – permite limitarea creşterii lăţimii unui bloc până la o anumită valoare. Se utilizează
când lăţimea acelui bloc, width este exprimată în unităţi relative (em, rem, %) pentru a limita
creşterea blocului la afişarea pe ecrane mari. Exemplu:
#blocLateral img {
display: block;
width: 47%;
max-width: 128px;
height: auto;
}
Celelalte două proprietăţi, min-height şi max-height operează similar, dar sunt folosite mai rar. Pentru
imagini se foloseşte frecvent height: auto, ceea ce impune scalarea uniformă a acestora dacă lăţimea se
modifică.
1 Cu excepţia blocurilor flotante, aşa cum se va vedea în continuare.

64
Lăţimea chenarelor de încadrare a informaţiei dintr-un bloc (padding, border şi margin) poate fi
specificată printr-o valoare unică (exprimată de cele mai multe ori în pixeli sau %) sau separat. Dacă se
impun valori distincte pentru marginile de pe diferite laturi ale blocului se vor folosi sufixele –top, -right,
-bottom şi -left. Exemplu:
article {
padding: 8px; /* Valoare unică */
margin-top: 32px;
margin-left: 10px;
}
Observaţie: În CSS nu există o proprietate care să determine centrarea pe orizontală a unui bloc în
interiorul spaţiului disponibil. Pentru a realiza acest tip de dispunere se foloseşte proprietatea margin,
astfel:
#container {
margin: 8px auto 8px auto; /* Ordinea: top – right – bottom – left */
}
sau, mai simplu,
#container {
margin: 8px auto;
}
În general, când dimensiunile pentru top - bottom respectiv left – right coincid se pot introduce pentru
margin, border sau padding doar două valori. Prima valoare reprezintă valoarea comună pentru top şi
bottom iar cea de-a doua, valoarea pentru left şi right.
Observaţie: Cadrarea conţinutului unui bloc se realizează folosind proprietatea text-align. Valorile
peosibile ale acesteia sunt: left, right, center şi justify. Exemplu:
h1 {
text-align: center;
}
Definirea aspectului fundalului blocurilor

În CSS pe fundalul unui bloc se poate aplica o culoare, o imagi ne sau ambele. În ultimul caz imaginea este
mai mică decât blocul.
Impunerea unei culori pentru fundalul blocurilor se realizează folosind proprietatea background-color, ca
în exemplul următor:
65
body {background-color:#b0c4de;}
Impunerea unei imagini se realizează folosind proprietatea background-image, astfel:
#head-princ {background-image: url('imagini/peisaj.png');}
Dacă imaginea indicată nu umple complet blocul, aceasta va fi repetată atât pe orizontală cât şi pe
verticală până la umplerea acestuia. Pentru a controla modul de repetare a imaginii de fundal există
proprietatea background-repeat cu valorile posibile:
 repeat-x -repetare doar în direcţia orizontală,
 repeat-y - repetare doar în direcţia verticală şi
 no-repeat.
Exemplu:
.nav-princ {
background-image: url('imagini/bara.png');
background-repeat:repeat-x;
background-color: #CCF0DC;
}
Observaţie: Exemplul precedent este o soluţie de aplicare pe fundal a unui gradient de culoare. În acest
caz imaginea va fi un şir vertical de pixeli a căror culoare variază de la o valoare iniţială până la culoarea
de fundal, efectul fiind cel din imaginea următoare:
Zonă definită prin repetarea imaginii

bara.png
Zonă rămasă neacoperită în care se

vede culoarea de fundal #CCF0DC
Dacă imaginea de fundal nu este repetată (background-repeat: no-repeat) poziţia acesteia în cadrul
blocului este colţul din stânga-sus. Aceasta poate fi modificată folosind proprietatea background-position
împreună cu o pereche de valori din lista următoare:
 left top (background-position:left top;)
 left center;
 left bottom;
 right top;
 right center;
 right bottom;
 center top;
 center center;
66
 center bottom.
Se poate însă preciza şi mai exact poziţia imaginii de fundal folosind pentru background-position o
pereche de valori numerice reprezentând poziţia imaginii faţă de colţul din stânga-sus a blocului. De obicei
poziţia se exprimă în '%' sau în px.
Stilizarea listelor folosite în nav

Pentru navigare în site, HTML5 introduce elementul nav. În cazul site-urilor simple, în nav va fi plasat un
element ul în care fiecare intrare în listă va fi un element a.
Dacă nav afişează elementele pe verticală, într-o coloană alăturată elementului main, atunci stilizarea
presupune doar suprimarea marcatorilor impliciţi (buline negre) şi adaptarea elementelor a. Codul
corespunzător este prezentat în continuare.
nav ul {
list-style-type: none; /* Suprima marcatorii */
}
nav ul li { /* selectorul putea fi nav li */

float: left;
width:70px;
}
Observaţii:
1. Marcatorul implicit pentru un element ul este bulina neagră, plină. Prin proprietatea list-style-type se
poate impune folosirea şi a unui alt tip de marcator, astfel:
 un cerc negru, plin (list-style-type: disc), varianta implicită;
 un cerc gol (list-style-type: circle);
 un pătrat negru (list-style-type: square).
2. O variantă mai estetică este folosirea proprietăţii list-style-image, care permite folosirea unei imagini
în locul marcatorilor obişnuiţi. Exemplu:
ul{
list-style-image:url('../imagini/sageata.png');
padding-left: 1rem;
}
3. Selectorii poziţionali folosiţi (nav ul li) se bazează pe reprezentarea internă a paginii pe care browser-ul
o realizează după citirea acesteia. Această reprezentare este cunoscută sub denumirea de DOM
(Document Object Model) şi cuprinde atât elementele din pagină cât şi raporturile dintre ele .
67
Stilizarea hiperlegăturilor
CSS permite o stilizare diferită a unei hiperlegături, în funcţie de starea acesteia. Pentru a specifica starea
la care se referă un stil, la stilizarea hiperlegăturilor se folosesc pseudoclase. Corespunzător celor patru
stări posibile ale unei legături, pseudoclasele definite în CSS sunt următoarele:
 a:link – pentru selectarea legăturilor nevizitate;
 a:visited – pentru selectarea legături vizitate;
 a:hover – pentru o legătură deasupra căreia se află cursorul mouse-ului şi
 a:active – pentru o legătură în momentul selectării (clic).
Exemplu:
a:link {color:#FF0000;} /* legatura nevizitata */

a:visited {color:#00FF00;} /* legatura vizitata */
a:hover {color:#FF00FF;} /* mouse deasupra legaturii */
a:active {color:#0000FF;} /* mouse apasat */
La scrierea stilurilor pentru hiperlegături pseudoclasele vor fi stilizate în ordine, regulile fiind următoarele:
 stilul pentru a:hover trebuie să fie definit după a:link şi a:visited şi
 silul pentru a:active trebuie să fie definit după a:hover.
Observaţie: La scrierea selectorilor pentru stilizarea legăturilor, calea spre elementele a este nav ul li a.
Deoerece în nav nu există decât o listă ul, la scrierea selectorilor s-a folosit în final varianta simplificată,
nav a.
Stilizarea elementelor conținând mai multe coloane

Într-o pagină web elemente ca main sau aside pot conține la rândul lor mai multe blocuri dispuse unul
lângă altul. Acestea pot fi elemente article sau div. Deoarece trebuie să formeze coloane alăturate, li se
va impune aceeași lățime (width).
Lăţimile blocurilor şi mărimea spaţiilor dintre ele pot fi exprimate în %. Pentru a realiza dispunerea
blocurilor unul lângă altul va fi folosită proprietatea float. În CSS un element de tip "bloc" ocupă o bandă
orizontală egală cu spaţiul disponibil, chiar dacă lăţimea lui a fost limitată prin folosirea proprietăţii width.
Astfel,dacă trei elemente article din main au lăţimile limitate la 32% din spaţiul disponibil, browser-ul le
va plasa unul sub altul. Modificarea dispunerii în acest mod se realizează folosind proprietatea float, cu
valorile posibile left sau right. Astfel primul bloc care are float: left va fi plasat cel mai la stânga, următorul
la dreapta lui şi aşa mai departe, până la ocuparea spaţiului disponibil.
Observaţie: Atributul style folosit pentru un element oarecare din pagină permite stilizarea punctuală a
elementului. Scriind în acest fel nu va mai fi nevoie să se opereze în foaia de stiluri. Exemplu:
<p style="font-style:italic;">Va rugăm să veniti cu calculatorul propriu!</p>

68
După definirea regulilor comune de stilizare pentru cele trei coloane (folosind selectorul main article) se
impun margini separate pentru fiecare dintre cele trei coloane. Pentru aceasta se pot defini clase
suplimentare (de ex. stanga, mijloc şi dreapta), utilizate evident în fişierul hipertext ca valori ale
atributului class folosit în elementele article.
main {
padding: 0.3em;
overflow: hidden;
}
main article {
width: 32%;
padding: 0.5rem;
background-color: #FFFFFF;
border-radius: 5px;
float: left;
}
main .stanga {
margin: 0 0 1% 1%;
}
main .mijloc {
margin: 0 1% 1% 1%;
}
main .dreapta {
margin: 0 1% 1% 0;
}
Important: Prin proprietatea overflow: hidden se forţează extinderea unui bloc astfel încât să conţină
efectiv elementele din interiorul său. Pare o regulă inutilă dar blocurile declarate float (float: left sau
float: right) nu sunt luate în calcul la stabilirea înălţimii blocului care le conţine. Fără proprietatea
float:hidden, blocul main ar fi avut înălţimea de fix 0px deoarece el conţine doar blocuri declarate float
(trei blocuri article având class .stanga, .mijloc respectiv .dreapta).
Stilizarea border-ului
border-ul este chenarul trasat înafara padding-ului. Asesta poate fi configurat folosind proprietăţile
border-style, border-width şi border-color.
 Proprietatea border-style poate lua valoarea none (fără border) sau una dintre valorile de mai jos.
69
 Proprietatea border-width se exprimă de obicei în px şi permite impunerea grosimii liniei folosite

la trasare.
 Proprietatea border-color permite impunerea culorii liniei folosite la trasare.
Pentru a indica valori distincte pentru fiecare dintre laturi, în numele proprietăţilor, după border se vor
intercala denumirile laturilor (top, right, bottom şi left). Exemplu:
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
Dacă se impun toate cele trei proprietăţi şi acestea au aceleaşi valori pentru toate laturile se poate
simplifica definirea border-ului, ca în exemplul următor:
border:5px solid #2AD349;
La scrierea valorilor proprietăţilor se va respecta ordinea border-width border-style border-color.
În exemplul considerat se vor trasa cele două laturi ale border-ului coloanei din mijloc. Stilizarea
elementului aside va fi următoarea:
main article.mijloc {
margin: 0 1% 1% 1%;
border-left-style:dashed;
border-left-width:1px;
border-left-color:#ffcc00;
border-right-style:dashed;
border-right-width:1px;
border-right-color:#ffcc00;
}
Observaţie: Din regulile folosite la descrierea stilurilor elementelor de tip bloc se pot deduce proprietăţile
folosite la impunerea unor valori diferite razelor border-ului unui element, respectiv:
 border-top-right-radius
 border-bottom-right-radius
 border-top-left-radius
 border-bottom-left-radius
70
Poziţionarea elementelor tip "bloc"

Proprietatea display
Această proprietate aplicată unui element poate avea mai multe valori, cele mai importante fiind block,
inline şi none. Proprietatea operează astfel:
 display: block este folosit pentru schimbarea comportamentului elementului astfel stilizat
transformându-l din element de tip "inline" în element de tip "bloc". De obicei această
proprietate este folosită pentru img şi a.
 display: inline este opusul transformării precedente, respectiv transformă un element de tip
"bloc" în element de tip "inline".
 display: none suprimă afişarea elementului astfel stilizat. În acest mod se suprimă afişarea unui
element considerat neimportant în cazul afişării paginii pe ecrane mici (pe ecranele telefoanelor),
dacă acest lucru este permis.
Proprietatea position
Această proprietate se referă la poziţia în cadrul site-ului sau a ferestrei browser-ului în care se afişează
un element de tip "bloc". Evident, pentru a o putea aplica unor elemente "inline" (img, a), acestea trebuie
în prealabil transformate în elemente de tip "bloc" (display: block;).
Valori posibile:
 position: static; este valoarea implicită. Blocurile astfel poziţionate vor fi afişate în pozi ţia lor
firească.
 position: fixed; impune afişarea elementului într-o poziţie fixă din fereastra browser-ului. Poziţia
este definită printr-o pereche de proprietăţi suplimentare, una fiind top sau bottom iar a doua
fiind left sau right. Valorile acestor proprietăţi indică decalarea faţă de laturile referite. Exemplu:
.dreapta_jos {
position: fixed;
right: 0;
bottom: 0;
width: 150px;
}
Elementul căruia i s-a ataşat clasa din exemplu va fi afişat în colţul din dreapta-jos a ferestrei browser-
ului.
 position: relative; impune afişarea elementului într-o poziţie decalată faţă de poziţia în care s-ar
fi afişat în mod normal. Decalarea se indică folosind o pereche de proprietăţi suplimentare, una
fiind top sau bottom iar a doua fiind left sau right. Valorile acestor proprietăţi indică decalarea
faţă de poziţia normală a obiectului. Exemplu:
71
h2.pos_left
{
position:relative;
left:-20px; top: -5px;
}
h2.pos_right
{
position:relative;
left:20px; top: 5px;
}
poziţia normală
left: -20px; left: 20px;

top: -5px; top: 5px;
 position: absolute; impune afişarea elementului într-o poziţie definită faţă de laturile primul
element superior în ierarhie care este poziţionat la rândul său (folosindu-se fie position: relative,
fie position: absolute). Poziţia este definită tot printr-o pereche de proprietăţi suplimentare, una
fiind top sau bottom iar a doua fiind left sau right. Valorile acestor proprietăţi indică decalarea
faţă de laturile elementului superior în ierarhie considerat ca referinţă. Exempl u:
h2 {
position:absolute;
left:100px;
top:60px;
width: 40%;
}
position: absolute;
top: 0;
left: 0;
position: absolute;
bloc exterior: position: relative;
top: 150px;
right: -70px;
position: absolute;
bottom: 10px;
left: 10px;
72
Observaţie: Proprietatea position: relative se poate folosesi în anumite situații doar pentru a conferi unui
bloc statutul de element poziţionat (deci nu se mai impun decalări folosind top, bottom, left sau right!),
urmând să se exploateze în continuare această proprietate la definirea poziţiilor unor blocuri incluse
folosind tot position: absolute.
Proprietatea float
Proprietatea float este folosită pentru dispunerea blocurilor unul lângă altul pentru a forma coloane.
Evident, blocurile care urmează să devină coloane vor trebui să aibă lăţimea (width) calculată
corespunzător.
Pe lângă plasarea blocurilor unul lângă altul, proprietatea float poate fi folosită pentru a putea plasa text
lângă imagini.
Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Phasellus
imperdiet, nulla et dictum interdum,
nisi lorem egestas odio, vitae
scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec
congue eget, auctor vitae massa.
Fusce luctus vestibulum augue ut
float: right;
aliquet. Mauris ante ligula, facilisis
ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
sed
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper
ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed
ornare turpis.
Astfel pentru elementul img din exemplul dat se va folosi stilul:
img { float: right; margin:7px;}
Observaţie: Pentru a plasa alte blocuri sub zona care foloseşte coloane, primul bloc adăugat după ultima
coloană va avea impusă proprietatea clear (clear: both;). Exemplu:
<div class="continut_pagina">
<main>
<article class="text">
<h1>Cine suntem?</h1>
<p>blog post</p>
</article>
</main>
73
<aside>
<section class="anunturi">
<div><p>widget</p></div>
</section>
<section class="evenimente">
<div><p>widget</p></div>
</section>
</aside>
<div style="clear: both;"> Continuare... </div>
</div>
Observaţie: Dacă textul care este scris alături de o imagine poziţionată folosind float se termină înainte
de a se termina afişarea imaginii se poate ajunge în situaţia din imaginea următoare. Se observă că
imaginea trece peste limita de jos a blocului de text deoarece, aşa cum s-a mai menţionat, la stabilirea
înâlţimii unui bloc elementele flotante conţinute în acesta nu sunt luat în calcul.
Text plasat în stânga imaginii

deoarece imaginea este afectată
de proprietatea float: right.
Deoarece este prea puţin text,
imaginea depăşeşte limita de jos a
blocului.
fără overflow
element p conţinând
text şi imagine float: right;
<p><img src="imagini/papagal.jpg" style="float: right;" alt="pasare">Text plasat în

stânga imaginii .......
</p>
Pentru a rezolva această situaţie la stilizarea blocului care conţine textul şi imaginea (elementul p) s-a
introdus proprietatea overflow cu valoarea hidden.
74
<div>
Text plasat în stânga imaginii
deoarece imaginea este afectată
de proprietatea float: right.
Deoarece este prea puţin text,
imaginea depăşeşte limita de jos a
blocului.
cu overflow: hidden
Situaţia de mai sus este evident asemănătoare celor rezolvate anterior, respectiv a cazurilor în care într-
un bloc erau conţinute doar blocuri flotante.
75
Bootstrap
Realizarea rapidă a paginilor web este de neconceput fără utilizarea unui framework care să ofere soluții
de stilizare avansată pentru elementele HTML 5 dar și soluții pentru gestionarea poziționării acestora în
pagină.
Bootstrap este un astfel de framework. Utilizarea sa permite creşterea vitezei şi uşurinţei dezvoltării
site-urilor web "responsive", soluția fiind centrată pe afişarea acestora pe ecranele telefoanelor mobile
(eng. mobile first). În acest sens Bootstrap include un ansamblu extins de elemente pre-stilizate şi de
soluţii "la cheie" pentru o serie de componente complexe din paginile web: bare cu meniuri derulante
adaptabile la dimensiunea ecranului, carusel pentru prezentări de imagini, ş.a.
Bootstrap este uşor de folosit pentru cei care deţin cunoştinţe de HTML5 şi CSS3 şi este compatibil cu
toate browser-ele moderne. Singura deficiență ar fi necesitatea includerii în site a unor fișiere care
însumează circa 260 KB, dar vitezele rețelelor wireless sau chiar a celor folosite în telefonia mobilă sunt
suficient de mari pentru a compensa acest neajuns.
Istoric
Bootstrap a fost dezvoltat în cadrul companiei Twitter, autorii fiind Mark Otto şi Jacob Thornton. Prima
versiune a fost făcută publică în august 2011.
Utilizarea Bootstrap
Pentru a putea folosi Bootstrap la crearea unui site web este necesară descărcarea fişierelor necesare de
pe site-ul aplicaţiei (www.getbootstrap.com) şi includerea lor în directorul site-ului:
Din arhiva descărcată vor fi extrase fişierele bootstrap.min.css şi bootstrap.min.js.

76
O soluţie alternativă este includerea la începutul paginilor web a liniilor necesare accesării online a
fişierelor Bootstrap de pe un server CDN (Content Delivery Network), o soluţie fiind MaxCDN.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/boo

tstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js "></
script>
Crearea unei pagini care foloseşte Bootstrap

Ca machetă de bază pentru paginile web care vor fi realizate în continuare se va folosi următorul cod:
<!DOCTYPE html>
<html>
<head>
<title>Exemplu de site cu Bootstrap</title>
<link rel="stylesheet"href=" css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Titlul paginii</h1>
<p>Lorem ipsum dolor sit amet, eu id ac, quis ac phasellus convallis nunc leo, ti
ncidunt a mauris sed, mi ante mauris et, praesent nibh dolor ultricies vel.</p>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Containere Bootstrap
În Bootstrap se folosesc două tipuri de containere:
a. Containere de dimensiune fixă, pentru care se foloseşte clasa .container (ca în modelul
anterior) și
b. Containere de dimensiune variabilă, în care conţinutul ocupă tot spaţi ul disponibil, declarate
folosind clasa .container-fluid.
Dimensiunile containerelor de lăţime fixă (clasa .container) sunt următoarele:

77
 auto (cât permite ecranul) pentru ecrane având lăţime < 768 px,
 750px pentru ecrane având lăţime ≥ 768 px,
 970 pentru ecrane având lăţime ≥ 992px,
 1170 pentru ecrane având lăţime ≥ 1200px.
Observaţie: Într-o pagină web pot fi folosite mai multe containere. Ele vor fi dispuse unul după altul şi nu
pot fi incluse unul într-altul!
Informaţiile din site sunt conţinute în blocuri de informaţii plasate pe linii (eng. rows). Fiecate bloc ocupă
un anumit număr de coloane (eng. columns) având aceeași lățime. În Bootstrap numărul total de coloane
de pe o linie este fix, 12 coloane.
12 coloane egale Blocul A2
linia A
linia B
linia C
În pagina prezentată pot fi evidenţiate trei linii (A, B şi C, marcate în Bootstrap folosind clasa .row),
macheta fiind cea din imaginea următoare:
78
A3 A4
A1 A2
B1 B2 B3
C1 C2 C3
Linia A conţine blocurile A1 şi A2 (fiecare pe câte 4 coloane) după care urmează A3 şi A4 pe câte două
coloane.
Linia B conţine blocurile B1, B2 şi B3, fiecare pe câte 4 coloane. La fel este împărţită şi linia C.
Dispunerea prezentată corespunde cazului în care site-ul este afişat pe ccrane mari, având cel puţin 992px.
În cazul afişării pe tabletă se poate impune o afişare corespunzând machetei următoare:
A1 A2
A3 A4
B1 B2
B3
C1 C2
Ultima variantă de afişare este ecranul telefonului mobil, caz în care dorim ca blocurile A1, A2, ... C2 vor
fi afişate unul sub altul.
Observație: Pentru ecranele mai mici, elementul C3 nu se mai afișează. Bootstrap permite gestionarea
avansată a dispunerii blocurilor pe diferite mărimi de ecrane, ceea ce include și eventuala ascundere a
unor blocuri.
79
În Bootstrap numărul de coloane ocupat de fiecare bloc de informaţii este definit folosind clase
predefinite, astfel:
Ecrane mici, <768px .col-xs-* Exemplu: .col-xs-4

(bloc afişat pe 4 coloane)
Ecrane mici, ≥ 768px .col-sm-* Exemplu: .col-sm-6

Ecrane medii, ≥ 992px .col-md-* Exemplu: .col-md-4

Ecrane mari, ≥ 1200 px .col-lg-* Exemplu: .col-lg-2

În tabelul dat, caracterul * va fi înlocuit cu un număr reprezentînd numărul de coloane ocupat de coloana
descrisă.
Pentru distribuirea blocurilor de informaţii ca în imaginile prezentate codificarea în HTML va fi

următoarea:
<div class="container-fluid">
<div class="row"> <!—Linia A -->
<div class="col-sm-6 col-md-4">Bloc A1</div>
</div> 
<div class="row"> <!—Linia B -->

<div class="col-sm-6 col-md-4">Bloc B1</div>
</div> 
<div class="row"> <!—Linia C -->

<div class="col-sm-6 col-md-4">Bloc C1</div>
<div class="col-sm-6 col-md-4">Bloc C2</div>
<div class="col-md-4">Bloc C3</div>
</div> 
...
</div> 
Observaţii:
1. În Bootstrap o linie poate conţine maximum 12 coloane. După ocuparea cu blocuri de informaţii
a 12 coloane se trece automat la o linie nouă. Din descrierea dispunerii primelor patru blocuri
80
(A1, A2, A3 şi A4) se observă că pentru ecrane de dimensiuni medii (pentru care se utilizează clasa
col-md-*) se ajunge la 12 coloane doar după afişarea tuturor blocurilor (4 + 4 + 2 + 2) în timp ce
pentru ecrane de mărime mică (descrise folosind col-sm-*) se ajunge la utilizarea celor 12 coloane
după plasarea doar a două blocuri (6 + 6).
2. Descrierea dispunerii informaţiilor nu precizează modul de afişare pe ecrane mici. O descriere
mai completă pentru blocul A1 ar fi:
<div class="col-xs-12 col-md-6 col-lg-4">Bloc A1</div>
Deoarece Bootstrap este conceput ca soluţie pentru afişare în primul rând pe telefoane mobile (eng.
mobile first), descrierea dispunerii blocurilor de informaţii pe acestea nu mai trebuie realizată, pentru
toate blocurile presupunându-se folosirea clasei col-xs-12.
În lipsa indicării dispunerii informaţiei pe ecrane mari (prin folosirea claselor col-lg-*), dispunerea
informaţiilor pe acestea se va realiza folosind tot varianta pentru ecrane medii (col-md-*).
Alte aspecte privind descrierea dispunerii informaţiilor

a. Blocuri incluse în alte blocuri
În Bootstrap un bloc de informaţii poate fi divizat la rândul lui în alte blocuri. Acest lucru se realizează prin
includerea în bloc a unei linii suplimentare (marcată folosind tot clasa .row). Noua linie va avea tot 12
coloane. Exemplu:
Bloc pe linia 1: .col-md-9
Bloc pe linia 2: col-md-4 Bloc pe linia 2: col-md-8
Codul HTML corespunzător va fi:
<div class="row">
<div class="col-md-9"> Blocul de pe linia 1: .col-md-9
<div class="row"> 
<div class="col-xs-6 col-md-4"> Bloc de nivel 2 </div>
<div class="col-xs-6 col-md-8"> Bloc de nivel 2 </div>
</div> 
</div>
</div> 
81
b. Ascunderea blocurilor
Se poate impune ascunderea unui bloc de informaţii pentru anumite mărimi de ecran. Pentru aceasta se
vor folosi clasele .hidden-*, semnificaţiile fiind cele din tabelul următor.
Exrane mici Exrane mici Exrane medii Exrane mari

(≤ 768px) (> 768px) (< 992px) (> 1200px)
.hidden-xs bloc ascuns
.hidden-sm bloc ascuns
.hidden-md bloc ascuns
.hidden-lg bloc ascuns
c. Schimbarea ordinii blocurilor
Se poate impune schimbarea ordinii de afișare a blocurilor pentru anumite mărimi de ecran. Exemplu:
A
5 coloane 7 coloane
B A
B
Afișare pe telefon Afișare pe tabletă
În cazul afișării pe telefon blocurile A și B vor fi dispuse unul sub altul iar în cazul afișării pe tabletă unul
lîngă altul. În fișierul .html ordinea de dispunere va fi A și apoi B. În lipsa unor informații suplimentare,
pe ecranul tabletei vor fi dispuse în aceeași ordine, dar de la stânga la dreapta (A și apoi B).. Pentru a
schimba aceasta se vor folosi clasele .push și .pull, astfel:
<div class="row">
<div class="col-xs-12 col-sm-7 col-sm-push-5">Blocul A</div>
<div class="col-xs-12 col-sm-5 col-sm-pull-7">Blocul B</div>
</div>
Pe ecranul tabletei, pentru plasarea blocului A la dreapta blocului B (de 5 coloane) se colosește clasa
col-sm-push-5. Pentru a deplasa blocul B în fața lui A, (cu 7 coloane spre stânga deci) se folosește clasa
col-sm-pull-7.
82
Componente Bootstrap
Lucrul cu Bootstrap presupune căutarea în pagina cu componente predefinite de la adresa
https://getbootstrap.com/components/ a componentei necesare, copierea codului acesteia (afișat în
pagină în continuarea descrierii componentei) și inserarea acestuia în pagina proprie. Desigur, după
inserare trebuie făcute mici adaptări dar de regulă acestea presupun doar înlocuirea textului inclus
împreună cu componenta preluată și foarte puține intervenții legate de stilizare. Componentele inserate
sunt pre-stilizate, clasele folosite fiind definite în fișierul bootstrap.min.css. Eventualele mici modificări
sau adăugări de stiluri noi vor fi definite într-un fișier de stiluri suplimentar care va fi inserat în pagină
după linia în care se inserează fișierul bootstrap.min.css.
Bara de navigare
Bara de navigare a unui site este de obicei cea mai complexă componentă a acestuia. Pentru a o insera
se va accesa adresa https://getbootstrap.com/components/#navbar și se va copia codul afișat.
Codul preluat este prezentat în continuare.
<nav class="navbar navbar -default">

<div class="container-fluid">

<div class="navbar-header">
<button type="button" class="navbar -toggle collapsed" data-toggle="collapse" d
ata-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a> A
</div>

83
<div class="collapse navbar -collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">
<li class="active"><a href="#"> Link <span class="sr-only">(current)</span></
a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" a
ria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li> B
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form -control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button> C
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" a
ria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
D
</ul>
</li>
</ul>
</div>
</div>
</nav>
Pentru a înțelege mai bine codul copiat, în imaginile următoare se prezintă modul de afișare a barei pe
diferite ecrane. Pentru simulare s-a modificat lățimea ferestrei browser-ului.
Cazul 1 (ecrane mari)
A B C D
84
Bara afișează mai multe componente:
A. Simbolul firmei (Brand) (Nume, dar poate fi și o imagine);

B. O listă de legături: doua legături simple (Link) și o componentă de tip meniu derulant (Dropdown);
C. Un formular (element <form>) cu două controale și
D. Încă o listă conținând o legătură și un meniu derulant cadrată la dreapta.
Observație: Componentele A, B și C de pe bară sunt dispuse una după alta, de la stânga la dreapta. Ultima
listă, D, este cadrată la dreapta prin folosirea clasei .navbar-right.
Cazul 2:
Cazul 3 (ecrane mici):
În ultimul caz se vede că bara afișată păstrează doar componenta A (Brand), celelalte fiind ascunse. Pentru
a le accesa se apasă butonul afișat, aspectul acestuia fiind sugestiv pentru funcția pe care o îndeplinește.
Configurarea unei bare de navigare poate însemna ștergerea zonelor inutile (de exemplu a uneia dintre
listele cu legături și a formularului) și, desigur, editarea legăturii A, Brand.
În zona destinată afişării numelui firmei se poate de exemplu insera o imagine:
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
Exemple:
85
Observație: În pagina https://getbootstrap.com/components/ sunt prezentate și alte variante interesante

de bare de navigare, respectiv barele fixe. Acestea nu vor defila împreună cu restul paginii ci vor fi fixe fie
în partea de sus fie în partea de jos a paginii. Pentru a putea folosi astfel de bare, elementului <body>
trebuie să i se impună o valoare pentru padding-top sau padding-bottom, după caz.
Imagini
În Bootstrap imaginile pot deveni "responsive" prin adăugarea clasei .img-responsive. Exemplu:
<img src="..." class="img -responsive" alt="imagine">

86
Clasa img-responsive adaugă elementului img regulile max-width: 100%;, height: auto; și display: block;
ceea ce conduce la o scalare corectă a acestora la trecerea de la o dimensiune de ecran la alta.
Pentru diferite tipuri de decupare a imaginilor sunt de asemenea, definite clase speciale, astfel:
.img-rounded .img-circle .img-thumbnail
Exemple:
<img src="..." alt="..." class="img-rounded">

<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
Butoane
Pentru stilizarea unor elemente ca <a>, <button> sau <input> Bootstrap folosește un ansamblu de clase
specializate. Astfel, deși sunt elemente diferite, dacă se folosesc aceleași stiluri aspectul lor va fi același:
<a class="btn btn-default" href="#" role="button">Link</a>

<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
Observație: Dacă un element <a> este folosit ca buton, deci selectarea sa va declanșa o activitate (rularea
unei funcții JavaScript) se recomandă să se declare ca atare: role="button".
Clase specifice:
Pentru stilizarea avansată a butoanelor, Bootstrap dispune de o serie de clase. Efectul utilizării acestora
și semnificațiile lor pot fi observate în exemplele următoare:
87
<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
Impunerea dimensiunilor butoanelor
Pentru a impune o anumită dimensiune unui buton, există de asemenea clase specializate. Exemple:
<p> <button type="button" class="btn btn -primary btn-lg">Large button</button>

<button type="button" class="btn btn-default btn-lg">Large button</button> </p>
<p> <button type="button" class="btn btn -primary">Default button</button>

<button type="button" class="btn btn-default">Default button</button> </p>
<p> <button type="button" class="btn btn -primary btn-sm">Small button</button>

<button type="button" class="btn btn-default btn-sm">Small button</button> </p>
<p> <button type="button" class="btn btn-primary btn-xs">Extra small button</button>

<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
Observa: Deoarece Bootstrap este un framework din categoria "mobile first", mărimea normală a
butoanelor este destul de mare.
Utilizarea clasei ".btn-block"
Clasa .btn-block se folosește pentru stilizarea butoanelor care trebuie să se extindă lateral astfel încât să
ocupe tot spațiul disponibil.
88
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button

</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button
</button>
Butoane inactive
Pentru butoanele aflate în stare inactivă în Bootstrap se folosește atributul "disable". Eefectul adăugării
acestui atribut este cel din imagine:
<button type="button" class="btn btn-lg btn-primary"

disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg"
disabled="disabled">Button</button>
Liste
Bootstrap extinde prezentarea informațiilor sub formă de listă prin introducerea componentei " List
group". Un element dintr-un List group poate conține de la simple șiruri de caractere la blocuri <div>
având un conținut oarecare.
Exemplu de List group:

89
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Utilizarea clasei .badge
Elementelor dintr-un List group li se pot adăuga mici notații, cadrate implicit la dreapta:
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Adăugarea uui simbol suplimentar (glyphicon):
<div class="list-group">
<a href="#" class="list-group-item active">Cras justo odio
<span class="glyphicon glyphicon -chevron-right pull-right" aria-hidden="true">
90
</span></a>
<a href="#" class="list-group-item">Dapibus ac facilisis in
</span></a>
<a href="#" class="list-group-item">Morbi leo risus
</span></a>
<a href="#" class="list-group-item">Porta ac consectetur ac
</span></a>
<a href="#" class="list-group-item">Vestibulum at eros
</span></a>
</div>
Observație: În exemplul dat elementul <ul> a fost înlocuit cu un element <div>. De asemenea s-a impus
ca primul element să aparțină clasei .active, efectul fiind utilizarea unui fundal colorat.
Tabele
Pentru stilizarea tabelelor, în Bootstrap se folosește clasa .table. Exemplu fundamental:
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
91
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
Observație: Capul tabelului și corpul acestuia au fost plasate în elemente distincte, <thead> respectiv
<tbody>. Această soluție este avantajoasă pentru scrierea codului JavaScript în cazul tabelelor al căror
conținut este generat dinamic.
Utilizarea clasei table-striped
Frecvent se dorește alternarea culorilor la afișarea liniilor tabelului, ca în exemplul următor. Pentru a
impune acest efect se va folosi pentru elementul <table> clasa .table-stripped.
<table class="table table-striped">

<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
Alte clase folosite pentru stilizarea tabelelor:
a. Clasa .table-bordered impune reprezentarea liniilor despărțitoare dintre celulele tabelului.

Exemplu:
92
b. Clasa table-condensed realizează o reducere a spațiului ocupat de tabel prin reducerea mărimii
valorii pentru proprietatea padding. Exemplu:
Componenta Carousel
Prezentarea unor imagini în site-uri se realizează frecvent folosind un carusel. Bootstrap permite
realizarea rapidă a unei astfel de componente. Exemplu de carusel care afișează repe tat trei imagini:
<div id="exemplu-generic" class="carousel slide" data-ride="carousel">


<ol class="carousel-indicators">
<li data-target="#exemplu-generic" data-slide-to="0" class="active"></li>
<li data-target="# exemplu-generic" data-slide-to="1"></li>
<li data-target="# exemplu-generic" data-slide-to="2"></li>
</ol>


<div class="carousel-inner" role="listbox">
93
<div class="item active">

<img src="..." alt="...">
</div>
<div class="item">
<img src="..." alt="...">
</div>
<div class="item">
<img src="..." alt="...">
</div>
</div>


<a class="left carousel-control" href="#exemplu-generic" role="button" data-slide=
"prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel -control" href="#exemplu-generic" role="button" data-slide
="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Observații: Fiind doar trei imagini, lista de generare a simbolurilor din centru (având clasa .carousel-
indicators) are tot trei elemente. De asemenea, după această listă urmează un ansamblu de trei elemente
<div> care conțin referințele spre imaginile care trebuie afișate. În partea finală sunt incluse două
elemente <a> care conțin cele două simboluri selectabile destinate trecerii pe imaginea următoare sau
pe cea precedentă.
O prezentare mai aprofundată a acestei componente poate fi accesată la adresa

https://getbootstrap.com/javascript/#carousel-examples.
Limbajul LESS
LESS este un limbaj de definire dinamică a foilor de stiluri. Un fișier LESS se compilează folosind o aplicație
specializată, rezultatul fiind un fișier .css. LESS est "open source" și afost proiectat de Alexis Sellier. Ca
orice alt limbaj, LESS folosește variabile, operatori, funcții, etc..
@pale-green-color: #4D926F;
fișier LESS
#header {
color: @pale-green-color;
}
h2 {
color: @pale-green-color;
94
Prin compilarea codului LESS prezentat vor rezulta stilurile următoare:
#header {
color: #4D926F;
} fișier CSS
h2 {
color: #4D926F;
}
Pentru generarea fișierelor .css pornind de la fișiere .less va trebui instalată pe calculator o aplicație
specializată (WinLess de exemplu).
Fișierul bootstrap.min.css folosit în Bootstrap este creat dinamic prin compilarea unui fișier .less. Pentru
modificarea fișierului .less de pornire se poate accesa pagina getbootstrap.com/customize și se pot
schimba valorile elementelor din pagină. Apoi se poate realiza un nou fișier bootstrap.min.css folosind
instrumentele din pagina menționată.

Aplicatii Mobile - Curs1

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Aplicatii Mobile - Curs1

Încărcat de

Drepturi de autor:

Formate disponibile

1

În 2011 Nitobi cedează PhoneGap corporaţiei non-profit Apache Software Foundation.

Cordova sau PhoneGap?

Sunt mai bune aplicațiile native ?

 Se selectează pe terminal pictograma Settings şi în lista afişată se selectează opţiunea About

O variantă alternativă este accesarea paginii de la adresa http://adbdriver.com/downloads/ În pagina

Rezultatul va fi descărcarea pe calculator a unui executabil (AdbDriverInstaller.exe). Cu telefonul conectat

a. Instalarea aplicaţiei Intel XDK

Aplicaţia se descarcă de la adresa: http://xdk.intel.com/ şi se instalează pe calculator. Pentru utilizarea

Instalarea pe telefon a aplicaţiei App Preview

Instalarea unei aplicaţii de simulare

Realizarea unei aplicaţii de tip Hello World folosind Intel

 Se lansează în execuţie Intel XDK;

Principalele fişiere ale aplicației mobile sunt în subdirectorul www.

Alte facilităţi ale mediului de dezvoltare Intel XDK

Utilizarea tabului EMULATE

Utilizarea tabului DEBUG

Debug Lansare în Oprire aplicaţie

Utilizarea tabului PROFILE

Utilizarea tabului BUILD

Ca urmare pe bara de stare a calculatorului va apărea un selector destinat selectării limbii.

Crearea unui fişier HTML 5 minimal

Prima linie indică faptul că fişierul conţine cod HTML 5.

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

Adresa documentului astfel deschis în aplicaţia de navigare va începe cu file:///...

Textul obişnuit se introduce folosind paragrafe (elemente p).

<meta name="viewport" content="width=device -width, initial-scale=1">

Fără definire viewport Cu definire viewport

<link rel="stylesheet" href= "css/main.css">

În foile de stiluri comentariile sunt încadrate între '/*' şi '*/'.

<h1 style="color:blue;text-align:center">Titlul paginii</h1>

h1, h2 {color:brown; font-family: "Trebuchet MS",Verdana, Tahoma, sans serif;}

Scrierea selectorilor poate fi complicată, ea depinzând de elementele din pagină vizate.

 Selectori globali: h1, h2, p

nav ul li {background-color: yellow;}

<img href="imagini/bran12.jpg" alt="Castelul Bran iarna">

Pentru poziţionarea diferită a imaginilor se va utiliza tot CSS.

<a href="info.html">informaţii suplimentare ...</a>

Vizitaţi <a href="http://www.louvre.fr/visites-en-ligne">muzeul virtual Luvru</a> şi

<a href="afisare_cos.php"><img src="cos_mare.gif" alt="Cos"></a>

Dacă numerotarea nu începe de la 1 ci de la valoarea n, elementului ol i se va adăuga atributul start.

Observaţie: Dispunerea îngrijită a informaţiei în celulele tabelului va fi realizată folosind CSS.

Elementele div şi span

Elemente noi, introduse în HTML5

Observaţie: Elementul aside conţine trei reclame.

Pagina poate fi codificată în HTML astfel:

Începutul, inclusiv head-ul:

Observaţie: Includerea liniei :

<link rel="icon" type="image/png" href="imagini/logo16x16px.png" />

<div id="continutPagina"> <!—container pt. main + aside -->

Un element form are două atribute obligatorii :

<form method=”post” action=”programe/calcul.php”>

 type=tip - defineşte tipul controlului Windows;

<input type=”text” name=”cod_numeric” />

Adăugarea atributului maxlength permite limitarea lungimii şirului de caractere permis.

<input type="password" name="parola" />

<input type="checkbox" name="clientnou" checked value="da" />

<label><input type=”radio” name="semestrul" checked value="0" /> I (octombrie -februa

<input type=”submit” name="gata" value ="OK" />

Exemplu de pagină web care conţine un formular:

#login .btn { width:80px; }

#login td {padding:5px; border: 1px solid #ffffff; }

<imput type =”reset” value="Anulare" />

În foile de stiluri comentariile sunt încadrate între '/' şi '/'.

Mergem în raionul cu produse