Kako umetnuti sliku u html stranicu

Da biste ubacili sliku-sliku (fotografiju ili bilo koju grafiku) na stranicu, morate navesti putanju do izvora (do datoteke-slike) koristeći img tag. Oznaka img je skraćenica za englesku sliku (slika, slika) , Izvor - na engleskom izvoru, skraćeno src
Bitan: težina i veličina slike (male), Ime dokumenta(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 je naveden apsolutni ili relativni, ovisno o tome gdje se slika nalazi kod vas ili na internetu na resursima trećih strana (tada morate navesti URL)

Magla. Umetnik Vladimir Knjagnitski

Šifra. Kod sadrži relativnu adresu (u odnosu na folder na mom serveru)

Šifra. Kod sadrži apsolutnu adresu slike

Veličina slike i debljina okvira

Stvarna veličina ove slike je: Širina = "499" Visina = "434". Bez pribjegavanja Photoshopu, možete učiniti da slika na ekranu izgleda veća ili manja od svoje stvarne veličine. Za to se koriste atiributi. širina i visina... Na primjer, da bi slika izgledala 2 puta manja, navedite širinu (širina) = "250" i visinu (visinu) = "217". I dodajte okvir debljine 4 px ( granica= "4"). Na lijevoj strani je slika sa okvirom, desno, poređenja radi, bez okvira

Atributi IMG oznake

src-Obavezni atribut koji navodi URL slike (njena adresa, lokacija)
IMG SCR = "img / kartinka.gif"

poravnati- Poravnava sliku sa jednom stranom dokumenta
align = "lijevo" - Lijevo poravnanje
align = "desno" Desno poravnanje
align = "bottom" Donje poravnanje
align = "top" Poravnanje na vrhu
align = "middle" Poravnajte u sredini

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

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

hspace horizontalna uvlaka
vspace vertikalna uvlaka

Primjeri poravnanja slika s tekstom pomoću HTML-a

Slika se postavlja ispred teksta bez navođenja bilo kakvih atributa. Nema formatiranja teksta. Rezultat je ono što vidite. Slika se nalazi lijevo od teksta pomoću atributa align sa lijevom vrijednošću... align = "lijevo".
Ovo je, naravno, mnogo bolje od prethodne verzije lokacije slike sa tekstom. Ali mislim da se nikome ne sviđa kada se slika pritisne uz tekst. Na slici je leptir, leptir, leptir. I tekst, tekst, tekst o leptiru, leptiru, leptiru. Preblizu slici. Slika ne treba da se stapa sa tekstom, čak i ako je tekst napisan jednostavno kao tekst, kako bi se jasno prikazao tok teksta oko slike. Veoma je važno da se slika na ekranu ne spoji sa tekstom, da ne iritira, da prija oku i da bude na svom mestu. Dovoljna količina teksta daje jasniju sliku primjera.
U izdavanju knjiga postoje pravila za izgled, treba da postoje pravila za izgled i za izgradnju sajta. Slika se nalazi lijevo od teksta pomoću atributaporavnati sa LIJEVO vrijednošću, pomak od teksta - 20 piksela horizontalno.
align = "left" hspace = 20 Padding se dodaje pomoću atributa HSPACE(horizontalni pomak) i VSPACE(vertikalna uvlaka). U ovom slučaju, okomito uvlačenje je nula, tako da je vrh slike u ravnini sa gornjim redom teksta. Ako je uvlaka nula, nije navedena. Pa, okomito uvlačenje je navedeno u atributu. I iako se trenutno webmasteri uvjeravaju da napuste HTML atribute i pređu u potpunosti na CSS, čini mi se da jednostavnost ove metode daje pravo na postojanje.
KOD Slika se nalazi desno od teksta o korištenju atributa uskladiti oko vrijednostiPRAVO, dodano uvlačenje pomoću atributa HSPACE(horizontalni pomak). i VSPACE(vertikalna uvlaka). U principu, sve je isto kao u prethodnoj verziji, samo umjesto nalijevo, naznačeno u pravu a slika nije umetnuta ispred teksta, već otprilike u sredini. Formatiranje sa atributima poravnati(linearno poravnanje) i sa horizontalnim i vertikalnim paddingom daje sasvim normalan rezultat. Slika je omotana tekstom s lijeve, gornje i donje strane (ako ima puno teksta). Uvlačenje teksta od slike lijevo, gore i dolje je jednako 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 se smatraju zastarjelim. Na modernim stranicama, sve slike (i zapravo cijeli dizajn) su stilizirane pomoću kaskadnih stilskih tablica (CSS)

Tekst, tekst, nastavak teksta teksta

Slika se nalazi pomoću atributa align sa značenjem srednji... Dodato uvlačenje pomoću atributa HSPACE(horizontalni pomak) i VSPACE... To izgleda ovako, kod je napisan ispod.. Ovdje 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 nije učitala. Naslov je naslov naslova na slici. Pojavljuje se kada pređete mišem preko slike.
Ako web lokaciju pravite samo za sebe, onda ne možete koristiti ove atribute. Ako je stranica namijenjena ljudima, onda se ovi atributi moraju ispuniti dajući jasan tačan opis slike.
Prvo, pogodan je za posetioce, a drugo, neophodan je za pretraživače. Tekst unutar IMG oznake omogućava robotima za pretraživanje da indeksiraju slike, sortiraju ih po ključnim riječima i prikažu ih na zahtjev korisnika. Inače, Yandex čak upozorava da ako slika nema smislen opis, neće biti uključena u pretragu. Indeksirani su samo standardni grafički formati (JPEG, GIF i PNG). Pozadinske slike i slike proširene skriptom nisu indeksirane.

Slika KOD sa popunjenim alt i naslovom

Kako napraviti vezu od slike

Bilo koja veza je napravljena pomoću oznake A i atributa href (ako je hiperveza) ili imena if (veza na paragraf ili element koji se nalazi na istoj stranici).
Start tag Izvor slike krajnja oznaka

Kada surfate internetom, naravno, na mnogim stranicama vidite razne slike, banere, fotografije, grafičke slike. 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 je namijenjen samo za prikaz tražene slike, dok a da to ni na koji način ne menjam.

Postoji nekoliko stvari koje treba imati na umu kada pripremate slike.

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

2. Vrlo često, fizičke dimenzije slike (širina i visina) treba ograničiti (smanjiti) u širinu i visinu. Na primjer, postavite širinu na ne veću od 700-800 piksela. U suprotnom, cijela slika neće stati u prozor pretraživača i pojavit će se trake za pomicanje.

Grafički formati za web stranice

Postoje dva glavna formata koji se najčešće koriste za web grafiku: GIF i Jpeg... Takve kvalitete kao što su: multifunkcionalnost, svestranost, mala količina izvornih datoteka dovoljno dobrog kvaliteta, dobro su poslužile ovim formatima, u stvari, definirajući ih kao standard za web slike.

Postoji i format: PNG slika koji takođe podržavaju pretraživači prilikom dodavanja slika i dolazi u dva tipa: PNG-8 i PNG-24. Međutim, popularnost PNG formata je mnogo inferiornija u odnosu na GIF i JPEG formate..

Obično se kreira poseban folder za slike (slike) u osnovnom direktorijumu iu njega se stavljaju sve slike za sajt. Ponekad postoji nekoliko takvih foldera (ako struktura stranice to zahtijeva ili vam je lakše navigirati). Ovaj folder se najčešće naziva: img ili slike (Slike). Puna putanja do grafičkog fajla (gde se nalazi slika), kao i naziv ove datoteke (slike) koju želite da ubacite u html dokument, propisani su u kodu web stranice.

Pisanje koda za umetanje slike u web stranicu

Za umetanje slika u HTML dokument, konstrukcija navedena u Listing 8.1. Ovaj kod se ubacuje na željeno mjesto na web stranici (gdje želite da vidite sliku).

Na našoj stranici automobila pripremio sam i ubacio dvije slike. Vidite embed kod za prvu sliku u Listingu 8.1.

Listing 8.1.

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

A sada ću detaljnije prokomentarisati ono u čemu piše Listing 8.1.

Sama slika se "ubacuje" pomoću oznake: img src... Cijeli zapis izgleda ovako: img src = "img / mers1.jpg", gdje "img / mers1.jpg"- označava da se naša slika nalazi u folderu: img, i naziv grafičke datoteke (slika): mers1.jpg.

U principu, ovo je već dovoljno za umetanje slike na web stranicu, ostali parametri su opcioni, ali ipak preporučujem da ih uvijek propisujete, u suprotnom slika može doživjeti geometrijsko izobličenje.

Pogledajmo dodatne opcije:

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

Bitan! Ako planirate napraviti sliku kao vezu, obavezno navedite vrijednost: granica = "0".

širina = "400"- označava da je širina slike: 400 ppi(koristite pravi broj za širinu vaših slika).

visina = "209"- označava da je visina slike: 209 ppi(stavite stvarnu cifru za visinu vaših slika).

Ako ne navedete parametre: širina i visina, tada slika može dobiti geometrijsko izobličenje.

hspace = "20"- označava uvlačenje teksta oko slike za 20 piksela.

align = "lijevo"- ovo je oznaka koja vam je već poznata ... .. u pravu- desno poravnanje.

alt = "(! LANG: Pogled sprijeda automobila" !}- ovdje je napisan alternativni tekst, koji je istaknut kada pređete mišem preko slike.

