Lab 4.

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

Facultatea Electronica si Telecomunicatii
Departament:Telecomunicatii
REFERAT
Lucrarea de Laborator nr. 4
Disciplina: Aplicații Software Specializate
Tema: Lucrul cu textul. Tipografia
A efectuat Namolovan A.
Studentul grupei RST-201
semnătura
A verificat __________ ______ ______________ Alexei Arina nota

data semnătura
Chisinău 2023
1
Obiective:
- Adaugarea un proprietati bazate pe fonturi.
- Adaugare unor stiluri tipografice.
- Adaugarea dimensiunilor de fonturi.
- Resestarea elementelor strong,cite si em.
- Actualizarea logoului si Barei de navigare.
Pasul 1.
Adaugarea stilurilor tipografice.
Pasul 2.
Mutare continutului din pagina.
Pasul 3.
Adaugarea dimensiunilor de fonturi.
Pasul 4.
Adaugarea unor caracteristici noi pentru Strong,cite si em.
Pasul 5.
Actualizarea fontului pe tot textul din pagini.
Pasul 6.
Adaugarea stilurilor la elementele de ancorare.
Pasul 7.
Actualizarea logo-ului.
2
Rezultatele:
3
4
Concluzie:
In urma efectuarii lucrari de laborator am acumulat
deprinderi practice in utilizarea proprietatilor CSS pentru a
mofifica fonturile , dimensiunile si amplasarea obiectelor in
pagina.
5
Codul Paginii web:
Home.html
<!DOCTYPE html>
<html lang="ro">
<head><title>Web burger</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css"
href="main.css">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:
wght@100;300;400&display=swap" rel="stylesheet">
</head>
<body>
<header class="header ">
<h2 class="logo">Web-Burgers</h2>
<nav class="navigation">
<a href="home.html">Acasa <span
class="icon"><ion-icon name="home"></ion-icon></span></a>
<a href="meniu.html">Meniu <span
class="icon"><ion-icon name="fast-food"></ion-
icon></span></a>
<a href="livrare.html">Livrare<span
class="icon"><ion-icon name="car-sharp"></ion-
icon></span></a>
<button class="btnlogin-popup
">Login</button>
</nav>
6
</header><p>
<section class="desing-home">
<h3>
<a href="burger.html"><img src="burger-
icon.png" alt="Burger"></a>Burgers
</h3>
<h3>
<a href="bauturi.html"><img
src="drink.png" alt=" Bauturi"></a>Bauturi
</h3>
<h3>
<a href="salate.html" ><img
src="salad.png" alt=" Salate"></a>Salate
</h3>
</section>
</p>
<script type="module"
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionic
ons.esm.js"></script>
<script nomodule
ons.js"></script>
<script src="script.js"></Script>
<br>
7
</body>
<footer >
<br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<p>
<br>
<br>
<br>
<br>
8
<br>
<br>
<p style="font-size: small; color: aqua;"
>Pagina a fost realizata de ca tre Namolovan Alexandru
Student al grupei RST-201</p>
<section style="font-size: medium; color:
aquamarine;" >
<small class="desing-footer">© SRL Web-
burgers | WB 2023</small>
</p>
<p>Pagina mea de instagram<a
href="https://www.instagram.com/thealex_2001/"><img
src="instagram.png" style="width: 15px;"></p>
</section>
</footer>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
9
<br>
<br>
<br>
<br>
<p class="map">
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d2719.485107074484!2d28.821668315600455!3d47.03071097915
067!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4
0c97dc9f2eaba21%3A0x98c10ca8ee46f3d9!2z0KLQtdGF0L3QuNGH0L
XRgdC60LjQuSDQo9C90LjQstC10YDRgdC40YLQtdGCINCc0L7Qu9C00L7
QstGL!5e0!3m2!1sru!2s!4v1679865120669!5m2!1sru!2s"
width="120" height="150" style="border:6;"
allowfullscreen="" loading="lazy" referrerpolicy="no-
referrer-when-downgrade"></iframe>
</p>
</html>
10
BURGER.html
<!DOCTYPE html>
<html lang="ro">
<style type="text/css"></style>
href="main.css">
<body>
icon></span></a>
icon></span></a>
">Login</button>
</nav>
</header>
11
<script nomodule
ons.js"></script>
<section class="desing-home" >

<h3><img src="burger.png"
alt="Burger">Burger</h3>
<h3><img src="double-burger.png"
alt="Dublu-Burger">Dublu Burger</h3>
<h3><img src="cheeseburger.png"
alt="Dublu-Burger">CheesBurger</h3>
<h3><img src="double-cheeseburger.png"
alt="Dublu-Burger">Dubluchesbuger</h3>
</section>
</header>
<footer class="desing-footer" >

<br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
12
<br><br>
<br>
<br>
<br>
<br>
<br>
<p>
<br>
<br>
<br>
<br>
<br>
<br>
<small >© SRL Web-burgers | WB
2023</small>
</p>
</footer>
</body>
</head>
</html>
13
SALATE.html
<!DOCTYPE html>
<html lang="ro">
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="burgers-
style.css">
<nav class="nav">
<ul>
<li>
<a href="index.html">Acasa</a>
</li>
<li>
<a href="meniu.html">Meniuri</a>
</li>
<li>
<a href="livrare.html">Adauga o adresa pentru
livrare</a>
</li>
<li>
<a href="promotie.html">La promotie</a>
</li>
</nav>
<section class="container" class="hero

container">
<h3>Salata cesar(Classic)<a
href="salate.html"><img src="cesar.png" alt="Salata
cesar" style="width: 80px;"></a></h3>
14
<h3>Salata cesar(cu creveti)</h3>
<h3>Salata Shopski</h3>
</section>
</header>
<footer class="container">
<small>© SRL Web-burgers By Namolovan
A. | WB 2023</small>
</footer>
</body>
</head>
</html>
BAUTURI.html
<!DOCTYPE html>
<html lang="ro">
href="main.css">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:
wght@100;300;400&display=swap" rel="stylesheet">
</head>
<body>
15
icon></span></a>
icon></span></a>
">Login</button>
</nav>
</header><p>
<section class="desing-home">
<h3>
src="drink.png" alt=" Bauturi"></a>Coca-Cola
</h3>
<h3>
src="drink.png" alt=" Bauturi"></a>Fanta
</h3>
<h3>
src="drink.png" alt=" Bauturi"></a>Sprite
</h3>
16
<h3>
src="drink.png" alt=" Bauturi"></a>Fresh
</h3>
<h3>
src="drink.png" alt=" Bauturi"></a>Apa
</h3>
</section>
</p>
<script nomodule
ons.js"></script>
<br>
</body>
<footer >
<br>
<br>
17
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<p>
<br>
<br>
<br>
<br>
<br>
<br>
<p style="font-size: small; color: aqua;"
>Pagina a fost realizata de ca tre Namolovan Alexandru
Student al grupei RST-201</p>
<section style="font-size: medium; color:
aquamarine;" >
<small class="desing-footer">© SRL Web-
burgers | WB 2023</small>
18
</p>
</section>
</footer>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p class="map">
<br>
<br>
<br>
19
<br>
<br><br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d2719.485107074484!2d28.821668315600455!3d47.03071097915
067!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4
0c97dc9f2eaba21%3A0x98c10ca8ee46f3d9!2z0KLQtdGF0L3QuNGH0L
XRgdC60LjQuSDQo9C90LjQstC10YDRgdC40YLQtdGCINCc0L7Qu9C00L7
QstGL!5e0!3m2!1sru!2s!4v1679865120669!5m2!1sru!2s"
width="120" height="150" style="border:6;"
allowfullscreen="" loading="lazy" referrerpolicy="no-
referrer-when-downgrade"></iframe>
</p>
</html>
Fisierul css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
20
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-image: url('example.jpg');
background-size: cover;
background-position: center;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
background: rgba( 255, 255, 255, .1);
display: flex;
justify-content: space-between;
align-items:center ;
z-index: 99;
backdrop-filter: blur(10px);
border-bottom: 2px solid rgba( 255, 255, 255,
.2);
}
.header::before{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
21
background: linear-gradient(90deg, transparent,
rgba(255, 255, 255, .4), transparent);
transition: .5s;
}
.header:hover::before
{
left: 100%;
.logo{
font-size: 2em;
color: #fff ;
user-select: none;
}
.navigation a{
position: relative;
font-size: 1.1em;
text-decoration: none;
color: #fff;
font-weight: 500;
margin-left: 40px;
}
.navigation a::after
{
content: '';
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
22
height: 3px;
background: #fff;
border-radius: 5px;
transform-origin: right;
transform: scaleX(0);
transition: transform .5s;
.navigation a:hover::after
{
transform-origin: left;
transform: scaleX(1);
}
.navigation .btnlogin-popup
{
width: 130px;
height: 50px;
background: transparent;
border: 2px solid #fff;
outline: none;
border-radius: 6px;
cursor: pointer;
font-size: 1.1em;
font-weight: 500;
margin-left: 40px;
}
.navigation .btnlogin-popup:hover
{
background: #fff;
color: #162938;
}
23
.desing-footer
{
color: aqua;
}
.desing-text
{
text-
align:center;
margin-top: 0;
padding-bottom:
20%;
position: auto;
color:rgb(0, 0,
0);
text-decoration:
none;
}
.desing-home
{
position:
relative;
margin-left: 40%;
color:rgb(0, 0,
0);
.map
{
24
position:
auto;
}
h1, h2, h3, h4
{
color: rgb(76, 45, 130);
}
h1
{
line-height: 44px;
font-size: 36px;
}
h2
{
line-height: 44px;
font-size: 24px;
}
h3
{
font-size: 21px;
}
h4
{
font-size: 18px;
}
h5
{
color: #a9b2b9;
font-size: 14px;
font-weight: 400;
}
strong
{
25
font-weight: 400;
}
cite, em { font-style: italic; }
26

Lab 4.

Î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 4.

Încărcat de

Drepturi de autor:

Formate disponibile

Ministerul Educaţiei al Republicii Moldova

Universitatea Tehnică a Moldovei

Disciplina: Aplicații Software Specializate

Tema: Lucrul cu textul. Tipografia

A verificat ______ Alexei Arina nota

- Adaugare unor stiluri tipografice.

- Adaugarea dimensiunilor de fonturi.

- Resestarea elementelor strong,cite si em.

- Actualizarea logoului si Barei de navigare.

<section class="desing-home" >

<footer class="desing-footer" >

<section class="container" class="hero

cite, em { font-style: italic; }

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