Documentație 2

Colegiul Național de Informatică
Piatra-Neamț
PROIECT PENTRU ATESTAREA

COMPETENȚELOR PROFESIONALE
LA INFORMATICĂ
SISTEMUL CARDIOVASCULAR
Pagină web
Profesor coordonator Elev

Georghe Manolache Alexia-Bianca Bistriceanu
Clasa a XII-a C
MAI 2024
Cuprins
1. Argument......................................................................................3
2. Mediu de programare................................................................4
Limbajul HTML.............................................................4
Limbajul CSS..................................................................7
3. Implementarea aplicației..........................................................9
4. Utilizarea aplicației..................................................................24
5. Resurse hardware și software................................................27
6. Concluzii....................................................................................28
7. Bibliografie...............................................................................29
2
1. Argumentare
Am ales această temă, referitoare la sistemul cardiovascular, deoarece

îmi doresc să urmez Facultatea de Medicină, iar dezvoltarea acestui subiect
m-ar ajuta să aprofundez noțiunile biologice legate de acest domeniu.
Înțelegerea și cercetarea temeinică a acestei temei va fi un lucru benefic in
vederea susținerii examenului de admitere.
În primul rând, sistemul cardiovascular este unul dintre cele mai

importante și complexe sisteme din corpul uman. El este responsabil pentru
pomparea sângelui și transportul substanțelor nutritive, oxigenului și
deșeurilor metabolice către și de la celulele corpului. Înțelegerea profundă a
acestui sistem este esențială pentru diagnosticarea și tratarea unei game largi
de afecțiuni medicale, cum ar fi bolile cardiace, hipertensiunea arterială,
accidentul vascular cerebral și multe altele.
Totodată, prin creearea acestui atestat îmi dezvolt, pe lângă cunoștințele

legate de anatomie, abilitatea de crea un site web cu ajutorul limbajlor de
programare HTML și CSS. Astfel voi dobândi cunoștințe din diverse
domenii de activitate, care, în viiitor mă vor ajuta atât în decursul anilor de
facultate cât și în viitoarea mea carieră.
În concluzie, alegerea sistemului cardiovascular ca temă a atestatului este

una înțeleaptă și oportună pentru un elev interesat de medicină. Studiul
acestui sistem complex nu numai că va contribui la dezvoltarea cunoștințelor
și a abilităților necesare în domeniul medical, dar va oferi și oportunități
valoroase pentru explorarea unor concepte avansate și dezvoltarea
competențelor de cercetare și analiză, pregătind astfel drumul către o carieră
de succes în medicină.
3
2. Mediu de programare
Limbajul HTML
HTML sau Hypertext Markup Language este un limbaj de marcăj folosit

pentru a defini structura și conținutul paginilor web. În dezvoltarea unei
pagini web, utilizarea corectă a elementelor și atributelor HTML este
esențială pentru a asigura o afișare corectă și coerentă a conținutului.
Pentru a începe, declarația de tip de document <!DOCTYPE html> este

esențială pentru a marca începutul unui document HTML și pentru a ajuta
browserele să afișeze corect pagina web. Această declarație apare o singură
dată în partea de sus a paginii și se scrie exclusiv cu litere mari și mici.
Structura fundamentală a unui document HTML constă în etichetele

<html> și </html>, care delimitează începutul și sfârșitul documentului
HTML, respectiv. Tot conținutul vizibil al paginii web este cuprins între
aceste două etichete.
Titlurile sunt elemente importante pentru organizarea și structurarea

conținutului. Ele sunt indicate cu etichetele <h1>, <h2>, <h3> etc., unde
nivelul de importanță crește odată cu numărul din etichetă.
Pentru inserarea paragrafelor de text, se folosesc etichetele <p>. Acestea

delimitează începutul și sfârșitul unui paragraf de text, permitând o afișare
corespunzătoare a acestuia pe pagina web.
Imaginile sunt componente esențiale într-o pagină web și sunt inserate

folosind eticheta <img>. Această etichetă include atribute precum src pentru
specificarea URL-ului imaginii, alt pentru o descriere alternativă și width
pentru specificarea lățimii imaginii.
Stilurile CSS pot fi aplicate direct elementelor HTML folosind atributul

style. Acest lucru permite specificarea proprietăților de stil, cum ar fi
culoarea de fundal sau dimensiunea textului, pentru a îmbunătăți aspectul
vizual al paginii web.
4
Textul poate fi formatat utilizând diverse etichete, cum ar fi <b>,
<strong>, <i>, <em>, <mark>, <small>, <del>, <ins>, <sub>, pentru a
evidenția diferite elemente în cadrul paginii web.
Culorile de fundal pot fi definite și aplicate elementelor HTML folosind