Na isti način ćemo drugu sliku "ubaciti" u web stranicu, s tom razlikom što će biti desno poravnata.

Komentari na ovaj članak (lekciju):

Molim vas recite mi gdje tačno trebate kreirati folder img?

Fascikla img je samo uobičajeno ime, možete ga nazvati kako god želite, samo da kasnije i sami shvatite. Možete ga kreirati bilo gdje, radi jednostavnosti, kreirajte ga u korijenskom direktoriju i tamo stavite sve slike.

Činjenica je da slika nije prikazana, već samo natpis. Šta može biti pogrešno? Hvala ti.

Pažljivo pogledajte listing 8.1 iznad. Uzmi ga u potpunosti sebi. U korijenskom direktoriju (gdje se nalaze svi HTML fajlovi vaše stranice) kreirajte img folder. Stavite sve svoje slike u ovaj folder. Na listi promijenite mers1.jpg u ime vašeg fajla. Također promijenite vrijednosti širine i visine na stvarne dimenzije vašeg fajla. Sretno.

Hvala puno, sve je uspjelo.

Zdravo.Imam istu situaciju kao i prethodni govornik: pišem kod kao tvoj, menjam samo naziv fajla: umesto mers.1/jpeg ubacujem gomilu Mercedes/jpeg.Pojavljuje se samo prozor na stranica sa natpisom "prednji pogled na auto" na vrhu, a nema slike. Po mom misljenju pretraživač ne može pronaći putanju do fotografije ili nije ispravno registrovana. EVO MOJE ŠIFRE: b

Pogledajte pažljivo svoj img / mercedes / jpeg kod. Dobro ste shvatili pretraživač ne pronalazi putanju do grafičke datoteke. 2. Ime datoteke je netačno, pogledajte kako imam mers1.jpg

Pa ja sam kopirao kod, zalijepio sam oval bez slike u oval, na vrhu je napisan link!

Pozdrav!Problem je isti,napravio sam folder img na istom mestu kao i dokumenti sajta,u ovom folderu se spremaju slike sa imenom 1.jpg,pisem sve kao u tvom primeru.

Ako ste primijetili da je moja slika u folderu img

Vrlo koristan članak za početnike "webmastere". Jedino upozorenje je za atribut "alt". Što se tiče slike, članak daje sljedeće tumačenje: "alt =" (! LANG: Pogled sprijeda na automobil" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

evo mog koda PA ZAŠTO SLIKA POSTAJE STRANICA KADA JE ZADATAK ZA NJEN CENTAR?

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

Objasnite zašto, kada učitavate HTML dokument na server, postoje prazni prostori u okviru umjesto slika. Iako su prije objavljivanja slike bile taman.

Dmitrije, čuda se ne dešavaju, negdje si pogriješio, provjeri sve puteve do slika, tj. kako su slike napisane u kodu.

ovo je moj kod, sve osim slike se otkriva na stranici, pokušavam cijeli dan na bilo koji način, ali nikako. molim te reci mi šta da radim

AndreyK molim vas obratite pažnju na moje pismo.Ne mogu nikako da ubacim sliku,sve sam ispravno uneo,ali nikako,samo se otkriva okvir i natpis

Elvira, pročitao sam tvoje pismo, kao i sve ostale komentare i pisma. Ali odgovor je gde ... do seoskog dede???

Ne znam zašto svi imaju paru!? samo trebate ne kopirati kodove pa zalijepiti vec ih sami napisati i brkovi ce proraditi.. evo teksta moje slike

Kopirao sam tvoj listing,ubacio svoje vrijednosti,ima slika.Onda vozim istu (ručno) sliku ispod,ne, kakvo čudo?

AndreyK molim te reci mi gdje je greška? koliko je probalo ne radi ((

Andrey, reci mi zašto ne vidiš sliku. moj kod: Ima natpis, nema slike. moja adresa: [email protected] Hvala ti.

I ja sam dugo patila, ali je uspjelo! Zaista, folder imj mora biti otvoren u HTML dokumentu.

Svakako ću probati, hvala

iiiiiiiiiuuuuuuu krrrrrroshi my

takođe dugo patio, ispostavilo se da bi folder sa slikama trebao biti na istom mjestu kao index.html, hvala Elena

Andrija, ubacujem:

Andrija, ubacujem: i nemam sliku u dokumentu, samo natpis !!! Moja adresa: [email protected]

moj kod ... nema ni slike. Imenik img je u istom folderu kao index ... pomozite, molim. [email protected] Hvala!

Pa ne znam. Pročitao sam sve komentare. Probala sam sve. Kopirao sam i zalijepio svoje podatke. Ništa ne radi. Fascikla sa slikama (img) nalazi se na istom mjestu kao i index.html. Ali nema slike. Umjesto toga crveni krst i natpis Radim u IE pretraživaču. Evo šta sam uneo:

Pogledao sam HTML kod stranice umjesto fotografije u lekciji: Kod na stranici se razlikuje od koda na listi. Zašto? i usput na stranici podvučena šifra "mers1.jpg". Nije moguće kopirati s donjom crtom. Pokušao sam to tako ubaciti. Svejedno, nema slike. Sta je bilo?

Pitamo se i sami odgovaramo. Slika nije ubačena dugo vremena. Ispostavilo se: 1, umjesto oznake src, imao sam srk 2. Zbunio sam se kada sam napravio put do slike. Preimenovao folder u IMG i sve je ispalo. Na to sam potrošio skoro dva dana, 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 je sa moje strane gotovo nemoguće pomoći mu.

Pozdrav i reci mi kako da jednu sliku postavim gore, drugu ispod lijevo, a trecu dolje desno))))

