Curs HTML

Prezentare scurta
Ce vom acoperi in acest curs si de ce sunt importante

Una dintre cele mai importante tehnologii de pe internet este HTML-ul. El este una din componentele de
baza pe care orice website sau aplicatie web se bazeaza.
Toate acestea la un loc formeaza structura de baza a oricarui website si de aceea sunt foarte importante in
web design.
Diferenta dintre tehnologii

Diferenta dintre ele este ca HTML in principiu, ne arata structura si continutul unei pagini web. CSS ne va
spune cum acea pagina va fi stilizata (cum va arata, sau ce culori va folosi) iar Javascript ne ofera
interactivitatatea dintr-o pagina.
Fara nici o indoiala HTML-ul este cea mai importanta componenta dintre cele 3, pentru ca fara el, celelalte 2
nu au rost.
Putem chiar sa construim un website folosind doar HTML. Fara css, nu va arata, vizual foarte bine, sau fara
JS, nu va fi interactiv, dar continutul si structura site-ului, va fi acolo.
Cum functioneaza HTML-ul?

HTML este un limbaj de tip MARKUP. Aceasta inseamna ca rolul lui principal este de a oferi un
comportament special unei anumite parti dintr-o pagina. Si pentru a face asta trebuie ca acel continut sa fie
cuprins intre doua TAG-uri.
Asadar, componenta de baza din HTML este un tag care doar ne spune ce functie are acel continut.
De exemplu, tag-ul “p” ne spune ca in interiorul lui avem un paragraf. Sau tagul “a”, ne spune ca avem o
legatura catre o alta pagina, fie ea in acelasi website sau in exteriorul lui.
Html-ul are multe taguri, si ce semnifica fiecare in parte este mai putin important in acest moment,
important acum este sa intelegem ca ideea de baza este foarte simpla:
aceea de a Iua un continut si de a ii oferi un comportament special
Cand a fost inventat si de ce

Cum a aparut HTML si cum functioneaza
In 1990 Tim Berners-Lee impreuna cu Robert Cailliau a scris o propunere pentru crearea World Wide
Web. Desi purta acel nume, la inceput acesta a fost folosit doar de cercetatori de la diferite universitati din
SUA si Europa pentru a crea legaturi intre documente.
Dar motivele pentru care HTML a devenit foarte popular au fost ca acesta a fost oferit gratuit si pentru ca la
baza, avea o idee foarte simpla prin care se puteau crea documente destul de complexe
Web-ul poate sa existe pentru ca prin HTML se pot crea legaturi intre doua pagini, numite hyperlink-uri.
Daca cineva ar pune un website online, care nu are nici un link catre el, nici o legatura, ar fi foarte greu, daca
nu imposibil sa se ajunga la el fara sa stii adresa exacta.
De aceea toata puterea web-ului este data de aceasta posibilitate de a crea legaturi intre web-site-uri.
De la conceperea sa, chiar daca HTML-ul a trecut prin mai multe iteratii acesta nu s-a schimbat foarte mult.
Si acesta este un punct forte, pentru ca un web designer nu a fost nevoit sa invete o versiune noua de HTML
de fiecare data.
Aceasta consistenta a limbajului, mai inseamna ca acelasi HTML poate fi folosit pe mai multe dispozitive:
PC-uri, tablete, telefoane mobile si ca va avea acelasi comportament.
Elemente si tag-uri
Ce este un element HTML si cum se scrie
O pagina HTML nu este altceva decat un fisier text scris intr-un limbaj special. Un browser este un program
care interpreteaza acest fisier si ii arata continutul.
Limbajul HTML este folosit pentru a defini continutul si structura unei pagini dar nu este responsabil de
cum arata pagina.
Ce este un element
O pagina HTML este alcatuita din elemente. Iar acele elemente sunt alcatuite din alte elemente.
In limbajul HTML, un elemente este format din continutul acestuia si unul sau doua TAG-uri.
Un TAG este o serie de simboluri ce arata inceputul sau sfarsitul unui element
Pentru a scrie un tag vom folosi simbolul <, apoi numele tagulului (de exemplu html) si apoi simbolul >.
Toate la un loc vor arata astfel: <html>
Acesta este tag-ul de deschidere, sau cel ce arata ca incepe un element HTML. Iar pentru unele elemente,
trebuie sa spunem si unde se termina. Pentru aceasta vom folosi tag-ul de inchidere care seamana foarte mult
cu primul doar ca are si simbolul /, de exemplu: </html>.
Iar elementul final va arata astfel:
<html></html>
Acest element este primul folosit intr-o pagina HTML. Este un element esential si de fapt defineste ca acea
pagina este una HTML.
Imediat in interiorul lui vom avea inca doua elemente (despre care vom discuta pe larg in capitolul urmator):
<head></head> si <body></body>. Toate elementele vizibile dintr-o pagina sunt incluse in
<body></body>.
Un paragraf
Daca vrem sa aratam in pagina un paragraf, vom folosi tag-urile <p></p>:
<p>continutul unui paragraf</p>
Asa ca vedem cum continutul paragrafului este cuprins intre tagul de inceput si cel de sfarsit.
Elemente care nu se inchid
Nu toate elementele au un tag de inchidere
Nu toate elementele trebuie inchise, majoriatea da, dar sunt cateva elemente in HTML care nu au un
continut propriu-zis asa ca nu e nevoie sa le inchidem.
O noua linie
De exemplu, browser-ul poate ignora o linie noua (atunci cand apasam ENTER) pe care noi o punem in
mijlocul unui paragraf. Dar pentru a-l forta sa o arate vom folosi un elemente special, si anume: <br />
Acest elemnt nu are continut si nici un tag de inchidere, iar pentru a arata asta folosim semnul / dupa
numele tag-ului.
Imaginile
Cred ca cel mai folosit element care nu are un tag de inchidere este cel pentru a arata o imagine in pagina.
Atunci cand vrem sa introducem o imagine in pagina noastra, vom folosi tag-ul: <img />
Nu vom include imaginea intre doua tag-uri ci ii vom spune elementului de unde sa citeasca aceasta image.
Ii vom comunica elementului calea catre imagine folosind un atribut, despre care vom discuta in
continuare.
Elemente cuibarite
Cum se pot combina elementele intre ele pentru a crea structuri
mai avansate
Asa cum am vazut in cazul elementului <html></html>, includerea unor elemente in alte elemente este unul
dintre cele primele lucruri pe care le vom face cand construim pagini web.
Pentru a crea pagini mai complexe vom fi nevoiti sa combinam elementele intre ele, nu doar sa le scriem
consecutive.
Un cuvant special
De exemplu, am vrea intr-un paragraf ca primul cuvant sa iasa in evidenta.
Pentru aceasta, vom cuprinde primul cuvant din paragraf intr-un element special:
<p>
<strong>acest</strong> cuvant va fi ingrosat
</p>
Iar rezultatul va fi:
acest cuvant va fi ingrosat
Tag-ul pentru a scoate un cuvand in evidenta este: <strong></strong>, iar vizual este similar cu ceea ce
face butonul Bold dintr-un editor de text.
Ce este important cand folosim un element in interiorul altui element, este sa il inchidem inainte ca parintele
lui sa se inchida.
De exemplu, daca vom folosi aceste tag-uri si pentru ultimul cuvant din paragraf, dar vom scrie tag-ul de
inchidere </strong> dupa </p>, codul ar arata astfel:
<p>acest cuvant va fi <strong>ingrosat</p></strong>
Textul tot va arata bine:
acest cuvant va fi ingrosat
Si aceasta se intampla pentru ca HTML este un limbaj permisiv. El incearca sa interpreteze ce am vrut noi sa
spunem, desi nu este corect semantic.
Este ca si cum am pune punctul de sfarsit de propozitie inainte de ultimul cuvant. In acest caz poate ca arata
cat de cat bine, dar nu stim cum se va comporta acest cod in alte browsere.
Asta nu inseamna ca trebuie sa ne bazam pe acest lucru si sa scriem ordinea tag-urilor gresit.
Copiii unui element

In urmatorul caz, elementul <p></p> se numeste parinte:
<p>
<b>acest</b> cuvant va fi <strong>ingrosat</strong>
</p>
Iar elementele <strong></strong> sunt copii lui.
Pentru ca acest cod sa fie corect, este foarte important ca aceste elemente sa fie incluse in intregime in
parintele lor.
Asta inseamna sa inceapa dupa tag-ul de deschidere al parintelui si sa se inchida inainte de tag-ul de
inchidere al lui.
Atribute
Atributele se folosesc pentru a adauga functii noi unui element
HTML
In ultimul exercitiu am folosit in interiorul tag-ului <img /> un concept nou:
<img src="..." />
Acesta se numeste un atribut si ne ajuta sa oferim unui element HTML puteri suplimentare.
Un atribut nu este altceva decat o proprietate speciale care poate schimba rolul unui element sau care doar
ofera informatii suplimenare despre el.
Un element poate avea mai multe atribute. Ele se trec doar in tag-ul de deschidere, inainte de semnul de
inchidere > al acestuia.
Atributul unui tag HTML

