LICEUL TEORETIC “IULIA ZAMFIRESCU” MIOVENI

Lucrare pentru atestarea competențelor

profesionale a absolvenților claselor de
matematică – informatică

Profesor îndrumător: Autor:

Hăbuc Ștefăniță Nae Raisa Gabriela

- 2023 –
LICEUL TEORETIC “IULIA ZAMFIRESCU” MIOVENI

Aplicație Web

Profesor îndrumător: Autor:

Hăbuc Ștefăniță Nae Raisa Gabriela

- 2023 -
 Cuprins
Motivația alegerii lucrării
1. Google Sites
1.1. - Prezentare generală
1.2. - Utilizarea platformei
2. K-Pop- Arena
2.1 -- Pagina principală
2.2 -- . Paginile formațiilor
2.3 -- Imagini de ansamblu
Bibliografie
3
............................................................. 4
............................................................. 5
............................................................. 6
............................................................. 9
........................................................... 15
........................................................... 18
........................................................... 23
 Motivația alegerii lucrării

Evoluția societății umane este marcată periodic de realizarea unor mari descoperiri științifice,
tehnice sau artistice, care determină schimbări profunde în toate domeniile vieții sociale. Negreșit,
apariția rețelei Internet este o descoperire cel puțin egală ca însemnătate cu inventarea telefonului,
automobilului sau cu dezvoltarea tehnologiilor nucleare.

Începând cu anii '95, Internetul, sub aspectul său cel mai popular, și anume al paginilor web, a
cunoscut o amploare greu de imaginat. Dacă la început, paginile web aveau un conținut simplu și
oarecum stângace, în zilele noastre aspectul acestora s-a schimbat radical. După doar 10 ani, în paralel
cu evoluția tehnicii de calcul, au evoluat și tehnicile de programare a acestora. Primele pagini permiteau
doar navigarea prin conținutul lor, pe când în zilele noastre ele au o utilizare foarte largă, de la jocuri și
aplicații grafice dinamice la comerț pe Internet.

Limbajul HTML este un limbaj de programare destinat în primul rând Internetului, aducând
dinamică unei pagini web. Este unul dintre cele mai importante limbaje de programare web open-source
(codul sursă este public, fiind accesibil tuturor) și server-side (rularea sa nu se face pe calculatorul celui
care vizualizează pagina, ci pe server-ul care o conține). Este unul dintre cele mai folosite limbaje de
programare server-side. Statisticile arată că la 1 mai 2008, suportul HTML este prezent pe 20 de milioane
dintr-un total de 70 de milioane de website-uri active din lumea întreagă. În afara limbajului HTML, în
realizarea unui site pot participa și alte tehnologii cum ar fi CSS (Cascade Style Sheet), Java script, Php,
MySql.

Concomitent cu apariția altor tehnologii pentru construirea paginilor web, s-au dezvoltat
platforme atât online cât și offline care oferă utilizatorilor posibilitatea de a construi pagini web conform
principiului WYSIWYG, astfel ele pot fi utilizate de utilizatori care nu au cunoștințe solide de programare.
Cele mai populare astfel de platforme sunt: Wix, Weebly, Word Press, Google Sites, Shopify, Site123,
etc. Pentru întocmirea proiectului de atestare a competențelor profesionale a absolvenților claselor de
matematică – informatică, am ales realizarea unui site cu ajutorul platformei Google Sites, platformă
foarte accesibilă, care oferă pe lângă instrumentele de bază de inserare a elementelor într-o pagină și
de gestionare a paginilor, posibilitatea de a insera elemente direct cu secvențe de cod HTML.

Pentru exemplificare am ales ca temă prezentarea fenomenului K-pop, un nou curent muzical
care a luat amploare în ultimii ani și este extrem de popular în rândul tinerilor. Site-ul construit conține
prezentarea celor mai populare formații care au contribuit la dezvoltarea curentului K-pop , prezentare
realizată atât cu utilizarea instrumentelor de construcție oferite de Google Sites cât și cu secvențe de
cod HTML. În plus una dintre pagini conține o aplicație amuzantă realizată în limbajul Java script.

