HTML - Lekcija 8. Rad sa slikama - img tag

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 slika i vaših lijepa pozadina neće vidjeti. 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"

img tag 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 rub slike s osnovnom linijom 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. Protok se može zabraniti s desna strana(desno), s lijeve strane (lijevo) i s 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 nije više zalijepljena za sliku.

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-lokacija ima složeniju strukturu i prethodni primjer nije prikladan:

Preglednik tumači ovu liniju na sljedeći način: kombinacija znakova ../ znači da se trebate 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 povećali našu sliku 1,5 puta, možemo napisati:

ili

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 ruba 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.

tekst">

Poravnanje slike

Za sliku, kao i za odlomak, postoji koncept poravnanja u odnosu na tekst i druge slike na stranici. Također možete postaviti vrstu poravnanja pomoću parametra uskladiti označiti .

Ispod je tablica mogućih vrijednosti parametara uskladiti:

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 uraditi?

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. Oni. dodijelite odgovarajućim parametrima oznake

nulte 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:

Bok svima!!! U ovom ćete članku naučiti kako umetnuti sliku u HTML dokument. Nije uopće teško. Ali prvo bih vam želio dati neke preporuke u vezi sa slikama na web stranici.

Savjet: Kada postavljate slike na web stranicu, nemojte se zanositi animiranim slikama, jer će to odvratiti pozornost čitatelja od najvažnije stvari - teksta. Bolje je koristiti obične slike bez animacije.
Pokušajte koristiti jedinstvene slike na svojim web stranicama. Možete pročitati kako napraviti jedinstvenu sliku, a možete i napraviti prekrasne slike.

Započnimo.

Kako ubaciti sliku u html?
Dakle, kao što sam rekao, ovdje nema ništa komplicirano, dodajte ovaj html kod.

kartinka je naziv slike
jpg je proširenje slike. Ekstenzija može biti gif, png, bmp.

Ako se slika nalazi u mapi sa slikama, tada će put do slike biti ovakav:

slike - naziv mape u kojoj se nalazi slika "kartinka.jpg".

Ako je slika na drugom mjestu, kod će biti ovakav:

https://www.site je adresa stranice.

Primjer :

Da biste to učinili, jednostavno stavite sliku između elementa veze:

Atributi za slike

ALIGN - ovaj atribut dizajniran je za vodoravno prelamanje ili poravnavanje slike.
lijevo - Lijevo poravnat, tekst će teći udesno.
pravo - Poravnan udesno, tekst teče ulijevo.

Proizlaziti :

desno poravnanje

HSPACE - vodoravni razmak od slike (u pikselima).
VSPACE - okomiti razmak od slike (u pikselima).

Proizlaziti :

uvlake od slike

HEIGHT - visina slike (pikseli).
WIDTH - širina slike (pikseli).

Proizlaziti :

TITULA - Ovo je naslov slike. Naslov će se prikazati ako prijeđete mišem preko slike.

title=" Pozdrav svima - stranica!!!!}">

Proizlaziti :

naslov slike

BORDER - ovaj atribut je odgovoran za veličinu okvira oko slike. Okviri se pojavljuju u takvim slučajevima kada sliku napravite poveznicom. Ako atribut BORDER postavite na nulu, rub se neće prikazati.

Proizlaziti :

A ako promijenite vrijednost granice na 5:

Proizlaziti :

Bilo koja slika može se koristiti kao pozadina. Da biste to učinili, dodajte atribut pozadine oznaci tijela.

pozadina="vaša_pozadina.jpg">

Tekst se može prikazati na pozadini slike.

Primjer :

Proizlaziti :

Slika kao pozadina

Na ovome bih mogao završiti temu "Kako umetnuti sliku u HTML", ali znam da mnoge ljude zanima pitanje kako centrirati sliku.
Da biste centrirali sliku, samo trebate upotrijebiti ovaj trik:

To je sada sigurno sve. Prijeđimo na sljedeću lekciju.

Dok putujete internetom, naravno vidite na mnogim stranicama razne slike, banneri, 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 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. Takve kvalitete kao što su: multifunkcionalnost, svestranost, mali volumen izvornih datoteka s dovoljno dobra kvaliteta, služio ovim formatima dobra usluga, učinkovito 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 format znatno inferiorniji 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 ove datoteke(slike) koje ž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 ono š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, to je već dovoljno za umetanje slike na web stranicu, ostali parametri su izborni, ali ipak preporučam 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 stvoriti 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 mapu img. 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 i prethodni govornik: napišem kod kao vaš, promijenim samo naziv datoteke: umjesto mers.1/jpeg ubacim vezu Mercedes/jpeg Samo se prozor pojavljuje na stranici natpis na vrhu "Front view of the car", a nema slike, 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 gore link!

Pozdrav! Problem je isti, napravio sam mapu pod nazivom img na istom mjestu gdje su dokumenti stranice, slike s imenom 1.jpg su spremljene u ovu mapu, 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 prilikom postavljanja HTML dokument poslužitelju, umjesto slika postoje prazna mjesta u okviru. Iako su prije displeja slike bile kakve trebaju biti.

Dmitry, čuda se ne događaju, negdje ste pogriješili, provjerite 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 upisao, 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 ne trebate kopirati kodove pa ih lijepiti, već ih sami napisati i sve će raditi... evo teksta moje slike

Kopirao sam vaš popis, zalijepio svoje vrijednosti - tu je slika, a zatim upisujem istu stvar 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

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

I ja sam dugo patio, ispalo je 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 toga postoji 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.

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 zvao mapu 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 naziv uključuje 1.gif...ja to radim u notepadu

napravio i ne izlazi puna putanja, mozilla ne vidi fotografiju u exploreru i označi 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 web mjesto: sadrži web stranicu i crtež. Umetnuto: POMOĆ ŠTO JE MOJA POGREŠKA POŠTE: [e-mail zaštićen]

Kako možete 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:

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, tzv jpg(Joint Photographic Experts Group - Zajednička skupina stručnjaka za fotografije - 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 - 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 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 relativna veza. 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 ispunjavanje ovog atributa. 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 oblasti 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:

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 tu 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:

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 tome kada budemo gledali CSS, ali za sada samo pogledajte 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 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 te manipulacije (i mnogo više) rade pomoću CSS-a, pa smo odlučili da vas ovdje ne zamaramo time. 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