Colegiul National “Ienăchiță Văcărescu”

Proiect de atestat profesional la

informatica

Tema lucrarii:

FINK

PROFESOR COORDONATOR: ELEV:

Vlad Catalina Bacioiu Bianca-Andreea

CLASA:
XII-A

Tărgoviște 2018
 CUPRINS

1. Alegerea temei……………………………………………….…………………………………………3
2. Aplicatii si soft utilizat………………………………………….……………………………………….4
2.1 Wix.com………………………………………………………………………………………..4
2.2 Limbajul HTML………………………………………………………………………………..7
3. Scurta prezentare a proiectului……………………………………………………………..……….21
4. Cod Sursa……………………………………………………………………………………………..27

Bibliografie………………………………………………………………………………………………………43

2
 1. ALEGEREA TEMEI

Tema proiectului meu este FINK, obiectivul fiind construirea unei platforme online
dedicate bazei de fani si a ascultatorilor Fink.

Cunoscut sub numele de Fink, Fin Greenall este un cantaret, compzitor,

producator si DJ englez. A lansat albumul de debut “Fresh Produce” la inceputul
anilor 2000, continuand cu albumele Biscuits for Breakfast, Sort of Revolution,
Perfect Darkness, Hard Believer. De-a lungul anilor a avut colaborari multiple cu
diferiti artisti precum John Legend, Banks, cat si Amy Winehouse cladindu-si un
renume la nivel international.

Desi comunitatea de fani nu este una foarte mare, intotdeauna a fost unita, iar din
aceasta cauza site-ul meu are scopul de a aduna informatiile legate de trecutul, de
motivatia, de tot ceea ce compune si presupune Fink, oferind informatii legate de
viitoarele concerte, turnee si proiecte ale cantaretului.

3
 2. APLICATII SI SOFT UTILIZAT
2.1 Despre WIX
Cei de la Wix.com ne transmit faptul ca site builder-ul oferit gratuit internautilor este
creat in asa fel incat orice amator sa se poata descurca in crearea unui site web care sa aiba un
adevarat impact asupra vizitatorilor – asta, desigur, datorita noilor posibilitati oferite de HTML5.
Wix, compania cu peste 20 de milioane de utilizatori inscrisi, vrea sa revolutioneze webul prin
noi facilitati si posibilitati, spunand astfel: “With the HTML5 launch Wix users will have an
even greater freedom to create ultra-modern and user-friendly websites that best cater to their
needs”.

Mai mult, Wix a precizat faptul ca, in ultima vreme, s-a lucrat la o serie noua de
templateuri dedicate, in special, micilor afaceri, designerilor, fotografilor dar si corporatiilor. Cu
ajutorul facilitatilor oferite de HTML5, Wix.com permite integrarea de elemente multimedia,
fonturi noi si ofera diferite optiuni de aliniere si asezare in pagina – totul, intr-un final, optimizat
pentru o viteza si senzatie pe care utilizatorul de internet sa nu o uite.

Wix.com prezinta avantajele serviciului vorbind, la modul general, despre noul limbaj de
programare pe care se bazeaza, spunand astfel: “HTML5 provides new technological capabilities
and solutions for products that don’t support Flash” – de aici, se intelege ca, prin comparatie cu
Flash, care ofera de asemenea o suita reala de posibilitati grafice, HTML5 este cu mult superior
si reuseste sa completeze anumite goluri pe care Flash inca nu a reusit sa le repare. Mai mult,
acestia evidentiaza faptul ca majoritatea celor mai cunoscute browsere web sunt capabile sa
citeasca HTML – in contrast cu Flash care cere instalarea unui soft, scazand astfel procentajul de
utilizare la nivel global.

Numărul de template-uri
Wix oferă peste 500 de template-uri frumos concepute, care sunt toate disponibile chiar și
pentru utilizatorii care nu au cumparat un plan premium. Aceste template-uri dispun de cel mai
frumos design printre ultimele aparute in domeniu. Dacă you'are un designer care nu are abilități
pentru a construi un design frumos, template-urile va face o impresie buna cu un aspect lustruit,
profesional.

Din păcate, Wix nu vă permite să schimbati șabloanele, cu excepția cazului în care sunteți
dispus să reporniți întregul proiect. Acest lucru poate fi o problema majora, daca esti deja in
mijlocul unui design și simti nevoia de a schimba un șablon mai bun. În plus, utilizatorii nu au
acces pentru a modifica codurile HTML / CSS care pot limita opțiunile de personalizare.
SEO Friendly În ceea ce privește SEO instrumente de optimizare, Wix nu este cu mult
diferit de competitorii săi. Ai instrumente care vă permit să optimizați funcțiile SEO de bază,
cum ar fi cuvinte cheie si descrieri. În plus, Wix oferă tutoriale utile și instrumente care ajuta la a
analiza datele SEO. Design optimizat si pentru telefoanele mobile.

4
 Lucrul cu fișiere media video imagini doc
Ai de încărca imagini și fișiere video de? fiecare dată când doresti să le folosesti într-o
alta secțiune a site-ului, foarte simplu, foloseste sectiunea (upload - manage files) se pot adauga
imagini, video, fisiere, si multe altele.

Cu Wix, toate acestea, puteți încărca pur și simplu fișierele o dată și se salvveaza în
foldere virtuale pe servere-le lor care se pot reutiliza apoi ori de câte ori este nevoie. În plus, Wix
permite chiar să utilizați fișiere media de la site-urile preferate de social media, cum ar fi
Facebook, twitter, youtube, vimeo, etc.

Aviary Editor programul ajuta utilizatori la îmbunătățirea fotografiei, completă, și

capabilități de editare, inclusiv adăuga chenare, animații, și stabilirea clipurilor video la redarea
automată și multe alte opțiuni.

5
 Se pot cumpara planuri pentru o functionalitate totala, plan best value, ecommerce,
unlimited, combo, connect domain. Wix este axat pe directionarea de servicii si produse catre un
public mai larg. Acesta este motivul pentru care oferă mai multe pachete tarifare, care pot
acoperi o gamă largă de bugete, ceea ce este un lucru bun pentru consumatori.
Opțiunile tarifare sunt după cum urmează
În cazul în care versiunea gratuită nu este pentru tine, acolo sunt 4 planuri diferite de care
poti beneficia. Pentru toate buzunarele, bogat si sarac.
GRATUIT (free) Această opțiune permite incerca serviciul gratuit și fără limite de timp
dupa care te indruma spre un upgrade la serviciile de abonament cu plată lunara sau anuala.
Conectează domeniu ($ 4,08 / month). Acest pachet include 1GB de lățime de bandă și
500 MB de stocare. Ai de asemenea gratuit găzduire, acces la suport premium și capacitatea de a
folosi propriul domeniu.
Combo ($ 8,25 / month): Pachetul Combo, oferindu-vă 2GB lățime de bandă și 3GB
spatiu de stocare. Acest plan elimină, de asemenea anunțurile Wix de pe site și vă oferă gratuit
înregistrarea unui domeniu și un favicon personalizat.
Nelimitat (unlimited) ($ 12,42 / month) După cum sugerează și numele, lățime de bandă
nelimitat, 10GB spațiu de stocare, toate beneficiile planurilor anterioare, o aplicație de forma
builder app, și una de forma booster app.

6
 2.2 Limbajul HTML

HTML (Hypertext Markup Language) este un limbaj creat în scopul de a descrie, în mod
text, formatul paginilor Web; fisierele create în acest limbaj vor fi interpretate de navigatoare,
care vor afisa paginile în forma doritã (cu texte formatate, liste, tabele, formule, imagini,
hiperlegãturi, obiecte multimedia etc.). HTML a apãrut ca o aplicatie ISO standard (apartine
standardului SGML - Standard Generalized Markup Language, specializat pentru hipertext si
adaptat la Web).

Asa cum se poate deduce din numele limbajului, HTML descrie caracteristicile de format ale
elementelor incluse prin procedee de marcare. Acestea pot fi asemãnate intuitiv cu marcajele
folosite în tipografie pentru a indica scrierea unui text cu un anumit tip de caractere. Fiecare
element va fi introdus între douã marcaje ("tags", în limba englezã) - de început si sfârsit -
(uzual) de forma <marcaj> … </marcaj>. Caracterele speciale de delimitare a marcajelor "<",
">" permit deosebirea acestora de textul propriu-zis. De exemplu, pentru textele aldine
(îngrosate), marcajul de început este <B> iar de sfârsit - </B>.

