COLEGIUL TEHNIC DE AERONAUTICĂ “HENRI COANDĂ”

BUCUREȘTI

PROIECT DE ATESTAT
PROFESIONAL LA
INFORMATICĂ

Profesor îndrumător:
Mihăescu Rodica
Elev:
Rătescu-Vlad Ionuț-Gabriel
Clasa a-XII-a A

Promoția 2024
 Tema proiect:
Bioinginerie medicală
(Informații și prezentare)

Profesor Îndrumător:
Mihăescu Rodica

2
 Elev:
Rătescu-Vlad Ionuț-Gabriel
Clasa a XII-a A

Profil Matematică-Informatică intensiv Informatică

3
 Cuprins:

Capitolul I - Argument..........................................................................................................................

Capitolul II - Noțiuni Generale despre HTML.........................................................................................

Capitolul III - Prezentarea paginii Web................................................................................................

Capitolul IV - Bibliografie....................................................................................................................

Capitolul V - Anexe.............................................................................................................................

4
 Capitolul I - Argument

Secția de matematică-informatică pe care am ales-o la sfârșitul clasei a

VIII-a, a fost o provocare pentru cei 4 ani de liceu, provocarea atat din punct de
vedere al matematici cat si al informaticii. Am descoperit notiuni de care nu
stiam si care mi se pareau inabordabile si pe care le-am inteles si asimilat in
orele de programare sau de tehnoredactare.

Informatica a fost o provocare mai mare decât aș fi crezut. În prima

lună , nu am înțeles aproape nimic, dar dupa ce am intrat în laborator, am
început să înțeleg despre ce era vorba, și am ajuns printre cei mai buni din
clasă, se poate spune că am dezvoltat o mică pasiune pentru această materie.

Pentru proiectul de față, am fost influențat de locul de munca al figurei

paterne și din pasiunea mea din câmpul medical. Așa că am îmbinat două
medicală.

În realizarea proiectului de atestat, am folosit site-ul Wix.com și am

folosit un șablon de tip farmacie-informatii. Cu ajutorul acestei aplicatii, am
reușit să îmi mai perfecționez abilitățile de utilizare și crearea de pagini web.

Chiar dacă domeniul pe care l-am ales este unul complex și dificil,
consider că mă reprezintă în mare parte și că o să mă ajute pe viitor.

5
Capitolul II - Noțiuni Generale
despre HTML
Unul dintre programele fundamentale utilizate de WWW ( World Wide
Web ) este HTML ( Hypertext Markup Language ), care descrie formatul primar
în care documentele sunt vazute și distribuite în Web. Multe din trasăturile lui,
cum ar fi independența față de platformă, structurarea formatării și legaturile
hypertext, fac din el un foarte bun format pentru documentele Internet și
Web.

Primele specificațiile de bază ale Web-ului au fost HTML, HTTP și URL.

HTML a fost dezvoltat inițial de Tim Berners-Lee la CERN în 1989. HTML a

fost vazut ca o posibilitate pentru fizicienii care utilizează computere diferite și
să schimbe intre ei informații utilizind Internetul. Erau prin urmare necesare
cîteva trăsături: independența de platformă, posibilități hypertext și
structurarea documentelor.Independența de platformp înseamnă că un
document poate fi afișat în mod asemănător de computere diferite ( deci cu
font, grafică și culori diferite ), lucru vital pentru o audiență atît de variată.

Hipertext înseamnă că orice cuvânt, frază, imagine sau alt element al

documentului văzut de un utilizator ( client ) poate face referință la un alt
document, ceea ce ușurează mult navigarea între multiple documente sau
chiar în interiorul aceluiași document.

6
 Structurarea riguroasă a documentelor permite convertirea acestora
dintr-un format în altul precum și interogarea unor baze de date formate din
aceste documente.

Standardul oficial HTML este World Wide Web Consortium (W3C), care
este afiliat la Internet Engineering Task Force (IETF). W3C a enunțat câteva
versiuni ale specificației HTML, printre care și HTML 2.0, HTML 3.0,HTML 3.2,
HTML 4.0 și, cel mai recent, HTML 4.01. În același timp, autorii de browsere,
cum ar fi Netscape și Microsoft, au dezvoltat adesea propriile "extensii" HTML
în afara procesului standard și le-au incorporat în browserele lor. În unele
cazuri, cum ar fi tag-ul Netscape , aceste extensii au devenit standarde de
creare adoptate de autorii de browsere.

