Ministerul Educaţiei, Culturii şi Cercetării

al Republicii Moldova
Universitatea Tehnică a Moldovei
Facultatea Electronică şi Telecomunicaţii
Departamentul Telecomunicaţii şi Sisteme Electronice

Lucrarea de laborator Nr.2

La disciplina
“Aplicații software scepializate ”
Tema:Crearea BOX MODEL

A efectuat: st.gr IMTC-181

Munteanu Viorica

A verificat: l.univ. Alexei Arina

Chișinău 2021
I)Obiective:
- CREAREA BOX MODELULUI;

- crearea containerelor de date;

- crearea chenarelor;

- realizarea raportului pentru lucrarea de laborator.

II)Pasii principali.

1) Începem prin a ne ajusta dimensiunea cutiei pentru a utiliza border-box, ceea ce va facilita
dimensionarea tuturor elementelor noastre. În fișierul main.css, chiar sub resetarea noastră,
adăugăm un comentariu pentru a identifica codul pentru ceea ce va deveni grila noastră și ne
va ajuta la determinarea aspectului site-ului nostru web. Punem acest lucru sub resetarea
noastră, astfel încât să se încadreze în poziția corectă în cascadă. De acolo, putem folosi
selectorul universal, *, împreună cu pseudoelementele universale, *:before și *:after, pentru
a selecta fiecare element imaginabil și pentru a schimba box-sizing pe border-box.

2) În continuare, vom dori să creăm o clasă care să servească drept container pentru
elementele noastre. Putem folosi această clasă de containere pe diferite elemente pentru a
seta o lățime comună, a centra elementele din pagină și a aplica un padding orizontal comun.

Chiar sub setul nostru de reguli de selecție universală, creăm un selector cu o clasă de container.
În cadrul acestui selector, vom seta lățimea noastră la 1200 de pixeli, padding stânga și dreapta la
30 de pixeli, marginile superioare și inferioare la 0 și marginile stânga și dreapta pentru a fi
automate.
Setarea unei lățimi indică browserului definitiv cât de larg ar trebui să fie orice element cu clasa
de container. Folosind o margine automată din stânga și din dreapta, în combinație cu această
lățime, permite browserului să își calculeze automat marginele stânga și dreapta egale pentru
element, centrându-l astfel pe pagină. În cele din urmă, padding din stânga și din dreapta asigură
că conținutul nostru nu este așezat direct pe marginea elementului și oferă un pic de spațiu liber.
3)Acum că avem o clasă de container disponibilă pentru a fi folosită, să mergem mai departe și
să aplicăm clasa de container pe întregul nostru HTML la elementele <header> și <footer> din
fiecare pagină, inclusiv index.html, rst.html, imtc.html, tst.html și contacte.html.

4) Haideți să mergem înainte și să centrăm restul conținutului pe paginile noastre. În pagina

principală, index.html, adăugăm clasa de container la fiecare element <section> din pagină,
unul pentru secțiunea erou (secțiunea care introduce departamentul) și unul pentru secțiunea de
prezentări.
În plus, înfășurăm toate elementele <h1> pe fiecare pagină cu un element <section> cu clasa de
container.
Vom reveni și regla aceste elemente și clase mai târziu, dar deocamdată ne îndreptăm în direcția
corectă.

5) Acum că tot conținutul nostru este centrat, să creăm o distanțare verticală între elemente.
Pentru început, să plasăm o margină de jos de 22 de pixeli pe câteva dintre elementele noastre
din titlu și paragraf. Vom plasa și comenta aceste stiluri de tipografie sub stilurile noastre de
grilă. Am sărit intenționat peste elementele <h2> și <h6>, întrucât proiectarea nu necesită
margini pentru elementele <h2> și nu vom folosi niciun element <h6> în acest moment.

6) Să încercăm, de asemenea, să creăm un chenar și unele colțuri rotunjite. Vom începe prin a
plasa un buton în elementul <section> din pagina principală, chiar sub <header>. Anterior am
adăugat un element <a> în acest element <section>. Adăugăm clasele de btn și btn-alt.
Să creăm acum câteva stiluri pentru acele clase din CSS-ul nostru. Sub setul de reguli de
tipografie, creăm o nouă secțiune a fișierului CSS pentru butoane.
Pentru început, adăugăm clasa btn și aplicăm câteva stiluri comune care pot fi partajate pe toate
butoanele. Vom dori ca toate butoanele noastre să aibă o rază de bord de 5 pixeli.
De asemenea, vom dori să includem stiluri specifice acestui buton, pe care le vom face folosind
clasa btn-alt.
Utilizarea claselor btn și btn-alt pe același element <a> permite stratificarea acestor stiluri,
redarea tuturor stilurilor pe un singur element.
7) Deoarece lucrăm pe pagina principală, adăugăm și un pic de padding la elementul <section>
care conține elementul nostru <a> cu clasele de btn și btn-alt. Vom face acest lucru adăugând o
valoare de atribut de clasă la elementul <section> de frunte, alături de valoarea atributului clasei
de container, deoarece aceasta va fi secțiunea principală a site-ului nostru web.
În continuare, vom dori să creăm o nouă secțiune în fișierul nostru CSS pentru stilurile de pagină
de pornire și, după ce vom fi gata, vom folosi clasa hero pentru a aplica padding pe toate cele
patru laturi ale elementului <section>.
Site-ul nostru începe să arate mai bine, în special pagina de pornire.

III)Codul HTML si CSS

<!DOCTYPE html>

<html lang="ro">

<head>

<meta charset="utf-8">

<title>

Sala de sport</title>

<link rel="stylesheet" href="assets/stylesheet/main1.css">

</head>

<body>
<header class="container">

<section class="container">

<h1>

<a href="acasa.html">

Sala de sport</a>

</h1>

</section>

<nav>

<a href="acasa.html">Acasa</a>

<a href="kickbox.html" target="_blank">kickbox</a>

<a href="box.html" target="_blank"> box </a>

<a href="judo.html" target="_blank">judo</a>

<a href="contacte.html" target="_blank">Contacte</a>

</nav>

</header>

<p></p>

<section>

<section>

<a href="kickbox.html" target="kickbox.html">

<h5>kickbox</h5>

<h3>Sportul care te va ajuta sa te dezvolti</h3>

</a>

<p>Inscrie-te chiar astazi! </p1>

</section>

<section>

<a href="box.html" target="box.html">

<h5>Box</h5>

<h3>Sportul pentru cei ce doresc si pot </h3>

</a>

<p>Nu pierde ocazia sa te inscrii!! </p>

</section>

<section>

<a href="judo.html" target="judo.html">

<h5>judo</h5>

<h3>Ai obosit de ceva banal ,incearca un sport japonez</h3>

</a>

<p>Dar tu deja teai inscris?!</p>

</section>
</section>

<footer class="container">

<small class="hero container"> &copy;Sala de sport 2021 </small>

<nav>

<a href="acasa.html">Acasa</a>

<a href="kickbox.html" target="_blank">kickbox</a>

<a href="box.html" target="_blank">box</a>

<a href="judo.html" target="_blank">judo</a>

<a href="contacte.html" target="_blank">Contacte</a>

</nav>

</footer>

</body>

</html>
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,

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;

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

body {

line-height: 1;

ol, ul {

list-style: none;

blockquote, q {

quotes: none;

blockquote:before, blockquote:after,

q:before, q:after {

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-left: 30px;

padding-right: 30px;

width: 1 auto;

/*
===================

Typography

===================

*/

h1, h3, h4 ,h5, p {

margin-bottom: 22px;

/*

====================

Buttons

====================

*/

.btn{

border-radius : 5px;

display: inline-block;

margin: 0;

.btn-alt{

border: 1px solid #0E0640;

padding: 10px 30px;

background: #33FF99;

/*

===============
Home

===============

*/

.hero{

padding: 22px 80px 66px 80px;

IV)Concluzie.

În urmă efectuării lucrării de laborator am ajustat dimensiunea cutiei pentru a facilita

dimensionarea tuturor elementelor.

Am folosit selectorul universal *,impreuna cu pseudoelementele universale ,*:before si *:after

pentru a selecta fiecare element imaginabil. Am adaugat clasa btn si am aplicat citeva stiluri
comune . In cocluzie pot afirma ca multe din trasaturile limbajului HTML, cum ar fi
independenta fata de platforma, structurarea formatării și legaturile hypertext, fac din el un foarte
bun format.Site-ul a inceput a arata mai bine din punct de vedere al structurii,ceea ce i-a oferit un
aspect vizual mai placut .