Tema 4

TEMA 4: IMAGINI, REFERINȚE, AUDIO,
VIDEO, IFRAME ÎN HTML.

STILIZAREA IMAGINILOR.
PSEUDOCLASE ÎN CSS
Natalia Pleşca, lect. univ

CONȚINUT
 Elemente HTML pentru implementarea referințelor

 Elemente HTML pentru implementarea imaginilor
 Iframe
 Audio și video în HTML
 Stilizarea imaginilor
 Clase și pseudo-clase în CSS – stilizarea referințelor
3 SINONIME... ASOCIERI
Pentru noțiunile
referințe în HTML
iframe în HTML
clase și pseudoclase în CSS
HIPER-TEXTE ŞI REFERINŢE
 Referinţele sunt prezente aproape în orice pagină web şi
permit efectuarea salturilor într-o pagină sau salturi la alte
pagini web
 Referinţa reprezintă marcajul locului de unde se poate efectua
trecerea la un alt document sau la o altă locaţie din
documentul curent
 În calitate de link/hyperlink poate servi un cuvânt, un grup de
cuvinte, o imagine etc.
 Un loc marcat mai este denumit ancorare
 Pentru a defini link-uri în HTML se utilizează elementul <a>, a
provenind de la anchor
FORMA GENERALĂ. ATRIBUTUL HREF
 Elementul <a> are atributul obligatoriu href, folosit pentru a

specifica calea/destinaţia link-lui
 Atributul href este suportat de toate browserele
 Pentru a insera un link elementar în codurile HTML se va scrie
 <a href="url">Textul link-ului</a>
 Valori posibile pentru “url”:
 O adresă URL absolută, care specifică o resursă externă, un alt site web:
href=“http://ro.wikipedia.org/wiki/Stefan_cel_Mare“
 O adresă URL relativă, care specifică un fişier de pe site-ul curent: href=
"muscata.jpg")
 Legătura cu un element din aceeaşi pagină, specificat prin atributul id (sau name):
href="#top"
 Alte protocoale: ftp://, mailto:, file:, etc..)
 <a href="mailto:cineva@mail.com">e-mail</a>
 Un script
ATRIBUTUL HREF
 Dacă nu este prezent atributul href, în interiorul elementului <a>,
nu va fi accesibil link-ul!!!
 Exemplu:
<a href="index.html">Pagina de start</a>
<a href="pages/info.html">Informații utile</a>
<a href="pages/contacte.html">Contacte</a>
ATRIBUTUL NAME, A TAG-ULUI
<A>
 In multe cazuri este nevoie să se creeze legături între secţiunile
aceluiaşi document (de exemplu, atunci când documentul este o
carte, un tutorial sau un curs se poate crea un cuprins pentru
fiecare capitol al documentului)
 Pentru crearea legăturilor interne se utilizează atributul name (sau
id), care stabileşte un cuvânt cheie ce identifică unic paragraful
ţintă
 Este suportat de majoritatea browsere-lor
 Forma generală: <a name="cuvant_cheie"> Paragraf_ţinta </a>
 Acest atribut nu mai este utilizat în HTML5, fiind înlocuit cu
atributul global id
 <a id="cuvant_cheie"> Paragraf_ţinta </a>
 Ancora se va scrie astfel:
 <a href=“#cuvant_cheie"> Text explicativ </a>
EXEMPLU
…
<body>
<hr id="sus" />
<hr />
<h1>Florile de cameră preferate</h1>
<p>Plantele ornamentale … încăperi.</p>
<a href="https://www.expresul.md/category/util/in-lumea-
florilor/" target="_blank">Citește mai mult...</a>
<hr />

<h1 class="round">Flori...</h1>
<p>Plantele….</p>
<a href="#sus">Inapoi la meniu</a>
</body>
</html>
ALTE ATRIBUTE ALE ELEMENTULUI
<A>
 Implicit, atunci când se face click pe un link resursa se deschide în
același tab
 Pentru a specifica unde să se deschidă resursa, accesată prin
intermediul link-ului, se va utiliza atributul target
 Acest atribut este suportat de majoritatea browsere-lor web
 Forma generală: <a target="_blank|_self|_parent|_top|framename">
