zdravo dragi čitatelji blog! U ovom ćete članku saznati sve o kako umetnuti sliku na html stranica . Imate li nekoliko slika koje želite staviti na svoju stranicu ili želite staviti logo na svoju stranicu? Sve je ovo jednostavno. Nakon što pročitate ovaj članak, moći ćete bez ikakvih poteškoća umetati slike u svoje html stranice. Da bismo to učinili, detaljno ćemo govoriti o tome označiti i njegovih atributa, brzo ćemo pogledati formate grafičkih datoteka kao što su gif, jpeg i png, a također ćemo pogledati i nove HTML5 značajke koje olakšavaju umetanje video i audio zapisa na vaše web mjesto.

Zbog činjenice da grafički podaci i html tekst ne mogu se kombinirati u jednoj datoteci; za njihov prikaz na web-mjestu koristi se drugačiji pristup od ostalih elemenata html stranica. Kao prvo, grafičke slike, a ostali multimedijski podaci pohranjuju se u zasebne datoteke. A kako bi ih implementirali u web stranicu, koriste posebne oznake koje sadrže poveznice na njih zasebne datoteke. Konkretno, takva oznaka je označiti . Nakon što naiđe na takvu oznaku s adresom, preglednik prvo od web poslužitelja zatraži odgovarajuću datoteku sa slikom, audio ili video zapisom, a tek potom je prikaže na web stranici.

Pozivaju se sve grafičke slike i, općenito, svi podaci koji su pohranjeni u datotekama odvojenim od web stranice implementiran elementi stranice.

Prije umetanja slika i detaljnog gledanja oznake , vrijedi naučiti malo o grafičkim formatima.

Formati grafičkih slika.

Postoji mnogo različitih grafički formati, ali preglednici podržavaju samo nekoliko. Pogledajmo tri od njih.

1. JPEG format(Zajednička skupina stručnjaka za fotografiju). Prilično popularan format koji se koristi za pohranu slika. Podržava 24-bitnu boju i zadržava sve polutonove na fotografijama nepromijenjenima. Ali jpeg ne podržava prozirnost i iskrivljuje sitne detalje i tekst na slikama. JPEG se prvenstveno koristi za pohranjivanje fotografija. Datoteke ovog formata imaju jpg proširenja, jpe, jpeg.

2. GIF format(Format grafičke razmjene). Glavna prednost ovog formata je mogućnost pohranjivanja nekoliko slika odjednom u jednu datoteku. To vam omogućuje stvaranje cijelih animiranih videozapisa. Drugo, podržava transparentnost. Glavni nedostatak je što podržava samo 256 boja, što nije prikladno za pohranu fotografija. GIF se uglavnom koristi za pohranu logotipa, natpisa, slika s prozirnim područjima i sadrže tekst. Datoteke u ovom formatu imaju nastavak gif.

3. PNG format(Prijenosna mrežna grafika). Ovaj je format razvijen kao zamjena za naslijeđeni GIF i, u određenoj mjeri, JPEG. Podržava transparentnost, ali ne dopušta animaciju. Ovaj format ima png ekstenziju.

Prilikom izrade web stranica obično koriste slike u JPEG ili GIF formatu, ali ponekad koriste PNG. Glavna stvar je razumjeti u kojim je slučajevima koji format bolje koristiti. Ukratko:

JPEG se najbolje koristi za pohranjivanje fotografija ili slika u sivim tonovima koje ne sadrže tekst;

• GIF se prvenstveno koristi za animaciju;
• PNG je format za sve ostalo (ikone, gumbe itd.).

Umetanje slika u html stranice

Dakle, kako umetnuti sliku na web stranicu? Možete umetnuti sliku koristeći single označiti . Preglednik postavlja sliku na mjesto na web stranici gdje nailazi na oznaku .

Kod za umetanje slike u html stranica izgleda ovako:

Ovaj html kod postavit će na web stranicu sliku pohranjenu u datoteci image.jpg koja se nalazi u istoj mapi kao i web stranica. Kao što ste mogli primijetiti, adresa slike je navedena u atribut src. Već sam ti rekao što je to. Dakle, atribut src je obavezan atribut koji služi za označavanje adrese datoteke sa slikom. Bez atributa src oznaka img je besmislena.

Evo još nekoliko primjera navođenja adrese datoteke sa slikom:

- ovaj html kod umetnut će sliku pod nazivom image.jpg na stranicu, koja je pohranjena u mapi sa slikama koja se nalazi u korijenu web stranice.