........... koja je moja greška što sam propustio sliku?

Sve je ispravno u kodu, ako ništa nije zabrljano sve bi trebalo da radi. Ali napišite naziv datoteke (slike) engleskim slovima. Mnogi serveri ne prihvataju latinične znakove.

Ali evo čudne stvari... dok sam fasciklu nazivao različitim imenima, slika nije htela da se pojavi, iako je putanja bila ispravno napisana. Čim sam nazvao IMG, odmah sam se pojavio. u čemu je kvaka?

Marina, nema kvake i provokacije :). U kod u Listingu 8.1. naznačeno je da se ova slika nalazi u folderu: img. Ako promijenite naziv foldera za slike na svom hostu, a zatim ga promijenite na listi, to je trik.

Pokušavam da ubacim sliku !!! Sve prepisujem preko notesa, sve radim kako treba, mozda ne vredi preko sveske?

I sve otvaram u mozilla fire fox zadnje))

Put moje slike i C:Documents and SettingsdenisDesktopkoffevinogradwwwImg i sama slika se takođe zove gif 1.gif je uključen u naziv... Ovo radim u notepadu jeste i puna staza ne izlazi iz mahovine ne vidi fotografiju ekspolera sa crvenim krstom ističe

Denis, preimenuj folder Img u img, tj. sve velikim slovima i preimenujte i putanju do njega. Mnogi serveri ne prikazuju ispravno velika slova.

I dalje imam isto pitanje: zašto ne slike, već samo natpis. Napravio sam zaseban folder za stranicu: sadrži web stranicu i sliku. Umetnuto: POMOĆ U ČEMU JE GREŠKA MOJ MAIL: [email protected]

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

Iz nekog razloga, ni on ne centrira sliku. U čemu je kvaka? .. Šifra je:

Slike - možda one čine našu opću ideju o svjetskoj mreži. Slažete se da osoba općenito pamti grafičke informacije mnogo bolje od tekstualnih. Stoga su slike važan dio svake stranice i svake web stranice. I zato želim da vam kažem kako da ubacite sliku u html.

Umetanje slike u html pomoću oznake

Vjerovatno znate da se sve naredbe u html-u izvršavaju pomoću oznaka. Tako su smislili svoju oznaku za slike - ... Jednostruka je, odnosno nema pokrivni dio.

Najvažniji atribut img oznake je src (izvor) - putanja do slike. U njemu upisujete adresu na kojoj se nalazi slika. Može se napisati kao apsolutno ( site / images / images2 / image.jpg) ili kao rođak ( slike / slike2 / image.jpg).

