Sadržaj
Postoje slučajevi kada nije sve za generiranje obrasca u našim HTML dokumentima, mnogo puta moramo uključiti druge elemente, poput slika unutar nekih oznaka kako bismo oblikovali našu stranicu, jer ćemo u ovom vodiču vidjeti kako to učiniti i različite značajke uključena u samu sebe.Da bismo prikazali sliku unutar našeg HTML dokumenta, moramo koristiti element img koji ima sljedeće atribute:
- src
- alt
- visina
- širina
- usemap
- iskaznica
Trenutno ćemo se usredotočiti na prva dva atributa, src Y alt; src omogućuje nam da navedemo put s kojeg će preglednik tražiti sliku, to može biti relativni put ili čak URL, atribut alt omogućuje nam postavljanje teksta, ovaj će se tekst prikazati samo kad slika nije dostupna, bez obzira nalazi li se na putu na kojem je navedena u src ili ga čak ni preglednik ne može protumačiti.
Pogledajmo primjer kako uključiti sliku u naš HTML dokument:
Primjer Ovdje je uobičajen oblik za predstavljanje triju aktivnosti u triatlonu.Prva ikona predstavlja plivanje, druga biciklizam, a treća trčanje.
U ovom primjeru također vidimo još dva atributa, širina i visina Kako im nazivi pokazuju, oni trebaju regulirati širinu i visinu slike, čime možemo jamčiti da će slika ostati unutar veličina koje smo mi odredili, također ako je slika veća od toga, bit će ponovno dimenzionirana, bez Međutim, morate biti oprezni jer će slika imati istu težinu, pa je poželjno postaviti već uređenu sliku potrebne veličine i da se naša stranica brže učitava.
Druga prilično uobičajena upotreba je korištenje slike kao veze na druge stranice, bilo postavljanjem ikone tima, na primjer sljedećom strelicom, naravno, sada bi s novim CSS okvirima to moglo biti manje uobičajeno, no da vidimo kako učinjeno je da ova opcija bude u našem portfelju HTML alata.
Za ugradnju slike jednostavno ćemo postaviti element img unutar elementa koji se odnosi na stranicu, kao što su:
Primjer Ovdje je uobičajen oblik za predstavljanje triju aktivnosti u triatlonu.Prva ikona predstavlja plivanje, druga biciklizam, a treća trčanje.
Time postižemo da je slika sada naša veza kao što ćemo vidjeti na sljedećem ekranu slika se ne mijenja na način na koji je prikazana:
