INFORMATIKA I RAČUNARSTVO

UVOD  U HTML

II DEO

HTML I SLIKE
Slike su sastavni deo svakog web sajta – bilo da je to neka foto-galerija, slika koja na neki način opisuje vaš tekst ili možda vaš logo. Slike se u HTML dokument ubacuju veoma jednostavno, koristeći <img/> tag što je skraćenica od „Image“.

Možda ste primetili da <img/> tag ima kosu crtu, što je karakteristika za zatvoreni tag? Upravo tako, tag za slike nije kao većina ostalih tagova jer on ne mora da se zatvori, tačnije, prihvata samo atribute i samim tim ga odmah zatvaramo. Tag za sliku mora da ima dva atributa a to su: izvor slike src=”” (skraćenica od „source“) i alternativni tekst alt=”” (skraćenica od „alternate“). U celosti tag izlgleda ovako:

<img src=”slika.jpg” alt=”Moja slika” />

Pored dva obavezna atributa, <img/> tag prihvata i druge atribute kojima možete kontrolisati sliku:
align (poravnjanje)
height (visina)
width (sirina)
border (okvir)
hspace (prazan prostor levo i desno od slike)
vspace (prazan prostor gore i dole od slike)


Align (poravnanje)

Align atribut služi za poravnjanje slike. Prihvata sledeće parametre
top
middle
bottom
left
right

Ukoliko ne navedete kako želite da poravnate sliku, po default-u će biti „bottom“. Sada ćemo da isprobamo svaku od opcija. Otvorite vaš tekst editor, napravite osnovnu strukturu HTML-a i u body tagu kucajte sledeće:


Neki tekst <img src="slika.jpg " alt="slika"/> koji ide oko slike!

Vidite da je po default-u poravnanje po donjoj ivici slike ukoliko ne ubacimo atribut align. Sada cemo videti na primeru svaki od navedenih parametara za align atribut.

Gornje poravnanje (top align)

Neki tekst <img src="slika.jpg " alt="slika" align="top"/> koji ide oko slike!

Poravnanje po sredini (middle align)

Neki tekst <img src="slika.jpg " alt="slika" align="middle"/> koji ide oko slike!

Donje poravnanje (bottom align)

Neki tekst <img src="slika.jpg " alt="slika" align="bottom"/> koji ide oko slike!

Levo poravnanje (left align)

Neki tekst <img src="slika.jpg " alt="slika" align="left"/> koji ide oko slike!

Desno poravnanje (right align)

Neki tekst <img src="slika.jpg " alt="slika" align="right"/> koji ide oko slike!

Height (visina) i Width (širina)

Height (visina) i width (širina) atributi služe za određivanje visine i širine slike. Dimenzije možemo odrediti u pikselima (px) ili procentima (%).

Neki tekst <img src="slika.jpg " alt="slika" width="150px" height="50"/> koji ide oko slike!

Border (okvir)

Neki tekst <img src="slika.jpg " alt="slika" border="5"/> koji ide oko slike!

Hspace (prazan prostor levo i desno od slike) i Vspace (prazan prostor gore i dole od slike)

hspace i vspace tagovi služe za određivanje praznog prostora oko slike. Takođe se određuje u pikselima (px).

Evo i nekih primera: