Sunteți pe pagina 1din 7

Ministerul Culturii, Educatiei si Cercetarii

Universitatea Tehnică a Moldovei


Facultatea:Calculatoare,Informatică și Microelectronică

RAPORT
la lucrarea de laborator nr. 1
la Baze de Date

Tema: Introducerea in HTML si CSS

Varianta 21

A efectuat: st. gr. RM-171 Țuțuianu Gheorghe

A verificat: Focșa Petru

Chişinău – 2018
Sarcina:
PASUL 1, Elaborati pagina Web utilizând doar etichetele HTML
pentru formatarea textului.

PASUL 2, Elaborati pagina Web utilizând etichetele HTML pentru


formatarea textului în care va trebui să includeți imagini grafice în
și corect să setați modurile de aranjament a imagini și textului

PASUL 3, Elaborati pagina Web utilizând etichetele HTML în așa


mod încît să compuneți un tabel necomplicat, evident ajustînd sau
chiar modificînd continutul Fabulei la acest nou element de
structura a paginii Web.

PASUL 4, Elaborati pagina Web utilizând etichetele HTML în așa


mod încît să aveti incluse referințe /link-uri/ relative, atît la alte
documente/fisiere HTML, cît și referințe absolute la link-uri de pe
site-urile existente în Internet.

PASUL 5, Elaborati pagina Web utilizând etichetele HTML în așa


mod încît să aveti inclus pe document o bară de navigare simplă,
care va necesita nu numai să plasați eticheta în locurile potrivite
ale paginii, dar să utilizați un tabel pentru a crea o nouă structură
a paginii HTML

PASUL 6, Elaborati pagina Web utilizând etichetele HTML în așa


mod încît să utilizati CSS-ul pe document, încît pagina să obțină o
altă înfățișare, care să nu poată fi aranjată utilizînd abordările
standard ale HTML.

PASUL 7. (complexitate sporită), Elaborati pagina Web utilizând


etichetele HTML în așa mod încît să utilizati toate instrumentele
HTML, pentru ca pagina web să fie una atractivă și “prietenoasă”
pentru utilizator.
Listing-ul Programului:

HTML:
<!DOCTYPE html>
<html>

<head>
<title>Alba ca Zapada</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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


</head>

<body>

<div class="content">
<a href="http://www.universdecopil.ro/alba-ca-zapada-si-cei-sapte-pitici-de-fratii-
grimm.html">
<div class="container">
<img
src="http://www.universdecopil.ro/images/stories/educatie/povesti/alba%20ca%20zapada%20si
%20cei%20sapte%20pitici%20fratii%20grimm.jpg" alt="Alba ca Zapada si cei 7 pitici"
class="image writer-img">
<div class="overlay">
<div class="text">Alba ca Zapada </div>
</div>
</div>
</a>
<h1 style="padding-left: 20px">Alba ca Zapada si cei 7 pitici(1937)</h1>

<p> A fost odată o împărăteasă şi într-o iarnă, pe când zăpada cădea din înaltul nemărginit al
cerului în fulgi mari şi pufoşi, crăiasa sta într-un jilţ şi cosea lângă o fereastră cu pervazul negru,
de abanos.</p>
<p> Şi cum cosea ea aşa, aruncându-şi din când în când privirile la ninsoarea ce se cernea de sus,
se întâmplă să se înţepe cu acul în deget şi trei picături de sânge căzură în zăpadă. Roşul sângelui
arăta atât de frumos pe albul zăpezii, că împărăteasa rămase încântată şi gândi în sinea ei: "Ce n-
aş da să am un copil alb ca zăpada, roşu ca sângele şi cu părul negru ca abanosul!"</p>
<p> Trecu timpul, dar nu prea multişor, şi împărăteasa născu o fetiţă albă ca zăpada, roşie ca
sângele şi cu păr negru ca abanosul. Şi-i dădură numele de Albă ca Zăpada... După ce o aduse
însă pe lume, împărăteasa muri.</p>
<p> Cum trecu anul, împăratul îşi luă altă soţie. Femeia asta era cadră de frumoasă, dar nespus
de trufaşă şi mândră şi n-ar fi îngăduit nici în ruptul capului s-o întreacă alta în frumuseţe. Avea
o oglindă fermecată şi ori de câte ori se privea într-însa nu uita s-o întrebe:</p>
<p>- Oglinjoară din perete, oglinjoară,</p>
<p>- Cine e cea mai frumoasă din ţară?</p>
<p>Şi oglinda-i răspundea:</p>
<p> - Măria ta eşti cea mai frumoasă din întreaga ţară!</p>
<p> La auzul acestor vorbe, împărăteasa se înspăimântă grozav şi, de pizmă şi ciudă, o dată
se îngălbeni şi se înverzi, de ziceai că-i moartea. Din clipa aceea, ori de câte ori o zărea pe Albă
ca Zăpada simţea că-i plesneşte fierea de ciudă: şi azi aşa, mâine aşa, până ce începu s-o urască
de moarte. Pizma şi ciuda creşteau în inima ei ca buruiana cea rea şi se cuibăriseră atât de adânc,
că împărăteasa nu-şi mai găsea pace nici ziua, nici noaptea. În cele din urmă chemă un vânător
şi-i porunci:</p>
<p> - Ia fata asta şi du-o în adâncul pădurii, că nu rabd s-o mai văd în faţa ochilor! Omoar-o şi
drept mărturie că mi-ai îndeplinit porunca să-mi aduci plămânii şi ficatul netrebnicei!</p>
<p> Biata copilă rămăsese singură-singurică în pădurea cea nesfârşită şi era atât de înfricoşată,
că privea la mulţimea frunzelor de pe copaci ca şi când de-acolo ar fi putut să se ivească vreo
primejdie şi nu ştia în ce chip şi-ar putea găsi scăparea... Într-un sfârşit începu să alerge şi gonea
întruna peste bolovani colţuroşi şi printre mărăcini, iar fiarele sălbatice treceau în fugă pe
dinaintea ei, dar nu-i făceau nici un rău. Alergă ea aşa, cât o mai ţinură picioarele, şi-n geana
amurgului dădu cu ochii de o căsuţă şi intră înăuntru să se odihnească.</p>
<p> În căsuţă, toate lucrurile erau mititele dar atât de gingaşe şi sclipind de curăţenie, că ţi-era
mai mare dragul să le priveşti. Pe o măsuţă acoperită cu o faţă de masă albă erau rânduite şapte
talere mici şi lângă fiecare taler se afla câte o linguriţă, o furculiţă, un cuţitaş şi-o cupă cât un
degetar. Iar de-a lungul unui perete se înşirau şapte pătuceane, aşternute cu cearşafuri albe ca
neaua.</p>
<p>Când se întunecă de-a binelea, sosiră şi stăpânii căsuţei. Erau cei şapte pitici, care
sfredeleau munţii, scormonind în măruntaiele lor pentru a scoate la lumină tot soiul de metale. Ei
aprinseră cele şapte lumânărele şi de îndată ce se făcu lumină în căsuţă îşi dădură seama că
cineva străin cotrobăise peste tot, fiindcă lucrurile nu se mai aflau la locul lor, aşa cum le
lăsaseră la plecare. Şi atunci primul pitic zise:</p>
<p> Îşi luă lumea în cap şi o ţinu tot într-o goană, până se pierdu în adâncul pădurii sălbatice,
ca să-şi ascundă acolo urâţenia. Şi de atunci, nici unui om nu-i mai fu dat s-o vadă şi nimeni nu
mai ştiu ceva despre soarta ei. Iar Albă ca Zăpada trăi în bucurie şi fericire împreună cu tânărul
împărat şi, dacă n-or fi murit, cu siguranţă că mai trăiesc şi-n zilele noastre...</p>
<b><p><h2>Opere asemănătoare</h2></p></b>
<br>

<table id="t01">
<tr>
<th>Autori</th>
<th>Scrieri</th>
<th>Anul</th>
</tr>
<tr>
<td>I.Creanga</td>
<td>Capra cu 3 iezi</td>
<td>1915</td>
</tr>
<tr>
<td>M.Eminescu</td>
<td>Fat-Frumos din Lacrima</td>
<td>1928</td>
</tr>
<tr>
<td>P.Ispirescu</td>
<td>Sare in Bucate</td>
<td>1948</td>
</tr>
</table>

</div>
</div>

</body>

</html>

CSS:
body {
/* Old browsers */
background: #2eb82e;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(-45deg, #77b300, #2eb82e);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(-45deg, #77b300, #2eb82e);
margin: 0;
padding: 0;
}

h1 {
color: #FFF;
font-size: 2em;
padding-top: 50px;
width: 160%;
font-family: Georgia;
}

table {
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
background-color: black;
color: white;
}
p{
color: AliceBlue;
line-height: 1.3em;
text-align: left;
width: 100%;
font-family: Helvetica;
font-size: 18px;
font-weight: bold;
}

h2 {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
color: #b35900;
font-weight: 100;
font-size: 22px;
line-height: 24px;
padding-bottom: 10px;
text-align: left;
width: 70%;
font-family: Georgia;
}

.content {
padding: 40px;
}

.writer-img {
-webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
-moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
float: left;
width: 370px;
height: left;
margin-left: 0px;
margin-top: 0px;
margin: 0px;
}

div.image {
width: 28%;
background-color: black;
box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
display: block;
margin-left: 25px;
margin-right: auto;
}

div.info {
text-align: center;
padding: 3px 9px;
opacity: 0.5;
}

.container {
float: right;
position: relative;
width: auto;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #F0FFFF;
}

.container:hover .overlay {
opacity: 0.6;
}

.text {
color: #35577D;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

Concluzie:
In urma efectuarii acestei lucrari am facut cunostinta cu limbaje noi
HTML si CSS
am facut cunostinta cu elaborarea tabelelor intr-o pagina web,crearea
paragrafilor si amplasarea lor pe pagina,adaugarea unei imagini avand
posibilitatea de a tasta pe ea si in acelasi timp sa ne conduca la adresa
ei,deci acest limbaj merita de studiat si este foarte interesant.