CURS HTML

Agenda

• Elemente de baza
• Structura unui document HTML
• Elemente HTML
• Tabele HTML
• Intrebari
 Diferite moduri de a accesa Web-ul
BROWSERELE DISPOZITIVE
Site-urile web pot fi accesate prin Site-urile web pot fi accesate de pe un
intermediul unui software denumit numar tot mai mare de dispozitive:
browser web. • computere desktop
Exemple: Firefox, Internet Explorer, Safari, • laptopuri
Chrome si Opera. • tablete
• telefoane mobile.

SERVERELE WEB
Atunci cand se introduce o adresa web a
intr-un browser, cererea este trimisa prin
intermediul internetului catre un
computer special cunoscut sub
denumirea de server web care gazduieste
site-ul web.
SCREEN READERS
Screen readers (cititoarele de ecrane) sunt
programe care citesc utilizatorilor continutul
ecranului (utilizate pentru pesoanele cu
probleme de vedere).
 Design web responsive

Bootstrap framework
 PAGINI WEB

HTML
HyperText Markup
Language

CSS
Cascade Style Sheets

JavaScript
 HTML - HyperText Markup Language

Standardul curent este HTML5 publicat in October 2014 de W3C

HyperText
Hipertext inseamna ca orice cuvant, fraza, imagine sau alt element al documentului
vazut de un utilizator ( client ) poate face referința (hyperlink-uri) la un alt document,
ceea ce usureaza mult navigarea intre multiple documente sau chiar in interiorul unui
aceluiasi document.

Limbaj de marcare
Un sistem pentru adnotarea documentelor intr-un mod care se distinge sintactic de
continut.

!! Browserele nu vor arunca erori in cazul unui cod HTML incorect ci il vor ignora sau
vor incerca sa-l corecteze automat.
Elemente de baza
 Codul

Fisiere cu extensia .html or .htm

Creat si editat folosind:

● Editoare text: Visual Studio Code, Brackets, Atom,
Sublime, Notepad++
● Editoare HTML (WYSIWYG): Macromedia Dreamweaver

Codul se executa in browser (este parsat si afisat)

 Ce este un fisier HTML?
HTML este compus din elemente

Fiecare element HTML consta in:

• tag de deschidere (numele elementului in interiorul parantezelor ascutite <>. )
• tag de sfarsit (tagul de sfarsit are in plus un slash inainte de numele elementului)
• continutul elementului
 Elemente HTML

Elementele pot fi:

• imbricate

• goale
• unele elemente constau doar dintr-un tag de deschidere
- De obicei folosit pentru a insera / incorpora ceva in document
 Elemente HTML

BLOC
• Formeaza un bloc vizibil pe o pagina web: apar pe o linie noua si orice continut care
urmeaza dupa ele va aparea, de asemenea, pe o linie noua
• Tind sa fie elemente structurale
• ex.: paragraph, header, footer, div

INLINE
• De obicei, reprezinta parti mici din continutul documentului
• Nu va determina aparitia unei linii noi în document
• ex.: strong, a, em, span
 Atribute
Elementele pot avea atribute

• Atributele au spatiu intre ele si

numele etichetei (sau atribute
anterioare, daca exista)

• Sunt de forma nume=“valoare”

• Valorile atributelor sunt trecute

intre ghilimele

Recomandare: folositi ghilimele duble

 Exemple de atribute HTML

<h1 id="myHeader">Hello World!</h1>

<p class="numeClasa1" >Text…</p>

<p style="font-family:Arial; color:#FF0000;">Text...</p>

<table border="2"></table>

<h4 title="Hello HTML!">Titled Heading Tag Example</h4>

<a href="http://www.google.com" target= " _blank " >

Google</a>
 Spatiile goale si comentariile
In momentul in care randeaza codul, parserul HTML reduce spatiile
goale multiple si trecerile pe linie noua la un singur spatiu.

Folositi cat de multe spatii goale sunt necesare pentru a avea un cod cat
mai lizibil!

Recomandari
– Fiecare element bloc ar trebui sa inceapa pe o linie noua, precum si
continutul acestuia
– Fiecare element imbricat(bloc) trebuie indentat exact o data
– Lungimea liniei nu ar trebui sa faca ca editorul sa scrolleze/deruleze

Comentarii HTML
<!-- Acesta este un comentariu-->
Caractere speciale
Structura documentului HTML
Prima pagina HTML
Structura unei pagini HTML
 Declaratia <!DOCTYPE>
Documentele HTML trebuie sa inceapa cu un DTD (document type definition)

Obiectivul sau initial a fost de a face legatura cu un set de reguli pe care

documentul/pagina HTML trebuia sa le respecte pentru a fi considerat un
document HTML valid.

Stilul vechi:

HTML 5 :
 Elementul <html>

Reprezinta elementul radacina

Acest element conţine de fapt documentul (pagina) HTML
Sectiunea <head>
 Elementul <body>

Acest element contine de fapt corpul (continutul) documentului (paginii)

HTML ce este afisata utilizatorilor, precum:

○ Text
○ Imagini
○ Formulare
○ Liste
○ Video-uri
○ Audio
○ etc.
 Intrebari

1. Care este rolul elementului <head>?

2. Care e rolul elementului <body>?
3. Care este structurat un document html?
4. Ce este un fisier HTML?
Elemente de baza
 <div> , <p> si <span>
<div>
- Creaza o diviziune logica in
interiorul paginii
- Element de tip bloc
- Nu are valoare semantica

<span>
- Element inline
- Util pentru vizarea unei portiuni
specifice de text prin intermediul
css
- Nu are valoare semantica

<p>
- Reprezinta un paragraph de text
- Element de tip bloc
- Are semantica implicita
 Gruparea textului si a elementelor
intr-un bloc

Elementul <div> permite gruparea unui

<div id="header">
set de elemente intr-un container/bloc.
<img src="images/logo.jpg" alt=“Party" />
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="biography.html">Biography</a></li>
<li><a href="works.html">Works</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div> <!-- end of header -->
 Gruparea textului si a elementelor
inline
<!DOCTYPE html>
<html>
<head>
<span> <style>
Elementul <span> este utilizat cand se .gallery {
doreste schimbarea stilului unei text-transform: uppercase;
sectiuni de text dintr-un paragraf (de color: #045FB4;
ex pentru colorarea unei parti de text) }
</style>
</head>
<body>
REZULTAT:
<p>Anish Kapoor won the Turner Prize in 1991
and exhibited at the <span class="gallery">
Tate Modern </span> gallery in London in 2003.</p>
</body>
</html>
 Headings

<h1>-<h6>
1. Indica titlurile din pagina
2. Au valoare semantica
3. Exista 6 nivele de titluri
3. Nu folositi niciodata mai mult de 3 nivele diferite in aceeasi pagina.
4. Headingurile trebuie sa apara in ordine numerica in interiorul paginii.
5. Headingurile trebuie folosite doar pentru titluri si nu pentru a afisa un text mai mare.
Elemente Semantice
 Intrebari
1. Diferenta dintre un element bloc si unul inline?
2. Care este scopul atributelor? Unde se plaseaza atributele?
Exemple?
3. Diferenta dintre atributele id si class?
4. De ce se utilizeaza DOCTYPE?
5. Adauga un tooltip pentru paragraful de mai jos cu textul ‘Atribute
HTML’
<p> Initiere in HTML</p>
6. Care este diferenta intre DIV si SPAN?
7. Care este scopul elementului DIV?
 Imagini
Tagurile <img> sunt taguri goale.

Atribute: Atribut Definitie

src specifica browserului unde se gaseste

imaginea (required); calea absoluta sau
relativa
alt furnizeaza o descriere text a imaginii in
cazul in care imaginea nu poate fi
vizualizată (required)
height inaltimea in px
width latimea in px
border Grosimea bordurii in px; 0 daca nu e
bordura

<img src="images/smiley.gif" alt="Smiley face" height="160" width="210" >

<img src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="W3Schools.com" style="width:104px;height:142px;">
 Intrebari

1. Imaginea de mai jos nu exista. Specifica un text alternativ care sa

apara cand imaginea lipseste.

<img src="w3schooooools.jpg" width="135" height="50">

 Iframes
iFrames (inline frames) sunt precum un browser in interiorul paginii voastre web,
pot fi folosite pentru a afisa o pagina web in interiorul altei pagini web.

<iframe src="URL"></iframe>

Atribute: width, height, src, frameborder, scrolling, name, id, etc.

 Iframes
<iframe
src="http://maps.google.co.uk/maps?q=moma+new+york&amp;output=embed">
width="450" height="350" frameborder="0" scrolling= "no">
<p>Your browser does not support iframes.</p>
</iframe>

https://www.ostraining.com/blog/coding/responsive-google-maps/
https://www.ostraining.com/blog/webdesign/against-using-iframes/
 HTML5: Figure si Figure caption
• HTML 5 a introdus un nou element
<figure> pentru a introduce imaginile
si eticheta acestora.
<figure>
<img src="images/otters.jpg" alt="Photograph
of two sea otters floating in water">
<figcaption>
Sea otters hold hands when they sleep so they
don't drift away from each other.
</figcaption>
</figure>
 Tipuri de liste
Listă neordonată:

• este inserată cu blocul <ul>…</ul>

• atributului type al elementului <ul> i se poate asocia una din următoarele valori: disc
 Liste ordonate
• lista este inserată cu blocul <ol>…</ol>.
• atributul start al elementului <ol> primeşte ca valoare numai numere întregi pozitive şi reprezintă
poziţia de start a elementelor listei.

Atributul type al elementului <ol> poate primi una din următoarele valori:
 Listă de definiţii
• constă dintr-o serie (secvenţă) de termeni precum şi descrierile (definiţiile)
acestora;

• este inserată cu blocul <dl>…</dl>. Pentru a insera articole în listă se utilizeaza:

• eticheta <dt> pentru a specifica termenul definit
• eticheta <dd> pentru a sprecifica descrierea (definiţia) termenului; Descrierea
este indentata
 Intrebari
1. Agauti un elementul ‘Coffee’ in urmatoarea lista.
<ul></ul>

2. Modificati lista de mai jos sa afiseze patratele (in loc de cercuri) in dreptul
elementelor.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

3. Modifica lista neordonata intr-o lista ordonata.

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
 Intrebari
1. Modifica lista de mai jos sa afiseze litere in loc de cifre.
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

2. Completeaza descrierea elementelor de mai jos a.i. fiecare element sa

aiba o descriere.
<dl>
<dt>Coffee</dt>
<dt>Milk</dt>
</dl>
 TABELE
Folositi tabelele doar pentru a prezenta informatii (date tabulare) ,
NICIODATA ca LAYOUT!
 Structura de baza a tabelelor
Folositi tabelele doar pentru a prezenta date tabulare NICIODATA ca LAYOUT!

Un tabel consta din randuri si celule.

Randurile sunt impartite in coloane si fiecare celula se poate intinde pe una sau mai
multe coloane.

Elementele unui tabel:

<table> - tabelul
<tr> - table row
<th> - table header
<td> - table data (celula)
<thead>, <tfooter>, <tbody> - sectiuni ale tabelului
Tabele simple
<table border="1" cellspacing="15"> …

<table border="1" cellpadding="15"> …

 Antetul tabelului
<table>
<tr>
<th></th>
<th scope="col">Saturday</th>
<th> - table heading
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Tickets sold:</th>
<td>120</td>
<td>135</td>
</tr>
<tr>
<th scope="row">Total sales:</th>
<td>$600</td>
<td>$675</td>
</tr>
</table>
Celule care se intind pe mai multe coloane

colspan - indica pe cate coloane se intinde

celula respectiva

<td colspan= “numar“ >

Ex: Care este structura tabelului?

Celule care se intind pe mai multe coloane
<table>
<tr>
<th></th>
<th>9am</th>
<th>10am</th>
<th>11am</th>
<th>12am</th>
</tr>
<tr>
<th>Monday</th>
<td colspan="2">Geography</td>
<td>Math</td>
<td>Art</td>
</tr>
<tr>
<th>Tuesday</th>
<td colspan="3">Gym</td>
<td>Home Ec</td>
</tr>
</table>
Celule care se intind pe mai multe randuri

rowspan - indica pe cate randuri se intinde

celula respectiva

<td rowspan=“numar“>

Ex: Care este structura tabelului?

Celule care se intind pe mai multe randuri
<table>
<tr>
<th></th>
<th>ABC</th>
<th>BBC</th>
<th>CNN</th>
</tr>
<tr>
<th>6pm - 7pm</th>
<td rowspan="2">Movie</td>
<td>Comedy</td>
<td>News</td>
</tr>
<tr>
<th>7pm - 8pm</th>
<td>Sport</td>
<td>Current Affairs</td>
</tr>
<table>
 <table>

Tabele LUNGI <thead>

<tr>
<th>Date</th>
<th>Income</th>
<th>Expenditure</th>
</tr>
<thead> - Antetul tabelului </thead>
<tbody>
<tbody> - Corpul tabelului <tr>
<th>1st January</th>
<td>250</td>
<tfoot> - Footerul tabelului. <td>36</td>
</tr>
<tr>
<th>2nd January</th>
<td>285</td>
<td>48</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>7824</td>
<td>1241</td>
</tr>
</tfoot>
</table>
 Linkuri
<a href=”URL-adresa paginii asociate”> Cuvinte care se pot selecta </a>

http://www.tagindex.net/html/frame/a_target.html
Linkuri
 Intrebari
1. Modificati linkul de ma jos - in momentul in care se apasa/click pe textul ‘Visit our
HTML tutorial’ utilizatorul sa fie redirectionat catre https://www.w3schools.com.

<a>Visit our HTML tutorial.</a>

2. Modificati codul de mai jos - in momentul in care se apasa pe imagine sa se

deschida pagina "https://www.w3schools.com" .

<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px; border:0">

3. Modificati linkul de mai jos - in momentul in care se apasa/click pe textul ‘HTML

images’, pagina html_images.asp sa se deschida intr-o fereastra noua.

<a href="html_images.asp">HTML Images</a>

4. Cum realizati legaturi catre elemente HTML din aceeasi pagina?

5. Cum faceti ca un text de pe pagina web sa va permita sa trimiteti un mail in

momentul in care se apasa/click pe textul respective.
 PARTEA 2

* Formulare
* Cum se incarca si afiseaza o pagina web
 FORMULARE
• Cel mai cunoscut formular de pe web este probabil casuta de cautare care sta in
mijlocul paginii Google.
 FORMULARE
• Metoda principală de a prelua date introduse de utilizator

• Datele sunt, de obicei, trimise către un server web

• Prin limbajul JavaScript se pot accesa si procesa informatiile

introduse de utilizator

***
GET (URL):

POST (HTTP
Request Body):
Cum functioneaza formularele?
Un formular consta din mai multe
elemente, fiecare colectand cate o
informatie. Serverul trebuie sa stie de la ce
element al formularului primeste informatia
respectiva.

De aceea browserul trimite informatia catre

server folosind perechi nume/valoare.
In exemplul de mai sus, utilizatorul
completeaza username-ul si selecteaza
cantaretul de Jazz favorit.
Urmatoarele perechi name/value sunt
trimise catre server:

username = Ivy& vote=Herbie

<form action=“action.php” method=“get”>

<input type=“text” name=“username”>
….
</form>
 Din ce este compus un formular?

● Label-uri – adnoteaza campurile de intrare pentru utilizator

● Campuri de intrare – campuri de text, elemente ascunse,
checkbox-uri, butoane radio, etc.
● Actiuni – de obicei butoane care realizeaza o actiune (ex:
submit, reset)
● Validari – asigura ca datele sunt valide
● Mesaje – ofera feedback pe baza datelor introduse de utilizator
si a validarilor
 Elementele formularului
INSERARE TEXT:
Camp text: adrese de email, Elementul ascuns Textarea: mesajele si
nume). comentariile.

LUAREA DE DECIZII:
Butoane radio Casete de validare (checkboxes) Lista de selectie

TRIMITEREA FORMULARELOR:
Butonul de trimitere Butonul imagine Incarcarea unui fisier
 Elemente de tip text
● Un camp text cu o singura linie:

<input type="text" name="fieldName" value="This is a text field" />

● Un camp text cu mai multe linii:

<textarea name="fieldName">This is a multi-line text field</textarea>

● Camp parola – testul introdus este mascat cu *

<input type="password" name="password" />

● Campuri ascunse care nu sunt vizibile utilizatorului dar valorile sunt trimise la
server

<input type="hidden" name="fieldName" value="This is a hidden text field" />

○ de obicei utilizat de codul Javascript

 Controlul formularelor
Casete de validare

<input type="checkbox" name="fruit1" value="apple" />

