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 ih trebali uživati ako niste na Instagramu ili internetskoj trgovini. Preporučljivo je da slike:
- bili informativni
- dopisivali shema boja vaše stranice
- bile prikladne
Ako nemate prikladna fotografija, možete koristiti tzv fotostok (fotobanka) - mjesto gdje se nalaze 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
U Svjetska mreža Uglavnom se 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, tzv 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 daju težak teret na 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 - Prijenosni 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 prozirna pozadina , a možete podesiti i stupanj prozirnosti. Kada se png veličina smanji, 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.
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 relativna veza. Ako je slika s mreže, onda trebate apsolutna referenca. 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čna, slika je obrisana, loš internet- može biti mnogo razloga, a preporučljivo je da osoba shvati š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
, ovako:
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:
poravnati, 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 susjednu sliku)
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 foto banaka
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 Creative Commons CCO (CC Zero) licencom, tj. 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.
Slike su možda te koje tvore naše opće razumijevanje World Wide Weba. Složite se da ljudi općenito bolje pamte grafičke informacije nego tekstualne. Stoga su slike važan dio svake web stranice i svake web stranice. I zato vam želim reći kako umetnuti sliku u html.
Umetanje slike u html pomoću oznake
Sigurno znate da se sve naredbe u html-u izvršavaju pomoću oznaka. Pa smo osmislili vlastitu oznaku za slike - . Jednostruka je, odnosno nema završni dio.
Najvažniji atribut img taga je src (source) – put do slike. U njega upisujete adresu na kojoj se slika nalazi. Može se napisati kao apsolutni ( web stranica/slike/slike2/slika.jpg) ili kao relativno ( slike/slike2/slika.jpg).
Oba puta vode do iste datoteke image.jpg koja se nalazi u mapi image2. Ono se pak nalazi u direktoriju slika, a ono je u korijenskoj mapi. Ako sve relativno zapišete, onda kada promijenite naziv domene svoje stranice, sve će ostati operativno. Na primjer, WordPress uređivač prema zadanim postavkama umeće apsolutne adrese. Ali osobno neću mijenjati domenu i to mi odgovara.
Dodatni atributi i dizajn putem css-a
Dakle, skrenimo s teme Za prikaz slike dovoljno je navesti atribut src, ali postoje mnogi drugi atributi za njen dizajn.
- širina i visina – širina i visina slike. Može se postaviti u odgovarajućim atributima u oznaci img
- align – poravnanje slike u odnosu na tekst. Prema zadanim postavkama poravnat je ulijevo. Možete ga staviti i desno i središte (desno, središte)
- alt – alternativni tekst koji će se prikazati ako je korisnik onemogućio prikaz slika u pregledniku. Korisno ga je ispuniti
- naslov je skoro isti. Neka vrsta opisa slike koja će se prikazati kada kursorom prijeđete iznad nje
- vspace i hspace – vertikalni i horizontalni razmak slike od ostatka sadržaja. Pažnja! Atributi su već zastarjeli i bolje je postaviti ove uvlake kroz stilski list
- klasa – klasa stila koja je priložena slici i na nju primjenjuje neke stilove
Ubaci ovako slatku sliku. Stvarno želim pjevati kad je pogledam Ovdje smo dodali klasu za pregled slike i sada pomoću CSS-a možemo pristupiti slici preko nje.
Preview( Padding: 20px; Margin: 10px; Border: 5px full orange; Transform: skewX(10deg); box-shadow: 0 0 15px 10px purple )
Dobro? Je li ovo očito bolje od formatiranja samo pomoću HTML-a?
Dopustite mi da to sažmem
Dakle, da biste prikazali sliku, samo trebate napisati oznaku img i uključiti atribut src u nju, koji određuje putanju do slike. Sve ostalo su dodatne značajke - poravnanje, dimenzije, alternativni tekst, rotacije, okviri itd.
I na kraju, idealno bi sve ovo bilo napisano kroz CSS. Odnosno, nemojte postavljati dimenzije u atributima, već dodajte dodatnu klasu stila na sliku, koja će odrediti dimenzije. Isto je i s poravnanjem, koje se u CSS-u može učiniti korištenjem svojstva text-align, kao i s plutajućim blokovima.
Mislim da sada imate ideju kako umetnuti sliku u html i normalno je formatirati. Vidimo se u sljedećim člancima.
Rad sa slikama u HTML-u (kako umetnuti sliku, promijeniti joj veličinu, napraviti vezu od slike).Umetanje slike
Neuparena oznaka koristi se za umetanje slike u HTML dokument
, koji se postavlja na mjesto u dokumentu gdje treba umetnuti sliku. Ova oznaka ima obavezni parametar src, čija vrijednost određuje put do željene slike u direktoriju vaše stranice.
Na primjer, da postavite sliku na stranicu:
Sljedeći redak postavljen je na pravo mjesto u dokumentu:
To pregledniku daje do znanja da je korijenski direktorij web-mjesta www.mysite.com postoji poddirektorij img 1.png
Ovdje smo naveli puni put (ili apsolutna adresa) na sliku. Možete li navesti relativna adresa slike:
Preglednik tumači ovaj redak na sljedeći način: u direktoriju u kojem se nalazi ovaj html dokument nalazi se poddirektorij img, sadrži sliku s imenom 1.png, koje treba staviti na stranicu.
Ovdje je primjer navođenja relativne adrese slike ako vaša web stranica ima složeniju strukturu i prethodni primjer nije prikladan:
Preglednik tumači ovaj redak na sljedeći način: kombinacija znakova ../ znači da se morate popeti jednu razinu gore iz direktorija u kojem se nalazi ovaj html dokument; a zatim kao u prethodnom primjeru: u imeniku u kojem se nalazimo nalazi se poddirektorij img, sadrži sliku s imenom 1.png, koje treba staviti na stranicu.
Iz sigurnosnih razloga, poželjno je navesti relativnu adresu slike, osim u slučajevima kada na svoju stranicu postavite sliku koja se nalazi na drugom mjestu.
Dimenzije slike
Veličinu svake slike određuju dva parametra: širina i visina. Na oznaci
Postoje odgovarajući parametri: širina I visina. Ovi parametri uzimaju vrijednosti u pikselima (px).
Možete postaviti stvarne dimenzije slike:
Ovo nije potrebno, ali je korisno jer... malo ubrzava proces učitavanja stranice od strane preglednika (preglednik ne mora samostalno izračunati ove vrijednosti). Ako su dimenzije slike odmah navedene u parametrima oznake
, tada će prostor na stranici biti dodijeljen za ovu sliku, a struktura stranice se više neće mijenjati prilikom učitavanja - tekst će npr. skakati.
Ili možete povećati ili smanjiti sliku dodjeljivanjem parametara širina I visina druga značenja. Štoviše, ako želite proporcionalno promijeniti oba parametra, dovoljno je naznačiti novu vrijednost samo jednom od njih, a drugi jednostavno izostaviti. Preglednik će to automatski izračunati.
Na primjer, da bismo našu sliku povećali 1,5 puta, možemo napisati:
Rezultat će biti isti:
Više mogućnosti širina I visina može uzeti vrijednosti u postocima. Ali! Imajte na umu da su ovo postoci veličine prozora preglednika. U ovom slučaju također možete navesti samo jedan parametar i izostaviti drugi.
Na primjer, ako želimo da slika zauzima točno pola naše stranice po širini, trebamo napisati sljedeće:
I dobit ćemo:
Okvir oko slike
Na oznaci
postoji još jedan izborni parametar granica. Koristite ga za postavljanje debljine okvira oko slike. Prema zadanim postavkama, debljina okvira slike je nula, tj. bez okvira.
Na primjer, ovako možete dodati okvir debljine 3 piksela našoj slici:
Ovo će nam pokazati preglednik:
Boja obruba odgovara boji teksta na stranici navedenoj pomoću parametra tekst označiti (Pogledajte Lekciju 6. Svojstva stranice - parametri oznake tijela), zadana boja je crna.
A ako ne želite vidjeti okvir, forsirajte parametar granica nulta vrijednost:
Alternativni tekst
Alternativni tekst preglednik prikazuje umjesto slike dok se ne učita. Ili umjesto slike, ako iz nekog razloga nije prikazana.
Kada i ako se slika učita, alternativni tekst prikazat će se kada prijeđete mišem preko ove slike.
Za dodavanje alternativnog teksta upotrijebite opciju alt označiti
, kojoj je dodijeljena vrijednost niza, koja mora biti u navodnicima.
Možete stvoriti alternativni tekst u više redaka.
Da biste to učinili, samo umetnite prijelom retka u HTML dokument.
Poravnanje slike
Za sliku, kao i za odlomak, postoji koncept poravnanja s tekstom i drugim slikama na stranici. Također možete postaviti vrstu poravnanja pomoću parametra poravnati označiti
.
Ispod je tablica mogućih vrijednosti parametara poravnati:
Mogućnosti texttop, vrh, sredini, absmisddle, osnovna linija, dno postavite okomito poravnanje slike. I parametri lijevo I pravo neka preglednik zna na kojoj strani treba biti tekst teći okolo slika.
Obloga oko slike
Da biste spriječili prelamanje teksta blizu slike, možete postaviti ispunu oko slike. To možete učiniti pomoću parametara hspace(lijevo i desno ispuna) i vspace(razmaci na vrhu i dnu) oznake
.
Sljedeći primjer prikazuje prelamanje teksta oko slike, sa slikom poravnatom ulijevo i s 5 piksela ispune oko nje:
U gradu Stockholmu, u najobičnijoj ulici, u najobičnijoj kući, živi obična švedska obitelj Svanteson. Ovu obitelj čine sasvim običan tata, sasvim obična majka i troje sasvim obične djece - Bosse, Bethan i Baby.
Evo rezultata u pregledniku:
U gradu Stockholmu, u najobičnijoj ulici, u najobičnijoj kući, živi obična švedska obitelj Svanteson. Ovu obitelj čine sasvim običan tata, sasvim obična majka i troje sasvim obične djece - Bosse, Bethan i Baby.Rastavljanje slike na dijelove
Postoje trenuci kada trebate postaviti veliku sliku na stranicu. Ali tada će stranici trebati puno vremena da se učita. Što učiniti?
Jedan od mogućih
Najbolji izlaz je izrezati sliku na komade i postaviti je na stranicu pomoću tablice. Kako bi slika izgledala kao cjelina, potrebno je ukloniti obrub tablice i sve podloge unutar i između ćelija. one. dodijelite odgovarajućim parametrima oznakenulte vrijednosti: granica="0", razmak ćelija="0", cellpadding="0".
U sljedećem primjeru podijelili smo sliku na 4 dijela. Ovako će tablica izgledati:
I evo rezultata:
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ča se postaviti unutar blok elementa, na primjer,
Ili
.Označiti
ima potreban src atribut, čija je vrijednost apsolutna ili relativna putanja do slike:
Za oznaku
Dostupni su sljedeći atributi:
Tablica 1. Atributi oznake
![]()
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 je potomak elementa s valjanim atributom href.
Sintaksa: ismap.longdesc URL proširenog opisa slike, komplementaran 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 atributa naziva 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 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 različite 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 (originalna) bitmap 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 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. Oznaka
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.
Tablica 2. Atributi oznake
Atribut Kratak 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.preuzeti 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, ispisani oblik stranice, prijevod ili zrcalo).
autor — poveznica na autora dokumenta.
knjižna oznaka - Trajni URL koji se koristi za knjižne 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 podatke o tome s koje stranice je posjetitelj stranice došao.
prefetch - označava da se ciljni dokument treba spremiti u predmemoriju, 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 roditeljski okvir;
_top - stranica se učitava u punom 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="fotografija_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
Zdravo, Poštovani čitatelji web mjesta. Danas idemo na više zanimljiva tema, naime umetanje slike. Kako bi naš preglednik brzo učitao i otvorio stranicu sa slikom, potrebna nam je OPTIMIZIRANA slika (o tome zašto i kako optimizirati slike). Kako biste preuzeli takvu unaprijed optimiziranu sliku, idite na i spremite ovu sliku desnim klikom i odabirom "Spremi sliku kao".
Označiti
i mjesto mape sa slikama
Za pohranjivanje slika stvorit ćemo drugu mapu "Slike" u našoj HTML mapi i tamo smjestiti sliku.
Pokušajmo umetnuti našu sliku sa slikom između naslova i prvog odlomka. Da bismo to učinili, upisat ćemo našu oznaku u kod
. Ovo je skraćenica za englesku riječ image - slika i radi se o jednoj oznaci.
Sama oznaka
zapravo ne govori ništa pregledniku. Stoga svakako moramo specificirati atribute za oznaku. Najvažniji od atributa je atribut src – izvor. Moramo navesti izvor naše slike. U našem slučaju, slika se nalazi unutar mape slika u odnosu na mapu HTML. one. moramo naznačiti da se naša slika alarm.jpg nalazi u mapi slika. A ovako to izgleda.
S ovim atributom navedenim za oznaku
, preglednik će, kada naiđe na ovaj kod, otići u mapu sa slikama i uzeti datoteku - sliku alarm.jpg.
Ali to nije sve. Također je poželjno navesti širinu i visinu ove slike, jer preglednik mora točno znati koliko prostora treba dodijeliti za ovu sliku, a cijelo učitavanje će se dogoditi brže i, što je najvažnije, bez blok offseta.
Atributi širine i visine
Ako ne navedemo dimenzije, preglednik će također ispravno prikazati sliku, ali to će malo potrajati više vremena jer će prvo morati uploadati sliku pa će tek onda moći odrediti koliko prostora treba dodijeliti. Ako početno odredite dimenzije za sliku, to će pojednostaviti zadatak za preglednik. Osim toga, promjenom veličine slike u kodu, preglednik će je također promijeniti u skladu s navedenim dimenzijama.
Kako biste saznali veličinu slike, kliknite na nju desni klik mišem i odaberite stavku izbornika "Svojstva". Zatim idite na karticu "Detalji".
Kao što vidite, širina slike je 307 piksela, a visina 450 piksela. Napišimo dimenzije u kodu:
Alt atribut za alternativni naslov
Još jedan atribut oznake
, što je preporučljivo navesti prilikom dodavanja slike, je alt. Namijenjena je onim korisnicima interneta koji su u pregledniku onemogućili prikaz slika. one. ako su slike onemogućene u pregledniku, umjesto naše slike korisnik će vidjeti riječ ili frazu koju smo napisali za atribut alt. Osim toga, tražilice Prilikom određivanja vrijednosti vaše stranice, oni se fokusiraju na alt atribut slika, stoga je njegovo uključivanje obavezno.
Ova četiri atributa za oznaku
Preporučljivo je naznačiti prilikom dodavanja slika na stranicu. Ponovno ću istaknuti ova četiri atributa: izvor, širina, visina i alternativni tekst.
Provjerimo zaslon:
Naš se crtež pojavio točno tamo gdje je trebao. Ali ako ste primijetili, iako je slika široka samo 307 piksela, preglednik joj dodjeljuje cijeli redak. Vrlo često se postavlja zadatak da tekst nakon slike teče oko njega, tj. stajao na istoj liniji s njom. Ova mogućnost postoji. Provodi se uz pomoć poznatog poravnati atribut– poravnanje.
Atribut align za poravnavanje slike
Ovaj atribut je primjenjiv za našu oznaku
. Za ovu sliku možemo odrediti desno poravnanje ( pravo), tada će slika ići na desna strana zaslona, a tekst će teći okolo lijevo. Ili možemo odrediti lijevo poravnanje ( lijevo) – tada će slika ići na lijeva strana zaslon, a tekst će se prelomit oko njega s desne strane. Postavimo lijevo poravnanje za našu oznaku
.
Sada provjerimo što se dogodilo u pregledniku.
Možete vidjeti da se tekst obavija oko slike s desna strana, jer smo sliku poravnali lijevo. Sada promijenimo poravnanje na desni rub.
Preporučujemo
Što je bitna dubina sustava Windows?
Da biste saznali izdanje, verziju, verziju i bitnost sustava Windows 10, postoji nekoliko jednostavnih načina. Pod izdanjem mislimo na varijante Windowsa 10, a ovo...
