Umetanje slike u HTML. Umetanje slike u html pomoću oznake

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 u savremeni internet. 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 veliki broj slike ć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

Da biste umetnuli slike 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 da napiši ovako:

images/logo.jpg">

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

http://www..png">

IN poslednji slučaj Pregledač ć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.

Osim toga potreban atribut 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, možete prikazati alternativni tekst, što bi objasnilo kakva bi grafika trebala biti ovdje. Ovo se postiže upotrebom 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ć poznajete poravnati možete kontrolisati poravnanje slika u odnosu na druge elemente html stranice. Na atributu poravnati postoji nekoliko značenja, ali mi smo najviše ovog trenutka zanimaju me 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 spriječili premotavanje 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- zaustavi prelamanje teksta oko slika poravnatih i lijevo i desno.

Kako umetnuti sliku u html stranicu

Da biste umetnuli sliku (fotografiju ili bilo koju grafiku) na sajt, potrebno je da navedete putanju do izvora (do fajla slike) pomoću oznake img. 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 pisma i brojevi), format slike(ekstenzije: GIF, JPG, JPEG, PNG. Moguće je koristiti animirane slike (GIF).
Put do slike je naznačen apsolutnim ili relativnim, ovisno o tome gdje se slika nalazi na vašoj web stranici ili na Internetu na resursima trećih strana (tada morate navesti URL)

Magla. Umetnik Vladimir Knjagnitski

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

Kod. Kod pokazuje apsolutnu adresu Slike

Veličina slike i debljina okvira

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

Atributi IMG oznake

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

poravnati- Poravnava sliku sa jednom stranom dokumenta
align="left" - Lijevo poravnanje
align="right" Desno poravnanje
align="bottom" Donje poravnanje
align="top" Poravnanje na vrhu
align="middle" Srednje poravnanje

alt- Prikazuje tekst na slici. Alternativa grafikama ako se ne učitavaju
granica- Postavlja debljinu okvira oko slike u pikselima. Podrazumevano, okvir se ne koristi.

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

hspace horizontalna uvlaka
vspace vertikalni prostor

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 o pomoći align atribut sa lijevom vrijednošću. align="lijevo" .
Ovo je, naravno, mnogo bolje od prethodne opcije za uređenje 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 tekst koji teče oko slike. Veoma je važno da se slika na ekranu ne spoji sa tekstom, da ne iritira, prija oku i bude na svom mestu. Dovoljna količina teksta jasno će dekonstruirati primjer.
Postoje pravila za izgled u izdavaštvu knjiga, a trebala bi postojati pravila za izgled u izradi web stranica. Slika se nalazi lijevo od teksta o korištenju atributaporavnati sa vrijednošću LIJEVO, odmaknuti od teksta - 20 piksela horizontalno.
align="left" hspace=20 Uvlake se dodaju pomoću atributa HSPACE(horizontalno uvlačenje) i VSPACE(vertikalna udubljenja). IN u ovom slučaju vertikalni prostor jednaka nuli tako da gornji dio slike bude u ravnini gornja linija tekst. Ako je uvlaka nula, nije naznačena. Pa, vertikalni pomak je naznačen u atributu. I iako se webmasteri trenutno pozivaju da odustanu HTML atributi i potpuno preći 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 vrednostiPRAVO, dodao uvlake koristeći atribute HSPACE(horizontalno uvlačenje). I VSPACE(vertikalna udubljenja). U principu, sve je isto kao u prethodna verzija, samo umjesto toga lijevo, naznačeno u pravu a slika nije umetnuta ispred teksta, već otprilike u sredini. Formatiranje sa atributima poravnati(linearno poravnanje) i korištenje horizontalnih i vertikalnih uvlaka daje sasvim normalan rezultat. Slika je okružena tekstom s lijeve, gornje i donje strane (ako ima puno teksta). Uvlačenje teksta sa slike na lijevoj, gornjoj i donjoj strani je 20 piksela. Sve je kako smo naveli u kodu.
Najčešće se koriste dvije vrste poravnanja (lijevo i desno), a ostale... Gotovo sve ostale se smatraju zastarjelim. Na modernim web stranicama sve slike (i zapravo cijeli dizajn) su formatirane pomoću kaskadnih stilskih tablica (CSS)

Tekst, tekst, tekstualni nastavak teksta

Slika se nalazi pomoću atributa align sa značenjem srednji. Dodato uvlačenje pomoću atributa HSPACE(horizontalno uvlačenje) i VSPACE. To izgleda ovako, kod je napisan ispod... Ovdje završavamo s atributima pozicioniranja slike

Kako koristiti alt i title atribute.

Atributi alt i title sadrže naslov slike. ALT je alternativa slici ako se iz nekog razloga ne učitava. Naslov je naslovni natpis na slici. Pojavljuje se kada pređete mišem preko slike.
Ako web stranicu pravite samo za sebe, onda ne morate koristiti ove atribute. Ako je stranica namijenjena ljudima, onda ovi atributi moraju biti popunjeni jasnim, tačnim opisom slike.
Prvo, pogodno je za posetioce, a drugo, neophodno je za tražilice. To je tekst unutar IMG oznake koji dozvoljava roboti za pretragu indeksirajte slike, sortirajte ih po ključne riječi i pružaju ih na osnovu zahtjeva korisnika. Inače, Yandex čak upozorava da ako slika nema smislen opis, neće biti uključena u pretragu. Samo standardne slike su indeksirane grafički formati(JPEG, GIF i PNG). Pozadinske slike i slike otvorene pomoću skripte nisu indeksirane.

KOD slike 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 zatvaranje oznake

Slike – možda su one te koje oblikuju naše opšta ideja O svjetska mreža. Slažem se sa tim grafičke informacije osoba općenito pamti mnogo bolje od teksta. Stoga su slike važan dio svake web stranice i svake web stranice. I zato želim da vam kažem kako da umetnete html slika.

Umetanje slike u html pomoću oznake

Sigurno znate da se sve naredbe u html-u izvršavaju pomoću oznaka. Tako smo smislili našu vlastitu oznaku za slike - . Jednostruka je, odnosno nema završni dio.

Najvažnija stvar img atribut tag je src (izvor) – put do slike. U njega upisujete adresu na kojoj se nalazi slika. Može se napisati kao apsolutno ( website/images/images2/image.jpg) ili kao relativna ( images/images2/image.jpg).

Oba ova puta vode do iste datoteke image.jpg, koja se nalazi u folderu image2. To se, pak, nalazi u direktoriju slika, a ono u korijenskom folderu. Ako sve relativno zapišete, onda kada promijenite naziv domene vaše stranice, sve će ostati operativno. Na primjer, wordpress editor po defaultu ubacuje apsolutne adrese. Ali lično, neću mijenjati domenu i to mi odgovara.

Dodatni atributi i dizajn putem css-a

Dakle, hajde da skrenemo sa teme: za prikaz slike dovoljno je navesti src atribut, 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 je poravnat ulijevo. Možete ga staviti i na desno i na sredinu (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 kursorom preko nje
• vspace i hspace – vertikalni i horizontalni prostor slike od ostatka sadržaja. Pažnja! Atributi su već zastarjeli i bolje je postaviti ove uvlake kroz stilski list
• class – klasa stila koja je pridružena slici i na nju primjenjuje neke stilove

Ubaci tako slatku sliku. Ovdje smo dodali preview klasu i sada sa css-om možemo joj pristupiti kroz nju i specificirati bilo koje stilove. Na primjer, ove:

Pregled( padding: 20px; margina: 10px; granica: 5px puna narandžasta; transformacija: skewX(10deg); box-shadow: 0 0 15px 10px ljubičasta )

Dozvolite mi da sumiram

Dakle, da biste prikazali sliku, trebate samo napisati img tag i uključiti src atribut u nju, koji određuje putanju do slike. Sve ostalo jeste dodatne funkcije- poravnanje, dimenzije, alternativni tekst, rotacije, okviri, itd.

I na kraju, idealno bi bilo da sve ovo bude napisano preko CSS-a. Odnosno, ne postavljajte dimenzije u atributima, već dodajte dodatnu stilsku klasu na sliku, koja će odrediti dimenzije. Ista stvar sa poravnanjem, koje se u css-u može uraditi pomoću svojstva poravnanja teksta, kao i plutajući blokovi plutaju .

Rad sa slikama u HTML-u (kako umetnuti sliku, promijeniti njenu veličinu, napraviti sliku kao link).

Umetanje slike

Neuparena oznaka se koristi za umetanje slike u HTML dokument , koji se postavlja na mjesto u dokumentu gdje treba umetnuti sliku. Ova oznaka ima potreban parametar src, čija vrijednost označava putanju do željenu sliku u imeniku Vaše web stranice.

Na primjer, da postavite sliku na stranicu:

V na pravom mjestu dokument sadrži red:

Ovo omogućava pretraživaču da zna da je osnovni direktorijum sajta www.mysite.com postoji poddirektorij img 1.png

Ovdje smo naveli punu putanju (ili apsolutnu adresu) na sliku. Možete li da navedete relativna adresa slike:

Pretraživač tumači ovu liniju 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 postaviti na stranicu.

Evo primjera navođenja relativne adrese slike ako vaša stranica ima složeniju strukturu i prethodni primjer nije prikladan:

Pretraživač tumači ovu liniju na sljedeći način: kombinacija znakova ../ znači da se morate popeti za jedan nivo gore od direktorija u kojem se nalazi ovaj html dokument; a zatim kao u prethodnom primjeru: u direktoriju u kojem se nalazimo nalazi se poddirektorij img, sadrži sliku s imenom 1.png, koje treba postaviti 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čina svake slike je određena sa dva parametra: širinom i visinom. Na oznaci Postoje odgovarajući parametri: širina I visina. Ovi parametri uzimaju vrijednosti u pikselima (px).

Možete postaviti stvarne dimenzije slike:

Ovo nije neophodno, ali je korisno jer... malo ubrzava proces učitavanja stranice od strane pretraživača (preglednik ne mora samostalno izračunavati ove vrijednosti). Ako su dimenzije slike odmah navedene u parametrima oznake , zatim ispod ovu sliku Na stranici će biti dodijeljen prostor, a struktura stranice se više neće mijenjati prilikom učitavanja - tekst će skakati, na primjer.

Ili možete povećati ili smanjiti sliku dodjeljivanjem parametara širina I visina druga značenja. Štaviše, ako želite proporcionalno promijeniti oba parametra, dovoljno je samo jednom od njih navesti novu vrijednost, a drugu jednostavno izostaviti. Pretraživač će ga automatski izračunati.

Na primjer, da povećamo našu sliku za 1,5 puta, možemo napisati:

ili

Rezultat će biti isti:

Više opcija širina I visina može uzeti vrijednosti u procentima. Ali! Imajte na umu da su ovo procenti veličine prozora pretraživača. U ovom slučaju, također možete specificirati samo jedan parametar i izostaviti drugi.

Na primjer, ako želimo da slika zauzima točno polovicu naše stranice u širini, moramo napisati sljedeće:

I dobićemo:

Okvir oko slike

Na oznaci postoji još jedan opcioni parametar granica. Koristite ga da podesite debljinu okvira oko slike. Podrazumevano, debljina okvira slike je nula, tj. bez okvira.

Na primjer, ovako možete dodati okvir debljine 3 piksela našoj slici:

Ovo će nam pretraživač pokazati:

Boja ivice odgovara boji teksta na stranici navedenoj pomoću parametra tekst tag (Pogledajte lekciju 6. Svojstva stranice - parametri body tag), zadana boja je crna.

A ako ne želite da vidite okvir, forsirajte parametar granica null vrijednost:

Alternativni tekst

Alternativni tekst se prikazuje u pretraživaču 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će biti prikazano kada pređete mišem preko ove slike.

Da biste dodali alternativni tekst, koristite opciju alt tag , kojoj je dodijeljena vrijednost stringa, koja mora biti zatvorena u navodnicima.

Možete kreirati alternativni tekst u više redaka.

Da biste to učinili, samo umetnite prijelom reda u HTML dokument.

tekst">

Image Alignment

Za sliku, kao i za pasus, postoji koncept poravnanja sa tekstom i drugim slikama na stranici. Također možete postaviti tip poravnanja pomoću parametra poravnati tag .

Ispod je tabela moguće vrijednosti parametar poravnati:

Opcije texttop, top, srednji, absmiddle, osnovna linija, dnu postavite vertikalno poravnanje slike. I parametri lijevo I u pravu neka pretraživač zna na kojoj strani treba biti tekst tok okolo slika.

Padding oko slike

Da biste spriječili da se tekst prelama blizu slike, možete postaviti razmak oko slike. To možete učiniti pomoću parametara hspace(lijevi i desni padding) i vspace(razmaci na vrhu i dnu) oznake .

IN sljedeći primjer Demonstrirani slučaj u kojem se tekst prelama oko slike, sa slikom poravnatom ulijevo i oko nje ima 5 piksela ispod:

U gradu Stokholmu, u najobičnijoj ulici, u najobičnijoj kući, živi jedna obična švedska porodica po imenu Svanteson. Ovu porodicu čine sasvim običan tata, sasvim obična majka i troje sasvim obične djece - Bosse, Bethan i Baby.

Evo rezultata u pretraživaču:

U gradu Stokholmu, u najobičnijoj ulici, u najobičnijoj kući, živi jedna obična švedska porodica po imenu Svanteson. Ovu porodicu čine sasvim običan tata, sasvim obična majka i troje sasvim obične djece - Bosse, Bethan i Baby.

Podjela slike na dijelove

Postoje trenuci kada je potrebno staviti na stranicu velika slika. Ali tada će stranici trebati dosta vremena da se učita. sta da radim?

Jedan od mogućih Najbolji izlaz je izrezati sliku na komade i postaviti je na stranicu pomoću stola. Da bi slika izgledala kao cjelina, potrebno je ukloniti obrub tablice i sav padding unutar i između ćelija. One. dodijeliti odgovarajuće parametre oznake

nulte vrijednosti: border="0", cellpacing="0", cellpadding="0".

U sljedećem primjeru, sliku smo podijelili na 4 dijela. Ovako će tabela izgledati:

A evo i rezultata:

Ovo omogućava prikaz sadržaja druge stranice unutar jedne stranice. Na primjer:

Većina slika koje osoba vidi na web stranicama također je sadržaj s druge stranice. Ovdje je posebno adresa emotikona u .gif formatu:

Evo načina da dodate sliku na web lokaciju, koja se može istaknuti ako pogledate kod stranice:

HTML: oznaka
http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" alt="smiley" height="30" width="30"> !}
CSS: svojstva i
CSS: pseudo elementi i
HTML: oznaka vektorska grafika
CSS: nema URL

Kako saznati adresu slike i kopirati je

Postoji nekoliko načina za kopiranje adrese slike:

1. Pređite kursorom preko fotografije i kliknite na desni ključ miševi, u pojavio kontekstni meni Od vas će se tražiti da kopirate URL i kliknete na potrebnu stavku.
   Sl.1 Ako pokažete na fotografiju i kliknete na desnu tipku miša, onda Mozilla Firefox Otvoriće se kontekstni meni sa sledećim stavkama
2. Postavite kursor preko fotografije, kliknite na desnu tipku miša, u kontekstnom meniju koji se pojavi od vas će se tražiti da proučite karakteristike fotografije, kliknite na potrebnu stavku (na slici 1, pogledajte stavku "Informacije o slici" ; u Internet Explorer pogledajte “Svojstva”), u prozoru koji se otvori odaberite adresu slike,
   • Kliknite desnim tasterom miša i kliknite na „Kopiraj“ u kontekstnom meniju koji se pojavi.
   
   Sl.2 Ako pokažete na fotografiju u Mozilla Firefox-u, kliknete desnim tasterom miša, izaberete “Informacije o slici” u kontekstualnom meniju koji se pojavi, otvoriće se prozor u kome možete videti listu slika korišćenih na stranici, njihovu adresa, alternativni tekst (sadržaj u atributu alt), stvarna veličina i razmjer koji se koristi
3. Postavite kursor preko fotografije, kliknite na desnu tipku miša, u kontekstualnom meniju koji se pojavi od vas će se tražiti da odete na stranicu sa slikom, kliknite na potrebnu stavku (na slici 1, pogledajte stavku "Otvori sliku") . Otvoriće se stranica koja sadrži samo jednu sliku. IN puna visina, ako je prethodno smanjen za ili sa koristeći CSS. Odaberite adresu stranice koja se otvara adresna traka Pretraživač,
   • pritisnite kombinaciju tastera tastatura Ctrl+C.
   
   Sl.3 Ovako izgleda stranica sa emotikonom.
   Njen URL: http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif
4. On dodirnih uređaja(pametni telefon, tablet) držite prst preko fotografije dugo bez pomeranja, u kontekstualnom meniju koji se pojavi od vas će se tražiti da odete na stranicu sa slikom, kliknite na potrebnu stavku (može se zvati "Prikaži sliku") . Otvoriće se stranica koja sadrži samo jednu sliku. U punoj visini ako je prethodno smanjena koristeći ili koristeći CSS. Zatim dugo pritisnite adresu u adresnoj traci pretraživača. Nakon što se pojave klizači i odabere se cijeli URL (ako je potrebno, klizači se mogu pomaknuti na potrebnu udaljenost), kliknite na dugme „Kopiraj“ na panelu koji se pojavi.
5. Pređite kursorom preko fotografije, kliknite na desnu tipku miša, u kontekstualnom meniju koji se pojavi od vas će se tražiti da odete na stranicu pozadinska slika, kliknite na željenu stavku. Otvoriće se stranica koja sadrži samo jednu sliku. Puna visina ako je prethodno smanjena pomoću CSS-a. Odaberite adresu stranice koja se otvara u adresnoj traci pretraživača (vidi sliku 3),
   • Kliknite desnu tipku miša i odaberite "Kopiraj" u kontekstnom izborniku koji se pojavi.
   • Pritisnite prečicu na tastaturi Ctrl + C.
   
   

Kako sačuvati sliku

Postavite kursor preko fotografije, kliknite desnim tasterom miša, u kontekstualnom meniju koji se pojavi biće zatraženo da sačuvate sliku, kliknite na potrebnu stavku (na slici 1, pogledajte stavku „Sačuvaj sliku kao... ”), u prozoru koji se otvori, izaberite fasciklu na računaru u koju će biti sačuvan crtež.

Ako je fotografija pozadinska slika, onda prvo morate otići na stranicu sa slikom (vidi sliku 3).

Kako dodati sliku na web stranicu

Prvo, slika mora biti učitana sa vašeg računara na hosting sajta, u socijalna mreža(U kontaktu sa, Google+ itd.), Yandex.Disk ili Google.Disk, tako da slika ima svoju adresu na internetu.

Ako postoji vizualni uređivač, redoslijed radnji je obično sljedeći:

1. postavite kursor miša na mjesto gdje bi se fotografija trebala pojaviti,
2. kliknite na ikonu sličnu ili na,
3. odaberite fajl sa vašeg računara,
4. ako je moguće, popunite alternativni tekst (aka opis slike).

Rezultat: slika će biti umetnuta na stranicu stranice, i što je najvažnije, postavljena na server web projekta. Sada će imati svoju adresu na internetu. A sada možete uređivati ​​kod koji pruža vizualni uređivač na kartici „HTML“, budući da vizualni uređivač često dodaje nepotrebne oznake, a mogućnosti HTML-a i CSS-a su neuporedivo veće.

Ako već postoji URL, ali sa druge malo poznate stranice, onda je ipak bolje da takvu fotografiju sačuvate na svom računaru, a zatim je otpremite na server stranice, ako ovu akciju dozvoljeno od strane vlasnika fotografije, kako se ne bi kršila autorska prava, pošto

• Neke stranice mogu zabraniti korištenje adresa slika na drugim resursima (pročitajte više o zabrani hotlinkinga).
• stranice su kratkog vijeka i nakon nekog vremena brisanjem web projekta, slika na vašoj web stranici će također nestati, ostavljajući na svom mjestu najboljem scenariju Samo alternativni tekst.

Ako ne vizuelni urednik, tada je redoslijed radnji obično sljedeći:

1. kreirajte folder sa slikama,
2. kreirajte .htaccess datoteku u folderu sa slikama, čiji će sadržaj biti # zatvorite pristup http://site.ru/image/ Opcije -Indeksi # zatvorite pristup http://site.ru/image/.htaccess naredi dozvoliti, odbiti odbiti od svih
3. otpremi u folder image image, koji se zove, na primjer, plain.gif (ubuduće će sve slike također biti učitane u ovaj folder),
4. na HTML stranici koristite URL kao što je http://site.ru/image/plain.gif, na primjer, http://site.ru/image/plain.gif" alt="smiley" height="30" width="30">!}