În informaticã, limbajele de marcare sunt foarte convenabile fiindcã comenzile lor pot fi
interpretate simplu. LaTeX-ul, de exemplu, este tot un limbaj de marcare; prin interpretarea
fisierelor .tex descrise în acest limbaj se va genera formatul dorit al documentelor pe diverse
tipuri de sisteme de calcul (în cazul, LaTeX-ului, se obtine uzual format PostScript sau PDF). În
schimb, procesoarele de documente uzuale nu au un limbaj de marcare standardizat, care sã ofere
compatibilitate între diverse tipuri de calculatoare si sisteme de operare. Astfel, se poate spune cã
avantajele aplicãrii limbajelor de marcare constau în portabilitate si flexibilitate: fisierele create
cu ajutorul lor pot fi transferate pe orice tip de sistem, unde vor fi interpretate cu ajutorul unor
programe specifice.

De fapt, procesoarele de texte uzuale folosesc adesea procedee de marcare pentru formatãri
(de exemplu, formatãrile de tip caracter din Word); în acest caz însã, caracterele de control
introduse sunt ascunse iar rezultatul editãrii este direct vizibil ("What You See Is What You
Get"). În schimb, în limbajele de marcare - inclusiv HTML - marcajele sunt introduse în text,
astfel încât acestea sunt exclusiv succesiuni de caractere (litere, cifre, caractere speciale) - fisiere
de tip text.

Referitor la legãtura dintre procesoarele de documente uzuale si limbajul HTML, mai trebuie
mentionat faptul cã ultimele versiuni ale editoarelor de documente oferã facilitãti de salvare în
format HTML - de exemplu, Word, începând cu versiunea Microsoft Office '97. Mai mult, toate
produsele incluse în aceastã gamã dedicatã biroticii (MS Office) oferã compatibilitate cu
formatul HTML.

Procesele de standardizare si de includere a comenzilor de marcare în fisierele HTML permit

navigatoarelor sã citeascã si sã formateze paginile Web, lucru foarte important în conditiile în
care ele contin nu numai texte alb-negru, ci si culori, imagini, hiperlegãturi, diverse obiecte.
Practic, marcajele HTML asigurã controlul asupra modului de afisare a obiectelor
corespunzãtoare în cadrul programelor de vizualizare a documentelor HTML - navigatoarele.
7
 Limbajul HTML a evoluat în versiuni succesive, odatã cu evolutia protocolului HTTP si a
programelor de navigare. Astfel, HTML 1.0 era compatibil cu Mosaic, primul program de
navigare, dar dupã aparitia unor navigatoare noi, a fost necesarã introducerea unui standard
oficial Internet pentru construirea paginilor (HTML 2.0) si extinderea sa cu noi facilitãti: formule
matematice, tabele, moduri avansate de descriere a organizãrii paginilor (începând cu HTML
3.0).

Standardizarea oficialã a limbajului HTML a fost realizatã de consortiul WWW si dezvoltatã

de diversi producãtori de soft (unii dintre acestia urmãresc chiar promovarea navigatoarelor
proprii prin introducerea unor particularitãti în formatele oficiale).

Paginile HTML se pot crea cu orice editor de texte de cãtre utilizatorii care cunosc limbajul
HTML sau, mai simplu, se pot utiliza editoare speciale, în care obiectele se introduc interactiv iar
codul HTML se genereazã automat. Având în vedere cã si în acest caz este utilã cunoasterea
marcajelor generate pentru corectarea eventualelor erori (mai ales în cazul link-urilor), vom
prezenta în continuare entitãtile care se pot introduce în paginile HTML si marcajele
caracteristice acestora

Elementele limbajului HTML

Toate obiectele HTML sunt introduse între marcaje care le definesc; majoritatea acestora
sunt de forma <tip_obiect> (la început) si </tip_obiect> (la sfârsit). Tipul standard al obiectului
poate fi specificat cu majuscule sau minuscule; totusi, se recomandã utilizarea majusculelor
fiindcã astfel marcajele ies în evidentã.

Majoritatea navigatoarelor permit vizualizarea paginii curente în formatul sursã HTML

(forma pe care o interpreteazã pentru afisarea paginii). La interpretare, programele de navigare
ignorã spatiile si <Enter>-urile, aplicând formatarea specificatã.

Existã însã si marcaje cu parametri; acestea au forma <tip_obiect param1=valoare1

param2=valoare2 …>. De exemplu, obiectele de tip imagine sunt introduse cu delimitatorul
<IMG>, care are diversi parametri. Pentru definirea hiperlegãturilor se foloseste marcajul <A>,
care are de asemenea parametri proprii.
Codurile de marcare HTML pot fi clasificate în urmãtoarele categorii:

1. marcaje de bazã - cele care delimiteazã pagina / documentul HTML, titlul acesteia si
corpul paginii;
2. marcaje pentru structurarea documentului - care permit introducerea de subtitluri,
paragrafe, linii de delimitare;
3. marcaje pentru formatarea textului si crearea listelor;
4. marcaje pentru crearea hiperlegãturilor (hyperlinks);

8
 5. marcaje pentru introducerea de obiecte - tabele, formule, imagini sau obiecte multimedia
preluate din fisiere, formulare.

Vom descrie în paragrafele urmãtoare, elementele caracteristice fiecãreia din aceste categorii.

Pentru structurarea si organizarea informatiilor din paginile web se pot utiliza frame-uri
(marcajul <FRAME>), prin care la un moment dat se afiseazã mai multe ferestre continând
fiecare câte o paginã. Introducerea si gestiunea frame-urilor se realizeazã foarte convenabil
folosind editoarele HTML.

Mai mentionãm faptul cã în ultimele versiuni ale limbajului HTML si ale browser-elor s-a
introdus posibilitatea integrãrii, respectiv lansãrii în executie prin navigator, a unor aplicatii.
Acestea sunt scrise în limbajul Java, un limbaj cu caracteristici distribuite si obiectuale, adaptat
programãrii în Web; ele se numesc "applet"-uri si se introduc în sursele HTML cu marcajul
<APP> sau <APPLET> . Ultimele versiuni de editoare HTML permit introducerea interactivã a
applet-urilor Java.

Marcaje de bazã

O paginã Web este delimitatã de marcajele <HTML> si </HTML> care indicã începutul si
finalul documentului si contine:

 zonã de antet cuprinsã între marcajele: <HEAD> … </HEAD> si

 un corp delimitat de marcajele: <BODY> … </BODY>.

Zona de antet este utilizatã de cãtre programele de cãutare pe site-urile web si permite
specificarea titlului paginii care va fi afisat de navigator (nu apare propriu-zis în continutul
paginii).

titlul, introdus în antet, este cuprins între marcajele <TITLE> … </TITLE>.

Astfel, o formã extrem de simplã a unui document HTML ar putea fi cea din urmãtorul
exemplu:

<HTML>
<HEAD> <TITLE>Titlul documentului </TITLE>
</HEAD>
<BODY>Document HTML foarte simplu</BODY>
</HTML>

9
Marcaje pentru structurarea documentului

Programele de navigare asigurã afisarea diferentiatã a unot titluri si subtitluri pentru

sectiunile paginii, dupã criteriile implementate în acest scop la conceperea sa (litere mai mari sau
mai mici, diverse culori, litere aldine sau simple, unul sau mai multe rânduri libere dupã titlu
etc.).

Titlurile de capitole sau subtitlurile sunt definite de marcajele <Hn>, unde n este o cifrã
între 1 si 6 care specificã nivelul titlului (1 este titlul principal iar 6 corespunde celui mai scãzut
nivel). Astfel:
<H1> … </H1> indicã un subtitlu de nivelul 1
…
<H6> … </H6> indicã un subtitlu de nivelul 6.

Pentru separarea zonelor paginii se pot folosi treceri la:

 linie nouã - cu marcajul <BR>, eventual cu desenarea unei linii orizontale - marcajul
<HR>;
 paragraf nou - cu marcajul <P> (se insereazã o linie nouã si eventual se face o indentare).
Marcajul </P> desemneazã sfârsitul de paragraf dar este mai rar folosit (se poate omite).

Marcaje pentru formatarea textului si crearea listelor

Formatãrile uzuale de texte permit scrierea cu caractere:

 aldine - în acest scop pentru acel text se aplicã marcajele <B>… </B>;
 cursive (italice) - pentru acel text se aplicã marcajele <I> … </I>;
 subliniate - textul se introduce între marcajele <U> …</U>.

Unele programe mai vechi de navigare nu permiteau reprezentarea acestor formate; în acest
caz, se aplicau alte moduri de evidentiere a textelor respective (culori, video invers).

Alte tipuri de formatãri de caractere care se pot defini se referã la:

dimensiunea fonturilor si culori - se va utiliza marcajul cu parametri:

<FONT SIZE=x COLOR=y> … </FONT> , care indicã utilizarea unui font de dimensiune x si
culoare y.

 x poate fi un numãr între 1 si 12, indicând mãrimea exactã, sau un numãr cu semn,
indicând mãrimea relativã la dimensiunea curentã.

10
  y poate fi numele unei culori standard, specificatã în limba englezã si între ghilimele, sau,
eventual, descompunerea unei culori în componentele RGB, sub formã hexazecimalã
(câte douã cifre hexa pentru fiecare componentã).

Suplimentar, se pot crea pagini de stiluri, în care sã se defineascã stiluri logice, modificabile
ulterior; în acest scop, se folosesc marcajele <DN> - definitie, <EM> - punere în evidentã,
<STRONG> - accentuare puternicã.

Pentru tastaturile care suportã numai codurile ASCII, caracterele speciale se pot crea folosind
formatul &nume_caracter - de exemplu, &egrave; pentru e. Având în vedere semnificatia
specialã a caracterelor <, > si &, aparitia lor în documente trebuie specificatã sub forma
caracterelor speciale: &lt; , &gt; , respectiv &amp; .

Prezentãm în continuare un exemplu de document HTML, precum si modul în care acesta

este afisat de Netscape Navigator.

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

<html>

<head>
<title>Pagina simpla</title>
</head>

<body>
<p>Acesta este un exemplu simplu de o
pagina HTML. Ea arata cum
pot aparea caractere <strong>bold</strong>, <em>italic</em>,
<font size="5">mai mari</font>,
<font size="1">mai mici</font>,
respectiv insera
o mica imagine
<img src="Handshake8114.gif"
width="20" height="14">.
</p>
</body>

</html>

11
 În figura, se observã cã textul propriu-zis al documentului poate fi delimitat fatã de codurile
de marcare, iar formatarea textului din documentul HTML nu corespunde cu cea afisatã de
programul de vizualizare:

 textul este extins pentru a ocupa întregul ecran si este afisat cu un corp de literã diferit
fatã de sursa HTML;
 terminatorii de linie nu sunt respectati;
 spatiile albe suplimentare din documentul sursã sunt ignorate.

Introducerea obiectelor de tip imagine (marcajul <IMG>) este detaliatã mai jos.

Limbajul HTML permite definirea mai multor tipuri de liste si imbricarea lor (includerea
unor liste în altele), caz în care trebuie verificatã cu atentie corespondenta dintre marcajele de
început si sfârsit pentru fiecare listã. Formatarea listelor la afisarea paginii (introducerea
bulinelor, numerotãrii etc.) se face de cãtre programul de navigare.

Elementele listelor se introduc între marcajele <LI> … </LI> ("list item"). Modul de
aparitie al elementelor depinde de tipul de listã în care sunt incluse (cu buline, numerotate etc.),
determinat de marcajul specific.

Astfel, listele pot fi:

 neordonate (cu buline) - delimitate de marcajele <UL> … </UL> ("unordered list");

elementele lor se afiseazã cu buline;
 ordonate (numerotate) - delimitate de marcajele <OL> … </OL> ("ordered list");
elementele lor se vor numerota;
 de tip meniu - delimitate de marcajele <MENU> … </MENU>; elementele acestor liste
apar într-o reprezentare compactã pe ecran (multicoloanã);
 glosare (liste de definitii) delimitate de marcajele <DL> … </DL> ("definition list");
elementele acestora au câte douã componente, introduse respectiv cu marcajele <DT>
(pentru nume) si <DD> (pentru semnificatia asociatã);
 tabele scurte - create cu marcajul <DIR>.

Listele utilizate cel mai frecvent sunt cele ordonate si neordonate. Prezentãm în continuare un
exemplu simplu de paginã HTML care contine aceste tipuri de liste.

12
<html>

<head>
<title>Pagina cu liste</title>
</head>

<body>

<p>Aceasta pagina exemplifica crearea listelor</p>

<p>Cele mai uzual folosite tipuri de liste sunt:

<ul>
<li>neordonate</li>
<li>ordonate</li>
</ul>

<p>O lista ordonata este o lista numerotata:

<ol>
<li>primul element;</li>
<li>al doilea element...</li>
</ol>

</body>
</html>

Exemple de liste într-o paginã HTML

13
Marcaje pentru crearea hiperlegãturilor

Hiperlegãturile ("hyperlinks") se introduc cu marcajele <A> … </A> ("anchor") aplicate asupra

unui text sau a unei imagini. Ele se pot crea cãtre:

 adrese URL - astfel se asigurã accesul în cadrul procesului de navigare (prin protocoale
specifice), nu numai la paginile web, ci si la diverse servicii Internet;
 fisiere / resurse locale adicã aflate pe acelasi calculator cu pagina creatã - link-uri locale ;
acestea ar putea fi accesate si printr-un URL cu protocolul "file" dar pentru mai multã
simplitate, este suficientã specificarea numelui si cãii fisierului local;
 o zonã din documentul HTML curent - link-uri interne.

În fiecare din aceste cazuri, un click pe textul sau imaginea respectivã va determina activarea
legãturii si afisarea prin intermediul navigatorului a resursei asociate link-ului.

Resursa asociatã unei legãturi este descrisã prin parametrii marcajului <A>:

 HREF - permite asocierea unei adresei URL, crearea unei legãturi locale prin specificarea
numelui si cãii fisierului corespunzãtor sau a unei legãturi interne documentului; este cel
mai important parametru pentru construirea de hiperlegãturi;
 NAME - numele hiperlegãturii sau al zonei dintr-o paginã cãtre care se face referirea, în
cazul unui link intern;
 METHODS - metodele de acces (acest parametru se utilizeazã doar în prelucrãri
speciale).
Astfel, un link local sau cãtre o adresã URL se poate defini pe un text cu: <A
HREF="resursa"> text </A>.

O legãturã internã cãtre o zonã a documentului curent se indicã folosind marcajul <A
NAME="nume-zona">.

Marcaje pentru introducerea de obiecte

Prima versiune de HTML (1.0) nu permitea descrierea tabelelor sau a informatiilor

formatate. Asemenea obiecte trebuiau create formatat si introduse ca obiect deja formatat, cu
marcajele <PRE>, </PRE>. Aceste marcaje indicau navigatorului cã textul inclus trebuia afisat
caracter cu caracter, fãrã vreo interventie de formatare. În versiunile ulterioare ale limbajului
HTML, s-au introdus însã facilitãti elegante de formatare, de includere a tabelelor si a altor
obiecte.

În HTML 3.0 s-au introdus obiectele de tip tabel, formate din linii orizontale si coloane
verticale la a cãror intersectie se formeazã celulele. Acestea pot contine intrãri diverse: texte,
figuri sau chiar alte tabele. Se pot realiza reuniri de celule (de exemplu, pentru titluri mai lungi).
Atributele de formatare a tabelului (aliniere, stilul chenarului si marginilor etc.) se definesc în
proiectarea paginii dar modul lor de afisare va depinde si de programul de navigare.

14
 Tabelele se introduc între marcajele <TABLE> … </TABLE>, cãrora li se pot atasa
(optional) parametrii BORDER si RULES. Un titlu pentru tabel se poate introduce cu marcajul
<CAPTION>. Fiecare coloanã se defineste cu marcajul <COL>, având ca parametru ALIGN -
modul de aliniere a informatiilor din acea coloanã (LEFT, CENTER, RIGHT).

Antetul tabelului se poate indica între marcajele <TH>…</TH> ("Table Header"), pentru
trecerea la o linie nouã se utilizeazã marcajul <TR> ("Table Row") iar celulele individuale se
marcheazã cu <TD> ("Table Data"), eventual cu parametru de aliniere. Se mai pot specifica
alinieri orizontale sau verticale ale celulelor, grupãri de celule etc. Aceste marcaje permit
navigatorului sã afiseze diferentiat informatiile din tabel.

Prezentãm în continuare un exemplu simplu de tabel.

<HTML>
<HEAD>
<TITLE>Pagina cu tabel</TITLE>
</HEAD>
<BODY>
<H1>Aceasta pagina da un exemplu de folosire a unui tabel</H1>
<H3>Vanzari anuale:</H3>
<TABLE> <TH>1996</TH><TH>1997</TH><TH>1998</TH><TR>
<TD>125 milioane lei</TD><TD>160 milioane lei</TD><TD>231 milioane lei</TD>
</TABLE>
</BODY>
</HTML>

Exemplu de tabel într-o paginã HTML

15
Mãrimea liniilor si a coloanelor poate fi controlatã suplimentar prin marcajele <ROWSPAN=x>
si respectiv <COLSPAN=y>, fiecare indicând mãrimea în "celule normale". În plus, se poate
indica trasarea unei margini pentru tabel, prin marcajul <TABLE BORDER>.

Includerea imaginilor se face folosind marcajul <IMG>, care are parametri specifici:

 SRC indicã (dupã semnul '=') URL-ul imaginii, respectiv calea fisierului dacã acesta este
local; uzual, se acceptã fisiere în format GIF sau JPEG;
 ALLIGN controleazã alinierea imaginii fatã de limita inferioarã a textului (TOP,
MIDDLE sau BOTTOM); este un parametru optional;
 ALT furnizeazã textul afisat în locul imaginii dacã utilizatorul dezactiveazã optiunea de
afisare a imaginilor (parametru optional);
 ISMAP este un indicator optional pentru imaginile care sunt hãrti selectabile.

Astfel, introducerea simplã a unei imagini se poate realiza cu <IMG SRC="specificare-

imagine">. Un exemplu de imagine inseratã într-o paginã HTML este prezentat în figura de mai
sus.
Remarcãm faptul cã, utilizând parametri specifici, marcajul <IMG> se poate folosi si pentru
inserarea unor fisiere multimedia, cum ar fi secventele video. Având în vedere cã aceste operatii
se realizeazã mai usor folsind un editor HTML.

Formulare. HTML 1.0 permitea uzual doar transferarea informatiilor de la furnizori cãtre
utilizatori, transferul în sens invers fiind foarte dificil. Odatã cu dezvoltarea Web-ului si mai ales
cu utilizarea sa în scopuri comerciale si în diverse alte domenii, s-a fãcut simtitã necesitatea
comunicãrii în dublu sens pentru preluãri de comenzi, completarea unor fise de înregistrare,
distribuirea de produse soft, administrarea de chestionar, transmiterea unor informatii personale
etc. Acestea au fost motivatiile introducerii formularelor în HTML 2.0.

Formularele contin obiecte de control care permit utilizatorilor introducerea de informatii

prin completarea unor câmpuri specifice (casete de text), prin selectarea sau activarea unor
optiuni (comutatoare, grupuri sau liste de optiuni). Aceste informatii vor fi transmise, dupã
activarea butonului SUBMIT (echivalentã cu tastarea lui <Enter>) proprietarului paginii,
introduse în baze de date dedicate si prelucrate cu aplicatii specifice.

Formularele se introduc prin marcajelele <FORM> ... </FORM> , cãrora li se ataseazã

parametri specifici care definesc metodele de transmitere si tratare a datelor. Un formular poate
contine obiecte de control de diverse tipuri, definite cu marcajul <INPUT> si o varietate de
parametri care stabilesc, pentru obiectul definit, tipul, dimensiunea si modul lui de afisare.
Astfel, se pot crea câmpuri de text (care vor fi completate cu texte de cãtre utilizator), liste de
alternative, comutatoare, grupuri de optiuni, butoane, hãrti active etc.

Datele preluate prin intermediul formularelor se trateazã conform standardului CGI

(Common Gateway Interface) prin intermediul unor programe sau script-uri CGI. În plus, un
asemenea script poate interactiona cu baza de date creatã pentru realizarea unor actiuni specifice
(de exemplu, hãrtile active folosesc script-uri CGI pentru a executa diferite actiuni, în functie de
zona selectatã de utilizator).

16
 Script-urile CGI pot executa si alte operatii decât prelucrarea formularelor, producând iesiri
convenabile. Dacã o hiperlegãturã indicã spre un script CGI, la selectarea legãturii se va executa
script-ul (cu anumite variabile de context care retin diverse informatii de stare). Script-ul va
produce un fisier, de exemplu o paginã web, care va fi interpretat(ã) de navigator. Acest
mecanism permite script-urilor sã genereze, aproape instantaneu, pagini web care sã satisfacã
diverse cerinte ale utilizatorilor, furnizând anumite rãspunsuri asteptate în urma unor actiuni.

Crearea interactivã a formularelor, folosind produse soft specializate în realizarea de pagini

Web este relativ accesibilã pentru utilizatorii familiarizati cu caracteristicile obiectelor de control
specifice aplicatiilor soft dar tratarea ulterioarã a informatiilor transmise necesitã cunostinte de
specialitate.

Numele, simbolurile si procedura de introducere interactivã dintr-un editor HTML (de

exemplu, Microsoft Front Page) a obiectelor de control sunt extrem de apropiate de cele asociate
obiectelor similare din formularele sau rapoartele Microsoft Access. Pentru utilizatorii mai putin
avizati însã, crearea, chiar interactivã, a formularelor este mai dificilã.

17
Sugestii de design

Prezentarea pe Web va fi în acord cu aceste caracteristici ale comportamenului

utilizatorilor de Internet, în elaborarea materialului ţinându-se cont de câteva sugestii
deduse logic:

 Vizitatorul poate fi ajutat să se orienteze/reorienteze prin introducerea unor

organizatori vizuali:

 titluri şi intertitluri din pagină simple şi clare ce permit o orientare rapidă în

conţinut;

 titluri de pagină semnificative ce ajută la recunoaşterea sitului chiar dacă este

minimizat pe task-bar.

 Designer-ul trebuie să pornească de la premisa că vizitatorul nu îşi mai aminteşte

paşii de navigare ce l-au adus în faţa unui anumit material:

 se dovedeşte utilă inserarea în antet a unui „fir al Ariadnei” (de exemplu antetul
acestei pagini) care indică poziţia actuală în succesiunea sau în structura
ierarhică a site-ului web;

 păstrarea culorilor standard pentru legăturile active (albastru pentru link-uri

nevizitate şi roşu închis pentru link-uri vizitate) uşurează orientarea,
recunoaşterea şi structurarea mentală a conţinutului informaţional ce se
parcurge.

 Folosirea unei terminologii standard elimină timpul suplimentar acordat de

vizitator pentru recorelări şi circumscrieri de sens la schimbarea rapidă a
contextului.

18
 3.Scurta prezentare a proiectului
Proiectul isi propune furnizarea de informatii legate de biografia, discografia
si viitoarele proiecte ale artistului.

Harta site-ului:

FINK

HOME ABOUT US VIDEO MUSIC INTERVIEWS

Interview 1 Interview 2

Prima sectiune, Home, corespunde primei pagini; functioneaza drept avizier,

fiind pagina unde vor fi afisate noutatile. La acest moment, pagina promoveaza
noul album Sort of Revolution, fiind insotita de un player ce contine playlist-ul
respectiv. La sfarsitul paginii exista o sectiune destinata persoanelor ce doresc a fi
puse la current cu ultimele modificari, printr-o sectiune Subscribe Now.

Cea de-a doua pagina, About Us, contine informatii legate de viata si activitatea
artistului.

Sectiunea Video se concentreaza pe promovarea unor momente importante din

cursul artistului, inclusiv prezentarea documentarului despre munca sa, cat si
videoclipuri cunoscute.

19
Cea de-a patra sectiune, Music, contine playere cu albumele actuale ale artistului,
cat si un scurt sumar al acestora.

Ultima sectiune, Interviews, contine scurte descrieri ale unor interviuri ale
artistului, continand butoane ce redirectioneaza vizitatorul spre site-urile
respective.

20
21
22
23
24
4.COD SURSA:

<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

<meta charset="utf-8"/>

<title>finkc</title>

<meta name="generator" content="Wix.com Website Builder">

<meta name="fb_admins_meta_tag" content=""/>

<link rel="shortcut icon" href="https://www.wix.com/favicon.ico" type="image/x-

icon"/>

<link rel="apple-touch-icon" href="https://www.wix.com/favicon.ico"

type="image/x-icon"/>

<script type="text/javascript">

var santaBase = 'https://static.parastorage.com/services/santa/1.2744.25';

var clientSideRender = true;

</script>

25
<script defer src="https://static.parastorage.com/services/third-
party/requirejs/2.1.15/require.min.js"></script>

<script defer
src="https://static.parastorage.com/polyfill/v2/polyfill.min.js?features=es2015,es20
16,es2017,fetch&flags=gated&unknown=polyfill&rum=0"></script>

<script defer
src="https://static.parastorage.com/services/santa/1.2744.25/app/main-
r.min.js"></script>

<link rel="preload"
href="https://static.parastorage.com/unpkg/lodash@4.17.4/lodash.min.js"
as="script">

<link rel="preload"
href="https://static.parastorage.com/unpkg/zepto@1.2.0/dist/zepto.min.js"
as="script">

<link rel="preload"
href="https://static.parastorage.com/unpkg/react@15.5.4/dist/react-with-
addons.min.js" as="script">

<link rel="preconnect" href="https://static.wixstatic.com/" crossorigin>

<link rel="preconnect" href="//fonts.googleapis.com" crossorigin>

26
 <meta http-equiv="X-Wix-Renderer-Server" content="app-jvm-16-
241.84.wixprod.net"/>

<meta http-equiv="X-Wix-Meta-Site-Id" content="cd6f7a65-a4f4-4a83-ae90-

8e401b5011f4"/>

<meta http-equiv="X-Wix-Application-Instance-Id" content="9a013425-3e44-

40fa-9618-8dec477d66a7"/>

<meta http-equiv="X-Wix-Published-Version" content="50"/>

<meta http-equiv="etag" content="dbf4357c8866324619c8c047f881de95"/>

<meta property="og:title" content="finkc"/>

<meta property="og:type" content="article"/>

<meta property="og:url" content="https://bacioiubianca22.wixsite.com/finkc"/>

<meta property="og:site_name" content="finkc"/>

<meta name="SKYPE_TOOLBAR"
content="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>

<meta id="wixMobileViewport" name="viewport" content="width=980, user-

scalable=yes"/>

<script>

27
 // BEAT MESSAGE

try {

window.wixBiSession = {

initialTimestamp : Date.now(),

viewerSessionId: 'xxxxxxxx-xxxx-4xxx-yxxx-
xxxxxxxxxxxx'.replace(/[xy]/g, function(c)

{ var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); return

v.toString(16); }

};

(new Image()).src =
'https://frog.wix.com/bt?src=29&evid=3&pn=1&et=1&v=1.2744.25&msid=cd6f7a
65-a4f4-4a83-ae90-8e401b5011f4&vsi=' + wixBiSession.viewerSessionId +

'&url=' +
encodeURIComponent(location.href.replace(/^http(s)?:\/\/(www\.)?/, '')) +

'&isp=0&st=2&ts=0&iss=0&c=' + wixBiSession.initialTimestamp;

} catch (e){}