Împărțirea documentului în secțiuni

Din motive de organizare fișierele HTML sunt împarțite în doua secțiuni:

- antet (header) care conține informația introductivă de formatare a paginii. Se

utilizează marcajul <HEAD>.

- corpul (body) unde se introduce informația efectiv. Se utilizează marcajul

<BODY>.

Recomandare este să scrieți paginile Web plasând marcajele în poziții

logice astfel încât documentul să fie ușor de procesat ulterior.

Inserarea titlului în pagină

Pentru o pagină Web mai elevată, putem să dăm paginii un nume,
controlul utilizat este <TITLE>. Acest control are o limitare deoarace unele
programe de explorare Web nu afișează titlul ferestrei. În schimb textul din
<TITLE> este utilizat ca informație de legătură când se utilizează bookmarks sau
favorites.

Informatii uzuale care se plasează la sfârșit

7
 De obicei la sfârșitul unui document apar informații de copyright și date
despre autorul paginii. Marcajul utilizat este <ADDRESS>. Nu este obligatorie
utilizarea acestui marcaj în paginile Web create.

Definirea antetelor din secțiune

Dacă pagina trebuie organizată pe secțiuni și subsecțiuni se utilizează
marcajele de formatare a subtitlurilor <H1-H6> unde avem H1 pentru
subnivelul cel mai de sus și respectiv H6 pentru subnivelul cel mai de jos.
Trebuie sa ținem cont de faptul că fonturile, dimensiunile și efectele din
prezentarea generală pot fi modificate de utilizator. Dar foarte puțini oameni
modifică preferințele implicite, deci, dacă pagina arată bine cu valorile
predefinite, totul e Ok.

Linie orizontala
Pentru organizarea vizuala a unui document este util marcajul <HR> care
introduce o linia orizontala subțire afișată pe întreaga lațime a paginii. Acest
marcaj poate fi utilizat de mai multe ori într-un document Web, dacă este
folosit judicios paginile devin mai interesante.

Stiluri de text
Caractere îngroșate si italice
Cuvintele sau frazele îngroșate ajută la parcurgerea materialului și
identificarea punctelor specifice. De aceea titlurile secțiunilor sunt scrise cu
caractere îngroșate și nu italice. Formatarea îngroșata și înclinată necesită
maracaje HTML pereche; acestea sunt <B> și </B> pentru caractere îngroșate ,
respectiv <I> și </I> pentru caractere înclinate.

Subliniere, caractere monospațiu, modificări de text

Se pot utiliza și alte opțiuni de formatare acestea sunt: <U> </U> pentru
subliniere, <STRIKE> </STRIKE> pentru tăiere, indici inferiori <SUB> </SUB>,
indici superiori <SUP> </SUP>, precum și marcajul monospațiu <TT> </TT> .
Numele monospațiu indică faptul că fiecare literă dintr-un font de acest tip
ocupă exact aceeași lățime chiar daca litera respectivă este destul de îngustă.

Dimensiuni, culori, corpuri de litere

Dimensiunea fonturilor HTML poate varia de la 1 la 7 , unde 1 este cel
mai mic iar 7 cel mai mare, fiind exact invers numărării subtitlurilor. Toate
8
modificările caracteristicilor conținutului se fac prin intermediul atributelor
marcajului <FONT>. Marcajele care pot avea atribute se specifică de obicei prin
perechi de forma nume valoare.
- Primul atribut al marcajului de formatare este marimea. Pentru exemplificare
consider urmatoare formatare
<FONT SIZE=7> un text important </FONT>
Dimensiunile fontului pot fi specificate în mod absolut (SIZE=5) sau relativ
SIZE=+1), (SIZE=-3)
Culoarea se poate stabili utilizând atributul COLOR, culorile se pot specifica
prin nume iar daca doriți un control mai bun al rezoluției culorilor se pot utiliza
valori hexazecimale RGB (despre care vom discuta mai târziu).

Aplicare stiluri logice

