Programare Web Front EndPartea I-a

Victor BUCATA

Facultatea de Inginerie Electrica - U.P.B.

1 Elemente introductiveCe este hipertextul?Ce sunt HTML, CSS s, i JavaScript?Momente cheie ın proiectarea Web

2 Ce metode avem pentru a crea site-uri web?Cod directEditoare WYSIWYGWebsite BuilderContent Management System

3 Limbajul HTMLNot,iuni fundamentaleElementele HTMLLista tagurilor HTML pe categorii

4 Exemple HTML

World Wide Web

I Internet = World Wide Web?

I WWW partea cea mai interesanta, mai inovatoare, cea mai vizibila,cu dezvoltarea cea mai rapida a Internetului.

I ”navigarea pe Internet” = utilizarea World Wide Web-ului.

I Dar conceptul care sta la baza WWW (hipertextul) nu este chiar as, ade nou...

Ce este hipertextul?

Ce este hipertextul?

I Ted Nelson, filozof, sociolog s, i informatician american introducetermenii de ”hypertext” s, i ”hypermedia”. El defineste ın 1965hipertextul (text non-linear) ca fiind un ”material scris sau graficinterconectat ıntr-o maniera complexa care ın mod conventional nupoate fi reprezentat pe hartie. El poate contine cuprinsuri alepropriului sau continut si relatiile dintre diverse parti componente;poate de asemenea sa contina adnotari, adaugiri si note de subsolpentru cei care doresc sa-l examineze”.

I Metoda de organizare a informatiilor ın care datele sunt memorateıntr-o retea de noduri si legaturi, putand fi accesata prinintermediul browserelor si manipulata de un editor.

Ce crede azi Ted Nelson despre hipertext (v. visible connections):https://www.youtube.com/watch?reload=9&v=hMKy52Intac

Definition (WWW)World Wide Web-ul este o retea globala de documente, imagini si alteresurse legate logic prin hyperlink-uri si adresate prin URI-uri (UniformResource Identifier).

Definition (HTML)HyperText Markup Language (Limbajul de marcare a hipertextului) estelimbajul ın care sunt scrise majoritatea paginilor web.

Definition (HTTP)HyperText Transfer Protocol (Protocol de transmitere a hipertextului)este protocolul principal de acces la WWW.

Definition (Programarea Web Front End)Programarea Web Front End este programarea paginilor web ın carecodul este vizibil pe partea de client s, i este rulat pe el.

Ce este WWW? (continuare)

I Browserele pentru WWW precum MS Edge, MS Internet Explorer,Mozilla Firefox, Opera, Apple Safari si Google Chrome permitutilizatorilor sa navigheze de la o pagina web la alta prin intermediulhyperlink-urilor incluse ın documente.

I Aceste documente pot contine orice combinatie de date: grafica,sunete, text, video, multimedia si continut interactiv.

I Comparativ cu mediul tiparit, World Wide Web-ul a permisdescentralizarea informatiei la scara mare

Cele mai utilizate browsere - 2017

Inceputurile WWW

I 12 noiembrie 1990: Bazandu-se pe conceptul de hipertext creat deTed Nelson, Tim Berners-Lee de la CERN, cu ajutorul lui RobertCailliau publica o propunere de a construi un ”Proiect Hypertext”denumit ”WorldWideWeb” (cunoscut si ca ”W3”) ca fiind o retea dedocumente hypertext care sa fie vazute de browsere folosind oarhitectura de tip client-server.

I Pana la sfarsitul lui 1990, Berners-Lee construieste toateinstrumentele necesare pentru un Web functional: primulbrowser web (care era ın acelasi timp si editor web), primul serverweb si prima pagina web care constituia proiectul.

I 1992: 20 de servere web ın ıntreaga lume

I 1993: apare browserul Mosaic

I de atunci a cunoscut o dezvoltare spectaculoasa

Primul server web

Acest calculator (NeXT) a fost folosit de Tim Berners-Lee de la CERN si adevenit primul server Web din lume.

Ce spune Tim Berners-Lee ın 2018 despre invent,ia sa

