Post on 06-Jul-2018
8/17/2019 Curs4_Imagini_si_Link_uri_harti_de_imagini.ppt
1/14
Imagini si Link-uriHărţi de imagini
8/17/2019 Curs4_Imagini_si_Link_uri_harti_de_imagini.ppt
2/14
Inserarea imaginilor în HTML
Eticheta pentru inserarea imaginilor într-un fişier HTML este. ceasta este o etichetă nepereche.
tri!utele lui "img# sunt$ %rc&locaţie şi nume fişier imagine 'este atribut obligatoriu( )idth&*al 'lăţime + nr. întregi po,iti*e sau *al. procentuale( Height&*al 'înălţime - nr. întregi po,iti*e sau *al. procentuale( *space&*al 'spaţiu la pe *erticală( Hspace&*al 'spaţiu în stnga şi dreapta imaginii( lt&te/t alternati*0 !order&*al 'chenar + implicit are *aloarea 1( align&*al 'left2 right2 top2 !ottom2 middle(
Modificarea doar unui atri!ut de dimensionare ')idth sau height(*a modifica imaginea proporţional. 3acă modificarea se face ptam!ele atri!ute2 apare riscul disproporţionării.
8/17/2019 Curs4_Imagini_si_Link_uri_harti_de_imagini.ppt
3/14
drese a!solute pentru %45
tri!utul src poate lua 6 tipuri de *alori$ drese - a!solute
- relati*e 'calea este descrisă relati* faţă dedirectorul curent în care se află fişierul HTML(
E/emple$ !solută$ src&http$77))).8ahoo.com7img7pic.gif 0
sausrc&5$9pictures9image.:pg0
4elati*ăsrc&img7pic.gif0src&..7..7img7pic.gif0
unde$ ..7 este director părinte 7 este director rădăcină
http://www.yahoo.com/img/pic.gifhttp://www.yahoo.com/img/pic.gifhttp://www.yahoo.com/img/pic.gifhttp://www.yahoo.com/img/pic.gif
8/17/2019 Curs4_Imagini_si_Link_uri_harti_de_imagini.ppt
4/14
tri!utul 5LE4 al etichetei "!r#
;entru a elimina te/tul din dreapta sau din stnga unei imaginialiniate pe ori,ontală se foloseşte trecerea la rnd nou "!r# dupăimagine2 cu atri!utul clear .
8/17/2019 Curs4_Imagini_si_Link_uri_harti_de_imagini.ppt
5/14
linierea imagininilor
;e ori,ontală 'align&left2right2center(;e *erticală 'top2middle2!ottom( linierea pe ori,ontală2 determină fi/area
imaginii în partea indicată de *aloareaatri!utului align. ;ermite alăturarea !locului dete/t2 sau alte o!iecte în partea opusă a
imaginii. linierea pe *erticală se face în raport cuelementele aflate pe acelaşi rnd cu imaginea.
8/17/2019 Curs4_Imagini_si_Link_uri_harti_de_imagini.ppt
6/14
>tili,area imaginilor în listeleneordonate;entru a particulari,a sim!olul grafic din
faţa unui element al listei neordonate seprocedea,ă în felul următor$"ul#
"img src&pic?.:pg0#Element ? lista"!r#
"img src&pic6.:pg0#Element 6 lista"!r#
@"7ul#
8/17/2019 Curs4_Imagini_si_Link_uri_harti_de_imagini.ppt
7/14
Link-uri
Aac posi!ilă na*igarea cu uşurinţă întreresursele Internet.
H8perlegăturile sunt folosite cu mai multescopuri$ ;entru conectarea paginilor HTML care fac parte
dintr-un site sau cu alte materiale din alte site-uri)e!
Bnglo!area unor fişiere de alt tip dect HTML într-un
site Cferirea informaţiilor adiţionale =a*igarea spre di*erse secţiuni în acelaşi fişier
HTML
8/17/2019 Curs4_Imagini_si_Link_uri_harti_de_imagini.ppt
8/14
%inta/a
Eticheta folosită pentru crearea link-urilor este …
tri!utele acesteia sunt$ href&legătură
name&nume ancoră target&locatie pt afişare 'numele ferestrei în care se *a încărca pagina( *alori$ Dself
D!lank Dparent
Dtop ;ot fi con*ertite în link-uri att linii de te/t ct şi
imagini. HREF poate primi ca *aloare fie o adresa a!solută2 fie
una relati*ă.
8/17/2019 Curs4_Imagini_si_Link_uri_harti_de_imagini.ppt
9/14
5ele situaţii în care se folosescLink-urile
?. =a*igarea între 6 fişiere HTML presupuneurmătoarea sinta/ă$"a href&fisierDdestinatie.html#te/t link"7a#
6. =a*igarea în cadrul aceleiaşi pagini presupune 6
etape$a. 3enumirea ,onei în care *rem să ne plase,e link-ul"a name&nume ,onă 'ancoră(0#secţiune document"7a#
!. 5onstruirea link-ului spre acea ,onă'ancoră($"a href&Fnume ,onă0#te/t link "7a#
. Link spre fişiere de tip non HTML$"a href&numefisier.e/tensie#te/t link"7a#
8/17/2019 Curs4_Imagini_si_Link_uri_harti_de_imagini.ppt
10/14
Legături la adrese de e-mail
3etermină deschiderea unei aplicaţiiclient e-mail 'e/. M.Cutlook( carepermite utilia,atorului să compunamesa:ul către adresa sta!ilită în link.
E/$
"a href&mailto$popescuGgmail.com0#%crie-mi
"7a#
mailto:popescu@gmail.commailto:popescu@gmail.com
8/17/2019 Curs4_Imagini_si_Link_uri_harti_de_imagini.ppt
11/14
Harţi de imagini
Hărţile de imagini permit declararea unor,one din imagine ca şi legături către altepagini )e!.
C imagine ce conţine mai multe link-uri.Includerea unor hărţi de imagini într-un
fişier HTML presupune 6 paşi$3efinirea hărţii de imagini plicarea hărţii asupra unei imagini
8/17/2019 Curs4_Imagini_si_Link_uri_harti_de_imagini.ppt
12/14
3efinirea hărţii de imagini
Tag-urile de definire a hărţilor de imagini este$..
Eticheta de deschidere map conţine o!ligatoriuatri!utul name&numeDhartă.
ona sau ,onele conţinute de imagine sunt introduseprin eticheta ..
tri!utele etichetei "area# sunt$ Shape- cu *alorile rect2 circ2 pol8
coords&lista de coordonate Href &legatura spre pagina aferentă ,onei alt &te/t alternati*0 target &fereastra în care se *a afişa conţinutul linkului0
8/17/2019 Curs4_Imagini_si_Link_uri_harti_de_imagini.ppt
13/14
3efinirea coordonatelor - coords
;entru *aloarea rect a atri!utului shape 5oords&/?28?2/62860 2 unde/?28? + coordonatele colţului stnga sus/6286 + coordonatele colţului dreapta :os
;entru *aloareacirc
a luishape
coords&/?28?2ra,a0 2 unde/?28? + coordonatele centrului cerculuira,a + lungimea ra,ei cercului
;entru *aloarea poly a atri!utului shape coords&/?28?2/62862/282...2/n28n0 2 unde
/?28? + coordonatele primul colţ0 al poligonului.../n28n + coordonatele ultimului colţ0 al poligonului
8/17/2019 Curs4_Imagini_si_Link_uri_harti_de_imagini.ppt
14/14
plicarea hărţii asupra unei imagini
;entru a lega o hartă de imagini definităde o anumită imagine2 în cadrul etichetei"img# se include atri!utulusemap=#nume_hart