De exemplu, pentru tagul de imagine <img /> putem avea un atribut care sa precizeze sursa imaginii pe care
vrem sa o afisam:
<img src="o-imagine.png" />
In acest caz src="o-imagine.png" este atributul tag-ului.
Un atribut are urmatoarea structura:
1. numele atributului src (prescurtare de la source)

2. semnul egal =
3. si apoi valoarea lui cuprinsa intre ghilimele "o-imagine.png" (un URL catre locul unde se afla imaginea)
In acest caz, atributul are un rol functional, pentru ca influenteaza modul in care se comporta elementul.
Atributele unui element care se inchide

Daca am vrea sa aplicam un atribut unui element care se inchide, precum unui paragraf, acesta ar arata
astfel:
<p lang="ro">
aici avem un paragraf
</p>
Asadar, atributele pentru elementele care se inchid se trec in primul tag al lui.
In acest caz atributul este lang si este de tipul informativ pentru ca nu influenteaza cu nimic continutul
paragrafului, ci doar ne ofera informatii suplimentare despre acesta.
Atribute multiple
Un tag poate avea mai multe atribute care ii ofera un comportament special:
<p id="un-id" class="o-clasa">

aici avem un paragraf
</p>
Elementul de mai sus contine doua atribute noi, pe care le vom folosi foarte des: id si class.
Acestea doua vor fi foarte folositoare cand vom discuta despre CSS si JavaScript.
Tipuri de atribute
Dupa cum am spus exista atribute functionale, care influenteaza comportamentul elementului HTML si
atribute informative, care doar ofera detalii despre acel element.
Exista cateva atribute care se pot intalni la orice element (precum class si id) dar exista si atribute care sunt
specifice doar unui element.
De exemplu pentru elementul <img />, avem atributul src.
Acesta este folosit de foarte putine elemente si in nici un caz de un paragraf. Asadar putem spune ca acest
atribut este oarecum spcific elementului <img />.
Pe parcursul acestui curs vom descoperi atribute noi si vom discuta si despre rolul lor.
Liste
Cum putea crea o lista in HTML
Un element care functioneaza cu principiul parinte - copil, este cel cu care cream o lista.
In HTML putem crea doua tipuri de liste: una ordonata (unde elementele ei sunt numerotate) sau una ce nu
tine cont de ordine (unde elementele ei au o bulina in fata).
Pentru o lista ordonata avem tag-ul <ol> (de la ordered list = lista ordonata), iar pentru o lista fara ordine
avem <ul> (de la unordered list = lista neordonata).
Asadar intreaga lista trebuie cuprinsa in unul din cele 2 tag-uri.
La randul lor fiecare element al listei trebuie cuprins intr-un tag special: <li> (list item = element al listei).
In interiorul lui putem avea orice tip de continut: imagini, text, linkuri, butoane. Dar pentru moment vom
folosi doar text.
De exemplu, o lista scurta cu orase va arata astfel:
<ul>
<li>Bucuresti</li>
<li>Iasi</li>
<li>Timisoara</li>
<li>Brasov</li>
</ul>
Vedem cum intreaga lista este cuprinsa de tag-urile <ol></ol> (elementul parinte), iar fiecare oras este
cuprins de tag-urile <li></li> (elementele copil).
Pentru a transforma lista de mai sus intr-una ordonata, nu trebuie decat sa schimbam tag-ul principal:
<ol>
<li>Bucuresti</li>
<li>Iasi</li>
<li>Timisoara</li>
<li>Brasov</li>
</ol>
Diferenta nu este mare intre ele, dar conteaza pentru browser. El trebuie sa intelega continutului din aceasta
lista, si anume daca ordinea conteaza. De aceea folosim un tag in locul celuilalt.
Alt continut
Dar in interiorul unui element <li></li> nu trebuie neaparat sa avem doar text, putem folosi orice element
HTML.
Putem introduce un paragraf, care si el la randul lui poate contine alte elemente:
<ol>
<li>
<p>Bucuresti - <strong>capitala</strong></p>
</li>
<li>Iasi</li>
<li>Timisoara</li>
<li>Brasov</li>
</ol>
Si astfel putem incepe sa combinam elementele intre ele si sa le includem unele in altele pentru a construi
structuri din ce in ce mai complexe.
Unde le putem folosi?

Listele sunt destul de folositoare, in special in meniul unui web-site. Folosind CSS, putem scapa de buline
sau de numerotarea elementelor, si o putem chiar face sa se afiseze pe un singur rand. Vom vedea in lectiile
urmatoare cum putem influenta modul in care este afisat orice element HTML.
Headings
Ce tag-uri putem folosi pentru a crea titluri sau subtitluri
O serie de elemente importante in HTML sunt cele folosite pentru a crea titluri si subtitluri. Ele sunt
folositoare pentru ca ne ajuta sa delimitam anumite sectiuni ale unei pagini.
In functie de importanta lor aceste elemente au numele de la <h1> la <h6>
1. <h1></h1>
2. <h2></h2>
3. <h3></h3>
4. <h4></h4>
5. <h5></h5>
6. <h5></h6>
Ele se numesc headings si vom folosi <h1> atunci cand vrem sa precizam care este titlul principal intr-o
pagina.
Apoi fiecare sectiune va fi delimitata folosind urmatorul element ca importanta <h2></h2>, apoi pentru
fiecare subsectiune a lui vom folosi urmatorul element <h3></h3> si asa mai departe.
De exemplu, in aceata pagina titlul lectiei este incadrat in tag-urile <h1></h1>, iar fiecare subtitlul va folosi
<h2></h2>.
Cum se folosesc
Aceste tag-uri se folosesc ca si cele pentru paragraf. Vom avea tag-ul de deschidere <h1>, apoi continutul lui
(precum un titlu) si apoi tag-ul de inchidere </h1>:
<h1>Titlul unei pagini</h1>
Diferenta vizuala dintre ele

Dupa cum am spus aceste elemente arata importanta unui text si de aceea ele difera si vizual. Toate aceste
tag-uri vor arata astfel:
 Un text folosind tag-ul <h1>

Si primul lucru care va va trece prin minte este ca pentru a crea un text mai mare trebuie sa folosim un
heading mai important, precum <h1></h1>, iar pentru unul mai mic putem folosi unul mai putin important.
Nu este o idee buna sa folosim un element HTML doar pentru a schimba modul in care arata un text. Pentru
aceasta vom vorbi de limbajul CSS care ne ajuta sa stilizam orice element din pagina, si chiar sa facem un
<h6> sa fie mai mare decat un <h1>.
Limbajul HTML trebuie folosit doar pentru a preciza care este rolul unui continut nu pentru a-l stiliza.
Tipuri de elemente
Cum putem categorisi elementele pentru a intelege cum sa lucram
cu ele
In HTML5 (care este ultima versiune de HTML) elementele sunt impartite in 7 categorii.
Eu as dori sa folosim o clasificare care a fost valabila pana la HTML4, dar pe care o consider mult mai
folositoare cand cineva incepe sa invete despre HTML. Am putea vedea toatele elementele HTML impartite
in doua categorii:
 elemente de tip block

Pe scurt, inseamna ca elementele vor fi pe o singura linie. De fiecare data cand le folosim acestea se
intind pe toata lungimea elementului parinte. Cateva elemente de tip block sunt: <p>, toate
elementele de la <h1> pana la <h6>, <ul>, <li>.
De exemplu, am folosit elementul <p> pentru aceste doua paragrafe si vedem ca fiecare este pe linia
lui si nu unul in continuarea celuilalt.
 elemente de tip inline

Aceste tipuri de elemente vor aparea pe o singura linie si nu vor impinge continutul ce urmeaza dupa
ele pe o linie noua.
De cele mai multe ori, ele apar in interiorul unui element de tip block.
De exemplu, in interiorul unui <p> cand vrem sa avem un cuvant ingrosat folosim elementul
<strong>. El este unul de tip inline pentru ca nu forteaza textul de dupa el pe o linie noua.
In exemplul urmator, ambele paragrafe vor aparea pe o linie:
<p>aceste <strong>cuvinte</strong> vor aparea pe o singura linie</p><p>aici vom

