HTML osnove 5–rad sa slikama
Ovo se poglavlje odnosi na osnove postavljanja slika na Internet stranice. Ako ne znate kako, i upravo su u potrazi za uputama o postavljanju i formatiranju fotografija i grafika na svoje stranice, ovaj članak je za vas.
Puno ljudi kad ih pitate za razlog „surfanja“ Internetom reći će vam da su to fotografije i grafike. Zbog tog razloga držim da je grafika jako bitna jer privlači najviše posjetitelja na Internet stranice. Pa da krenemo na lekciju osnova rada sa fotografijama i grafikama.
Za ovu lekciju koristit ćemo ovu jednostavnu grafiku:
Da bi ste jasnije vidjeli različito pozicijoniranje slike otvorite novi dokument u Notepad-u te ga spremite na radnu površinu kao test2.htm.
(Više o spremanju .htm dokumenta pročitajte u članku HTML osnove 1 – osnovni HTML
Važno je da zapamtite činjenicu da je HTML samo tekst. Ne postoji grafički HTML dokument. Ono što HTML dokument sadrži su oznake, a oznaka za fotografije i grafike je <IMG> tag koja u sebi sadrži informacije o istima.
Tako da je u biti stranica sa 100 slika zapravo stranica sa 100 <IMG> oznaka, koje sadrže lokacije (URL) za svaku sliku. To podrazumijeva da postoji 101 različita datoteka (pod pretpostavkom da se svaka slika se razlikuje).
Dodati određenu sliku na nternet stranicu je u principu jednostavno koristeći <IMG> oznaku:
<img src=”slika.jpg”>
Ovo rezultira umetanjem slike na određeno mjesto u dokumentu:
Da bi ste posao obavili stručno trebate navesti i njezinu točnu veličinu. To omogućava pregledniku da “pred-dodijeli” prostor na zaslonu. Također omogućuje pregledniku učitati više slika optimalno, i čini da izgled vaših Internet stranice bude poravnan i bez grešaka u prikazu. To stvara efekt je prikazano u nastavku, prije nego je slika učitana. Bez određivanja veličine, preglednik na početku izdvaja neke zadane veličine na ekranu, onda to mijenja nakon što je grafika učitana što baš i ne izgleda najbolje.
Primjer ispod pokazuje kako postaviti veličinu grafike.
<img src=”slika.jpg” width=”441″ height=”364″>
Ovo nas sada dovodi do drugog pitanja. Koju širinu i visinu slike postaviti?
Većina grafičkih programa nam omogućuje da provjerite svojstva slike.
U jednostavnom programčiću koji dolazi sa Windowsima Paint Pro otvorit ćete sliku te odabrati opciju Images – Attributes. Tu ćete moći vidjeti veličinu odabrane slike. U programu Internet Exploreru, desnim klikom miša na sliku odaberite “Properties”.
Tu ćete moći vidjeti veličinu odabrane grafike u pikselima.
Jedna od stvari koju također morate uzeti u obzir je ta da mnogo ljudi surfa bez grafike.
Kako bi se prilagodili njihovim potrebama, bilo bi dobro odrediti neki alternativni tekst koji će se prikazati ako se grafička slika se ne može naći ili se ne prikazuje.
Ovo ćete postići koristeći oznaku ALT integriranu unutar <IMG> oznake:
<img src=”slika.jpg” width=”441″ height=”364″ alt=”Ovo je grafika računala s osmjehom”> 
Sada se možete igrati sa poravnanjem slike. Možete prikazati slike s desne strane, lijeve ili u centru. Ovo ima dodatnu prednost smještanja teksta oko same slike, što može učiniti da stranicu izgleda vrlo atraktivno i zanimljivo. Ovaj kod ćete koristiti kod poravnavanja slike:
<img src=”slika.jpg” width=”441″ height=”364″ alt=” Ovo je grafika računala s osmjehom “align=”right”>
Kao što vidite, slika se sada nalazi desno od teksta. Ovo je jednostavan način da napravite da vam stranice izgledaju profesionalno.
Ako želite sliku poravnati lijevo koristit ćete ovaj kod:
<img src=”slika.jpg” width=”441″ height=”364″ alt=” Ovo je grafika računala s osmjehom “align=”left”>
A za poravnavanje u centar morate dodati oznaku <CENTER> na početku i zatvorit sa </CENTER>:
<CENTER><img src=”slika.jpg” width=”441″ height=”364″ alt=”Ovo je grafika računala s osmjehom”></CENTER>
Ako slici želite dodati obrub kako bi izgledala ljepše koristit ćete dodatak BORDER. Tu možete mijenjati debljinu obruba:
<img src=”slika.jpg” width=”441″ height=”364″ alt=” Ovo je grafika računala s osmjehom “border=”1″>
ili
<img src=”slika.jpg” width=”441″ height=”364″ alt=” Ovo je grafika računala s osmjehom “border=”3″>
Related posts:
