Umetnite grafički fajl u web stranicu. Umetanje grafike u HTML dokument

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

Ovo je lekcija o tome kako umetnuti sliku u HTML, kako ga dizajnirati, kako premotati tekst oko slike, itd. Uostalom, poznato je da slike čine web stranicu privlačnijom i drugačijom od drugih resursa, pa je mogućnost korištenja oznake i njenih atributa vrlo korisna na modernom Internetu. Ali glavna stvar ovdje je osjećaj za proporciju!

Višak grafike će otežati html stranicu i, shodno tome, povećati vrijeme njenog učitavanja. Osim toga, prisustvo velikog broja slika će odvratiti posjetitelje od glavnog sadržaja stranice (osim ako, naravno, grafika nije glavni sadržaj stranice). Zato ga držite u umjerenim količinama i koristite ga samo tamo gdje je potrebno. I bićete srećni!

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

§ 1. Kako umetnuti sliku

Za umetanje slika u HTML koristite oznaku IMG With obavezno atribut SRC. Ovaj atribut govori pretraživaču putanju do datoteke slike. One. da umetnete sliku sa nazivom logo.jpg na određeno mjesto na stranici (pod uslovom da se i stranica i slika nalaze u jednom folderu(direktorij)) morate umetnuti sljedeći html kod na ovo mjesto:

src="logo.jpg">

Ako se slika i stranica nalaze u drugačije direktorije (mape), tada morate odrediti putanju do slike relativno stranice. Na primjer, ako se html stranica nalazi u direktoriju (folderu) stranice, u istom direktoriju (folderu) nalazi se poddirektorij (folder) slike, u kojem se nalazi naša slika logo.jpg, tada da biste je umetnuli potrebno je napiši ovako:

images/logo.jpg">

Ili ne morate da brinete i ističete punu adresu slike. Na primjer, ovako:

http://www..png">

U potonjem slučaju, pretraživač će prikazati kod ovako:

Bilješka. Ako se slika nalazi na vašem računaru, ali želite da ga umetnete na internet stranicu, onda ništa neće biti od toga. 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 tačke sa slikom.

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

§ 2. Određivanje veličine slike

Počnimo s atributima koji vam omogućavaju postavljanje dimenzije slike(tačnije, iskolčiti prostor za ove dimenzije na stranicama). Evo ih:

širina- širina slike u pikselima ili procentima;

visina- visina slike u pikselima ili procentima.

Ako se ovi atributi koriste, prvo će dodijeliti prostor za grafiku, pripremiti izgled dokumenta, prikazati tekst i tek onda učitati sliku. Istovremeno, on će postaviti sliku u pravougaonik odabrane veličine, čak i ako su stvarna širina i visina slike veće (komprimiraj) ili manje (rastezanje). U slučaju kada se ovi atributi ne koriste, pretraživač će odmah učitati sliku, a prikaz teksta i ostalih elemenata koji slijede će biti odgođen.

Širina i visina slike mogu se odrediti i u pikselima (veličina slike će biti konstantna bez obzira na rezoluciju ekrana) i u postocima (veličina slike ovisi o rezoluciji ekrana korisnika). Na primjer:

width="50" height="20">

width="10%" height="5%">

§ 3. Alternativni tekst

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

U tom slučaju, pretraživač će rezervisati 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. Poravnavanje slike

Korištenje atributa koji već znate poravnati možete kontrolisati poravnanje slika u odnosu na druge elemente html stranice. Na atributu poravnati Ima više značenja, ali nas trenutno najviše zanimaju dva:

lijevo- slika se nalazi na lijevoj ivici stranice, a tekst teče oko slike na desnoj strani;

u pravu- slika se nalazi na desnom rubu stranice, a tekst i drugi elementi teku oko slike na lijevoj strani.

Na primjer, HTML kod

pretraživač će se prikazati ovako

I ovaj HTML kod:

izgledat će ovako:

Da biste zaustavili prelamanje teksta oko slike, možete koristiti oznaku BR(poznato nam iz prethodnog odeljka o). Na oznaci BR postoji atribut jasno, koji može imati tri vrijednosti:

lijevo- zaustaviti premotavanje teksta oko lijevo poravnatih slika;

u pravu- zaustavite premotavanje teksta oko desno poravnatih slika;

sve- zaustavite premotavanje teksta oko slika poravnatih i lijevo i desno.

HTML oznaka odgovorna za prikaz slike

HTML slika Može biti bilo koja slika u PNG, JPEG i GIF formatu.
HTML kod slike definisano oznakom .
HTML slika može biti pozadina web stranice.
HTML slika može se definirati kao hiperveza.

U folder D\My_first_site\ ili bilo koji drugi folder u kojem imate datoteku index.html, postavite sliku sa ekstenzijom, recimo, .jpg, nazovite je kako god želite, na primjer, xxx.

Umetanje slike u HTML kod stranice:

Tag - neuparen. Obratite pažnju na način na koji je zatvorena.

Atributi i vrijednosti

- obavezno, označava izvor slike.
alt="" - definira alternativni tekst, komentar koji čita robot za pretraživanje kada analizira sadržaj web stranice. Također je potrebno odrediti.
width="" - određuje širinu slike u pikselima.
height="" - određuje visinu slike u pikselima.

Navedite stvarne dimenzije - na taj način ćete zadržati originalni kvalitet slike.

Za web razvoj su primenljive slike u tri formata: PNG (.png), JPEG (.jpg) i GIF (.gif). Adobe Photoshop je specijalizirani alat za kreiranje grafike za web stranice. Može se koristiti za pretvaranje jednog formata slike u drugi.

HTML slika | Horizontalne i vertikalne margine

ili horizontalnu i vertikalnu udaljenost između sliku i tekst

rezultat:

Atributi i vrijednosti

hspace="" - definira horizontalna udaljenost između slike i teksta.
vspace="" - definira vertikalna udaljenost između slike i teksta.

HTML pozadinska slika

ili pozadinu stranice definisanu slikom

Imamo sljedeću sliku:

Napišimo kod za posebnu stranicu:

O atributima pozadine i pozadinske slike raspravlja se u .

Umetanje slike i njegov redosled → ../images/primer-img.jpg → vidi.

HTML slika - link

Primjer koda:

border="0" - poništava ivicu grafičke veze.

ili sve moguće načine za centriranje slika

Primjer koda:

HTML slika centrirana na stranici

Na šta ovdje treba obratiti pažnju? → Prvo, činjenica da su dimenzije naznačene - to ubrzava učitavanje slike. Drugo, specificiraju se atributi alt="" što je također vrlo poželjno učiniti čak i ako ne postoji alternativni tekst. U prvom slučaju je određeno centriranje HTML parametar, au drugom - korištenjem linearnog uključivanja kaskadnih stilskih tablica.

Vizualni dio je jedan od najvažnijih aspekata pri radu sa web stranicama. On je, naravno, inferioran u funkcionalnosti, ali ne treba ga odbaciti prije vremena. Danas ćemo razgovarati o tome kako instalirati HTML sliku na svoju web stranicu. Postoji li samo jedna mogućnost za ovo ili nekoliko? Kako mogu umetnuti HTML sliku u svoju web stranicu tako da je drugi korisnici mogu vidjeti? Šta je bolje koristiti u tu svrhu – server ili računar? Šta je HTML? Ova skraćenica se može dešifrirati na sljedeći način: jezik za označavanje hipertekstualnog dokumenta.

Koristeći ovaj jezik, formira se osnova budućeg sajta. Ovdje je također razrađeno postavljanje svih glavnih elemenata stranice. Zatim se ovdje konfigurišu php datoteke koje su odgovorne za prijenos podataka i kaskadne stilove. Osnova svake web stranice je HTML. Takođe možete izvršiti podešavanja slike koristeći ovaj jezik. Ovu operaciju možete izvesti i na druge načine, ali ako trebate osigurati početno učitavanje nekog jednostavnog objekta, bolje je koristiti ga. Počnimo da istražujemo problem koji se odnosi na umetanje HTML slike.

Kako koristiti img tag?

Pređimo na pitanje korištenja grafike. Kako možete umetnuti sliku u HTML dokument? Prije svega, ova operacija znači umetanje datoteke kao zasebnog objekta stranice. Za ovaj dodatak se koristi oznaka img. Ova oznaka se odnosi na inline elemente koji sadrže sadržaj koji se može zamijeniti. Uključuje samo četiri dijela jezika za označavanje hiperteksta. Jedan od njih je src, visina, širina. O njima ćemo dalje. Ostali dijelovi su objekt, embed, iframe. Oznaka radi kao da ima inline element. Razlika je u tome što se koristi i prikazuje vanjski vanjski sadržaj. U tom slučaju mora postojati datoteka treće strane koja će biti učitana. Ako imate pitanja o vraćanju pozadinske slike u HTML-u, najbolje je da ih odmah odbacite. Biće prikazan samo kada je računar na kome se nalazi slika pokrenut.

Korištenje atributa src

Radimo na pitanju umetanja grafičke slike u HTML dokument. Da biste odredili putanju do slike koja će biti učitana, koristite src. Opšta shema je sljedeća: trebate koristiti ovaj atribut, znak jednakosti i unijeti adresu. Kada pretraživač dođe do oznake dok analizira HTML, kreiraće oblast u kojoj će biti prikazan inline element. Eksterni fajl će biti učitan u njega u budućnosti. Ova putanja ne bi trebala sadržavati greške, jer je to mjesto gdje će program ići. Ako ovaj program ne pronađe datoteku, prikazat će se ikona greške, koja ne izgleda baš estetski ugodno.
Da biste umetnuli sliku u tabelu u HTML dokumentu, potrebno je da upišete sav potreban kod u željenu ćeliju.

Postavke slike

Sada znate kako umetnuti sliku u HTML. Hajde da shvatimo kako se to može konfigurisati. Kada datoteka počne da se preuzima na računar korisnika, veličina slike će biti automatski određena. Ako početni parametri datoteke ne odgovaraju željenim, tada u ovom slučaju mogu pomoći parametri širine i visine, koji su navedeni u pikselima. Kod u ovom slučaju će biti napisan na sljedeći način: src, a zatim adresa datoteke. Slična instrukcija također određuje širinu i postavlja širinu koja bi trebala biti. Posljednji parametar su visina i visina. Webmasteri često prave sljedeću grešku: uploaduju jednu veliku datoteku na server čija veličina doseže nekoliko MB. Zatim se upisuje putanja i slika se podešava na željenu veličinu. Tako korisnik može vidjeti kako se mala slika učitava vrlo sporo. Izvana ne izgleda baš atraktivno.

Preporuke za rad

Kako biste izbjegli negativne aspekte u svom radu, pokušajte unaprijed smanjiti veličinu slike. Naravno, ako niste potpuno sigurni koje parametre trebate koristiti za atraktivan izgled, onda možete jednostavno kreirati kopiju i pokušati s njom eksperimentirati. Također morate biti posebno oprezni kada optimizirate težinu slike. Potrebno je smanjiti težinu grafičkih datoteka bez gubitka kvalitete pretvaranjem datoteka u druge ekstenzije, koristeći posebne programe i online usluge. Ovo će cijeniti ne samo korisnici stranice, već i webmaster. Takvi fajlovi će zauzimati manje prostora na vašem hostingu i brže se učitavati.

Primjer mogućnosti snimanja

Razmotrimo kako možete odrediti putanju do slike.

1. Postavite samo ime datoteke;
2. Odredite adresu slike koja se nalazi na lokalnom računaru (serveru);
3. Detaljna putanja do lokacije datoteke koja se nalazi na drugom hostu.

Ako koristite primjer iz prve točke, slika mora biti u istom direktoriju. U drugom slučaju, lokacija je podmapa u odnosu na trenutnu stranicu. Treći primjer specificira apsolutnu putanju na kojoj se može pronaći tražena slika. U potonjem slučaju, vrijedi obratiti pažnju na sljedeću točku: slika može biti na bilo kojem serveru, ako takva upotreba nije zabranjena u htaccess datoteci, ali ako se izbriše odatle, slika će nestati na vašoj web stranici. Posebnost HTML jezika je u tome što je potreban samo dokument za označavanje. Sve ostale komponente mogu se preuzeti sa servera trećih strana. Ove metode se često koriste za povećanje brzine preuzimanja. Ovdje morate znati kako koristiti ovaj alat.

Svrha alt i naslova

Šta da radim ako se iz nekog razloga grafički fajl ne učita sa HTML dokumentom? Ako je pogrešno napisan, morate koristiti atribut alt. Ovaj atribut obavlja zadatak alternativnog predstavljanja slike. Recimo da se grafika ne učitava, ali pretraživač će i dalje kreirati oblast za sliku. Ovo je neophodno i u slučajevima kada korisnik čeka učitavanje i potrebno mu je pokazati da se program priprema za prihvatanje grafike. Da biste prikazali popratni tekst, morate koristiti atribut title. To je u suštini samo opis alata i može se koristiti na gotovo svakom vidljivom HTML elementu. Ovo nije loše, jer vam omogućava da razjasnite neke specifične aspekte. Upotreba dva atributa data u ovom podnaslovu je sljedeća: nakon visine, prethodno se dodaje alt, a zatim title. Ovi atributi mogu poslužiti ne samo da osiguraju pogodnost posjetitelja. Oni također mogu imati pozitivan utjecaj na promociju web stranice. Iz tog razloga, trebali biste stalno koristiti ključne riječi u njima. Ovo će poboljšati rangiranje resursa u uslugama slika na pretraživačima i ocjenama web stranica. Međutim, u svemu se morate pridržavati racionalnosti i opreza.

Poravnavanje slika

Atribut align je uveden za sva četiri elementa jezika za označavanje pomenuta ranije. Koristeći ovaj atribut, možete lako promijeniti lokaciju slike. Podrazumevano je poravnat prema dnu. dno je zaslužno za ovo. Kako napraviti gornje poravnanje? Da biste to učinili, trebate koristiti top. U praksi će to izgledati ovako: nakon atributa src, gdje korisnik specificira adresu slike, dodaje se atribut align i njegova vrijednost. U liniji u kojoj se nalazi slika, ona će biti poravnata sa gornjom ivicom. Kako centrirati sliku u HTML-u? Postoji još jedna opcija za poravnavanje slike: sredina. Korištenje ove funkcije neće bitno promijeniti ništa.

Kada koristite ovaj kod, slika će biti poravnata u sredini. Možete učiniti da tekst teče oko slike. Za to se koriste atributi lijevo i desno. U takvim slučajevima, slika postaje lebdeća. Pomak ulijevo izgleda isto kao i ostali pravopisi. Korištenje desnog atributa daje sličan rezultat, ali s jednom razlikom: slika će biti postavljena s desne strane. Upotreba ovih struktura ima svoje karakteristike. Na primjer, jedan od važnih problema je što je tekst preblizu slici. Kao rezultat, stvara se takozvani efekat lijepljenja, što je vrlo neugodno za oči. Ovo se može ispraviti korištenjem HTML koda ili kaskadnog stilskog lista. Za takve promjene morate koristiti atribute hspace i vspace. Prvi postavlja margine desno i lijevo, a drugi postavlja margine na dnu i na vrhu.

Kako postaviti pozadinu

