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.

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 fișierul „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 a unui loc de
muncă, titlul web-siteului fiind “JobBoard”.
Să creazi un site nu e deloc complicat, e necesar doar de puțină lectură a documentației, timp
și răbdare pentru a implementa toate ideile geniale în practică.
În cele ce urmează vor fi prezentate și analizate elemente ale puzzle-ului (bucăți de cod) care
luate împreună formează o întreagă pagină web.
Unul din elementele principale foarte des utilizate în pagini web sunt listele.
Listele HTML sunt utilizate pentru a prezenta lista de informații într-un mod bine format și semantic.
Există trei tipuri diferite de liste în HTML și fiecare are un scop și o semnificație specifică.
 Listă neordonată - Este utilizată pentru a crea o listă de articole conexe, fără o anumită ordine.
 Lista comandată - Folosit pentru a crea o listă de articole conexe, într-o anumită ordine.
 Lista de descrieri - Folosit pentru a crea o listă de termeni și descrierile acestora.
Ordonate, neordonate, cu ajutorul stilizării listele se pot transforma în orice ne trece prin minte,
de exemplu la creare meniului de navigare ca in Figura 1.
 Figura 1. Utilizarea listelor pentru crearea meniului de navigare

Sau se utilizeaza pentru simplu listarea unor servicii sau statistici ce le putem plasa ca rezumat
în footer, exemplu in Figura 2.

Figura 2. Utilizarea listelor pentru listarea unor opțiuni

Să nu fie uitate headerele deoarece acestea sunt importante.

Motoarele de căutare utilizează rubricile pentru a indexa structura și conținutul paginilor dvs.
web.
Utilizatorii deseori decoltează o pagină după rubricile acesteia. Este important să folosiți
rubrici pentru a arăta structura documentului.
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ță de cod pentru heading 3

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ă o ierarhie întreagă de containere.

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. Încărcarea codului executabil cu tagul <script></script>

 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 un job board, utilizatorul va putea vizualiza joburi, posta
și edita joburile, desigur pentru ultimele opțiuni va fi obligator necesară autentificarea.
 Pagina de pornire va fi o introducere despre ce acest site reprezintă, posibil sub formă de
landing page, cu statistici și recomandări.

Figura 10. Pagina principala a site-ului

Formularele de înregistrare și logare au o pagină separată care poate fi accesată la apăsarea

butonului din meniul de navigare “Log In”.

Figura 11. Formularul de înregistrare

 Înregistrarea pe site va fi foarte simplă, cu ajutorul emailului și bineînțeles o parolă
personalizată. Numele utilizatorului va fi preluat în baza mailului.

Figura 12. Formularul de logare

Pentru formularul de contant sunt necesare mai multe câmpuri, după cum este reprezentat în
Figura 13.

Figura 13. Pagina de contact

 Ulterior site-ul va fi completat cu mai multe pagini, listarea joburilor, sau vizualizarea unui
job specific, cu descrierea acestuia și informațiile necesare pentru angajare. Exemplu în Figura 14.

Figura 14. Descrierea jobului

Concluzie
Bibliografie
 Anexa

Aici o sa fie un fragment din cod!