HTML3

Slike
Umetanje slika
• <img ...> - tag za umetanje slike u HTML dokument
• Atribut src definiše sliku:
<img src=”slike/bulevar.jpg”>
Putanja do direktorijuma Ime fajla koji sadrži sliku
(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>
Dimenzionisanje slike
• Atributi width i height definišu dimenzije slike (dužinu
i širinu) izražene u pikselima:
<img src=”slike/bulevar.jpg” width=“200” height=“100”>
<html>
<body>
<img src="slike/bulevar.jpg" width="200" height="100">
</body>
</html>
Slika prikazana u svojim

originalnim dimenzijma:
400x300 200
Ista slika prikazana u 100

dimenzijma: 200x100
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.
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>
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 tvrdjave">
</body>
</html>
Bez
alt
Prateći tekst
<html>
<body>
<p>
<font size="4"><b>Bulevar</b></font>
</p>
</body>
</html>
Poravnanje slike i okolnog teksta
top, middle ili bottom
<html>
<body> top
<img align=“..." src="slike/bulevar.jpg">
<font size="4">
<b>Bulevar oslobođenja je danas najvažnija
saobraćajna i poslovna ulica u Novom Sadu, a
mnogi ga smatraju i glavnom ulicom u gradu, kao
i neformalnim gradskim centrom. Iako se
najvažnije političke, javne i kulturne ustanove middle
Novog Sada nalaze u tradicionalnom gradskom
centru poznatom kao Stari Grad, Bulevar
prednjači sa poslovnim i zabavnim sadržajima.
Na samom Bulevaru, kao i u njegovoj široj
okolini, nalaze se moderne poslovne i stambene
zgrade, a duž Bulevara su uređene i prostrane
pešačke staze, biciklističke staze i drvoredi..</b> botton
</font>
</body>
</html>
<html> left, right
<body>
<img align=“..." src="slike/bulevar.jpg">
<font size="4">
<b>Bulevar oslobođenja je danas najvažnija left
najvažnije političke, javne i kulturne ustanove
prednjači sa poslovnim i zabavnim sadržajima. Na
samom Bulevaru, kao i u njegovoj široj okolini,
nalaze se moderne poslovne i stambene zgrade, a
duž Bulevara su uređene i prostrane pešačke staze, right
biciklističke staze i drvoredi..</b>
</font>
</body>
</html>
<html> hspace, vspace - definiše
<body> veličinu praznog prostora oko
<img align="left" src="slike/bulevar.jpg" slike
hspace="50" vspace="50“>
<font size="4">
<b>Bulevar oslobođenja je danas najvažnija
najvažnije političke, javne i kulturne ustanove
prednjači sa poslovnim i zabavnim sadržajima. Na
samom Bulevaru, kao i u njegovoj široj okolini,
nalaze se moderne poslovne i stambene zgrade, a
duž Bulevara su uređene i prostrane pešačke staze,
biciklističke staze i drvoredi..</b>
</font>
</body>
</html>
Hiperveze
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://www.famns.edu.rs"> Fakultet za menadzment</a>
</body>
</html>
otvara
(u istom prozoru pretraživača)
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://www.famns.edu.rs" target="_blank">
Fakultet za menadzment</a>
</body>
</html>
otvara
(u istom prozoru pretraživača)
Definisanje putanje
• Ako se referencirana stranica nalazi na istom serveru, navodi se
samo relativna putanja do direktorijuma strance.
hiperveza.html bulevar.html je fajl smešten u istom

<html> direktorijumu gde i fajl hiperveza.html.
<body>
<a href="bulevar.html"> Bulevar </a>
</body>
</html> Nema http://
otvara
Definisanje putanje
Sledeće hiperveze su deo dokumenta koji je smešten
u direktorijumu ´Nis´
<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>

Definisanje putanje
• Za definisanje putanja na udaljenim Web
servrima koriste se apsolutne putanje:
URL stranice iw.html
<a href = "http://www.famns.edu.rs/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
Slika kao hiperveza
<html>
<body>
<a href="bulevar.html"> <img src = "bulevar.jpg"> </a>
</body>
</html>
Stil hiperveze
• Za definisanje boje teksta hiperveze koriste se
sledeći atributi taga <body>:
link - boja hiperveze koja još uvek nije posećena
vlink - boja posećene hiperveze Ovo podešavanje važi
za sve hiperveze u
alink - boja trenutno aktivne hiperveze dokumentu
<html>
<body link="#0080A0" vlink="#999900" alink="#40FF00">
</body>
</html>
Nikada ranije posećena Posećena Upravo ˝kliknuta˝

mailto link
• Podrška za slanje e-mejla:
E-mejl adresa na koju se šalje poruka
<a href=”mailto:risticig@famns.edu.rs”> ˝Subject˝ poruke
<a href=”mailto: risticig@famns.edu.rs?subject=Poruka sa sajta”>
<html>
<body>
Za sva pitanja u vezi predmeta mozete me kontaktirati preko mejla
<a href="mailto: risticig@famns.edu.rs?subject=Poruka sa sajta">
risticig@famns.edu.rs</a>
</body>
</html>
mailto link
<html>
<body>
Za sva pitanja u vezi predmeta mozete me kontaktirati preko mejla
<a href="mailto: risticig@famns.edu.rs?subject=Poruka sa sajta
&body=Ova poruka je poslata sa sajta ">
risticig@famns.edu.rs</a>
</body>
</html>
Imenovane hiperveze
Anchor - “sidrište”
• Mogućnost referenciranja tačke unutar dokumenta.
• Atribut name taga <a> definiše imenovano odredište (sekciju)
dokumenta:
Imenovana sekcija
<a name="sekcija1">. . . tekst .... </a>

Ime imenovane sekcije
dokumenta
• Hiperveza na imenovanu sekciju unutar istog dokumenta:
<a href="#sekcija1"> tekst hiperveze</a>
• Hiperveza na imenovanu sekciju unutar nekog drugog dokumenta:

<a href=“http://www.famns.edu.rs/iw/iw.html#sekcija1"> tekst hiperveze</a>
Imenovane hiperveze
<html>
<body> Hiperveze na imenovane
sekcije u dokumentu
<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> Imenovane sekcije
dokumenta

HTML3

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML3

Uploaded by

Copyright:

Available Formats

Slike

Slika prikazana u svojim

Ista slika prikazana u 100

<img src=”slike/bulevar.jpg” width=“200” height=“150”

• Sa atributom target u tagu <a> postavljenim na

hiperveza.html bulevar.html je fajl smešten u istom

<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>

<a href = "http://www.famns.edu.rs/iw/iw.html">

URL Web servera

Nikada ranije posećena Posećena Upravo ˝kliknuta˝

<a href=”mailto:risticig@famns.edu.rs”> ˝Subject˝ poruke

<a href=”mailto: risticig@famns.edu.rs?subject=Poruka sa sajta”>

<a name="sekcija1">. . . tekst .... </a>

• Hiperveza na imenovanu sekciju unutar nekog drugog dokumenta:

You might also like