Tim Berners-Lee, celebrul inventator britanic al World Wide Web-ului,vine cu o idee considerata revolutionara si propune o platformadescentralizata numita Solid unde fiecare utilizator sa-si poata gestionadatele si sa poate decide daca vrea sa le partajeze cu cineva.Berners-Lee a spus de multe ori ca este ıngrozit de ce a ajuns internetulsi de faptul ca oamenii nu mai au deloc control asupra datelor personale.

Ce sunt HTML, CSS s, i JavaScript?

Ce este HTML?

HTML este limbajul de marcare folosit pentru descrierea cont,inutuluipaginilor web.

I Tim Berners-Lee pune bazele lui ın anul 1989 pentru comunicareape Internet ıntre fizicienii de la CERN.

I HTML este un limbaj bazat pe SGML (Standard Generalized MarkupLanguage) standardizat ın 1986.

I HTML nu este un limbaj de programare, e un limbaj de marcare.

I Un limbaj de marcare este format dintr-un set de etichete (taguri)de marcare.

I Cont, inutul documentelor HTML este descris folosind etichete(taguri) HTML.

I Fiecare eticheta (tag) HTML descrie un tip de cont, inut diferit.

Ce este CSS?

I CSS este acronimul de la Cascading Style Sheets (Foi de Stil ınCascada).

I CSS descrie modul ın care sunt afis, ate elementele HTML peecran, hartie sau alte suporturi.

I CSS cres, te eficient,a. Poate controla aspectul mai multor paginiWeb foarte us, or.

I Foile de stil externe sunt stocate ın fis, iere CSS.

Ce este JavaScript?

I JavaScript este un limbaj de programare de script (codul estevizibil utilizatorului), interpretat ın browser, dezvoltat de Netscape s, iSun s, i cu care pot fi create pagini web interactive.

I HTML 5 cont,ine s, i descrierea unor funct,ii API (ApplicationProgramming Interface) JavaScript care interact,ioneaza cudocumentul HTML prin intermediul arborelui DOM (DocumentObject Model).

Momente cheie ın proiectarea Web

I 1991 HTML

I 1996 CSS1 + JavaScript

I 1997 HTML 3.2

I 1998 CSS2

I 1999 HTML 4.01, bazele CSS3

I 2000 XHTML 1

I 2002 Design Web fara tabele

I 2005 Ajax

I 2009 HTML 5 versiunea draft

I 2014 recomandarea HTML 5.0

La ınceput era doar textul... s, i nu exista stil.

I HTML provine din SGML (Standard Generalized Markup Language)standardizat ın 1986.

I a fost conceput init,ial pentru a structura un document bazat pe textI text formatat cu niveluri multiple de titluri s, i ın corpul paginii (body)

Apoi au aparut imaginile.

I O imagine face cat o mie de cuvinteI Tagul IMG pentru imagini a fost introdus cu HTML 2.0 (aprilie 1994 -

septembrie 1995)

I singurul atribut suplimentar disponibil, atributul alt.

Apoi au aparut tabelele.

I Incepand cu versiunea HTML 3.0 au fost introduse tabelele.

I HTML 3.0 nu a fost niciodata ”aprobat” ci HTML 3.2

”Manipularea” tabelelor

I Dezvoltatorii observa ca tabelele pot fi folosite s, i pentru altcevadecat prezentarea datelor.

I Tabelele sunt folosite pentru structurarea paginii web.

I In general sunt folosite pe desktop

Web designerii intra ın act,iune.

I O data cu HTML 3.2, devine posibila stabilirea fonturilor, culorilor,fundalurilor etc.

I S, i astfel se nas, te designerul web.I Afirmat,ia ”Cont,inutul este cel mai important” nu mai este general

valabila.I HTML 3.2 este standardizat ın ianuarie 1997

Browserele evolueaza.

I La ınceput existau doar browsere bazate pe text.I Apare Mosaic s, i apoi apar alte browsere.

I Netscape s, i IE introduc taguri proprii pentru atractivitate

I Unele taguri proprii vor fi scrise ın specificat,ii - Razboiul browserelor

I Nu toate browserele afis, au aceeas, i pagina la fel.

O solut,ie mai buna - CSS1

I In decembrie 1996 apare CSS1 pentru a separa modul de afis, arefat, a de cont, inut.