<input type="checkbox" name="fruit2" value="pear" />

Butoanele radio
<input type="radio" name="city" value="Brasov" />
<input type="radio" name="city" value="Bucuresti" />
<input type="radio" name="city" value="Cluj" />

***
 Lista de selectie
Meniu derulant / Selecteaza o optiune:

Afiseaza lista de elemente pe mai multe randuri si

permite selectarea mai multor optiuni tinand apasat CTRL
sau SHIFT
 Butoane
● Butoanele utilizate de JavaScript pentru a adauga functionalitate, nu au o
actiune default:

<input type="button" value="Click Me" />

<button type="button">Click Me</button>

● Butonul de Reset– revine la valorile prestabilite ale formularului

<input type="reset" value="Reset Form" />

<button type="reset">Reset Form</button>

● Butonul de submit – trimite continutul formularului catre server

<input type="submit" value="Send Form" />

<button type="submit">Send Form</button>
Incarcarea unui fisier
<form action="http://www.example.com/upload.php" method="post">
<p>Upload your song in MP3 format:</p>
<input type="file" name="user-song"><br>
<input type="submit" value="Upload">
</form>

REZULTAT:

Cand permitem userilor sa incarce fisiere, atributul method al formularului trebuie sa aiba
valoarea POST (nu putem trimite fisiere folosind metoda HTTP GET).
 Label-urile
Labelurile sunt utilizate pentru a asocia un text explicativ unui element al
formularului pe baza id-ului elementului:

<label for="username">Username</label>
<input type="text" id="username" name="username" />
Clicking on a label shifts focus to its associated field (checkboxes are toggled, radio
buttons are checked)

Fiecare element al formularului trebuie sa aiba propriul <label> (astfel formularul este
accesibil si pentru cei cu probleme de vedere).
 Label-urile

<form action="http://www.example.org/profile.php">
<label>Age: <input type="text" name="age"></label> <br>

Gender:
<input id="female" type="radio" name="gender" value="f">
<label for="female">Female</label>

<input id="male" type="radio" name="gender" value="m">

<label for="male">Male</label>
</form>
 Fieldset
Utilizat pentru a vizualiza si pentru a grupa semantic unele elemente ale
formularului.
<form>
<fieldset>
<legend>Personal Information</legend>
<label>Name: <input type="text" name="name" /></label>
<label>Phone: <input type="tel" name="phone" /></label>
</fieldset>
<fieldset>
<legend>Address</legend>
<label>Street: <input type="text" name="street" /></label>
<label>Zip: <input type="text" name="zip"></label>
</fieldset>
</form>

69
 Intrebari
1. Adaugati 2 butoane radio in formularul de mai jos, unul cu optiunea “male” si altul cu
optiunea “female”. Adaugati atributule name si value pentru ambele butoane radio.

<form>
</form>

2. Adaugati un buton de submit in cadrul formularului de mai jos si specificati ca

formularul trebuie sa transmita informatia catre “/action_page.php”

<form>
Name: <input type="text" name="name">
</form>

3. Specificati ca formularul de mai sus este transmis folosind metoda “post”.

4. Setati ca textul “Click me!” sa apara pe butonul de mai jos:

<button type="button" onclick="alert('Hello World!')">
</button>
 Intrebari
5. Adaugati un element <textarea> cu numele “note” in cadrul formularului de mai jos.

<form action="/action_page.php">

<input type="submit">
</form>

6. Adaugati o lista de selectie cu numele “inghetata” in cadrul formularului de mai jos.

Utilizatorul poate selecta din urmatoarele optiuni: “vanile”, “ciocolata”, “capsuni”.

<form>
<input type="submit">
</form>

7. Cum faceti ca optiunea “capsuni” sa fie selectata implicit.

8. Cum permiteti utilizatorului sa selecteze mai multe optiuni din lista de mai sus?
9. Specificati valoarea initiala “John” pentru elementul input.

<form action="/action_page.php">
First name: <input type="text" name="firstname">
<input type="submit">
</form>
 HTML 5 – validarea formularelor
Frecvent, formularele pe paginile web afiseaza userilor mesaje daca un element al formularului
nu a fost completat corect. Acesta actiune este cunoscuta sub denumirea de validare a
formularelor.