Oba ova puta vode do iste datoteke image.jpg koja se nalazi u folderu image2. To, pak, leži u direktoriju slika, a ono - u korijenskom folderu. Ako zapišete da je sve relativno, onda kada promijenite naziv domene za svoju stranicu, sve će ostati funkcionalno. Na primjer, wordpress editor podrazumevano ubacuje apsolutne URL-ove. Ali lično neću da menjam domen i odgovara mi.

Dodatni atributi i stilovi putem css-a

Dakle, skrenemo sa teme.Za prikaz slike dovoljno je da ona navede atribut src, ali postoji mnogo drugih atributa za njen dizajn.

• širina i visina - širina i visina slike. Može se postaviti u odgovarajućim atributima u img tag-u
• align - poravnanje slike u odnosu na tekst. Podrazumevano poravnato lijevo. Također možete staviti desno i centralno (desno, u sredini)
• alt - alternativni tekst koji će se prikazati ako je korisnik onemogućio prikaz slika u pretraživaču. Korisno ga je popuniti
• naslov je skoro isti. Neka vrsta opisa slike, koja će se prikazati kada pređete mišem preko nje
• vspace i hspace - vertikalno i horizontalno uvlačenje slike od ostatka sadržaja. Pažnja! Atributi su već zastarjeli i bolje je postaviti ove uvlake kroz tablicu stilova.
• class - klasa stila koja se veže za sliku i primjenjuje neke stilove na nju

Ubaci tako slatku sliku. Ovdje smo okačili klasu za pregled i sada sa css-om kroz nju možemo se pozvati na nju i napisati bilo koje stilove. Na primjer, takve:

Pregled (odmak: 20px; margina: 10px; granica: 5px puna narandžasta; transformacija: skewX (10deg); sjena okvira: 0 0 15px 10px ljubičasta)

rezimiraću

Dakle, da biste prikazali sliku, trebate samo napisati img tag i dodati src atribut u nju, koji postavlja putanju do slike. Sve ostalo su dodatne funkcije - poravnanje, dimenzije, alternativni tekst, rotacije, ivice itd.

I na kraju, idealno bi bilo da sve ovo bude napisano preko CSS-a. Odnosno, ne postavljajte dimenzije u atributima, već okačite dodatnu stilsku klasu na sliku, koja će odrediti dimenzije. Isto je i sa poravnanjem, koje se u css-u može uraditi sa svojstvom text-align kao i plutajućim plutajućim oznakama.

Nadamo se da će vam ovaj članak biti od koristi. Sretno čitanje!

Slike nam odmah daju do znanja koliko nam određena stranica ili članak može biti zanimljiv, stvaraju raspoloženje i mogu otkriti temu na nov način. Ponekad jedna fotografija vrijedi hiljadu riječi.

Ali ne biste ih trebali dodavati prečesto, ako niste Instagram ili online trgovina. Poželjno je da slike:

• bile informativne
• odgovara shemi boja vaše stranice
• bili odgovarajući

Ukoliko nemate odgovarajuću fotografiju, možete koristiti tzv photostock (foto banka) - mjesto gdje se pohranjuju mnoge fotografije, ilustracije i vektorske grafike. Postoji mnogo takvih resursa, možda ste čak čuli za jedan od najvećih - Shutterstock, ali postoje plaćena preuzimanja.

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

World Wide Web uglavnom koristi 3 vrste slika:

gif(Format za razmjenu grafike - format za razmjenu slika)

to je prvi format koji se koristi na Internetu. Prednosti ovog formata su prisutnost animacije i male veličine, stranica se brzo učitava. Osim toga, podržava transparentnost. Nedostatak - samo korišten 256 boja(zapravo zato što je veličina mala), tj. ne može se koristiti za slike u punoj boji.

jpeg on je jpg(Zajednička grupa stručnjaka za fotografiju - Zajednička grupa fotografskih eksperata - ovo je naziv razvojne organizacije)

pogodan 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 isto kao ping, tj. )

ovaj format je prvobitno razvijen za web, tj. slika je obično lagana 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 like gif koristi samo 256 boja. Format png-24 podržava 16 miliona boja, iako je težina već prilično velika. 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

Ubacite sliku u html datoteku

Za dodavanje slike na stranicu, koristite tag (od engleskog image - slika, slika). Ovo je jedna oznaka, ne treba joj završna oznaka. Ova oznaka sadrži atribute.

Atribut src(iz engleskog izvora - izvor) označava putanju do datoteke (mjesto gdje se nalazi slika). Ako je slika na vašem računaru (za sada je sajt samo u razvoju) ili na vašem serveru, koristite relativni link. Ako je slika s weba, potrebna je 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, internet je loš - 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 ovaj atribut bude popunjen. A html validator (resurs za provjeru ispravnosti koda) će odsustvo alt atributa shvatiti kao grešku. Ako svi atributi će biti popunjena, pa čak i sadržavati, ako je moguće, ključne riječi - vidljivost Vaše stranice će se značajno povećati, tj. češće će se prikazivati ​​u pretraživanju. Ovo je iz oblasti SEO-a, ali u ovoj fazi nam je dovoljno da znamo da postoji takav atribut, a "živi" sajt ga mora popuniti. Dok je stranica na našem disku, sasvim je moguće ostaviti je praznu.

U primjeru ispod, namjerno smo specificirali nepostojeću putanju slike kako biste mogli vidjeti kako funkcionira alt atribut.

Visina i širina slika

Također možete podesiti visinu i širinu slike, ako je originalna slika npr. više nego što vam treba.

U HTML5 se preporučuje da se to radi sa CSS ili atribut stila , Volim ovo:

U ovom primjeru uzeli smo 30% širine, ali ne originalnu sliku, već veličinu 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, ako bismo 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đe, širina i visina se mogu podesiti piksela. U slučaju naše pande, koja ima originalne dimenzije 1196 x 796 piksela, kako životinja ne bi patila prilikom kompresije, moramo zadržati proporcije, ali ovdje ne možete bez kalkulatora. Recimo da želimo smanjiti veličinu slike za 3 puta, a zatim trebamo registrirati dimenzije 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č će sam izračunati punu veličinu slike.

Pokušajte pokrenuti ovakav kod i pogledajte rezultat:

< img src = "https: //site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "panda na drvetu" style = "širina: 399px;" >

Uvijek postavite dimenzije slike. Učitavanje slika obično traje 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 slučajno zavirite u kod stranice kreirane u HTML-4 ili čak ranije, primijetit ćete da se veličine slika postavljaju pomoću posebnih atributi širine i visina... Ovo je zastarjela metoda, iako još uvijek vrijedi u HTML5. Ipak, savjetujemo vam da koristite stil, jer na atribute širine i visine mogu uticati unutrašnji ili eksterni stilovi koji će živjeti u pretraživaču ili vašoj CSS datoteci. Na ovom ćemo se detaljnije zadržati 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 vidite rezultat kao i uvijek. Ovo funkcionira kao da je prva kartica datoteka index.html, druga datoteka style.css, a treća pretraživač. Dakle, sada u našem CSS-u piše da svi elementi sa img tagom imaju širinu od 100%. Zadane dimenzije atributa širine i visine su u pikselima, tako da ovdje ne morate dodavati jedinice.

Razlika u rezultatu je očigledna 🙂

Također, starije verzije html-a koristile su sljedeće atribute:

poravnati pomoću kojih poravnate sliku vodoravno ili okomito.

hspace- uvlačenje s lijeve i desne strane slike na okolni sadržaj (npr. tekst ili susjedna slika)

vspace- uvlačenje od vrha i dna od slike do sadržaja okolo.

granica- postavite debljinu okvira oko slike (podrazumevano je jednaka nuli)

Sada se sve ove manipulacije (i još mnogo toga) rade pomoću CSS-a, pa smo odlučili da vas ne zamaramo ovim ovdje. Ako vas i dalje zanima kako raditi sa ovim atributima - pišite u komentarima, mi ćemo dodati ovu stavku 🙂

Postavljanje slike u kod

Odakle stavljamo našu oznaku zavisi kako će se prikazati u pretraživaču.

Primjer #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, zatim će biti premotan u sljedeći red.

Primjer broj 2 - na početku pasusa

to je inline element, postavlja se unutar blok elementa i ne započinje novi red. U gornjem primjeru, tekst se premotava oko slike, od koda registrovan unutra

Naslovi ilustracija

Da biste označili ili potpisali fotografiju na stranici, koristite tag

(od engleske figure - crtež). Ova oznaka označava da se unutar nje nalazi sadržaj kao što su ilustracije, fotografije, dijagrami itd.

Tag