abc HTML5 i CSS TUTORIAL

Dimenzije slike širina /WIDTH/ visina /HEIGHT/


Slika 1. Tip TAG-a

Dimenzije slike širina /WIDTH/ visina /HEIGHT/  Sintaksa: <IMG SRC="ime_slike" WIDTH="širina" HEIGHT="visina">

Dodavanje parametara slike okvir se izvodi postavljanjem paramtara u: <IMG SRC="ime_slike" WIDTH="širina" HEIGHT="visina"> , gdje je:

  • WIDTH="obavezna riječ, znak jednakosti i otvoreni navodnici
  • širina brojna vrijednost širine u pikselima
  • " - ozbavezan znak za završenje naredbe
  • HEIGHT="obavezna riječ, znak jednakosti i otvoreni navodnici
  • visina brojna vrijednost širine u pikselima
  • " - ozbavezan znak za završenje naredbe


Slika 2. Primjer manja širina

Slika 3. Normalna slika

Slika 4. Primjer manje visine

Primjer 1 Veličina slike zorg_logo.gif je 145x50 piksela.

Kod Objašnjenje Ispis na ekran
<!DOCTYPE html>
<html>
<head><title>Dodavanje slike</title></head>
<body>
<IMG SRC="zorg_logo.gif" WIDTH="145" HEIGHT="50" >
</body></html>

Širina slike je 145 a visina 50 piksela, a visina slike je 50 piksela.

Primjer 2. Veličina slike zorg_logo.gif je zamjenjen 50x145 piksela.

Kod Objašnjenje Ispis na ekran
<!DOCTYPE html>
<html>
<head>
<title>Dodavanje slike</title></head>
<body>
<IMG SRC="zorg_logo.gif" WIDTH="50" HEIGHT="145">
</body>
</html>

Širina slike je 50 a visina slike 145 piksela - Deformisana slika.

Primjer 3. Veličina slike zorg_logo.gif je 145x50 piksela. Napisati HTML kod za ispis divje slike sa i bez navođenja dimenzija.

Kod Objašnjenje Ispis na ekran
<!DOCTYPE html>
<html>
<head><title>Dodavanje slike</title></head>
<body>
<IMG SRC="zorg_logo.gif" WIDTH="145" HEIGHT="50">
<img src="zorg_logo.gif">
</body></html>

BROWSER će prikazati istu veličinu slike bez obzira što nismo naveli veličinu slike.

Primjer 5. Veličina slike zorg_logo.gif je 145x50 piksela. Napisati HTML kod za ispis divje slike stvarne dimenzije i izmjenjenih dimenzija 120 x 70.

Kod Objašnjenje Ispis na ekran
<!DOCTYPE html>
<html>
<head><title>Dodavanje slike</title></head>
<body>
<IMG SRC="eNovinelogo.gif" WIDTH="145" HEIGHT="50">
<IMG SRC="eNovinelogo.gif" WIDTH="120" HEIGHT="70">
</body></html>

Širina slike je 50 a visina slike 145 piksela, a visina slike je 50 piksela.

Daljnji rad 1: Napisati html kod za sliku baner3.gif dimenzija 100x100:

Aktivnost Ispis na ekranu
Na folderu se nalazi fajl baner3.gif napisati kod za dodavanje slike dimenzija 100x100.

Daljnji rad 2:: Napisati html kod za sliku baner3.gif dimenzija 50x50:

Aktivnost Ispis na ekranu
Na folderu se nalazi fajl baner4.gif napisati kod za dodavanje slike dimenzija 50x50.

Daljnji rad 3: Napisati html kod za sliku prakaz slike bez definisanih parametara veličine slike i sa definisanim parametrima:

  1. Slika: baner1.gif Dimenzije 150 x 30.
  2. Slika: baner2.gif Dimenzije 140 x 20.
  3. Slika: baner3.gif Dimenzije 72 x 25.
  4. Slika: baner4.gif Dimenzije 100 x 25.

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