atributul style, oferind posibilitatea de a personaliza aspectul vizual al
paginii web conform preferințelor.
Pentru a organiza și a structura conținutul într-un mod mai clar și coerent,

se folosesc etichetele semantice precum <header>, <nav>, <section>,
<article>, <aside>, <footer>, <details>, <summary>, care adaugă un nivel
suplimentar de semnificație și claritate în cadrul paginii web.
Implementarea tabelelor în HTML se realizează folosind etichetele

<table>, <tr> și <td>, care permit organizarea și afișarea datelor într-un
format tabular.
Listele neordonate și ordonate sunt create utilizând etichetele <ul> și

<ol>, împreună cu eticheta <li> pentru fiecare element al listei.
În final, folosirea adecvată a acestor funcții și etichete HTML contribuie

la dezvoltarea unei pagini web bine structurate, ușor de citit și de navigat,
oferind astfel o experiență plăcută utilizatorilor.
5
Exemplu de pagină web în limbaj HTML
6
Limbajul CSS
Limbajul CSS (Cascading Style Sheets) este esențial pentru a oferi

aspect și stil paginilor web, permițând personalizarea lor în funcție de
preferințe și necesități. Implementarea de designuri distinctive și unice cu
ajutorul CSS-ului aduce o notă de originalitate și îmbunătățește experiența
utilizatorilor în timp ce navighează pe site-ul web.
Una dintre caracteristicile esențiale ale CSS-ului este capacitatea de

a controla transparența sau opacitatea elementelor paginii web. Pentru a
oferi transparență unui fundal, se poate utiliza proprietatea “opacity”.
Această proprietate permite controlul nivelului de opacitate al unui
element, luând valori între 0.0 și 1.0, unde 0.0 reprezintă total transparent,
iar 1.0 reprezintă opacitate completă. De exemplu:
Pentru a aduce un plus de originalitate și stil paginii web, se pot folosi

diverse proprietăți și valori CSS. Printre cele mai utilizate sunt:
• content: Această proprietate permite definirea conținutului casetei,

care poate include text și imagini.
• padding: Proprietatea padding elimină spațiul în jurul conținutului
unui element. Este folosită pentru a adăuga spațiu între conținut și
marginea elementului.
• border: Cu ajutorul proprietății border, se poate adăuga un chenar în
jurul elementului, cu o grosime și o culoare definite. Această
proprietate permite personalizarea aspectului conturului.
• margin: Proprietatea margin definește spațiul exterior al unui
element, curățând zona din jurul graniței. Este folosită pentru a crea
spațiu între elemente.
7
De exemplu, următorul cod CSS definește un div cu o lățime de 300px,
cu un chenar de 15px de culoare verde, cu un spațiu de padding de 50px și
cu un spațiu exterior de margin de 20px:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
Pentru a evidenția conturul textului, se poate folosi proprietatea outline,

