U ovom materijalu ću vam reći o vrlo važnim HTML oznakama 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 istaknuti je u gomili. Međutim, zapamtite da pretjerana upotreba grafike na web stranici može biti loša stvar.
Nemojte pretrpavati svoju html stranicu slikama; stranica bi trebala biti lagana i ne bi trebala plašiti posjetitelje. Posjetitelj bi uvijek trebao usvojiti glavne informacije i ne biti ometen; umetnite slike u HTML samo tamo gdje je to potrebno.
na stranici Atributi oznake BODY 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šoj razini 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 trebate staviti sliku image.jpg na neko mjesto na html stranici, a naša slika će se nalaziti u istoj mapi (direktoriju) sa stranicom, tada trebate napisati sljedeći html kod:
Ako su slika i html stranica u različitim mapama ili direktorijima, tada trebate napisati put do slike u odnosu na stranicu. Na primjer, naša html stranica se nalazi u mapi ili direktoriju news, u istom direktoriju ili mapi nalazi se poddirektorij (folder) pop, u kojem se nalazi naša slika image.jpg, onda da biste je umetnuli morate napisati ovako :
Osim src atributa oznake Postoji još nekoliko izbornih, ali važnih atributa:
- širina — širina slike (možete odrediti piksele ili postotke);
- visina — visina slike (možete odrediti piksele ili postotke).
Ako ne navedete te atribute, preglednik će učitati stvarne dimenzije slike. Međutim, ne treba pretjerivati s vrijednostima ovih atributa, jer povećanje duljine ili širine slike može je iskriviti, što će uništiti, na primjer, fotografiju osobe, gdje će proporcije osobe biti promijeniti.
Kao što sam već napisao, dimenzije slike mogu se odrediti iu pikselima iu postocima. Dat ću vam samo primjer:
Još jedan primjer html koda:
Postoje slučajevi kada je mogućnost prikaza grafike, uključujući i slike, onemogućena u pregledniku, a kako vaša stranica ne bi izgubila smisao koristite atribut alt u koji upisujemo alternativni tekst ako slika nije učitana 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 s desne strane, a tekst pored nje s lijeve strane.
Evo HTML koda:
Tekst pored slike.
i preglednik će ispisati sljedeće:
Tekst pored slike.
HTML kod za pravu vrijednost:
Tekst pored slike.
html stranica će izgledati ovako:
Tekst pored slike.
Kako biste spriječili omatanje teksta oko slike, možete upotrijebiti prethodno spomenutu oznaku BR na stranici Formatting Text in HTML. Usput, BR oznaka ima jasan atribut, sa svojim vrijednostima vrijednosti:
- lijevo - ne prelamajte tekst, koji će biti poravnat ulijevo;
- desno - ne prelamajte tekst, koji će biti poravnat udesno;
- sve - ne prelomi tekst, koji će biti poravnat na lijevi i desni rub.
Bez atributa poravnanja, tekst će se prema zadanim postavkama omotati oko desnog dijela slike i gotovo u ravnini. Ako ne želite da se tekst tijesno omotava oko slike, možete koristiti sljedeće atribute:
- vspace - pravi gornju i donju marginu u pikselima;
- hspace - čini bočne margine (lijevu i desnu) u pikselima.
Dat ću jednostavan html kod kao primjer:
Ovo je tako lijepa slika.
Pokušajte sami vidjeti što se događa u ovom primjeru.
Također možete stvoriti okvir oko slike pomoću atributa border i odrediti njegovu veličinu u pikselima. Što je vrijednost veća, to je veći 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 stvoriti veze u HTML-u, kao i kako sliku učiniti vezom.
Datum objave: 15. svibnja 2012Većina web stranica sadrži grafiku. Omogućuje vam šareno i jasno predstavljanje informacija. U mnogim je slučajevima bolje pokazati sliku nego dati dug tekstualni opis.
Postoje dva načina za postavljanje grafike na stranicu:
- umetanje pojedinačnih slika;
- ispunjavanje pozadine slikom.
U svakom slučaju, grafička slika je preuzeta iz datoteke.
Umetanje grafičke slike iz datoteke grafičkog formata na stranicu vrši se pomoću oznake
(s engleskog, slika - slika) označavajući adresu datoteke kao argument atributu SRC:
Adresa grafičke datoteke je ili URL ili naziv datoteke, po mogućnosti sa stazom. 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 atribut LOWSRC (dodatni parametar), koji uzima adresu grafičke datoteke kao argument. Možete stvoriti dvije grafičke datoteke: jedna (na primjer, recimo logotip.jpg) sadrži sliku visoke razlučivosti, a druga (na primjer, logotip.gif) sadrži sliku niske razlučivosti. Zatim označite
Uputa pregledniku da prvo preuzme datoteku logotip.gif, a zatim je zamijeni datotekom logotip.jpg kako je primi.
Drugi način da se ubrza učitavanje grafike je određivanje dimenzija pravokutnog područja u koje će se grafika smjestiti pomoću atributa WIDTH i HEIGHT, mjerenih u pikselima. Ako navedete ove atribute, preglednik će prvo dodijeliti prostor za grafiku, pripremiti izgled dokumenta, prikazati tekst, a tek onda učitati grafiku. Imajte na umu da preglednik sažima ili rasteže sliku kako bi stala unutar navedene veličine okvira. Primjer određivanja dimenzija slike:
Grafika se obično koristi zajedno s tekstom, pa se javlja izazov poravnavanja teksta i grafike. Ovaj problem se rješava pomoću atributa USKLADITI označiti
koristeći razne argumente. Na primjer, možda želimo da tekst teče oko slike s desne ili lijeve strane. Obično je slika ugrađena blizu teksta, što može biti ružno. Kako biste to izbjegli, možete postaviti prazne margine oko ilustracije. Polja se stvaraju pomoću atributa VSPACE za gornju i donju marginu 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 poništili prelamanje teksta oko grafike, upotrijebite oznaku
.
Sljedeća oznaka postavlja grafiku iz datoteke logotip.jpg da prelama udesno (slika će biti lijevo od teksta):
Ako želite postaviti sliku desno od teksta, tada vam je potreban atribut USKLADITI dodijeliti argument PRAVO:
Da biste postavili margine oko slike, morate napisati oznaku poput:
Ovdje brojevi 20 i 10 određuju veličinu polja.
Razmotrimo primjer kombinirane upotrebe grafike i teksta. Otvorite Notepad (uređivač teksta Notepad) Windows. Napišite HTML kôd u njega koristeći gore navedene oznake. Ispod je program koji ispisuje nešto teksta i grafike. Možete koristiti bilo koju od datoteka koje imate kao grafičku datoteku. Datoteka koja se ovdje koristi je logotip.gif.
<Н1>Tekst se prelama oko grafike s desne strane
Ovo je primjer korištenja teksta i grafike zajedno.
Tekst HTML programa može se napisati u bilo kojem uređivaču teksta. Ovo koristi oznake za označavanje teksta.
Ovaj tekst se prikazuje iz novog odlomka. Da bismo to učinili, koristili smo posebnu oznaku.
Pokušajte promijeniti veličinu prozora preglednika. Primijetite kako se mijenja izgled teksta.
Riža. 657. Tekst se prelama oko slike s desne strane
Pružaju široke mogućnosti preciznog pozicioniranja slika (kao i drugih elemenata) na stranici stolovi I stilovi. O ovim HTML elementima bit će riječi kasnije. Na primjer, možete definirati tablicu bez vidljivih okvira, te postaviti slike, tekstove i druge elemente u ćelije te tablice.
Nadamo se da će vam ovaj članak biti koristan. Sretno čitanje!
Slike nam odmah daju shvatiti koliko nam određena stranica ili članak mogu biti zanimljivi, stvaraju raspoloženje i mogu otkriti temu na nov način. Ponekad jedna fotografija vrijedi tisuću riječi.
Ali ne biste trebali sudjelovati u njima ako nemate Instagram ili online trgovinu. Preporučljivo je da slike:
- bili informativni
- odgovaraju shemi boja vaše stranice
- bile prikladne
Ukoliko nemate odgovarajuću fotografiju, možete koristiti tzv fotostok (fotobanka) - mjesto gdje se pohranjuju mnoge fotografije, ilustracije i vektorska grafika. Postoji mnogo takvih izvora, možda ste čak čuli za jedan od najvećih - Shutterstock, ali tamo se preuzimanja plaćaju.
Za one koji ne vole preplatiti, na kraju smo pripremili članak bonus- popis nekoliko foto banaka gdje možete besplatno preuzeti ogromnu količinu kvalitetnih lijepih materijala :)
Formati slika
Postoje uglavnom 3 vrste slika koje se koriste na World Wide Webu:
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(Joint Photographic Experts Group - Zajednička skupina fotografskih stručnjaka - ovo je naziv razvojne organizacije)
pogodan za stvaranje visokokvalitetnih slika u punoj boji, fotografije. Veličina takvih slika je velika pa obično opterećuju poslužitelj. Ako trebate komprimirati jpeg (za manju težinu slike), preporučujemo da uzmete veličinu konačne slike višekratnik osam , tako da će gubitak kvalitete biti minimalan.
png(Prijenosna mrežna grafika - Prijenosna mrežna grafika. Izgovara se na isti način kao ping, tj. )
ovaj je format izvorno razvijen za web, tj. Slika obično malo teži i ne usporava stranicu prilikom učitavanja. Ovaj format je stvoren 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 milijuna boja, iako je već prilično težak. Png-32 sadrži isti broj boja kao png-24, a plus vam omogućuje da dobijete sliku s prozirnom pozadinom , a možete podesiti i stupanj prozirnosti. Kada se smanjuje veličina png-a, nema gubitka u kvaliteti boje.
Sažmimo
gif- za animaciju
jpeg- za fotografije
png- za ikone, gumbe, pozadine, logotipe, snimke zaslona, crteže, tekstove, fotografije s prozirnom pozadinom
Umetanje slike u html datoteku
Za dodavanje slike na stranicu, koristite označiti
(od engleske slike - slika, slika). Ovo je jedna oznaka i ne treba oznaku za zatvaranje. Ova oznaka sadrži atribute unutra.
Atribut src(od engleskog izvora - izvor) označava put do datoteke (mjesto gdje se nalazi slika). Ako je slika na vašem računalu (stranica je još u razvoju) ili na vašem poslužitelju, koristite relativnu poveznicu. Ako je slika s mreže, tada je potrebna apsolutna veza. Kako to učiniti pročitajte u članku "Linkovi".
Dakle, da biste povezali sliku sa svojom web stranicom, trebate napisati kod poput ovog:
atribut alt(od engleske alternative - alternativa) označava tekst koji će korisnik vidjeti ako se slika ne učita. Staza je netočno naznačena, slika je izbrisana, loš internet - razloga može biti mnogo, a poželjno je da osoba razumije što se krije iza ove omražene ikone.
Tražilice jako paze na to da ovaj atribut bude ispunjen. A html validator (resurs za provjeru ispravnosti koda) će izostanak alt atributa shvatiti kao pogrešku. Ako su svi atributi
U donjem primjeru namjerno smo naveli nepostojeći put za sliku kako biste mogli vidjeti kako atribut alt radi
Visina i širina slika
Također možete postaviti visinu i širinu slike ako je originalna slika npr. više nego što ti treba.
U HTML5 preporuča se to učiniti pomoću CSS-a ili atribut stila
, kao ovo:
U ovom smo primjeru uzeli 30% širine, ne izvorne slike, već veličine prozora preglednika. Kada je širina = 100%, slika se otvara cijelom širinom preglednika. Zapamtite ovu značajku postotak, 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 = "width:30%;" > |
Također možete postaviti širinu i visinu piksela. U slučaju naše pande, čije su izvorne dimenzije 1196 x 796 piksela, kako životinja ne bi patila pri sabijanju, moramo zadržati proporcije, a ovdje ne možete bez kalkulatora. Recimo da želimo smanjiti veličinu slike 3 puta, tada trebamo postaviti dimenzije na 399 x 265 piksela.
Imajte na umu da ako proporcionalno povećavamo sliku, tada je dovoljno navesti samo jedan parametar, na primjer. širina. Pametni preglednik će sam 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 slike učitavaju dulje od ostatka html koda. Ako preglednik zna koliko prostora treba rezervirati za slike, može nastaviti s učitavanjem stranice bez čekanja da se slike učitaju.
Mali naftalin
Ako slučajno petljate s kodom web-mjesta stvorenog u HTML-4 ili čak ranije, primijetit ćete da su veličine slika postavljene posebnim atributi širine I visina. Ovo je zastarjela metoda, iako je još uvijek važeća u HTML5. Međutim, preporučujemo korištenje stila, jer Na atribute širine i visine mogu utjecati unutarnji ili vanjski stilovi koji će živjeti u pregledniku ili vašoj CSS datoteci. Ući ćemo u više detalja o ovome kada budemo gledali CSS, ali za sada pogledajte samo primjer kako stilovi utječu na atribute visine i širine.
U ovom prozoru postoje 3 kartice: na prvoj vidite html kod, na drugoj CSS kod, a na zadnjoj - kao i uvijek, rezultat. Ovo funkcionira kao da je prva kartica datoteka index.html, druga datoteka style.css, a treća preglednik. Dakle, sada naš CSS kaže da svi elementi s oznakom img imaju širinu od 100%. Zadane veličine atributa širine i visine su u pikselima, tako da ovdje nema potrebe dodavati jedinice.
Razlika u rezultatima je očita :)
Također u starijim verzijama html-a korišteni su sljedeći atributi:
uskladiti, koji je korišten za vodoravno ili okomito poravnavanje slike.
hspace- uvlačenje s lijeve i desne strane slike u odnosu na okolni sadržaj (na primjer, tekst ili susjedna slika)
vspace- uvlačenje iznad i ispod od slike do sadržaja oko nje.
granica- postavite debljinu okvira oko slike (standardno je nula)
Danas se sve ove manipulacije (i mnogo više) rade pomoću CSS-a, pa smo odlučili da vas ne zamaramo time ovdje. Ako vas još uvijek zanima kako raditi s ovim atributima, napišite u komentarima, mi ćemo dodati ovu stavku :)
Postavljanje slike u kod
Odakle postavljamo svoju oznaku ovisi o tome kako će se prikazati u pregledniku.
Primjer br. 1 - prije paragrafa:
Elementi kao što su
I
odnositi se na blok elementi
. Uvijek počinju u novom retku i zauzimaju cijelu dostupnu širinu prozora preglednika. Ako prvo mjesto ![]()
, a nakon njega element bloka, na primjer odlomak, premjestit će se u sljedeći redak.
Primjer br. 2 - na početku odlomka
Ovo je umetnuti element, uklapa se u blok element i ne započinje novi redak. U gornjem primjeru tekst se prelama oko slike jer kod
registriran unutra
Natpisi za ilustracije
Da biste označili ili potpisali fotografiju na stranici, koristite označiti
Označiti
Imajte na umu da preglednik prema zadanim postavkama ima neke postavke stila za oznaku
Dakle, ti i ja smo naučili
- dodajte sliku na stranicu: pomoću označiti
- naučio potrebne atribute za ovu oznaku: src za označavanje puta i alt opisati sliku
- razumjeti koji je format bolji i što koristiti: jpeg za fotografije, png za logotipe i snimke zaslona, gif za animaciju
- kako najbolje postaviti dimenzije slike: pomoću atribut stila s parametrima širina I visina
- Shvatili smo kako će slika biti prikazana ovisno o mjestu u kodu: odvojeno ako je ispred blok elementa i s omotom ako je unutar blok elementa (npr.
)
A da bismo imali s čime raditi, te slike moramo odnekud uzeti, a da ne kršimo ničija autorska prava.
Dakle, vrijeme je za bonus :)
Popis besplatnih banaka fotografija
Prije nego što počnemo, imajte na umu da je svaka snimka zaslona ovdje poveznica na web mjesto. Kako napraviti slike kao poveznice, pročitajte u članku "Veze".
Na pixabayu ćete pronaći 680 tisuća besplatnih slika na bilo koju temu, koje se distribuiraju pod licencom Creative Commons CCO (CC Zero), t.j. mogu se koristiti, distribuirati, modificirati u bilo koju svrhu, čak i komercijalnu.
Banka fotografija sadrži 390 tisuća besplatnih fotografija i slika. Ovdje je teže pronaći cool sliku, ali ima i dobrih primjera. Oglašavanje plaćenih foto banaka prilično je ometajuće. Stavili smo ovaj resurs na drugo mjesto zbog broja slika, ali u smislu ljubaznosti vjerojatno će biti zadnji na našem rangiranju.
Photostock ima više od 250 tisuća besplatnih fotografija, uglavnom visoke kvalitete. Možete preuzeti čak i bez registracije. Dostupno samo na engleskom jeziku.
Mnoštvo elegantnih fotografija licenciranih pod CC Zero. Možete preuzeti bez registracije. Ova banka fotografija također će vas razumjeti samo na engleskom.
Stranicu je izradio indijski web dizajner koji razumije koliko teško može biti pronaći fotografije visoke kvalitete. Sve fotografije je napravio on osobno i s njima možete raditi što god želite. Voli fotografirati hranu, desktop, računala i sve vrste predmeta. Pretraživanje - samo na engleskom.
HTML slike dodano na web stranice pomoću oznake . Upotreba grafike čini web stranice vizualno privlačnijim. Slike pomažu u boljem prenošenju suštine i sadržaja web dokumenta.
Korištenje HTML oznaka
Umetanje slika u HTML dokument
1. Oznaka ![]()
Element predstavlja sliku i njezin rezervni sadržaj, koji se dodaje pomoću atributa alt. Budući da element
je malim slovima, preporučljivo je staviti ga unutar blok elementa, na primjer,
Ili
Označiti ima potreban atribut src č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 opis alata kada mišem prijeđete iznad slike. Sintaksa: alt="opis slike" . !} |
| unakrsno podrijetlo | Atribut crossorigin omogućuje učitavanje slika iz izvora na drugoj domeni pomoću CORS zahtjeva. Slike učitane na platno pomoću CORS zahtjeva mogu se ponovno koristiti. Dopuštene vrijednosti: anonimno - Zahtjev s različitim izvorima postavlja se pomoću HTTP zaglavlja i ne prenose se vjerodajnice. Ako poslužitelj ne pruži vjerodajnice poslužitelju od kojeg se traži sadržaj, slika će biti oštećena i njezina će upotreba biti ograničena. use-credentials — Cross-origin zahtjev se izvodi prosljeđivanjem vjerodajnica. Sintaksa: crossorigin="anonimno" . |
| visina | Atribut visine određuje visinu slike. Može se navesti u px ili %. Sintaksa: visina: 300 px. |
| ismapa | Atribut ismap označava da je slika dio slike karte koja se nalazi na poslužitelju (slika karte je slika s područjima na koja se može kliknuti). Kada kliknete na sliku karte, koordinate se šalju poslužitelju kao URL upitni niz. Atribut ismap dopušten je samo ako element Sintaksa: ismap. |
| longdesc | Prošireni URL opisa slike koji nadopunjuje atribut alt. Sintaksa: longdesc="http://www.example.com/description.txt" . |
| src | Atribut src navodi stazu do slike. Sintaksa: src="cvijet.jpg" . |
| veličine | Postavlja veličinu slike ovisno o opcijama prikaza. Radi samo kada je naveden atribut srcset. Vrijednost atributa je jedan ili više nizova, odvojenih zarezima. |
| srcset | Stvara popis izvora slike koji će biti odabrani na temelju rezolucije zaslona. Može se koristiti zajedno s atributom src ili umjesto njega. Vrijednost atributa je jedan ili više nizova, odvojenih zarezima. 
|
| mapa korištenja | Atribut usemap navodi sliku kao mapu slike. Vrijednost mora započeti simbolom #. Vrijednost je povezana s vrijednošću naziva oznake ili id atributa |
| š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 biti navedena u cijelosti (apsolutni URL), na primjer:
url(http://anysite.ru/images/anyphoto.png)
Ili relativnim putem od dokument ili korijenski direktorij web stranica:
url(../images/anyphoto.png) - relativna putanja iz dokumenta,
url(/images/anyphoto.png) - relativna staza iz korijenskog direktorija.
To se tumači na sljedeći način:
../ - znači ići jednu razinu gore, u korijenski direktorij,
slike/ - idite u mapu sa slikama,
anyphoto.png - pokazuje na slikovnu datoteku.
1.2. Dimenzije slike
Bez postavljanja dimenzija slike, crtež se prikazuje na stranici u stvarnoj veličini. Možete urediti dimenzije slike pomoću atributa š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 (Joint Photographic Experts Group). JPEG slike idealne su za fotografije i mogu sadržavati milijune različitih boja. Slike se sažimaju bolje od GIF-ova, ali tekst i velika područja pune boje mogu postati mrljasta.
GIF format (Format za razmjenu grafike). Idealno za sažimanje slika koje imaju područja pune boje, kao što su logotipi. GIF vam omogućuje da postavite jednu od boja da bude prozirna, dopuštajući da se pozadina web stranice vidi kroz dio slike. GIF-ovi također mogu sadržavati jednostavnu animaciju. GIF slike sadrže samo 256 nijansi, zbog čega slike izgledaju mrljave i nerealnih boja, poput postera.
PNG format (Prijenosna mrežna grafika). Uključuje najbolje značajke GIF i JPEG formata. Sadrži 256 boja i omogućuje jednu od boja učiniti prozirnom, dok komprimira slike u manju veličinu od GIF datoteke.
APNG format (Animirana prijenosna mrežna grafika). Format slike temeljen na PNG formatu. Omogućuje pohranjivanje animacije i također podržava transparentnost.
SVG format (Skalabilna vektorska grafika). SVG crtež sastoji se 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 razne transformacije, alfa maske, efekte filtera i mogućnost korištenja predložaka. Veličina SVG slika može se promijeniti bez gubitka kvalitete.
BMP format (bitmap slika). To je nekomprimirana (izvorna) rasterska slika čiji je predložak pravokutna mreža piksela. Bitmap datoteka sastoji se 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 ne sastoje se od više od 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 Windows). Format pohrane ikone datoteke u sustavu Microsoft Windows. Također, Windows ikona se koristi kao ikona na web stranicama na Internetu. To je slika ovog formata koja se prikazuje pored adrese web stranice ili oznake u pregledniku. Jedna ICO datoteka sadrži jednu ili više ikona, od kojih se svaka veličina i boja mogu zasebno postaviti. 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. Označite
Označiti
Oznaka ima dostupan atribut naziva koji specificira naziv karte. Vrijednost atributa name za oznaku
Element
3. Označite
Označiti opisuje samo jednu aktivnu regiju kao dio karte slike na strani klijenta. Element nema završnu oznaku. Ako se jedno aktivno područje preklapa s drugim, implementirat će se prva veza s popisa područja.
| Atribut | Kratki opis |
|---|---|
| alt | Postavlja alternativni tekst za aktivno područje karte. |
| koordinate | Određuje položaj područja na ekranu. Koordinate su dane u jedinicama duljine i odvojene zarezima: Za krug— koordinate središta i polumjer kruga; Za pravokutnik— koordinate gornjeg lijevog i donjeg desnog kuta; Za poligon— koordinate vrhova poligona u traženom redoslijedu; također se preporučuje navesti posljednje koordinate, jednake prvima, za logično dovršenje slike. |
| preuzimanje datoteka | Nadopunjuje atribut href i govori pregledniku da se resurs treba učitati u trenutku kada korisnik klikne vezu, umjesto da ga, na primjer, mora prvo otvoriti (poput PDF datoteke). Određivanjem imena za atribut, mi time dajemo ime učitanom objektu. Dopušteno je koristiti atribut bez navođenja njegove vrijednosti. |
| href | Određuje URL za vezu. Može se navesti 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 kratica koja se sastoji od para slova koja označavaju kod jezika. |
| medijima | Određuje za koje će vrste uređaja datoteka biti optimizirana. Vrijednost može biti bilo koji medijski upit. |
| rel | Proširuje atribut href informacijama o odnosu između trenutnog i povezanog dokumenta. Prihvaćene vrijednosti: alternativni - poveznica na alternativnu verziju dokumenta (na primjer, tiskani oblik stranice, prijevod ili ogledalo). autor — veza do autora dokumenta. knjižna oznaka - Trajni URL koji se koristi za oznake. pomoć - poveznica za pomoć. licenca - veza na informacije o autorskim pravima za ovaj web dokument. sljedeći/prethodni - 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 nizu. nofollow - sprječava tražilicu da prati poveznice na danoj stranici ili određenu poveznicu. noreferrer - označava da prilikom praćenja poveznice preglednik ne bi trebao slati zaglavlje HTTP zahtjeva (Referrer), koje bilježi informacije o tome s koje stranice je posjetitelj stranice došao. prefetch - označava da se ciljni dokument treba predmemorirati, tj. Preglednik u pozadini preuzima sadržaj stranice u svoju predmemoriju. pretraživanje - Označava da ciljni dokument sadrži alat za pretraživanje. oznaka - određuje 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 — pravokutno aktivno područje; 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. Prihvaća sljedeće vrijednosti: _self — stranica se učitava u trenutni prozor; _blank — stranica se otvara u novom prozoru preglednika; _parent — stranica se učitava u nadređeni okvir; _top - stranica se učitava u cijelom prozoru preglednika. |
| tip | Određuje MIME tip datoteka veze, tj. ekstenzija datoteke. |
4. Primjer izrade slikovne karte
1) Označite izvornu sliku u aktivna područja željenog oblika. Koordinate područja mogu se izračunati pomoću programa za obradu fotografija, npr. Adobe Photoshop ili Boja.
Riža. 1. Primjer označavanja slike za izradu karte 2) Postavite naziv kartice tako da ga dodate u oznaku
Jpg" alt="foto_cvijeća" width="680" height="383" usemap="#flowers">
!}
Riža. 2. Primjer izrade slikovne karte, 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 samostalna slika. Preporuča se korištenje tri grafička formata: JPEG, GIF i PNG. Svi ih preglednici podržavaju; drugi formati mogu zahtijevati posebne alate.
Obično su sve slike za web mjesto pohranjene u zasebnoj mapi, na primjer, slike. I staze do slika su napisane na isti način kao u poveznicama. Ako ste zaboravili, pogledajte.
U svim sljedećim primjerima, staze do slika bit će napisane na temelju činjenice da su slike u mapi slika, a stranice u mapi web mjesta, koja se nalazi na istoj razini.
Pozadinske slike
Pozadinska slika ispunjava cijeli prostor elementa za koji je određena. Dakle, navođenjem u oznaci atribut pozadina="fon.gif", slika fon.gif ispunit će cijeli prozor preglednika.
Uzorak 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 preglednik koristiti parametar bgcolor.
Ugradnja slika
Oznaka se koristi za postavljanje slika na stranicu
, koji ima jedan traženi parametar src, koji navodi URL slike.
Primjer koda:
img tag Ostatak sadržaja dokumenta
Proizlaziti:
Ostatak sadržaja dokumenta
Slažem se, tekst pored slike ne izgleda baš lijepo.
Kako bi naše slike izgledale onako kako želimo, moramo ih uskladiti. A parametar će nam pomoći u tome uskladiti.
Ovaj parametar ima nekoliko značenja. Pogledajmo ih sve na primjerima.
Primjer koda s parametrom poravnaj="lijevo"
img tag s parametrom align="left" Slika je s lijeve strane, a tekst teče oko nje s desne strane i taj tekst može zauzimati nekoliko redaka.
Proizlaziti:
Slika je lijevo, a tekst teče oko nje desno i taj tekst može zauzimati nekoliko redaka.
Primjer koda s parametrom poravnaj="desno"
img tag s parametrom align="right" Slika je s desne strane, a tekst teče oko nje s lijeve strane i taj tekst može zauzimati nekoliko redaka.
Proizlaziti:
Slika je desno, a tekst teče oko nje lijevo i taj tekst može zauzimati nekoliko redaka.
Primjer koda s parametrom align="top"
img tag s align="top" Gornji obrub slike poravnat je s najvišim elementom trenutnog retka. Čini se da je slika ugrađena u liniju. Ako je slika velika, linija se proširuje do ove visine.
Proizlaziti:
Gornji obrub slike poravnat je s najvišim elementom trenutnog retka. Čini se da je slika ugrađena u liniju. Ako je slika velika, linija se proširuje do ove visine.
Primjer koda s parametrom align="texttop"
img tag s align="texttop" Gornji obrub slike poravnat je s najvišim tekstualnim elementom trenutnog retka (veliko slovo retka).
Proizlaziti:
Gornji obrub slike poravnat je s najvišim tekstualnim elementom trenutnog retka (veliko slovo retka).
Primjer koda s parametrom align="sredina"
oznaka img s parametrom align="middle" Poravnava sredinu slike s osnovnom crtom trenutnog retka.
Proizlaziti:
Poravnava sredinu slike s osnovnom linijom trenutnog retka. * veliki font napravljen je kako bi razlika između sredine i absmiddle bila jasnija
Primjer koda s parametrom align="apsmiddle"
oznaka img s parametrom align="absmiddle" Poravnava sredinu slike na sredinu trenutnog retka.
Proizlaziti:
Poravnava sredinu slike sa sredinom trenutnog retka.
Primjer koda s parametrom align="bottom"
oznaka img s parametrom align="bottom" Poravnava donji obrub slike s osnovnom crtom trenutnog retka.
Proizlaziti:
Poravnava donji obrub slike s osnovnom linijom trenutnog retka.
Primjer koda s parametrom align="absbottom"
oznaka img s parametrom align="absbottom" Poravnava donji obrub slike s donjim obrubom trenutnog retka.
Proizlaziti:
Poravnava donji obrub slike s donjim obrubom trenutnog retka.
Ako želimo da se tekst nalazi ispod slike, onda moramo koristiti tag
s parametrom čisto, koji zabranjuje protok okolo. Motanje može biti zabranjeno na desnoj strani (desno), na lijevoj strani (lijevo) i na obje strane (sve).
Primjer koda:
Zabrana prelamanja slike
Ostali elementi dokumenta
Proizlaziti:
Ostali elementi dokumenta
Veličine slika
Svaka slika ima veličinu određenu u pikselima. Kada ugrađujete sliku na stranicu, možda ćete morati smanjiti veličinu izvorne slike.
U tu svrhu oznaka
postoje parametri širina- širina i visina- visina. Navedeni su u pikselima ili postocima (postotak širine zaslona)
Kada učitate sliku, preglednik će automatski skalirati vašu sliku na navedene parametre širine i visine. Samo imajte na umu da netočno postavljanje parametara može dovesti do promjene proporcija slike, a time i do njezinog izobličenja.
Primjer koda:
Proizlaziti:
Odvajanje slika od teksta
Vjerojatno ste primijetili da se tekst jako lijepi uz slike. Nije uvijek lijepo. Postoje opcije za rješavanje ovog problema hspace- horizontalno uvlačenje i vspace- okomita uvlaka. Uvlake su navedene u pikselima.
Primjer koda:
Oznaka img je uvučena. Ostatak sadržaja dokumenta više nije zalijepljen za sliku.
Proizlaziti:
Alternativni tekst
Ako je korisniku onemogućen način učitavanja slike, tada će umjesto slike vidjeti crveni križ (u Internet Exploreru) ili drugu ikonu (u drugim preglednicima). Bilo bi lijepo dati mu naslutiti ono što je prikazano na slici. Da biste to učinili, upotrijebite parametar alt. Tekst iz ove opcije bit će prikazan umjesto slike (ako je način učitavanja slike onemogućen). Ako je slika prikazana, ovaj parametar daje savjet kada lebdite kursorom miša, iako ne u svim preglednicima.