4
 1. Google Sites

1.1 Prezentare generală

Site-uri Google este un wiki structurat și un instrument de creare a paginilor web inclus ca parte
a suitei gratuite bazată pe web Google Docs Editors. Serviciul include, de asemenea, Documente Google,
Foi de calcul Google, Prezentări Google, Desene Google, Formulare Google și Google Keep. Site-uri
Google este disponibil numai ca aplicație web. Aplicația permite utilizatorilor să creeze și să editeze
fișiere online în timp ce colaborează cu alți utilizatori în timp real.

Site-uri Google a început ca JotSpot, numele și singurul produs al unei companii de software
care oferea software social pentru întreprinderi. A fost vizat în principal întreprinderilor mici și mijlocii.
Compania a fost fondată de Joe Kraus⁠(d) și Graham Spencer, co-fondatorii Excite.

În februarie 2006, JotSpot a fost numit parte din Business 2.0, „Next Net 25”,[1] iar în mai 2006,
a fost onorat ca unul dintre „15 Start-up-uri de urmărit” al InfoWorld.[2] În octombrie 2006, JotSpot a
fost achiziționat de Google.[3] În 2007, Google a anunțat o tranziție prelungită de date a paginilor web
create folosind Google Page Creator (română Creator de pagini Google) (cunoscut și sub numele de
„Google Pages” (română Pagini Google) către serverele Site-uri Google. Pe 28 februarie 2008, Site-uri
Google a fost lansat folosind tehnologia JotSpot.[4] Serviciul era gratuit, dar utilizatorii aveau nevoie de
un nume de domeniu, pe care Google l-a oferit pentru 10 USD. Cu toate acestea, începând cu 21 mai
2008, Site-uri Google a devenit disponibil gratuit, separat de Google Apps și fără a fi nevoie de un
domeniu.[5]

În iunie 2016, Google a introdus o reconstrucție completă a platformei Site-uri Google,

denumită New Google Sites,[6][7] împreună cu programul de tranziție de la Classic Google Sites.[8] Noul
Site-uri Google nu utilizează tehnologia JotSpot.

În august 2020, noul site-uri Google a devenit opțiunea implicită pentru crearea site-urilor web,
și în noiembrie 2021, toate site-urile web realizate cu Site-uri Google clasice au fost arhivate.

Cu Google Sites dezvolta un site personal sau puteţi colabora cu alte persoane în ceea ce
privește crearea și conținutul paginilor. Apoi, puteți decide cu privire la nivelul de partajare permis.
Puteți stabili cine sunt proprietarii, cui acordați drepturi de a edita și revizui site-ul, și cui acordați
permisiunea de a vizualiza site-ul. Puteți limita vizualizarea site-ului dvs. la un grup mic, private sau

5
puteți alege să-l publicați, astfel încât să fie accesibil pentru oricine din lume. Aplicația Google Sites este
accesibilă de la orice computer conectat la internet. Pe platforma Google Sites puteți realiza site-uri
personalizate. Astfel, puteți dispune de un instrument de lucru eficient, indexat mai bine în motoarele
de căutare.
În concluzie principalele avantaje ale google sites sunt:
➢ simplu de folosit
➢ indexare mai bună în motoarele de căutare
➢ disponibilitate garantată 99,9% din timp
➢ posibilitatea de a publica site-ul pe un domeniu particularizat, nefiind nevoie de
achiziționarea de spațiu de găzduire
Google Sites este o unealtă foarte eficientă. Sistemul de manipulare a conținutului (Content
Management System - CMS) conceput de Google este simplu și în același timp complex. Simplu pentru
că oferă oricui posibilitatea să creeze un site de la zero fără a avea cunoștințe în domeniu. Și complex
pentru că reușește să îmbine într-un mod original mai multe instrumente de lucru (Google Mail, Google
Docs, Google Calendar), totul devenind o reală platformă de comunicare, atât în interiorul grupului cât
și cu exteriorul. Poate cel mai important atu este că Google Sites este dezvoltat încontinuu, oferind noi
și noi facilități de la o versiune la alta. Astfel, dispuneți mereu de tot ce este mai nou pentru o cât mai
bună indexare în motoare de căutare. Site-urile create pe platforma Google Sites sunt optimizate pentru
a fi vizitate de pe orice dispozitiv de navigare pe Internet (smartphone, netbook, palmtop, laptop etc.).
Google Sites permite editarea paginilor în același timp de către mai mulți utilizatori cu drepturi de
administrare conținut. Totodată, păstrează câte o versiune pentru fiecare pagină care a fost salvată,
permițând administratorului să revină la o versiune precedentă sau furnizează informații despre
identitatea ultimului utilizator care a editat pagina.

Google Sites permite integrarea formularelor în conținutul paginii realizate în Google Docs;
formularele le puteți folosi pentru a culege informații de la clienții dvs.

1.2. Folosirea platformei

Pagina principală pe care trebuie să o accesați este: http://sites.google.com. Este nevoie de un

Cont Google pentru a putea utiliza Google Sites. Un cont Gmail, oferă deja acces la toate instrumentele
oferite de Google.

Utilizatorii Google Sites pot alege, pentru construirea unui site, un șablon predefinit, disponibil
în galeria de șabloane. Un șablon de site are pagini și structură predefinite, potrivite pentru un anumit
domeniu sau scop: colaborare între întreprinderi, sport, organizații guvernamentale și non-profit, site-

6
uri personale și de familie, școală și educație ş.a. Oricine folosește un șablon începe cu propria copie a
acestuia, pe care poate adăuga și revizui orice conținut dorește.

Spațiul principal de lucru

1 2 3

1. Previzualizare site
2. Partajare site
3. Setări site
4. Panou principal de lucru (inserare elemente, gestiune pagini, stabilire teme)
Pentru a realiza design-ul unui site sunt folosite o serie de tehnici cu ajutorul cărora paginile
capătă contur, atât din punct de vedere vizual cât și din punct de vedere al organizării legăturilor și al
amplasării conținutului în pagini. Este indicată realizarea unei schițe a site-ului înainte de a crea un site
nou. Întocmirea unei liste a elementelor grafice care vor fi incluse, însoțite de indicații privind așezarea
lor în pagină, constituie un element de un real ajutor. Stabilirea paginilor de nivel unu și informațiile ce
doresc a fi oferite în cadru lor, precum și paginile subordonate acestora care vor cuprinde detalierea
subiectelor anunțate în paginile de nivel unu.

Meniul inserează permite inserarea în pagină a unei game largi de elemente cum ar fi: imagini,
text, secvențe de cod HTML, fișiere din drive, blocuri de conținut, cuprins, carusel de imagini, butoane
de acțiune, linkuri către rețele sociale, calendar, hartă, fișiere , etc.

7
 Din meniul pagini, pot fi gestionate paginile site-ului, subpaginile
precum și ordinea în care acestea apar în site.

Setările pentru site permit stabilirea modului de afișare a

meniului, imaginile pentru logo și favicon, date statistice, personalizarea
domeniului

8
 2. K – Pop Arena

Aplicația web construită cu ajutorul platformei Google Sites poate fi accesată la adresa
https://sites.google.com/view/k-pop-arena. Antetul site-ului este format din meniu, situat în partea
dreaptă, logo în partea stângă, creat cu aplicația Canvas, si o imagine dispusă sub formă de banner. Site-
ul are de asemenea ca favicon logo-ul creat.
Structura site-ului este următoarea:
• Pagina principală conține informații generale despre curentul K-Pop, și o aplicație Java
script
• Pagina Black pink conține date despre formația Black pink
• Pagina The Rose prezintă formația The rose
• Pagina Stray Kids conține informații despre formația Stray Kids
• Pagina BTS conține prezentarea formației BYS..

2.1 Pagina Principală

Pe lângă resursele text și media plasate în această pagină pentru a descrie curentul K-Pop. In
partea de jos a paginii este plasat un container cu cod care conține o aplicație realizată cu java script.
Aplicația este un joc care are la bază jocul clasic Sokoban. Sokoban (倉庫番,  „depozitar” ) este un joc
video puzzle în care jucătorul împinge cutii într-un depozit , încercând să le ducă în locuri de depozitare.
Jocul a fost conceput în 1981 de Hiroyuki Imabayashi și publicat pentru prima dată în decembrie 1982.
Jocul se joacă pe o tablă de pătrate , unde fiecare pătrat este o podea sau un perete. Unele pătrate de
podea conțin cutii, iar unele pătrate de podea sunt marcate ca locații de depozitare.

9
 Jucătorul este limitat pe tablă și se poate deplasa orizontal sau vertical pe pătrate goale
(niciodată prin pereți sau cutii). Jucătorul poate muta o cutie mergând până la ea și împingând-o în
pătratul de dincolo. Cutiile nu pot fi trase și nu pot fi împinse în pătrate cu pereți sau alte cutii. Numărul
de cutii este egal cu numărul de locații de depozitare. Puzzle-ul este rezolvat atunci când toate cutiile
sunt plasate în locuri de depozitare.
Am adaptat jocul Sokoban si am
creat unul nou, dar cu aceeași structură
clasică: „Ajută k-poperul”. Scopul jocului
constă în scăparea k-poperului de
mulțimea de fani. Ca să evadeze, acesta
trebuie să ajungă in backstage fără a
rămâne blocat intre obstacole. K-
poperul nu poate sa urce zidurile deci
trebuie să se ajute de cutii pentru a se
cățăra. Cutiile le ridică si mai apoi le
plasează in fața zidurilor. Pentru a
merge la stânga se folosește tasta „
Săgeată stânga”, pentru a merge la
dreapta se folosește tasta „Săgeată
dreapta” si pentru a ridica sau a plasa
cutia se folosește tasta „Săgeată jos”.
Dacă k-poperul rămâne blocat intre două ziduri fără nicio cutie ,este prins de fani și rămâne blocat.
Codul necesar pentru această aplicație este următorul:
<!DOCTYPE html>
<html>
<head>
<title>Ajută K-poperul să ajungă în backstage</title>
<meta charset="UTF-8">
<style>
html, body {
height: 100%;
margin: 0;
}

body {
background: #fafafa;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

canvas {
border: 1px solid white;
margin-bottom: 1rem;
}
</style>
</head>
<body>
<canvas width="384" height="256" id="game"></canvas>
<div>
<div><b>CONTROLS</b></div>
<div><b>Left / Right Arrow:</b> Move left / right</div>
<div><b>Down Arrow:</b> Pick up or drop block</div>
</div>
<script>
const canvas = document.getElementById('game');
const context = canvas.getContext('2d');

10
 const grid = 32;

// se desenează un spațiu nou cu zidul

const wallCanvas = document.createElement('canvas');
const wallCtx = wallCanvas.getContext('2d');
wallCanvas.width = wallCanvas.height = grid;

wallCtx.fillStyle = 'white';
wallCtx.fillRect(1, 1, grid, grid);
wallCtx.fillStyle = 'black';

// primul rand
wallCtx.fillRect(0, 1, 21, 10);
wallCtx.fillRect(23, 1, 10, 10);

// al doilea rând
wallCtx.fillRect(0, 12, 10, 9);
wallCtx.fillRect(11, 12, 21, 9);

// al treilea rând
wallCtx.fillRect(0, 22, 21, 10);
wallCtx.fillRect(23, 22, 10, 10);

// mutarea personajului, row:1 mută jos, row:-1

let playerDir = { row: 0, col: 0 };

let playerPos = { row: 0, col: 0 }; // poziția personajului în vector
let playerFacing = -1;
let rAF = null; // keep track of the animation frame so we can cancel
it
let carryingBlock = false; // fals dacă personajul nu cară o cutie
let width = 0;

// se creează o hartă, fiecare caracter semnifică un obiect

const types = {
wall: '#',
player: '@',
block: '$',
goal: '.',
empty: ' '
};

// harta unui nivel

const level1 = `
# ## ##
# #
## #
#. #
## #
# # $ #
# #$ $$@ #
##### #############
# $#
#####
`;

// obiectele din hartă sunt reținute într-un sir

const cells = [];
level1.split('\n')
.filter(rowData => !!rowData)
.forEach((rowData, row) => {
cells[row] = [];

if (rowData.length > width) {

width = rowData.length;
}

11
 // fiecare caracter este retinut in a doua dimensiune
rowData.split('').forEach((colData, col) => {
cells[row][col] = colData;

if (colData === types.player) {

playerPos = { row, col };
}
});
});

function clamp(min, max, value) {

return Math.min(Math.max(min, value), max);
}

// mutarea unui obiect dintr-o celulă în alta

function move(startPos, endPos) {
const startCell = cells[startPos.row][startPos.col];
const endCell = cells[endPos.row][endPos.col];

const isPlayer = startCell === types.player;

switch(startCell) {

// dacă celula de start este goală nu se pornește

case types.player:
case types.block:
cells[startPos.row][startPos.col] = types.empty;
break;
}

// se muta obiectul într-o celulă nouă

switch(endCell) {

//dacă celula de final este goală se adaugă un bloc

case types.empty:
cells[endPos.row][endPos.col] = isPlayer ? types.player :
types.block;
break;
}

playerFacing = endPos.col - startPos.col;

// mută cutia împreună cu personajul

if (carryingBlock) {
cells[startPos.row - 1][startPos.col] = types.empty;
cells[endPos.row - 1][endPos.col] = types.block;
}
}

// reincarcare pânză
function loop() {
rAF = requestAnimationFrame(loop);
context.clearRect(0,0,canvas.width,canvas.height);

// se verifică daca personajul se poate muta într-o direcție

let row = playerPos.row + playerDir.row;
const col = playerPos.col + playerDir.col;
const cell = cells[row][col];
switch(cell) {

// permite personajului să se mute în celulele goale

case types.empty:
case types.goal:
// apply gravity
let rowBelow = row + 1 + playerDir.row;
let belowCell = cells[rowBelow][col];
while (belowCell === types.empty || belowCell == types.goal) {

12
 row = rowBelow;
rowBelow = row + 1 + playerDir.row;
belowCell = cells[rowBelow][col];
}

move(playerPos, { row, col });

playerPos.row = row;
playerPos.col = col;

// end game
if (cell === types.goal) {
cancelAnimationFrame(rAF);
}
break;

// permite personajului să se urce pe un bloc sau cutie daca

//este liber deasupra
case types.block:
case types.wall:
const rowAbove = row - 1 + playerDir.row;
const nextCell = cells[rowAbove][col];

if (nextCell === types.empty || nextCell === types.goal) {

move(playerPos, { row: rowAbove, col });

playerPos.row = rowAbove;
playerPos.col = col;
}
break;
}

// resetarea direcției jucătorului

playerDir = { row: 0, col: 0 };

// draw the board

context.strokeStyle = 'black';
context.fillStyle = 'black';
context.lineWidth = 2;

// centrează vizualizarea jucătorului

// se afișează granițele harții
const startRow = clamp(0, cells.length - 8, playerPos.row - 4);
const startCol = clamp(0, width - 12, playerPos.col - 6);

for (let row = startRow; row < cells.length; row++) {

for (let col = startCol; col < cells[row].length; col++) {
const cell = cells[row][col];
const drawRow = row - startRow;
const drawCol = col - startCol;

switch(cell) {
case types.wall:
context.drawImage(wallCanvas, drawCol * grid, drawRow * grid);
break;

case types.block:
context.strokeRect(drawCol * grid, drawRow * grid, grid, grid);
break;

case types.goal:
context.strokeRect((drawCol + 0.2) * grid, drawRow * grid, grid
- 12, grid);
context.beginPath();
context.arc((drawCol + 0.7) * grid, (drawRow + 0.5) * grid, 2,
0, Math.PI * 2);
context.fill();
break;

13
 case types.player:
context.beginPath();

// head
context.arc((drawCol + 0.5) * grid, (drawRow + 0.3) * grid, 7,
0, Math.PI * 2);
context.stroke();
// hat
const x = (drawCol + ( playerFacing < 0 ? 0.1 : 0.6)) * grid;
context.fillRect(x, (drawRow + 0.15) * grid, grid / 3, 2);
context.beginPath();
context.arc((drawCol + 0.5) * grid, (drawRow + 0.25) * grid,
7, 0, Math.PI, 1);
context.fill();
// body
context.fillRect((drawCol + 0.48) * grid, (drawRow + 0.4) *
grid, 2, grid / 2.5 );
// arms
context.fillRect((drawCol + 0.3) * grid, (drawRow + 0.6) *
grid, grid / 2.5, 2);
// legs
context.moveTo((drawCol + 0.5) * grid, (drawRow + 0.8) * grid);
context.lineTo((drawCol + 0.65) * grid, (drawRow + 1) * grid);
context.moveTo((drawCol + 0.5) * grid, (drawRow + 0.8) * grid);
context.lineTo((drawCol + 0.35) * grid, (drawRow + 1) * grid);
context.stroke();
}
}
}
}

// preluarea apăsărilor de taste

document.addEventListener('keydown', function(e) {
playerDir = { row: 0, col: 0};

// stânga
if (e.which === 37) {
playerDir.col = -1;
}
// dreapta
else if (e.which === 39) {
playerDir.col = 1;
}
// jos
else if (e.which === 40) {
const nextCol = playerFacing + playerPos.col;
const nextCell = cells[playerPos.row][nextCol];
const cellAbove = cells[playerPos.row - 1][nextCol];
const cellBelow = cells[playerPos.row + 1][nextCol];

// ridică cutie dacă există

if (
!carryingBlock &&
nextCell === types.block &&
cellAbove === types.empty
) {
cells[playerPos.row][nextCol] = types.empty;
cells[playerPos.row - 1][playerPos.col] = types.block;
carryingBlock = true;
}
// plasează cutie
else if (carryingBlock) {
let row = playerPos.row;

// plasează cutie
if (nextCell === types.empty) {
//plasează cutia până se oprește

14
 let rowBelow = row - 1;
let belowCell = cells[rowBelow][nextCol];
while (belowCell === types.empty) {
row = rowBelow;
rowBelow++;
belowCell = cells[rowBelow][nextCol];
}
}

// pune cutia sus

if (
(nextCell === types.wall ||
nextCell === types.block) &&
cellAbove === types.empty
) {
row = row - 1;
}

cells[playerPos.row - 1][playerPos.col] = types.empty;

cells[row][nextCol] = types.block;
carryingBlock = false;
}
}
});

// start joc
requestAnimationFrame(loop);
</script>
</body>
</html>
2.2. Paginile formațiilor

Toate paginile care prezintă o formație urmează un anumit tipar și anume:

a. O imagine reprezentativă cu formația și scurtături către rețele sociale oficiale ale

formației, în antet
b. O imagine cu formația și alăturat un scurt istoric al formației
c. În următoarea secțiune sunt prezentați membri formației
d. După un delimitator de tip gif este plasat în partea stângă un carusel de imagini cu
coperțile albumelor, și în stânga într-un tabel editat direct în html sunt menționate
melodiile cele mai populare de pe fiecare album și legături către site-uri specializate de
comercializare.
Iată mai jos codul HTML folosit pentru inserarea tabelului din pagina BTS
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 3px solid black;
border-collapse: groove;
}

tr:nth-child(even) {
background-color: rgba(200, 212, 212, 0.4);

th:nth-child(even),td:nth-child(even) {
background-color: rgba(200, 212, 212, 0.4);

15
}
</style>
</head>
<body>
<table style="width:100%">
<table BORDER=4>
<tr>
<th>Nume album</th>
<th>Data apariției</th>
<th>Cea mai populară melodie</th>
<th>Cumpară</th>
</tr>
<tr>
<td>2 COOL 4 SKOOL</td>
<td>12-05-2013</td>
<td>No More Dream</td>
<td>
<a href="https://www.kpop.ro/ro/product/bts-2-cool-4-skool-
single-album/">bts-2-cool-4-skool-single-album</a>

</td>
<tr>
<td>DARK & WILD</td>
<td>20-08-2014</td>
<td>Danger</td>
<td><a href="https://www.kpop.ro/ro/product/bts-dark-wild-vol-
1/">bts-dark-wild-vol-1</a>
</td>
</tr>
<tr>
<td>THE MOST BEAUTIFUL MOMENT IN LIFE :
YOUNG FOREVER</td>
<td>02-05-2016</td>
<td>I NEED U </td>
<td><a href="https://www.kpop.ro/ro/product/bts-the-most-
beautiful-moment-in-life-young-forever/">bts-the-most-beautiful-
moment-in-life-young-forever</a></td>
</tr>
<tr>
<td>WINGS</td>
<td>10-10-2016</td>
<td>Blood Sweat & Tears </td>
<td><a href="https://www.kpop.ro/ro/product/bts-wings/">bts-
wings</a></td>
</tr>
<tr>
<td>LOVE YOURSELF承
‘HER’</td>
<td>18-09-2017</td>
<td>MIC Drop </td>
<td><a href="https://www.kpop.ro/ro/product/bts-love-yourself-
her/">product/bts-love-yourself-her</a></td>
</tr>
<tr>
<td>MAP OF THE SOUL : PERSONA</td>
<td>12-04-2019</td>
<td>Boy With Luv (Feat. Halsey)</td>

16
 <td><a href="https://www.kpop.ro/ro/product/bts-map-of-the-soul-
persona/">bts-map-of-the-soul-persona</a> </td>

</tr>
<tr>
<td>MAP OF THE SOUL : 7</td>
<td>21-02-2020</td>
<td>ON </td>
<td><a href="https://www.kpop.ro/ro/product/bts-map-of-the-
soul-7/">bts-map-of-the-soul-7</a></td>
</tr>
<tr>
<td>BE</td>
<td>20-11-2020</td>
<td>Life Goes On </td>
<td><a href="https://www.kpop.ro/ro/product/bts-be-essential-
edition/">bts-be-essential-edition</a></td>
</tr>
<tr>
<td>Proof</td>
<td>10-06-2022</td>
<td>Run BTS</td>
<td><a href="https://www.kpop.ro/ro/product/bts-proof-standard-
edition/">bts-proof-standard-edition</a>
</td>
</tr>
</table>
e. Pagina se încheie cu o imagine care direcționează către site-ul oficial al formației și
alăturat link către cel mai popular videoclip al lor

17
 C

2.3. Imagini de ansamblu ale paginilor

18
Black Pink

19
The Rose

20
Stray Kids

21
BTS

22
Bibliografie

1. Alin Burța, Manual pentru clasa a 12 – a, INFORMATICĂ, Editura ALL

2. Angelica Bacivarov, Costel Ciuchi, Gabriel Petrica, Programare web. Aplicatii in HTML, CSS,

JavaScript, Editura MATRIX ROM

3. https://www.w3schools.com/

4. https://support.google.com/sites/?hl=en#topic=7184580

5. https://en.wikipedia.org/

23