Prilikom umetanja slike u HTML stranicu web stranice, atribut pozadine je vrlo koristan. Ovaj atribut je dio elementa tijela. Svrha je da se postavi putanja do grafičke datoteke koja treba da ispuni zasebnu ćeliju, tabelu ili stranicu. Upotreba ovog objekta u praksi izgleda ovako: adresa korišćene slike se upisuje kao vrednost parametra bodybackgrounda. Ovako postavljena pozadinska slika će se ponavljati duž apscisa i ordinatne ose, počevši od gornjeg lijevog ugla.

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

Slike nam odmah omogućavaju da shvatimo 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 trebali uživati u njima ako nemate Instagram ili online prodavnicu. Preporučljivo je da slike:

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

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

Za one koji ne vole da preplaćuju, na kraju članka smo pripremili bonus- lista nekoliko fotobanka u kojima možete preuzeti ogromnu količinu kvalitetnih lijepih materijala apsolutno besplatno :)

Formati slika

Na World Wide Webu se uglavnom koriste 3 vrste slika:

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

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

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

pogodno 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 na isti način kao ping, tj. )

ovaj format je prvobitno razvijen za web, tj. Slika je obično malo teška 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, kao i gif, koristi samo 256 boja. Format png-24 podržava 16 miliona boja, iako je već prilično težak. 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. Prilikom smanjenja veličine 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

Umetanje slike u html datoteku

Za dodavanje slike na stranicu, koristite tag (od engleskog image - slika, slika). Ovo je jedna oznaka i nije joj potrebna 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 (sajt je još u razvoju) ili na vašem serveru, koristite relativnu vezu. Ako je slika s mreže, onda je potrebna 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, loš internet - 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 se ovaj atribut popuni. A html validator (resurs za provjeru ispravnosti koda) će odsustvo alt atributa shvatiti kao grešku. Ako su svi atributi će biti popunjeni, a po mogućnosti će sadržavati i ključne riječi - 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 da znamo da postoji takav atribut, a „živi“ sajt ga mora popuniti. Dok je stranica na našem disku, može ostati prazna.

U primjeru ispod, namjerno smo naveli nepostojeću putanju za sliku tako da možete vidjeti kako funkcionira alt atribut

Visina i širina slika

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

U HTML5 se preporučuje da se to uradi koristeći CSS ili atribut stila , Volim ovo:

U ovom primjeru uzeli smo 30% širine, ne originalne slike, već veličine 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, 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 = "širina:30%;" >

Također možete podesiti širinu i visinu piksela. U slučaju naše pande, čije su originalne dimenzije 1196 x 796 piksela, tako da životinja ne pati kada se kompresuje, moramo zadržati proporcije, a ovdje ne možete bez kalkulatora. Recimo da želimo smanjiti veličinu slike za 3 puta, a zatim moramo postaviti dimenzije na 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č sam će 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 slikama učitava 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 se slučajno poigrate s kodom web-mjesta kreiranog u HTML-4 ili čak ranije, primijetit ćete da se veličine slike postavljaju posebnim atributi širine I visina. Ovo je zastarjela metoda, iako još uvijek vrijedi u HTML5. Međutim, preporučujemo korištenje stila, jer Na atribute širine i visine mogu uticati interni ili eksterni stilovi koji će živjeti u pretraživaču ili vašoj CSS datoteci. O tome ćemo detaljnije govoriti 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 - kao i uvijek rezultat. Ovo funkcionira kao da je prva kartica datoteka index.html, druga style.css datoteka, a treća preglednik. Dakle, sada naš CSS kaže da svi elementi sa img tagom imaju širinu od 100%. Zadane veličine atributa širine i visine su u pikselima, tako da nema potrebe za dodavanjem jedinica ovdje.

Razlika u rezultatima je očigledna :)

Također u starijim verzijama html-a korišteni su sljedeći atributi:

poravnati, koji je korišten za poravnavanje slike vodoravno ili okomito.

hspace- uvlačenje s lijeve i desne strane slike 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 (podrazumevano je nula)

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