Colegiul „Alexandru cel Bun” Gura Humorului

Proiect pentru obţinerea atestării

profesionale în informatică

Elev: Sahlean Adriana Cosmina

Profesor coordonator: Bratu Mihaela

ANUL 2021
 TITLUL LUCRĂRII:

ANALIZATORII CORPULUI UMAN

2
 Cuprins:
Argumentarea alegerii.............................. 4
Mediul de lucru.......................................... 5
Limbajul HTML...........................................8
Realizarea aplicației............................... 29
Bibliografie................................................34

3
 Argumentarea alegerii

Am ales această temă deoarece sunt o persoană pasionată de anatomie și

întotdeauna am manifestat un interes aparte față de analizatorii corpului uman ,
dorindu-mi să cunosc cât mai bine organele ce contribuie la integrarea organismului în
mediu și coordonarea funcțiilor organismului. De asemenea , un alt motiv pentru care
am optat pentru acestă temă este acela de a-i motiva pe tineri să-și cunoască mai
organele de simț.

Acest proiect prezintă informații detaliate despre alcătuirea fiecărui analizator în

parte .

Analizatorii sunt sisteme complexe care au rolul de a recepționa, transmite și

transforma în senzații specifice informațiile primite din mediul extern sau intern. Ei
contribuie la realizarea integrării organismului în mediu și la coordonarea funcțiilor
organismului.

Analizatorii sunt sisteme morfologice care: - sesizează prin receptori specifici,

modificările din mediul extern și intern, ce acționează asupra organismulu:

- conduc impulsurile nervoase în ariile corticale corespunzătoare;

- realizează analiza și sinteza impulsurilor nervoase determinând formarea de

senzații specifice;

- au un plan unic de organizare, fiecare fiind alcătuit din trei

segmente :periferic (receptor), intermediar (de conducere) și segmentul central;

4
 Mediul de lucru

Site-urile Google sunt structurate wiki și pagini web, instrument creat bazat pe
web Google Docs Editors. Serviciul include de asemenea, Foi de calcul, Desene
Google, Formulare Google și Google Keeps. Site-urile Google sunt disponibile numai ca
aplicații web.

Aplicația permite utilizatorului să creeze și să editeze fișiere online în timp ce

colaborează cu alți utilizatori în timp real.

Site-urile Google au început ca JotSpot, numele și singurul produs al unei companii

de software care oferea software
social pentru interprinderi .

Serviciul a fost gratuit , dar

utilizatorii aveau nevoie de un
domeniu , oferit de Google pentru
10 USD. Cu toate acestea , din
2008, Site-urile au devenit
disponibile gratuit, separat de
Google Apps și fără a fi nevoie de
domeniu .

Acesta are niște limitări

-extensiile gadget-uri terță Google Sites clasice nu mai sunt acceptate;

-nu există suport pentru pentru Google Tag Manager;

-opțiuni de stil foarte limitate, fără suport pentru CSS personalizat;

-nu pot găzdui anunțuri Google AdSense;

-fără API;

5
 Google a introdus o construcție completă a platformei Google Sites, denumită
Noul Google Sites, împreună cu programul de tranziție de la Google Sites clasic. Noul
Google Sites nu folosește tehnologia JotSpot.

Site-urile Google clasice:

-proprietarii își pot asocia site-ul cu un nume de domeniu personalizat;

-permisiuni de acces;

-șabloane de pagină;

-fișiere atașate;

-editarea sursei HTML;

Extensii:

-Gadgeturi - module XML care pot fi încorporate într-un site și pot conține CSS și
JavaScript personalizate

1. Separarea sau abstractizarea - codul personalizat poatr fi abstractizat într-un fișier

distinct .

2. Reutilizare - același obiect gadget poate fi reutilizat de mai multe site-uri pe măsură
ce este publicat public.

Limitări:

- fără utilizare deschisă a cascading Style Sheets (CSS) sau JavaScript. JavaScript
poate fi utilizat în limitele unui obiect gadget încorporat sau al casetei HTML, Inline CSS
poatr fi utilizat în zona de conțiut a paginii web;

- capacități limitate de magazin electronic, trebuie să utilizați gadgetul Google i-store

pentru a adăuga un coș de cumpărături , iframe un furnizor terț de magazin electronic,
cum ar fi Amazon sau buton Google Buy Now;

-utilizarea limitată a codului HTML. HTML este verificat și modificat atunci când este
salvat, JavaScript este făcut sigur cu Caja. CSS nu poate fi încorporat în șabloanele
temei ; cu toate acestea, CSS inline poate fi utilizat în zona de conținut a paginii web.