care permite controlul stilului, culorii, grosimii și ofsetului conturului.
Proprietățile asociate conturului textului includ
• outline-style
• outline-color
• outline-width
• outline-offset
Exemplu:
h1 {
outline-style: dotted;
outline-color: blue;
outline-width: 3px;
outline-offset: 5px;
8
3. Implementarea aplicației
Pagina Acasă:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sistemul Cardiovascular</title>
</head>
<!DOCTYPE html>: Această linie reprezintă o declarație a tipului

de document (DOCTYPE) și specifică versiunea HTML utilizată în
document. În acest caz, <!DOCTYPE html> indică că documentul este
scris în conformitate cu specificațiile HTML5.
<html lang="en">: Această linie marchează începutul

documentului HTML și definește limba în care este scris documentul, în
acest caz, "en" pentru engleză. Eticheta <html> este elementul rădăcină al
oricărui document HTML și include întregul conținut al paginii web.
<head>: Această etichetă marchează începutul secțiunii de antet a

documentului HTML. Secțiunea <head> conține metadatele documentului,
cum ar fi titlul paginii web, legăturile către fișierele CSS și JavaScript,
metaetichetele pentru optimizarea motoarelor de căutare, și altele.
<title>Sistemul Cardiovascular</title>: Această linie specifică

titlul paginii web. Conținutul inclus între etichetele <title> și </title>
reprezintă titlul efectiv al paginii web, care este afișat în bara de titlu a
browser-ului web. În acest caz, titlul paginii este "Sistemul
Cardiovascular".
</head>: Această etichetă marchează sfârșitul secțiunii de antet a

documentului HTML.
9
<body>
<header>
<h1 style="color:Black;text-align:center;background-color:DarkGray;font-
size:60px;">Sistemul Cardiovascular</h1>
<body>: Această etichetă marchează începutul și sfârșitul

conținutului paginii web.
<header>: Este o secțiune care conține elemente de antet ale

paginii.
<h1>: Este un element de titlu de nivel 1 (cel mai important titlu într-o
pagină web), care conține textul "Sistemul Cardiovascular". Atributul style
conține reguli CSS care se aplică elementului h1, cum ar fi:
• color: Black;: Textul este colorat în negru.

• text-align: center;: Textul este aliniat în centrul elementului.
• background-color: DarkGray;: Fundalul elementului este colorat în
gri închis.
• font-size: 60px;: Dimensiunea fontului este setată la 60 de pixeli.
În ansamblu, această secvență de cod creează un antet pentru pagină, cu

un titlu mare și stilizat, care atrage atenția utilizatorului și indică subiectul
paginii: "Sistemul Cardiovascular". Stilurile CSS incluse direct în eticheta
h1 asigură că acest titlu va fi afișat în mod specific, cu o dimensiune mare
a fontului, culoare și aliniere corespunzătoare designului dorit pentru
pagină.
<style>
body {background-color:#0d0d0d;}
h1 {color: blue;}
p {color: red;}
</style>
Secvența <style> este utilizată pentru a defini reguli de stil pentru

elementele HTML de pe pagina web. În acest caz, secvența de cod
definește trei reguli de stil pentru trei tipuri diferite de elemente: <body>,
<h1> și <p>.
10
Aceste reguli de stil definesc aspectul vizual al elementelor <body>,
<h1> și <p> din pagina web. Background-ul întregii pagini este setat la un
negru închis, titlurile de nivel 1 vor avea text albastru, iar paragrafele vor
avea text roșu. Aceste reguli de stil sunt aplicate la nivel global, adică vor
afecta toate elementele respective din întreaga pagină web, deci orice
element <h1> va avea text albastru și orice element <p> va avea text roșu,
indiferent de locația lor pe pagină.
<div style="background:DarkGray;">
<button type="submit" style="padding: .5em; border: none; margin-left:15%;

color:Black; font-size: 25px; align-items: center; background:DarkGray;font-
family:'Times New Roman', Times, serif;">
<a href="./Acasă.html" style="text-decoration: none;color:Black;font-

size: 25px;">
Acasă</a>         &n
bsp;           &
nbsp;    <a href="./Funcții.html"style="text-decoration:
none;color:Black;">Funcții</a>       &nb
sp;           &n
bsp;     <a href="./Boli.html" style="text-decoration:
none;color:Black;">Boli</a>       &nbsp
;           &nbs
p;    <a href="./Componente.html"style="text-decoration:
none;color:Black;">Componente</a>      &nbs
p;           &nb
sp;        <a
href="./Curiozități.html"style="text-decoration:
none;color:Black;">Curiozități</a></button></div>
Secvența de cod HTML descrie un container <div> care conține un

buton cu mai multe link-uri încorporate.
1. <div style="background:DarkGray;">
• această etichetă definește un container <div>.
• Atributul style specifică stilizarea containerului, în acest caz
culoarea de fundal a containerului este setată la gri închis
(DarkGray).
11
2. <button type="submit" style="padding: .5em; border: none; margin-
left:15%; color:Black; font-size: 25px; align-items: center;
background:DarkGray;font-family:'Times New Roman', Times,
serif;">:
• Această etichetă definește un buton.

• Atributul type="submit" specifică că acesta este un buton de tip
submit (deși nu este utilizat într-un formular în acest caz).
• Atributul style definește stilizarea butonului, inclusiv:
▪ padding
▪ border
▪ margin-left:15%
▪ color:Black
▪ font-size: 25px;
▪ align-items: center
▪ background: DarkGray
▪ font-family:'Times New Roman',
▪ Times, serif;
3. <a href="./Acasă.html" style="text-decoration:

none;color:Black;font-size: 25px;">Acasă</a>:
• Această etichetă <a> reprezintă un link către o altă pagină web.

• Atributul href specifică adresa URL către care va duce link-ul.
• Atributul style definește stilizarea link-ului, inclusiv culoarea
textului (color:Black;) și dimensiunea fontului (font-size: 25px;).
• Textul link-ului este "Acasă".
<br>
<br>
<br>
<p style="color:#e6e6e6 ;text-align:center;font-size:45px; font-style:oblique; font-

family: Georgia, serif;"> "Fiecare om este autorul propriei sale boli sau sănătăți." </p>
<p style="color:#e6e6e6; font-size:30px; margin-left:80%;font-style:oblique; font-

family: Georgia, serif;"> Buddha </p>
<br>
12
<br>
<p style="color:#e6e6e6 ;text-align:center;font-size:30px; font-style:normla; font-

family:'Times New Roman', Times, serif;"> PROIECT PENTRU ATESTAREA
CUNOȘTINȚELOR </p>

family:'Times New Roman', Times, serif;"> PROFESIONALE LA INFORMATICĂ
</p>
<br>
<p style="color:#e6e6e6 ;text-align:left;font-size:30px; margin-left:12%; font-

style:normla; font-family:'Times New Roman', Times, serif; "> Profesor
coordonator,&nbsp Gheorghe Manolache
           &nbsp
;          Elev,
Alexia-Bianca Bistriceanu </p>
<br>

family:'Times New Roman', Times, serif; "> Clasa XII C</p>

family:'Times New Roman', Times, serif; "> Mai 2024</p>
</header>
În acestas ecventa de cod HTML, eticheta <br> este utilizată în mai

multe locuri pentru a crea spații goale între diferitele elemente de text sau
pentru a separa diferite secțiuni de conținut. Utilizarea acestor etichete
<br> ajută la organizarea și prezentarea conținutului într-un mod mai clar
și mai ușor de înțeles pentru utilizatori.
Totodata se regăsesc în aceasta secvență numeroase etichete care

aparțin limbajului CSS, acestea ajutând la realizarea unui aspect cât mai
plăcut din punct de vedere vizual al paginii web create. Dimensiunile,
culorile si asezarea în pagină a textului poate fi setată și modificată pentru
a oferi un aspect cât mai armonios paginii dezvoltate.
13
Pagina Boli:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
<style>
h1 {color: blue;}
p {color: red;}
</style>

family:'Times New Roman', Times, serif;"><a href="./Acasă.html" style="text-
decoration: none;color:Black;font-size: 25px;">
Acasă</a>          &n
bsp;           &
nbsp;   <a href="./Funcții.html"style="text-decoration:
sp;           &n
;           &nbs
p;           &nb
sp;        <a
href="./Curiozități.html"tyle="text-decoration:
14
<br>
<img alt="" align="left" src="https://nutriwell.ro/wp-

content/uploads/2019/09/Cardio_11.14.19_HeartDiseaseCancer.jpg" style="margin-
left:1%" >
<p style="color:#e6e6e6;font-size:140%; margin-right:5%;">    Conform

statisticilor oficiale, 57% din decesele înregistrate la nivel național sunt cauzate de
bolile cardiovasculare. De aceea, trebuie să avem grijă de organismul nostru pentru a
crește rezistența la aceste afecțiuni.</p>
<p style="color:#e6e6e6;font-size:140%; margin-right:5%;">

Printre cele mai frecvente boli de inimă se numără:</p>
<ul>
<li style="color:#e6e6e6;font-size:140%; margin-right:5%;margin-left:40%;">

Infarctul miocardic </li>

Insuficiența cardiacă </li>

Aritmiile/ tulburările ritmului cardiac </li>

Cardiopatia ischemică/ angina pectorală </li>
</ul>
<br>
<br>
<p style="color:#e6e6e6;font-size:140%; margin-right:5%;margin-left:4%;">

  E important să mai știi că bolile cardiovasculare frecvente sunt
declanșate de factori de risc pe care îi putem controla, dar și de factori de risc care nu
intră în sfera noastră de acțiune. Nu suntem responsabili de factori ca vârsta, sexul sau
predispoziția genetică.</p>

  Factorii de risc cardiovascular pe care îi putem controla sunt
următorii:</p>
<ul>

Sedentarismul </li>

Obezitatea </li>
15
Diabetul </li>
<li style="color:#e6e6e6;font-size:140%; margin-right:5%;margin-left:4%;"> Nivelul

de colesterol din sânge </li>

Hipertensiunea arterială </li>
<li style="color:#e6e6e6;font-size:140%; margin-right:5%;margin-left:4%;"> Nivelul

de stres și oboseala </li>

Consumul de alcool </li>

Consumul de tutun </li>
</ul>

   <b>Cum sunt diagnosticate bolile cardiovasculare?</b></p>
<p style="color:#e6e6e6;font-size:140%; margin-right:5%;margin-left:4%;"> Medicul

poate recomanda o serie de investigații, precum radiografia toracică, angiograma
coronariană, electrocardiograma (ECG sau EKG) și testul de efort. Intreabă medicul
care dintre acestea este potrivită în cazul tău.</p>
<br>
<br>
</header>
Codul utilizat pentru realizarea paginii Boli este asemănătoare cu

cea pe care am folosit-o pentru a crea pagina Acasă. Am modificat unele
dimensiune ale textul textului utilizând ‘font-size’ și astefel am obținut un
aspect plăcut al paginii din punctul meu de vedere.
Deasemenea, pentru a oferi un aspect cât mai agreabil paginii mele

web, am centrat textul utilizând ‘margin-right’ și ‚ margin-left’, iar pentru a
modifica culoarea textului dupa bunul plac am utilizat funcția
‘style="color’’.
16
Pagina Componente:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
<style>
h1 {color: blue;}
p {color: red;}
</style>

decoration: none;color:Black;font-size:
25px;">Acasă</a>         &
nbsp;
     <a href="./Funcții.html"style="text-decoration:
sp;           &n
;           &nbs
p;           &nb
sp;        <a
<p style="color:#e6e6e6;font-size:160%; margin-right:5%;margin-left:5%;"> Sistemul

cardiovascular se compune în principal din:</p>
17
<ul>

<b>Inimă</b> → care acționează asemănător unei pompe </li>

<b>Vase de sânge</b> → care acționeaza asemnănător unor seturi de tuburi
</li>
</ul>
<img alt="" align="right" src="https://platform.ginamed.ro/content/image-

upload/inima_sect_long_barrons.png?format=webp&quality=80&width=1024"
style="margin-right:3%" width="450" height="400" >
<p style="color:#e6e6e6;font-size:160%; margin-right:5%;margin-left:5%;"> <b> A.

Inima</b> </p>

<b>→</b> <b>Caracteristici</b></p>
<ul>

Pompează sângele în artere, capilare și venele sistemului cardiovascular și furnizează
sânge tuturor celulelor organismului </li>

Mărimea sa este aproximativ egală cu a unui pumn </li>
<li style="color:#e6e6e6;font-size:140%; margin-right:5%;margin-left:4%;"> Este un

organ cavitar </li>
<li style="color:#e6e6e6;font-size:140%; margin-right:5%;margin-left:4%;"> Are

formă conică </li>
</ul>
<p style="color:#e6e6e6;font-size:160%; margin-right:5%;margin-left:5%;"> Inima

este localizată în torace, în mediastin, între a II-a și a V-a coastă. În organism inima are
o poziție conică, fiind flancată de cei doi plămâni.</p>

<b>→</b> <b>Alcătuire</b></p>
<ul>

Ventricule &nbsp(două cavități principale cu rol de pompă) </li>
<li style="color:#e6e6e6;font-size:140%; margin-right:5%;margin-left:4%;"> Atrii

&nbsp(două cavități de umplere cu sânge) </li>
18
</ul>
<br><br>
<img alt="" align="left" src="https://platform.ginamed.ro/content/image-

upload/vase_sanguine_barrons.png?format=webp&quality=80&width=1024"
style="margin-left:3%" width="500" height="400" >
<p style="color:#e6e6e6;font-size:160%; margin-right:5%;margin-left:40%;"> <b>B.

Vase de sânge</b> </p>
<ol>
<li style="color:#e6e6e6;font-size:140%; margin-right:5%;margin-left:40%;"> <b>

Artere</b>→ sunt vase de sânge care transportă sângele de la inimă către arteriole,
la o presiune mare. Peretele arterelor este gros, rezistent, împărțit în 3 straturi.</li>
<br>

Arteriolele</b>→ constituie partea de legătură dintre artere și capilare. Arteriolele
se implică în controlul circulației sângelui în capilare, prin procesele de vasoconstricție
sau vasodilatație. </li>
<br>

Capilarele </b>→ fac legătura între arteriole și venule. apilarele constituie o
membrană semipermeabilă prin intermediul căreia se fac schimburi de gaze, nutrienți și
reziduuri, între sânge și celelalte țesuturi.</li>
<br>

Venulele</b>→ constituie legătura între capilare și vene. Venulele prezintă perete
subțire, în care țesutul muscular și elastic este mai scăzut decât în arteriole.</li>
<br>

Venele</b>→ transporta sângele de la venule înapoi la inimă, la o presiune mică.
Totodată, venele constituie și un rezervor de sânge.</li>
<br>
</ol>
</header>
19
Și în crearea acestei pagini am utilizat un cod HTML asemănător cu
cele precedente la care am modificat dimesiunile textului, culoare și
așezarea imaginilor inserate.
Pagina Curiozități:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
<style>
h1 {color: blue;}
p {color: red;}
</style>

25px;">Acasă</a>         &
nbsp;
sp;           &n
20
;           &nbs
p;           &nb
sp;        <a
<br>
<br>
<img alt="" align="right"

src="https://i.pinimg.com/564x/6a/8d/44/6a8d4421c9e6ad4a9226ab9aa3b4c0c2.jpg"
style="margin-right:3%; " >
<p style="color:#e6e6e6;font-size:140%;width:770px; height:70px; padding: 14px;

border: 7px solid #330080; margin-left:3%;">   Inima este permanent
ocupată să „bată”. Ea are aproximativ 100 000 de bătăi pe zi, ceea ce înseamnă că bate
de 36 de milioane de ori într-un an și de 3 miliarde de ori pe întreg parcursul vieții.</p>

border: 7px solid #330080; margin-left:3%;">   Puse cap la cap, vasele de
sânge din corpul uman au o lungime de peste 96 000 de kilometri.</p>

border: 7px solid #330080; margin-left:3%;">   În expresia „inimă frântă”
există mai mult adevăr decât te-ai aștepta. Simptomele date de o suferință mare, cum ar
fi despărțirea de persoana iubită sau moartea unei ființe dragi sunt asemănătoare cu ale
unui infarct.</p>

border: 7px solid #330080; margin-left:3%;">   Inima în vechile credințe:
egiptenii credeau că intelectul și emoțiile apar din inimă. Grecii credeau că inima este
locul unde se ascunde spiritul. Chinezii asociau inima cu centrul fericirii.</p>
</header>
21
Pagina Funcții:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
<style>
h1 {color: blue;}
p {color: red;}
</style>

25px;">Acasă</a>         &
nbsp;
sp;           &n
;           &nbs
p;           &nb
sp;        <a
22
<img alt="" align="left"
src="https://www.doppelherz.ro/fileadmin/user_upload/herz_doppelherz.svg"
style="margin-left:1%" width="500" height="333">
<p style="color:#e6e6e6;font-size:140%; margin-right:10%;">Sistemul cardiovascular

este unul dintre cele mai importante sisteme din organismul uman, având un rol esențial
în buna funcționare a corpului uman.</p>
<p style="color:#e6e6e6;font-size:140%; margin-right:10%;"> El este responsabil de

furnizarea nutrienților și a oxigenului către țesuturi. Totodată sistemul este responsabil
si de transportul hormonilor către celule lor țintă. Practic, toate regiunile organismului
sunt deservite de sistemul cardiovascular </p>
<p style="color:#e6e6e6;font-size:140%; margin-right:10%;"> Principalele

componenete ale acestuia sunt: inima și vasele de sânge. </p>
<p style="color:#e6e6e6;font-size:140%; margin-right:10%;"> Datorită conexiunilor

care se realizează între organele, corpul uman funcționează ca un tot unitar. </p>
<br>
<br>
<h2 style="color:#e6e6e6;font-size:180%;text-align:center;font-family:'Times New

Roman', Times, serif;"> În organism există două circuite cardiovasculare principale
</h2>
<p style="color:#e6e6e6;font-size:140%; margin-left:5%;margin-right:5%;">

<b>A.</b> Primul circuit se extinde de la inima la plămâni și poartă denumirea
de Circulație Pulmonară, dar poate fi numită și "Circulația Mică". Sângele încărcat cu
dioxid de carbon(CO2) pleacă spre plămâni, unde se realizează schimbul între dioxidul
de carbon din sânge și oxigenul din plâmani. După ce s-a încheiat acest transfer gazos,
sângele oxigenat se întoarce la inimă. </p>
<p style="color:#0000e6;font-size:150%; margin-left:5%;margin-right:50%; border:

2px solid"> <b> Atriu drept→ Ventricul drept→ Plămâni→ Atriu
Stâng </b></p>
<p style="color:#e6e6e6;font-size:140%; margin-left:5%;" <b>B.</b> Al

doilea circuit se extinde de la inima la toate celulele din corp și poartă denumirea de
Circulație Sistemică, dar poate fi numită și "Circulația Mare". Sângele încărcat cu
oxigen(O2) pleacă de la inimă spre toate celulele din organism, unde se realizează
schimbul între oxigenul din sânge și dioxidul de carbon de la nivel celular. După ce s-a
încheiat acest transfer gazos, sângele neoxigenat se întoarce la inimă. </p>
<p style="color:#b30000;font-size:150%; margin-left:5%; margin-right:50%; border:

2px solid"> <b> Atriu stâng→ Ventricul stâng→ Celulă→ Atriu Drept
</b></p>
</header>
23
4. Utilizarea Aplicației
Utilizarea acestui site este destul de simplă.
Site-ul se deschide cu pagina de Acasă pe care este prezentat un citat

despre sănătate alături de informațiile legate de realizatorul site-ului și de
profesor coordonator.
În partea de sus a paginii este meniul. Acest meniu apare în fiecare

pagină și funcționează identic de fiecare dată.
După ce ai apăsat butonul Funcții, acesta te va trimite direct la acea

pagină
24
Pe această pagină sunt prezentate principalele funcții ale sistemului
cardiovascular. Odată ce vei apăsa butonul Boli, acesta te va trimite pe
pagina respectivă.
Aici sunt prezentate cele mai frecvente afecțiuni care pot apărea la
nivelul inimii. Dacă vei apăsa butonul Componente, acesta te va direcționa
la următoarea pagină.
25
Aici sunt prezentate componentele principale ale inimii. Dacă vei
apăsa pe butonul Curiozități, acesta te va trimite pe pagina resprectivă.
Odată ce ai accesat această pagină vei descoperi unele informații

interesante despre inimă. Pentru a te întoarce la pagina Acasă vei da click
pe butonul respectiv.
26
5. Resurse Hardware și Software
1) Hardware :
- Procesor (CPU) : 500 MHz +
- Memorie (RAM): 128 MB
- Spaţiu liber pe hard-disk : 100 MB
- Display:1920*1080, 125% Zoom.
- Oricare browser. Recomandare personala: Chrome.
2) Software :
- Sistem de operare : Windows 7
27
6. Concluzii
În concluzie, dezvoltarea unui site HTML pentru atestatul la

informatică reprezintă o experiență valoroasă și edificatoare, oferindu-
ne oportunitatea de a aplica cunoștințele teoretice într-un mediu practic,
de a dezvolta abilități esențiale în domeniul programării web și de a
lucra, pentru a atinge obiectivele stabilite. Această experiență nu numai
că ne-a consolidat înțelegerea asupra subiectelor abordate în cadrul
atestatului la informatică, dar ne-a pregătit și pentru a aborda cu
încredere proiecte și provocări similare în viitor.
De asemenea, dezvoltarea unui site HTML pentru atestat ne-a oferit

o platformă excelentă pentru a ne dezvolta abilitățile de problem-
solving și de rezolvare a provocărilor tehnice. Am fost nevoiți să găsim
soluții pentru diferitele probleme întâlnite în timpul procesului de
dezvoltare a site-ului, cum ar fi probleme legate de design,
funcționalitate, compatibilitatea cu diferite browsere sau optimizarea
performanței.
28
7. Bibliografie
https://ginamed.ro/
https://aigrile.ro/
https://www.drbalint.ro/7-lucruri-fascinante-pe-care-poate-nu-le-stiai-
despre-sistemul-circulator/
https://www.cardionline.ro/ro/articole-medicale/2022-01-23/cateva-
reguli-pentru-ne-mentine-sanatatea-sistemului-cardiovascular
https://www.humanitas.net/ro/wiki/anatomie/sistem-cardiovascular/
Mihaela Brut, Sabin Buraga, Prezentări multimedia pe Web. Limbajele

XHTML+TIME şi SMIL, Editura Polirom, Iaşi, 2004
Sabin Buraga, Proiectarea siturilor Web, Editura Polirom, Iași, 2002
Anatomie si fiziologie umana. Manual pentru admitere la facultatile de

medicina. Editia 2022, BARRONS - Krumhardt, Barbara
29

Documentație 2

Încărcat de

Informații document

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

Documentație 2

Încărcat de

Drepturi de autor:

Formate disponibile

Colegiul Național de Informatică

PROIECT PENTRU ATESTAREA

Profesor coordonator Elev

5. Resurse hardware și software................................................27

Am ales această temă, referitoare la sistemul cardiovascular, deoarece

În primul rând, sistemul cardiovascular este unul dintre cele mai

Totodată, prin creearea acestui atestat îmi dezvolt, pe lângă cunoștințele

În concluzie, alegerea sistemului cardiovascular ca temă a atestatului este

HTML sau Hypertext Markup Language este un limbaj de marcăj folosit

Pentru a începe, declarația de tip de document <!DOCTYPE html> este

Structura fundamentală a unui document HTML constă în etichetele

Titlurile sunt elemente importante pentru organizarea și structurarea

Pentru inserarea paragrafelor de text, se folosesc etichetele <p>. Acestea

Imaginile sunt componente esențiale într-o pagină web și sunt inserate

Stilurile CSS pot fi aplicate direct elementelor HTML folosind atributul

Culorile de fundal pot fi definite și aplicate elementelor HTML folosind

Pentru a organiza și a structura conținutul într-un mod mai clar și coerent,

Implementarea tabelelor în HTML se realizează folosind etichetele

Listele neordonate și ordonate sunt create utilizând etichetele <ul> și

În final, folosirea adecvată a acestor funcții și etichete HTML contribuie

Limbajul CSS (Cascading Style Sheets) este esențial pentru a oferi

Una dintre caracteristicile esențiale ale CSS-ului este capacitatea de

Pentru a aduce un plus de originalitate și stil paginii web, se pot folosi

• content: Această proprietate permite definirea conținutului casetei,

border: 15px solid green;

Pentru a evidenția conturul textului, se poate folosi proprietatea outline,

<!DOCTYPE html>: Această linie reprezintă o declarație a tipului

<html lang="en">: Această linie marchează începutul

<head>: Această etichetă marchează începutul secțiunii de antet a

<title>Sistemul Cardiovascular</title>: Această linie specifică

</head>: Această etichetă marchează sfârșitul secțiunii de antet a

<body>: Această etichetă marchează începutul și sfârșitul

<header>: Este o secțiune care conține elemente de antet ale

• color: Black;: Textul este colorat în negru.

În ansamblu, această secvență de cod creează un antet pentru pagină, cu

Secvența <style> este utilizată pentru a defini reguli de stil pentru

<button type="submit" style="padding: .5em; border: none; margin-left:15%;

<a href="./Acasă.html" style="text-decoration: none;color:Black;font-

Secvența de cod HTML descrie un container <div> care conține un

• Această etichetă definește un buton.

3. <a href="./Acasă.html" style="text-decoration:

• Această etichetă <a> reprezintă un link către o altă pagină web.

<p style="color:#e6e6e6 ;text-align:center;font-size:45px; font-style:oblique; font-

<p style="color:#e6e6e6; font-size:30px; margin-left:80%;font-style:oblique; font-

<p style="color:#e6e6e6 ;text-align:center;font-size:30px; font-style:normla; font-

<p style="color:#e6e6e6 ;text-align:center;font-size:30px; font-style:normla; font-

<p style="color:#e6e6e6 ;text-align:left;font-size:30px; margin-left:12%; font-

<p style="color:#e6e6e6 ;text-align:center;font-size:30px; font-style:normla; font-

<p style="color:#e6e6e6 ;text-align:center;font-size:30px; font-style:normla; font-

În acestas ecventa de cod HTML, eticheta <br> este utilizată în mai

Totodata se regăsesc în aceasta secvență numeroase etichete care

<button type="submit" style="padding: .5em; border: none; margin-left:15%;

<img alt="" align="left" src="https://nutriwell.ro/wp-

<p style="color:#e6e6e6;font-size:140%; margin-right:5%;"> &nbsp;&nbsp; Conform

<p style="color:#e6e6e6;font-size:140%; margin-right:5%;"> &nbsp;&nbsp;&nbsp;

<li style="color:#e6e6e6;font-size:140%; margin-right:5%;margin-left:40%;">

<li style="color:#e6e6e6;font-size:140%; margin-right:5%;margin-left:40%;">

<li style="color:#e6e6e6;font-size:140%; margin-right:5%;margin-left:40%;">

<li style="color:#e6e6e6;font-size:140%; margin-right:5%;margin-left:40%;">

<p style="color:#e6e6e6;font-size:140%; margin-right:5%;margin-left:4%;">

<p style="color:#e6e6e6;font-size:140%; margin-right:5%;margin-left:4%;">

<li style="color:#e6e6e6;font-size:140%; margin-right:5%;margin-left:4%;">

<li style="color:#e6e6e6;font-size:140%; margin-right:5%;margin-left:4%;">

<li style="color:#e6e6e6;font-size:140%; margin-right:5%;margin-left:4%;"> Nivelul

<p style="color:#e6e6e6;font-size:140%; margin-right:5%;"> Conform

<p style="color:#e6e6e6;font-size:140%; margin-right:5%;">

<p style="color:#e6e6e6;font-size:140%; margin-left:5%;" <b>B.</b> Al