Valoarea Descrierea
_blank Deschide documentul ancorat într-o nouă fereastră sau tab
_self Încarcă pagina in cadrul curent; este valoarea implicită
_parent Încarcă pagina în fereastra părinte

_top Încarcă pagina într-o fereastră nouă, deasupra altor ferestre de pe ecran
(pe tot ecranul)
PROIECTAREA STRUCTURII SITE-URILOR
Are la bază utilizarea corectă a link-urilor

Site bazat pe o pagina – se vor utiliza link-uri interne
documentului și se va naviga în interiorul aceluiași document. Este
recomandată și prezența unui meniu care să ușureze
navigabilitatea în site
Site-uri bazate pe mai multe pagini – se vor utiliza referințe la alte

pagini definite de diferite documente web. Este de asemenea
recomandată prezența unui meniu care să permită realizarea
legăturilor dintre paginile site-ului
Exemplu
INSERAREA IMAGINILOR ÎNTR-UN DOCUMENT HTML
 Inserarea imaginilor într-un document HTML se face cu ajutorul tag-ului

<img /> - element fără conţinut
 Elementul „img” este suportat de toate browsere-le (cele mai cunoscute)
 Atributele „src” şi „alt” sunt atributele recomandate (necesare!) a fi
prezente mereu la inserarea unei imagini. Ele sunt suportate de toate
browserele web şi de versiunea HTML5
 Atributul „src" - este prescurtarea pentru "source" (sursa) - se foloseşte
pentru a indica locaţia imaginii
 Atunci când imaginea este plasată într-un alt director/mapă decât
fişierul HTML este necesară specificarea căii de acces la imagine
 Atributul "alt" este folosit pentru a afişa un text în locul imaginii, în cazul
în care browser-ul dintr-un oarecare motiv nu poate afişa imaginea
 Forma generală: <img src="url" alt= "un_anumit_text" />
EXEMPLU INSERARE IMAGINE
<img src="images/room.jpg" alt="O imagine cu plante" />
Rezultat:
TIPURI DE IMAGINI ÎN HTML
 Într-un document HTML pot fi inserate imagini de tip .gif, .jpg

(.jpeg), .png, .svg (Scalable Vector Graphic,
creare imagini .svg - https://www.w3schools.com/graphics/svg_intro.asp )
 Exemplu
<img src="images/room.jpg" alt="O imagine cu plante" />
<img src="images/flowers.jpeg" alt="O imagine cu flori frumoase" />
<img src="images/flowers.png" alt="O imagine cu flori png" />
<img src="images/flowers.gif" alt="O imagine cu flori miscatoare" />
REZULTAT
ALTE ATRIBUTE DE BAZĂ ALE
ELEMENTULUI IMG
 La inserarea imaginilor se recomandă specificarea
dimensiunilor imaginii – înălţimea şi lăţimea
 În cazul în care nu se specifică dimensiunile imaginii pagina
va clipi în timpul încărcării
 Nu se recomandă inserarea multor imagini mari în paginile
web – pagina se va încărca foarte încet
 Pentru a stabili înălţimea şi lăţimea unei imagini sunt
folosite atributele ”height” şi ”width” – dimensiunile
sunt specificate în pixeli
 Aceste două atribute sunt suportate de toate
browsere-le web cunoscute, dar şi de HTML5
EXEMPLU ATRIBUTE „HEIGHT” ŞI
„WIDTH”
<img src="images/room.jpg" alt="O imagine cu plante" width="200" height="150" />
<img src="images/flowers.jpeg" alt="O imagine cu flori frumoase" width="200" height="150" />
<img src="images/flowers.png" alt="O imagine cu flori png" width="200" height="150" />
<img src="images/flowers.gif" alt="O imagine cu flori miscatoare" width="200" height="150" />
NE SPECIFICAREA LOCAȚIEI SAU
SPECIFICAREA INCORECTĂ
 Atunci când nu este specificată explicit locaţia unei imagini, browserul o
va căuta în aceeaşi mapă cu fişierul .html – adică se spune că folosim o
adresă relativă
Exemplu:
<img src="room.jpg" alt="O imagine frumoasa" height="300" width="400" />
În cazul în care browserul nu găseşte

imaginea specificată se va afişa o astfel
de iconiţă:
INSERAREA IMAGINILOR DE LA
DIVERSE LOCAŢII
 Atunci când imaginea este stocată într-un subdirector (mapă
inclusă) trebuie specificată calea până la imagine
Exemplu:
<img src="images/room.jpg" alt="O imagine cu plante" width="200" height="150" />
 Alteori este necesar accesul la o imagine stocată pe o altă pagină

web sau un server web cu imagini – se spune că folosim o adresă
absolută
Exemplu:
<a href="https://unsplash.com/photos/0u9x2g7LblQ" target="_blank">O floare
deosebită...</a>
REZULTAT
IMAGINE-REFERINŢĂ
<p>Apasând pe imaginea de mai jos veti accesa filmul</p>

<a href="https://www.youtube.com/watch?v=NLVM7lcoFGA" target="_blank">
<img src="images/flowers.png" width="200" height="150" />
</a>
ATRIBUTUL „USEMAP” AL ELEMENTULUI
IMG
 Este un atribut susţinut de HTML5 şi poate fi utilizat pentru a

specifica dacă anumite porţiuni ale imaginii pot fi activate pe
partea client (se poate face click pe ele)
 Sintaxa utilizării acestui atribut:
 <img usemap="#mapname" />
 Atunci când se utilizează acest atribut anumite porţiuni din
imagine devin active. Pentru aceasta se specifică anumite
coordonate din imagine
 Nu se recomandă folosirea atributului usemap, dacă imaginea
este un link (este inclusă în elementul „a”)
ELEMENTELE MAP ŞI AREA
 Pentru a defini porţiuni active într-o imagine se foloseşte,
suplimentar elementul HTML <map> - tag par
 Şi elementul <area /> - element fără conţinut, care se utilizează în
interiorul tag-ului map, pentru a specifica porţiunile clickabile
 Aceste elemente sunt suportate de browserele web
 Sintaxa:
<map name="valoare">
<area shape="valoare" coords="valoare" href="valoare" alt="Valoare" />
…
</map>
 Observaţie: Atributul shape, din tag-ul area poate avea mai multe valori: default,
rect, circle, poly. Tag-ul area are şi atributul target
EXEMPLU

<p>Exemplu de porțiuni active într-o imagine</p>
<img src="images/semafor.png" width="200" height="200" alt="Semafor" usemap="#semafor" />
<map name="semafor">
<area shape="circle" coords="102,146,15" alt="Culoarea rosie" href="pages/rosu.html" />
<area shape="circle" coords="102,96,15" alt="Culoarea galbena" href="pages/galben.html" />
<area shape="circle" coords="102,46,15" alt="Culoarea verde" href="pages/verde.html" />
</map>
CONCLUZII IMAGINI
 Chiar dacă atributele width, height sunt suportate de
versiunea 5 şi de browsere – recomandarea consorţiului W3
este de a utiliza stiluri
 Aceeaşi recomandare este şi pentru restul atributelor, care nu
sunt susţinute – utilizarea stilurilor
Exemplu:
 style="width:50px; height:50px; border:0"
ELEMENTUL „IFRAME”
 Acest element specifică un frame în regim „inline”

 Un cadru inline este utilizat pentru a încorpora un alt document în
documentul HTML curent
 Este suportat de browsere
 În versiunea HTML5 au apărut atribute noi
 Exemplu:
<iframe src="../gogosi/index.html" width="100%" height="300"></iframe>
ATRIBUTELE TAG-ULUI IFRAME
 Unele, cele mai uzuale:
Atributul Valoarea Descrierea

frameborder 1 Specifică dacă trebuie să fie prezentă bordura la
0 iframe. Nu mai este suportat de HTML5
height pixels Specifică înălţimea elementului <iframe>
name text Specifică numele elementului
scrolling yes Specifică dacă trebuie să se arate bara de defilare
no în <iframe>. Nu este suportat de HTML5
auto
src URL Specifică adresa documentului care trebuie să fie
încărcat în <iframe>
width pixels Specifică lăţimea elementului
EXEMPLU INSERARE HARTĂ PE
SITE
 Se va folosi elementul „iframe”
 Harta se va lua de pe maps.google.com
1. Se alege locaţia care trebuie prezentată pe hartă
EXEMPLU INSERARE HARTA PE SITE
2. Se accesează opţiunile google.maps

EXEMPLU INSERARE HARTA PE
SITE
 3. Se selecteaza opțiunea “Embed map”
EXEMPLU INSERARE HARTA PE
SITE
3. Se va genera codul necesar, pe care il puteţi copia in
documentul dvoastră web
CODURILE HTML PENTRU
INSERARE HARTĂ LOCAŢIE USM
<!DOCTYPE html>
<html>
<head><title>Inserarea unui link in iframe</title></head>
<body>
<h3>Cum ne gasiti...</h3>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!
1m3!1d2720.0848653122175!2d28.822302515610236!
3d47.018939179150074!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!
3m3!1m2!1s0x40c97c2d03e2c6b1%3A0xd8e8b74ac8c3ef7b!
2sMoldova+State+University!5e0!3m2!1sen!2s!4v1487440044293"
width="600" height="450" frameborder="0" style="border:0"
allowfullscreen></iframe>
</body>
</html>
REZULTAT – O HARTĂ INTERACTIVĂ
PE SITE-UL NOSTRU
Observație: Cu ajutorul iframe pot fi incluse, pentru viziualizare diferite clipuri

sau filmulețe de pe youtube.com
EXEMPLU PRELUARE CURS
VALUTAR ÎNTR-UN IFRAME
<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<body>
<iframe style="width: 200px; height: 95px;" frameborder="0"
marginwidth="0" marginheight="0" scrolling="no"
src="https://www.cursbnr.ro/insert/cursvalutar.php?
w=200&b=f7f7f7&bl=dcdcdc&ttc=0a6eab&tc=000000&diff=1&ron=1&cb=1">
</iframe>
</body>
</html>
INSERAREA SUNETELOR
 Pentru a insera sunetele, secvenţe audio, muzică într-o pagină web se
foloseşte elementul HTML „audio”. A apărut în HTML5
 La acest moment sunt suportate 3 formate de sunete de tag-ul „audio”: MP3,
Wav, Ogg
 Elementul este suportat de toate browserele
Browser MP3 Wav Ogg

Internet Explorer + - -
Chrome + + +
Firefox + + +
Safari + + -
Opera + + +
SINTAXA ŞI ATRIBUTE
 Sintaxa:
<audio> Conţinut </audio> - este un element cu taguri pare
 Atribute:
Atribut Valoare Descriere
autoplay autoplay Specifică faptul că redarea va începe imediat după încărcare
controls controls Specifică dacă vor fi afişate controalele specifice playerului
(precum play/pause, alte butoane)
loop loop Specifică faptul că înregistrarea va începe din nou, de fiecare
dată când se termină
muted muted Specifică lipsa sunetului
preload auto Specifică cum crede autorul că trebuie să fie încărcată secvenţa
metadata
none
src URL Specifică URL-ul până la fişierul audio
ELEMENTUL „SOURCE”
 Elementul <source> este folosit pentru a specifica mai multe resurse

media pentru un element media, precum <video> sau <audio>
 Elementul <source> permite specificarea fișierelor video sau audio
alternative, pe care browser-ul le poate alege, în funcție de tipul pe
care acesta le suportă
 Este suportat de toate browserele web. Nu are conţinut
 A apărut în HTML5
Atribut Valoare Descriere
media media_query Specifică tipul resursei media. Nu este
suportat de nici un browser web
src URL Specifică URL-ul până la fişierul media
type media_type Specifică media-tipul resursei

ATRIBUTUL „TYPE” A ELEMENTULUI
„SOURCE”
 Atributul type, poate lua mai multe valori
 Pentru secvenţele audio:
 audio/ogg
 audio/mpeg
 Iar pentru secvenţele video:
 video/ogg
 video/mp4
 video/webm
Detalii vedeţi: http://www.iana.org/assignments/media-types/media-

types.xhtml
Convertor on-line: http://audio.online-convert.com/
http://video.online-convert.com/
EXEMPLU
<!DOCTYPE html>
<html>
<body>
<p>Folositi controalele pentru a asculta melodia</p>
<audio controls>
<source src="leto.ogg" type="audio/ogg" />
<source src="leto.mp3" type="audio/mpeg " /
<p>Browserul dvoastra nu sustine formatul dat de sunete.</p>
</audio>
</body>
</html>
Exemplu
INSERAREA SECVENŢELOR
VIDEO
 Secvenţele video se inserează în pagina web cu ajutorul elementului
<video>, susţinut de browserele web
 Se foloseşte şi elementul „source”
 La moment sunt suportate 3 formate de video: MP4, WebM şi Ogg
Browser MP4 WebM Ogg

Internet Explorer + - -
Chrome + + +
Firefox + + +
Safari + - -
Opera + + +
incepand cu Opera 25
ATRIBUTELE ELEMENTULUI „VIDEO”
Atributil Valoarea Descrierea

autoplay autoplay Specifică faptul că secvenţa se va lansa automat la încărcare
controls controls Specifică dacă trebuie să fie afişate controalele (precum
play/pause sau alte butoane).
height pixels Setează înălţimea ferestrei în care va apărea secvenţa video
loop loop Specifică faptul că video va începe din nou, de fiecare dată
când se termină
muted muted Specifică faptul că redarea sunetului va fi oprită
poster URL Specifică o imagine pentru a fi afișată în timp ce videoclipul este

descărcat sau până când utilizatorul va apasă butonul de redare
preload auto Specifică cum autorul crede că ar trebui video să se încărce în
metadata pagină
none
src URL Specifică URL-ul fişierului video
width pixels Setează lăţimea playerului video
EXEMPLU
<p>Folositi controalele pentru a vedea clipul</p>
<video width="400" height="300" controls autoplay>
<source src="clip.ogv" type="video/ogg" />
<source src="clip.mp4" type="video/mp4" />
<p>Browserul dvoastra nu sustine formatul dat de video.</p>
</video>
Rezultat
STILIZAREA IMAGINILOR
 Adăugarea bordurii, stabilirea înălțimii, lățimii imaginii se face cu
ajutorul proprietăților CSS:
 border
 width și height
 De asemenea imaginilor le pot fi adăugate câmpuri interioare și
exterioare
 padding și margin
 Sau umbre cu propritatea box-shadow
 Exemplu:
img{
width: 17%;
height: 300px;
margin: 10px;
border: 3px solid rgb(214, 197, 200);
box-shadow: 3px 3px 7px rgb(90, 82, 82); }
STILIZAREA IMAGINILOR. II
<img src="images/vertical_room1.jpeg" alt="O imagine cu flori" class="galerie" />
REZULTAT
ATRIBUTUL GLOBAL “ID” ÎN HTML
 În HTML5 un atribut global poate fi utilizat în orice element HTML
 Exemple de atribute globale: style, id, class, title etc.
 Atributul id specifică un identificator unic pentru un element HTML
(valoarea trebuie să fie unică în cadrul documentului HTML)
 Atributul id este unul dintre cele mai utilizate atribute, atunci când
este necesară manipularea în JavaScript, cu un element, cu id-ul
specificat. Dar poate fi utilizat și la definirea stilurilor
 Specialiştii din domeniu nu recomandă folosirea exagerată a
selectorilor de tip identificatori la definirea stilurilor!!!
 Este suportat de toate browserele
 Forma generală: <element id="valoare_identificator">,
unde valoarea ID-ului trebuie să conţină cel puţin un caracter, nu se admit
spaţii, nu începe cu o cifră şi se face diferenţă între majuscule şi literele
mici
SELECTORI DE TIP „ID”
 Selectorul id folosește atributul id al unui element HTML, pentru a găsi
elementul specificat
 Pentru a găsi elementul cu id-ul specificat, în stiluri se definește selectorul
- se scrie caracterul #(diez), urmat de valoarea id-ului elementului, utilizat
la definirea stilului
 Exemplu:
Stilul de mai jos va fi aplicat elementului HTML cu id="foto"
#foto{
padding: 5px;
border: 5px double rgb(148, 75, 88);
box-shadow: 5px 3px 7px rgb(136, 164, 201);
}
Se va aplica acestui element:
<a href="https://www.youtube.com/watch?v=NLVM7lcoFGA" target="_blank">
<img src="images/flowers.png" width="200" height="150" id="foto" />
</a>
REZULTAT EXEMPLU
SELECTORUL DE TIP „CLASS”
 Selectorul class folosește atributul global HTML - class
 Selectorul „class” găsește elemente de tip clasă specificată
 Observație: la definirea stilurilor se recomandă folosirea claselor
 Pentru a găsi elementele definite de o anumită clasă, se scrie