- site-urile găzduite de Google Sites, nu sunt disponibile pentru rezidenții țărilor în care
serviciile Google sunt blocate.

. Cadgeturile ating două scopuri:

6
 Site-urile Google noi

Caracteristici:

 proiectare receptivă a noilor teme, oferă o caracteristică pentru previzualizarea

paginii redate așa cum apare atât pe desktop, cât și pe dispozitivele mobile, înainte
de publicarea finală a paginii;

 cartarea numelui de domeniu - proprietarii își pot asocia site-ul cu un nume de

domeniu personalizat;

 editarea prin glisare și fixare - elementele paginii pot fi glisate și plasate și aranjate
automat pe un aspect al grilei;

 niveluri de permisiune ( proprietar, editor și vizualizator);

 suport pentru încorporarea HTML și JavaScript ;

 meniuri autoamte pe mai multe niveluri;

 integrare cu Google Drive, Google Maps și multe altele;

 proiectaț și editați un aspect al site-ului web;

 Încorporați imagini, sigle, documente sau videoclipuri;

Limitări:

 extensiile gadget-uri terță parte Google Sites clasice nu mai sunt acceptate;

 nu există suport pentru Google Tag Manager;

 nu există suport pentru Google Apps Script;

 opțiuni de stil foarte limitate, fără suport pentru CSS personalizat;

 nu pot găzdui anunțuri Google AdSense;

fără API;

7
 Limbajul HTML

Introducere

HTML (HyperText Markup Language) este un limbaj utilizat pentru crearea

paginilor web ce pot fi afișate țntr-un browser (sau navigator).

HTML este folosit pentru prezentarea unui conținut (text, imagine) într-o pagină
web, furnizează mijloacele prin care conținutul unui document poate fi structurat și
adnotat cu diverse tipuri și metode și indicații de redare și afișare . Aceste indicații pot
varia de la decorațiuni minore ale textului cu ar fi culoarea sau sublinierea unui cuvânt
ori introducerea unei imagini, până la adăugarea de elemente sofisticate , tabele , hârti
de imagini , formulare și cod CSS sau scripturi JavaScript .

Metadele pot include informații despre titlu și autorul documentului , informații

structurale despre cum este împărțit documentul în diferite segmente , paragrafe liste,
titluri, etc. și informații esențiale care permit ca documentul să poată fi legat de alte
documente pentru a forma astfel hiperlink-uri. HTML este un format text proiectat pentru
a putea fi citit și editat utilizând un editor de text simplu , editarea și înțelegerea acestor
pagini necesită cunoștințe de HTML.

Există și editatoare grafice , de tip WYSIWYG (What You See Is What You Get - „
„ ceea ce vezi este ceea ce obții ” ), cum ar fi Macromedia Dreamweaver, Adobe
GoLive sau Microsoft FrontPage , care permit ca paginile web să fie tratate
asemănător cu documentele Word și generează ele cod HTML pentru conținutul
paginii, dar aceste programe generează un cod HTML care este de multe ori prea
încărcat și de proastă calitate.

Principalele elemente HTML

8
 HTML este un set de coduri logice care constituie apariția unui document web și a
informțiilor pe care le deține. Codurile sunt scrise între „< „ și „ > „ , cu toate că nu sunt
chiar paranteze .

Exemplu: <BODY>

Cele mai multe elemente (numite și tag-uri ) au un element (tag) de deschidere și un

element de închidere distins prin ” / „ în interiorul parantezei deschise „< „.

Exemplu: < /FONT>

Primul cuvânt care apare înăuntru „< „ se numește element sau eticheta HTML și
spune browser-ului să facă ceva , precum < FONT>.

Cuvintele care urmează după element în interiorul „< >„ se numesc atribute care
descriu proprietățiile elementului . Cum ar fi : culoarea , mărimea, etc.

Atributele sunt separate prin spațiu și urmate de semnul egal „ = „, după care sunt
scrise , între ghilimele ( ” ” ) valorilor atributelor. Astfel , o etichetă HTML poate conține
elementul de identificare , atribute și valori.

În următorul exemplu elementul este FONT atributul COLOR și valoarea BLUE.

< FONT COLOR=” BLUE ”>

Structura documentului HTML

Un document ( fișier ) HTML este alcătuit din mai multe elemente și atributele lor.

La început un element HTML cuprinde datele documentului . Acest element conține

două sub-elemente principale : HEAD și BODY. În HEAD se poate adăuga titlul paginii
web și alte elemente numite metatag-uri , precum și scripturi JavaScript și stil-uri CSS.
În BODY se adaugă conținutul documentului care va fi afișat în pagina web.

