Zdravo svima!!! U ovom članku ćete naučiti kako umetnuti sliku u HTML dokument. Uopšte nije teško. Ali prvo, želio bih vam 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 pažnju č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 da napravite jedinstvenu sliku, a možete i napraviti prekrasne slike.
Hajde da počnemo.
Kako ubaciti sliku u html?
Dakle, kao što sam rekao, ovdje nema ništa komplikovano, dodajte ovaj html kod.
kartinka je naziv slike
jpg je produžetak slike. Ekstenzija može biti gif, png, bmp.
Ako se slika nalazi u folderu slika, onda će put do slike biti ovakav:
slike - naziv foldera u kojem se nalazi slika "kartinka.jpg".
Ako je slika na drugom sajtu, onda će kod biti ovakav:
https://www.site je adresa stranice.
Primjer :
Da biste to učinili, jednostavno priložite sliku između elementa veze:
Atributi za slike
ALIGN - ovaj atribut je dizajniran da premota ili poravna sliku horizontalno.
lijevo -
Poravnan lijevo, tekst će teći udesno.
u pravu -
Poravnan udesno, tekst teče lijevo.
Rezultat :
desno poravnanje
HSPACE - horizontalni prostor od slike (u pikselima).
VSPACE - vertikalni prostor od slike (u pikselima).
Rezultat :
uvlake sa slike
VISINA - visina slike (pikseli).
WIDTH - širina slike (pikseli).
Rezultat :
TITLE - Ovo je naslov slike. Naslov će se prikazati ako pređete mišem preko slike.
title=" Pozdrav svima - sajt!!!!}">
Rezultat :
naslov slike
GRANICA - ovaj atribut je odgovoran za veličinu ivice oko slike. Okviri se pojavljuju u takvim slučajevima kada sliku napravite kao vezu. Ako postavite atribut BORDER na nulu, granica se neće prikazati.
Rezultat :
A ako promijenite vrijednost granice na 5:
Rezultat :
Bilo koja slika se može koristiti kao pozadina. Da biste to učinili, dodajte atribut pozadine u oznaku tijela.
background="your_background.jpg">Tekst se može prikazati na pozadini slike.
Primjer :
Rezultat :
Slika kao pozadina
Na ovoj napomeni bih mogao završiti temu “Kako umetnuti sliku u HTML”, ali znam da mnoge zanima pitanje kako centrirati sliku.
Da biste centrirali sliku, samo trebate koristiti ovaj trik:
To je sada sve sigurno. Pređimo na sljedeću lekciju.
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 obavezan parametar src, čija vrijednost određuje putanju do željene slike u direktoriju vaše stranice.
Na primjer, da postavite sliku na stranicu:
Sljedeći red se postavlja na pravo mjesto u dokumentu:
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
, tada će se prostor na stranici dodijeliti za ovu sliku, a struktura stranice se više neće mijenjati prilikom učitavanja - tekst će skočiti, 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 oznake tijela), 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 redova.
Da biste to učinili, samo umetnite prijelom reda u HTML dokument.
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ćih vrijednosti parametara 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
.
Sljedeći primjer prikazuje premotavanje teksta oko slike, sa slikom poravnatom lijevo i sa 5 piksela zalijevanja oko nje:
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 slučajevi kada trebate postaviti veliku sliku na stranicu. 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ćim parametrima oznakenul 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:
Dobar dan svima, dragi moji prijatelji, čitaoci i gosti mog bloga. Kao da ste na odmoru, ali nemate dovoljno vremena ni za šta. Sve je nekako u žurbi. Ali ovaj fenomen je privremen, sve će se uskoro smiriti. A danas ćemo nastaviti učiti osnove html-a. Prijatelji, šta mislite bez čega će svaka internet stranica biti bezlična, siva i dosadna? Tako je, bez grafičkog sadržaja, bilo da su to fotografije, logotipi ili pozadine.
Dakle, umetanje slike u html je takođe jedna od najvažnijih komponenti, tako da bi svako ko će sam praviti web stranice to svakako trebao znati. To je upravo ono što ćemo danas raditi sa svom ovom vakhanalijom)))
Pa, hajde da počnemo. Kao što ste već shvatili iz naslova, oznaka je odgovorna za umetanje slike
, ali ima dvije nijanse:
- Oznaka je jednostruka, tako da nema potrebe da je zatvarate
- Oznaka uvijek radi u sprezi sa atributom, koji određuje putanju do slike.
Općenito, pogledajmo primjer kako bismo konsolidirali svu ovu akciju. Da li sam u pravu? Preuzmite materijale za lekciju i otvorite html datoteku u Notepadu. A sada prije glavnog teksta napišite sljedeće:
Sve. Ovaj kratki unos će nam pružiti sliku na našoj web stranici. Pokušajte to napisati u dokumentu.
Sada sačuvajte datoteku i pokrenite je u svom pretraživaču. Hajde da vidimo šta možemo da uradimo. Uradio sam to ovako.
Atributi
Kao što sam rekao gore, oznaka img odmah dolazi u kompletu sa atributom src. Pa, mislim da ovo već razumijete, pa hajde da proučimo ostalo. Ovdje ima prostora za proširenje. Ovdje postoji samo tona atributa. Izvinite na mom francuskom).
Alt
Ako se iznenada slika iz nekog razloga nije učitala ili je nedostupna, vidjet ćete tekst koji je napisan u vrijednosti atributa Alt. Obično se ovdje piše ono što je prikazano na slici, tj. ako je prikazano nešto o nacionalnostima, onda je u alt najbolje napisati “Muškarci i žene različitih nacionalnosti”. U primjeru to izgleda ovako:
Kao rezultat toga, ako se slika iz nekog razloga ne može prikazati, tada će se pojaviti naš natpis.
U principu, ne morate ništa unositi kao alternativni tekst, ali je bolje ostaviti sam atribut, čak i ako je prazan.
Širina i visina
Za one koji znaju engleski, nije teško pretpostaviti da su ova dva atributa odgovorna za širinu i visinu slike. Odlučio sam da ove dvije stvari spojim u jednu stvar, jer obavljaju slične funkcije, reklo bi se – braća (ili sestre).
Širina je odgovorna za širinu slike, a njene vrijednosti uključuju i samu veličinu. Općenito, ako imate sliku, na primjer, 640*480 piksela, i trebate je prikazati na web stranici od 320*240, tada ćete jednostavno morati učiniti sljedeće:
Sve. Sada, kada sačuvate dokument i otvorite ga pomoću pretraživača, vidjet ćete sličicu. Imajte na umu da smo samo promijenili parametar širine, a slika je proporcionalno smanjena, tj. visina se automatski smanjila.
Visina je, kao što možete pretpostaviti, odgovorna za visinu slike. Ovdje sve funkcionira potpuno isto, ali okomito. Uzmimo istu sliku, ali nećemo postaviti širinu, već samo visinu.
Sačuvajte i idite na dokument. Kao što vidite, slika je smanjena na istu veličinu kao u prethodnom primjeru, iako smo ovaj put postavili samo visinu. Već ste shvatili da ovdje sve funkcionira u okviru proporcija, tako da u principu nema smisla postavljati oba parametra.
Pokušajmo, samo iz zabave, postaviti atribute i širine i visine u isto vrijeme, ali ćemo im samo dati nesrazmjerne parametre. Pa, onda ćemo vidjeti šta možemo.
Štedimo i sada gledamo šta nam je dato. Hmm, ovo je nešto neproporcionalno). Generalno, mislim da ste shvatili suštinu toga. Malo vježbajte kako biste konsolidirali rad s dimenzijama, a zatim prijeđite na sljedeći atribut.
Poravnajte
Pa, već ste upoznati sa ovim atributom iz tog članka, kada smo zapravo prošli kroz njega. I vjerovatno ste već pogodili da je on odgovoran za lokaciju slike.
Postoji ukupno pet parametara za poravnanje:
- lijevo — lijevo poravnanje
- desno — desno poravnanje
- sredina — poravnajte sliku sa osnovnom linijom (vidjet ćete šta to znači u primjeru)
- top - gornja granica ove slike je poravnata po visini sa najvišim elementom u datom redu
- bottom — poravnajte donju ivicu slike sa tekstom
Pa, da ih ne navodimo ovdje, ali po tradiciji, sve ću pokazati na primjeru. Skinite gotov html dokument odavde i otvorite ga. Tamo ćete vidjeti 5 identičnih pasusa. Tamo umetnite slike sa opisanim atributima:
Pa, sada čuvamo naš dokument kao i obično i vidimo šta smo dobili. Pa? Vidite li razliku? Sada znate kako se ovi parametri razlikuju).
Granica
Atribut granice je postavljen da označava debljinu okvira na slici. I što je veći, to je okvir deblji. Pokušajte dodati ovaj atribut slici, ali stalno mijenjajte njenu vrijednost i sami ćete vidjeti koliko će okvir postati deblji.
Hspace i Vspace
Pa, pogledajmo najnovije atribute oznake img za danas. Prostor (engleski) se prevodi kao prostor, prostor, prostor (ključ) itd. Prefiksi H i V znače horizontalno i vertikalno. Ovdje ne bi trebalo biti nikakvih pitanja.
Dakle, šta ovi atributi rade? Oni postavljaju vertikalne i horizontalne margine od slike do okolnog teksta (ili drugog sadržaja). Odnosno, ako ne volite da slika bude preblizu tekstu, onda možete povećati udaljenost između njih. Pogledajmo kako ovo izgleda na primjeru.
Vidiš? Marge su se povećale i vertikalno i horizontalno. To je ono što smo htjeli.
Usput, ove slike možete umetnuti i kao zaglavlje za web stranice, napraviti slike kao linkove itd. O svemu ovome sam pricao.
Pa, generalno, izgleda da imam sve. Rekao sam vam osnove umetanja slika, ali ako želite naučiti HTML i CSS kao profesionalac, toplo preporučujem da preuzmete neverovatan kurs na ovu temu, gdje zahvaljujući ovom jeziku za označavanje i kaskadnim stilskim listovima možete lako kreirati tri vrste web stranica: vizit karte, blogove, online trgovine. Sve je ispričano jednostavnim i razumljivim jezikom. To je samo bomba!
Pa, pozdravljam se za danas. U samo nekoliko lekcija planiram vam održati posljednju lekciju o osnovama HTML-a, nakon koje ćemo sva stečena znanja objediniti u praksi i napraviti jednostavnu web stranicu od tri stranice. Generalno, sve će biti cool)
Pa, kako ne biste propustili sve najzanimljivije stvari na mom blogu, svakako se pretplatite na ažuriranja članaka. I naravno, pogledajte druge članke. Siguran sam da ćete pronaći mnogo korisnih informacija za sebe. Sretno ti. Vidimo se u drugim člancima. Ćao ćao!
Srdačan pozdrav, Dmitry Kostin
Teško je naći web stranicu na internetu koja ne sadrži slike, a to i ne čudi, jer su one glavni dio dizajna web stranice, što joj daje nezaboravan izgled. Dobar dizajn web stranice ključ je njegovog uspješnog razvoja. Za prikaz slika u html-u postoji samo jedna oznaka
.
1. Sintaksa oznake
Opis slike" src ="URL " [atributi ]>
Imajte na umu da je ova oznaka jednostruka i ne zahtijeva zatvaranje oznake .
Atribut src je obavezan. Koristi se za određivanje adrese prikazane slike. Možete odrediti apsolutni ili relativni URL. Ako ne navedete adresu ili je napišete sa greškom, slika se neće prikazati.
Atribut alt="opis" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.!}
Preostali atributi su opcioni; pogledat ćemo ih u nastavku. Prvo, dajmo jednostavan primjer izlaza slike u HTML.
2. Kako ubaciti sliku u html
Da biste umetnuli sliku u html, koristite oznaku
. Pogledali smo sintaksu malo više. Navedimo praktične primjere.
Primjer 2.1. Korištenje oznake
...Ovaj kod
U ovom primjeru smo naveli direktnu adresu slike sa slika na Yandex fotografijama. Najčešće se daju veze do slika koje se nalaze na istom URL-u. Na primjer, src="/img/kartinka.jpg", tj. relativna adresa je naznačena.
Moguće je postaviti nekoliko slika u nizu. Ako ne stanu u jednu liniju, automatski će preći na sljedeću.
Primjer 2.2. Prikaz nekoliko slika u html-u jedna za drugom
...Konvertuje se u sledeće na stranici:
Ako bismo postavili drugu sliku, ona bi bila na novom redu, jer se više ne bi uklapala u ovu.
Primjer 2.3. Korištenje alternativnog teksta (alt) u img
Preporučuje se uključivanje alternativnog teksta (atribut alt) u oznaku
, da se osigurate od slučaja da slika nije dostupna. Ispod je primjer korištenja zamjenskog teksta. U prvom slučaju nismo naveli veličinu slike, ali u drugom jesmo.
...Konvertuje se u sledeće na stranici:
Ako bismo postavili drugu sliku, ona bi bila na novom redu, jer se više ne bi uklapala u ovaj red.
Pogledajmo sada pobliže sve atribute oznaka
.
3. Atributi i svojstva oznake
1. Svojstvo align="parametar" - određuje poravnanje slike. Ova vrijednost također utiče na to kako će tekst teći oko slike. Može prihvatiti sljedeće parametre:
- lijevo - lijevo poravnanje
- sredina - poravnajte sredinu slike sa osnovnom linijom trenutne linije
- bottom - poravnajte donju ivicu slike sa okolnim tekstom
- top - gornja ivica slike je poravnata sa najvišim elementom tekuće linije
- desno - desno poravnanje
Primjer 3.1. Poravnavanje slike u html-u udesno
...Konvertuje se u sledeće na stranici:
2. Svojstvo alt="text" - подсказка/описание картинки. Выполняет сразу две важные функции:!}
- Prikazuje opis alata pri lebdenju
- Ako su slike onemogućene u pretraživaču, prikazuje se ovaj tekst
Ovaj atribut je također vrlo važan pri rangiranju slika u Yandex Images i Google Images. Treba ga dodati svakoj slici, jer je to jedan od faktora u algoritmima pretraživača.
Primjer 3.2. Izlaz slike u html sa okvirom (ivica)
...Konvertuje se u sledeće na stranici:
4. Svojstvo bordercolor="color" - postavlja boju ivice koja se obavija oko slike. Ima smisla samo ako je atribut granice veći od 0.
Primjer 3.3. Izlaz slike u html-u sa okvirom u boji
...Rezultat se može vidjeti iznad.
BilješkaAtributi border i bordercolor mogu se postaviti u CSS stilovima img:
...5. Svojstvo height="NUMBER" - postavlja visinu slike: u pikselima ili u postocima. Na primjer, ako slika ima veličinu 400x200, a odredimo visinu od 150 piksela, onda je komprimirana na 300x150 (25% manje), tj. proporcionalno.
6. Svojstvo width="NUMBER" - postavlja širinu slike: u pikselima ili u postocima. Na primjer, ako slika ima veličinu 1000x800, a širina je specificirana kao 1200 piksela, tada se automatski proširuje za 20% na 1200x960.
7. Svojstvo hspace="NUMBER" - postavlja horizontalno uvlačenje slike u pikselima od drugih html objekata.
8. Svojstvo vspace="NUMBER" - postavlja vertikalni prostor slike u pikselima od drugih html objekata.
BilješkaUmjesto hspace i vspace, savjetujem vam da koristite staru i provjerenu marginu (više o tome možete pročitati u lekciji o opisivanju html stilova). Dozvolite mi da vas ukratko podsjetim:
- margin-top: X px; (X - gornja uvlaka)
- margin-bottom: Y px; (Y - donja uvlaka)
- margin-left: L px; (L - lijevo uvlačenje)
- margin-desno: R px; (R - desna uvlaka)
Postavite uvlake od objekata u pikselima. Negativne vrijednosti su dozvoljene. Podrazumevano, ili nasljeđuje vrijednost pretka ili ima vrijednost 0.
Na primjer. Lijeva margina je 50 piksela, a gornja margina 10 piksela.
...Konvertuje se u sledeće na stranici:
U ovom primjeru, udubljenje na vrhu je bilo 10 piksela, a na lijevoj strani 50 piksela.
9. Svojstvo class="class_name" - možete dodijeliti klasu slici da biste postavili stil za sve slike ove klase.
4. Kako sliku napraviti linkom
Ovo pitanje se postavlja među mladim webmasterima. To je zapravo vrlo lako. Da biste to učinili, samo uokvirite oznaku
oznaka (link).
Na primjer
...5. Kako zaokružiti uglove slike
Dragi čitaoče, sada ste naučili mnogo više o html img oznaci. Sada vam savjetujem da pređete na sljedeću lekciju.
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 obavezna 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">
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. 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ć znate poravnati možete kontrolisati poravnanje slika u odnosu na druge elemente html stranice. Na atributu poravnati Postoji nekoliko 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 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.
Najbolji članci na ovu temu