caracterul . (punct), urmat de numele clasei – la definirea stilului
 Exemplu:
<img src="images/vertical_room1.jpeg" alt="O imagine cu flori" class="foto" />
Stilul:
.foto{
padding: 5px; width: 17%; height: 300px; border: 5px double rgb(236, 53, 166);
box-shadow: 7px 5px 7px rgb(173, 79, 235); }
REZULTAT EXEMPLU
DEFINIREA A DOUĂ CLASE
PENTRU UN ELEMENT HTML
 Definirea a doua clase pentru un element HTML se face prin folosirea
separatorului spaţiu, la specificarea numelui
Exemplu:
Pentru secvenţa HTML:
<img src="images/vertical_room2.jpeg" alt="O imagine cu flori" class="galerie round" />
<img src="images/vertical_room4.jpeg" alt="O imagine cu flori" class="galerie round" />
Se definesc stilurile:
.galerie { width: 17%; height: 300px; margin: 10px;
box-shadow: 3px 3px 7px rgb(90, 82, 82);
}
.round {
border-radius: 10%;
}
REZULTAT
Obs: În mod analogic pot fi aplicate mai multe clase cu stiluri, unui element HTML
PSEUDO-CLASE CSS
 O pseudo-clasă este utilizată pentru a defini o stare specială a

