Ministerul Educaţiei, Culturii și Cercetării al Republicii Moldova

Universitatea Tehnică a Moldovei

Departamentul Ingineria Software și Automatică

RAPORT
Lucrare de laborator Nr.1
Disciplina: Tehnologii Web
Tema: Familiarizarea cu structura unui document
HTML/CSS

A efectuat: st.gr. TI-195 Rotaru Dan

A verificat : asist. univ., Cristian Rusu

Chișinău 2021
Scopul: Studierea bazelor pentru crearea unui site web cu ajutorul HTML, CSS și Bootstrap

Sarcina: Implementarea cunoștințelor acumulate la curs în crearea unui site.

Considerații teoretice:

HTML - HyperText Markup Language 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.

Paginile HTML sunt formate din etichete sau tag-uri și au extensia „.html” sau „.htm”. În
marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> și alta de închidere
</eticheta>, mai există și cazuri în care nu se închid, atunci se folosește <eticheta />. Navigatorul web
interpretează aceste etichete afișând rezultatul pe ecran. HTML-ul este un limbaj care nu face
deosebire între litere majuscule și minuscule.

Pagina principala a unui domeniu este fisierul „index.html” respectiv „index.htm”. Această
pagină este setată a fi afișată automat la vizitarea unui domeniu.

De exemplu la vizitarea domeniului www.nume.ro este afișată pagina

www.nume.ro/index.html.

CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document
HTML. Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere externe sau în cadrul
documentului, prin elementul <style> și/sau atributul style. CSS se poate utiliza și pentru formatarea
elementelor XHTML, XML și SVGL.

CSS3 reprezintă un upgrade ce aduce câteva atribute noi și ajută la dezvoltarea noilor concepte
in webdesign.

Unele dintre cele mai importante segmente (module) noi adăugate acestui standard pentru
formatarea elementelor HTML aduc un plus considerabil in dezvoltarea activități webdesign.

Mai jos sunt prezente in listă cele mai importante modulele adăugate in CSS3:

• Selectors
• Box Model
• Backgrounds and Borders
• Image Values and Replaced Content
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface
 Deși au apărut unele deficiente de compatibilitate intre browsere, majoritatea proprietăților
CSS3 au fost implementate cu succes in variantele browserelor noi.

Bootstrap este un framework CSS gratuit și opend-source, direcționat către dezvoltarea web
front-end receptivă și mobilă. Conține șabloane de design bazate pe CSS și JavaScript pentru
tipografie, formulare, butoane, navigare și alte componente de interfață.

Bootstrap este un framework web care se concentrează pe simplificarea dezvoltării paginilor

web informative (spre deosebire de aplicațiile web). Scopul principal al adăugării la un proiect web
este de a aplica opțiunile Bootstrap de culoare, dimensiune, font și aspect la acel proiect. Ca atare,
factorul principal este dacă dezvoltatorii responsabili găsesc acele alegeri după bunul lor plac. Odată
adăugat la un proiect, Bootstrap oferă definiții de bază ale stilului pentru toate elementele HTML.
Rezultatul este un aspect uniform pentru proză, tabele și elemente de formă din browserele web. În
plus, dezvoltatorii pot profita de clasele CSS definite în Bootstrap pentru a personaliza în continuare
aspectul conținutului lor. De exemplu, Bootstrap a prevăzut tabele de culoare deschisă și închisă, titluri
de pagină, citate de tragere mai proeminente și text cu evidențiere.

Bootstrap vine de asemenea cu mai multe componente JavaScript sub formă de plugin-uri
jQuery. Ele furnizează elemente suplimentare de interfață pentru utilizator, cum ar fi casetele de
dialog, fișele de unelte și caruselele. Fiecare componentă Bootstrap constă dintr-o structură HTML,
declarații CSS și, în unele cazuri, însoțitoare de cod JavaScript. De asemenea, extind funcționalitatea
unor elemente de interfață existente, inclusiv de exemplu o funcție auto-completă pentru câmpurile de
intrare.

Implementare, rezultate practice:

Pentru realizarea acestui laborator a fost propus crearea unui site de căutare
monitorizare a cheltuielilor facute. Utilizatorul va putea sa adauge, modifice
cheltuilile lunare astfel el va putea să-și monitorizeze cheltuielile.
Proiectul este făcut utilizând biblioteca Bootstrap stilizând-o și modificând-o
pentru uz personal (design-ul anumitor componente)
În primul rând aș vrea să vorbesc despre structura unei pagini web. Fiecare
pagină web se începe cu tag-ul <!DOCTYPE html>, care spune browser-ului că această
este o pagină html. Apoi fiecare pagină trebuie să fie inclus într-un teg <html>, ulterior
ceea ce este la fiecare pagină este tag-ul <head>, în el este inclus denumirea paginii,
codificarea paginii, stilurile incluse și SEO tag-uri.
 Fig.1 Structura obligatorie cu ce se începe fiecare pagină web

Aici putem vedea și <!DOCTYPE html>, și html și head (unde sunt incluse toate lucrurile
menționate mai sus), și alte tag-uri precum meta, title, și <link rel=”stylesheet”> de
care avem nevoie pentru a include unele stiluri CSS.
Mai departe putem vedea tag-ul body, în care se și introduc toate elementele paginii,
în el se află
Figura 2. Tag-ul body și content-ul propriu zis pentru pagină
Titlurile <h1> trebuie utilizate pentru titlurile principale, urmate de rubricile <h2>,
apoi cele mai puțin importante <h3> și așa mai departe.
Exemple de utilizare a headerelor în site sunt prezentate în figurile:

Figura 3. Utilizarea headerelor în site

Figura 4. Secvența de cod pentru header 5

Din figura 4 se poate observa ca in interiorul headerului este utilizat tag-ul

<a></a> - ceea ce înseamnă că textul cuprins între acestea este un link – în cazul
respectiv utilizatorul va fi redirecționat spre o altă pagină a aceluiași site.

Un alt tag intalnit la tot pasul este tagul <div></div>. El nu reprezintă altceva
decât un container ce poate conține alte containere, poate fi setată dimensiunea
culoarea, îi poate fi atribuită o imagine de fundal și așa mai departe. În Figura 5 este
reprezentat un container ce conține alte containere, în cazul nostru se va afișa trei
blocuri unu lângă altul.
 Figura 5. Ierarhizarea containerelor – tagul <div></div>

Iar elementul HTML <span> este un container inline generic pentru exprimarea conținutului,
care nu reprezintă în mod inerent nimic. Poate fi folosit pentru a grupa elemente în scopuri de stil
(folosind atributele clasei sau id-ului) sau pentru că împărtășesc valori de atribute, cum ar fi lang.
Acesta trebuie utilizat numai atunci când niciun alt element semantic nu este adecvat. <span> seamănă
foarte mult cu un element <div>, dar <div> este un element la nivel de bloc, în timp ce un <span> este
un element inline.

Figura 6. Adăugarea textului în paragraf

 Tag-ul <p> reprezintă un paragraf. Paragrafele sunt de obicei reprezentate în suportul vizual
ca blocuri de text separate de blocurile adiacente prin linii necompletate și / sau indentare de primă
linie, dar alineatele HTML pot fi orice grupare structurală a conținutului asociat, cum ar fi imaginile
sau câmpurile de formă. Exemplu de implementare a paragrafului în această lucrare este reprezentat
în Figura 6.

Elementul HTML Link Resource External (<link>) specifică relațiile dintre

documentul curent și o resursă externă. Acest element este cel mai frecvent utilizat
pentru a face legătura cu foile de stil, dar este utilizat și pentru a stabili pictograme ale
site-ului (atât pictograme de stil „favicon”, cât și pictograme pentru ecranul de start și
aplicații de pe dispozitive mobile), printre altele.

Figura 7. Adăugarea fișierelor css cu tagul <link/>

Elementul HTML <script> este utilizat pentru încorporarea sau referirea codului executabil;
aceasta este de obicei folosită pentru a încorpora sau a face referire la codul JavaScript. Elementul
<script> poate fi folosit și cu alte limbaje, cum ar fi limbajul de programare shader GLSL WebGL.

Figura 8. Includerea unor scripturi javascript în pagină

 Elementul HTML <form> reprezintă o secțiune de document care conține controale interactive
pentru trimiterea informațiilor.

Elementul <input> este utilizat pentru a crea controale interactive pentru formularele bazate
pe web pentru a accepta date de la utilizator; sunt disponibile o mare varietate de tipuri de date de
intrare și widget-uri de control, în funcție de dispozitiv și de agentul utilizator. Elementul <input> este
unul dintre cele mai puternice și complexe din toate HTML, datorită numărului mare de combinații
de tipuri și atribute de intrare.

Elementul <textarea> reprezintă un control de editare a textului simplu în mai multe linii, util
atunci când doriți să permiteți utilizatorilor să introducă o cantitate importantă de text format gratuit,
de exemplu un comentariu la un formular de revizuire sau feedback.

Elementul <button> reprezintă un buton care se poate face clic, utilizat pentru a trimite
formulare sau oriunde într-un document pentru funcționalitatea butoanelor standard accesibile. În mod
implicit, butoanele HTML sunt prezentate într-un stil asemănător cu platforma pe care agentul
utilizator îl rulează, dar puteți modifica aspectul butoanelor cu CSS.

Figura 9. Secvență de cod pentru ce afișează un formular

Rezultatul primei lucrări de laborator:

Tema paginii web a fost aleasă în așa fel pentru ca următoarele lucrări

de laborator să fie executate tot în baza ei, astfel site-ul va fi pentru a

monitoriza cheltuielile, autentificarea va fi obligatorie.

Figura 10. Dashboard-ul site-ului , pagina principală

Concluzie
În concluzie pot afirma că am obținut cunoștințe de lucru în limbajul HTML &
CSS. Am obținut cunoștințe în lucru cu Tag-urile, cu imaginile, cu formele și input-urile.
De asemenea am obținut cunoștințe de lucru utilizând biblioteca Bootstrap