Exempu: <html>

<head>

<title>

<body>

9
 Crerarea și editatrea paginii HTML

Sunt mai multe programe cu care se pot crea pagini web , chiar fără a cunoaște
limbajul HTML, cum sunt Microsoft FrontPage sau Macromedia Dreamweaver.

Editoarele de text sunt programele de bază , și cele mai folosite, pentru editarea
paginii web. Avantajul folosirii lor este simplitatea , pentru care paginii web sunt
necesare câteva din codurile invizibile ale limbajului HTML , astfel se crează
documente rapis și ușor , în plus ocupă foarte puțin spațiu și resurse de memorie ,
acestea însă necesită cunoașterea limbajului HTML.

Dintre editoarele de text cunoscute cel mai folosit este NotPad , dar poate fi
utilizat orice editor de text. Pentru începători și pentru ușurința cu care se lucrează ,
este recomandat folosirea aplicației NotePad sau Notepad++ , dar cei avansați pot
folosi și altele cum ar fi Dreamweaver.

Crearea bazei de început a unui document

Pentru început se deschide aplicația NotePad și se scrie structura de bază a unei

pagini web. Aceasta este :

<html>
<head>
<title> Titlul </title>
</head>
<body>
Continut
</body>
</html>

Acum paginava are HEAD și BODY în interiorul bazei <HTML> .

În interiorul elementului HEAD are elementul TITLE , care va fi completat cu un text

reprezentativ ca titlu al documentului; și în BODY un text ” Conținut ”.

Ceea ce se adaugă între tag-urile <body> </body> reprezintă conținutul paginii ,

care va fi afișat în brweser.

10
 Exemplu cum ar putea fi completat tag-ul TITLE și un mic conțiut în pagină :

<html>
<head>
<title>@ - Cursuri, Jocuri si Anime</title>
</head>

<body>
<h1>Pagina HTML</h1>
Lectii, exemple si explicatii.
</body>
</html>

Proprietățile documentului pot fi controlate de atributele elementului Body, de

exemplu culorile pentru fondul paginii, pentru text și diferite faze ale link-urilor.

Culorile sunt setate folosind culorile de bază : roșu, verde și albastru; expresia
folosită RGB, acestea sunt reprezentate ca valori hexadecimale și sunt scrise între
ghilimele, la început trebuie adăugat caracterul ” # ”. Fiecare două unități ale codului
reprezintă una din culorile RGB.

De exemplu #00aa11 reprezintă o culoare care nu are roșu ( 00 ), are verde ( aa ) și

albastru are mai puțin ( 11 ).

11
 Formatul textului
HTML cuprinde mai multe elemente , tag-uri, pentru afișarea textului în mai multe
formate cu aspecte grafice diferite.

Tag-ul <FONT>... </FONT>

Cu acest element <FONT>, se poate modifica aspectul textului, cum sunt tipul
fontului folosit , mărimea și culoarea textului.

Mărimea textului poate fi modificată cu elementul <FONT> și atributul SIZE.

Atributul SIZE poate lua valori numericede la unu la șapte și pe lângă acestea poate
folosi , ca valoare relativă , semnele ” + ” sau ” - ”. Textul normal ( dacă nu are acest
atribut ) are valoarea trei.
Exemplu: <font size="+2">Doua marimi mai mare</font>
Tipul fontului poate fi modificat cu elementul FONT și atributul FACE.

Exemplu:
<font face="Arial Black">Acesta este tipul de font Arial Black</font>

Culoarea textului poate fi modificată cu elementul FONT și atributul COLOR.

Exemplu:
<font color="#00dd00">Acest text are culoarea verde</font>

Bold, Italic, Underline și alte elemente

Elementele des folosite pentru formatul textului sunt:

- BOLD ( îngroșat );
- Italic ( înclinat );
- Underline ( subliniat );
Exemple:
<b> Bold </b>
<i> Italic </i>
<u> Underline </u>
Alte elemente folosite pentru formatul textului sunt:

12
 - <pre> Performated </pre> - Textul încadrat de elementul PRE este prezentat într-
un singur font , oricare ar fi atributul FACE. Spațiile mai lungi și liniile necesare sunt

prezentate așa cum sunt scrise în NotePad , ne mai fiind nevoie de alte elemente
adiționale , cum ar fi <br> pentru o nouă linie și &nbsp pentru mai mult spațiu între
cuvinte.

- <em> Accentuare ( Emphasis ) </em> - Browser-ul de obicei arată acest element

ca italic.

- <strong> Strong </strong> - Browser-ul de obicei arată acest elemant ca bold.

- <tt> Teletype </tt> - Ca și PRE, browesr-ul prezintă acesta într-un singur tip de font,
indiferent de fondul ales cu atributul FACE, în interiorul elementului FONT.

- <cite> Citatie </cite> - Reprezintă o citație din document.

Mai jos avem câteva exemple de coduri și modul lor de afișare în browser:

<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<p><font size="+1">O singura marire</font>- normal -
<font size="-1">O singura micsorare</font><br>
<b>Bold</b>- <i> Italic </i> - <u> Subliniat </u> -
<font color="#ff0000"> Colorat </font><br>
<em>Accentut</em> - <strong> Strong </strong> -
<tt>Tele type</tt><br>
<cite> Citatie </cite></p>
</body>
</html>

În browser va fi afișat așa:

O singură mărire- normal - O singură micșorare

Bold- Italic - Subliniat - Colorat

13
Accentuat - Strong - Teletype
Citatie

Alinierea

Câteva elementepot avea atributul ( ALIGN ) pentru aliniere, cum ar fi Titlurile

<Hx>, Paragraful <p>... </p> și Linia orizontală <hr>, Cele trei vașori ale atributului
ALIGN sunt LEFT, RIGHT, și CENTER.

Aliniamentul celor mai multe elemente se face cu ajutorul altor elemente: - <div
align = ” valoare” > .... </div> Poate conține cele mai multe elemente . Tot ce este
poziționat cu elementul DIV poate fi aliniat oriunde-n pagină indiferent dacă în acel loc
se află și alt ceva. ( Imagine, Text, ....).

- <center> ... </center> Va centra elementele

Alte etichete HTML pentru formatul textului

- <strike> Text tăiat </strike>;

- <big> Prezintă textul într-un font mare </big>;

- <small> Prezintă textul într-un font mic </small>;

- _{Afișează textul în poziția subscript}

- ^{Așează textul în poziția superscript};

Exemple de coduri de mai sus și felul cum sunt afișate de browser:

<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>
<strike> Text taiat </strike><br>
<big> Prezinta textul intr-un font mare </big><br>
<small> Prezinta textul intr-un font mic </small><br>
14
_{Aseaza textul in pozitia subscript} normal
^{Aseaza textul in pozitia superscript}<br>
</p>
</body>
</html>

În browser va fi afișat așa:

Text taiat
Prezinta textul intr-un font mare
Prezinta textul intr-un font mic
Aseaza textul in pozitia subscript normal
Aseaza textul in pozitia superscript

Următoarele elemente pentru format dunt folosite mai rar și sunt folosite pentru
documentele cu aplicații tehnice:

- <dfn> Definește exemplul de termen închis </dfn>;

- <code> Folosit pentru extragerea unui cod de program </code>;

- <samp> Folosit pentru simple producții de programe, scripturi, etc. <samp>;

- <kbd> Folosit pentru textul care va fi scris de utilizator </kbd>;

- <var> Folosit pentru variabile sau argumente de comenzi </var>;

Exemplu cu aceste coduri de mai sus și felul cum sunt afișate de browser:

<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>
<dfn> Definite exemplu de termen inchis </dfn><br>
<code> Folosit pentru extragerea unui cod de program </code><br>
<samp> Folosit pentru simple productii de programe, scripturi , etc. </samp><br>
<kbd> Folosit pentru text care va fi scris de utilizator </kbd><br>
<var> Folosit pentru variabile sau argumente de comenzi </var><br>
</p>

15
</body>
</html>

În browser fi afișate astfel:

Definiție exemplu de termen închis

Folosit pentru extragerea unui cod de program
Folosit pentru simple producții de programe, scripturi , etc.
Folosit pentru text care va fi scris de utilizator
Folosit pentru variabile sau argumente de comenzi

Marcatori și numerotare
HTML conține câteva tag-uri pentru așezarea conținutului în pagini . Prin acestea
textul este mai ușor de citit și evidențiat.

Un element des folosit în formarea listelor ( neordonate ) este <ul>.

<ul> este elementul de început și după scrierea listei se încheie cu </ul>.

Majoritatea elementelor pentru marcatori și numerotate sunt compuse din unu sau
mai multe elemente <li> .... </li> ( list element ). Fără atributul ” type ” specificat în ”
<ul> ” , aceasta prezintă un marcaj ca un bullet.

De exemplu:

<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ul>

16
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ul>

</body>
</html>

Alte elemente pentru așezarea textului sunt tag-ul <dl>, care cuprinde în el
elementele <dt> și <dd>:

- <dl> .... </dl> este folosit ( împreună cu ” dt ” și ” dd ” ) pentru definirea și

încadrarea unei liste de definiții.

- <dt> .... </dt> Definește elementul din listă. Fiecare tip de astfel de element trebuie
precedat de unul sau mai multe elemente <dd> .... </dd> , folosite pentru descrierea
elementului definit. Aceste elemente ajută pentru a da un aspect ordonat și plăcut
textului și a putea face o separare mai bună a conținutului.

Exemplu:

<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd> - Hyper Text Markup Language</dd>
<dd> - Limbaj pentru pagini web</dd>
<dt>Dog</dt>
17
 <dd>dog = caine</dd>
<dd>animal de casa</dd>
<dl>
</body>
</html>

Iar în pagină va apărea astfel:

HTML
- Hyper Text Markup Language
- Limbaj pentru pagini web
Dog
dog = caine
animal de casa

Adăugare imagini

HTML conține și elemente pentru adăugarea de imagini în pagina web.

Cele mai folosite formate pentru imaginile adăugate într-o pagină HTML sunt GIF
și JPEG ( JPG, JPE ), avantajul acestora este ca imaginile care au aceste extensii au o
mărime mică ( in bytes ), având maximum 256 de culori

Alte tipuri de formate, folosite mai rar, sunt :PNG, BMP, TIFF, PCX.

Pentru a introduce o imagine într-un format HTML se folosește elementul <img> ....
</img> împreună cu următoarele atribute :

- src : Valoarea acestui atribut determină locația fișierului care conține imaginea;

- alt : La acest atribut se scrie textul care va apărea dacă imaginea nu e afișată ( de
unele browsere ) sau când utilizatorul va poziționa , în browser , mouse-ul peste
imagine;

- align : Acest atribut permite așezarea imagini în locuri diferite pe pagină . Pot fi
folosite următoarele atribute : Bottom, Middle, Top, Left, Right, TextTop, ABSMiddle,
Baseline, ABSBottom;

18
 - width : Valoarea acestui atribut reprezintă lungimea imaginii, în pixeli. Dacă nu este
scris, imaginea va fi prezentată cu lungimea originală;

- height : Valoarea acestui atribut reprezintă înalțimea imaginii, în pixeli. Dacă nu este
scris imaginea va fi prezentată cu înalțimea originală;

- border : Prin adăugarea acestui atribut imaginea va apărea înconjurată de un chenar.

De exemplu o valoare de cinci va pune un spațiu invizibil , de cinci pixeli , în părțile
orizontale ale imaginii;

- vspace : Acest atribut este pentru spațiu vertical pe ambele părți ale imaginii ,
specificat în pixeli, De exemplu o valoare de cinci va pune un spațiu invizibil , de cinci
pixeli, în părțile verticale ale imaginii;

De exemplu, modul de introducere a unei imagini pe o pagină web și cum pot fi

folosite atributele :

<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<img src="imagine.jpg" alt="puteti adauga orice text" align="top" width="100"
height="120" border="4" hspace="10" vspace="7"></img>
</body>
</html>

Creare de link-uri

Link-urile sunt elemente HTML cu ajutorul cărora putem deschide alte pagini. Sunt
foarte importante în crearea de pagini web.

Forma generală pentru crearea unui link este următoarea:

<a href="url" title="Titlu link">Nume</a>

- a este elementul specific pentru crearea link-urilor;

- href este atributul care marchează indicarea adresei link-ului;

19
 - title este atributul prin care se dă un titlu link-ului;

- Titlu link este textul ascuns care apare când este poziționat mouse-ul deasupra link-
ului;

- Nume este textul care va apărea în browser și pe care trebuie dat clik cu mose-ul . În
loc de acest text se poate folosi o imagine , astfel ” Nume ” va fi înlocuit cu :

<img src="nume_imagine.extensie">

Când documentul este alcătuit din mai multe cadre se folosește și atributul target

.Culoarea link-urilor poate fi schimbată de următoarele atribute , care trebuie scrise

în interiorul elementului <BODY>

link="#0000ff - reprezintă culoarea link-ului în browser;

Link-urile sunt de două feluri :

1. Link-uri externe ( sunt cele mai utilizate ) , care sunt și ele de două feluri :

a) Linl-uri externe către paginile aceluiași site. Pentru acestea URL-ul poate să
nu includă și domeniul site-ului, cum ar fi ” http://www.nume.c9m ” , ci se poate
folosi doar cale în directoare , numele și extensia documentului la care se face
saltul.

