CURS Master: Tehnologii Moderne de Proiectare A Aplicatiilor Multimedia

Universitatea Tehnică din Cluj-Napoca
Facultatea de Inginerie Electrică
CURS Master
Tehnologii moderne de proiectare
a aplicatiilor multimedia
2
Curs: TEHNOLOGII MODERNE DE PROIECTARE A APLICATIILOR MULTIMEDIA
CAP.4. LIMBAJUL HTML5
CUPRINS
4.1. Introducere
4.2. Tag-uri (etichete) HTML 5
4.3. Inserarea imaginilor. Atribute.Stiluri de fonturi.
4.4. Utilizare culori. Inserare tabele, frame-uri
1
3
4.1. Introducere
Limbaje specifice pentru realizarea de interfete grafice web :
 HTML (HyperText Markup Language)

 CSS (Cascading Style Sheets)
 JavaScript
 XML (eXtensible Markup Language)
 XHTML (eXtensible HyperText Markup Language)
http://www.w3schools.com/
4
HTML
Paginile Web
 fisiere cu extensia .htm sau .html
 dimeniuni mici  reducere trafic de retea si spatiu pe server
 se pot dezvolta utilizand:
editoare de text simple:
 Notepad (Windows) sau
 TextEdit (Mac)
 Kompozer
sau editoare comerciale:
 Adobe Dreamweaver, MS FrontPage, etc
HTML
 limbaj pentru crearea documentelor web structurate
 are la baza tag-uri /etichete
<nume_tag> text, imagini, ... </nume_tag>
2
5
Tutoriale HTML : http://www.w3schools.com/html/
6
4.2. Tag-uri (etichete) HTML 5
3
7
Doar ceea ce este in interiorul <body> </body> este vizibil in browser
8
Alte etichete/tag-uri HTML:
4
9
10
5
11
Structura documente HTML
Structura unui document HTML (pagina web) cuprinde:

 Prima linie –informatii despre versiunea de limbaj utilizata
 Sectiunea antet – informatii generale despre document
 Corpul documentului –continut efectiv
12
Index.html
6
13
Exista 4 perechi de elemente obligatorii intr-un document HTML:

 <HTML>...</HTML> - inceputul si sfarsitul paginii web;
 <HEAD>...</HEAD> - titlul paginii web, afisat in bara de titlu a
browser-ului;
 <TITLE>...</TITLE> - delimiteaza antetul paginii web;
 <BODY>...</BODY> - delimiteaza continut propiu-zis al paginii web.
14
Hiperlegaturile (Hyperlinks) HTML:

 legaturi interne - ancore (in cadrul aceluiasi document, utile in
cazul paginilor de lungimi mari si in care este necesara indicarea
exacta a anumitor puncte din document).
 legaturi locale (catre un alt document situat pe acelasi calculator
si director)
<A HREF=”dir/doc.html”>apasati aici </A>
 legaturi externe realizate intre servere distincte; apelarea se
face prin referinta completa:
<A href="http://www.upt.ro/"> Text marcat evidentiat</A>
 legaturi pentru email (permit deschiderea clientului de

email - Outlook, Thunderbird)
<A HREF="mailto:webmaster@www.numecompanie.com">Trimite eMail la
Webmaster</A>
7
15
Link-uri
16
Link-uri colorate diferit in functie de actiune
8
17
Unde se afiseaza link-urile? Atribute target
18
Link pe imagine
9
19
Link tip ancora in document HTML: #
20
4.3. Inserarea imaginilor. Atribute.Stiluri de fonturi
 Daca poza se afla in folderul curent:<img src=”poza.jpg”>

 Daca poza se afla intr-un alt folder:<img src=”nume_folder/poza.jpg”>
Utilizand style
Utilizand width si height
10
21
Imagini clickable (image maps) : <map> si <area>
22
Imagini animate
-gif animat
11
23
Imagini ca background: <body backround>
24
Atribute - lista completa :

http://www.w3schools.com/tags/ref_attributes.asp
 ALIGN
ALIGN = TOP aliniaza imaginea cu partea cea mai de sus a
randului;
ALIGN = MIDDLE aliniaza imaginea cu mijlocul randului;
ALIGN = BOTTOM aliniaza imaginea cu partea de jos a
randului sau a celei mai mari imagini.
 WIDTH=”…” si HEIGHT=”…” dimensiunile imaginilor
 ALT - permite afisarea unui sir de caractere in locul imaginii,
pentru persoane cu deficiente de vedere care utilizeaza screen
readers.
12
25
Alte atribute uzuale:
26
Headings: se definesc cu <h1> (cel mai important) pana la <h6> (cel

mai putin important)
13
27
Paragrafe: se definesc cu <p> </p> dar vor fi afisate corect si fara </p>
Paragraf nou: se poate defini si cu <br> (! fara </br>)
28
Text preformatat: se definesc cu <pre> </pre>
14
29
Afisare in browser: se ignora spatiile, tab-urile din text si linie noua
30
Eticheta <hr> - Horizontal rule: linie orizontala de separare a

sectiunilor de text
15
31
4.4. Utilizare culori
Stiluri pentru culori HTML:
32
4.4. Utilizare culori
Stiluri pentru culori HTML:
16
33
Stiluri pentru culori in HTML:
34
Stiluri pentru Fonturi in HTML:
17
35
Culori de baza in HTML:
Alte culori si nuante

in HTML:
36
Culori de baza in HTML: utilizand numele culorii
18
37
Culori de baza in HTML: utilizand codul RGB
38
Stiluri pentru dimensiune fonturi in HTML:
19
39
Stiluri pentru alinierea textului in HTML:
40
Stiluri pentru formatarea textului in HTML:
Elemente de formatare HTML:
20
41
Elementele <del> si <mark> in HTML:
42
Citarea unui text in HTML: <blockquote cite=“”> , </blockquote>
21
43
Citarea (quote) unui text scurt in HTML: <q> </q>
44
Abrevieri in HTML: <abbr>
22
45
Adrese in HTML: <address> , </address>
46
Text inversat in HTML: <bdo dir=“rtl”> </bdo>
Comentarii in HTML: 
23
47
Tabelele : utilizand <table>, sunt editate rand cu rand si

celula cu celula
48
Etichete tabele:
24
49
Liste nenumerotata -bullets: <ul> si <li>
50
Liste numerotata: <ol> si <li>
25
51
Atribute liste ordonate :
52
Liste imbricate:
26
53
Frame-uri : <iframe>
54
Metadate in <head> :
• Elementul <head> contine metadate (date despre date) este plasat

intre tag-ul <html> si tag-ul <body>.
• Metadatele nu vor fi afisate in browser.
• Metadata definesc: titlul documentului html (site-ului), setul de

character utilizat, stilurile, link-urile, script-urile,etc.
• Tag-uri pentru metadate: <title>, <style>, <meta>, <link>, <script>,

si <base>.
27
55
Metadate in <head> : <title>
Elementul <title> :
• Defineste titlul afsat in browser
• Defineste titlul paginii cu care va fi salvat in Favourites
• Afiseaza titlul paginii in rezultatele furnizate de motoarele de cautare
56
Metadate in <head> : <style>
Elementul <style> este utilizat pentru a defini stilul unei singure pagini html
28
57
Metadate in <head> : <link>
Elementul <link> este utilizat pentru a furniza link-ul la fisierul extern css
(style sheets )
58
Metadate in <head> : <meta>
Elementul <meta> este utilizat pentru a specifica setul de caractere

utilizatdescrierea paginii web,cuvinte cheie (keywords), autorul paginii
web,etc.
29
59
60
30
61
“viewport”- permite scalarea informatiei vizibile pe diferite

display-uri ale dispozitivelor mobile
62
Responsive web design:

 Permite afisarea pe orice tip de display pe orice dispozitiv
(inclusiv dispozitive mobile): desktop, tablete, telefoane
 Utilizeaza doar HTML si CSS.
Desktop Tableta Telefon mobil
31
63
Metadate in <head> : <base>
Elementul <base> specifica URL-ul de baza pentru toate link-

urile din acea pagina web:
In HTML5 tag-urile <html>, <body>, <head> pot fi omise.
64
Meniuri in HTML5 : <menu>, <menuitem>

Deocamdata se pot vizualiza doar in brosere Firefox.
32
65
Meniuri in HTML5 : <nav>
66
TEST
Kahoot.it
33

CURS Master: Tehnologii Moderne de Proiectare A Aplicatiilor Multimedia

Î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 Master: Tehnologii Moderne de Proiectare A Aplicatiilor Multimedia

Încărcat de

Drepturi de autor:

Formate disponibile

Universitatea Tehnică din Cluj-Napoca

Facultatea de Inginerie Electrică

CAP.4. LIMBAJUL HTML5

4.2. Tag-uri (etichete) HTML 5

4.3. Inserarea imaginilor. Atribute.Stiluri de fonturi.

4.4. Utilizare culori. Inserare tabele, frame-uri

Limbaje specifice pentru realizarea de interfete grafice web :

 HTML (HyperText Markup Language)

Tutoriale HTML : http://www.w3schools.com/html/

4.2. Tag-uri (etichete) HTML 5

Doar ceea ce este in interiorul <body> </body> este vizibil in browser

Alte etichete/tag-uri HTML:

Alte etichete/tag-uri HTML:

Alte etichete/tag-uri HTML:

Structura documente HTML

Structura unui document HTML (pagina web) cuprinde:

Exista 4 perechi de elemente obligatorii intr-un document HTML:

Hiperlegaturile (Hyperlinks) HTML:

 legaturi pentru email (permit deschiderea clientului de

Link-uri colorate diferit in functie de actiune

Unde se afiseaza link-urile? Atribute target

Link tip ancora in document HTML: #

4.3. Inserarea imaginilor. Atribute.Stiluri de fonturi

 Daca poza se afla in folderul curent:<img src=”poza.jpg”>

Utilizand width si height

Imagini clickable (image maps) : <map> si <area>

Imagini ca background: <body backround>

Atribute - lista completa :

Alte atribute uzuale:

Headings: se definesc cu <h1> (cel mai important) pana la <h6> (cel

Paragraf nou: se poate defini si cu <br> (! fara </br>)

Text preformatat: se definesc cu <pre> </pre>

Afisare in browser: se ignora spatiile, tab-urile din text si linie noua

Eticheta <hr> - Horizontal rule: linie orizontala de separare a

4.4. Utilizare culori

Stiluri pentru culori HTML:

4.4. Utilizare culori

Stiluri pentru culori HTML:

Stiluri pentru culori in HTML:

Stiluri pentru Fonturi in HTML:

Culori de baza in HTML:

Alte culori si nuante

Culori de baza in HTML: utilizand numele culorii

Culori de baza in HTML: utilizand codul RGB

Stiluri pentru dimensiune fonturi in HTML:

Stiluri pentru alinierea textului in HTML:

Stiluri pentru formatarea textului in HTML:

Elemente de formatare HTML:

Elementele <del> si <mark> in HTML:

Citarea unui text in HTML: <blockquote cite=“”> , </blockquote>

Citarea (quote) unui text scurt in HTML: <q> </q>

Abrevieri in HTML: <abbr>

Adrese in HTML: <address> , </address>

Text inversat in HTML: <bdo dir=“rtl”> </bdo>

Comentarii in HTML:

Tabelele : utilizand <table>, sunt editate rand cu rand si

Liste nenumerotata -bullets: <ul> si <li>

Liste numerotata: <ol> si <li>

Atribute liste ordonate :

• Elementul <head> contine metadate (date despre date) este plasat

• Metadatele nu vor fi afisate in browser.

• Metadata definesc: titlul documentului html (site-ului), setul de

• Tag-uri pentru metadate: <title>, <style>, <meta>, <link>, <script>,