Kako umetnuti sliku u html stranicu

Da biste umetnuli slikovnu sliku (fotografiju ili bilo koju grafiku) na stranicu, morate navesti put do izvora (do slikovne datoteke) pomoću img oznake. Img oznaka je skraćenica za englesku sliku (slika, slika) Izvor - na engleskom izvor, skraćeno src
Važno: težinu i veličinu slike (male), naziv datoteke(bez razmaka i samo latinična slova i brojke), format slike(ekstenzije: GIF, JPG, JPEG, PNG. Moguće je koristiti animirane slike (GIF).
Put do slike naznačen je apsolutnim ili relativnim, ovisno o tome gdje se slika nalazi na vašoj web stranici ili na internetu na resursima treće strane (tada morate navesti URL)

Magla. Umjetnik Vladimir Knyagnitsky

Kodirati. Kod sadrži relativnu adresu (u odnosu na mapu na mom poslužitelju)

Kodirati. Kod sadrži apsolutnu adresu slike

Veličina slike i debljina okvira

Stvarna veličina ove slike: Širina (širina) = "499" Visina (visina) = "434". Bez pribjegavanja Photoshopu, sliku na ekranu možete učiniti većom ili manjom od svoje stvarne veličine. U tu svrhu koriste se atiributi širina I visina. Na primjer, kako bi slika izgledala 2 puta manja, odredite širinu (width)="250" i visinu (height)="217" . I dodajte okvir debljine 4 piksela ( granica="4") Lijevo je slika s okvirom, desno, za usporedbu, bez okvira

Atributi IMG oznake

src- Potreban atribut koji označava URL slike (njenu adresu, lokaciju)
IMG SCR= "img/kartinka.gif"

uskladiti- Poravnava sliku na jednu stranu dokumenta
align="lijevo" - lijevo poravnanje
align="right" Desno poravnanje
align="bottom" Poravnanje na dnu
align="top" Gornje poravnanje
align="middle" Srednje poravnanje

alt- Prikazuje tekst na slici. Alternativa grafici ako se ne učitava
granica- Postavlja debljinu okvira oko slike u pikselima. Prema zadanim postavkama ne koristi se okvir.

širinaširina slike u pikselima ili postocima
visina- visina slike u pikselima ili postocima

hspace horizontalna uvlaka
vspace vertikalni prostor

Primjeri poravnavanja slika s tekstom pomoću HTML-a

Slika se postavlja ispred teksta bez navođenja atributa. Nema oblikovanja teksta. Rezultat je ono što vidite. Slika se nalazi lijevo od teksta pomoću atributa poravnanja s lijevom vrijednošću. poravnaj="lijevo".
Ovo je, naravno, puno bolje od prethodne opcije za slaganje slike s tekstom. Ali mislim da se nikome ne sviđa kada je slika pritisnuta uz tekst. Na slici je leptir, leptir, leptir. I tekst, tekst, tekst o leptiru, leptiru, leptiru. Preblizu slici. Slika se ne smije spajati s tekstom, čak ni ako je tekst napisan jednostavno kao tekst, kako bi se jasno pokazao tekst koji teče oko slike. Jako je bitno da se slika na ekranu ne stopi s tekstom, da ne iritira, bude ugodna oku i bude na svom mjestu. Dovoljna količina teksta jasno će dekonstruirati primjer.
Postoje pravila za izgled u izdavaštvu knjiga i trebala bi postojati pravila za izgled u izradi web stranice. Slika se nalazi lijevo od teksta o korištenju atributaporavnati s vrijednošću LIJEVO, uvući od teksta - 20 piksela horizontalno.
align="left" hspace=20 Uvlake se dodaju pomoću atributa HSPACE(vodoravna uvlaka) i VSPACE(okomito uvlačenje). U ovom slučaju okomito ispunjavanje je nula tako da je vrh slike u ravnini s gornjim redom teksta. Ako je uvlaka nula, nije naznačena. Pa, vertikalni pomak je naznačen u atributu. I premda se webmastere trenutno potiče da napuste HTML atribute i u potpunosti prijeđu na CSS, čini mi se da jednostavnost ove metode daje pravo na postojanje.
KODIRATI Slika se nalazi desno od teksta o korištenju atributa uskladiti oko vrijednostiPRAVO, dodane uvlake pomoću atributa HSPACE(vodoravna uvlaka). I VSPACE(okomito uvlačenje). U principu, sve je isto kao u prethodnoj verziji, samo umjesto toga lijevo, naznačeno pravo a slika je umetnuta ne prije teksta, nego otprilike u sredini. Oblikovanje s atributima uskladiti(linearno poravnanje) i korištenje vodoravnih i okomitih uvlaka daje potpuno normalan rezultat. Slika je okružena tekstom s lijeve, gornje i donje strane (ako ima puno teksta). Uvlačenje teksta od slike lijevo, gore i dolje je 20 piksela. Sve je kako smo naveli u kodu.
Najčešće se koriste dvije vrste poravnanja (lijevo i desno), a ostale... Gotovo sve ostale smatraju se zastarjelima. Na modernim web stranicama sve su slike (i zapravo cijeli dizajn) oblikovane pomoću kaskadnih stilskih listova (CSS).

Tekst, tekst, tekst nastavak teksta

Slika se postavlja pomoću atributa align sa značenjem sredini. Dodano uvlačenje pomoću atributa HSPACE(vodoravna uvlaka) i VSPACE. Ovako izgleda, kod je napisan ispod... Tu završavamo s atributima pozicioniranja slike

Kako koristiti atribute alt i title.

Atributi alt i title sadrže naslov slike. ALT je alternativa slici ako se iz nekog razloga ne učita. Naslov je natpis naslova na slici. Pojavljuje se kada prijeđete mišem preko slike.
Ako izrađujete web stranicu samo za sebe, onda ne morate koristiti ove atribute. Ako je stranica namijenjena ljudima, ovi atributi moraju biti ispunjeni jasnim, točnim opisom slike.
Prvo, prikladno je za posjetitelje, a drugo, potrebno je za tražilice. Tekst unutar IMG oznake omogućuje robotima za pretraživanje da indeksiraju slike, sortiraju ih po ključnim riječima i vraćaju na temelju zahtjeva korisnika. Usput, Yandex čak upozorava da ako slika nema smislen opis, neće biti uključena u pretragu. Indeksiraju se samo slike u standardnim grafičkim formatima (JPEG, GIF i PNG). Pozadinske slike i slike otvorene pomoću skripte nisu indeksirane.

KOD slike s popunjenim alt i naslovom

Kako od slike napraviti vezu

Bilo koja poveznica napravljena je pomoću oznake A i atributa href (ako se radi o hipervezi) ili name if (veza na odlomak ili element koji se nalazi na istoj stranici).
Početna oznaka Izvor slike oznaka za zatvaranje

Dok putujete internetom, naravno vidite razne slike, bannere, fotografije i grafičke slike na mnogim stranicama. Danas ćemo naučiti kako umetnuti slike u HTML stranicu.

Dodavanje slike odvija se u dvije faze: prvo se priprema grafička datoteka potrebne veličine i formata, a zatim se dodaje na web stranicu putem oznake: . Sam HTML dokument namijenjen je samo prikazu tražene slike, dok a da ga uopće ne promijenite.

Postoji nekoliko stvari koje treba uzeti u obzir kada pripremate svoje slike.

1. Budući da se web-stranica učitava preko mreže, značajan čimbenik je veličina ("težina") grafičke datoteke, ugrađen u web dokument. Što je manji, to će se slika brže prikazati.

2. Često se fizičke dimenzije slike (širina i visina) moraju ograničiti (smanjiti) širinom i visinom. Na primjer, postavite širinu na najviše 700-800 piksela. U suprotnom, cijela slika neće stati u prozor preglednika i pojavit će se trake za pomicanje.

Grafički formati za web stranice

Dva glavna formata koja se najčešće koriste za web grafiku su: GIF I JPEG. Kvalitete poput multifunkcionalnosti, svestranosti, male količine izvornih datoteka s dovoljno dobrom kvalitetom dobro su poslužile ovim formatima, zapravo, definirajući ih kao standard za web slike.

Postoji i format: PNG, koji također podržavaju preglednici prilikom dodavanja slika i dolazi u dvije verzije: PNG-8 I PNG-24. Međutim, popularnost PNG formata znatno je inferiorna u prepoznavanju GIF i JPEG formata.

Obično se kreira posebna mapa za slike (slike) u korijenskom direktoriju iu nju se smještaju sve slike za web mjesto. Ponekad postoji nekoliko takvih mapa (ako struktura stranice to zahtijeva ili vam je lakše kretati se). Ova se mapa najčešće naziva: img ili slike (Slike). U kod web stranice upišite puni put do grafičke datoteke (gdje se nalazi slika), kao i naziv te datoteke (slike) koju želite umetnuti u html dokument.

Pišemo kod za umetanje slike na web stranicu

Za umetanje slika u HTML dokument koristite konstrukciju navedenu u Listing 8.1. Ovaj kod se ubacuje na željeno mjesto na web stranici (gdje želite vidjeti sliku).

Na našoj web stranici posvećenoj automobilima pripremio sam i ubacio dvije slike. Možete vidjeti ugrađeni kod za prvu sliku u Ispisu 8.1.

Listing 8.1.

Ovako će izgledati prva umetnuta slika na web stranici stranice:

A sada ću detaljnije prokomentirati ovo što piše Listing 8.1.

Sama slika je "umetnuta" pomoću oznake: img src. Cijeli unos izgleda ovako: img src="img/mers1.jpg", Gdje "img/mers1.jpg"– označava da je naša slika u mapi: img, te naziv grafičke datoteke (slike): mers1.jpg.

U principu, ovo je već dovoljno za umetanje slike na web stranicu, ostali parametri su izborni, ali ipak preporučujem da ih uvijek registrirate, inače bi slika mogla biti podložna geometrijskim izobličenjima.

Pogledajmo dodatne mogućnosti:

granica="0"– označava da nema okvira oko slike, pokušajte promijeniti 0 u drugi broj, na primjer u 1 , - odgovara debljini okvira oko slike u 1 piksel, 2 – odgovara debljini okvira oko slike od dva piksela itd.

Važno! Ako sliku planirate učiniti vezom, svakako navedite vrijednost: granica="0".

širina="400"– označava da je širina slike: 400 piksela(stavite pravi broj za širinu vaših slika).

visina="209"- označava da je visina slike: 209 piksela(stavite pravi broj za visinu vaših slika).

Ako ne navedete parametre: širina I visina, tada slika može dobiti geometrijska izobličenja.

hspace="20"– označava uvlačenje teksta oko slike od 20 piksela.

poravnaj="lijevo"– ovo vam je već poznata oznaka….. Tako je, znači lijevo poravnanje, može imati i značenje: pravo- desno poravnanje.

alt="Pogled automobila sprijeda" !}– ovdje je ispisan alternativni tekst koji se prikazuje kada prijeđete mišem preko slike.