Atribut src može sadržavati ne samo relativne veze na slike. Budući da se slike pohranjuju na mreži zajedno s html stranicama, svaka slikovna datoteka ima svoj vlastiti URL. Stoga možete umetnuti url slike u atribut src. Na primjer:

Ovaj kod umetnut će sliku sa stranice mysite.ru na stranicu. URL se obično koristi kada pokazujete na sliku na drugom mjestu. Za slike pohranjene na vašoj stranici bolje je koristiti relativne veze.

Označiti je inline element, pa ga je bolje smjestiti unutar blok elementa, na primjer unutar oznake

- stavak:

Vježbajmo i zalijepimo na našu stranicu prethodne članke o html slika. Napravit ću mapu “images” pored html datoteke svoje stranice i tamo postaviti slikovnu datoteku “bmw.jpg”, koja izgleda ovako:

Tada će html kod stranice s umetnutom slikom biti ovakav:

Web stranica o automobilima.

Dobro došli na našu web stranicu o automobilima. Ovdje ćete pronaći mnoge zanimljive i korisni članci o autima, o njima Tehničke specifikacije i značajke.

Znanstveni jezik automobil Ovaj:

Mehanička cesta bez staze vozilo s najmanje 4 kotača.

---

Klasifikacija automobila

Automobili su sljedećih vrsta:

• Putnički automobil;


• Teret;


• terenac;


• Lud;


• Pokupiti;


• Sportski;


• Utrke.

Sva prava pridržana. 2010
Web stranica o automobilima.

I pogledajte rezultat prikaza u pregledniku:

Kao što vidimo, nema ništa komplicirano u postavljanju slika na web stranice. Zatim, pogledajmo još nekoliko važnih atributa oznake. .

Atribut alt je rezervna opcija

Budući da se slikovne datoteke pohranjuju odvojeno od web stranica, preglednik mora postavljati zasebne zahtjeve za njihovo preuzimanje. Ali što ako na stranici ima puno slika, a brzina mrežne veze je niska, onda se učitava dodatne datoteke trebat će dosta vremena. A još je gore ako je slika izbrisana sa servera bez vašeg znanja.

U tim slučajevima, sama web stranica će se uspješno učitati, samo će se umjesto slika prikazati bijeli pravokutnici. Stoga, kako bismo korisniku rekli što je slika, . Pomoću ovog atributa određujete takozvani zamjenski tekst, koji će biti prikazan u praznom pravokutniku dok se slika ne učita:

A ovako to otprilike izgleda:

Postavite dimenzije slike

Još uvijek postoji nekoliko atributa oznake img o kojima biste trebali znati. Ovo je nekoliko atributa širina I visina. Možete ih koristiti za određivanje dimenzija slike:

širina="300" visina="200">

Oba atributa označavaju veličinu u piksela. Atribut širine govori pregledniku koliko bi slika trebala biti široka, a atribut visine koliko bi trebala biti visoka. Ova dva atributa mogu se koristiti zajedno ili odvojeno. Na primjer, ako navedete samo atribut širine, preglednik će automatski odabrati visinu proporcionalno navedenoj širini, a također iu slučaju korištenja samo atributa visine. Ako te atribute uopće ne navedete, preglednik će automatski odrediti veličinu slike prije nego što je prikaže na zaslonu. Samo je vrijedno napomenuti da će određivanje veličina slike malo ubrzati preglednik prilikom prikaza stranice.

To je sve o umetanju slika na stranice za sada, a zatim ćemo pogledati kako umetnuti audio ili video na web stranicu...

Umetanje videa i zvuka pomoću HTML 5

U nova specifikacija html5 ima nekoliko novih oznaka koje olakšavaju umetanje multimedijskih datoteka. To se prvenstveno odnosi na video i audio.

Umetnuti audio HTML5 pruža uparena oznaka Adresa datoteke u kojoj je pohranjen audio isječak naznačena je pomoću atributa src koji nam je već poznat:

Označiti

Audio isječak prema zadanim postavkama nije prikazan na web stranici. Ali ako u oznaci

Uparena oznaka koristi se za umetanje videa na web stranicu . S ovom oznakom sve je isto kao i s oznakom

Nema se što više za reći o umetanju slika i multimedije u html stranice. Nadam se da pitanje “Kako umetnuti sliku u html stranicu?” odgovorio sam ti. pa ću samo sažeti:

Za umetanje slika u html stranici koristeći jednu oznaku a u atributu navedite adresu datoteke sa slikom src: ;

• pomoću atribut alt označiti možete postaviti zamjenski tekst u slučaju da se slika ne učita;
• pomoću atributa širina I visina možete postaviti veličinu slike na web stranici;
• postoje uparene oznake za umetanje zvuka i videa u html5

Ako nešto nije jasno, pitajte u komentarima i ne zaboravite se pretplatiti na ažuriranja mog bloga. Vidimo se u sljedećim postovima!

Za umetanje slike u HTML-u Dva glavna formata koji se koriste su GIF i JPEG. GIF format može pohraniti jednostavna animacija(dinamički banneri), JPEG je odličan za slike s puno boja, kao što su fotografije. Treći format za web grafiku je PNG, ali nije široko korišten u web dizajnu. Bilo koja slika u GIF ili JPEG formatu umetnuta je na web stranicu pomoću oznake; nema završne oznake.

SRC atribut

Preko atributa src navedena je adresa (URL) slikovne datoteke, tj. preglednik pronalazi željenu sliku u direktoriju web mjesta koristeći stazu (URL) navedenu u ovom atributu. Radi praktičnosti, sve slike web mjesta nalaze se u zasebnoj mapi, obično pod nazivom slika. Na primjer, uzmite bilo koju sliku, po mogućnosti malog formata, i spremite je u stvorenu mapu slika, s imenom početnica.jpg. Zatim ćemo ga koristiti za obuku.

Pa, pokušajmo ubaciti sliku na stranicu? Pišemo kod (put - URL, napisan ovisno o lokaciji mape sa slikama):

src="image/primer.jpg" >

Bez čega ne možete izraditi web stranicu: ∼ ∼

Sve što se zna o ovom čovjeku je
da nije bio u zatvoru, ali zašto nije bio u zatvoru, ne zna se.
Mark Twain.

Ovo je lekcija o kako umetnuti sliku u HTML, kako ga dizajnirati, kako omotati tekst oko slike itd. Uostalom, poznato je da slike čine stranicu privlačnijom i drugačijom od ostalih izvora, stoga je mogućnost korištenja oznake i njezinih atributa vrlo korisna u modernog interneta. Ali glavna stvar ovdje je osjećaj proporcije!

Višak grafike otežat će HTML stranicu i time povećati vrijeme učitavanja. Osim toga, prisutnost veliki broj slike će odvratiti posjetitelje od glavnog sadržaja stranice (osim, naravno, ako je grafika glavni sadržaj stranice). Stoga ga držite umjereno i koristite ga samo tamo gdje je potrebno. I bit ćete sretni!

U lekciji o, već sam govorio o tome kako možete koristiti slike kao pozadinu HTML dokumenta. Razgovarajmo sada o tome kako se grafika koristi u “gornjem sloju” html stranice.

§ 1. Kako umetnuti sliku

Za umetanje slika u HTML koristite oznaku IMG S obvezno atribut SRC. Ovaj atribut govori pregledniku stazu do slikovne datoteke. Oni. za umetanje slike s nazivom logo.jpg na određeno mjesto na stranici (pod uvjetom da se nalaze i stranica i slika u jednoj mapi(direktorij)) trebate umetnuti sljedeći html kod na ovo mjesto:

src="logo.jpg">

Ako se slika i stranica nalaze u drugačiji direktorije (mape), tada trebate navesti put do slike relativno stranice. Na primjer, ako se html stranica nalazi u direktoriju (mapi) stranice, u istom direktoriju (mapi) postoji poddirektorij (mapa) images, u kojem se nalazi naša slika logo.jpg, a zatim da biste je umetnuli morate napiši ovako:

images/logo.jpg">

Ili se ne morate brinuti i isticati puna adresa Slike. Na primjer, ovako:

http://www..png">

U potonjem slučaju, preglednik će prikazati kod ovako:

Bilješka. Ako se slika nalazi na vašem računalu, ali ga želite umetnuti na internet stranicu, onda od toga neće biti ništa. Da biste to učinili, prvo morate premjestiti sliku na neko mjesto na internetu(Na primjer, ). I navedite punu adresu u kodu stranice do ove točke sa slikom.

Pored potrebnog atributa SRC na oznaci IMG Postoji još nekoliko neobaveznih atributa. Pogledajmo ih pobliže.

§ 2. Određivanje veličine slike

Počnimo s atributima koji vam omogućuju postavljanje dimenzije slike(točnije iskolčiti prostor za te dimenzije na stranicama). Evo ih:

• širina- širina slike u pikselima ili postocima;


• visina- visina slike u pikselima ili postocima.