Cele mai cunoscute stiluri logice sunt <EM> </EM> și respectiv
<STRONG> </STRONG>. Primul este utilizat pentru evidențiere (afșsare cu
caractere italice) iar al doilea pentru evidențiere puternică (afișare cu caractere
îngroșate). Aceste marcaje logice nu sunt prea des utilizate deoarece nu știm
cum va interpreta un program de navigare EM respectiv STRONG.
În standardul HTML sunt specificate și alte marcaje logice folosite destul
de rar deoarace sunt sinonime cu marcajul de font monospațiu. Aceste
marcaje logice sunt: CITE, CODE, DFN, KBD, SAMP, VAR.

Adaugarea referintelor și legaturilor

Referinte catre alte pagini Web
Marcajul principal utilizat este cel ancoră <A> împreună cu perechea sa
</A>, care trebuie să conțină atribute fără care acest marcaj nu are sens și nu
afectează formatarea informației.Atributul care trebuie specificat este cel de
referință hipertext HREF="valoare". Valoarea poate fi vidă, dar atributul
trebuie specificat pentru ca lagatura să apară activă în programul de navigare.

Referirea informatiilor non-Web

Se realizează pur și simplu folosind un URL adecvat care utilizează
urmatoarea forma generală:
serviciu://numegazdă (:port)-director (și nume fișier)

9
Unde serviciul poate lua valorile:
-http→ protocol de transfer hipertext;
-mailto→ adresa de poștă electronică;
-telnet→ conectarea prin internet către un sistem aflat la distanță;
-ftp→ fișier arhivă pentru transfere;
-news→ server-ul de știri usent;

Referinte interne în cadrul documentelor

Definirea tintelor într-un document Web
Una din problemele cu care se confruntă proiectanții de pagini Web este
când este optimă plasarea unui document într-un fișier unic HTML și cînd e
optimă organizarea sa ca un set de fișiere. O regulă empirică utilizată este
urmatoarea - separarea paginilor prin puncte logice de salt și minimizarea
timpului de încărcare pentru cititori.
Ţintele salturilor sunt cunoscute sub nume de ancore de nume. Marcajul
HTML pentru un punct-ancora este o variantă a marcajului <A> de tip <A
nume=valoare> unde valoarea poate fi orice secvență de caractere, numere,
semne de punctuație. Unele programe de navigare impun ca toate caracterele
din ancoră să fie litere mici- testați restricțiile !!
Ancorele sunt destinații din cadrul paginii curente și nu legături către
exterior, textul nu este scos în evidență în nici un fel. Acest marcaj trebuie
închis cu marcajul pereche </A>.

Adăugare legaturi către ținte din cadrul paginilor Web