unui anumit element
 Se foloseşte pentru:
 Definirea stilurilor unui element atunci când utilizatorul plasează
mouse-ul deasupra lui
 Definirea diferită a stilurilor pentru link-urile vizitate sau nevizitate
 Forma generală:
selector:pseudo-class
{
proprietate:valoare;...
}
EXEMPLU PSEUDO-CLASĂ
 Afişarea diferită a link-urilor

 Exemplu:
Voi scrie stilul:
/* link nevizitat */
a:link { color: #145569; padding: 10px; font-weight: bold; text-decoration: none;
font-size: 1.2em; }
/* link vizitat */
a:visited { color: #255541;}
/* mouse-ul deasupra link-ului */
a:hover {
color: #f9f5fc; padding: 10px; background-color: #145569;
}
/* link selectat */
a:active { color: #f7bd41;}
ORDINEA DEFINIRII
 Atunci când se definesc toate evenimentele, prin pseudo-clasele
pentru referinţe, uneori contează ordinea definirii:
a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }
 În unele cazuri la schimbarea ordinii definirii stilurilor unele
proprietăţi pot să nu se aplice corect
PSEUDO-CLASA „:NTH-CHILD”
 Pseudo-clasa nth-child permite selectarea elementelor conform
numărului lor de ordine
 Sintaxa: selector: nth-child(expresie),
unde expresie poate fi un număr sau chiar o formulă
 Exemplu:
 li:nth-child(2) { ... }
 li:nth-child(4) { ... }
 li:nth-child(2n) { ... }
 Primul selector va selecta al doilea element, cel de-al doilea – pe al
patrulea, iar ultimul exemplu va selecta toate elementele din poziţiile
pare
EXEMPLU, HTML
<table>
<tr><td>03.03.20, ora 11:00</
td><td>Va avea loc un eveniment pentru copii. Vor fi prezenti clovni.</td></tr>
<tr><td>03.03.20, ora 22:00</td><td>La acest eveniment sunt invitati maturii :)</td></tr>
<tr><td>05.03.20, ora 11:00</
td><td>Eveniment organizat pentru copii. Vor fi prezente animale de companie.</td></tr>
<tr><td>05.03.20, ora 21:00</
td><td>La acest eveniment sunt asteptate persoanele cu varsta cuprinsa intre 22 si 32 ani.</td></tr>
<tr><td>07.03.20, ora 11:00</
td><td>Un eveniment deosebit organizat pentru cei mai mici copii, cu varsta cuprinsa intre 3 si 5 ani.</
td></tr>
<tr><td>07.03.20, ora 21:00</
td><td>La acest eveniment sunt asteptate persoane de varsta a treia - va asteptam cu drag.</td></tr>
<tr><td>09.03.20, ora 11:00</
td><td>Va avea loc un eveniment pentru copii. Vor fi prezenti mascati.</td></tr>
<tr><td>09.03.20, ora 21:00</
td><td>La acest eveniment sunt asteptate persoanele cu varsta cuprinsa intre 25 si 44 ani.</td></tr>
</table>
STILURILE CSS, REZULTAT
table {
margin: 10px auto;
border: 1px solid cyan; }
tr:nth-child(2n-1) {
background-color: #10546b;
color: #e6f9ff; }
tr:nth-child(2n) {
background-color: #c0dee7;
color: #558494;}
td {
padding:10px;
}
table, tr, td {
border-collapse: collapse;
}
SARCINĂ
 Adăugați stilurile care la trecerea cu cursorul deasupra (:hover)

unei linii cu culoare de fundal întunecată, din exemplul
anterior, aceasta sa devina cu o nuanță mai deschisă
(#00394d), iar la trecerea cu cursorul deasupra liniei de culoare
deschisă, culoarea de fundal sa devina cu o nuanță mai
întunecată (#ccf2ff)
ALTE PSEUDO-CLASE
 Lista altor pseudo-clase vezi:

http://www.w3schools.com/css/css_pseudo_elements.asp
VEDEȚI ȘI PSEUDO-ELEMENTELE
ÎN CSS
 Cele mai uzuale:
 ::before
 ::after
 ::selection
Link de acces
https://www.w3schools.com/css/css_pseudo_elements.asp
!!!
 3 noţiuni noi învăţate azi

 2 întrebări/neclarităţi care au apărut
 1 sugestie pentru tema următoare

Tema 4

Î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

Tema 4

Încărcat de

Drepturi de autor:

Formate disponibile

TEMA 4: IMAGINI, REFERINȚE, AUDIO,

VIDEO, IFRAME ÎN HTML.

Natalia Pleşca, lect. univ

 Elemente HTML pentru implementarea referințelor

 Elementul <a> are atributul obligatoriu href, folosit pentru a

_parent Încarcă pagina în fereastra părinte

Are la bază utilizarea corectă a link-urilor

Site-uri bazate pe mai multe pagini – se vor utiliza referințe la alte

 Inserarea imaginilor într-un document HTML se face cu ajutorul tag-ului

 Într-un document HTML pot fi inserate imagini de tip .gif, .jpg

În cazul în care browserul nu găseşte

 Alteori este necesar accesul la o imagine stocată pe o altă pagină

<p>Apasând pe imaginea de mai jos veti accesa filmul</p>

 Este un atribut susţinut de HTML5 şi poate fi utilizat pentru a

 Acest element specifică un frame în regim „inline”

 Unele, cele mai uzuale:

Atributul Valoarea Descrierea

2. Se accesează opţiunile google.maps

Observație: Cu ajutorul iframe pot fi incluse, pentru viziualizare diferite clipuri

Browser MP3 Wav Ogg

 Elementul <source> este folosit pentru a specifica mai multe resurse

type media_type Specifică media-tipul resursei

Detalii vedeţi: http://www.iana.org/assignments/media-types/media-

Browser MP4 WebM Ogg

Atributil Valoarea Descrierea

poster URL Specifică o imagine pentru a fi afișată în timp ce videoclipul este

 O pseudo-clasă este utilizată pentru a defini o stare specială a

 Afişarea diferită a link-urilor

 Adăugați stilurile care la trecerea cu cursorul deasupra (:hover)

 Lista altor pseudo-clase vezi:

 3 noţiuni noi învăţate azi

S-ar putea să vă placă și