Lab 2.

Ministerul Educaţiei al Republicii Moldova
Universitatea Tehnică a Moldovei

Facultatea Electronica si Telecomunicatii
Departament:Telecomunicatii
REFERAT
Lucrarea de Laborator nr. 1
Disciplina: Aplicații Software Specializate
Tema: Crearea BOX-MODELULUI.
A efectuat Namolovan A.
Studentul grupei RST-201
semnătura
A verificat __________ ______ ______________ Alexei Arina

nota data semnătura
Chisinău 2022
1
Obiective:
- realizarea machetei (structurii) site-ului web, care ulterior va
conține mai multe pagini relaționate între ele
- realizarea site-ului web după macheta elaborată
- crearea fișierelor aferente .html, care permit crearea paginilor

web
- crearea fișierului CSS de bază al site-ului web în care se va

conține stilizarea conținutului afișat pe site
- înserarea în fișierele HTML și CSS a comentariilor relevante

conținutului
- crearea containerelor de date
- crearea chenarelor
- realizarea raportului pentru lucrarea de laborator
Pasul 1.
Am creat fisierul index.html si am adaugat structura documentului.
Pasul 2
In interiorul elementului head am adaugat elementele meta si title.
Pasul 3.
Am adugat elemente <h1> si < p>. Apoi am creat un nou fisier css in care am
introdus resetare lui Eric Meyer.
Pasul 4.
Am conectat fisierul css la fisierul html dupa care am adugat un element header si
elemental section pentru a face legatura intre pagini. Si in cele din urma am
adaugat drepturile de autor.
Pasul 5.
Dupa ce am adugat drepturile de autor a aparut si nevoie de a naviga prin toate
paginele si am adaugat un menu de navigare. Si am inclus un linkpentru contact.
Pasul 6.
Cream paginle siteului pentru fiecare produs de pe pagina home. Apoi am trecut
la dimensionare tuturor elementelor cu ajutorului fisierului css.
2
Rezultatele:
3
4
Concluzie:
In urma efectuarii lucrari de laborator am inceput ales tema
siteului care pe parcursul lucrarilor de laborator il voi
perfection pina nu va ajunge la starea fina in care va fi
prezentat ca un proiect.Utilizind toate indicatiile din
laborator am capatat competente de a crea un nav bar(bara
de navigare ) de a crea mai multe pagine si a le lega cu pagina
home.
5
Codul Paginii web:
INDEX.html
<!DOCTYPE html>
<html lang="ro">
<head><title>Web burger</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css"
href="burgers-style.css">
<nav class="nav">
<a href="index.html">Acasa</a>
<a href="meniuri.html">Meniuri</a>
<a href="livrare.html">Adauga o adresa
pentru livrare</a>
<a href="promoti.html">La promotie</a>
</nav>
<body> <header class="container">
<h1>Bun venit la Web-burgers</h1>
<h3>Speram ca o sa primesti emotii
noi.</h3>
<section class="container">
<h2>Hai sa comandam impreuna.</h2>
<p >Ce ai dori sa savurezi?</p>
</section>
6
<h5><a
href="burger.html">Burgeri</a></h5>
</section>
<h5><a href="wrap.html">Wrap's</a></h5>
</section>
<H5> <a
href="salate.html">Salate</a></H5>
</section>
<h5><a
href="bauturi.html">Bauturi</a></h5>
</section>
</header>
<footer class="container">
<small>© SRL Web-burgers | WB
2023</small>
</footer>
</body>
</head>
</html>
BURGER.html
<!DOCTYPE html>
<html lang="ro">
7
<head>
<body> <header class="container" class="hero
container">
<h1 >Bun venit la Web-burgers</h1></a>
noi.</h3>
<section class="container" class="hero

container">
<p>Ce ai dori sa savurezi?</p>
</section>
<nav class="nav">
<a href="livrare.html">Livrare</a>
<a href="promoti.html"> Promotie</a>
</nav>
<section class="container" class="nav" >
<h3>Burger</h3>
<h3>Dublu Burger</h3>
<h3>CheesBurger</h3>
<h3>Dubluchesbuger</h3>
</section>
</header>
<footer class="container" >
8
<small>© SRL Web-burgers By Namolovan
A. | WB 2023</small>
</footer>
</body>
</head>
</html>
WRAP.html
<!DOCTYPE html>
<html lang="ro">
<head>
<h1>Bun venit la Web-burgers</h1></a>
noi.</h3>

container">

</section>
<nav class="nav">
<a href="livrare.html"> Livrare</a>
<a href="promoti.html">Promotie</a>
9
</nav>