avea un rand separat</p>
Aceasta este marea diferenta dintre cele 2 tipuri de elemente, si desi suna simplu cauzeaza o groaza de
probleme in web design.
Din fericire putem forta un element sa alterneze intre bloc si inline si pentru asta vom folosi CSS.
Elementul DIV
Un element general care poate fi folosit peste tot
Unul dintre cele mai folosite elemente in HTML este <div></div> (prescurtare de la document division).
Pana acum am vorbit despre elemente care dau un rost continutul, sau creaza o structura, dar nu si div-ul.
Div-ul este un element care nu are nici un rol semantic in HTML, exista doar pentru a grupa alte elemente.
De exemplu, inainte de HTML5 nu exista o metoda de a defini un element pentru un meniu, asa ca un web
developer folosea un <div></div> care avea un atribut de tip id cu valoarea de meniu, si astfel definea
rolul acestuia:
<div id="meniu">
...
</div>
In HTML5 (cea mai recente versiune a HTML) a aparut elementul de <nav></nav> care defineste clar ca o
parte din web-site este un meniu. Si pe langa el au aparut o groaza de alte elemente care au inceput sa
inlocuiasca functiile div-ului, asa ca importanta lui continua sa scada.
Dar in trecut, era unul dintre cele mai folosite elemente desi nu avea nici un rol. Acesta era foarte usor de
folosit (si inca este) si aparea peste tot cand cineva vroia sa trateze cateva elemente impreuna.
Asa ca probabil div-ul inca este unul dintre cele mai intalnite elemente intr-o pagiona web.
Cand ar trebui sa se foloseasca tag-ul <div>

De exemplu, sa spunem ca vrem sa separam primele 2 paragrafe, pentru a le stiliza altfel. Asa ca le vom
include intr-un div:
<div class="intro">
<h1>Elementul de tip div</h1>
<h2>Ce este si cand il folosim</h2>
</div>
<p>Elementul de tip div era pana de curand unul dintre cele mai des intalnite elemente
intr-o pagina HTML.</p>
<p>Odata cu aparitia HTML 5, importanta lui a scazut, dar inca mai este foarte folosit
pentru gruparea altor elemente in pagina.</p>
Acest <div> nu va schimba cu nimic modul in care este afisata pagina dar ne ajuta pe noi sa grupam cateva
elemente impreuna (in acest caz primele doua paragrafe), pe care am vrea sa le tratam altfel.
Folosindu-ne de clasa intro putem stiliza cele doua paragrafe folosind CSS. Nu vom face asta acum, dar
acesta este unul din rolurile acestui element.
Elementul <div> este unul de tip block, de aceea ar trebui folosit impreuna cu alte elemente de acelasi fel.
Dupa cum am vazut mai devreme, cel mai adesea el este folosit pentru a grupa alte elemente block.
Nefiind un element de tip inline, el nu are cum sa apara in interiorul textului. Dar daca am vrea sa grupam
doar cateva cuvinte impreuna putem folosi tag-ul <span>.
Structura unei pagini
Care sunt elementele cu care putem incepe sa construim o pagina
HTML
1. Elementul <head>
Primul element care ar trebui adaugat in interiorul <html></html>
2. Tag-urile pentru Javascript si CSS

Cateva tag-uri care sunt foarte comune in partea de <head> a paginii
3. Elementul <body>
Elementul care cuprinde tot continutul dintr-o pagina
Elementul <head>
Primul element care ar trebui adaugat in interiorul <html></html>
Pe primul rand in orice pagina HTML ar trebuie sa fie tag-ul: <!DOCTYPE html>. Acesta ii spune unui
browser cum sa interpreteze textul ce urmeaza.
Dupa acesta, ar trebuie sa avem elementul <html></html>, care ar trebuie sa fie primul in orice pagina web.
Orice alt element ar trebui inclus in el.
<!DOCTYPE html>
<html>
...
</html>
Iar primul element din interiorul lui ar trebui sa fie cel de <head></head>:
<!DOCTYPE html>
<html>
<head>
...
</head>
</html>
Acesta este un element care nu adauga nimic continutului paginii.
De obicei in interiorul lui vom gasi o serie de elemente prin care ii spunem browser-ului: titlul paginii, unde
sunt situate fisierele CSS si Javascript si cum ar trebui citit documentul.
Primele tag-uri
Primul element din head, va fi un tag de tip <meta />.
Acesta este genul de tag care ofera tot felul de informatii in plus despre pagina si nu este nevoie sa il
inchidem. Iar primul tag meta ar trebui sa fie cel care sa ii spuna browserului cum sunt codificate literele din
pagina, sau mai exact ce standard a fost folosit de server pentru a reprezenta o litera:
<meta charset="utf-8" />

Acesta este unul din acele taguri de care nu multa lume se intereseaza, sau pur si simplu uita sa il foloseasca,
dar care pot cauza probleme destul de mari site-ului pe anumite browsere, si in special pentru limbile care au
caractere speciale, precum limba romana, asa ca este bine sa il setam pe fiecare pagina.
Puteti citi mai multe despre character encoding si despre UTF-8, dar ceea ce trebuie sa retinem este ca acest
tag trebuie intodeauna sa fie primul dupa tag-ul <head>. De asemenea, recomandam un articol foarte
interesant despre Unicode (in engleza).
OK urmatorul tag, este tot unul meta, care va avea doua atribute si in care vom scrie o scurta descriere a
paginii:
<meta name="description" content="scurta descriere a paginii" />
Acesta tag era folosit inainte de motoarele de cautare pentru a indexa continutul unei pagini, dar bineinteles
ca unii web developeri au inceput sa il abuzeze, punand tot felul de informatii false in el, asa ca in prezent el
este oarecum ignorat, dar inca este important.
El este folosit pentru a arata o descriere a site-ului atunci cand acesta este printre rezultatele unei cautari. De
obicei. vedeti un link catre site si sub el o scurta descriere. De multe ori, acea descriere este continutul
acestui tag.
Tag-ul pentru titlul paginii

Un alt tag foarte important in head este cel pentru titlu:
<title>Titlul paginiii</title>
Acesta este mult mai important si e o idee buna sa fie pe fiecare pagina. El ne ofera textul ce apare in
numele tab-ului din browser.
Pe aceasta pagina, titlul este: "Elementul <head>".
In final, pagina va arata astfel:
<!DOCTYPE html>
<html>
<head>
<title>Un titlu</title>
<meta name="description" content="scurta descriere a paginii" />
</head>
...
</html>
Tag-urile pentru Javascript si CSS
Cateva tag-uri care sunt foarte comune in partea de <head> a
paginii
As vrea acum sa vorbim despre cateva tag-uri care se intalnesc foarte des in elementul <head></head>. Si
anume cele pentru a incarca fisiere Javascript si CSS.
Tag-ul pentru fisiere Javascript

Pentru a incarca un cod Javascript intr-o pagina HTML vom folosi tag-ul: <script></script>
Continutul unui fisier extern Javascript poate fi incarcat folosind atributul src (care vine de la source):
<script src="un-fisier.js"></script>
In acest caz, browser-ul va cere fisierul de la acea adresa, il va citi si il va interpreta.
Indiferent de ce tag este folosit atributul src, acesta poate primi o cale in doua feluri:
 absoluta: prin care precizam exact adresa unde se afla fisierul: src="https://www.edumo.org/un-
fisier.js", acesta include protocolul https/http, domeniul www.edumo.org si calea completa a
fisierului /un-fisier.js
 relativa: daca fisierul Javascript se afla in acelasi folder cu fisierul HTML care il importa. Calea catre fisier va fi
in functie fisierul HTML src="un-fisier.js"
Continutul unui fisier Javascript poate fi scris direct in pagina, intre cele doua tag-uri. In acest caz nu mai
este nevoie sa precizam atributul src:
<script>
// codul javascript va fi scris direct aici
</script>
Veti vedea in unele pagini si atributul type folosit cu acest tag, dar acesta nu mai este cerut de nici un
browser modern, pentru ca ele stiu acum cum sa interpreteze un astfel de fisier. Cel mai important atribut al
tag-ului (si singurul) ramane src.
Tag-ul pentru fisiere CSS

Pentru a incarca fisiere CSS vom folosi tag-ul <link />. Acesta este un tag care nu se inchide iar atributul
lui principal href primeste ca valoare calea catre fisierul pe care vrem sa il incarcam:
<link href="style.css" />
La fel ca in cazul atributului src folosit de tag-ul <script></script> acest atribut poate primi un link
absolut (adresa completa a fisierului) sau unul relativ (in functie de fisierul HTML care il importa).
Si astfel browser-ul cere fisierul CSS de la acea adresa, il citeste si apoi il interpreteaza.
Alte atribute destul de intalnite ale acestui tag (dar oarecum optionale) sunt:
 type: acest atribut ii spune browser-ului ce tip de fisier va gasi la capatul link-ului.
Daca incarcam un fisier cu extensia .css el va presupune ca este un fisier de tipul "text/css", dar
daca oferim un link catre un fisier fara o extensie ii poate veni un pic mai greu sa ghiceasca.
Valoarea acestui atribut este valoarea MIME type al fisierului. Exemplu:
<link href="https://www.edumo.org/style.css" type="text/css" />
 rel: acest atribut ii spune browser-ului ce rol are acel fisier (rel vine de la relationship, ce
legatura/rol are fisierul cu pagina).
De obicei va avea valoarea de "stylesheet", de exemplu:
<link href="https://www.edumo.org/style.css" type="text/css" rel="stylesheet" />
Mai exista o metoda de a folosi cod CSS, si anume de a-l scrie direct in pagina fara a-l incarca din alta parte.
Pentru aceasta in HTML avem un tag special. Diferenta fata de tag-ul <link /> este ca acesta se inchide, iar
tot continutul va fi pus intre aceste tag-uri:
<style>
/* codul css va fi scris direct aici */
</style>
Concluzii
Asadar pentru Javascript avem un singur tag pentru importa un fisier in pagina sau pentru a scrie direct
codul, si anume <script></script>.
Iar pentru CSS avem doua tag-uri: unul pentru a-l importa in pagina <link /> si unul pentru a-l scrie direct
<style></style>
Elementul <body>
Elementul care cuprinde tot continutul dintr-o pagina
Daca in partea de <head></head> al unei pagini vom pune tag-urile care ofera informatii in plus despre
pagina si care nu sunt neapart vizibile unui utilizator, in interiorul elementului <body></body>, vom pune
tot continutul paginii.
Tot textul, toate imaginile, link-urile, tot ce va fi vizibil in pagina noastra.
Elementul <body></body>, este al doilea copil al elementului <html></html>, care este tagul principal al
paginii, si care nu ar trebuie as contina altceva in afara de aceste doua elemente:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
O pagina simpla in HTML

In acest moment putem pune cap la cap toate tag-urile care le-am invatat pana acum pentru a creea o pagina
simpla. In partea de <head></head> vom avea un tag de tip <meta />, un titlu si un tag de a importa un
fisier CSS. Iar in partea de <body></body>, un titlu si o scurta descriere.
<!DOCTYPE html>
<html>
<head>
<title>Elementul body</title>
<link href="style.css" />
</head>
<body>
<h1>Elementul body</h1>
<p>Unul dintre cele mai importante tag-uri dintr-o pagina</p>
</body>
</html>
Aceasta este structura de baza al oricarui website. Orice pagina poate porni de la aceste tag-uri.
Crearea unei pagini
Cum sa avem o structura de baza pentru o pagina HTML
1. Structura de baza
Care sunt partile de baza ale unei pagini si primele elemente care ar trebui sa le folosim cand construim o pagina nou
2. Structura de baza a paginii

Atunci cand vrem sa contruim o pagina noua, ar trebui sa incepem cu aceste elemente
3. <header>
Primele lucruri din partea de sus
4. Un nou meniu
La ce foloseste elementul <code class="language-markup"><nav></nav></code>
5. Crearea unui link in site

Cum putem crea o legatura intre pagininele site-ului nostru
6. <main>
Elementul ce cuprinde marea parte a continutul unei pagini. Plus alte elemente care ne ajuta sa il sectionam.
7. <footer>
Un element pentru partea inferioara a unei pagini
8. Un link in afara site-ului

Intodeauna este bine sa facem legatura si cu alte site-uri
9. Creare unui link catre un fisier

Folosind tagul <a> putem chiar crea un link catre un fisier
Structura de baza
Care sunt partile de baza ale unei pagini si primele elemente care ar
trebui sa le folosim cand construim o pagina nou
In acest capitol vom incepe sa construim pagina unui serial fictiv si in acelasi timp sa discutam despre
elemente noi.
Primul lucru care ar trebui sa existe pe orice pagina HTML este declaratia doctype. Aceasta ii spune
browserului cum sa interpreteze acest document. Nu uitati ca un fisier HTML nu este altceva decat un fisier
text care are extensia .html sau .htm.
Dupa acesta, primul, ultimul si singurul tag care ar trebuie sa fie direct in document fara nici un parinte este
tagul <html></html>
Un lucru bine de facut (dar complet optional) este sa setam un atribut pe primul tag care precizeaza limba
continutului:
<!DOCTYPE html>
<html lang="ro">
</html>
Imediat in interiorul lui vom avea tagurile <head> si <body>. Doar aceste 2 taguri trebuie sa fie direct in
<html>.
Ele trebuie sa fie prezente in aceasta ordine intodeauna cand construim o pagina noua. Aceasta structura este
una dintre putinele reguli care sunt impuse asupra modului in care ar trebui sa arata un document HTML.
Elementul <head></head>
In head vom gasi informatii si resurse auxiliare paginii care nu influenteaza propriu-zis continutul din
pagina.
Primul lucru din head ar trebui sa fie un tag de tip <meta /> care sa ii spuna browserului cum sunt encodate
caracterele din pagina. Acesta este unul dintre acele detalii care poate parea atat de tehnic si plictisitor dar
care poate cauza o experienta foarte neplacuta pentru un utilizator.
Imediat dupa tagul meta, vom alege un titlul pentru pagina.
<!DOCTYPE html>
<html lang="ro">
<head>
<meta chartset="utf-8" />
<title>Family Cat</title>
</head>
</html>
Elementul <body></body>
In body vom avea tot continutul paginii, tot ce va fi vizibil. Si inainte de a incepe sa adaugam continut
trebuie sa ne gandim cum am vrea sa arate pagina, ce structura ar trebui sa aiba.
Majoriatea paginilor de pe web au trei mari parti:

 partea superioara: unde vom avea titlul paginii si sub el un meniu
 partea principala: unde va fi prezent continutul propriu-zis
 si partea inferioara: unde vom include informatiile aditionale despre serial, precum detalii despre
producator, anul, drepturile de autor si altele
Pentru aceasta sectionare vom folosi 3 taguri noi:
1. <header></header>
Este un tag obisnuit, care se inchide si care cuprinde partea de sus a paginii.
Acesta tag a aparut in ultimii ani odata cu HTML5. In locul lui un site folosea un <div></div>, care
probabil ca avea un atribut de tipul id sau clasa cu valoarea de header.
Am putea face si noi asta, dar daca putem sa folosim un tag modern care ne ajuta sa ne organizam
continutul mai bine, eu cred ca este mai bine sa facem asta.
Desi numele este asemanator cu cel al tagului <head></head>, el nu are nici o legatura cu acesta si
in nici un caz nu ar trebui schimbate intre ele.
2. <main></main>
Acesta nu poate fi folosit decat o singura data pe pagina, pentru ca este un tag care cuprinde tot
continutul important din pagina, continut pe care il vom putea impartii apoi folosind alte tag-uri.
Si el este un tag nou aparut recent, ce a inlocuit o parte din functionalitatea tag-ului <div></div>.
3. <footer></footer>
Acest tag cuprinde de obicei partea inferioara a unei pagini. De multe ori contine informatii despre
cel ce detine site-ul, cateva link-uri sau date de contact.
<main>
Elementul ce cuprinde marea parte a continutul unei pagini. Plus
alte elemente care ne ajuta sa il sectionam.
Tag-ul de <main> este folosit pentru a delimita partea principala a unei pagini, adica acolo unde este
continutul cel mai important din pagina.
Bineinteles ca am putea folosi un simplu tag de tip <div>, pentru ca este un tag foarte general si poate fi
folosit in orice situatie. Dar este o idee mult mai buna sa folosim un tag modern care si explica ce rol are
continutul lui.
Tag-ul de tip <main> poate fi folosit o singura data pe pagina, si cel mai bine este sa il punem sub header si
inainte de footer, dar nu este obligatoriu.
Nimic din aceasta structura nu este obligatoriu, HTML este limbaj destul de permisiv, ne-am putea organiza
elementele altfel. Dar aceasta structura are sens si e usor de citit, de aceea o folosim.
Intr-o pagina putem avea ceva continut si nu este o idee buna sa il aruncam pur si simplu pe tot in elementul
<main>. Trebuie si acesta impartit in mai multe sectiuni si pentru aceasta avem cateva tag-uri de care ne
putem folosi.
Separarea continutului
Daca de exemplu in pagina noastra am vrea sa afisam un articol mai lung avem un element HTML special
de care ne putem folosi.
Este vorba de <article></article>.
In interiorul acestui element putem introduce orice continut dorim. Acest tag este deseori folosit atunci cand
continutul din interiorul lui este de sine statator, adica, daca am indeparta orice alt tag HTML din pagina, si
am lasa doar tag-ul de <article> si continutul sau, atunci pagina tot ar avea sens.
<header>
...
</header>
<main>
<article>
<h1>Cine suntem</h1>
<p>In acest articol vom explica ...</p>
...
</article>
</main>
<footer>
...
</footer>
Un continut care se repeta

Dar daca am avea un continut care nu are sens singur ci doar impreuna cu alt continut, atunci am putea
folosi elementul <section></section>.
Daca de exemplu am avea o pagina care are mai multe sectiuni cu link-uri catre diferite articole. Fiecare
sectiune poate avea o imagine, un titlu, si o scurta descriere.
<main>
<h1>Lista de articole</h1>
<section>
<img src="" />
<h2>Articolul 1</h2>
<p>Scurta descriere ...</p>
</section>
<section>
<img src="" />
<h2>Articolul 2</h2>
<p>Alta descriere ...</p>
</section>
</main>
Vedem ca fiecare sectiune are legatura cu cealalta dar fiecare in parte (scoasa din context) nu are sens. Daca
am lasa doar un element de tip <section></section> in pagina, nu prea am intelege care este rolul paginii
sau ce vrea sa semnifice acea sectiune.
Asa ca elementul <section></section> ne arata continutul care nu este de sine stator si se bazeaza pe ce
avem in jurul lui.
Acum, chiar daca acest tag este mai general, nu inseamna ca putem sa il folosim in orice caz.
Atunci cand vrem sa stilizam sau pur si simplu sa grupam anumite elemente putem folosi tagul
<div></div>. Dupa cum am vorbit, este cel mai general tag care nu are nici un rol semantic si care poate fi
folosit pentru aproape orice.
Elementul de tip <section></section> nu este atat de general si trebuie folosit cand elementele din
interiorul lui sau au sens impreuna.
Continutul optional
Putem folosi un element special atunci cand vrem sa introducem in pagina si alte informatii care nu sunt
legate de continutul principal. Pentru aceasta avem elementul <aside></aside>.
De exemplu daca in pagina avem un articol si am vrea sa scriem si cateva informatii despre autorul lui, am
putea folosi acest element:
<aside>
<img src="" alt="O poza de profil al autorului" />
<h3>Nume Prenume</h3>
<p>O scurta desciere ...</p>
</aside>
Sau putem avea o lista cu link-uri catre articole ce au legatura cu cel din pagina. In mare, acesta este rolul
elementului <aside></aside>: de a cuprinde continutul care este tangential continutului principal al
paginii.
Alte elemente importante in html
O lista de elemente importante ce le gasim in aproape orice site
<table>
Cum pute construi un tabel in pagina.
<dl>
Un element folosit pentru a crea o lista cu termeni si definitiile lor
<input>
Unul dintre cele mai importante elemente in HTML
<select>
Un element prin care putem alege o optiune dintr-o lista
<button>
Un element prin care putem crea un buton
<form>
In element ce ne ajuta sa cream un formular; in interiorul lui vom avea mai multe elemente de tip input si un buton
pentru a salva continutul
<table>
Cum pute construi un tabel in pagina.
Dupa cum spune si numele, elementul <table></table> ne ajuta sa cream un tabel intr-o pagina.
Inainte de HTML4 acest element avea un rol mult mai important fiind folosit la structurarea si stilizarea
paginii.
Dar odata cu dezvoltarea limbajului CSS, acest element este folosit doar pentru a arata un tabel cu valori.
Era foarte greu de construit si de stilizat un site folosind doar tabele de aceea nu mai este recomandata
aceasta metoda. Exceptie fac campaniile de marketing prin email care inca mai folosesc aceasta metoda si
despre care vom discuta intr-un alt curs.
Contruirea unui tabel

Daca ne uitam la structura unui tabel vedem ca este construit din randuri si coloane.
In HTML nu avem un element pentru a defini o coloana dar avem pentru un rand, si acesta este <tr></tr>
(de la table row). Asadar un tabel cu trei randuri ar avea urmatoarea structura:
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
Dar pentru a crea coloane vom folosi un alt element si anume <td></td> (de la table data).
Fiecare element <td></td> folosit in interiorul unui element <tr></tr> va crea o noua coloana. Acesta
element are sens doar in interiorul unui element <tr></tr> si nu poate fi adaugat in alta parte, de exemplu
direct in <table></table>.
Daca am vrea sa cream doua coloane pentru cele trei randuri ale noastre vom avea urmatoarea structura:
<table>
<tr>
<td>Rand 1, Coloana 1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Care va arata astfel:
Rand 1, Coloana 1 Rand 1, Coloana 2

Cel mai important lucru este sa nu pierdem evidenta elementelor <td></td>. Daca vrem doua coloane in
tabel, ar trebui sa avem cate doua elemente pe fiecare rand.
Atribute
Elementul <table></table> avea multiple atribute (inainte de HTML4) care ii influenta comportamentul,
dar aproape toate au fost inlocuite de CSS. Asa ca putem spune ca impreuna cu acest element se pot folosi
doar atributele id si class.
Putem bineinteles avea o celula care se intinde pe doua randuri folosind atributul rowspan (de la row span),
sau pe doua coloane folosind atributul colspan (de la column span). Aceste atribute pot fi folosite doar cu
elementul <td></td>
<table>
<tr>
<td rowspan="2">Rand 1, Coloana 1</td>
</tr>
<tr>

</tr>
<tr>
</tr>
</table>
Iar rezultatul va fi:
Rand 1, Coloana 2
Rand 1, Coloana 1
Rand 2, Coloana 2
Vedem cum atributul rowspan ne ajuta sa extindem o celula pe doua randuri. De aceea am omis prima
celula din al doilea rand (Rand 2, Coloana 1), pentru ca locul ei a fost ocupat de celula de mai sus.
Pentru elementul <tr></tr> putem sa folosim doar atributele class si id
Alte elemente
Este posibil sa intalniti tabele care contin si alte elemente pe langa cele de mai sus.
De exemplu putem preciza capetele de coloana folosind <thead></thead>, partea principala folosind
<tbody></tbody> si partea de jos folosind <tfoot></tfoot> exact ca intr-un website. Toate trei trebuie sa
apara in aceasta ordine:
<table>
<thead>
<tr>
<td>Header 1</td>
<td>Header 2</td>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>
Astfel putem defini mai clar partile dintr-un tabel. Dar acestea nu sunt foarte des intalnite, dar e bine sa stim
ca exista.
<dl>
Un element folosit pentru a crea o lista cu termeni si definitiile lor
In HTML avem un element special ce ne ajuta sa cream o lista de lucruri pe care vrem sa le definim sau
pentru care vrem sa scriem o scurta descriere. De exemplu daca am avea o lista de evenimente pentru care
vrem sa scriem detalii despre locul si data lor.
Elementul <dl></dl> (nume ce vine de la description list) se foloseste doar impreuna cu unul sau mai
multe elemente de tipul <dt></dt> (de la definition term) fiecare fiind urmat de unul sau mai multe
elemente de tipul <dd></dd> (de la description element).
De exemplu daca am vrea sa construim o lista de definitii pentru cateva animale domestice:
<dl>
<dt>Pisica</dt>
<dd>Animal de casa recunoscut pentru atitudinea sa de membru al unei familii
regale.</dd>
<dt>Cainele</dt>
<dd>Unul dintre cele mai loiale animale domestice.</dd>
</dl>
Asadar <dl></dl> defineste inceputul si sfarsitul listei. Fiecare termen ce vrem sa il definim este scris in
interiorul <dt></dt>, iar fiecare definitie pentru acest termen este scrisa folosind elementul <dd></dd>.
Bineinteles ca putem avea mai multe definitii pentru acelasi termen (in acest caz un animal) de aceea un
element <dt></dt> poate fi urmat de mai multe elemente <dd></dd>.
De exemplu:
<dl>
<dt>Pisica</dt>
<dd>Animal de casa recunoscut pentru atitudinea de membru al unei familii
regale.</dd>
<dd>Personalitate independenta ce nu accepta nu ca raspuns.</dd>
<dd>Animal tratat ca un zeu in Egiptul Antic, lucru pe care nu l-a uitat.</dd>
</dl>
Atribute
Ca si atribute cele mai folosite cu aceste elemente sunt:
 id: folosit de CSS sau JS pentru a apela elementul direct

 class: folosit de CSS sau JS pentru a-l include intr-o categorie de elemente
Echivalentul unei liste <dl>

Putem construi echivalentul aceastei liste folosind elemente pe care le-am mai intalnit pana acum, precum
<ul>, <h2> si <p>.
<ul>
<li>
<h2>Pisica</h2>
<p>Animal de casa recunoscut pentru atitudinea de membru al unei familii
regale.</p>
<p>Personalitate independenta ce nu accepta nu ca raspuns.</p>
<p>Animal tratat ca un zeu in Egiptul Antic, lucru pe care nu l-au uitat.</p>
</li>
</ul>
Vedem ca pastram aceeasi structura si folosim <li> pentru a separa mai usor elementele care vor fi definite,
dar continutul acestei liste nu va avea acelasi sens pentru browser sau pentru cine citeste codul acestei
pagini.
Desi putem spune ca noi ca vizitator vom vedea acelasi lucru indiferent daca vom folosi <dl> sau <ul>
scopul continutului este dat de elementul care il cuprinde.
In acest caz nu suntem obligati sa folosim un element anume, dar pentru a creea o pagina structurata si usor
de citit atat pentru oameni cat si pentru pentru calculatoare este indicat sa folosim tag-ul <dl>.
<input>
Unul dintre cele mai importante elemente in HTML
Pana acum am vorbit despre elemente prin care putem arata continut unui vizitator. Dar in aceasta lectie as
vrea sa vorbim despre unul dintre cele mai importante elemente HTML folosit pentru a primi ceva (un
mesaj, un email, o imagine, etc.) de la cel ce viziteaza pagina.
Elementul <input /> este folosit exact pentru acest lucru. Acum pentru a accepta diferite tipuri de date de
la un utilizator acest element va trebui sa isi schimbe comportamentul. Si stim ca putem face asta folosind
atribute.
Lista de atribute acceptata de <input /> este destul de lunga dar ne vom axa in continuare pe cele mai des
intalnite.
Pentru a salva undeva textul sau fisierul pe care il primim de la cineva prin acest element vom avea nevoie si de un
server, lucru despre care nu vom discuta in acest curs. Asa ca ceea ce vom scrie momentan in acest element nu va fi
salvat nicaieri.
Atribute
Elementul <input /> poate primi mai multe atribute dar cele mai des intalnite sunt:
type
 text: aceasta este valoarea prestabilita (default) si ne permite sa acceptam un sir de caractere.
<input type="text" />
Iar rezultatul este acea casuta intalnita pe orice site unde putem introduce orice:
 email: putem folosi aceasta valoare pentru a-l forta pe cel ce completeaza acest camp sa ne ofere o
adresa de email si nu altceva. Atunci cand va incerca sa salveze aceasta modificare, browser-ul ii va
spune ca valoare nu este valida.
 tel: la fel ca in cazul de mai sus, aceasta valoare va forta cel ce completeaza sa introduca un numar
de telefon care are o anumita forma si foloseste doar numere.
 number: aceasta valoare forteaza casuta sa accepte doar numere, toate literele vor fi ignorate. Daca
vom incerca sa completam aceasta casuta pe un telefon mobil, vom vedea ca ne arata doar tastatura
cu numere.
<input type="number" />

 password: folosind aceasta valoare pentru a crea un camp unde putem introduce o parola. Se
comporta la fel ca atunci cand valoare este text, doar ca ceea ce scriem nu este vizibil.
<input type="password" />
 checkbox: se creeaza o casuta pe care o putem bifa
 radio: de obicei se folosesc mai multe elemente de acest tip impreuna pentru a ne asigura ca se va
alege o singura optiune.
Optiunea 1
Optiunea 2
Optiunea 3
 file: daca dorim sa permitem cuiva sa incarce un fisier
 submit: atunci cand avem un formular completat si vrem sa il trimitem la server, vom folosi aceasta
valoare care de fapt creeaza un buton.
name
Motivul pentru care vrem ca cineva sa completeze un formular este ca acesta sa fie trimis la server pentru a-l
salva. Iar pentru a citi ceea ce trimitem intr-un element <input /> trebuie sa ii oferim un nume:
<input type="text" name="numele-acestui-input" />
Acest atribut trebuie folosit cu toate elementele de tip input, indiferent ce valoare au in atributul type. Pe
server unde vom procesa datele primite din pagina vom citi valoare lor folosind numele pe care l-am oferit
aici.
value
In acest atribut se va salva valoarea propriu-zisa pe care o va avea campul nostru. Daca avem un <input />
de tip text, email, password, etc., atunci ceea ce scriem in casuta se va trimite la server, dar pentru alte tipuri
de<input /> precum radio si checkbox trebuie sa oferim noi o valoare (de aceea pentru acestea atributul
value este obligatoriu).
<input type="checkbox" name="numele-acestui-input" value="1" />

placeholder
Pentru un element input de tip text (sau email, password, etc.) putem preciza un text care va aparea inainte
ca acea casuta sa fie completate:
<input type="text" placeholder="Acest text va aparea aici cand inputul nu este

completat" name="un-nume" value="" />
Iar rezultatul fiind:
disabled
Acest este un atribut de tip boolean, adica nu primeste o valoare si simpla lui prezenta in interiorul
elementului ii schimba comportamentul. In acest caz atribut va dezactiva un input si nu va permite
completarea lui.
<input type="text" placeholder="Input dezactivat" name="un-nume" disabled />
checked
Acest atribut este tot de tipul boolean si se foloseste doar cand avem un input de tip checkbox. Daca vrem
ca o casuta sa fie selectata deja atunci cand pagina se incarca, fara a fi nevoie de un click pe ea:
<input type="checkbox" checked />
Alte resurse
Aceasta lista este doar un sumar al tuturor atributelor ce pot fi folosite cu acest element. Pentru lista
completa puteti verifica aceasta pagina.
<select>
Un element prin care putem alege o optiune dintr-o lista
Exista un element in HTML prin care putem crea o lista pentru ca cineva sa aleaga una din optiuni. Este
destul de intalnit pe site-uri.
Pentru a crea acest element vom folosi tag-ul <select></select> iar pentru a delimita fiecare optiune din
lista trebuie sa folosim tag-ul <option></option>.
Este asemanator cu elementul folosit pentru a crea o lista: <ul></ul> pentru lista si <li></li> pentru
fiecare element.
De exemplu o lista cu trei element ar arata astfel:
<select>
<option>Bucuresti</option>
<option>Iasi</option>
<option>Cluj-Napoca</option>
</select>
Iar rezultatul este:
Atribute specifice
name: pentru a putea citi valoarea atunci cand este trimis la server
<select name="oras">
...
</select>
value: acest atribut defapt se pune pe fiecare optiune nu pe elementul <select></select>. Atunci cand se
va salva formularul, ea va fi trimisa impreuna cu numele pe care l-am dat elementului select.
<select name="oras">
<option value="B">Bucuresti</option>
<option value="IS">Iasi</option>
<option value="CJ">Cluj-Napoca</option>
</select>
Asadar, daca vom alege a doua optiune si vom salva formularul, atunci pe server vom primi pentru oras
valoarea IS.
<button>
Un element prin care putem crea un buton
Unul dintre cele mai intalnite elemente intr-o pagina sunt butoanele. Dar nu toate dintre acestea sunt butoane
propriu-zise ci sunt facute sa arate ca atare.
Un buton in HTML se creeaza astfel:
<button>Un buton</button>
Iar rezultatul este:
Un buton are mai multe roluri printre care acela de a trimite un formular (atunci cand avem mai multe
elemente de tip input grupate) sau acela de a permite alte actiuni (precum aceea de a accepta Termenii si
conditii).
Butonul este un element destul de general si poate fi folosit pentru a crea interactivitate intr-un site prin
faptul ca permite tot felul de actiuni.
Atribute
Pe langa atributele general de id si class, tag-ul mai accepta si:
type
Acesta este cel mai important atribut pentru ca schimba cel mai mult comportamentul butonului. Ca valori,
acest atribut poate primi:
 submit: aceasta este valoare prestabilita (default) si se foloste intr-un formular cand vrem sa il
trimitem la server.
<button type="submit">Trimite</button>
 reset: un buton cu aceasta valoare pentru type se foloseste tot intr-un formular cand vrem ca cel ce-l
completeaza sa stearga toate datele pe care le-a introdus. Nu este foarte des intalnit, dar folositor.
Acestea este cel mai intalnit atribut, lista completa o puteti citi pe MDN.
Asadar un buton cel mai des este intalnit intr-un formular, dar de fapt il putem folosi oriunde in pagina si
folosind JavaScript ii putem schimba actiunea atunci cand se apasa pe el.
<form>
In element ce ne ajuta sa cream un formular; in interiorul lui vom
avea mai multe elemente de tip input si un buton pentru a salva
continutul
Elementul <form></form> ne ajuta sa definim o zona dintr-o pagina ce contine elemente interactive prin
care cineva ne poate trimite informatii.
Am vazut ca pentru a accepta date de la cineva trebuie sa folosim tag-ul <input />. Dar acesta trebuie
cuprinsa de tag-urile <form></form> care defineste defapt formularul.
Asadar un <input /> are sens doar in interiorul unui element <form></form>.
De exemplu, un formular care ne-ar cere numele, prenumele, o adresa de email si care ar contine si un buton
pentru a salva, ar arata astfel:
<form>
<input type="text" name="nume" placeholder="Nume" />
<input type="text" name="prenume" placeholder="Prenume" />
<input type="email" name="email" placeholder="Adresa email" />
<input type="submit" value="Trimite" />

</form>
Iar rezultatul ar fi:
Intalnim aceleasi elemente de tip <input /> despre care am discuta in lectiile trecute dar toate sunt cuprinse
intre tag-urile <form></form>.
Atribute
Cele mai intalnite atribute ale acestui element sunt urmatoarele:
action
Acest atribut este folosit pentru a preciza un URL unde vom trimite informatiile din formular. Daca nu il
precizam atunci se va adresa paginii curente.
<form action="https://www.edumo.org/un-url-care-va-primi-informatiile">
...
</form>
method
Prin acest atribut putem preciza metoda HTTP prin care vrem sa trimitem informatiile. Exista 4 metode
HTTP (get, post, put si delete) dar un formular nu poate folosi decat doua: get sau post. Daca nu precizam
nici o valoare formularul va folosi GET.
<form method="get" action="/un-url-care-va-primi-informatiile">

...
</form>
Atunci cand folosim post informatiile vor fi trimse la server direct care apoi ne va da un raspuns si acel
raspuns va fi incarcat in pagina (o cerere post = a trimite ceva).
Folosind metoda get informatiile vor fi puse in URL (sub forma nume=valoare) si se va face o cerere la
server (vom face o cerere get = a primi ceva).
enctype
Acest atribut este folositor doar cand vrem sa permitem cuiva sa incarce un fisier pe site. Daca avem in
formular un element input de tipul <input name="fisier" type="file" /> atunci trebuie neaparat sa
precizam pe formularul care il cuprinde atributul enctype cu valoarea multipart/form-data:
<form action="/incarca-fisier" method="post" enctype="multipart/form-data" >

<input name="fisier" type="file" />
<input value="Trimite" type="submit" />
</form>
Acestea sunt doar cele mai intalnite atribute, pentru lista completa puteti vizita MDN.
In interiorul unui formular nu trebuie neaparat sa avem doar elemente de tip <input />, putem folosi ce
vrem, precum paragrafe, imagini, titluri, etc. Dar rostul unui formular este de a trimite date asa ca elementele
de tip input sunt cele mai importante.
O cautare pe Google
De exemplu, atunci cand cautam ceva pe www.google.ro se foloseste un formular cu metoda get. Si vedem
ca ceea ce cautam se adauga URL-ului atunci cand ajungem pe pagina cu rezultate. De exemplu daca am
cauta edumo, formularul ar cere urmatoarea pagina:
https://www.google.ro/search?q=edumo&oq=edumo&ie=UTF-8
Vedem ca dupa semnul ? intalnim q=edumo. Ceea ce inseamna ca pe prima pagina, in interiorul
formularului, aveam un element de tip <input /> care avea un atribut name="q", iar valoarea acelui input
era edumo. Inseamna ca atunci cand am dat click pe Search, formularul arata astfel:
<form action="/search" method="GET" >

<input name="q" type="text" value="edumo" />
<input value="Google Search" type="submit" />
</form>
Folosind acel cod ne putem construi noi un formular care cauta pe Google:
edumo
Ce este CSS
Un limbaj nou care ne ajuta sa stilizam o pagina
Exista o legatura foarte stransa intre HTML si CSS, atat de stransa incat este aproape imposibil sa inveti
unul fara celalalt.
Pana acum, am vazut ca HTML-ul este folosit pentru a preciza continutul dintr-o pagina web. Rolul Css este
folosit pentru a stiliza acel continut, pentru a-l face sa arate cum dorim.
Asadar este un limbaj folosit doar pentru a schimba modul in care este prezentat continutul, ceea ce este
foarte important.
El este destul de diferit de HTML in sintaxa, codul arata complet altfel si de aceea avem acest capitol special
doar pentru CSS.
Numele css este o prescurtare de la “cascading style sheets”, care s-ar traduce drept o foaie cu anumite
reguli de stilizare, ce au efect in cascada, si vom discuta imediat ce inseamna aceasta.
Cum se foloseste
Asadar regulile css se vor adresa elementelor html, pentru a le stiliza. Pentru a face aceasta avem 3 metode:
1. putem scrie toate regulile intr-un fisier separat si apoi sa il incarcam folosind tagul <link />
2. le putem scrie direct in document, in interiorul unui tag <style>
3. sau le putem scrie direct pe un tag html, drept valoare unui atribut
Noi ne vom axa pe a doua metoda, pentru ca seamana cu prima, doar ca cssul nu este intr-un fisier separat.
Ambele metode sunt mult mai bune decat a treia, care nu ar mai trebui folosita.
Selectorii CSS
Asadar vom folosi a doua metoda si anume in tagul de <head>, vom avea un tag de tip <style>, pe care il
inchidem:
<head>
<style>
...
</style>
</head>
Tot codul CSS va trebui scris in interiorul tag-ului <style>.
Iar acest cod il putem impartii in doua categorii:
1. o metoda prin care ne adresam unui element HTML, care se mai numeste si selectorul
2. si codul propriuzis de stilizare, scris intre paranteze acolade {}
Ca si selectori putem folosi mai multe metode, dar cele mai importante 3 sunt: folosind numele elementului
HTML, folosind valoarea atributul class a unui element sau folosind valoarea atributului id.
Noi ne vom axa acum pe a folosid numele elementului HTML. In urmatoarea lectie vom vorbi mai mult
despre atributele id si class
Exemplu
Sa spunem ca vrem sa schimbam culoarea pentru elementul <h1>.
Asadar selectorul va fi numele elementului, iar codul css va fi intre paranteze:
<head>
<style>
h1 { color: blue; }
</style>
</head>
Haideti sa analizam putin acest cod. Ca si selector am scris direct numele elementului h1, fara alte simboluri
precum < > ca in html. Apoi am deschis o paranteza acolada, am scris ce vrem sa schimbam, in cazul nostru
culoarea color, apoi : si apoi valoarea care vrem sa i-o dam blue. La sfarsit am pus ; si am inchis
paranteza acolada.
In HTML daca vroiam sa scriem un atribut unui element, scriam numele atributului, apoi semnul = si apoi
valoarea intre ghilimele, de ex atribut="valoare".
In CSS, vom scrie numele a ceea ce vrem sa schibam, apoi doua puncte, noua valoare si apoi punct si
virgula, de ex: ce schimbam:o valoare;. Semnul ; este foarte important pentru ca delimiteaza regulile
intre ele. Pentru acest element putem scrie mai multe reguli CSS, dar fiecare va trebui separata cu ;.
Mai multe reguli CSS

De exemplu, daca pe langa culoare, vrem sa schimbam si marimea textului vom mai scrie inca o regula inca
continuare:
<head>
<style>
h1 { color: blue; font-size: 35px; }
</style>
</head>
Tot ce este cuprins intre paranteleze acolade se refera la elementul <h1>.
Vedem ca fiecare regula este separata prin ;. Prima se refera la culoare color, iar a doua la marimea font-
ului font-size.
Un avantaj al limbajului CSS este ca nu conteaza spatiile goale intre cuvine si nici daca avem randuri
liberere intre reguli. Asta inseamna ca putem scrie cate o regula pe rand, astfel fiind mai usor de citit:
<head>
<style>
h1 {
color: blue;
font-size: 35px;
}
</style>
</head>
Atributul id
Vom afla cum ne putem folosi in CSS de valoarea atributului id a
unui element HTML.
Pentru a aplica anumite reguli css unui element, trebuie in primul rand sa stim cum sa ne adresam acelui
element.
Altfel spus, cum ii spunem browser-ului ca noi vrem ca aceste reguli sa se aplice unui anumit element, sau
mai multora.
Pentru aceasta exista cateva metode prin care putem vorbi cu un element.
Pentru a ne referi la un element HTML ne putem folosi de valoarea atributului id.
Folosind numele elementului

