Saptamana 2
Partea 1
Programare Front-End
Let’s start our adventure through FE
II. Modern Web Apps UI Structure Basics
Ciclul de viata al unei pagini web ( lifecycle )
1. Document Object Model - Valid Structures
HTML
HTML sau HyperText Markup Language este limbajul standard de markup folosit pentru a defini structura de baza a
unei pagini web. Sintaxa folosita este una speciala pentru a putea fi inteleasa de catre browser si implica mai multe
tipuri de elemente - de sine statatoare, parinte, copil -. Elementele de obicei (nu toate) au ‘opening’ si ‘closing tags’ care
incapsuleaza continut text sau alte elemente, iar fiecare element poate avea multiple atribute ce contin informatii
referitoare la acesta.
<element-parinte atribut1=”valoare-atribut1” atribut2=”valoare-atribut2”>
<element-copil atribut=”valoare-atribut”>
Continut text...
</element-copil>
</element-parinte>
Exemplu de document HTML
HTML - Semnificatia elementelor
DOM
DOM sau Document Object Model este o structura arborescenta alcatuita din obiecte, asociata unei pagini HTML.
Aceasta structura este creata de catre browser in momentul in care o pagina este incarcata, asociind fiecarui element
HTML specificat cate un obiect si serveste ca o interfata pentru accesarea, modificarea si stergerea elementelor. ( vom
vedea mai tarziu cine foloseste aceasta interfata )
Exemplu de structura DOM
PRACTICE: HTML, DOM
2. Elements and Semantics
Tipuri de elemente
● Valid Structure Elements <html>, <head>, <meta>, <link>, <script>
● Headings <h1>, <h2>, ... , <h6>
● Paragraphs <p>
● Text Formatting <br>, <hr>, <pre>
● Comments <!-- -->
● Colors <red>, <green>, <blue>
● Links <a>
● Images <img>, <picture>
● Tables <table>
● Lists <ul>, <ol>, <dl>
● Sections <div>, <main>, <nav>, <header>, <footer>, <section>
● Forms, Inputs <form>, <input>, <button>, <select>
● Media <video>, <audio>
● Canvas, SVG, Iframe, Objects
Referinte: https://www.w3schools.com/tags/default.asp, https://www.quackit.com/html_5/tags/
Tipuri de atribute
- fiecare element html dispune de diferite atribute care confera informatii referitoare la structura acestuia
- atributele se specifica in tag-ul de start al unui element in perechi nume-valoare de forma nume=”valoare”
● Adresa unui link: <a href=”https://www.wantsome.ro”>Wantsome</a>
● Sursa, fisierul unei imagini: <img src=”img_wantsome.jpg”>
● Dimensiunile unei imagini: <img src=”img_wantsome.jpg” width=”500” height=”600”>
● Text alternativ al unei imagini: <img src=”img_wantsome.jpg” width=”500” height=”600” alt=”Imagine laptop”>
● Stiluri <p style=”color: red;”>Continut paragraf</p>
● Lang <html lang=”en-US”>
● Tooltip <p title=”Afisat cand ducem mouse-ul peste (mouse over)”>Continut paragraf<p>
● Evenimente <img onclick="alert(this)" />
● Relatie intre documente <link rel="stylesheet" type="text/css" href="theme.css">
● Tipuri ale unui element <input type=”text” value=”Valoare initiala”>
● Id-ri si clase: <input id=”idInput” class=”clasaInput”>
● ...
! Atentie: nu toate elementele necesita closing tag
Tipuri de atribute
- fiecare element suporta un set limitat, diferit de atribute
- exista atat atribute globale cat si atribute specifice doar anumitor elemente
- exemplu pentru elementul img: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
- intreaga lista de elemente si atribute disponibile poate fi gasita in specificatia oficiala a HTML5:
https://www.w3.org/TR/html52/
HTML - Semantica
- HTML include atat elemente semantice cat si non-semantice
- Un element semantic descrie in mod clar intelesul / rolul sau atat developer-ului cat si browser-ului ( SEO )
Exemple de elemente non-semantice: <div>, <span>
Exemplu de elemente semantice: <form>, <table>, <article>, <audio>, <video>, <header>, <nav>, ...
HTML vs HTML5 - Semantica
- Versiunea mai veche a HTML nu avea o semantica foarte vasta
- Noua versiune ofera noi elemente pentru a descrie mai clar anumite parti ale structurii unui website
<div class=”header”>...</div>
<div class=”sidebar”>...</div>
<div class=”footer>...</div>
...
HTML3 HTML5
HTML5 - Semantica - Exemple de sectiuni, elemente
Header - <header></header> - antetul site-ului - poate include logo, meniu, butoane utilitare pentru autentificare, notificari,
etc...
Footer - <footer></footer> - “subsolul” paginii web - contine informatii precum autor, copyright, linkuri catre ‘terms and
conditions’ , ‘privacy policy’, navigatie catre anumite pagini principale, butoane, etc.
Nav - <nav></nav> - navigare / meniu - in exemplul cu Header avem 3 linkuri catre Personal, Business si Partners and
developers
HTML5 - Semantica - Exemple de sectiuni, elemente
Article - <article></article> - asa cum sugereaza, reprezinta un articol; mai specific, elementele (titlul, descriere, continut)
care compun un articol. Acest element il regasim in special in structura blogurilor sau a ziarelor online.
Video & audio - <video></video> <audio></audio> - continut media
De retinut: Elementele noi de HTML5 fac citirea html-ului mai usoara, insa un mare avantaj este ajutorul oferit motoarelor de
cautare (search engines), pentru o oferi o relevanta mai buna cautarilor - SEO (search engine optimization).
PRACTICE: HTML Elements and Attributes
Exercitii html
1. Un heading cu cu numele vostru
2. Un heading cu profesia voastra
3. Un paragraf cu ce vreti voi
4. O imagine
5. Un link cu o imagine
6. Un link care sa ne redirectioneze catre o noua pagina si sa se
deschida in alt tab
7. Un link care sa deschida o pagina html noua
8. Un heading cu o lista neordonata
9. Un heading cu o lista neordonata in care sa avem linkuri