Marcajul care definește un salt la o legătură activă din cadrul
documentului este tot o variantă a marcajului <A> ,caz în care atributul
necesar este o referință de tip hipertext de tip HREF dar URL-ul este înlocuit de
numele ancorei în fața căruia se utilizează simbolul diez(#).

Salturi în cadrul listelor organizate

Ancorele și punctele de salt sunt utilizate pentru a-i ajuta pe cititori să
navigheze în liste de dimensiuni mari cu informații sortate alfabetic.

10
 Legături către ținte din documente externe
Dacă adaugăm notația de forma (#), ancoră la sfârșitul oricărui URL
putem face ca acea legatură să se refere direct la un anumit punct ancoră din
documentul respectiv.
Folosirea marcajelor în structură şi a fişierelor de alte tipuri (Javascript,
CSS), permite o mai mare independenţă de dispozitivul fizic, ce permite
folosirea paginii web prin ajustare, pe toate tipurile de medii fizice de la
telefonul mobil până la dispozitivele de tip navigare sau GPS. Totodată se pune
problema schimbului de informaţie între două sau mai multe calculatoare şi
rezolvarea optimă a acesteia, situaţie ce implică respectarea unor "reguli de
comunicare" pe care, calculatoarele să le folosească uzual.

11
 Capitolul III - Prezentarea
paginii Web
Pagina ,,Acasa” este pagina de debut a site-ului meu. Prezinta o sugestie
despre ce este vorba in site.

În adiție, am creat o pagină ,,laightbox” care apare în urma unui timp de

inactivitate , cu informații mai detaliate.
Se poate ieșii din acea pagină apăsând butonul ,,X” din dreapta sus, sau
apăsând în afara scrisului.

12
 De asemenea, am creat o bară de meniuri pentru navigarea mai ușoară
prin site.Vizitatorii site-ului se pot loga si crea un cont de membru.

Am adăugat un buton pentru chat , pentru eventualele întrebări și

discuții, alaturi de un submeniu pentru subscribe.

Am creat o pagină denumită Domenii, in care se incadreaza toate

specializarile studiate in cadrul Bioingineriei Medicale.

13
14
 În plus, se pot accesa informațiile referitoare la friecare temă, apăsând
pe imagine sau titlu.

15
 Aceasta este pagina de bioinstrumentatie,în urma accesării
imaginii/titlului.

În adiție, am adăugat și o pagină unde se gasesc informații despre

facultățile care predau această specializare și numărul de telefon aferent
fiecăreia.

16
 Capitolul IV - Bibliografie
Am folosit site-ul wix.com pentru crearea paginii mele web.
Informațiile au fost extrase din:
- https://ro.wikipedia.org/wiki/Bioinginerie_medical%C4%83;
- https://ro.scribd.com/document/380836224/Bioinginerie-medical%C4%83;
- HTML61324.php;
- www.wix.com;

Capitolul V - Anexe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1"
id="wixDesktopViewport" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Wix.com Website Builder"/>
<link rel="icon" sizes="192x192" href="https://www.wix.com/favicon.ico"
type="image/x-icon"/>
<link rel="shortcut icon" href="https://www.wix.com/favicon.ico"
type="image/x-icon"/>
17
 <link rel="apple-touch-icon" href="https://www.wix.com/favicon.ico"
type="image/x-icon"/>
<!-- Safari Pinned Tab Icon -->
<!-- <link rel="mask-icon" href="https://www.wix.com/favicon.ico"> -->
<!-- Legacy Polyfills -->
<script nomodule="" src="https://static.parastorage.com/unpkg/core-js-
bundle@3.2.1/minified.js"></script>
<script nomodule="" src="https://static.parastorage.com/unpkg/focus-within-
polyfill@5.0.9/dist/focus-within-polyfill.js"></script>
<script nomodule="" src="https://polyfill.io/v3/polyfill.min.js?
features=fetch"></script>
<!-- Performance API Polyfills -->
</script>
<script defer="" src="https://static.parastorage.com/services/tag-manager-
client/1.820.0/siteTags.bundle.min.js"></script>
<script async="" id="wix-perf-measure"
src="https://static.parastorage.com/services/wix-perf-measure/1.1095.0/wix-
perf-measure.umd.min.js"></script>
<!--pageHtmlEmbeds.bodyEnd start-->
<script type="wix/htmlEmbeds" id="pageHtmlEmbeds.bodyEnd
start"></script>
<script type="wix/htmlEmbeds" id="pageHtmlEmbeds.bodyEnd
end"></script>
<!--pageHtmlEmbeds.bodyEnd end-->
<!-- warmup data start -->
<script id="wix-first-paint">
if (window.ResizeObserver &&
(!window.PerformanceObserver || !
PerformanceObserver.supportedEntryTypes ||
PerformanceObserver.supportedEntryTypes.indexOf('paint') === -1)) {
18
 new ResizeObserver(function (entries, observer) {
entries.some(function (entry) {
var contentRect = entry.contentRect;
if (contentRect.width > 0 && contentRect.height > 0) {
requestAnimationFrame(function (now) {
window.wixFirstPaint = now;
dispatchEvent(new CustomEvent('wixFirstPaint')); });
observer.disconnect();
return true;}});}).observe(document.body);}
</script>
<script type="application/json" id="wix-warmup-data">{"platform":
{"ssrPropsUpdates":[{"comp-jwesbtoi":{"items":
[{"isVisible":true,"isVisibleMobile":true,"items":[],"label":"My
Subscriptions","link":{"href":"https:\/\/ionutgabrielratesc.wixsite.com\/
bioinginerie-medical\/account\/my-
subscriptions","target":"_self","type":"DynamicPageLink"}},
{"isVisible":true,"isVisibleMobile":true,"items":[],"label":"My Account","link":
{"href":"https:\/\/ionutgabrielratesc.wixsite.com\/bioinginerie-medical\/
account\/my-
account","target":"_self","type":"DynamicPageLink"}}]}}],"ssrStyleUpdates":
[],"ssrStructureUpdates":[]},"appsWarmupData":{"14cc59bc-f0b7-15b8-e1c7-
89ce41d0e0c9":{"initialData":{"counters":{},"roles":{},"permittedPagesMap":
{}}}},"ooi":{"failedInSsr":{}}}</script>
<!-- warmup data end -->
</body>
</html>

19