Na potpuno isti način ćemo drugu sliku “ubaciti” na web stranicu, s jedinom razlikom što će biti poravnata udesno.

Komentari na ovaj članak (lekcija):

Recite mi, molim vas, gdje točno trebam stvoriti mapu img?

Mapa img samo je konvencionalno ime, možete ga zvati kako god želite, sve dok ga kasnije razumijete. Možete ga izraditi bilo gdje, radi jednostavnosti, stvorite ga u korijenskom direktoriju i tamo stavite sve slike.

Stvar je u tome što se slika ne prikazuje, samo natpis. Što može biti pogrešno? Hvala vam.

Pažljivo pogledajte gornji popis 8.1. Uzmi sve sebi. U korijenskom direktoriju (gdje se nalaze sve HTML datoteke vaše stranice) napravite img mapu. Stavite sve svoje slike u ovu mapu. U popisu promijenite mers1.jpg u naziv svoje datoteke. Također promijenite vrijednosti širine i visine na stvarne dimenzije vaše datoteke. Sretno.

Hvala vam puno, sve je uspjelo.

Pozdrav. Imam istu situaciju kao prethodni govornik: napišem kod kao vaš, promijenim samo naziv datoteke: umjesto mers.1/jpeg ubacim poveznicu Mercedes/jpeg. Na stranici se pojavi samo prozor s natpis na vrhu "Front view of the car", a slike nema. Po mom mišljenju preglednik ne može pronaći put do fotografije ili nije ispravno napisan. OVDJE JE MOJ KOD: b

