abc HTML5 i CSS TUTORIAL

Slika kao hiperlink /IMAGE AS HYPERLINK/


Slika 1. Tip TAG-a

Slika kao hiperlink /IMAGE AS HYPERLINK/
Sintaksa: <a href="Putanja/ime_fajla"><IMG SRC="ime_slike"></a>

  • <a href=" obavezni dio naredbe
  • Putanja - apsolutna ili relativna adresa foldera i ime foldera
  • Ime_fajla - Ime fajla sa ekstanzijom ili ime Web adrese
  • "> - kraj prvog dijela hiperlink taga.
  • obavezni znakovi <IMG SRC=" ">
  • ime_slike - putanja i puno ime slike (sa ekstenzijom)
  • </a> - kraj hiperlink taga.


Slika 2. Slika kao link

Primjer 1. Slika je hiperlink na web adresu www.znanje.org.
Opis rješenja: Dodavanje slike koja ima ime zorg_logo.gif .i Web adrese www.znanje.org.

Kod

Ekran
<!DOCTYPE html>
<html>
<head>
<title>Dodavanje slike</title>
</head>
<body>
<a href="http://www.znanje.org"><img src="zorg_logo.gif"></a>
</body></html>

Primjer 2. Slika je hiperlink na web adresu www.znanje.org.
Opis rješenja: Dodavanje slike koja ima ime eNovinelogo.gif.i Web adrese www.enovine.org.

Kod

Ekran
<!DOCTYPE html>
<html>
<head>
<title>Dodavanje slike2</title>
</head>
<body>
<a href="http://www.enovine.net"><img src="eNovinelogo.gif"></a>
</body></html>

Primjer 3. Napisati kod za dodavanje slike sa interneta http://www.znanje.org/epp/000/Asistent.jpg. A adresa je www.znanje.org/knjige.

Kod

Ekran
<!DOCTYPE html>
<html>
<head>
<title>Dodavanje slike3</title>
</head>
<body>
<a href="http://www.znanje.org/knjige"><img src="http://www.znanje.org/epp/000/Asistent.jpg"></a>
</body></html>

Primjer 4. Napisati kod za dodavanje slike sa foldera ../img/ slike abc_tutorijali.gif . A adresa je www.znanje.org/abc.

Kod

Ekran
<!DOCTYPE html>
<html>
<head>
<title>Dodavanje slike3</title>
</head>
<body>
<a href="www.znanje.org/abc"><img src="../img/abc_tutorijali.gif"></a>
</body></html>
 

Daljnji rad 1:

Aktivnost

Ekran

Na folderu se nalazi fajl baner1.gif napisati kod za dodavanje slike. Link Istorija na www.znanje.org
 

Daljnji rad 2:

Aktivnost

Ekran
Na folderu se nalazi fajl baner2.gif napisati kod za dodavanje slike. slike. Link Zabava na www.znanje.org
 

Daljnji rad 3:

Aktivnost

Ekran

Na folderu se nalazi fajl leonardo.jpg napisati kod za dodavanje slike. slike.

Link je sajt o Leonardu na sajtu www.znanje.org - Umjetnost.

Prozor na dnu stranice je namjenje za provjeru koda:
- kopirajte kod (edit, copy, paste ili CTRL+C, CTRL+V ili DRAG&DROP metodom), editovanje je moguće u prozoru

Index