slike - university of nišes.elfak.ni.ac.rs/iw/materijal/vezbe/html-2.pdf · dimenzionisanje slike...
TRANSCRIPT
![Page 1: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/1.jpg)
Slike
![Page 2: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/2.jpg)
Umetanje slika• <img ...> - tag za umetanje slike u HTML dokument• Atribut src definiše sliku:
<img src=”slike/bulevar.jpg”>Ime fajla koji sadrži slikuPutanja do direktorijuma
(foldera) koji sadrži slike -relativna putanja u odnosu na direktorijum gde je smešten
HTML dokument
<html><body><img src="slike/bulevar.jpg"></body></html>
![Page 3: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/3.jpg)
Dimenzionisanje slike
<img src=”slike/bulevar.jpg” width=“200” height=“100”>
• Atributi width i height definišu dimenzije slike (dužinu i širinu) izražene u pikselima:
<html><body><img src="slike/bulevar.jpg"><img src="slike/bulevar.jpg" width="200" height="100"></body></html>
Slika prikazana u svojim originalnim dimenzijma:
400x300
Ista slika prikazana u dimenzijma: 200x100
200
100
![Page 4: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/4.jpg)
Dimenzionisanje slike• Nije dobra praksa koristiti atribute width i height
za redimenzionisanje slika koje su u originalu previše velike ili male u odnosu na željenu veličinu prikaza.
• Smanjivanje velikih slika je neracionalno jer se troši dosta vremena na njihovo učitavanje
• Mala slika koja se uvećava obično postaje nejasna i izobličena.
• Bolje je praksa prilagoditi veličinu slike u editoru za slike (Adobe Photoshop i sl.), a onda tu novu sliku umetnuti u HTML dokument.
![Page 5: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/5.jpg)
Uokviravanje slika• Atributi border definiše debljinu okvira slike:
<img src=”slike/bulevar.jpg” width=“200” height=“150”border = “5”>
<html><body><img src="slike/bulevar.jpg" width="200" height="150" border="5"></body></html>
![Page 6: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/6.jpg)
Alternativni tekst• Atribut alt definiše tekst koji će biti prikazan umesto slike
ukoliko slika nije dostupna na serveru ili ukoliko se iz bilo kog razloga ne može prikazati u pretraživaču
<html><body><img src="slike/tvrdjava.jpg" alt="Ovde trebalo da je prikazana slika Niske tvrdjave"></body></html>
Bez alt
![Page 7: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/7.jpg)
Prateći tekst<html><body><img src="slike/bulevar.jpg"><p><font size="4"><b>Bulevar Nemanjica</b></font></p></body></html>
![Page 8: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/8.jpg)
Poravnanje slike i okolnog teksta<html><body><img align=“..." src="slike/bulevar.jpg"><font size="4"><b>Bulevar is located in the center of Mediana municipality, bordered to the south by the large street of the same name, to the north by Nisava river and to the east by neighborhood of Trosarina. Traditionally only the first row of apartment buildings south of Bulevar Nemanjica street was considered the part of the neighborhood, the area of small individual family houses comprising unnamed area between Bulevar Nemanjica and other neighborhoods situated on Bulevar Djindjica.</b></font></body></html>
top, middle ili bottom
top
middle
botton
![Page 9: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/9.jpg)
Poravnanje slike i okolnog teksta<html><body><img align=“..." src="slike/bulevar.jpg"><font size="4"><b>Bulevar is located in the center of Mediana municipality, bordered to the south by the large street of the same name, to the north by Nisava river and to the east by neighborhood of Trosarina. Traditionally only the first row of apartment buildings south of Bulevar Nemanjica street was considered the part of the neighborhood, the area of small individual family houses comprising unnamed area between Bulevar Nemanjica and other neighborhoods situated on Bulevar Djindjica.</b></font></body></html>
left, right
left
right
![Page 10: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/10.jpg)
Poravnanje slike i okolnog teksta<html><body><img align="left" src="slike/bulevar.jpg" hspace="50" vspace="50"><font size="4"><b>Bulevar is located in the center of Mediana municipality, bordered to the south by the large street of the same name, to the north by Nisava river and to the east by neighborhood of Trosarina. Traditionally only the first row of apartment buildings south of Bulevar Nemanjica street was considered the part of the neighborhood, the area of small individual family houses comprising unnamed area between Bulevar Nemanjica and other neighborhoods situated on Bulevar Djindjica.</b></font></body></html>
hspace, vspace - definiše veličinu praznog prostora oko
slike
![Page 11: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/11.jpg)
Hiperveze
![Page 12: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/12.jpg)
Hiperveze• Za definisanje hiperveza koristi se tag: <a> … </a>.• Atribut href definiše URL, a tekst između početnog
izavršnog taga tekst hiperveze:<a> href=“…url…”> tekst hiperveze </a>
<html><body><a href="http://es.elfak.ni.ac.yu/iw/iw.html"> Internet i Web tehnologije </a></body></html>
otvara
(u istom prozoru pretraživača)
![Page 13: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/13.jpg)
Otvaranje stranice u novom prozoru
• Sa atributom target u tagu <a> postavljenim na vrednost “_blank”, stranica se otvara u novom prozoru pretraživača
<html><body><a href="http://es.elfak.ni.ac.yu/iw/iw.html" target="_blank"> Internet i Web tehnologije </a></body></html>
otvara
(u istom prozoru pretraživača)
![Page 14: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/14.jpg)
Definisanje putanje• Ako se referencirana stranica nalazi na istom serveru, navodi se
samo relativna putanja do direktorijuma strance.
<html><body><a href="bulevar.html"> Bulevar Nemanjica </a></body></html>
hiperveza.html
otvara
bulevar.html je fajl smešten u istom direktorijumu gde i fajl hiperveza.html.
Nema http://
![Page 15: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/15.jpg)
Definisanje putanje
<a href = "/ulice/bulevar.html"> Bulevar Nemanjica </a>
<a href = "../spisak_gradova.html"> Gradovi Srbije </a>
<a href = "../beograd/spisak_ulica.html"> Ulice Beograda </a>
Sledeće hiperveze su deo dokumenta koji je smešten u direktorijumu ´Nis´
![Page 16: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/16.jpg)
Definisanje putanje• Za definisanje putanja na udaljenim Web
servrima koriste se apsolutne putanje:
<a href = "http://es.elfak.ni.ac.yu/iw/iw.html">
URL Web servera
Direktorijum iw se nalazi odmah
ispod vršnog (root) direktorijuma Web
servera
Fajl iw.html je smešten u
direktorijumu iw
URL stranice iw.html
![Page 17: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/17.jpg)
Slika kao hiperveza<html><body><a href="bulevar.html"> Bulevar Nemanjica </a><a href="bulevar.html"> <img src = "bulevar.jpg"> </a></body></html>
Otvara se klikom bilo na tekst bilo na sliku
Slike sa hipervezom su uokvirene
![Page 18: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/18.jpg)
Stil hiperveze• Za definisanje boje teksta hiperveze koriste se
sledeći atributi taga <body>:link - boja hiperveze koja još uvek nije posećenavlink - boja posećene hipervezealink - boja trenutno aktivne hiperveze
<html><body link="#0080A0" vlink="#999900" alink="#40FF00"><a href="bulevar.html"> Bulevar Nemanjica </a></body></html>
Nikada ranije posećena Posećena Upravo ˝kliknuta˝
Ovo podešavanje važi za sve hiperveze u
dokumentu
![Page 19: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/19.jpg)
mailto link• Podrška za slanje e-mejla:
<a href=”mailto:[email protected]”>
E-mejl adresa na koju se šalje poruka
<a href=”mailto: [email protected]?subject=Poruka sa IWT sajta”>
˝Subject˝ poruke
<html><body>Za sva pitanja u vezi predmeta mozete me kontaktirati preko mejla<a href="mailto: [email protected]?subject=Poruka sa IWT sajta">[email protected]</a></body></html>
![Page 20: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/20.jpg)
mailto linkKlik na e-mail adresu
otvara program za slanje mejlova
![Page 21: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/21.jpg)
mailto link<html><body>Za sva pitanja u vezi predmeta mozete me kontaktirati preko mejla<a href="mailto: [email protected]?subject=Poruka sa IWT sajta&body=Ova poruka je poslata sa sajta predmeta Internet i Web tehnologije">[email protected]</a></body></html>
Definiše sadržaj poruke
![Page 22: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/22.jpg)
Imenovane hipervezeAnchor - “sidrište”
• Mogućnost referenciranja tačke unutar dokumenta.• Atribut name taga <a> definiše imenovano odredište (sekciju)
dokumenta:
<a name="#sekcija1">. . . tekst .... </a>
Ime imenovane sekcije dokumenta
Imenovana sekcija
<a href="#sekcija1"> tekst hiperveze</a>
• Hiperveza na imenovanu sekciju unutar istog dokumenta:
• Hiperveza na imenovanu sekciju unutar nekog drugog dokumenta:
<a href=“http://es.elfak.ni.ac.yu/iw/iw.html#sekcija1"> tekst hiperveze</a>
![Page 23: Slike - University of Nišes.elfak.ni.ac.rs/iw/Materijal/Vezbe/HTML-2.pdf · Dimenzionisanje slike • Nije dobra praksa koristiti atribute width i height za redimenzionisanje slika](https://reader031.vdocuments.net/reader031/viewer/2022022422/5a9bc81b7f8b9a18628e4a26/html5/thumbnails/23.jpg)
Imenovane hiperveze
<html><body><h2>TCP/IP</h2><ol><li><a href="#sekcija1"> Internet sloj</a></li><li><a href="#sekcija2"> Transportni sloj</a></li><li><a href="#sekcija3"> Aplikacioni sloj</a></li></ol><hr><a name="#sekcija1"><h3>Internet sloj</h3></a><p>Sve o Internet sloju . . .</p><hr><a name="#sekcija2"><h3>Transportni sloj</h3></a><p>Sve o transportnom sloju . . . </p><hr><a name="#sekcija3"><h3>Aplikacioni sloj</h3></a><p>Sve o aplikacionom sloju . . .</p></body></html>
Hiperveze na imenovane sekcije u dokumentu
Imenovane sekcije dokumenta