Stim din lectia trecuta ca ne putem adresa unui element HTML folosind numele lui (fara semnele < si >). De
exemplu:
h1 {
color: blue;
font-size: 35px;
}
Problema este ca aceste doua reguli se aplica tuturor elementelor <h1> din pagina.
Daca de exemplu am avea urmatoarea pagina HTML care are in head cele doua reguli CSS si in body doua
elemente <h1>:
<html>
<head>
<style>
h1 {
color: blue;
font-size: 35px;
}
</style>
</head>
<body>
<h1>Un element h1</h1>
<h1>Al doilea element h1</h1>
</body>
</html>
Atunci acele doua reguli s-ar aplica ambelor elemente <h1>. Poate noi am vrea ca doar primul element sa
aiba textul albastru si font-ul de marimea 35px.
In acest caz trebuie sa fim mai specifici. Si anume, sa spunem in CSS ca vrem ca aceste reguli sa se aplice
doar primului element <h1>. Dar pentru ca ele ca si tag-uri arata la fel, trebuie sa le adaugam un atribut
pentru a le distinge.
Folosind atributul id
Pentru un element HTML atributul id este folositor pentru ca ii daofera acestuia un nume unic in pagina.
Folosind acest nume, noi putem sa ne adresam doar lui.
Daca de exemplu, am adauga atributul id primului element <h1>, pagina ar arata astfel:
<html>
<head>
<style>
h1 {
color: blue;
font-size: 35px;
}
</style>
</head>
<body>
<h1 id="primul-h1">Un element h1</h1>
</body>
</html>
Inainte de a inchide primul tag am scris id apoi semnul = si apoi valoarea atributului intre ghilimele "". Este
foarte important sa nu avem spatii in valoarea unui atribut, de aceea am folosit -.
Acum ne putem folosi de aceasta valoare pentru a ne adresa din CSS acestui element HTML.
Si de aceea vom inlocui regula de selectare din h1 in #primul-h1
#primul-h1 {
color: blue;
font-size: 35px;
}
Selectorul s-a schimbat din numele unui element in semnul # + primul-h1 (valoarea atributului id).
Semnul # este folosit in CSS pentru a preciza ca vrem sa folosim atributul id a unui element HTML pentru a
comunica cu el.
Vedem ca dupa acesta nu urmeaza nici un spatiu, ci urmeaza direct valoarea atributului id: #primul-h1,
exact ca un hashtag.
Acum daca vrem ca acele doua reguli sa se aplice si celui de-al doilea element <h1> trebui sa ii oferim si lui
un atribut id. In acest caz pagina ar arata astfel:
<html>
<head>
<style>
#primul-h1 {
color: blue;
font-size: 35px;
}
</style>
</head>
<body>
<h1 id="al-doilea-h1">Al doilea element h1</h1>
</body>
</html>
Dar pentru a ne adresa ambelor elemente trebuie sa insiruim cele doua id-uri separate prin virgula:
#primul-h1, #al-doilea-h1 {
color: blue;
font-size: 35px;
}
Daca am avea si un alt element in pagina, precum un <h2>, il putem trece si pe acesta in acea lista si acele
reguli se vor aplica si lui. Atunci pagina ar arata astfel:
<html>
<head>
<style>
#primul-h1, #al-doilea-h1, h2 {
color: blue;
font-size: 35px;
}
</style>
</head>
<body>
<h1 id="al-doilea-h1">Al doilea element h1</h1>
<h2>Un element h2</h2>
</body>
</html>
Dar daca dorim sa aplicam aceste reguli mai multor elemente din pagina ne vom trezi cu un sir lung de id-uri
si elemente in aceasta lista. Si desi nu avem o limita pentru cate elemente putem pune in acel selector exista
o metoda mai buna.
Folosind atributul class ne putem adresa mai multor element in acelasi timp. Vom discuta despre acesta in
urmatoarea lectie.
Atributul class
Putem folosi atributul class pentru a aplica o regula CSS mai
multor elemente HTML in acelasi timp
Atributul class este tot un atribut html, al carui valoare se poate repeta, nu trebuie sa fie unica per pagina
precum in cazul id-ului.
De exemplu, putem folosi codul HTML din exemplul trecut. Vom sterge toate atributele de tip id si vom
adauga noul atribut doar primului <h1>:
<html>
<head>
<style>
</style>
</head>
<body>
<h1 class="culoare-albastra">Un element h1</h1>
</body>
</html>
De asemenea am sters si continutul din tag-ul <style>.
Trebuie sa scriem un nou selector css care sa se refere la tag-ul cu un atribut class ce are valoarea "culoare-
albastra".
Stim ca pentru a ne referi la id-ul unui element folosim semnul # si apoi valoarea id-ului. Pentru a ne referi
la atributul class a unui element ne vom folosi de semnul . (un punct) si apoi valoarea atributului.
De exemplu:
.culoare-albastra {
color: blue;
}
De asemenea nu va trebuie sa avem nici un spatiu intre . si valoarea culoare-albastra.
Daca le punem pe toate la un loc, va arata astfel:
<html>
<head>
<style>
.culoare-albastra {
color: blue;
}
</style>
</head>
<body>
</body>
</html>
Pana acum totul este similar cu folosirea unui id. Dezanvatajul era ca acel id puteam sa il folosim doar pe un
singur element.
Dar atributul class il putem folosi pe mai multe elemente. Aceasta inseamna ca acea regula css se va aplica
pentru toate elementele care au un atribut cu acea valoare.
De exemplu haideti sa punem atributul si pe al doilea element:
<html>
<head>
<style>
.culoare-albastra {
color: blue;
}
</style>
</head>
<body>
<h1 class="culoare-albastra">Al doilea element h1</h1>
</body>
</html>
Iar in acest moment ambele elemente <h1> vor avea culoarea albastra.
Moduri de a ne adresa unui element

Pana acum am vorbit ca din CSS ne putem adresa unui element HTML prin trei metode:
 numele tag-ului: in acest caz, toate tag-urile din pagina vor fi afectate
 atributul class: doar elementele care au acel atribut cu acea valoare vor fi afectate
 atributul id: doar un singur element poate fi afectat
Asadar, fiecare metoda are avantaje si dezavantaje si noi va trebui sa o alegem pe cea mai potrivita in functie
de ceea ce vrem sa schimbam. Daca vrem sa schimbam toate paragrafele din pagina, vom folosi prima
metoda. Daca vrem doar sa schimbam un titlu o vom folosi pe a treia.
Concluzii
In acest curs introductiv am vorbit despre html si foarte putin despre CSS.
HTML este unul dintre cele mai importante parti ale webului, si am incercat sa vorbim despre cele mai
folositoare si des intalnite parti ale lui.
Rolul principal al lui este a da sens continutului dintr-o pagina. Este un mod de a spune ce rol are un cuvant
in site, sau un paragraf, sau un titlu.
Ceea ce am discutat in acest curs este folosit de de toate site-urile din lume.
Pentru a vedea cum sunt construite acestea, nu trebuie decat sa accesam unul, sa spunem folosind Chrome,
sa apasam F12, si sa ne uitam in tabul Elements.
Doar uitandu-ne la html-ul unui site putem invata o groaza de lucruri, putem vedea cum folosesc ei HTML-
ul si cum putem face si noi asta.
Nu uitati ca atunci cand accesam un site, tot continutul lui este descarcat local, pe calculatorul nostru, asta
inseamna ca il putem manipula.
Mai departe
Problema este ca prezentand pur si simplu continutul unei persoane, nu il ajuta foarte mult sa il inteleaga,
este destul de greu de citit. Asa ca acesta trebuie facut sa arate bine, sa fie usor de folosit.
De cele mai multe ori, modul in care arata un site, este la fel de important ca si continutul lui.
De aceea, vom avea un curs unde ne vom axa doar pe CSS, limbajul folosit pentru stilizarea unui site.
Sper ca acest curs a fost folositor si mai departe ar fi interesant sa continuam cu cel despre CSS. Succes.

Curs HTML

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Prezentare scurta

Ce vom acoperi in acest curs si de ce sunt importante

Diferenta dintre tehnologii

Cum functioneaza HTML-ul?

aceea de a Iua un continut si de a ii oferi un comportament special

Cand a fost inventat si de ce

Iar elementul final va arata astfel:

<p>continutul unui paragraf</p>

acest cuvant va fi ingrosat

<p>acest cuvant va fi <strong>ingrosat</p></strong>

Textul tot va arata bine:

acest cuvant va fi ingrosat

Copiii unui element

Iar elementele <strong></strong> sunt copii lui.

<img src="..." />

Atributul unui tag HTML

<img src="o-imagine.png" />

In acest caz src="o-imagine.png" este atributul tag-ului.

Un atribut are urmatoarea structura:

1. numele atributului src (prescurtare de la source)

Atributele unui element care se inchide

<p id="un-id" class="o-clasa">

De exemplu pentru elementul <img />, avem atributul src.

Asadar intreaga lista trebuie cuprinsa in unul din cele 2 tag-uri.

De exemplu, o lista scurta cu orase va arata astfel:

Unde le putem folosi?

In functie de importanta lor aceste elemente au numele de la <h1> la <h6>

<h1>Titlul unei pagini</h1>

Diferenta vizuala dintre ele

 Un text folosind tag-ul <h1>

 elemente de tip block

 elemente de tip inline

In exemplul urmator, ambele paragrafe vor aparea pe o linie:

<p>aceste <strong>cuvinte</strong> vor aparea pe o singura linie</p><p>aici vom

Cand ar trebui sa se foloseasca tag-ul <div>

2. Tag-urile pentru Javascript si CSS

Acesta este un element care nu adauga nimic continutului paginii.

<meta charset="utf-8" />

<meta name="description" content="scurta descriere a paginii" />

Tag-ul pentru titlul paginii

Pe aceasta pagina, titlul este: "Elementul <head>".

In final, pagina va arata astfel:

Tag-ul pentru fisiere Javascript

In acest caz, browser-ul va cere fisierul de la acea adresa, il va citi si il va interpreta.

Tag-ul pentru fisiere CSS

<link href="style.css" />

<link href="https://www.edumo.org/style.css" type="text/css" />

De obicei va avea valoarea de "stylesheet", de exemplu:

<link href="https://www.edumo.org/style.css" type="text/css" rel="stylesheet" />

Tot textul, toate imaginile, link-urile, tot ce va fi vizibil in pagina noastra.

O pagina simpla in HTML

2. Structura de baza a paginii

5. Crearea unui link in site

8. Un link in afara site-ului

9. Creare unui link catre un fisier

Imediat dupa tagul meta, vom alege un titlul pentru pagina.

Majoriatea paginilor de pe web au trei mari parti:

Pentru aceasta sectionare vom folosi 3 taguri noi:

Este vorba de <article></article>.

Un continut care se repeta

Contruirea unui tabel

Care va arata astfel:

Rand 1, Coloana 1 Rand 1, Coloana 2