Slike u HTML-u Tag
Slike se u HTML-u unose pomoću taga
. Ovaj tag ima atribut src koji označava adresu slike.
. Pored atributa src postoji atribut alt koji daje opis slike Unutar taga
može staviti with tj širina fotografije i height visina fotografije.
Slike i tekst Da bi sliku umetnuli unutar teksta tag
možemo ugnježditi unutar taga
,
,
i drugih.
Zaustavljanje prelamanja teksta Da bi sadržaj bio ispod slike koristimo CSS svojstvo clear koje ima vrednosti left,right i both
Slike i linkovi Tag se može umetnuti unutar taga ta slika će služiti kao link Up to index
Neki pregledači dodaju ivicu oko slika. Ako želimo da ivicu uklonimo to možemo uraditi pomoću svojstva border-style. a img{ border-style:none; } Ako ne želimo da slike na stranici sadrže ivice koristićemo opis stila img { border: dotted; } Pozadinske slike Da bi primenili pozadinsku sliku koristi se svojstvo background-image. Ovo svojstvo ima url adresu slike. #pozadinska{ background-image:url(slika.png); height:400px; width:400px; border-style:solid; border-width:1px; border-color:black; background-coolor:#999; }
Svojstvo background-repeat koristi se da sliku ponavlja duž stranice ukoliko je slika manja od pregledača. Opcije su repeat-x (ponavlja samo horizontalno) repeat-y (ponavlja samo vertiaklno) repet(ponavlja vertikalno i horizontalno) i no-repeat. #pozadinska{ background-image:url(slika.png); height:400px; width:400px; border-style:solid; border-width:1px; border-color:black; background-coolor:#999; background-repeat:no-repeat; }
Svojstvo background-position omogućava da se slika prikaže na drugom mestu a ne samo u gornjem levom uglu. Ovo svojstvo se može postaviti na horizontalnu poziciju (left,right,center) ili na vertikalnu poziciju (top,bottom,center). Ako postavimo jednu vrednost ona će se koristiti i za drugu. Ako navedemo dve vrednosti koje se mogu primeniti kao vertiaklne i horizontalne pozicije prva se odnosi horizontalnu a druga na vertikalnu postavku. gore desno
100%0% top right
centrirano centrirano pri dnu
right top 50%50% center center 50% 50%100% bottom center center bottom
Svojstvo background-attachment podržava scroll, fixed i local. Svojstvo scroll omogućava da se pozadina pomera zajedno sa elementom u kome se nalazi. Svojstvo fixed označava da pozadina ne treba da se pomera tj. da slika zadržava svoju poziciju kada se pomera okvir za prikaz u pregledaču. Svojstvo local znači da se slika neće pomerati kad se njen sadržajni element pomera. #pozadinska{ background-image:url(ivo.png); width:362px; height:445px; border-style:solid; border-width:2px; border-clor:white; background-attachment:fixed; }
Korišćenje slike kao znakovi za nabrajanje Svojstvo list-style-image omogućava da se slike koriste kao znakovi za nabrajanje u listi ul { list-style-image: url(„bullent.png“) }