De exemplu :

- dacă documentul țintă se află în același director cu fișierul în care se scrie link-ul,
codul va fi scris așa : <a href="nume_fisier.extensie" title="Titlu
link">Nume</a> ;

- dacă documentul țintă se află într-un director anterior celui ăn care se află fișierul în
care se scrie link-ul , codul va fi scris așa : <a href="../nume_fisier.extensie"
title="Titlu link">Nume</a> ;

- dacă documentul țintă se află într-un director din cel care se află fișierul în care se
scrie link-ul , codul va fi scris așa : <a href="director/nume_fisier.extensie"
title="Titlu link">Nume</a> ;

b) Link-uri externe către alte site-uri . Aici adresa URL din link trebuie să conțină
și domeniul ( numele site-ului ) paginii țintă , codul HTML se va scrie, de

20
 exemplu așa : <a href="http://nume_site/pagina" title="Titlu
link">Nume</a> ;

2. Link-uri interne : sunt link-uri către alte texte din aceași pagină . Se folosesc
când pagina respectivă este lungă și e nevoie să se sară spre anumite texte din
pagină.

Pentru crearea de link-uri interne trebuie urmăriți următorii pași :

 Se scrie următorul cod la textul țintă , care marchează locația unde se va face saltul
și se află în aceași pagină link-ul : <a name="cuvant">Textul tinta</a>

Attributul ” name ” indică ținta pentru link , ” cuvânt ” poate fi orice cuvânt, dar trebuie
să fie unic pentru fiecare link, ” textul țintă ” este textul unde se face saltul

 În locul unde vrem să fie link-ul ( acolo unde o să dăm click pentru a face saltul
către textul ales ) , se scrie următorul cod : <a href="#cuvant">Nume</a>

Aici ” cuvânt ” este același text scris la subpunctul anterior.

Link-urile interne și externe pot fi combinate. Astfel putem face saltul către un anumit
text aflat într-o pagină. În pagina respectivă se scrie codul de la pasul a), la textul ales
oentru ținta link-ului , iar în pagina în care va fi link-ul se scrie :

<a href="adresa_pagina#cuvant">Nume</a>

Lucru cu tabele
Tabelele sunt elemenete foarte utile pentru așezarea și prezentarea conținutului

într-o pagină web.

Crearea de tabele

Pentru a crea tabele în paginile web se folosește elementul </table> .... </table> ,
acesta încadrează alte patru sub-elemente, care alcătuiesc structura tabelului .
- linia ( rândul ) tabelului <tr> ... </tr>;

- titlul tabelului <th> ... </th>;

- coloanele tabelului ( datele ) <dt> ... </dt>;

- sub-titlul tabelului <caption> ... </caption>;

21
 Linia tabelului de obicei conține elementul pentru titlurile tabelului și elementul
pentru coloanele tabelului. În cadrul elementelor pentru titluri și coloanele tabelului se
pot adăuga și alte elemente HTML, cum ar fi cele pentru formatul textului, paragrafe ,
link-uri sau imagini .

Exemplu de cod HTML pentru crearea unui tabel :

<table border="1">

<tr>

<th>titlu 1</th>
<th>titlu 2</th>
</tr>
<tr>
<td>linia 2- coloana 1</td>
<td>linia 2- coloana 2</td>
</tr>
<tr>
<td>linia 3- coloana 1</td>
<td>linia 3- coloana 2</td>
</tr>
<tr>
<td>linia 4- coloana 1</td>
<td>linia 4- coloana 2</td>
</tr>
</table>

Iar în pagina web va apărea astfel :

titlu 1 titlu 2

linia 2- coloana 1 linia 2- coloana 2

linia 3- coloana 1 linia 3- coloana 2

linia 4- coloana 1 linia 4- coloana 2

Atributele tabelului
22
- width = specifică lungimea tabelului ( în pixeli sau procente din lungimea paginii );

- border = grosimea liniei ( în pixeli ) ce definește tabelul și înconjuară fiecare celulă ;

- bgcolor = definește culoarea tabelului;

- cellspadding = spațiul dintr linia celulei și conșinutul acesteia ( în pixeli );

- cellspacing = spațiu dintre celule ( în pixeli );

- align = controlează poziționarea tabelului în pagină, cu următoarele atribute : left, right,

sau center;

- background = controlează culoarea de font a tabelului, care poate fi și o imagine;

- bordercolor = culoarea liniei din jurul tabelului;

- bordercolorlight = culoarea luminoasă folosită de două linii din cele patru care
înconjuară tabelul;

- bordercolordark = culoarea întunecată folosită de două linii din cele patru care
înconjuară tabelul;

Sub-titlul tabelului

Sub-titlul tabelui ” caption ” permite specificarea unei linii din text care va apărea
deasupra sau sub tabel , acest lucru este definit de atributul ” align ”care poate lua
valori : top ( deasupra ) , bottom ( jos )

Exemplu:

<table border="1" cellpadding="2">

<caption align="bottom">acesta este textul</caption>
<tr>
<th>titlu 1</th>
<th>titlu 2</th>
</tr>
<tr>
<td>linia 2- coloana 1</td>
<td>linia 2- coloana 2</td>
</tr>
</table>

23
 În pagină va apărea așa:
titlu 1 titlu 2

linia 2- coloana 1 linia 2- coloana 2

acesta este textul

Atributele specifice elementelor pentru titlu și coloane

- colspan = specifică cât de multe coloane ale tabelului va înlocui celula;

- rowspan = specifică cât de multe rânduri ale tabelului va înlocui celula;

- align = alinierea datelor celulei pe orizontală ( left, right sau center );

- valign = alinierea datelor celulei pe verticală ( top, middle sau bottom );

- background = controlează culoarea de font a celulei, care poate fi și o imagine;

- bgcolor = definește culoarea celulei ( dar nu imagine);

- width = specifică lungimea celulei ( în pixeli sau procente din lungimea paginii ) ;

- height = specifică înălțimea celulei ( în pixeli sau procente din înălțimea paginii ) ;

Exemplu de rezultat a folosirii atributelor : ” colspan ”, ” rowspan ” și ” bgcolor” :

<table border="1" cellpadding="2">

<caption align="bottom">acesta este textul</caption>
<tr>
<th>titlu 1</th>
<th>titlu 2</th>
</tr>
<tr>
<td colspan="2">linia 2- coloana 1</td>
</tr>
<tr>
<td rowspan="2">linia 3- coloana 1</td>
<td>linia 3- coloana 2</td>
</tr>
24
 <tr>
<td bgcolor="#adadff">linia 4- coloana 2 - colorat</td>
</tr>
</table>

În pagina web va arăta așa:

titlu 1 titlu 2

linia 2- coloana 1

linia 3- coloana 2
linia 3- coloana 1
linia 4- coloana 2 - colorat

acesta este textul

Stiluri CSS în HTML

Cu HTM 4.0 au apărut specificațiile pentru modele de stiluri, cunoscute ca Modele

de Stiluri în Cascada ( Cascading Style Sheets - CSS) .Acestea ajută la afișarea grafică
și încadrarea conținutului în pagină.

Până la acea dată , formă, culoare și mărimea textului pot fi date cun instrucțiunea ”
font ” și cu atributele sale ” face ”, ” color ”, ” size ”.

Modelele de stiluri pot fi aplicate aproape oricărei etichete HTML , folosind proprietăți
și valori specifice codului CSS.

Modelele de stiluri pot fi aplicate în mai multe moduri :

1. Intern ( direct în eticheta HTML ) : Pentru adăugarea unui STYLE intern la un

element se folosește atributul style urmat de proprietăți și valori , folosind
următoarea sintaxă:

<element style="proprietate:valoare; proprietate:valoare;"></element>

25
 2. În antetul ( header-ul ) fișierului : În acest caz se adaugă în secțiunea HEAD a
documentului HTML următoarea sintaxă : <style type="text/css"> ... </style>.

Această metodă este utilă când se dorește folosirea acelorași stiluri pentru mai
multe elemente din pagină, astfel sunt scrise o singură dată și nu la fiecare element.

Proprietățile și valorile de stil CSS se introduc în acest element STYLE, după cum
putem vedea în următorul exemplu :

<html>
<head>
<title>titlu</title>
<style type="text/css">
<!--
h2 {color:blue; text-decoration:underline;}
-->
</style>
</head>
<body>

</body>
</html>

Conform acestui cod, toate textele ” h2 ” din pagină vor avea culoarea albastru și vor
fi subliniate .

3. Extern : Aici proprietățile și valorile pentru diverse stiluri sunt specificate într-un
fișier extern special , de obicei cu extensia ” css ” . Avantajul folosirii fișierelor
externe CSS este faptul că același coduri de stil pot fi folosite de mai multe pagini
din site, chiar tot site-ul , find scrise o singură dată. În plus ajută la micșorarea ca
mărime ( bytes ) a documentului HTML care astfel se încarcă mai repede.

În fișierul extern CSS se scriu direct elementele cu proprietățile și valorile diferite,

nu se mai adaugă eticheta ” style ”.

Exemplu de model pentru crearea unui fișier ” .css ” :

Se scrie într-o pagină nouă, deschisă cu NotePad , următoarele , și se salvează

fișierul cu extensia ” .css ” :
26
 a:link {
color:#0000ff;
text-decoration:none;
font-weight:normal;
font-size:15px;
font-family: Arial;
}

a:visited {
color:#008080;
text- decoration:none;
font- weight:normal;
font- size: 15px;
font- family: Arial;
}

a:active {
color:#b54090;

text-decoration:underline;
}

a:hover {
color:#b54090;
text-decoration:underline;
font-weight:normal;
font-size: 15px;
font-family: Arial;
}
27
 p{
font-weight:
normal;
font-size: 11pt;
line-height:
12pt;
text-indent: 20px;
font-family: Arial;
}

Pentru a adăuga acest stil CSS într-o pagină web, adăugați în secțiunea HEAD a
documentului HTML vare va folosi acel fișier cu stiluri, următoarea comandă :

<link href="fisier.css" rel="stylesheet" type="text/css">

- unde la ” href ” se scrie calea și numele fișierului folosit;

Se poate face chiar un anumit stil să poată fi aplicat numai unei singure etichete
HTML, iar altul să poată fi aplicat mai multor etichete HTML de diferite tipuri. Pentru
aceasta se folosește atributul id. Diferența dintre id și class este faptul că se poate folosi
același atribut ” class ” pentru mai multe elemente HTML , pe când același ” id ” se
folosește numai pentru un singur element HTML.

28
 Realizarea aplicației

Am căutat în aplicațiile Google, Google Sites , m-am conectat cu contul de gmail

pentru a-l putea utiliza. Imediat după deschidere avem un format al unui
site.

În colțul din dreapta avem trei opțiuni: inserați, pagini și teme.

Din opțiunea teme, am ales ca tema site-ului să fie diplomat de culoare albastră,
apoi am denumit site-ul.

Am dat click pe opțiunea pagini din colțul din dreapta și am apăsat pe plusul de
jos , tot din dreapta, pentru a crea pagini noi.

29
 Am ales ca tipul antetului să fie banner, apoi am dat click pe inserați , apoi pe
casetă text și am început să scriu informațiile, ca și fundal câtorva pagini le-am adăugat
subliniere 1, altora subliniere 2 , iar la restul le-am adăugat ca și fundal o imagine pe
care am ales-o dintr-un folder personal din Google Drive, care este în legătură directă
cu Google Sites. Pentru informațiile adăugate am ales fontul ariel cu dimensiuna de 12,
am folosit și marcatorii . Pentru fotografiile , referitoare la text, adăugate am avut în
dreapta opțiunea de aspecte, de unde am ales fotografii cu text și fotografii fără text.
Deoarece unele fonduri cărora le-am adăugat fotografie avea o culoare mai intensă am
ales să modific culoarea fontului textului

30
 La a doua pagină am adăugat un buton din opțiunea inserați pe care l-am denumit
„atestat informatică” .

Cu ajutorul plusului din partea dreaptă de jos, am adăugat un link pe care l-am salvat
de la un video, iar acesta s-a postat pe pagina respectivă. Locul paginilor le-am putut
muta utilizând cusorul, iar paginile le-am putut filtra cu ajutorul opțiuni filtrați paginile din
opțiunea pagini.

31
 Pentru a vizualiza fiecare schimbare sau viziona site-ul am dat click pe opțiunea
publicare , am completat setările site-ului, am salvat setările, iar site-ul este publicat și
gata de vizionare.

32
În dreapta sus există un buton cu care am putut încorpora elemente cu ajutorul
limbajului HTML.

33
 Bibliografie

- https://www.olimpnet.ro/programare-notiuni-elementare-creare-website-html-css/

- https://media0.wgz.ro/files/media0:5ad397a7bb1ea.htm.upl/Limbajul_HTML.htm

- https://en.wikipedia.org/wiki/Google_Sites

http://ler.is.edu.ro/~marinel/2020/11C_tutoriale_HTML_tabel1/Resurse/Craciun_Bianc
a.html

- https://marplo.net/html/tabele.html

BIOLOGIE GHID DE PREGĂTIRE PENTRU BACALAUREAT ED.DELFIN

Link-ul site-ului :
https://sites.google.com/u/0/d/1hxmNhRC8Xt6mtf1o2H3w
a4QGaAo8en_U/preview

34