Traditional, validarea formularelor este realizata prin intermediul JavaScript. Incepand cu HTML 5
o parte din actiunile de validare se realizeaza la nivel de browser.

Prin validare se garanteaza faptul ca informatiile din formular care ajung la server pot fi
interpretate de acesta.

Avantajele realizarii validarii pe partea de client:

- se reduce volumul de munca pe partea serverului
- permite userilor sa observe mai rapid daca datele introduse nu sunt corecte (in comparatie
cu validarea efectuata pe partea de server).
HTML 5
 Validarea elementelor formularului
<form action="http://www.example.com/login/" method="post“>
<label for="username">Username:</label>
<input type="text" name="username“ id="username" required="required" ><br >
<label for="password">Password:</label>
<input type="password" name="password" id="password" required="required">
<input type="submit" value="Submit" />
</form>

(Firefox) (Chrome) (IE)

.
 Validarea intrarilor de tip data
<form action="http://www.example.com/bookings/" method="post">
<label for="depart">Departure date:</label>
<input type="date" name="depart" id= "depart" >
<input type="submit" value="Submit" >
</form>

REZULTAT
(in Chrome):

.
 Validarea intrarilor de tip numar
<form>
Quantity (between 1 and 5)
<input type="number" name="quantity " min="1" max="5" > <br>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

REZULTAT
CULOAREA

<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" name="favcolor“ id="favcolor">
</form>
 Validarea adreselor de email
type ="email" – in cazul in care userul trebuie sa introduca o adresa de email.

<form action="http://www.example.org/subscribe.php">
<label for=“email”>Please enter your email address:</label>
<input type="email" id ="email" name="email" required="required">
<input type="submit" value="Submit" >
</form>

(REZULTAT in Google Chrome)

 Validarea URL-urilor
type = "url" – in cazul in care userul trebuie sa introduca o adresa web.

<form action="http://www.example.org/profile.php">
<label for=“website”>Please enter your website address:</label>
<input type="url" id ="website" name="website" required="required">
<input type="submit" value="Submit" />
</form>

(REZULTAT in Google Chrome)

Elemente Semantice
Elemente Semantice

81
Cum se incarca o pagina web intr-un
browser
Cum se incarca si afiseaza o pagina
web
Cererea
Documentul
Raspunsul
 Parsare
• Cum stie un browser web daca are nevoie de resurse
suplimentare?
HTTP STATUS CODES
Construirea
 Construirea DOM-ului

• DOM inseamna Document Object Map

• In DOM toate elementele sunt tratate ca noduri

• Cand un document HTML este incarcat intr-un browser web, acesta devine
un obiect document.
 DOM

Obiectul document furnizeaza proprietati si metode pentru a accesa toate nodurile obiect
prin intermediul limbajului Javascript.

Presupunand ca in pagina ar exista un element HTML cu id-ul demo (ex. <p id=“demo”> ):

document.getElementById("demo").innerHTML = “TEST!";
 Construirea CSSOM-ului

• CSSOM reprezintă "CSS Object Map".

Construirea arborelui de randare

DOM CCSOM
 Randarea paginii
• Există două lucruri principale care se întâmplă
aici:
– Plan general de aranjare a elementelor in pagina
(Layout / Reflow )
– “Pictarea” (Paint)
 Plan general de aranjare a elementelor in pagina
Layout

• În acest moment, browserul știe ce ar trebui să afișeze (DOM) și în ce mod să îl afișeze

(CSSOM) și cunoaste relația dintre cele două (arborele de randare).

• Ceea ce nu cunoaste este dimensiunea elementelor afisate si locatia exacta a acestora.

 Paint

• In aceasta etapa finala, browserul va converti fiecare nod din

arborele de randare in pixeli ai ecranului.
CONCLUZIE
HTML 5
 RESURSE

• http://www.w3.org/html/
• http://www.w3schools.com/html/
• http://www.tutorialehtml.com/
• http://ro.wikipedia.org/wiki/HTML5
• http://html5games.com/
• http://scdesign.ro/blog/10-fragmente-utile-de-cod-HTML5/
• https://www.html5rocks.com/en/tutorials/internals/howbr
owserswork/
• https://developer.mozilla.org/en-
US/docs/Web/HTTP/Status
• http://html5doctor.com/lets-talk-about-semantics/