Liceul Teoretic “George Calinescu”

Sector 1, Bucuresti

INVENTATORI ROMANI

2023
Clasa 12A
 Cuprins

1. Motivul alegerii temei

2. Limbajul HTML
3. Structura site-ului
4. Bibliografie

1. Motivul alegerii temei

 Am ales tema “Inventatori romani” deoarece intotdeaua am fost
pasionata de oamenii de stiinta, de inventiile lor si de povestea din
spatele acestora. România a fost și încă mai este cunoscută pentru
contribuțiile sale in lumea invențiilor și a descoperirilor.
Acest site ofera informatii generale despre: Anghel Saligny, Henri
Coanda, Ion Cantacuzino, Nicolae Paulescu, Petrache Poenaru si Traian
Vuia.

3. Structura site-ului
Am inceput crearea site-lui prin construirea unui menu cu ajutorul
marcajului DIV si a atributului A HREF:

<div class="vertical-menu" align="center">

<a href="petrache poenaru\petrache poenaru.html" class="active">Petrache
Poenaru</a>
<a href="traian vuia\Traian Vuia.html">Traian Vuia</a>
<a href="henri coanda\Henri Coanda.html">Henri Coanda</a>
<a href="anghel saligny\Anghel Saligny.html">Anghel Saligny</a>
<a href="nicolae paulescu\Nicolae Paulescu.html">Nicolae Paulescu</a>
<a href="Ion Cantacuzino\Ion Cantacuzino.html">Ion Cantacuzino</a>
</div>

Elementul DIV este un element HTML care funcţionează ca un

container pentru un anumit conţinut. Fiind container general, aceasta
nu aduce vreun înţeles suplimentar sau importanţă semantică. Un
element DIV reprezintă un element de tip bloc folosit pentru a
identifica secţiuni mari dintr-un site web, permiţând asocierea
aspectelor.

  În HTML, elementul inline a (ancoră) denotă un hyperlink de la o

adresă web la alta. Toate elementele a funcționale trebuie să conțină
atributul href (referință de hipertext) în interiorul etichetei a de
deschidere. Atributul href indică destinația hyperlink-ului.
Pentru titlu am folosit eticheta H1, iar apoi am introdus paragrafe prin
eticheta P:

<h1>Inventatori romani</h1>
<p>România este țara cu o mulțime de oameni de știință (…)</p>

Elementele HTML de la H1 la H6 reprezintă șase nivele de titluri de

secțiune. H1 este cel mai înalt nivel de secțiune și H6 este cel mai
scăzut.
Elementul HTML P reprezintă un paragraf. Paragrafele sunt de obicei
reprezentate în mediile vizuale ca blocuri de text separate de blocurile
adiacente prin linii goale și/sau indentare pe prima linie

Listele neordonate au fost introduce cu ajutorul etichetei LI:

<UL TYPE="CIRCLE">
<LI>Petrache Poenaru</LI>
<LI>Traian Vuia</LI>
<li>Henri Coanda</li>
<li>Anghel Saligny</li>
<li>Nicolae Paulescu</li>
<li>Ion Cantacuzino</li>
</UL>
 Eticheta UL definește o listă neordonată (cu marcatori). Aceasta se
foloseste impreuna cu eticheta LI pentru a crea liste neordonate.

Imaginile au fost introduse prin atributul SRC, iar domensiunile au fost

alese cu WIDTH si HEIGHT:

<IMG SRC="stilou.jpg" WIDTH="500"HEIGHT="340">

Atributul SRC indica adresa sau locul unde se afla fisierul

imagine ce urmeaza a fi introdus in pagina precum si numele acestuia.
In termeni tehnici se spune ca acest atribut are drept valoare
un URL (Uniform Resource Locators). 

In site am ales utilizarea unui table in care au fost folosite atributul

TABLE BORDER si etichetele TD si TR.

<TABLE BORDER="1" align="center">

<TR>
<TH>Numele inventatorului</TH>
<TH>Inventia</TH>
<th>Anul inventiei</th>
<TR/>

<TR>
<TD>Petrache Poenaru</TD>
<TD>Stiloul</TD>
<td>1827</td>
</TR>

<TR>
<TD>Traian Vuia</TD>
<TD>Avion</TD>
<td>1906</td>
</TR>

<TR>
<TD>Henri Coanda</TD>
<TD>Avion cu reactie</TD>
<td>1910</td>
</TR>

<TR>
<TD>Anghel Saligny</TD>
<TD>Podul Anghel Saligny</TD>
<td>1987</td>
</TR>

<TR>
<TD>Nicolae Paulescu</TD>
<TD>Insulina</TD>
<td>1912</td>
</TR>

<TR>
<TD>Ion Cantacuzino</TD>
<TD>Lecul pentru holera si tuberculoza</TD>
<td>-</td>
</TR>

</TABLE>

Prezentarea datelor sub formã de tabele are importante avantaje atât

prin claritate si sistematizare cât si prin posibilitãtile de comparare
oferite.
Marcarea unui tabel se efectueazã printr-un tag de introducere a
tabelului si definire a atributelor globale, tagul TABLE, containerul
respectiv continând, apoi, definitiile pentru liniile si coloanele tabelului.
Se va vedea cã, de fapt, definitia elementarã este asupra unei celule a
tabelului, restul definitiilor precizând doar gruparea lor în linii/coloane.
Un tabel este format din randuri. Pentru a insera un rand intr-un table
se folosesc etichetele <tr>...</tr> ( de la " table row "= rand de tabel).
 Folosirea etichetei de sfarsit </tr> este optionala.
Un rand este format din mai multe celule ce contin date.
O celula de date se introduce cu eticheta <td>..</td>.

Pentru celelalte pagini am ales folosirea cadrelor:

<FRAMESET COLS="25%,*">
<FRAME SRC="Anghel Saligny1.html" NAME="CADRUL1">
<FRAMESET ROWS="10%,*">
<FRAME SRC="Anghel Saligny2.html" NAME="CADRUL2">
<FRAME SRC="Anghel Saligny3.html" NAME="CADRUL3">
</FRAMESET>
</FRAMESET>

<FRAMESET COLS="25%,*">
<FRAME SRC="Henri Coanda1.html" NAME="CADRUL1">
<FRAMESET ROWS="10%,*">
<FRAME SRC="Henri Coanda2.html" NAME="CADRUL2">
<FRAME SRC="Henri Coanda3.html" NAME="CADRUL3">
</FRAMESET>
</FRAMESET>

<FRAMESET COLS="25%,*">
<FRAME SRC="Ion Cantacuzino1.html" NAME="CADRUL1">
<FRAMESET ROWS="10%,*">
<FRAME SRC="Ion Cantacuzino2.html" NAME="CADRUL2">
<FRAME SRC="Ion Cantacuzino3.html" NAME="CADRUL3">
</FRAMESET>
</FRAMESET>

<FRAMESET COLS="25%,*">
<FRAME SRC="Nicolae Paulescu1.html" NAME="CADRUL1">
<FRAMESET ROWS="10%,*">
<FRAME SRC="Nicolae Paulescu2.html" NAME="CADRUL2">
<FRAME SRC="Nicolae Paulescu3.html" NAME="CADRUL3">
</FRAMESET>
</FRAMESET>

<FRAMESET COLS="25%,*">
<FRAME SRC="Petrache Poenaru1.html" NAME="CADRUL1">
<FRAMESET ROWS="10%,*">
<FRAME SRC="Petrache Poenaru2.html" NAME="CADRUL2">
<FRAME SRC="Petrache Poenaru3.html" NAME="CADRUL3">
</FRAMESET>
</FRAMESET>

<FRAMESET COLS="25%,*">
<FRAME SRC="Traian Vuia1.html" NAME="CADRUL1">
<FRAMESET ROWS="10%,*">
<FRAME SRC="Traian Vuia2.html" NAME="CADRUL2">
<FRAME SRC="Traian Vuia3.html" NAME="CADRUL3">
</FRAMESET>
</FRAMESET>

Cadrele permit împărţirea unei ferestre în secţiuni independente între

ele, în fiecare dintre acestea fiind posibilă încărcarea unui document
HTML. Astfel, utilizatorul poate vizualiza simultan mai multe
documente.

Un document cu cadre se realizează similar unui document HTML

oarecare, în care tagurile <body>, respectiv </body> sunt înlocuite cu
tagurile <frameset>, respectiv </frameset>. Aşadar, tagul <frameset>
permite structurarea documentului principal în cadre. În interiorul
perechii <frameset> </frameset> nu pot exista decât elemente
<frameset>, <frame>, <noframe>.

Tagul <frameset> acceptă următoarele atribute:

 rows – primeşte ca parametru o listă de valori, separate prin

virgulă,  ce reprezintă înălţimea cadrelor orizontale ale
documentului principal. Numărul de cadre orizontale este dat de
numărul de valori din listă. Valorile sunt exprimate fie prin
numere întregi pozitive (înălţime absolută exprimată în pixeli), fie
prin procente din înălţimea cadrului părinte (înăţime relativă), fie
prin caracterul de puncuaţie ‘*’, care semnifică o înălţime relativă.

 cols – permite împărţirea cadrului curent în sectoare verticale.

