000 Unitatea de Invatare Pagina de Web 12.12.2020

Universitatea Titu Maiorescu Facultatea de Finante- Banci, Contabilitate si Administrarea Afaceri
“ De-abia învatat si deja depasit!”
Unitatea de învatare : Utilizarea Functiilor HTML în minisite-ul proiectului

la disciplina Informatica
Pagina de WEB
HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru
crearea paginilor web ce pot fi afişate într-un browser (sau navigator).
Scopul HTML este mai degrabă prezentarea informaţiilor – paragrafe, fonturi, tabele
ş.a.m.d. – decât descrierea semanticii documentului.1
Găzduirea web (în engleză: web hosting) este un serviciu oferit atât companiilor
cât şi persoanelor particulare, care le permite acestora să îşi publice un sit web în
Internet. Furnizorul acordă clientului spaţiu de memorare pe un server conectat la
Internet şi de obicei aflat fizic într-un centru de calcul.
Deseori furnizorul:
 alocă fiecărui sit web găzduit şi câte un nume de domeniu web unic.
 pune la dispoziţie clientului nu numai spaţiul de stocare necesar sitului, dar

chiar un întreg server (virtual) inclusiv sistemul său de operare.
Motoarele de căutare pe Internet sunt site-uri web specializate, create pentru a ajuta
oamenii să găsească informaţii stocate în alte site-uri.
Există multe diferenţe în modul în care lucrează diferitele motoare de căutare, dar
acestea execută în general aceleaşi trei sarcini de bază2:
1) caută pe Internet sau „selectează” părţi din Internet, pe baza cuvintelor importante;
2) reţin un index al cuvintelor pe care le găsesc şi a locului acestora;
3) permit utilizatorilor să caute cuvinte sau combinaţii de cuvinte găsite în acest index.
1
Argentina Gramada- „Aplicatii si teste la Informatica”- https://argentinagramada.com/wp-
content/uploads/2018/01/1_Aplicatii_I_UTM_varianta_7.01.2018.pdf -Pagina 39
2 Ibidem-Pagina 40
Conf.univ.dr.Argentina Gramada Page 1 of 19

Figură 1 Accesarea site-ul de birotica
Figură 2 Accersarea teoriei pentru crearea paginii de web in Proiectul de Informatica

https://argentinagramada.com/birotica/sitebirotica.go.ro/html.html

Legaturi
Lagaturile (link-urile) reprezinta partea cea mai importanta a unei pagini Web.
Ele transforma un text obisnuit in hipertext sau text cu hiperlegaturi, care

premite trecerea rapida de la o informatie aflata pe un anumit server la alta informatie
memorata pe un alt server aflat oriunde in lume. Legaturile sunt zone active intr-o
pagina Web, adica zone de pe ecran sensibile la apasarea butonului stang al mouse-ului.
O legatura catre o pagina aflata in acelasi director
O legatura catre o pagina aflata in acelasi director se formeaza cu ajutorul

etichetei <a> (de la "anchor"=ancora). Pentru a preciza pagina indicata de legatura se
utilizeaza un atribut al etichetei <a> numit href (de la hypertext reference), care ia ca
valoare numele fisierului HTML aflat in acelasi director.
Zona activa care devine sensibila la apasarea butonului stang al mouse-ului este
formata din textul cuprins intre etichetele <a>...</a>.
Prezenta etichtetei de sfarsit </a> este obligatorie.
<html>
<head>
<title> Comutarea intre doua pagini</title>
</head>
<body>
<h3>Pagina 1 </h3>
<a href="leg_ex2.html"> Link catre pagina 2 </a>
</body>
</html>

O legatura catre un site din Web
In exemplul urmator se utilizeaza adresa URL www.yahoo.com care incarca pagina de

start din site-ul firmei Yahoo.
<html>
<head>
<title> Link catre site-ul firmei Yahoo</title>
</head>
<body>
<h3>Link catre site-ul competente digitale </h3>
<a href="http://www.competentedigitale.ro">Competente digitale </a>
</body>
</html>
Lucru 1 laborator3
<html>
<head>
<title>atribute multiple </title>
</head>
<body bgcolor=blue text=yellow>
Fond de culoare albastra si text de culoare galbena.
</body>
</html>
3
https://argentinagramada.com/birotica/sitebirotica.go.ro/html.html/Lectia1

Figură 3 Pagina WEB lucrata la laborator in data de 23.11.2020
<html>
>
<head>
Universitatea Titu Maiorescu <br>
<title> Aceasta este prima mea pagina de Web </title>
</head>
<body bgcolor=blue text=yellow>
Fond de culoare albastra si text de culoare galbena.
<h3>Link catre site-ul universitatii </h3>

