Ministerul educaţiei naţionale şi cercetării ştiinţifice

Liceul Teoretic ,,Mihai Viteazul” Băileşti

Lucrare pentru obţinerea certificatului de competenţe digitale

Anatomia şi fiziologia
Omului

Profesor îndrumător: Feldiorean Mihaela

Absolvent: Păuna Mihaela-Cristina
Anul: 2019
 Cuprins

1. Motivul alegerii temei...................................................... pag. 3

2. Noțiuni HTML, internet și CSS........................................... pag.4
3. Structura aplicației........................................................... pag. 9
4. Resurse hard și soft necesare........................................... pag. 16
5. Modalități de utilizare..................................................... pag.
6. Posibilități de dezvoltare................................................. pag.

1. Motivul alegerii temei

Am ales ca temă pentru site-ul meu Anatomia şi fiziologia omului,

deoarece pentru mine,anatomia reprezintă un mod de cunoaștere a lumii
și un izvor de cunoștințe.
Consider că acest site ar putea fi util pentru o persoană pasionată
de propriul organism, care vrea să cunoască mai multe lucruri despre el
însuşi.

2.Noțiuni HTML, internet și CSS

1. Limbajul HTML
Unul din primele elemente fundamentale ale WWW ( World Wide Web ) este HTML (
Hypertext Markup Language ), care descrie formatul primar in care documentele sunt distribuite
si văzute pe Web. Multe din trasaturile lui, cum ar fi independenta fata de platforma, structurarea
formatării si legaturile hypertext, fac din el un foarte bun format pentru documentele Internet si
Web.
Primele specificaţiile de baza ale Web-ului au fost HTML, HTTP si URL.
HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. HTML a fost vazut ca o
posibilitate pentru fizicienii care utilizeaza computere diferite si schimbe între ei informaţie
utilizind Internetul. Erau prin urmare necesare citeva trasaturi: independenta de platforma,
posibilităţi hypertext si structurarea documentelor.Independenta de platforma înseamnă ca un
document poate fi afişat in mod asemănător de computere diferite ( deci cu fonte, grafica si
culori diferite ), lucru vital pentru o audienta atît de variata.
Hipertext înseamnă ca orice cuvânt, fraza, imagine sau alt element al documentului văzut de un
utilizator ( client ) poate face referinţa la un alt document, ceea ce uşurează mult navigarea intre
multiple documente sau chiar in interiorul unui aceluiasi document. Structurarea riguroasa a
documentelor permite convertirea acestora dintr-un format in altul precum si 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 si HTML 2.0, HTML 3.0,HTML 3.2, HTML 4.0 si, cel mai recent, HTML 4.01. In acelaşi
timp, autorii de browsere, cum ar fi Netscape si Microsoft, au dezvoltat adesea propriile
"extensii" HTML in afara procesului standard si le-au incorporat in browserele lor. In unele
cazuri, cum ar fi tagul Netscape , aceste extensii au devenit standarde de facto adoptate de autorii
de browsere.
HTML 2.0, elaborat in Iunie 1994, este standardul pe care ar trebui sa-l suporte toate browserele
curente -- inclusiv cele mod text. HTML 2.0 reflecta concepţia originala a HTML ca un limbaj
de marcare independent de obiectele existente pentru aşezarea lor in pagina, in loc de a specifica
exact cum ar trebui sa arate acestea. Dacă doriţi sa fiţi siguri ca toţi vizitatorii vor vedea paginile
aşa cum trebuie, folosiţi tagurile HTML 2.0.
Specificaţia HTML 3.0, Enunţata in 1995, a încercat sa dezvolte HTML 2.0 prin adăugarea unor
facilităţi precum tabelele si un mai mare control asupra textului din jurul imaginilor. Deşi unele
din noutăţile HTML 3.0 erau deja folosite de autorii de browsere, multe nu erau încă. In unele
cazuri, taguri asemănătoare implementate de autorii de browsere au devenit mai răspândite decât
tagurile "oficiale". Specificaţia HTML 3.0 acum a expirat, deci nu mai este un standard oficial.
In Mai 1996, W3C a scos pe piaţa specificaţia HTML 3.2, care era proiectata sa reflecte si sa
standardizeze practicile acceptate la scara larga. Deci, HTML 3.2 include tagurile HTML 3.0 ce
erau adoptate de autorii de browsere ca Netscape si Microsoft plus extensii HTML răspândite. In
Bilanţul asupra HTML, W3C recomanda ca providerii de informaţii sa utilizeze specificaţia
HTML 3.2.Versiunile curente ale majorităţii browserelor ar trebui sa suporte toate, sau aproape
toate aceste taguri.
De asemenea exista extensii Netscape si Microsoft care nu fac parte din specificaţia HTML 3.2,
ori pentru ca sunt mai puţin utilizate, ori au fost omologate după apariţia HTML 3.2. Pentru ca
navigatorul Netscape a fost printre primele browsere care suporta anumite taguri HTML 3.0, iar
Netscape deţine in jur de 70% din piaţa de browsere, mulţi au crezut eronat ca toate extensiile
Netscape (incluzând taguri ca si facilitaţi ca ferestrele) fac parte din HTML 3.0 sau HTML 3.2.

La momentul aparitiei acestui tutorial, HTML 4.0 este larg utilizat si au fost deja publicate
specificatiile HTML 4.01.
Documentele HTML sint documente in format ASCII si prin urmare pot fi create cu orice editor
de texte. Au fost insa dezvoltate editoare specializate care permit editarea intr-un fel de
WYSIWYG desi nu se poate vorbi de WYSIWYG atita vreme cit navigatoarele afişează acelasi
document oarecum diferit, in functie de platforma pe care ruleaza. Au fost de asemenea
dezvoltate convertoare care permit formatarea HTML a documentelor generate ( si formatate ) cu
alte editoare. Evident conversiile nu pot patra decit partial formatarile anterioare deoarece
limbajul HTML este inca incomplet.
Orice document HTML începe cu notaţia <html> si se termina cu notaţia </html>. Aceste
"chestii" se numesc in literatura de specialitate "TAG-uri".Prin convenţie, toate informaţiile
HTML încep cu o paranteza unghiulara deschisa " < " si se termina cu o paranteza unghiulara
închisa " > ".
Tag-urile intre aceste paranteze transmit comenzi către browser pentru a afişa pagina intr-un
anumit mod. Unele blocuri prezintă delimitator de sfârşit de bloc, in timp ce pentru alte blocuri
acest delimitator este opţional sau chiar interzis.
Intre cele doua marcaje <html> si </html> vom introduce doua secţiuni:
- sectiunea de antet <head>...</head> si - corpul documentului <body>...</body>. Blocul
<body>...</body> cuprinde conţinutul propriu-zis al paginii HTML, adică ceea ce va fi afişat in
fereastra browser-ului.

O eticheta poate fi scrisa atât cu litere mici, cat si cu litere mari. <html> = <HTML> =
<Html>. Caracterele "spaţiu" si "CR/LF" ce apar intre etichete sunt ignorate de către browser.
Asadar, un document HTML simplu arata asa:

2. Limbajul CSS
 Cascading Style Sheets, sau CSS pe scurt, este un standard simplu al zilelor noastre, ce ofera
designerilor/programatorilor un mod eficient de a controla modul de prezentare a paginilor
"WEB". In zilele noastre CSS a ajuns sa fie in mod primar, un limbaj folosit exclusiv doar pentru
"web design" - insa nu putem exclude faptul ca acest limbaj este folosit si in alte medii de
programare.
In comparatie cu era anilor 90, cand controlul prezentarii unei pagini se facea prin tag-uri
HTML, divizate intre ele in mai multe fisiere, ce confereau o munca enorma in cazul unei
actualizari, CSS vine cu un nou standard, si anume ca printr-un singur fisier ( o conventie intre
programatori este sa se foloseasca numele general 'style.css' ) - sa fie controlat intreg aspectul
proiectului WEB.
CSS nu necesita cunostinte avansate de hardware sau software, ci mai mult cateva cunostinte
HTML, pentru a putea sa-l invatam. Citind acest manual, presupunem ca cititorul are deja
cunostinte temeinice de HTML si ca intelege ce e acela un SGML ( Standard Generalized
Markup Language ).
Inainte erei CSS, programatorii erau nevoiti sa controleze aspectul proiectului lor WEB prin tag-
uri de font, pentru a stabili culoarea, marimea si familia de font-uri a diferitelor parti ale paginii
web.
ex.
<font face="Verdana, Arial" size="+1" color="blue">Hello World!</font>

Desi aceasta metoda este efectiva in controlarea diferitelor parti ale site-ului web, actualizarea
codului consuma timp/bani, mareste marimea fisierelor si creste posibilitatea sa se produca
greseli in codul vizat.
Prin CSS, am putea spune direct :
<p>Hello World</p>

si sa folosim CSS pentru a :

<style type="text/css" media="all">
p {
color: blue;
font-size: small;
font-family: Verdana, Arial, "sans-serif";
}
</style>

Astfel ajungem la un concept vechi in programare si anume "separarea codului de prezentare" -

lucru ce l-am realizat aici. Deasupra la toate CSS vine si simplifica munca enorma realizata prin
tag-uri <font> - simplifica limbajul in sine, si aduce imbunatatiri in comparatie cu limitele
HTML-ului.
2.3 Internetul
Reţeaua Internet a apărut acum 20 de ani, printr-un efort de a conecta reţeaua Departamentului
Apărării Statelor Unite (cunoscută sub numele de ARPAnet – Advanced Research Projects
Agency) cu alte reţele conectate prin dispozitive radio sau satelit.
ARPAnet a fost o reţea experimentală proiectată să asigure suportul pentru cercetarea militară -
în particular, cercetări privind construirea unor reţele care puteau rezista cu succes unor
întreruperi parţiale.
Una din cele mai importante reţele noi apărute ulterior a fost NSFNET, înfiinţată de NSF
(National Science Fundation), o agenţie guvernamentală americană. Spre sfirşitul anilor ‘80
această organizaţie a creat cinci noduri de comunicaţii puternice în centrele universitare
americane cele mai importante. Problema care apărea acum era datorată costului ridicat al
serviciului telefonic prin linii telefonice închiriate pe distanţe foarte mari.
Soluţia a constat în înfiinţarea unor centre regionale. Astfel, aproape fiecare campus universitar a
fost conectat la centrul Internet cel mai apropiat.
În 1982 - ARPANet s-a unit cu MILNet (Reţea militară), cu NSFNet (cercetători şi oameni de
ştiinţă) şi cu alte reţele (de exemplu BITNet şi USENet, reţele concepute pentru schimbul de
ştiri).
În anii ‘90 Internetul creşte cu o viteză pe care cercetătorii sau fondatorii acestei reţele nici nu au
visat-o. Noi companii se lansează cu o viteză fenomenală şi multe persoane accesează Internetul
prin distribuitori sau servicii familiare.
În prezent mediul Internet este constituit din circa 23 000 de sisteme de reţele direct accesibile
prin Internet (date care la ora redactării acestei lucrări pot fi deja învechite!!!).
Viitorul Internetului este deosebit de promiţător, programele folosite devin din ce în ce mai
prietenoase şi mai uşor de folosit. De asemenea, conexiunile se realizează cu viteze din ce în ce
mai mari.
Serviciile on-line (CompuServe, America Online, Delphi, Microsoft Network), sunt companii
care deţin propriile reţele pentru a furniza diverse servicii, ca de exemplu ştiri internaţionale,
servicii de comerţ etc.

3. Structura aplicației
Aplicația are următoarea structură:
1. Un DIV care conține toate elementele aferente paginii
 2. Un DIV care conține butoanele de navigație către paginile principale

Aplicația a fost realizată cu ajutorul editorului de cod-sursă Sublime Text 3

Codul-sursă al paginii Index.html:

<html>

<head>

<link rel="shortcut icon" href="Data/12236133471799352283wirelizard_High_Wing_Airplane.svg.hi.png">

<link rel="stylesheet" href="Data/styles.css">

</head>

<title>

Anatomia şi fiziologia omului

</title>

<body>

<div id="main" style="height: 700px;">

<div id="top">

</div>

<div id="menu">

<div class="button" style="background-color: rgba(19, 129, 45, 0.87);"

onclick="navigate('Index.html');"><span> Home </span></div>

<div class="button" onclick="navigate('Anatomia omului.html');"><span> Despre

</span></div>

<div class="button" onclick="navigate('Sisteme.html');"><span> Sisteme </span></div>

<div class="button" onclick="navigate('Foto.html');"><span> Foto </span></div>

<div class="button" onclick="navigate('Bibliografie.html');"><span> Bibliografie </span></div>

</div>

<p style="font-weight:bold; color:white; font-size: 40px; margin-left:30px;">

Păuna Mihaela Cristina

</p>

<p style="font-weight:bold; color:white; font-size: 25px; margin-left:30px;">

Clasa a XII-a A
 </p>

<p style="font-weight:bold; color:white; font-size: 35px; margin-left:30px;">

Liceul teoretic „Mihai Viteazul”

</p>

<p style="font-weight:bold; color:white; font-size: 35px; margin-left:30px;">

Profesor îndrumător: Feldiorean Mihaela

</p>

</div>

<script language="javascript" type="text/javascript">

function navigate(location)

window.location.href = location;

</script>

</body>

</html>

Codul-sursă al fișierului styles.css:

body

background-image: url("palehouse-common-filming-laura-radford-4.jpg");

background-attachment:fixed;

background-size: cover;

body:hover

#main

{
 background-color: rgba(29, 23, 49, 0.87);

width: 900px;

height: 1200px;

margin: 100px

auto;

#top

background-image: url("sld_pag_01-fd21e0e085.jpg");

width: 900px;

height: 200px;

background-size: cover;

align-items: center;

.button

display: inline-block;

border-radius: 4px;

background-color: rgba(106, 16, 16, 0.87);

border: none;

color: #FFFFFF;

text-align: center;

font-size: 20px;

padding: 10px;

width: 100px;

transition: all 0.5s;

cursor: pointer;

margin: 5px;

.button span

{
 cursor: pointer;

display: inline-block;

position: relative;

transition: 0.5s;

#ai

background-size: cover;

background-repeat: no-repeat;

background-position: 50% 50%;

width:250px;

height:250px;

#ai:hover

outline: 5px solid green;

cursor:pointer;

.button span:after

content: '»';

position: absolute;

opacity: 0;

top: 0;

right: -20px;

transition: 0.5s;

.button:hover span

padding-right: 25px;

}
.button:hover span:after

opacity: 1;

right: 0;

#menu

margin: 15px;

width: 900px;

height: auto;

border-style: solid;

border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);

#q

font-size: 20px;

color: white;