|
Slike definiramo oznakom <img> i neizostavnim atributom src, koji sadrži putanju i naziv datoteke slike. Zasad ćemo pretpostaviti da je slika u istoj mapi kao i stranica, pa će se u atributu src naći samo njezino ime.
Ako slika nije u istoj mapi kao i stranica, mora se upisati i put do nje ili čak potpuna adresa. Način pisanja atributa src potpuno odgovara načinu pisanja adresa stranica na koje vode linkovi, te će biti opisana u poglavlju Hiperveze (hiperlinkovi).
Ime datoteke u kojoj je slika treba napisati točno, uključujući i velika i mala slova. To možda neće biti važno na računalu na kojem trenutačno radite, ali može biti važno kad svoje web strance objavite na poslužitelju s drugim operacijskim sustavom.
Neki fotoaparati slikama daju proširenje .JPG umjesto .jpg, a možda vaše slike imaju proširenje .jpeg. Prije uključivanja slika dobro je provjeriti imena datoteka zajedno s proširenjem. Proširenja u popisima datoteka postaju vidljiva tako da u programu Windows Explorer (Moje računalo i sl.) namjestite Organiziraj > Mogućnosti mape i pretraživanja > kartica Prikaz > uklonite kvačicu s retka Sakrij datotečne nastavke za poznate vrste datoteka. Ne zaboravite gumb Primijeni, a možda će nakon toga koristiti i gumb Primijeni na (sve) mape.
Oznaku <img> mogu opisivati još neki atributi, od kojih su od danas aktualnih u strogoj definiciji HTML-a 4.01 najčešći: - width
- Širina slike definirana u pikselima (npr. "100") ili postocima raspoloživog prostora za sliku (npr. "80%").
- height
- Visina slike definirana u pikselima ili postocima.
- alt
- Alternativni tekst (opis slike) koji se prikazuje u preglednicima koji ne podržavaju prikaz slika ili ako slika ne postoji. Isti tekst prikazuje se dok slika nije učitana, a mogu ga pročitati i čitači ekrana namijenjeni slijepim osobama. Obavezan atribut u strogom HTML 4.01.
<img border="0” src="images/phoebe.gif"
width="213” height="130” alt="Phoebe">Lorem ipsum dolor sit amet...
Otvorite datoteku zivotopis.htm. Na početak prvog odlomka dodajte sliku i definirajte joj alternativni tekst „Joey”. Zasad ne morate definirati širinu i visinu slike.
Spremite stranicu i pogledajte je u web pregledniku.
U nastavku ćemo premještati umetnutu sliku.
Spremite stranicu pod novim imenom, zivotopis-1.htm, u njemu prije naslova „Curriculum vitae” definirajte novi odlomak, te u njega, između oznaka <p> i </p> premjestite sliku. Spremite stranicu i pregledajte je.
Vratite se na uređivanje stranice, te odlomak sa slikom premjestite između naslova i prvog podnaslova, iza sadržaja i sl. Nakon svakog premještanja spremite stranicu i pregledajte je u web pregledniku.
Možete uzeti i dokument zivotopis.htm te u njemu također premještati sliku, ali tako da ostane u postojećim odlomcima, odnosno naslovima.
Opišite riječima dva položaja slika koje ste susreli u ovoj vježbi i usporedite ih sa svojim iskustvima u postavljanju slika u programu za pisanje (npr. Microsoft Word). Preostale mogućnosti na koje ste navikli, na primjer postavljanje slike lijevo i desno od teksta, preporuča se ostvariti pomoću stilova.
Ovu vježbu možete raditi s datotekom zivotopis.htm ili, još bolje, stvorite novu HTML datoteku u koju ćete uključiti sliku.
Vaš je zadatak napisati u atribut src ime datoteke koja ne postoji, spremiti dokument i pogledati ga iz svih preglednika koje imate na raspolaganju (može i s različitih računala).
Kako razni preglednici pokazuju nedostajuću sliku?
|