I Proprietatea ”float” permite pozit,ionarea unor elemente precumimaginile

Pozit,ionarea CSS2

I Permite structurarea paginilor fara a folosi tabele.I Exemple (proprietatea position): absolute, relative, static s, i fixed

I Apare avantajul as, a numitelor print sheets (necesare imprimariicorecte a paginilor)

Avantajele folosirii CSS

I Aspect unitar pentru site

I Cu un fis, ier sau doua CSS se ment,ine stilul pentru ıntreg siteul -nefiind nevoie de implementarea lui ın fiecare pagina

I Cu CSS se cas, tiga timpI Des, i la ınceput ia mai mult decat un editor de tip WYSIWYG, ulterior

viteza cres, te

I Se poate schimba aspectul ıntregului site prin modificarea unuisingur fis, ier de stil

I La introducerea unui aspect, nu mai este nevoie de verificareapagina cu pagina a siteului

Demonstrat,ie CSS: O singura pagina HTML - mai multestiluri!

Urmarit,i exemplul de mai jos - o pagina HTML afis, ata cu patru foi de stildiferite. Apasat,i pe ”Foaia de stil 1”, ”Foaia de stil 2”, ”Foaia de stil 3”,”Foaia de stil 4” pentru a vedea diferitele stiluri:

http://itee.elth.pub.ro/˜vbucata/ia/cursuri/ex-html-css/demo-css.html

CSS3

I CSS3 nu este o singura specificat,ie - este formata din moduleI Aceasta abordare permite W3C prioritizarea specificat,iilor s, i timp de

react,ie rapid la cererile noi

I Starea actuala a CSS3:http://www.w3.org/Style/CSS/current-work

HTML5

I HTML4.01 - cel mai de succes standard de pana acum(recomandare ın anul 2000)

I HTML5 nu este o singura specificat,ie - este formata dincaracteristici (geolocalizare, canvas, audio, video, formulare etc)

I Recomandarea HTML5 publicata la sfars, itul lui 2014.

http://itee.elth.pub.ro/˜vbucata/ia/cursuri/exhtml5/html5.html

Ce metode avem pentru a crea site-uriweb?

Ce metode avem pentru a crea site-uri web?

1 direct HTML, CSS s, i JavaScript, folosind editoare de genNotepad++, Sublime Text, Atom

2 Editoare grafice profesionale de tip WYSIWYG, ex: AdobeDreamweaver. Microsoft Expression Web

3 Website Builder (nu este nevoie de experient,a ın domeniu), ex:WIX,GoDaddy,Weebly

4 Content Management System (CMS), ex: Wordpress, Drupal,Joomla

Metoda 1: Direct cod HTML,CSS, JavaScript

I cea mai laborioasa metoda dar s, i cea mai flexibila

I necesita cunos, tint,e speciale, curba de ınvat,are lenta

I poate fi folosita cu succes ın paralel cu celelalte metode

I se pot folosi editoare de gen Notepad++, SublimeText, Atom

I O select,ie buna a instrumentelor indispensabile:https://blog.udacity.com/2015/04/13-useful-web-dev-tools-cant-live-without.html

I Se pot folosi biblioteci de cod (Bootstrap, JQuery)

I Noi vom studia not,iunile de baza HTML, CSS s, i JavaScript

Metoda 2: Editoare Web profesionale

I WYSIWYG = What You See Is What You Get

I nu este nevoie de cunos, tint,e avansate de HTML, CSS s, i JavaScriptdar trebuie cunoscute programele

I Exemple: Adobe DreamWeaver, Microsoft Expression Web

I Rezultatul este profesional!

Metoda 3: Website Builder

Metoda 3: Website Builder

I Care este cel mai bun Website Builder?diverse facilitat,i: teme responsive... eCommerce

I Cum scriu un site web?nu este nevoie sa fii expert, oricine poate crea un site web

I Cum aleg un serviciu de gen Website Builder?pentru un blog personal este suficient un serviciu simplu.pentru facilitat,i suplimentare gen eCommerce, este nevoie de unserviciu mai avansat.

Top Website Builders (Octombrie 2018)

1 http://www.wix.com

2 http://www.godaddy.com

3 http://www.weebly.com

4 http://www.networksolutions.com

5 http://www.site123.com

6 http://www.register.com

Metoda 4: CMS

Metoda 4: CMS

I CMS = Content Management System

I Metoda potrivita atunci cand avem un site complex, cu mult,iutilizatori ınscris, i

I Datele noi se introduc us, or prin intermediul unei interfet,e facile

I Dezavantaj: viteza scazuta

Limbajul HTML

Ce sunt etichetele (tagurile) HTML?

I Etichetele (tagurile) HTML sunt cuvinte cheie ınsot,ite de semnele

”<” s, i ”>”

I Exemplu: <numetag>cont,inut</numetag>

I Etichetele HTML sunt de obicei pereche, de exemplu: <p>s, i </p>

I Primul tag al perechii este tagul de ınceput, al doilea este cel desfars, it.

I Tagul de sfars, it este la fel ca tagul de ınceput dar cont,ine un semnslash ınainte de numele tagului.

I Tagul de ınceput se numes, te adesea tag de deschidere iar cel desfars, it, tag de ınchidere.

Elementele/Etichetele HTML

Elementele HTML sunt formate dintr-un tag de ınceput, un tag desfars, it s, i tot ceea ce se afla ıntre ele:<numetag>cont,inut</numetag><p>Primul meu paragraf HTML.</p>

Tagul de ınceput Cont,inutul elementului Tagul de sfars, it<h1> Primul titlu </h1><p> Primul paragraf. </p><br>

Observat, ie: unele elemente HTML nu au un tag de ınchidere.

Structura unei pagini HTML

Numai domeniul <body>(suprafat,a alba) este afis, ata de catre browser.

Elementele HTML imbricate

I Elementele HTML pot cont,ine alte elemente HTML imbricate.

I Toate documentele HTML constau din elemente HTML imbricate.

I Exemplul de mai jos cont,ine 4 elemente HTML:

1 <html>2 <body>34 <h1>Primul titlu</h1>5 <p>Primul paragraf.</p>67 </body>8 </html>

I Elementul <html>defines, te ıntreguldocument. El are un tag de ınceput <html>s, iun tag de sfars, it </html>.

I Cont,inutul elementului este un alt element HTML(elementul <body>).

I Elementul <body>defines, te corpuldocumentului. El are un tag de ınceput<body>s, i un tag de sfars, it </body>.

I Acesta cont,ine doua alte elemente HTML(<h1>s, i <p>).

I Elementul <h1>defines, te un titlu. El are un tagde ınceput <h1>s, i un tag de sfars, it </h1>.

I Cont,inutul elementului este: Primul titlu.

I Elementul <p>defines, te un paragraf. El are untag de ınceput <p>s, i un tag de sfars, it </p>.

I Cont,inutul elementului este: Primul paragraf.

Nu uitat,i tagul de sfars, it

Unele elemente HTML vor fi afis, ate corect, chiar daca uitat,i tagul desfars, it:

1 <html>2 <body>34 <p>Acesta este un paragraf5 <p>Acesta este un paragraf67 </body>8 </html>

Exemplul de mai sus funct,ioneaza ın toate browserele deoarece tagul desfars, it este considerat opt,ional.Dar nu va bazat, i pe asta! Se pot genera rezultate neas, teptate s, i/sauerori daca uitat,i tagul de sfars, it.

Elemente HTML vide

I Elementele HTML fara cont, inut sunt denumite elemente vide.

I Elementul <br>este un element vid fara tag de sfars, it (tagul<br>determina un salt pe linia urmatoare - line break).

I Elementele vide pot fi ”ınchise” ın cadrul tagului de deschidereastfel: <br />.

I In HTML 5 nu este obligatoriu ca elementele vide sa fie ınchise. Dardaca dorit,i sa fit,i mai strict,i sau daca dorit,i ca documentul sa poata ficitit de un browser XML, atunci va trebui sa ınchidet,i toateelementele HTML.

Sfat pentru scrierea HTML

I Folosit,i litere mici pentru numele tagurilor

I Tagurile HTML nu depind de majuscule sau minuscule:<P>ınseamna acelas, i lucru ca <p>.