<a href="http://www.utm.ro ">Universitatea Titu Maiorescu</a>
<br>
Combinatia de culori albastru si galben este alegerea marilor pictori!
<br>
<br>
Hai sa invatam cum se face o pagina de web!
<br>
<br>
</body>
</html>

Figură 4 Codul sursa al Paginii WEB lucrate la laborator in 23.11.2020 si la care este
link din fisierul Lucru Cumulat in 23.11.2020

Lucru 2 laborator
Blocuri de titlu
Intr-un text titlurile de capitole (headers) pot fi introduse cu ajutorul etichetelor

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Toate aceste etichete se refera la un bloc de text si
trebuie insotite de o eticheta de incheiere similara.
Aceste etichete accepta atributul align pentru alinierea titlului blocului de text la stanga
(in mod prestabilit), in centru sau la dreapta.
Tag-ul <h1> permite scrierea unui titlu cu caractere mai mari si aldine,
pe cand <h6> foloseste caracterele cele mai mici. 4
<html>
<head>
<title> Blocuri de titlu</title>
</head>
<body>
<h1 align=center> Titlu de marime 1 aliniat in centru </h1>
<h2 align=right> Titlu de marime 2 aliniat la dreapta. </h2>
<h4> Titlu de marime 4 aliniat la stanga (implicit) </h4>
</body>
</html>
Blocuri <div>
Modalitatea cea mai efi
cienta de delimitare si de formatare a unui bloc de text este folosirea delimitatorilor

<div>...</div>.
4 Lectia1 HTML- https://argentinagramada.com/birotica/sitebirotica.go.ro/html.html/Lectia1

Figură 5 Interfata pagina Web Proiect Informatica
<html>
>
<body>
<body bgcolor=yellow>
<h3 align="center">Proiect la Informatica</h3>
<h1 align="center">Retea wireless tip mesh</h2>

<h3 align="center"> Autor: Nume Prenume Student Maiorescian</h3>
<br>
<div align="center">
<a href="Prezentare firma.doc" style="bgcolor: #fcfcfc; font-family: Arial, Verdana; font-

weight:bold;">Prezentare firma</a><br>
<a href="Prezentare firma engleza.doc" style="bgcolor: #fcfcfc; font-family: Arial, Verdana; font-
weight:bold;">Prezentare firma engleza</a><br>
<a href="Buget firma.xls" style="bgcolor: #fcfcfc; font-family: Arial, Verdana; font-weight:bold;">Buget

firma</a><br>
<a href="Slide.ppt" style="bgcolor: #fcfcfc; font-family: Arial, Verdana; font-weight:bold;">Slide</a><br>
<a href="Curriculum vitae.doc" style="bgcolor: #fcfcfc; font-family: Arial, Verdana; font-

weight:bold;">Curriculum vitae</a><br>
</div>
</body>
</html>

Tema Proiect
Figură 6 Interfata de personalizat a proiectului de Informatica sesiunea de iarna 2021
Liste neordonate
O lista neordonata este un bloc de text delimitat de etichetele corespondente

<ul>...</ul> ("ul" vine de la "unordered list" = lista neordonata). Fiecare element al listei
este initiat de eticheta <li> (list item)5.
Lista va fi indentata fata de restul paginii Web si fiecare element al listei incepe pe un rand nou.
<html>
<head><title>listex_2</title></head>
<body><h1 align=center>O lista neordonata</h1><hr>
Glosar de termeni de World Wide Web
<ul>Culori uzuale disponibile prin nume
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ul>
</body>
</html>
5
Lectia1 HTML- https://argentinagramada.com/birotica/sitebirotica.go.ro/html.html/Lectia3

Figură 7 Codul HTML al Interfetei de personalizat a proiectului de Informatica sesiunea de

iarna 2021
a) Adaugati sigla universitatii ;
b) Modificati culoarea fundalului, culoare textului;
c) Adaugati Specializarea Administrarea Afacerilor;
d) Adaugati legaturi la sursele proiectului vostru personal.

Nautatea
<ul>
<li>   Specializarea <i>Finante-Banci</i></li>
<li>   Specializarea <i>Contabilitate si Informatica de Gestiune</i></li>
<li>   Specializarea <i>Administrarea Afacerilor</i></li>
</ul>

Tema lucru :
Creati pagina Web Informatica.htm care sa contina:
 Sa se creeze un tabel cu titlul
Programarea examenelor din sesiunea de iarna ale anului I in sesiunea

de iarna 2021
a) ComboList : , FB IF, AA IF , CIG ID, FB ID -2puncte
b) Tabel cu completarea datei domeniului meu. -1punct
CIG IF
FB IF
AA IF
CIG ID
FB ID
c) Programarea examenelor mele:- 2puncte
Disciplina Data Ora
Informatica
Management
Microeconomie
Matematica
Limba Engleza
 Sa se creeze un tabel cu titlul

Exemplu 1 Pagina de web cu Butoane
<html>
<head>
<title>Proiect informatica</title>
</head>
<body>
<center>
<h1><font color="white"<p><u>Proiect informatica</u></p>
</center>
<body bgcolor="grey">
<center>
<a href="CV-Europass-20191125-Vintila-EN.doc"><input type="button" value="CV

Engleza"></a>
<a href="CV-Europass-20191125-Vintila-RO.doc"><input type="button" value="CV

Romana"></a>
<a href="Proiect.docx"><input type="button" value="Proiect Word"></a>
<a href="Proiect.pptx"><input type="button" value="Proiect PPT"></a>

<a href="Proiect.xlsm"><input type="button" value="Proiect Excel"></a>
</center>
<a href="http://www.utm.ro/facultatea-de-stiinte-economice-bucuresti/"><image
src="http://upload.wikimedia.org/wikipedia/commons/2/2e/Titu_Maiorescu.jpg"><
/a>
..........................................................................................................................................................
Exemplu 2 Pagina web Tabel
<html>
<head>
<title>Proiect TEHNOLOGIA APLICATIILOR OFFICE </title>
</head>
<body bgcolor="YELLOW" text="bLUE">
<h1>TEHNOLOGIA APLICATIILOR OFFICE </h1>
<h2>Analiza activitatii financiar contabile la societatea Alpha.SRL</h2>

<p>
Proiectul contine DOCUMENTE CU PRIVIRE LA UTILIZAREA PRODUSELOR

Microsoft Office in activitatea financiar contabila a firmei <i> </i>.<br>
<img src="1.jpg"<br>
</br>
<table border="1">
<tr>
<td>Document Excel</td><td><a href="Excel_TAO.xlsm"> Aplicatie financiar -

contabila a societatiiAlpha.SRL.xlsm - </a></td>
</tr>
<tr>
<td>Prezentare Power Point</td><td><a href="proiect TAO.ppsx">proiect

TAO.ppsx</a></td>
</tr>
<tr>
<td>Prezentarea unui eseu cu privire la activitatea financiar contabila a

societatii</td><td><a href="eseu.docx">proiect TAO.doc</a></td>
</tr>
</table>
</body>
</html>
Exemplu 3 Pagina Web ComboList

Figure 1 Pagina Web ComboList
Atributul class permite definirea de stiluri multiple (clase).6
Autoevaluare
6
HTML The class Attribute - www.w3schools.com/html/html_classes.asp

1. Paginile web nu se pot edita în:
NotePad Front Page AceHTML Apple Safari
2. Comenzile de formatare se transmit folosind :

marcaje atribute secvenţe
3. Poziţionarea textului nu se realizează cu atributul :

<align> <center> <left> <right>
4. Referinţa către o pagină web se poate face cu:

<a href=”pagina_la_care_vrem_să_ajungem.html”>click pe acest text şi
ajungi la pagina dorită </a>
<a href=”pagina_la_care_vrem_să_ajungem”>click pe acest text şi ajungi la
pagina dorită</a>
<a href=”pagina_la_care_vrem_să_ajungem.html>click pe acest text şi ajungi
la pagina dorită</a>
5. Nu este browser:
Internet Explorer Google Chrome Flock HomeSite
Bibliografie
1. Argentina Gramada –„Aplicatii si teste la Informatica”-

https://argentinagramada.com/wp-
content/uploads/2018/01/1_Aplicatii_I_UTM_varianta_7.01.2018.pdf -Pag 39-40
2. HTML The class Attribute - www.w3schools.com/html/html_classes.asp
3. Lectia1 HTML-
https://argentinagramada.com/birotica/sitebirotica.go.ro/html.html/Lectia1

Contents
Unitatea de învatare : Utilizarea Functiilor HTML în minisite-ul proiectului

la disciplina Informatica .......................................................................................................... 1
Legaturi ............................................................................................................................... 3
O legatura catre o pagina aflata in acelasi director.......................................................... 3
O legatura catre un site din Web ........................................................................................ 4
Lucru 1 laborator .......................................................................................................... 4
Exemplu 1 Pagina de web cu Butoane............................................................................. 14
Exemplu 2 Pagina web Tabel ........................................................................................... 15
Exemplu 3 Pagina Web ComboList ................................................................................. 16
Autoevaluare.................................................................................................................... 17
Bibliografie .............................................................................................................................. 18

000 Unitatea de Invatare Pagina de Web 12.12.2020

Încărcat de

Informații document

Titlu original

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

000 Unitatea de Invatare Pagina de Web 12.12.2020

Încărcat de

Drepturi de autor:

Formate disponibile

Universitatea Titu Maiorescu Facultatea de Finante- Banci, Contabilitate si Administrarea Afaceri

“ De-abia învatat si deja depasit!”

Unitatea de învatare : Utilizarea Functiilor HTML în minisite-ul proiectului

 pune la dispoziţie clientului nu numai spaţiul de stocare necesar sitului, dar

2) reţin un index al cuvintelor pe care le găsesc şi a locului acestora;

Conf.univ.dr.Argentina Gramada Page 1 of 19

Figură 1 Accesarea site-ul de birotica

Figură 2 Accersarea teoriei pentru crearea paginii de web in Proiectul de Informatica

Conf.univ.dr.Argentina Gramada Page 2 of 19

Ele transforma un text obisnuit in hipertext sau text cu hiperlegaturi, care

O legatura catre o pagina aflata in acelasi director

O legatura catre o pagina aflata in acelasi director se formeaza cu ajutorul

Prezenta etichtetei de sfarsit </a> este obligatorie.

<title> Comutarea intre doua pagini</title>

<a href="leg_ex2.html"> Link catre pagina 2 </a>

Conf.univ.dr.Argentina Gramada Page 3 of 19

In exemplul urmator se utilizeaza adresa URL www.yahoo.com care incarca pagina de

<title> Link catre site-ul firmei Yahoo</title>

<h3>Link catre site-ul competente digitale </h3>

<a href="http://www.competentedigitale.ro">Competente digitale </a>

Conf.univ.dr.Argentina Gramada Page 4 of 19

Figură 3 Pagina WEB lucrata la laborator in data de 23.11.2020

<h3>Link catre site-ul universitatii </h3>

Conf.univ.dr.Argentina Gramada Page 5 of 19

Conf.univ.dr.Argentina Gramada Page 6 of 19

Intr-un text titlurile de capitole (headers) pot fi introduse cu ajutorul etichetelor

pe cand <h6> foloseste caracterele cele mai mici. 4

<title> Blocuri de titlu</title>

<h1 align=center> Titlu de marime 1 aliniat in centru </h1>

<h2 align=right> Titlu de marime 2 aliniat la dreapta. </h2>

<h4> Titlu de marime 4 aliniat la stanga (implicit) </h4>

Modalitatea cea mai efi

cienta de delimitare si de formatare a unui bloc de text este folosirea delimitatorilor

4 Lectia1 HTML- https://argentinagramada.com/birotica/sitebirotica.go.ro/html.html/Lectia1

Conf.univ.dr.Argentina Gramada Page 7 of 19

Figură 5 Interfata pagina Web Proiect Informatica

<h3 align="center">Proiect la Informatica</h3>

<h1 align="center">Retea wireless tip mesh</h2>

Conf.univ.dr.Argentina Gramada Page 8 of 19

<a href="Prezentare firma.doc" style="bgcolor: #fcfcfc; font-family: Arial, Verdana; font-

<a href="Buget firma.xls" style="bgcolor: #fcfcfc; font-family: Arial, Verdana; font-weight:bold;">Buget

<a href="Slide.ppt" style="bgcolor: #fcfcfc; font-family: Arial, Verdana; font-weight:bold;">Slide</a><br>

<a href="Curriculum vitae.doc" style="bgcolor: #fcfcfc; font-family: Arial, Verdana; font-

Conf.univ.dr.Argentina Gramada Page 9 of 19

Figură 6 Interfata de personalizat a proiectului de Informatica sesiunea de iarna 2021

O lista neordonata este un bloc de text delimitat de etichetele corespondente

<body><h1 align=center>O lista neordonata</h1><hr>

Glosar de termeni de World Wide Web

<ul>Culori uzuale disponibile prin nume

<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua

Conf.univ.dr.Argentina Gramada Page 10 of 19

Figură 7 Codul HTML al Interfetei de personalizat a proiectului de Informatica sesiunea de

a) Adaugati sigla universitatii ;

b) Modificati culoarea fundalului, culoare textului;

c) Adaugati Specializarea Administrarea Afacerilor;

d) Adaugati legaturi la sursele proiectului vostru personal.

Conf.univ.dr.Argentina Gramada Page 11 of 19

<li>&nbsp;&nbsp; Specializarea <i>Finante-Banci</i></li>

<li>&nbsp;&nbsp; Specializarea <i>Contabilitate si Informatica de Gestiune</i></li>

<li>&nbsp;&nbsp; Specializarea <i>Administrarea Afacerilor</i></li>

Conf.univ.dr.Argentina Gramada Page 12 of 19

Creati pagina Web Informatica.htm care sa contina:

 Sa se creeze un tabel cu titlul

<li> Specializarea <i>Finante-Banci</i></li>

<li> Specializarea <i>Contabilitate si Informatica de Gestiune</i></li>

<li> Specializarea <i>Administrarea Afacerilor</i></li>