container">
<h3>Wrap Classic</h3>
<h3>Spyce Wrap</h3>
<h3>Wrap cu creveti</h3>
<h3>Wrap cu pirjoala</h3>
</section>

</footer>
</body>
</head>
</html>
SALATE.html
<!DOCTYPE html>
<html lang="ro">
<head>
<body> <header class="container" >
10
noi.</h3>

container">
<p >Ce ai dori sa savurezi?</p>

</section>
<nav class="nav">
<a href="livrare.html">Adresa
Livrare</a>
</nav>

container">
<h3>Salata cesar(Classic)</h3>
<h3>Salata cesar(cu creveti)</h3>
<h3>Salata Shopski</h3>
</section>
</header>
</footer>
11
</body>
</head>
</html>
BAUTURI.html
<!DOCTYPE html>
<html lang="ro">
<head>
noi.</h3>

container">

</section>
<nav class="nav">
<a href="livrare.html">Adresa
Livrare</a>
</nav>
12
container">
<h3>Coca-Cola</h3>
<h3>Fanta</h3>
<h3>Sprite</h3>
<h3>Kvas</h3>
<h3>Fresh de portocale</h3>
<h3>Fresh de Grapefrut</h3>
<h3>Fresh Mix</h3>
</section>
</header>
</footer>
</body>
</head>
</html>
Fisierul css
html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
13
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
background: rgb(34,193,195);
background: radial-gradient(circle, rgba(34,193,195,1)
0%, rgba(253,237,45,1) 100%);
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
14
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
-----------------
Grid
-----------------
*/
*,
*::before,
*::after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
margin: 0 auto;
padding-right: 30 px;
width: 50%;
}
/*
Nav Bar
*/
.nav {
margin: 0 auto;
padding-right: 30 px;
padding-left: 90px;
width: 90%;
}
15
/*
Tipografie
*/
h1,h2,h3,h4,h5,h6,p {
margin-bottom: 20px;
}
/*
Butoane
*/
.btn {
border-radius: 5px;
display: inline-block;
margin: 0;
}
.btn-alt {
border: 1px solid gray;
padding: 10px 30px;
}
/*
Home
*/
.hero {
padding: 22px 80px 66px 80px;
}
16

Lab 2.

Încărcat de

Informații document

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

Lab 2.

Încărcat de

Drepturi de autor:

Formate disponibile

Ministerul Educaţiei al Republicii Moldova

Universitatea Tehnică a Moldovei

Disciplina: Aplicații Software Specializate

Tema: Crearea BOX-MODELULUI.

A verificat ______ Alexei Arina

- realizarea site-ului web după macheta elaborată

- crearea fișierelor aferente .html, care permit crearea paginilor

- crearea fișierului CSS de bază al site-ului web în care se va

- înserarea în fișierele HTML și CSS a comentariilor relevante

- crearea containerelor de date

- realizarea raportului pentru lucrarea de laborator

<section class="container" class="hero

<footer class="container" >

<section class="container" class="hero

<p>Ce ai dori sa savurezi?</p>

<section class="container" class="hero

<small>© SRL Web-burgers By Namolovan

<section class="container" class="hero

<p >Ce ai dori sa savurezi?</p>

<section class="container" class="hero

<section class="container" class="hero

<p>Ce ai dori sa savurezi?</p>

html, body, div, span, applet, object, iframe,

S-ar putea să vă placă și

Lab 2.

Încărcat de

Informații document

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

Lab 2.

Încărcat de

Drepturi de autor:

Formate disponibile

Ministerul Educaţiei al Republicii Moldova

Universitatea Tehnică a Moldovei

Disciplina: Aplicații Software Specializate

Tema: Crearea BOX-MODELULUI.

A verificat __________ ______ ______________ Alexei Arina

- realizarea site-ului web după macheta elaborată

- crearea fișierelor aferente .html, care permit crearea paginilor

- crearea fișierului CSS de bază al site-ului web în care se va

- înserarea în fișierele HTML și CSS a comentariilor relevante

- crearea containerelor de date

- realizarea raportului pentru lucrarea de laborator

<section class="container" class="hero

<footer class="container" >

<section class="container" class="hero

<p>Ce ai dori sa savurezi?</p>

<section class="container" class="hero

<small>&copy; SRL Web-burgers By Namolovan

<section class="container" class="hero

<p >Ce ai dori sa savurezi?</p>

<section class="container" class="hero

<section class="container" class="hero

<p>Ce ai dori sa savurezi?</p>

html, body, div, span, applet, object, iframe,

S-ar putea să vă placă și

A verificat ______ Alexei Arina

<small>© SRL Web-burgers By Namolovan