// BEAT MESSAGE END

</script>

<!-- META DATA -->

<script type="text/javascript">

28
 var serviceTopology = {"serverName":"app-jvm-16-
241.84.wixprod.net","cacheKillerVersion":"1","staticServerUrl":"https://static.para
storage.com/","usersScriptsRoot":"https://static.parastorage.com/services/wix-
users/2.660.0","biServerUrl":"https://frog.wix.com/","userServerUrl":"https://users
.wix.com/","billingServerUrl":"https://premium.wix.com/","mediaRootUrl":"https:
//static.wixstatic.com/","logServerUrl":"https://frog.wix.com/plebs","monitoringSe
rverUrl":"https://TODO/","usersClientApiUrl":"https://users.wix.com/wix-
users","publicStaticBaseUri":"https://static.parastorage.com/services/wix-
public/1.235.0","basePublicUrl":"https://www.wix.com/","postLoginUrl":"https://
www.wix.com/my-
account","postSignUpUrl":"https://www.wix.com/new/account","baseDomain":"w
ix.com","staticMediaUrl":"https://static.wixstatic.com/media","staticAudioUrl":"ht
tps://music.wixstatic.com/mp3","staticDocsUrl":"https://docs.wixstatic.com/ugd","
emailServer":"https://assets.wix.com/common-
services/notification/invoke","blobUrl":"https://static.parastorage.com/wix_blob","
htmlEditorUrl":"http://editor.wix.com/html","siteMembersUrl":"https://users.wix.c
om/wix-sm","scriptsLocationMap":{"dbsm-viewer-
app":"https://static.parastorage.com/services/dbsm-viewer-app/1.213.0","wix-
music-embed":"https://static.parastorage.com/services/wix-music-
embed/1.26.0","santa-resources":"https://static.parastorage.com/services/santa-
resources/1.2.0","wixapps":"https://static.parastorage.com/services/wixapps/2.486.
0","ecommerce":"https://static.parastorage.com/services/ecommerce/1.203.0","dbs
m-editor-app":"https://static.parastorage.com/services/dbsm-editor-
app/1.390.0","langs":"https://static.parastorage.com/services/langs/2.577.0","semi-
native-sdk":"https://static.parastorage.com/services/semi-native-
sdk/1.8.0","automation":"https://static.parastorage.com/services/automation/1.23.0
","web":"https://static.parastorage.com/services/web/2.1229.79","sitemembers":"ht
tps://static.parastorage.com/services/sm-js-sdk/1.31.0","js-wixcode-
sdk":"https://static.parastorage.com/services/js-wixcode-
sdk/1.207.0","tpa":"https://static.parastorage.com/services/tpa/2.1065.0","wix-
form-builder":"https://static.parastorage.com/services/wix-form-
builder/1.185.0","wix-code-platform":"https://static.parastorage.com/services/wix-
code-

29
platform/1.31.0","santa":"https://static.parastorage.com/services/santa/1.2744.25","
skins":"https://static.parastorage.com/services/skins/2.1229.79","core":"https://stati
c.parastorage.com/services/core/2.1229.79","santa-
langs":"https://static.parastorage.com/services/santa-langs/1.1546.0","santa-
members-viewer-app":"https://static.parastorage.com/services/santa-members-
viewer-app/1.47.0","ck-editor":"https://static.parastorage.com/services/ck-
editor/1.87.3","bootstrap":"https://static.parastorage.com/services/bootstrap/2.1229
.79","js-platform-apps-configuration":"https://static.parastorage.com/services/js-
platform-apps-configuration/1.22.0","santa-members-editor-
app":"https://static.parastorage.com/services/santa-members-editor-
app/1.127.0"},"developerMode":false,"productionMode":true,"staticServerFallbac
kUrl":"https://sslstatic.wix.com/","staticVideoUrl":"https://video.wixstatic.com/","
cloudStorageUrl":"https://static.wixstatic.com/","usersDomainUrl":"https://users.w
ix.com/wix-
users","scriptsDomainUrl":"https://static.parastorage.com/","userFilesUrl":"https://
static.parastorage.com/","staticHTMLComponentUrl":"https://bacioiubianca22-
wixsite-
com.filesusr.com/","secured":true,"ecommerceCheckoutUrl":"https://www.safer-
checkout.com/","premiumServerUrl":"https://premium.wix.com/","digitalGoodsSe
rverUrl":"https://dgs.wixapps.net/","wixCloudBaseDomain":"wix-
code.com","mailServiceSuffix":"/_api/common-
services/notification/invoke","staticVideoHeadRequestUrl":"https://storage.google
apis.com/video.wixstatic.com","protectedPageResolverUrl":"https://site-
pages.wix.com/_api/wix-public-html-info-
webapp/resolve_protected_page_urls","mediaUploadServerUrl":"https://files.wix.c
om/","staticServerWixDomainUrl":"https://www.wix.com/_partials","adaptiveVid
eoDomain":"https://files.wix.com/","publicStaticsUrl":"https://static.parastorage.co
m/services/wix-public/1.235.0"};

var santaModels = true;

var rendererModel = {"metaSiteId":"cd6f7a65-a4f4-4a83-ae90-

8e401b5011f4","siteInfo":{"documentType":"UGC","applicationType":"HtmlWeb
","siteId":"9a013425-3e44-40fa-9618-
8dec477d66a7","siteTitleSEO":"finkc"},"clientSpecMap":{"1001":{"type":"public
","applicationId":1001,"appDefinitionId":"1375baa8-8eca-5659-ce9d-
30
455b2009250d","appDefinitionName":"Wix Get
Subscribers","instance":"r5H9Z2grwekp8rmd7Vq8tNKXkKODleO87WFc63I7hH
k.eyJpbnN0YW5jZUlkIjoiN2M4OWRkMjctZGY2ZC00NGYyLTkyOWEtNmQy
NWNhZmFkYWQ2IiwiYXBwRGVmSWQiOiIxMzc1YmFhOC04ZWNhLTU2N
TktY2U5ZC00NTViMjAwOTI1MGQiLCJzaWduRGF0ZSI6IjIwMTgtMDMtMD
NUMjI6MjU6MzkuOTE3WiIsInVpZCI6bnVsbCwiaXBBbmRQb3J0IjoiODQuM
TE3LjE1NS4yNDgvNDUzMDAiLCJ2ZW5kb3JQcm9kdWN0SWQiOm51bGwsI
mRlbW9Nb2RlIjpmYWxzZSwib3JpZ2luSW5zdGFuY2VJZCI6IjA0MmNlZmQ2
LTg2NTctNGIwYS1hMjQxLTM5NTc3NGFlNGNlZCIsImFpZCI6IjAzN2NkMm
Q5LTNlOWEtNDNmMi05M2JiLWM5MGVhNTFmZjMzNCIsImJpVG9rZW4iO
iJiMWU2YTc0Mi03Yjk5LTBlNzEtM2MwYS1lMzY1ZDFhYWNiMjIiLCJzaXRl
T3duZXJJZCI6IjliZTFhOTM3LWUwNWUtNDJlYi1hOWM0LWIxMzY2ODc5Y
Tg2NSJ9","sectionPublished":true,"sectionMobilePublished":false,"sectionSeoEna
bled":true,"widgets":{"1375babd-6f2b-87ed-ff19-
5778602c8b86":{"widgetUrl":"https:\/\/gs.wixapps.net\/statics\/index","widgetId":
"1375babd-6f2b-87ed-ff19-
5778602c8b86","refreshOnWidthChange":true,"mobileUrl":"https:\/\/gs.wixapps.n
et\/statics\/index","published":true,"mobilePublished":true,"seoEnabled":true,"preF
etch":false,"shouldBeStretchedByDefault":false,"shouldBeStretchedByDefaultMo
bile":false,"componentFields":{}}},"appRequirements":{"requireSiteMembers":fal
se},"isWixTPA":true,"installedAtDashboard":false,"permissions":{"revoked":false
},"appFields":{}},"13":{"type":"sitemembers","applicationId":13,"collectionType"
:"Open","collectionFormFace":"Register","collectionExposure":"Public","smcollec
tionId":"2ce245a1-d1b1-4f14-b535-
1c58033ce9ea"},"2":{"type":"appbuilder","applicationId":2,"appDefinitionId":"3d
590cbc-4907-4cc4-b0b1-ddf2c5edf297","instanceId":"d8c7af96-0e0b-4aff-9f79-
c15d287b8d52","state":"Initialized"},"1000":{"type":"public","applicationId":100
0,"appDefinitionId":"13bb5d67-1add-e770-a71f-
001277e17c57","appDefinitionName":"Wix
Music","instance":"o2I_TFj4Bioz4qaO1AcbPtEfgASMUnxDw1ep12Heh_c.eyJpb
nN0YW5jZUlkIjoiMDE2MzFiNzYtOTVhMy00ZmE5LTk5ZTUtODhjYmQxOTk
yYWQ5IiwiYXBwRGVmSWQiOiIxM2JiNWQ2Ny0xYWRkLWU3NzAtYTcxZi
0wMDEyNzdlMTdjNTciLCJzaWduRGF0ZSI6IjIwMTgtMDMtMDNUMjI6MjU6
MzkuOTE3WiIsInVpZCI6bnVsbCwiaXBBbmRQb3J0IjoiODQuMTE3LjE1NS4y
NDgvNDUzMDAiLCJ2ZW5kb3JQcm9kdWN0SWQiOm51bGwsImRlbW9Nb2Rl
31
IjpmYWxzZSwib3JpZ2luSW5zdGFuY2VJZCI6ImQ1MDEzOTI3LWFjYzUtND
YyMC1hNWVjLTM0NjJhMzQ1ZDIzZiIsImFpZCI6IjAzN2NkMmQ5LTNlOWEt
NDNmMi05M2JiLWM5MGVhNTFmZjMzNCIsImJpVG9rZW4iOiJjYzBjNjExM
y0zMTU3LTA1MmEtMzc3NS0wNjhiY2FjOTNiMmQiLCJzaXRlT3duZXJJZCI6
IjliZTFhOTM3LWUwNWUtNDJlYi1hOWM0LWIxMzY2ODc5YTg2NSJ9","sec
tionPublished":true,"sectionMobilePublished":false,"sectionSeoEnabled":true,"wid
gets":{"13bb5dc2-a098-5a74-502b-
6bac84e80b23":{"widgetUrl":"https:\/\/www.wix.com\/_wix-music-player-server-
node\/music-widget","widgetId":"13bb5dc2-a098-5a74-502b-
6bac84e80b23","refreshOnWidthChange":true,"mobileUrl":"https:\/\/www.wix.co
m\/_wix-music-player-server-node\/music-
widget","published":true,"mobilePublished":true,"seoEnabled":true,"preFetch":fals
e,"shouldBeStretchedByDefault":false,"shouldBeStretchedByDefaultMobile":false
,"componentFields":{}}},"appRequirements":{"requireSiteMembers":false},"isWi
xTPA":true,"installedAtDashboard":true,"permissions":{"revoked":false},"appFiel
ds":{}},"1003":{"type":"public","applicationId":1003,"appDefinitionId":"1405ef8
2-0ee0-65fb-88a1-
2f172aa3573c","appDefinitionName":"Bandsintown","instance":"A7xrgQ5WJalx-
d4tM-V7g3LxXVCK9HxfqYUa7fK-
eu4.eyJpbnN0YW5jZUlkIjoiMjY5YzE3MjUtYjQ3Ni00YTYxLWI0YzktYmE0M
WI0Yjk5N2MyIiwiYXBwRGVmSWQiOiIxNDA1ZWY4Mi0wZWUwLTY1ZmIt
ODhhMS0yZjE3MmFhMzU3M2MiLCJzaWduRGF0ZSI6IjIwMTgtMDMtMDN
UMjI6MjU6MzkuOTE4WiIsInVpZCI6bnVsbCwiaXBBbmRQb3J0IjoiODQuMT
E3LjE1NS4yNDgvNDUzMDAiLCJ2ZW5kb3JQcm9kdWN0SWQiOm51bGwsIm
RlbW9Nb2RlIjpmYWxzZSwib3JpZ2luSW5zdGFuY2VJZCI6ImMzOGU1YjI4LT
YxZmQtNGI3NS1hYWRlLThmMzgzODkwYWJjNyIsImFpZCI6IjAzN2NkMmQ
5LTNlOWEtNDNmMi05M2JiLWM5MGVhNTFmZjMzNCIsImJpVG9rZW4iOiJ
lYmYzNmQ0MC0xMDgyLTAwZTItMWE1OS0zNDAxYWZlOTg2MzYiLCJza
XRlT3duZXJJZCI6IjliZTFhOTM3LWUwNWUtNDJlYi1hOWM0LWIxMzY2OD
c5YTg2NSJ9","sectionPublished":true,"sectionMobilePublished":false,"sectionSeo
Enabled":true,"widgets":{"1405f006-9eda-ce95-96c3-
403f44d9e58a":{"widgetUrl":"https:\/\/static.parastorage.com\/services\/bandsinto
wn\/1.49.0\/main\/index.html","widgetId":"1405f006-9eda-ce95-96c3-
403f44d9e58a","refreshOnWidthChange":true,"mobileUrl":"https:\/\/static.parastor
age.com\/services\/bandsintown\/1.49.0\/main\/index.html","published":true,"mobi
32
lePublished":true,"seoEnabled":true,"preFetch":false,"shouldBeStretchedByDefaul
t":false,"shouldBeStretchedByDefaultMobile":false,"componentFields":{}}},"app
Requirements":{"requireSiteMembers":false},"isWixTPA":true,"installedAtDashb
oard":false,"permissions":{"revoked":true},"appFields":{}}},"premiumFeatures":[
],"geo":"ROU","languageCode":"en","previewMode":false,"userId":"9be1a937-
e05e-42eb-a9c4-
b1366879a865","siteMetaData":{"preloader":{"uri":"","enabled":false},"adaptive
MobileOn":true,"quickActions":{"socialLinks":[],"colorScheme":"dark","configur
ation":{"quickActionsMenuEnabled":false,"navigationMenuEnabled":true,"phone
Enabled":false,"emailEnabled":false,"addressEnabled":false,"socialLinksEnabled":
false}},"contactInfo":{"companyName":"","phone":"","fax":"","email":"","address
":""}},"runningExperiments":{"sv_fullstory":"new","appMarketCache":"new","sv
_newFonts2017":"new","selectiveWixapps":"new","sv_ampLinkTag":"new","sv_t
witterMetaTags":"new","sv_mobileBgFixed":"new","gradualReorderOnSave":"ne
w","ajaxForBI":"new","sv_splitRouterUrls":"new","selectiveDialogs":"new","unes
capeHeadTags":"old","checkRenderTime":"new","unloadBI":"new","sv_fixedMob
ileHeader":"new","sv_oldBlogRemoveOnSave":"new","sv_tpaReloadUnresponsiv
eIframe":"new","sv_blogSocialCounters":"new","enableNewWixAds":"new","sv_
batchedImageLoader":"new","se_proGalleryBGDataFixer":"new","sv_qabUnhide"
:"new","sv_inlineExternalStyles":"new","sv_selectiveWixAds":"new","importScri
ptsOpt":"new","sv_mobileBG":"new","sv_blogAuthorAsALink":"new","sv_mobil
eSemantics":"new","sv_persistentMobilePresets":"new","wixCodeNoIframe":"new
","selectiveDownload":"new","sv_tpaAddChatApp":"new","sv_initialValidationAf
terAutoSaveApply":"new","prefetchComps":"new","sv_permissionInfoUpdateOnF
irstSave":"new","sv_fullPartialSave":"new","sv_horizontalContactFormSkin":"ne
w","platformFetchScripts":"new","displayWixAdsNewVersion":"old","sv_contact
FormEmailSecurityFix":"new","sv_browserLangFix":"new","sv_useMobileTightL
ayout":"new","vsiCoin":"new","xsrfHeaderOnPostRequests":"new","sv_mobileSp
achtelPattern":"new","sv_unpackTextMeasureByMinHeight":"new","sv_bookingI
nstallScript":"new","sv_requireSplitError":"new","sv_tpaFilterSubSections":"new"
},"urlFormatModel":{"format":"slash","forbiddenPageUriSEOs":["app","apps","_a
pi","robots.txt","sitemap.xml","feed.xml","sites"],"pageIdToResolvedUriSEO":{}}
,"passwordProtectedPages":[],"useSandboxInHTMLComp":true,"siteMediaToken"
:"eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhcHA6MzQ2NjQ5MDcwMDI5NzIwNiIsIn
N1YiI6InVzZXI6OWJlMWE5MzctZTA1ZS00MmViLWE5YzQtYjEzNjY4Nzlh
33
ODY1IiwiYXVkIjoidXJuOnNlcnZpY2U6ZmlsZS51cGxvYWQiLCJleHAiOjE1M
jA3MjA3MzksImlhdCI6MTUyMDExNTkzOSwianRpIjoiT1dtVVdmeV9UeXBD
bnhiLXp1TnVyZyJ9.pM89wCBrqGLQNNe5jxORveSONwhk1EGC64HSfoBCBn
U","pagesPlatformApplications":{}};

var publicModel =
{"domain":"wixsite.com","externalBaseUrl":"https:\/\/bacioiubianca22.wixsite.co
m\/finkc","unicodeExternalBaseUrl":"https:\/\/bacioiubianca22.wixsite.com\/finkc"
,"pageList":{"pages":[{"pageId":"b99uv","title":"ABOUT
US","pageUriSEO":"about-
us","pageJsonFileName":"9be1a9_e28121cc08018a7f9ab64d2b3cf0b44d_48.json"
},{"pageId":"pk1oc","title":"VIDEO","pageUriSEO":"video","pageJsonFileName"
:"9be1a9_765984be82b5a428421106ed1f0295e2_48.json"},{"pageId":"i2e5m","tit
le":"MUSIC","pageUriSEO":"music","pageJsonFileName":"9be1a9_768d0b66599
ebadb6f33e212601822f8_48.json"},{"pageId":"umm39","title":"INTERVIEWS","
pageUriSEO":"blank","pageJsonFileName":"9be1a9_d001762ffcae7c904d936ba3
69d18f88_49.json"},{"pageId":"c1dmp","title":"HOME","pageUriSEO":"home","
pageJsonFileName":"9be1a9_4e55a91a88986fcc797ef3203ebae588_50.json"}],"m
ainPageId":"c1dmp","masterPageJsonFileName":"9be1a9_d72d459ce82975632efc
98a01aaf5efd_49.json","topology":[{"baseUrl":"https:\/\/static.wixstatic.com\/","p
arts":"sites\/{filename}.z?v=3"},{"baseUrl":"https:\/\/staticorigin.wixstatic.com\/",
"parts":"sites\/{filename}.z?v=3"},{"baseUrl":"https:\/\/fallback.wix.com\/","parts"
:"wix-html-editor-pages-
webapp\/page\/{filename}"}]},"timeSincePublish":3227,"favicon":"","deviceInfo":
{"deviceType":"Desktop","browserType":"Chrome","browserVersion":64},"siteRe
vision":50,"sessionInfo":{"hs":-
36760409,"svSession":"359ae1a775c340ed37f855ea0ebb7c9fade738df8dbbf13c93
4b0e679ec62d65e6e1455b8d0267ef22baee6c4802ab681e60994d53964e647acf431
e4f798bcd2e1233adf664551d2f64cabe6ad165a88e9b76cae72e12d308190fcc4020
7819","ctToken":"VzNpNnFKSmhYUE5uNjdkQ3FzaGhEWUNKWF9sNTN1Rn
YxeWFKZjhpalVVa3x7InVzZXJBZ2VudCI6Ik1vemlsbGEvNS4wIChXaW5kb3d
zIE5UIDEwLjA7IFdpbjY0OyB4NjQpIEFwcGxlV2ViS2l0LzUzNy4zNiAoS0hUT
UwsIGxpa2UgR2Vja28pIENocm9tZS82NC4wLjMyODIuMTg2IFNhZmFyaS81
MzcuMzYiLCJ2YWxpZFRocm91Z2giOjE1MjA3MjA3Mzk5MTd9","isAnonymo

34
us":false},"metaSiteFlags":[],"siteMembersProtectedPages":[],"indexable":true,"ha
sBlogAmp":false,"renderTime":1520115939918};

var googleAnalytics = "UA-2117194-61"

var ipAnonymization = false;

var googleRemarketing = "";

var googleTagManager = "";

var facebookRemarketing = "";

var yandexMetrika = "";

</script>

<link rel="preload" as="fetch"

href="https://static.wixstatic.com/sites/9be1a9_d72d459ce82975632efc98a01aaf5e
fd_49.json.z?v=3"/>

<link rel="preload" as="fetch"

href="https://static.wixstatic.com/sites/9be1a9_4e55a91a88986fcc797ef3203ebae5
88_50.json.z?v=3"/>

35
 <meta name="fragment" content="!"/>

<!-- DATA -->

<script type="text/javascript">

var adData = {};

var mobileAdData = {};

var usersDomain = "https://users.wix.com/wix-users";

</script>

<style id="viewerMainStyle">

a,abbr,acronym,address,applet,b,big,blockquote,body,button,caption,center,cite,co
de,dd,del,dfn,div,dl,dt,em,fieldset,font,footer,form,h1,h2,h3,h4,h5,h6,header,html,i
,iframe,img,ins,kbd,label,legend,li,nav,object,ol,p,pre,q,s,samp,section,small,span,s
trike,strong,sub,sup,table,tbody,td,tfoot,th,thead,title,tr,tt,u,ul,var{margin:0;paddin
g:0;border:0;outline:0;vertical-align:baseline;background:0 0}body{font-
size:10px;font-family:Arial,Helvetica,sans-serif}input,select,textarea{font-
family:Helvetica,Arial,sans-serif;box-sizing:border-box}ol,ul{list-
style:none}blockquote,q{quotes:none}ins{text-decoration:none}del{text-
decoration:line-through}table{border-collapse:collapse;border-
spacing:0}a{cursor:pointer;text-
decoration:none}body,html{height:100%}body{overflow-x:auto;overflow-
y:scroll}.testStyles{overflow-y:hidden}.reset-button{background:0
0;border:0;outline:0;color:inherit;font:inherit;line-
height:normal;overflow:visible;padding:0;-webkit-appearance:none;-webkit-user-
select:none;-moz-user-select:none;-ms-user-
select:none}:focus{outline:0}.wixSiteProperties{-webkit-font-
smoothing:antialiased;-moz-osx-font-
smoothing:grayscale;overflow:hidden}.SITE_ROOT{min-
height:100%;position:relative;margin:0
auto}.POPUPS_ROOT{left:0;top:0;width:100%;height:100%;overflow-
36
x:auto;overflow-y:scroll;position:fixed;z-
index:99999}.POPUPS_ROOT.mobile{z-
index:1005}.POPUPS_WRAPPER{position:relative;overflow:hidden}.POPUPS_
WRAPPER>div{margin:0 auto}.auto-generated-link{color:inherit}.warmup
.hidden-on-warmup{visibility:hidden}html.device-phone body{overflow-
y:auto}html.device-mobile-optimized.device-android{margin-
bottom:1px}html.device-mobile-
optimized.blockSiteScrolling>body{position:fixed;width:100%}html.device-
mobile-optimized.media-zoom-mode>body{touch-
action:manipulation}html.device-mobile-optimized.media-zoom-
mode>body>#SITE_CONTAINER{height:100%;overflow:hidden}html.device-
mobile-optimized.media-zoom-
mode>body>#SITE_CONTAINER>.noop{height:100%}html.device-mobile-
optimized.media-zoom-
mode>body>#SITE_CONTAINER>.noop>.siteAspectsContainer{height:100%;z-
index:1005}.siteAspectsContainer{position:absolute;top:0;margin:0
auto;left:0;right:0}body.device-mobile-optimized{overflow-x:hidden;overflow-
y:scroll}body.device-mobile-optimized.qa-mode{overflow-y:auto}body.device-
mobile-optimized #SITE_CONTAINER{width:320px;overflow-x:visible;margin:0
auto;position:relative}body.device-mobile-optimized>*{max-
width:100%!important}body.device-mobile-optimized .SITE_ROOT{overflow-
x:hidden;overflow-y:hidden}body.device-mobile-non-optimized
#SITE_CONTAINER>:not(.mobile-non-optimized-overflow)
.SITE_ROOT{overflow-x:hidden;overflow-y:auto}body.device-mobile-non-
optimized.fullScreenMode{background-color:#5f6360}body.device-mobile-non-
optimized.fullScreenMode #MOBILE_ACTIONS_MENU,body.device-mobile-
non-optimized.fullScreenMode #SITE_BACKGROUND,body.device-mobile-non-
optimized.fullScreenMode
.SITE_ROOT{visibility:hidden}body.fullScreenMode{overflow-
x:hidden!important;overflow-y:hidden!important}body.fullScreenMode.device-
mobile-optimized #TINY_MENU{opacity:0;pointer-
events:none}body.fullScreenMode-scrollable.device-mobile-optimized{overflow-
x:hidden!important;overflow-y:auto!important}body.fullScreenMode-
scrollable.device-mobile-optimized #masterPage,body.fullScreenMode-
scrollable.device-mobile-optimized .SITE_ROOT{overflow-
37
x:hidden!important;overflow-y:hidden!important}body.fullScreenMode-
scrollable.device-mobile-optimized
#SITE_BACKGROUND,body.fullScreenMode-scrollable.device-mobile-
optimized #masterPage{height:auto!important}.fullScreenOverlay{z-
index:1005;position:fixed;left:0;top:-60px;right:0;bottom:0;display:-webkit-
box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-
content:center;justify-content:center;overflow-
y:hidden}.fullScreenOverlay>.fullScreenOverlayContent{margin:0
auto;position:absolute;right:0;top:60px;left:0;bottom:0;overflow:hidden;-webkit-
transform:translateZ(0);transform:translateZ(0)}.mobile-actions-menu-wrapper{z-
index:1000}body[contenteditable]{overflow-x:auto;overflow-y:auto}.bold{font-
weight:700}.italic{font-style:italic}.underline{text-
decoration:underline}.lineThrough{text-decoration:line-
through}.singleLineText{white-space:nowrap;text-
overflow:ellipsis}.alignLeft{text-align:left}.alignCenter{text-
align:center}.alignRight{text-align:right}.alignJustify{text-
align:justify}ol.font_100,ul.font_100{color:#080808;font-family:'Arial, Helvetica,
sans-serif',serif;font-size:10px;font-style:normal;font-variant:normal;font-
weight:400;margin:0;text-decoration:none;line-height:normal;letter-
spacing:normal}ol.font_100 li,ul.font_100 li{margin-
bottom:12px}letter{position:relative;display:inline-block}word{display:inline-
block;white-space:nowrap}letter.space,word.space{display:inline}ol.wix-list-text-
align,ul.wix-list-text-align{list-style-position:inside}ol.wix-list-text-align
h1,ol.wix-list-text-align h2,ol.wix-list-text-align h3,ol.wix-list-text-align h4,ol.wix-
list-text-align h5,ol.wix-list-text-align h6,ol.wix-list-text-align p,ul.wix-list-text-
align h1,ul.wix-list-text-align h2,ul.wix-list-text-align h3,ul.wix-list-text-align
h4,ul.wix-list-text-align h5,ul.wix-list-text-align h6,ul.wix-list-text-align
p{display:inline}.wixapps-less-spacers-align.ltr{text-align:left}.wixapps-less-
spacers-align.center{text-align:center}.wixapps-less-spacers-align.rtl{text-
align:right}.wixapps-less-spacers-align>a,.wixapps-less-spacers-
align>div{display:inline-block!important}.flex_display{display:-webkit-
box;display:-webkit-flex;display:flex}.flex_vbox{box-sizing:border-box;padding-
top:.01em;padding-bottom:.01em}a.wixAppsLink
img{cursor:pointer}.singleLine{white-
space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis;word-
38
wrap:normal}[data-z-counter]{z-index:0}[data-z-counter="0"]{z-
index:auto}.circle-preloader{-webkit-animation:semi-rotate 1s 1ms linear
infinite;animation:semi-rotate 1s 1ms linear infinite;height:30px;left:50%;margin-
left:-15px;margin-top:-15px;overflow:hidden;position:absolute;top:50%;-webkit-
transform-origin:100% 50%;transform-origin:100% 50%;width:15px}.circle-
preloader::before{content:'';top:0;left:0;right:-100%;bottom:0;border:3px solid
currentColor;border-color:currentColor transparent transparent
currentColor;border-radius:50%;position:absolute;-webkit-transform:rotate(-
45deg);transform:rotate(-45deg);-webkit-animation:inner-rotate .5s 1ms linear
infinite alternate;animation:inner-rotate .5s 1ms linear infinite
alternate;color:#7fccf7}.circle-preloader::after{content:'';top:0;left:0;right:-
100%;bottom:0;border:3px solid currentColor;border-color:currentColor
transparent transparent currentColor;border-radius:50%;position:absolute;-webkit-
transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:inner-rotate
.5s 1ms linear infinite alternate;animation:inner-rotate .5s 1ms linear infinite
alternate;color:#3899ec;opacity:0}.circle-
preloader.white::before{color:#f0f0f0}.circle-
preloader.white::after{color:#dcdcdc}@-webkit-keyframes inner-
rotate{to{opacity:1;-webkit-
transform:rotate(115deg);transform:rotate(115deg)}}@keyframes inner-
rotate{to{opacity:1;-webkit-
transform:rotate(115deg);transform:rotate(115deg)}}@-webkit-keyframes semi-
rotate{from{-webkit-animation-timing-function:ease-out;animation-timing-
function:ease-out;-webkit-
transform:rotate(180deg);transform:rotate(180deg)}45%{-webkit-
transform:rotate(198deg);transform:rotate(198deg)}55%{-webkit-
transform:rotate(234deg);transform:rotate(234deg)}to{-webkit-
transform:rotate(540deg);transform:rotate(540deg)}}@keyframes semi-
rotate{from{-webkit-animation-timing-function:ease-out;animation-timing-
function:ease-out;-webkit-
transform:rotate(180deg);transform:rotate(180deg)}45%{-webkit-
transform:rotate(198deg);transform:rotate(198deg)}55%{-webkit-
transform:rotate(234deg);transform:rotate(234deg)}to{-webkit-
transform:rotate(540deg);transform:rotate(540deg)}}.hidden-comp-ghost-
mode{opacity:.5}.collapsed-comp-
39
mode::after{position:absolute;top:0;bottom:0;left:0;right:0;content:'';background:-
webkit-repeating-linear-gradient(135deg,transparent,transparent 49%,#2b5672
40%,#2b5672 40%,transparent 51%);background:repeating-linear-gradient(-
45deg,transparent,transparent 49%,#2b5672 40%,#2b5672 40%,transparent
51%);background-size:6px 6px;background-repeat:repeat}.g-transparent-a:link,.g-
transparent-a:visited{border-color:transparent}.transitioning-comp
*{transition:inherit!important;-webkit-
transition:inherit!important}.selectionSharerContainer{position:absolute;backgrou
nd-color:#fff;box-shadow:0 4px 10px 0
rgba(57,86,113,.24);width:142px;height:45px;border-radius:100px;text-
align:center}.selectionSharerContainer:after{content:"";position:absolute;bottom:-
10px;left:42%;border-width:10px 10px 0;border-style:solid;border-color:#fff
transparent;display:block;width:0}.selectionSharerContainer
.selectionSharerOption{display:inline-block;cursor:pointer;vertical-
align:top;padding:13px 11px 11px 13px;margin:1px;z-index:-
1}.selectionSharerContainer .selectionSharerVerticalSeparator{margin-
top:9px;margin-bottom:18px;background-
color:#eaf7ff;height:26px;width:1px;display:inline-block}.visual-focus-on .focus-
ring:not(.has-custom-focus):focus{box-shadow:inset 0 0 0 1px
rgba(255,255,255,.9),0 0 1px 2px #3899ec!important}

</style>

</head>

<body>

<div id="SITE_CONTAINER"></div>

<!-- No Footer -->

</body>

</html>

40
BIBLIOGRAFIE
1. https://en.wikipedia.org/wiki/Fink_(singer)
2. https://www.finkworld.co.uk/
3. https://creeazawebsitebloggratuit.weebly.com/creeaza-website-cu-wix.html
4. http://ericpolec.ro/crearea-un-website-html5-fara-cunostiinte-in-
domeniu.html
5. https://ro.wikipedia.org/wiki/HyperText_Markup_Language
6. http://www.ghid-html.info/10-notiuni-generale-despre-html.html
7. http://www.ecursuri.ro/cursuri-online/html-pe-intelesul-tuturor

41