Ako se koriste ovi atributi, prvo će dodijeliti prostor za grafiku, pripremiti izgled dokumenta, prikazati tekst, a tek onda učitati sliku. Istodobno će sliku smjestiti u pravokutnik odabrane veličine, čak i ako su stvarna širina i visina slike veće (sažimanje) ili manje (razvlačenje). U slučaju kada se ti atributi ne koriste, preglednik će odmah učitati sliku, a prikaz teksta i ostalih elemenata koji slijede kasnit će.

Širina i visina slika mogu se odrediti u pikselima (veličina slike bit će konstantna bez obzira na razlučivost zaslona) i u postocima (veličina slike ovisit će o razlučivosti zaslona korisnika). Na primjer:

širina="50" visina="20">

širina="10%" visina="5%">

§ 3. Zamjenski tekst

Ako je korisnik u postavkama preglednika onemogućio prikaz slika, tada se umjesto slike može prikazati alternativni tekst koji bi objasnio kakva bi grafika tu trebala biti. To se postiže korištenjem atributa ALT:

U tom slučaju preglednik će rezervirati prostor na stranici za sliku, ali će umjesto same slike prikazati tekst koji upišete u vrijednost atributa ALT:

Ponavljam, to će se dogoditi ako je korisnik onemogućio prikaz grafike. Ako nije, slika će sakriti alternativni tekst.

§ 4. Usklađivanje slike

Korištenje atributa koji vam je već poznat uskladiti možete kontrolirati poravnanje slika u odnosu na druge elemente html stranice. At atribut uskladiti ima nekoliko značenja, ali mi smo najviše ovaj trenutak Zanimaju me dvije:

• lijevo- slika se nalazi uz lijevi rub stranice, a tekst teče oko slike s desne strane;


• pravo- slika se nalazi na desnom rubu stranice, a tekst i drugi elementi teku oko slike s lijeve strane.

Na primjer, HTML kod

preglednik će prikazati ovako

I ovaj HTML kod:

izgledat će ovako:

Kako biste spriječili prelamanje teksta oko slike, možete upotrijebiti oznaku BR(poznato nam iz prethodnog odjeljka o). Na oznaci BR postoji atribut čisto, koji može imati tri vrijednosti:

• lijevo- zaustaviti prelamanje teksta oko lijevo poravnatih slika;


• pravo- zaustaviti prelamanje teksta oko desno poravnatih slika;


• svi- zaustaviti prelamanje teksta oko slika poravnatih lijevo i desno.

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

Dodavanje slike odvija se u dvije faze: prvo se priprema grafička datoteka pravu veličinu i format, 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čka datoteka , ugrađen u web dokument. Što je manji, to će se slika brže prikazati.

2. Često fizičke dimenzije slike (širine i visine) moraju biti ograničene (smanjene) u širinu i visinu. 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 izvorne datoteke s dovoljnim 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 mnogo inferiorniji u prepoznavanju GIF formati i JPEG.

Obično za slike (slike) koje stvaraju zasebna mapa u korijenskom direktoriju iu njemu su pohranjene sve slike za stranicu. 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 kodu web stranice oni pišu puni put na grafičku datoteku (gdje se slika nalazi), kao i naziv ovu datoteku(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 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(staviti stvarna brojkaširina 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 veličine svoju datoteku. 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 je gore link!

Pozdrav! Problem je isti, kreirao sam mapu pod nazivom img na istom mjestu kao i dokumenti stranice, slike pod nazivom 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="Pogled automobila sprijeda" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута 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 zalijepiti, 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

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

I ja sam dugo patio, ispalo je da mapa sa slikama treba 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 indeks... 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 (slika) 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 put bio ispravno napisan. Č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 najnovijoj Firefox Mozilli))

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 ga mapa img u img, tj. svi velikim slovima, i preimenujte stazu 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 caka?.. Šifra je:

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 traženi parametar src, čija vrijednost označava put do željenu sliku u imeniku vaše web stranice.

Na primjer, da postavite sliku na stranicu:

Sljedeći redak postavljen je na pravo mjesto u dokumentu:

Ovo pregledniku daje do znanja da je korijenski direktorij stranice 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.

Evo primjera navođenja relativne adrese slike ako vaša web-lokacija ima više složena struktura i prethodni primjer ne radi:

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žeš pitati prave 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 , zatim pod ova slika Na stranici će se dodijeliti prostor, 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 običnoj ulici, u običnoj kući, živi obična švedska obitelj po imenu 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 je potrebno staviti na stranicu velika slika. 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: