U ovom materijalu ću vam reći o vrlo važnim HTML tagovima za umetanje slika i grafika na stranicu, jer bez toga je teško napraviti lijepu i dobru web stranicu.
Slike će vašu web stranicu učiniti jedinstvenom i izdvojiti je iz gomile. Međutim, zapamtite da prekomjerna upotreba grafike na web stranici može biti loša stvar.
Nemojte preopteretiti svoju html stranicu slikama; stranica treba da bude lagana i da ne plaši posetioce. Posjetilac uvijek treba da asimilira glavne informacije i ne smije se ometati; umetati slike u HTML samo tamo gdje je to potrebno.
na stranici BODY tag Attributes, već sam rekao da slike mogu biti pozadina html stranice, a sada ću vam reći kako se te iste slike mogu koristiti na višem nivou od pozadine.
I tako, da biste umetnuli sliku u HTML stranicu, trebat će vam oznaka , koji ima najvažniji atribut SRC. Ovaj atribut je potreban za označavanje adrese slike. Recimo da treba da stavite sliku image.jpg na neko mesto na html stranici, a naša slika će se nalaziti u istom folderu (direktoriju) sa stranicom, tada treba da napišete sledeći html kod:
Ako se slika i html stranica nalaze u različitim folderima ili direktorijumima, tada morate napisati putanju do slike u odnosu na stranicu. Na primjer, naša html stranica se nalazi u folderu ili direktoriju news, u istom direktoriju ili folderu se nalazi poddirektorij (folder) pop, u kojem se nalazi naša slika image.jpg, zatim da biste je ubacili potrebno je napisati ovako :
Pored atributa src oznake Postoji još nekoliko neobaveznih, ali važnih atributa:
- širina — širina slike (možete odrediti piksele ili procente);
- visina — visina slike (možete odrediti piksele ili procente).
Ako ne navedete ove atribute, pretraživač će učitati stvarne dimenzije slike. Međutim, ne treba pretjerivati s vrijednostima ovih atributa, jer povećanje dužine ili širine slike može izobličiti, što će je uništiti, na primjer, fotografiju osobe, gdje će proporcije osobe promijeniti.
Kao što sam već napisao, dimenzije slike mogu se navesti i u pikselima i u procentima. Dozvolite mi da vam dam samo primjer:
Još jedan primjer html koda:
Postoje slučajevi kada je mogućnost prikaza grafike, uključujući slike, onemogućena u pretraživaču, pa da vaša stranica ne izgubi značenje, koristite atribut alt, u koji upisujemo alternativni tekst ako se slika ne učitava na stranicu . html kod kao primjer:
- lijevo - slika će se nalaziti s lijeve strane, a tekst pored nje s desne strane;
- desno - slika će se nalaziti na desnoj strani, a tekst pored nje s lijeve strane.
Evo HTML koda:
Tekst pored slike.
a pretraživač će ispisati sljedeće:
Tekst pored slike.
HTML kod za pravu vrijednost:
Tekst pored slike.
html stranica će izgledati ovako:
Tekst pored slike.
Da biste spriječili da se tekst omota oko slike, možete koristiti prethodno spomenutu BR oznaku na stranici Formatiranje teksta u HTML-u. Usput, BR oznaka ima jasan atribut, sa svojim vrijednostima vrijednosti:
- lijevo - ne prelamati tekst, koji će biti poravnat lijevo;
- desno - ne prelamati tekst, koji će biti poravnat udesno;
- sve - ne prelamajte tekst, koji će biti poravnat sa lijevom i desnom ivicom.
Bez atributa align, tekst će se prema zadanim postavkama omotati oko desne strane slike i gotovo će se poravnati. Ako želite da se tekst ne omota usko oko slike, možete koristiti sljedeće atribute:
- vspace - pravi gornju i donju marginu u pikselima;
- hspace - pravi bočne margine (lijevu i desnu) u pikselima.
Navest ću jednostavan html kod kao primjer:
Ovo je tako lijepa slika.
Pokušajte sami vidjeti šta se dešava u ovom primjeru.
Također možete kreirati okvir oko slike koristeći atribut granice i odrediti njegovu veličinu u pikselima. Što je veća vrijednost, veći je okvir oko slike. HTML kod će biti ovakav:
html stranica će izgledati ovako:
Napisao sam osnovne HTML oznake potrebne za umetanje slika u HTML stranicu. Zatim ću vam reći kako da kreirate veze u HTML-u, kao i kako da sliku napravite vezom.
Datum objave: 15. maj 2012Većina web stranica sadrži grafiku. Omogućava vam da informacije prezentujete živopisno i jasno. U mnogim slučajevima, bolje je pokazati sliku nego dati dugačak tekstualni opis.
Postoje dva načina za postavljanje grafike na stranicu:
- umetanje pojedinačnih slika;
- popunjavanje pozadine slikom.
U svakom slučaju, grafička slika je preuzeta iz datoteke.
Umetanje grafičke slike iz datoteke grafičkog formata na stranicu se vrši pomoću oznake
(sa engleskog, slika - slika) označavajući adresu datoteke kao argument za SRC atribut:
Adresa grafičke datoteke je ili URL ili naziv datoteke, moguće sa putanjom. Na primjer, da biste prikazali grafičku datoteku logotip.jpg, trebali biste napisati oznaku
Za povećanje brzine prijenosa grafičke slike u oznaci
možete koristiti LOWSRC atribut (dodatni parametar), koji uzima adresu grafičke datoteke kao argument. Možete kreirati dvije grafičke datoteke: jedna (na primjer, recimo logotip.jpg) sadrži sliku visoke rezolucije, a druga (na primjer, logotip.gif) sadrži sliku niske rezolucije. Onda označi
Naređuje pretraživaču da prvo preuzme datoteku logotip.gif, a zatim je zamijeni datotekom logotip.jpg čim bude primljena.
Drugi način da se ubrza učitavanje grafike je da navedete dimenzije pravougaonog područja u koje će grafika biti postavljena pomoću atributa WIDTH i HEIGHT, mjereno u pikselima. Ako navedete ove atribute, pretraživač će prvo dodijeliti prostor za grafiku, pripremiti izgled dokumenta, prikazati tekst i tek onda učitati grafiku. Imajte na umu da pretraživač komprimuje ili rasteže sliku kako bi se uklopila u određenu veličinu okvira. Primjer specificiranja dimenzija slike:
Grafika se obično koristi zajedno sa tekstom, pa se javlja problem poravnanja teksta i grafike. Ovaj problem se rješava korištenjem atributa ALIGN tag
koristeći razne argumente. Na primjer, možda želimo da tekst teče oko slike desno ili lijevo. Obično je slika usko povezana sa tekstom, što može biti ružno. Da biste to izbjegli, možete postaviti prazne margine oko ilustracije. Polja se kreiraju pomoću atributa VSPACE za gornje i donje margine i NSPACE za bočne margine u oznaci
. Argumenti ovih atributa navedeni su kao brojevi koji određuju veličinu polja u pikselima. Da biste otkazali prelamanje teksta oko grafike, koristite oznaku
.
Sljedeća oznaka postavlja grafiku iz datoteke logotip.jpg da se premota udesno (slika će biti lijevo od teksta):
Ako želite da postavite sliku desno od teksta, onda vam je potreban atribut ALIGN dodijeliti argument PRAVO:
Da biste postavili margine oko slike, morate napisati oznaku kao što je:
Ovdje brojevi 20 i 10 određuju veličinu polja.
Razmotrimo primjer kombinirane upotrebe grafike i teksta. Otvorite Notepad (Beležnica za uređivač teksta) Windows. Napišite HTML kod u njemu koristeći oznake o kojima smo gore govorili. Ispod je program koji daje neki tekst i grafiku. Možete koristiti bilo koju datoteku koju imate kao grafičku datoteku. Datoteka koja se ovdje koristi je logotip.gif.
<Н1>Tekst se prelama oko grafike sa desne strane
Ovo je primjer zajedničkog korištenja teksta i grafike.
Tekst HTML programa može se napisati u bilo kojem uređivaču teksta. Ovo koristi tekstualne oznake za označavanje.
Ovaj tekst se prikazuje iz novog pasusa. Da bismo to učinili, koristili smo posebnu oznaku.
Pokušajte promijeniti veličinu prozora pretraživača. Obratite pažnju na to kako se izgled teksta mijenja.
Rice. 657. Tekst se prelama oko slike sa desne strane
Široke mogućnosti za precizno pozicioniranje slika (kao i drugih elemenata) na stranici pružaju stolovi I stilova. O ovim HTML elementima će biti reči kasnije. Na primjer, možete definirati tabelu bez vidljivih okvira i smjestiti slike, tekstove i druge elemente u ćelije ove tablice.
Nadamo se da će vam ovaj članak biti od koristi. Sretno čitanje!
Slike nam odmah omogućavaju da shvatimo koliko bi nam određena stranica ili članak mogao biti zanimljiv, stvaraju raspoloženje i mogu otkriti temu na nov način. Ponekad jedna fotografija vrijedi hiljadu riječi.
Ali ne biste trebali uživati u njima ako nemate Instagram ili online prodavnicu. Preporučljivo je da slike:
- bili informativni
- odgovara shemi boja vaše web stranice
- bili odgovarajući
Ukoliko nemate odgovarajuću fotografiju možete koristiti tzv photostock (fotobanka) - mjesto gdje se pohranjuju mnoge fotografije, ilustracije i vektorske grafike. Postoji mnogo takvih resursa, možda ste čak i čuli za jedan od najvećih - Shutterstock, ali tamo se preuzimanja plaćaju.
Za one koji ne vole da preplaćuju, na kraju članka smo pripremili bonus- lista nekoliko fotobanka gdje možete besplatno preuzeti ogromnu količinu kvalitetnih lijepih materijala :)
Formati slika
Na World Wide Webu se uglavnom koriste 3 vrste slika:
gif(Format za razmjenu grafike - format za razmjenu slika)
Ovo je prvi format koji se počeo koristiti na Internetu. Prednosti ovog formata su dostupnost animacije i male veličine, stranica se brzo učitava. Osim toga, podržava transparentnost. Nedostatak - samo korišten 256 boja(zato je zapravo veličina mala), tj. ne može se koristiti za slike u punoj boji.
jpeg, aka jpg(Zajednička grupa eksperata za fotografiju - Zajednička grupa fotografskih eksperata - ovo je naziv razvojne organizacije)
pogodno za kreiranje slika visokog kvaliteta u punoj boji, fotografije. Veličina takvih slika je velika, tako da obično opterećuju server. Ako trebate komprimirati jpeg (za manju težinu slike), preporučujemo da uzmete veličinu konačne slike višestruko od osam , tako da će gubitak kvaliteta biti minimalan.
png(Prenosiva mrežna grafika - Prijenosna mrežna grafika. Izgovara se na isti način kao ping, tj. )
ovaj format je prvobitno razvijen za web, tj. Slika je obično malo teška i ne usporava stranicu prilikom učitavanja. Ovaj format je kreiran da zamijeni zastarjeli gif, ali za razliku od njega, ne podržava animaciju. PNG-8, kao i gif, koristi samo 256 boja. Format png-24 podržava 16 miliona boja, iako je već prilično težak. PNG-32 sadrži isti broj boja kao png-24, a plus vam omogućava da dobijete sliku sa prozirnom pozadinom , i možete podesiti stepen transparentnosti. Kada se smanji veličina png-a, nema gubitka u kvaliteti boje.
Hajde da sumiramo
gif- za animaciju
jpeg- za fotografije
png- za ikone, dugmad, pozadine, logotipe, snimke ekrana, crteže, tekstove, fotografije sa prozirnom pozadinom
Umetanje slike u html datoteku
Za dodavanje slike na stranicu, koristite tag
(od engleskog image - slika, slika). Ovo je jedna oznaka i nije joj potrebna završna oznaka. Ova oznaka sadrži atribute unutra.
Atribut src(iz engleskog izvora - izvor) označava putanju do datoteke (mjesto gdje se nalazi slika). Ako je slika na vašem računaru (sajt je još u razvoju) ili na vašem serveru, koristite relativnu vezu. Ako je slika s mreže, onda je potrebna apsolutna veza. Pročitajte kako to učiniti u članku "Veze".
Dakle, da povežete sliku sa svojom web stranicom, morate napisati kod ovako:
alt atribut(od engleskog alternativa - alternativa) označava tekst koji će korisnik vidjeti ako se slika ne učita. Put je pogrešno naznačen, slika je obrisana, loš internet - razloga može biti mnogo, a poželjno je da osoba shvati šta se krije iza ove omražene ikone.
Pretraživači obraćaju veliku pažnju na to da se ovaj atribut popuni. A html validator (resurs za provjeru ispravnosti koda) će odsustvo alt atributa shvatiti kao grešku. Ako svi atributi
U primjeru ispod, namjerno smo naveli nepostojeću putanju za sliku tako da možete vidjeti kako funkcionira alt atribut
Visina i širina slika
Također možete postaviti visinu i širinu slike ako je originalna slika npr. više nego što vam treba.
U HTML5 se preporučuje da se to uradi koristeći CSS ili atribut stila
, Volim ovo:
U ovom primjeru uzeli smo 30% širine, ne originalne slike, već veličine prozora pretraživača. Kada je širina = 100%, slika se otvara u punoj širini pretraživača. Zapamtite ovu funkciju posto, kao mjerne jedinice.
Usput, da smo napisali samo širinu, rezultat bi bio isti, pokušajte:
< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "panda na drvetu" style = "širina:30%;" > |
Također možete podesiti širinu i visinu piksela. U slučaju naše pande, čije su originalne dimenzije 1196 x 796 piksela, tako da životinja ne pati kada se kompresuje, moramo zadržati proporcije, a ovdje ne možete bez kalkulatora. Recimo da želimo smanjiti veličinu slike za 3 puta, a zatim moramo postaviti dimenzije na 399 x 265 piksela.
Imajte na umu da ako proporcionalno uvećamo sliku, dovoljno je navesti samo jedan parametar, na primjer. širina. Pametni pretraživač sam će izračunati punu veličinu slike.
Pokušajte pokrenuti ovaj kod i pogledajte rezultat:
< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "panda na drvetu" style = "width:399px;" > |
Uvijek postavite dimenzije slike. Obično se slikama učitava duže od ostatka html koda. Ako pretraživač zna koliko prostora da rezerviše za slike, može nastaviti sa učitavanjem sajta bez čekanja da se slike učitaju.
Malo naftalina
Ako se slučajno poigrate s kodom web-mjesta kreiranog u HTML-4 ili čak ranije, primijetit ćete da se veličine slike postavljaju posebnim atributi širine I visina. Ovo je zastarjela metoda, iako još uvijek vrijedi u HTML5. Međutim, preporučujemo korištenje stila, jer Na atribute širine i visine mogu uticati interni ili eksterni stilovi koji će živjeti u pretraživaču ili vašoj CSS datoteci. O tome ćemo detaljnije govoriti kada pogledamo CSS, ali za sada samo pogledajte primjer kako stilovi utiču na atribute visine i širine.
U ovom prozoru postoje 3 kartice: na prvoj vidite html kod, na drugoj CSS kod, a na posljednjoj - kao i uvijek rezultat. Ovo funkcionira kao da je prva kartica datoteka index.html, druga style.css datoteka, a treća preglednik. Dakle, sada naš CSS kaže da svi elementi sa img tagom imaju širinu od 100%. Zadane veličine atributa širine i visine su u pikselima, tako da nema potrebe za dodavanjem jedinica ovdje.
Razlika u rezultatima je očigledna :)
Također u starijim verzijama html-a korišteni su sljedeći atributi:
poravnati, koji je korišten za poravnavanje slike vodoravno ili okomito.
hspace- uvlačenje s lijeve i desne strane slike na okolni sadržaj (na primjer, tekst ili susjednu sliku)
vspace- uvlačenje iznad i ispod od slike do sadržaja oko nje.
granica- postavite debljinu okvira oko slike (podrazumevano je nula)
Danas se sve ove manipulacije (i još mnogo toga) obavljaju pomoću CSS-a, pa smo odlučili da vas ovdje ne zamaramo time. Ako vas i dalje zanima kako raditi sa ovim atributima, pišite u komentarima, mi ćemo dodati ovu stavku :)
Postavljanje slike u kod
Odakle postavljamo našu oznaku zavisi kako će se prikazati u pretraživaču.
Primjer br. 1 - prije pasusa:
Elementi kao što su
I
referirati na blok elementi
. Oni uvijek počinju na novom redu i zauzimaju cijelu dostupnu širinu prozora pretraživača. Ako ste na prvom mestu ![]()
, a nakon njega blok element, na primjer pasus, biće premješten u sljedeći red.
Primjer br. 2 - na početku pasusa
Ovo je inline element, uklapa se u blok element i ne započinje novi red. U gornjem primjeru, tekst se omota oko slike zbog koda
registrovan unutra
Naslovi za ilustracije
Da biste označili ili potpisali fotografiju na stranici, koristite tag
Tag
Imajte na umu da pretraživač podrazumevano ima neke postavke stila za oznaku
Dakle, ti i ja smo naučili
- dodajte sliku na stranicu: koristeći tag
- naučio potrebne atribute za ovu oznaku: src da ukaže na putanju i alt da opišem sliku
- razumjeti koji je format bolji i šta koristiti: jpeg za fotografije, png za logotipe i snimke ekrana, gif za animaciju
- kako najbolje podesiti dimenzije slike: koristeći atribut stila sa parametrima širina I visina
- Shvatili smo kako će se slika prikazati ovisno o mjestu u kodu: odvojeno ako je ispred blok elementa i sa omotačem ako je unutar blok elementa (npr.
)
A da bismo imali sa čime da radimo, moramo te slike odnekud uzeti, a da ne kršimo ničija autorska prava.
Dakle, vrijeme je za bonus :)
Lista besplatnih fotobanka
Prije nego što počnemo, imajte na umu da je svaki snimak ekrana ovdje veza do stranice. Kako napraviti slike kao veze, pročitajte u članku "Veze".
Na pixabayu ćete pronaći 680 hiljada besplatnih slika na bilo koju temu, koje se distribuiraju pod Creative Commons CCO (CC Zero) licencom, tj. mogu se koristiti, distribuirati, modificirati za bilo koju svrhu, čak i komercijalnu.
Foto banka sadrži 390 hiljada besplatnih fotografija i slika. Ovdje je teže pronaći cool sliku, ali ima i dobrih primjera. Oglašavanje plaćenih fotobanka je prilično ometajuće. Ovaj resurs smo stavili na drugo mjesto po broju slika, ali po ljubaznosti će vjerovatno biti zadnji u našoj rang listi.
Photostock ima više od 250 hiljada besplatnih fotografija, uglavnom visokog kvaliteta. Možete preuzeti čak i bez registracije. Dostupno samo na engleskom jeziku.
Mnogo elegantnih fotografija licenciranih pod CC Zero. Možete preuzeti bez registracije. Ova banka fotografija će vas također razumjeti samo na engleskom.
Stranica je kreirana od strane indijskog web dizajnera koji razumije koliko je teško pronaći fotografije visokog kvaliteta. Sve fotografije je on lično snimio i sa njima možete raditi šta god želite. Voli da fotografiše hranu, desktop, kompjutere i sve vrste objekata. Pretraga - samo na engleskom.
HTML slike dodano na web stranice pomoću oznake . Upotreba grafike čini web stranice vizualno privlačnijim. Slike pomažu da se bolje prenese suština i sadržaj web dokumenta.
Korištenje HTML oznaka
Umetanje slika u HTML dokument
1. Tag ![]()
Element predstavlja sliku i njen rezervni sadržaj, koji se dodaje pomoću atributa alt. Od elementa
je mala slova, preporučuje se da ga postavite unutar blok elementa, na primjer,
Or
Tag ima potreban src atribut, čija je vrijednost apsolutna ili relativna putanja do slike:
Za oznaku Dostupni su sljedeći atributi:
| Atribut | Opis, prihvaćena vrijednost |
|---|---|
| alt | Atribut alt dodaje alternativni tekst slici. Prikazuje se na mjestu gdje se slika pojavljuje prije nego što se učita ili kada je grafika onemogućena, a također se prikazuje kao savjet kada pređete mišem preko slike. Sintaksa: alt="opis slike" . !} |
| crossorigin | Atribut crossorigin vam omogućava da učitate slike iz resursa na drugom domenu koristeći CORS zahtjeve. Slike učitane u platno pomoću CORS zahtjeva mogu se ponovo koristiti. Dozvoljene vrijednosti: anonimno - Zahtjev za više porijekla se vrši korištenjem HTTP zaglavlja, a vjerodajnice se ne prenose. Ako server ne pruži vjerodajnice serveru od kojeg se traži sadržaj, slika će biti oštećena i njena upotreba će biti ograničena. use-credentials — Zahtjev za više porijekla se izvodi prosljeđivanjem vjerodajnica. Sintaksa: crossorigin="anonimno" . |
| visina | Atribut visine određuje visinu slike. Može se navesti u px ili %. Sintaksa: visina: 300px. |
| ismap | Atribut ismap označava da je slika dio slike karte koja se nalazi na serveru (slika mape je slika s područjima na koja se može kliknuti). Kada kliknete na sliku karte, koordinate se šalju serveru kao URL upitni niz. Ismap atribut je dozvoljen samo ako je element Sintaksa: ismap. |
| longdesc | Prošireni URL opisa slike koji nadopunjuje atribut alt. Sintaksa: longdesc="http://www.example.com/description.txt" . |
| src | Atribut src specificira putanju do slike. Sintaksa: src="flower.jpg" . |
| veličine | Postavlja veličinu slike u zavisnosti od opcija prikaza. Radi samo kada je specificiran atribut srcset. Vrijednost atributa je jedan ili više nizova, odvojenih zarezima. |
| srcset | Kreira listu izvora slike koji će biti odabrani na osnovu rezolucije ekrana. Može se koristiti zajedno sa ili umjesto src atributa. Vrijednost atributa je jedan ili više nizova, odvojenih zarezima. 
|
| usemap | Atribut usemap specificira sliku kao mapu slike. Vrijednost mora početi simbolom #. Vrijednost je pridružena vrijednosti atributa imena ili id oznake |
| širina | Atribut širine određuje širinu slike. Može se navesti u px ili %. Sintaksa: širina: 100% . |
1.1. Adresa slike
Adresa slike može se navesti u cijelosti (apsolutni URL), na primjer:
url (http://anysite.ru/images/anyphoto.png)
Ili putem relativnog puta od dokument ili korijenski direktorij web stranica:
url(../images/anyphoto.png) - relativna putanja iz dokumenta,
url(/images/anyphoto.png) - relativna putanja iz korijenskog direktorija.
Ovo se tumači na sljedeći način:
../ - znači ići jedan nivo gore, do korijenskog direktorija,
slike/ - idite na folder sa slikama,
anyphoto.png - pokazuje na datoteku slike.
1.2. Dimenzije slike
Bez podešavanja dimenzija slike, crtež se prikazuje na stranici u stvarnoj veličini. Možete urediti dimenzije slike koristeći atribute širine i visine. Ako je naveden samo jedan od atributa, drugi će se automatski izračunati kako bi se zadržale proporcije slike.
1.3. Formati grafičkih datoteka
JPEG format (Zajednička grupa stručnjaka za fotografiju). JPEG slike su idealne za fotografije i mogu sadržavati milione različitih boja. Slike se kompresuju bolje od GIF-ova, ali tekst i velike površine pune boje mogu postati mrlje.
GIF format (Format za razmjenu grafike). Idealno za kompresiju slika koje imaju područja pune boje, kao što su logotipi. GIF-ovi vam omogućavaju da postavite jednu od boja da bude transparentna, omogućavajući da se pozadina web stranice prikazuje kroz dio slike. GIF-ovi također mogu uključivati jednostavnu animaciju. GIF slike sadrže samo 256 nijansi, zbog čega slike izgledaju mrljavo i nerealno u boji, poput postera.
PNG format (Prenosiva mrežna grafika). Uključuje najbolje karakteristike GIF i JPEG formata. Sadrži 256 boja i omogućava da jednu od boja učinite transparentnom, dok komprimirate slike u manju veličinu od GIF datoteke.
APNG format (Animirana prijenosna mrežna grafika). Format slike zasnovan na PNG formatu. Omogućava vam pohranjivanje animacije i također podržava transparentnost.
SVG format (Skalabilna vektorska grafika). SVG crtež se sastoji od skupa geometrijskih oblika opisanih u XML formatu: linija, elipsa, poligon, itd. Podržane su i statične i animirane grafike. Skup funkcija uključuje različite transformacije, alfa maske, efekte filtera i mogućnost korištenja šablona. Veličina SVG slika se može promijeniti bez gubitka kvaliteta.
BMP format (bitmap slika). To je nekompresovana (originalna) rasterska slika čiji je predložak pravokutna mreža piksela. Bitmap datoteka se sastoji od zaglavlja, palete i grafičkih podataka. Zaglavlje pohranjuje informacije o grafičkoj slici i datoteci (dubina piksela, visina, širina i broj boja). Paleta je naznačena samo u onim Bitmap datotekama koje sadrže slike palete (8 ili manje bitova) i koje se sastoje od najviše 256 elemenata. Grafički podaci predstavljaju samu sliku. Dubina boje u ovom formatu može biti 1, 2, 4, 8, 16, 24, 32, 48 bita po pikselu.
ICO format (ikona za Windows). Format skladištenja ikona datoteke u Microsoft Windows-u. Takođe, Windows ikona se koristi kao ikona na web stranicama na Internetu. To je slika ovog formata koja se prikazuje pored adrese web stranice ili markera u pretraživaču. Jedna ICO datoteka sadrži jednu ili više ikona, od kojih se veličina i boja mogu zasebno podesiti. Veličina ikone može biti bilo koje veličine, ali najčešće su kvadratne ikone sa stranicama od 16, 32 i 48 piksela.
2. Tag
Tag
Oznaka ima dostupan atribut name, koji specificira naziv karte. Vrijednost atributa name za oznaku
Element
3. Tag
Tag opisuje samo jednu aktivnu regiju kao dio mape slike na strani klijenta. Element nema završnu oznaku. Ako se jedno aktivno područje preklapa s drugim, implementira se prva veza sa liste područja.
| Atribut | Kratki opis |
|---|---|
| alt | Postavlja alternativni tekst za aktivno područje karte. |
| coords | Određuje položaj područja na ekranu. Koordinate su date u jedinicama dužine i odvojene zarezima: Za krug— koordinate centra i polumjera kruga; Za pravougaonik— koordinate gornjeg lijevog i donjeg desnog ugla; Za poligon— koordinate vrhova poligona u traženom redoslijedu; također se preporučuje da se naznače posljednje koordinate, jednake prvoj, za logički završetak slike. |
| skinuti | Dopunjuje atribut href i govori pretraživaču da bi se resurs trebao učitati u trenutku kada korisnik klikne na vezu, umjesto da ga, na primjer, mora prvo otvoriti (kao PDF fajl). Specificiranjem imena za atribut, tako dajemo ime učitanom objektu. Dozvoljeno je koristiti atribut bez specificiranja njegove vrijednosti. |
| href | Određuje URL za vezu. Može se specificirati apsolutna ili relativna adresa veze. |
| hreflang | Određuje jezik pridruženog web dokumenta. Koristi se samo u kombinaciji s atributom href. Prihvaćene vrijednosti su skraćenica koja se sastoji od para slova koja označavaju kod jezika. |
| medija | Određuje za koje tipove uređaja će datoteka biti optimizirana. Vrijednost može biti bilo koji medijski upit. |
| rel | Proširuje href atribut informacijama o odnosu između trenutnog i povezanog dokumenta. Prihvaćene vrijednosti: alternativna - veza do alternativne verzije dokumenta (na primjer, odštampani oblik stranice, prijevod ili ogledalo). autor — veza do autora dokumenta. bookmark - Trajni URL koji se koristi za oznake. pomoć - link za pomoć. licenca - link do informacija o autorskim pravima za ovaj web dokument. next/prev - označava odnos između pojedinačnih URL-ova. Zahvaljujući ovom označavanju, Google može utvrditi da je sadržaj ovih stranica povezan u logičnom slijedu. nofollow - sprečava pretraživač da prati linkove na datoj stranici ili određenom linku. noreferrer - označava da prilikom praćenja linka pretraživač ne bi trebao poslati HTTP zaglavlje zahtjeva (Referrer), koje bilježi informacije o tome s koje stranice je došao posjetitelj stranice. prefetch - označava da ciljni dokument treba biti keširan, tj. Pretraživač u pozadini preuzima sadržaj stranice u svoju keš memoriju. pretraga - Označava da ciljni dokument sadrži alat za pretraživanje. tag - specificira ključnu riječ za trenutni dokument. |
| oblik | Određuje oblik aktivnog područja na karti i njegove koordinate. Može uzeti sljedeće vrijednosti: rect — pravougaona aktivna oblast; krug — aktivno područje u obliku kruga; poli — aktivno područje u obliku poligona; zadano — aktivno područje zauzima cijelo područje slike. |
| cilj | Određuje gdje će se dokument preuzeti kada se klikne na vezu. Prihvata sljedeće vrijednosti: _self — stranica se učitava u trenutni prozor; _blank — stranica se otvara u novom prozoru pretraživača; _parent — stranica se učitava u roditeljski okvir; _top - stranica se učitava u cijelom prozoru pretraživača. |
| tip | Određuje MIME tip datoteka linkova, tj. ekstenzija datoteke. |
4. Primjer kreiranja slikovne karte
1) Označite originalnu sliku u aktivna područja željenog oblika. Koordinate područja mogu se izračunati pomoću programa za obradu fotografija, na primjer, Adobe Photoshop ili Paint.
Rice. 1. Primjer označavanja slike za kreiranje karte 2) Podesite naziv kartice dodavanjem na oznaku
Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers">
!}
Rice. 2. Primjer kreiranja mape slike, kada kliknete kursorom miša na cvijet, idete na stranicu s opisom
Slike na web stranicama mogu se koristiti na dva načina: kao pozadina i kao nezavisna slika. Preporučuje se korištenje tri grafička formata: JPEG, GIF i PNG. Svi pretraživači ih podržavaju; drugi formati mogu zahtijevati posebne alate.
Obično se sve slike za web lokaciju pohranjuju u posebnu mapu, na primjer, slike. A putevi do slika su napisani na isti način kao i na linkovima. Ako ste zaboravili, pogledajte.
U svim narednim primjerima, putanje do slika će se pisati na osnovu činjenice da se slike nalaze u folderu slika, a stranice u folderu web lokacije, na istom nivou.
Pozadinske slike
Pozadinska slika ispunjava cijeli prostor elementa za koji je određena. Dakle, navođenjem u oznaci atribut background="fon.gif", slika fon.gif će ispuniti cijeli prozor pretraživača.
Primjer koda: Rezultat
Prilikom navođenja pozadinske slike dokumenta, ne zaboravite navesti i parametar bgcolor. To je zbog činjenice da je korisnik možda onemogućio učitavanje slike i neće vidjeti vašu lijepu pozadinu. Tada će pretraživač koristiti parametar bgcolor.
Ugrađivanje slika
Oznaka se koristi za postavljanje slika na stranicu
, koji ima jedan potreban parametar src, koji specificira URL slike.
Primjer koda:
img tag Ostatak sadržaja dokumenta
rezultat:
Ostatak sadržaja dokumenta
Slažem se, tekst pored slike ne izgleda baš lijepo.
Da bi naše slike izgledale onako kako želimo, moramo ih poravnati. A parametar će nam pomoći u tome poravnati.
Ovaj parametar ima nekoliko značenja. Pogledajmo ih sve na primjerima.
Primjer koda s parametrom poravnati = "lijevo"
img tag sa parametrom align="left" Slika je na lijevoj strani, a tekst teče oko nje sa desne strane, a ovaj tekst može zauzeti nekoliko redova.
rezultat:
Slika je lijevo, a tekst teče oko nje sa desne strane, a ovaj tekst može zauzeti nekoliko redova.
Primjer koda s parametrom align="desno"
img tag sa parametrom align="right" Slika je na desnoj strani, a tekst teče oko nje na lijevoj strani, a ovaj tekst može zauzeti nekoliko redova.
rezultat:
Slika je desno, a tekst teče oko nje s lijeve strane, a ovaj tekst može zauzeti nekoliko redova.
Primjer koda s parametrom align="top"
img tag sa align="top" Gornja granica slike je poravnata sa najvišim elementom tekuće linije. Čini se da je slika ugrađena u liniju. Ako je slika velika, linija se proširuje na ovu visinu.
rezultat:
Gornja granica slike je poravnata sa najvišim elementom trenutne linije. Čini se da je slika ugrađena u liniju. Ako je slika velika, linija se proširuje na ovu visinu.
Primjer koda s parametrom align="texttop"
img tag sa align="texttop" Gornja ivica slike je poravnata sa najvišim tekstualnim elementom tekuće linije (veliko slovo linije).
rezultat:
Gornja ivica slike je poravnata sa najvišim tekstualnim elementom tekuće linije (veliko slovo linije).
Primjer koda s parametrom align="sredina"
img tag sa parametrom align="middle" Poravnava sredinu slike sa osnovnom linijom trenutne linije.
rezultat:
Poravnava sredinu slike sa osnovnom linijom trenutne linije. * veliki font je napravljen kako bi razlika između srednjeg i absmiddle bila jasnija
Primjer koda s parametrom align="absmiddle"
img tag sa parametrom align="absmiddle" Poravnava sredinu slike sa sredinom tekuće linije.
rezultat:
Poravnava sredinu slike sa sredinom trenutne linije.
Primjer koda s parametrom align="bottom"
img tag sa parametrom align="bottom" Poravnava donju ivicu slike sa osnovnom linijom trenutne linije.
rezultat:
Poravnava donju ivicu slike sa osnovnom linijom trenutne linije.
Primjer koda s parametrom align="absbottom"
img tag sa parametrom align="absbottom" Poravnava donju ivicu slike sa donjom ivicom tekuće linije.
rezultat:
Poravnava donju ivicu slike sa donjom ivicom trenutne linije.
Ako želimo da se tekst nalazi ispod slike, onda moramo koristiti tag
sa parametrom jasno, koji zabranjuje strujanje. Zamotavanje može biti zabranjeno na desnoj strani (desno), na lijevoj strani (lijevo) i na obje strane (sve).
Primjer koda:
Zabrana umotavanja slika
Ostali elementi dokumenta
rezultat:
Ostali elementi dokumenta
Veličine slika
Svaka slika ima veličinu navedenu u pikselima. Kada ugrađujete sliku na stranicu, možda ćete morati smanjiti veličinu originalne slike.
U tu svrhu oznaka
postoje parametri širina- širina i visina- visina. Oni su navedeni u pikselima ili procentima (procenat širine ekrana)
Kada učitate sliku, pretraživač će automatski skalirati vašu sliku na navedene parametre širine i visine. Samo imajte na umu da neprecizno podešavanje parametara može dovesti do promjene proporcija slike, a samim tim i do njenog izobličenja.
Primjer koda:
rezultat:
Odvajanje slika od teksta
Vjerovatno ste primijetili da se tekst jako lijepi za slike. Nije uvek lepo. Postoje opcije za rješavanje ovog problema hspace- horizontalno uvlačenje i vspace- vertikalna uvlaka. Uvlačenja su navedena u pikselima.
Primjer koda:
Oznaka img je uvučena Ostatak sadržaja dokumenta više nije zalijepljen za sliku.
rezultat:
Alternativni tekst
Ako je korisniku onemogućen način učitavanja slike, tada će umjesto slike vidjeti crveni krst (u Internet Exploreru) ili neku drugu ikonu (u drugim pretraživačima). Bilo bi lijepo da mu date naslutiti šta je prikazano na slici. Da biste to učinili, koristite parametar alt. Tekst iz ove opcije će biti prikazan umjesto slike (ako je način učitavanja slike onemogućen). Ako je slika prikazana, ovaj parametar daje nagoveštaj kada lebdite kursorom miša, iako ne u svim pretraživačima.