Parametrii acceptaţi respectă aceleaşi reguli ca şi în cazul
atributului rows, numai că se referă la lungimea cadrului.
  border – primeşte o valoare întreagă nenegativă, reprezentând
grosimea, exprimată în pixeli, a chenarului cadrelor. Implicit,
grosimea chenarului este de 5 pixeli. Valoarea 0 a atributului
border inhibă afişarea chenarelor tuturor cadrelor.

 bordercolor – permite setarea culorii chenarelor cadrelor.

Culoarea poate fi specificată fie printr-un triplet hexa de forma
#rrggbb, fie printr-un nume predefinit de culoare.

 frameborder – controleaza afişarea/ascunderea chenarelor

tuturor cadrelor. Atributul poate primi valorile: yes sau 1 (se
forţează afişarea chenarelor), no sau 0 ( se forţează ascunderea
chenarelor);

 framespacing – permite specificarea distanţei, în pixeli, de spaţiu

liber în jurul tuturor cadrelor. Dacă framespacing=0, cadrele nu
pot fi redimensionate cu drag and drop (adică prin tragere cu
mouse-ul).

Tagul <frame> permite definirea unui cadru în interiorul unui set de

cadre. El are sens numai atunci când apare în interiorul perechii
<frameset> </frameset>.

Atribute acceptate:

 src – specifică adresa URL a documentului ce va fi încărcat în

cadrul respectiv;

 name – specifică numele cadrului, nume ce va fi utilizat pentru

referirea cadrului respectiv atunci când se va încărca în el un alt
document HTML, prin intermediul unei hiperlegături aflate în alt
cadru. Numele este o combinaţie de caractere alfanumerice;
  marginwidth, marginheight – controleaza distanţa, exprimată în
pixeli, între conţinutul cadrului şi chenarul său;

 scrolling – atributul controlează afişarea/ascunderea barelor de

defilare (orizontală sau verticală). Poate primi valorile:
o yes – se forţează afişarea barelor de
defilare;
o no - se forţează ascunderea barelor de
defilare;
o auto - barele de defilare vor fi afişate numai
atunci când este necesar (când conţinutul
cadrului depăşeşte lungimea şi/sau
înălţimea cadrului va fi afişată bara de
defilare orizontală şi/sau cea verticală);

 border – permite setarea grosimii chenarului cadrului curent.

Valoarea atributului border aflat în interiorul tagului frame este
prioritară faţă de valoarea aceluiaşi atribut aflat în tagul frameset.

 noresize – se inhibă utilizatorului posibilitatea de a redimensiona

cadrele. Altfel, el are această posibilitate, prin operaţia Drag and
Drop asupra marginilor cadrelor.

 frameborder – controleaza afişarea/ascunderea chenarului

cadrului curent. Atributul poate primi valorile: yes sau 1(se
afişează chenarul), no sau 0 (se ascunde chenarul);

 framespacing – permite specificarea distanţei, în pixeli, de spaţiu

liber în jurul cadrului.

 bordercolor – permite specificarea culorii chenarului cadrului

respectiv.

Pentru a stiliza site-ul am folosit CSS (Cascading Style Sheets)

<style>

body {background-color:D8D8D8;}

h1 {color:black;}

p {color:606060;}

</style>

CSS este limbajul pe care îl folosim pentru a stila un document HTML.

CSS descrie modul în care ar trebui să fie afișate elementele HTML.

2. Limbajul HTML
 Unul din primele elemente fundamentale ale WWW (World Wide
Web) este HTML ( Hypertext Markup Language ), care descrie formatul
primar în care documentele sunt distribuite și văzute pe Web. Multe
din trasaturile lui, cum ar fi independenta fata de platforma,
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 initial de Tim Berners-Lee la CERN în 1989. HTML
a fost vazut ca o posibilitate pentru fizicienii care utilizeaza computere
diferite și schimbe intre ei informație utilizind Internetul. Erau prin
urmare necesare citeva trasaturi: independenta de platforma,
posibilități hypertext și structurarea documentelor.Independenta de
platforma inseamnă ca un document poate fi afișat în mod asemănător
de computere diferite ( deci cu fonte, grafica și culori diferite ), lucru
vital pentru o audienta atit de variata.

Hipertext înseamnă că orice cuvânt, frază, 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 în interiorul unui aceluiasi document. Structurarea
riguroasa a documentelor permite convertirea acestora dintr-un format
în altul precum și interogarea unor baze de date formate din aceste
documente.

Orice document HTML incepe cu notația <html> și se termina cu

notația </html>. Aceste "chestii" se numesc în literatura de specialitate
"TAG-uri".Prin convenție, toate informațiile HTML incep cu o paranteza
unghiulara deschisa " < " și se termina cu o paranteza unghiulara
inchisa" > ".

Tag-urile între 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, în timp ce pentru alte blocuri acest
delimitator este opțional sau chiar interzis.

Între cele doua marcaje <html> și </html> vom introduce doua

secțiuni: sectiunea de antet <head>...</head> și corpul
documentului <body>...</body>. Blocul <body>...</body> cuprinde
conținutul propriu-zis al paginii HTML, adică ceea ce va fi afișat în
fereastra browser-ului.

Conținutul blocului <title>...</title> va apărea în bara de titlu a

ferestrei browser-ului.
Dacă acest bloc lipsește într-o pagina HTML, atunci în bara de titlu a
ferestrei browser-ului va apărea numele fișierului.
Dacă introducem mai multe linii într-o pagina browser-ul va afișa într-
un singur rând, intrucât caracterele " CR/LF " sunt ignorate de browser.

Trecerea pe o linie noua se face la o comanda explicita, care trebuie

să apară în pagina html.
Această comandă este marcajul <br> ( de la " line break " - intrerupere
de linie ).
 Pentru ca un bloc de text să apară în pagina evidențiat (cu caractere
aldine), trebuie inclus intre delimitatorii <b>...</b> ( b vine de la "bold"
= indrăzneț).
Pentru ca un text să fie scris cu caractere mai mari cu o unitate decât
cele curente acesta trebuie inclus intr-un bloc delimitat de
etichetele <big>...</big>.
Pentru ca un text să fie scris cu caractere mai mici cu o unitate decât
cele curente acesta trebuie inclus intr-un bloc delimitat de
etichetele <small>...</small>.
Pentru ca un text să fie scris cu caractere cursive acesta trebuie inclus
intr-un bloc delimitat de etichetele <i>...</i> ( i vine de la " italic ").
Pentru a insera secvențe de text aliniate ca indice (sub-script) sau ca
exponent (super-script) , aceste fragmente trebuie delimitate de
etichetele _..., respectiv ^....
Pentru a insera un bloc de caractere subliniate se utilizează
etichetele <u>...</u> (u vine de la " underline ").
Pentru a insera un bloc de caractere tăiate se utilizează
etichetele <strike>...</strike> sau <s>...</s>.

Un font este caracterizat de următoarele atribute:

 culoare (stabilita prin atributul color);

 tipul sau stilul (stabilit prin atributul face);
 mărimea (definita prin atributul size);
 mărimea în puncte tipografice (stabilita prin atributul point-size);
 grosime (definita prin atributul weight).

Toate aceste atribute aparțin etichetei <font>, care permite inserarea

de blocuri de texte personalizate.
Culori
O culoare poate fi precizata în două moduri:

 printr-un nume de culoare.

 printr-o constantă conform standardului de culoare RGB (Red,
Green, Blue). O astfel de constantă se formează astfel: #rrggbb,
unde r, g și b sunt cifre hexazecimale.

Culoarea fontului
Pentru a scrie un fragment de text cu caractere de o anumită culoare se
incadrează acest fragment intre delimitatorii <font>...</font> având
stabilit atributul color la valoarea necesara. De exemplu:
<font color=red>fragment de text de culoare rosie</font>
Familia fontului
Pentru a scrie un text într-o pagină pot fi folosite mai multe fonturi
(stiluri de caractere). Există cinci familii generice de fonturi care sunt de
regulă disponibile pe toate calculatoarele utilizatorilor: serif, sans serif,
cursive, monospace și fantasy.
Tipul de font necesar poate fi stabilit prin atributul face al
etichetei <font>.
Pot fi introduse mai multe fonturi separate prin virgula.
<font face = " Arial, serif, monospace ">
în acest caz browser-ul va utiliza primul font pe care il cunoaște.

Dacă într-o pagină web trebuie inclusă o adresă ,atunci putem utiliza
facilitatile oferite de o eticheta dedicată: <address>...</address>.

Pentru ca un bloc de text să fie indentat ( marginea din stanga a

textului să fie deplasata la dreapta la o anumita distanta fata de
marginea paginii ), acesta trebuie inclus intre
etichetele <blockquote>...</blockquote>.
 Într-o pagina Web pot fi inserate linii orizontale. Acest lucru se face cu
ajutorul etichetei <hr>. Pentru a configura o linie orizontală se utilizează
următorele atribute ale etichetei <hr>:

 align - permite alinierea liniei pe orizontală. Valorile posibile sunt

" left " ," center " și " right ";
 width - permite alegerea lungimii liniei;
 size - permite alegerea grosimii liniei;
 noshade - când este prezent definește o linie fără umbră;
 color - permite definirea culorii liniei.
4. Bibliografie

Limbajul HTML (ceiti.md)

CSS Tutorial (w3schools.com)

Wikipedia