I Standardul HTML 5 nu prevede minuscule pentru taguri dar suntrecomandate ın HTML 4 s, i obligatorii ın tipuri de documente maistricte precum XHTML.

Un exemplu minimal HTML

1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="utf-8">5 <title>Titlul paginii6 </title>7 </head>8 <body>9

10 <h1>Primul titlu</h1>11 <p>Primul paragraf.</p>1213 </body>14 </html>

I Declarat,ia DOCTYPE defines, te tipul dedocument ca fiind HTML.

I Textul dintre <html>s, i </html>defines, tecont,inutul documentului HTML.

I Textul dintre <head>s, i </head>oferainformat,ii despre document.

I Textul dintre <title>s, i </title>furnizeaza titluldocumentului.

I Textul dintre <body>s, i </body>defines, tecont,inutul vizibil al paginii.

I Textul dintre <h1>s, i </h1>defines, te un titlude nivel 1.

I Textul dintre <p>s, i </p>defines, te unparagraf.

I http://itee.elth.pub.ro/˜vbucata/ia/cursuri/ex-html-css/ex1v0.html

Modul de editare a documentelor HTML

Paginile HTML pot fi editate folosind editoare WYSIWYG HTMLprofesionale precum Adobe DreamWeaver sau Microsoft ExpressionWeb.Pentru a ınvat,a HTML se recomanda un editor de text precum Notepadsau Notepad++.Folosirea unui editor de text simplu este o cale buna de a ınvat,a HTML.Urmat,i cei 4 pas, i de mai jos pentru a crea o prima pagina web cuNotepad:

I Deschidet,i Notepad.

I Scriet,i codul HTML de mai sus (v. Un exemplu minimal HTML).

I Salvat,i pagina HTML cu extensia .htm sau .html avand grija sa fiefolosita codarea UTF-8 pentru caractere.

I Deschidet,i pagina HTML ın browser.

Declarat,ia <!DOCTYPE>

Declarat,ia <!DOCTYPE>ajuta browserul sa afis, eze pagina web corect.Pe web exista mai multe tipuri de documente.Pentru a afis, a documentul corect, browserul trebuie sa cunoasca tipul s, iversiunea.Declarat,ia doctype nu este obligatoriu sa fie scrisa cu majuscule.Urmatoarele cazuri sunt acceptate:

1 <!DOCTYPE html>23 <!DOCTYPE HTML>45 <!doctype html>67 <!Doctype Html>

Declarat,ii <!DOCTYPE>uzuale

I HTML 5:<!DOCTYPE html>

I HTML 4.01:<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”>

I XHTML 1.0:<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

In continuare vom folosi doar HTML 5.

Cum se poate vedea sursa paginilor HTML?

Pentru a vedea sursa unei pagini web, ceea ce se afla ın spatele a cese afis, eaza selectat,i ”View Page Source” (ın Chrome) sau ”ViewSource” (ın IE) sau ceva similar ın alte browsere.Aceasta va conduce la deschiderea unei ferestre cont,inand codul HTMLal paginii.

Lista tagurilor HTML grupate pe categorii

Taguri HTML de baza

I <!DOCTYPE> = apare pe prima linie s, i defines, te tipul de HTML folosit

I <html> = defines, te un document HTML

I <title> = defines, te titlul documentului

I <body> = defines, te corpul documentului

I <h1>...<h6> = defines, te titluri pe 6 niveluri posibile

I <p> = defines, te un paragraf

I <br> = trece pe randul urmator

I <hr> = defines, te trecerea la o alta tema de cont,inut

I <!--...--> = defines, te un comentariu

Taguri HTML pentru formatare

I <acronym> = nu este suportat ın HTML5, a se folosi <abbr>. Defines, te un acronim.

I <abbr> = defines, te o abreviere sau un acronim.

I <address> = defines, te informat,iile de contact pentru autorul paginii.

I <b> = defines, te un text cu aldine

I <bdi> = element nou HTML5, defines, te o parte de text scrisa ın sens invers fat,a de textulprincipal

I <bdo> = schimba direct,ia de scris a textului

I <big> = nu este suportat ın HTML5 (a se folosi CSS). Defines, te text scris mai mare.

I <blockquote> = defines, te o sect,iune citat din alta sursa.

I <center> = nu este suportat ın HTML5 (a se folosi CSS). Defines, te un text centrat.

Taguri HTML pentru formatare (continuare)

I <cite> = defines, te titlul unei lucrari.

I <code> = defines, te un fragment de cod program.

I <del> = defines, te text ce a fost scos din document.

I <dfn> = reprezinta definit,ia unui termen.

I <em> = defines, te un text accentuat.

I <font> = nu este suportat ın HTML5 (a se folosi CSS). Defines, te fontul, culoarea s, imarimea textului.

I <i> = defines, te o parte a textului ce apart,ine unei schimbari de voce/dispozit,ie.

I <ins> = defines, te un text care a fost inserat ın document.

I <kbd> = defines, te un text de la tastatura.

Taguri HTML pentru formatare (continuare)

I <mark> = element nou HTML5, defines, te un text marcat.

I <meter> = element nou HTML5, afis, eaza un nivel ıntr-o bara de marime cunoscuta.

I <pre> = defines, te text preformatat.

I <progress> = element nou HTML5, afis, eaza progresul ıntr-o bara de progres.

I <q> = defines, te un citat scurt.

I <rp> = element nou HTML5, defines, te ceea ce se va afis, a ın browserele care nu suportaadnotarea ruby - pentru limbile asiatice.

I <rt> = element nou HTML5, defines, te o explicat,ie/mod de pronunt,ie a caracterelor (pentrulimbile asiatice)

I <ruby> = element nou HTML5, defines, te o adnotare ruby - pentru limbile asiatice.

I <s> = defines, te un text care nu mai este corect.

Taguri HTML pentru formatare (continuare)

I <samp> = defines, te un text de ies, ire generat de un program.

I <small> = defines, te un text mai mic.

I <strike> = nu este suportat ın HTML5 (a se folosi <del>sau <s>) Defines, te un texttaiat.

I <strong> = defines, te un text important.

I <sub> = defines, te un text indice.

I <sup> = defines, te un text exponent.

I <time> = element nou HTML5, defines, te o data/moment de timp.

I <tt> = nu este suportat ın HTML5 (a se folosi CSS). Defines, te un text monospat,iat.

I <u> = defines, te un text diferit stilistic fat,a de textul normal.

I <var> = defines, te o variabila.

I <wbr> = element nou HTML5, defines, te un posibil salt la un rand nou.

Taguri HTML pentru formulare s, i introducerea datelor

I <form> = defines, te un formular HTML pentru introducerea datelor de catre utilizator.

I <input> = defines, te un camp de intrare.

I <textarea> = defines, te un camp de intrare pe mai multe randuri (suprafat,a text).

I <button> = defines, te un buton.

I <select> = defines, te o lista auto derulanta.

I <optgroup> = defines, te un grup de opt,iuni corelate ıntr-o lista auto derulanta.

I <option> = defines, te o opt,iune ıntr-o lista auto derulanta.

I <label> = defines, te o eticheta pentru un element <input>.

I <fieldset> = grupeaza elemente corelate dintr-un formular.

I <legend> = defines, te un titlu pentru un element <fieldset>.

I <datalist> = element nou HTML5, specifica o lista de opt,iuni predefinite pentrucampurile de intrare.

I <keygen> = element nou HTML5, defines, te un camp cheie-pereche pentru formulare.

I <output> = element nou HTML5, defines, te rezultatul unui calcul.

Taguri HTML pentru cadre

I <frame> = nu este suportat ın HTML5, defines, te o fereastra (uncadru) dintr-un set de cadre.

I <frameset> = nu este suportat ın HTML5, defines, te un set decadre.

I <noframes> = nu este suportat ın HTML5, defines, te un cont,inutalternativ pentru utilizatorii care nu pot vedea cadre.

I <iframe> = defines, te un cadru inline.

Taguri HTML pentru imagini

I <img> = introduce o imagine.

I <map> = defines, te o harta imagine.

I <area> = defines, te o suprafat,a ın interiorul unei hart,i imagine.

I <canvas> = element nou HTML5, folosit pentru a desena graficade obicei prin scripting (JavaScript).

I <figcaption> = element nou HTML5, defines, te un titlu pentruelementul <figure>.

I <figure> = element nou HTML5, specifica un cont,inut propriu.

Taguri HTML pentru Audio/Video

I <audio> = element nou HTML5, defines, te un cont,inut audio.

I <source> = element nou HTML5, defines, te mai multe resursemedia pentru elementele audio s, i video.

I <track> = element nou HTML5, defines, te textele asociate pentruelementele video s, i audio.

I <video> = element nou HTML5, defines, te un cont,inut video saufilm.

Taguri HTML pentru legaturi

I <a> = defines, te un hyperlink.

I <link> = defines, te relat,ia dintre un document s, i o resursa externa(cel mai adesea o legatura la o foaie de stil CSS)

I <nav> = element nou HTML5, defines, te legaturi pentru navigare.

Taguri HTML pentru liste

I <ul> = defines, te o lista neordonata.

I <ol> = defines, te o lista ordonata.

I <li> = defines, te un element al unei liste.

I <dir> = nu este suportat ın HTML5 (a se folosi <ul>, defines, teo lista director.

I <dl> = defines, te o lista de definit,ii.

I <dt> = defines, te un termen.

I <dd> = defines, te definit,ia unui termen.

I <menu> = defines, te un meniu de comenzi.

I <menuitem> = element nou HTML5, defines, te un element demeniu.

Taguri HTML pentru tabele

I <table> = defines, te un tabel.

I <caption> = defines, te titlul unui tabel.

I <th> = defines, te o celula din antetul tabelului.

I <tr> = defines, te un rand dintr-un tabel.

I <td> = defines, te o celula dintr-un tabel.

I <thead> = grupeaza cont,inutul antetului unui tabel.

I <tbody> = grupeaza cont,inutul corpului unui tabel.

I <tfoot> = grupeaza cont,inutul subsolului unui tabel.

I <col> = specifica proprietat,ile coloanelor dintr-un element<colgroup>.

I <colgroup> = Specifica un grup de una sau mai multe coloanedintr-un tabel pentru formatare.

Taguri HTML pentru stiluri s, i semantica

I <style> = defines, te un stil pentru un document.

I <div> = defines, te o sect,iune ıntr-un document.

I <span> = defines, te o sect,iune ıntr-un document.

I <header> = element nou HTML5, defines, te un antet pentru un document sau o sect,iune.

I <footer> = element nou HTML5, defines, te un subsol pentru un document sau o sect,iune.

I <main> = element nou HTML5, defines, te cont,inutul principal pentru un document.

I <section> = element nou HTML5, defines, te o sect,iune ıntr-un document.

I <article> = element nou HTML5, defines, te un articol.

I <aside> = element nou HTML5, defines, te o bara laterala.

I <details> = element nou HTML5, defines, te detalii suplimentare pe care utlizatorul lepoate vedea sau ascunde.

I <dialog> = element nou HTML5, defines, te o cutie de dialog sau o fereastra.

I <summary> = element nou HTML5, defines, te un antet vizibil pentru un element <details>.

Taguri HTML pentru meta informat,ii

I <head> = defines, te informat,ii despre document.

I <meta> = defines, te meta datele despre un document HTML.

I <base> = defines, te radacina pentru URL-urile din document.

I <basefont> = nu este suportat ın HTML5 (a se folosi CSS).,defines, te o culoare, marime s, i font implicite pentru textul dindocument.

Taguri HTML pentru programare

I <script> = defines, te un script pe partea de client.

I <noscript> = defines, te un cont,inut alternativ pentru utilizatoriicare nu suporta scripturi.

I <applet> = nu este suportat ın HTML5 (a se folosi<embed>sau <object>). defines, te un applet.

I <embed> = element nou HTML5, defines, te un container pentru oaplicat,ie externa non-HTML.

I <object> = defines, te un obiect inclus.

I <param> = defines, te un parametru pentru un obiect.

Recapitulare prin exemple HTML

Putet,i urmari exemplele de mai jos:

http://itee.elth.pub.ro/˜vbucata/ia/cursuri/ex-html-css/index.html

Vom continua ın cursul urmator cu not,iuni legate de HTML5, CSS s, iJavaScript.

Va mult,umesc pentru atent,ie!