Pažljivo pogledajte svoj img/mercedes/jpeg kod. Dobro ste razumjeli, preglednik ne pronalazi put do grafičke datoteke. 2. Naziv datoteke nije točan, pogledajte kako imam mers1.jpg

Pa kod sam kopirao i zalijepio,imam oval bez slike,u ovalu je gore link!

Pozdrav! Problem je isti, stvorio sam mapu pod nazivom img na istom mjestu gdje su i dokumenti stranice, slike pod nazivom 1.jpg su spremljene u ovoj mapi, pišem sve kao u vašem primjeru.

Ako ste primijetili da je moja slika u mapi img

Vrlo koristan članak za webmastere početnike. Jedino upozorenje za atribut "alt". U odnosu na sliku, članak daje sljedeću interpretaciju: "alt="Front view of the car" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

evo mog koda PA ZAŠTO JE SLIKA STAVLJENA SA STRANE KADA JE ZADATAK ZA NJU U SREDIŠTU?

A ako uzmem sliku s tuđe stranice, neće li to biti kršenje autorskih prava?

Objasnite zašto se prilikom postavljanja HTML dokumenta na poslužitelj umjesto slika u okviru pojavljuju prazna mjesta. Iako su prije displeja slike bile kakve trebaju biti.

Dmitry, čuda se ne događaju, negdje si pogriješio, provjeri sve putove do slika, tj. kako su slike napisane u kodu.

Ovo je moj kod, na stranici se vidi sve osim slike, pokušavam cijeli dan na sve moguće načine ali ništa. molim te reci mi što da radim

AndreyK, javi mi se u moje pismo. Nikako ne mogu umetnuti sliku, sve sam ispravno unijeo, ali ništa, pojavljuju se samo okvir i natpis

Elvira, pročitala sam tvoje pismo, kao i sve druge komentare i pisma. Ali kud da odgovorim... u djedovo selo???

Ne znam zašto su svi toliko uznemireni!? Samo trebate ne kopirati pa zalijepiti kodove, već ih sami napisati i sve će raditi... evo teksta moje slike

Kopirao sam vaš listing, zalijepio svoje vrijednosti - ima slika. Onda upišem isto ispod (ručno) nema slike - kakvo čudo?

AndreyK molim te reci mi gdje je greška? Koliko god puta pokušao ne ide((

Andrej, reci mi zašto ne vidim sliku. Moj kod: Ima natpis, ali nema slike. Moja adresa: [e-mail zaštićen] Hvala vam.

I ja sam dugo patila, ali uspjelo je! Doista, mapa imj mora se otvoriti u HTML dokumentu.

Svakako ću probati, hvala

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

I ja sam dugo patio, pokazalo se da bi mapa sa slikama trebala biti na istom mjestu kao index.html, hvala Elena

Andrej ubacujem:

Andrej ubacujem: i nemam sliku u dokumentu,samo natpis!!!Moja adresa: [e-mail zaštićen]

moj kod...nema ni slike. Mapa img nalazi se u istoj mapi kao i index... molim pomoć. [e-mail zaštićen] Hvala vam!

Pa ne znam. Čitam sve komentare. Sve sam probala. Kopirao sam i zalijepio svoje podatke. Ništa ne radi. Mapa sa slikama (img) nalazi se na istom mjestu kao i index.html. Ali slike nema. Umjesto njega je crveni križ i natpis Radim u IE pregledniku. Evo što sam unijela:

Pogledao sam HTML kod stranice umjesto fotografije u lekciji: Kod na stranici razlikuje se od onog u popisu. Zašto? i, usput, na stranici je podvučen kod “mers1.jpg”. Kopiranje s podcrtavanjem nije uspjelo. Pokušao sam to tako ubaciti. Još uvijek nema slike. Što je bilo?

Pitamo se, sami sebi odgovaramo. Dugo sam patio, a slika nije umetnuta. Ispalo je: 1, umjesto oznake src imao sam srk 2. Zbunio sam se dok sam sastavljao put do slike. Preimenovao sam mapu u IMG i sve je radilo. Potrošio sam skoro dva dana na ovo, ali vrijedilo je.

Ljubavi, ali sad ćeš ovo pamtiti do kraja života :) Šalim se, naravno, nemoj se uvrijediti. Ali ozbiljno, ako osoba ne ostavi povratnu adresu, onda mi je gotovo nemoguće pomoći joj.

Pozdrav, reci mi kako postaviti jednu sliku na vrh, drugu ispod lijevo, a treću dolje desno))))

..........koja je moja pogreška nedostajuće slike?

Sve u kodu je ispravno, ako ništa nije zabrljano, sve bi trebalo raditi. Ali napišite naziv datoteke (slike) engleskim slovima. Mnogi poslužitelji ne prihvaćaju latinicu.

Ali evo što je čudno... dok sam mapu nazivao različitim imenima, slika se nije htjela pojaviti, iako je putanja bila ispravno napisana. Čim sam nazvao IMG, odmah se pojavila. U čemu je kvaka?

Marina, nema trika ni provokacije :). U kodu ispisa 8.1. naznačeno je da se ova slika nalazi u mapi: img. Ako promijenite naziv mape za slike na hostu, zatim ga promijenite u popisu, to je cijeli trik.

Pokušavam ubaciti sliku!!! Sve zapisujem u bilježnicu, sve radim ispravno, možda se ne isplati koristiti bilježnicu??

I sve otvaram u Mozilla Fire Foxu najnovije))

Putanja moje slike je C:Documents and SettingsdenisDesktopkoffevinogradwwwImg, a sama slika se zove gif, također ime uključuje 1.gif...ja to radim u notepadu Napravio sam to i ne vidi se puna putanja, mozilla ne vidi explorer fotografiju i ističe je crvenim križićem

Denis, preimenuj mapu Img u img, tj. sve velikim slovima, i preimenujte put do njega. Mnogi poslužitelji ne prikazuju ispravno velika i mala slova.

Još uvijek imam isto pitanje: zašto ne slike, nego samo natpis. Napravio sam zasebnu mapu za stranicu: ona sadrži web stranicu i crtež. Umetnuto: POMOĆ ŠTO JE MOJA POGREŠKA POŠTE: [e-mail zaštićen]

Kako napraviti sliku tako da se može povećati ili smanjiti?

Iz nekog razloga ni meni se slika ne centrira. U čemu je kvaka?.. Kod je ovakav:

Slike su možda te koje tvore našu opću predodžbu o World Wide Webu. 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, skrenemo 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. Ovdje smo dodali klasu za pregled i sada joj pomoću css-a možemo pristupiti preko nje i odrediti bilo koji stil. Na primjer, ove:

Preview( padding: 20px; margin: 10px; border: 5px full orange; transform: skewX(10deg); box-shadow: 0 0 15px 10px purple )

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 vrijedi i za poravnanje, koje se može učiniti u CSS-u pomoću svojstva text-align, kao i za plutajuće blokove.

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 će se ispuniti, a također sadržavati ključne riječi ako je moguće - vidljivost vaše stranice će se značajno povećati, tj. češće će se prikazivati ​​u pretragama. Ovo je iz područja SEO-a i u ovoj fazi nam je dovoljno znati da postoji takav atribut, a “živa” stranica ga mora imati popunjenog. Dok je stranica na našem disku, može ostati prazna.

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

(od engleske figure - crtež). Ova oznaka označava da će sadržaj poput ilustracija, fotografija, dijagrama itd. biti postavljen unutar nje.

Označiti